@charset "utf-8";
/* CSS Document */
/* Start Page Formatting */

body {
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
}

/* This has been removed - p, a, ul li, ul ul li, ul ul ul li */
html, body {
 font: normal 11px Century Gothic;
 line-height: 1.4em;
}

#section_div {
 width: auto; /* Creates a width automatically to the content inside */
 padding: 5px 0px; /* Add 5px to the container so everything can "breath" */
 overflow: hidden; /* In case they type to much, hide the content so it doesn't break the container size  */ 
}

#body_content_container {
 float: right;
 width: 780px;
 padding: 0px 0px;
}


#section_div img {
 position: relative; /* Set the image relative to the DIV (container) */
}

h2 {
 font-weight: bold; /* Sets the font bold */
 margin: 0 0 8px 0; /* Adds margin around the title: Order = Top Right Bottom Left */
}

#topCentreCell h1 {
 color: #FFFFFF; /* Sets the font colour to white (HEX value) */
 margin: 0 0 5px 0; /* Adds margin around the title: Order = Top Right Bottom Left */
 padding: 0; /* Removes padding from the title: Order = Effects all sides */
}

a {
 color: #005785; /* Sets the font on links to blue */
 text-decoration: none; /* Removes standard decoration of links: (Underlines) */
}

a:hover {
 text-decoration: underline; /* Sets links to underline when the mouse is hovered over */
}

form, p, ul li, ul ul li, ul ul ul li {
 margin: 0 0 8px 0; /* Adds margin around the form & paragraphs: Order = Top Right Bottom Left */ 
}

* {
 vertical-align: top; /* aligns the text to the top of the content area (All containers & DIVs) */
}

.menu_header {
 display: block;
 text-align: center;
 padding: 3px;
 font: bold 100% Verdana;
 background: url(/cms_images/menu_red.jpg) #DC143C center left repeat-x;
 /* Adds a background image... "color", Position, position, repeat */
 color: #FFFFFF;
}

/* Start Navigation Formatting */

/* Right Menu */
#right_ a {
 color: #747474; /* Sets the font colour to grey (HEX value) */
 background-color: #EEEEEE; /* sets the background colour to a light grey (HEX value) */
 display: block; /* Displays the element as a block */
 padding: 5px; /* Adds padding to all sides (Top Right Bottom Left) */
 border-bottom: 1px solid #E3E3E3; /* Adds a border of 1px solid line to grey (HEX value) */
}
#right_ a:hover {
 background-color: #DCDCDC; /* Sets the background colour darker when the mouse is over the link (HEX colour) */
 color: #A52A2A;  /* Sets the font colour to a dark grey when the mouse is over the link (HEX colour) */
 text-decoration: none;
}

/* End Navigation Formatting */

/* End Page Formatting */

/* Start Site Layout */

#top, #main {
 width: 950px; /* Sets the size of the table */
 background-color: #FFFFFF;
}

#mainContentCell, #mainContentTD {
 width: 99.5%; /* Sets the main "content" area's to full width; */
}

#topMenuCell, #bottomMenuCell, #footerCell {
 display: block;
}

#topLeftCell img, #topCenterCell img, #topRightCell  img {
 display: block; /* display the image in a block not paragraph or add spacing */
}

div#topLeftCell, div#topCenterCell, div#topRightCell {
 position: relative; /* Sets the DIV relative to the table cell */
 overflow: hidden; /* Hides content bigger than content cell size so it doesn't change the layout */
}

#topRightTD, #topRightCell {
 width: 200px; /* Sets the left column to 200px; */
 color: #FFFFFF; /* Sets the font colour to white (HEX value) */
}

#topLeftTD, #topLeftCell {
 width: 200px; /* Sets the top left cell & DIV to 200px */
 color: #FFFFFF; /* Sets the font colour to white (HEX value) */
}

#topLeftCell, #topRightCell {
 height: 190px; /* Sets the top left & right cells to 97px height */
 padding: 0 5px; /* Adds padding to the Cell: Order = Top & Bottom, Right & Left; */
 background: url(/cms_images/header_red.jpg) #DC143C center left repeat-x;
 /* Adds a background image... "color", Position, position, repeat */
}

#rightMenuTD, #rightMenuCell {
 width: 310px; /* Sets the right cell & DIV to 180px */
}

#topMenuTD {
 border-top: 1px solid #CCCCCC; /* Add a border of 1px solid line & colour of grey (HEX value) */
 border-bottom: 1px solid #CCCCCC; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

