@charset "UTF-8";

/*----- this is very important be careful when tweeking this!!! make sure that the body is set relative to the zeroed out wildcard* from here all content can be set relative to the body. Plus then you can absolute position items that will not scale or change in size in relation to there relatively positioned parent-very important... ------*/

*{margin:0; padding:0;}
body { color: #666; font: 85%/1.6em "Helvetica, Verdana, Arial", sans-serif; min-width: 900px; width: 920px; margin:0 auto; text-align:center; position:relative;}
#content {text-align:left;}

/*----- main style ------*/

ul li img {vertical-align: middle;}
li.bullet, ul.bullet {list-style: disc outside;}

h1 {font-size:146%;}	
h2 {font-size:131%;}	
h3 {font-size:116%;}	
h4 {font-size:100%;}
h1, h2, h3, h4{padding:0; margin:0; color: #146fc1; font-weight:bold;}
h1 img, h2 img, h3 img, h4 img {vertical-align: middle;}

a {color: #4981CE; text-decoration: underline;} 
a:hover {color: #000000;}  
a:visited {color:#999;} 
a img {border: none; vertical-align: middle;} 

/*The below styles, style the 2col-fixed.dwt template*/
/*/index.htm*/
/* div.feature this is for the Mixcraft feature 02.30.08----The div#container has been floated left to expand to it's floated content, it's position set relative to the wrapper, without setting a z-index you can set it's left margin to negative (this pulls it over) and also zeros out the wrapperMiddle left padding of 5% */
 div#feature  { width: 455px; position: relative; left: 8px; float: left; }

/* Clear the list styles, float the list items, and img replace. */
div#feature ul li {list-style:none; float:left;}
div#feature ul li.one { background: url(/images-new/featured/mixcraft/one.jpg) no-repeat; width:231px; height:288px; display:block; float: left; }
div#feature ul li.two { background: url(/images-new/featured/mixcraft/two.jpg) no-repeat; width:222px; height:288px; margin: 0px; padding: 0px; }
div#feature ul li.three {background: url(/images-new/featured/mixcraft/three.jpg) no-repeat; width:231px; height:291px;}
div#feature ul li.four {background: url(/images-new/featured/mixcraft/four.jpg) no-repeat; width:222px; height:291px;}

/* This is an invisible menu that goes over the mixcraft feature specific to the li.three  */
div#colLeft div#feature ul li.three a.mixMenu { position:absolute; width:100px; height:122px; left:34px; top:458px; display:block; }
div#colLeft div#feature ul li.three a.mixMenu {text-decoration:none;}
div#colLeft div#feature ul li.three a.mixMenu i {visibility:hidden;}

/* This is an invisible menu that goes over the boxshot-same class but specific to the li.four  */
div#colLeft div#feature ul li.four a.mixMenu { position:absolute; width:299px; height:276px; left:64px; top:172px; display:block; }
div#colLeft div#feature ul li.four a.mixMenu {text-decoration:none;}
div#colLeft div#feature ul li.four a.mixMenu i {visibility:hidden;}

/* This positioned the p.feature-info on top of the div#feature, it has been floated to tell it's parent to expand and set relative to it's parent. */
div#colLeft h1.feature-info { float:left; position:relative; width:280px; bottom: 100px; left: 145px; font-weight:normal; font-size:85%; color:#666; }
div#colLeft h1.feature-info a.first {}
div#colLeft h1.feature-info a {padding:0 10px;}

/* This is for the index.htm page the mission statements position is set relative and a z-index is set so that when the text sizes if it goes near the bottom image it will appear on top. This is also the start of the main page styles */
div#colRight p.mission-statement {float: left; }

/* This also on the index.htm page, relative position to the wrapper, z-index set so that is appears in front of the bottom image when the text is sized. The li are floated.  */
div#colRight div#mainProducts { float:left; clear:left; width: 100%; position: relative; top: 20px; }
div#colRight div#mainProducts ul li { list-style-type:none;}
div#colRight div#mainProducts ul li a { display:block; text-decoration:none;}
div#colRight div#mainProducts ul li.beatcraft, div#mainProducts ul li.labelmaker, div#mainProducts ul li.spinitagain  {float:left;}

/* Img replace the ul  */
div#colRight div#mainProducts ul li.acoustica_products a { background: url(/images-new/featured/main/products.jpg) no-repeat; width:330px; height:26px; float: left; }
div#colRight div#mainProducts ul li.beatcraft  {background: url(/images-new/featured/main/beatcraft.jpg) no-repeat; width:112px; height:115px;}
div#colRight div#mainProducts ul li.labelmaker {background: url(/images-new/featured/main/label-maker.jpg) no-repeat; width:107px; height:115px;}
div#mainProducts ul li.spinitagain {background: url(/images-new/featured/main/spinitagain.jpg) no-repeat; width:105px; height:115px;}

/* set height on the nested links in div#mainProducts ul li */
div#colRight div#mainProducts ul li.beatcraft a { height:120px;}
div#colRight div#mainProducts ul li.labelmaker a{  height:120px; }
div#colRight div#mainProducts ul li.spinitagain a { height:120px; }

/* relative position the i nested in the above a link give them an underline, remove the italic ^ */
div#colRight div#mainProducts ul li.beatcraft i, div#mainProducts ul li.labelmaker i, div#mainProducts ul li.spinitagain i {text-decoration:underline; font-style:normal;}
div#colRight div#mainProducts ul li.beatcraft i { position:relative; width: 100%; top: 110px; left: 30px; }
div#colRight div#mainProducts ul li.labelmaker i{ position:relative; width: 100%; top: 110px; left: 5px; }
div#colRight div#mainProducts ul li.spinitagain i { position:relative; width: 100%; top: 110px; left: 10px; }

/* this clears content of floats I also added an icon to the ul which can be used again^ */
div#colRight div#mainProducts ul.clear { float: left; line-height: 1.2em; clear: left; position: relative; top: 30px; }
div#colRight div#mainProducts ul.clear li { list-style: url(/images-new/icons/bulletIcon.jpg); }

/*This styles the recent news div on the home page, first the position is set relative, it is cleared left of the float above it and it is also floated itself (this tells the parent container div#colRight to expand to the div#recent-news content.*/
div#colRight div#recent-news { border-top:dotted 1px #BBBBBB; border-bottom:dotted 1px #BBBBBB; padding:1em 0; clear:left; float:left; z-index: 5; width: 100%; position: relative; top: 20px; }
div#colRight div#recent-news h1 { font-variant: small-caps; font-family: Georgia, "Times New Roman", Times, serif; }
div#colRight div#recent-news h1 a { font-size:0.5em; font-family: Arial, Helvetica, sans-serif; font-variant:normal; font-weight: normal; padding-left:25px; }

/*I placed an h2 title above the h1's in the document flow-I did this to weight the h1 content more heavily, this is where I resize the h2 soi it looks bigger to the viewer. */
div#colRight div#recent-news h2 {font-size:146%;}

/* End, the above styles apply to a 2col-fixed.dwt template located /templates/2col-fixed.dwt for different templates do not disturb the above styles!!  */


/*----- older styles-I left these just in case they are still in the code :0 They also style the included sub-nav.inc file found /includes/sub-nav.inc ------*/

.copyright {font-size: 77%; color: #CCC; line-height:1em;}
.light {font-weight: normal; color: #CCC; font-size: 85%;} 
.italic {font-style: italic;} 
.nav_spacer  {padding-left: 10px; padding-right: 10px; color: #CCCCCC; font-weight: normal; font-size: 77%;}
.bold {font-weight: bold; color: #666;} 
.white {color: #FFF;}

/*----- styleTestimonial (these styles are found on all the testimonial.htm pages, as well as in the folders /includes/products/ANYPRODUCT/THE INCLUDED TESTIMONIAL FILE(testimonial.inc-these files have PHP in them* ------*/

div.testimonial { position:absolute; top:422px; left:628px; color:#4981CE; width:275px; height: 146px; }
div.testimonial blockquote { position:absolute; top:25px; left:70px; font-size:11px; line-height:16px;}
div.testimonial img { display:block;}
div.testimonial p, div.testimonials p {font:bold; font-style:italic; margin-left:90px; font-size:11px; line-height:14px;}


div.testimonials blockquote {width:350px;}
div.testimonials div { border-bottom:1px dotted #DDDDDD; }
div.testimonials {line-height:1.3em;}

/*----- This only works on DOM  browsers, IE will not read *fix this ------*/

blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}