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

Eco Island Main Styles

Copyright: Isle of Wight Council

Do not copy any elements of this stylesheet

STYLESHEET CONTENTS
1. HTML Tags
2. Layour Divs
3. Specific formatting
      a. Header
	  b. Footer
	  c. Navigation	  
	  d. Info Column
	  e. Content Column
4. General Formatting Classes

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


/********************* HTML Tags ********************/
* { 
	margin: 0px;
	padding: 0px;
	border: 0px;}

body {	
	font-family:Arial, Helvetica, sans-serif;
	background: url(../images/pageBG.png) top left repeat-y #F8F8F8;
	font-size: 12px;	
	color: #666666;}

p {	
	line-height: 145%;
	margin: 10px 0 15px 0;}
	
p em 
{
	width: 99%;}	

li {
	list-style-type: none;}
	
#contentColumn #contentLeft li, #contentColumnSub #contentLeft li {
	margin: 3px 0 3px 5px;
	background: url(../images/bullet_go.gif) top left no-repeat;
	padding-left: 25px;
	list-style-type: none;}

a { 
	color: #666666;
	text-decoration:none;}	
	
h1 {
	font-size: 25px;
	color: #CBDB2A;
	margin: 12px 0 4px 0;}
	
h2 {
	font-size: 21px;
	padding-top: 16px;
	color: #CBDB2A;}

h3 {
	font-size: 16px;
	font-weight: bold;
	color: #666666;
	margin: 10px 0;}

h4 {
	font-size: 14px;
	font-weight: bold;
	color: #666666;
	margin: 10px 0;}
		
h5 {
	font-size: 18px;
	font-weight: bold;
	display: block;
	border-bottom: 2px solid #666666;
	text-align:right;}
	
/********************* End HTML Tags *********************/
		
/********************* Layout Divs *********************/

#container {	
	width: 980px;
	position: relative;}
			
#header {
	}		
				
#content {	
	clear: both;
	background: url(../images/longBG.gif) left bottom no-repeat;}
	
#footer {
	}	

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

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

#logo {
	float: left;
	margin: 30px 0 0 16px;}	
	
#eventsLink {
	position: absolute;
	right: 20px;
	top: 100px;}	

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

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

#footer {
	background: url(../images/AccessBG.gif) bottom left no-repeat #278F45;
	padding-left: 250px;
	height: 45px;
	line-height: 45px;}

#footer a:hover {
	text-decoration:underline;}

#footerMsg {
	float: left;
	color: #CBDB2A;}

#footerBar {
	color: #FFF;
	float: right;
	margin-right: 14px;}

#footerBar a {
	color: #FFF;}	

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

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

#mainNav {
	float: right;
	width: 720px;
	margin-top: 30px;}

#mainNav ul{}

#mainNav ul li {
	float: left;
	padding: 5px 7px;
	border-right: 1px solid #E5E5E5;
	margin: 0;
	background: none;}

#mainNav ul li.last {
	border: none;}

#mainNav ul li a {	
	padding-bottom: 5px;
	font-weight: bold;}

#mainNav ul li a:hover, #mainNav ul li a.mainNavActive {	
	border-bottom: 3px solid #CBDB2A;}

#subNav {
	background: url(../images/SubNavTopBG2.png) top left no-repeat;
	padding-top: 50px;}

#subNavMid {
	background: url(../images/SubNavMidBG.png) top left repeat-y;}

#subNav ul {
	background: url(../images/SubNavBotBG.png) bottom left no-repeat;
	padding: 0 32px 42px 30px;}
	
#subNav ul li ul {
	background-image: none;
	background-color: #fff;
	padding: 0;
	margin: 0 0 10px 15px;
	border-bottom: 1px solid #fff;}

#subNav li {
	display:block;
	border-bottom: 1px solid #E2E2E2;
	padding: 0 15px;
	line-height: 30px;
	margin: 0;}
	
#subNav ul li ul li {
	padding: 5px 0;
	line-height: 14px;
	border-bottom: none;}

#subNav li a {
	font-size: 11px;
	display: block;
	text-transform:uppercase;}

#subNav a.subNavActive, #subNav a:hover {
	font-weight: bold;}

#accessibilityBar {
	color: #FFF;
	font-size:11px;
	float: right;
	width: 732px;
	background: url(../images/AccessBG.gif) bottom left no-repeat #278F45;
	line-height: 30px;}

#accessibilityBar #accessLinks {
	float: right;
	padding-right: 20px;}

#accessibilityBar a {
	color: #FFF;
	padding: 0 3px;}

#accessibilityBar a:hover {
	text-decoration:underline;}
	
#breadcrumbs {
	font-size: 11px;
	background: url(../images/GreyWhiteCorner.png) bottom left no-repeat #EDEDED;
	line-height: 30px;
	padding-left: 32px;
	margin: 30px 0 15px -17px;}	

#breadcrumbs a {
	margin: 0 3px;}
	
#breadcrumbs a:hover {
	text-decoration: underline;}
	
	
.submenu { 	
}


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

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

#infoColumn {
	float: left;
	width: 231px;
	/*background: url(../images/InfoBarBG.png) bottom left no-repeat;*/
	padding: 0;
	margin: 0;}
	
