/*
-----------------------------------------------
ferrumhelveticum.ch Screen Style
Author:   Robert Hilbe
Version:  2009-02-10
----------------------------------------------- */

body {
   margin: 0;
   padding: 0;
   background: #000 url(../img/body-bg.jpg) no-repeat;
   color: #fff;
   font: small/1.3em verdana,helvetica,arial,sans-serif;
   text-align: left;
   }

h1,h2,h3,h4 {
   margin: 1.5em 0 1em;
   font-size: 108%;
   font-family: verdana,helvetica,arial,sans-serif;
   font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   color: #fff;
   }

a img {
   border: none;
   }

#container {
   margin: 48px 0 0 223px;
   padding: 0;
   width: 840px;
   }

/* =Links
----------------------------------------------- */

a {
   color: #bbb;
   text-decoration: none;
   border-bottom: none;
   }

a:hover {
   color: #eee;
   }

/* =Header
----------------------------------------------- */

#header {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 220px;
   height: 100px;
   }

#header h1 {
   margin: 0;
   padding: 0;
   font-size: 0em;
   }

#header a {
   display: block;
   width: 220px;
   height: 100px;
   color: #000;
   }

/* =Navigation
----------------------------------------------- */

#navigation {
   margin: 0;
   padding: 0;
   height: 30px;
   line-height: 26px;
   width: 630px;
   overflow: hidden;
   }

#navigation ul {
   float: left;
   margin: 0;
   padding: 0 10px;
   list-style: none;
   text-align: left;
   }

#navigation li {
   display: inline;
   margin: 0;
   padding: 0 7px 0 0;
   float: left;
   }

#navigation li a {
   padding: 2px 0 2px 8px;
   display: block;
   text-decoration: none;
   border: none;
   font: 100%/26px futura,'century gothic',verdana,helvetica,arial,sans-serif;
   text-transform: uppercase;
   color: #ddd;
   }

/* Hide link to memberzone */

#navigation ul.topnav a.member {
   display: none;
   }

/* Show submenu links in memberzone */

#navigation ul.topnav li.active li a {
   display: block;
   }

#navigation li.active a {
   font-weight: bold;
   color: #fff;
   }

#navigation li a:hover {
   color: #bbb;
   }

#navigation li ul {
   display: none; 
   position: absolute;
   top: 170px;
   left: 15px;
   margin: 0;
   padding: 0;
   position: absolute;
   list-style: none;
   width: 200px;
   height: auto !important;
   z-index: 100;
   }

#navigation li.active ul {
   display: block;
   float: none;
   }

#navigation li.active li a {
   padding: 8px;
   width: 180px;
   text-decoration: none;
   border-bottom: 1px dotted #888;
   font-size: 100%;
   font-weight: normal;
   line-height: 1.3em;
   background: none;
   text-align: left;
   }

#navigation li li ul, #navigation li li ul li {
   display: none;
   }

#navigation li li.active ul, #navigation li li.active ul li {
   display: block;
   }

#navigation li li.active ul {
   position: relative;
   top: 0;
   left: 0;
   }

#navigation li li.active li a {
   padding: 5px;
   border: none;
   font-size: 75%;
   font-weight: normal;
   text-transform: lowercase;
   line-height: 1em;
   background: none;
   text-align: right;
   }

/* =languages
----------------------------------------------- */

#languages {
   position: absolute;
   top: 16px;
   left: 620px;
   margin: 0;
   padding: 0;
   font-size: 90%;
   height: 26px;
   width: 50px;
   line-height: 26px;
   }

#languages p {
   margin: 0;
   padding: 0;
   }

#languages a, #languages a:hover {
   float: right;
   padding: 0 3px;
   border: none;
   color: #888;
   }

/* =print
----------------------------------------------- */

#print {
   position: absolute;
   top: 16px;
   left: 610px;
   margin: 0;
   padding: 0;
   line-height: 25px;
   }

#print p {
   margin: 0;
   padding: 0;
   }

#print a {
   display: block;
   width: 20px;
   height: 25px;
   }

/* =Breadcrumbs
----------------------------------------------- */

