/*
	Template Name:Bureau web template
	Template URI:http://www.citizensadvice.org.uk/anytowncab
	Description:A responsive web template for Bureau.
	Author:Citizens Advice web team
	Author URI:http://www.citizensadvice.org.uk
	Version:1.0
	License:All Rights Reserved.
	License URI:license.txt
	Tags:HTML5, Responsive, WCAG AA
	Corporate colours:
		Blue: #005AB6
		Yellow: #FFD22B
		
		Purple: #773DA3
		Orange: #EC7A3C
		Turquoise: #008D9B
		Green: #5DA631
		Red: #7F364F
		Grey: #8D837D
*/



/* ---------- #.reset ---------- */
*{font-family:Arial,Helvetica,sans-serif;font-size:100%;margin:0;padding:0;}
body{background:#EAEAEA;color:#000000;font-size:0.8em;margin:1em 0;}
embed,iframe,img,object,video{max-width:99%;width:auto;}
/* ---------- #.links ---------- */
a{color:#005AB6;text-decoration:none;}
a:focus,
a:hover{color:#005AB6;text-decoration:underline;}
a:visited{color:#005AB6;}
a img{border:0;}
/* ---------- #.typography ---------- */
h1,h2,h3,h4,h5,h6{color:#005AB6;font-family:Arial;font-weight:bold;}
h2,h3,h4{margin-bottom:15px;}
h1{font-size:1.9em;}
h2{font-size:1.7em;padding:7px 0 15px 1px;}
h3{font-size:1.3em;}
h4{font-size:1.1em;}
p{line-height:1.5em;margin:12px 0;}
/* ---------- #.list-style ---------- */
ul,ol{list-style-position:outside;margin-left:2.5em;}
ul.circle{list-style-type:circle;}
ul.circle li ul{list-style:inherit;}
ul.disc{list-style:disc;}
ul.disc li ul{list-style:inherit;}
ul, ul.square{list-style:square;}
ul li ul, 
ul.square li ul{list-style:inherit;}
li{margin:0.5em 0;}
/* ---------- #.misc ---------- */
.float-left{float:left;}
.float-right{float:right;}
.float-left, .float-right{overflow:hidden;}
.image-left{margin:0.5em 1em 1em 0;}
.image-right{margin:0.5em 0 1em 1em;}
.imageleft img{float:left; padding: 0 15px 15px 0;}
.imageright img{float:right; padding: 0 0 15px 15px;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.hide{display:none !important;}
.screen-reader{left:-999em;overflow:hidden;position:absolute;top:-999em;}
.round{border-radius:4px;}
.error{background:#FFCCCC;border:1px solid #DD7777;}
.clear{clear:both;}
#wrapper{background:#FFF;margin:auto;min-width:420px;max-width:984px;}
/* ---------- #.theGrid ---------- */
.row{width:100%;}
.column{margin:1%;position:relative;}
.one{width:6.333%;}
.two{width:14.666%;}
.three{width:23%;}
.four{width:31.333%;}
.five{width:39.666%;}
.six{width:48%;}
.seven{width:56.333%;}
.eight{width:64.666%;}
.nine{width:73%;}
.ten{width:81.333%;}
.eleven{width:89.665%;}
.twelve{width:98%;}
/* -- #.theGrid, IE fix:WORKING -- *
.ie .gs{margin:5px 0.99%;}
.ie7 .one{width:6.2%;}
.ie7 .two{width:14.5%;}
.ie7 .three{width:22.8%;}
.ie7 .four{width:31.2%; overflow:hidden;}
.ie7 .five{width:39.5%;}
.ie7 .six{width:47.8%;}
.ie7 .seven{width:56.2%;}
.ie7 .eight{width:64.7%;}
.ie7 .nine{width:72.8%;}
.ie7 .ten{width:81.2%;}
.ie7 .eleven{width:89.5%;}
.ie7 .twelve{width:97.8%;}
.ie8 .one{width:6.37%;}
.ie8 .two{width:14.7%;}
.ie8 .three{width:23.03%;}
.ie8 .four{width:31.3%;}
*/
/* Nicolas Gallagher's micro clearfix */
.row, .clrfix{*zoom:1;}
.row:before, .row:after, .clrfix:before, .clrfix:after{content:"";display:table;}
.row:after, .clrfix:after{clear:both;}
/* ---------- #.skip-nav ---------- */
#skip-nav a:focus, 
#skip-nav a:active{background:#006CB7;color:#FFFFFF !important;font-size:2em;font-weight:bold;left:0px !important;padding:3px;text-decoration:underline;top:0px !important;}
/* ---------- #.site-tools ---------- */
#site-tool{background:#005AB6;}
#site-tool a,
#site-tool a:visited{color:#FFF;text-decoration:none;padding:4px;}
#site-tool ul,
#site-tool li{margin:0;padding:0;}
#site-tool ul{float:left;list-style-type:none;margin-left:0.3em;}
#site-tool ul li{float:left;line-height:22px;margin:2px;}
#site-tool ul#top-nav li{border-right:1px solid #FFF;padding-right:4px;}
#site-tool ul#text-size a,
#site-tool ul#text-size a:visited{padding:4px 2px;}
#site-tool ul#text-size li{font-weight:550;vertical-align:text-bottom;}
#site-tool ul#text-size li.size-small{font-size:0.9em;}
#site-tool ul#text-size li.size-medium{font-size:1.03em;}
#site-tool ul#text-size li.size-large{font-size:1.3em;}
#site-tool ul#contrast li.colour-normal a{background:#FFF !important;color:#000; !important}
#site-tool ul#contrast li.colour-yellow a{background:#F6F2D3 !important;color:#000 !important;}
#site-tool ul#contrast li.colour-high a{background:#000 !important;color:#FFD22B !important;}
/* ---------- #.header ---------- */
#header{background:url(http://www.citizensadvice.org.uk/u-he5p3x41/header-gradient.gif) #FFD22B repeat-x top left;}
#header #brand #logo{position:relative;}
#header #brand #bureau{margin:2.2em 0 1em 0.5em;position:relative;}
/* ---------- #.content---------- */
#content h2{background:url(quote-border.gif) left bottom no-repeat;border-top:2px solid;}
#getadvice h2{border-top-color:#005AB6;color:#005AB6;}
#getadvice #adviceguide-link{background:url(box-gradient-bg.jpg) repeat-x top left;color:#FFF;cursor:pointer;display:block;font:bold 1.3em arial;margin:1em 0 1em 1em;width:252px;z-index:100;}
#getadvice #adviceguide-link:hover{background:#58ac19;}
#getadvice #adviceguide-link{text-decoration:none;}
#getadvice #adviceguide-link .link-wrapper{display:block;padding:5px 0 0 42px; background:url(adviceguide-link-bg.gif) no-repeat 12px 6px;}
#getadvice #adviceguide-link:hover .link-wrapper{background-image:url(adviceguide-link-hover-bg.gif);}
#getadvice #adviceguide-link strong{font:normal 0.7em arial; display:block; padding:0; margin:6px 0 7px 0;}
#getadvice #adviceguide-link .ml{display:block; background:url(box-middle-bg.gif) repeat-y top left;}
#getadvice #adviceguide-link:hover .ml{background-image:url(box-middle-hover-bg.gif);}
#getadvice #adviceguide-link .mr{display:block;background:url(box-middle-bg.gif) repeat-y top right;}
#getadvice #adviceguide-link:hover .mr{background-image:url(box-middle-hover-bg.gif);}
#getadvice #adviceguide-link .top{background:url(box-top-bg.jpg) repeat-x top left; display:block; height:4px; position:relative;}
#getadvice #adviceguide-link:hover .top{background-image:url(box-top-hover-bg.jpg);}
#getadvice #adviceguide-link .tl, #adviceguide-link .tr, #adviceguide-link .bl, #adviceguide-link .br{display:block; position:absolute; width:6px; height:6px;}
#getadvice #adviceguide-link .tl{top:0; left:0; background:url(box-tl-bg.gif) no-repeat top left;}
#getadvice #adviceguide-link:hover .tl{background-image:url(box-tl-hover-bg.gif);}
#getadvice #adviceguide-link .tr{top:0; right:0; background:url(box-tr-bg.gif) no-repeat top right;}
#getadvice #adviceguide-link:hover .tr{background-image:url(box-tr-hover-bg.gif);}
#getadvice #adviceguide-link .bottom{background:url(box-bottom-bg.jpg) repeat-x bottom left; display:block; height:6px; position:relative;}
#getadvice #adviceguide-link:hover .bottom{background-image:url(box-bottom-hover-bg.jpg);}
#getadvice #adviceguide-link .bl{background:url(box-bl-bg.gif) left bottom no-repeat; bottom:0; left:0;}
#getadvice #adviceguide-link:hover .bl{background-image:url(box-bl-hover-bg.gif);}
#getadvice #adviceguide-link .br{background:url(box-br-bg.gif) no-repeat bottom right; bottom:0; right:0;}
#getadvice #adviceguide-link:hover .br{background-image:url(box-br-hover-bg.gif);}
#aboutus h2{border-top-color:#7F364F;color:#7F364F;}
#volunteer h2{border-top-color:#5DA631;color:#5DA631;}
#volunteer #service-block{background:url(volunteer-block-bg.jpg) no-repeat scroll right bottom #F9F9F9;border:1px solid #E0E0E0;margin:1em 0;padding:1.5em;}
#volunteer #service-block h3{color:#005AB6;}
#supportus h2{border-top-color:#773DA3;color:#773DA3;}
#supportus #community{margin-top:2em;}
#supportus #community h2{border-top-color:#8D837D;color:#8D837D;}
.social-media-block{border-bottom:1px dotted #EBEBEB;margin:0 0 10px 0;padding:5px 0 13px 0;}
.social-media-icon{float:left;margin:0 0 0 3px;}
.social-media-block h4{margin:0 0 4px 56px;padding:0;}
.social-media-block p{margin:0 0 7px 56px;padding:0;}
#supporters h2{background:none;border:0;color:#005AB6;}
/* ---------- #.footer ---------- */
#footer{background:#8D837D;color:#FFF;}
#footer a, #footer a:focus, #footer a:hover, #footer a:visited{color:#FFF;}
#footer h2{border-bottom:1px solid #B6B5B5;color:#FFF;font-size:1.1em;margin:0 0 10px;padding:18px 0 6px;width:622px;}
/* ---------- #.cookieMonster ---------- */
#div-cookie-monster{background:#B5B5B5;border:1px solid #FFF;border-width:1px 0;bottom:-1px;color:#FFF;left:0;opacity:0.97;position:fixed;right:0;z-index:10000;}
@media (max-device-width:767px)
{
	/* For iphones and small screen widths move to the top */
	#div-cookie-monster{position:static;}
	#a-cookie-monster-close{-webkit-text-size-adjust:400%;}/*Make the button huge for touch screens*/
}
@media print
{
	#div-cookie-monster{display:none;}
}
#div-cookie-monster *{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#div-cookie-monster p{margin:0.5em 0;}
#div-cookie-monster .div-inner{background:#2B2B2B;margin:auto;max-width:985px;padding:0.5em 1em 0.5em 1em;*padding-top:1em;position:relative;}
#a-cookie-monster-close{border:1px solid #4BE0FF;border-radius:3px;display:block;float:right;margin-left:20px;line-height:1em;text-align:center;width:1em;}
#div-cookie-monster a{color:#4BE0FF;}
#a-cookie-monster-close:active,
#a-cookie-monster-close:hover{background:#4BE0FF;color:#2B2B2B;}
/* ---------- #.Bureaux-detail ---------- */
#bureaux-detail #content{padding:1em;}
#bureaux-detail #content h2{background:none;border:none;}
#bureaux-detail .highlightbox {background:#ECF4FA;margin:20px 0;padding:10px;width:97%;}
#bureaux-detail .highlightbox h2.highlightheading{background:#006BB7 url(highlightbox.gif) bottom left no-repeat !important;color:#FFF !important;margin:0 0 10px 0;padding:5px 5px 16px 5px;}
#bureaux-detail .highlightbox .hightlightcontent{padding:0 5px;}
#bureaux-detail .highlightbox .hightlightcontent h3{margin-top:1em;}
/* ---------- #.Bureaux-volunteer ---------- */
#bureaux-volunteer #content{padding:1em;}
#bureaux-volunteer #content > p,
#bureaux-volunteer form{width:67%;}
#bureaux-volunteer form p{}
#bureaux-volunteer form fieldset{border:1px solid #D7D7D7;margin:20px 0;padding:10px 5px;}
#bureaux-volunteer form fieldset legend{color:#005AB6;font-size:1.3em;font-weight:bold;padding:5px;}
#bureaux-volunteer form fieldset .fieldrow{*zoom:1;margin:5px 0;padding:5px;}
#bureaux-volunteer form fieldset .fieldrow:before,
#bureaux-volunteer form fieldset .fieldrow:after{content:"";display:table;}
#bureaux-volunteer form fieldset .fieldrow:after{clear:both;}
#bureaux-volunteer form fieldset .fieldrow .label{float:left;font-weight:bold;width:35%;}
#bureaux-volunteer form fieldset .fieldrow .labelwide{}
#bureaux-volunteer form fieldset .fieldrow input[type="text"],
#bureaux-volunteer form fieldset .fieldrow input[type="email"],
#bureaux-volunteer form fieldset .fieldrow input[type="tel"],
#bureaux-volunteer form fieldset .fieldrow textarea{padding:4px;width:70%;}
#bureaux-volunteer form fieldset .fieldrow .field{float:left;margin-left:2%;width:60%;}
#bureaux-volunteer form fieldset .fieldrow .fieldlist{list-style:none;}
#bureaux-volunteer form fieldset .fieldrow .fieldbuttons{}




/*
	Contrast & Text resize style.
	These follow after, and will override the styles above.
*/

/* ---------- #.Text-resizer ---------- */
html.size-medium body{font-size:1em;}
html.size-large body{font-size:1.2em;}
/* ---------- #.Color contrast ---------- */
html.colour-yellow body,
html.colour-yellow #wrapper,
html.colour-yellow #header,
html.colour-yellow #service-block{background:#F6F2D3 !important;color:#000066;}
html.colour-yellow a,html.colour-yellow a:focus,
html.colour-yellow a:hover,html.colour-yellow a:visited,
html.colour-yellow #site-tool,
html.colour-yellow #site-tool a{color:#993333;}
html.colour-yellow #site-tool ul#top-nav li{border-right:1px solid #993333;padding-right:4px;}
html.colour-yellow h2,
html.colour-yellow h3,html.colour-yellow h4{border:0 !important;color:#000066 !important;}
html.colour-yellow #site-tool,
html.colour-yellow #footer{background:#F3E8B0;}
html.colour-yellow #div-cookie-monster{background:#F4EFC3;color:#000066;}
html.colour-yellow #div-cookie-monster .div-inner{background:#F3E8B0;}
html.colour-yellow #div-cookie-monster a{color:#7A0000;}
html.colour-yellow #a-cookie-monster-close{border-color:#7A0000;}
html.colour-yellow #a-cookie-monster-close:hover,
html.colour-yellow #a-cookie-monster-close:active{color:#7A0000;}

html.colour-high body,
html.colour-high #wrapper,
html.colour-high #service-block{background:#333 !important;color:#FFF;}
html.colour-high #wrapper{border:1px dotted #444;}
html.colour-high a,html.colour-high a:focus,
html.colour-high a:hover,html.colour-high a:visited{color:#FFD22B;}
html.colour-high h1,html.colour-high h2,
html.colour-high h3,html.colour-high h4{border:0 !important;color:#00FFFF !important;}
html.colour-high #site-tool,
html.colour-high #footer{background:#333;}
html.colour-high #div-cookie-monster{background:#131313;color:#666;}
html.colour-high #div-cookie-monster .div-inner{background:#232323;}
html.colour-high #div-cookie-monster a{color:#FFC81B;}
html.colour-high #a-cookie-monster-close{border-color:#FFC81B;}
html.colour-high #a-cookie-monster-close:hover,
html.colour-high #a-cookie-monster-close:active{background:#FFC81B;color:#232323;}



/* ---------- #.Bx specific ---------- */
#oxtedcab #supporters h2{margin-bottom:5px;padding-bottom:7px;}



/*
	Media queries for responsive design. Modify as design requires.
	These follow after, and will override the styles above.
*/

@media screen and (min-device-width:300px) and (max-device-width:768px),
screen and (max-width:520px)
{
	/* Style adjustments for device viewports between 300px and 480px,
	and screen viewports below 520px. */
	
	/* ---------- #.misc ---------- */
	
	#wrapper{background:#FFF;margin:auto;width:96%;}
	/* ---------- #.site-tools ---------- */
	#site-tool ul{float:none;width:99%;}
	/* ---------- #.theGrid ---------- */
	.column{float:none;width:98%;}
}



@media screen and (min-device-width:768px) and (max-device-width:1024px)
{
	/* Style adjustments for device viewports between 768px and 1024px. 
	Use the default styles on devices with these resolutions*/
	
}



@media print
{
	/* Print styles. */
	
	/* ---------- #.reset ---------- */
	*{font-family:Georgia,"Century Gothic",Arial,Helvetica;}
	body{background:#FFFFFF;font-size:0.75em;}
	.noprint, embed, iframe{display:none;}
	/* ---------- #.typography ---------- */
	h1,h2,h3,h4,h5,h6{color:#000 !important;}
	/* ---------- #.theGrid ---------- */
	.column{float:none;width:98%;}
	/* ---------- #.content---------- */
	#content h2{border-top:none;}
}