﻿.content, .layout-ctr {
    /*overflow: visible;*/
}

.layout-lft, .layout-rgt {
    display: none
}

.layout-ctr {
    width: 100%;
    margin: 0 0 10px 0;
}

h1 {
    background-image: none;
    padding: 0 0 30px 0;
    border-bottom: 6px solid #09a5e1;    
    color: #0096db;
}

#intro {
    font-size: 22px;
    line-height: 28px;
    color: #535c67;
    padding: 0 0 30px 0;
    font-family: 'lft-etica', arial, sans-serif;
    font-style: italic;
}

.benchmark-text {
    border-top: 6px solid #09a5e1;
    padding: 15px 0;
    font-size: 22px;
    line-height: 28px;
    color: #09a5e1;
}

    .benchmark-text .overlay-trigger {
        color: #26318a;
    }


#benchmarkingform {
    padding: 0 0 30px 0;
    border-bottom: 6px solid #09a5e1;
}

.inputs {
    display: table-row;
}

    .inputs .column {
        width: 500px;
        display: table-cell;
        padding-right: 50px;
    }

    .inputs input, .inputs select {
        width: 250px;
    }

    .inputs select {
        width: 255px;
        padding-right: 0px;
        !important
    }

    .inputs input {
        line-height: 12px;
        height: 12px;
        padding: 5px;
    }

.metric:first-child {
    margin-left: 0;
}

.metric {
    position: relative;
    float: left;
    width: 224px;
    height: 240px;
    background-color: #1e287b;
    color: white;
    margin-left: 5px;
}

    .metric h2 {
        color: white;
        font-family: 'lft-etica', arial, sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 1 !important;
        padding: 18px 13px;
        background-color: #26318a;
        border-top: 7px solid #111a62;
        margin: 0;
        height: 80px;
    }

        .metric h2 span {
            display: block;
            font-family: 'lft-etica', arial, sans-serif;
            text-transform: uppercase;
            opacity: 0.5;
            font-size: 14px;
        }

    .metric div {
        padding: 12px;
        font-size: 12px;
    }

    .metric .toggle-trigger {
        padding: 12px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 14px;
        text-transform: uppercase;
        background: #111A62 url('/benchmarkcontent/images/down_arrow.png') no-repeat 135px 18px;
        cursor: pointer;
    }

        .metric .toggle-trigger:hover {
            background-color: #26318a;
        }

    .metric .not-visible {
        display:none;
        position: absolute;
        background-color: #deeffb;
        padding: 10px 12px;
        width: 224px;
        color: #474747;
        font-size: 12px;
        font-style: italic;
        z-index: 1;
    }

    .metric section {
        margin: 3px 0;
    }

#employee {
    background-color: #018795;
}

    #employee h2 {
        background-color: #0095a4;
        border-top: 7px solid #016c78;
    }

    #employee .toggle-trigger {
        background-color: #016c78;
    }

        #employee .toggle-trigger:hover {
            background-color: #0095a4;
        }

#productivity {
    background-color: #085da1;
}

    #productivity h2 {
        background-color: #0f6cb6;
        border-top: 7px solid #064a80;
    }

    #productivity .toggle-trigger {
        background-color: #064a80;
    }

        #productivity .toggle-trigger:hover {
            background-color: #0f6cb6;
        }

#investment {
    background-color: #523a8a;
}

    #investment h2 {
        background-color: #5a4099;
        border-top: 7px solid #422b7b;
    }

    #investment .toggle-trigger {
        background-color: #422b7b;
    }

        #investment .toggle-trigger:hover {
            background-color: #5a4099;
        }

#confidence {
    background-color: #0289c3;
}

    #confidence h2 {
        background-color: #0397d6;
        border-top: 7px solid #0276a7;
    }

    #confidence .toggle-trigger {
        background-color: #0276a7;
    }

        #confidence .toggle-trigger:hover {
            background-color: #0397d6;
        }

.pane .overlay-trigger {
    font-size: 12px;
    margin-left: 5px;
    color: #0397d6;
    text-decoration: underline;
    font-weight: bold;
}

.overlay {
    /* must be initially hidden */
    display: none;
    /* place overlay on top of other elements */
    z-index: 10000;
    /* styling */
    background-color: #deeffb;
    border-top: 7px solid #09a5e1;
    padding: 45px 22px;
    width: 333px;
    min-height: 100px;
    font-size: 12px;
    color: #474747;
    font-style: italic;
    font-family: arial, helvetica, sans-serif;
    line-height: 1.5em;
    /* CSS3 styling for latest browsers */
    -moz-box-shadow: 0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}

    /* close button positioned on upper right corner */
    .overlay .close {
        background: url(/benchmarkcontent/images/close.png) no-repeat center center;
        position: absolute;
        right: 11px;
        top: 11px;
        cursor: pointer;
        height: 27px;
        width: 27px;
    }

        .overlay .close:hover {
            background-color: #a9dcf4;
        }

