/**
*
*  purpose of the stylesheet is to style the structural representation of the high
*  visibility page
*  @author: AShrivastava, rsharp
*  client: ESFRS
*  date created: 02/11/2009
*  @version: 1.0.1
*  @since: 1.0.0
*  1.0.0 - 02/11/2009 - Version 1
*  1.0.1 - 17/11/2009 - annotations added/modified -rsharp
**/

/* @import url("resetter.css"); removed due to lack of support */
/* remove any browser rules for all page elements. these rules will be overwritten
by us later in this document */
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, a, abbr, acronym, img, dl, dt,
dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    outline:0px;
    margin:0px;
    padding:0px;
    border:0px;
}
table{
    border-collapse:separate;
    border-spacing:0px;
    margin-bottom:20px;
    /* table attribute cellspacing must be manually reset in mark-up, i.e. cellspacing="0" - as */
}

body{
    position:relative;
    line-height:1.5em;
    background:#aaa url(../../image/hiviz/bgGradient.jpg) repeat-x;
    /*background-color:#232323;*/
}
/* body wrapper which surrounds whole page i.e. body>bodyWrapper>* */
#bodyWrapper{
    min-width:960px;/* do not allow page to be smaller than 960px (for 1024x768), this leaves Content's min-width 740px (excl.LeftNavBar). */
    max-width:1240px;/* change this to 1240 for max width set to users res of 1280x1024
    can cause issues with getting stuff look right on both res' and all browsers -
    especially on home page i.e. centre columns/divs */
    margin:0px auto;/* centres page */
    border:5px solid #343434;
    background-color:#000000;
}
/* list rules */
ul{
    margin:7px 0px 0px 10px;
    list-style:none;
}
ul div ul{
    margin:0 0 4px 30px;
}
/* image rules */
img{
    border:0px;/* for older browsers - ry */
    border:none;
    margin:3px;
}
/* images used as hyperlinks */
a img{
    border:1px solid #000;
}

a img:hover, a img:focus{
    border-color:#ffff00;
}
/* clear fix is a commonly used feature which ensures there is a break in content -ry */
.clearFix{
    clear:both;
    height:0;
    margin:0;
    padding:0;
}
.clearFixContainer:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

/* content block within centre panel */
#contentBlock{
    background-color:#232323;
    padding:2px;
    overflow:auto;
}
/* Right-Central-Panel within centre panel floatRight width30 withBorder5 marginLeft10 alignLeft padding5 */
#centrePanel #rightCentralBlock{
    text-align:left;
    float:right;
    width:245px;
    border:solid 4px #aaa;
    margin:0 0 0 6px;
    padding:5px;
    overflow:auto;
}
/* horizontal line */
hr{
    height:1px;
    background-color:#d8d9db;
    border:0;
}
/* document list e.g. for lists of pdf files */
ul.documentList li, ol.documentList li{
    background-color:#000;
    margin:.3ex 0 0 0;
    overflow:auto;
}
ul.documentList li ul li, ol.documentList li ul li{
    background-color:#232323;
    margin:.3ex 0 0 0;
    overflow:auto;
}
ul.documentList li.header, ol.documentList li.header{
    margin-top:15px;
    padding:1px;
    background-color:#343434;
}
/* span element within document list and in tables */
ul.documentList li span, ol.documentList li span, td span{
    float:right;
}
/* headers */
h1, h2, h3, h4, h5, h6{
    margin:15px 0 10px 0;
    display:block;
    background-color:#343434;
}
#contentBlock h3:first-child, #rightCentralBlock h3:first-child{
    margin-top: 0px;
    padding-top: 0px;
}
/* h2 is used for section headers */
h2{
    clear:both;
    min-height:20px;
    padding:7px 0px 0px 5px;
    margin:0px 0px;
    background:#000 url("../../image/hiviz/mainHead.jpg") repeat-x;
    border:1px solid #e5e5e5;
}
#leftPanel h2, #centrePanel h2, #rightPanel h2{
    clear:none;/* so that content flows correctly within the content panels */
}
/* tables */
table{
    border-collapse:collapse;
    border-spacing:0px;
    padding:2px;
    margin-top:5px;
    width:100%;
}
table th,td{
    padding:3px;
    border:1px solid #aaa;
}
th{
    background-color:#343434;
    border:1px solid #dedede;
}
/* top head wrapper which appears at top of page */
#headWrapper{
    margin:0px;
}