#rightMenuTD {
 border-left: 1px solid #B3B3B3; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

#topCentreCell {
 height: 190px; /* Sets the height of the top centre cell */
 padding: 0; /* Removes all padding */ 
}

#mainContent {
 margin: 0; /* Remove all margins */
 padding: 8px; /* Adds 8px padding to every side around the content area */
 height: auto; /* Creates its own height to the content in the cell area */
}

#bottomMenuTD {
 border-top: 1px solid #CCCCCC; /* Add a border of 1px solid line & colour of grey (HEX value) */
 border-bottom: 1px solid #CCCCCC; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

#footerTD {
 padding: 7px 5px 0 5px; /* Adds padding around the footer container: Order = Top Right Bottom Left; */
 width: 100%; /* Sets the width to full width of the "main" table */
 color: #FFFFFF; /*Set the footer to white */
 background: url(/cms_images/footer_red.jpg) #DC143C center left repeat-x;
 /* Adds a background image... "color", Position, position, repeat */
}

#search {
 padding: 8px; /* Adds 8px padding to every side around the content area */
}

#tut {
 margin: 5px 5px;
}

/* Start Articles Display */

/* List categories on the Section page one per row */
.list_category_one_in_row {
 width: auto; /* Creates a width automatically to the content inside */
 padding: 5px; /* Add 5px to the container so everything can "breath" */
 overflow: hidden; /* In case they type to much, hide the content so it doesn't break the container size  */ 
 border-top: 1px dotted #808080; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

.list_category_one_in_row img {
 position: relative; /* Sets the image relative to the content area */
 border: 1px solid #333333; /* Add a border of 1px solid line & colour of grey (HEX value) */
}

/* End Article Displays */

/*Start Error Message Display */

div#error_message ul {
 margin: 6px 0 0 20px;	/* Adds a margin on the left hand side of 20px */
 color: #CC0000; 			/* Sets the font colour to grey (HEX value) */
 line-height: 1.3em; /* Sets the height between each bullet point */
}
 
div#error_message {
 width: auto; /* Sets the width of the error container to 450px */
 border: 1px solid #CCCCCC; /* Adds a border of 1px ridge line with a red colour (HEX value) */
 background-color: #f9f9f9; /* Sets the background colour to an off grey */
 padding: 4px 4px 0px 4px; /* Adds padding within the container: Order = Top Right Bottom Left; */
 margin-bottom: 8px;	/* Adds a margin of 8px to the bottom */
 line-height: 1.3em;	/* Sets the height between each line */
}

/* CSS for Bookmark With START */
.sharesb{
	clear:both;
	position:relative;
	border:1px solid #ddd;
	padding:10px;
	margin:15px 0 10px 0;
	/* -webkit-text-size-adjust:none; */
}
.sharesb ul{
	text-align:left;
	list-style:none;
	margin:15px 0 0px 15px;
	padding:0;
}
.sharesb ul li{
	text-align:center;
	display:inline;
	padding: 0 4px 8px 0;
}

.sharesb ul li.delicious{background:url("/migglecms/modules/share_this/delicious.gif") no-repeat 0 0;}
.sharesb ul li.digg{background:url("/migglecms/modules/share_this/digg.gif") no-repeat 0 0;}
.sharesb ul li.reddit{background:url("/migglecms/modules/share_this/reddit.gif") no-repeat 0 0;
}
.sharesb ul li.facebook{background:url("/migglecms/modules/share_this/facebook.gif") no-repeat 0 0;}
.sharesb ul li.stumbleupon{background:url("/migglecms/modules/share_this/stumbleupon.gif") no-repeat 0 0;}
.sharesb ul li a { padding:3px 0 0 18px; margin:0 10px 0 3px; }

/* CSS for Bookmark With END */


/* End Error Message Display */

/* End Site Layout */

/* Start Skip Navigation for screen readers */

#skip_navigation {
 position: absolute;
 left: -1000em;
 width: 20em; /* Sets the screen reader skip navigation of site so it can't be viewed */
}

/* End Skip Navigation for screen readers */


/* ONLY KEEP THIS WHEN THE FINAL SITE GOES LIVE */
/* NEW CSS */

.clear {
 clear:both;
}

.left {
 float: left;
}

#back_btn {
 width: 60px;
 float: right;
 margin-top: 8px;
}

#back_btn a {
font: normal 14px Century Gothic;
 color: #613f2c;
}

