/*
black #050708
grey #adafb2
purple #83246f
*/

html { margin: 0; padding: 0; height: 101%;  }
body { margin: 0; padding: 0; background: #adafb2; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5em; }
#splashpage { background-color: #050708; }
h1  { font-size: 16px; color: #83246f; text-transform: uppercase; width: 99%; border-bottom: 1px solid #83246f; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; }
h2 { padding: 0.5em 0; color: #83246f; text-transform: uppercase; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; }
h3 { padding: 0.5em 0; color: #83246f; text-transform: uppercase; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; }
h4 { padding: 0.5em 0; }
p { padding: 0 0 0.5em 0; }
a,a:link,a:focus,a:active { color: #000; }
a:hover,a:visited  { color: #83246f; }
label  { clear: both; width: 100%; display: block; font-size: 0.85em; padding: 0.75em 0 0 0; }
dt { font-weight: bold; padding: 0.5em 0 0.5em 0; }
ul { list-style-type: circle; margin: 0 0 1em 3em; }
ul li { padding: 0.25em; }

#page_container { clear: both; margin: 0 auto; width: 960px; text-align: left; }

header { height: 120px; background-color: #050708; border-bottom: 2px solid #9A4C89; }
#slogan { height: 25px; background: url("../_images/menu-background.jpg") repeat-x; color: #FFF; font-style:italic; font-size: 14px; }
#logo_container { margin: 0 auto; width: 960px; }
#mascot{ width: 259px; float: left; }
#logo { margin: 20px; width: 279px; float: right; }

nav { width: 100%; background-color: #83246f; border-left: 1px solid #83246f; height: 38px; }
nav ul { margin: 0 auto; width: 960px; padding: 0; list-style-type: none; }
nav ul li  { float: left; position: relative; padding: 0; border-right: 1px solid #9A4C89; width: 13.5%; }
nav a  { padding: 8px 0; text-decoration: none; font-size: 14px; letter-spacing: 1px; color: #FFF; display: block; }
nav a:link,nav a:visited { color: #FFF; }
nav a:hover,nav a:focus,nav a:active,nav #selectedmenu { background-color: #B074A3; color: #333; }

section { clear: both; background-color: #F8F8F8; padding: 20px 10px 10px 20px; display: block; border-left: 1px solid #83246f; border-right: 1px solid #83246f; }
#online_shop { clear: both; background-color: #5E5F61; padding: 0; display: block; border-left: 1px solid #83246f; border-right: 1px solid #83246f; }
#online_shop h1 { margin: 0 0 20px 0; }
article { clear: both; float: left; width: 800px; text-align: justify; }
#full_page { clear: both; width: 100%; text-align: justify; background: #FFF; }
#two_col { clear: both; float: left; width: 580px; padding: 20px 10px 20px 0;   }
#admin { clear: both; float: left; width: 800px; padding: 20px 20px 20px 0; }
#article_photos { width: 320px; float: right; text-align: right; padding: 20px 10px 20px 0; }
#article_photos  img{ margin-bottom: 15px; border: 4px solid #adafb2; }
#article_photos h4 { margin: -1em 0 0 0; text-align: left; }
.text_right_photo, .text_left_photo , .text { clear: both; }
.text_right_photo  img { float: right; padding: 0 0 10px 20px; }
.text_left_photo  img { float: left; padding: 0 10px 20px 0;}
.testimonial { float: left; width: 580px; padding: 20px 10px 20px 0; }
.testimonial .name  { font-size: 1.3em; width: 100%; text-align: right; padding: 1em 0 0 0; }
.testimonial .comment  { width: 100%; }

#map { float: right; width: 400px; height: 300px; border: 1px solid #aaa; margin: 20px; }
.vcard { width: 300px; float: left; text-align: left; margin: 10px 20px 40px 0; }
.fn { font-weight: bold; }
.tel .type,.tel .value  { font-size: 1.2em; font-weight: bold; }
#form_intro { float: left; width: 550px; }
#contact_us_form { float: left; width: 550px; }
#cart_form { float: left; width: 280px; padding: 0 20px 10px 20px; background-color: #FFF; border: 1px solid #adafb2; }
.clear { clear: both; width: 320px; }
label.error { float: right; color: #83246f; width: 250px; margin-top: -1.2em; text-align: left; }
#confirmation_msg { padding: 0 1em 1em 0.5em; color: #83246f; width: 400px; }
#error_msg { padding: 0 1em 1em 2em; color: #FF0000; }
.form_input { width: 100%; clear: both; }
.form_input span { clear: both; font-size: 0.85em; }
.form_input_inline { float: left; margin: 0.5em 0 0.5em 0; }
#bot_check, #lastname { visibility: hidden; }
#admin_form { margin: 3em 0 0 2em; }
#admin_toolbar { float: right; margin: 2em 0 0 0; }
#admin_toolbar a{ padding: 0 0.5em 0 0.5em; color: #000; }

#product_page { width: 78%; float: left; padding: 20px; background-color: #F8F8F8; }
#product_intro { }
#sub_menu_container { float: left; width: 17%; background-color: #F8F8F8; }
#sub_menu { list-style: none; margin: 0; padding: 0; vertical-align: top; width: 100%; }
#sub_menu li { margin: 0; padding: 0; }
#sub_menu li a { text-decoration: none; }
#sub_menu ul { display: none; list-style: none; margin: 0; padding: 0;}
#sub_menu a { color: #FFF; font-size: 15px; letter-spacing: 0; background-color: #5E5F61; border-bottom: 1px solid #fff; cursor: pointer; display: block; margin-left: 0; padding: 7px 10px 7px 20px; width: 130px; }
#sub_menu a.expanded { background: #5E5F61 url(../_images/collapse.gif) no-repeat 5px 50%; }
#sub_menu a.collapsed { background: #5E5F61 url(../_images/expand.gif) no-repeat 5px 50%; }
#sub_menu a:hover, #sub_menu #selectedmenu { text-decoration: none; background-color: #F8F8F8; color: #000; }
#sub_menu ul a { background: #A7A8A9; color: #000; display: block; padding: 7px 10px 7px 20px; width: 130px; text-decoration: none; }
#sub_menu ul a:hover { background: #F8F8F8; }
#sub_menu li.active a { background: #F8F8F8; }
#sub_menu li.active li a { background: #A7A8A9; }

.product_thumb { float: left; width: 150px; height: 270px; position: relative; padding: 0.5em 35px 20px 0; text-align: center; }
.product_thumb img { border: none; width: 150px; }
.product_thumb_desc { font-size: 0.9em; line-height: 1.2em; width: 150px; position: absolute; bottom: 0; padding: 0 0 25px 0; }
.product_preview { width: 78%; float: left; padding: 20px; background-color: #F8F8F8; }
.product_preview  img { clear: both; float: right; margin: 0 10px 0 0; }
.product_detail_description { width: 320px; padding: 0 0 1em 0; text-align: justify; }
#product_photos { float: right; width: 320px; }
#product_photos img { margin: 0 0 10px 0; }

.yarns_thumb { float: left; width: 150px; height: 270px; position: relative; padding: 0.5em 35px 20px 0; text-align: center; }
.yarns_thumb_image { width: 150px; height: 200px; overflow: hidden; }
.yarns_thumb img { border: none; width: 150px; }
.yarns_thumb_desc { font-size: 0.9em; line-height: 1.2em; width: 150px; position: absolute; bottom: 0; padding: 0 0 25px 0; }
.yarn_preview { width: 78%; float: left; padding: 20px; background-color: #F8F8F8; }
#yarn_preview_image { clear: both; float: right; width: 300px; margin: 0 10px 0 0; }
.yarn_detail_description { width: 370px; padding: 0 0 1em 0; text-align: justify; }
#yarn_colour_chart { width: 380px; float: left; margin: 20px 0 0 0; }
#product_colour_chart img { float: left; }
.yarn_detail_description dd { padding: 0 0 0.5em 1em; }

.patterns_thumb { float: left; width: 150px; height: 250px; position: relative; padding: 0.5em 35px 20px 0; text-align: center; }
.patterns_thumb_image { width: 150px; height: 200px; overflow: hidden; }
.patterns_thumb img { border: none; width: 150px; }
.patterns_thumb_desc { font-size: 0.9em; line-height: 1.2em; width: 150px; position: absolute; bottom: 0; padding: 0 0 25px 0; }
.pattern_preview { width: 78%; float: left; padding: 20px; background-color: #F8F8F8; }
.pattern_detail_description { width: 370px; padding: 0 0 1em 0; text-align: justify; }
#pattern_colour_chart { clear: both; margin: 20px 0 0 0; }
.pattern_detail_description dd { padding: 0 0 0.5em 1em; }
#pattern_photos { float: right; width: 320px; }
#pattern_photos img { margin: 0 0 10px 0; }

.manufacturers_thumb { float: left; width: 150px; height: 130px; position: relative; padding: 0.5em 35px 20px 0; text-align: center; }
.manufacturers_thumb img { border: none; width: 150px; }
.manufacturers_thumb_desc { font-size: 0.9em; line-height: 1.2em; width: 150px; position: absolute; bottom: 0; padding: 0 0 25px 0; }


#promo_header { width: 99%; background-color: #83246f; padding: 10px 0; }
#promotion_container h1 { text-transform: uppercase; border-bottom: none; color: #FFF; padding: 0 10px; }

#display_colour_charts { clear: both; }

.page_nav { clear: both; height: 40px; margin: 0 20px; }
.page_nav a { margin: 0 10px; }
#bread_crumbs { font-size: 0.85em; padding: 0 0 1em 1em; }

.price_slashed { text-decoration: line-through; }
.sale_price { font-size: 1.1em; color: #c64934; padding: 0 0 0 10px; }

.list_items { padding: 0.5em 1em 0.5em 2em; }
.list_items td { padding: 0.25em; vertical-align: top; }
.row_on { background-color: #EEE; }
.list_button { width: 10%; }
.list_name{ width: 40%; }
.list_photo { width: 250px; }
.list_photo img { border: 0; }
.list_price{ width: 10%; }
.list_status{ width: 10%; }
.list_product_thumb img { width: 150px; }
#privacy  { padding: 2em 0 0 0; font-size: 0.75em; }
#progress_indicator { visibility: hidden; }
#introduction { clear: both; padding: 0.5em 0; }
.add_to_cart_btn { float: left; background-color: #FFF; }
#cart { clear: both; background-color: #B074A3; color: #FFF; width: 200px; height: 50px; margin: 0 10px 1em 65%;  padding: 1em 2em 1em 2em; border: 1px solid #000;}
#cart p  { margin: 0; padding: 0; float: left; width: 100px; }
#cart a { color: #FFF; }
#checkout { width: 78%; float: left; padding: 20px; background-color: #F8F8F8; }
#checkout_cart { background-color: #EEE; width: 710px; padding: 10px 20px; margin-top: 1em; border: 1px solid #FFF; }
.checkout_row { clear: both; padding: 1em 0 1em 0; width: 100%;  }
.checkout_title_row div { font-weight: bold; font-size: 0.85em; padding: 0.5em 0.5em 0.5em 0em; }
.checkout_row div { padding: 0.5em 0.5em 0.5em 0em; }
.checkout_quantity { float: left; width: 70px; }
.checkout_name{ float: left; width: 300px; font-weight: bold; }
.checkout_price { float: left; width: 100px; }
.checkout_button { float: left; width: 100px; }
#checkout_total { clear: both; width: 100%; font-weight: bold; font-size: 1.1em; padding: 1em 0 1em 0; }
#payment_options { clear: both; padding: 1em 0 0 1em; }
#payment_options dt { padding: 1em 0 0 0; font-size: 1.2em; font-weight: bold; }
#payment_options dd { width: 650px; }
.submit_btn, #generate_pages_btn { background-color: #83246f; color: #FFF; margin: 0.5em 0; padding: 0.5em 1em; }
#remove_from_cart_btn, #postage_calc_btn { background-color: #B074A3; color: #FFF; margin: 0.5em 0; padding: 0.25em 0.5em; }
#cart_total { font-size: 1.1em; font-weight: bold; padding: 1em 0 0 170px; }

footer { background-color: #050708; color: #FFF; clear: both; font-size: 0.85em; text-align: center; height: 25px; padding: 7px 0 4px 0; border-top: 4px solid #9A4C89; } 
footer a, footer a:link, footer a:focus, footer a:active, footer a:visited { color: #FFF; }
footer a:hover  { color: #B074A3; }
