/************** CSS - Table of Contents **************/
/*
01. General Styles
02. Map Styles
03. Application Header
04. Mega Menus
05. Account Info
06. Application Footer
07. Membership Styles
08. Responsive Break Points  
  
*/
/************** End of CSS - Table of Contents **************/

/* 01. General Styles */

* { box-sizing: border-box; -moz-box-sizing: border-box;}
body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 14px; background:#e5e5e5;}
button {font-family: 'Open Sans', sans-serif;}

p { line-height: 1.5em;}

h1, h2, h3, h4 { margin: 0; padding: 0; line-height: 1.25em;}

h2 {font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 2.2em; color:#720404;}
h3 {font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 2em; color:#720404;}
h4 {font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.6em; text-transform: uppercase;}

.txtLeft {text-align:left;}
.txtRight {text-align: right;}
.txtCenter {text-align: center;}

.padding1em {padding: 1em;}
.paddingVert {padding: 1em 0;}

.relative {position: relative;}

.bg001 { background:#fff;}
.bg002 { background:#f7f7f7;}

.explanationText {margin: 0 0 1em 0;}

.alignCenter {position:relative;}
.alignCenter img {width: 50px; height: auto; position:absolute; left:0; top:0;}
.alignCenter h3 {position: relative; padding: 7px 0 0 60px; }

.mobileSectionHeader {padding-top: 1em;  font-family: 'Open Sans Condensed', sans-serif;font-size: 1.2em; text-transform: uppercase;}
.paddingNoTop {padding-top:0;}
.homeListStyle {margin:1em 0 0 0 ; padding: 0; list-style:none; border: 1px solid #ccc; border-radius: 7px; -moz-border-radius: 7px; overflow:hidden;}
.homeListStyle li {border-bottom: 1px solid #ccc; position:relative; background:#fff}
.homeListStyle li:last-child {border-bottom: 0;}
.homeListStyle li a {display:block; color:#1a426d; padding: 1em; background-color:#fff; font-weight: 700;  text-decoration:none;}

.mobileDisclaimer {display:none; background:#fff; position:fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 2em; overflow: auto; z-index: 99;}

.mobileContactUs {display:block; background:#fff; position:fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 1em; overflow: auto; z-index: 99;}

/* 03. Application Header */
.appHeaderContainer {background: #171717; position: fixed; z-index: 50; width: 100%; -webkit-box-shadow: 0 0 30px 0 #000; box-shadow: 0 0 30px 0 #000;}
.gradient {background: #171717; /* Old browsers */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top,  #333333 0%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  #333333 0%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  #333333 0%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  #333333 0%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom,  #333333 0%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 ); /* IE6-8 */}

.logoContainer {z-index: 1; font-family: 'Open Sans Condensed', sans-serif; font-size: 2.75em; padding: 5px 10px 5px 60px;  background: url(../images/logo.png) 15px 50% #fff no-repeat; position: fixed; top: 0; left: 0;}

    .logoContainer img { position: absolute; width: auto; height: 100%; left: 100%; top: 0;}
    .logoContainer span {overflow:hidden; text-indent: -9999px; display:inline-block;}

.appBtns {padding: .5em;}
.appBtns a {display: inline-block; visibility:hidden;    text-decoration: none; background: #1a426d;    color: #fff;    font-weight: bold;    text-align: center;    padding: .5em 1em;    border-radius: 3px;    -moz-border-radius: 3px;}

/* Dashboard Styles */
.dashIcon { margin:1em 0 0; padding: 0; list-style: none;}
.dashboard::after {clear:both; content:""; display:block;}
.dashIcon li { width: 30%; float:left;  position: relative; margin: 0 3.3333333% 3.3333333% 0; }
.dashIcon li:nth-child(4) {clear:both;}
    .dashIcon li a {background: #fff; border: 1px solid #ccc; display:block; text-align: center; padding: .5em 0;  border-radius: 7px; -moz-border-radius: 7px;}
        .dashIcon li a .iconImg { max-width: 168px; width: 100%; height: auto;}
        
        .dashIcon li a .iconOn { background:#5ba960;  position: absolute; top: 0; right: 0; padding: 2%; width: 15%; display:block; }
            .dashIcon li a .iconOn img { width: 100%; height: auto; }
                    
        .dashIcon li a.active {background:#fff;}
        .dashIcon li a.active .iconOn { display: block;}
        
/*List Styles*/
.listStyle {margin:1em 0 0 0 ; padding: 0; list-style:none; border: 1px solid #ccc; border-radius: 7px; -moz-border-radius: 7px; overflow:hidden;}
.listStyle li {border-bottom: 1px solid #ccc; position:relative; background:#fff}
.listStyle li:last-child {border-bottom: 0;}
.listStyle li a {display:block; color:#1a426d; padding: 1em 1em 1em 45px; background-color:#fff; background-size: 30px auto; background-repeat: no-repeat; background-position: 10px 15px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration:none;}

.listStyle li a span {display:block;font-family: 'Open Sans', sans-serif; text-transform: none; font-size: .8em; }


.dashboard {display:none;}
.subMenu {display:none;}

.RC-001 {background-image: url(../images/new-icon-roadclosure.png);}
.RC-002 {background-image: url(../images/new-icon-severe.png);}
.RC-003 {background-image: url(../images/new-icon-difficult.png);}
.RC-004 {background-image: url(../images/new-icon-fair.png);}
.RC-005 {background-image: url(../images/new-icon-seasonal.png);}
.RC-006 {background-image: url(../images/new-icon-crash.png);}
.RC-007 {background-image: url(../images/new-icon-alert.png);}
.RC-008 {background-image: url(../images/new-icon-special.png);}

/* Camera List */
.cameraList li {display:block; color:#1a426d; padding: 1em 1em 1em 45px; background-image: url(../images/new-icon-camera.png); background-color:#fff; background-size: 30px auto; background-repeat: no-repeat; background-position: 10px 15px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration:none;}
.cameraContainer {border:1px solid #ccc; background:#fff; border-radius: 7px; -moz-border-radius: 7px; overflow:hidden;}
.cameraContainer div {padding: 1em; font-weight: bold;}

/*Dynamic Message Signs */
.messageSignList li {display:block; color:#1a426d; padding: 1em 1em 1em 45px; background-image: url(../images/new-icon-dms.png); background-color:#fff; background-size: 30px auto; background-repeat: no-repeat; background-position: 10px 15px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration:none;}
.messageSignList li.DMS-Filter {background-image: url(../images/new-icon-dms.png);}
.messageSignList li.DMS-Filter-On {background-image: url(../images/new-icon-dms-on.png);}
.DMSMessageContainer {background:#fff; margin-top: 1em; border: 1px solid #ccc; padding: 1em; border-radius: 7px; -moz-border-radius: 7px; overflow:hidden;}

/* Construction*/
.CONST-001 {background-image: url(../images/new-icon-roadwork.png);}
.CONST-002 {background-image: url(../images/new-icon-lane.png);}
.CONST-003 {background-image: url(../images/new-icon-construction.png);}

/*Weather*/
.weatherConditionsList li {display:block; color:#1a426d; padding: 1em 1em 1em 70px; min-height: 70px; background-color:#fff;  font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration:none;}
.weatherConditionsList li img {position:absolute; left: 10px; border-radius: 100px; -moz-border-radius: 100px; width: 50px; height: auto;}

.weatherConditionsContainer {background:#fff; border: 1px solid #ccc; padding: 1em; border-radius: 7px; -moz-border-radius: 7px; margin-top: 2em; }
.weatherConditionsContainer img {position:absolute; left: 50%; margin: -50px 0 0 -50px; border-radius: 100px; -moz-border-radius: 100px; width: 100px; height: auto;}
.weatherDetails {padding: 5em 0 0 0;}

/*Rest Areas*/
.restAreaList li {display:block; color:#1a426d; padding: 1em 1em 1em 45px; background-image: url(../images/new-icon-ra.png); background-color:#fff; background-size: 30px auto; background-repeat: no-repeat; background-position: 10px 15px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration:none;}
.raMainContainer {background:#fff; border: 1px solid #ccc; overflow:hidden; border-radius: 7px; -moz-border-radius: 7px; }
.raMainContainer img {width: 100%; height: auto;}
.raIconContainer {padding-top: 1em;}

.RA-Icon {background-image: url(../images/new-icon-ra.png);}

/* 511 Area */
.List511 li a {display:block; color:#1a426d; padding: 1em 1em 1em 45px; background-image: url(../images/511.png); background-color:#fff; background-size: 30px auto; background-repeat: no-repeat; background-position: 10px 15px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration:none;}

/*List Details*/
.listDetails {margin:1em 0 0 0 ; padding: 0; list-style:none; border: 1px solid #ccc; border-radius: 7px; -moz-border-radius: 7px; overflow:hidden;}
.listDetails li {border-bottom: 1px solid #ccc; background: #fff; padding: .5em 1em;}





.splashScreen {display:none;background:#fff; position:fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 1em; z-index: 51; overflow: auto;}
.splashLogo {background: url(../images/logo.png) 50% 10px #fff no-repeat; height: 200px; width: 100%; padding: 5em 1em 1em 1em;}
.splashTxt {font-family: 'Open Sans Condensed', sans-serif; font-size: 2.75em; text-align:center; text-transform: uppercase;}
.splashTxt span {font-family: 'Open Sans', sans-serif; font-size: .4em; display:block; text-transform:none; font-weight:bold; font-style:italic;}
.splashWarning {background:#e5e5e5; border-radius: 7px; text-align:left; -moz-border-radius: 7px;font-size: 1.25em; padding: 1em; color:#000; font-weight: bold; margin-bottom: 1em; min-height: 60px;  font-weight: 700; }
.splashKeyContainer {border: 1px solid #ccc;}
.splashKeyPadding {padding: 1em 0 0 0;}
.splashTable {font-size: 1em;}
.splashTableTDIcon{vertical-align: top;}
.splashTableTDMessage {padding: 0 .5em .5em;}
.splashImg {background:#000; padding: 1em;}
.splashBtn {display:block; text-decoration:none; background:#1a426d; color:#fff; font-weight: bold; text-align: center; padding: .5em 1em;  border-radius: 3px; -moz-border-radius: 3px;}


.handsFreeWindow {display:none;}
.handsFreeWindow .marginBot {margin-bottom: 2em;}
.floatRight {float:right;}
.clearAfter:after {content: ""; display:block; clear:both;}
.marginBot {margin-bottom: 1em;}
.titleWindowTitle {padding-bottom: .5em; display:block;}
.padding1em {padding: 1em;}


input[type=text], textarea 
    {
        font-family: 'Open Sans', sans-serif;
        padding: .5em;
        font-size: 1em;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
      outline: none;  width: 100%; 
    }
    
    textarea {height: 100px;}

.mobileGeneralBtn {display:inline-block; padding: .5em 1em; border-radius: 3px; -moz-border-radius: 3px;  background:#1a426d; color:#fff; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.2em; text-transform: uppercase; text-decoration: none; z-index: 49;}
.mobileThankYou, .mobileContactUs {display:none;}

@media only screen and (max-width: 959px) 
{    
    * {-webkit-text-size-adjust: 100%}
    .dashboard {display:none;}
    .splashScreen {display:block;} 

    .handsFreeWindow .marginBot {margin-bottom: 2em;}    
}