/*

	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;
}



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: 960px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

#logo {
	float: left;
	padding: 0 10px 0 0;
	margin: 0;
}

#logo p a {
	float: left;
	height: 80px;
	width: 215px;
	overflow: hidden;
	clear: both;
	margin: 0 auto;
	/* SKIN VARIABLE IS cAsE SeNsItIvE */
	background: url(../../../images/getLogo.php?skin=Developer-Skin) left top no-repeat;
}

#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;
}

.box#search {
	float: right;
}

.box#siteDocs {
	width: 960px;
	margin-bottom: 0;
}

.box#siteDocs ul li {
	display: inline;
	list-style-type: none;
}

.box#siteDocs ul li a {
	margin-right: 10px;
}

.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;
	width: auto;
}

.box#session {
	float: right;
	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;
}

#main-col {
	float: left;
	width: 750px;
	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: 160px;
	background: #fff;
	z-index: 100;
}

.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: 120px 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: 25px;
	overflow: hidden;
}

.category-item div {
	float: left;
	display: inline;
}

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

.category-item .product-detail {
	width: 630px;
}

#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 {
	border-top: 1px solid #eee;
	clear: both;
	text-align: right;
}
/* 07 END : Footer styles */