body {
  background-color: #00315c;
}

#header {
  background-image: url('/img/bg_header_solarlight.png');
}

#header h1 {
  background: transparent url('/img/logo_solarlight.jpg') no-repeat 11px 8px;
  height: 115px;
  right: auto;
  width: 230px;
}

#header h1 img {
  padding: 10px 0 0 8px;
}

#main {
  background-image: url('/img/bg_main_solarlight.png');
}

#content {
  margin-right: 162px;
}

#products h2 {
  font-size: 1.2em;
  margin-bottom: 20px;
}

#products{
  position: relative;
  background: url('/img/bg_mainnav.png') repeat-x left bottom #BEDF48;
  border-color: #728B19;
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  z-index: 10;
  margin-left: -230px;
  clear: both;
}

#products.home{
  margin-left: 0px;
}

#illustration{
  float:left;
  margin-top: 30px;
}

#overview{
  float:left;
  padding: 20px 10px;
  width: 390px;
}

#overview li {
  padding-left: 13px;
  background: url('/img/li_blue.png') 0 0.4em no-repeat;
}

#overview ul li{
  margin-top: 5px;
}

#overview ul li a {
  color: #00315c;
  text-decoration:none;
}

#overview a:hover,
#overview a:focus,
#overview a:active {
  text-decoration: underline;
}

#meetus a{
  color: #00315c;
  text-decoration:none;
}

#meetus a:hover,
#meetus a:focus,
#meetus a:active{
  text-decoration:underline;
}

#meetus p{
  margin-top:5px;
  width: 180px;
}

#meetus{
  float: left;
  padding: 20px 10px;
  width: 210px;
}

#footer {
  background-image: url('/img/bg_footer_solarlight.png');
  background-color: #00315c;
  position: relative;
  z-index: 100;
}

#servicenav a,
#footer a  {
  border-right-color: #aed81c;
  color: #aed81c;
}

#solarlight {
  cursor: pointer;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 21px;
  top: 0;
  width: 162px;
}

#solarlight img {
  float: left;
}

#solarlight div {
  background: url('/img/solarlight_bg.png') repeat-y 0 0;
  height: 100%;
  margin-top: 869px;
  width: 162px;
}

#solarlighticons {
  color: #00315c;
  margin: 0;
  padding: 0 0 3em 60px;
}

#solarlighticons h2 {
  font-size: 1.2em;
  margin-bottom: 20px;
}

#solarlighticons li {
  float: left;
  margin: 20px 10px 0 0;
  width: 222px;
}

#solarlighticons li img {
  float: left;
  margin: 0 10px 0 0;
}

#solarlighticons p {
	clear: left;
	font-size: 0.85em;
	margin: 0;
	text-align: right;
	width: 670px;
}

.iconlist p {
  clear: left;
  margin: 2em 0;
}

.iconlist p img {
  float: left;
  margin: 0 10px 20px 0;
}

.iconlist a {
  text-decoration: none;
  color: #00315C;
}

.iconlist a:hover,
.iconlist a:focus,
.iconlist a:active {
  text-decoration: underline;
}

#content img.home {
	position: absolute;
}

#main.home {

}

#main.home #content {
  padding-bottom: 400px;
}

#content h1.home {
	margin: 0;
}

#skiplinks p a:focus, 
#skiplinks p a:active {
  color: white;
}


/* --- carousel ------------------------------------------------------------ */

#carouselWrapper {
  background: white url('/img/bg_content_inverted.png') repeat-x left bottom;
  clear: both;
  margin: 0 0 40px 0;
  padding-bottom: 25px;
}

#carousel {
  background: white url('/img/bg_content.png') repeat-x left top;
  padding: 25px 190px 0 60px;
}

#itemList {
  float: right;
  width: 222px;
}

#itemList li {
  background-color: white;
  border: 1px solid white;
  border-width: 1px 1px 1px 0;
  color: #777777;
  cursor: pointer;
  font-size: 0.8em;
  padding: 5px 10px 5px 20px;
}

#itemList li.active {
  background: #BEDF48 url('/img/bg_mainnav.png') repeat-x scroll left bottom;
  border-color: #728B19;
  -moz-box-shadow: 0 0 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 8px #AAAAAA;
  box-shadow: 0 0 8px #AAAAAA;
  color: #00315D;
  position: relative;
  z-index: 10;
}

#itemList li span {
  display: block;
  font-size: 1.3em;
  font-weight: bold;
}

#itemContainer {
  float: left;
  min-height: 230px;
  position: relative;
}

#carousel .item {
  background-color: white;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 462px;
}

#carousel .active {
  display: block;
}

#carousel .itemDesc {
  float: left;
  width: 222px;
}

#carousel .itemDesc h3 {
  font-size: 1.3em;
  line-height: 1.1;
  margin-bottom: 1em;
}

#carousel .itemDesc p {
  margin-bottom: 0.7em;
}

#carousel .itemDesc p.subline {
  font-weight: bold;
  font-style: italic;
}

#carousel .itemDesc h3 span {
  display: block;
  font-size: 0.6em;
  font-weight: normal;
}

#carousel .item img {
  display: block;
  float: right;
}

#playPause {
  background: transparent url('/img/playPause.png') no-repeat 0 -24px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 198px;
  height: 24px;
  width: 24px;
  text-indent: -999em;
}

