html, body {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}



#aspnetForm
{
    height:100%;
}

#wrapper
{
    width: 100%;
    min-height: 100%;
}

#content-wrapper
{
    width: 90%;
    margin: 0 auto;
}

#main-header 
{
    background-color: #339ad1;
    display: block;
    width: 100%;
    height: 100px;
}

#main-header-logo
{
    padding-top: 15px;
}

#main-navigation { width: 100%; background-color: #2C5463; font-size: 12px; z-index:9999; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; background: #2C5463 repeat-x 0 0; z-index:9999; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; }
#trans-nav li a:hover { color: #FFF; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 250px; background: #2C5463; list-style-type: none; padding: 0; margin: 0; z-index:9999; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #2C5463; }
#trans-nav li ul li a:hover { background: #339ad1; }

.login-wrapper
{
    background-image: url("../HomepageImages/ranger-home.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width:100%;
    min-height:100%;
    height: 100%;
    background-color: White;
}

#main-footer
{
    height: 50px;
    border-top: 1px solid rgba(125, 125, 125, 1);
}

.main-footer-url a
{
    font-family: Arial;
    font-size: 18px;
    color: #339ad1;
    line-height: 50px;
    
    float: right;
    margin-right: 50px;
    text-decoration: none;
}

.login-url-background
{
    display: block;
    
    padding: 10px;
    position: absolute;
    width: 500px;
    left: 300px;
    top: 200px;
    z-index:0;
    margin: 0 auto;
    background-color: rgba(0,0,0, 0.6);
}

.login-url 
{
    display: block;
    
    padding: 20px;
    margin: 0 auto;
    
    font-size: 24px;
}

.login-url .label-url
{
    color: #FFF;
    opacity: 1 !important;
    margin-bottom: 10px !important;
}

.login-url a 
{
    text-decoration: none;
    text-decoration: underline;
    color: #FFF;
    font-size: 16px;
}

.test-bg
{
	position: absolute;
    right: 200px;
    top: 200px;
    width: 340px;
    height: 280;
    margin: 0 auto;
    
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.login-box 
{
    position: absolute;
    right: 100px;
    top: 200px;
    width: 340px;
    height: 280;
    margin: 0 auto;
    
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

.login-box label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}

.login-box p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
}

.login-box p a:hover {
    color: #555;
}

.login-box input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}

.login-box input[type=text],
.login-box input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
    
    border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
}

.login-box #lower {
    background: #2C5463;
    width: 100%;
    height: 69px;
    margin-top: 20px;
    
    box-shadow: inset 0 1px 1px #fff;
    border-top: 1px solid #ccc;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.login-box input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}

.login-box #lower label {
    margin-left: 3px;
    color: #FFF !important;
}

.login-box input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
    border: 1px solid #66add6;
    cursor: pointer;
    background-color: #FFF;
    color: #339ad1;
}

.login-box input[type=submit]:hover {
    background-color: #339ad1; /*IE fallback*/
    color: #FFF;
}

h3.ui-widget-header ui-corner-all 
{
    height: 25px !important;
}

.clearboth 
{
    clear: both;
}

.contact-container
{
	width: 300px !important;
	margin: 0 auto;
	margin-bottom: 50px;
	margin-top: 50px;
}

.contact-row
{
	width: 100%;
	margin-bottom: 10px !important;
}

.contact-row:after {
    content:'';
    display:block;
    clear: both;
}

.contact-item
{
	float: left;
}

.contact-control
{
	float: right;
	margin-left: 30px !important;
}

.contact-control input, .contact-control textarea
{
	width: 180px;
}


.clearboth
{
	clear: both;
}

.contact-submit 
{
	width: 100%;
	background-color: #339ad1;
	color: White;
	font-weight: bold;
}

.main_header_logo
{
    margin: 0 auto;
    width: 230px;
    height: 50px;
    
    margin-bottom: 40px;
    margin-top: 40px;
}

