/* style definitions by Marco De Luca - DeLucaMarketing.ch */
/* V0.97 - 2006-06-13: bst insertions */
/* V0.96 - 2006-06-13: noscript added */
/* V0.95 - 2006-04-07: generictable */
/* V0.94 - 2006-03-09: step 3 expert */
/* V0.93 - 2006-03-03: product section changed and enhanced */
/* V0.92 - 2006-02-22: product section changed */

/* attention: there are relative urls in here! change them if you change their location! */
body {font: 70%/1em verdana,sans-serif; color: #333; margin: 0; padding: 0; background: #e2e1d4 url(/resources/img/bg-top.gif) repeat-x;}

/* bst: this general property should be used in the entire application */
select {font-size: 80%; width: 150px; }


/* noscript output - div construction is a IE6 hack */
div#noscript {background: #0033ff; padding: 10px; color: white; font-size: 1em; font-weight: bold; text-align: center; margin: 20px 0;}

/* wrapper - change this width to adjust for different resolutions once min-width/max-width is fixed in IE, you can forget about this */
#wrapper {width: 960px; margin: 0 auto; padding: 0;}

/* bst: loaded object display. Use of absolute Position is a Hack. It should be another possibility*/
#info {position:absolute;padding-left:350px;padding-top:5px;color:#bd3826;background:transparent;}
#info #value {font-weight:bold}

/* header */ 
#header {height: 60px; margin: 0 auto;}
#header #logo	{float: left; margin: 0; padding: 0;}
#header #title {float: right;}
#header img		{border: none; margin-top: 12px; margin-left: 24px}
#header #title h1 {margin: 25px 30px 0 0; font-size: 20px; color: #bd3826; background: transparent;}
#header #righth{
	float: right;
}
#header #righth img{
	border: 0;
	margin: 10px 30px 0 0;
}
/* meta nav */
#meta {height: 20px; margin: 0 30px 26px 0; text-align: right;}
#meta ul {list-style: none; margin: 0;}
#meta ul li {display: inline; margin-left: 10px;}
#meta a {color: white; text-decoration: none;}
#meta a:hover {text-decoration: underline;}

/* nav */
#nav	{background: transparent; margin: 0; padding:0; height: 18px; margin-top: 1px;}
#nav ul {list-style: none; margin: 0; padding:0; margin-left: 14px;}
#nav ul li {display: inline; margin: 0; padding:0;}
#nav a:hover {color: #bd3826; background: #c9c7b4;}
#nav a.off {color: #c9c7b4;}
#nav a.off:hover {cursor: default; background: transparent; color: #c9c7b4;}
#nav a.arrow-left-off {padding: 0; width: 18px; height: 18px; border-left: 1px solid white; border-right: 1px solid white;background: url(/resources/img/arrow-left-off.gif); margin-right: 20px; cursor: default;}
#nav a.arrow-right-off {padding: 0; width: 18px; height: 18px; border-left: 1px solid white; border-right: 1px solid white;background: url(/resources/img/arrow-right-off.gif); margin-left: 20px; cursor: default;}
#nav a.arrow-left-on {padding: 0; width: 18px; height: 18px; border-left: 1px solid white; border-right: 1px solid white;background: url(/resources/img/arrow-left-on.gif); margin-right: 20px;}
#nav a.arrow-right-on {padding: 0; width: 18px; height: 18px; border-left: 1px solid white; border-right: 1px solid white;background: url(/resources/img/arrow-right-on.gif); margin-left: 20px;}
#nav a {text-decoration: none; margin:0; padding: 0px 8px 0px 8px; color: white; font-size: 12px; font-weight: bold; display: block; float: left; border-bottom: 1px solid white; line-height: 18px;}


#start #nav a.start,
#step1 #nav a.step1,
#overview #nav a.overview,
#products #nav a.products,
#contact #nav a.contact,
#chheat #nav a.chheat,
#s4gl #nav a.s4gl,
#offer #nav a.offer,
#partdocu #nav a.partdocu,
#contact #nav a.contact {background: #e2e1d4; border-bottom: 1px solid #e2e1d4; color: #bd3826; border-left: 1px solid white; border-right: 1px solid white;}

