/*-----------------------------------------------------Basic form elements-----------------------------------------------------*/

body {
    background: white;
    margin: 0;
    padding: 0;
    background-color: white;
    overflow-y: scroll;
    font-family: arial;
    background-image: url('Images/background_8.jpg');
    overflow-x: hidden;
}

p {
    padding: 5px;
    margin: 10px 10px;
}

#container {
    width: 960px;
    margin: 0px auto;
    background-color: white;
}

#header {
    text-align: center;
    background: white;
    height: 109px;
    padding: 0px;
}

#content {
    background: white;
    float: left;
    width: 920px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    min-height: 796px;
}

#footer {
    clear: both;
    text-align: center;
    background: #222222;
    height: 59px;
    padding: 5px;
}

#HoodLogo {
    position: relative;
    left: 438px;
    bottom: 28px;
    z-index: 0;
    margin-bottom: -200px;
    pointer-events: none;
}

.ClickableTable {
    cursor: pointer;
}


/*-----------------------------------------------------Text formats-----------------------------------------------------*/

.MainHeading {
    font-family: Arial;
    font-size: medium;
    font-weight: bold;
}

.FinePrint {
    font-family: Arial;
    font-size: x-small;
}

.HeaderText {
    font-family: Arial;
    font-size: small;
}

.GettingStarted {
    font-family: Arial;
    font-size: 15px;
}

.ChartControlsSub {
    font-family: Arial;
    font-size: small;
    font-weight: bold;
}

.ChartControlsText {
    font-family: Arial;
    font-size: small;
    font-weight: normal;
}

.ChartControlsTextOption {
    font-family: Arial;
    font-size: small;
    font-weight: normal;
}

.ChartControlsTitle {
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    color: #000000;
}

.MainText {
    font-family: Arial;
    font-size: small;
}

.OverviewFigureTitle {
    font-family: Arial;
    font-size: 13px;
    text-align: center;
}

.UserLoginName {
    font-family: Arial;
    font-size: 10px;
}

.PopLinksText {
    font-family: Arial;
    font-size: 12px;
    color: darkgray;
}

.PopLinksTitle {
    font-family: Arial;
    font-size: 12px;
    color: darkgray;
    font-weight: bold;
}

a.PopLinks:link {
    font-family: Arial;
    font-size: small;
    color: black;
}

a.PopLinks:hover {
    font-family: Arial;
    font-size: small;
    color: #83C442;
    cursor: pointer;
}

a:link {
    color: black;
    text-decoration: none;
}
/* unvisited link */
a:visited {
    color: black;
    text-decoration: none;
}
/* visited link */
a:hover {
    color: #83C442;
    text-decoration: none;
}
/* mouse over link */
a:active {
    color: black;
    text-decoration: none;
}
/* selected link */

.ChartTitle {
    font-family: Arial;
    font-size: 10pt;
    font-weight: bolder;
}

.SectionHeading {
    font-family: Arial;
    font-size: small;
    font-weight: bolder;
}

.SectionSubHeading {
    font-family: Arial;
    font-size: small;
    font-weight: bolder;
    font-style: italic;
}

textarea {
    resize: none;
}

.SlideHeading {
    font-family: Arial;
    font-size: medium;
    font-weight: bolder;
}


.MainPage3ChoiceTitle {
    font-family: Arial;
    font-size: small;
    color: white;
    font-weight: bold;
}

.rotate {
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-family: Arial;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: medium;
    color: #000000;
}

a.tooltip {
    position: relative;
    color: black;
}

    a.tooltip::before {
        content: attr(data-tip);
        font-family: arial;
        font-size: 10px;
        font-weight: bold;
        position: absolute;
        z-index: 999;
        white-space: nowrap;
        bottom: 9999px;
        left: 50%;
        background: #000;
        color: #e0e0e0;
        padding: 0px 7px;
        line-height: 24px;
        height: 24px;
        opacity: 0;
        -webkit-transition: opacity 0.4s ease-out;
        -moz-transition: opacity 0.4s ease-out;
        -o-transition: opacity 0.4s ease-out;
        transition: opacity 0.4s ease-out;
        transition-delay: 1s;
    }

    a.tooltip:hover::before {
        opacity: 1;
        bottom: -35px;
    }

.Banner1 {
    font-size: 26px;
    font-weight: bold;
    font-family: Arial;
    text-align: left;
    padding-left: 10px;
    color: #454545;
    height: 50px;
}

.Banner2 {
    font-size: 17px;
    font-family: Arial;
    text-align: left;
    padding-left: 10px;
    color: #454545;
}

