/*  *   *   *   *   *   *   *   *   *   *   *

Universal Styles

Place all of your universal styles that apply to all site versions beneath this comment.

*   *   *   *   *   *   *   *   *   *   *   */

html {
    font-family: Times New Roman, Times, serif;
}

body {
     background: #002851;   
     background-image: url(../_images/gradient_background.png);
     background-repeat: no-repeat;
     background-position: top center;
}

main {
     background: #ffffff;   
}

main img {
     border-radius: 10px; 
     box-shadow: 1px 1px 10px #666;
}

.ontrack main div.left {
     float: left;
     width: 44%;
     background-color: #EEE;
     padding: 2%;
     border-radius: 10px; 
     margin-top: 30px;
}

.ontrack main div.right {
     float: right;
     width: 44%;
     background-color: #EEE;
     padding: 2%;
     border-radius: 10px; 
     margin-top: 30px;
}

p.top-reference {
     position: relative;
}

.top {
     position: absolute;
     top: -44px;
     right: 0px;
}

div.container {
     padding-top: 20px;
     padding-bottom: 20px;
}

header, nav, main, footer, div.content { 
     margin: 0px auto;
}

hr {
     border: 0px solid #fff;
     border-top: 1px solid #AD1F31;
}

header {
     border-radius: 0px 0px 10px 10px; 
     box-shadow: 2px 2px 8px #111;
}

div.content {
    box-shadow: 2px 2px 8px #111;
    border-radius: 10px;
}

header div.container img.logo {
     height: 40px;
     float: right;
     margin-top: 0px;
}

header div.container img.logo-other {
     height: 30px;
     float: left;
     margin-top: 5px;
}

nav {
     margin-top: 30px;
     border-radius: 10px 10px 0px 0px;
}
nav ul, footer ul {
     margin: 0px; 
     line-height: 20px;
}
nav li, footer li {
     line-height: 18px; 
}
nav a, footer a {
     line-height: 18px; 
}

header, nav, footer {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #dddddd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#dddddd 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#dddddd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */  
}

main {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f7f7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */  
}

footer {
     border-radius: 0px 0px 10px 10px;   
}

.ontrack_section:nth-child(odd) {
    background: #eee;
    
}

p.copyright {
     width: 840px;
     margin: 15px auto;
     display: block;
     color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
     color: #002851;
     font-weight: 700;
}

nav a li, footer a li {
     color: #002851;   
}

.home .homelink, a, .findaprovider .findaproviderlink, .contact .contactlink, .forms .formslink, .healthyrewards .healthyrewardslink, .ontrack .ontracklink, .verificationofbenefits .verificationofbenefitslink, .ontrack .benefitslink, .healthyrewards .benefitslink, .verificationofbenefits .benefitslink, .benefits .benefitslink, .welcomepacket .welcomepacketlink {
     color: #AD1F31;   
}

.ribbon {
     background-color: #AD1F31;
     color: #ffffff;
     padding: 10px 0px;
     position: relative;
}

.loginlink {
     float: right;   
}

nav ul li ul {
     z-index: 1;   
}

        .videos .link-container {
            padding: 0rem 0 0rem 3.25rem;
            display: inline-block;
            margin: 1rem 0;
            text-align: left;
        }

        .videos .link-container a {
            display: inline-block;
            position: relative;
            margin-left: 20px;
            font-size: .9rem;
            text-align: left;
        }

        .videos .link-container a:before {
            position: absolute;
            left: -3.25rem;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            content: url("../_Images/play-button-mini.png");
            display: inline-block;
        }

/*  *   *   *   *   *   *   *   *   *   *   *

Media Queries

*   *   *   *   *   *   *   *   *   *   *   */