#newsSignup {}

#newsSignup input.text {}

#newsSignup input.button {}

#latestNews {
	background: url(../images/latestNewsTopBG.png) top left no-repeat #CBDB2A; 
	padding-top: 30px;}

#lnMid {
	background: url(../images/latestNewsMidBG.png) top left repeat-y;}

#latestNews ul {
	background: url(../images/latestNewsBotBG.png) bottom left no-repeat;}

#lnTitle {
	font-size: 14px;
	font-weight: bold;
	border-bottom: 1px solid #F0F4C0;
	margin: 0 26px 0 42px;}
	
#latestNews ul {
	padding: 0 26px 12px 42px;}
	
#latestNews li {
	font-size: 11px;
	background: none;
	margin: 0;}	

#latestNews li p {	
	padding-top: 5px;
	line-height: 130%;}
	
#latestNews li p a {	
	font-weight: bold;}
	
#latestNews li p a:hover {	
	text-decoration: underline;}
	
#latestNews li img {
	float: left;
	margin-right: 5px;
	border: 2px solid #F0F4C0;}
	
/* -------- End Info Column -------- */

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

#contentColumn, #contentColumnSub {
	float:left;
	overflow:hidden;
	width: 732px;
	background: url(../images/ContentCorner.png) bottom left no-repeat;
	padding: 0 0 0 17px;}

#contentIntro {
	color: #FFF;
	background: url(../images/WelcomeBG.gif) bottom left no-repeat #666666;
	font-size: 12px;}

#contentIntro .left {
	width: 304px;
	padding: 18px 15px;}

#contentIntro .right {
	width: 398px;}
	
#contentIntro p {	
	color: #FFF;
	margin-top: 5px;}	
	
#contentIntro a {
	color: #FFF;
	font-weight: bold;}	
	
#contentIntro h1 {
	color: #CBDB2A;
	font-size: 25px;
	padding: 0; margin: 0;}
	
#contentIntro img {
	}

#homePanels {
	margin-top: 15px;
	clear: both;}

#homePanels p {
	font-size: 11px;
	padding: 0 12px;}

#homePanels li {
	width: 237px;
	float: left;
	margin-right: 10px;
	background: none;
	}

#homePanels li.last {
	margin: 0 0 0 1px;}
	
.homePanelBar {
	background: url(../images/HomePanelBarBG.png) bottom left no-repeat #EDEDED;
	line-height: 30px;
	text-align:right;
	font-weight: bold;
	padding-right: 18px;
	margin-top: -3px;}

.homePanelBar a {
	display: block;}
	
.homePanelBar a:hover {
	text-decoration: underline;}
	
#homeFeatures h2 {
	font-size: 17px;
	color: #333;
	margin-top: -15px;}

#homeFeatures p {
	font-size: 11px;}

#homeFeatures a:hover {
	text-decoration: underline;}	
	
#homeFeatures #homeLeftFeature {
	float: left;
	padding: 13px 14px 1px 14px;
	width: 405px;
	height: 221px;
	background: url(../images/CYPPBg2.png) bottom right no-repeat #EDEDED;
	margin-bottom: 15px;}
	
#homeRightFeature {
	background: url(../images/Yellow-GreenWhiteCorner.png) bottom left no-repeat #CBDB2A;
	width: 288px;
	height: 235px;
	float: left;
	margin-left: 11px;
	color: #424542;}
	
#homeRightFeature a {color: #424542;}

#hrfContainer {
	background: url(../images/leavesBG.png) top left no-repeat;
	padding: 13px 14px 2px 108px;}
	
#contentLeft {
	float: left;
	padding: 0 20px 30px 15px;
	width: 460px;}	
		
#contentLeft a {
	color: #278F45;
	text-decoration: underline;}
		
#contentLeft a:hover {	
	text-decoration: none;}

#contentRight {
	float: left;
	padding-bottom: 30px;
	width: 237px;}		

#relatedTitle {
	font-size: 12px;
	font-weight: bold;
	padding: 16px 0 5px 11px;}
	
ul.relatedLinks	li {
	border-bottom: 1px solid #EDEDED;
	background: url(../images/chevronBullet.gif) left no-repeat;
	background-position: 11px;
	margin: 0;}

ul.relatedLinks	li.last {
	border-bottom: none;}
	
ul.relatedLinks	li a {
	line-height: 280%;
	padding-left: 28px;
	font-size: 11px;}	
		
ul.relatedLinks	li a:hover {
	font-weight: bold;}	
	
.speechBubble {
	margin-top: 20px;
	background: url(../images/SpeechBubble.gif) bottom left no-repeat #EDEDED;
	padding: 15px 15px 31px 15px;}

.speechBubble .quote {		
	font-size: 16px;
	font-weight: bold;}	

.speechBubble .quoteBy {		
	text-align: right;	
	font-size: 11px;}		
/* -------- End Content Column -------- */

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

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

.clear {	
	clear: both;}

.hide {	
	display:none;}	
	
.left {
	float: left;}	
	
.right {
	float: right;}	
	
a.pdf {
	background: url(../images/iconPDF.jpg) right no-repeat;
	padding-right: 25px;}

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

td a { text-decoration: underline;}