/* CSS Document */

/*  Custom definitions, for specific JohnFlood.com

Colours:
	burgundy #333
	purple #4935A2

*/

html * {
	border: 0;
	margin: 0;
	}
	
body {
	font-size: 1em;
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
  color: #333;
	}
body.home {
	background: #fff url(../gfx/leftall.jpg) repeat-y top left;
	}
body.aboutus, body.links, body.cat {
	background: #fff url(../gfx/leftmono.jpg) repeat-y top left;
	}
body.product_1 {
	background: #fff url(../gfx/leftblue.jpg) repeat-y top left;
	}
body.product_2 {
	background: #fff url(../gfx/leftyellow.jpg) repeat-y top left;
	}
body.product_3 {
	background: #fff url(../gfx/leftgreen.jpg) repeat-y top left;
	}
body.product_4 {
	background: #fff url(../gfx/leftred.jpg) repeat-y top left;
	}
body.product_5 {
	background: #fff url(../gfx/leftpurple.jpg) repeat-y top left;
	}
	
h1 { 
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 10px;
	}	
h2 {
	margin: 0 0 10px 0;
	padding-top: 0;
	font-size: 115%;
	}	
h3 {
	font-size: 95%;
	}
body.product_1 h1, body.product_1 h2, body.product_1 h3 {
	color: #30c;
	}
body.product_2 h1, body.product_2 h2, body.product_2 h3 {
	color: #c90;
	}
body.product_3 h1, body.product_3 h2, body.product_3 h3 {
	color: #063;
	}
body.product_4 h1, body.product_4 h2, body.product_4 h3 {
	color: #c03;
	}
body.product_5 h1, body.product_5 h2, body.product_5 h3 {
	color: #609;
	}
p, li, dt, dd {
	font-size: 75%;
	}
	
#center p {
	text-align: left;
	margin-right: 2em;
	margin-bottom: 1em;
	}
.home #center p {
	font-size: 120%;
	font-weight: bold;
	padding-right: 100px;
	color: #888;
	}
.home #center p.first {
	color: #063;
	margin-top: 25px;
	}
.home #center p.second {
	color: #c03;
	}
.home #center p.third {
	color: #30c;
	}
.border {
	border: 2px solid #000;
	}
	
.clear {
	clear: both;
	}
	
.clearright {
	clear: right;
	}
	
.clearleft {
	clear: left;
	}
	
a:link, a:visited {
	text-decoration: none;
	font-weight: bold;
	color:	#4935A2;
	}
	
a:hover, a:active {
	text-decoration: underline;
	}
a.next, a.prev {
	color: #fff;
	background: #4935A2;
	float: right;
	padding: 2px 5px;
	margin-top: -20px;
	margin-right: 0;
	}

a.prev {
	text-align: right;
	margin-left: 5px;
	margin-right: 60px;
	}
	
#header {
	background: #fff;
	width: 666px;
	margin: 5px 0 0 0;
	}
/* _____________________________________________________________________= main wrapper __*/
#wrapper {
	background-color:transparent;
	width: 700px;
	margin: 40px 0 20px 90px;
	padding-top: 0;
	}
.home #wrapper {
	background:#fff url(../gfx/paul_standing.jpg) no-repeat top left;
	}
	
/* ____________________________________________________________= main navigation styles __*/
#mainnav {
	position: absolute;
	top: 40px;
	left: 120px;
	width: 660px;
	background: #fff;
	}
	
#mainnav ul { /* any lists */
	display: inline;
	width: 660px;
	list-style: none;
	}

#mainnav ul li { /* all list items */
	position : relative;
	float: left;
	line-height : 1.25em;
	width : 156px;
	height: 25px;
	background: #888;
	padding: 3px 3px 0 3px;
	margin-right: 3px;
	text-align: center;
	}
#mainnav a:link, #mainnav a:visited {
	color: #fff;
	padding: 3px;
	}
#mainnav a:hover, #mainnav a:active {
color: #fff;
background: #333;
	}
/* match wrapper class with main nav link elements */	
.home #mainnav #home a, 
.cat #mainnav #cat_1 a,
.showcats #mainnav #showcats a,
.aboutus #mainnav #aboutus a,
.links #mainnav #links a {
color: #fff;
background: #333;
	}	
