@charset "utf-8";
/*  CSS fürs Werbehuus */
/*
******************************************************************************************************

Title:			main.css
Browser(s): 	All 

Author: 		Marko Prljić (http://www.organicvisions.ch)
Created: 		31.01.2009

******************************************************************************************************
FARBEN
Font: #ffe8ba;
background: #21201f;
a color: #C76039
a hover color: #87381a
accordion text: #C4BAB1
Menubraun: #C76039
Menu selectedlink: #87381A
Footer Selected link #d6b166;
accordion Backgroundcolor: #302E2C;
*/
/*-------------------------------DEFINE BODY PROPERTIES----------------------------------------*/



* {
	margin: 0 auto 0 auto; /* GLOBAL RESET */
	padding: 0;
}
body{
	margin: 0 auto 0 auto;
	font-size: 62.5%; 
	font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;/*Arial, Sans-Serif; change font*/
	line-height: 150%; 
	color:#444; /*change font color*/
	background: #fff; /*background color*/
}

div, p, ul, h2, h3, h4, img{
	padding:0px; margin:0px; border:none;
}
ul{
	list-style-type:none;
}
.spacer{
	clear:both; 
	font-size:0px; 
	line-height:0px;
}

a { outline:none; /* Remove Firefox's dotted borders */ text-decoration:none; color:#C76039; padding:0; margin:0;}
a img { border:none;} /* Remove IE's blue borders */
a:hover{ color:#87381a;}
#flussbild2 img{padding: 0 0 0 0; margin: 10px ;float:right;}

txt a{ color:#819d00;}
txt a:hover()

h1 { border:none; margin:10px 0 0 0; padding:0;}
h2 {font-size: 1.8em; line-height:1.2em; font-weight:normal; border:none; margin:0; padding:0; color:#C76039;}/**/
h3 {font-size: 1.8em; line-height:1.2em; font-weight:normal; border:none; margin:0 0 15px 0; padding:0; color:#ffe8ba;}/**/
h4 {font-size: 1.6em; border:none; margin:0; padding:0; color:#FFE8BA;}/**/
h5 {font-size: 1.8em; line-height:1.2em; border:none; margin:0; padding:0; font-weight:normal;}/**/
h6 {font-size: 2.6em; line-height:1em; font-weight:normal; border:none; width:320px; margin:0 0 20px 0; padding:0; float:right;}/**/
p  {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em;}/**/
.small  {font-size: 1.2em; padding:0; line-height:1.4em;}
.big {font-size: 2.2em; padding:0; line-height:1.4em; color:#666666;}
.white {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em; color:#fff;}
.heading {font-size: 1.4em; font-weight:normal; border:none; margin:0; padding:0;}
.hr{ border-bottom:1px solid #686051; border-left:none; border-right:none; border-top:none; margin:10px 0 10px 0; }
.left{ float:left;}
.left_margin_right{ float:left; margin:0 10px 0 0; font-size:1.2em;}
.left_margin_right_top{ float:left; margin:4px 10px 0 0;}
.right{ float:right;}
.right_margin_top{ float:right; margin:-50px 0 0 0;}
.right_margin_right{ float:right; margin:0 20px 0 0;}
/*-------------------------------END----------DEFINE BODY PROPERTIES----------------------------------------*/

.center{width:800px; height:100%; padding:0; margin:0 auto;}

/*------------------------------CONTENT--------------------------------*/

/*HEADER*/

#header{ width:100%; height:400px; background:transparent url(../images/header_full_bg.jpg) top center no-repeat;}
#header_holder{ width:800px; height:400px; background:transparent url(../images/img_header.jpg) top center no-repeat;}

/*NAVIGATION*/

#nav ul {margin: 10px 0 0 0; padding: 0; list-style: none; float:right;}
#nav ul li,
#nav ul li a {float: left; display: block;}
#nav ul li a {margin: 15px 10px 0 20px; padding: 5px;font-size: 1.4em;color: #ffe8ba;text-decoration: none; -moz-border-radius: 5px;-webkit-border-radius: 5px;}
#nav ul li a:hover,
#nav ul li a.selected {background-color: #c76039;color: #87381a; -moz-border-radius: 5px;-webkit-border-radius: 5px;}

/*FOOTER NAVIGATION*/

#f_nav ul {margin: 10px 0 10px 0; padding: 0; list-style: none; float:left;}
#f_nav ul li,
#f_nav ul li a {float: left; display: block;}
#f_nav ul li a {margin: 15px 10px 0 10px; padding: 5px;font-size: 1.2em;color: #ffe8ba;text-decoration: none; -moz-border-radius: 5px;-webkit-border-radius: 5px;}
#f_nav ul li a:hover,
#f_nav ul li a.selected {background-color: #C76039;color: #87381A; -moz-border-radius: 5px;-webkit-border-radius: 5px;}

/*Teaser with headings and icons*/
#teaser{ align:"justify"; width:960px; height:160px; background:transparent url(../images/bg_teaser.png) top left repeat; margin:-160px 0 0 0;}
.teaser_box{ align:"justify"; width:280px; padding:10px; margin:0 10px 0 10px; color:#FFE8BA; font-size:1em; float:left; display:inline; overflow:hidden;}

.homepagecheck{ text-align:"justify"; width:250px; display:block; text-indent:-9999px; line-height:5em; margin:0 0 15px 0; background:url(../images/homepagecheck.png) top left no-repeat;}
.redesign{ width:250px; display:block; text-indent:-9999px; line-height:5em; margin:0 0 15px 0; background:url(../images/redesign.png) top left no-repeat;}
.text{ width:250px; display:block; text-indent:-9999px; line-height:5em; margin:0 0 15px 0; background:url(../images/konzeptundlayout.png) top left no-repeat;}

.more{ float:right; width:150px; height:25px; display:block; overflow:hidden; padding:12px 0 0 30px; margin:0 0 0 0; color:#ffe8ba; font-size:1.2em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}
#more{ float:right; width:150px; height:25px; display:block; overflow:hidden; padding:12px 0 0 30px; margin:0 0 0 0; color:#ffe8ba; font-size:1.2em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}
.more_left{ float:left; width:147px; height:35px; display:block; overflow:hidden; padding:12px 0 0 40px; margin:0 0 0 0; color:#FFE8BA; font-size:1.3em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}
.more_angebot{ float:left; width:147px; height:35px; display:block; overflow:hidden; padding:12px 0 0 10px; margin:0 0 0 0; color:#FFE8BA; font-size:1.3em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}
.more_projekt{ float:left; width:147px; height:35px; display:block; overflow:hidden; padding:12px 0 0 25px; margin:0 0 0 0; color:#FFE8BA; font-size:1.3em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}
.more_leistungen{ float:left; width:147px; height:35px; display:block; overflow:hidden; padding:12px 0 0 25px; margin:0 0 0 0; color:#FFE8BA; font-size:1.3em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}
.view_left{ float:left; width:74px; height:20px; display:block; overflow:hidden; padding:6px 0 0 18px; margin:10px 0 0 0; color:#c76039; font-size:0.9em; background:transparent url(../images/button_more.png) no-repeat; text-transform:uppercase;}

/*MAIN CONTENT*/

.main{ width:100%; background: /*transparent url(../images/bg_main_adds.jpg)*/ top left repeat-x; padding:0; margin:0;}
.main_wrapper{ width:800px; height:100%; padding:40px 0 40px 0; margin:0;}

.welcome{width:310px; display:block; text-indent:-9999px; line-height:4.6em; float:left; margin:0 0 0 0; background:url(../images/homepagecheck_title.png) top left no-repeat;}
.welcome_konzept{width:310px; display:block; text-indent:-9999px; line-height:4.6em; float:left; margin:0 0 0 0; background:url(../images/welcome_konzept.png) top left no-repeat;}
.aus_alt{width:310px; display:block; text-indent:-9999px; line-height:4.6em; float:left; margin:0 0 0 0; background:url(../images/us_alt_title.png) top left no-repeat;}
.welcome_selbst{width:310px; display:block; text-indent:-9999px; line-height:4.6em; float:left; margin:0 0 0 0; background:url(../images/bleibensieaktuell_title.png) top left no-repeat;}
.news_events{width:228px; display:block; text-indent:-9999px; line-height:3em; float:right; padding:0 0 0 0; margin:10px 20px 0 0; background:url(../images/latest_news.png) top left no-repeat;}

.separator_top{ width:800px; height:1px; background:transparent url(../images/sep_top.png) top center no-repeat;}
.separator_mid{ width:800px; height:21px; background:transparent url(../images/sep_mid.png) top center no-repeat; margin:20px 0 0 0;}
.separator_bot{ width:800px; height:21px; background:transparent url(../images/sep_bot.png) top center no-repeat;}

.intro{ width:100%; margin:0 0 40px 0;}
.tagline{ margin:0 0 20px 30px;}
.screens{ margin:0 0 10px 10px;}



#preview{position:absolute;border:1px solid #b6b6b6;background:#fff;padding:5px;display:none;color:#333;}
#tooltip{position:absolute;border:1px solid #b6b6b6;background:#fff;padding:2px 5px;color:#333;display:none;}	

/*individual content holder*/
.box{ width:800px; height:100%; padding:10px 0 10px 10px; float:left; border-right:1px solid #fff; border-left:none; border-bottom:none; border-top:none;}
.box a.read_more{float:right; color:#c76039; font-style:italic; font-size:1.1em; margin:20px 20px 20px 0;}
.box_2{ width:300px; height:100%; float:right; padding:10px; display:inline; overflow:hidden;}
.box_2 a{ color:#C76039;}
.box_2 a:hover{ color:#87381a;}
.box_2 a.read_more{float:right; color:#c76039; font-style:italic; font-size:1.1em; margin:0 0 20px 0;}
.box_3{ width:300px; height:100%; float:left; padding:10px; display:inline; overflow:hidden;}

.box_4{ width:300px; height:100%; padding:10px; display:inline; overflow:hidden;}
.box_4 a{ color:#C76039;}
.box_4 a:hover{ color:#87381a;}
.box_4 a.read_more{; color:#c76039; font-style:italic; font-size:1.1em; margin:0 0 20px 0;}


.services{width:210px; display:block; text-indent:-9999px; line-height:3em; margin:20px 0 10px 0; background:url(../images/leistungen.png) top left no-repeat;}
.featured{width:250px; display:block; text-indent:-9999px; line-height:3em; margin:20px 0 10px 0; background:url(../images/featured.png) top left no-repeat;}
.proposal{width:250px; display:block; text-indent:-9999px; line-height:3em; margin:20px 0 10px 0; background:url(../images/bestes_angebot.png) top left no-repeat;}

ul.listing{ padding:20px; margin:0;}
ul.listing li{ list-style-image: none; background-image:url(../images/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 5px 25px; font-size:1.2em;}

.img_border{ width:294px; height:80px; background-color:#b6b6b6; padding:2px; margin:20px 0 0 0;}
.img_border2{ width:133px; height:80px; background-color:#fff; padding:2px; margin:0 10px 10px 0; float:left;}
.img_border3{ width:138px; height:138px; background-color:#b6b6b6; padding:1px; margin:5px 10px 0 0; float:left;}
.img_border4{ width:598px; height:251px; background-color:#b6b6b6; padding:1px; margin:0;}

.stroke_main{display:block; border:2px solid #b6b6b6; margin:20px 0 0 0; padding:0; }
.stroke_footer{display:block; border:2px solid #fff; margin:0 10px 10px 0; padding:0; float:left; }

/*NEWS*/

.news{}
.ico_date{ display:block; width:46px; height:51px; background:url(../images/ico_date.png) no-repeat; float:left; margin:0 10px 20px 0;}
.month{ font-size:0.9em; text-transform:uppercase; padding:3px 12px 3px 12px; color:#fff;}
.day{font-size:2em; text-transform:uppercase; padding:1px 12px 10px 11px; color:#666;}

/*FOOTER*/

#footer{overflow: hidden; width:100%; background:transparent url(../images/bg_footer.jpg) top left repeat-x;background-color: #252422; color:#ffe8ba; padding:0; margin:0; display:block;}
.footer_cont{ margin:20px 0 0 0;}
.archive a{color:#ffe8ba; font-weight:bold;}
.archive a:hover{color:#d6b166; font-weight:bold;}
.date{ margin:0 10px 0 0;}
.cc{margin: 30px 0  0 0; font-size:1.1em; float:right;}

/*------------------------------MAIL FORM--------------------------------*/

form#one {width:100%;padding:0;margin:0;}
form#one fieldset {width:100%;padding:0;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;margin:0;border: 0;font-size: 11px;}
form#one input {border:1px solid #b6b6b6;padding:0.5em 0 0 0.5em;margin:5px 0 5px 0; width:220px; height:20px; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; font-size:1em; color:#333; background: #fff url(../images/bg_input.jpg) top left repeat-x;}
form#one label{font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; color:#333; padding:0;}
form#one textarea {width:300px;height:15em;border:1px solid #b6b6b6;padding:0.2em; margin:10px 0 0 0;overflow:auto; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; font-size:1em; color:#333; background: #fff url(../images/bg_input.jpg) top left repeat-x;}
form#one #button1 { float:left; color:#ffe8ba;padding:0;cursor:pointer;width:50px;margin:10px 0 0 0; background:#fff;border:1px solid #b6b6b6;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;font-size: 11px;}
form#one #button1:hover{margin:10px 0 0 0;color:#034057;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;font-size: 11px;border:1px solid #b6b6b6; background:#C76039; width:50px;}

/*footer form*/

form#two {width:100%;padding:0;margin:0;}
form#two fieldset {width:100%;padding:0;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;margin:0;border: 0;font-size: 11px;}
form#two input {border:none;padding:0.5em 0 0 0.5em;margin:5px 0 5px 0; width:220px; height:20px; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; font-size:1em; color:#ffe8ba; background-color:#302E2C;}
form#two label{font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; color:#ffe8ba; padding:0;}
form#two textarea {width:300px;height:15em;border:none;padding:0.2em; margin:10px 0 0 0;overflow:auto; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; font-size:1em; color:#ffe8ba; background-color:#302E2C;}
form#two #button1 { float:left; color:#ffe8ba;padding:0;cursor:pointer;width:50px;margin:10px 0 0 0;border:none;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;font-size: 11px;}
form#two #button1:hover{margin:10px 0 0 0;color:#000;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;font-size: 11px;border:none; background-color:#C76039; width:50px;}

/*Uznach Form*/
form#drei {width:100%;padding:0;margin:0;}
form#drei fieldset {width:100%;padding:0;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;margin:0;border: 0;font-size: 11px;}
form#drei input {border:none;padding:0.5em 0 0 0.5em;margin:5px 0 5px 0; width:220px; height:20px; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; font-size:1em; color:#444444; background-color:#CCC;}
form#drei label{font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; color:#444444; padding:0;}
form#drei textarea {width:300px;height:15em;border:none;padding:0.2em; margin:10px 0 0 0;overflow:auto; font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif; font-size:1em; color:#444; background-color:#CCC;}
form#drei #button1 { float:left; color:#ffe8ba;padding:0;cursor:pointer;width:50px;margin:10px 0 0 0;border:none;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;font-size: 11px;}
form#drei #button1:hover{margin:10px 0 0 0;color:#000;font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Sans-serif;font-size: 11px;border:none; background-color:#C76039; width:50px;}
.info_fieldset { border:none; }

/*____________________________________________________________________*/
/*Accordion*/

div#test-accordion{
	border: 1px solid #343230;
	background-color: #21201f;
	padding: 10px;
}
div#test-accordion a{
	margin:12px;
}

div.accordion {
	position: relative; /* required for bounding */
	width: 287px;
}

div.accordion2 {
	position: relative; /* required for bounding */

}

div.accordion-toggle{
	position: relative; /* required for effect */
	z-index: 10;		/* required for effect */
	background: #3f3c38 url(../img/off.jpg) repeat-x;
	background-position: bottom;
	color: #FFE8BA;   
	cursor: pointer;
	margin-bottom: 1px;
	padding: 9px 14px 6px 14px;
	border-top: 1px solid #5d5852;	
}

div.accordion-toggle:hover, div.accordion-toggle-active{
	background-image: url(../img/on.jpg);
	background-color: #6d493a;
	border-top: 1px solid #a06b55;
	color:#FFFFFF;
}

div.accordion-content{
	overflow: hidden;	/* required for effect */
	background: #302e2c;
	padding: 0;
	color: #c4bab1;
}

div.accordion-content p{
	margin: 9px 24px 6px 24px;
	font-size:1.2em;
}
.firebugHighlight {
    z-index: 2147483647;
    position: absolute;
    background-color: #3875d7;
}

.firebugLayoutBoxParent {
    z-index: 2147483647;
    position: absolute;
    background-color: transparent;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px dashed #BBBBBB;
}

.firebugRulerH {
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 14px;
    background: url(chrome://firebug/skin/rulerH.png) repeat-x;
    border-top: 1px solid #BBBBBB;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px solid #000000;
}

.firebugRulerV {
    position: absolute;
    top: 0;
    left: -15px;
    width: 14px;
    height: 100%;
    background: url(chrome://firebug/skin/rulerV.png) repeat-y;
    border-left: 1px solid #BBBBBB;
    border-right: 1px solid #000000;
    border-bottom: 1px dashed #BBBBBB;
}

.overflowRulerX > .firebugRulerV {
    left: 0;
}

.overflowRulerY > .firebugRulerH {
    top: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

.firebugLayoutBoxOffset {
    z-index: 2147483647;
    position: absolute;
    opacity: 0.8;
}

.firebugLayoutBoxMargin {
    background-color: #EDFF64;
}

.firebugLayoutBoxBorder {
    background-color: #666666;
}

.firebugLayoutBoxPadding {
    background-color: SlateBlue;
}

.firebugLayoutBoxContent {
    background-color: SkyBlue;
}

/*.firebugHighlightGroup .firebugLayoutBox {
    background-color: transparent;
}

.firebugHighlightBox {
    background-color: Blue !important;
}*/

.firebugLayoutLine {
    z-index: 2147483647;
    background-color: #000000;
    opacity: 0.4;
}

.firebugLayoutLineLeft,
.firebugLayoutLineRight {
    position: fixed;
    width: 1px;
    height: 100%;
}

.firebugLayoutLineTop,
.firebugLayoutLineBottom {
    position: absolute;
    width: 100%;
    height: 1px;
}

.firebugLayoutLineTop {
    margin-top: -1px;
    border-top: 1px solid #999999;
}

.firebugLayoutLineRight {
    border-right: 1px solid #999999;
}

.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999;
}

.firebugLayoutLineLeft {
    margin-left: -1px;
    border-left: 1px solid #999999;
}