/*

	Developer Skin theme by James Young - www.cubecartstyle.com
	
	The aim of this skin is to provide a valid, well structured XHTML/CSS 
	skin for those of us who develop CubeCart skins. 
	
	I have tried to strip out any unnecessary XHTML from the templates and 
	where applicable, re-written large parts of it to make it better as the
	CubeCart standard is not great and uses tables for layout in many places
	such as forms when it's not necessary - these have been replaced with
	labels and divs.
	
	To provide some basic styles and layout, the following have been set up
	below and you're more than welcome to tweak and style it how you want.
	Hopefully it's a useful baseline to work from.
	
	This skin is provided free of charge and with no official support as it
	is assumed you know what you're doing! It's just a quick start skin so 
	you have some decent markup to work with!
	
	CONTENTS OF CSS:
	
	01. Global layout styles
	02. Content layout styles
	03. Homepage styles
	04. Category page styles
	05. Product detail pages
	06. Checkout Page styles
	07. Footer styles

*/

/* 01 START : Global layout styles */
* {
	padding: 0;
	margin: 0;
}

html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:#D6F3A3 url('../../../../images/background.jpg') top repeat-x;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Helvetica, Arial, sans-serif;
	font-size:13px;
	color:#000;
}

p {
	line-height: 145%;
	color: #444;
}

a {
	text-decoration: underline;
}

a img {
	border: 0;
}

a:hover {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {

}

ul, ol {
	padding: 0;
	margin: 0;
}

li {
	list-style-type: none;
}

div {
	position: relative; /* So you can use absolute positioning on any div in the rest of the site */ 
}
/* 01 END : Global layout styles */



/* 02 START : Content layout styles */
#site-wrap,
.txtCopyright,
#welcomebrand {
	width: 966px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

#site-wrap {
	margin: 0;
	padding:1em 1em 5em; /* bottom padding for footer */
}

#header-bar {
	float: left; 
	width: 960px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.box {
/* .box is the wrapper for each box on the site, eg. Categories, mailing list etc. To position each, simply append the ID of each one to the .box class */
	margin-bottom: 5px;
	width: 200px;
	float: left;
}

p.box-title {
	font-weight: bold;
	font-size: 14px;
	margin: 0;
}

.box#search {
	float: right;
}

.box#categories {

}

.box#categories ul .li-nav span {
	
}

.box#random-product {

}

.box#info {
	display: none;
}

.box#currency {
	display: none;
}

.box#language {
	display: none;
}

.box#basket {
	float: right;
	margin: 0 20px;
	width: auto;
}

.box#session {
	width: auto;
}

.box#popular-products {

}

.box#sale-items {

}

.box#mailing-list {

}

.box#skin-select {

}

.box#cart-navigation {

}

#left-col {
	float: left; 
	width: 200px;
	z-index: 1;
}
#left-col p.box-title {
	font-weight: bold;
	font-size: 14px;
	margin: 0;
	background: #72AA00 url('../../../../images/sidebartitle.jpg') top no-repeat;
	color: #FFF;
	padding-left: 5px;
}
#left-col ul, #left-col ol {
	border: 1px solid #72AA00;
	border-top: 0;
	padding: 4px;
}
#left-col ul li ul, #left-col ol li ul {
	border: 1px solid #72AA00;
	background: #eee;
	padding: 4px;
}

#main-col {
	float: left;
	width: 735px;
	margin: 0 0 15px 10px;
}

/* START : Flyout menu */

#mainmenu-nav {

}

.li-nav a {
	display: block;
}

.li-nav a:hover, 
.li-nav .ul-nav a:hover {

}

.ul-nav, 
.li-nav {
	display: block;
}

.li-nav .ul-nav  {
	display: none;
	position: absolute;
	margin-left: 154px;
	margin-top: -15px;
	z-index: 99;
	width: 230px;
	background: #fff;
	z-index: 100;
	height: 400px;
	overflow: auto;
}

.li-nav .ul-nav a {
	
}

.li-nav .ul-nav a:hover {

}

a.hassubmenu {
	background-image: url(../styleImages/more.gif);
	background-repeat: no-repeat;
	background-position: 180px 6px;
	background-color: #fff;
}
/* END : Flyout menu */
/* 02 START : Content layout styles */



