/**
 * File: style.css
 * Author: Keesweb
 * Date: 27-02-2006
 * Project: Arch Timber Protection web site
 **************************************************************
 * Purpose:
 *
 * Contains the CSS style used for the site
 **************************************************************
 * Timeline:
 * 
 * + 27-02-2006: 
 *	Create the file and added styles for the menu; the menu makes 
 * 	use of the techniques listed in the article 'Suckerfish Dropdowns'
 * 	by Patrick Griffiths and Dan Webb, which can be found at the 
 * 	'A List Apart' web site (http://www.alistapart.com/articles/dropdowns/)
 * + 01-03-2006:
 *	Centered the layout and worked around the '100% - height of header' 
 *	vertical size problem by adding a script to main.php
 * + 08-03-2006:
 *	Fixed bug; footer did not have white background in all cases, because
 *	default background color defers from system to system
 */
 
 body, html {
 	font-family: arial, helvetica, serif;
 	font-size: 8pt;
 	color: #336;
	margin: 0;
	padding: 0;
 	height: 100%;
 	overflow: hidden;
 }
 
 a {
   color: #030;
 }

 /* Main site structure:
  ************************************************************
  *  
  *  --------------------------------
  * |#logo                | #trail   |  #topheader      |
  * |--------------------------------|                  |- #header
  * |#banner                         |  #bottomheader   |
  * |                                |  
  * |--------------------------------| 
  * |#menu                           | 
  * |--------------------------------|
  * |#textholder          | #pic-    |
  * |                     |  holder  |  
  * |                     |          |        
  * |                     |          |  #content
  * |                     |          |
  * |                     |          |
  * |#footer              |          | 
  *  --------------------------------
  */ 
 
 /* Site container */
 #container {
       	width: 740px;  
 	height: 100%;
 	//top: -15px;
 	/* center horizontally */
 	margin-left: auto;
 	margin-right: auto;
 }
 
 #banner {
 	width: 740px;
 	height: 118px;
 	font-size: 16px;
 	font-weight: bold;
 	color: white;
 	overflow: hidden;
 }
 #bannertext {
  	text-align: right;
 	padding-right: 75px;
 	padding-top: 80px;
 	position: relative;
 	width: auto;
 	height: auto;
 	top: -118px;
 	background-color: transparent;
 }
 
 /* Header */
 #header {
 	width: 740px;
 	height: 183px;
 }
 
 #topheader {
        height: 65px;
 }
 
 #topheader #logo {
        width: 230px;
        height: 100%;
        float: left;
 }
 
 #topheader #logo img {
 	position: relative;
 	top: 5px;
 	left: 1px;
 }
 
 #topheader #trail {
         width: 500px;
         height: 100%;   
	 float: right;
 }
 
 
 
 #bottomheader {
 	height: 118px;
 	top: auto;
 }
 
 /* Footer */
 #footer {
 	height: 25px;
 	width: 740px;
 	font-size: 8pt;
 	background-color: #D9DEE5;
 	position: relative;
        padding-right: 0px;
        padding-top: 4px;
        
        clear: both;
        border-top: 2px solid #C8D1DA;
        z-index: 10;
        text-align: right;
 }
 
 #footer span#navi {
  	padding-left: 5px;
  	float: left;
 }
 
 #footer span#copy {
	
 }
 
 /* Content 
  *********************
  * Unfortunately, CSS does not currently provide means to stretch
  * the content to 100% - height of the header; a javascript script
  * in main.php takes care of this instead.
  */
 #content {
 	width: 740px;
 	background-image: url('../images/bg.png');
 	
 	background-repeat: repeat-x;
 	z-index: 0;
 	top: 0;
 	padding: 0;
 	margin: 0;
 	
 }
 
 /* Textholder, contains the main page texts in an iframe 
  * Textholder includes text, which basically fakes an Iframe 
  * by using overflow: auto
  */
 #textholder {
 	width: 502px;
 	margin-left: 2px;
 	margin-right: 0px;
 	padding-left: 10px;
 	padding-right: 10px;
 	padding-top: 5px;
 	padding-bottom: 2px;
 	top: 15px;
 	margin-bottom: 15px;
 	z-index: 0;
 	float: left;
 	position: relative;
 	overflow: auto;
 	background-color: white;
 	scrollbar-arrow-color:#CCCCCC; 
	scrollbar-track-color:#FFFFFF; 
	scrollbar-face-color:#CCCCCC; 
	scrollbar-highlight-color:#FFFFFF; 
	scrollbar-3dlight-color:#FFFFFF; 
	scrollbar-darkshadow-color:#FFFFFF; 
	scrollbar-shadow-color:#FFFFFF; 
 }
 
 /* Picholder, container for pics or downloadables */
 #picholder {
 	float: right;
 	width: 202px;
 	position: relative;
 	top: 15px;
 	background-color: #FFF;
 	z-index: 0;
 	padding: 2px;
 	padding-top: 5px;
 	margin-right: 2px;
 	margin-bottom: 15px;
 	overflow-y: auto;
        overflow-x: hidden;
	scrollbar-arrow-color:#CCCCCC; 
	scrollbar-track-color:#FFFFFF; 
	scrollbar-face-color:#CCCCCC; 
	scrollbar-highlight-color:#FFFFFF; 
	scrollbar-3dlight-color:#FFFFFF; 
	scrollbar-darkshadow-color:#FFFFFF; 
	scrollbar-shadow-color:#FFFFFF; 

 }
 
