/*  Information
------------------------------------------------------------------------------------------------------------------*/
/*  Styles for FriendsOfStanpitMarsh.org.uk
    General styles for all browsers
    Created by Mez Hopking | mez@hopkingdesign.com | http://hopkingdesign.com/
    16th June 2008, Revised 23rd June 2008
------------------------------------------------------------------------------------------------------------------*/


/*  Foundation layout & reset styles
------------------------------------------------------------------------------------------------------------------*/

* html, p, h1, h2, h3, h4, h5, h6, ul, ol, li, blocckquote, td, tr, table, div, dd, dt, a, input, text, button, form, span, img {margin: 0px; padding: 0px; color: #555}
a {text-decoration: none; color: #ff5a00}
li {list-style: none;}

body {margin: 0 auto; text-align: center; font-family: Helvetica, Arial, sans-serif; font-size: .8em; line-height: 1.2em; color: #404040; background: url(../images/layout/bgBody.png) top center no-repeat;}
#container {
	margin: 0px auto;
	padding: 0px;
	position: relative;
	width: 770px;
	background-color: #fff;
	text-align: left;
	background-color: none;
	left: 4px;
}
#innerContainer {border-left: 3px solid #c1d9e9; border-right: 3px solid #c1d9e9; float: left; width: 764px; position: relative;}

#contentContainer {position: relative; float: left; background-color: none;}
#content {float: left; width: 100%; position: relative; margin: 20px 0 0 0;}
#mainCol {margin-left: 239px; padding: 0 30px 0 30px; position: relative; width: 660px;}
#subCol {float: left; width: 238px; position: relative; padding: 20px 0 0 0;} 
#footer {float: left; position: relative; width: 100%; margin: 50px 0 0 0; padding: 0 0 8px 0; min-height: 0px; background: url(../images/layout/footerBg.png) top left repeat-x;}


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

#header {width: 730px; min-height: 125px; background: url(../images/layout/bgHeader.png) bottom left repeat-x; position: relative; float: left; padding: 20px 20px 0px 20px;}

#pageDescription, #accessibility {display: none;}

#branding {position: relative; float: left;}

#branding a img {border: none;}
#branding h2 {display: none;}
#branding h2 a {}

#mainNavigation {float: right; position: relative;}
#mainNavigation ul {}
#mainNavigation li {display: inline; float: left; font-size: 110%; color: #1e6ba5;}
#mainNavigation li a {float: left; position: relative; padding: 100px 15px 10px 15px; color: #1e6ba5}
#mainNavigation li a:hover {background: url(../images/layout/bgMainNav.png) bottom left repeat-x; color: #fff;}
#mainNavigation li#mnCurrent span {background: url(../images/layout/bgMainNav.png) bottom left repeat-x; float: left; padding: 100px 15px 10px 15px; color: #fff;}

#splashImg {width: 764px; float: left; position: relative; border-top: 1px solid #c1d9e9; border-bottom: 1px solid #c1d9e9; height: 193px; background-repeat: no-repeat; background-position: top left;}


/*  Breadcrumbs specific
------------------------------------------------------------------------------------------------------------------*/

#breadcrumbs {border-bottom: 1px solid #c1d9e9; float: left; padding: 5px 20px; width: 724px; font-size: 85%;}
#breadcrumbs h3 {float: left; font-size: 100%; font-weight: normal; color: #000; padding: 0 7px 0 0; margin: 0px;}
#breadcrumbs ul {}
#breadcrumbs li {display: inline; background: url(../images/layout/iconBreadCrumbArrow.png) 0% 2px no-repeat; padding: 0 0 0 10px;}
#breadcrumbs li a {color: #404040; padding: 0 6px 0 0;}
#breadcrumbs li a:hover {color: #fb0a0a;}


/*  Content specific and general typography
------------------------------------------------------------------------------------------------------------------*/

.section {float: left; position: relative; width: 724px; padding: 20px 20px 32px 20px; background: url(../images/layout/bgSection.png) bottom left repeat-x;}

.section #welcome {float: left; position: relative; width: 450px; margin: 0 20px 0 0; border-right: 1px dotted #74b3e4; min-height: 170px;}
.section #homeGallery {float: left; position: relative; width: 251px; border-right: 1px dotted #74b3e4; min-height: 170px}
.section #homeGallery img, .section .hpListBlock33#location img {padding: 3px; border: 1px solid #75b3e4;}
.section h2 {border-bottom: 1px dotted #74b3e4; display: block; margin: 0 0 10px 0; font-size: 110%; font-weight: normal; color: #000;}
.section p {margin: 0 10px 0 0;}

.section .hpListBlock33 {float: left; position: relative; width: 227px; border-right: 1px dotted #74b3e4; min-height: 300px}
.section .hpListBlock33 ul {margin: 0 10px 0 0;}
.section .hpListBlock33 li {border-bottom: 1px dotted #74b3e4; padding: 5px 0;}
.section .hpListBlock33 li:hover {background-color: #f1f6fa;}

.section .hpListBlock33#location {padding: ; margin: 0 20px 0 0 ;}
.section .hpListBlock33#birdSightings {padding: ; margin: 0 20px 0 0;}
.section #birdSightings ul {}
.section #birdSightings li {}
.section #birdSightings li .birdName {width: 50%; float: left}
.section #birdSightings li .birdQuantity {width: 15%; float: left}
.section #birdSightings li .date {}
.section #birdSightings li .title {font-weight: bold;}
.section .hpListBlock33#newsEvents {padding: ;}
.section #newsEvents ul {}
.section #newsEvents li {}
.section #newsEvents li .title {font-weight: bold; float: left;}
.section #newsEvents li .date {font-weight: bold; float: left; display: block; clear: both; color: #ff5a00;}
.section #newsEvents li .description {display: block; padding: 0px 0 0 0; clear: both}

.section #gallery {}
.section #gallery ul {float: left;}
.section #gallery li {float: left; display: inline; margin: 0 0 10px 0; padding: 0 3px 0 0;}
.section #gallery li a {}
.section #gallery li a:hover {}
.section #gallery li img {border: 1px solid #ccc; padding: 3px;}
.section #gallery li img a {}
.section #gallery li img a:hover {}

p {padding: 0 0 10px 0;}
p a {color: #ff5a00; text-decoration: underline;}
p a:hover {color: #1e6ba5}
h1 {}
h2 {}
h3 {font-size: 110%; font-weight: normal; color: #000; margin: 0 0 3px 0; clear: left;}
h4 {}
h5 {}
h6 {}

a:hover img {border-color: #ff5a00 !important;}

.imgLeft {float: left; clear: left; margin: 0 15px 15px 0;}
.imgRight {float: right; clear: right; margin: 0 0 15px 15px;}
.imgLeft, .imgRight {border: 1px solid #ccc; padding: 3px;}
.imgLeft .imgCaption, .imgRight .imgCaption {display: block; padding: 2px 2px; font-size: 90%; color: #666}
.imgLeft img, .imgRight img {}

.textarea {padding: 2px; width: 718px; background: #f2ffce; border: 1px solid #b6d954;}
.comment-box {width: 436px; background: #f2ffce; border: 1px solid #b6d954;}
label {color: #699ac8; font-size: 90%; font-weight: bold;}
.req {color: #ff0000 !important;}


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

#footer {border-left: 3px solid #c1d9e9; border-right: 3px solid #c1d9e9; float: left; width: 764px; position: relative; background: url(../images/layout/bgSection.png) bottom left repeat-x; color: #545454; font-size: 80%; margin: 0px;}
#footer ul {position: relative; float: left; padding: 10px 20px; border: 1px solid #fff; background-color: #f1f6fa; width: 722px; margin: 0 0 4px 0;}
#footer li {display: inline; padding: 0 5px 0 0; float: left; color: #698596}
#footer li a {border-left: 1px solid #545454; padding: 0 0 0 5px; color: #698596;}
#footer li a:hover {color: #ff5a00;}
#footer li.last {}
#footer li.first {}
#footer li#siteDesign {float: right !important;}
#footer li#siteDesign a {border: none !important; color: #92acbc}
#footer li#siteDesign a:hover {color: #ff5a00;}