/* 
-------------------------------------------------------------------
Sightsavers - The Village stylesheet: global styles
-------------------------------------------------------------------
*/

/* Body, general formatting and reusable classes etc
--------------------------------------------------------------------------
JH 09-02-09: SSI-616 Added li, ol, ul to list of elements below
*/

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, dd, dl, dt, li, ol, ul, fieldset, form, label, 

legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; }

img, embed, form, fieldset { border: 0; vertical-align: bottom; }

body { font: 62.5% "Arial", sans-serif; background: #fff url(/village/images/pagebg.gif) repeat-x; color: #333; 

text-align: center; }

input, select, textarea { font: 1em "Arial", sans-serif; vertical-align: bottom; }

table { border-collapse: collapse; border-spacing: 0; }

/*
JH 09-02-09: SSI-616 Removed li, ol, ul styling - overriden with above comment. Added list-style:none;
li, ol, ul { margin-left: 8px; padding: 0; }
*/
ul, ol { list-style: none; }

hr { width: 100%; color: #000; background-color: #000; border: 0; height: 2px; }

.hide, .skipNav { position: absolute; top: 0; left: -9999px; }
.skipNav:hover, .skipNav:active, .skipNav:focus { position: relative; top: auto; left: auto; }

.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }

.imgLeft { margin: 1em 1em 1em 0 !important; padding: 0 !important; font-size: 1em !important; float: left !important; }
.imgRight { margin: 1em 0 1em 1em !important; padding: 0 !important; font-size: 1em !important; float: right !important; }

.col2 { width: 50%; float: left; }
.col3 { width: 33.3%; float: left; }
.col4 { width: 25%; float: left; }
.col5 { width: 20%; float: left; }

a { color: #328e92; text-decoration: none; }
a:hover { color: #cb551b; text-decoration: underline; }
a:active, a:focus { color: #000; }

/* Wrapper, left col
--------------------------------------------------------------------------
*/

#wrapper { width: 77.3em; margin: 0 auto; background: #fff url(/village/images/wrapperbg.gif) no-repeat; 

text-align: left; }
#wrapperbg { padding: 1em 0; background: url(/village/images/wrapperbg.gif) no-repeat top right; /*fix for 

opera:*/ width: 100%; }

#leftCol { width: 13.6em; margin: 0 0 0 1.4em; float: left; }

#leftCol #logo { width: 13.6em; height: 11em; }
#leftCol #logo img { font-size: 1.8em; width: 100%; height: 100%; }

#leftCol #mainMenu { margin: .5em 0 0 0; border-top: 1.4em solid #cb551b; }
#leftCol #mainMenu li { border-bottom: 1px solid #cb551b; }
#leftCol #mainMenu li a { display: block; padding: .3em; font-size: 1.3em; font-weight: bold; color: #000; }
#leftCol #mainMenu li.on a { padding: .3em .3em .3em 1em; background: #eae7d0 url(/village/images/menu-on.gif) 

no-repeat .3em .6em; }
#leftCol #mainMenu li a:hover { text-decoration: none; color: #cb551b; }
#leftCol #mainMenu li a:active, #leftCol #mainMenu li a:focus { color: #666; }
#leftCol #mainMenu li.rss { background: url(/village/images/leftcol-rss.gif) no-repeat .5em .5em; }
#leftCol #mainMenu li.rss a { padding: 2em .3em .1em .3em; }
#leftCol #mainMenu li.rss span span { position: absolute; top: 0; left: -9999px; }
#leftCol #mainMenu li.rss span a { padding: 0 .5em .5em .5em; font-size: 1.1em; font-weight: normal; color: #328e92; }
#leftCol #mainMenu li.rss span a:hover { text-decoration: underline; }
#leftCol #mainMenu li.rss span a:active, #leftCol #mainMenu li.rss span a:focus { color: #666; }

#leftCol #banner p { margin: 1.8em 0 0 0; padding: 0 0 1.8em 0; border-bottom: 1px solid #cb551b; text-align: center; }

/* Right col + main content
--------------------------------------------------------------------------
*/

#rightCol { width: 60.3em; margin: 0 1.4em 0 0; float: right; }

#flashBanner { width: 60.3em; height: 12.9em; }

#content { width: 46em; margin: .6em 0 0 0; padding: 0 0 .5em 0; border-bottom: 1px solid #ccc; float: left; }

