/***************************************************************************
* General Settings
***************************************************************************/

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #fafbfb url(../img/body_bg.gif) top center repeat-y;
  color: #666666;
  font: 11px Arial, Helvetica, sans-serif;
  height: 125%;
  text-align: center;
}

#container {
  height: auto !important;
  height: 100%;
  left: 50%;
  margin-left: -500px;
  min-height: 100%;
  position: absolute;
  text-align: left;
  width: 1000px;

}

/* the following rule is recognized only by IE */
* html body #container {
  margin-left: -499px;
}


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

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 1.2em;
  font-weight: bold;
  padding: 0px;
}

h2, h3, h4 {
  color: #4f4f4f;
  font-size: 1em;
}
h5 {
  color: #666666;
  font-size: 1.2em;
}

.clearAfter:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* Holly Hack Targets IE Win only \*/
* html .clearAfter {height: 1%;}
/* End Holly Hack */

/***************************************************************************
* Header
***************************************************************************/

#header {
  height: 350px;
  margin-left: 20px;
  width: 961px;
  position: relative;
}

#headerImage {
  height: 289px;
  margin-top: 10px;
  margin-left: 1px;
  padding-top: 0px;
  float: left;
}

#language {
  width: 180px;
  margin: 5px;
  margin-left: 20px;
  float: left;
}

#language .homeLink {
  margin-left: 10px;
}

#dropMenu {
  position:absolute;
  top: 0px;
  left: 245px;
  width: 200px;
  height: 16px;
  margin-left: 0px;
  float: left;
}

######
# style drop menu
####

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.dropMenu {
width:750px; 
font-size:0.85em;
z-index:100;
}
/* remove all the bullets, borders and padding from the default list styling */
.dropMenu ul {
padding:0;
margin:0;
list-style-type:none;
}
.dropMenu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.dropMenu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.dropMenu a, .dropMenu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#656D70; 
width:139px; 
height:15px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#f1f1f1; 
padding-left:10px; 
line-height:15px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .dropMenu a, * html .dropMenu a:visited {
width:120px;
w\idth:139px;
}

/* style the second level background */
.dropMenu ul ul a.drop, .dropMenu ul ul a.drop:visited {
background:#cccccc url(../../graphics/drop.gif) bottom right no-repeat;

}
/* style the second level hover */
.dropMenu ul ul a.drop:hover{
background:#ccc url(../../graphics/drop.gif) bottom right no-repeat;
}
.dropMenu ul ul :hover > a.drop {
background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
}
/* style the third level background */
.dropMenu ul ul ul a, .dropMenu ul ul ul a:visited {
background:#ccc;
}
/* style the third level hover */
.dropMenu ul ul ul a:hover {
background:#ccc;
}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.dropMenu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:15px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .dropMenu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.dropMenu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.dropMenu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.dropMenu table {position:absolute; top:0; left:0;}

/* style the second level links */
.dropMenu ul ul a, .dropMenu ul ul a:visited {
background:#f1f1f1; 
color:#000; 
height:auto; 
line-height:1em; 
padding: 3px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .dropMenu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.dropMenu a:hover, .demo .menu ul ul a:hover{
color:#fff; 
background:#ccc;
}
.dropMenu :hover > a, .dropMenu ul ul :hover > a {
color:#fff;
background:#ccc;
}

/* make the second level visible when hover on first level list OR link */
.dropMenu ul li:hover ul,
.dropMenu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.dropMenu ul :hover ul ul{
visibility:hidden;
}

/* make the third level visible when you hover over second level list OR link */
.dropMenu ul :hover ul :hover ul{ 
visibility:visible;
}



#headerMenu {
  width: 945px;
  min-height: 28px;
  height: auto !important;
  height: 28px;
  margin-left: 15px;
  float: right;
}

#headerMenu ul {
  list-style: none;
  width: 680px;
}

#headerMenu ul li {
  color: #f7d225;
  float: left;
  font: 8pt;
  padding-top: -10px;
}

#headerMenu ul li.lastMenuItem {
  float: right;
}


#headerMenu ul li a {
  padding: 0 5px;
}

#headerLogo {
  position: absolute;
  top: 25px;
  left: auto;
  height: 24px;
  right: 0px;
  width: 170px;
}

#headerLogo .homeLink {
  background: url(../img/spectos_logo.gif) no-repeat top left;
  display: block;
  height: 24px;
  text-decoration: none;
  width: 144px;
}


/***************************************************************************
* Main
***************************************************************************/

#main {
  margin-left: 20px;
  min-height: 400px;
  width: 961px;
}

#main a.internal-link {
  background: url(../img/internal_link.gif) no-repeat top left;
  padding-left: 10px;
}
#main a.internal-link img {
  border: none;
  display: none;
}

#main a.external-link-new-window {
  background: url(../img/external_link_new_window.gif) no-repeat top left;
  padding-left: 15px;
}
#main a.external-link-new-window img {
  border: none;
  display: none;
}
#main a.download {
  background: url(../img/download.gif) no-repeat top left;
  padding-left: 15px;
}
#main a.download img {
  border: none;
  display: none;
}


#main ul {
  list-style: none;
}

#sidebar {
  background: url(../img/bg_195px.gif) no-repeat top left;
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
  min-height: 300px;
  width: 195px;
}

/* Holly Hack Targets IE Win only \*/
* html #main #sidebar {margin-left: 10px;}
/* End Holly Hack */

