/* ---------------------------------------------------------
   1. General reset
   2. Common site styles
   ---------------------------------------------------------*/

.logged-in .user-info .user-drop,
.docs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.ellipsis {
    white-space: nowrap; /* 1 */
    text-overflow: ellipsis; /* 2 */
    overflow: hidden;
}

/* banner styles */

div#banner {
    top: 0;
    left: 0;
    background-color: gray;
}
div#banner-content {
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #000;
    text-align: center;
    background-color: lightgray;
}

/* header styles */

#header {
    background: #ebebeb;
}

.logo-holder {
    padding: 10px 0;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.logo-holder sub,
.logo-holder sup {
    font-size: 60%;
}

/* logo styles */

.logo {
    width: 150px;
    height: auto;
    margin: 0 auto 5px;
}

.logo img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.logo-description {
    overflow: hidden;
}

.logo-description .title {
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
}

.logo-description .slogan {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

/* login form styles */

.login-form {
    padding: 10px 0;
    width: 220px;
    margin: 0 auto;
}

.login-form .title {
    display: block;
    text-align: left;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    color: #4e4e4e;
    margin-bottom: 5px;
}

.login-form .title span {
    font-weight: normal;
}

.login-form .input-holder {
    padding-bottom: 8px;
}

.login-form .form-group {
    margin-bottom: 2px;
    position: relative;
}

.login-form .form-group .fa {
    position: absolute;
    top: 7px;
    left: 13px;
    color: #c8c8c8;
    font-size: 18px;
    line-height: 18px;
}

.login-form .form-control {
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    color: #868585;
    text-align: center;
    padding: 3px 30px;
    width: 100%;
    height: 30px;
    border-color: #acacac;
    border-radius: 0;
    -webkit-appearance: none;
}

.login-form .form-control::-moz-placeholder {
    color: #868585;
    opacity: 1;
}

.login-form .form-control:-ms-input-placeholder {
    color: #868585;
}

.login-form .form-control::-webkit-input-placeholder {
    color: #868585;
}

.login-form .form-control:focus {
    border-color: #66afe9;
}

.login-form .btn-submit {
    display: block;
    width: 100%;
    height: 30px;
    font-size: 18px;
    line-height: 22px;
    padding: 1px 12px;
    background: #7cc576;
    border-color: #acacac;
    border-radius: 0;
}

.login-form .btn-submit:hover {
    background: #5aa854;
}

.login-form .new-member {
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    padding: 6px 0;
}

.login-form .new-member a {
    color: #007eff;
}

/* logged-in state styles */

.logged-in {
    padding: 10px 0;
    color: #4e4e4e;
}

.logged-in a {
    color: #1772e7;
}

.logged-in a:hover,
.logged-in a:focus {
    text-decoration: none;
    color: #0d4fa4;
}

.logged-in .user-info {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
    position: relative;
}

.logged-in .user-info .user-drop {
    background: #fff;
    text-align: left;
    border: none;
    border-radius: 0;
    margin: 10px 0 0 -35px;
    padding: 6px 0;
    box-shadow: none;
}

.logged-in .user-info .user-drop:before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border-width: 0 13px 13px;
    border-color: transparent transparent #fff;
    border-style: solid;
}

.logged-in .user-info .user-drop li a {
    display: block;
    padding: 2px 5px;
    color: #007eff;
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
}

.logged-in .user-info .user-drop li a:hover {
    text-decoration: none;
    background: #007eff;
    color: #fff;
}

.logged-in .link-logout {
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
}

.logged-in .link-logout .fa {
    margin-right: 5px;
}

/* main navigation styles */

#nav {
    background: #002157;
    border: none;
    margin: 0;
    border-radius: 0;
}

#nav .navbar-nav {
    margin: 0 -15px;
}

#nav .navbar-nav > li a .fa-chevron-down {
    margin-left: 3px;
}

#nav .nav {
    font-size: 0;
    line-height: 0;
}

#nav .nav > li {
    font: bold 15px/18px Tahoma, Geneva, sans-serif;
}

#nav .nav > li a {
    color: #fff;
}

#nav .nav > li.hover > a {
    background: #194793;
}

#nav.navbar-default .navbar-nav > .open > a,
#nav.navbar-default .navbar-nav > .open > a:focus,
#nav.navbar-default .navbar-nav > .open > a:hover {
    background: #194793;
}