.Greeting {
    font-family: Arial;
    font-size: small;
    font-weight: normal;
    color: black;
}

.NavTitle {
    font-family: Arial;
    font-size: small;
    font-weight: normal;
    color: black;
}

.NavText {
    font-family: Arial;
    font-size: x-small;
    font-weight: normal;
    color: black;
}

a.NoHightlight:link {
    color: White;
    text-decoration: none;
}
/* unvisited link */
a.NoHightlight:visited {
    color: White;
    text-decoration: none;
}
/* visited link */
a.NoHightlight:hover {
    color: White;
    text-decoration: none;
}
/* mouse over link */
a.NoHightlight:active {
    color: White;
    text-decoration: none;
}

a.WhiteHightlight:link {
    color: black;
    text-decoration: none;
}
/* unvisited link */
a.WhiteHightlight:visited {
    color: black;
    text-decoration: none;
}
/* visited link */
a.WhiteHightlight:hover {
    color: white;
    text-decoration: none;
}
/* mouse over link */
a.WhiteHightlight:active {
    color: black;
    text-decoration: none;
}

.ChartTitle {
    padding: 0px;
    font-family: Arial;
    font-size: small;
    font-weight: bold;
    text-align: center;
}

.Instructions {
    font-family: Arial;
    font-size: small;
    font-style: italic;
}

ChartLibOptions {
    font-family: Arial;
    font-size: small;
    color: white;
    font-weight: bold;
    text-align: justify;
}

.Loading {
    font-family: Arial;
    font-size: small;
    font-style: italic;
}

.ChartNotes {
    font-family: Arial;
    font-size: 11px;
}




/*-----------------------------------------------------Slideshow (Landing page)-----------------------------------------------------*/

pre {
    font-family: "Source Code Pro", monospace;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: whiteSmoke;
    border: 1px solid #CCC;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#banner-fade,
#banner-slide {
    margin: 0px auto;
    margin-bottom: 40px;
    margin-top: 10px;
}

ul.bjqs-controls.v-centered li a {
    display: block;
    padding: 10px;
    background: lightblue;
    color: #000;
    text-decoration: none;
}

    ul.bjqs-controls.v-centered li a:hover {
        background: #83C442;
        color: #fff;
    }

ol.bjqs-markers li a {
    padding: 5px 10px;
    background: lightgray;
    color: #fff;
    margin: 5px;
    text-decoration: none;
}

    ol.bjqs-markers li.active-marker a,
    ol.bjqs-markers li a:hover {
        background: #83C442;
    }

p.bjqs-caption {
    background: rgba(255,255,255,0.5);
}




/*-----------------------------------------------------Custom form elements-----------------------------------------------------*/

/*Custom Combobox*/

label {
    position: relative;
    display: inline-block;
}

select {
    display: inline-block;
    padding: 4px 3px 4px 4px;
    width: 170px;
    font-family: Arial;
    font-size: small;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;
}

/* Select arrow styling */
.notIE label:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 3px;
    right: 4px;
    background: url("../Images/ComboButton.png") no-repeat right center white;
    pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) {
    .notIE label:after {
        display: none;
    }
}


/*Custom Radio Buttons*/
/*Note - adding ":root" before the CSS style class means that the style sheet will not apply and the buttons will operate correctly in IE8 */

/*IE8 fix*/
/*This works by using the Root hack, making the main code unviewable to IE8 and below, then having duplicate CSS label code to fix the text font. The options display as simple, but ugly, standard radio button.*/

input[type=radio] + label {
    display: inline-block;
    margin: -2px;
    padding: 4px 8px;
    margin-bottom: 0;
    font-size: small;
    line-height: 20px;
    color: #333;
    text-align: center;
}
/*IE8 fix*/


