/*
    -------------------------------------------------------------
    GENERAL NOTES
    --------------------------------------------------------------
    The styles have been seperated into seperated stylesheets for developement. 
    These should be combined and minified before deployment.
    
    This file 0up.css contains all global rules and all structural rules for small screensizes.
    All other files must contain media queries and should inherit from these styles.    
    
    normalize.css from http://github.com/necolas/normalize.css is used as a reset 
    and should be loaded in first. It is used unmodified.
    
    Any ie hacks should be clearly commented
    Modenizr.js is used for feature detection where nesessary
    
    -------------------------------------------------------------
    COLOURS
    --------------------------------------------------------------
    BACKGROUND: #2d2927 //Dark Grey
    
    TEXT:       #C1C1C1
    LIGHT GREY: #ccc
    GREY:       #999
    
    GREY ONE:   #343130;body
    GREY TWO:   #2D2928;
    GREY THREE: #292625;
    GREY FOUR:  #4E4A49
    
    RED:        #BF1E2E
    ORANGE:     #F1592A
    YELLOW:     #FAA634
    GREEN:      #CBDB2A
    BLUE:       #00ADDC
    -------------------------------------------------------------
    WEBFONTS
    --------------------------------------------------------------
    served from https://webfonts.fonts.com/
        
    text:       Avenir LT W01 45 Book
    bold:       Avenir LT W01 65 Medium
    Accent:     Museo W01 700
    
    -------------------------------------------------------------
    OTHER CONSTANTS
    --------------------------------------------------------------
    border-radius: 6px;
   
*/


/* -------------------------------------------------------------------
    FLUID MEDIA 
-----------------------------------------------------------------------------------*/
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video, iframe {
    max-width: 100%;
    vertical-align: middle;
}

object, embed, video {
    vertical-align: top;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width: 17%;
    text-align: right;
    height: 60px;
}

/*-----------------------------------------------------------------------------------*/


/* -------------------------------------------------------------------
    TYPOGRAPHY STRUCTURE
-----------------------------------------------------------------------------------*/
/*  Pixel Values are used here (until browser support for rems is better) */
html {
    font-size: 62.5%;
}

body {
    font: 13px/16px 'Avenir LT W01 45 Book', Arial, Helvetica, Sans-Serif;
    color: #C1C1C1;
}

p {
    margin: 5px 0 15px;
    padding: 0;
}

    p.small-text {
        line-height: 18px;
    }

h1 {
    font: normal 21px/25px 'Avenir LT W01 85 Heavy', Arial, Helvetica, Sans-Serif;
    margin: 30px 0 10px;
    text-transform: uppercase;
}

h2 {
    font: normal 21px/21px 'Avenir LT W01 85 Heavy', Arial, Helvetica, Sans-Serif;
    margin: 6px 0;
}

h3 {
    font: normal 15px/20px 'Avenir LT W01 65 Medium', Arial, Helvetica, Sans-Serif;
    margin: 8px 0;
    text-transform: uppercase;
    color: #F1592A;
}

.legal h3 {
    margin-top: 30px;
}

.loan h3, .loan tr.over td {
    color: #CBDB2A;
}

.loan-details {
    padding: 10px 0px;
    font-size: 14px;
}

h4 {
    font: normal 16px/20px 'Avenir LT W01 65 Medium', Arial, Helvetica, Sans-Serif;
    margin: 10px 0 0;
    color: #fff;
}

b, strong, bold {
    font-family: 'Avenir LT W01 85 Heavy',Arial,Helvetica,Sans-Serif;
    font-weight: normal;
}

em {
    font-family: 'AvenirLTW01-35LightObli',Arial,Helvetica,Sans-Serif;
    font-style: normal;
}

a:link, a:visited {
    color: #fff;
    text-decoration: none;
}

a:hover, a:active {
    color: #ccc;
}



/* -------------------------------------------------------------------
    MAIN STRUCTURE
-----------------------------------------------------------------------------------*/