#submit_button {
    position: relative;
    left: -15px;
    background: url(/benchmarkcontent/images/submit.png) no-repeat top left !important;
    width: 184px;
    height: 46px;
    border: 0;
    margin: 90px 0 0 0;
    padding: 0;
    text-indent: -9999em;
    cursor: pointer;
}

    #submit_button:hover {
        background-image: url(/benchmarkcontent/images/submit_over.png);
    }

#start-over {
    display: block;
    position: relative;
    left: -35px;
    background: url(/benchmarkcontent/images/start_over.png) no-repeat top left;
    width: 184px;
    height: 46px;
    border: 0;
    margin: 90px 0 0 0;
    padding: 0;
    text-indent: -9999em;
}

    #start-over:hover {
        background-image: url(/benchmarkcontent/images/start_over_over.png);
    }

#cta {
    display: inline-block;
    background: #0397d7 url(/benchmarkcontent/images/cta.png) no-repeat top right;
    line-height: 39px;
    color: white;
    padding: 0 40px 0 15px;
    float: right;
    font-size: 14px;
    font-family: 'lft-etica', arial, sans-serif;
    font-weight: 700;
    margin: 90px 0 0 0;
}

    #cta:hover {
        background: #007aae url(/benchmarkcontent/images/cta_over.png) no-repeat top right;
        text-decoration: none
    }

.required {
    margin-left: 5px;
    color: #0397d6;
    font-style: italic;
    font-size: 12px;
}

.fielderror {
    color: red;
    display: block
}

.fieldblock-error .fielderror {
    color: red;
    display: block
}

/*------------------------------------------------
//	Tabs
//------------------------------------------------*/

/* root element for tabs  */
ul.tabs {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    height: 70px;
    overflow: hidden;
}

    /* single tab */
    ul.tabs li {
        float: left;
        text-indent: 0;
        padding: 0;
        margin: 0 !important;
        list-style-image: none !important;
    }

    /* link inside the tab. uses a background image */
    ul.tabs a {
        background: #26318a;
        border-top: 7px solid #111b62;
        font-size: 18px;
        font-family: 'lft-etica', arial, sans-serif;
        font-weight: 700;
        display: block;
        height: 70px;
        line-height: 1;
        width: 166px;
        text-align: left;
        text-decoration: none;
        color: #fff;
        color: rgba(255,255,255,0.5);
        padding: 0 15px 0px 15px;
        position: relative;
        top: 1px;
        margin: 10px 0 0 0;
    }

        ul.tabs a:active {
            outline: none;
        }

        /* when mouse enters the tab move the background image */
        ul.tabs a:hover {
            color: #fff;
        }

        /* active tab uses a class name "current". its highlight is also done by moving the background image. */
        ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
            cursor: default !important;
            color: #fff !important;
            padding: 0 15px 10px 15px;
            margin: 0;
        }

        ul.tabs a span {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-60%);
        }

/* initially all panes are hidden */
.panes {
    clear: left;
}

    .panes .pane {
        width: 100%;
        display: none;
        border: 7px solid #111b62;
        overflow: hidden;
        background: #f6fafd;
    }

.tab_employee a {
    background-color: #0095a4 !important;
}

#tabcontent_employee, .tab_employee a {
    border-color: #006b77 !important;
}

.tab_productivity a {
    background-color: #0d6cb6 !important;
}

#tabcontent_productivity, .tab_productivity a {
    border-color: #064a80 !important;
}

.tab_investment a {
    background-color: #5b4199 !important;
}

#tabcontent_investment, .tab_investment a {
    border-color: #422b7b !important;
}

.tab_confidence a {
    background-color: #0397d7 !important;
}

#tabcontent_confidence, .tab_confidence a {
    border-color: #0276a7 !important;
}

.chart {
    float: left;
}

    .chart h3 {
        font-family: 'lft-etica', arial, sans-serif;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        color: #535c67;
        font-size: 20px;
        margin-bottom: 20px;
    }

.slice {
    fill: white;
    font-size: 14px;
    font-family: 'lft-etica', arial, sans-serif;
}

    .slice.selected {
        font-weight: bold;
    }

.legend-item {
    clear: left;
    font-size: 16px;
    font-family: 'lft-etica', arial, sans-serif;
    color: #535c67;
    padding: 0 0 10px 0;
    overflow: hidden;
}

.color {
    display: block;
    width: 25px;
    height: 25px;
    float: left;
    margin: 0 10px 0 0;
}

#regional-strategy {
    float: none;
    display: inline-block;
}

#tabcontent_investment .legend section {
    float: left;
    width: 28%;
    padding-right: 5%;
}

#tabcontent_investment .legend {
    clear: left;
    border-top: 2px solid #cee2f5;
    padding: 20px;
    text-align: left;
}

#tabcontent_investment .chart {
    width: 925px;
    padding: 25px 20px;
    border-left: 2px solid #cee2f5;
    text-align: center;
    margin: 0;
}

    #tabcontent_investment .chart:first-child {
        border-left: none;
    }

/* Confidence Results */
#tabcontent_confidence .chart {
    width: 270px;
    padding: 25px 20px;
    border-left: 2px solid #cee2f5;
    text-align: center;
    margin: 0;
}

