/*-----------------------------------------------------

	CodePress.co.uk - [Name of Site]
	
	Browser test complete:
	[Example below of the browsers to be tested in and confirmed correct -- remove this line]
	Internet explorer/Win: 6+ 
	Firefox: 1.5+
	Opera: 8.51+
	Safari: 2.0+
	[not required to test in, but good if you have them available -- remove this line]
	iCab: 3.0+
	Camino: 1.0+
	Netscape browser: 8.5.1+
	Mozilla: 1.7.0+
	
------------------------------------------------------*/

@import url("reset.css");

body {font:62.5% sans-serif; background:#111111 url(../images/bkg/body.png) repeat-y center top;}
	#skiplinks {position:absolute; left:-9999px;}
	
	#wrapper {width:740px; margin:0 auto; padding-left:20px;}
		
		#header {width:720px; height:140px; margin-bottom:0.9em; border-bottom:1px solid #E1E1E1;}
			
			#header a {float:right; margin:21px 0 0 0;}
			
			#header ul {float:left; width:200px; margin:20px 0 0 1px;}	
				#header ul li {display:block; height:23px; margin-bottom:13px;}
					#header ul li a {float:none; display:block; height:26px; text-indent:-9999px; margin:0;}
					
					#header ul li#nav-home a {width:90px; background:url('../images/nav-sprites.png') no-repeat 0 0;}
						#header ul li#nav-home a:hover {background-position:-200px 0;}
						#home #header ul li#nav-home a {background-position:-400px 0;}
						
					#header ul li#nav-mens a {width:145px; background:url('../images/nav-sprites.png') no-repeat 0 -36px;}
						#header ul li#nav-mens a:hover {background-position:-200px -36px;}
						.mens #header ul li#nav-mens a {background-position:-400px -36px;}
						
					#header ul li#nav-womens a {width:190px; background:url('../images/nav-sprites.png') no-repeat 0 -72px;}
						#header ul li#nav-womens a:hover {background-position:-200px -72px;}
						.womens #header ul li#nav-womens a {background-position:-400px -72px;}
			
		#masthead {width:720px; height:208px; border-bottom:1px solid #E1E1E1; background:#FFF url('../images/bkg/masthead.png') repeat-x 0 bottom;}
		
		#content {margin-bottom:3em; width:735px; overflow:hidden;}
		
		#footer {font:1.2em Georgia,Times,serif; color:#898989; width:720px; padding-top:1.1em; padding-bottom:1.1em; border-top:1px solid #E1E1E1;}
		
		
		
		/*	Homepage
		-------------------------------*/
		
		#intro {width:720px; margin-bottom:1em;}
		
		#home #header {margin-bottom:.9em;}
		
		
		
		/*	Listing
		-------------------------------*/
		
		.listing #header {margin-bottom:2.9em;}
		
		.listing #masthead {margin-bottom:1.6em;}
			.listing #masthead #filter {float:right; height:20px; margin:1.3em 0 0 0;}
				.listing #masthead #filter p {margin:0;}
				.listing #masthead #filter label {font:1.2em Georgia,Times,serif; color:#898989; padding-right:5px;}
				.listing #masthead #filter select {font:1.2em Georgia,Times,serif; color:#898989; width:150px;}
		
		.listing #content {margin-bottom:1.8em;}	
				
		.listing #categories {float:left;}
			.listing #categories li {padding-left:7px; margin-bottom:.7em;}
			.listing #categories li a {font:1.4em Georgia,Times,serif; color:#898989; text-decoration:none;}
			.listing #categories li a:hover {color:#a6d4ea;}
			
			.listing #categories li.selected {
	/*background:url('../images/marker/selected-category.png') no-repeat 2px 4px;*/
	padding-left:8px;
	border-left: 2px solid #a6d4ea;
}
				.listing #categories li.selected a {color:#0088bb;}
		
		
		.listing #catalogue {float:right; width:585px; padding-top:0.3em; overflow:hidden;} 
			.listing #catalogue .row {
	width:585px;
	margin:0 0 3em 0;
	overflow:hidden;
}
				.listing #catalogue div p {
	float:left;
	margin:0 15px 0 0;
	width: 180px;
}
					.listing #catalogue div p img {margin:0 0 .5em 0;}
					.listing #catalogue div p span {display:block;}
					
						.listing #catalogue div p span a {font:1.2em Arial, sans-serif; color:#0088bb; text-decoration:none;}
						.listing #catalogue div p span a:hover {text-decoration:underline; color:#a6d4ea;}
								
		
						
		/*	Detail
		-------------------------------*/
		
		.detail #masthead {height:3.8em; margin-bottom:1.5em;}
			.detail #masthead a {display:block; font:italic 1.2em Georgia,Times,sans-serif; color:#898989; padding:.5em 0 0 20px; background:url('../images/marker/back.png') no-repeat 0 .65em; text-decoration:none; margin-left:1em}
		
		.detail #content {margin-bottom:4.1em;}	
		
		.detail #detail-image {float:left; width:340px; margin-top:.4em}
			.detail #detail-image div {height:466px;}
				.detail #detail-image div.hidden {display:none;}
			.detail #detail-image ul li {float:left; overflow:hidden;}
				.detail #detail-image ul a {display:block; height:43px; width:170px; text-indent:-9999px; background:url('../images/button/switcher.png') no-repeat;}
				
				
				
					.detail #detail-image ul a.image {background-position:0 -43px;}
						.detail #detail-image ul a.image-hidden {background-position:0 0;}
					.detail #detail-image ul a.swatch {background-position:-170px -43px;}
						.detail #detail-image ul a.swatch-hidden {background-position:-170px 0;}
		
		
		
		
		.detail #description {float:right; display:inline; width:320px; margin-right:35px;}
			.detail #description h2 {font:3.0em Georgia,Times,serif; color:#0088bb; margin-bottom:.7em;}
			.detail #description h3 {font:1.6em Georgia,Times,serif; color:#0088bb; margin-bottom:.1em;}
			.detail #description p {font:1.2em/1.5em Arial,sans-serif; color:#626262; margin-bottom:1.5em;}
			
			.detail #description p.tag {margin-bottom:1.45em;}
			
			.detail #selector {}
				.detail #selector label {display:block; font:1.33em Georgia,Times,serif; color:#0088bb; margin-bottom:.1em;}
				.detail #selector select {width:300px; color:#626262;}

	
