/* ----------  BACKGROUNDS  ---------- */
body { background: #000 url(../../../../images/backgrounds/home.jpg) top center no-repeat; }
#footer-bg { background-image: url(../../../../images/global/footer-bg-1.png); }
#footer-gradient { background-image: url(../../../../images/global/footer-bg-1-gradient.png); }
#content { padding-bottom: 20px !important; }

/* ----------  HERO  ---------- */
#hero-container { width: 668px; height: 407px; overflow: hidden; position: relative; background: #90D300; float: left; z-index: 200; }
#hero-frame { width: 668px; height: 309px; background: url(../../../../images/home/hero-frame2.png) top left no-repeat; position: absolute; z-index: 400; }
.js #hero-frame { cursor: pointer; }


/*----------- style for the 'read more' text -----------------------------*/
.moreNews { position: absolute; padding: 0px; right: 0; bottom: -8px; display: none;}
.moreNews a:hover { text-decoration: underline !important;}


.hero { width: 668px; height: 309px; background: #333; position: absolute; display: none; }
.hero-active { display: block; }
.hero div { position: relative; z-index: 300; overflow: hidden; }

.hero h1 { margin-top: 30px; text-align: right; margin-right:1px; font-size: 3em; line-height: 134%; }
.hero h1 a { color: #FFF; font-weight: bold; margin: 0; float: none; text-decoration: none; }
.hero h1 span { padding: 2px 20px; }
.hero p { position: absolute; bottom: 20px; right: 0; padding: 5px 20px 5px 10px; font-weight: bold; color: #FFF; font-size: 1.4em; text-align: right; line-height: 130%; background: url(../../../../images/home/hero-caption-bg.png); text-shadow: #000 0 0 5px; }
.hero a.link { width: 41px; height: 40px; float: right; clear: right; margin-right: 20px; margin-top: 10px; text-indent: -10000px; }

/* hero colours */
.hero-green h1 span { background: #6FA000 url(../../../../images/home/hero-green-h1.png) top right repeat-y; }
.hero-green a.link { background: url(../../../../images/home/hero-green-button.png) top left no-repeat; }
.hero-blue h1 span { background: #065890 url(../../../../images/home/hero-blue-h1.png) top right repeat-y; }
.hero-blue a.link { background: url(../../../../images/home/hero-blue-button.png) top left no-repeat; }
.hero-red h1 span { background: #CE1010 url(../../../../images/home/hero-red-h1.png) top right repeat-y; }
.hero-red a.link { background: url(../../../../images/home/hero-red-button.png) top left no-repeat; }
.hero-pink h1 span { background: #E51E72 url(../../../../images/home/hero-pink-h1.png) top right repeat-y; }
.hero-pink a.link { background: url(../../../../images/home/hero-pink-button.png) top left no-repeat; }

#hero-items { height: 98px; min-height: 98px; margin: 0 0 0 43px; background: url(../../../../images/home/hero-bg.png) bottom left repeat-x; /*overflow: hidden;*/ width: 10000px; }
#hero-items li { float: left; width: 144px; padding-right: 2px; height: 97px; background: url(../../../../images/home/hero-line.png) bottom right no-repeat; position: relative; z-index: 500; }
#hero-items li a { color: #373534; text-decoration: none; padding: 8px 10px 10px 10px; display: block; outline: 0; }
#hero-items li a strong { font-size: 1.3em; display: block; height: 2.8em; }
#hero-items li a span { font-size: 1; display: block; line-height: 120%; }
#hero-items li a:hover strong { text-decoration: underline; }

#hero-controls { margin-top: 309px; }
.hero-control { width: 43px; height: 98px; margin-top: 309px; position: absolute; z-index: 600; }
.hero-control a { display: block; height: 58px; text-align: left; text-indent: -10000px; outline: 0; margin-top: 18px; }
#hero-prev { background: url(../../../../images/home/hero-prev.png) bottom left no-repeat; }
#hero-prev a { background: url(../../../../images/home/hero-prev-button2.png) bottom left no-repeat; margin-left: 1px; }
#hero-prev a.disabled { background-position: top left; }
#hero-next { background: url(../../../../images/home/hero-next.png) bottom left no-repeat; margin-left: 625px; }
#hero-next a { background: url(../../../../images/home/hero-next-button2.png) bottom right no-repeat; margin-right: 1px; }
#hero-next a.disabled { background-position: top right; }

#hero-item-active { width: 162px; height: 97px; background: url(../../../../images/home/hero-active.png) top left no-repeat; position: absolute; z-index: 500; margin: 0; left: 33px; }

/* ----------  SIDE FEATURES  ---------- */
#side { float: right; width: 200px; }
#how-help h2 { background: #252323 url(../../../../images/global/how-help-notab2.png) top left no-repeat; width: 180px; color: #FFF; padding: 6px 10px 0 10px; font-size: 1.4em; }
#how-help div { background: #252323; padding-top: 10px;}
#how-help div p { color: #FFF; font-size: 1.1em; padding: 0 10px 1em 10px; }
#how-help div div { background: #4c4846 url(../../../../images/global/how-help-top.png) top left repeat-x; padding: 15px 12px 12px}
#how-help div div div { padding: 4px 12px 12px 12px; background: url(../../../../images/global/how-help-bottom.png) bottom left repeat-x; }
#how-help div div div label { color: #FFF; font-weight: bold; font-size: 1.2em; display: block; padding-bottom: 0.3em; }
#how-help div div div select { font-size: 1.1em; vertical-align: top; width: 143px; }
#how-help select.how-help { font-size: 1.1em; vertical-align: top; width: 143px; }

#FeatureArea { background: #FFF; position: absolute; bottom: 21px; border-bottom: 1px solid #cfcfcf; }
#FeatureArea div { width: 180px; background: url(../../../../images/global/dotted-line.gif) top left repeat-x; padding: 12px 10px; overflow: hidden; }

h2.FeatureHeading { padding-bottom: 0.4em; font-size: 1.4em; }
h2.FeatureHeading a { color: #373534; text-decoration: none; }
h2.FeatureHeading a:hover { text-decoration: underline; }

p.FeatureText { font-size: 1.1em; }
p.FeatureLink a { float: right; color: #007836; font-size: 1.2em; font-weight: bold; text-decoration: none; background: url(../../../../images/home/programmes-go.png) center right no-repeat; padding-right: 18px; }
p.FeatureLink a:hover { text-decoration: underline; }

.feature-box h3 { width: auto; background: url(../../../../images/region-b/inyourareatop.png) no-repeat top left; padding: 5px 10px 3px; margin: 0; font-size: 1.2em; color: #007836; }
.feature-box div { background: url(../../../../images/region-b/inyourareacontent.png) repeat-x bottom left; border: 1px solid #d5d5d5; padding: 1em 0 0 0; }
.feature-box div div { background: none; border: 0; padding: 0; color: #373534; }
.feature-box div p { color: #373534; }
.feature-box div div { border-top: 1px dotted #9b9b9b; border-width: 1px 0; background: #f7f7f7 url(../../../../images/global/featureboxgreytop.png) repeat-x top left; }
.feature-box div div div { border-top: none; border-bottom: 1px dotted #9b9b9b; padding: 10px 0 10px 8px; background: url(../../../../images/global/featureboxgreybtm.png) repeat-x bottom left; }
.feature-box div div div label { color: #373534; }