/*Global Settings*/
* {
padding: 0;
margin: 0;
border: 0;
outline: none;
font: 11px verdana;
color: rgb(200,200,200);
}

a {
color: rgb(0,150,255);
}

a:hover {
color: rgb(68,78,88);
}

body {
background: rgb(17,27,37);
padding-top: 198px;
}

div#header {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 152px;
padding-top: 8px;
z-index: 100;
background: rgb(17,27,37);
}

body>div#header {
position: fixed;
}

div#header h1 {
height: 150px;
width: 960px;
margin: 0px auto;
font: 0px verdana;
color: black;
border: 1px solid rgb(68,78,88);
background: no-repeat top center url(./graphics/h1_visionup.jpg) black;
}

div#index {
position: absolute;
left: 0px;
top: 159px;
height: 30px;
width: 100%;
z-index: 100;
}

body>div#index {
position: fixed;
}

div#index ul {
position: relative;
width: 960px;
height: 28px;
margin: auto;
text-align: center;
border: 1px solid rgb(68,78,88);
background: black;
}

div#index li {
display: block;
float:left;
border: 1px solid black;
width: 190px;
}

div#index a {
display: block;
width: 190px;
height: 22px;
padding-top: 4px;
font: 14px Verdana, Arial;
font-weight: bold;
text-decoration: none;
color: white;
}

body#home a#home, body#specs a#home, body#video a#media, body#photos a#media, body#store a#store, body#contact a#contact {
color: rgb(68,78,88);
}

div#index a:hover {
background: rgb(0,150,255);
color: white;
}

#viewcart {
position: absolute;
right: -1px;
top: -1px;
width: 190px;
height: 30px;
background: no-repeat top right url(./graphics/viewcart.gif);
}

div#content {
position: relative;
margin: 0px auto;
padding: 1px;
width: 958px;
border: 1px solid rgb(68,78,88);
background: black;
overflow: visible;
}

div#intro, div#specs {
position: relative;
padding: 30px 510px 16px 16px;
}

div#intro {
background: no-repeat right top url(./graphics/evofront_fade.jpg) black;
}

div#specs {
background: no-repeat right top url(./graphics/goprowidecontents.jpg) black;
}

div#video {
width: 920px;
padding: 20px;
}

.logo {
position: relative;
display: inline;
float: left;
margin: 16px;
}

p, h3 {
margin-top: 16px;
}

h2, h3 {
font-weight: bold;
font-size: 13px;
}

#sublinks h2 {
margin-left: 120px;
padding: 6px 0px 6px 16px;
border-bottom: 1px dashed rgb(68,78,88);
}

#content ul {
margin-top: 8px;
position: relative;
display: inline-block;
clear: left;
}

#content li {
margin-left: 16px;
}

.right {
display: inline;
float: right;
}

.left {
display: inline;
float: left;
margin: 46px 16px 16px 16px;
}

#info {
display: block;
position: absolute;
height: 61px;
bottom: -1px;
right: -1px;
width: 518px;
z-index: 90;
background: no-repeat left top url(./graphics/bg_price.gif);
overflow: hidden;
}

#price {
display: inline;
float: left;
margin: 0px 40px;
text-align: right;
color: black;
height: 51px;
padding: 5px;
}

#price h2 {
font: 28px impact;
color: white;
}

#sublinks {
display:block;
position: absolute;
top: -1px;
left: -1px;
height: 30px;
width: 460px;
z-index: 90;
}

.sublink {
display: block;
height: 18px;
width: 108px;
float:left;
text-align: center;
padding: 6px;
background: no-repeat left top url(./graphics/bg_sublink.gif);
}

#info p {
position: relative;
margin: 10px 10px 10px 170px;
text-align: right;
}

div#footer {
position: relative;
padding: 10px 0px;
}

div#footer div {
margin: auto;
padding: 9px;
width: 942px;
height: 18px;
border: 1px solid rgb(68,78,88);
background: black;
text-align: center;
clear: both;
}

object, embed {
z-index: 80;
}

.frame {
width: 400px;
height: 300px;
border: 1px solid rgb(68,78,88);
padding: 8px;
background: white;
margin: 20px;
float: left;
}

.clear {
clear: both;
}

table#products {
display: block;
position: relative;
width: 940px;
border-collapse: collapse;
margin: 60px auto 90px auto;
clear: both;
}

table h2 {
margin-bottom: 4px;
}

table p {
margin-top: 4px;
}

#products td {
height: 100px;
padding: 8px;
border: 1px solid rgb(68,78,88);
}

td.image {
text-align: center;
height: 100px;
width: 100px;
padding: 8px;
}

td.description {
text-align: left;
}

