html, body, #wrap {height: 100%;}
html { font-size: 16px; }

body {  
  font-family: Arial, Helvetica, sans-serif;
  background-color: black;
  color: white;
  font-size: 62.5%; 
  line-height: 1.6em;
}


/*
--------------------------------------------
GENERAL HTML STYLES
--------------------------------------------
*/

h1 { 
  font-size: 2.4em; 
  font-weight: bold; 
  color: white; 
  background: transparent url(../styles/title.gif) top left no-repeat;
  margin: 28px 0 0 15px;
  padding: 0 0 0 0;  
  height: 126px;
  width: 359px;
}
h1 a { text-decoration: none; }

h2 { font-size: 1.6em; font-weight: bold; color: white; 
  padding: 16px 0px 12px 0px; line-height: 1em; 
}
h3 { font-size: 1.1em; font-weight: bold; color: #ddd; padding: 6px 0px 8px 0px; }
h4 { font-size: 1.0em; font-weight: bold; color: #ddd; padding: 6px 0px 8px 0px; } 
h5 {}
h6 {}

p { padding-bottom: 8px; }

ul, ol {margin-bottom: 8px; }
li { padding-bottom: 4px; padding-left: 8px; margin-left: 28px; list-style: disc; }

a { color: #cc3333; text-decoration: none; }
a:hover { color: #ff9999; }

blockquote { padding-left: 18px; padding-bottom: 6px;}

strong { font-weight: bold; }
em { font-style: italic; }
img { padding: 0; margin: 0; }

/*
--------------------------------------------
COMMON STYLES
--------------------------------------------
*/

.hidden { visibility: hidden; }
h2 .hidden { display: none; }

.introduction { padding: 8px 0 8px 0; font-weight: bold; font-size: larger; }
.clear { clear: both; font-size: 1px; overflow: hidden; height: 1px; }
.indent { padding-left: 18px; }
.error { padding: 6px 12px 9px 12px; background: #cc3333; color: #eee; margin-bottom: 12px;}
.error a { color: white; text-decoration: underline; font-weight: bold; } 
.error a:hover { color: #ffbbbb; }
.jumptocontent { display: none; }
.contentanchor { display: none; }

.logo { width: 570px; height: 26px; float: right; }

/*
--------------------------------------------
PAGE STRUCTURE STYLES
--------------------------------------------
*/

#page {
  border: 2px solid #333; background-color: black;
  width: 950px; 
  margin: 12px auto 24px auto;
  position: relative;
}

#branding {  
  background: black; 
  height: 170px; 
}


#topnav, #topnav li, #topnav li a { padding: 0; margin: 0; list-style: none; }
#topnav {
  position: absolute;
  right: 0px;
  top: 55px;
  width: 300px;
  height: 100px;
}
#topnav li { float: left; margin-right: 8px; }
#topnav li a { display: block; height: 69px; background: transparent url(../styles/bg_topnav.gif) 0px 0px no-repeat; text-decoration: none;}

#topnav #topnav-brochure a { width: 111px; background-position: 0px 0px; }
#topnav #topnav-brochure a:hover { background-position: 0px -69px; }

#topnav #topnav-login a { width: 106px; background-position: -121px 0px; }
#topnav #topnav-login a:hover { background-position: -121px -69px; }

#topnav #topnav-contact a { width: 49px; background-position: -241px 0px; }
#topnav #topnav-contact a:hover { background-position: -241px -69px; }





#main-content { clear: both; overflow: auto; height: auto; }

#main-content #content-left {
  width: 198px;
  padding: 10px 0 0 28px;
  float: left;
  height: 20px;
}

#main-content #content-right {
  width: 198px;
  padding: 10px 28px 0 0;
  float: right;
}

#content {
  margin: 0 245px 0 245px;
  text-align: left;
  font-size: 1.2em;
  padding-bottom: 12px;
}

#content.full {
  margin: 0 12px 0 12px;
} 



#flash-selector {
  clear: both;
  height: 284px;
  width: 100%;
  overflow: hidden;
  background: #333 url(../flash/loading.gif) top left no-repeat;
}

#image-bar {
  clear: both;
  height: 158px; background: #ccc;
}

/*
---------------------------------------------------------
PRODUCT-LIST STYLES
---------------------------------------------------------
*/

.products {width: 95%; overflow: auto; }
.products, .products li { padding: 0; margin: 0; list-style: none; }
.products { margin-top: 12px; padding-bottom: 24px; }
.products .product { float: left; width: 415px; margin: 12px 12px 12px 12px; height: 120px; overflow: hidden; }

.products .product div { height: 120px; overflow: hidden; }
.products .product img { float: left; width: 120px; height: 120px; margin-right: 16px; background-color: #666; }

.products .product span.info { display: block;  font-size: 0.9em; font-weight: bold; color: #666;}

.products .product h3 { margin: 0; padding: 4px 0 6px 0; color: #01dcdf; font-size: 1.3em; }

.products .product h3 a { color: #cc3333; text-decoration: none; }
.products .product h3 a:hover { color: #ff9999; }
.products .product h3 .rating { color: black; font-weight: normal; }
.products .product p { font-size: 1em; line-height: 1.3em; padding-bottom: 12; }
.products .product span.options { font-size: 1em; }
.products .product span.options a { color: #dd9999; text-decoration: none; }
.products .product span.options a:hover { color: #cc3333; text-decoration: underline; }

/*
---------------------------------------------------------
NAVIGATION STYLES
---------------------------------------------------------
*/

#nav, #nav ul, #nav ul li { padding: 0; margin: 0; list-style: none;}

#nav a { font-size: 1.2em; 
  display: block; 
  padding: 0 15px; 
  line-height: 24px; 
  text-align: center; 
  background: black; 
  font-weight: bold; 
  text-decoration: none;
}
#nav ul li ul li a { text-align: left; 
  display: block; 
  line-height: 22px; 
  width: 120px; 
  padding: 2px 14px 3px 12px; 
  background: black; 
  font-weight: bold; 
  font-size: 1.1em;
  border-bottom: 1px solid #b3bfcc;
}

#nav { background: #F1F6F9; }
#nav ul { padding-left: 16px; } 
#nav ul li { list-style: none; float: left; position: relative; padding-right: 2px; 
  background: url(styles/bg_nav_li.gif) center right no-repeat; }
#nav ul li.last { background: none; }

/* sub menu items */
#nav ul li ul { padding-left: 0; position: absolute; display: none; text-align: left; background-color: transparent; left: 1px; top: 23px; width: 146px; filter:alpha(opacity=85); opacity: 0.85; -moz-opacity:0.85; }
#nav ul li ul li { background-image: none; filter:alpha(opacity=100); opacity: 1.0; -moz-opacity:1.0; }
#nav li > #nav ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */ top: auto; left: auto; z-index: 10; }
#nav ul li:hover ul, #nav .sfhover ul { display: block;  }

#nav a { color: white;  }
#nav a:hover, #nav li.selected a { color: white; background: #666; }


/*
---------------------------------------------------------
FOOTER STYLES
---------------------------------------------------------
*/

#site-info {
  clear: both; background-color: black; color: white; 
  line-height: 22px; text-align: right; font-size: 0.95em; padding: 1px 12px 0 12px} 
#site-info p {
  padding: 0;
}
#site-info a { color: white; text-decoration: none; }
#site-info a:hover { color: #ddd; text-decoration: underline; }