/*
 * @author Mike Stephens <MikeyPHP>
 * @link http://www.php-web-development.co.uk
 * @client Sizzle Creative
 */

/* GENERAL DECLARATIONS */
html, body { font: 12px Times, serif; color: #5f1437; background: #fff1d7; text-align: center; margin: 0px; padding: 0px; }
p, h1, h2, h3, h4, h4, h5, h6, ul, li, form, input, select, textarea { font: 12px Times, serif; color: #5f1437; margin: 0px; padding: 0px; }
img { border: none; padding: 0px; margin: 0px; }
a { color: #5f1437; font-weight: bold; }

/* MAIN CONTAINERS */
#main-container { width: 1000px; margin: auto; text-align: left; }

/* HEADER */
#header { width: 100%; }
#header #logo { display: block; float: left; margin: 20px 0 0 25px !important; margin: 20px 0 0 12px; font-weight: normal; }
#header ul { padding: 0; width: 145px; float: left; list-style: none; border-left: 1px solid #5f1437; margin: 20px 0 0 25px; }
#header ul li { width: 120px; margin: 0 0 0 15px; height: 19px; line-height: 19px; }
#header ul li a { font-weight: normal; display: block; width: 120px; color: #5f1437; margin: 0px; text-decoration: none; padding: 0 0 0 10px; }
#header ul li a:hover, #header ul li a.selected { background: repeat-y url('../images/navBg.jpg'); }

#header #cat { width: 146px; height: 160px; background: #ffffff; float: left; }
#header form { width: 300px; float: right; margin: 20px 0 0 0; }
#header form label { font-weight: bold; padding: 4px; float: left;  }
#header form input { float: left; }
#header form #btnSubmit { float: left; border: 1px solid #ffffff; background: #5F1337; width: 30px; height: 20px; color: #fff1d7; margin: 0 0 0 5px; }

/* CONTENT CONTAINER */
#content { background: repeat url('../images/containerBg.jpg'); clear: both; }

/* COL 1 */
#col1 { width: 431px; float: left; }
#col1 h1 { text-transform: uppercase; font-size: 22px; background: no-repeat url('../images/featureBg.jpg'); margin: 20px 0 10px 20px; line-height: 28px !important; line-height: 26px; }

/* COL 2 */
#col2 { width: 146px; float: left; background-color: #5f1437; text-align: center; height: 100%; }
#col2 h2 { background-color: #ffffff; font-size: 20px; }
#col2 ul { list-style: none; margin: 0px; padding: 25px 10px 10px 10px; text-align: left; }
#col2 ul li { margin: 0 0 25px 0; }
#col2 ul li a { color: #fff1d7; font-size: 14px; display: inline; text-decoration: none; line-height: 16px; font-weight: bold; }
#col2 ul li a:hover, #col2 ul li a.selected { text-decoration: underline; }
#col2 ul li ul { margin: 0px; padding: 20px 0 0 0; color: #ffffff; }
#col2 ul li ul li { margin: 5px 0 10px 0; }
#col2 ul li ul li a { display: block; color: #ffffff; background: no-repeat url('../images/bullet.jpg'); padding: 0 0 0 20px; }

/* COL 3 */
#col3 { float: left; width: 400px; margin: 0 0 0 20px; }
#col3 h1 { font-size: 22px; text-transform: uppercase; margin: 0 0 25px 0; }
#col3 h2 { font-size: 18px; text-transform: uppercase; margin: 0 0 15px 0; }
#col3 p { margin: 0 0 15px 0; }

/* PRODUCT BOX */
#col1 .prodBox { margin: 0 0 20px 15px !important; margin: 0 0 20px 10px; }
.prodBox { clear: both; float: left; border-bottom: 1px solid  #000000; margin: 0 0 20px 0; }
.prodBox .img { width: 165px; height: 215px; float: left; text-align: center; margin: 0 0 0 0; }
.prodBox .img img { border: 4px solid #ffffff; }
.prodBox .info { float: left; width: 215px; margin: 0 0 0 10px; }
.prodBox .info h2 { font-size: 17px; margin: 0 0 15px 0; text-transform: uppercase; height: 38px; }
.prodBox .info p { line-height: 18px; margin: 0 0 15px 0; height: 126px; }
.prodBox .info .price { background: #5f1437; color: #fff1d7; height: 20px; font-size: 14px; text-align: right; padding: 0 5px 0 0; line-height: 23px; }
.prodBox .info .price span { float: left; margin: 0 0 0 5px; }

/* PRODUCT DETAIL */
.prodDetail div { float: left; width: 200px; }
.prodDetail big { font-size: 34px; }
.prodDetail h3 { font-size: 22px; margin: 0 0 20px 0; }
.prodDetail h4 { font-size: 20px; margin: 0 0 20px 0; }
.prodDetail .img { width: 162px; float: left; text-align: center; margin: 0 0 0 4px; }
.prodDetail .img img { border: 4px solid #ffffff; }
.prodDetail .thumb { width: 45px; height: 45px; overflow: hidden; border: 1px solid #ffffff; float: left; margin: 5px; }
.prodDetail .zoom { clear: both; font-size: 10px; background: no-repeat url('../images/zoom.jpg') 144px 5px; padding: 10px 35px 0px 5px; }

/* FORMS */
#col3 fieldset { width: 400px; margin: 0px 0 10px 0; border: 1px solid #666666; padding: 5px }
#col3 legend { font-weight: bold; color: #5F1337; margin: 0px; padding: 2px; }
#col3 label { width: 120px; float: left; margin: 10px 0 10px 0; }
#col3 input { font-size: 14px; float: left; width: 240px; height: 20px; border: 1px solid #999999; padding: 2px; }
#col3 textarea { font-size: 14px; width: 240px; height: 200px; border: 1px solid #999999; padding: 2px; }
#col3 #btnSubmit { background: #5F1337; color: #FFFFFF; font-size: 14px; width: 150px; height: 30px; border: none; float: left; margin: 10px; }
#col3 .reqField { border: 1px solid #DF2929; background: #EFC2C2 no-repeat url('../images/error.gif') 3px 2px; color: #FFFFFF; padding: 2px 2px 2px 30px; width: 220px; }
#col3 .notice { width: 400px; border: 2px solid #EDEF00; background: #FEFFAF; color: #333333; font-weight: bold; padding: 10px; line-height: 18px; }
#col3 .error { width: 400px; border: 2px solid #DF2929; background: #EFC2C2; color: #5F1337; font-weight: bold; padding: 10px; line-height: 18px; margin: 0 0 20px 0; }

/* FOOTER */
#footer { width: 100%; border-bottom: 2px solid #5f1437; margin: 0 0 10px 0; }
#footer p { width: 100%; background-color: #5f1437; margin: 0 0 3px 0; color: #fff1d7; line-height: 20px; }
#footer p a { text-decoration: none; color: #fff1d7; font-weight: normal; line-height: 18px; }