/********************************** 
 LunaStix Global Site Styles
 
 author: Ryan Clayton
 company: Hotwax Media
 url:http://lunastix.com
 date: 03/13/2009
  
*********************************/ 
@import url("forms.css");

body {
    font: 62.5% 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background: #FFFFFF url(../images/header_tile.jpg) repeat-x left top;
    margin: 0;
    padding: 0;
    text-align:center;
}

form {
    margin: 0;
    padding: 0;
}

h1, h2, h3{
	margin: 5px 0;
	padding: 0;
}

h1{
	font-size: 20px;
}

h2{
	font-size: 16px;
	color: #39587E;
}

h3{
	color: #65266E;
    font-size: 14px;
    font-weight: bold;
}
h4{
	color: #39587E;
	font-size: 16px;
	margin-bottom: 10px;
}

hr{
  color: #ACB7C5;
  background-color: #ACB7C5;
}


#main_container {
    width: 992px;
    margin: 0 auto;
    text-align:left;
}

/****************** 
 Header
******************/ 
.header {
    background: transparent url('../images/header_bg.png') no-repeat left top;
    height: 122px;
    /*overflow: auto;*/ /*clears floats insider hearder*/
    position: relative;
    background-image: url(../images/header_bg.png);
}

.logo {
    margin: 6px 35px 0 92px;
}

/****************** 
 Sign In/Account 
******************/ 
div.signin {
    position: absolute;
    right: 0px;
    *right: -10px;
    background: transparent url('../images/login_bg_left.png') no-repeat;
    height: 30px;
    padding: 0 0 0 9px;
    font-size: 1.15em;
}

div.signin ul {
    background: transparent url('../images/login_bg_right.png') no-repeat
        scroll top right;
    margin: 0;
    padding: 5px 11px 0 5px;
    height: 30px;
}

div.signin ul li {
    float: left;
    list-style: none;
    margin: 0 5px;
}

div.signin ul li.divider {
    background: url(../images/login_divider.gif) no-repeat;
}

div.signin ul a {
    color: #CC6600;
    text-decoration: none;
}

div.signin ul a:hover {
    color: #CC6600;
    text-decoration: underline;
}

/****************** 
 Main Nav Buttons
******************/

#nav {
    list-style: none;
    margin: 58px 0 0 0;
    padding: 0;
    float: left;
}

#nav li {
    float: left;
    height: 25px;
    margin: 0;
    padding: 0;
}

#productsBtn a {
    width: 113px;
    height: 25px;
    background: url(../images/btn_products.gif) no-repeat 0px 0px;
    text-decoration: none;
    display: block;
}

#productsBtn a:hover {
    background: url(../images/btn_products.gif) no-repeat 0 -31px;
    text-decoration: none;
}

#tipsAndTricksBtn a {
    width: 163px;
    height: 25px;
    background: url(../images/btn_tipsAndTricks.gif) no-repeat 0px 0px;
    text-decoration: none;
    display: block;
}

#tipsAndTricksBtn a:hover {
    background: url(../images/btn_tipsAndTricks.gif) no-repeat 0 -31px;
    text-decoration: none;
}

#resourcesBtn a {
    width: 133px;
    height: 25px;
    background: url(../images/btn_resources.gif) no-repeat 0px 0px;
    text-decoration: none;
    display: block;
}

#resourcesBtn a:hover {
    background: url(../images/btn_resources.gif) no-repeat 0 -31px;
    text-decoration: none;
}

.displace {
    position: absolute;
    left: -5000px;
}

/****************** 
 Dropdown Nav 
******************/ 
#nav li div {
    position: absolute;
    width: 142px;
    left: -999em;
    margin: 0 0 0 -5px;
    z-index: 9999;
}

#nav li div ul {
    list-style: none;
    margin: 0px 0 0 0;
    padding: 0;
}

#nav li div ul li {
    width: 142px;
    margin: 0;
    padding: 6px 0 0 0;
    background: url(../images/dropdown_shadow.png) repeat-y left top;
    height: 15px;
}

#nav li div ul li.tipsTricks {
    width: 183px;
    margin: 0;
    padding: 6px 0 0 0;
    background: url(../images/dropdown_tt_shadow.png) repeat-y left top;
    height: 15px;
}

#nav li div ul li a {
    font-size: 1.1em;
    color: #FFFFFF;
    background: none;
    height: 1px;
    margin: 0;
    padding: 0 0 0 14px;
}

#nav li ul li a:hover {
    color: #FFB400;
    text-decoration: none;
    background: none;
}

#nav li:hover div {
    left: auto;
    color: #BA4044;
}

#nav li:hover div,#nav li.sfhover div {
    left: auto;
}

#nav li.spacer {
    margin: -5px 25px 0 25px;
}

