/* CSS */

/*_____ Positionierung _____*/ 

body { text-align: center; min-width: 900px; margin: 62px 0; background-color: #444; }
#scope, #welcome { width: 880px; margin: 0 auto; text-align: center; position: relative; }
#header { }
#article, #vertical { clear: both; width: 880px; position: relative; margin-bottom: 30px; }
#metadata { margin-top: 30px; }
#branding { float: left; width: 200px; text-align: right; }
#iptc { float: right; width: 500px; padding-right: 100px; text-align: left; }
#more, #vertical #imgpart { padding-bottom: 60px; } /* bottom elements */

#left a, #right a { display: block; width: 370px; height: 560px; position: absolute; margin: 15px; overflow: hidden; }
#left a { text-align: left; top: 0; left: 0; }
#right a { text-align: right; top: 0; left: 54%; }

#footer { clear: both; position: absolute; top: -36px; left: 0%; width: 880px; text-align: left; }
#footer #logo { float: left; width: 275px; }
#footer span { float: right; width: 60px; text-align: right; padding: 0 2px 0 0; }


/*_____ Bild-Navigation _____*/ 

#left a:hover { background-image: url(http://www.stadtbild.ch/grafik/prev-trans.png); }
#right a:hover { background-image: url(http://www.stadtbild.ch/grafik/next-trans.png); }
#vertical #right a:hover { background-image: url(http://www.stadtbild.ch/grafik/vertical-next-trans.png); }

#imgpart a img { position: absolute; top: 0px; left: 0px; border: none; }
#imgpart a:hover img { top: 0px; left: -344px !important; }


/*_____ Erscheinung _____*/

img#main { border: 15px solid white; width: 840px; height: 560px; background-color: gray; }

#metadata { color: #707070; }

h1, h2, h3, div, #iptc div, dl, dd, dt, #footer, #welcome ul { 
	font: 13px "Lucida Grande", Candara, Helvetica, Tahoma, Arial, sans-serif; margin: 0; line-height: 19px; }
h1 { font-size: 14px; color: #ddd;  }

em { font-style: normal; }

dl { margin-top: 26px; }
dt { text-transform: uppercase; font-size: 9px; letter-spacing: 1px; font-weight: bold;  }
dd { padding-left: 19px;  } 
#article dd { padding-left: 90px; position: relative; top: -20px;}
#article dt { margin-bottom: 0; }
#vertical dd { margin-bottom: 21px; }

#logo h1, #footer h2, #footer a, #footer { color: #191919; font-size: 13px; } 
#logo em { font-weight: bold; font-style: normal; margin-left: 1px; }
#logo h1, #footer h2 { display: inline; }

#branding { font: 9px "Lucida Grande", Arial, Verdana, sans-serif;  line-height: 19px; color: #2a2a2a; border-right: 1px solid #404040; padding: 0 20px 20px 0; margin: 0; }
#branding em { font: 14px "Chaparral Pro", Garamond, "Times New Roman", Georgia, Times, Arial, Tahoma, Verdana, sans-serif; font-style: normal; line-height: 19px; }
#branding p { padding: 2px 0 8px 0; margin: 0;}

#text { float: left; margin-top: 20px; padding-left: 50px; color: #bbb; width: 500px; text-align: left;  }
#text h4 { color: #fff; }
#text p { padding-left: 2em; }
#text strong { font-weight: bold; color: #eee; }
#text h1 { width: 350px; }
#translation { float: right; width: 120px; text-align: right; line-height: 34px; padding-top: 3px; }

/*_____ Hochformat _____*/

#vertical #imgpart { width: 590px; height: 870px; float: right; }
#vertical #metadata { width: 250px; float: left; margin-top: 16px; overflow: hidden; }
#vertical #iptc { width: 250px; padding-right: 0px; }
#vertical #branding { float: none; width: 250px; text-align: right; margin: 0; padding: 0 0 32px 0; } 
#vertical img#main { width: 560px; height: auto; }

#vertical #left a, #vertical #right a { width: 260px; }
#vertical #left a { left: 33%; }
#vertical #right a { text-align: right; top: 0; left: 67%; }
#vertical #right a:hover { background-position: right; } /* -112px 0 */

#vertical #branding { border-right: none; }
#vertical #iptc div { padding: 10px 0 0 20px; }

#welcome #metadata h1, #welcome #metadata h2, #text h1 { text-align: left; font-size: 24px !important; line-height: 34px; 
	font-family: "Lucida Grande", Candara, Myriad, "Myriad Pro", Helvetica, Tahoma, Arial, sans-serif; }
#welcome #branding { margin-top: 24px; }
#welcome em { margin-left: 1px; }
#welcome ul { margin-top: 34px; padding: 0 0 0 3px; }
#welcome li { font-size: 14px; padding: 0px; list-style: none; text-align: left; line-height: 24px; }

#welcome h1 a, #welcome #metadata ul li a { color: white; }
#welcome #metadata a:hover { color: #ccc; }
#welcome #metadata a:active { color: black; }

#welcome img#main { width: 560px; height: auto !important; }

/*_____ Vorschau-Bilder _____*/

#contactsheet {clear: both; width: 880px; text-align: left; padding-top: 20px; }
#contactsheet div { width: 180px; height: 180px; float: left; overflow: hidden; margin: 0 36px 36px 0; text-align: center; position: relative; 
	/* border: 1px dotted #666; */ }
#contactsheet div img { border: 8px solid #ddd; }
#contactsheet div span { position: absolute; top: 110px; left: 4px; width: 156px; background-color: white; padding: 8px; font: 11px "Lucida Grande", Arial; }
#contactsheet div a span { display: none; }
#contactsheet div a:hover span { display: block; color: black;}
#contactsheet div a:hover img { border-color: white; }
#sheetdisplayed h1 { text-align: left; padding-left: 3px; }
#sheetdisplayed strong { text-transform: capitalize; font-weight: normal; color: white; border-bottom: 3px solid #a1a1a1; padding-bottom: 3px;}
#searchbox p { text-align: left; padding-left: 3px; margin: 0 0 1em 0; font-size: 12px; }
input:first-child { background-color: #666; color: white; border: none; padding: 3px; margin-right: 5px; }


/*_____ Links _____*/

a { text-decoration: none; color: #7ddef2; }
h1#title a { text-decoration: none; color: white; }


#footer ul { display: inline; margin: 0; width: 520px;  }
#footer li { display: inline; }
#footer ul a { text-decoration: none; padding: 0 15px; float: left; font-weight: normal; }
#footer li#about { float: right; margin-right: -1.5em; }

#branding a { color: #2a2a2a; }

a:hover, #footer a:hover, #branding a:hover { color: white; }
a:active, #footer a:active , #branding a:active { color: #ccc; padding-top: 1px;}

#welcome #footer span a:hover { color: orange; }

div#logo:hover h1 a { color: white; }
div#logo:hover h2 a, div#logo h2 a:hover { color: #707070; }


/*_____ Debug _____

div, p, span, h2 { border: 1px dashed lightgray; margin-bottom: 1em; } */

/* nomenclature adapted from html 5, http://www.alistapart.com/articles/previewofhtml5/ 
structure adapted from CSS mastery, 3 column floated layout:
scope=wrapper header=branding article=content other=mainnav footer=footer main=maincontent aside=secondarycontent */