/* Accessibility-Bar options */

/* accessibility bar is the grey bar at the top of every page */
#accessibilityBar{
    min-height:20px;
    background-color:#343434;
    width:100%;/* required for ie6 */
    margin:-15px 0 0 0;/* puts bar right at top of page */
    padding:2px 0 0 0;
    overflow:hidden;
}
/* lists within the accessiblity bar */
#accessibilityBar ul{
    padding:3px 0 0 0; /* Top margin increased to fix IE bug - Ed */
    margin:5px 0 5px 0;
}
#accessibilityBar li{
    float:left;
    clear:none;
    padding:0 17px 0 0;
    list-style:none;
}
/* Following rules display separators between list-items and also align them */
#accessibilityBar ul li.txtResize{
    float:left;
    margin:.2ex .1ex 0 .1ex;
    padding:0 .5ex 0 .5ex;
    border-right:1px solid #ff0;
}
#accessibilityBar ul li.txtResize{
    height:2.1ex;
}
#accessibilityBar ul li.lastChild{
    border:0;
    margin:-2px 0 0 0;
}
/* End of accessibility-bar options */


/* banner block which appears within head wrapper and shows esfrs logo */
#bannerBlock{
    position:relative;
    clear:left;/* content on left of banner block */
    height:70px;
    background:#232323 url("../../image/hiviz/webBanner.jpg") no-repeat top left;
    margin:0px;
}
/* ESFRS Badge that is also a link to the homepage. */
#bannerBlock a:link img#badgeLinkToHome, #bannerBlock a:visited img#badgeLinkToHome{
    position:absolute;
    top:0px;
    left:4px;
    margin:0px;
    padding:0px;
    border:none;
}
#bannerBlock a:hover img#badgeLinkToHome, #bannerBlock a:focus img#badgeLinkToHome{
    margin:-1px;
    border:1px dotted #0ff;
}
/* form elements */
div.rowBlock{
    clear: both;
    margin-bottom:10px;
    padding-left:90px;
}
div.rowBlock label {
    padding:2px;
    vertical-align:top;
    float:left;
    width:28%;
    clear:left;
}
/* input elements e.g. text box */
#contentBlock input.text{
    width:250px;
}
/* submit/button input types */
input,textarea, select, .submit, .button{
    border:1px solid #cfc;
}
.submit,.button{
    margin:3px;
    margin-top:15px;/* position away from form */
    min-width:80px;
    text-align:center;
}
.button{
    clear:none;/* several buttons can appear on one line */
}

input, textarea, select, .submit:active, .button:active{
    background-color:#000;
    color:#ff0;
}
input:focus, textarea:focus, select:focus, .submit:focus, .submit:hover, .button:focus, .button:hover, .button:active,
.btnSearch:hover, .btnSearch:focus, .btnSearch:active{
    background-color:#ffffa9;
    color:#000;
}
input:hover, textarea:hover, select:hover{
    border-color:#00ffff;
}
.button:hover, .submit:hover, .btnSearch:hover{
    cursor:pointer;
}
/* //end of form elements */

/* trunk wrapper holds content and appears after the head wrapper */
#trunkWrapper{
    overflow:hidden;
    margin:0px;
}
/* left panel on left side of page within trunk */
#leftPanel{
    width:200px;/* fixed width */
    float:left;
    clear:none;
    padding-bottom:10px;
}
/* centre panel in centre of page within trunk */
#centrePanel{
    margin-top:5px;
    margin-left:215px;
}
/* for when there is no left panel on page e.g. search pages */
.noLeftPanel{
    margin-left:0px;
}
/* right panel on right side of page */
#rightPanel{
    float:right;
    clear:none;
    width:200px;/* fixed width */
}
/* foot wrapper which appears at bottom of page */
#footWrapper{
    margin:10px 0 0;
    border-top:3px solid #595959;
    clear:both;
    background-color:#232323;
}