/****************** 
 Content Area 
******************/ 
#home_content {
    background: url(../images/home_bg.jpg) no-repeat;
    min-height: 387px;
    overflow: auto;
}

.homeImg {
    float: right;
    margin: 0 70px 0 0;
}

/****************** 
 Content Container 
******************/ 
#content {
    padding: 30px 0 30px 100px;
    font-size: 1.2em;
    line-height: 17px;
}

#content a {
    color: #CC6600;
    text-decoration: underline;
    font-weight: bold;
}

#content a:hover, #content h3.titleLink a:hover{
    color: #CC6600;
    text-decoration: none;
}

#content a img{
	border:none;
}




/****************** 
 Left Column 
******************/ 
#content .leftCol {
    width: 622px;
    margin: 0 28px 0 0;
    float: left;
    color: #333333; 
}

#content .leftCol .title {
    /*width: 622px;*/
    height: 40px;
    margin: 0;
    padding: 0;
}

#content .leftCol .title h1 {
    margin: 0 6px 0 0;
    padding: 0;
    height: 20px;
    float: left;
    color:#39587E;
    height: 20px;
}

#content .leftCol .title span {
    margin: 6px 0 0 8px;
    font-size: 10px;
    font-weight: normal;
    color: #333333;
    float: left;
}

/****************** 
 Right Column 
******************/ 
#content .rightCol {
    width: 242px;
    float: left;
}

/******************** 
 Right Col Code Box 
********************/ 
#content .rightCol div.box_top {
    background: url(../images/checkout/cartContainerBox_top.gif) no-repeat top center;
    font-size: .95em;
}

#content .rightCol div.box_bg {
    background: url(../images/checkout/cartContainerBox_mid.gif) repeat-y;
    padding: 0 0 1px 0;
}

#content .rightCol form, #content .rightCol p, #content .rightCol #microCart{
    margin: 12px 0 10px 14px;
}

#content .rightCol form .texta {
    width: 175px;
    *width: 186px;
}

#content .rightCol form .btnGo {
    margin: -3px 10px 0 0;
    *margin: -1px 12px 0 0;
    float: right;
    border; none;
}

#content .rightCol div ul {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
}

#content .rightCol div ul li {
    margin: 0;
    padding: 3px 0;
    list-style: none;
}

#content .rightCol div ul li.subMenu a {
    padding: 3px 0 0 40px;
    list-style: none;
}

#content .rightCol div ul li a,#content .rightCol div ul li.active a {
    padding: 0 0 0 20px;
}

#content .rightCol div ul li.active a {
    color: #65266E;
    text-decoration: none;
    background: url(../images/active_arrow.gif) no-repeat 10px 4px;
}

#content .rightCol div h2 {
    margin: 0 0 0 13px;
    padding: 0;
}
/****************** 
 Breadcrumbs 
******************/ 
#content .leftCol .breadcrumb {
    height:30px; 
    margin:0px;
}

#content .leftCol .breadcrumb ul {
    margin:0; 
    padding:0; 
    height:30px; 
}

#content .leftCol .breadcrumb ul li {
    padding:0; 
    margin: -9px 0 0 -6px; 
    list-style:none; 
    float:left; 
    height:30px; 
    display:inline;
}

#content .leftCol .breadcrumb ul li a {
    text-decoration:none;
    line-height:30px; 
    display:block; 
    padding: 0;
    margin: 0;
}

#content .leftCol .breadcrumb ul li a span {
    padding:0 4px 0 4px;
	  color:#CC6600;
	  font-weight:bold;
	  text-decoration:underline; 
}

#content .leftCol .breadcrumb ul li a:hover span {
    text-decoration:none; 
}

#content .leftCol .breadcrumb ul li a.active {
    background:none;
    color:#65266E;
}

#content .leftCol .breadcrumb ul li a.active span {
	color:#65266E;
	text-decoration:none;
}

#content .leftCol .breadcrumb ul li a.active:hover span {
    text-decoration:none;
}

#content .leftCol .breadcrumb .left {
    position:absolute; 
    top:0px; 
    left:0px; 
    width:10px; 
    height:30px; 
    display:block; 
    z-index:1; 
}

#content .leftCol .breadcrumb .arrows {
	  text-decoration:none;
    line-height:30px;
    float:left; 
    height:30px;
    display:inline;
	  color:#000000;
	  font-weight:bold;
    margin: -3px 0 0 2px;
      *margin: 6px 0 0 2px;
}

/******************** 
 Micro Cart
********************/ 
#content .rightCol #microCart .prodList{
	color: #334E70;
	margin: 0;
	padding: 0;
}

#content .rightCol #microCart .prodList li, #content .rightCol #microCart .prodList li a, #content .rightCol #microCart .miniNav li a{
	margin: 0;
	padding: 0;
}

