/*

Theme Name: BOKIFLEX 
Theme URI: http://www.kiefergmbh.de/
Description: scalable css-theme - version for msie7, gecko and others
Version: 1.0
Author: Torsten Naujoks from www.websmith.de
Copyright: Torsten Naujoks, any usage without permission is strongly prohibited
Date: 2006.05.23

Color table:
-------------------------------------------------------
white:						255 255 255			#FFFFFF
black:						000 000 000			#000000
almost black:				037 038 037			#252625
almost black light border:	102 102 102			#666666
silver:						233 235 231			#E9EBE7
bordeaux:					180 018 006			#B41206
bleedorange:				225 024 012			#E1180C
orange:						249 121 008			#F97908
yellow:						255 202 000			#FFCA00

*/



body{
font-family:			Verdana, Arial, Helvetica, sans-serif;
background:				#ffffff url(/layout/background_media.gif) repeat-x;
padding:				0px;
margin:					0px;
}

body#plain{
background:				#ffffff url(/layout/background_plain.gif) repeat-x;
}

body#product{
background:				#ffffff url(/layout/background_media_product.gif) repeat-x;
}

a{
color:					#E1180C;
text-decoration:		none;
}

a:hover{
color:					#E1180C;
text-decoration:		underline;
}



/* header */

#header{
position:				absolute;
top:					0px;
left:					0px;
background:				url(/layout/background_header.gif) no-repeat;
height:					82px;
width:					525px;
}

#header img{
margin:					0px 0px 0px 51px;
}



/* horizontal navbar on top, in general */

#navbar{
position:				absolute;
top:					82px;
left:					0px;
height:					20px;
width:					auto;
z-index:				1;
margin:					0px 0px 2px 0px;
background:				url(/layout/background_navbar.gif) no-repeat;
}

#navbar a, #navbar strong, #navbar em{
font-size:				11px;
font-weight:			300;
color:					#E9EBE7;
text-decoration:		none;
}



/* horizontal navbar items */

#navbar ul#nav{
list-style:				none;
text-align:				left;
margin:					0px 0px 0px 55px;
padding:				0px;
width:					auto;
}

#navbar ul#nav li{
float:					left;
position:				relative;
padding:				0px 24px 2px 0px;
cursor:					default;
width:					auto;
}

#navbar ul#nav li:hover{
padding:				0px 24px 2px 0px;
}

#navbar ul#nav li ul li:hover{
padding:				0px;
}

#navbar ul#nav li a{
line-height:			19px;
height:					20px;
display:				block;
color:					#E9EBE7;
}

#navbar ul#nav li a:hover, #navbar ul#nav li strong, #navbar ul#nav li b{
line-height:			19px;
height:					20px;
display:				block;
color:					#FFCA00;
}



/* vertical navbar items */

#navbar ul#nav li ul{
display:				none;
position:				absolute;
top:					100%;
left:					0;
font-weight:			300;
background:				#252625;
border-right:			1px solid #666666;
margin:					0px 0px 0px -9px;
padding:				0px;
}

#navbar ul#nav li:hover ul, #navbar ul#nav li.over ul{
display:				block;
}

#navbar ul#nav li>#navbar ul#nav li ul{
top:					auto;
left:					auto;
}

#navbar ul#nav li ul li{
display:				block;
float:					none;
background:				transparent;
border-bottom:			1px solid #666666;
margin:					0px;
padding:				0px;
width:					180px;
}

#navbar ul#nav li ul.xl li{
width:					214px;
}

#navbar ul#nav li ul li a{
display:				block;
font-weight:			300;
color:					#E9EBE7;
background:				#252625;
border-left:			5px solid #666666;
margin:					0px;
padding:				0px 0px 0px 10px;
}

#navbar ul#nav li ul li a:hover{
display:				block;
font-weight:			300;
color:					#FFCA00;
background:				#000000;
border-left:			5px solid #E1180C;
margin:					0px;
padding:				0px 0px 0px 10px;
}

#navbar ul#nav li ul li b, #navbar ul#nav li ul li strong{
font-size:				11px;
display:				block;
font-weight:			300;
color:					#FFCA00;
background:				#252625;
border-left:			5px solid #666666;
margin:					0px;
padding:				0px 0px 0px 10px;
}

#navbar ul#nav li ul li strong{
font-style:				normal;
color:					#F97908;
background:				#000000;
}



/* mediabar below navbar */

#media{
position:				absolute;
top:					105px;
height:					165px;
width:					100%;
padding:				0px 0px 0px 0px;
overflow:				hidden;
}

