/* 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: #393918 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 {float: left; width: 570px; background: #fff url(../images/bg_content.png) bottom repeat-x; padding: 0 20px;}
#content h1 a {display: block; width: 890px; 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 big {font-size: 1.6em; 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.3em; color: #605346; height: 39px; line-height: 39px; letter-spacing: .2em; 
	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: #684A2D;
	border-bottom: 1px solid #684A2D;
	margin-bottom: 20px;
}
.side h4 {font-size: 1.1em; color: #605346;}
#content .side p {
	font-size: 1.1em;
	color: #684A2D;
}
.side a:link, .side a:visited {
	color: #684A2D;
}
.heads a img {width: 50px; height: 50px; border: 1px solid #8c8374; border-color: #8c8374 #171108 #171108 #8c8374; margin: 0 23px 23px 0;}
.heads a:hover img {border-color: #171108 #8c8374#8c8374 #171108;}
.map img {background: url(../images/bg_map.png) 50% 50% no-repeat; padding: 4px;}

/* =pricelist
================================================  */
table {width: 100%; font: 1.2em "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left; border-top: 4px 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: 4px 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
================================================  */
img#bottles {margin-bottom: -10px;}
br.clear {clear: both;}
.phone {background: url(../images/phone.png) 0 50% no-repeat; padding-left: 22px;}

#fl_right {
float: right;
}