/*
    767 = 479
    768 = 480
    750 = 470
    600 = 420
    
    900 = 600
    991 = 767
    992 = 768
    970 = 750

    1199 = 991
    1200 = 992
    1170 = 970
    
     */

@font-face {
    font-family: CartoGothicStdBold;
    src: url('../fonts/CartoGothicStd-Bold-webfont.eot');
    src: url('../fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg'),
         url('../fonts/CartoGothicStd-Bold-webfont.woff') format('woff'),
         url('../fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    /*CartoGothicStdBold,"Century Gothic","Apple Gothic",AppleGothic,"URW Gothic L","Avant Garde",Futura,sans-serif;*/
    background-color:#004787;
}

a {
    color: #004686;   
}

img {
    max-width:100%;
}

thead {
    text-wrap:none;
}


h1, h2, h3, h4, h5, h6, .heading, .Heading {
  display: block;
  font-family: CartoGothicStdBold, sans-serif;
  color: #004787;
  line-height: 1.25em;
  font-weight: bold;
  text-transform: uppercase;
  margin: .5em 0;
}

/* This seems to fix the resizing on a mobile device when a textbox gets selected */
input[type='text'], input[type='tel'], input[type='email'], input[type='number'] {
    font-size:16px;
}
textarea {
    font-size:16px !important; /* Textarea seems to be stuborn*/
}

.header {
  margin: 0 auto 0 auto;
  display:block;
}

.pageWrapper {
  background: none !important;
}

.topLinksWrapper {
    height:21px;
    width: 100%;
    color: white;
    background: #fb8012;
}

#logo {
    max-width: 980px;
    margin: 0 auto;
    padding: .5em 0 .5em 0;
    text-align: center;
    background: url('../images/glowRight.png') no-repeat center center;
}

.largeLogo {
    display:none;
}

.homeMainContent, .subMainContent {
  max-width: 980px;
  min-height: 400px;
  padding: .5em;
  margin: 0 auto;
  border-radius: 0px 0px 10px 10px;
  background-color: #FFF;
  text-align: center;
}

.subMainContent {
  padding: 2em 1em;
  text-align: left;
}

.mainHeading {
  display: block;
  padding: 0px 0px 8px 0px;
  margin-bottom: 8px;
  font-family: CartoGothicStdBold, sans-serif;
  font-size: 1.75em;
  color: #004787;
  line-height: 2.5rem;
  border-bottom: 2px solid #004787;
  font-weight: bold;
  text-transform: uppercase;
}

.mainscreen {
  background-color: #fafafa;
  min-height:400px;
  padding-top:65px;
}

.breadcrumb {
  margin-bottom: 10px;
  padding-bottom: 5px;
  padding-top: 10px;
  padding: 10px 0 5px 0;
  color: #BEBEBE;
  font-size: .85em;
  border-bottom: 1px solid #EBEBEB;
  line-height: normal;
  background-color: transparent;
  border-radius: 0;
}

.StayGray {
    color:#959595!important;
}

.FloatLeft {
    float: left;
}

.required label:after {
  content:" *";
  color:red;
}

.NoLabel label{
    display:none;    
}

.CursorPointer {
    cursor:pointer;
}
.HideAtStartup {
    display: none !important;
}

.Guidelines {
    border: 1px solid red;
}

.panel-heading {
    cursor: pointer;
}

.panel-heading:hover {
    background-color: #ddd;
}

.HelpText {
    color: #959595 !important;
}






/* This fixes the background scroll while showing a modal */
body.modal-open {
    overflow: hidden;
    /*position:fixed;*/
}/* 
body.vex-open {
    overflow: hidden;
    position:fixed;
}
*/
.NotBold {
    font-weight:normal !important;
}

.Bold {
    font-weight:bold !important;
}


.NotBold label{
    font-weight:normal !important;
}

.ForceDisplayBlock {
    display:block !important;
}

.SmallerMargin {
    margin:8px 0;
}

.CheckboxVertical {
    text-align:left;
}

 .CheckboxLarge { 
    text-align:left;
    white-space:normal; 
}

.vbottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;

}

.ValidatorAddonOffset .form-control-feedback {
    top: 25px;
    /*right: 40px;*/
}
.ValidatorRadioButtonOffset .form-control-feedback {
    top: 0;
    right: -30px;
}
.ValidatorNoLabelOffset .form-control-feedback {
    top: 0;    
}

.bootstrap-checkbox > button.btn {
    color: #333333!important;
    /*text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75)!important; Oddly enough causes other items to dissapear in IE */
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6)!important;
    /* background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); */
    /* background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); */
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6)!important;
    /* background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0)!important;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf!important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)!important;
    background-color: #f5f5f5!important;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)!important;
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)!important;
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)!important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)!important;
}

.bootstrap-checkbox > button.btn-success {
  color: #ffffff!important;
  background-color: #73a839!important;
  border-color: #73a839!important;
  background-image:-moz-linear-gradient(top, #c0df9f, #73a839)!important;
  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#c0df9f), to(#73a839))!important; 
  background-image:-webkit-linear-gradient(top, #c0df9f, #73a839)!important; 
  background-image:-o-linear-gradient(top, #c0df9f, #73a839)!important; 
  background-image:linear-gradient(to bottom, #c0df9f, #73a839)!important; 
    
}

/******* Media queries ******/

@media (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 460px;
  }
}


@media only screen and (min-width: 590px){
    #logo {
        background-position: top left;
    }
}

@media only screen and (min-width: 768px) {
    .header {
        margin: 0 auto;
        height: 127px;/*159*/
    }
    .pageWrapper {
        background: url('../images/glowRight.png') no-repeat top left !important;
    }
  
    .topLinksWrapper {
        height: 27px;
        text-align: right;
        font-size: .8em;
    }
    
    #logo {
        margin: -4px auto 0 auto;
        padding: 0;
        background: none;
    }

    .logo {
        float: left;
        margin-left: 1.5em;
    }
  
    .largeLogo {
        display: block;
    }
  
    .smallLogo {
        display: none;
    }

    .subMainContent {
        padding: 2em 1em;
    }
}
@media only screen and (min-width: 850px) {
    .pageWrapper {
        background: url('../images/mainBg1.jpg') no-repeat top center !important;
    }
}
@media only screen and (min-width: 980px) {
    .subMainContent {
        padding: 2em;
    }
}

/* keeps forms elements inline. 320 seems to work nicely for a date, 3 dropdowns: month day year */
@media (min-width: 320px) {
  .form-inline-320 .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline-320 .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline-320 .input-group {
    display: inline-table;
    vertical-align: middle;
  }
  .form-inline-320 .input-group .input-group-addon,
  .form-inline-320 .input-group .input-group-btn,
  .form-inline-320 .input-group .form-control {
    width: auto;
  }
  .form-inline-320 .input-group > .form-control {
    width: 100%;
  }
  .form-inline-320 .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline-320 .radio,
  .form-inline-320 .checkbox {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline-320 .radio label,
  .form-inline-320 .checkbox label {
    padding-left: 0;
  }
  .form-inline-320 .radio input[type="radio"],
  .form-inline-320 .checkbox input[type="checkbox"] {
    position: relative;
    margin-left: 0;
  }
  .form-inline-320 .has-feedback .form-control-feedback {
    top: 0;
  }
}