/* =stylesheet for wilhelm-albers-hamburg.de
================================================ */
* {margin: 0; padding: 0;}
body {font-size: 62.5%; font-family: "Helvetica Neue", Arial, serif; color: #222; text-align: center; background: #ebe5d8 url(../images/body.jpg) 0 -1px repeat-x; margin: 0; padding: 0; height: 100%;}	
img {border: none;}
a {color: #039;}

/* =header
================================================ */
#headerWrap {position: relative; width: 100%; height: 220px;}
#header {position: relative; width: 960px; height: 180px; background: url(../images/header.jpg) 0 21px no-repeat; margin: 0 auto; z-index: 10;}
#header h1 a {position: absolute; top: 40px; left: 0; width: 551px; height: 111px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; text-decoration: none; border: none;}
#header h2 {position: absolute; top: 105px; left: 120px; font-size: 1.3em; font-weight: normal; color: #fff;}

/* =subnav
================================================ */
#subnav {position: absolute; top: 0; right: 50px; list-style: none; z-index: 5;}
#subnav li {float: left; padding: 0 1em;}
#subnav li a {font-size: 1.2em; line-height: 20px; color: #69c; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;}
#subnav li a:hover {color: #fff; text-decoration: underline;}

/* =img
================================================ */
#img {position: absolute; top: 9px; right: -5px; width: 313px; height: 269px; z-index: 1; background: url(../images/stack.png) no-repeat; border: 0;}
#img span {position: absolute; top: 32px; right: 27px; width: 260px; height: 205px; background-repeat: no-repeat;}
#page0 #img span {background: url(../images/img0.jpg);}
#page1 #img span {background: url(../images/img1.jpg);}
#page2 #img span {background: url(../images/img2.jpg);}
#page3 #img span {background: url(../images/img3.jpg);}
#page4 #img span {background: url(../images/img4.jpg);}
#page5 #img span {background: url(../images/img5.jpg);}

/* =nav
================================================ */
#nav {position: absolute; width: 100%; z-index: 0; left: 0; bottom: 0; background: #183682 url(../images/nav_off.png) bottom repeat-x;}
#nav ul {width: 900px; margin: 0 auto; list-style: none;}
#nav li {display: inline;} /* IE6 fix */
#nav a {float: left; display: block; height: 41px; font: bold 1.2em/41px "Helvetica Neue", Arial, sans-serif; color: #69c; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; padding: 0 13px;}
#nav a:hover {color: #fff; background: #132b68 url(../images/nav_hover.png) bottom repeat-x;}
#page0 #nav li#button0 a, 
#page1 #nav li#button1 a, 
#page2 #nav li#button2 a,
#page3 #nav li#button3 a,
#page4 #nav li#button4 a,
#page5 #nav li#button5 a,
#page6 #nav li#button6 a {background: #ebe5d8 url(../images/nav_on.png) bottom repeat-x; color: #000; padding: 0 12px; border-left: 1px solid #fff; border-right: 1px solid #fff;}

/* =content
================================================ */
#content {position: relative; margin: 45px auto 40px auto; width: 900px; text-align: left; overflow: hidden;}
#content h2 {font-family: "Helvetica Neue", Arial, sans-serif; color: #000; font-size: 2.6em; font-weight: normal; margin: 0 0 20px 0;}

/* =main
================================================ */
#main p {
	font-size: 1.5em;
	line-height: 1.7;
	margin-bottom: 1em;
}
#main p.intro {font-size: 1.5em; line-height: 1.7em;}
#main h3 {font: bold 1.2em/2 "Helvetica Neue", Arial, sans-serif; color: #000; text-decoration: none; text-transform: uppercase; letter-spacing: .1em;}
#main h3.fill {display: inline; background: #fff; padding: .5em 10px;}
	
/* =button
================================================  */	
a.button {float: left; display: block; font-size: 12px; color: #fff; text-decoration: none; height: 22px; background: url(../images/button_right.png) top right no-repeat; padding-right: 21px;}
a.button span {display: block; line-height: 12px; background: url(../images/button_left.png) no-repeat; padding: 5px 0 5px 12px;}

/* =images
================================================ */
img.shade {width: 240px; height: 80px; background: #fff url(../images/shade.png) bottom center no-repeat; padding: 10px 10px 18px 10px; margin-bottom: 10px;}
img.thumb {width: 100px; height: 100px; background: #fff url(../images/shade_thumb.png) bottom center no-repeat; padding: 5px 5px 10px 5px; margin: 10px 20px 10px 0;}
img.map {height: 240px;}

/* =columns
================================================ */
.col {float: left; width: 270px; margin: 20px 30px 30px 0; text-decoration: none;}
.wideCol {float: left; width: 600px; margin: 20px 0 0 0;}

/* =service
================================================ */
#service {margin: 30px 0;}
#service th {width: 25%; font: bold 1.2em/2 "Helvetica Neue", Arial, sans-serif; color: #000; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; 
	background: url(../images/arrow.png) 0 50% no-repeat; padding-left: 25px;}
#service td {font-size: 1.3em; line-height: 1.7em; vertical-align: top; padding: 0 10px 0 25px;}

/* =projects
================================================ */
#projects {margin: 30px 0;}
#projects table {border-collapse: collapse;}
#projects tr {border-top: 1px solid #fff;}
#projects tr.alt {background: #f2efe8;}
#projects th, #projects td {font-size: 1.1em; line-height: 1.5; vertical-align: top; padding: 5px 10px;}
#projects th {color: #000;}
#projects tr#head th {font-weight: normal; color: #fff; text-transform: uppercase; letter-spacing: .1em; background: #0c2e82 url(../images/nav_off.png) 0 50% repeat-x; 
	border-top: 1px solid #8e9dc2; border-bottom: 1px solid #050e28;}

/* =contact
================================================ */
#contact {width: 550px; background: #fff url(../images/shade_form.png) bottom no-repeat; padding: 10px 0 18px 0; overflow: auto;}
#contact div.input {float: left; width: 249px; padding: 0 10px; margin-bottom: 10px;}
#contact div.textarea {float: left; width: 518px; padding: 0 10px;}
#contact label {font-size: 1.1em;}
#contact input.text, #contact textarea {width: 100%; font-size: 1.6em; background: #d8d3c6; padding: 2px; border: 1px solid #999; border-color: #ccc #999 #999 #ccc;}
#contact input#submit {margin: 10px 0 10px 10px;}
#contact em {color: #c00;}

/* =footer
================================================ */
#footer {margin: 0 auto; width: 900px; border-top: 5px solid #381d00;}
#footer p {font-size: 1.2em; line-height: 40px; color: #333; text-align: left;}
#footer p#left {float: left; background: url(../images/footer_logo.png) 0 50% no-repeat; padding-left: 30px;}
#footer p#right {float: right;}