/* CSS Document for RolfundBernd.de */

* {margin: 0; padding: 0;}
body {font-size: 62.5%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; text-align: center;
	background: #312316 url(/images/bg_stripe.png) 0 100px repeat-x; margin: 0; padding: 0; height: 100%;}
img {border: none;}
a:link, a:visited {color: #369;}
a:hover {color: #036;}

/* =layout
================================================  */
#wrapper {margin: 0 auto; width: 860px; text-align: left;}
#content {position: relative; float: left; width: 570px; background: #fff url(/images/bg_content.png) bottom repeat-x; padding: 0 20px;}
#content h1 a {display: block; width: 356px; height: 65px; background: url(/images/logo.png) no-repeat; text-indent: -9999px; 
	text-decoration: none; margin: 20px 0 15px 0;}
#content h2 {font-size: 2em; color: #111;}
#content p {font-size: 1.3em; line-height: 1.9em; margin-bottom: 2em;}
#content p.legend {font-size: 1em;}
#content p b {font-size: 2em; color: #111; font-weight: bold;}
#content p img {float: left; margin-right: 30px;}
img#banner {width: 570px; height: 330px; margin-bottom: 2em;}
#footer {clear: both; margin-top: 30px;}
#footer p {font-size: 1em; color: #312316; text-align: center;}

/* =nav
================================================  */
#nav {position: absolute; width: 230px; height: 290px; top: 100px; list-style: none; margin: 20px 0 20px 610px;}
#nav a {display: block; font-size: 1.2em; color: #605346; height: 39px; line-height: 39px; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none; background: url(/images/arrow_off.png) 20px 50% no-repeat; padding-left: 40px; border-top: 1px solid #312316; 
	border-bottom: 1px solid #46341f;}
#nav a#top {border-top: 0;}
#nav a#bottom {border-bottom: 0;}
#index #nav li#button1, 
#philosophie #nav li#button2, 
#eppendorf #nav li#button3, 
#blankenese #nav li#button4,
#winterhude #nav li#button5, 
#preise #nav li#button6, 
#kontakt #nav li#button7 {background: #342516;}
#nav a:hover, 
#index #nav li#button1 a, 
#philosophie #nav li#button2 a,
#eppendorf #nav li#button3 a,
#blankenese #nav li#button4 a,
#winterhude #nav li#button5 a,
#preise #nav li#button6 a,
#kontakt #nav li#button7 a {color: #fff; background-image: url(/images/arrow_on.png);}
	
/* =teaser
================================================  */
.teaser {float: left; display: block; width: 170px; padding-left: 20px; text-decoration: none;}
.teaser img {width: 150px; height: 90px; margin-bottom: 10px;}
.teaser a {color: #000; text-decoration: none;}
.teaser h3 {font-size: 1.6em; line-height: 1.9em;}
.teaser p {color: #333;}

/* =side
================================================  */
#side {position: absolute; width: 230px; top: 460px; margin-left: 610px;}
#side h3 {font-size: 1.6em; font-weight: normal; color: #4c3e30; border-bottom: 1px solid #4c3e30; margin-bottom: 20px;}
#side h4 {font-size: 1.1em; color: #605346;}
#content #side p {font-size: 1.1em; color: #4c3e30;}
#side a:link, 
#side a:visited {color: #4c3e30;}
.thumb img {width: 50px; height: 50px; border: 1px solid #8c8374; margin: 0 23px 23px 0;}
.thumb:hover img {border-color: #fff;}

/* =pricelist
================================================  */
table {width: 100%; font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; border-top: 1px solid #b7ad7b; 
	margin-bottom: 40px;}
table th, 
table td {vertical-align: top; padding: 5px;}
table th {color: #000;}
table tr.alt {background: #fff1ab;}
table th em {font-size: .8em; line-height: 1.2em; font-weight: normal; color: #c7995d; font-style: normal;}

/* =form
================================================  */
form {background: #fff1ab; padding: 20px; border-top: 1px solid #b7ad7b; margin: 10px 0;}
form label {display: block; font-size: 1.2em; font-weight: bold; color: #111; margin-bottom: 20px;}
form label.error {color: #c00;}
form input, 
form select, 
form textarea {display: block; font-size: 1.5em; width: 400px;}
form select {width: 200px;}
form input#submit {width: auto;}
#kontakt em {font-style: normal; color: #c00;}

/* =other
================================================  */
#map {float: right; width: 230px; height: 230px; margin-bottom: 20px; border: 1px solid #8c8374;}
#video_button {position: absolute; top: 20px; right: -140px; width: 120px; height: 20px; color: #fff; font-size: 1em; text-align: center; text-transform: uppercase; text-decoration: none; line-height: 20px; letter-spacing: .1em; background: url(/images/video_button.png) 0 0 no-repeat;}
img#bottles {margin-bottom: -10px;}
br.clear {clear: both;}
.phone {background: url(/images/phone.png) 0 50% no-repeat; padding-left: 22px;}