/* reset */
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; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
/* ----- */

.left {float: left;}
.right {float: right; }
.clear {clear: both;}
body {font-family: Helvetica, Verdana, Arial, sans-serif; background: #1b5362;}
.wrapper {width: 975px; margin: 0 auto; position: relative;}
#container {width: 100%;}

/* --- Header --- */
#header {height: 127px; padding: 24px 0 0; background: url(../img/header-strip.gif) 0 0 repeat-x;}
#header .logo {width: 320px; height: 101px; text-indent: -9999px; background: url(../img/logo.gif) 0 0 no-repeat;}

/* --- Contact pod in header --- */
#header #contact { width: 355px; height: 65px; padding: 10px 0 0; position: absolute; top: -24px; right: 5px; background: url(../img/contact-pod.gif) 0 0 no-repeat; } 
#header #contact strong, #header #contact span { display: block; }
#header #contact strong {font-size: 45px; color: #ed1c24; text-align: center; }
#header #contact span, #header #contact a { color: #002a5f; }
#header #contact a { font-weight: bold; text-decoration: none; line-height: 21px;}
#header #contact a:hover { padding: 0 0 1px; border-bottom: 1px #002a5f solid; }
#header #contact span { margin: -4px 38px 0 0; font-size: 13px; text-align: right; }
* html body #header #contact span { margin-top: -3px; }
#header #kcfm { width: 107px; height: 55px; position: absolute; bottom: -15px; right: 10px; text-indent: -9999px; background: url(../img/new-kcfm-logo.jpg) 0 0 no-repeat; }
#header #strapline { position: absolute; left: 270px; bottom: -20px; font-size: 24px; line-height: 27px; font-style: italic; font-weight: bold; color: #ed1c24; }

/* --- Navigation --- */
#nav { width: 100%; height: 40px; padding: 8px 0 0; overflow: hidden; left: 0; position: relative; background: #2d7e90 url(../img/nav-bg-block.gif) 0 0 repeat-x; }
#nav ul { text-align: center; position: relative; left: 50%; text-transform: lowercase; font-size: 16px; line-height: 18px; }
#nav ul, #nav li, #nav a { float: left; }
#nav li { margin: 0 6px 0 0; position: relative; right: 50%; }
#nav li a { cursor: pointer; display: block; color: #fff; text-decoration: none; background: #1d515e url(../img/link-pod-right.gif) right 0 no-repeat; }
#nav li a span { height: 25px; padding: 7px 11px 0 11px; display: inline-block; background: url(../img/link-pod-left.gif) 0 0 no-repeat; }
#nav li.on, #nav li.on a, #nav li.on a span { background: none; }
#nav li.on { margin-top: -8px; padding-top: 8px; background: url(../img/nav-on.gif) center 0 no-repeat; }
#nav a:hover { cursor: pointer; background: #2cbcca url(../img/link-pod-right.gif) right -32px no-repeat; }
#nav a:hover span { background: url(../img/link-pod-left.gif) 0 -32px no-repeat; }
#nav li.on a:hover, #nav li.on a:hover span { background: none; }
#nav li.red a { background: #ed1c24 url(../img/redlink-pod-right.gif) right 0 no-repeat; }
#nav li.red a span { background: url(../img/redlink-pod-left.gif) 0 0 no-repeat; }
#nav li.red a:hover { background: #2cbcca url(../img/redlink-pod-right.gif) right -32px no-repeat; }
#nav li.red a:hover span { background: url(../img/redlink-pod-left.gif) 0 -32px no-repeat; }

/* --- Content --- */
#content { min-height: 429px; height: auto !important; height: 429px; padding: 9px 0 0; background: #2191ab url(../img/content-strip.gif) 0 0 repeat-x; }
#content .section { height: 420px; float: left; color: #fff; }
#main { width: 745px; height: 420px; position: relative; background: url(../img/main-bg.jpg) 0 0 no-repeat; }
#main h2 { height: 15px; padding: 20px 25px 0; font-size: 30px; color: #ed1c24; }
#main h2 span { color: #002a5f; }

#main .pod { width: 336px; height: 336px; margin-top: 18px; padding: 18px 0 0 20px; float: left; display: inline; }
* html body #main .pod { margin-top: 0; }
#main .pod h3 { margin: 0 0 5px; font-size: 22px; }
#main .pod p { font-family: Arial; position: relative; }
#main .pod p.intro { padding: 0 50px 0 0; font-size: 15px; line-height: 18px; }
#main .pod a.more { width: 103px; height: 42px; display: block; position: absolute; bottom: -45px; left: -5px; }
#main .pod a.more span { display: block; height: 0; overflow: hidden; }
#main .pod p.charity-link { clear: left; font-size: 18px; position: relative; }
#main .pod p.charity-link a { color: #fff; font-weight: bold; text-decoration: none; }
#main .pod p.charity-link a:hover { padding: 0 0 1px; border-bottom: 1px #fff solid; }
#charity-1 { margin-left: 17px; background: url(../img/house-of-light-bg.jpg) 0 0 no-repeat; }
#main .pod div { margin: 30px 0 15px; float: left; }
#main .pod p.left { font-size: 13px; line-height: 16px; }
#main .pod img { margin: 3px 0 0 12px; float: left; }
#charity-1 p.left { width: 110px; }
#charity-2 p.left { width: 135px; }
#charity-1 a.more { background: url(../img/red-more-btn.jpg) 0 0 no-repeat; }
#charity-2 { background: url(../img/down-right-special-bg.jpg) 0 0 no-repeat; }
#charity-2 p.intro { padding: 0 155px 0 0 !important; }
#charity-2 a.more { background: url(../img/blue-more-btn.jpg) 0 0 no-repeat; }
#charity-2 img { margin-left: 5px !important; }

/* added by jg */
#divCharityLinks{padding: 25px 0 0 19px;}
#divCharityLinks a{float: left; width: 348px; height: 185px; background-color: Red; display: block; text-indent: -99999px;}
#divCharityLinks a.clsLeftCharity{margin: 0 10px 0 0; background: url(../img/charity-1.jpg) 0 0 no-repeat;}
#divCharityLinks a.clsRightCharity{background: url(../img/charity-2.jpg) 0 0 no-repeat;}
.clsPadTheContent{padding: 0 0 40px 0;}
/* added by jg */

#main.down { min-height: 420px; height: auto !important; height: 420px; background: url(../img/main-bg.png) 0 0 repeat-y; }
#main.down h2.top { background: url(../img/main-top.gif) 0 0 no-repeat; padding: 25px 25px 0; margin: 0 0 15px 0; font-size: 2.0em;}
#main.down .pod { height: 170px; background: url(../img/mail.jpeg) 0 0 no-repeat;}
#main.down p { padding: 20px 25px 0; color: #000; font-size: 0.9em; line-height: 20px;}
#main.down ul{color: #000; font-size: 0.9em; list-style: circle; display: block; padding: 20px 0 0 42px; line-height: 20px;}
#main.down h4{color: #002A5F; font-size: 1.1em; padding: 20px 25px 0 25px; line-height: 22px;}
#main.down h4 a{color: #ff0000;}
#main.down img{float: right; padding: 0 30px 20px 30px;}

#main-btm { width: 745px; height: 35px; position: absolute; bottom: 0; left: 0; background: red url(../img/main-btm.gif) 0 0 no-repeat; }

#content #features { width: 205px; margin: 0 0 0 12px; padding: 14px 0 0 13px; background: url(../img/features-bg.jpg) 0 0 no-repeat; }
#content #features .pod { width: 190px; font-family: Arial; }
#content #features .pod p.text { font-size: 13px; line-height: 15px; }
#content #features .pod p.cta a span { display: block; height: 0; overflow: hidden; }
#content #features .pod p.cta a:hover { cursor: pointer; }
#donate { height: 164px; padding: 12px 0 0; background: url(../img/donate-bg.jpg) 0 0 no-repeat; }
#donate h4 { width: 134px; height: 32px; margin: 0 0 0 30px; text-indent: -9999px; background: url(../img/justgiving.jpg) 0 0 no-repeat; }
#donate p.text { width: 150px; margin: 25px auto 5px; text-align: center; }
#donate p.cta a { width: 147px; height: 42px; margin: 0 auto; display: block; background: url(../img/donate-now.jpg) 0 0 no-repeat; }

#gallery { height: 200px; padding: 17px 0 0; background: url(../img/gallery-bg.jpg) 0 0 no-repeat; }
#gallery h4 { font-size: 20px; text-align: center; }
#gallery p.text { width: 160px; margin: 30px auto 0; }
#gallery p.cta a { width: 141px; height: 36px; margin: 38px auto 0; display: block; background: url(../img/visit-kcfm.png) 0 0 no-repeat; }

/* --- Footer --- */
#footer { padding: 16px 0 20px 0; font-family: Arial; font-size: 12px; color: #ed1c24; border-top: 1px solid #42abbe; }
#footer a, #footer span { color: #a4d9e5; }
#footer a { text-decoration: none; }
#footer a:hover { padding: 0 0 1px; border-bottom: 1px #a4d9e5 solid; }
#footer .right { width: 660px; text-align: right; line-height: 15px;  }

/* added by jg */
#footer ul{display: inline; list-style: none; line-height: 18px;}
#footer ul li{display: inline; list-style: none; padding: 0 5px 0 0;}
#footer ul li.clsLIFooterBar{border-left: solid 1px #5592A0; padding: 0 5px 0 7px;}
#footer p { margin-bottom: 8px; }
#footer p.details { margin: 5px 0 0 0; font-size: 11px; color: #fff; line-height: 18px; }

/* sponsors */
#sponsors_panel { width: 720px; margin: 0 auto; padding: 0 0 20px 0; }
#sponsors_panel p { text-align: center; color: rgb(164, 217, 229); font-size: 11px; margin-bottom: 5px; }
ul#sponsors { width: 700px; height: 50px; padding: 20px 10px; background: url(../img/sponsors/footer-bg.png) top right no-repeat; }
ul#sponsors li { list-style: none; display: inline; }
ul#sponsors li a { display: block; height: 50px; width: 120px; float: left; margin: 0 10px; }
ul#sponsors li a span { display: none; }
ul#sponsors li.sewell a { background: url(../img/sponsors/sewell.png); }
ul#sponsors li.hulltrains a { background: url(../img/sponsors/hull_trains.png); }
ul#sponsors li.napoleons a { background: url(../img/sponsors/napoleons.png); }
ul#sponsors li.mobilepoint a { background: url(../img/sponsors/mobile_point.png); }
ul#sponsors li.mediapoint a { background: url(../img/sponsors/media_point.png); }
ul#sponsors li.pds a { background: url(../img/sponsors/pds.jpg); width: 108px; }