:root input[type=radio] {
    display: none;
}

    :root input[type=radio] + label {
        display: inline-block;
        margin: -2px;
        padding: 4px 8px;
        margin-bottom: 0;
        font-size: small;
        line-height: 20px;
        color: #333;
        text-align: center;
        text-shadow: 0 1px 1px rgba(255,255,255,0.75);
        vertical-align: middle;
        cursor: pointer;
        background-color: #f5f5f5;
        background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
        background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
        background-image: -o-linear-gradient(top,#fff,#e6e6e6);
        background-image: linear-gradient(to bottom,#fff,#e6e6e6);
        background-repeat: repeat-x;
        border: 1px solid #ccc;
        border-color: #e6e6e6 #e6e6e6 #bfbfbf;
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
        border-bottom-color: #b3b3b3;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    }

    :root input[type=radio]:checked + label {
        background-image: none;
        outline: 0;
        -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
        background-color: #e0e0e0;
    }




/*-----------------------------------------------------Tabbed menus (i.e. in the dataviews)-----------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
}

body {
}

#wrapper {
    width: 820px;
    margin: 0px auto 0;
}

    #wrapper h1 {
        color: black;
        text-align: center;
        margin-bottom: 20px;
    }

#tabContainer {
    width: 800px;
    padding: 15px;
    /*THIS IS THE COLOUR BEHIND THE TABS*/
    background-color: white;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#tabs {
    height: 30px;
    overflow: hidden;
}

    #tabs > ul {
        font: 1em;
        list-style: none;
    }

        #tabs > ul > li {
            margin: 0 2px 0 0;
            padding: 7px 10px;
            display: block;
            float: left;
            color: #FFF;
            font-size: 12px;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -moz-border-radius-topleft: 4px;
            -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 0px;
            -moz-border-radius-bottomleft: 0px;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 0px;
            background-color: darkgrey;
        }

            #tabs > ul > li:hover {
                background-color: #83C442;
                cursor: pointer;
                color: black;
                font-size: 12px;
            }

            #tabs > ul > li.tabActiveHeader {
                background-color: #83C442;
                cursor: pointer;
                color: black;
                font-size: 12px;
            }

#tabscontent {
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 10px 10px 25px;
    margin: 0;
    background-color: lightgrey;
    color: #333;
}




/*-----------------------------------------------------Animated dropdown menu-----------------------------------------------------*/

/* Written by Kyle Hamilton of candpgeneration.com
		   CSS3 transitions - animated dropdown menu without javascript that plays nice in IE7+, FF, CHROME, SAFARI
		   The original bare bones version can be found at: //candpgeneration.com/CSS-dropdowns/CSS3-dropdown.html
		   You are free to use this code any way you like.
		   Please do not remove this comment. */

/* the main menu */
.navigation {
    display: block;
    position: absolute;
    width: 960px;
    margin-left: 4px;
    z-index: 1000;
}

    .navigation ul {
        list-style: none;
        margin: 0;
        padding: 0; /* gets rid of any inherited margins and padding */
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: normal;
        position: relative;
        z-index: 1000;
    }

    .navigation > ul > li {
        position: relative;
        width: 19.7%;  /*Sets the width of the tab*/
        float: left;
        margin-right: 2px; /*This sets the spacing between panels*/
        font-size: 12px; /* this is here and not above, so that the subs can be made smaller using a % if desired */
    }

        .navigation > ul > li > a {
            background-color: #363F43; /*  grey */
            display: block;
            padding: 8px 14px;
            text-decoration: none;
            text-align: center;
            color: white;
        }

            .navigation > ul > li > a:hover {
                background-color: #83C442; /* Green */
                color: white; /* light grey */
            }


    /* the show/hide effects */
    /* the drop-down box */

    .navigation ul ul {
        /*background-color: #e6056f;*/ /* remove. this is for illustration purposes only */
        width: 400px; /* you need a width to accomodate tertiary menus */
        position: absolute;
        z-index: 100;
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;
    }


    /* don't display tertiary box yet */
    .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul {
        height: 0;
    }
    /* tertiary drop-down box */
    .navigation ul ul ul {
        left: 170px;
        width: 170px;
    }

    .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
    .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul {
        height: 400px; /* Set the max height of the drop down menus */
    }

    /* drop-down item styles */
    .navigation ul ul li {
        background-color: #eaeaea; /* grey */
        width: 170px;
    }
/* unfortunate ie7 gap fix */
.ie7 .navigation ul ul li {
    margin-bottom: -3px;
}

.navigation ul ul li:hover {
    background-color: #83C442;
}

.navigation ul ul li a {
    display: block;
    text-decoration: none;
    margin: 0 12px;
    padding: 5px 0;
    color: #4c4c4c; /* grey */
    border-bottom: 1px solid #999;
}

    .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
        color: #ffffff; /* white */
        border-bottom: 1px solid #666666;
    }

.navigation ul ul li:last-child a {
    border: 0;
}

.arrow {
    background: right center no-repeat;
}

.header {
    width: 960px;
    height: 50px;
}

.content {
    position: relative;
    width: 960px;
    height: 500px;
    color: white;
    background-color: black;
    overflow: hidden;
}

.item {
    position: absolute;
    top: 50px;
    left: 20px;
    width: 400px;
    height: 400px;
    background-color: grey;
}