.B_crumbBox {
   color: #888;
   font: 95%/1.3em futura,'century gothic',verdana,helvetica,arial,sans-serif;
   text-transform: lowercase;
   }

.B_crumbBox a {
   color: #888;
   border: none;
   }

.B_crumbBox a:hover, .B_crumbBox a:focus {
   color: #fff;
   }


/* =Top-Home-Links
----------------------------------------------- */

#top-home-links {
   margin: 30px 0;
   padding: 0;
   clear: both;
   }

#top-home-links a {
   padding: 5px 10px;
   font: 80%/1em futura,'century gothic',verdana,helvetica,arial,sans-serif;
   text-transform: uppercase;
   }

/* =Content
----------------------------------------------- */

#content {
   padding: 10px 20px;
   width: 590px;
   height: 479px;
   float: left;
   overflow: auto;
   text-transform: lowercase;
   scrollbar-base-color: #000;
   scrollbar-track-color: #111;
   scrollbar-arrow-color: #888;
   scrollbar-shadow-color: #000;
   scrollbar-highlight-color: #111;
   scrollbar-darkshadow-color: #000;
   scrollbar-3dlight-color: #000;

   }

#content p, #content ul, #content ol {
   margin: 0 0 1em 0;
   padding: 0;
   }

#content ul {
   list-style-type: square;
   }

#content li {
   margin: 0 0 0 1.5em;
   }

/* =Side
----------------------------------------------- */

#side {
   margin: 0 0 0 20px;
   padding: 0 10px;
   width: 160px;
   height: 479px;
   overflow: hidden;
   float: right;
   }

#side h2 {
   color: #666;
   font-weight: normal;
   font-size: 110%;
   letter-spacing: 0.1em;
   margin: 1.5em 0 0.5em;
   }

/* =Search
----------------------------------------------- */

#ajaxSearch_form {
   margin: 0;
   padding: 0;
   position: absolute;
   top: 15px;
   left: 682px;
   }

#searchClose {
   padding: 16px 10px 5px 5px;
   }

/* =Formulare
----------------------------------------------- */

form fieldset {
   margin: 0;
   padding: 0;
   border: none;
   }

form input, form select, form textarea {
   margin: 2px 0 8px 0;
   padding: 2px;
   color: #888;
   background: #111;
   border: 1px solid #888;
   font: 120%/1.5em verdana,helvetica,arial,sans-serif;
   }

form input:focus, form textarea:focus {
   color: #fff;
   border: 1px solid #999;
   }

form label {
   margin: 0;
   font-size: 80%;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-weight: normal;
   color: #ddd;
   }

/* =Template
----------------------------------------------- */

body#home {
   background: #000 url(../img/body-bg-home.jpg) no-repeat;
   }

#home #navigation {
   position: absolute;
   top: 160px;
   left: 223px;
   }

#navigation li a {
   padding: 2px 0 2px 8px;
   display: block;
   text-decoration: none;
   border: none;
   font: 110%/26px futura,'century gothic',verdana,helvetica,arial,sans-serif;
   text-transform: uppercase;
   color: #ddd;
   }

#home #content {
   padding-top: 180px;
   height: 339px;
   }

#home .news {
   margin-top: 50px;
   width: 235px;
   }

#home .news h2 {
   font-size: 95%;
   padding: 2px 0;
   border-bottom: 1px dotted #bbb;
   }

#home .news h3 {
   font-size: 90%;
   font-weight: bold;
   margin: 0 0 5px;
   padding: 0;
   }

#home .newsletter {
   margin-top: 30px;
   width: 235px;
   }

#home .newsletter h2 {
   font-size: 95%;
   padding: 2px 0;
   border-top: 1px dotted #bbb;
   }

#home #quicklinks {
   position: absolute;
   top: 610px;
   width: 590px;
   text-align: right;
   }

/* =Debug 
-----------------------------------------------

body {
   background: #000 url(../img/ferrum-template.jpg) no-repeat;
}

body,p,h1,h2,h3,h4,h5,a,ul,li {
   color: #555 !important;
   }

div {
   border: 1px solid red;
   }
   
p {
   border: 1px solid green;
   }

ul, li, a {
   border: 1px solid blue;
   }
*/