h1 {
 font: normal 24px Century Gothic;
 color: #613f2c;
 margin: 0 0 13px 0; 
 padding: 0;
}

h2 {
 font: normal 20px Century Gothic;
 color: #613f2c;
 margin: 0 0 13px 0; 
 padding: 0;
}

h3 {
 font: normal 16px Century Gothic;
 color: #613f2c;
 margin: 0 0 13px 0; 
 padding: 0;
}

#container {
 position: relative;
 width: 950px;
 margin: 0 auto;
 padding: 0;
 text-align: left;
 background-color: #FFFFFF;
}

#topNav {
 float:left;
 position: relative;
 font: normal 14px Century Gothic;
 border-bottom: 16px solid #402a1e;
 margin: 0 0 0 0;
 width: 100%;
 height: 162px;
 background:url("/migglecms/templates/default/images/header.jpg") no-repeat left top;
}
    
#topNav ul {
 position: absolute;
 bottom: 0;
 margin:0;
 padding:0;
 list-style:none;
}
    
#topNav li {
 display:inline;
 margin:0;
 padding:0;
}
    
#topNav a {
 float:left;
 background:url("/migglecms/templates/default/images/left_top_nav.gif") no-repeat left top;
 margin-right: 1px;
 padding:0 0 0 10px;
 text-decoration:none;
}

#topNav a span {
 float:left;
 display:block;
 background:url("/migglecms/templates/default/images/right_top_nav.gif") no-repeat right top;
 padding: 4px 14px 3px 4px;
 color:#FFFFFF;
}

#topNav a.clear {
 margin-right: 0px;
} 

#topNav a span {float:none;}

#topNav a:hover {
 background-position:0% -42px;
}

#topNav a:hover span {
 background-position:100% -42px;
 color:#FFFFFF;
}

/* CLASSES for menu item ON state START */
#topNav .isOna {
 background-position:0% -42px;
 margin-right: 1px;
 }

#topNav .isOnSpan {
 background-position:100% -42px;
 color:#FFFFFF;
}
/* CLASSES for menu item ON state END */

/* Left Menu */

#leftMenuTD, #leftMenuCell {
 width: 150px;
 padding: 0;
}

#left_ {
 float: left;
 width: 150px;
 padding: 30px 0;
}

#left_ a {
 font: normal 14px Century Gothic;
 color: #FFFFFF;
 text-align: center;
 line-height: 24px;
 background:url("/migglecms/templates/default/images/left_nav.gif") no-repeat left top;
 display: block;
 height: 24px;
 padding: 5px;
 width: 89px;
 margin: 0 0 5px 20px;
}
#left_ a:hover {
 background:url("/migglecms/templates/default/images/left_nav_hover.gif") no-repeat left top;
 color: #FFFFFF;
 text-decoration: none;
}
#left_ #sub-menu a{
 background-color: #F8F8FF;
 text-indent: 15px;
 border-bottom: 1px solid #E3E3E3;
}

#left_ #sub-menu a:hover {
 background-color: #dedede;
}

#left_ a.isOna {
  color: #FFFFFF;
  background:url("/migglecms/templates/default/images/left_nav_hover.gif") no-repeat left top;
}

/* Bottom Menu */
#bottom_container { 
 text-align: center; 
 width: 99.9%; 
 padding-top: 25px;
}

#bottom_ { 
 text-align: center; 
 width: 265px;
 margin: 0 auto; 
}

#bottom_ a {
 font: normal 14px Century Gothic;
 color: #000000;
 display: block;
 float: left;
 padding: 4px;
}

#bottom_ a:hover {
 color: #545454;
 text-decoration: none;
}

#bottom_ a.isOna {
  color: #545454;
}

/* Footer */

#footer {
 padding-bottom: 15px;
}

#footer a {
 font: normal 14px Century Gothic;
 color: #000000;
}

#footer a:hover {
 color: #545454;
 text-decoration: none;
}

#footer p {
 text-align: right;
 padding-right: 200px;
 font: normal 14px Century Gothic;
}

/* Home page content holder */

#content_container {
 width: 500px;
 margin-left: 70px;
}

#image_container {
 float: left;
 width: 250px;
 height: 218px;
}

#text_container {
 float: right;
 width: 230px;
 height: 198px;
 padding: 10px;
 color: #FFFFFF;
 font: normal 12px Century Gothic;
 background-color: #613f2c;
}

#product_container {
 width: auto;
 height: 143px;
 background-color: #FFFFFF;
}
  
