/* This .css file is for all classes */
/* Comments about each is inside each class/element */
/* Contents
	1.0 General formating
	2.0 Menu formating
	3.0 Table formating
	4.0 Form formating
	5.0 Header formating
	6.0 Product layout
	7.0 Cart layout
	8.0 Left menu layout
	9.0 Footer layout
	
	COLORS USED - Keep a note of all colors used
	#
	#
	#
	
	You can find this in action at http://beta.ecommo.com/home/designer
*/

/*////////////////////////////////////////////
KEEP ALL FONT SIZES IN EM RATHER THAN PX

ALL IMAGES NEED TO HAVE THE RESELLER ID PRECEDDING IT => img/reseller_id/img_name
RESELLER ID WILL BE PROVIDED BY ECOMMO IF REQUIRED
////////////////////////////////////////////*/

/* IMPORTANT, RESET.CSS IS ALWAYS CALLED AND RESETS ALL ELEMENTS TO 0 . THIS MEANS THAT EACH ELEMENT HAS TO BE DEFINED FROM SCRATCH. THIS IS SO EACH BROWSER DOESN'T IMPLEMENT THEIR OWN DEFINITION OF EACH ELEMENT. */

/* IMPORTANT, DO NOT UNDER ANY CIRCUMSTANCES FORMAT CSS INLINE. DEATH BY LEARNING WHITESPACE (http://compsoc.dur.ac.uk/whitespace/index.php)

/* 1.0 General formating */

h1 {
	/* Largest title tag */
	/* Uses: In header div for name of shop */
}
legend {
	/* used as the title for each content page */
	/* always preceded by class .h2_layout */
	background:#5f5f5f;
	background-position: 10px 22px;
	padding:4px;
	text-align:left;
	color:#fff;
	font-size:1.5em;
	padding:20px 0 0 40px;
	height:40px;
	margin:0 0 20px 0;
}

.h2_layout {
	/* Used to surround h2 element tags */
	/* <div class="h2_layout"><h2>Title of page</h2></div> */
}


h3,.newsContent {clear:both;padding:5px; margin:10px;}
.signup_button{margin:10px;}

h4 {
  /* Used for warning messages but currently unused in system */	
padding:10px;font-weight:bold;text-align:center;color:#550c03;font-variant:small-caps;
}

h5 {
	color:#0081c7;
}

p {
 /* All paragraphs are surrounded by p elements. This affects the entire website. */
	padding:10px;
	
}

a {
 /* This affects all active links in website */
	text-decoration:none;
	color:#3f3f3f;
}

a:hover {
	/* This affects all active links in website when mouse is hovered over them */
	text-decoration:none;
	color:#550c03;
}

.button { 
	/* Used for the surrounding class of element <a> */
}

strong {
	/* element rewriten from scratch to represent the classic <b> tag */
	font-weight:bold;
}

.message {
 	/* Message passed to user if mistake has been made -> placed in crumbtrail */
}

hr {
	/* horizontal line */
	color:#ccc;
}

.innermain {
	background:#fff;
	border:1px solid #fff;
}

ul.home_list {margin:10px;list-style-type:none;list-style-position:inside;}
ul.home_list li {margin:10px 0;float:left;width:33%;text-align:center;}
ul.hyList {margin:10px;list-style-image:url('../../img/efdb9dbb4624cefcdf5e5621a851bd513192de8dd77e288c5230a7a02f2b3eea9c34fab1dfc99c6b/website/min_tree(1).png');list-style-position:inside;}
ul.hyList li {margin:10px 0;}
/* 2.0 Menu formating */

