/*

Cameo Fine Art 2009 (layout) style sheet
===============================================

Author:			John Metcalfe - john@discoverydesign.co.uk
Copyright:		2009 Discovery Design Ltd.
Description: 	Layout stylesheet for Cameo Fine Art
Last Edit:		11/10/2009 by John Metcalfe

*/

/* GLOBAL
=============================================== */
body {
margin: 				0px auto;
background: 			#f6f6f6 url(../styleImages/backgrounds/wood.jpg) repeat-x;
}

/* PAGE CONSTRUCTION - MAIN ELEMENTS
=============================================== */
#pageSurround {
margin: 				0px auto;
width: 					1000px;
}

#leftcolumn {
float: 					left;
width: 					325px;
}

#rightcolumn {
float:					left;
width:					675px;
}

/* PAGE CONSTRUCTION - LEFT COLUMN
=============================================== */
#topHeader {
background: 			url(../styleImages/backgrounds/hangingsign2.png) no-repeat;	
_background-image: 		url(../styleImages/backgrounds/tophanger.gif);
height: 				274px;
margin: 				0px auto;
width: 					318px;
}

.searchinput {
float:					left;
}

#searcharea {
background:				url(../styleImages/backgrounds/searchform.png) no-repeat;
height:					48px;
margin:					13px 0 0 10px;
width:					307px;
}

#searcharea button {
background:				url(../styleImages/backgrounds/searchbutton.gif) no-repeat;
border:					none;
float:					left;
height:					41px;
margin:					3px 0 0 4px;
width:					59px;
}

.searchareabox {
background:				none;
border:					none;
color:					#FFFFFF;
font: 					normal bold 16px Arial, Helvetica, sans-serif;
height:					35px;
margin:					0;
padding:				13px 0 0;
text-indent:			9px;
width:					240px;
}

#sessionarea {
color:					#FFFFFF;
font: 					normal bold 14px Arial, Helvetica, sans-serif;
margin: 				10px 0 0 24px;
width:  				300px;
}

#searchform {
margin:  				-4px 0 5px 0;
}

#categoryarea {
margin:					13px 0 0 10px;
}

#categoryareaheader {
background:				url(../styleImages/backgrounds/categoryheader.png) no-repeat;
height:					43px;
width:					309px;
}

/* PAGE CONSTRUCTION - RIGHT COLUMN
=============================================== */
.topcartarea {
margin:					0 auto 0 352px;
}

.topcartboxitems {
background:				url(../styleImages/backgrounds/topcartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					left;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					37px;
padding:				4px 0 0;
margin:					0 10px 0 0;
text-align:				center;
width:					94px;
}

.topcartboxitems span, .productaddtocart span, .productsubmit span, .cartbuttons span, .cartbuttonsother span, .carttopbutton span, .registeraccount span, .normalbutton span, .cartbuttonsleft span {
font-size:				10px;
line-height:			7px;
text-transform:			uppercase;
}

#navigationarea {
margin:					83px 0 0 15px;
}

#navigationmenu {
color:					#fffcbe;
font: 					normal bold 24px Arial, Helvetica, sans-serif;
height: 				35px;
line-height: 			34px;
margin:					83px 0 0 -24px;
width: 					685px;
}

.productaddtocart {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					left;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					37px;
padding:				4px 0 0;
margin:					-8px 10px 0;
text-align:				center;
text-decoration: 		none;
width:					94px;
}

.registeraccount {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					right;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					37px;
padding:				4px 0 0;
margin:					-8px 2px 2px;
text-align:				center;
text-decoration: 		none;
width:					94px;
}

.cartbuttons {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					left;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					37px;
padding:				4px 0 0;
margin:					0px 3px 0;
text-align:				center;
text-decoration: 		none;
width:					93px;
}

.normalbutton {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					43px;
padding:				0;
margin:					0px 3px 3px;
text-align:				center;
text-decoration: 		none;
width:					93px;
}

.cartbuttonsleft {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					left;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					37px;
padding:				4px 0 0;
margin:					0px 3px 3px;
text-align:				center;
text-decoration: 		none;
width:					93px;
}

.cartbuttonsother {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					right;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					37px;
padding:				4px 0 0;
margin:					0px 3px 3px;
text-align:				center;
text-decoration: 		none;
width:					93px;
}