/* h1 - standard page */
h1.standard { margin: .1em 0 -.25em 0; font: bold 1.8em "Arial", sans-serif; color: #333; background: #eae7d0; border-top: 1px solid 

#ccc; border-bottom: 1px solid #ccc; }
h1.standard span { border-top: 1px solid #fff; border-bottom: 1px solid #fff; display: block; padding: .5em .8em; }

/* h1 - blogger info page */
#content h1.blogger { font: bold 2.3em "GillSans", "Arial", sans-serif; padding: .8em 0 .75em .75em; color: #574333; background: 

#eae7d0 url(/village/images/h1bg.gif) no-repeat top right; }
#content h1.blogger span { float: right; font-size: .75em; padding: .25em 1.2em 0 0; color: #cb551b; }
#content h1.blogger span span { position: absolute; top: 0; left: -9999px; }

#content .profile {text-align : left;  padding: .5em .5em .5em .5em; width: 45em; display : block; border-top : 1px solid #ccc; 

margin-top : .5em; }
#content .profile .image { width: 9.0em; float: left; }
#content .profile div.info {margin: .6em 0 0 0; font-size: 1.1em;} 
#content .profile div.info span.header {font: bold 1.5em "GillSans", "Arial", sans-serif; padding: 0; margin : 0;color: #574333;}



/* standard pages */

#content .standardContent { padding: .5em 1.5em 1.5em 1.5em; background: #e9f8f8; }
#content .standardContent.blog { background: #fff; }
#content .standardContent h2 { margin: .8em 0 0 0; font-size: 1.2em; color: #cb551b; }
#content .standardContent p { margin: .9em 0 0 0; font-size: 1.1em; }
#content .standardContent p.intro { margin: .8em 0 0 0; font-size: 1.2em; font-weight: bold; color: #287275; }

#content .standardContent p.imgLeft img { border: 1px solid #fff; }

/* faq page */

#TJK_UL { margin: 0; padding: .8em 1.3em; background: #e9f8f8 url(/village/images/faq-bordething.gif) repeat-x; 

font-size: 1.2em; text-align: right; }
#TJK_UL li { display: inline; }

#TJK_DL dt { margin: 0; padding: .8em 1.3em; background: #e9f8f8 url(/village/images/faq-bordething.gif) 

repeat-x; font-weight: bold; border-top: 1px solid #fff; color: #624c3a; font-size: 1.2em; }
#TJK_DL dt a { color: #624c3a; background: url(/village/images/faq-arrow.gif) no-repeat 1px 0.3em; padding: 0 0 

0 13px; display: block; }
#TJK_DL dt.DTminus a { color: #287275; background: url(/village/images/faq-arrow-on.gif) no-repeat 0 0.35em; }
#TJK_DL dd { margin: 0; padding: .9em 1.4em; background: #f7f6ec url(/village/images/faq-bordething.gif) 

repeat-x; font-size: 1.1em; border-top: 1px solid #fff; }
#TJK_DL .showDD { position: relative; top: auto; left: auto; }
#TJK_DL .hideDD { position: absolute; top: 0; left: -9999px; }

/* blogger info pages */

#content .aboutOverview { background: #eae7d0; }
#content .aboutOverview .image { width: 11.5em; float: left; text-align: center; }
#content .aboutOverview .image p { margin: 0; padding: 0; }
#content .aboutOverview .info { width: 32.4em; padding: 1em; float: right; background: #fff; }
#content .aboutOverview .info dl { font-size: 1.1em; padding: .3em 0 0 0; }
#content .aboutOverview .info dl dt { width: 20%; padding: 0 0 .3em 0; float: left; clear: left; font-weight: bold; }
#content .aboutOverview .info dl dd { width: 79%; padding: 0 0 .3em 0; float: left; }
/*#content .aboutOverview .info p { margin: .6em 0 0 0; font-size: 1.1em; }*/
#content .aboutOverview .info .introduction { margin: .6em 0 0 0; font-size: 1.1em; }

#content .aboutLatest { margin: .5em 0; padding: .5em 0; border-top: 1px solid #ccc; }
#content .aboutLatest ul li { width: 47%; background: #36a9ae url(/village/images/about-latest-bg.gif); float: left; }
#content .aboutLatest ul li.right { float: right; }
#content .aboutLatest ul li { font-weight: bold; font-size: 1.1em; padding: .5em; color: #fff; display: block; }
#content .aboutLatest ul li a { margin-top : .5em; color: #fff; }
#content .aboutLatest ul li span { color: #eae7D0; display: block; padding: 0 0 .2em 0; }
#content .aboutLatest ul li a:hover span { text-decoration: none; }
/*#content .aboutLatest ul li img { width: 10.3em; height: 10.3em; font-size: .9em; float: left; margin: 0 .5em 0 0; }*/
#content .aboutLatest ul li img { font-size: .9em; float: left; margin: 0 .5em 0 0; }

