/*
 * *****************************
 * @author         coma ag | doh
 * @date           2008-08
 * @copyright      2009 coma ag
 * @link           http://www.coma.de
 * *****************************
 */
 

/******** css reset ********/

	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; }
	
/******** globale definitionen ********/

	a:focus { outline:none; }
	strong { font-weight: 900; }
	
/******** globale klassen ********/

	/* clear fuer floatende elemente */
	.clear { clear:both; height:1px;}
	
	/* wrap fuer content in diversen divs */
	.wrap { width:940px; margin: 0 auto; }
	.wrapl { width:930px; margin: 0 auto;  padding-left:10px; }

	
/******** body ********/

	body { color:#fff; font-family:Arial, Verdana; font-size:12px;}	
	body.orange { background:#151515; }	
	body.black { background:#f78e04; }	
	

/******** header ********/

	#head { width:100%; height:360px; background:transparent url('../images/backgrounds/header.jpg') no-repeat center;}
	#head .wrapl{ padding:53px 0 20px 0;}
	/*#head {padding:53px 0 20px 0;}*/
	
	/* header titel */
	#head h1 {display:block; margin-top:10px;}
	#head h1 span { font-size:50px; font-family:'Arial Black', Arial, Verdana; font-weight:bold; color:#fff; background:#000; padding:0 10px 0 10px; text-transform:uppercase; }
	
	/* header subtitle */
	#head h2 {display:block; margin-top:10px;}
	#head h2 span{ font-size:14px; font-family:'Arial Black', Arial, Verdana; font-weight:bold; text-transform:uppercase; color:#fff; background:#000; padding:0 10px 0 10px;}
	
	/* header textbox  --- clear fix fuer IE bei display inline*/
	#head p {display: block; margin-top:10px;}
	#head p span{ font-size:12px; line-height:18px; color:#fff; background:#000; padding:3px 10px 5px 10px; }

/******** navigation ********/

	/* 72 hoch wegen schlagschatten der mit im bg ist */
	#navi { width:100%; height:72px; font-size:11px; position:relative; }
	#navi ul{ right:0px; }
	
	#navi .wrap { position:relative; height:72px; }
	
	.orange #navi { background:transparent url('../images/backgrounds/navi_orange.png') repeat-x; }
	.black #navi { background:transparent url('../images/backgrounds/navi_black.png') repeat-x; }
	
	#navi #logo { width:139px; height:20px; position:relative; top:33px;}
	#navi #logo img { width:139px; height:20px; }
	.orange #navi #logo { background:transparent url('../images/backgrounds/coma_logo_orange.gif') no-repeat; }
	.black #navi #logo { background:transparent url('../images/backgrounds/coma_logo_black.gif') no-repeat; }
	
	/* haupt und subnavi */

	/* subnavi */
	#navi #sub { position:absolute; top:22px; } /* hoehe falls keine subnavi damit der abstand passt */
	#navi #sub li { text-align:right; } /* hoehe falls keine subnavi damit der abstand passt */
	
	/* hauptnavi */
	#navi #main { position:absolute; top:42px; }
	#navi #main li{ font-weight:bold; text-transform:uppercase; }
	
	/* +balken in beiden navis*/
	#navi ul li{ display:inline; border-right:1px solid #fff; padding:0 9px 0 10px; }
	#navi ul li.last{ border-right:none; padding-right:0; }
	
	
	/* +links in beiden navis */
	#navi ul li a { color:#fff; text-decoration:none; }
	
	.orange #navi ul li a:hover { color:#3a3d3c; text-decoration:none; }
	.black #navi ul li a:hover { color:#f78e04; text-decoration:none; }
	
	.orange #navi ul li.current a { color:#3a3d3c; }
	.black #navi ul li.current a { color:#f78e04; }
	
/******** content  ********/
	
	/* 18 statt 20 da 2 px im schlagschatten von der navi sind */
	#content { width:100%; padding:18px 0 0 0; }
	
	.black #content { background:#f26307 url('../images/backgrounds/content_orange.jpg') top left repeat-x; }
	.orange #content { background:#151515 url('../images/backgrounds/content_black.jpg') top left repeat-x; }
	
/******** footer ********/

	#footer { clear:left; height:71px; background:#070707 url('../images/backgrounds/footer.png') repeat-x; font-size:11px; }
	#footer .navLeftimg { float:left; margin-top:22px; padding-right:10px; }
	#footer #navLeft { float:left; margin-top:30px; }
	#footer #navRight { float:right; margin-top:22px; }
	
	#footer ul li a { color:#fff; text-decoration:none; }
	#footer ul li a:hover { color:#fff; text-decoration:underline; }
	#footer ul li.current a { font-weight:bold; }
	#footer ul li span { font-weight:bold; }

	/* +balken in beiden navis */
	#footer ul li{ display:inline; border-right:1px solid #fff; padding:0 9px 0 10px; }
	#footer ul li.first {padding-left:0px;}
	#footer ul li.last {border-right:none;  padding-right:0;}
	#footer ul li.pic {border-right:none;  padding-right:0; padding-left:0;}


/******** content advanced  ********/


	/* image grid*/
	.imageGrid  { padding:0 0 18px 0; }
	.imageGrid  ul li { display:inline; margin:0 9px 10px 0; }
	.imageGrid  ul li.last { margin-right:0px; }
	/* teaser mouseover effect for cool browsers ;) */
	.imageGrid a img { filter:alpha(opacity: 100); -moz-opacity: 0.99; opacity: 0.99; }
    .imageGrid a:hover img { filter:alpha(opacity: 80); -moz-opacity: 0.80; opacity: 0.80; }
	

	/* 3 teasers */
	.teaser {float:left; }
	.teaser img { border:1px solid #444444; }
	.teaser ul { padding: 0 0 0px 0; white-space:nowrap;}
	.teaser ul li { margin: 0 10px 0 0; }
	
	
	/* expandable teasers in slide section */
	.expandableTeaser ul { overflow:hidden; height:75px; width:940px; margin:0 0 12px 0; }
	.expandableTeaser ul.last { margin:0; }
	.expandableTeaser ul li { height:75px; width:180px; display:block; float:left; margin: 0 10px 0 0; }
	.expandableTeaser ul li.filtered a { background:transparent url('../images/backgrounds/filtered.png') top left repeat-x; }
	.expandableTeaser ul li a, .expandableTeaser ul li span.no_link { width:178px; height:43px; padding:30px 0 0 0; display:block; text-decoration:none; }
	.expandableTeaser ul li a.extended, .expandableTeaser ul li span.extended { width:178px; height:59px; padding:14px 0 0 0; display:block; text-decoration:none; }
	.expandableTeaser ul li a.retracted, .expandableTeaser ul li span.retracted { width:178px; height:27px; padding:46px 0 0 0; display:block; text-decoration:none; }
	.expandableTeaser ul li a  span, .expandableTeaser ul li span.no_link  span { font-weight:bold; color:#000; background:#fff; padding:1px 6px 1px 10px; line-height:16px; visibility:hidden; }
	.expandableTeaser ul li a:hover span, .expandableTeaser ul li span.no_link:hover span { visibility:visible; }
	/*ie hover fix*/
	.expandableTeaser a:hover {visibility:visible;}
	
	/* expandable slide content  */
	.expandableContent { display: block; margin: 0 0 0px 0 !important;} /* war 10 px margin-bottom  */
	.expandableContent h2.top {margin: 0 0 0 0;}
	
	.expandable { padding:0 0 20px 0;}
	
	/* black contentboxes */
	.slider{text-align:right; margin: -10px 0 10px 0; position: relative;}
	.slider.hidden{display:none;}

	.blackBoxes { padding:10px 0 0 0; background:#f26307 url('../images/backgrounds/content_orange_shadow.jpg') top left repeat-x; height:100%;}
		
	.boxWrap3 a, .boxWrap5 a { color:#fff; text-decoration:underline; }
	.boxWrap3 a:hover, .boxWrap5 a:hover { color:#fff; text-decoration:none; }
	.boxWrap3 h1 a, .boxWrap5 h1 a { color:#000; text-decoration:underline; }
    .boxWrap3 h1 a:hover, .boxWrap5 h1 a:hover { color:#000; text-decoration:none; }
	
	/* black boxes */
	.boxWrap3, .boxWrap5 { margin:0 auto; padding-bottom:10px; width:940px; clear:left; }
	.boxWrap3 div {width:623px;} /*sez: war 636*/
	.boxWrap5 div {width:560px; } 
	.boxWrap3 div, .boxWrap5 div {background:#000; float:left; padding:10px 0 10px 0; margin:0 0 10px 0; position:relative;}
	
	
	.boxWrap3 div.clear,.boxWrap5 div.clear { width:auto; margin:0; padding:0; background:transparent; clear:both; display:inline;}
	.boxWrap3 div h1,.boxWrap5 div h1 { display:inline; }
	.boxWrap3 div h1  span,.boxWrap5 div h1 span{ font-weight:bold; color:#000; background:#fff; padding:3px 6px; line-height:20px;}
	.boxWrap3 div h2,.boxWrap5 div h2  { margin:20px 0 0 0; position:relative;background:#ff7906; padding:4px; font-weight:bold;}
	.boxWrap3 div p,.boxWrap5 div p { padding:20px 20px 0 6px;}
	.boxWrap3 div p.bottom ,.boxWrap5 div p.bottom { margin: 0 0 10px 0;}
	.boxWrap3 .leftBlock, .boxWrap3 .rightBlock, .boxWrap5 .leftBlock, .boxWrap5 .rightBlock { display: inline; float: left; width: 200px; }
	
	.boxWrap3 ul {width:306px;}
	.boxWrap5 ul {width:370px;}
	.boxWrap3 ul,.boxWrap5 ul { float:left; margin:0 0 0 10px;}
	
	.boxWrap3 ul li, .boxWrap5 ul li { height:23px; font-family:Arial Black, Arial; font-size:14px; padding:3px 0 0 10px; margin:0 0 10px 0; text-transform:uppercase; }
	.boxWrap5 ul li {background:#000 url('../images/backgrounds/arrow.png') 346px 8px no-repeat;}
	.boxWrap3 ul li {background:#000 url('../images/backgrounds/arrow.png') 282px 8px no-repeat;} 
	
	.boxWrap3 ul li a {}
	.boxWrap5 ul li a {width:200px;}
	.boxWrap3 ul li a, .boxWrap5 ul li a{ text-decoration:none; color:#fff; height:10px;}

	.leftOutline { background:#000; width:100%;}
	
	/* address info */
	.boxWrap3 span.keyword, .boxWrap5 span.keyword {font-weight:bold;}
	.boxWrap3 p.textCol, .boxWrap5 p.textCol {width: 270px !important; padding: 0 0 10px 6px; float:left;}
	
	
	.boxWrap3 div.singleContact {width:636px;}
	.boxWrap5 div.singleContact {width:560px;}
	.boxWrap3 div.singleContact,.boxWrap5 div.singleContact{margin: 20px 0 0 0; padding: 0 0 0 6px !important;}
	
	.boxWrap3 div.leftContact{}
	.boxWrap5 div.leftContact{}
	.boxWrap div.leftContact{float: left; width: 261px !important; padding: 0 0 0 6px; margin: 1px 0 6px 0; line-height:17px;}
	
	.boxWrap3 div.rightContact,.boxWrap3 div.leftContact, .boxWrap5 div.rightContact,.boxWrap5 div.leftContact{float: left; width: 231px !important; padding: 0 0 0 9px; margin: 1px 0 6px 0; line-height:17px;}
	
	
	.boxWrap div.leftContact div.inText {margin: 20px 0 0 0;}
	
	
	/* limited height for limited content (next to side box or side img) */
	.boxWrap3 div.limited, .boxWrap5 div.limited { min-height: 112px; }
	
	
	/* side box */
	.boxWrap3 div.sideBox {width:306px;}
	.boxWrap5 div.sideBox {width:370px;}
	.boxWrap3 div.sideBox, .boxWrap5 div.sideBox  { background: #000; float:left; margin: 0 0 10px 11px; padding:10px 0;} /* sez: margin war 0 0 0 10 */
	.boxWrap3 div.sideBox h1, .boxWrap5 div.sideBox h1{ display:inline; }
	.boxWrap3 div.sideBox h1 span, .boxWrap5 div.sideBox   h1  span{ font-weight:bold; color:#000; background:#fff; padding:3px 6px; line-height:21px; }
	.boxWrap3 div.sideBox p, .boxWrap5 div.sideBox  p { padding:20px 20px 0 6px; margin:0; }
	.boxWrap3 div.sideBox span.keyword , .boxWrap5 div.sideBox  span.keyword {font-weight:bold;}
	
	/* side img */
	.boxWrap3 div.sideImg {width:304px; padding:0px !important; margin:0 0 10px 11px;}
	.boxWrap3 div.sideImg img {border:1px solid #444; display:block;}
	
	/* submit button */
	.submit.limited { margin-top:0px !important; }
	.submit {clear:left; margin: 10px 0 10px 0; width:370px; height:23px; background:#000 url('../images/backgrounds/arrow.png') 350px 8px no-repeat; font-family:Arial Black, Arial; font-size:14px; padding:3px 0 0 10px; text-transform:uppercase; }
	.submit a { color:#fff; text-decoration:none; }
	/*
	.submit { margin: 0 auto 10px auto; width:370px; float: left; height:23px; background:#000 url('../images/backgrounds/arrow.png') 350px 8px no-repeat; font-family:Arial Black, Arial; font-size:14px; padding:3px 0 0 10px; text-transform:uppercase; }
	/*.submit {margin:0 0 10px 343px !important;}
	*/
	

	/* form */
	.forms div h2  { margin:10px 0 4px 0; clear:left;} /* resetting some stuff */
	.forms input.singleInput { margin:0px 0 35px 140px; border:none; padding:5px; width:160px; }
	.forms textarea.singleTextarea { font-family:Arial, Verdana; font-size:12px; margin:0px 0 35px 140px; border:none; padding:5px; width:350px; }
	.forms input.singleFile{ margin:10px 0 35px 140px; border:none; padding:5px; width:350px; }
	.forms input { margin:0 0 18px 0; border:none; padding:5px; width:160px; }
	.forms input.checkBox, .forms input.radioButton { vertical-align:middle; margin:5px 5px 13px 0; /*border:1px solid #fff; */ width:auto;}
	.submit button.button { cursor: pointer; border: none;background: none;font-family:Arial Black, Arial; font-size:14px; padding:3px 0 0 10px; text-transform:uppercase;color: #fff;padding:0;margin:0; }
	.forms label {vertical-align:middle; margin:0 0 5px 0; display:block; clear:left;}
	.forms label.single {margin:0px 0 5px 140px;}
	.forms p{ margin:0 0 0 135px;  }

	.boxWrap3 div.formsLeft, .boxWrap3 div.formsRight, .boxWrap5 div.formsLeft, .boxWrap5 div.formsRight {width: 170px;}
	.boxWrap3 div.formsLeft, .boxWrap5 div.formsLeft{ display: inline; margin:0 0 0 140px; float:left; }
	.boxWrap3 div.formsRight, .boxWrap5 div.formsRight{ display: inline; margin:0 0 0 20px; float:left; }
	
	/* form validation */
	.error { color: #FF7906; font-weight: bold; }
	input.warning { background: #fff url(../images/frontend/warning_icon.gif) 5px 8px no-repeat; padding: 5px 5px 5px 18px; width: 147px; }
	
	.fbLikebox {background-color: #000 !important; width:292px !important; height:267px !important; border:1px solid #000 !important;}