.menu_ul {text-align:left;position:relative;}
.menu_li {display:inline;padding:0 20px;}
.menu_li a, #header  {font-weight:bold;}
.menu_li a:hover {color:#550c03;}



/* 3.0 Table formating */

table {
	/* Global css for the table element used in checkout and account. IMPORTANT** tables should only be used for display specific data sets and not for general layout. Punishment for use = 100 pushups while eating hotdogs. */
	width:100%;
	margin:0 0 20px 0 ;
}

th {
	/* th is the table header element used in checkout and account. See table element. */
	text-align:center;
	padding:5px;
	background:#0081c7;
	color:#fff;
}

td {
	/* td is the table down element used in checkout and account . See table element. */
	padding:5px;
	border:solid #ccc;
	border-width:0 0 1px 0;

}

.bottom_border {
	/* bottom_border is the class that is placed on many <td> elements to help with table layout -> It would be preferable if this could be ignored. UP to you. */
}

.customer_order {
	/* Customer_order is the class attached to the <table> element inside checkout to create different looking tables. This isn't nesseccary and obviously .customer_order tr{},.customer_order th {}, .customer_order td {} can all be used */
}

/* 4.0 Form formating */

fieldset {
	/* fieldset element is the element that surrounds forms to create a border perhaps, your call. */
	margin:0 0 20px 0;
	padding:10px;
}

legend {
	/* Used for the labels on forms such as the contact us page */

}

form {
	/* form element is the element that encapsulates forms, always present in forms but not neccssary */
}


label {
	/* label is the element that incapulates the input descriptions */
	display:block;
	font-weight:bold;
}
input {
	/* input is the element that controls all inputs except select and option */
	margin:0 0 20px 0;
	
}
select {
	/* select is the element that controls drop down menus */
	margin:0 0 20px 0;
}

option {
	/* option is the element that controls the lists inside of select elements */
}
input[type=checkbox] {
	/* Specific elements for input type checkbox */
	float:left;
	margin:0 20px 0 0;
}

.submit {
	/* Specific elements for input type submit */

	margin:20px 0 0 0;
}

/* 5.0 Header formating */

.header_inner {float:right;width:180px;height:140px;padding:12px 0 0 120px;font-size:12px;font-weight:normal;}
#header h1 { 
	/* This is possibly redundant as the element h1 is taken care of at the top of the page and the element is only used in the header - a just in case set */
}

.header_strap {
	width:300px;
	height:40px;
	font-size:1.5em;
	padding:10px 30px 30px 30px;
}

.header_strap a {
	color:#fff;
}
/* search */

#header_search {
	float:right;
	width:230px;
}

#header_search form, #header_search fieldset, #header_search form div {
	padding:0;
	margin:0;
}

#header_search  input {
	float:left;
}

#header_search input[type=submit] {
	margin:1px 0 0 10px;
	width:60px;
}

/* search results */

.search_return {
	padding:5px;
	margin:0 0 10px 0;
}
.search_image {
	width:150px;
	height:150px;
	text-align:center;
	float:left;
}
.search_content_hold {
	float:left;
	margin:0 0 0 20px;
}

.search_title, .search_content {
	margin:0 0 5px 0;
}

.mini_checkout_button, .mini_checkout_info {
	height:20px;
	clear:left;
	float:left;
}

.mini_checkout_button a {
	color:#fff;
	padding:0 0 0 22px;
	text-decoration:underline;
}

/* 6.0 Product layout */

/*product showcase */

.product_showcase {
	padding:15px;
}

.showcaseImg img {
	width:200px;
	height:200px;
	float:left;
	margin:0 20px 0 0;
}
.noImage {
	width:200px;
	height:200px;
	float:left;
	margin:0 20px 0 0;
}

.showcaseInfo {
	float:left;
	width:347px;
}
showcaseTable {
	height:200px;
}

.showcaseTitle {

	padding:10px 0;
	text-align:center;
	color:#0081c7;
	font-weight:bold;
	margin:0 0 10px 0;
	font-size:1.2em;
}

.showcaseTitle a {
	color:#0081c7;
}
.showcaseContent {
	margin:0 0 10px 0;
}

.showcaseTable {
	width:100%;
}

.showcaseTable th {
	background:#5f5f5f;
	text-align:center;
	padding:5px;
	color:#fff;
}

.showcaseTable td {
	text-align:center;
	padding:5px;
	color:#0081c7;
}
/* Other products */
.container {
	width:298px;
	float:left;
	margin:15px 0;
}

.container img {
	width:64px;
	height:64px;
	border:1px solid #efefef;
	float:left;
	margin:0 15px;
	
}

.containerTitle {
	color:#0081c7;
	float:left;
	width:143px;
	margin:0 0 20px 0;
}

.containerTitle a {
	text-decoration:underline;
	color:#0081c7;
}

.containerPrice {
}

.groupContainer {
	width:227px;
	float:left;
	margin:20px 0;
	background:#fff;
	height:250px;
	text-align:center;
	padding:5px;
	position:relative;
	border:1px solid #ccc;
}

.groupContainer img {
	width:100px;
	height:100px;
}

.groupContainerContent {
	text-align:left;
	margin:0 0 24px 0;
}
.groupContainerLeft {
	margin:20px 22px 0 0;
}

.container img {
	width:100px;
}

.noSmallImage {
	width:100px;
	height:100px;
}



.containerLink {
	position:absolute;
	bottom:0;
	left:0;
	width:140px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	padding:5px;
	background:#5f5f5f;
}

