/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2009/07/27
   Last updated by:  Matt Wilcox
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset | based on http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
   ----------------------------------------------------------------------------------------------------------------------- */
   
   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; }

   /* remember to define focus styles! */
   :focus {
     outline: 0; }

   /* remember to highlight inserts somehow! */
   ins {
     text-decoration: none; }
   del {
     text-decoration: line-through; }

   /* tables still need 'cellspacing="0"' in the markup */
   table {
     border-collapse: collapse; border-spacing: 0; }

/* =typography | based on http://alistapart.com/articles/settingtypeontheweb/
                          http://24ways.org/2006/compose-to-a-vertical-rhythm/
                          
    NOTE: found that margin-top applied to everything is a pain - it often messes up layout and requires jumping through
          hoops to fix, so have stopped doing this as a default and now add top margin manually when required instead.
    NOTE: using px for type is bad for people using IE6, but good for my brain. IE6 is dying, so I think that's OK. Feel free
          to tut if you're a purist. I'm a pragmatist.
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 87.5%/1.5 "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; color : #353e1b; }
   html > body {
     font-size : 14px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-bottom : 1.5em; }
   h1,
   .home h2 { font-size : 24px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h2 { font-size : 20px; line-height: 36px; margin-bottom: 18px; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 18px; line-height: 18px; margin-bottom: 18px;
     font-weight : normal; }
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing default cross-page elements
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html { background : url(../images/bg.png
   ) 50% 0 fixed; }
   body {  }

/* =h1 */
   h1 {
     font-size : 48px; }
   
/* =h2 */
   #content_supp h2 {
      font-size : 22px; text-transform : lowercase; letter-spacing : -.5px; color: #626261; }
   
   #nav_main h2,
   #site_info h2 {
     display : none; }
   
   #content_supp form h2 {
     font-size : 14px; color : #fff; letter-spacing : 0; margin : -18px 0 0 50px; }
     
/* =h3 */
   h3 { font-size: 14px; font-weight: bold;  }
     
/* =h4 */
   h4 {  }

/* =p */
   p.accessibility {
     position : absolute;
     margin : -3.5em 0 0 0;
     z-index : 2; }
     
   blockquote p:before {
     content : "\201c"; }
   blockquote p:after {
     content : "\201d"; }
   blockquote p.author {
     border-top : 1px dotted #666; }
   blockquote p.author:before,
   blockquote p.author:after {
     content : ""; }
     
   .attributed p {
     margin-bottom : 0; }
     
   p.intro {
     font-size : 16px; }
     
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
     
   #copyright p.left {
     float : left; }
   #copyright p.right {
     float : right; }
     
   #site_context p {
     margin : 0; }
     
/* =blockquote */
   blockquote {
     clear : both; }

/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; }
   
/* =address */
   address {  }

/* =dl =dt =dd */
   dl {  }
   dt {
     margin-bottom : 0;
     font-weight : bold; font-style : italic; }
   dd {
     margin-top : 0;
     border-left : .3em solid #ddd; padding : .5em 0 0 .7em; }
   
/* =ul */
   #content ul {
     margin-left : 1em;
     list-style : disc outside; }

     
   #sitemap ul {
     overflow : hidden; }
   
/* =ol */
   #content ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }     
   #sitemap li.item_1 {
     float : left; margin-left : 20px;
     width : 64px; }
   #sitemap li.item_2 {
     float : left;
     width : 190px; }
   #sitemap li.item_3 {
     float : left;
     width : 170px; }
   #sitemap li.item_4 {
     float : left;
     width : 160px; }
   #sitemap li.item_5 {
     float : left;
     width : 180px; }
   #sitemap li.item_6 {
     float : left;
     width : 140px; }
     
   #sitemap li li,
   #sitemap ul {
     margin : 0; }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
   #content_main img {border: 4px solid #eeeeee }
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #000; text-decoration : none; }
   a:visited { color : #000; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { color : #000; }
   a:active  { background-color : #000; color : #fff; outline : none; }
   
   #content_main a:link,
   #content_main a:visited {
     text-decoration : underline; }
   #content_main a:hover,
   #content_main a:focus {
     color : #58774C; }
   
   p.accessibility a {
     margin : 0; padding : 0; line-height : 1em; }
   p.accessibility a:focus {
     position : absolute; left : 1em;
     margin-top : 2.5em;
     background-color : #ffff99; }
     

          
   #copyright a,
   #sitemap a {
     color : #fff; }
     
   #site_context a {
     position : absolute; top : 50px;
     display : block; width : 199px; height : 149px;
     text-indent : -999em; background : url(../images/logo.png) 0 0 no-repeat; }
     
   #sitemap li a {
     font-weight : bold; font-size : 12px; }
   #sitemap li li a {
     font-weight : normal; }
     
