/* DREWS [cms v4.2]

RECOMMENDED ORDER
1. html classes [includes body, form ... ]
2. text classes [includes p & h1 & h2]
3. header classes
4. body classes
5. footer classes
6. nav: top
7. nav: left
8. components 
9. functions: site [i.e rel links, slideshow]
10. functions: page [i.e directory]
11. error msgs
12. admin bar

*/

/* CMS ONES FROM MASTER */

/* text */

/* components */

/* generic - shared by all */
.container-1 { clear: both;}
.img-preview {}
.icons-1 {}

.image_preview { float: left; border: 1px solid #ccc; margin: 0px 11px 18px 0px;}
.image_body {}

/* functions: site  */

/* membership */
.tbl-login { margin: 0px; padding: 0px; } 
.textfield-1 { width: 220px; border: 1px solid #ccc; margin: 1px 0px 1px 0px; } 
.textfield-login-1 { width: 100px; border: 1px solid #000; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #fff; }
.text-dir-1 { font-size: 0.7em; padding: 3px 3px 3px 12px; }

/* slideshow */
#slideshow-wrapper-1 {border: 1px solid #ccc; padding: 11px; float: left;} 

/* function (5) : search  */
.textfield-dir-1 { width: 220px; border: 1px solid #999; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #D3E7D9; }

/* error msg */
#err-1 { margin-bottom: 10px; padding: 10px; border: 1px solid #990000; }
.text-err-1 { font-size: 0.7em; color: #900; margin: 3px; }

/* admin bar */
#ad-bar-1 { background-color: #000; clear: all; }
.ad-bar-text-1 { text-align: left; padding: 5px; margin: 0px; color: #fff; font-size: 0.8em; }
.ad-bar-text-1-link { color: #fff; }





/* Drews specific stylesheet - REMOVE DUPLICATES ABOVE */

body {text-align: center; padding: 0px; margin: 0px; background: url('assets/mainbkgrnd_repeatdot.gif'); font-family: verdana, sans-serif; font-size: 1.0em;}
form, label {padding: 0px; margin: 0px; border: 0px;}
h1, h2, p {padding: 0px; margin: 0px;}
.clearit {clear: both;}

a { text-decoration: underline; }
a:hover { text-decoration: underline; }

/* Wrappers */
#mainWrapper {width: 742px; margin: 15px auto 15px auto; padding-bottom: 11px;}
.wrapper {background: url('assets/wrapper_bkgrnd.gif') repeat-y; text-align: center;  }
.topWrapper {}
.bottomWrapper {}
.innerWrapper {padding: 0px 18px 0px 18px; text-align: left;}

/* Header */
#overHeader {font-size: 0.55em; color: #666666;}
#overHeader img {vertical-align: middle;}
#overHeader a {padding: 0px 8px 0px 8px; color: #666666; text-decoration: none;}
#overHeader a:hover {text-decoration: underline;}
.emailFriendLink {float: right;}
.rssLink {float: right;}
.subscribeLink {float: right;}
.basketLink {float: right;}
.theDate {padding: 0px 8px 0px 8px;}

/* #theHeader {height: 129px; width: 704px; background: url('assets/headers/header1.gif') no-repeat;} */
#theHeader {height: 129px; width: 704px;}
.headerBorder {border: 1px solid #ccc; margin-bottom: 15px;}

#graphicArea {height: 87px;}

#searchBar {float: right; border: 1px solid #CFCFCF; background-color: #fff; margin: 14px 11px 0px 0px;}
.searchTitle {float: left; width: 55px; text-align: center; font-size: 0.7em; padding: 3px 0px 4px 0px; color: #666666;}
.searchField {float: left; height: 21px; padding: 0px 4px 0px 4px; border-left: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF;}
.searchButton {float: left; background-color: #F6F6F6;}

#navArea {height: 42px;}

#topNav {float: right; padding: 24px 11px 0px 0px;}
.navItem {float: left; padding: 0px 10px 0px 10px;}
.navItem a {color: #CC3300; font-size: 0.7em; font-weight: bold; text-decoration: none;}
.navItem a:hover {text-decoration: underline;}
.navItemActive {float: left; padding: 0px 10px 0px 10px;}
.navItemActive a {color: #000; font-size: 0.7em; font-weight: bold; text-decoration: underline;}


/* Home */
#homeArea {clear: both;}

#homeBox1 {float: left; border: 1px solid #CCC; background-color: #fff;}
.homeBox1Image {width: 149px; height: 155px; margin: 7px; }
.homeBox1Text {width: 149px; height: 102px; margin: 0px 7px 7px 7px; background: url('assets/yellowbkgrnd_repeatdot.gif');}
.homeBox1Text p {font-size: 0.7em; padding: 4px;}

#homeBox2 {float: left; border: 1px solid #CCC; background-color: #fff; padding: 7px 8px 7px 8px; margin-left: 7px;}
.homeBox2Text {float: left; width: 241px; height: 264px; margin-right: 7px; background: url('assets/yellowbkgrnd_repeatdot.gif');}
.homeBox2Text p {font-size: 0.7em; padding: 7px;}
.homeBox2Image {float: left;}
.homeBox2Image img {display: block;}
.homeBox2ImageText {width: 267px; height: 58px; margin: 3px 0px 0px 0px; background-color: #D2A300;}
.homeBox2ImageText p {font-size: 0.8em; color: #fff; padding: 11px; font-weight: bold;}
.homeBox2ImageText a {color: #fff;}

#homeBox3 {clear: both;}
.homeBox3Col1 {float: left; width: 152px;}
.homeBox3Col1 p {font-size: 0.7em; padding: 7px 7px 7px 11px;}
.homeBox3Col2 {float: left; width: 152px;}
.homeBox3Col2 p {font-size: 0.7em; padding: 7px 7px 7px 11px;}

#homeBox4 {float: left; width: 399px; background: url('assets/greybkgrnd_repeatdot.gif');}
#homeBox4 h2 {padding: 11px 7px 7px 7px; font-size: 0.7em;}
#homeBox4 a {text-decoration: none; font-size: 0.7em; color: #000;}
#homeBox4 a:hover {text-decoration: underline;}
.homeBox4Col {float: left; padding: 0px 11px 0px 11px;}
.homeBox4ColItem {padding: 7px 0px 7px 0px; border-bottom: 1px solid #ccc;}
.homeBox4ColItem img {margin-right: 2px;}
.homeBox4ColImage {margin: 7px 0px 11px 0px; border: 1px solid #ccc;}

#homeArea2 {padding: 7px 0px 6px 0px; text-align: left;}
#homeArea2 h2 {font-size: 0.9em; padding: 11px 7px 0px 7px;}
#homeArea2 p {font-size: 0.7em; padding: 11px 7px 7px 7px;}

.homeArea2Box1 {float: left; border: 1px solid #ccc; margin-right: 8px;}
.homeArea2Box2 {float: left; width: 159px; height: 142px; background: url('assets/yellowbkgrnd_repeatdot.gif'); margin-right: 8px;}
.homeArea2Box3 {float: left; width: 198px; height: 142px; background: url('assets/greybkgrnd_repeatdot.gif'); margin-right: 8px;}
.homeArea2Box4 {float: left; width: 159px; height: 142px; background: url('assets/greybkgrnd_repeatdot.gif'); text-align: center; font-size: 0.7em;}




/* Sub pages */
#subArea {clear: both;}

#subNav {float: left; border: 1px solid #CCC; background-color: #fff;}

#subNavInner {width: 149px; margin: 7px; background: url('assets/greybkgrnd_repeatdot.gif');}
.subNavItem {clear: both; padding: 7px 4px 7px 4px; font-size: 0.7em;}
.subNavItem a {text-decoration: none; color: #000;}
.subNavItem a:hover {text-decoration: underline;}
.subNavItem img {vertical-align: middle; text-decoration: none;}
.subNavItemActive {clear: both; padding: 4px; font-size: 0.7em; font-weight: bold;}
.subNavItemActive a {text-decoration: underline; color: #000; float: left;}
.subNavItemActive a:hover {text-decoration: underline;}
.subNavItemActive img {vertical-align: middle; text-decoration: none;}
.subNavDivider {clear: both; height: 1px; text-align: center; background-color: #ccc; margin: 4px 4px 0px 4px;}

#subContent {float: left; background-color: #fff; margin-left: 7px;}

.featureBox {border: 1px solid #CCC; padding: 7px 8px 6px 8px; margin-bottom: 20px;}
.featureBoxText {float: left; width: 116px; height: 127px; background: url('assets/greybkgrnd_repeatdot.gif'); font-size: 0.7em;}
.featureBoxText p {padding: 4px;}
.featureBoxImage {float: left; border: 1px solid #CCC; margin-left: 7px;}

/*.contentArea {clear: both; padding: 0px 0px 20px 8px;}*/
.contentArea {clear: both; padding: 0px 0px 20px 0px; width: 522px;}

.contentAreaLeftColumn {float: left;}
.contentAreaLeftColumn img {border: 1px solid #ccc; margin: 0px 8px 8px 12px;}

.contentAreaTextColumn {float: left;}
.contentAreaTextColumnH1 {background: url('assets/greybkgrnd_repeatdot.gif'); margin-bottom: 7px;}
.contentAreaTextColumn h1 {font-size: 0.9em; font-weight: bold; padding: 12px;}
.contentAreaTextColumn h2 {padding: 3px 12px 9px 12px; font-size: 0.85em; font-weight: bold; margin: 0px;}
.contentAreaTextColumn h3 {padding: 6px 12px 9px 12px; font-size: 0.7em; font-weight: bold; margin: 0px 0px 9px 0px; border-bottom: 1px solid #ccc;}
.contentAreaTextColumn p {padding: 0px 12px 9px 12px; font-size: 0.7em;}
.contentAreaTextColumn h1 a {color: #000; text-decoration: none;}
.contentAreaTextColumn h2 a {color: #000; text-decoration: none;}
.contentAreaTextColumn h3 a {color: #000; text-decoration: none;}
.contentAreaTextColumn a {color: #000; text-decoration: underline;}
.contentAreaTextColumn a:hover {text-decoration: underline;}

.contentAreaTextColumn td {padding: 0px 12px 9px 12px; font-size: 0.7em;}


/*.contentAreaPreview {clear: both; padding: 11px 0px 14px 8px; width: 526px; border-top: 1px solid #ccc;}*/
.contentAreaPreview {clear: both; padding: 11px 0px 14px 12px; width: 522px; border-top: 1px solid #ccc;}
.contentAreaPreviewH1 {background: url('assets/greybkgrnd_repeatdot.gif'); padding: 12px; margin-bottom: 7px;}
.contentAreaPreviewH1 h1 {font-size: 0.9em; font-weight: bold;}
.contentAreaPreview h2 {padding: 0px 12px 9px 0px; font-size: 0.8em; font-weight: bold; margin: 0px;}
.contentAreaPreview p {padding: 0px 12px 9px 0px; font-size: 0.7em;}
.contentAreaPreview h1 a {color: #000; text-decoration: none;}
.contentAreaPreview h2 a {color: #000; text-decoration: none;}
.contentAreaPreview a {color: #000; text-decoration: underline;}
.contentAreaPreview a:hover {text-decoration: underline;}
 
 
.contentAreaFullWidth {clear: both; padding: 0px 0px 14px 8px; width: 526px;}
.contentAreaFullWidthH1 {background: url('assets/greybkgrnd_repeatdot.gif'); padding: 12px; margin-bottom: 7px;}
.contentAreaFullWidthH1 h1 {font-size: 0.9em; font-weight: bold;}
.contentAreaFullWidth h2 {width: 90%; padding: 0px 12px 9px 12px; font-size: 0.8em; font-weight: bold; margin: 0px;}
.contentAreaFullWidth p {width: 90%; padding: 0px 12px 9px 12px; font-size: 0.7em;}
.contentAreaFullWidth h1 a {color: #000; text-decoration: none;}
.contentAreaFullWidth h2 a {color: #000; text-decoration: none;}
.contentAreaFullWidth a {color: #000; text-decoration: underline;}
.contentAreaFullWidth a:hover {text-decoration: underline;}

.contentKeyline { width: 100%; height: 1px; background-color: #ccc; }


/* Contact form */
.contact_form-button-1 { margin: 10px; }
.contact_form-tbl-1  { background-color: #FDF8E7;}
.contact_form-textfield-1  { width: 220px; border: 1px solid #ccc; margin: 1px 0px 1px 0px; }


/* Shop JB OLD 
.shopArea {clear: both; padding: 20px 0px 20px 8px;}

.shopAreaLeftColumn {float: left; margin-right: 8px;}
.shopAreaLeftColumn img {border: 1px solid #ccc;}
.shopAreaLeftColumn p {font-size: 0.7em;}
.shopAreaLeftColumn a {color: #000; text-decoration: none;}
.shopAreaLeftColumn a:hover {text-decoration: underline;}

.shopAreaTextColumnH1 {background: url('assets/greybkgrnd_repeatdot.gif'); padding: 12px; margin-bottom: 11px;}
.shopAreaTextColumnH1 h1 {font-size: 0.9em; font-weight: bold;}

.shopAreaListTextColumn {float: left; width: 500px;}
.shopAreaListTextColumn h2 {padding: 0px 12px 0px 12px; font-size: 0.7em;}
.shopAreaListTextColumn p {padding: 12px 12px 0px 12px; font-size: 0.7em;}

.shopAreaListDivider {clear: both; background-color: #ccc; height: 1px; margin: 11px;}

.shopAreaDetailTextColumn {float: left;}
.shopAreaDetailTextColumn h2 {padding: 0px 12px 0px 12px; font-size: 0.7em;}
.shopAreaDetailTextColumn p {width: 90%; padding: 12px 12px 0px 12px; font-size: 0.7em;}
*/




/* Footer */
#theFooter {margin: 3px 7px 7px 7px; background-color: #F2F2F2; border: 1px solid #CCCCCC;}

#bottomNav {padding: 5px 4px 0px 230px;}

#underFooter {text-align: left; margin: 3px 7px 7px 7px;}
#legalNotices {float: left; font-size: 0.7em; color: #999; padding: 3px 17px 3px 17px; background-color: #F2F2F2; border: 1px solid #CCCCCC;}
#legalNotices a {text-decoration: none; color: #999;}
#legalNotices a:hover {text-decoration: underline;}












/* ----------------------------------------------------------------------------------
Shop V2.0 (SQ)  
*/

/* ----------- shop - all -------------- */
#shop-basket-overview { text-align: center; margin: 7px 7px 0px 7px; padding: 2px; background-color: #F0D064; }
.text-shop-basket-overview-1 { font-size: 0.7em; color: #000; margin: 2px; }
.text-shop-basket-overview-1 a { color: #000; }
.text-shop-basket-overview-2 { font-size: 0.7em; }

.shop-operator { }
.shop-operator-1 { float: left; }
.shop-operator-2 { float: left; }
.shop-operator-3 { float: left; }
.shop-operator-4 { float: left; }




/* ----------- shop - product  ----------- */
.shop-product-preview { clear: both; width: 516px; margin: 8px 0px 5px 8px; border: 1px solid #ccc; }
.shop-product-body  { clear: both; width: 516px; margin: 8px 0px 5px 8px; border: 1px solid #ccc; }

.shop-product-1 { width: 514px; padding: 1px; }
.shop-product-1-1 { float: left; }
.shop-product-1-2 { float: left; }
.shop-product-1-3 { float: left; }
.shop-product-2 { width: 514px; padding: 1px; background-color: #F6F6F6; }
.shop-product-2-1 { float: left;}
.shop-product-2-2 { float: right; padding: 1px 2px 1px 2px; }
.shop-product-3 { width: 514px; padding: 1px; background-color: #F0D064; }
.shop-product-3-1 { float: left; }
.shop-product-3-2 { float: left; }
.shop-product-3-3 { float: right; padding: 1px 2px 1px 2px; }

/* shop - product - form elements */
.shop-product-textfield-1 { width: 20px; font-size: 0.7em; }
.shop-product-button-1 { font-size: 0.7em; width: 20px; }
.shop-product-button-1-plus {width: 13px; height: 13px; margin: 2px; border: none; background: url(assets/basket_icons/button_plus.gif) no-repeat; color: #000; font-size: 0.1em; cursor: pointer; }
.shop-product-button-1-minus {width: 13px; height: 13px; margin: 2px; border: none; background: url(assets/basket_icons/button_minus.gif) no-repeat; color: #000; font-size: 0.1em; cursor: pointer; }
.shop-product-button-1-bin {width: 13px; height: 13px; margin: 2px; border: none; background: url(assets/basket_icons/button_bin.gif) no-repeat; color: #000; font-size: 0.1em; cursor: pointer; }
.shop-product-pulldown-1 { font-size: 0.7em; width: 100px; margin: 10px 0px 10px 10px; }



/*  ----------- shop - basket  ----------- */
.shop-basket-preview  { }
.shop-basket-body  { clear: both; width: 516px; margin: 8px 0px 5px 8px; }

.shop-basket-stp-header { background: url('assets/greybkgrnd_repeatdot.gif'); margin: 0px 0px 10px 0px; height: 35px; }
.shop-basket-stp-header-1 { float: left; padding: 10px; font-size: 0.8em; font-weight: bold; }
.shop-basket-stp-header-1-1 { float: left; color: #999; margin-left: 3px; }
.shop-basket-stp-header-1-2 { float: left; color: #000; margin-left: 3px; }

.shop-basket-header-1  { background: url('assets/orangebkgrnd_repeatdot.gif'); margin: 20px 0px 4px 0px; height: 25px; }
.shop-basket-keyline { width: 100%; height: 1px; background-color: #ccc; }
.shop-basket-text-1 { font-size: 0.7em; margin: 4px 0px 4px 0px; } .shop-basket-text-1 a { color: #000; }

/* shop - basket - form elements */
.shop-basket-button-1 { font-size: 0.7em; margin: 10px; }
.shop-basket-tbl-1  { background-color: #FDF8E7; font-size: 0.7em; }
.shop-basket-textfield-1  { width: 220px; border: 1px solid #ccc; margin: 1px 0px 1px 20px; }
.shop-basket-pulldown-1 { width: 220px; margin: 1px 0px 1px 20px; font-size: 1.0em; }
.shop-basket-pulldown-2 { width: 120px; margin: 1px 0px 1px 20px; font-size: 1.0em; }

/* shop - imgs */
.shop-img-preview-1  { border: 1px solid #CCC; margin: 10px 5px 10px 10px; }
.shop-img-body-1  { border: 1px solid #CCC; margin: 10px 5px 10px 10px; }

/* shop - fonts */
.shop-h1 { font-size: 0.8em; margin: 10px 10px 3px 10px; font-weight: normal; }
.shop-h2  { font-size: 0.8em; margin: 10px 10px 3px 10px;  font-weight: normal; }
.shop-text-1 { font-size: 0.7em; margin: 0px 10px 10px 10px; } .shop-text-1 a { color: #000; }
.shop-text-2 { font-size: 0.7em; margin: 5px 10px 0px 10px; } .shop-text-2 a { color: #000; }
.shop-text-3 { font-size: 0.7em; margin: 3px 10px 5px 10px; } .shop-text-3 a { color: #000; }
.shop-text-4 { font-size: 0.7em; margin: 0px; } .shop-text-4 a { color: #000; }
.shop-text-5 { font-size: 0.7em; margin: 20px 10px 10px 10px; } .shop-text-5 a { color: #000; }
.shop-text-6 { font-size: 0.7em; margin: 20px 10px 10px 10px; color: #900; } .shop-text-6 a { color: #900; }
.shop-text-7 { font-size: 0.7em; margin: 3px 5px 5px 5px; color: #000; } 



