/* CSS for Natio, by Will Dayble */
/* Made in August --> September 2008 */



/* let's do eric myer reset stylez */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}

/* remember to define focus styles! */
:focus {outline: 0;}
body {line-height: 1; color: black; background: white;}
ol, ul {list-style: none;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption{text-align: left; font-weight: normal;}
/* th, td {text-align: left; font-weight: normal;} */
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}

a img{border: none;}
cite{font-style: normal;}

.clrplz{clear:both; height:1px; display:block; width:100%; overflow: hidden; background: #fff;}


/* ---------------------------------------*/
/* stuff from the magento standards */
/* ---------------------------------------*/
.no-display{display:none;}

/* ---------------------------------------*/
/* for sensibility, z-indexes all at once */
/* ---------------------------------------*/

#rap{z-index: 500;}
#right{z-index: 600;}
#left{z-index: 700;}
#m1 div span{z-index: 9999;} /*the dropdown menu */

/* ---------------------------------------*/
/* and now our design */
/* ---------------------------------------*/

body{font-family: Tahoma, Arial, sans-serif; font-size: 13px;}
a{color: #000; text-decoration: none;}
strong{font-family: Tahoma, Arial, sans-serif;font-weight:bold;}
em { font-style: italic; }

/* some reusable bits? */
.form-button{height:20px; font-size: 11px; border:1px solid #babf9e; margin: 0 0 3px; text-align: center; background:#fff url(../images/layout/button-backer-grad.jpg) repeat-x top; color: #000; display: block; cursor: pointer;}


/* overall wrapper */
#rap{width:800px; margin:0 auto; position: relative;}

/* header */
#header{height:100px;}
#header h1{position: absolute; top:20px; left:0; width:200px; height: 66px; background: url(../images/layout/logo.jpg);}
#header h1 a{display: block; position: absolute; top:0; left:0; width:100%; height:100%;}
#header h1 a span{display:none;}

#loveBeingYou{display:block; width:231px; height:69px; position:absolute; top:20px; right:0; background: url(../images/layout/love-being-you.jpg);}
#loveBeingYou span{display:none;}


/* natioheader */
#natioheader{height:100px;}
#natioheader h1{position: absolute; top:20px; left:0; width:860px; height: 66px; background: url(../images/layout/Natio_WebMastHead.jpg);}
#natioheader h1 a{display: block; position: absolute; top:0; left:0; width:100%; height:100%;}
#natioheader h1 a span{display:none;}

/* left column */
#left{width:200px; float:left;}

/* main menu */
#m1{border-top: 1px solid #ccc; margin: 32px 0 0;}
#m1 a{display:block; border-bottom: 1px solid #ccc; padding:4px 2px; font-size: 12px; margin: 0; text-transform: uppercase; color: #333;}
#m1 a:hover, #m1 div.over a.m1{background:#D3D8AA; color:#fff; padding-left: 10px;}

/* dropdown menu */
#m1 div{position: relative;}
#m1 span{display:none;}
#m1 div.over span{display:block;} /* javascript adds 'over' */
#theDropDownMenu{position:absolute; width:200px; top:-1px; left:200px; display:none;border-top: 1px solid #ccc;}
#theDropDownMenu a{ background: #877c74; color: #fff; padding-left:5px; cursor: pointer; text-transform: capitalize;}
#theDropDownMenu a:hover{ background: #D3D8AA; padding-left: 10px;}


/* this is a style for the left boxes, they may change */
.leftBox{padding:50px 0 0; position: relative;}
.leftBox form{position: relative;}
.leftBox h3{font-size:12px; padding:3px 0; text-transform: uppercase;}
.leftBox input.text{width:115px; height:12px; font-size: 11px; border:1px solid #babf9e; margin: 0 0 3px; padding: 3px;}
.leftBox input.submit{width:70px; height:20px; font-size: 11px; border:1px solid #babf9e; margin: 0 0 3px; text-align: center; background:#fff url(../images/layout/button-backer-grad.jpg) repeat-x top; color: #000; position: absolute; bottom:0; right:0; display: block; cursor: pointer;}
.leftBox input.submit:hover{font-weight: bold;}

.leftBox .forgotPass{padding:15px 0 0;}
.leftBox .forgotPass a{display:block; color: #685c53; font-size: 10px;}
.leftBox .forgotPass a:hover{color:#000;}


/* right column */
#right{width:570px; float:right;}

/* main header */
#right h2{color:#D3D8AA; text-transform: uppercase; font-size: 18px; padding: 0 0 3px; letter-spacing: 2px;}

#m2{background: #D3D8AA url(../images/layout/m2-backer.jpg); width:100%;}
#m2 a{display:block; float:left; padding: 4px 17px; font-size: 11px; color: #fff; margin: 0 0 1px 0; line-height: 13px; background: #D3D8AA;}
/* #m2 a.active, #m2 a:hover{background:#685c53;} */
#m2 a.active, #m2 a:hover{background:#dae5cd;color:#685c53;}

/*bread crumb */
#breadcrumb{font-size: 11px; color: #685c53; padding: 5px 80px 5px 0; position: relative;}
#breadcrumb a{color: #685c53;}
#breadcrumb a:hover{color: #000;}

#breadcrumbSignin{position: absolute; top:5px; right:0; text-align: right;}


/* sub header */
#right h3{color:#D3D8AA; font-size: 18px; padding: 5px 0 5px;}
#right h3 span{display:block; font-size: 13px; color: #000; padding: 2px 0; line-height: 15px;}
#right h3 strong{display: block;}


/* footer */
#footer{clear:both; height:100px; padding: 50px 0 0;}
#footer a{text-transform: uppercase; font-size: 10px; display: block; float:right; margin: 20px 0 0 0; padding: 5px; color: #685c53;}
#footer a:hover{color: #000;}

/* ---------------------------------------*/
/* CMS Content                            */
/* ---------------------------------------*/

.cmsContent p{font-size: 11px; color: #685c53; padding: 5px 80px 5px 0;}

/* ---------------------------------------*/
/* product listings / category stuff */
/* ---------------------------------------*/

/* this is conditional CSS, to make magneto display stuff how we want */
body.catalog-category-view #right{padding-top:32px; position: relative;}
body.catalog-category-view #right .category-head{position: absolute; top:0; left:0;}
.category-description{font-size: 12px;}
.note-msg{border:1px solid #ccc; background: #f9f9f9; margin: 20px 0; padding: 10px; text-align: center; color: #666; font-size: 12px;}
.success-msg{border:1px solid #ccc; background: #f9f9f9; margin: 20px 0; padding: 10px; text-align: center; color: #0b5d1b; font-size: 12px; font-weight: bold;}

/* we're killing more */

.listing-item, .bodyCat{min-height:82px; border-bottom: 0px solid #babf9e; margin: 30px 0 0 115px; position: relative;}
* html .listing-item, * html .bodyCat{height:82px;}
.listing-item .product-image, .bodyCat img{position: absolute; top:0; left:-110px; border:1px solid #fff; width:100px;}
.listing-item .product-image img, .bodyCat img{width:100px; height:100px;}
.listing-item .product-image:hover, .bodyCat img:hover{border:1px solid #ddd;}
.listing-item h5, .listing-item h5 a, .bodyCat h5, .bodyCat h5 a{color:#D3D8AA; font-size: 18px; display: block;padding-top:10px}
.listing-item .description, .bodyCat p{font-size:13px; line-height: 15px; width:310px; padding: 0 0 10px;}
.listing-item .description a, .listing-item .description br{display:none;}

/* the price, absolute */
.listing-item .price-box{font-size: 16px; color: #685c53; position: absolute; top: 0; right:0; text-align: right; width:150px; display:block;}

/* the add-to-cart, absolut */
.listing-item .add-to-cart-button, .bodyCat a.view, .buttoneyLinks a{width:70px; padding: 3px 10px; font-size: 11px; border:1px solid #babf9e; text-align: center; background:#fff url(../images/layout/button-backer-grad.jpg) repeat-x top; color: #000; position: absolute; top:30px; right:0; display: block; cursor: pointer;}


/* ---------------------------------------*/
/* product detail page - proddetail  */
/* ---------------------------------------*/


/* things we're killing and resetting: */
.availability, .add-to-cart-box legend, .add-or, .add-to-box, .more-views h4{display:none;}

/* this is conditional CSS, to make magneto display stuff how we want */
body.catalog-product-view #right{padding-top:32px; position: relative;}
body.catalog-product-view #right .category-head{position: absolute; top:0; left:0;}
body.catalog-product-view #right h3{display:none;}
body.catalog-product-view #right .product h3{display:block;}



.product{position: relative;}
.product h3{padding-bottom: 7px; border-bottom: 1px solid #babf9e;}
#productWeightFun{ font-size: 12px; display:block; padding: 3px 0; text-transform:lowercase;color:#685c53;}
#productWeightFun h6{display:none;}

/* images stuff */
.bigImage{position: relative; top:10px; left:0; width:270px;z-index:100;}
.bigImage .more-views li, .bigImage .more-views a{display:block; float:left;}
.bigImage .more-views a{border:1px solid #ddd; margin: 0 5px; padding: 5px;}
.bigImage .more-views a:hover{border:1px solid #aaa;}
.bigImage img{max-height: 280px;}
* html .bigImage img#image{height: 280px;}
.bigImage {min-height: 300px;}
/* details of the product */
.product .details{position: absolute; top:20px; left:0;  padding: 20px 0 0 300px; margin: 0 0 120px;}
.product .details {min-height: 240px;}
* html .product .details {height: 240px;}
.product .details .price-box{color: #685c53; font-size: 15px; text-transform: uppercase; letter-spacing: 0;height:18px;}
.product .details .price-box .this-is-the-weight{color: #D3D8AA; font-size: 18px; display:block; padding: 3px 0; text-transform:lowercase;}

/* add to cart */
.product .details form {padding:10px 0 30px;}
.product .details form label, .product .details form .input-text, .product .details button{ display: block; float: left;font-size: 12px;}
.product .details form label{width:65px; line-height: 20px;}
.product .details form .input-text{width:30px; border:1px solid #babf9e; padding: 2px; height: 14px; margin: 0 10px 0 0;}
.product .details form button{width:90px; height:20px; font-size: 11px; border:1px solid #babf9e; text-align: center; background:#fff url(../images/layout/button-backer-grad.jpg) repeat-x top; color: #000; display: block; cursor: pointer;}
* html .product .details form button{float:right; margin: -24px 35px 0 0;}

/* right side details */
.product .details h5{font-size: 13px; padding:0 0 10px; font-weight: bold;}
.product .details .questions a{font-size: 12px; display: block; padding: 0 0 5px;}

/* features tabs */
.product .features{border-top: 1px solid #babf9e; border-bottom: 1px solid #babf9e; padding: 20px 0;}
#tabsHeader{height:40px;}
#tabsHeader a{display:block; float: left;}
#tabsHeader a:focus{color:#D3D8AA;}
#tabsHeader a{display:block; float: left; border:1px solid #acb183; font-size: 11px; padding: 4px; margin: 0 10px 0 0;}

#tabsContent {padding:10px 0;}
#tabsContent div{display: block; padding:0 0 10px; font-size: 12px; line-height: 15px;}
#tabsContent div h6{ font-weight: bold;}

/* hiding the description for the moment */
#productDescription{display:none;}

/* hiding the description for the moment */
.collateral-box{display:none;}

.related, .alsobought {border-bottom: 1px solid #babf9e; padding: 20px 0;}
.related h4, .alsobought h4{font-size:18px; color: #D3D8AA; padding: 0 0 20px;}


/* this is a grid of products ^_^ */
.prodGrid a{float:left; text-align: center; height:150px; font-size: 13px;color:#685c53;}
.prodGrid a img{border:1px solid #fff;}
.prodGrid a span{display: block; width:100%; margin: 0 auto; line-height: 15px; padding: 5px 0 0;}
.prodGrid a span strong{display: block; font-weight: bold;}
.prodGrid a:hover{color:#000;}
.prodGrid a:hover img{border:1px solid #ddd;}
.prodGrid .AUD{display:none;}
/* how many across? */
.prodGrid.four a{width:24%}
.prodGrid.three a{width:33%}



/* ---------------------------------------*/
/* shopping-cart-table */
/* ---------------------------------------*/

/* some bad CSS killering */
.page-head-alt .checkout-types{display:none;}

.shopping-cart-item-message.error{font-size: 10px; color: #c00;}

#shopping-cart-table, #shoping-cart-totals-table{width:100%;}

#shopping-cart-table th{padding:3px; font-size: 12px; background: #877c74; color: #fff;}
#shopping-cart-table td, #shoping-cart-totals-table td{border-bottom: 1px solid #ddd; padding: 5px; vertical-align: top; font-size: 13px; color: #333;}
#shopping-cart-table a img{border:1px solid #ddd;}
#shopping-cart-table tfoot button{float:right; background: #fff; border: none; cursor: pointer; margin: 0 0 0 5px;}
* html #shopping-cart-table tfoot button{width:130px; text-align: right; line-height: 20px;}
#shopping-cart-table tfoot button:hover{background:#f9f9f9}

#shoping-cart-totals-table{ margin: 0 0 10px 0; background: #f9f9f9; color: #333;}
#shoping-cart-totals-table tbody, shoping-cart-totals-table tfoot{width:100%;}
#shoping-cart-totals-table tbody td, shoping-cart-totals-table tfoot td {font-size: 12px;}

#shoping-cart-totals-table span.price{display:block; text-align: right;}

.error-msg{border:1px solid #ccc; background: #f9f9f9; padding: 5px; text-align: center; margin: 4px 0; font-size: 13px; color: #c00;}

.goToCheckout a{display:block; text-align: center; font-size: 22px; padding: 5px; color: #444;}
.goToCheckout a:hover{color:#000;}

.emptyShoppingCart p{color: #333;}


/* ---------------------------------------*/
/* checkout-onepage-success */
/* ---------------------------------------*/
body.checkout-onepage-success #right{line-height: 150%; padding: 0 0 10px 0;}
body.checkout-onepage-success .page-head strong{display: block; font-weight: bold;}
body.checkout-onepage-success .button-set{padding-top: 10px;}



/* ---------------------------------------*/
/* home page */
/* ---------------------------------------*/

.homeImage{padding:10px 0 40px; border-bottom: 1px solid #babf9e; margin: 0 0 30px; text-align: center;}
.prodGrid.three.home a {font-size: 12px;}
.prodGrid.three.home a img{padding:5px 2px;}


/* ---------------------------------------*/
/* some foms section */
/* ---------------------------------------*/


/* customer-account-forgotpassword */
body.customer-account-forgotpassword fieldset{padding: 5px 0; line-height: 150%; font-size: 13px;}
body.customer-account-forgotpassword fieldset legend{display: none;}
body.customer-account-forgotpassword fieldset .input-box{padding: 10px; margin: 5px 0; background: #f9f9f9; border: 1px solid #ccc;}
body.customer-account-forgotpassword .button-set .required{display:none;}
body.customer-account-forgotpassword .button-set a.left{float:right;}

/* login */
body.customer-account-login form, body.customer-account-edit form{padding: 5px 0; line-height: 150%; font-size: 13px;}
body.customer-account-login form legend, body.customer-account-edit form legend{display: none;}
body.customer-account-login form .input-box, body.customer-account-edit form .input-box{padding: 10px; margin: 5px 0; background: #f9f9f9; border: 1px solid #ccc;}
body.customer-account-login .button-set .required, body.customer-account-edit .button-set .required{display:none;}
body.customer-account-login .button-set a.left, body.customer-account-edit .button-set a.left{float:right;}

/*colummnz */
body.customer-account-login .col-1, body.customer-account-login .col-2{margin: 5px 0; padding: 10px; border: 1px solid #ccc; background: #f9f9f9;}
body.customer-account-login .col-1 h4, body.customer-account-login .col-2 h4{ font-weight: bold;}
body.customer-account-login .col-1 p, body.customer-account-login .col-2 p{color:#666; padding: 0 0 5px;}

/* create user */
body.customer-account-create fieldset{padding: 5px 0; line-height: 150%; font-size: 13px;}
body.customer-account-create fieldset legend{display: none;}
body.customer-account-create fieldset .input-box{padding: 10px; margin: 5px 0; background: #f9f9f9; border: 1px solid #ccc;}
body.customer-account-create .button-set .required{display:none;}
body.customer-account-create .button-set a.left{float:right;}
body.customer-account-create h4.legend{font-size: 18px; color: #D3D8AA;}


/* the customer account page */

.box.account-nav{display:none;}
.leftBox, .box.account-nav{font-size: 13px;}
.leftBox .loggedIn, .box.account-nav ul {background: #f9f9f9; padding: 5px; border-top: 1px solid #ccc;}
.leftBox .loggedIn a, .box.account-nav a{display: block; color: #666; padding: 3px 0;}
.leftBox .loggedIn a:hover, .box.account-nav a:hover {color:#444;}

body.customer-account-index .login-box{display:none;}
body.customer-account-index .box.account-nav{display:block;}
body.customer-account-index .box.account-nav h3{font-size:12px; padding:40px 0 3px; text-transform: uppercase;}


/* dashboard */
body.customer-account-index #right{font-size: 13px;}

body.customer-account-index .dashboard-welcome{margin:5px 0; padding:10px; border: 1px solid #ccc; background: #f9f9f9;}
body.customer-account-index .dashboard-welcome strong{font-weight: bold; display: block;}

.account-box.ad-account-info h4, .account-box.ad-orders h4{color:#D3D8AA; font-size: 22px; padding: 10px 0 3px;}
.yourInformationStuff p{line-height: 180%; position: relative; height: 20px; padding: 0 0 0 60px;}
.yourInformationStuff strong{display: block; width:80px; position: absolute; top:0; left:0; font-weight: bold;}


#my-orders-table{width:100%; margin: 5px 0;}
#my-orders-table{padding: 0; border: 1px solid #ddd; font-size: 12px; color: #333;}
#my-orders-table th{border-bottom: 1px solid #ccc; background: #f9f9f9; padding: 5px; color:#000}
#my-orders-table .a-right, #my-orders-table .a-center{width:80px; text-align: right;}
#my-orders-table td{border-bottom: 1px solid #ccc; background: #fff; padding: 5px;}
#my-orders-table a:hover{color:#666;}

.buttoneyLinks a{position: relative; width:100px; font-size: 13px; margin: 0 10px 0 0; float: left; height: 16px;}
.validation-advice{color: #c00;width:200px;}


/* viewingAnOrder */
#viewingAnOrder h4{font-weight:bold; display: block; padding: 3px 0;}
#viewingAnOrder .generic-box{background: #f9f9f9; border: 1px solid #ccc; padding: 10px; margin: 5px 0;}
#viewingAnOrder .generic-box h4{font-weight: bold;}



/* ---------------------------------------*/
/* CMS Content */
/* ---------------------------------------*/

.cmsContent h1, .cmsContent h2 {color:#D3D8AA; text-transform: uppercase; font-size: 28px; padding: 0 0 3px; letter-spacing: 2px; margin: 0;}
.cmsContent h3, .cmsContent h4, .cmsContent h5, .cmsContent h6 {color:#D3D8AA; font-size: 22px; padding: 0 0 3px; letter-spacing: 0; text-transform: none;}

.cmsContent h4{font-size: 18px;}
.cmsContent h5, h6{font-size: 15px; color: #000;}
.cmsContent p{font-size: 13px; color: #000000; line-height: 15px; margin: 0; padding: 0 0 15px;}

ul.options-list li  {
	width:50px;
	float:left;
}

fieldset#product-options-wrapper div#originalRadioBlock {
width:1px;
height:1px;
overflow:hidden;
position:absolute;
top:5;
left:5;
z-index:1000;
}