.product_1 #mainnav #cat_1 a:hover,
.product_1 #mainnav #cat_1 a:active { /* matches link hovers */
background: #30c;
	}	
.product_2 #mainnav #cat_1 a:hover,
.product_2 #mainnav #cat_1 a:active {
background: #c90;
	}
.product_3 #mainnav #cat_1 a:hover,
.product_3 #mainnav #cat_1 a:active {
background: #063;
	}
.product_4 #mainnav #cat_1 a:hover,
.product_4 #mainnav #cat_1 a:active {
background: #c03;
	}
.product_5 #mainnav #cat_1 a:hover,
.product_5 #mainnav #cat_1 a:active {
background: #609;
	}
	
#mainnav li:hover, #mainnav li.sfhover {  /* top level with suckerfish class */
color: #fff;
background: #333;
	}

/* match wrapper class with main nav elements */	
.home #mainnav #home, 
.cat #mainnav #cat_1,
.showcats #mainnav #showcats,
.aboutus #mainnav #aboutus,
.links #mainnav #links {
color: #fff;
background: #333;
	}	

.product_1 #mainnav #cat_1 { /* matches list elements */
background: #30c;
	}
.product_2 #mainnav #cat_1 {
background: #c90;
	}
.product_3 #mainnav #cat_1 {
background: #063;
	}
.product_4 #mainnav #cat_1 {
background: #c03;
	}
.product_5 #mainnav #cat_1 {
background: #609;
	}

/* _________________________________________________________________________= columns __*/

#center {
	float: left;
	margin-top: 0;
	margin-right: 0;
	margin-left: 30px;
	border: 0;
	padding: 0;
	min-height: 420px;
	}
.home #center {
	margin-left: 140px;
	}
#center #image1 {
	float:left;
	margin: 5px;
	}
#center #image2 {
	float:right;
	margin: 5px 25px 5px 5px;
	}
#center #image1 span.caption, #center #image2 span.caption {
	font-size: 75%;
	font-weight: bold;
	}	
#rightcol {
	float: right;
	}
.rightcol {
	background: #eee;
	}
.rightcol h3 {
	color: #000;
	}
#searchbar input {
	border: 1px solid #000;
	}
#searchbar #go {
	background: #000;
	border: 1px solid #000;
	color: #fff;
	font-weight: bold;
	}

/* ______________________________________________________________= Main header styles __ */
	
#header {
	background: #fff;
	width: 160px;
	border: 0;
	padding-top: 0;
	margin-left: 120px;
	}
	
/* Gilder-levin replaces header with image */
#header #sitename {
	width: 661px;
	height: 31px;
	position: relative;
	}
	
#header #sitename span {
	background: url(../gfx/header.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}
	
/* ________________________________________________________________= thumbnail styles __*/

.categoryImg {
	border: 0;
	margin: 5px 5px 0 0;
	float: left;
	}

.catlist {
	border: 0;
	}
.products {
	margin-top: 20px;
	}	
.products li, .catlist li {
	position: relative;
	float: left;
	text-align: center;
	height: 13em;
	width: 18.25%;
	display: inline;
	margin-bottom: 0.25em;
	}

.prodImg {
	float: left;
	width: 200px;
	height: 200px;
	margin: 0 10px 10px 0;
	}
#details {	
	margin-left: 210px;
	}
#crew {
	float: left;
	width: 200px;
	font-size: 75%;
	}
#tracks {	
	list-style: decimal;
	margin-bottom: 20px;
	}
#tracks li {
	margin-left: 20px;
	}

dt {
	margin-top: 10px;
	}
dt a {
	padding-right: 12px;
	background: url(../gfx/ext_link.gif) no-repeat top right;
	}
/* ___________________________________________________________________= footer styles __*/

#footer {
	font-size: 80%;
	text-align: center;	
	background: #fff;
	margin:0 0 0 100px; 
	padding: 10px 0 0 0;
	width: 700px;
	color: #333;
	clear: both;
	}
	
#footer ul {	
	list-style: none;
	}