html {
    padding: 0;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    background: #2d2927 url('../Images/bg.jpg') repeat-x center top;
}

.gridContainer {
    margin: 0 auto;
    padding: 0 1.5%;
    width: 97%;
}

    .gridContainer.login {
        max-width: 600px;
    }

.clearfix {
    *zoom: 1;
}

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both;
    }
/* -------------------------------------------------------------------
    HEADER
-----------------------------------------------------------------------------------*/

div[role='banner'] {
    overflow: hidden;
    width: 95%;
    display: block;
    padding: 0 2.5%;
}
    /*The logo should be hidden on small devices*/
    div[role='banner'] img.logo, .brand {
        display: none;
    }

.banner {
    float: right;
    margin: 0px 10px 0 0;
    padding: 6px 20px;
    font-size: 16px;
    color: #fff;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) inset, 0 0px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) inset, 0 0px 0 rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------------
   Navigation
-----------------------------------------------------------------------------------*/

#nav-wrapper {
    overflow: visible;
    *z-index: 1000;
    padding-top: 2px;
    padding-bottom: 2px;
}


nav a.brand img {
    width: 130px;
}

.loginbutton {
    background-color: #BF1E2E;
}

/* -------------------------------------------------------------------
    HERO section on the home page
-----------------------------------------------------------------------------------*/

.hero {
    padding: 0 1%;
    width: 98%;
    color: #ccc;
    padding-bottom: 10px;
}

    .hero > p {
        font: 16px 'Avenir LT W01 45 Book', Arial, Helvetica, Sans-Serif;
    }

    .hero a {
        padding-left: 20px !important;
        padding-right: 20px !important;
        font-size: 16px;
        text-transform: none !important;
    }

    .hero header h1 {
        font: 33px/1 'Museo W01 700', Arial, Helvetica, Sans-Serif;
        margin-bottom: 0px;
        margin-top: 30px;
        letter-spacing: -1px;
        color: #fff;
        text-transform: none;
    }

    .hero header h2 {
        margin-top: 0;
    }


/* -------------------------------------------------------------------
    SIDE BAR
-----------------------------------------------------------------------------------*/

#SideBar {
    float: left;
    width: 100%;
    margin-left: 0;
}

/* -------------------------------------------------------------------
    MAIN CONTENT
-----------------------------------------------------------------------------------*/

#main-wrap {
    float: left;
    width: 100%;
    margin-left: 0;
}

#main-wrap-full-content {
    float: right;
    width: 100%;
    margin-top: 2%;
    margin-left: 2%;
}

div[role="main"] {
    clear: both;
    float: left;
    width: 100%;
    padding: 0 0% 20px;
}

.loginForm {
    margin-top: 20px;
}


/* -------------------------------------------------------------------
    FOOTER
-----------------------------------------------------------------------------------*/

footer > ul {
    margin: 20px 0 0;
    list-style: none;
    padding: 0;
}

    footer > ul > li {
        margin: 0 0 10px;
    }

        footer > ul > li > a:link, footer > ul > li > a:visited {
            color: #F1592A;
            font-size: 16px;
        }

footer > div {
    margin: 20px 0 0;
}

/* -------------------------------------------------------------------
    MODULES
-----------------------------------------------------------------------------------*/
/* -------------------------------------------------------------------
    CONTENT BOX
    Defines a box to wrap content. background colors are defined by extenting the class
    Some modification is done base on where the box appears eg. sidebar or footer
*/
.content-box {
    position: relative;
    clear: both;
    display: block;
    overflow: hidden;
    margin: 0 0 10px;
    padding: 6px 1%;
    width: 98%;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.1);
}

    .content-box.login, .loginblank {
        padding: 10px 3% 20px 3%;
        width: 94%;
    }

        .content-box.login .actions {
            padding-top: 15px;
            margin-bottom: 0;
        }




    /*this makes sure any inner content boxes keep their round corners on small devices*/
    .content-box .content-box {
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }

    .content-box.one {
        background-color: #343130;
    }

    .content-box.two {
        background-color: #2D2928;
    }

    .content-box.three {
        background-color: #292625;
    }

    .content-box.four, .content-box.current {
        background-color: #4E4A49;
    }

