/* -------------------------- */
/*                            */
/*    DESIGN AND CSS BY       */
/*                            */
/*      Jeremy Koempel        */
/*    smallTransport.com      */
/*                            */
/* -------------------------- */

body {margin:0;padding:0;text-align:center;color:#000;font:12px Georgia, serif;background-color:#E8E3B6}
table {font:12px Georgia, serif;}
/* -------------------------- */
/*       GENERAL STYLES       */
/* -------------------------- */

h1 {margin:0;padding:0;text-indent: -3000px;}
h2 {text-align:center;font: 18px/18px Georgia;color:#326A85;margin:0 0 20px 0px;padding: 0;}
h3 {text-align:center;font: 18px/18px Georgia;color:#326A85;margin:0 0 20px 0px;padding:0;}
h4 {text-align:left;font: 18px/18px Georgia;color:#326A85;margin:0 0 20px 45px;padding:0;}
.content h3 {text-align:center;font: 18px/18px Georgia;color:#326A85;margin:0 0 20px 0px;padding:0;}
.right h3 {margin:0 0 20px 0;padding:0;clear: none;}

hr {clear:both;width:660px;color: #E6E6E6;background-color: #E6E6E6;height: 1px;border: none;margin:20px 20px;}

a { color:#326A85;}
a img { border:none;}
a.pad { margin:0 0 0 30px; clear: left;}

img.right {padding:0 0 5px 10px;}
img.left {padding:0 10px 5px 0;}

dt { margin:20px 0 0 0; font-weight: bold;}
dd { margin:5px 10px;}

.left {float:left;width:310px;margin:30px 0 0 45px;padding:0;}
html>body .left{margin:30px 0 0 20px;}
.left img {margin:0 20px 0 0;}

.photo{padding: 0px 10px 10px 0; float: left;}


/* -------------------------- */
/*      MAJOR DIVISIONS       */
/* -------------------------- */

/* Entire Container */
.wrapper{margin: 0 auto;padding:0;border:0;width:800px;text-align:left; background-color: white; min-height: 800px;}
.main_page{height:800px;padding-bottom: -10px;}

/* Header */
.head {padding:0;margin:0;}
.head a {display:block;height:125px;min-height:125px;background:url(../i/head.gif) no-repeat 0 0;}
.head a span {display:none;}

/* Main Navigation */
.mainnav {padding:0;margin:0;background-color:#555555; width:130px;}
#cart {font-family: verdana; font-size: 12px; font-weight: bold; padding-top: 20px; padding-left: 10px;}
#cart a{color: #b6b6b6; text-decoration: none;}
#cart a:hover{color: white; text-decoration: none;}


/* Content */
.content {padding:30px 20px 0px 10px; width: 668px; vertical-align: top;}

/* Footer */
.footer {text-align: center;}
.footer a {color:#444444;text-decoration:none;margin:0;padding-top: 10px; border-top: 1px solid black; width: 620px;}
.footer a:hover {text-decoration:underline;}
.footer a.copyright {float:right;}
.footer a.design {float:left;}



/* -------------------------- */
/*      CONTENT DIVISION      */
/* -------------------------- */

.content hr {margin:30px 0; }

.half {width:270px;float:left;padding:0 20px;}
.r {float:right;}
.l {float:left;}
.third { width:180px;float:left;margin:5px;padding:10px;}
.third p a{ color:#666; font-weight:bold;}

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

.nav {font: 11px Lucinda Grande, Tahoma, sans-serif;list-style:none;margin:0;padding:0 5px;height:31px;}
.nav li {margin:0;padding:0;line-height:28px;height:21px;width:25px;}
html>body .nav li {/* Ignored by IE */ width:auto;}
.nav li a {color:#fff;text-decoration: none;display: block;height:31px;padding:0 14px;}
.nav li a:hover, .nav li a.current {color:#333;background-color:#DCDCDC;text-decoration: none;}

/* -------------------------- */
/*  PRODUCT SPOTLIGHT STYLES  */
/* -------------------------- */

.spot { margin:0 0 20px 0; padding:20px 0 20px 0; width:500px; border-bottom:1px solid #E6E6E6;}
.specialItem {float: left;margin:0 20px 0 0;padding:0 50px 20px 12px;width:280px;}
html>body .specialItem{padding:0 0 20px 20px;}
.specialItem img, .spot img {float:left;}
.specialItem ul, .spot ul {font: 11px/11px Lucinda Grande, Tahoma, sans-serif;list-style: none;margin:0 0 0 90px;}
.spot ul {margin:0 0 0  120px;}
.specialItem ul li, .spot ul li {margin:0 0 7px 0;padding:0;}
.specialItem ul li a, .spot ul li strong {font-weight: bold;color:#2aa83f;text-decoration: none;}


/* -------------------------- */
/*     ACCESSORIES STYLES     */
/* -------------------------- */

h2.met { background: url(/i/accessories/metronome.gif)  no-repeat 0% 0; line-height:70px; padding:0 0 0 10px;}
h2.sta { background: url(/i/accessories/stand.gif)  no-repeat 0% 0; line-height:70px; padding:0 0 0 0px;}
h2.str { background: url(/i/accessories/strings.gif)  no-repeat 0% 0; line-height:45px; padding:0 0 0 0px;}
h2.res { background: url(/i/accessories/kun.gif)  no-repeat 0% 0; line-height:70px; padding:0 0 0 0px;}
h2.ros { background: url(/i/accessories/rosin.gif)  no-repeat 0% 0; line-height:60px; padding:0 0 0 0px;}
h2.pol { background: url(/i/accessories/polish.gif)  no-repeat 0% 0; line-height:55px; padding:0 0 0 0px;}

/* -------------------------- */
/*     INSTRUMENTS STYLES     */
/* -------------------------- */

.selectInstrument { text-align:center;}
table a { font-size:11px;}
.tablemaker, .tabledescription, .tableprice, .tablephoto {  line-height:14px; padding: 0 0 0 10px; border-bottom: 1px solid #E6E6E6;}
.tablemaker { width:170px; font-size: 13px; color:#333;}
.tabledescription { width:280px;}
.tableprice { width:100px;}
.tablephoto { width:20px; padding: 3px 10px;}

/* UTILITIES */

.center {text-align:center;}
/* Clearfix - This is a great way to insure that boxes which contain floats have the proper heights */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */



/*----------------*/
/* -- New Menus --*/
/*----------------*/



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

ul#navigation ul
{
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 5;
}

ul#navigation li
{
    line-height: 1.1em;
    position: relative;
    float: left;
    z-index:5;
}

ul#navigation li li
{
    margin: 0;
    padding: 0;
    border-left: solid 3px #7e692d;
	border-right: solid 3px #7e692d;
	border-bottom: solid 3px #7e692d;
    /*float: none; apparently needed for Opera, but it makes the 3rd level menus misplaced in Safari, so it's gone*/ 
    display: inline; /*fix for stupid extra margin in IE*/
}

#navigation a
{
    display: block;
    width: 130px;
    padding: 5px 0px 5px 7px;
    margin: 0px 0px 0 0px; /*ok to change below*/ /*style for main links */
    font-family: verdana;
    font-size: 12px;
    text-align: left;
    border-bottom: 1px solid #ffff99;
    color: #ffff99;
    text-decoration: none;
}

ul#navigation a:hover
{
    /*style for highlighted top link*/
    color: #ffffff;
	background-color: #000000;
    text-decoration: none;
}

ul#navigation li li a
{
    /*style for secondary menus */
    color: #362a08;
    background-color: #c6ac61;
	border-bottom: none;
    padding: 3px 0px 3px 7px;
    margin: 0;
    width: 150px;
	filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;
}

ul#navigation li li a:hover
{
    /*style for highlighted secondary link*/
    color: #f8f4e9;
    background-color: #362a08;
    text-decoration: none;
	filter:alpha(opacity=99);-moz-opacity:.99;opacity:.99;
}

ul#navigation li ul
{
	border-top: solid 3px #7e692d;
    position: absolute;
    left: -999em;
}
#navigation li:hover ul ul, #navigation li.sfhover ul ul
{
    left: -999em;
}

/*control position of first-level popout menus*/
#navigation li:hover ul, #navigation li.sfhover ul
{
    top: 0;
    left: 0;
    margin: 0 0 0 132px;
}

/*second-level popout menus*/
#navigation li li:hover ul, #navigation li li.sfhover ul
{
    top: 0;
    left: 0;
    padding: 0;
    margin: 0 0 0 190px;
}