.groupContainerLink {
	position:absolute;
	bottom:0;
	left:0;
	width:227px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	padding:5px;
	background:#5f5f5f;
}

.containerLink a, .groupContainerLink a, .newsLink a, .testimonialLink a {
	color:#fff;
}



.home_content {
	clear:left;
	padding:20px 0 0 0;
}

.productMainImage {
	border:1px solid #ccc;
	width:350px;
	text-align:center;
	margin:20px 20px 20px 0;
	float:left;
}

.productSmallImage {
	float:left;
	width:116px;
	margin:20px 0;
	border:1px solid #ccc;
	text-align:center;
	cursor:pointer;
	
}

.productSmallImage img {
	width:116px;
}

.add_to_basket {
	width:450px;
	margin:auto;
}

.add_to_basket select, .add_to_basket input, .add_to_basket label{
	float:left;
	margin:20px;
}
.add_to_basket label {
	padding:2px;
}



.do_next {
	border:1px solid #ccc;
	float:left;
	padding:10px;
	margin:20px 0 0 0;
	width:203px;
	text-align:center;
}

.do_nextLeft {
	margin:20px 50px 0 0;
	
}
/* 7.0 Cart layout */

.cart_title {
	/* this is the class that controls the cart title */
}

.cart_product {
	/* this is the class that contorls the layout of the product listings inside the cart */
	padding:5px;
}

.cart_checkout {
	/* This is the class that controls the goto checkout button */
}

.cart_button {
	border:1px solid #ccc;
	width:140px;
	background:url('../../../img/centralImg/edition3/template4/bg_strips.png');
	text-align:center;
	margin:auto;
}

/* 8.0 Left Menu Layout */


. tlc{position:absolute;background:url('../../img/7e320f9e150a5e682a6d50cbece04f90aab6ff57ee9bec88e701a79bf17cdfcf71ebe0cb4a6fb54a/website/tlc.png');height:10px;width:10px;top:0;left:0;}
. trc{position:absolute;background:url('../../img/7e320f9e150a5e682a6d50cbece04f90aab6ff57ee9bec88e701a79bf17cdfcf71ebe0cb4a6fb54a/website/trc.png');height:10px;width:10px;top:0;right:0;}
. blc{position:absolute;background:url('../../img/7e320f9e150a5e682a6d50cbece04f90aab6ff57ee9bec88e701a79bf17cdfcf71ebe0cb4a6fb54a/website/blc.png');height:10px;width:10px;bottom:0;left:0;}
. brc{position:absolute;background:url('../../img/7e320f9e150a5e682a6d50cbece04f90aab6ff57ee9bec88e701a79bf17cdfcf71ebe0cb4a6fb54a/website/brc.png');height:10px;width:10px;bottom:0;right:0;}
.left_title, .cart_title, .newsTitle, .testimonialTitle,h2,.faqTitle {padding:10px;font-weight:bold;text-align:center;color:#550c03;font-variant:small-caps;font-size:16px;border:solid #ddd;border-width:0 0 1px 0;}
.left_inner {background:#fff;margin:0 0 10px;position:relative;}




.page_ul,.news_ul,.faq_ul {
	/* this is the ul that lists all the product categories */
	padding:10px;
	font-variant:small-caps;
	list-style-type:none;
	
}

.page_li,.news_li,.faq_li {
	/* This class controls the li of the left menu */
	border:solid #ddd;
	border-width:0;
	padding:5px 0;
	font-weight:bold;
}

.news_li_content {font-variant:none;font-weight:normal;}
.page_li a,.news_li a,.faq_li a {
}

.page_li a:hover,.news_li a:hover,.faq_li a:hover {
	text-decoration:underline;
}
/* Footer layout */


.booked {
	background:#FF6666;
}

.available {
	background:#7BABF7;
}

.book_key {
	width:100px;
	text-align:center;
	padding:5px;
	float:left;
		margin:0 20px 0 0;
}


.faqCategories{margin:10px;}
.faqItems {padding:5px 20px 20px 20px;float:left;}
.faqTitle {margin:10px;font-size:2em;}
.faqInfoContainer{clear:both;}

#flash_top {position:relative;z-index:0;}


/*////////////////////
/
/ Drop Down Menu
/
/////////////////////*/

.topLinkLi {position:relative;}
.dropMenu {position:absolute;top:15px;left:0;z-index:1000;display:none;background:#ddd;width:275px;}
.dropMenuOption{margin:20px;position:relative;border-bottom:1px solid #eee;}
.topLinkLi:hover > .dropMenu{display:block;}