.mobile-footer-image {
    float: left;
    padding-left: 11px;
}

.mobile-footer-text {
    float: left;
    padding-left: 22px;
    padding-top: 35px;
}

.mobile-tagline-bold {
    color: #ffffff;
    font-weight: 595;
}

.mobile-footer-stores {
    float: right;
    padding-left: 13px;
    padding-top: 30px;
}

.mobile-store-link.left {
    float: left;
    padding-right: 8px;
    margin-bottom: 7px;
}

.mobile-store-link.right {
    float: right;
}

#SideBar .content-box {
    padding: 6px 1%;
    width: 98%;
}

    #SideBar .content-box .content-box {
        padding: 2%;
    }

/* box is a kind of extension of content-box. used to target certain content with certain content-boxes */
.box h1, .box h3, .box h4, .box > .info-panel, .box > p {
    padding-left: 5px;
}

.box h1 {
    margin-top: 10px;
    margin-bottom: 0;
}

.box h4 {
    margin-top: 4px;
    margin-bottom: 12px;
}



/* -------------------------------------------------------------------
       Message Box
       The box that appears on each page for messages. Different classes control Message State (error, success etc.)

 */

.MessageBox {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    .MessageBox.Success {
        border: 1px solid #8E991D;
    }

        .MessageBox.Success > h3 {
            color: #CBDB2A;
        }

    .MessageBox.Error {
        border: 1px solid #9E1318;
        color: #fff;
    }

        .MessageBox.Error > h3 {
            color: #BF1E2E;
        }

    .MessageBox.Notification {
        border: 1px solid #A93E1D;
        color: #fff;
    }

        .MessageBox.Notification > h3 {
            color: #F1592A;
        }


/* -------------------------------------------------------------------
        TOUCH CAROUSEL ARROWS VISIBLE
    -----------------------------------------------------------------------------------*/
.touchcarousel.black-and-white .arrow-holder {
    display: block;
}

/* -------------------------------------------------------------------
    Carousel Item Container
    Defines the individual items within a carousel or tile of some kind.
*/
.containers {
    background-color: #2E2B2A;
    float: left;
    padding: 12px;
    width: 220px;
}

/* loan summary  */
.name {
    padding-left: 6px;
}

.small-details .thumbnail-wrap {
    position: relative;
    height: 145px;
    overflow: hidden;
    margin-bottom: 20px;
}

.small-details p {
    color: #fff;
    margin: 0;
}

.small-details div {
    margin-bottom: 6px;
}

/* Caption Block over images */

.image-caption {
    position: absolute;
    display: block;
    width: 100%;
    padding: 0 6px 5px;
    background: #2D2928;
    background: rgba(46,43,42, 0.8);
}



/* -------------------------------------------------------------------
    Collapsible 
    Current used for the FAQs and the Staff Bios
*/

.collapsible {
    overflow: hidden;
    padding: 4px 8px;
}
    /*This hides the staff photos on small devices. May need to be more specific in future */
    .collapsible img {
        display: none;
    }

    .collapsible h4:hover, .collapse-open h4 {
        color: #F15A29;
    }

    .collapsible:hover {
        cursor: pointer;
    }

.collapse-head {
    float: left;
    margin: 10px 0 0;
}

    .collapse-head > h4, .collapse-head > p {
        margin: 0;
    }

/* Helper icons to display near sliders TODO: This should probaly be done using a sprite */

img.swipe, img.slide {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
}

@media only screen {
    img.swipe, img.slide {
        display: none;
    }
}
/* -------------------------------------------------------------------
    Info Panels - hidable panels
*/
.info {
    position: absolute;
    z-index: 1;
    right: 9px;
    top: 8px;
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -99999px;
    background: transparent url(../images/icon-sprite.svg) 0 -146px no-repeat;
    background-size: 20px;
}


    .info:hover, .info.active, .content-box:hover .info {
        background-position: 0 -126px;
        cursor: pointer;
    }

/* For some reason webkit is adding 9px to the background image so this is a hack to get around it.  
@media only screen and (-webkit-min-device-pixel-ratio:0) {
    .info {
        background-position: 0 -156px;
    }

        .info:hover, .info.active, .content-box:hover .info {
            background-position: 0 -136px;
        }
}

*/


/* png fallback for IE as always */
.no-svg .info {
    background: transparent url(../images/icon-sprite.png) 0 -139px no-repeat;
}

    .no-svg .info:hover, .no-svg .info.active, .no-svg .content-box:hover .info {
        background-position: 0 -119px;
    }


.info-panel {
    display: none;
    padding: 10px 0;
}

    .info-panel > p {
        color: #C1C1C1;
        text-transform: none !Important;
        font-size: 13px !Important;
        margin-bottom: 6px !Important;
    }


/* -------------------------------------------------------------------
    HeadBox
   The headers of each module section
*/

.headbox {
    font-size: 14px;
    display: inline-block;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset, 0 0 2px rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    margin-bottom: -3px;
    padding: 8px 15% 10px 3%;
    width: 82%;
}

#SideBar .headbox {
    /*padding-left: 5px;*/
}