#media.silver{
background:				#E9EBE7 url(/layout/background_media_silver.gif) repeat-x;
}

#media.bordeaux{
background:				#B41206 url(/layout/background_media_bordeaux.gif) repeat-x;
}

#media div{
position:				absolute;
height:					165px;
overflow:				hidden;
}



/* images within category overviews */

#media div#m3a{
top:					0px;
left:					0px;
width:					33%;
border-right:			3px solid #000000;
}

#media div#m3z{
top:					0px;
right:					0%;
width:					33%;
border-left:			3px solid #000000;
}

#media div#m3a a{
display:				block;
margin:					-20%;
}



/* images within product presentations */

#media div#m1a{
top:					0px;
left:					0px;
width:					50%;
border-left:			0px;
}

#media div#m1z{
top:					0px;
right:					0px;
width:					50%;
border-left:			3px solid #000000;
}

#media div#m2a{
top:					0px;
left:					0px;
width:					25%;
}

#media div#m2b{
top:					0px;
left:					25%;
width:					25%;
border-left:			3px solid #000000;
}

#media div#m2z{
top:					0px;
right:					-5px;
width:					50%;
border-left:			3px solid #000000;
}

#media div#m2z div#m2menu{
top:					9px;
left:					50%;
margin:					0px 0px 0px -177px;
padding:				0px 0px 0px 0px;
width:					180px;
}

#media div#m2z div#m2menu a{
font-size:				12px;
font-style:				italic;
font-weight:			300;
text-decoration:		none;
color:					#FFFFFF;
background:				url(/layout/arrow_spot_bokimobile.gif) 0px 0px no-repeat;
display:				block;
padding:				0px 0px 0px 20px;
}

#media div#m2z div#m2menu a:hover{
font-size:				12px;
font-style:				italic;
font-weight:			300;
text-decoration:		none;
color:					#000000;
background:				url(/layout/arrow_spot_bokimobile.gif) 0px -17px no-repeat;
display:				block;
padding:				0px 0px 0px 20px;
}

#media div#m2z div#m2menu a#mob1{
margin:					2px 0px 0px 9px;
}

#media div#m2z div#m2menu a#mob2{
margin:					2px 0px 0px 5px;
}

#media div#m2z div#m2menu a#mob3{
margin:					2px 0px 0px 1px;
}

#media div#m2z div#m2menu a#mob4{
margin:					2px 0px 0px 3px;
}

#media div#m2z div#m2menu a#mob5{
margin:					2px 0px 0px 5px;
}

#media div#m2z div#m2menu a#mob6{
margin:					2px 0px 0px 8px;
}

#media div#m2z div#m2menu a#mob7{
margin:					2px 0px 0px 11px;
}

#media div#m2z div#m2menu a#mob8{
margin:					2px 0px 0px 14px;
}

#media div#m2z div#m2menu a#mob9{
margin:					2px 0px 0px 17px;
}



/* horizontal descriptionbar for products below mediabar */

#descriptionbar{
position:				absolute;
top:					271px;
left:					0px;
height:					24px;
width:					100%;
font-size:				17px;
font-weight:			900;
font-style:				italic;
text-decoration:		none;
line-height:			22px;
color:					#E9EBE7;
background:				url(/layout/background_navbar.gif) 0px 2px no-repeat;
margin:					0px;
overflow:				hidden;
}

#descriptionbar img{
padding:				0px 14px 0px 53px;
float:					left;
}

#descriptionbar img.lk{
cursor:					pointer;
}

#descriptionbar a{
text-decoration:		none;
color:					#E9EBE7;
background:				url(/layout/arrow_descriptionbar.gif) 0px 0px no-repeat;
margin:					0px 14px 0px 0px;
padding:				0px 4px 0px 17px;
float:					left;
}

#descriptionbar a:hover{
text-decoration:		none;
color:					#FFCA00;
background:				url(/layout/arrow_descriptionbar.gif) 0px -24px no-repeat;
margin:					0px 14px 0px 0px;
padding:				0px 4px 0px 17px;
float:					left;
}




/* content below navbar, mediabar or descriptionbar */

#content{
position:				absolute;
top:					275px;
font-size: 				12px;
color:					#484948;
padding:				14px 56px 3px 56px;
}

body#plain #content{
position:				absolute;
top:					104px;
}

body#product #content{
position:				absolute;
top:					297px;
}

#content h1{
font-size:				18px;
margin:					7px 0px 0px 0px;
padding:				0px;
color:					#F97908;
}

#content .overview h1{
margin:					0px;
}

#content h2{
font-size:				14px;
margin:					15px 0px -4px 0px;
padding:				0px;
color:					#252625;
}