#menuTitle,
#contentTitle {
  font-size: 1.2em;
  font-weight: bold;
  padding: 1px;
  padding-left: 10px;
}

#sidebarMenu ul {
  font: 12px Arial, Helvetica, sans-serif;
  list-style: none;
  margin-top: 20px;
}

#sidebarMenu ul li {
  background: #d9dce1;
  color: #3C323A;
  height: 15px;
  margin: 5px 0;
  width: 195px;
}

#sidebarMenu ul li a {
  color:  #656D70;
  display: block;
  padding-left: 10px;
  text-decoration: none;
  width: 185px;
}

#sidebarMenu ul li.active a,
#sidebarMenu ul li.active-sub a {
  background: url(../img/bg_level1_active.gif);
  color: #333;
  font-weight: bold;
}


#sidebarMenu ul li a:hover {
  color: #333333;
}

#sidebarMenu ul li.menuSidebar-sub1 {
  background: #f1f1f1;
  color: #3C323A;
  height: 15px;
  margin: 5px 0;
  width: 195px;
}

#sidebarMenu ul li.menuSidebar-sub1 a {
  color:  #656D70;
  display: block;
  padding-left: 25px;
  text-decoration: none;
  width: 170px;
}

#sidebarMenu ul li.menuSidebar-sub1 a:hover {
  color: #333333;
}
#sidebarMenu ul li.menuSidebar-sub1.active a {
  background: url(../img/bg_level2_active.gif);
}

#content {
  background: url(../img/bg_440pxx.gif) no-repeat top left;
  float: left;
  margin-right: 20px;
  min-height: 300px;
  padding-top: 15px;
  width: 440px;
}

#content .csc-header {
  margin-bottom: 10px;
}

#content .csc-textpic {
  margin: 0px 30px 30px 0px;
  float: left;
}

#content .csc-textpic-imagecolumn, .csc-textpic-image {
  list-style: none;
  margin: 10px 0px 0px 0px;
  float: left;
}

#content .csc-textpic-center .csc-textpic-above {
  margin: 10px;
  float: left;
}

#content .csc-textpic-caption {
  font-size: 9px;
  font-style: italic;
  margin-bottom: -2px;
  text-align: center;
  text-transform: uppercase;
}

#content ul li {
  background: url(../img/bulletpoint.gif) left 4px no-repeat;
  margin-left: 10px;
  padding-left: 7px;
  clear: both;
}

#content ol li {
  margin-left: 10px;
}

#contentSpecial {
  background: url(../img/bg_230pxx.gif) no-repeat top left;
  float: left;
  min-height: 300px;
  padding-top: 15px;
  width: 230px;
}

#contentSpecial ul li {
  margin-left: 10px;
}

#contentSpecial ol li {
  margin-left: 10px;
}

#contentSpecial .csc-header {
  margin-bottom: 10px;
}

#contentSpecial p.bodytext {
  margin-left: 0px;
}


/***************************************************************************
* Footer
***************************************************************************/

#footer {
  clear: both;
  margin-left: 20px;
  padding: 30px 0;
  width: 961px;
}

#footer a {
  color: #bfbfbf;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline ;
}

#footerContent {
  background: #e6e6e6;
  height: 17px;
  width: 961px;
}

#footerMenu ul {
  list-style: none;
  margin-left: 20px;
  padding-top: 1px;
}

#footerMenu ul li {
  color: #9E9C9A;
  float: left;
}

#footerMenu ul li a {
  color: #9E9C9A;
  font: 9px arial,sans-serif;
  margin: 0 5px;
  text-decoration: none;
}

#footerMenu ul li a:hover {
  color: #6d6c6a;
}

#footerText {
  color: #6d6c6a;
  float: right;
  font: 9px arial,sans-serif;
  margin-right: 20px;
  padding-top: 2px;
}


/* Mail Formular
*****************************/

#content .csc-mailform {
  border: none;
  margin: 5px;
  padding: 5px;
}

#content legend {
  display: none;
}

#content .csc-mailform input,
#content .csc-mailform select {
  width: 150px;
}

#content .csc-mailform fieldset {
  border: none;
  padding: 5px 5px 0 5px;
}

#mailformname {
  border: 1px solid #137ca5;
  margin-left: 10px;
}

#mailformemail {
  border: 1px solid #137ca5;
  margin-left: 30px;
}

#mailformaddress {
  border: 1px solid #137ca5;
  margin-left: 3px;
}

#content .csc-mailform-field {
  text-align: left;
  margin: 2px;
}

#content .csc-mailform-field label {
  line-height: 1.5em;
  vertical-align: top;
}


#content .csc-mailform fieldset legend {
  font-size: 1.1em;
  font-weight: bold;
  padding: 5px;
}

#content .csc-mailform fieldset dl {
  width: auto;
}

#content .csc-mailform fieldset dt {
  float: left;
  margin-right: 6px;
  padding: 0 0 .5em 0;
  text-align: right;
  width: 80px;
}

#content .csc-mailform fieldset dd {
  padding: 0 0 .5em 0;
  width: auto;
}

#content .csc-mailform fieldset textarea {
  width: 300px;
}

#content .csc-mailform .csc-mailform-check {
  border: none;
  width: auto;
}

#content .csc-mailform .csc-mailform-submit {
  border: 1px solid #137ca5;
  color: #137ca5;
  float: right;
  font-size: 0.9em;
  margin: 5px 15px 0 0;
  padding: 0 3px;
  text-align: center;
  width: auto;
}