td.value {
width: 100px;
text-align: right;
}

input {
display: block;
}

/*CONTACT FORM*/
/* for main form wrapping div */
div#gb_form_div {
width: 940px;
border: none;
margin: 30px auto 36px auto;
background: black;
}

/* id for the form itself */
form#gb_form { 
}

/* form and results heading size */
.main_formhead, .formhead { 
}

/* section fieldsets - it's common to make this border : 0; */
fieldset { 
border: 1px solid rgb(68,78,88);
margin: 16px 8px 8px 8px;
padding: 8px 0px;
}

fieldset.header {
border: none;
}

/* form legends and dt "heading" */
legend { 
color : rgb(0,150,255);
margin-left: 6px;
}

/* main legend at top of the form */
legend#mainlegend { 
color: rgb(0,150,255);

}

/* form label text */
#gb_form label { 
color: rgb(0,150,255);
width: 396px;
margin: 6px 6px 3px 6px;
}

input.med, input.short, select.med, textarea.textbox { 
font: 'Trebuchet MS',sans-serif; 
color: rgb(60,60,60);  
padding: 2px; 
border: 1px solid rgb(68,78,88);
background-color: white;
margin: 3px 8px 8px 6px;
width: 426px;
}

/* all inputs, select, and textarea */
fieldset input.med, fieldset input.short, fieldset select.med, fieldset textarea.textbox { 
margin:3px 6px 6px 6px;
width:414px;
}

fieldset fieldset input.med, fieldset fieldset input.short, fieldset fieldset select.med, fieldset fieldset textarea.textbox { 
width:396px;
}

/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:focus, input.short:focus, select.med:focus, textarea.textbox:focus, input.med:hover, input.short:hover, select.med:hover, textarea.textbox:hover { 
font:'Trebuchet MS',sans-serif; 
color: black;  
border: 1px solid rgb(0,150,255);
background-color: white;
}

fieldset input.med:focus, fieldset input.short:focus, fieldset select.med:focus, fieldset textarea.textbox:focus, fieldset input.med:hover, fieldset input.short:hover, fieldset select.med:hover, fieldset textarea.textbox:hover { 
color:rgb(0,0,0);  
border:1px solid rgb(0,150,255);
background-color:white;
margin:3px 6px 6px 6px;
}

fieldset fieldset input.med:focus, fieldset fieldset input.short:focus, fieldset fieldset select.med:focus, fieldset fieldset textarea.textbox:focus, fieldset fieldset input.med:hover, fieldset fieldset input.short:hover, fieldset fieldset select.med:hover, fieldset fieldset textarea.textbox:hover { 
color:rgb(0,0,0);  
border:1px solid rgb(0,150,255);
background-color:white;
}

/* for the checkbox input */
input.checkbox {
margin-left:16px;
}

/* error heading weight and color - bold is for the error reason text */
span.error, strong.error, h3.error{ 
color:rgb(250,85,0); 
font-weight:bold;
}

h3.error{ 
border-bottom:1px solid rgb(0,150,255);
}

/* success heading color */
span.success, strong.sucess, h3.success{ 
color: rgb(0,150,255);
font-weight: bold; 
}

h3.success{ 
border-bottom: 1px solid rgb(0,150,255);
}

/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis {

}

/* set up relativity to position small Why? text */
small.whythis { 
position:relative;
margin-left:6px;
}

/* Why? link style */
small.whythis a { 

}

small.whythis a:hover, small.whythis a:focus, small.whythis a:active { 
color:1px solid rgb(0,150,255);
} 

/* hide the Why? text span */
small.whythis a span { 
display:none;
}

/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span {
position:relative;
display:inline;
text-decoration:none;
color:black;
border: 1px solid rgb(0,150,255);
background-color: white;
left:4px;
padding:2px;
}

/* the link back to me for form credit */
p.creditline { 
display: none;
}

/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr { 
cursor: help; 
border-bottom: 1px dotted #999;
}

/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt, dl.result_dl_blockq dt {
color: rgb(255,255,255);
}

/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote, dl.result_dl_blockq blockquote {
margin-left: 0;
}

/* style the input names in the result */
div#hf_form_div span.items {
font-weight: bold;
color: #cc9900;
}

/* style the cc checkbox */
#gbcc {
display: inline;
margin: 10px 0px 10px 16px;
clear: left;
}

/* style the submit button */
#GBC37652FC14BBBCBA58E698ADD4EBC276 {
position: absolute;
left: 443px;
bottom: -1px;
z-index: 110;
height: 61px;
width: 180px;
background: no-repeat left top url(./graphics/sendemail.gif);
text-align: left;
vert-alignment: top;
colour: rgb(0,150,255);
font-size: 0px;
}