#tabcontent_confidence .legend {
    clear: left;
    border-top: 2px solid #cee2f5;
    padding: 20px;
}

#tabcontent_confidence .legend-item {
    display: inline-block;
    width: 20%;
    padding-right: 5%;
    float: left;
    clear: none;
}

#tabcontent_revenue section, #tabcontent_employee section, #tabcontent_productivity section {
    padding: 30px 20px;
    border-top: 2px solid #d9e9f7;
    margin: 0px;
}

    #tabcontent_revenue section:first-child, #tabcontent_employee section:first-child, #tabcontent_productivity section:first-child {
        border-top: none;
    }

#tabcontent_revenue .chart, #tabcontent_employee .chart, #tabcontent_productivity .chart {
    float: none;
}

.bar-left {
    width: 435px;
    float: left;
    overflow: hidden;
    display: inline-block;
    border-right: 2px solid #d9e9f7;
    padding: 0 13px 0 25px;
    text-align: right;
}

.bar-right {
    width: 435px;
    display: inline-block;
    padding-left: 13px;
}

.bar-left .bar {
    float: right;
}
/*
.bar-left
{
	float: left;
	overflow: hidden;
	width: 400px;
	padding: 0 13px 0 25px;
	padding-right: 13px;
	border-right: 2px solid #d9e9f7;
}

.bar-right
{
	padding-left: 13px;
	margin-left: 438px;
}
*/

.label {
    clear: both;
    line-height: 33px;
    height: 33px;
    font-size: 14px;
    font-family: 'lft-etica', arial, sans-serif;
    font-weight: 700;
    color: #535c67;
    margin-bottom: 5px;
    display: block;
    text-align: right;
}

    .label.selected {
        font-family: 'lft-etica', arial, sans-serif;
        font-weight: 700;
    }

.bar {
    margin-bottom: 5px;
    line-height: 33px;
    height: 33px;
    color: white;
    clear: both;
    font-size: 14px;
    font-family: 'lft-etica', arial, sans-serif;
    font-weight: 700;
}


    .bar span {
        white-space: nowrap;
        position: relative;
    }

.input-overlay {
    padding-top: 60px;
    border-top-color: #111a62
}

    .input-overlay .close {
        z-index: 2;
        background-image: url(/benchmarkcontent/images/input_close.png);
        top: 5px;
        right: 10px;
    }

    .input-overlay button[type="submit"] {
        margin-top: 0px;
    }

    .input-overlay h2 {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #26328a;
        height: 38px;
        line-height: 38px;
        padding: 0px 22px;
        width: 333px;
        color: white;
        font-size: 18px;
        font-family: 'lft-etica', arial, sans-serif;
        font-weight: 700;
    }

.pane .overlay-trigger {
    font-size: 14px;
    font-family: 'lft-etica', arial, sans-serif;
}

section.change-link {
    clear: both;
    border-left: none;
    border-top:;
    width: 100%;
    padding: 20px !important;
    margin: 0px;
    border-top: 2px solid #d9e9f7;
}

.noregionalpeercompanydatafound span,
.nonationalpeercompanydatafound span {
    display: none;
}

.noregionalpeercompanydatafound, .nonationalpeercompanydatafound, .error {
    color: #dc2543;
}

div.error {
    padding: 20px;
}

#benchmark_form, .benchmark-text {
    position: relative;
    padding: 25px;
    background-color: #deeffb;
    border-bottom: 6px solid #09a5e1;
    margin-bottom: 30px;
}

    .benchmark-text .fieldblock {
        width: 235px;
        margin-right: 25px;
        float: left;
    }

#form-text {
    width: 625px;
    padding-top: 25px;
    font-size: 12px;
    clear: left;
    color: #666;
    line-height: 1.6em;
}

.benchmark-text h2 {
    font-family: 'lft-etica', arial, sans-serif;
    font-weight: normal;
    font-size: 24px;
    color: #038BCC;
}

.benchmark-text button {
    text-indent: 0px;
    background-image: none;
    width: 119px;
    height: 35px;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 25px;
    top: 40px;
}

.btn-update {
    /*position: absolute;
    right: 155px;*/
    margin-left: 60px;
}

#share-tool {
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    right: 0px;
    /*width: 256px;
    height: 30px;*/
    line-height: 30px;
    padding: 5px 15px;
    background-color: #0096db;
    color: #bfe8f7;
    font-size: 14px;
}

.nwf-overlay {
    width: 500px;
    height: 440px;
}

    .nwf-overlay iframe {
        width: 100%;
        height: 100%;
    }

#share-tool a {
    float: right;
    display: inline-block;
    margin-left: 2px;
    height: 30px;
    width: 30px;
    text-indent: -200px;
    overflow: hidden;
    background: url('/Images/share_icons.png') no-repeat top left;
}

a#share-facebook {
    background-position: -4px 0px;
}

a#share-twitter {
    background-position: -34px 0px;
}

a#share-linkedin {
    background-position: -64px 0px;
}

a#share-email {
    background-position: -94px 0px;
}