#content .aboutListings { }
#content .aboutListings ul li { margin: .5em 0; padding: .5em 0; border-top: 1px solid #ccc; }
#content .aboutListings ul li a { font-size: 1.1em; font-weight: bold; color: #cb551b; }
/*#content .aboutListings ul li a img { width: 10.94em; height: 10.94em; margin: 0 1em 0 .5em; font-size: .8em; float: left; }*/
#content .aboutListings ul li p { margin: 0 0 .6em 0; font-size: 1.1em; }
/*#content .aboutListings ul li img { width: 10.94em; height: 10.94em; margin: 0 1em 0 .5em; font-size: .8em; float: left; }*/
#content .aboutListings ul li img { margin: 0 1em 0 .5em; font-size: .8em; float: left; }
#content .aboutListings ul li div.item div.itemText {margin : 0; padding : 0; float : left; display : block;}

#content .standardContent { }
#content .standardContent ul li { font-size:1.1em; margin: .5em 0; padding: .1em 0; list-style-type:disc;list-style-position:inside;}
#content .standardContent ol li { font-size:1.1em; margin: .5em 0; padding: .1em 0; list-style-type:decimal;list-style-position:inside;}

#content fieldset.blogForm { padding: 1.2em 1.5em; background: #e5f7f7; }
#content fieldset.blogForm h2 { font-size: 1.7em; color: #2e9a9f; }
#content fieldset.blogForm p { margin: .6em 0 0 0; font-size: 1.1em; }
#content fieldset.blogForm a { color: #2a7578; }
#content fieldset.blogForm fieldset.gen { margin: 1em 0 0 0; font-size: 1.1em; }
#content fieldset.blogForm fieldset.gen label { margin: .2em 0 0 0; float: left; }
#content fieldset.blogForm fieldset.gen input { width: 55%; margin: 0 2% .4em 0; float: right; }
#content fieldset.blogForm fieldset.login { margin: 1em 0 0 0; font-size: 1.1em; }
#content fieldset.blogForm fieldset.login label { width: 14.8%; margin: .2em 0 0 0; float: left; }
#content fieldset.blogForm fieldset.login input { width: 32%; margin: 0 2% 0 0; float: left; }
#content fieldset.blogForm fieldset.login input.pass { margin: 0; float: right; }
#content fieldset.blogForm fieldset.login input { width: 32%; float: left; }
#content fieldset.blogForm fieldset.comments { margin: 1em 0 0 0; font-size: 1.1em; }
#content fieldset.blogForm fieldset.comments label { position: absolute; top: 0; left: -9999px; }
#content fieldset.blogForm fieldset.comments textarea { width: 99%; }
#content fieldset.blogForm fieldset.terms { margin: 1em 0 0 0; font-size: 1.1em; float: left; }
#content fieldset.blogForm fieldset.terms label, #content fieldset.blogForm fieldset.terms input { vertical-align: middle; }
#content fieldset.blogForm input.submit { width: 7.1em; height: 2.2em; margin: 1em 0 0 0; float: right; }

/* Features - far right column
--------------------------------------------------------------------------
*/

#features { width: 13.6em; margin: 0; float: right; }

#features .listenwatch { margin: .5em 0 0 0; padding: 0; list-style: none; }
#features .listenwatch li { border-bottom: 1px solid #ccc; }
#features .listenwatch li.listen { background: url(/village/images/features-listen.gif) no-repeat center left; }
#features .listenwatch li.watch { background: url(/village/images/features-watch.gif) no-repeat center left; }
#features .listenwatch li a { display: block; font-size: 1.2em; color: #503926; padding: .8em .2em .8em 35px; text-transform: 

uppercase; font-weight: bold; }

#features .podcast { padding: 1em; background: #cb551b; }
#features .podcast h2 { font-size: 1.5em; color: #fff; }
#features .podcast ul { margin: .5em 0; }
#features .podcast ul li { padding: .5em 0 0 0; }
#features .podcast ul li a { color: #fff; }
#features .podcast ul li a img { width: 10.7em; height: 2.2em; }
#features .podcast ul li a span { display: block; font-size: 1.1em; }
#features .podcast ul li a:hover span { text-decoration: underline; }

/* Homepage
--------------------------------------------------------------------------
*/

/* notice board */

#noticeboard { width: 37.5em; height: 71.7em; margin: .6em 0 0 0; float: left; position: relative; background: #ccc; }

#noticeboard h1 { font-size: 1.8em; position: absolute; top: 0; left: 0; z-index: 0; }

#noticeboard .img { width: 37.5em; height: 50.9em; position: absolute; top: 0; left: 0; z-index: 1; }
#noticeboard .img img { width: 37.5em; height: 50.9em; z-index: 1; }