/* content */	
#content {margin: 0; padding: 20px 10px;}
#content input {font: 100%/1em verdana,sans-serif;}

/* footer */
#footer {width: 100%; margin: 0; padding:0; height: 18px; background: #9F9C6F; border-top: 1px solid white;}
#footer a {font-size: 11px; line-height: 18px; color: #54533b; text-align: right;}
#footer #copy {width: 740px; margin: 0 auto; font-size: 11px; line-height: 18px; padding: 0 10px; color: #54533b; text-align: right;}
#footer #info {margin-left:150px; padding: 0 10px; }


h1 {color: #bd3826; background: transparent; font: normal 160% verdana,sans-serif; margin: 0 0 1em 0; padding:0}
h2 {color: #bd3826; background: transparent; font: bold 100%/1.4em verdana,sans-serif; margin: 2em 0 0.5em 0;}
h3 {color: #333333; background: transparent; font: bold 100% verdana,sans-serif; margin: 1em 0 0.25em 0;}
h4 {font: bold 100% verdana,sans-serif; margin: 1em 0 0 0;}
p  {margin: 0.5em 0 0 0; line-height: 1.5em;}
ul {margin-left: 0; padding-left: 1.4em; margin-top:3px; list-style-type: disc;}
ol {margin-left: 0; padding-left: 2.5em; margin-top:3px;}
li {margin-bottom: 0.5em; line-height: 1.5em;}
hr {width: 100%; color: #9f9c6f; background: #9f9c6f; border:0; height: 1px; margin: 20px 0;}
a	{color: #39529B; background: transparent;}
a:visited {color: #818EB5;}
a:hover	 {color: #a8adb1;}

/* ELCO colors */
.red {color: #bd3826;}
.sand {color: #9f9c6f;}
.sand-light {color: #b7b592}
.grey {color: #a8adb1;}

/* general purpose classes (the swiss army knife of classes) */
.left {float: left; }
.right{float: right;}
.button {margin: 15px 0;}
.buttonsub {margin: 15px 20px 0 0;}
.toggle {display: none;}
.buttonbar {min-height: 25px;}
.clr {clear: both;}
.note {border: 1px solid #9f9c6f; margin-top: 50px; background: #f2f1e9; color: #5f533b; padding: 5px 10px;}

/* tables */
table#questions  {margin-top: 10px;}
table#questions td {background: #f2f1e9; border-bottom: 2px solid #e2e1d4; padding: 0px 3px 0 10px}
table#questions td.form {background: transparent; padding: 0 0 0 10px;}
table#questions input {font: 100%/1em verdana,sans-serif;}
table#questions input.result {background: #f2f1e9; border: 1px solid #bd3826;}
table#questions select {width: 280px; font: 100%/1em verdana,sans-serif;}
table#questions label {margin-left: 5px;}
table#questions img {margin: 3px 0;}

#questions table  {margin-top: 10px;}
#questions td {background: #f2f1e9; border-bottom: 2px solid #e2e1d4; padding: 0px 3px 0 10px}
#questions td.form {background: transparent; padding: 0 0 0 10px;}
#questions input {font: 100%/1em verdana,sans-serif;}
#questions input.result {background: #f2f1e9; border: 1px solid #bd3826;}
#questions select {width: 280px; font: 100%/1em verdana,sans-serif;}
#questions label {margin-left: 5px;}
#questions img {margin: 3px 0;}


#output th {background: #9F9C6F; color: white; font-weight: normal; height: 20px; line-height: 1.3em; }
#output th.legend {font-size: 11px;}
#output th img {vertical-align: text-bottom }
#output th.sub1 {background: white url(/resources/img/arrow-right-sub1.gif) no-repeat right; color: #bd3826; text-align: right; font-weight: bold; padding: 0 10px;}
#output td.sub1 {background: white; border: 1px solid #bd3826;}
#output th.sub2 {background: #f2f1e9; color: #9F9C6F; text-align: left; font-weight: bold; padding-left: 10px;}
#output td.data {background: #F2F1E9 }
#output td.data input.text {width: 200px; font: 100%/1em verdana,sans-serif;}
#output td.data select {width: 200px; font: 100%/1em verdana,sans-serif;}
#output .sort {float: right;}
#output label {margin-left: 10px;}


#calcbasis th {background: #9F9C6F; color: white; text-align: left; padding: 3px 10px;}
#calcbasis th.sub {font-weight: normal;}
#calcbasis td.data {background: #F2F1E9; padding-left: 10px; }
#calcbasis label {margin-left: 5px;}
#calcbasis td.sub {color: #9F9C6F; font-weight: bold;}
#calcbasis select {font: 100%/1em verdana,sans-serif;}


#graphchart table {margin-bottom: 30px;}
#graphchart th {background: #9F9C6F; color: White;}
#graphchart td {background: #F2F1E9; color: White;}

.bg {background-color:#e2e1d4}

/* chart colors */
/* contrast is not perfect, maybe we should reconsider on a later stage */
.bgred    {background-color: #BD3826; color: black;}
.bgorange {background-color: #CE7D25; color: black;}
.bgyellow {background-color: #E4CC4C; color: black;}
.bggreen  {background-color: #5A904D; color: black;}
.bgblue   {background-color: #778DB0; color: black;}
.bgbrown  {background-color: #8B683F; color: black;}
.bggrey   {background-color: #C0C0C0; color: black;}


#kontakt table {margin:0; padding: 0;}
#kontakt table.ft td {padding-bottom: 5px;}
#kontakt table.ft th	{text-align: left; font-weight: normal;}
#kontakt .field50 {width: 50px; border: 1px solid #a8adb1; font: 100% verdana,sans-serif;}
#kontakt .field50focus {width: 50px; border: 1px solid #000; font: 100% verdana,sans-serif;}
#kontakt .field260 {width: 260px; border: 1px solid #a8adb1; font: 100% verdana,sans-serif;}
#kontakt .field260focus {width: 260px; border: 1px solid #000; font: 100% verdana,sans-serif;}
#kontakt label.bb, label.bbmust {border-bottom: 1px solid #a8adb1; display: block; margin-right: 5px; padding-right: 20px; margin-top: 0px;}
#kontakt label.bbmust {color: #bd3826;}

body#popup {background-image: none; margin: 10px;}
table.popup th {text-align: left; background: #9f9c6f; color: white;}
table.popup th, table.popup td {padding: 3px 5px 3px 3px;}
table.popup th.data, table.popup td.data {text-align: right;}
table.popup td {background: white;}
table.popup tr.hi td, table.popup td.hi { background: #F2F1E9; cursor: default;}


/* product pages (included into result pages) */
.product {background: #f2f1e9; padding: 10px 10px 5px 10px; margin-bottom: 10px; height: 100%;}
.product img {border: 1px solid #a8adb1; margin: 0 0 5px 10px; float: right;}
.product h1 {margin-bottom: 0.25em;}
.product h2 {margin-top: 0;}
.product ul {margin-bottom:0}
h2.producttitle {background: #9f9c6f; color: white; padding:2px 0 3px 10px;}


/* portal page */
#map { background: url(/resources/img/europa.gif) no-repeat left top; height:350px; width: 286px; float: left; margin-top: 0px;}
table#portal {margin-top: 50px;}
table#portal th label {color: #bd3826; font-weight: bold; margin: 0 30px 0 7px;}
table#portal label {color: #bd3826;}
table#portal tr.bg {height: 20px; background: #F2F1E9;}
table#portal th, table#portal td{border-bottom: 7px solid #e2e1d4; color: #9f9c6f; padding-right: 20px; text-align: left;}
table#portal select {font-size: 80%; width: 150px; }
table#portal input.text {font-size: 80%; width: 142px;}
table#portal input.password {font-size: 80%; width: 142px;}
table#portal a {color: #9f9c6f;}
table#portal a:hover {color: #fff;}


/* subnavigation e.g. "Gewählte Lösung" - 2006-02-16*/
#subnav {margin:0 0 20px 0; padding: 0;}
#subnav td {margin:0; padding:0px; background: #F2F1E9; color: #858358; height: 19px; text-align: center;}
#subnav img {border: none; margin: 0px;}
#subnav a {color: #858358; background: none; text-decoration: none;}
#subnav a.on {color: #bd3826; background: none; cursor: default;}
#subnav a:visited { color: #B2B18C;}
#subnav a:hover {color: #bd3826;}

/* Step 3 Expert */
#selection td {background: #f2f1e9; padding: 0px 5px;}
#selection input {font: 100%/1em verdana,sans-serif;}
#selection input.result {background: #f2f1e9; border: 1px solid #bd3826;}
#selection select {font: 100%/1em verdana,sans-serif;}
#selection img {border: 1px solid #a8adb1;}
#selection #pics td {background: transparent; padding: 0 10px 0 0;}

/* Step 4 Expert */
#solution th {background: #f2f1e9; padding: 1px 5px ;height:21px; text-align: left;}
#solution th.main {background: #9f9c6f; 1px 5px ;height:21px; color: #fff;}
#solution td {background: #f2f1e9; padding: 1px 5px ;height:21px}
#solution input {font: 100%/1em verdana,sans-serif;}
#solution img {border: 0px solid #a8adb1;}
#solution #pics td {background: #fff; text-align:center}
#solution td.pics {background: #fff;}
#solution td.empty {background: #e2e1d4;text-align:right;1px 5px ;height:21px}

table.generictable {margin-bottom: 1em;}
table.generictable th {background: #9f9c6f; color: #fff; height: 2.0em; padding: 0px 5px; text-align: left; }
table.generictable th.sub {font-weight: normal;}
table.generictable th a {color: white;}
table.generictable th a:visited {color: white;}
table.generictable th a:hover {color: #bd3826;}
table.generictable td {background: #f2f1e9; padding: 2px 5px;}
table.generictable th img.sort {border: none; margin-left: 3px;}
table.generictable td img {float: none; border: none; text-align:center}
table.generictable td.empty {background: none;}

/* inserted bst (Message info) */
#info_desc {position: absolute;}
#info_desc {top: 180px;}
#info_desc {left: 330px;}
#info_desc {margin-left: -250px;}
#info_desc {width: 350px;}
#info_desc {padding: 5px;}
#info_desc {font-size: 100%; line-height: 1.3em;}
#info_desc {background-color: #fff; /* #f2f1e9; */}
#info_desc {border: 1px solid #666;}
#info_desc {text-align: center;}
#info_desc {z-index: 20;}
#info_desc th {font-weight: bold; background: #F2F1E9 url(/resources/img/infobutton.gif) 3px 3px no-repeat; height: 17px;}
#info_desc th {text-align: left; padding-left: 22px;}
#info_desc th {width: 100%;}
#info_desc td {color: #000;}
#info_desc td {text-align: left;}
#info_desc table {width: 100%;}

/* inserted bst (Message for asking new Object) */
#ask_obj {position: absolute; z-index: 1}
#ask_obj {top: 180px;}
#ask_obj {left: 530px;}
#ask_obj {margin-left: -250px;}
#ask_obj {width: 300px;}
#ask_obj {padding: 5px;}
#ask_obj {font-size: 100%; line-height: 1.3em;}
#ask_obj {background-color: #fff; /* #f2f1e9; */}
#ask_obj {border: 1px solid #666;}
#ask_obj input.button {cursor:hand;background-color:#F2F1E9;color:#bd3826;padding:1px;text-align:left}
#ask_obj th {font-weight: bold; background: #F2F1E9 url(/resources/img/infobutton.gif) 3px 3px no-repeat; height: 17px;width:270px}
#ask_obj th {text-align: left; padding-left: 22px;}

.transparent {
opacity:.2;
filter: alpha(opacity=0);
-moz-opacity:0.2
}

.nonOpaque {opacity:1;-moz-opacity:1}

.center {text-align: center;}