/**************************************************************

Cowes Town Council Stylesheet
Author: MP

STYLESHEET CONTENTS
0. Reset
1. Fonts
2. HTML Tags
3. Layour Divs
4. Specific formatting
      a. Header
	  b. Footer
	  c. Navigation
	  d. Content Column
	  e. Info Column
      f. Forms
5. General Formatting Classes
6. Clearfix

COLOUR SCHEME

***************************************************************/

/********************* Reset ********************/

/* v1.0 | 20080212 - Kindly Provided by Eric Meyer (http://meyerweb.com/eric/tools/css/reset/index.html) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;}
	
/*ol, ul {
	list-style: none;
}*/
	
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/********************* End Reset ********************/

/********************* Fonts ********************/
body {	
	font-family: Verdana, Geneva, sans-serif;	
	font-size: 62.5%;}	
	
/********************* End Fonts ********************/

/********************* HTML Tags ********************/

html { padding: 0; margin: 0;}	

body {
	background-color:#5E9DC8;
	color: #666666;}

h1, h2, h3, h4, h5 {
	font-family: Arial, "Lucida Sans", Helvetica, sans-serif;
	margin-bottom: 1em;
	line-height: 110%;}

h1 {
	font-size: 2.2em;
	color: #5E9DC8;}

.info-col h1 {
	font-size: 1.9em;}

#side-nav h1 {
    margin-top: 18px;
    margin-left: 18px;
    color: #666666;}

h2 {
	font-size: 1.6em;
	color: #034DA2;
	display: block;
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.5em;
	font-style: italic;}

.info-col h2 {
	font-size: 1.6em;
	font-style: normal;}
.col h2 {
	font-size: 1.6em;
	color: #5E9DC8;
	margin: 0.5em 0;
	font-style: normal;}
	
h3 {
	font-size: 1.4em;
	color: #333;
	padding-bottom: 0.5em;
	font-style: italic;}
	
h4 {
	font-size: 1.2em;
	color: #333;
	padding-bottom: 0.5em;}		

p, li, td {	
	font-size: 1.2em;
	line-height: 145%;
	/*color: #7F716C;*/}

td p, td li, td td, li li {	
	font-size: 1em;}	

p {	
	margin-bottom: 1em;}
	
.info-col p {	
	font-size: 1.2em;
	line-height: 145%;}
.col p {
	margin-bottom: 0.5em;
	font-size: 1.1em;}

ul, ol {
    padding-bottom: 12px;}

li {
	margin: 0 0 0.5em 20px;}


#main-content-col li 	
{
    clear: both;}

ul li {
	background: url(../images/layout/bullet.gif) 0 3px no-repeat;
	list-style: none;
	padding-left: 15px;}

ol li {
	margin-left: 35px;}

a {	
	/*color: #7a7a7a;*/
	color: #666666;
	text-decoration: underline;}
.col a {	
	font-weight: bold;}
a:hover {	
	color: #5E9DC8;}

/********************* End HTML Tags *********************/
		
/********************* Layout Divs *********************/
body {
	text-align: center;}
	
#container {	
	width: 946px;
	margin: 0 auto;
	background:#FFFFFF;
	padding: 0 15px;
	text-align: left;}
			
#head {	
	border-top: 5px solid #034DA2;}
				
#content {	
	clear: both;
	padding: 14px 0 42px;}
	
.content-col {
    width: 705px;
    float: left;}	

#main-content-col {
    width: 700px;
    float: left;
    margin: 0;}	
	
#intro {
	background:url(../images/layout/grey-right-col-bg.gif) top right repeat-y;
	margin-bottom: 14px;}	

#info-col, .info-col {
	width:191px;
	float:right;
	padding: 18px;
	background:#f0f0f0;}

.map {	
	padding-right: 0px;
	width: 209px;}

#footer {	
	clear:both;
	text-align: right;
	border-top: 5px solid #034DA2;
	font-weight: bold;
	font-size: 1.1em;
	color: #7F716C;
	padding: 18px 0 36px;}

/********************* End Layout Divs *********************/
	
