/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.1.1
   Last updated:     2008/10/14
   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 be 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 : 75%/1.5 Verdana, Helvetica, Ariel, Verdana, sans-serif; }
   html > body {
     font-size : 12px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-bottom : 1.5em; }
   h1,
   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
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html {  }
   body { background-color:#fff; }

/* =h1 */
   h1 {  
   
   font-size: 22px;
   color: #F39A00;
   width:100%;
   border-bottom:2px solid #F39A00;
   
   }
   
/* =h2 */
   h2 {  
   
   font-size: 18px;
   color: #6C4C1B;
   
   }
    
     
/* =h3 */
   h3 { 
   
   font-size: 14px;
   color: #56513D;
   
    }
     
/* =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; }
     
     
   label p.error {
     padding : .5em; color : #fff;
     background : #c00; text-align : left; }
     
/* =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; }
   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; }
   
   acronym {border-bottom: 1px dashed #ccc; cursor: help;}
   
/* =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 */
   #container ul {
     margin-left : 1em;
     list-style : disc outside; }
   #nav_main ul {
     margin : 0; }
   #nav_lang ul {
     margin : 0; }
   
/* =ol */
   #container ol {
     margin-left : 1.6em;
     list-style : decimal outside; }

/* =li */
   li {
     margin : .5em 0; }
     
   #nav_main li{
     display : inline; margin : 0 0 0 1em; }
        #nav_lang li{
     display : inline; margin : 0 0 0 1em; }
     
/* =img */
   img,
   img a { border : none; }
   .attributed img {
     margin : 0; }
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #F39A00; text-decoration : none; }
   a:visited { color : #F39A00; text-decoration : none; }
   a:hover   { color:black; text-decoration : underline; }
   
   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; }    

/* =form */
   form {
     position : relative;
     width : 100%;
     overflow : hidden; }
     
   #nav_main form {
     margin : 0; }
   
/* =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 */ }
   
/* =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 : 300px; }
   .boolean input {
     width : auto; margin-right : .5em; }
   
/* =textarea */
    textarea {
      width : 500px; height : 250px; }