#content h3{
font-size:				12px;
margin:					15px 0px 0px 0px;
padding:				0px;
color:					#252625;
}

#content p{
line-height:			17px;
margin:					7px 0px 8px 0px;
padding:				0px;
}

#content blockquote{
line-height:			17px;
margin:					7px 0px 8px 36px;
padding:				0px;
}

#content ul{
margin:					0px;
}

#content ul li{
list-style-type:		square;
line-height:			17px;
padding:				0px 0px 7px 0px;
}



/* table on homepage or pages without mediabar within content */

#content table.home{
margin:					7px 0px -3px 0px;
}

#content td.homeleft, #content td.homeright, #content td.halfleft, #content td.halfright{
line-height:			17px;
width:					48%;
}

#content td.homemid, #content td.halfmid{
width:					4%;
}

#content table td h2{
line-height:			21px;
color:					#252625;
margin:					0px 0px -4px 0px;
padding:				0px;
color:					#252625;
}

#content table.home td h2, #content table.overview td h2{
height:					29px;
background:				url(/layout/background_h2.gif) repeat-x;
}

#content table.overview h2.h2abs{
margin:					15px 0px -4px 0px;
}

#content td h2 img{
padding:				0px 7px 0px 0px;
float:					left;
}

#content table.home a{
text-decoration:		none;
color:					#252625;
}

#content table.home a:hover{
text-decoration:		none;
color:					#E1180C;
}

#content tr.justy td{
font-size:				1px;
line-height:			1px;
height:					1px;
}

#content table.half{
margin:					7px 0px 8px 0px;
background:				url(/layout/ruler_vertical.gif) center repeat-y;
}

#content table.picandtext{
margin:					7px 0px 8px 0px;
}

#content table.picandtext td.pic{
width:					258px;
padding:				8px 0px 0px 0px
}

#content table.picandtext td.map{
width:					363px;
padding:				8px 0px 0px 0px
}

#content table.picandtext td.partner p{
margin:					7px 0px 8px 27px;
}

#content table.picandtext td.partner h4{
font-size:				12px;
font-weight:			300;
text-decoration:		underline;
margin:					7px 0px -3px 17px;
}

/* table on productpages within content */

#content table.overview{
margin:					7px -56px 8px -56px;
}

#content table.overview td.overviewleft{
padding:				0px 0px 0px 56px;
}

#content table.overview td.overviewleft p{
padding:				0px 0px 2px 0px;
}

#content table.overview td.overviewleft p.explosion, #content table.overview td.overviewleft p.subspec{
margin:					7px 0px 10px 0px;
padding:				0px 10px 0px 0px;
clear:					both;
}

#content table.overview td.overviewleft p.explosion img, #content table.overview td.overviewleft p.subspec img{
float:					left;
padding:				0px;
margin:					0px 10px 0px 0px;
}

#content table.overview td.overviewleft p.subspec strong{
font-size:				13px;
font-weight:			900;
padding:				0px 0px 4px 0px;
display:				block;
}



/* vertical bar with grey colored caption */

#content table.overview td.overviewright{
width:					33%;
}

#content table.overview td.overviewright div.boxed{
background:				transparent url(/layout/boxed_outer.gif) no-repeat;
margin:					-1px 56px 18px 0px;
}

#content div#bulky{
margin:					-1px 56px 0px 0px;
}

#content div.boxed div{
background:				transparent url(/layout/boxed_inner.gif) no-repeat top right;
}

#content div.boxed div.boxedfooter{
font-size:				2px;
line-height:			2px;
height:					2px;
background:				transparent url(/layout/boxed_footer.gif) repeat-x;
margin:					0px 2px 0px 1px;
}

#content div.boxed div.flexteaser{
background:				no-repeat top center;
margin:					-10px 3px 0px 2px;
cursor:					pointer;
}

#content div.boxed h4{
height:					24px;
font-size:				13px;
line-height:			24px;
margin:					0px 0px 10px 0px;
padding:				0px 0px 0px 10px;
color:					#E9EBE7;
}

#content div.boxed h4 a{
color:					#E9EBE7;
}

#content div.boxed h5{
font-size:				12px;
font-weight:			300;
line-height:			17px;
margin:					0px 10px 0px 10px;
padding:				0px 0px 3px 0px;
background:				transparent url(/layout/boxed_footer.gif) bottom repeat-x;
}

#content div.boxed p{
margin:					3px 10px 10px 10px;
padding:				0px 7px 0px 0px;
}

#content div.boxed li{
margin:					0px 0px 0px 0px;
padding:				0px 7px 7px 0px;
}



