/*
 * main layout and positioning styles
 */
html, body {margin: 0; padding: 0;}

#header {height: 217px; position: relative;}
#container {width: 708px; margin: 0 auto; position: relative;}
#content {float: left; margin: 0 0 10px 15px; padding: 5px 5px 4em 5px; width: 497px;}
#panels {width: 160px; margin-left: 532px;}
#footer {position: absolute; left: 15px; bottom: 1em; height: 2em; width: 497px;}
#clearer {clear: left;}

/* make the container as large as the document */
html, body {height: 100%;}
#container {height: auto; min-height: 100%;}

/*
 * background images for layout
 * 
 * background image paths moved to design file
 */
html, body {background-repeat: repeat-x; background-position: left top;}
#container {background-repeat: repeat-y; background-position: center top;}


/*
 * document wide basic styles
 * 
 * color definitions moved to design file
 */
body {font-size: small; font-family: Arial, Helvetica, Verdana, sans-serif;}


/*
 * header styles
 */
#header div#header_image {position: absolute; width: 680px; height: 166px; top: 40px; left: 14px;}
#header h1 {position: absolute; width: 150px; height: 68px; right: 22px; top: 100px;}
#header h1 span {position: absolute; left: -1000em;}

/* backgrounds, image paths moved to design file */
#header {background-repeat: no-repeat; background-position: center top;}
#header div#header_image {background-repeat: no-repeat; background-position: center center;}
#header h1 {background: url(images/header_logo.png) no-repeat;}


/*
 * content styles
 */
#content h2 {font-variant: small-caps;}
#content h3[id]:hover::after {color: gray; content: " #"attr(id); font-weight: normal;}


/*
 * footer styles
 */
#footer {position: absolute; left: 15px; bottom: 1em; height: 2em; width: 497px;}
#footer p {margin: 0; padding: 0; font-size: 0.75em; color: gray; text-align: center;}
#footer p a {color: gray; text-decoration: none;}
#footer p a:hover, #footer p a:focus, #footer p a:active {text-decoration: underline;}


/*
 * panel styles
 */
.panel {margin-bottom: 1.5em;}
.panel h2 {font-variant: small-caps; font-size: 1em; letter-spacing: 0.2em;}
.panel ul {margin: 0; padding: 0; list-style: none;}
.panel ul li {margin: 0.5em 0; padding: 0 0 1px 1em; background-repeat: no-repeat; background-position: left center;}
.panel a {text-decoration: none;}

.panel form {margin: 0.5em;}
.panel form input {display: block; color: #3B3B3B; background-color: #F7F7F7; border: 1px solid #DFDFDF;}


/*
 * styles for the style switcher
 * 
 * color definitions moved to desing file
 */
ul#styles {position: relative; height: 21px; margin: 1em 0; padding: 0 36px; list-style: none;}
ul#styles li {float: left; width: 28px; margin: 0; padding: 0; background: none;}
ul#styles li a {display: block; width: 28px; height: 21px;}

ul#styles li a span {display: block; position: absolute; width: 24px; height: 20px; border: 1px solid transparent; border-bottom: none; background-repeat: no-repeat; background-position: center center; z-index: 5;}
ul#styles li a small {display: none; position: absolute; left: 18px; top: 20px; width: 124px; padding: 91px 2px 2px 2px; border-width: 1px; border-style: solid; background-position: 50% 2px; background-repeat: no-repeat; z-index: 3;}
ul#styles li a:hover small {display: block;}

ul#styles li.forest a span {background-image: url(forest/style_icon.png);}
ul#styles li.mountain a span {background-image: url(mountain/style_icon.png);}
ul#styles li.sunset a span {background-image: url(sunset/style_icon.png);}

ul#styles li.forest a small {background-image: url(forest/style_thumb.jpg);}
ul#styles li.mountain a small {background-image: url(mountain/style_thumb.jpg);}
ul#styles li.sunset a small {background-image: url(sunset/style_thumb.jpg);}


ul#styles li a:hover span, ul#styles li a small {}
ul#styles li a small {font-size: 0.8em; text-align: center; font-weight: normal;}


/*
 * extra styles for specific panels
 */
#nav_panel a {font-weight: bold;}

#ie_bug_notice {margin: 1em 0 0.5em 0; padding-left: 20px; font-size: 0.75em; background-repeat: no-repeat; background-position: left center;}
#ie_bug_notice {display: none;} /* hide it from compilant browsers */

#search_panel input.submit {display: none;}