#nav .dropdown-menu {
    background: #194793;
}

#nav .dropdown-menu > li a:focus {
    background: #002157;
}

#nav .dropdown-menu > li.hover > a {
    background: #002157;
}

#nav.navbar-default .navbar-toggle {
    border-color: #fff;
}

#nav.navbar-default .navbar-toggle .icon-bar {
    background: #fff;
}

#nav.navbar-default .navbar-toggle:focus,
#nav.navbar-default .navbar-toggle:hover {
    background: #194793;
}

.dropdown.hover > .dropdown-menu {
    display: block;
}

/* custom nested dropdown */

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu.hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-top-color: #fff;
    margin-top: 7px;
    margin-right: -10px;
}

.dropdown-submenu.hover > a:after {
    border-top-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    border-radius: 6px 0 6px 6px;
}

/* footer styles */

#footer {
    position: relative;
    background: #707070;
    color: #fff;
}

#footer:before {
    content: "";
    display: block;
    height: 25px;
    background: #ccc;
    border-bottom: 5px solid #fff;
}

#footer:after {
    content: "";
    display: block;
    height: 25px;
    background: #fff;
}

.docs {
    padding: 10px 0;
    font-size: 0;
    line-height: 0;
}

.docs li {
    display: inline-block;
    vertical-align: top;
    font: bold 11px/14px Tahoma, Geneva, sans-serif;
    padding: 2px 12px;
    position: relative;
}

.docs li + li:before {
    content: "|";
    position: absolute;
    top: 2px;
    left: -4px;
    color: #fff;
}

.docs li a {
    color: #fff;
}

.docs-description {
    font-size: 12px;
    line-height: 15px;
    overflow: hidden;
    padding-bottom: 12px;
    text-align: center;
}

.docs-description h3 {
    margin: 0 0 13px;
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
}

.docs-description a {
    color: #fff;
    text-decoration: underline;
}

.docs-description a:hover {
    text-decoration: none;
}

.docs-description .help {
    display: block;
}

.footer-bottom {
    padding: 10px 0 14px;
    overflow: hidden; /* footer logo styles */
}

.footer-bottom .logo {
    width: 70px;
    height: 20px;
}

.copyright {
    display: block;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}

/* ---------------------------------------------------------
   1. General reset
   ---------------------------------------------------------*/

/*
 * set default text color
 * set default font size, line height and font family
 * set default background
 */

body {
    background: #fff;
    color: #000;
    font-size: 14px;
    line-height: 17px;
    min-width: 320px;
}

/* ---------------------------------------------------------
   2. Common site styles
   ---------------------------------------------------------*/

/* main container styles */

#wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* cycle carousel basic styles */

.cycle-gallery {
    position: relative;
    overflow: hidden;
}

.cycle-gallery .slide {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
}

.cycle-gallery .slide.active {
    z-index: 2;
}

/* main banner styles */

.banner .container {
    position: relative;
    z-index: 3;
}

.banner .carousel-box {
    min-height: 200px;
    text-align: center;
    white-space: nowrap;
}

.banner .carousel-box:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    min-height: 200px;
}

.banner .carousel-box .carousel-holder {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: rgba(255, 255, 255, .92);
    padding: 10px;
    font-size: 14px;
    line-height: 17px;
    font-weight: bold;
}

.banner .carousel-box .info-title {
    display: block;
    font-size: 18px;
    line-height: 22px;
    font-style: italic;
}

.banner .carousel-box .info-figure {
    display: block;
    font-weight: normal;
}

.banner .carousel-info {
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    padding: 8px 0;
}

/* main content styles */

#content {
    padding: 30px 0 23px;
}

