/*
Theme Name: Sheffield - Let's Change4Life
Version: 2.0
Author: Amy Benson
*/

body {margin:0; padding:0; background: #528821 url(images/css/grasstile.jpg) repeat-y top center; font-size:95%; font-family:Arial, Helvetica, sans-serif; height:100%}

/* general rules*/
.clear {clear:both;}
h1 {margin:0; padding:0.2em 0; font-size:2em; font-weight:normal; line-height:130%; }
h2 {margin:0; padding:0.2em 0; line-height:130%; font-size:1.4em; font-weight:normal}
h3 {margin:0; padding:0.2em 0; line-height:150%; font-size:1em; }
p {margin:0; padding:0.45em 0; line-height:150%; font-size:1em;}
ul, ol {font-size:1em; line-height:150%;}
a:link {text-decoration:none; border-bottom:1px dashed #666666; color:#000000;}
a:visited {text-decoration:none; border-bottom:1px dashed #666666; color: #666666;}
a:focus, a:hover, a:active {background-color:#FFF200; border:none;}
p.small {font-size:0.7em;}

h1 span {font-size:0.55em; color:#FF6633; font-weight:bold; line-height:100%}

/* skip link*/
#skip {font-size:0.6em; position:absolute; top:0; border-bottom:none; color:#FFFFFF }

/* character */
#ch {background: url(images/css/ch1.png) no-repeat; width:59px; height:60px; display:block; position:fixed; bottom:0; left: 4px; z-index:100 }
#ch2 {background: url(images/css/ch2.png) no-repeat; width:83px; height:60px; display:block; position:fixed; bottom:0; left: 4px; z-index:100 }
#ch3 {background: url(images/css/ch3.png) no-repeat; width:47px; height:60px; display:block; position:fixed; bottom:0; left: 4px; z-index:100 }
#ch4 {background: url(images/css/ch4.png) no-repeat; width:88px; height:60px; display:block; position:fixed; bottom:0; left: 4px; z-index:100 }

/*nav from http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html */
.navwrapper {height:58px; background:url(images/css/navbg.png) repeat-x;}
.nav, .nav ul {list-style-type:none; margin:0; padding:0;}
.nav a {text-decoration:none;}
/*IE5 list fix*/
.nav .sub li {float:left;}
.nav .sub > li {float:none;}
#navigation {
    position:relative;
    height:58px;   
    z-index:1000;
	width:900px; margin:0 auto;
	font-size:1em;
	font-weight:bold;	
}
.nav {position:absolute;}
.nav .link {
    width:225px;
    margin-top:-10075px;
    float:left;	
}
.nav a, .nav a:visited {
    position:relative;   
    text-decoration:none;
    color: #FFFF00;
    z-index:1000;
	border-bottom:none;
}
.nav .sub a {
    margin:-8px -1px 8px 0;
    width:225px;
	line-height:30px;
	text-indent: 0px;
	color: #FFFFFF;
	display:block;
}
.nav .sub {
    float:left;
	background: url(images/css/transbg50.png) repeat;
    padding-top:58px; 
    margin-top:-58px;	
	}
.nav .sub li {padding:0px 0}
.nav a.main {
    width:225px;
    line-height:58px;
    margin-top:10075px;
    margin-right:-224px;
    float:left;
	height:58px;
    line-height:58px;
}
.nav a.main span {padding:0 6px 0 42px; height:50px; line-height:50px; display:block;}
.nav a.main span.home {background:url(images/css/nav.png) no-repeat; background-position:0 -174px; }
.nav a.main span.kids {background:url(images/css/nav.png) no-repeat;}
.nav a.main span.parents {background:url(images/css/nav.png) no-repeat; background-position:0 -58px;}
.nav a.main span.businesses {background:url(images/css/nav.png) no-repeat;background-position:0 -116px; }

.nav .sub a span{background-color: #FF6600; color:#FFFFFF}
.nav .sub a span.subheading {background-color: #000000;}

.nav a.main:hover, .nav a.main:focus, .nav a.main:active, .nav a.main.hp {
margin-right:0; background:url(images/css/transbg50.png) repeat-x; outline:none;
}

.nav a.main span.home:hover, .nav a.main span.home:focus{background:url(images/css/nav.png) no-repeat; background-position:0 -406px;
 color: #FFFF00;}
.nav a.main span.kids:hover, .nav a.main span.kids:focus, .nav a.main span.kids:active {
background:url(images/css/nav.png) no-repeat; background-position:0 -232px; color: #FFFF00;}
.nav a.main span.parents:hover, .nav a.main span.parents:focus, .nav a.main span.parents:active {
background:url(images/css/nav.png) no-repeat; background-position:0 -290px; color:#FFFF00;}
.nav a.main span.businesses:hover, .nav a.main span.businesses:focus, .nav a.main span.businesses:active {
background:url(images/css/nav.png) no-repeat; background-position:0 -348px; color:#FFFF00;}

.nav .sub a:hover, .nav .sub a:focus, .nav .sub a:active {
    margin:-8px 0 8px 0;
    background: #FF6600;
    color:#fff;
}

a, a:hover, a:active, a:focus {}/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
.sub:hover {clear:both;}/*Opera fix*/

.nav a.main_selected {
    width:225px;
    line-height:58px;
    margin-top:10075px;
    margin-right:-224px;
    float:left;
	height:58px;
    line-height:58px;
}
.nav a.main_selected span {padding:0 6px 0 42px; height:50px; line-height:50px; display:block; }
.nav a.main_selected span.home {background:url(images/css/nav.png) no-repeat; background-position:0 -406px; }
.nav a.main_selected span.kids {background:url(images/css/nav.png) no-repeat; background-position:0 -232px;}
.nav a.main_selected span.parents {background:url(images/css/nav.png) no-repeat; background-position:0 -290px;}
.nav a.main_selected span.businesses {background:url(images/css/nav.png) no-repeat;background-position:0 -348px; }

.nav a.main_selected:hover, .nav a.main_selected:focus, .nav a.main_selected:active {
    margin-right:0;
	background: url(images/css/blankbg.png) repeat;
    color:#fff;
	outline:none;
}
.nav a.main_selected span.home:hover, .nav a.main_selected span.home:focus, .nav a.main_selected span.home:active {background:url(images/css/nav.png) no-repeat; background-position:0 -406px; color:#FFFF00}
.nav a.main_selected span.kids:hover, .nav a.main_selected span.kids:focus, .nav a.main_selected span.kids:active {background:url(images/css/nav.png) no-repeat; background-position:0 -232px; color:#FFFF00}
.nav a.main_selected span.parents:hover, .nav a.main_selected span.parents:focus, .nav a.main_selected span.parents:active {background:url(images/css/nav.png) no-repeat; background-position:0 -290px; color:#FFFF00}
.nav a.main_selected span.businesses:hover, .nav a.main_selected span.businesses:focus, .nav a.main_selected span.businesses:active {background:url(images/css/nav.png) no-repeat; background-position:0 -348px; color:#FFFF00}

/*banner*/
#banner { width:980px; margin:0 auto; height:190px; background:url(images/css/banner.png) top no-repeat; z-index:1; position:relative }
#banner img {margin:46px 0 0 166px;}
#banner a:link, #banner a:visited {border:none;}
#banner a:focus, #banner a:hover, #banner a:active {background:none;}

/*main areas*/
#areawrapper {width:930px; margin:0 auto;}
/* full width - yellow */
#area1 {width:930px; margin:0 auto; position: relative; top:-16px; z-index:0;}

#area1 .top {height:16px; background:url(images/css/yellowboxsprite.png) no-repeat; background-position:0 0;}
#area1 .middle {background:url(images/css/yellowboxsprite.png) repeat-y; background-position:-1860px 0; min-height:300px;}
#area1 .bottom {height:16px; background:url(images/css/yellowboxsprite.png) no-repeat; background-position:-930px 0;}

#area1 .block1 {width:600px; margin:0 0 0 20px; float:left;}
#area1 .block2 {width:280px; margin:0 0 0 630px; background-color:#FFFFFF; min-height:470px }
#area1 .block2 h2 {padding:4px;}
#area1 .block2 .news ul {list-style:none; margin:4px 10px; padding:0 0 6px 0;}
#area1 .block2 .news li {margin:8px 0;}

/* 2 thirds width - white */
#area2 {width:600px; float:left;  position: relative; top:-16px; z-index:0;}
#area2 .top {background: url(images/css/whiteboxsprite.png) no-repeat; background-position:0 0; height:16px;}
#area2 .middle {background: url(images/css/whiteboxsprite.png) repeat-y; background-position:-1200px 0; }
#area2 .bottom {background: url(images/css/whiteboxsprite.png) no-repeat; background-position:-600px 0; height:16px; }
#area2 h1, #area2 h2, #area2 p, #area2 h3 {padding-left: 16px; padding-right:16px;}
#area2 ul {padding:0 16px 0.2em 36px; }

/*1 third - for menu, boxes etc */
#area3 {width:315px; margin:0 0 0 615px; position: relative; top:-16px; z-index:0;}
#area3 {width:315px; margin:0 0 0 615px; position: relative; top:-16px; z-index:0;}

/* full width - white */
#area4 {width:930px; margin:0 auto; position: relative; top:-16px; z-index:0;}

#area4 .top {height:16px; background:url(images/css/largewhiteboxsprite.png) no-repeat; background-position:0 0;}
#area4 .middle {background:url(images/css/largewhiteboxsprite.png) repeat-y; background-position:-1860px 0;}
#area4 .bottom {height:16px; background:url(images/css/largewhiteboxsprite.png) no-repeat; background-position:-930px 0;}

#area4 .block1 {width:340px; float:left; margin: 0 25px 0 17px;}
#area4 .block2 {width:520px; float:left; margin:0 0; border:1px solid #cccccc;}
#area4 .block3 {width:860px; float:left; margin:0 25px;}

#area4 .block4 {width:280px; margin:0 0 0 20px; float:left;}
#area4 .block5 {width:600px; margin:0 0 0 310px;}

#area4 .block3 h1 {padding-left: 36px; padding-right:36px; color:#0DB141; font-size:2.2em; font-weight:bold; text-shadow: 1px 1px 1px #cccccc;}
#area4 .block3 p {padding-left: 36px; padding-right:36px}

#area4 .block4 ul {margin:0 1em; padding:0;}
#area4 .block4 h1 {font-size:1.6em;}

/*home page slideshow*/
#slideshow {
    position:relative;
   height:407px;
	width:560px;
}

#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow img.active {
    z-index:10;
    opacity:1.0;
}

#slideshow img.last-active {
    z-index:9;
}

/*vide*/
#vid {position:relative; left:10px;}

/* video competition*/
a.comphp, a.comphp:visited {width:575px;  border:1px solid #f47930; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin:0; padding:6px; margin-bottom:1em; background: #ffffff url(images/css/vidcompbg.jpg) right top no-repeat; display:block; text-decoration:none;}

a.comphp:hover {color:#FF6600;}

.comphp .title {font-size:1.4em;}
.comphp .text {line-height:150%; width:470px; display:block}

/*menus*/
.spotlightWrapper {margin:0;}
.spotlightWrapper ul {list-style-type: none; margin:0px; padding:0px; }
.spotlightWrapper ul li {float:left;}
.spotlightWrapper ul li a img {position:relative; border:none;}
.spotlightWrapper ul li a img.active {border:4px solid #FFFF00; z-index:1; left: -4px; top: -4px; }/*different for ie6*/

.spotlightWrapper ul li a:link {text-decoration:none; border-bottom:none; color:#000000;}
.spotlightWrapper ul li a:visited {text-decoration:none; border-bottom:none; color: #666666;}
.spotlightWrapper ul li a:focus, .spotlightWrapper ul li a:hover, .spotlightWrapper ul li a:active {background-color:#ffffff; border:none;}

/* tools box */
.tools {width:575px;  border:1px solid #f47930; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin:0; padding:6px; position:relative; top:-60px; font-weight:bold}

/* news category page */
.archive {border:1px solid #f47930; margin:4px 20px 0 20px; padding:6px 0}
.archive .postmetadata,  .archive_vid .postmetadata {font-size:0.7em;}

/* video category page */
h2.vidtb img {border:0; float:left; margin-right:10px;}
.archive_vid {border:1px solid #f47930; margin:4px 20px 0 20px; padding:6px 0; min-height:100px;}

/* thumbnail menus */
.tb {min-height:110px;}
.tb img {float:left; margin-right:4px}

/*in page feature box */
.feature {width:560px;  border:1px solid #f47930; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin:0.5em auto; padding:6px; }
#area2 .feature p, #area2 .feature h2 {padding-left:6px; padding-right:6px;}

/* sociable */
div.sociable {width: 92%; border:1px solid #f47930; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding:6px 4px 4px 4px; background-color:#FFFFFF }
div.sociable_tagline {float:left; margin:2px 8px 0 0; font-weight:bold;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}
.sociable ul li {
	background: none;
	display: inline !important;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}
.sociable a:link, .sociable a:visited {border:none;}
.sociable a:focus, .sociable a:hover, .sociable a:active {background-color:#ffffff;}
.sociable-hovers {
	opacity: .6;
	-moz-opacity: .6;
	filter: alpha(opacity=60);
}
.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
}



/*comments*/
h2#comments, h2#respond {border-top:1px dashed #f47930; margin-top:10px; margin-bottom:4px;}
h2#comments span {font-size:0.85em;}

form#commentform {margin:0; padding:0;}

input#author, input#email {width:300px; padding:2px; font-size:1em;}
textarea#comment {padding:2px; font-size:1em; font-family:Arial, Helvetica, sans-serif}

.comments-template ol{ list-style:none; margin:0 30px 10px 30px; padding:0;}
.comments-template li {margin: 0 0 16px 0;}

.commentmetadata {font-size:0.7em; margin-bottom:2px;}
.commentmetadata span {font-size:1.8em; color:#f47930;}
.commenttext {background-color:#f47930; color:#ffffff; margin:0 0 0 20px; -moz-border-radius: 6px; -webkit-border-radius: 6px;}

/*images*/
img.alignright, .wp-caption.alignright {float:right; margin-left:4px;}
img.alignleft, .wp-caption.alignleft {float:left; margin-right:4px;}

/*iframe - for flash with xml*/
iframe {margin-left:10px; z-index:0;}


/* tips*/
.tips {background-color:#00B3F0; color:#FFFFFF; border:4px solid #009BB1; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-bottom:10px}
.tips h2 {margin:0 12px;}
.tips p {margin:0 12px 8px 12px;}

/*links*/
.links {background-color:#00B3F0; color:#FFFFFF; border:4px solid #009BB1; -moz-border-radius: 6px; -webkit-border-radius: 6px; margin-bottom:10px}
.links p, .links h2 {margin:0 8px;}
.links ul {margin:0 8px 8px 8px; list-style:none; padding:0}
.links li {padding:4px 0;}
.links a:link, .links a:visited {color:#FFFFFF; border-bottom:1px dashed #ffffff;}
.links a:focus, .links a:hover, .links a:active {color: #00B3F0;}

.links.orange {background-color:#F47930; border:4px solid #F45030;}
.links.green {background-color:#0DB14B; border:4px solid #0B923E;}

/*ul.contact {height:130px;}*/
ul.contact {height:140px;}
ul.contact2 {height:140px;}
ul.contact img, ul.contact2 img {float:right; margin: 4px 0}

ul.briefing {height:160px;}
ul.briefing img {float:right; margin: 4px 0}

/*comm health champions*/
.links a.chc1, .links a.chc1:visited {height:60px; background:#FFFFFF url(images/people/clairecaterer60.jpg) left no-repeat; color:#F47930; text-decoration:none; display:block; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding:0 0 0 66px; border-bottom:none; font-size:1.1em; font-weight:bold; }
.links a.chc2, .links a.chc2:visited {height:60px; background:#FFFFFF url(images/people/carolinewaugh60.jpg) left no-repeat; color:#F47930; text-decoration:none; display:block; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding:0 0 0 66px; border-bottom:none; font-size:1.1em; font-weight:bold; }
.links a.chc3, .links a.chc3:visited  {height:60px; background:#FFFFFF url(images/people/waqashameed60.jpg) left no-repeat; color:#F47930; text-decoration:none; display:block; -moz-border-radius: 6px; -webkit-border-radius: 6px; padding:0 0 0 66px; border-bottom:none; font-size:1.1em; font-weight:bold;}

a.chc1 span, a.chc2 span, a.chc3 span { position:relative; top:18px;}
.links a.chc1:hover, .links a.chc2:hover, .links a.chc3:hover {color: #FF0000;}

/* footer */
#footer {background: url(images/css/footer.png) top repeat-x; clear:both;}
#footer #wrapper {width:930px; margin:0 auto;}

#footer #col1{width:328px; float: left; margin:30px 0 0 0;}

#footer .box1 {background-color:#FFFFFF; border:4px solid #008000; -moz-border-radius: 6px; -webkit-border-radius: 6px; width:300px; padding:10px; font-size:1.6em; min-height:80px; margin:0 0 10px 0;}
#footer .box1 a:link, #footer .box1 a:visited {text-decoration:none; color:#006600;}

#footer .box2 {background-color:#FFFFFF; border:4px solid #008000; -moz-border-radius: 6px; -webkit-border-radius: 6px; width:300px; padding:10px; font-size:1.6em;  margin:0 0 10px 0;}
#footer .box2 img.fb {vertical-align:top; position:relative; top:16px; margin:0 0 0 20px;}
#footer .box2 a:link, #footer a:visited {border:none;}

#footer #col2 {width:580px;  float:right; margin:30px 0 0 0; color:#FFFFFF}
#footer #col2  ul {width:140px; float:left; list-style:none; margin:0 4px 0 0; padding:0; font-size:0.75em;}
#footer #col2 li {padding:2px 0;}
#footer #col2 li.title {font-size:1.4em; border-bottom:1px solid #CCCCCC} 
#footer #col2 a:link, #footer #col2 a:visited {color:#FFFFFF; text-decoration:none; border:none}
#footer #col2 a:focus, #footer #col2 a:hover, #footer #col2 a:active { background-color:#FFFFFF; color:#660000;}

#footer p.info {clear:both;  text-align:right; font-size:0.85em; color:#FFFFFF}
#footer p.info a:link, #footer p.info a:visited {color:#FFFFFF; text-decoration:none; margin:0 0 0 10px; font-size:0.75em;}
#footer p.info a:focus, #footer p.info a:hover, #footer p.info a:active {background-color:#FFFFFF; color:#660000;}