/* Parts of barnet's main CSS needed for its header/footer and adjusted (see
 * bottom) to not be affected by main FixMyStreet CSS. Not very sustainable;
 * perhaps we should wrap all council CSS within a SCSS #council ID? Hmm.
 */

@import "compass";

#column_nav li { list-style: none ;}

#content ol.big-numbers li {
    padding: 0 0 0 2.5em;
}

#barnet-wrapper {
  width: 100%;
  display: table;
  caption-side: bottom;
}

#barnet-powered-by {
    clear: both;
}

body {font-size: 77%; font-family: Arial, Helvetica, sans-serif; color: #3e3d44; padding: 0; margin: 0; line-height: 1.5; background: #e9e9ea;}
body > html {font-size: 12px;}

#barnet-wrapper {padding: 0; margin: 20px auto; width: 960px; background: #fff;}
#ie_wrapper {display: block; padding: 20px 25px 25px;}
#page {float: left; width: 100%;}

#mast {clear: both;}

#mast .pseudoH1 {margin: 0 0 0 -3px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left; width: 240px; height: 38px; float: left;}
#mast .pseudoH1 a, #mast .pseudoH1 a:link, #mast .pseudoH1 a:visited, #mast .pseudoH1 a:hover, #mast .pseudoH1 a:active {display: block; width: 240px; height: 38px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left;}
#mast .pseudoH1 span {position: absolute; margin-top: -13000px; top: -13000px;}

#mast .mast_links {float: right; display: inline; margin: 0; padding: 10px 0 0; list-style: none; overflow: hidden;}

#mast #search {clear: both; float: right; margin: 8px 0 0; background: #e1e3e4; border-top: 6px solid #bddadc; border-bottom: 2px solid #c8cacb; width: 100%; padding: 3px 0 2px; height: 21px;}

/* ############################################################## */

#content {margin: 0; width: 910px; overflow: hidden; min-height: 350px;}
#content.withWidth {margin: 0 0 0 232px; width: 446px; overflow: hidden; float: left; display: inline;}
#content.fullWidth {width: 678px;}
#content.home {margin-top: 18px;}

.mappage {
    #content.withWidth {margin: 0 0 0 0px; width: auto; overflow: hidden; float: left; display: inline;}
    #content.fullWidth {width: 900px;}
}

/* IE6 ignore the second #foo.bar rule so we have to fudge it another way */
.ie6 {
    .mappage {
        #content {
            margin: 0 0 0 0px;
            overflow: hidden;
            float: left;
            display: inline;
            width: 900px;
        }
    }
}

#breadcrumb {font-size: .9em; color: #5c6267; padding: 6px 0; margin: 0 0 0 232px;}
#breadcrumb.full {margin: 0;}
#breadcrumb ul {margin: 0; padding: 0; list-style: none;}
#breadcrumb ul li {margin: 0; padding: 0 4px 0 0; display: inline;}
#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #breadcrumb ul li a:hover, #breadcrumb ul li a:active {color: #5c6267; background: url(../css_img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;}
#breadcrumb ul li span {font-weight: normal; color: #5c6267;}

/* ############################################################## */

#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;}

.ie6 #column_nav {
    float: none;
    position: absolute;
    top: 85px;
    margin: 0 0 0 0px;
}

body.mappage #column_nav { display: none; }

#content h1 {margin: 0 0 20px; font-size: 1.8em; border-bottom: 6px solid #bed9dd; font-family: Georgia, Times, 'Times New Roman', serif; color: #5d6167;}
#content h1 span {padding: 6px 7px 3px; border: 1px solid #eff1f2; border-bottom: 0 none; display: block;}

#column_nav .navigation {background: #fff; margin: 0 0 4px;}
#column_nav h2 {font-size: 1.2em; padding: 0; height: 29px; margin: 0; border-radius: 0 0 3px 3px; background: url(img/nav-bg-active.gif) left bottom repeat-x; border-top: 6px solid #bddadc;}
#column_nav #nav1 h2 {border-radius: 0 0 0 3px;}
#column_nav h2 a {color: #fff; padding: 3px 10px 0 26px; display: block; background: url(img/nav-arrow.gif) 8px 7px no-repeat;}
#column_nav .active h2 a {background: url(img/nav-arrow-active.gif) 8px 8px no-repeat;}
#column_nav ul {margin: 0 0 0 4px; padding: 8px 7px 4px; border-width: 0 1px 1px; border-color: #e1e1e1; border-style: solid; border-radius: 3px; list-style: none; background: #fff; background: -moz-linear-gradient(top, #ffffff 0%, #f7f9f8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f9f8)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: linear-gradient(top, #ffffff 0%,#f7f9f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f9f8',GradientType=0);}
#column_nav ul li {margin: 0; padding: 2px 4px; border-bottom: 1px solid #bfc0c1; color: #333; font-size: .9em;}
#column_nav ul li.lastItem {border-bottom: none;}
#column_nav ul li a:link, #column_nav ul li a:visited, #column_nav ul li a:hover, #column_nav ul li a:active {display: block; color: #333; font-weight: normal;}
#column_nav ul li a:hover, #column_nav ul li a:active {text-decoration: none; color: #0090a2;}

/* ############################################################## */

#footer {clear: both; margin: 10px 0 0; padding: 15px 0 0; text-align: left;}
#footer p {border-top: 1px solid #dadadb; border-bottom: 1px solid #dadadb; margin: 0 0 5px; color: #5d6167; float: left; display: inline; height: 24px; padding: 8px 0 2px; width: 551px;}
#footer p a {color: #5d6167; font-weight: normal; padding: 0 2px;}
#footer p.assocLinks {float: right; display: inline; padding: 5px 0; width: 359px;}
#footer p.assocLinks a {float: left; display: inline; margin: 0 0 0 8px; padding: 0; background-position: center top; background-repeat: no-repeat; width: 24px; height: 24px;}
#footer p.assocLinks a:active, #footer p.assocLinks a:hover, #footer p.assocLinks a:focus {background-position: center bottom;}
#footer a#goto_browsealoud {background-image: url(img/browsealoud.gif); width: 95px; height: 25px; margin-top: 1px;}
#footer a#goto_directgov {background-image: url(img/directgov.gif); width: 90px; margin: 0 0 0 22px;}
#footer a#share_facebook {background-image: url(img/social1-facebook.gif); margin: 0 0 0 24px;}
#footer a#share_twitter {background-image: url(img/social2-twitter.gif);}
#footer a#share_youtube {background-image: url(img/social3-youtube.gif);}
#footer a#share_flickr {background-image: url(img/social4-flickr.gif);}
#footer a#share_sharethis {background-image: url(img/social5-sharethis.gif);}
#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;}