/* =table */
   table {
     width : 100%; border : 1px solid #ddd; }

/* =caption */
   caption {  }

/* =thead */
   thead {
     text-align : left; background : #333; }

/* =tfoot */
   tfoot {
     background-color : #ddd; }
   
/* =tbody */
   tbody {  }
   
/* =tr */
   tbody tr:hover { background-color : #f6f6f6; }
   
/* =th */
   th {
     font-weight : bold; padding : 2px; color: #eee; }

/* =td*/
   td {
     border : 1px dotted #ddd; padding : 2px; }

/* =form */
   form {
     position : relative;
     width : 100%;
     overflow : hidden; }
     
   #nav_main form {
     margin : 0; }
     
   form.member_login {
     width : auto; padding : 30px 0 0 0;
     background : url(../images/member_login.jpg) 0 0 no-repeat; }
     
   form#form_comment fieldset {
     background-color : #D2D7B5; width : auto; padding : 12px; }
   
/* =fieldset */
   fieldset {  }

/* =legend */
   legend {
     margin : 0; }
   
   #nav_main legend {
     display : none; }
   
/* =blockquote */
   blockquote {
     border-left : 5px solid #666; padding-left : 5px; }

/* =label */
   label {
     position : relative; /* so we can absolutely position errors */
     display : block;
     overflow : hidden; /* so no collapsing float issues */ }
     
   #container.jquery form.member_login label {
     width : 194px; margin-bottom : 5px; }
   #container.jquery form.member_login label.enshorten {
     float : left;
     width : 134px; margin-right : 10px; }
     
   #container.jquery #form_comment label {
     width : 100%; } /* Dumb IE */
     
   #container.jquery #form_comment label[for="comment_name"],
   #container.jquery #form_comment label[for="comment_email"] {
     float : left; width : 205px; }
   #container.jquery #form_comment label[for="comment_name"] {
     margin-right : 23px; }
   #container.jquery #form_comment label[for="comment_name"] input,
   #container.jquery #form_comment label[for="comment_email"] input {
     width : 197px; }
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #ffd; }
     
   label input {
     width : 97%; }
   .boolean input {
     width : auto; margin-right : .5em; }
     
   #container #form_comment label input {
     width : 425px; padding : 3px; font-size : 14px; }
   
/* =textarea */
    textarea {
      width : 99%; height : 8em; }
      
    #container #form_comment textarea {
      padding : 6px; width : 420px;
      font : 14px/1.5 "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; color : #353e1b; }

/* =select */
   label select {
     width : 100%; }
   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container,
   #unsemantic_1 {
     position : relative;
     width : 960px; margin : 0 auto; }
   #unsemantic_1 {
     margin-bottom : 48px; }
   #page_context,
   #site_context {
     height : 267px; margin : 0;}

   #content {
     padding-top : 32px; border-top : 5px solid #f2a036;
     overflow : hidden; margin-bottom: 0; min-height: 700px;
     background: url(../images/content_area.jpg); }
   #site_info {
     clear : both; padding-top : 32px; color : #fff;
     background-color : #030300; /* old browsers that don't understand rgba */}
   #copyright {
     position : absolute; top : 0; left : 0; overflow : hidden; height : 32px; line-height : 32px; width : 920px; padding : 0 20px;
     background-color : #585858; /* old browsers that don't understand rgba */
    font-size : 12px; }
   #sitemap {
     padding : 50px 0; text-align: right; }
     
   div#comments {
     border-top : 1px solid #ccc; margin-top : 24px; padding-top : 18px; }
   div#comments .comment {
     margin-bottom : 48px; }
   div#comments .meta {
     border-bottom : 1px solid #eee; }
     
