/*
READ THIS FIRST!
This CSS file has been divided into sections for greater maintainability.
Comments in each section describe what types of things go there.
Here is an outline / overview:

general styles
    - body styles
    - reset
    - links
    - headings
    - other elements, tags
    
Helper Styles
    [consistent items with normally just one class]
    - General
    - Image Replacement
    - Forms
    - Notifications and Errors
    

Page Structure / Overall Layout
    [skeleton including page furniture, layout for overall containers]
    
page components
    [most of your styles will be in here]
    - Branding
    - Navigation
    - Content Areas
    - Footer
    
overrides

foo
*/




/* ============================================= */

/*Group: General Styles */
/* body styles, reset, default element styles */
/*BeginGroup */

/*@ body styles 
============ */ 
/* set your default font and font size here */

html {
    font-size: 100%; /* fixes crazy font-size issue in IE */
}


body {
 font-family:  Verdana, Tahoma, Sans, 'Dejavu Sans', Arial, Helvetica, sans-serif;
 color: #666;
 font-size: 12px;
 background-color: #fff;
}

/*@ resets
============ */

a img {
 border: none;
 text-decoration: none;
}

iframe {
 background: #5c96cb;
}

td, .layout td {
    vertical-align: top;
}

/*@ resets: headings
============ */

/* these are taken from firefox user-agent css */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

h2 {
	font-size: 1.17em;
	margin: 0.83em 0;
}

h3 {
	font-size: 1.17em;
	margin: 1em 0;
}

h4 {
	margin: 1.33em 0;
}

h5 {
font-size:0.83em;
margin:1.67em 0
}

h6 {
font-size:0.67em;
margin:2.33em 0;
}



/*@ links 
============ */
/* define default link styles */

a, a:link {
}

a:visited {
}

a:hover {
}

a:active {
}

/* TODO: images for pdf and mailto links, a la CAC */


/*@ headings
============ */
/* better to use h1, h2, h3 etc tags than span class="stylex" or font tags on headers */



h2 {
    font-size: 18px;
}


/*EndGroup General Styles*/









/* ============================================= */

/*Group: Helper Styles */
/* forms, notifications, paginations, etc: consistent items with a class */
/*BeginGroup */

/*@ General
============ */

.clear {
 clear: both;
 height: 0;
}

* html .clear {
 display: none; /* needed for IE */
}

.trademark {  /* a superscript class for "TM" */
 position: relative;
 bottom: 0.3em;
 font-size: 0.8em;
}

.feature_list h3 {
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 0px;
}

.feature_list p {
	font-size: 12px;
	margin-bottom: 5px;
	margin-top: 0px;
}


/*@ Image Replacement
============ */

.ir {
    position: relative;
    display: block;
}

.ir span.ir {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* to do image replacement, make a rule for the specific span.ir with a 
    background-image: url(); then for the containing .ir with height and width.
*/


/*@ Forms
============ */


/*@ Notifications and Errors
============ */

/* also see AWdebug.css for rules for debugging blocks */

/*EndGroup Helper Styles*/












/* ============================================= */

/*Group: Page Structure */
/* Skeleton including page furniture ---
the header, footer, and the generic layout blocks that make
up a basis for your components to fit snugly into. */
/*BeginGroup */


#content_container .col1 {
    width: 225px;
}

.col1 .col1_inner {
    width: 100%;
    height: 500px;
    background:  url(images/2ndbkgrnd.jpg) top left no-repeat;
}


#content_container .col2 {
    padding-top: 1em;
    width: 700px;
}



/*EndGroup Page Structure */









/* ============================================= */

/*Group: Page Components */
/* most styles will go in here */
/*BeginGroup */


/*@ Shannon's Dreamweaver styles
============ */


