html, body { height: 100%; }
body { font-family: Helvetica; color: #222; font-size: 13px;}
#wrapper { overflow-x: hidden; position: relative; min-height: 100%; height: 100%; voice-family: "\"}\""; voice-family: inherit; height: auto; }
html>body #wrapper { height: auto; }

.message {  background-color: #eee; padding: 0 10px; line-height: 2em; color: #111; clear: both; margin: 1em 0;}
.success { background: #EFFCDE; color: #111 !important;}
.error { background: #f1cfa9; color: #111 !important }

#content #home .column { width: 300px; }
#content #home .column.last { width: 150px; }

#header { background: #181818 url(/img/header-bg.png) repeat-x; height: 70px; overflow: visible;}
    #header-inner { width: 860px; margin: 0 auto; }
    #header h1 { background: url(/img/header-logo.png) 5px 0 no-repeat; height: 70px; width: 360px; float: left; }
    #header h1 a { text-indent: -1000px; width: 350px; height: 70px; display: block; float: left;}
    #menu { cursor: default; margin-top: 44px; float: right; font-size: 12px; font-weight: normal; width: 340px;}
    #menu li { float: left; }
    #menu li a { text-decoration: none;  display: block; color: #c6c6c5; text-transform: uppercase; padding: 7px 20px;}
    #menu li ul.popup { visibility: hidden; position: absolute; z-index: 200 !important;}
    #menu li ul.popup li { background-color: #AeAeAe;  width: 300px; border-left: 1px solid #555; border-right: 1px solid #555; clear: both;}
    #menu li ul.popup li.first { border-top: 6px solid #6c6c6c;}
    #menu li ul.popup li.last { border-bottom: 4px solid #555;}
    #menu li ul.popup li a { color: #333; font-weight: normal; text-transform: none; line-height: 1.3em;}
    #menu li ul.popup strong { display: block; line-height: 1.5;}
    #menu li:hover { background-color: #6c6c6c;}
    #menu li:hover ul.popup { visibility: visible;}
    #menu li:hover ul.popup li:hover a:hover { display: block; background-color: #d1d1d2;}

    #header-lower { background: #181818 url(/img/header-bg-lower.png) repeat-x; height: 87px; overflow: hidden;}
    #header-lower h2 { background: url(/img/header-banner2.png) top center no-repeat; text-align: right; font: 18px 'Helvetica'; 
      color: #aaa; height: 30px; width: 817px; margin: 0 auto; padding: 57px 0 0 0; font-weight: normal; text-shadow: 3px 3px 3px #000;}
    #header-lower h2 strong { font-weight: normal; color: #fff;}

#splash {  width: 830px; text-align: center; height: 385px; width: 800px; }
#splash-container { position: relative; z-index: -1; width: 815px; height: 380px;background: #000 !important;}
#banner { margin-bottom: 1em; margin-top: 8px; width: 615px; font-size: 20px; text-align: center; margin: 1em auto; line-height: 1.5em; color: #666; font-style: italic; }

#content { line-height: 1.5em; width: 830px; margin: 24px auto 24px auto; padding-bottom: 50px;}
    #content a { color: #b57536; }
    #content h2 { font-size: 18px; line-height: 2em; text-transform: uppercase; color: #656566; margin-bottom: 0.5em; }
    #content h2 a { text-decoration: none; color: #656566; }
    #content small.soon { font-size: 10px; color: #aaa; letter-spacing: 1.5px; margin-left: 1em;}
    #content h3 { font-size: 13px; line-height: 2em; color: #10261f;}
    #content .sub { margin-bottom: 1em; }
    #content p { color: #7f7f7f; }
    #content .container .column { width: 256px; margin: 0 30px 0 0; float: left;}
    #content .container .column+.last { margin-right: 0; }
    #content .container .column h3 a { text-decoration: none; color: #333; }

#footer { height: 51px; clear: both; background: url(/img/footer-bg.png); position: absolute; bottom: 0; width: 100%;  }
    #footer-inner { width: 860px; margin: 0 auto;}
    #footer-copy { text-indent: -5000px; float: right; width: 178px; height: 42px; background: url(/img/footer-icon.png);}
    #footer-menu { float: left; margin-top: 16px; }
    #footer-menu li { float: left; }
    #footer-menu li a { text-decoration: none; display: block; color: #eee; padding: 0 10px; font-size: 11px;}
    
    #login label { display: block; margin: 0 0 1em 0; line-height: 2em;}
   
    #login input[type=text],
    #login input[type=password] { display: block; width: 240px; }
    #login label.check-box { clear: none;}
    #login input.check-box { float: left;}
    #login input.submit { clear: both;}
    #login .login-form { margin-left: 20px; float: left; width: 250px; background: #e6e6e6; padding: 20px; border-right: 3px dotted #fff;}
    #login .login-form input.submit { float: right; clear: right;}
    #login .password-form { padding: 20px; float: left; width: 220px; clear: right; background: #ededed;} 
    #login .password-form input[type=text] { width: 200px;}
    #login .password-form .instructions { margin-bottom: 0.2em;}
    #login .signup-box { line-height: 1.5em; padding: 20px ;}
    #login .signup-box { background-color: #f1f1f1; width: 200px; float: left;}
    
.signup input { width: 230px;}
.signup p.error { width: 220px !important; margin-bottom: 0.5em;}
.signup dt { float: left; width: 200px;}
.signup submit { width: 80px; clear: both; }


.blurb h3 { font-size: 14px !important; color: #333!important; margin-top: 0.5em;}
.blurb p { margin-bottom: 1em;}    

.support-form { width: 400px; float: left;}
.support-form label {font-weight: bold;}
.support-faq { width: 400px; float: right; }
.support-form p { margin-top: 0.5em; }
.support-faq dt { font-size: 14px; margin-top: 1em; font-weight: bold; margin-bottom: 0.5em;}
.support-faq dd { color: #666;}

#status-box { position: absolute; z-index: 100; float: right; left: 50%; width: 386px; margin-left: 26px;}
    #status-box form {background: #000; padding: 10px; display: none;}
    #status-box input[type=text],
    #status-box input[type=password] { border: 1px solid #ccc; background-color: #ddd;}
    #status-box input.inactive { color: #aaa;}
    #status-box input[type=text]:focus,
    #status-box input[type=password]:focus {background-color: #fff;}
    #status-box .tabs {
        -moz-border-radius: 0 0 10px 10px; 
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
         padding: 5px; height: 24px; background-color: #000; float: right; }
    #status-box .tabs a { padding: 1em 1em ;margin-right: 1em; display: block; float: right; color: #888; text-decoration: none; font-size: 10px; text-align: center;}
    #status-box .tabs a.last { margin-right: 0;}


#about { clear: both;}
    #about .container { border-top: 1px solid white; /* extra white space workaround */}
    #about dt { font-weight: bold;}
    #about dd { margin-bottom: 1em; color: #7f7f7f;}
    #about .column-left { width: 480px; float: left;}
    #about .column-right {  width: 300px; float: right;}
    #about p { margin-bottom: 1.5em;}

#gallery { margin-bottom: 3em;}
    #gallery li { display: block; float: left; margin-right: 11px; padding: 7px; background-color: #eaeaea; line-height: 0;}
    #gallery li.last { margin-right: 0; }
    #gallery li img { border: 1px solid #eee;}
    #gallery h4 { background-color: #efefef; color: #555; margin: 1em 0; text-transform: uppercase; padding: 0 10px; line-height: 2em; font-size: 14px; border: 1px solid #ccc;}

    .services .column-left { width: 480px; float: left;}
    .services .column-right {  width: 300px; float: right;}
    .services .steps { margin-top: 1em;}
    .services .steps dt { display: block; width: 90px; float: left; }
    .services .steps dl>dt { clear: right;}
    .services .steps dd { display: block; margin-bottom: 1em; width: 390px; color: #6f6f6f; float: right;}
    #get-started form { margin-top: 18px;}
    #get-started .error { width: 270px; padding: 3px;}

    #get-started dt { float: left; width: 100px;}
    #get-started dd input.textbox { width: 270px;}
    #get-started textarea { width: 290px; height: 100px;}
    #get-started #submit { width: 80px; clear: both; }
    
    .gallery { margin: 1em 0;}
    .gallery ul { white-space: nowrap; width: 2000px; position: relative;}
    .gallery ul li { float: left;}
    .gallery ul li a { display: block; opacity: 0.6;}
    .gallery ul li a:hover { opacity: 1;}
    .gallery ul li img { border: 3px solid #ddd; margin: 0 0.25em;}
    .gallery a.scroll-next , 
    .gallery a.scroll-previous { display: block; height: 88px; width: 30px; margin: 0; background-position: 50% 60%; background-repeat: no-repeat;}

    .gallery a.scroll-next { float: right; top:-100px;position: relative; background-image: url(/img/arrow-next.png); }
    .gallery a.scroll-previous { float: left; background-image: url(/img/arrow-previous.png); }
    .gallery .gallery-container { position: relative; height: 100px; width: 760px; overflow: hidden; }
    
    .contact form { margin-top: 24px;}
    .contact form textarea { width: 340px; height: 200px;}
    .contact .map { float: right; width: 450px;}
    .contact #get-started { float:left; width: 300px;}
    
    .products .list li { display: block; width: 192px; margin-right:19px; float: left; margin-bottom: 1em;}
    .products .list li.last { margin-right: 0;}
    .products .list li a { text-decoration: none;}
    .products .list li img { margin: 0 auto; padding: 3px; background-color: #eee; border: 1px solid #bbb;}
    .products .category h4 { display: block; background-color: #efefef; color: #555; margin: 1em 0; text-transform: uppercase; padding: 0 10px; line-height: 2em; font-size: 14px; border: 1px solid #ccc;}
    .products .list .title,
    .products .list .description { padding: 0 5px;}
    .products .list { margin-left: 2px;}

    #testimonials .column { width: 400px; margin-bottom: 1em;}
    #testimonials blockquote { color: #666; font-style: italic;}
    #testimonials cite { margin-top: 0.5em; float: right; font-weight: bold; color: #333; margin-bottom: 1em;}
    #testimonials .testimonial { margin-bottom: 4em;}
    #testimonials .left { float: left;}
    #testimonials .right { float: right;}

    .product-detail h2 small { font-size: 10px; color: #aaa; display: block; line-height: 2em;}
    .product-detail h4 { color: #666; font-size: 16px; text-transform: uppercase; margin-bottom: 0.5em;}
    .product-detail .left { width: 400px; float: left; }
    .product-detail .right { width: 400px; float: right; margin-top: 2em;}
    .product-detail .length { margin-bottom: 1em; }
    .product-detail p { margin-bottom: 0.5em;}
    .product-detail .image {margin-bottom: 2em;}
    .product-detail .overview strong { font-weight: bold;}
    .product-detail .videos { margin-top: 1.5em; }
    .product-detail .videos dl { color: #666;}
    .product-detail .videos dl dt { float: left; clear: both;  width: 80px; display: block; font-weight: bold;}
    .product-detail .videos dl dd { float: right; display: block; clear: right; width: 310px; margin-bottom: 0.5em;}
    .product-detail .price { font-family: 'Georgia'; color: #333E4C; float: left; font-size: 1.5em; margin-top:0.25em; margin-bottom: 0.25em}
    .product-detail .add-to-cart { -moz-border-radius: 10%; -webkit-border-radius: 10px; float: right; color: #fff; background: #333 url(/img/cart-icon.png) 10% 50% no-repeat; border: 1px solid transparent; height: 30px; width: 130px; padding-left: 34px; }
    .product-detail .friendlink { visibility: hidden; float: left; clear: left;}
    .product-detail hr { border: 1px dotted #aaa; height: 1px;}
    .product-detail .add-message-container { margin-top: 0.5em; clear: both; left: 90px; float: right; padding: 5px 10px; top: 5px; background-color: #eee; width: 200px!important; overflow: hidden; }
    
.cart { width: 400px;}
    .cart h2 small { font-size: 10px; color: #aaa;}
    .cart h2 small strong { font-weight: bold; color: #666; margin-left: 10px;;}
    .cart table { }
    .cart th { padding: 0.5em; text-transform: uppercase; background-color: #eee; }
    .cart .name, cart.price { line-height: 2em;}
    .cart .name { width: 300px; padding-left: 1em; text-align: left; color: #666; }
    .cart .price { text-align: right; width: 90px; color: #666; padding-right:1em;}
    .cart .action { overflow: hidden;}
    .cart .action .remove { position: relative; top: 8px; cursor: pointer; border: none; height: 24px; width: 24px; display: block; background: url(/img/icon-remove.png) 50% 50% no-repeat;}
    .cart .total td { line-height: 3em; border-top: 1px solid #aaa;}
    .cart .total td.name { text-transform: uppercase; font-weight: bold;}

.checkout { margin-top: 1em; }

    .account h4 { color: #888; border: 1px solid #ccc; line-height: 2em; background: #f3f3f3; margin-bottom: 1em; padding: 0 10px; }
    .account h4 a { margin-left: 200px; text-decoration: none; color: #999 !important; font-weight: normal; text-transform: uppercase; font-size: 11px;}
    
    .account .left-col { float: left; width: 300px;}
    .account .right-col { float: right; width: 500px;}
    
    .account .orders { width: 300px; margin-top: 1em; clear: both;}
    .account .orders h4 { width: 270px;}
    
    .account .orders table { text-align: left;}
    .account .orders table th { border-bottom: 1px solid #ccc;}
    .account .orders table .date { width: 100px;}
    .account .orders table .id { width: 60px;}
    .account .orders table .total {  width: 80px;}
    .account .orders table .status { width: 80px;}
    .account .orders table .details { font-size: 11px;}
    
    .account .profile { width: 300px; }
    .account .profile h4 { width: 270px; }
    .account .profile dt,
    .account .profile dd { float: left; display: block; width: 200px; color: #666;} 
    .account .profile dt { font-weight: bold;  color: #666; width: 100px; }
    
    .account .stream h6 { display: block;}
    
    .account .purchase-notice { margin-bottom: 2em;} 
    .account #purchases { width: 500px; float: right;}
    .account #purchases h4 { width: 475px; }
    .account #purchases h5 { font-size:13px; background: #888;color: #FFF; margin-top: 1em; color: #FFF; padding: 0 10px; line-height:2em; cursor:pointer;}
    
    .account #purchases li { color: #777; padding: 5px 0; float: left; border: 1px solid #ccc; border-bottom: none; display: block; background-color: #fafafa; }
    .account #purchases ul.last { border-bottom: 1px solid #ccc; ;}
    .account #purchases li.title { font-weight: bold; padding-left: 1em; width: 320px; line-height: 3em;}
    .account #purchases li.download { text-align: center; width: 162px;}

    .account #purchases li .na { color: #ccc; }
    
    .account #purchases a { text-decoration: none;}
    .account #purchases p.purchase-item { margin-bottom: 1em; }

    .account #purchases ul.stream { margin-bottom: 1em; }
    .account #purchases ul.stream li { background-color: #999; border-color: #999; color: #FFF; line-height: 1.5em; height: 20px;}
    .account #purchases ul.stream li.title em { color: #B3FF30;  font-size: 10px; margin-right: 1em; padding: 2px 5px;}
    .account #purchases ul.stream li a { -moz-border-radius: 3px; -webkit-border-radius: 3px; color: #FFF; font-weight: bold; background: #666; padding: 3px 6px;}

    .profile-form fieldset { margin-top: 10px;padding: 10px 0; }
    .profile-form fieldset legend { border-bottom: 1px solid #aaa; }
    .profile-form .group { float: left; margin-right: 10px;}
    .profile-form .group label { display: block; clear: both; }
    .profile-form fieldset p.description { margin-bottom: 10px;}

#three-d p.methodology  { font-size: 18px; text-align: center; color: #333; line-height: 22px; margin-bottom: 1em; margin-top: 0.4em; }
#three-d h2+p { margin-bottom: 1em;}