/* ------ MEDIA TAG ----- */ @media screen { body { background-color: #000000; color: #6D655C; padding: 0px; margin: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; } p { line-height: 150%; } a { color: #897D71; } a:hover { color: #FFFFFF; } h1 { font-size: 30px; color: #D0CBC6; padding-bottom: 4px; border-bottom: 1px solid #897D71; font-weight: normal; } h2 { font-size: 145%; color: #D0CBC6; } h3 { font-size: 125%; color: #D0CBC6; } th { } td { } hr { border: none; height: 1px; border-top: 1px dotted #CCCCCC; } .clear { clear: both; display: block; height: 0px; overflow: hidden; margin: 0px; padding: 0px; } .header { width: 820px; margin: 0px auto; clear: both; } .headerLogo { float: left; padding: 5px 13px 5px 0px; } /* ------ START MENU ----- */ .hMenu { width: 820px; margin: 0px auto; font-size: 12px; text-align: right; padding: 12px 0px 14px 0px; } .hMenu a { text-decoration: none; margin-left: 20px; } .hMenu a:hover { text-decoration: none; } .hMenu ul { margin: 0px; padding: 0px; list-style-type: none; } .hMenu li { display: inline; } .menu { width: 219px; } /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0px; padding: 0px; list-style: none; } .sf-menu { line-height: 10px; } .sf-menu ul { position: absolute; top: -999em; width: 219px; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility:	 inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float:			left; position:		relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 219px; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 219px; /* match ul width */ top: 0; } /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; border-top: 1px solid #897D71; } .sf-menu a { border-bottom: 1px solid #897D71; border-left: 1px solid #897D71; border-right: 1px solid #897D71; padding: 10px 10px; text-decoration:none; } .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/ color: #D0CBC6; font-size: 12px; font-weight: bold; } .sf-menu li li a, .sf-menu li li a:visited { /* visited pseudo selector so IE6 applies text colour*/ font-size: 10px; padding: 5px; } .sf-menu li { background: url(main-menu-bg.gif) repeat-x top #272421; } .sf-menu li li { background: url(main-menu-bg.gif) repeat-x top #272421; } .sf-menu li li li { background: url(main-menu-bg.gif) repeat-x top #272421; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #000; outline: 0; color: #FFF; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position:		absolute; display:		block; right:			.75em; top:			1.05em; /* IE6 only */ width:			10px; height:			10px; text-indent: 	-999em; overflow:		hidden; background:		#D0CBC6; /* 8-bit indexed alpha png. IE6 gets solid image only */ } .sf-menu li li .sf-sub-indicator { top: 6px; right: 6px; width: 8px; height: 8px; } a > .sf-sub-indicator {  /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ background-color: #0F0; } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ background-color: #F00; } /*** shadows for all but IE6 ***/ /*.sf-shadow ul { background:	url('shadow.png'); padding: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; } .sf-shadow ul.sf-shadow-off { background: transparent; }*/ /*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/ .sf-vertical, .sf-vertical li { width: 219px; } /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */ .sf-vertical li:hover ul, .sf-vertical li.sfHover ul { left: 219px; /* match ul width */ top: 0; } /*** alter arrow directions ***/ .sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */ .sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/ /* hover arrow direction for modern browsers*/ .sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } .menuSearch { margin-top: 20px; margin-bottom: 20px; border-bottom: 1px solid #897D71; border-top: 1px solid #897D71; border-left: 1px solid #897D71; border-right: 1px solid #897D71; width: 219px; } .menuSearch ul { margin: 0px; padding: 0px; list-style-type: none; font-size: 11px; } .menuSearch li { border-bottom: 1px solid #897D71; } .menuSearch li a { display: block; width: 191px; background-color: #272421; padding: 3px 3px 4px 25px; text-decoration: none; background-image: url(/acatalog/menu-bullet-off.gif); background-repeat: no-repeat; background-position: left; } .menuSearch li a:hover { background-color: #000000; background-image: url(/acatalog/menu-bullet-on.gif); } .menuSearch .heading { background-image: url(/acatalog/menu-yda-bg.gif); background-repeat: repeat-y; font-size: 14px; color: #D0CBC6; font-weight: bold; border-bottom: 1px solid #897D71; } .menuSearch .heading a { color: #D0CBC6; text-decoration: none; display: block; width: 199px; padding: 8px 10px 10px 10px; } .menuSearch .heading a:hover { color: #FFFFFF; } /* ------ END MENU ----- */ .bannerBG { clear: both; background-repeat: repeat-x; background-position: center; background-image: url(/acatalog/yda-bg.gif); height: 125px; border-top: 1px solid #897D71; border-bottom: 1px solid #897D71; } .banner { width: 820px; margin: 0px auto; color: #FFFFFF; } .left { float: left; } .main { width: 820px; margin: 0px auto; padding: 25px 15px; } .content { float: right; width: 575px; font-size: 11px; } .content p { line-height: 175%; } .footerBG { clear: both; border-top: 1px solid #897D71; } .footer { width: 820px; margin: 0px auto; padding: 15px; text-align: right; font-size: 11px; } .footer a { color: #FFFFFF; text-decoration: none; } .footer a:hover { color: #FFFFFF; text-decoration: underline; } .image_product img, .product_image_cost img { border: 1px solid #897D71; } .image_product a img, .product_image_cost a img { border: 1px solid #897D71; } .image_product a:hover img, .product_image_cost a:hover img { border: 1px solid #FFFFFF; } .YDAcheckout tr td { background-color: #171513; } } /* ------ END MEDIA TAG ----- */