.login_background
{
    font-family: 'Open Sans', sans-serif;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
	
    margin: 0 auto;
    width: 350px;
    height: 420px;
    background-color: #f7f7f7;

    
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    border: solid 1px #e6e6e6; 
    padding-right: 20px;
    padding-left: 40px;
}

.login_status
{
    font-size: 0.8em;
    color: Red !important;
}

.login_corelogo img
{    
    margin-top: 20px;
    width: 270px;
    height: 150px;
}

.login_credentials
{
    margin-top: 30px;
}

.login_credentials input[type=text], .login_credentials input[type="password"]
{
    width: 270px;
    height: 30px;
    
    margin-bottom: 10px;
    
    font-size: 15px;
    text-align:center;
    font-family: 'Open Sans', sans-serif;
}

.login_submit
{
    margin-top: 7px;
    font-family: 'Open Sans', sans-serif !important;
}

.login_submit a 
{
    font-family: 'Open Sans', sans-serif;
}

.login_submitbutton
{
    width: 270px !important;
    height: 35px;
    font-family: 'Open Sans', sans-serif;
    
    margin-top: 0px !important;
    padding-top: 0px !important;
    
    font-size: 20px;
    text-align:center;
    
    background: #4d8ffd;
    background: -moz-linear-gradient(top,  #4d8ffd 0%, #4787ee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d8ffd), color-stop(100%,#4787ee));
    background: -webkit-linear-gradient(top,  #4d8ffd 0%,#4787ee 100%);
    background: -o-linear-gradient(top,  #4d8ffd 0%,#4787ee 100%);
    background: -ms-linear-gradient(top,  #4d8ffd 0%,#4787ee 100%);
    background: linear-gradient(to bottom,  #4d8ffd 0%,#4787ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d8ffd', endColorstr='#4787ee',GradientType=0 );

    color: White;
    font-family: Calibri;
    border: solid 1px #3079ed;
    -webkit-border-radius: 2px; 
    border-radius: 5px;
    text-decoration: none;
}

.login_submitbutton input 
{
    margin-top: 0px !important;
    padding-top: 0px !important;
}


.login_submitbutton:hover
{
    text-decoration: underline;
    cursor: pointer;
}


.login_submitbutton a
{
    text-decoration: none;
}

.login_forgot_submitbutton 
{
    display: block;
    width: 270px !important;
    height: 30px;
    font-family: 'Open Sans', sans-serif;
    line-height: 30px;
    
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 20px;
    text-align:center;
    
    background: #4d8ffd;
    background: -moz-linear-gradient(top,  #4d8ffd 0%, #4787ee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d8ffd), color-stop(100%,#4787ee));
    background: -webkit-linear-gradient(top,  #4d8ffd 0%,#4787ee 100%);
    background: -o-linear-gradient(top,  #4d8ffd 0%,#4787ee 100%);
    background: -ms-linear-gradient(top,  #4d8ffd 0%,#4787ee 100%);
    background: linear-gradient(to bottom,  #4d8ffd 0%,#4787ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d8ffd', endColorstr='#4787ee',GradientType=0 );

    color: White;
    font-family: Calibri;
    border: solid 1px #3079ed;
    -webkit-border-radius: 2px; 
    border-radius: 5px;
    text-decoration: none;
}

.login_forgot_submitbutton:hover
{
    text-decoration: underline;
}


.login_forgot_submitbutton a
{
    text-decoration: none;
}

.main_header_tagline
{
    margin: 0 auto;
    width: 700px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 40px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    color: #555555;
}

.card-grid 
{
	list-style: none;
	margin: -10 20px -10px 20px;
}

.cf:after,
.cf:before
{
	display: table;
	content: "";
	line-height: 0;
}

.cf:after
{
	clear: both;
}

.card-grid > li
{
	background-color: #ccc;
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ddd),color-stop(100% #bbb));
	background-image: -webkit-linear-gradient(top,#ddd 0,#bbb 100%);
	background-image: -moz-linear-gradient(top,#ddd 0,#bbb 100%);
	background-image: -ms-linear-gradient(top,#ddd 0,#bbb 100%);
	background-image: -o-linear-gradient(top,#ddd 0,#bbb 100%);
	background-image: linear-gradient(top,#ddd 0,#bbb 100%);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.1);
	-moz-box-shadow: 0 2px 4px rgba(0,0,0,.1);
	box-shadow: 0 2px 4px rgba(0,0,0,.1);
	display: inline-block;
	margin: 0 8px 20px;
	padding: 1px;
	position: relative;
	vertical-align: top;
	width: 298px;
	word-wrap: break-word;
	z-index: 1;
}

.card-grid > li > a
{
	color: #484848;
	display: block;
	padding: 20px;
	background-color: White !important;
}

.logo-sprite 
{
	float: left;
	margin: 8px 15px 8px 0px;
	background-position: 50%, 50%;
	background-repeat: no-repeat;
	height: 96px;
	width: 96px;
}

.option-cards-title
{
	display: block;
	font-family: 'Open Sans Light',Arial,Helvetica,sans-serif;
	font-size: 22px;
	letter-spacing: -1px;
	line-height: 22px;
	margin: 0 0 12px 99px;
}

.option-cards-description
{
	display: block;
	margin: 0 0 0 99px;
}

.header-properties
{
	margin-bottom: 30px !important;
}

.faq-container
{
	border-top: 1px solid #d7d7d7;
	color: #484848;
	margin-top: 20px;
}

.faq-container h3
{
	border-bottom: 1px solid #d7d7d7;
	padding-bottom: 20px;
}

.faq-container ul
{
	list-style-type: none;
}

li.question-group
{
	margin-bottom: 25px;
}

.question
{
	font-size: 18px !important;
}

.inspector-content 
{
	width: 90%;
	margin: 0 auto;
}

.content 
{
    width: 90%;
    margin: 0 auto;
}

.content-header
{
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 30px;
}

.pda-red 
{
    background-color: #d9534f;
    color: White;
}

.pda-orange 
{
    background-color: #f0ad4e;
    color: White;
}

.pda-light-blue 
{
    background-color: #5bc0de;
    color: White;
}

.pda-green 
{
    background-color: #5cb85c;
    color: White;
}

.pda-dark-blue 
{
    background-color: #428bca;
    color: White;
}

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
}


.card-grid {
    background-color: #ccc;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ddd),color-stop(100% #bbb));
    background-image: -webkit-linear-gradient(top,#ddd 0,#bbb 100%);
    background-image: -moz-linear-gradient(top,#ddd 0,#bbb 100%);
    background-image: -ms-linear-gradient(top,#ddd 0,#bbb 100%);
    background-image: -o-linear-gradient(top,#ddd 0,#bbb 100%);
    background-image: linear-gradient(top,#ddd 0,#bbb 100%);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.1);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.1);
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    display: inline-block;
    margin: 0 8px 20px;
    padding: 1px;
    position: relative;
    vertical-align: top;
    width: 100%;
    word-wrap: break-word;
    z-index: 1;
}

.card {
    width: 100%;
    height: 120px;
    margin: 0 auto;
    display: block;
}

    .card:hover {
        cursor: pointer;
    }

.card-passed {
    background-color: #1abb4c !important;
}

.card-failed {
    background-color: #f21700 !important;
}

.card-missing {
    background-color: #9B59B6 !important;
}

.card-outstanding {
    background-color: #3498DB !important;
}

.card-repaired {
    background-color: #1ABB9C !important;
}

.card-condemned {
    background-color: #E74C3C !important;
}



.card-layout-icon {
    width: 50%;
    height: 100%;
    float: left;
}

.card-icon {
    color: White;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}


.card-title {
    float: left;
    width: 40%;
    text-align: center;
    color: White;
}

.card-description {
    height: 50px;
    line-height: 50px;
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
}

.card-value {
    height: 65px;
    line-height: 45px;
    font-size: 3em;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}