/* Go top button that appears at the bottom-right corner. */
#footWrapper .jumpToTop{
    background-color:#000;
    position:fixed;
    bottom:0;
    right:0;
    padding:0px;
    margin:0px;
    width:7.2em; /* useful property to resize the width if div-box when text is resized by javascript - Ed. */
    opacity:0.92;
    filter:alpha(opacity=92);
}
#footWrapper .jumpToTop a:link, #footWrapper .jumpToTop a:visited{
    color:#00ffff;
    font-weight:normal;
    font-size-adjust:none;
    font-stretch:normal;
    display:block;
    text-decoration:none;
    text-align:center;
    line-height:1.4;
    margin:0px;
    padding:0px;
    border:1px #9999ff solid;
}
#footWrapper .jumpToTop a:hover,#footWrapper .jumpToTop a:focus{
    background-color:#444444;
    color:#ffff00;
}
#footWrapper .jumpToTop a:focus{
    border:1px #fff dotted;
}
#footWrapper #lastUpdated, #footWrapper #copyRightBar{
    width:31%
}


/* Beginning of SPECIFIC-CLASSES: */

/* vCentre: Centre-aligns the content of the headings both horizontally & vertically */
div.vCentre{
    width:100%; /* To expand the width the edge of block. */
    height:auto;
    margin-bottom:5px;
}
/* vCentre applied on headers h2 to h5 (there headers must be enclosed within vCentre & vCentreContainer) */
div.vCentre div.vCentreContainer h2, div.vCentre div.vCentreContainer h3, div.vCentre div.vCentreContainer h4, div.vCentre div.vCentreContainer h5{
    padding:0 3px;
    margin:0;
    width:1%;/*Hack to apply width:100%; on display:table-(cell/row); But for IE7 use width:auto; & positioning-hack for vertical alignment - Ed */
    display:table-cell;
    vertical-align:middle;  /* Does NOT work in IE7 or below, hence hack is used. */
    height:3em;
    text-align:center;
}
/* End of vCentre */

/* For gallary of pictures */


.photo img {
    border: 1px solid #666;
    background-color: #fff;
    padding: 4px;
}
.figure{
    float:left;
    width:140px;
    height: 100px;
    margin-right: 5px;
    margin-bottom: 30px;
}
#gallery {
    margin-top:20px;
}

/* End of For gallary of pictures */

/*For use on news pages */