.toolbox-list {
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

.toolbox-list li {
    margin-bottom: 20px;
}

.toolbox-list li .box {
    display: block;
    height: 66px;
    background: #fdc689;
    padding: 13px 3px;
    color: #000;
    overflow: hidden;
}

.toolbox-list li .box:hover {
    text-decoration: none;
    opacity: .7;
    filter: alpha(opacity=70);
}

.toolbox-list li .box .fa {
    font-size: 18px;
    line-height: 18px;
    display: block;
    margin-bottom: 5px;
}

.toolbox-list li .box .text {
    display: block;
    font-size: 11px;
    line-height: 14px;
}

.side-panel .widget {
    border: 2px solid #959595;
    margin-bottom: 20px;
    padding: 4px 9px;
    max-height: 600px;
    overflow-y: scroll;
    overflow-x:hidden;
}

.side-panel .widget h2 {
    margin: 0 0 1px;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
    color: #002157;
}

.side-panel .widget .video {
    border-bottom: 2px solid #959595;
    margin-bottom: 9px;
    padding-bottom: 20px;
    padding-top:15px;
}

.side-panel .widget .video:first-child {
    padding-top: 0;
}

.side-panel .widget .video:last-child {
    border-bottom: none;
}

.side-panel .widget .video img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

.side-panel .widget .article {
    font-size: 10px;
    line-height: 12px;
    color: #010101;
    padding: 10px 0;
}

.side-panel .widget .article .timestamp {
    color: #ffa200;
    display: block;
}

.side-panel .widget .article p {
    margin-bottom: 0;
}

.side-panel .widget .article .more {
    display: inline-block;
    vertical-align: top;
    color: #ffa200;
}

.toolbox-alternate-list {
    padding: 0;
    list-style: none;
}

.toolbox-alternate-list li {
    padding-top: 10px;
    padding-bottom: 10px;
}

.toolbox-alternate-list li .fa {
    font-size: 20px;
    line-height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.toolbox-alternate-list li .text {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    line-height: 20px;
    max-width: 69%;
}

.toolbox-alternate-list li a {
    color: #000;
}

.toolbox-alternate-list li a:hover {
    text-decoration: none;
    color: #555;
}

@media (min-width: 768px) {
    .logo-holder {
        text-align: left;
        max-width: none;
        margin: 0;
    }

    .logo {
        margin: 0 0 5px;
        width: 250px;
    }

    .logo-description .title {
        font-size: 24px;
        line-height: 26px;
        margin-bottom: 3px;
    }

    .logo-description .slogan {
        font-size: 14px;
        line-height: 17px;
    }

    .login-form {
        float: right;
    }

    .login-form .title {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 3px;
    }

    .logged-in .user-info {
        font-size: 14px;
        line-height: 18px;
        margin-right: 13px;
    }

    .logged-in .user-info .user-drop {
        min-width: 221px;
        margin: 18px 0 0 -100px;
    }

    .logged-in .user-info .user-drop:before {
        left: 0;
        right: 0;
        margin: auto;
    }

    .logged-in .user-info .user-drop li a {
        padding: 1px 17px;
    }

    #nav {
        min-height: 40px;
    }

    #nav .navbar-nav > li {
        padding: 0 10px;
    }

    #nav .navbar-nav > li a {
        padding-top: 9px;
        padding-bottom: 11px;
    }

    #nav .nav {
        float: none;
        text-align: center;
    }

    #nav .nav > li {
        float: none;
        display: inline-block;
        vertical-align: top;
    }

    .dropdown-submenu > a:after {
        border-width: 5px 0 5px 5px;
        border-color: transparent transparent transparent #fff;
    }

    .dropdown-submenu.hover > a:after {
        border-color: transparent transparent transparent #fff;
    }

    .nav > li:nth-last-of-type(-n+2) .dropdown-submenu > .dropdown-menu {
        left: auto;
        right: 100%;
    }

    .nav > li:nth-last-of-type(-n+2) .dropdown-submenu > a:after {
        margin: 6px 0 0 -10px;
        float: left;
        border-width: 5px 5px 5px 0;
        border-color: transparent #fff transparent transparent;
        border-style: solid;
    }

    .docs {
        padding: 16px 0 9px;
    }

    .docs-description {
        text-align: left;
    }

    .footer-bottom .logo {
        margin: 0;
        float: left;
    }

    .copyright {
        overflow: hidden;
        text-align: left;
        padding: 2px 10px;
    }

    .banner .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .banner .carousel-box {
        min-height: 300px;
    }

    .banner .carousel-box:after {
        min-height: 300px;
    }

    .banner .carousel-box .carousel-holder {
        width: 620px;
        padding: 22px 20px 15px;
    }

    .banner .carousel-box .carousel-holder p {
        margin-bottom: 23px;
    }

    .banner .carousel-box .info-title {
        font-size: 30px;
        line-height: 30px;
    }

    .banner .carousel-box .info-figure {
        line-height: 15px;
    }

    .banner .carousel-info {
        position: absolute;
        bottom: 0;
        left: 15px;
        font-size: 20px;
        line-height: 24px;
        padding: 21px 3px;
    }

    .toolbox-list li .box {
        height: 82px;
        padding: 16px 6px;
    }

    .toolbox-list li .box .fa {
        font-size: 22px;
        line-height: 22px;
    }

    .toolbox-list li .box .text {
        font-size: 16px;
        line-height: 20px;
    }

    .toolbox-alternate-list li {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .toolbox-alternate-list li .text {
        max-width: 80%;
    }
}

