/*
Theme Name:   BfB Bitumen
Theme URI:    http://bfb-bitumen.de
Description:  Ein Design für BfB Bitumen
Version:      1.0
Author:       Steffen Gramberg
Author URI:   http://www.sdv-werbestudio.de
*/

/* Reset CSS */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}
ol, ul{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0}


/* BfB Main */
body {
background: #fefef4 url(images/bg.jpg) no-repeat top center;
font: normal 10px Arial, Tahoma, Verdana, sans-serif;
color: #333;
}

strong { font-weight: bold; }

#main {
margin: 60px auto 0px auto;
width: 996px;
height: 510px;
background: #d4d4d5 url(images/main_bg.jpg) top center no-repeat;
}

#footer {
text-align: right;
width: 610px;
height: 20px;
font: normal 10px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
}

#footer a {
color: #fff;
margin: 0 5px 0 5px;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
}


/* Container */
#left {
float: left;
width: 366px;
height: 510px;
overflow: hidden;
list-style: none;
}

#right {
float: right;
width: 630px;
height: 510px;
}


/* Logo */
#logo {
float: right;
width: 418px;
height: 107px;
}

#logo a {
display: block;
width: 418px;
height: 107px;
text-indent: -9999em;
background: transparent url(images/logo.jpg) no-repeat top right;
outline: none;
}


/* Navigation */
#navigation {
clear: right;
margin-left: 20px;
}

#navigation ul {
width:600px;
display:block;
list-style: none;
background-color: #5d5d5d;
position: absolute;
z-index: 99;
}

#navigation ul li {
float: left;
margin-right: 50px;
}

#navigation ul li a {
font: normal 14px/24px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
text-decoration: none;
}


/* second level */
#navigation ul li ul {
width:auto;
list-style: none;
position: absolute; 
margin: 0px 0px 0px -10px;
z-index: 88;
}

#navigation  ul li ul li {
clear: both;
height: 20px;
width: 100px;
background-color: #fff;
margin: 10px 0px -5px 0px;
padding-left: 10px;
border: 1px solid #6d6d6d;
}

#navigation ul li ul li.arrow {
background: #fff url(images/nav_arrow.jpg) top right no-repeat;
}

#navigation ul li ul li.current_page_item {

}

#navigation ul li ul li a {
font: normal 12px/20px Arial, Tahoma, Verdana, sans-serif;
color: #5a5a5a;
text-decoration: none;
}

#navigation ul li ul li a:hover {
color: #fff;
}

.active {
background: #0086cb url(images/nav_active.jpg) top right no-repeat;
color: #fff;
}


/* Content */
#content {
width: 550px;
height: 310px;
/* margin: 75px 0px 0px 20px; *** DELETED IN MEMORY OF JSCROLLPANE */
font: normal 12px/18px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
padding-right: 50px;
overflow: auto;
}

#left a {
display: block;
height: 44px;
width: 366px;
text-indent: -9999em;
outline: none;
cursor: pointer;
background: url(images/left_01.jpg) no-repeat;
}

#left div.pics_1 {
height: 466px;
overflow: hidden;
}

#left div.pics_2 {
height: 422px;
overflow: hidden;
}

#left div.pics_3 {
height: 378px;
overflow: hidden;
}

#left div.pics_4 {
height: 334px;
overflow: hidden;
}

#content a.gal {
display: block;
width: 90px;
height: 60px;
background-color: #fff;
margin: 0px 20px 20px 0px;
border: 1px solid #fff;
}

#content a.download {
text-decoration: none;
color: #fff;
border-bottom: 1px dotted #fff;
}

#content a.download img {
margin-top: 10px;
position: relative;
top: 3px;
}

/* Content 2 divs */
p.left_content {
	width: 275px;
	float: left;
}

p.right_content {
	width: 275px;
	float: right;
	margin-right: 15px;
}

.content_text {
	width: 550px;
}

h1 {
font: bold 20px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
margin-bottom: 20px;
}

h3 {
font: bold 14px/20px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
}

#content a {
text-decoration: none;
color: #fff;
border-bottom: 1px dotted #fff;
}

span.headline {
font: bold 14px/20px Arial, Tahoma, Verdana, sans-serif;
color: #fff;
}

#content  ul {
list-style: square outside;
margin: 5px 0px 20px 20px;
}

#content ul li {
line-height: 24px;
}

hr {
height: 1px;
background-color: #fff;
border: 0px;
margin: 20px 0px 20px 0px;
}

/* Galerie Auswahl */
#content ul#gallery {
list-style: none;
margin-left: 0px;
position: absolute;
}

#content ul#gallery ul {
list-style: none;
position: relative;
top: -44px;
left: 150px;
width: 200px;
}

#content ul#gallery ul li {
margin-bottom: 5px;
width: 150px;
}

#content ul#gallery ul li a{
padding: 2px 0px 2px 10px;
text-decoration: none;
background-color: #fff;
display: block;
color: #7c7c7c;
}

#content ul#gallery ul li a:hover{
padding: 2px 0px 2px 10px;
text-decoration: underline;
background-color: #fff;
display: block;
color: #7c7c7c;
}

ul.download-list {padding-top: 15px;}
ul.download-list li {list-style: none; margin-left: -15px;}