/* CSS Document */

/*  Custom definitions, for Mockett Media

Colours:
	grey #adadad
	camel #c4ae90
	minty #aed5ce
	petrol #1f6a96
	navy #041a45

*/

html * {
	border: 0;
	margin: 0;
	}
	
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #041a45;
	background: #c4ae90;
	padding: 0 15px;
	}
	
h1 { 
	font-size: 120%;
	margin: 5px 0;
	padding-left: 25px;
	background: url(../gfx/bullet_navy.gif) no-repeat center left;
	}
	
h2 {
	margin-top: 15px;
	font-size: 115%;
	color: #1f6a96;
	margin-bottom: 5px;
	}
	
h3 {
	font-size: 95%;
	clear: left;
	}
	
p, li, dt, dd {
	font-size: 75%;
	margin-bottom: 10px;
	}
dt {
	margin-bottom: 0;
	}
ul, ol, dl {
	margin: 0;
	list-style: none;
	padding-left: 0;
	}
.terms #center ol {
	list-style: lower-roman;
	margin-left: 35px;
	padding: 0;
	border: 1px solid #fff;
	}
.border {
	border: 2px solid #041a45;
	}
	
.clear {
	clear: both;
	}
	
.clearright {
	clear: right;
	}
	
.clearleft {
	clear: left;
	}
.floatright {
	float: right;
	margin-left: 10px;
	}
.floatleft {
	float: left;
	}	
/* _______________________________________________________________________ link stuff __*/
a:link, a:visited {
	text-decoration: none;
	font-weight: bold;
	color:#1f6a96;
	}
a:visited {
	color:#aed5ce;
	}
#news a:visited {
	color:#1f6a96;
	}
	
a:hover, a:active {
	text-decoration: underline;
	}
a.extlink {
	padding-right: 15px;
	background: url(../gfx/ext_link_petrol.gif) top right no-repeat;
	}
a:visited.extlink {
	padding-right: 12px;
	background: url(../gfx/ext_link_minty.gif) top right no-repeat;
	}
#news a:visited.extlink {
	color:#1f6a96;
	padding-right: 12px;
	background: url(../gfx/ext_link_petrol.gif) top right no-repeat;
	}
a.next, a.prev, a.back {
	border: 1px solid #041a45;
	background: #c4ae90;
	color: #041a45;
	float: right;
	padding: 2px 5px;
	margin-top: -40px;
	}
.contact a.next {
	margin-top: -20px; /* overrides for Contact Us page*/
	}
a.prev {
	margin-top: -15px;
	}
a.back {
	margin-top: -30px;
	}
a.back2 {
	margin-top: -5px;
	}
a:hover.next, a:focus.next, a:visited.next, 
a:hover.prev, a:focus.prev, a:visited.prev, 
a:hover.back, a:focus.back, a:visited.back {
	border: 1px solid #041a45;
	color: #fff;
	background: #041a45;
	}
/* _____________________________________________________________________= main wrapper __*/
#wrapper {
	background:#fff url(../gfx/center_bg.gif) repeat-y top right;
	border-left: 0;
	border-right:  0;
	padding: 0;
	margin: 0 auto; 
	width: 970px;
	position: relative;
	}
	
/* ____________________________________________________________= main navigation styles __*/
#mainnav {
	margin-left: 0;
	width: 966px;
	height: 38px;
	background: #eee;
	border-left: 2px solid #1f6a96;
	border-right:  2px solid #1f6a96;
	}
	
#mainnav ul {
	list-style: none;
	float: left;
	list-style: none;
	margin-left: 5px;
	}

#mainnav ul li {
	float : left;
	line-height : 1.9em;
	padding: 5px;
	position : relative;
	width: 80px;
	}	
#mainnav ul li#quotes {
	width: 141px;
	}
#mainnav ul .subnav { /* second-level lists */
	background-image: none;
	background: #eee;
	padding-bottom: 0;
	padding-top: 0;
	position : absolute;
	margin-top: 15px;
	left: -999em;
	margin-left : 9em;
	width: 120px;
	z-index: 10;
	}
	
#mainnav .subnav li { /* second-level list items */
	padding-top: 0.5em;
	height: 2.5em;
	margin: 0;
	width: 120px;
	background: #eee;
	}
	
#mainnav a:link, #mainnav a:visited {
	text-decoration: none;
	padding: 5px 0 0 20px;
	background: url(../gfx/bullet_petrol.gif) no-repeat left;
	display : block;
	font-weight : bold;
	}
#mainnav a:visited {
	background: url(../gfx/bullet_minty.gif) no-repeat left;
	}

#mainnav a:hover, #mainnav a:active {
	text-decoration: underline;
	background: #eee;
	color: #aed5ce;
	padding: 5px 0 0 20px;
	background: url(../gfx/bullet_minty.gif) no-repeat left;
	}

#mainnav li:hover, #mainnav li.sfhover {  
	background: #041a45;
	}
	
#mainnav li:hover ul, 
#mainnav li.sfhover ul a { /* lists nested under hovered list items, with suckerfish class */
	list-style: none;
	left: auto;
	margin-left: 0;
	margin-top: -1px;
	width : 100px;
	height: 20px;
	padding-bottom: 0;
	z-index: 10;
	}
#mainnav li:hover li a,  
#mainnav li.sfhover li a { /* li nested under hovered list items, with suckerfish class */	
	width : 100px;
	}