/* 03 START : Homepage styles */
#latest-products-wrap {
	overflow: hidden;
	width: 770px;
}

.latest-products {
	border: 1px solid #eee;
	float: left;
	display: inline;
	width: 208px;
	height: 168px;
	padding: 15px;
	margin: 0 15px 15px 0;
	text-align: center;
}

.latest-products p {
	text-align: center;
}

.latest-products p a {
	font-size: 14px;
	display:block;
}

.latest-products a img {
	margin: 0 0 15px 0;
}
/* 03 START : Homepage styles */



/* 04 START : Category page styles */
.category-item { 
	margin-bottom: 10px;
	overflow: hidden;
	background: #eee;
	border: 1px solid #ddd;
	padding: 5px;
}

.category-item div {
}

.category-item .product-image {
	overflow: hidden;
	margin-right: 10px;
	padding-top: 10px;
	text-align: center;
}

.category-item .product-detail {

}
.category-item .product-detail p {
	padding: 0 10px;
	margin: 0;
}

#subCats {
	display: block;
	overflow: hidden;
}

.subCat {
	float: left;
	display: inline;
}
/* 04 END : Category page styles */



/* 05 START : Product detail pages */
#related-products {
	overflow: hidden;
}

#related-products div {
	float: left;
	display: inline;
	width: 150px;
	margin-right: 10px;
	text-align: center;
}
/* 05 END : Product detail pages */



/* 06 START : Checkout Page styles */
.cartProgress ol li {
	display: inline;
}

.invoice-address,
.delivery-address {
	float: left;
	width: 375px;
	display: inline;
	margin: 20px 0;
}

.address-title {
	font-size: 14px;
	font-weight: bold;
}
/* 06 END : Checkout Page styles */



/* 07 START : Footer styles */
.clearing {
	clear: both;
}

.txtCopyright {
	clear: both;
	text-align: right;
	margin-top: -20px;
	font-size: 95%;
	color: #333333;
}
/* 07 END : Footer styles */

a {
	color: #3a639a;
}

h1 { 
	font-size: 150%;
	color: #4D7100;
	margin: 0 0 10px;
}

h2 { 
	font-size: 130%;
	color: #578200;
	margin: 0 0 10px;
}

p { 
	line-height:1.5; 
	margin:0 0 1em;
}

div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:966px;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treated as min-height*/
	min-height:100%; /* real browsers */
	background: #FFFFFF;
}

div#header {
	background: #99BF2F;
	padding-top: 16px;
}
	div#header img {
		display: block;
	}
	
div#menubar {
	height: 35px;
	width: 966px;
	background: #FFFFFF url('../../../../images/menubar.gif') center no-repeat;
}
	div#menubar ul {
		list-style-type: none;
		margin: 0; 
		padding: 8px 0 0 8px;
		font-weight: bold;
	}
		div#menubar li {
			float: left;
			list-style-image:none;
			list-style-position:outside;
			list-style-type:none;
			font-size: 14px;
		}
			div#menubar li a {
				color: #FFFFFF;
				text-decoration: none;
				padding: 8px 15px 11px;
			}
			div#menubar li a:hover {
				background: url('../../../../images/menuhover.jpg') repeat-x;
			}

div#footer {
	position:absolute;
	bottom:0; /* stick to bottom */
	height: 35px;
	width: 966px;
	background: url('../../../../images/footer.gif') center no-repeat;
}
	div#footer p {
		color: #333333;
		text-align: center;
		font-size: 95%;
		line-height: normal;
		margin: 0;
	}
	div#footer a {
		color: #333333;
		text-decoration: underline;
	}
	
	div#BreadCrumb { border: 1px solid #72AA00; background: #eee; margin-bottom: 5px; padding: 2px; }
	div#BreadCrumb a { text-decoration: none; }
	
	#checkout-basket { border-collapse: collapse; border: 1px solid #ddd; }
	#checkout-basket tr {
	background: #f7f7f7;
	border-bottom: 1px solid #ddd;
	}
	#checkout-basket td, #checkout-basket th {
	padding: 3px;
	}
	
	.profileform input, select {
		padding: 3px;
	}