.newsSidePanel { border:5px solid #900000; padding:10px; margin:10px; text-align:left;}

/* used on Equality & Diversity Protected Characteristics pages */
.pcsDocs th {text-align:left;}

.pcsDocs  {
    width:70%;
    float:right;
}


/* End of SPECIFIC-CLASSES */


/* Beginning of GENERAL-CLASSES (Can be used with all applicable tags): */

/* Following is a generic layout for table-structure, which can be used anywhere. */
.clip {
    border:1px dotted #AE3226;
    padding:5px;
    margin-top:15px;
    margin-right:10px;
    margin-left:10px;
}

/* used for emphasis on quotes in a clip box */
.bigQuotes {
    font-size:1.5em;
    color:#AE3226;
}


.cssTable{
    display: table;
    border:solid 1px #cfc;
}
.row{
    display: table-row;
}
.cell{
    display: table-cell;
    text-align:left;
    border:solid 1px #cfc;
    padding: 0px 2px;
}
.cellHead{
    display: table-cell;
    text-align:center;
    vertical-align:middle;
    border:solid 1px #cfc;
    padding: 0px 2px;
}

/* Line height or Vertical space if used with <br> tag */
.lineHeightHalf{
    line-height:.5em;
    height:.5em;
}
.lineHeightDouble{
    line-height:3em;
    height:3em;
}
.lineHeightTriple{
    line-height:6em;
    height:6em;
}
.lineHeightQuad{
    line-height:9em;
    height:9em;
}

/* Generic rules for floating objects */
.floatRight {float:right;text-align:right;}
.floatLeft {float:left;text-align:left;}
.clearLeft {clear:left;}
.clearRight{clear:Right;}

/* Generic rules for width */
.width5 {width:5%;}
.width10 {width:10%;}
.width20 {width:20%;}
.width30 {width:30%;}
.width40 {width:40%;}
.width45 {width:45%;}
.width48 {width:48%;}
.width50 {width:50%;}
.width55 {width:55%;}
.width60 {width:60%;}
.width70 {width:70%;}
.width80 {width:80%;}
.width270px {width:270px;}
.width200px {width:200px;}
.width90 {width:90%;}
.width100 {width:100%;}


/* Generic rules for border: */
.withBorder {border:1px solid #900000;}
.withBorder5 {border:5px solid #900000;}
.withBorderGrey {border:5px solid #DFDFDF;}

/* generic rules for element with no border (tr,td,th included for tables) */
.noBorder,.noBorder tr, .noBorder td, .noBorder th{
    border:0;
    border:none;
}

/* rules for images of people */
.personImg {border: 1px solid #900000; border-left: solid #900000 5px; margin-right:10px; }

/* For postioning the implementing divs in two columns, where each div appears as a box with border:
* Note: if applied on the bottom most objects within the parent container then <div class="clearFix"> MUST
* be used in the mark-up followed by the last implementing div (i.e. at the bottom.)
*/
.twoColumnBoxex{
    float:left;
    width:45%;
    border:1px dotted #900000;
    margin:0 5px 5px 0;
    padding-left:20px;
}

/* green text */
.green{
    color:#c6f209; /* HiViz Green */
}

.marginRight5 {margin-right:5px;}
.marginLeft5 {margin-left:5px;}
.marginRight10 {margin-right:10px;}
.marginRight20 {margin-right:20px;}
.marginLeft10 {margin-left:10px;}
.marginLeft20 {margin-left:20px;}
.marginLeft50 {margin-left:50px;}
.marginLeft60 {margin-left:60px;}
.marginTop0 {margin-top:0;}
.marginTop10 {margin-top:10px;}
.marginBottom0 {margin-bottom:0px; padding-bottom:0px;}
.marginBottom10 {margin-bottom:10px;}
.marginTop3Lines {margin-top:3em;}
.marginTop6Lines {margin-top:6em;}
.margin20{margin:20px;}

.padding5 {padding:5px;}
.padding10 {padding:10px;}
.paddingRight10 {padding:10px;}
.paddingBottom10 {padding:10px;}

.alignCenter {text-align:center;}
.alignMiddle {vertical-align:middle;}
.alignLeft {text-align:left;}
.centerDiv{ margin: 0 auto;}
.noUnderline {text-decoration: none;}

/*For CFO blog Page */

.yellowPanel{
    width:40%;
    padding-left:10px;
    padding-top:5px;
    margin-left:10px;
    border-left:1px dotted #ae3226; border-bottom:1px dotted #ae3226;
    float:right;
}

.yellowPanel li:first-line {font-weight:bold;}
.yellowPanel ul {list-style-type:disc; padding:10px;}
.clip {
    border:1px dotted #AE3226;
    padding:5px;
    margin-top:15px;
    margin-right:10px;
    margin-left:10px;
}
.blog {width:80%; float:right; border-left:1px dotted #ae3226; padding-left:5px;  border-bottom:1px dotted #ae3226;}
#blogPicPanel {float:left; width:15%; border-left:1px dotted #ae3226; border-bottom:1px dotted #ae3226; padding:5px;}

/*For Black Museum */

#bmMainPanel {width:70%; margin-right:5px;float:left;}
#bmRightPanel {width:25%; border:1px solid #AE3226; float:right;}

#bmContentBlock {height:1350px;}

#bmCaseList a { text-decoration: none;}
#bmCaseList li {margin-bottom: 8px;}

#bmLogo {
    width:100%;
    background-color:#000000;
    text-align:center;
    margin-bottom:10px;
}

#do {background-image: url(/image/communitySafety/blackmuseum/wheatbags2/dos.jpg);}
#dont {background-image: url(/image/communitySafety/blackmuseum/wheatbags2/donts.jpg);}
#do, #dont {
    height :70px;
    background-repeat: no-repeat;
    text-align: right;   
    font-size: 2em;
    margin-top:10px;
    margin-left:20px;
    margin-right:20px;
}

.italicBold {
    font-size:1.1em;
    font-style:  italic;
}


/*For Equality and Diversity workforce Profile and Monitoring page */
#totalStaff td {width:16.66%;text-align:center;}
.total td {font-weight: bold;}
#contentsTable td {text-align:center; width:50%;}
#contentsTable a {text-decoration: none;}
#contentsTable a:hover { text-decoration:underline;}
#contentsTable {margin: 0 auto;}
.centertd td { text-align:center; }
.wholetime th, .wholetime { text-align:left;}
.rds th,.rds{ text-align:left;}
.controlth, .control{ text-align:left;}
.supportth,.support{text-align:left;}
.fourTDs td {width:25%; }
.fiveTDs td {width:20%; }
.sixTDs td {width:16.67%; }
.eightTDs td {width:12.5%; }
.nineTDs td {width:11.11%; }
.tenTDs {width:10%;}

/*end of For Equality and Diversity workforce Profile and Monitoring page */