/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
   
   #content_main div.comment .meta a {
     display : block; float : left; padding-left : 11px; margin-right : 12px;
     font-size : 36px; line-height : 36px; text-decoration : none; }
   div.comment .meta a span {
     position : absolute; margin-left : -21px;
     font-size : 12px; line-height : 12px;
     -moz-transform : rotate(-90deg) translate(-13px,0pt);
     -webkit-transform : rotate(-90deg) translate(-13px,0); color : #353E53; }
   div.comment .meta span.author {
     font-weight : bold; }
     
/* =classes | display classes */
   .left {
     float : left; margin-right : 24px; }
   .right {
     float : right; margin-left : 24px; }
     
/* =homepage | styling specific to the homepage
   ----------------------------------------------------------------------------------------------------------------------- */
   body.home #content {
     border-top-color : #4f94c8;
     background: url(../images/content_area_home.jpg); }
   body.home h1 {
     margin : 0; }
   body.home #content_main h2 {
     font-size : 48px; color: #fff; }
   body.home #container {
     overflow : auto; }
   body.home div#content_main {
     float : right;
     margin : 0 65px 0 0; width : 570px; }
   body.home div#content_supp {
     float : left;
     margin : 0 20px; width : 209px; background: #eeeeee; }
   body.home div.col_1 {
     float : left;
     width : 290px;
     font-size : 16px; }
   body.home div.col_2 {
     float : right;
     width : 260px; }
   body.home div.col_1 div {
     position : relative;
     width : 212px; height : 101px; padding : 20px 10px 10px 20px;
     background : url(../images/get-involved.png) 0 0 no-repeat; font-size : 12px; color : #fff; }
   body.home.cy div.col_1 div {
     background-image : url(../images/get-involved_cy.png); height : 162px; }
   body.home div.col_1 div h3 a {
     position : absolute; top : 0; left : 0;
     display : block; width : 100%; height : 100%;
     text-indent : -999em; overflow : hidden; }
     
   body.home div#latest_developments {
     margin-bottom : 36px; }
   body.home div#latest_developments h3 {
     height : 23px; line-height : 23px; margin-bottom : 0px;
     font-size : 14px; background : url(../images/latest_developments-h3.png) 0 0 no-repeat; }
   body.home div#latest_developments h3 a {
     display : block; margin : 0; padding-left : 10px; color : #353e1b; }
   body.home div#latest_developments p {
     font-size : 12px; margin-left : 10px; padding-bottom: 15px; border-bottom: 1px solid #edc233; }
   body.home div#latest_developments p a {
     color : #353e1b; }
   
   body.home div#latest_news .news_item {
     margin-left: 10px; border-bottom: 1px solid #edc233;}
   body.home div#latest_news .date {font-size: 12px; font-style: italic;}
   
   body.home div#latest_news h2 {
     margin : 12px 0 18px 0; }
   body.home div#latest_news h3 {
     margin-bottom : 0px; }
   body.home div#latest_news p {
     font-size : 12px; }
   body.home div#latest_news a {
     color : #353e1b; }
     
   body.home form.member_login {
     padding : 0 0 0 105px; width : auto;
     background : url(../images/member_login-home.jpg) 0 0 no-repeat; }
   body.home #content_supp form h2 {
     margin : -12px 0 0 0; }
     
   body.home #content_main div.logos img {
     border : 5px solid #fff; }
     