#picholder :root{
 overflow-y:hidden;
}

 /* Main dropdown navigation, also used in #trail for language 
    selection */
 #menu {
        height: 16px;
        padding: 0;
        margin: 0;
        font-weight: bold;
        font-size: 7pt;
        width: 100%;
        background-color: #039;
        padding-top: 8px;
	z-index: 0;
 }
 

 
 ul#nav {
 	list-style: none;
 	padding: 0;
 	margin: 0;
 	padding-left: 0px;
 	z-index: 5;
 	white-space: nowrap;
  	margin:0 auto; 
  	background-color: #039;
 }
 
 ul#nav li {
 	/*border-right: 1px solid #09F;*/ 
 	height: 20px;
 	z-index: 5;
 }
 

 ul#nav li ul li {
 	padding-top: 0px;
 	z-index: 10;
 }
 
 ul#nav li ul {
 	z-index: 10;
 }
 
 ul#trailnav {
  	list-style: none;
  	padding: 0;
  	margin: 0;
  	float: right;
 	z-index: 10;
 }
 
 ul#trailnav li, ul#trailnav li ul li, ul#trailnav li ul {
 	z-index: 10;
 }
 
 #nav a {
 	font-weight: bold;
 	color: white;
	text-decoration: none;
 	width: 100%;
 	height: 20px;
 	padding: 0px 6px;
 	z-index: 5;
 }
 
 #nav ul li a {
 	color: #339;
 	padding-top: 0;
 	z-index: 5;
 }
 
 #trailnav a {
 	color: #339;
	text-decoration: none;
 	width: 100%;
        font-size: 8pt;
        font-weight: normal;
        z-index: 10;
 } 
 
 #trailnav a:hover {
 	color: #003;
 	text-decoration: underline;
 	z-index: 10;
 }  
 
 #nav a span, #trailnav a span {
        font-size: 10pt;
        
 }
 
 #nav a span {
 	z-index: 5;
 }
 
 #trailnav a span {
 	z-index: 10;
 }
 
 #nav a:hover span, #trailnav a:hover span  {
        color: #C33;
 }
 
 #nav a:hover span {
 	z-index: 5;
 }
 
 #nav li li, #trailnav li li {
 	border-bottom: 1px solid white;
    	border-left: 1px solid white;
   	border-right: 1px solid white;
 	
 }
 
 #nav li li {
   	z-index: 5;
 }
 
 #trailnav li li {
   	z-index: 10;
 }
 
 #nav li {
 	display: inline;
	list-style-type: none; 
	z-index: 5;
 }
 
 
 #nav li li a, #trailnav li li a {
 	display: block;
  	width: 150px;
        background-color: white;
 	border: 1px solid #339;
 	padding: 2px;
 	padding-left: 4px;
 }
 
 #nav li li a {
 	z-index: 10;
 }
 
 #trailnav li li a {
 	font-size: 7pt;
 }
 
 #nav li li a:hover, #trailnav li li a:hover {
	background-image: url('../images/buttonhover.png');
	text-decoration: none;
 }
 
 #nav li li a:hover {
 	z-index: 10;
 }
 
 #nav li, #trailnav li {
 	float: left;
 	position: relative;
 	text-align: left;
 	width: auto;
 	z-index: 5;
 	cursor: default;
 }
 
 #nav li ul, #trailnav li ul {
 	display: none;
 	list-style: none;
 	position: absolute;
 	left: 0;
 	padding: 0;
 	margin: 0;
 	padding-bottom: 8px;
 	padding-top: 0px;
        width: 150px;
 	font-weight: normal; 	
   	border-top: 1px solid white; 	
 	background-image: url('../images/shadow.png');
 	background-repeat: no-repeat;
 	z-index: 10;
 }
 
 #nav li>ul, #trailnav li>ul {
 	top: auto;
 	left: auto;
 }
 
 
 #nav li:hover ul, #nav li.over ul, #trailnav li:hover ul, #trailnav li.over ul {
 	display: block;
 }
 
  div.down a {
  	z-index: 0;
 }
 
 ul.subnav, ul.subnav li, ul.subnav li a {
   z-index: 10;
 }

 
 .formsubmit {
 	background-color: #CCF;
 	color: black;
 	border: 1px inset gray;
 }