#product_container img.middle{
 margin: 0px 2px;
}

/* List categories on the Section page two per row */
.list_category_three_in_row {
 position: relative;
 width: 228px;
 height: 183px;
 margin: 0 25px 25px 0;
 overflow: hidden;
}

.list_category_three_in_row img {
 position: relative;
}

.list_category_three_in_row .learn_titles {
 z-index: 9999;
 position: absolute;
 bottom: 7px;
 font: normal 18px Century Gothic;
}

.learn_titles a {
 margin-left: 10px;
 color: #FFFFFF;
}

/* PRODUCT OVERVIEW LISTING WITHIN THE CATEGORY START */

.title_overview {
 position: absolute;
 bottom: 36px;
 left: 0;
 width: 107px;
 height: 37px;
 margin-left: 28px;
 text-align: center;
 background: url("/migglecms/templates/default/images/section_overview/section_overview.jpg") transparent left top no-repeat;
}

.title_overview:hover {
 background: url("/migglecms/templates/default/images/section_overview/section_overview_over.jpg") transparent left top no-repeat;
}

h1.product_title_overview {
 margin-top: 6px;
 color: #FFFFFF;
 font: normal 14px Century Gothic;
}

.product_holder_overview a {
 position: relative;
 width: 165px;
 height: 250px;
 text-decoration: none;
 display: block;
 color: #FFFFFF;
 overflow: hidden;
}
  
.product_holder_overview {
 float: left;
 width: 165px;
 height: 210px;
 margin: 0 18px 22px 0;
 overflow: hidden;
}

.product_holder_overview p {
 margin: 2px 0 0 8px;
 height: 5px;
 line-height: 1.3em;
}
  
.product_holder_overview span {
 position: relative;
 left: 8px;
 top: 43px;
 font-weight: bold;
}

* HTML .product_holder_overview span {
 position: relative;
 left: 8px;
 top: 4px;
 text-decoration: none;
}

.product_holder_overview a:hover {
 text-decoration: none;
}

.product_holder_overview a, img {
 border: none;
}

/* PRODUCT LISTING WITHIN THE CATEGORY START */

.product_holder a {
 width: 165px;
 height: 250px;
 text-decoration: none;
 display: block;
 color: #FFFFFF;
 background-color: #c9ba93;
 overflow: hidden;
}
  
.product_holder {
 float: left;
 width: 165px;
 height: 250px;
 margin: 0 18px 22px 0;
 overflow: hidden;
}
  
h1.product_title {
 color: #FFFFFF;
 font: bold 100% arial;
 margin: 3px 0 0 8px;
}

.product_holder p {
 margin: 2px 0 0 8px;
 height: 5px;
 line-height: 1.3em;
}
  
.product_holder span {
 position: relative;
 left: 8px;
 top: 43px;
 font-weight: bold;
}

* HTML .product_holder span {
 position: relative;
 left: 8px;
 top: 4px;
 text-decoration: none;
}

.product_holder a:hover {
 background-color: #a99e81;
 text-decoration: none;
}

.product_holder a, img {
 border: none;
}

#photo_gallery {
  float: left;
  margin: 0 20px 0px 0;
  width: 265px;
  height: 317px;
}
	
#photo_gallery img {
 float: left;
 margin: 1px 1px 0 0;
 padding: 0;
}

#photo_gallery img.last {
 margin: 1px 0 8px 0;
 padding: 0;
}

#product_description {
 float: right;
 width: 500px;
}

/* ITEM PAGE FORM FORMATTING START */

#product_properties {
 float: right;
 margin: 10px 0px;
 padding-right: 155px;
 width: 335px;
 font: normal 11px Century Gothic;
}

.col1 {
 text-align: right;
 width: 85px;
 height: 25px;
 margin: 3px 0 0 0;
 float: left;
 margin-right: 2px;
 color: #613f2c;  
}

.col2 {
 width: 195px;
 height: 25px;
 display: block;
 float: left;
 margin: 0;
}

span.input_hidden {
 line-height: 2em;
}

div.row {
 clear: both;
}

#item_container {
 position: relative;
 min-height: 270px;
 height: auto!important;
 height: 270px;
}

.product_holder_container {
 padding-left: 190px;
}

.greyboldtext, .search_form select {
 font: bold 11px Century Gothic;
 color: #613f2c;
}

.out_of_stock {
 height: 31px; 
 color: #CC0000; 
 margin: 0px 5px;
}