/* =general interior pages
   ----------------------------------------------------------------------------------------------------------------------- */     
   body.page #content_main h1 {
     font-size : 40px; line-height: 48px; color: #fff; margin-bottom: 25px;}
   body.page #container {
     overflow : auto; }
   body.page div#content_main {
     float : right;
     margin : 0 20px; width : 460px; }
   body.page div#content_supp,
   body.page div#content_related {
     margin : 0 20px; width : 190px;
     overflow : hidden; }
   body.page div#content_main {
      float: right; margin: 0 65px 0px 0; padding-right: 225px; width: 400px; position: relative; }
   body.page div#content_supp {}
   body.page div#content_related { }
     
   body.page #content_related h2 {
     color : #626261; text-transform : lowercase; font-size : 22px; }
   body.page form.member_login {
      border-bottom : 1px solid #C4C9A9; }
      
   body.page #content_related ul {
     margin-left : 0; list-style-type : none; }
     
   body.page #content_related li a {
     display : block; /* height : 23px; */ line-height : 23px; padding : 0 10px;
     background : url(../images/read-more.png) 0 0 no-repeat; color : #353E1B; font-size : 12px; }
   body.page #content_related li a:hover,
   body.page #content_related li a:focus { }
     
   body.page #content_related li ul {
     margin-bottom : 0; }
   body.page #content_related li li {
     margin : 0; border-bottom : 1px solid #bec2a8; }
   body.page #content_related li li:last-child {
     border-bottom : 0; }
   body.page #content_related li li a {
     background-image : none; margin-bottom : 0; padding-left : 42px; }
   body.page #content_related li li a:hover,
   body.page #content_related li li a:focus,
   body.page #content_related p a:hover,
   body.page #content_related p a:focus {
     color : #353E1B; }
     
   body.page #content_related li ul li ul {margin-left: 20px; font-style: italic; display: none;}
     
   body.page #downloads ul {
     margin-left : 0; list-style-type : none; }
   body.page #downloads li {
     padding-left : 20px;
     background : url(../images/download-list.png) 0 4px no-repeat; }
   body.page #downloads li a {
     color : #353e1b; }
     
/* =about page
   ----------------------------------------------------------------------------------------------------------------------- */
   body.about #content {
     border-top-color : #edc233; }
     
/* =latest-developments page
   ----------------------------------------------------------------------------------------------------------------------- */
   body.latest-developments #content {
     border-top-color : #B6CB27; }
   body.latest-developments #content_main h1 {
     font-size : 42px; }
   body.latest-developments #content_supp h2 {
     font-size : 24px; }
     
   body.latest-developments #content_related li li a {
     height : auto; line-height : 18px; padding : 4px 0 4px 11px; }
   body.latest-developments #content_related li li a span {
     display : block;
     font-size : 10px; font-weight : bold; }
   body.latest-developments #content_related li li:hover {
     border-left : 6px solid #BEC2A8;
     background-color : #EFF3D6; }
   body.latest-developments #content_related li li:hover a {
     padding-left : 5px; text-decoration : none; }
     
   body.latest-developments #content_related li p.pagination {
     border-top : 1px solid #38572C; margin-top : 24px; padding-top : 6px;
     text-align : center; }
   body.latest-developments #content_related li p.pagination a {
     display : inline; padding : 0;
     background : none; }
   body.latest-developments #content_main img {
     border : 5px solid #fff; }
     