#noticeboard .spotlight { width: 19.5em; height: 6.2em; position: absolute; top: 9.2em; left: 4em; z-index: 2; }
#noticeboard .spotlightMore { width: 7.6em; position: absolute; top: 15.6em; left: 5em; z-index: 2; }
#noticeboard .spotlightMore img { width: 7.6em; height: 2.8em; }

#noticeboard .blog { width: 12.5em; height: 9.1em; position: absolute; top: 21.2em; left: 23.2em; z-index: 2; }
#noticeboard .blogHeader { font-size: 1em; position: absolute; top: 19.5em; left: 23.2em; z-index: 0; }
#noticeboard .blogHeader span { font-size: 1.3em; }
#noticeboard .blogMore { width: 5.4em; position: absolute; top: 30.2em; left: 30em; z-index: 2; }
#noticeboard .blogMore img { width: 5.4em; height: 3.3em; }

#noticeboard .goodNews { width: 11.5em; height: 9.1em; position: absolute; top: 29.1em; left: 2.2em; z-index: 2; }
#noticeboard .goodNewsHeader { font-size: 1em; position: absolute; top: 27.4em; left: 2.2em; z-index: 0; }
#noticeboard .goodNewsHeader span { font-size: 1.3em; }
#noticeboard .spotlightGoodNews { width: 4.2em; position: absolute; top: 35em; left: 9.5em; z-index: 2; }
#noticeboard .spotlightGoodNews img { width: 4.2em; height: 2.6em; }

#noticeboard .podcast { width: 21em; height: 4.8em; position: absolute; top: 41.1em; left: 13.8em; z-index: 2; }
#noticeboard .podcastHeader { font-size: 1em; position: absolute; top: 39.4em; left: 13.8em; z-index: 0; }
#noticeboard .podcastHeader span { font-size: 1.3em; }
#noticeboard .spotlightPodcast { width: 10em; position: absolute; top: 38.5em; left: 23em; z-index: 2; }
#noticeboard .spotlightPodcast img { width: 10em; height: 2.4em; }

#noticeboard .spotlight p, #noticeboard .blog p, #noticeboard .podcast p { font-size: 1.1em; }
#noticeboard .goodNews p { font-size: 1.3em; color: #fff; }

#noticeboard .map { position: absolute; top: 46.2em; width: 37.5em; height: 26.5em; left: 0; z-index: 2; }
#noticeboard .map img { width: 37.5em; height: 25.3em; }

#spotlights { width: 22em; margin: .6em 0 0 0; float: right; }
#spotlights .box { margin: .6em 0; padding: .5em; background: #eae7d0; }
#spotlights .box h2 { font-size: 1.6em; color: #574333; }
#spotlights .box h2 a { color: #574333; }
#spotlights .box p { margin: .4em 0 0 0; font-size: 1.1em; }

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

#footer { text-align: center; }
#footer ul { padding: 1em 0; }
#footer ul li { font-size: 1.1em; color: #999; display: inline; }
#footer ul li a:active, #footer ul li a:focus { color: #333; }
#footer ul li.copyright { color: #37a9ae; }

/* IE Mac fixes
--------------------------------------------------------------------------
*/

/*\*//*/
.hide, .skipNav { display: none; visibility: hidden; }
/**/

/* Clear fixes
--------------------------------------------------------------------------
*/

.clearfix:after, #wrapperbg:after, #content .standardContent:after, #content .aboutOverview:after, #content .aboutOverview .info:after, 

#content .aboutOverview .info dl:after, #content .aboutLatest:after, #content .aboutLatest ul li a:after, #content .aboutListings ul 

li:after, #content fieldset.blogForm:after, #content fieldset.blogForm fieldset.gen div:after { content: "."; display: block; height: 

0; clear: both; visibility: hidden; }

.clearfix, #wrapperbg, #content .standardContent, #content .aboutOverview, #content .aboutOverview .info, #content .aboutOverview .info 

dl, #content .aboutLatest, #content .aboutLatest ul li a, #content .aboutListings ul li, #content blogForm.sendComment, #content 

fieldset.blogForm fieldset.gen div { display: inline-block; }

/* Hides from IE-mac \*/
.clearfix, #wrapperbg, #content .standardContent, #content .aboutOverview, #content .aboutOverview .info, #content .aboutOverview .info 

dl, #content .aboutLatest, #content .aboutLatest ul li a, #content .aboutListings ul li, #content fieldset.blogForm, #content 

fieldset.blogForm fieldset.gen div { zoom: 1; }
/* End hide from IE-mac */