.unit-class-summary > .headbox {
    padding: 8px 3% 10px;
    width: 94%;
}

.headbox h1 {
    font: 14px/20px 'Avenir LT W01 45 Book', Arial, Helvetica, Sans-Serif;
    padding: 0px;
    margin: 0px;
    color: #fff;
    text-transform: uppercase;
}

/*This is the grey color. All the other colours should be grey as well when they are open*/
.mono, .mono.open, .orange.open, .red.open, .green.open, .headbox.color-code.open, .headbox.color-code {
    background: #343130; /* Old browsers */
    background: -moz-linear-gradient(top, #343130 0%, #474342 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#343130), color-stop(75%,#474342)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #343130 0%,#474342 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #343130 0%,#474342 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #343130 0%,#474342 75%); /* IE10+ */
    background: linear-gradient(to bottom, #343130 0%,#474342 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343130', endColorstr='#474342',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #474342;
}

.orange {
    background: #602411; /* Old browsers */
    background: -moz-linear-gradient(top, #602411 0%, #A93E1D 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#602411), color-stop(75%,#A93E1D)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #602411 0%,#A93E1D 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #602411 0%,#A93E1D 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #602411 0%,#A93E1D 75%); /* IE10+ */
    background: linear-gradient(to bottom, #602411 0%,#A93E1D 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#602411', endColorstr='#A93E1D',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #A93E1D;
}

.red {
    background: #5A0B0E; /* Old browsers */
    background: -moz-linear-gradient(top, #5A0B0E 0%, #9E1318 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5A0B0E), color-stop(75%,#9E1318)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #5A0B0E 0%,#9E1318 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #5A0B0E 0%,#9E1318 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #5A0B0E 0%,#9E1318 75%); /* IE10+ */
    background: linear-gradient(to bottom, #5A0B0E 0%,#9E1318 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5A0B0E', endColorstr='#9E1318',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #9E1318;
}

.green {
    background: #515811; /* Old browsers */
    background: -moz-linear-gradient(top, #515811 0%, #8E991D 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515811), color-stop(75%,#8E991D)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #515811 0%,#8E991D 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #515811 0%,#8E991D 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #515811 0%,#8E991D 75%); /* IE10+ */
    background: linear-gradient(to bottom, #515811 0%,#8E991D 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515811', endColorstr='#8E991D',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #8E991D;
}

.yellow {
    background: #602411; /* Old browsers */
    background: -moz-linear-gradient(top, #602411 0%, #FAA634 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#602411), color-stop(75%,#FAA634)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #602411 0%,#FAA634 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #602411 0%,#FAA634 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #602411 0%,#FAA634 75%); /* IE10+ */
    background: linear-gradient(to bottom, #602411 0%,#FAA634 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#602411', endColorstr='#FAA634',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #FAA634;
}

.blue {
    background: #004558; /* Old browsers */
    background: -moz-linear-gradient(top, #004558 0%, #00799A 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004558), color-stop(75%,#00799A)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #004558 0%,#00799A 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #004558 0%,#00799A 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #004558 0%,#00799A 75%); /* IE10+ */
    background: linear-gradient(to bottom, #004558 0%,#00799A 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004558', endColorstr='#00799A',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #00799A;
}

.legal h1 {
    text-transform: none;
    margin-top: 30px;
}


/* -------------------------------------------------------------------
    COLOR CODING
    this controls the investment/oportunity color codes 
    There is a bit of code repetition from other sections but this makes it easier to maintain
-----------------------------------------------------------------------------------*/
/*CASH = ORANGE */
.cash .headbox.color-code {
    background: #602411; /* Old browsers */
    background: -moz-linear-gradient(top, #602411 0%, #A93E1D 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#602411), color-stop(75%,#A93E1D)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #602411 0%,#A93E1D 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #602411 0%,#A93E1D 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #602411 0%,#A93E1D 75%); /* IE10+ */
    background: linear-gradient(to bottom, #602411 0%,#A93E1D 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#602411', endColorstr='#A93E1D',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #A93E1D;
}

.cash h1.color-code, .cash h2.color-code, .cash h3.color-code, .cash h4.color-code, .cash a.color-code:hover, .cash span.color-code, .cash small.color-code {
    color: #F1592A;
}




/*INVESTMENT = GREEN */

.investment .headbox.color-code {
    background: #515811; /* Old browsers */
    background: -moz-linear-gradient(top, #515811 0%, #8E991D 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515811), color-stop(75%,#8E991D)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #515811 0%,#8E991D 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #515811 0%,#8E991D 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #515811 0%,#8E991D 75%); /* IE10+ */
    background: linear-gradient(to bottom, #515811 0%,#8E991D 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515811', endColorstr='#8E991D',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #8E991D;
}

.investment h1.color-code, .investment h2.color-code, .investment h3.color-code, .investment h4.color-code, .investment a.color-code:hover, .investment span.color-code, .investment small.color-code {
    color: #CBDB2A;
}

/* Any elements that are direct desendants must get the right colour is !important is used */
.investment > h1.color-code, .investment > h2.color-code, .investment > h3.color-code, .investment > h4.color-code, .investment > a.color-code:hover, .investment > span.color-code, .investment.over > td, .investment > small.color-code {
    color: #CBDB2A !important;
}

.investment .indicator {
    border-left: 3px solid #CBDB2A !important;
}

.investment a.button.color-code, .investment input[type="submit"].color-code {
    background: #515811; /* Old browsers */
    background: -moz-linear-gradient(top,#8E991D 0%, #515811 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8E991D), color-stop(100%,#515811)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #8E991D 0%,#515811 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #8E991D 0%,#515811 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #8E991D 0%,#515811 100%); /* IE10+ */
    background: linear-gradient(to bottom, #8E991D 0%,#515811 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8E991D', endColorstr='#515811',GradientType=0 ); /* IE6-9 */
    border: 1px solid #8E991D;
}

/*OPPORTUNITY = BLUE */

.opportunity .headbox.color-code {
    background: #004558; /* Old browsers */
    background: -moz-linear-gradient(top, #004558 0%, #00799A 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004558), color-stop(75%,#00799A)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #004558 0%,#00799A 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #004558 0%,#00799A 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #004558 0%,#00799A 75%); /* IE10+ */
    background: linear-gradient(to bottom, #004558 0%,#00799A 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004558', endColorstr='#00799A',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #00799A;
}

.opportunity h1.color-code, .opportunity h2.color-code, .opportunity h3.color-code, .opportunity h4.color-code, .opportunity a.color-code:hover, .opportunity span.color-code {
    color: #00addc;
}

.opportunity > h1.color-code, .opportunity > h2.color-code, .opportunity > h3.color-code, .opportunity > h4.color-code, .opportunity > a.color-code:hover, .opportunity > span.color-code {
    color: #00addc;
}

.opportunity a.button.color-code, .opportunity input[type="submit"].color-code {
    background: #004558; /* Old browsers */
    background: -moz-linear-gradient(top, #00799A 0%, #004558 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00799A), color-stop(100%,#004558)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #00799A 0%,#004558 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #00799A 0%,#004558 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #00799A 0%,#004558 100%); /* IE10+ */
    background: linear-gradient(to bottom, #00799A 0%,#004558 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00799A', endColorstr='#004558',GradientType=0 ); /* IE6-9 */
    border: 1px solid #00799A;
}
/*This is the grey color. this is a repeat because of the cascade */
.headbox.color-code.open {
    background: #343130; /* Old browsers */
    background: -moz-linear-gradient(top, #343130 0%, #474342 75%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#343130), color-stop(75%,#474342)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #343130 0%,#474342 75%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #343130 0%,#474342 75%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #343130 0%,#474342 75%); /* IE10+ */
    background: linear-gradient(to bottom, #343130 0%,#474342 75%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343130', endColorstr='#474342',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #474342;
}

.distribution .amount {
    color: #7c7c7c;
}

tr.total.end {
    background: #292625 !important;
}

    tr.total.end > td {
        vertical-align: middle;
    }

/* -------------------------------------------------------------------
    Loan Status Indicator
*/
.StatusIndicator {
    font-size: 20px;
    display: inline-block;
    width: 20px;
    height: 15px;
    text-indent: -9000px;
    background: transparent url(../images/icon-sprite.svg) left 0px no-repeat;
    background-size: 16px;
    background-clip: content-box;
}

/*.StatusIndicatoripadiphone
{
  content: '';
  display: inline-block;
  height: 18px;
  width: 18px;
  background: transparent url(../images/icon-sprite.svg) 0 -64px no-repeat;
  background-size: 20px;
  text-indent: -9000px;
}*/

    .StatusIndicator.Current {
        color: #CBDB2A;
        background-position: left -33px;
    }

    .StatusIndicator.Arrears {
        color: #F1592A;
        background-position: left -17px;
    }

    .StatusIndicator.Default {
        color: #BF1E2E;
        background-position: left 0px;
    }

    .no-svg .StatusIndicator {
        margin-top: 5px;
        background-image: url(../images/icon-sprite-small.png);
    }

        .no-svg .StatusIndicator.Current {
            background-position: left -30px;
        }

        .no-svg .StatusIndicator.Arrears {
            background-position: left -15px;
        }

        .no-svg .StatusIndicator.Default {
            background-position: left 0;
        }

/* For some reason webkit is adding 9px to the background image so this is a hack to get around it.  
@media only screen and (-webkit-min-device-pixel-ratio:0) {
    .StatusIndicator.Current {
        color: #CBDB2A;
        background-position: left -42px;
    }

    .StatusIndicator.Arrears {
        color: #F1592A;
        background-position: left -26px;
    }

    .StatusIndicator.Default {
        color: #BF1E2E;
        background-position: left -9px;
    }
}
*/
/* -------------------------------------------------------------------
    PAGING
-----------------------------------------------------------------------------------*/

.paging {
    float: right;
    text-align: right;
}

    .paging.float-left {
        text-align: left;
        padding: 5px 0 0 5px;
    }

    .paging > a, .notification {
        display: inline-block;
        text-transform: uppercase;
        color: #c1c1c1;
        font-size: 12px;
        padding: 5px 7px 5px 10px;
        -webkit-background-origin: content-box;
    }

        .paging > a:after {
            content: '';
            display: inline-block;
            height: 15px;
            width: 15px;
            background: transparent url(../images/icon-sprite.svg) 0 -66px no-repeat;
            background-size: 16px;
            margin: 0 0 -2px 5px;
        }

.cash .paging > a.color-code:after {
    background-position: 0 -66px;
}

.investment .paging > a.color-code:after {
    background-position: right -49px;
}

.opportunity .paging > a.color-code:after {
    background-position: right -82px;
}

/* For some reason webkit is adding 9px to the background image so this is a hack to get around it.  
@media only screen and (-webkit-min-device-pixel-ratio:0) {
    .cash .paging > a.color-code:after {
        background-position: 0 -74px;
    }

    .investment .paging > a.color-code:after {
        background-position: right -58px;
    }

    .opportunity .paging > a.color-code:after {
        background-position: right -91px;
    }
}
*/

/* png fallbacks for IE as always */
.no-svg .paging > a {
    background: transparent url(../images/icon-sprite-small.png) right -75px no-repeat;
}

.ie7 .paging > a {
    padding-right: 20px;
}

.no-svg .cash .paging > a.color-code {
    background-position: right -68px;
}

.no-svg .investment .paging > a.color-code {
    background-position: right -44px;
}

.no-svg .opportunity .paging > a.color-code {
    background-position: right -90px;
}


.nav-actions {
    margin-top: 10px;
}

.action-text {
    display: inline-block;
    padding: 5px 5px 5px 10px;
}


/* -------------------------------------------------------------------
    Details definition lists and columns
-----------------------------------------------------------------------------------*/


.col-1 {
    width: 100%;
    float: left;
}

.col-wrap {
    overflow: hidden;
    margin-bottom: 20px;
}

dd, dl {
    margin: 0;
}


dt {
    font-family: normal 11px 'Avenir LT W01 85 Heavy', Arial, Helvetica, Sans-Serif;
    margin-top: 4px;
    color: #999;
}


.bpayLogo {
    float: left;
    margin: 5px 10px 0 0;
}
/* -------------------------------------------------------------------
    Loading Overlay
 */
#reLoading {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.7);
    z-index: 1000;
    font: 32px/1 'Museo W01 700', Arial, Helvetica, Sans-Serif;
    font: 3.2rem/1 'Museo W01 700', Arial, Helvetica, Sans-Serif;
    text-align: center;
    padding-top: 30%;
    letter-spacing: -2px;
    color: #fff;
}





/* -------------------------------------------------------------------
     TABLES
-----------------------------------------------------------------------------------*/

table {
    width: 100%;
    border-collapse: collapse;
    line-height: normal;
}

td, th {
    border-bottom: 1px solid #42403e;
    padding: 6px;
    vertical-align: top;
}

tr:nth-of-type(even) {
    background-color: #343130;
}

td.align-right, th.align-right {
    text-align: right !important;
}

tr.total > td {
    font-size: 16px;
    vertical-align: bottom;
    color: #fff;
    height: 25px;
}

td.large-text {
    font-size: 18px !important;
    padding-top: 6px;
    padding-bottom: 5px;
    color: #fff;
}

td.large-text-zero-padded {
    font-size: 18px !important;
    padding-top: 6px;
    padding-right: 0px;
    padding-bottom: 5px;
    color: #fff;
}

td.fixed-smallest {
    width: 40px;
}

td.fixed-smaller {
    width: 60px;
}

td.fixed-small {
    width: 120px;
}

td.fluid-small, th.fluid-small {
    width: 18%;
}

td.fluid-xsmall {
    width: 12%;
}

td.label {
    width: 20%;
}

.portfolio {
    border-bottom: 1px solid #2F2C2B;
}

    .portfolio.wide {
        min-width: 580px;
    }

    .portfolio td {
        font-size: 14px;
        vertical-align: text-top;
    }

        .portfolio td.small {
            font-size: 12px;
            vertical-align: bottom;
        }

        .portfolio td.large-text {
            font-size: 22px !important;
            padding-top: 2px;
            padding-bottom: 5px;
        }

        .portfolio td.description {
            padding-top: 4px;
            width:55%;
        }

    .portfolio tr:nth-of-type(even) {
        background-color: #2F2C2B;
    }

    .portfolio.dataTable th {
        background-color: #343130 !important;
    }

    .portfolio th {
        text-align: left;
        font-size: 12px;
        vertical-align: bottom;
        font-weight: normal;
    }

.srtImg {
    width:10px;
    height:10px;
    float: right;
}

tr.pending td, span.pending {
    font-family: 'AvenirLTW01-35LightObli', Arial, sans-serif;
}

tr.commitment td, span.commitment, tr.commitment td a.link {
    font-family: 'Avenir LT W01 45 Book',Arial,Helvetica,Sans-Serif;
    color:#8e991d;
    font-style:italic;
}

tr.over td {
    color: #F1592A;
}

.portfolio p {
    margin: 0;
}

.portfolio ol, .portfolio ul {
    margin: 4px 0;
    padding-left: 20px;
}

.portfolio a {
    display: block;
}

.account td {
    font-size: 14px;
    vertical-align: middle;
}

    .account td.small {
        font-size: 13px;
        vertical-align: middle;
        color: #C1C1C1;
    }

    .account td.large-text {
        font-size: 18px !important;
        padding-top: 2px;
        padding-bottom: 5px;
    }

.account tr:nth-of-type(2n) {
    background-color: #2F2C2B;
}

.long td.small {
    vertical-align: top;
}

.message-header {
    padding-bottom: 10px;
}

    .message-header h3 {
        margin-bottom: 0;
    }

.date {
    text-transform: uppercase;
    font-size: 12px;
}


/* -------------------------------------------------------------------
     SMALL TABLES
-----------------------------------------------------------------------------------*/

.small-details td {
    text-align: right;
    vertical-align: bottom;
}

    .small-details td:first-child {
        text-align: left;
        font-size: 12px;
    }


/* -------------------------------------------------------------------
     HELPERS
-----------------------------------------------------------------------------------*/

.bg-red {
    background: #BF1E2E;
    background: -moz-linear-gradient(#BF1E2E, #991825) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(#BF1E2E, #991825) repeat scroll 0 0 transparent;
    border: 1px solid #BF1E2E;
    border-radius: 0px 0px 3px 3px;
}

.bg-orange {
    background: #F1592A;
    background: -moz-linear-gradient(#F1592A, #C14722) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(#F1592A, #C14722) repeat scroll 0 0 transparent;
    border: 1px solid #F1592A;
    border-radius: 0px 0px 3px 3px;
}

.small-text {
    font-size: 13px;
}

.large-text {
    font-size: 18px;
}

.xlarge-text {
    font-size: 22px;
}

.text-orange {
    color: #F1592A;
}

.text-green {
    color: #CBDB2A;
}

.text-blue {
    color: #00ADDC;
}

.text-lightgrey {
    color: #ccc;
}

.text-grey {
    color: #C1C1C1;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.italic {
    font-family: 'AvenirLTW01-35LightObli';
}

.spacer {
    margin-top: 20px;
}

.align-center {
    text-align: center !important;
}

.align-middle {
    vertical-align: middle;
}

.horizontal-scroll {
    overflow-x: auto;
}

.invisible {
    display: none !important;
}

/* ------Responsive Helpers-------------*/

.hide-mobile, .hide-mobile-table {
    display: none !important;
}

.hide-desktop {
    display: block !important;
}

.account-summary-clients div, .account-summary-trusts div {
    padding: 5px;
}
/* Graph */
.toolbox {
    background-color: #4e4e4e;
    padding: 0px 15px;
}
/* Reports Section */
.account-report-toolbar {
    height: 50px;
}

.account-report-toolbar > div {
    padding: 5px;
    float: left;
}


/* Advisor Page */
.ui-accordion-content > p {
    padding: 10px 3px;
    text-align: center;
}
.new-application {
    width: 80%;
    font-weight: bold;
}

.hide {
    display: none;
}