/* =select */

   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container {
     position : relative;
     width : 950px; margin : 0 auto; background-color:#fff; }
   #page_context,
   #site_context  {
     height : 150px;
     background-color : #ccc; }

/* =span */
   label span {
     display : block; }
   label.boolean span {
     display : inline; }
   
/* =layout-classes */
   .float-left {
     float : left;
     margin-right : 30px; }
   .float-right {
     float : right;
     margin-left : 20px; }
   .float-left.last {
     margin-right : 0; }
   .clear {
     clear : both; }
     
   /* full width portions */
   .one-third {
     width : 300px; text-align : justify; /* text align to show column bounds */ }
   .two-thirds {
     width : 630px; text-align : justify; /* text align to show column bounds */ }
   .half {
     width : 465px; text-align : justify; /* text align to show column bounds */ }
     
   /* portions inside a two-third parent portion */
   .two-thirds .one-third {
     width : 190px; }
   .two-thirds .two-thirds {
     width : 410px; }
   
/* =display-classes */
    
  .floatimg { float:left; margin: 0 10px 10px 0; }
    
   #content_supp { clear:both;}

   #content_main  { width: 665px; display: block; float: left; padding: 0; margin: 0;} 
   
   #content_main  ul { margin: 1em 0; padding: 0; margin-left:25px; list-style-type: none;}
   
   #content_main li { background: url(/assets/images/content-bullet.png) left center no-repeat; padding-left: 22px; margin-left:-20px; }
     
   #content_main a  { color: #56513D; text-decoration: underline;}
   
   #content_main a:hover { color: #F39A00; text-decoration: underline;}
    
   /* =thead */
   #content_main thead {
     text-align : left; background : #ccc; }

/* =tfoot */
   #content_main tfoot {
     background-color : #ddd; }
   
/* =tbody */
   #content_main tbody { font-size: 11px;  }
   
/* =tr */
   #content_main tbody tr:hover { background-color : #f6f6f6; }
   
/* =th */
   #content_main th {
     font-weight : bold; border : 1px solid #ddd; padding : 2px; }
  
   #content_main table thead th { color:#fff;}
   
   #content_main table tbody th { background-color:#f8f8f8;}

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

/* Top Header */	

	#top-header {height:155px; width: 100%; background-color: #56513D; background: url(/assets/images/top-header-background.jpg); background-repeat: repeat-x; border-top: 3px solid #fff;}

	#top-header-inner {height:155px; width: 950px; margin: 0 auto; position: relative;}
	
	.logo {margin-top: 20px;}
	
	#nav_lang {position: absolute; top : 0; right : 0; }
	
/*- Menu Tabs--------------------------- */ 
    #tabs { position: absolute; top : 50px; right : 0; margin: 0; zoom: 1; font-size: 14px; }

    #tabs ul { margin:0; padding:10px 10px 0 40px; list-style:none;}
    
    #tabs li {float: left; display:inline; margin:0; padding:0;}
    
    #tabs a { margin:0; padding:4px 12px 0px 6px; margin-top:-3px; text-decoration:none; color: #fff; height: 37px;}

    #tabs a.active {float:left; background:url("/assets/images/main-nav-bg.png") no-repeat left top; padding:0 0 0 5px; text-decoration:none; color: #F39A00; }

    #tabs a span {float:left; display:block; background:url("/assets/images/main-nav-bg-right.png") no-repeat right top; padding:4px 18px 4px 5px; height: 37px;}  
 
/* Banners */	 

	#banner-home {width:100%; height: 370px; color: #fff; text-align: center;}

/* Sidebar */	

	#content_sidebar {float:right; width:220px; padding: 0 10px; font-size: 11px;}
	
	#content_sidebar a {font-size: 13px; color: #56513D; text-decoration: none;}
	
	#content_sidebar a:hover {text-decoration: underline;}
	
	#content_sidebar in  ul {list-style: none; margin: 1em 0; padding: 0;}

	#content_sidebar li {list-style: disc; margin: 0; padding: 3px 10px 5px 0px; border-bottom: 1px solid #ccc; color: #666;}

	#content_sidebar ul li:hover {color: #F39A00;}
	
/* County boxes on homepage */	
	
	#flintshire {width: 270px; height: 210px; padding: 20px; background-image: url(/assets/images/county-box-background.jpg); background-repeat: no-repeat; float: left; font-size: 11px; color: #fff; text-align: left; }
	
	#flintshire h3 {  font-size: 22px; color: #F39A00; text-decoration: none; }
	
	#flintshire h3 a {  font-size: 22px; color: #F39A00; text-decoration: none; }	
	
	#flintshire h3 a:hover {  font-size: 22px; color: #F39A00; text-decoration: underline; }	
	
	#flintshire a {  font-size: 14px; color: #fff; text-decoration: none; }
	
	#flintshire a:hover {  font-size: 14px; color: #fff; text-decoration: underline; }
		
	#denbighshire {width: 270px; height: 210px; padding: 20px; background-image: url(/assets/images/county-box-background-d.jpg); background-repeat: no-repeat; float: right; font-size: 11px; color: #fff; text-align: left; }
	
	#denbighshire h3 {  font-size: 22px; color: #F39A00; text-decoration: none; }
	
	#denbighshire h3 a {  font-size: 22px; color: #F39A00; text-decoration: none; }	
	
	#denbighshire h3 a:hover {  font-size: 22px; color: #F39A00; text-decoration: underline; }	
	
	#denbighshire a {  font-size: 14px; color: #fff; text-decoration: none; }
	
	#denbighshire a:hover {  font-size: 14px; color: #fff; text-decoration: underline; }
	
	#denbighshire a {  font-size: 14px; color: #fff; text-decoration: none; }

/* Footer */	

	#bottom-footer {height:125px; width: 100%; background-image: url(/assets/images/bottom-footer-background.jpg); background-repeat: repeat-x; background-position: bottom; margin: 0; padding: 0;}

	#bottom-footer-inner {width: 950px; margin: 0 auto;}
	
	#footer-nav-main {font-size:14px; padding-top: 20px;}
	
	#footer-nav-main a {color: #fff}
	
	#footer-nav-supp {font-size:11px; padding-top: 10px; padding-left: 10px; }
	
	#footer-nav-supp a:hover {color: #fff; text-decoration: underline;}
	
	.copyright { color:#fff; font-size:11px; padding-top: 25px; padding-left: 10px;}
	
	#nav_footer {margin: 0; float: left;}
     
    #nav_footer ul {margin: 0; }
	
	#nav_footer li {display : inline; margin : 0 0 0 1em; }
	
	#newsletter {float: right; text-align: center; padding-top: 15px; background-image: url(/assets/images/newsletter-background.jpg); background-repeat: no-repeat; background-position: top center; height: 123px; width: 262px;}
		
	#newsletter h2 {font-size: 22px; color: #F39A00;}
	
	.submit {padding-top: 5px;}
	
	.emailsubmit {float: left; margin-left:20px; margin-top: 6px; height: 15px; color: #666; padding-top: 2px;}
	
/* Homepage Slider */	

	.hidden {display: none;}

	#prevNext {margin-top:315px; margin-left:25px; cursor: pointer; float: left; position: absolute; z-index: 1;}

	#prevNext img { z-index: 2;}

	#slides p {margin: 0 auto; padding: 0 1em; position: relative; top: -56px; line-height: 30px; height: 30px; background: #56513D; opacity: .8; filter:alpha(opacity=80); font-size:12px; width:897px; text-align: right;
}

/* Content */	

	.posted_images li {float: left; list-style:none; list-style-type: none; margin-right: 10px;  }

	.posted_images img {margin: 0 10px 10px 0; background-color: #fff; padding: 6px; border: 1px solid #ccc;}	

	.morelink {float: right; margin-right: 20px;}

	.intro {font-size:14px;}
	
	.listing_h1 { font-size: 20px; width:100%; padding-bottom: 5px; line-height: 28px; border-bottom:1px solid #ccc;}
	
	.inlineimg { float:left; margin: 0 10px 10px 0; background-color: #fff; padding: 6px; border: 1px solid #ccc;}
	
	.inlineimgentry { float:right; margin: 0 10px 10px 0; margin:10px; background-color: #fff; padding: 6px; border: 1px solid #ccc;}
		 
	.entrydate {color: #666; font-size: 14px; font-style: italic;}
	
	.projectinfo1 {color: #333; text-align: left; float: left;}
	
	.projectinfo2 {color: #333; text-align: left; float: right;}
		
  	 #content_main .pagination li {display: inline; float: right; margin:5px; background: none; padding: 0;}
  	 
	#content_main .posted_images li {background: none; margin-left:-35px;}
	
	.page_total li {display: inline; }
	
	 #content_main .related li { background: url(/assets/images/related.png) left center no-repeat; padding-left: 22px; margin-left:-20px;}
	 
	 
	#content_main .telephoneus { background: url(/assets/images/phone.png) left center no-repeat; padding-left: 22px;}
	
	#content_main .faxus { background: url(/assets/images/fax.png) left center no-repeat; padding-left: 22px;}
	
	#content_main .emailus { background: url(/assets/images/email.png) left center no-repeat; padding-left: 22px;}
	
	#content_main .postus { background: url(/assets/images/post.png) left center no-repeat; padding-left: 22px;}