@charset "utf-8";
/* CSS Document */

/* Style list */
ul.topnav {
    list-style-type: none;
    margin: 70px 0px 0px 0px;
    padding: 0px;
    background-color: #FFF;
/*	border: 1px #00F solid; */
}
/* Float the list items side by side */
ul.topnav li { 
    float: left;
	display: block;
	border: #FFF dotted 1px;
}
/* Style the links inside all list items */
ul.topnav li a {
    display: inline-block;
    color: #666;
    text-align: center;
    padding: 16px 10px;
    text-decoration: none;
    transition: 0.3s;
    font-family: RobotoRegular, sans-serif;
    font-size: 16px;
/*    border: #0F0 solid 1px; */
}
/* Change background color of links on hover */
ul.topnav li:hover a { color: #001489; }
/* Restyle the icon for the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon a { font-size: 20px; }

ul.topnav li.extra { display: none; }

/* Style container to wrap around floating elements. Used to wrap list around list istems */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
span.left_arrow, span.right_arrow { display: none; }

#sub_menu_container {
    width: 99%;
    position: fixed;
    top: 133px;
    z-index: 1600;
    background-color: transparent;
}
[id*="submenu_"] {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    max-width: 1200px;
    padding: 0.6%;
    background-color: rgba(255, 255, 255, 0.9);
	border: #999 dotted 1px; 
    display: none;
}
[id*="submenu_"] span.close { color: #333; font-size: 20px; cursor: pointer; font-family: RobotoRegular, sans-serif; float: right; padding: 3px; }
[id*="submenu_"] ul { list-style-type: none; width: 100%; float: left;  max-width: 350px; padding: 0px 10px; }
/*[id*="submenu_"] ul.split {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
} */
[id*="submenu_"] ul img { height: 25px; width: 25px; padding: 0px 5px 0px 0px; margin: 0px; display: inline-block; vertical-align: -25%; }
[id*="submenu_"] ul h3 { color: #666; padding: 0px; margin: 0px; font-family: RobotoRegular, sans-serif; font-size: 16px; display: inline-block;  }
[id*="submenu_"] ul hr { border-top: #001489 1px solid; }
[id*="submenu_"] ul li { padding: 0px; margin: 3px; }
[id*="submenu_"] ul li a { color: #666; font-size: 14px; cursor: pointer; font-family: RobotoRegular, sans-serif; text-decoration: none; }
[id*="submenu_"] ul li a:hover { color: #001489; }
[id*="submenu_"] ul li.extra_2 { display: none; }

div#lists, div#lists ul { display: none; z-index: 2000; }

#header button { margin: 4px 0px 0px; float: right; }

div#paging_list {
    clear: both;
    float: left;
    margin: 10px 0px 40px;
    display: block;
}

div#paging_list a {
    float: left;
    font-size: 18px;
    padding: 15px 20px;
    color: #999;
    display: block;
    border-top: 1px solid #999;
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999;
}
div#paging_list a:first-of-type { border-left: 1px solid #999; }
div#paging_list a:hover { color: #666; background-color: #EEE; }
div#paging_list a.current { color: #000; background-color: #DDD; }
div#paging_list a.no_mobile { display: inline; }

@media only screen and (max-width: 1250px) { 
[id*="submenu_"] ul li.extra { display: none; }
[id*="submenu_"] ul li.extra_2 { display: block; }
}


@media only screen and (max-width: 1200px)
{
#sub_menu_container { top: 125px; }
}

@media only screen and (max-width: 740px)
{
ul.topnav { position: relative; margin: 0px 0px 0px 0px; background-color: transparent; }
/* Hide all list items. */
ul.topnav li {display: none;}
/* Except the icon for the link that should open and close the topnav on small screens */
ul.topnav li.icon { float: right; display: inline-block; margin-right: 10px; }

ul.topnav.responsive li { 
    float: none; 
	display: block;
	border: #999 dotted 1px; 
	width: 80%;
	background-color: #FFF; 
}
/* Change background color of links on hover */
ul.topnav.responsive li:hover, ul.topnav li.icon:hover, ul.topnav.responsive li.icon:hover {background-color: #EEE; }
/* Restyle the list item with the link to open and close topnav to overlap static list elements by setting it to absolute position in the top right corner of the tovnav element. */
ul.topnav.responsive li.icon {
    position: absolute;
    top: 0px;
	right: 0px;
    width: 40px;
	background-color: #FFF;
}
ul.topnav.responsive li.extra { display: block; height: 75px; border: #FFF 1px hidden; background-color: transparent; }
ul.topnav.responsive li.extra:hover { background: transparent; }

#sub_menu_container { top: 70px; }
[id*="submenu_"] ul { max-width: 250px; }
[id*="submenu_"] ul li.extra { display: none; }
[id*="submenu_"] ul li.extra_2 { display: none; }
div#lists { z-index: 2000; }
div#lists ul { 
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    background: #FFF;
    z-index: 2000;
}
div#lists ul li { 
    float: none; 
	display: block; 
	border: #999 dotted 1px; 
	width: 80%; 
	margin: 0px 0px 0px 0px;
    color: #666;
    padding: 16px 10px;
	background-color: #FFF; 
    font-family: RobotoRegular, sans-serif;
    font-size: 16px;
	cursor: pointer;
}
div#lists ul li:hover { background: #EEE: }
div#lists ul li img { float: left; height: 20px; width: 20px; padding: 0px 6px 0px 0px; margin: 0px; display: inline-block; }
div#lists ul li a { color: #666; text-decoration: none; transition: 0.3s; }
div#lists ul li.list_title { cursor: text; }
	
span.right_arrow { display: inline-block; color: #666; text-decoration: none; float: right; margin: 14px 5px 0px 0px; }
span.right_arrow_pic { display: inline-block; color: #666; text-decoration: none; float: right; margin: 0px 5px 0px 0px; } 

li.list_title { text-align: left; font-weight: bold; cursor: text; }
li.list_title img { float: none; height: 20px; width: 20px; padding: 0px 10px 0px 0px; margin: 0px; display: inline-block; }

div#paging_list a.no_mobile { display: none; }

#header button { display: none; } 
}

/* Phone selection menu */
#phone_nav_container {
    border: transparent 1px solid;
    margin: 0px auto;
    display: block;
    width: 700px;
    z-index: 200;
}
/* Remove margins and padding from all lists, and add a white background color */
ul.phonenav {
    list-style-type: none;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}
/* Float the list items side by side */
ul.phonenav li { float: left; background-color: #FFF; }
/* Style the links inside all list items */
ul.phonenav li p, ul.phonenav li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
	cursor: pointer;
}
ul.phonenav li img {
    display: block;
    width: 60px;
	height: 60px;
    margin: 10px auto;
}
/* Change size of links on hover */
ul.phonenav li:hover { background-color: #FFF; }
ul.phonenav li:hover img { width: 64px; height: 64px; margin: 7px auto; }

@media screen and (max-width:900px) { 
#phone_nav_container { width: 550px; }
ul.phonenav li { height: 100px; }
ul.phonenav li p, ul.phonenav li a {
    padding: 8px 6px;
    font-size: 12px;
}
ul.phonenav li img {
    display: block;
    width: 50px;
	height: 50px;
    margin: 8px auto;
}
ul.phonenav li:hover img { width: 54px; height: 54px; margin: 6px auto; }
}
@media screen and (max-width:700px) {
#phone_nav_container { width: 270px; }

ul.phonenav li p, ul.phonenav li a {
    padding: 6px 4px;
}
}

/* Download selection menu */
#download_nav_container {
    margin: 0px auto;
    display: block;
    width: 820px;
    z-index: 200;
}
/* Remove margins and padding from all lists, and add a white background color */
ul.downloadnav {
    list-style-type: none;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}
/* Float the list items side by side */
ul.downloadnav li {float: left; background-color: #FFF; margin: 0px; padding: 0px; }
/* Style the links inside all list items */
ul.downloadnav li p {
    display: block;
    color: #001489;
    text-align: center;
	margin: 0px;
    padding: 5px 22px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
    font-family:'Calibri Light';
	cursor: pointer;
}

/* Change background color of links on hover */
ul.downloadnav li p:hover {background-color: #DDD; color: #333; }

@media screen and (max-width:900px) {
#download_nav_container { width: 600px; }
ul.downloadnav li { width: 200px; }
}


@media screen and (max-width:700px) {
#download_nav_container { width: 300px; }
ul.downloadnav li { width: 150px; }
ul.downloadnav li p {
    padding: 5px 0px;
    font-size: 14px;
}
}

/* Video selection menu */
#video_nav_container {
    margin: 0px auto;
    display: block;
    width: 405px;
    z-index: 200;
}
/* Remove margins and padding from all lists */
ul.videonav {
    list-style-type: none;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}
/* Float the list items side by side */
ul.videonav li {float: left; background-color: #FFF; margin: 0px; padding: 0px; }
/* Style the links inside all list items */
ul.videonav li p {
    display: block;
    color: #001489;
    text-align: center;
    margin: 0px;
    padding: 5px 22px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
    font-family:'Calibri Light';
    cursor: pointer;
}

/* Change background color of links on hover */
ul.videonav li p:hover {background-color: #DDD; color: #333; }

@media screen and (max-width:520px) {
#video_nav_container { width: 290px; }
ul.videonav li { width: 140px; }
ul.videonav li p { padding: 5px 0px; font-size: 14px; }
}
}

/* Additions for Microsite */
div.micrositenav { display: block; width: 100%; height: 50px; background: #000; margin: 0px; z-index: 200; margin-bottom: 0px; }
div.micrositenav ul { display: block; list-style-type: none; margin: 0px; padding: 0px 20px; margin: 0px auto; width: 730px; }
/* Float the list items side by side */
div.micrositenav ul li { display: inline-block; position: relative; margin: 3px; width: 150px; }
div.micrositenav ul li#link_3 { width: 90px; }
div.micrositenav ul li#link_4 { width: 140px; }
/* Style the links inside all list items */
div.micrositenav ul li a { display: inline-block; color: #FFF; text-align: center; padding: 8px 10px; text-decoration: none; font-family: RobotoRegular, sans-serif; font-size: 20px; width: 100%; }
div.micrositenav ul li a.current { color: #C2SCDC; }

/* Restyle and hide the icon for the link that should open and close the micrositenav on small screens */
div.micrositenav p.mobile_menu { display: none; }
/* Highlight links on hover and open submenu */
div.micrositenav ul li:hover a { font-weight: bold; padding: 8px 9px; }

/* Mobile menu */
@media screen and (max-width:900px) {
div.micrositenav { border-left: 1px solid #000; border-right: 1px solid #000; height: 40px; position: relative; }
div.micrositenav ul { padding: 0px; width: 200px; margin-top: 0px; }
div.micrositenav ul li { display: none; }
div.micrositenav p.mobile_menu { display: block; float: right; width: auto; margin: 12px 12px; }
div.micrositenav ul p.mobile_menu a img { width: 15px; height: 14px; }

div.micrositenav.responsive ul { background: #000; width: 100%; max-width: 200px; }
div.micrositenav.responsive ul li { display: block; z-index: 200; background: #000; width: 190px; }
div.micrositenav ul li a { text-align: left; font-size: 16px; }
}

/* Tariff selection menu */
#tariff_nav_container {
    margin: 0px auto;
    display: block;
    width: 400px;
    z-index: 200;
}
/* Remove margins and padding from all lists, and add a white background color */
ul.tariffnav {
    list-style-type: none;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}
/* Float the list items side by side */
ul.tariffnav li {float: left; background-color: #FFF; margin: 0px; padding: 0px; width: 195px; }
/* Style the links inside all list items */
ul.tariffnav li p {
    display: block;
    color: #001489;
    text-align: center;
	margin: 0px;
    padding: 5px 22px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
    font-family:'Calibri Light';
	cursor: pointer;
}

/* Change background color of links on hover */
ul.tariffnav li p:hover {background-color: #DDD; color: #333; }

@media screen and (max-width:480px) {
#tariff_nav_container { width: 200px; }
}