#content .rightCol #microCart .miniTotal{
	border-top: solid 1px #99A7B8;
	margin: 5px 14px 5px 0;
	padding:  10px 5px 0 0;
}

#content .rightCol #microCart .miniTotal dt{
	background: url(../images/icon_cart.gif) no-repeat top left;
	color: #334E70;
	font-weight: bold;
	margin: 0;
	padding: 0 0 0 22px;
}

#content .rightCol #microCart .miniTotal dd{
	color: #334E70;
	font-size: 1.6em;
	font-weight: bold;
	margin: 0;
	padding: 2px 0 0 0;
}

#content .rightCol #microCart .miniNav{
	border-top: solid 1px #99A7B8;
	color: #334E70;
	margin: 12px 14px -10px 0;
	padding: 5px 0 1px 5px;
	overflow: none;
}

#content .rightCol #microCart .miniNav li{
	display: inline;
	font-size: 1em;
	margin: 0;
}

#content .rightCol #microCart .miniNav li.mnspace{
	padding: 0 4px;	
}

/****************** 
 New Customer
******************/ 
.customerScreenLeft, .customerScreenRight{
	float: left;
	margin: 0 50px 0 0;
	width: 250px;
}

.newCustomer{
	padding: 0;
}

.formrow{
	clear: none;
}


/****************** 
 Footer
******************/ 
#footer_container {
    background: url(../images/footer_tile.jpg) repeat-x;
    color: #FFFFFF;
    font-size: 1.1em;
    
}

#footer_container .footer {
    background: url(../images/footer_bg.png) no-repeat;
    width: 899px;
    *width: 999px;/*hack so both IE6 and IE7 have smaller margins*/
    margin: 0 auto;
    height: 125px;
    padding: 0 0 0 93px;
    
    text-align:left;
}

#footer_container .find_store {
    width: 225px;
    margin: 20px 0 0 0;
    float: left;
}

#footer_container .find_store form {
    margin: 7px 0 0 0;
}

#footer_container .cool_tricks {
    width: 254px;
    margin: 20px 0 0 0;
    float: left;
}

#footer_container .resellers {
    width: 250px;
    *width: 240px;/*hack so both IE6 and IE7 have smaller margins*/
    margin: 8px 0 0 0;
    float: left;
}

#footer_container .resellers .title_bump {
    margin: 12px 0 0 0;
}

.find_store p,.cool_tricks p,.resellers p {
    margin: 7px 0;
}

#footer_container .divider {
    float: left;
    background: url(../images/footer_divider.gif) no-repeat;
    height: 99px;
    width: 1px;
    margin: 16px 30px 0 30px;
    *margin: 16px 20px 0 20px; /*hack so both IE6 and IE7 have smaller margins*/
}

#footer_container .floatRight {
    float: right;
    border: none;
}

/*********************** 
 Footer Nav / Copyright 
***********************/ 
.footerNav {
    padding: 0;
    clear: left;
    color: #39587E;
    list-style: none;
}

.footerNav li {
    float: left;
    margin: 0 5px 0 0;
    padding: 0 8px 0 4px;
    border-right: 1px solid #39587E;
}

.footerNav li a {
    color: #39587E;
    text-decoration: none;
}

.footerNav li a:hover {
    color: #39587E;
    text-decoration: underline;
}

.footerNav li.last {
    border: none;
}

.copyright {
    float: right;
    padding: 0 3px 0 0;
    margin: 0 50px 0 0;
    color: #39587E;
}

/****************** 
 General 
******************/ 
.dlList{
	margin: 20px 0 20px 0;
}
.dlList dt{
	background: #FFFFFF url(../images/titleBar_bg.gif) no-repeat left top;
	color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    padding: 9px 4px 9px 10px;
}

.dlList dd{
	margin: 0 0 20px 0;
	padding: 8px;
}

.textRight{
	text-align: right;
}

#content .titleLink a{
	color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

#content .titleLink div a{
	text-decoration: underline;
}

#content .titleLink a:hover{
	color: #FFD05F;	
}

.imgLeft {
    float: left;
    margin: 0 10px 0 0;
}

.imgRight {
    float: right;
    margin: 0 0 0 10px;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.clearLeft {
    clear: left;
}

.clearBoth {
    clear: both;
}

.rightCol_vertPad {
    margin: 25px 0 0 0;
    background: none;
    overflow: hidden;
}

.bold {
	font-weight:bold;
}

.italic{
	font-style: italic;
}

.clear{
	clear:both;
}

.blueText {
	color: #334E70;
}

.paddingTop10 {
	padding:10px 0 0 0;
}

.paddingBtm10 {
  padding: 0 0 20px 0;
}

.paddingRight10 {
	padding: 0 10px 0 0;
}

.paddingtopBtm10 {
	padding: 10px 0 10px 0;
}

.profileSubmit {
	width:290px;
	}
	
.noPadding {
	padding:0 !important;
}

.smallerTxt{
	font-size: 11px;
}

.tinyTxt{
	font-size: 10px;
	color: #000000;
}
.note{
	background: #FFFFCC;
	border: 1px dotted #666666;
	padding: 10px;
	font-style: italic;
	font-size: 11px;
}


/****************** 
Dealer Locator Page styling
******************/ 


.dealerList dt{
	font-weight: bold;
	color: #39587E;
}
.dealerList dd{
  padding: 0;
  margin: 0;
}

#feedback strong {
    color:#39587E;
    font-size:14px;
    font-weight:bold;
}