/* table on productpages for data display */

#content table.specs{
background:				transparent url(/layout/table_outer.gif) no-repeat;
}

#content table.specs th, #content table.userlist th{
height:					24px;
font-size:				13px;
line-height:			24px;
text-align:				left;
color:					#E9EBE7;
background:				transparent url(/layout/table_caption_inner.gif) no-repeat right top;
margin:					0px 0px 10px 0px;
padding:				0px 0px 0px 10px;
}

#content table.specs td.specsldata, #content table.specs td.specsldatalast{
font-size:				12px;
line-height:			17px;
background:				transparent url(/layout/table_data_inner_left.gif) no-repeat left bottom;
padding:				2px 10px 3px 10px;
}

#content table.specs td.specsldatalast{
background:				transparent url(/layout/table_data_inner_left_last.gif) no-repeat left bottom;
}

#content table.specs td.specsrdata, #content table.specs td.specsrdatalast{
font-size:				12px;
line-height:			17px;
background:				transparent url(/layout/table_data_inner_right.gif) no-repeat right bottom;
padding:				2px 10px 3px 10px;
}

#content table.specs td.specsrdatalast{
background:				transparent url(/layout/table_data_inner_right_last.gif) no-repeat right bottom;
}

#content table.specs tr.specsfooter{
height:					2px;
font-family:			sans-serif;
font-size:				2px;
font-weight:			300;
line-height:			2px;
}



/* table on productpages for data display */

#content table.t20{
width:					100%;
margin:					7px 0px 8px 0px;
}

#content table.t20 td{
line-height:			20px;
padding:				0px 0px 0px 0px;
}



/* black red gold - made in germany */

#content h1 em{
color:					#252625;
}

#content h1 em span{
color:					#E1180C;
}

#content h1 em u{
text-decoration:		none;
color:					#FFCA00;
}



/* the forms */

#content form.mainform{
width:					100%;
color:					#ee2625;
margin:					28px 0px 28px 0px;
}

#content form.mainform label{
width:					33%;
padding:				2px 0px 0px 21px;
display:				block;
float:					left;
}

#content form.mainform input{
height:					18px;
width:					44%;
padding:				1px 2px 0px 2px;
border:					1px solid #999999;
}

#content form.mainform input.submit{
height:					27px;
width:					213px;
background:				transparent;
border:					0px;
margin:					21px 0px 0px 70px;
padding:				0px;
cursor:					pointer;
}

#content form.mainform input#callback{
background:				transparent url(/layout/callback.gif) 0px -27px no-repeat;
display:				block;
}

#content form.mainform input#callback:hover{
background:				transparent url(/layout/callback.gif) 0px 0px no-repeat;
display:				block;
}
#content form.mainform input#prospekt{
background:				transparent url(/layout/prospekt.gif) 0px -27px no-repeat;
display:				block;
}

#content form.mainform input#prospekt:hover{
background:				transparent url(/layout/prospekt.gif) 0px 0px no-repeat;
display:				block;
}

#content form.mainform input#kontakt{
background:				transparent url(/layout/kontakt.gif) 0px -27px no-repeat;
display:				block;
}

#content form.mainform input#kontakt:hover{
background:				transparent url(/layout/kontakt.gif) 0px 0px no-repeat;
display:				block;
}

#content form.mainform input#cka{
background:				transparent url(/layout/cka.gif) 0px -27px no-repeat;
display:				block;
}

#content form.mainform input#cka:hover{
background:				transparent url(/layout/cka.gif) 0px 0px no-repeat;
display:				block;
}

#content form.mainform input#adm{
background:				transparent url(/layout/admin.gif) 0px -27px no-repeat;
display:				block;
}

#content form.mainform input#adm:hover{
background:				transparent url(/layout/admin.gif) 0px 0px no-repeat;
display:				block;
}

#content form.mainform table{
margin:					-17px 0px 0px 0px;
}

#content form.mainform table table{
margin:					0px 0px 0px -4px;
}

#content form.mainform td{
line-height:			17px;
padding:				4px 0px 4px 0px;
}

#content form.mainform td input{
width:					100%;
}

#content form.mainform td.cbx{
width:					20px;
}

#content form.mainform td.cbx input{
height:					12px;
width:					12px;
}

#content form.mainform td textarea{
height:					102px;
width:					100%;
padding:				1px 2px 0px 2px;
border:					1px solid #999999;
}

#content form.mainform td.desc{
width:					33%;
padding:				0px 0px 0px 21px;
}

#content form.mainform td.descm{
padding:				7px 0px 0px 21px;
}