@media (min-width: 992px) {
    #header {
        padding: 22px 0 0;
    }

    .logo-holder {
        max-width: 344px;
        padding: 4px 0;
    }

    .logo {
        width: 344px;
        height: 97px;
        margin: 0;
    }

    .login-form {
        padding: 0;
    }

    .logged-in {
        padding: 1px 0;
    }

    #nav .navbar-nav > li {
        padding: 0 15px;
    }

    #footer {
        display: table-footer-group;
        overflow: hidden;
        height: 1%;
    }

    html {
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        display: table;
        table-layout: fixed;
    }

    #wrapper {
        display: table-cell;
        overflow: visible;
    }

    .banner .carousel-box {
        min-height: 447px;
    }

    .banner .carousel-box:after {
        min-height: 447px;
    }

    .toolbox-list li .box {
        height: 140px;
        padding: 30px 6px;
    }

    .toolbox-list li .box .fa {
        font-size: 36px;
        line-height: 36px;
        margin-bottom: 14px;
    }

    .toolbox-list li .box .text {
        font-size: 21px;
        line-height: 28px;
    }

    .side-panel .widget {
        margin-bottom: 40px;
        padding-bottom: 0;
    }

    .side-panel .widget h2 {
        font-size: 30px;
        line-height: 34px;
    }

    .side-panel .widget .video {
        margin-bottom: 9px;
    }

    .side-panel .widget .article {
        padding: 21px 0 3px;
    }

    .toolbox-alternate-list {
        margin-bottom: 29px;
    }

    .toolbox-alternate-list li {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .toolbox-alternate-list li .fa {
        font-size: 36px;
        line-height: 36px;
        margin-right: 18px;
    }

    .toolbox-alternate-list li .text {
        font-size: 30px;
        line-height: 34px;
        max-width: 75%;
    }
}

@media (max-width: 767px) {
    #nav .dropdown-menu {
        width: 100%;
        float: none;
        position: static;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.margin_left {
    margin: 5px 0 50px 50px;
}
.margin_right {
    margin: 5px 50px 50px 0;
}
.green {
    color: green;
}
.red {
    color: red;
}
.wide {
    width:100%;
}

.p2p_tile {
    background:#EBEBEB;
}
.p2p_tile_row {
    margin-top:10px;
}
.nice_form {
    padding: 15px;
    background: #EBEBEB;
}
.gauge_label {
font-size: 2em;
}
.small_gauge_containers {
    width:100%;
    margin: 0 auto;
}
.gauge_title {height:40px;}

.page_heading {
    color: white;
    padding: 10px 15px 5px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#315748+13,315748+54&1+69,0+91 */
    background: -moz-linear-gradient(45deg,  rgba(0, 33, 87,1) 13%, rgba(0, 33, 87,1) 54%, rgba(0, 33, 87,1) 69%, rgba(0, 33, 87,0) 91%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  rgba(0, 33, 87,1) 13%,rgba(0, 33, 87,1) 54%,rgba(0, 33, 87,1) 69%,rgba(0, 33, 87,0) 91%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  rgba(0, 33, 87,1) 13%,rgba(0, 33, 87,1) 54%,rgba(0, 33, 87,1) 69%,rgba(0, 33, 87,0) 91%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002157', endColorstr='#002157',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.page_subheading {
    color: #002157;

}

/* Tooltip */
.tooltip > .tooltip-inner {
    background-color: #002157;
    color: #FFFFFF;
    border: 1px solid #002157;
    padding: 15px;
    font-size: 12px;
}