.carttopbutton {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
float:					left;
height:					37px;
padding:				4px 0 0;
margin:					0px 3px 3px;
text-align:				center;
text-decoration: 		none;
width:					124px;
}

.productsubmit {
background:				url(../styleImages/backgrounds/cartbox.png) no-repeat;
border:					1px solid #760E02;
color:					#FFF;
float:					left;
font: 					normal bold 20px Arial, Helvetica, sans-serif;
height:					43px;
padding:				0;
margin:					-8px 10px 0;
text-align:				center;
text-decoration: 		none;
width:					94px;
}

.contentheadingpanel, .categoryareaheaderlost {
background:				url(../styleImages/backgrounds/contenthead.png) no-repeat;
border-left:			1px solid #760E02;
border-right:			1px solid #760E02;
height:					41px;
width:					666px;
}

.contentlargebox {
background:				#FFF;
border-bottom:			1px solid #760E02;
border-left:			1px solid #760E02;
border-right:			1px solid #760E02;
float:					left;
padding:				10px;
width:					646px;
}

.cartlargebox {
background:				#FFF;
border-bottom:			1px solid #760E02;
border-left:			1px solid #760E02;
border-right:			1px solid #760E02;
float:					left;
padding:  				10px;
width:					650px;
}

.cartlargeboxgw {
background:				#FFF;
border-bottom:			1px solid #760E02;
border-left:			1px solid #760E02;
border-right:			1px solid #760E02;
float:					left;
padding:  				10px;
width:					646px;
}


.contentlargeboxdoc {
background:				#FFF;
border-bottom:			1px solid #760E02;
border-left:			1px solid #760E02;
border-right:			1px solid #760E02;
float:					left;
margin:					0 0 0 -11px;
padding:				10px;
text-align:				justify;
width:					646px;
}

.contentsmallbox {
background:				#FFF;
border-left:			1px solid #610F01;
border-right:			1px solid #610F01;
font: 					normal 12px "Lucida Grande","Lucida Sans Unicode",verdana,lucida,sans-serif;
padding:				10px;
width:					646px;
}

.latestprodsbox {
float:					left;
height: 				250px;
margin:					0 3px 3px 12px;
overflow: 				hidden;
position: 				relative;
text-align: 			center;
width: 					200px;
}

.productimage {
margin:					21px auto 0 0;
text-align:				center;
}

.productdescription, .productreviews {
padding:		 		10px;
}

.productoptions {
float:					right;
margin:					-4px -23px 26px 0;
padding:				6px 6px 0 26px;
width:					300px;
}

.prodquanity {
background:				#FFF;
border:					2px solid #760E02;
float:					left;
text-align:				center;
padding:				5px;
}

.prodbuttons {
float:					left;
margin:					-25px 0 0 129px;
}

/* PAGE CONSTRUCTION - FOOTER
=============================================== */
#outerfooterarea {
background: 			#f6f6f6 url(../styleImages/backgrounds/woodfooter.jpg) repeat-x;
clear:					both;
height:					332px;
margin:					0 auto;
}

#innerfooterarea {
margin:					0 auto;
width:					1000px;	
}

#footerusefulinfo {
background:				url(../styleImages/backgrounds/footerusefulinfo2.png) no-repeat;
float:					left;
height:					69px;
margin:					27px 0 0 12px;
text-indent:			-999px;
width:					222px;
}

#mailinglistarea {
background: 			#f6f6f6 url(../styleImages/backgrounds/mailinglist.gif) no-repeat;
clear:					both;
float:					left;
height:					179px;
margin:					18px 0 0 10px;
width:					333px;
}

.mailinglistinput {
float:					left;
}

#mailinglistinnerarea {
background:				url(../styleImages/backgrounds/searchform.png) no-repeat;
height:					48px;
margin:					16px 0 0 13px;
width:					307px;
}

#mailinglistinnerarea button {
background:				url(../styleImages/backgrounds/emailbutton.gif) no-repeat;
border:					none;
float:					left;
height:					41px;
margin:					3px 0 0 4px;
width:					59px;
}

.mailinglistbox {
background:				none;
border:					none;
color:					#FFFFFF;
font: 					normal bold 16px Arial, Helvetica, sans-serif;
height:					35px;
margin:					0;
padding:				13px 0 0;
text-indent:			9px;
width:					240px;
}