.bnnerbkgrnd {
	background-image: url(images/bnnerbkgrnd.jpg);
	background-repeat: repeat-x;
}
.menutxt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	text-decoration: none;
}
.mainbkgrnd {
	background-image: url(images/mainbkgrnd.jpg);
	background-position: left top;
	background-repeat: no-repeat;
}
.copyright {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}
.maintxt {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	text-decoration: none;
}
.bkgrnd2 {
	background-image: url(images/2ndbkgrnd.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}



/*@ Branding
============ */



/*@ Navigation
============ */

.nav1, .nav1 a
{
 color: white;
 font-size: 13px;
 text-decoration: none;
 line-height: 16px;
}

.nav1 td
{
 text-align: center;
}

.nav1 .current a
{
 color: #fd0;
}

.nav1 a:hover
{
 color: #fd0;
 text-decoration: underline;
}

/*@ Content
============ */

.MainContent {
 padding: 1em;
}

#videolinks a:hover
{
 color: #fd0;
 text-decoration: underline;
}

#videolinks a:active
{
 color: #600;
}



/*@ Products
============ */

.products {
    width: 675px;
    margin: 0 auto;
    margin-top: -2em;
}

#products_nav {
    background: #5d96cd;
    border: 1px solid #053d71;
    color: white;
    margin-left: 1em;
    margin-top: 1em;
    width: 200px; 
    position: fixed;
}

#products_nav .innertube {
    padding: 0 1em;
    padding-bottom: 0.25em;
}

#products_nav h2 {
    margin-top: 0.25em;
}

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

#products_nav ul {
    margin: 1em;
}

#products_nav li {
    display: inline; /* IE6 */
}

#products_nav ul ul {
    margin: 0;
    padding-left: 2em;
    text-align: right;
}

#products_nav li a {
    display: block;
    text-decoration: none;
    border-bottom: 1px dotted #ddd;
    color: #fff;
    padding: 0 0.25em;
}

#products_nav li a:hover {
    color: #fd0;
    background: #053d71;
}






#products_nav .viewcart {
    text-align: center;
}

.products h3{
    font-size:  18px;
    color: #c02425;
    margin-bottom: 0;
    margin-top: 2em;
    clear: both;
}

.products h4 {
    font-size: 16px;
    margin: 0;
}


.product {
	margin: 1em 0;
	padding-top: 5px;
    border-top: 1px dotted #aaa;
	width: 100%;
}


.product .prod_nbr {
	float: right;
}

.products .product_info, .product .prod_info {
    margin-bottom: 1em;
}

td.product_info p, .prod_info p {
    margin-top: 6px;
}

.products td img, .prod_image img {
 border: 1px solid #999;
 margin-top: 2px;
 margin-right: 10px;
}

.products .buy_button {
	float: right;
    vertical-align: middle;
    text-align: right;
    margin-top: 1em;
}

.buy_button .select {
    float: left;
    margin-right: 0.5em;
}

.products .product_info img {
    border: none;
}

.products {
}

.products .price, .product .price {
	float: left;
	font-weight: bold;
	color: #053d71;
	font-size: 19px;
}

.price .dol {
 font-weight: normal;
 font-size: 69%;
 position: relative;
 top: -.5em;
}

.price .cents {
    font-weight: normal;
    font-size: 57%;
    position: relative;
    top: -.6em;
    left: .1em;
    border-bottom: 1px dotted #aaa;
    padding-bottom: -1px;
}

.price .ftext {
    font-size: 13px;
    color: #444;
}

.price .msrp {
    color: #444;
}

.products td {
 vertical-align: top;
}


.product_nbr {
	font-size: 12px;
	font-weight: normal;
	text-align: right;
}
.subtitle {
	font-size: 13px;
}


.product .prod_image {
    float: left;
}

.product .prod_info {
    float: right;
	width: 550px;
}

.product {
    clear: both;
}



.shopping_info {
 font-size: 10px;
}

.shopping_info h4 {
    margin: 0.25em 0;
}

.shopping_info table {
    border-top: 1px dotted #fff;
    border-bottom: 1px dotted #fff;
}

.shopping_info table h5 {
    margin: 0;
}



/*@ Ads
============ */



/*@ footer
============ */



/*EndGroup Page Components */










/* ============================================= */

/*Group: Overrides */
/* with good overall structure, shouldn't have to use this much */
/*BeginGroup */


/*@ IE
============ */




/*EndGroup Overrides */