/********************* Specific formatting *********************/

/* -------- Header -------- */

#head-links {
	margin: 6px 8px 0 0;
	float: right;
	font-size: 1.1em;
	color: #999;}
#head-links a {	
	color: #999;
	text-decoration: none;}
#head-links a:hover {	
	text-decoration: underline;}

#head-links, #head-links a {
	font-size:11px;}
		
#head-links a:hover {
	text-decoration:underline;}		

#head-contact {
	font-size: 1.4em;
	font-weight: bold;
	color: #174477;
	float: right;
	clear: right;
	text-align: right;
	line-height: 145%;
	padding-right: 8px;
	margin-top: 35px;
	width: 400px;}
#head-contact strong {
	color:#00B9B0;}
#head-contact a {
	color:#174477;
	text-decoration: none;}
#head-contact a:hover {
	text-decoration: underline;}

#logo {
	float: left;
	margin: 12px 25px 15px;}	

/* -------- End Header -------- */

/* -------- Footer -------- */

/* -------- End Footer -------- */

/* -------- Navigation -------- */

#main-nav {
	clear: both;}

#main-nav ul{
	background: url(../images/layout/nav-bg.png) 0 0 no-repeat #034FA5;
	padding: 0 0 0 15px;
	border-bottom: 6px solid #5E9DC8;
	margin: 0;}

#main-nav ul li {
	list-style-type: none;
	padding: 7px 18px;
	float: left;
	font-size: 1.6em;
	margin: 0;
	background: none;}

#main-nav ul li a {	
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;}
	
#main-nav a:hover {	
	color: #B5D2E6;}
	
#main-nav li.active {
	background:url(../images/layout/nav-shadow.gif) bottom right no-repeat;
	padding: 0 5px 0 0;}
#main-nav li.active span {
	background:#5E9DC8;
	display: block;
	padding: 11px 13px 7px 15px;
	margin-top: -3px;}
#main-nav li.active a:hover {	
	color: #fff;}


#side-nav {
	background: #f0f0f0;
	padding: 0 0 50px 0;
	width: 227px;}

#side-nav ul{
	margin: 0;
	padding: 0;}

#side-nav ul li.last,
#side-nav ul li:last-child{
	border: none;}

#side-nav h1 {}

#side-nav ul li {
	list-style-type: none;
	padding: 7px 18px;
	font-size: 1.6em;
	border-bottom: 1px solid #dadada;
	display: block;
	margin: 0;
	background: none;}

#side-nav ul li a {	
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	display: block;}
	
#side-nav a:hover {	}
	
#side-nav li.active {
	border: none;
	background: url(../images/layout/nav-bullet.gif) 7px 13px no-repeat #5E9DC8;
	padding-left: 21px;
	margin-left: -3px;}
	
#side-nav li.active a {
	color: #fff;}
	
#side-nav li.active a:hover {}


/* -------- End Navigation -------- */

/* -------- Content Column -------- */

.three-col {
	width: 705px;
	float: left;}

.col {
	float: left;
	width: 225px;}
	
.col img  {
	border: 3px solid #ccc;}
	
.three-col .mid {
	margin: 0 15px;}
	
/* -------- End Content Column -------- */

/* -------- Info Column -------- */

/* -------- End Info Column -------- */

/* -------- Forms -------- */

/* -------- End Forms -------- */

/********************* End Specific formatting *********************/

/********************* General Formatting *********************/

.left {
	float:left;}
	
.right {
	float:right;}
	
.clear {
	clear:both;}
	
img.left {
	margin: 0 15px 15px 0;}
	
img.right {
	margin: 0 0 15px 15px;}

.printOnly {
    display: none;}

/********************* End General Formatting *********************/

/********************* Clearfix *********************/

/* slightly enhanced, universal clearfix hack */
.clearfix:after,
#content:after
{    visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;}
	 
.clearfix,
#content
{ display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix,
* html #content
{ height: 1%; }

.clearfix,
#content
{ display: block; }
/* close commented backslash hack */
	
/********************* End Clearfix *********************/