#cardsecurearea {
background: 			url(../styleImages/backgrounds/mailinglist.gif) no-repeat;
float:					left;
height:					179px;
margin:					18px 0 0 6px;
width:					333px;
}

#usefullinksarea {
background: 			#f6f6f6 url(../styleImages/backgrounds/mailinglist.gif) no-repeat;
float:					left;
height:					179px;
margin:					18px 0 0 6px;
width:					302px;
}

.footercards {
margin:					2px 0 0 19px;
}

.footerlock {
margin:					-2px 0 0 17px;
padding:				0 4px 0 0
}

#therealbottomfooter {
clear:					left;
color:					#FFFFFF;
margin:					0 auto;
padding:				1px 0 0 20px;
width:					1000px;
}

/* PAGE CONSTRUCTION - CHECKOUT
=============================================== */
.colLeftCheckout {
float: 					left;
left:  					0px;
padding-left: 			15px;
padding-right: 			5px;
position: 				relative;
width: 					160px; 
}

.colMainCheckout {
float: 					left;
position: 				relative;
width: 					100%;
}

/* PAGE CONSTRUCTION - UNSURE
=============================================== */
.pagination {
padding-top: 			5px;
padding-bottom: 		5px;
text-align: 			right;
}

#subCats {
background:				#FFFFFF;
float:					left;
margin:					0 auto 0 -10px;
padding:				3px;
position:				inherit;
text-align:				center;
width:					269px;
}

.subCat {	
float: 					left;
padding: 				8px;
position:				inherit;
text-align: 			center;
width: 					110px;
}

.regSep{
border-top:  			1px solid #cccccc;
border-bottom:  		1px solid #cccccc;
margin: 				10px 0px 10px 0px;
padding:  				10px 0px 10px 0px;
}

#imgThumbSpace{
line-height: 			0px;		
}
#imgThumbSpace img, .latestProds img {
	padding: 5px;
	border: 1px solid #760E02;	
}

/* FORMS, UL, LI
=============================================== */

#mainmenu-nav {
	list-style: none;
	list-style-type: none;
	margin: 0px;
}

.li-nav a {
	background-color:#FFFFFF;
	border-left:1px solid #760E02;
	border-right:1px solid #760E02;
	color:#830D0D;
	display:block;
	font-size:16px;
	font-weight:bold;
	height:42px;
	line-height:37px;
	margin:0;
	padding:2px 1px;
	text-decoration:none;
	text-indent: 11px;
	width:305px;
}

.li-bnav a {
	background-color:#FFFFFF;
	border-bottom:1px solid #760E02;
	border-left:1px solid #760E02;
	border-right:1px solid #760E02;
	color:#830D0D;
	display:block;
	font-size:16px;
	font-weight:bold;
	height:42px;
	line-height:37px;
	margin:0;
	padding:2px 1px;
	text-decoration:none;
	text-indent: 11px;
	width:305px
}

.li-nav a.odd {
	background-color:#f7eded;
	border-left:1px solid #760E02;
	border-right:1px solid #760E02;
	color:#830D0D;
	display:block;
	font-size:16px;
	font-weight:bold;
	height:42px;
	line-height:37px;
	margin:0;
	padding:2px 1px;
	text-decoration:none;
	text-indent: 11px;
	width:306px;
}

.li-nav a:hover {
	background-color: #f7eded;
}

.ul-nav, .li-nav, .li-bnav {
	display: block;
	list-style: none;
}

.ul-nav {
	width: 140px;
	padding: 0px;
}

.li-nav, .li-bnav {	
	float: left;
}

.li-nav .ul-nav {
	display: none;
	position: absolute;
	margin-left: 100px;
	margin-top: -19px;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	border-top: 4px solid #70cdcc;
	z-index: 99;
}

#usefullinksarea ul {
font-size:12px;
font-weight:bold;
list-style: none;
list-style-type: none;
margin: 10px 0 0;	
}

#usefullinksarea ul li {
background: url(../styleImages/backgrounds/link.png) no-repeat;	
margin:0 0 10px 10px;
padding:0 0 0 20px;	
}

a.hassubmenu {
	background-image: url(../styleImages/more.gif);
	background-repeat: no-repeat;
	background-position: 130px 6px;
}