/* match wrapper class with main nav elements */	
.home #mainnav #home a, 
.cats #mainnav #cats a, 
.cat #mainnav #showcats a, 
.showcats #mainnav #showcats a,
.aboutus #mainnav #aboutus a,
.events #mainnav #events a,
.morenews #mainnav #morenews a,
.links #mainnav #links a, 
.services #mainnav #services a,
.contact #mainnav #contact a,
.testimonials #mainnav #quotes a,
.blog #mainnav #blog a,
.twitter #mainnav #twitter a {
	color: #c4ae90;
	background: url(../gfx/bullet_camel.gif) no-repeat left;
	}
	
/* ________________________________________________________________= centre column stuff __*/
#center {
	background: transparent;
	margin: 0;
	padding: 10px 10px 20px 10px;
	margin-right: 200px;
	border-left: 2px solid #1f6a96;
	border-right:0;
/*	width: 767px;*/
	min-height: 400px;
	z-index: 1;
	}
	
/* ________________________________________________________________= right column stuff __*/
.rightcol { /* each panel of the right column*/
	background: #aed5ce;
	margin: 0;
	}
#rightcol{ /* the containing div */
	background: #aed5ce;
	font-size: 80%;
	margin-right: 0;
	position: absolute;
	top: 0;
	right: 0;
	border-right:  2px solid #1f6a96;
	border-left:  2px solid #fff;
}	
#searchbar  {
	margin-top: 20px;
	height: 60px;
	margin-left: 5px;
	width: 175px;
	}
#searchbar #go {
	background: #041a45;
	color: #fff;
	font-weight: bold;
	font-size: 140%;
	}

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

.categoryImg {
	margin: 0 10px 5px 0;
	float: left;
	}
.prodThumb {
	margin: 5px 10px 5px 0;
	}
.products, .catlist {
	clear: left;
	float: left;
	list-style: none;
	padding: 0;
	margin: 10px -20px 10px 0;
	text-align: center;
	}

.products li, .catlist li {
	position: relative;
	float: left;
	text-align: center;
	width: 150px;
	height: 150px;
	display: inline;
	margin-bottom: 0.35em;
	}
.catlist li {
	height: 180px;
	}
.services .floatright {
	text-align: center;
	margin-bottom: 10px;
	}
.services .floatright img {
	margin-bottom: 5px;
	}
.prodImg {	
	float: left;
	padding-bottom: 10px;
	margin-right: 10px;
	margin-top: -30px;
	}
.searchresults li img.prodThumb {
	float: left;
	margin: 0 10px 10px 0;
	}

.product h2.webtitle { /* page showing website details*/
	background: url(../gfx/bullet_petrol.gif) no-repeat center left;
	padding-left: 20px;
	margin-left: 420px;
	}
.morenews dt, .links dt, .twitter dt {
	padding-left: 20px;
	background:url(../gfx/bullet_minty.gif) no-repeat top left;
	margin-bottom: 5px;
	margin-top: 15px;
	}
.morenews dd, .links dd, .twitter dd {
	padding-right: 0;
	text-align: left;
	}
#image1 {
	float: right;
	width: 110px;
	margin: 5px 10px 0 10px;
	}
#image2 {
	float: left;
	width: 110px;
	margin: 5px 15px 0 0;
	}
#image1 .caption, #image2 .caption,
.services .caption {
	font-size: 70%;
	font-weight: bold;
	color: #c4ae90;
	}
/* _________________________________________________________= testimonials stuff __*/	
.quotes li {
	clear: left;
	background: url(../gfx/quote_right.gif) no-repeat bottom right;
	}
.home .quotes li {
	font-size: 110%;
	}
.quotes li strong.indent {
	margin-left: 58px;
	}
.quotes li blockquote {
	margin-left: 125px;
	margin-right: 50px;
	padding: 0 0 0 63px;
	background: url(../gfx/quote_left.gif) no-repeat top left;
	}
.home .quotes li blockquote {
	margin-left: 425px;
	padding: 0 0 0 54px;
	background: url(../gfx/quote_left.gif) no-repeat top left;
	}
.quotes img {	
	float: left;
	padding-bottom: 10px;
	margin-right: 10px;
	}
.home p#morequotes {
	margin-left:  480px;
	display: block;
	}

/* _________________________________________________________= centre column stuff __*/	
.vcard {
	background: url(../gfx/microformat.gif) top right no-repeat;
	border: 1px solid #c4ae90;
	margin: 5px;
	padding: 5px;
	width: 300px;
	}

/* ___________________________________________________________________= footer styles __*/

#footer {
	font-size: 75%;
	background: #c4ae90;
	padding: 10px 0 50px 0;
	border-top:  2px solid #1f6a96;
	width: 970px;
	overflow: visible;
	margin: 0 auto;
	text-align: center;
	}
	
#footer ul {	
	list-style: none;
	margin-bottom: 0;
	padding-bottom: 0;
	}
#footer li {	
	margin-bottom: 0;
	padding-bottom: 0;
	}
#footer p {	
	margin-top: 0;
	padding-top: 0;
	}
/* match wrapper class with footer elements */	
.terms #footer #terms a,
.contact #footer #contact a {
	color: #041a45;
	}
#footer a:visited {
	color: #1f6a96;
	}