#content form.mainform td.sep{
font-weight:			900;
color:					#484948;
padding:				17px 0px 7px 0px;
}

#content form.mainform p.ok input{
font-weight:			900;
background:				transparent;
border:					0px;
padding:				2px 0px 0px 7px;
}

#content form.mainform p.wrong input{
font-weight:			900;
}

#content table.return{
width:					100%;
margin:					17px 0px 17px 17px;
}

#content table.return td{
line-height:			17px;
padding:				2px 0px 1px 0px;
}

#content table.return td.desc{
font-weight:			600;
}

#content p.homelist{
margin:					7px 0px 8px 27px;
}

#content p.folderlist{
margin:					17px 0px 8px 47px;
}

#content p.sitelist{
margin:					7px 0px 8px 68px;
}

#content p.filelist{
margin:					7px 0px 8px 27px;
}

#content p.homelist img, #content p.folderlist img{
margin:					0px 4px 0px 0px;
}

#content p.homelist img, #content p.folderlist img, #content p.sitelist img, #content p.filelist img{
float:					left;
}


/* Searchform top right */

#searcher{
position:				absolute;
top:					77px;
right:					56px;
font-size:				10px;
text-align:				right;
background:				url(/layout/search.gif) top right no-repeat;
margin:					6px 0px 0px 0px;
padding:				2px 0px 0px 0px;
height:					19px;
}

#searcher input{
width:					120px;
height:					15px;
font-family:			Verdana, Arial, Helvetica, sans-serif;
font-size:				10px;
color:					#E9EBE7;
background:				transparent;
border:					0px;
margin:					0px 0px 0px 3px;
padding:				1px 2px 0px 2px;
}

#searcher input#searchsubmit{
height:					14px;
width:					10px;
margin:					0px 0px 1px 6px;
padding:				0px;
background:				transparent;
border:					0px;
cursor:					pointer;
}



/* Actionbar top right */

#action{
position:				absolute;
top:					11px;
right:					56px;
font-size: 				10px;
color:					#252625;
}

#action a{
color:					#252625;
text-decoration:		none;
}

#action a:hover{
color:					#E1180C;
text-decoration:		none;
}



/* Footer below content */

p#footer{
font-size: 				10px;
text-align:				center;
color:					#252625;
background:				transparent url(/layout/ruler_horizontal.gif) top repeat-x;
clear:					both;
margin:					14px 0px 0px 0px;
padding:				4px 0px 0px 0px;
}



/* Force width within little content */

p#spacer{
font-size: 				100px;
line-height:			1px;
color:					#E9EBE7;
margin:					50px 0px 0px 0px;
}



/* Welcome in to the strange world of draggable layers */

#teaseMe{
position:				absolute;
top:					-303px;
left:					-391px;
height:					302px;
width:					390px;
overflow:				hidden;
visibility:				hidden;
z-index:				2;
}

#teaseStage{
position:				absolute;
top:					0px;
left:					0px;
z-index:				3;
}

#teaseDragger{
position:				absolute;
top:					0px;
left:					0px;
height:					23px;
width:					390px;
cursor:					move;
z-index:				6;
}

#teaseShitDragger{
position:				absolute;
top:					0px;
left:					0px;
height:					23px;
width:					368px;
cursor:					move;
z-index:				7;
}

#teaseCloser{
position:				absolute;
top:					0px;
left:					368px;
height:					23px;
width:					22px;
cursor:					pointer;
z-index:				8;
}

#teaseTitle{
font-size:				13px;
font-weight:			900;
line-height:			23px;
text-align:				left;
color:					#E9EBE7;
position:				absolute;
top:					0px;
left:					10px;
height:					23px;
width:					350px;
z-index:				5;
}

#teaseDisplay{
line-height:			1px;
position:				absolute;
top:					23px;
left:					2px;
height:					277px;
width:					385px;
overflow:				auto;
z-index:				4;
}

#teaseDisplay h2{
font-size:				17px;
font-weight:			900;
font-style:				italic;
line-height:			34px;
margin:					51px 0px 0px 21px;
padding:				0px;
color:					#E9EBE7;
}

#teaseDisplay img{
margin:					0px;
padding:				0px;
}

#teaseDisplay p{
font-size:				12px;
line-height:			17px;
margin:					2px 0px 4px 0px;
padding:				0px 6px 0px 8px;
color:					#E9EBE7;
}

#teaseDisplay p img{
float:					left;
margin:					2px 2px 0px 0px;
padding:				0px;
}

#teaseDropper{
position:				absolute;
top:					-1px;
left:					-1px;
height:					1px;
width:					1px;
}