/* =whats-on page
   ----------------------------------------------------------------------------------------------------------------------- */
   body.whats-on #content {
     border-top-color : #97cfe0; }
   body.whats-on fieldset h2 {
     font-size : 12px; line-height : 18px; font-weight : bold; }
   body.whats-on #container.jquery label.name {
     margin-bottom : 2em; }
   body.whats-on fieldset fieldset {
     border-top : 1px solid #DADFBC; padding-top : 1em; }
   body.whats-on label.name span {
     font-weight : bold; }
   body.whats-on label.boolean {
     margin-bottom : 0; }
   body.whats-on label.boolean input {
     float : left;
     width : auto; margin-right : 1em; }
   body.whats-on .date-and-time label {
     float : left;
     width : 100px; margin-right: 10px; }
   body.whats-on label.postcode {
     float : left;
     width : 100px; margin-right : 10px; }
   body.whats-on label[for="price_adult"],
   body.whats-on label[for="price_family"],
   body.whats-on label[for="contact_telephone"] {
     float : left;
     width : 220px; margin-right : 10px; }
     
   table.whats-on {
     border-color : #BBBFA5; }
   table.whats-on tr:nth-child(2n+1) {
     background-color : #F2F3E9; }
   table.whats-on tr:nth-child(2n+1):hover {
     background-color : #eee; }
   table.whats-on th {
     border : 1px dotted #BBBFA5; text-align : right; padding : 6px 10px; }
   table.whats-on td {
     padding : 6px 10px; border-color : #BBBFA5; }
     
/* =news page
   ----------------------------------------------------------------------------------------------------------------------- */
   body.news #content,
   body.partnership #content {
     border-top-color : #4db15a; }
     
/* =contact-us page
   ----------------------------------------------------------------------------------------------------------------------- */
   body.contact1 #content {
     border-top-color : #ee8d39; }
     
/* =get-involved page
   ----------------------------------------------------------------------------------------------------------------------- */
   body.get-involved #content {
     border-top-color : #745A32; }
#gall {position: absolute; right: -50px; top:20px; width: 240px;}
#gall img {margin-bottom: 0; margin-top: -4px; margin-left: -4px; float:left;}



/* navigation */
#nav_main {
	position : absolute; top: 238px; left : 0px;
	margin : 0; z-index: 90; }
#nav_main ul {}
#nav_main ul li {
	padding: 5px 15px 7px; margin: 0 0 0 0; position: relative; display: inline;
	background : #4f94c8 url(../images/nav_cut.png) 0 0 no-repeat;}
#nav_main ul li a {
	color: #222; font-family: Arial; font-weight: normal; font-size: 12px;}
#nav_main ul li:hover {}
#nav_main ul li a:hover {text-decoration: underline; }
   
/* sub navigation */
#nav_main ul li ul {
	position: absolute; top: 28px; left: 0px; display: none; 
	width: 193px; z-index: 10000; }
#nav_main ul li:hover ul {display: inline;}
#nav_main ul li:hover ul li {
	display: block; background-image:none; padding: 3px 10px;}
#nav_main ul li:hover ul li a {font-size: 13px; color: #222; padding: 3px 10px 3px 0; display: block;}
#nav_main ul li:hover ul li:hover {text-decoration: underline;}

     
 
   #nav_main li.item_1 {
     width : auto; line-height : 27px; margin-right : 30px; padding-top : 0;
     background : #ffed00 url(../images/nav_cut.png) 0 0 no-repeat; width : 92px; height : 26px; padding : 8px 10px 6px 10px; margin-top:9px; font-weight: bold;}
   
   #nav_main li.item_3 {
     background-color : #97cfe0; color : #333; }
    #nav_main li.item_3 ul li {background-color : #51a8c2;}
   #nav_main li.item_4 {
     background-color : #bdcf41; color : #333; }
   #nav_main li.item_4 ul li  {background-color : #9caf17;}
   #nav_main li.item_5 {
     background-color : #4db15a; color : #333; }
   #nav_main li.item_5 ul li {background-color : #119e24; }
   #nav_main li.item_6 {
     background-color : #edc233; color : #333; }
   #nav_main li.item_6 ul li {
     background-color : #e2ae00;}
   #nav_main li.item_7,
   #nav_main li.item_7 ul li {
     background-color : #f2a036; color : #333; }
   #nav_main li.item_8,
   #nav_main li.item_8 ul li {
     background-color : #ee8d39; color : #333; } 
   
   
   body.whats-on #content {
     background: url(../images/content_area_whats_on.jpg); }
   body.projects1 #content,
   body.projects #content {
     border-top : 5px solid #bdcf41;
     background: url(../images/content_area_projects.jpg); }
   body.news #content,
   body.partnership #content {
     background: url(../images/content_area_partners.jpg); }
   body.links #content {
     background: url(../images/content_area_links.jpg); }
   body.contact1 #content {
     background: url(../images/content_area_contact.jpg); }
     label {margin-bottom: 0;}
     input[type="text"] {padding: 3px; width: 80%; margin-bottom: 10px;}