/*  *   *   *   *   *   *   *   *   *   *   *

Desktop HD Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (min-width:1200px) {
    header, nav, main, footer, div.content {
         width: 1140px;
    }
    div.container {
         width: 1080px;
    }
    p.copyright {
         width: 1080px;
    }
    .handle {
         margin-right: 30px; 
         color: #002851;
         cursor: pointer;
    }
    nav ul li {
         position: relative;
    }
    nav ul li ul {
         position: absolute;
         top: 20px;
         left: -20px;
         margin: 0px;
         padding: 0px;
         margin-top: 20px;
         border-left: 1px solid #e7e7e7;
         border-bottom: 1px solid #e7e7e7;
         border-right: 1px solid #e7e7e7;
         width: 300px;
    }
    nav ul li ul a {
         display: block;
         margin-right: 0px;
    }
    nav ul li ul li {
         display: block;
         background-color: #ffffff;
         margin: 0px;
         padding: 15px 20px;
    }
    nav ul li ul li:hover {
         background-color: #ccc;   
    }
    #benefits-menu {
         display: none;   
    }
    aside {
         float: right;
         width: 40%;
         padding-left: 30px;
         margin-left: 30px;
         border-left: 1px solid #AD1F31;
    }
    div.left {
         width: 585px;   
    }
    .flipbook {
        width: 100%; 
        height: 600px;   
    }
}

/*  *   *   *   *   *   *   *   *   *   *   *

Desktop Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (min-width:960px) and (max-width:1199px) {
    header, nav, main, footer, div.content {
         width: 900px;
    }
    .handle {
         margin-right: 30px; 
         color: #002851;
         cursor: pointer;
    }
    nav ul li {
         position: relative;
    }
    nav ul li ul {
         position: absolute;
         top: 20px;
         left: -20px;
         margin: 0px;
         padding: 0px;
         margin-top: 20px;
         border-left: 1px solid #e7e7e7;
         border-bottom: 1px solid #e7e7e7;
         border-right: 1px solid #e7e7e7;
         width: 300px;
    }
    nav ul li ul a {
         display: block;
         margin-right: 0px;
    }
    nav ul li ul li {
         display: block;
         background-color: #ffffff;
         margin: 0px;
         padding: 15px 20px;
    }
    nav ul li ul li:hover {
         background-color: #ccc;   
    }
    #benefits-menu {
         display: none;   
    }
    div.container {
         width: 840px;
    }
    p.copyright {
         width: 840px;
    }
    aside {
         float: right;
         width: 40%;
         padding-left: 30px;
         margin-left: 30px;
         border-left: 1px solid #AD1F31;
    }
    div.left {
         width: 440px;   
    }
    .flipbook {
        width: 100%; 
        height: 400px;   
    }
}

/*  *   *   *   *   *   *   *   *   *   *   *

Tablet Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (min-width:690px) and (max-width:959px) {
    header, div.content {
         width: 98%;
         margin-left: 1%;
         margin-right: 1%;
    }
    nav, main, footer {
         width: 100%;   
    }
    .handle {
         margin-right: 30px; 
         color: #002851;
         cursor: pointer;
    }
    nav ul li {
         position: relative;
    }
    nav ul li ul {
         position: absolute;
         top: 20px;
         left: -20px;
         margin: 0px;
         padding: 0px;
         margin-top: 20px;
         border-left: 1px solid #e7e7e7;
         border-bottom: 1px solid #e7e7e7;
         border-right: 1px solid #e7e7e7;
         width: 300px;
    }
    nav ul li ul a {
         display: block;
         margin-right: 0px;
    }
    nav ul li ul li {
         display: block;
         background-color: #ffffff;
         margin: 0px;
         padding: 15px 20px;
    }
    nav ul li ul li:hover {
         background-color: #ccc;   
    }
    #benefits-menu {
         display: none;   
    }
    div.container, nav div.container {
         width: 94%;
         padding-left: 3%;
         padding-right: 3%;
    }
    p.copyright {
         width: 92%;
    }
    aside {
         float: right;
         width: 100%;
         border-left: 0px solid #AD1F31;
         padding-top: 30px;
         border-top: 1px solid #ccc;
         margin-top: 30px;
    }
    .flipbook {
        width: 100%; 
        height: 400px;   
    }
}

@media screen and (min-width:690px) and (max-width:959px) and (orientation:landscape) {
}

/*  *   *   *   *   *   *   *   *   *   *   *

Mobile Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (max-width:689px) {
    header div.container img.logo-other {
         height: auto;
         max-height: 30px;
    }
    header div.container img.logo {
         display: none;   
    }
    header, div.content {        
         width: 90%;
         margin-left: 5%;
         margin-right: 5%;
    }
    nav, main, footer {
         width: 100%;   
    }
    div.container, nav div.container {
         width: 90%;
         padding-left: 5%;
         padding-right: 5%;
    } 
    footer div.container ul a li {
         line-height: 50px;   
    }
    nav a {
         color: #002851; 
    }
    nav p.menu.mobile {
         display: block;
         text-align: center;
         margin-top: 0px;
         padding-top: 5px;
         padding-bottom: 5px;
         width: 100%;
    }
    nav p.menu.mobile a {
         display: block;
         padding-top: 5px;
         padding-bottom: 5px;
         width: 100%;
    }
    nav div.container {
         padding-top: 0px;
         padding-bottom: 0px;
    }
    p.copyright {
         width: 90%;
    } 
    aside {
         float: right;
         width: 100%;
         border-left: 0px solid #ccc;
         padding-top: 30px;
         border-top: 1px solid #ccc;
         margin-top: 30px;
    }
    .ontrack main div.left {
         float: left;
         width: 90%;
         background-color: #EEE;
         padding: 5%;
         border-radius: 10px; 
         margin-top: 30px;
    }

    .ontrack main div.right {
         float: right;
         width: 90%;
         background-color: #EEE;
         padding: 5%;
         border-radius: 10px; 
         margin-top: 30px;
    }
    .loginlink {
         float: none;   
    }
    .flipbook {
        width: 100%; 
        height: 250px;   
    }
    div.container .cards, .forms main ul {
         width: 100%;  
         list-style-position: inside;
         padding-left: 10px;
    }
}

@media screen and (max-width:689px) and (orientation:landscape) { 
    
}

/*  *   *   *   *   *   *   *   *   *   *   *

Retina Display Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (-webkit-device-pixel-ratio: 2) {
    
}

/*  *   *   *   *   *   *   *   *   *   *   *

iPhone 5/5C/5S Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) {

}

/*  *   *   *   *   *   *   *   *   *   *   *

iPhone 4S Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {

}

/*  *   *   *   *   *   *   *   *   *   *   *

iPad / iPad Mini Styles

*   *   *   *   *   *   *   *   *   *   *   */

@media only screen and (min-device-width: 700px) and (max-device-width: 1199px) 
and (-webkit-device-pixel-ratio: 1) and (device-aspect-ratio: 3/4) {

}

/*  *   *   *   *   *   *   *   *   *   *   *

iPad / iPad Mini (Retina Display) Styles

Note: The iPad / iPad Mini (Retina Display) will respond to the standard iPad Media Queries
if no additional styles are placed in this stylesheet.

*   *   *   *   *   *   *   *   *   *   *   */

@media only screen and (min-device-width: 700px) and (max-device-width: 1199px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 3/4) {

}

/*  *   *   *   *   *   *   *   *   *   *   *

Portrait Orientation Styles

Combine with mobile or tablet to avoid changing styles while resizing desktop windows.

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (orientation:portrait) {

}

/*  *   *   *   *   *   *   *   *   *   *   *

Landscape Orientation Styles

Combine with mobile or tablet to avoid changing styles while resizing desktop windows.

*   *   *   *   *   *   *   *   *   *   *   */

@media screen and (orientation:landscape) {

}

/*  *   *   *   *   *   *   *   *   *   *   *

End of Media Queries

*   *   *   *   *   *   *   *   *   *   *   */