/****************** 
Tricks Page styling
******************/ 
.tricksTitle{
	text-align: right;
	color: #334E70;
	margin-top: 15px;
}

.vidRight{
	float:right;
	padding: 0;
	font-size: 10px;
}

.vidRight img{
	margin-bottom:-2px;
	text-decoration: none;
}


.lineDivider{
	border-bottom: 1px solid #99a7b8;	
	padding: 4px 0 0 0;
}

.wrapperMargin{
	margin:0 10px;	
}

/****************** 
Rounded box container styling
******************/ 


.sectionWrapper{
	background: url(../images/checkout/SectionForm_mid.jpg) repeat-y left;	
		
}


.sectionHeader{
	background: #FFFFFF url(../images/checkout/SectionForm_top.jpg) no-repeat left bottom;
}

.sectionHeader h2{
	background: #FFFFFF;
	color:#39587e;
	font-size:18px;
	line-height:18px;
	display:inline;
	padding: 0 5px;
	margin: 0 0 0 13px;
}

.sectionHeaderNoImage h2 {
	background: #FFFFFF;
	color:#39587e;
	font-size:18px;
	line-height:18px;
	display:inline;
	padding: 0 5px;
	margin: 0 0 0 13px;
}

.panelFooter{
	background: #FFFFFF url(../images/checkout/SectionForm_btm.jpg) no-repeat left bottom;
	line-height:8px;
}

.innerWrapper{
	padding: 0 10px 10px 10px;
}

.innerWrapper .cartItems td {
	border-bottom: 1px solid #cccccc;
	text-align:center;
}

.innerWrapper .cartItems th {
	text-align:center;
}

.innerWrapper .cartItems td.noBoarder {
	border:0;
}


.editButton{
	width: 50px;
	height: 17px;
	background: url(../images/edit.jpg) no-repeat;
	border: 0;
}

.shoppingCartHeight {
	height:27px;
}

.addCode{
	padding:0;
	margin:0 0 4px 5px;
}
/****************** 
FAQ styling
******************/ 

.faqClass {
}

.faqClass dt {
	color: #334E70;
	font-weight:bold;
	font-size:18px;
	padding:5px 0;
}

.faqClass dd {
	padding:5px 0;
}


/****************** 
Thick Border Box Styling - also used for Login pg
******************/ 

.thickBorderBox h3{
	color: #39587E;
	background: #fff;
	position: relative;
	top: -20px;
	display: inline;
	padding: 0 5px;
	font-size: 15px;
}

.thickBorderBox{
	border: 4px solid #99a6b7;
	background: #fff;
	position: relative;
	padding: 10px;
	float: left;
	margin: 0 15px 15px 0;
	/*z-index: -1;*/ /*hack to fool IE 6 so the dorp down menu goes on top of relative positioned elements*/
}

.thickBorderBox .bevelBoxTopLeft{
	background: url(../images/topLeftBevel.jpg) top left no-repeat;
	position: absolute;
	top: -4px;
	left: -4px;
	width: 7px;
	height: 7px;
}

.thickBorderBox .bevelBoxTopRight{
	background: url(../images/topRightBevel.jpg) top right no-repeat;
	position: absolute;
	top: -4px;
	right: -4px;
	width: 7px;
	height: 7px;
}

.thickBorderBox .bevelBoxBottomLeft{
	background: url(../images/bottomLeftBevel.jpg) bottom left no-repeat;
	position: absolute;
	bottom: -4px;
	left: -4px;
	width: 7px;
	height: 7px;
}
.thickBorderBox .bevelBoxBottomRight{
	background: url(../images/bottomRightBevel.jpg) bottom right no-repeat;
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 7px;
	height: 7px;
}

.thickBorderBoxFixedSize{
	width: 265px;
	height: 230px;
	min-height:200px;
}

.thickBorderBoxHoriz{
	width:580px;
}


.forgotLink{
	float:left;
	width: 150px;
	margin: 8px 0 0 10px;	
}

a.submit{
	width: 60px;
	height: 27px;
	background: url(../images/btn_submit.gif) no-repeat;
	text-indent: -99999px;
	display: block;
}