/* 
	Debug styles:
	
	a[href="#"] {background: lime;}
	a[href="404"] {background: lime;}
	a[href=""] {background: fuchsia;}
	
	*[align], *[valign], *[border], table[cellspacing], table[cellpadding], *[width], *[height], a[href^=”javascript:”], *[onload], *[onunload], *[onchange], *[onsubmit], *[onreset], *[onselect], *[onblur], *[onfocus], *[onkeydown], *[onkeypress], *[onkeyup], *[onclick], *[ondblclick], *[onmousedown], *[onmousemove], *[onmouseover], *[onmouseout], *[onmouseup]
	{outline:5px solid yellow;}

	img[width], img[height] {outline:0;}

	img {outline: 5px solid red;}
	img[alt][title] {outline-width: 0;}
	img[alt] {outline-color: fuchsia;}
	img[alt], img[title] {outline-style: double;}
	img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
	img[alt=""][title=""] {outline-style: dotted;}
	

	
	
	
	

	Sometimes a client will have our banners on their site. Here is the HTML and CSS to include;

	HTML:
	<a href="http://codepress.co.uk" title="Expertly Code Pressed" rel="external" id="cp_84bannerc">
		<span>Code Press - Professional front-end development</span>
	</a>
	
	CSS:
	#cp_84bannerc 			{width:84px; height:20px; display:block; background: url('../images/cp/cp-84x20-combo.png') no-repeat 0 0}
	a:hover#cp_84bannerc 	{background-position:0 -20px}
	#cp_84bannerc span 		{position:absolute; left:-9999px}	
*/