#playPause.play {
  background-position: 0 0;
}


#playPause:hover,
#playPause:focus,
#playPause:active {
  background-position: 0 -72px;
}

#playPause.play:hover,
#playPause.play:focus,
#playPause.play:active {
  background-position: 0 -48px;
}

/* --- light effect -------------------------------------------------------- */

html, body {
  height: 100%;
}

body.light {
  background-color: #00070d;
}

.light #footer {
  background-color: #00070d;
  background-image: url('/img/bg_footer_solarlight_on.png');
}

.light #footer * {
  color: #00070d !important;
  border-color: #00070d !important;
}

#spot {
  display: none;
}

.solarswitch {
  color: #AED81C;
  font-size: 0.85em;
  padding: 0 26px 2px 0;
  position: absolute;
  right: 190px;
  top: 0.5em;
  text-decoration: none;
  z-index: 101;
}

.solarswitch:hover,
.solarswitch:focus,
.solarswitch:active {
  text-decoration: underline;
}

#solaroff {
  background: transparent url('/img/iconSwitchSun.png') no-repeat right center;
}

#solaron {
  background: transparent url('/img/iconSwitchMoon.png') no-repeat right center;
}

#solaron,
.light #solaroff {
  display: block;
}

#solaroff,
.light #solaron {
  display: none;
}

.light #spot {
  background: url('/img/solarlight_on_overlay.png') no-repeat 0 0;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  overflow: hidden;
  top: 0;
  width: 976px;
  z-index: 100;
}

.light #spot div {
  background: url('/img/solarlight_on_bottom.png') repeat-y 0 0;
  height: 100%;
  margin-top: 924px;
  width: 976px;
}

#skiplinks {
  z-index: 10000;
}

.light #skiplinks p a:focus, 
.light #skiplinks p a:active {
  color: #fff !important;
  z-index: 10000;
}


/* === Referenzen: Suche === */

form#referencesearch {
  width: 100%;
  display:block;
  margin-bottom: 1em;
}


#filtermenu {
  margin-right:35px;
}

#filtermenu ul {
  padding:0;
  margin:0;
  list-style: none;
  width:100%;
  border-bottom: 1px solid #728B19;
  float:left;
}

#filtermenu ul li {
  float:left;
  text-align:left;
  background:none !important;
  padding:0 !important;
  margin:0 !important;
}

#filtermenu button {
  border:1px solid #fff;
  border-right:0;
  border-left:0;
  border-bottom:0;
  background-color:#eee;
  cursor:pointer;
  display:block;
  font-family: Verdana;
  font-size:1em;
  margin-top:1em;
  padding:0.3em 1em;
  color: #00315c;
  margin-bottom:-1px;
}

#filtermenu button.buttonactive {
  border:1px solid #728B19 !important;
  border-bottom:1px solid #bedf48 !important;
  color: #00315c;
  background: #bedf48 !important;
}

#filtermenu button:focus,
#filtermenu button:hover {
  border:1px solid #aed81c;
  border-bottom:1px solid #728B19;
  border-right:0;
  border-left:0;
  background-color: #aed81c;
}

#filterselect {
  background: -moz-linear-gradient(top, #bedf48, #9CBE22 90%);
  background: -webkit-gradient(linear, left top, left 90%, from(#bedf48), to(#9CBE22));
  background-color: #bedf48;
  border-left:1px solid #728B19;
  box-shadow: 2px 2px 8px #AAAAAA;
  -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
  -webkit-box-shadow: 2px 2px 8px #AAAAAA;
  margin-right:35px;
  margin-top:-1em;
  padding-bottom:2em;
}

form#referencesearch select {
  background-color:#FFFFFF;
  border:1px solid #728B19;
  color:#00315c;
  display:block;
  float:left;
  font-family:Verdana;
  font-size:1em;
  height:1.8em;
  line-height:1.5em;
  margin:3em 0 0 1.3em;
  padding:0;
  width:60%;
}


/* Opera Hack */ 
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { 
  head~body select { 
    height:1.6em;
  } 
}

form#referencesearch input.submit {
  border: 1px solid #00315c;
  background-color: #fff;
  color: #00315c;
  cursor: pointer;
  font-size:1em;
  font-family:Verdana;
  height:1.8em;
  margin:3em 0 0 0.3em;
  padding:0.1em 0.5em 0.2em;
  vertical-align: middle;
}

form#referencesearch option:hover,
form#referencesearch option:focus,
form#referencesearch option:active,
form#referencesearch input:hover,
form#referencesearch input:focus,
form#referencesearch input:active {
  background-color: #00315c;
  color:#bedf48;
}

.none {
  display: none !important;
}

#list-references,
#list-products {
  margin-right:35px;
}

#list-references li {
  margin-top: 1.5em;
}

#list-references h2 {
  margin-bottom: 0.3em;
  margin-top: 0em;
}

#list-references .clickableHover,
#list-products .clickableHover {
  cursor: pointer;
}

#list-references .clickableHover a {
  background-color: #dbef9a;
  cursor: pointer;
}

#list-products ul {
  background-color: #00315D;
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  color:white;
  padding:0.5em 1em;
}

#list-products ul h2 a {
  color:white;
}

#list-products ul .clickableHover h2 a {
  background-color: white;
  color: #00315c;
  cursor: pointer;
}