@charset "UTF-8";

/* CSS Document */
@media only screen and (max-width: 640px) and (orientation: portrait){
body, html
{
	width: 640px;
}
}
@media (max-width: 640px) and (orientation: landscape){
 body, html{
    min-width: 100%;
    overflow-x: hidden;
	overflow-y: scroll;
	overflow-scrolling: touch;
	-webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 640px) {
.breadcrumb_box
{
	display: none;
}

.footer_copyright
{
	padding: 6px 0px 0px 6px;
	font-size: 10px;
	float: none;
}
}

/* For 1024 Resolution laptops  
@media only screen   
and (min-device-width : 768px)   
and (max-device-width : 1024px)  

/* For 1366 Resolution laptops - recommended 
@media only screen   
and (min-width: 1030px)   
and (max-width: 1366px)  

/* IPAD
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work. */  
/* Orientation : Landscape */  
/*@media only screen   
and (orientation : landscape)   
and (-webkit-min-device-pixel-ratio: 1)  
and (min-device-width : 768px)   
and (max-device-width : 1007px)   */
/*  Orientation : Portrait */  
/*@media only screen   
and (orientation : portrait)   
and (-webkit-min-device-pixel-ratio: 1)   
and (min-device-width : 768px)   
and (max-device-width : 1007px)  */

/* The 4 next MQs are to make sure rightmost top menu items don't dissappear off screen*/
@media only screen
and (max-width: 1185px)  and (min-width: 676px){
nav[role="custom-dropdown"] .nav>li:last-child>ul{
	left: -75px;	
}
nav[role="custom-dropdown"] .nav>li:last-child>ul>li{
	text-align: right;
}
}
@media only screen
and (max-width: 1150px)  and (min-width: 1081px){
nav[role="custom-dropdown"] .nav>li:last-child>ul{
	left: -90px;	
}
}
@media only screen
and (max-width: 1080px) and (min-width: 781px){
nav[role="custom-dropdown"] .nav>li:last-child>ul{
	left: -110px;	
}
}
@media only screen
and (max-width: 900px) and (min-width: 676px){
nav[role="custom-dropdown"] .nav>li:last-child>ul{
	left: -130px;	
}
}

@media (max-width: 900px) {
.topnav_outer {
	width: 56%;
}
.topic_box_disappearing_shadow {
	box-shadow: none;
	padding: 0px 5px;
}
.topic_tile_image {
	padding: 5px;
}
#img_ssb{
	width: 17%
}
  .fasterbox{
	height: 5em; 
  }
.header_name_box {
	width: 40%;
}

}

@media (max-width: 840px) {
.topnav_outer {
	/*float: right;*/ 
	width: 58%;
	margin-top: 10px;/*border: solid 1px blue;*/
}
.nav {
	margin-left: 0px;/*width: 110%;	*/
}
.header_name_box {
	/*max-width: 300px;
	width: 35%;*/
	width: 37%;
}
.button_box {
	padding: .2em;
}
.button_box p {
	/*font-size: .9em;
	margin-top: 2px;*/
}

	/*	.header_demo_box
	{
		display: none;
	}*/
}

@media (max-width: 780px) {
/*.header_name_box{
		max-width: 300px;
		width: 40%;
	} */
.button_box p {
	/*font-size: .9em;*/
}
nav[role="custom-dropdown"] .nav a{
	font-size: .9em;	
}
#img_ssb{
	width: 18%
}
.button_box{
	padding: .2em .1em;
	width: 44%;
	/*margin-top: 7px;*/
}
}

@media (max-width: 695px) {
/*body {
	font-size: 15px;
}*/
nav[role="custom-dropdown"] .nav a{
	/*font-size: .85em;*/	
}
.button_box p {
	/*font-size: .8em;*/
}
}

/* was @media (max-width: 595px)  */
/* For 640 Resolution   (mobile preferred)
@media only screen and (min-device-width : 360px) and (max-device-width : 640px)
@media (max-width: 640px) {*/
@media (max-width: 675px) {
body {
	font-size: 16px;
}
.home_banner {
	margin-top: 0px;
}
.right_nav {
	margin-top: 0px;
	margin-bottom: 0;
	/*padding: 0;*/
}
.topic_box{
	padding: 0 .7em 0 1em;	
}
.big_box {
	display: none;
}
.mid_box {
	display: block;
	float: right;
	width: 58%;
	margin-top: 12px;
	margin-bottom: 6px;
}
.topnav_outer {
	float: left;
	margin-left: 15px;
	width: 100%;
	margin-top: 0;
}
.button_box {
	width: 100%;
	float: none;
	padding-top: .2em;
	padding-bottom: .2em;
}
.button_box:first-child{
	margin: 0 auto;
}
nav[role="custom-dropdown"] .nav {
	margin-top: 0;
}
nav[role="custom-dropdown"] .nav a {
	padding: .3em 0;
	font-size: 1em;
}
nav[role="custom-dropdown"] .nav ul {
	margin-top: 2px;
	background: #555;
}
nav[role="custom-dropdown"] .nav ul li {
	margin: 3px 0;
	background: #555;
}
nav[role="custom-dropdown"] .nav ul li:first-child {
	margin-top: 1px;
}
nav[role="custom-dropdown"] .nav > li > a {
    padding: .3em 0 0;
}
nav[role="custom-dropdown"] .nav > li li>a {
	background: #EDECD9;
	padding: .6em .2em;
}
#purchase_box {
	display: none;
}
.inset-img, .img_float_left, .img_right, .topic_image_right {
	display: none;
}
#superfast_img{
	width: 25%;	
}
.emphasis_box{
	margin-left: 0;	
}
ul.emphasis_box{
	padding-left: 40px;		
}
}

@media (max-width: 640px) {
.breadcrumb_box
{
	display: none;
}

.footer_copyright
{
	padding: 6px 0px 0px 6px;
	font-size: 10px;
	float: none;
}
}

@media (max-width: 595px) {
nav[role="custom-dropdown"] .nav a {
	padding: .2em;	
}
.mid_box {
	width: 56%;
}
.topic_disktype_box{
	margin-left: 0;
	font-size: .9em;	
}
.breadcrumb_box
{
	display: none;
}

.footer_copyright
{
	padding: 6px 0px 0px 6px;
	font-size: 10px;
	float: none;
}
.exclamation_bg{
	background-size: 45px auto;
	padding: 8px 0 0 5px;	
}

}

/* for 420 res and below mobile; extra query for iphone 4 landscape: (max-width: 320px) and (device-height: 480px) */

@media 	(max-width: 420px) and  (orientation: portrait)
		
{
html{
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}
body {
	/*font-size: 28px;*/
	font-size: 25px;
	/*max-width: 480px;*/
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.header_box_bottom{
	margin-bottom: 6px;	
}
h1{
	font-size: 1em;
}
.lead_text{
	font-size: .85em;	
}
.topnav_outer {
	margin-left: 0;
	margin-top: -6px;
}
.button_box {
	Max-width: 225px;
}
.right_nav{
	width: 34%;	
}
.right_navbox > a {
	font-size: 24px;
}
.right_nav_title{
	display: none;
}
.faq_right_nav{
	display: none;	
}
.header_name_box {
	width: 60%;
	margin-bottom: 0;
}
.button_box {
	display: none;
}
.home_banner {
	margin-top: -60px;
}
.break_for_smallscreen {
	display: block;
	clear: both;
}
.big_ctr_sm_left{   /* class to center divs for fullsize screens and justify left for small*/
	text-align: left;
	margin: 0;	
}
.expanding_text_box > label {
	font-size: 1.2em;
	left: -6px;
}
.navhide {
	display: block;
	visibility: hidden;
}
nav[role="custom-dropdown"] .nav {
	display: none;
	height: 100%;
}
nav[role="custom-dropdown"] label {
	position: relative;
	display: block;
	width: 100%;
	min-height: 2.25em;
	font-size: 1.1em;
	padding: 0;
	margin: 0;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
}
nav[role="custom-dropdown"] label:after {
	position: absolute;
	right: .2em;
	right: 4%;
	top: -116px;
	content: "\2261";
	font-size: 3.4em;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {
	color: #222;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav {
	display: block;
	width: 100%;
	padding: 0;
	margin: 3px 0;
	position: absolute;
	top: 0px;
	right: -5px;
	z-index: 10;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav a {
	background: #EDECD9;
	margin: 5px 4px 6px 4px;
	font-size: 36px;
	line-height: 40px;
	padding: 16px 8px 16px 0;	
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav a:hover {
	color: #EDECD9;
	background: #042677;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav > li {
	width: 80%;
	background: #555;
	text-align: right;
	margin: -7px 0 0 15%;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav > li li {
	position: relative;
}
/* level 2 list */
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav ul {
	background: #555;
	text-align: right;
	margin: 3px 0 10px -15px;
	padding: 0 0 2px;
	top: 2px;
	left: -24%;
	width: 85%;
	border: solid 1px #b4b4b4;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	z-index: 1;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .nav .level3 {
	position: absolute;
	left: 70% ;
	width: 90%;
	padding: 0 0 2px;
	text-align: left;
}
nav[role="custom-dropdown"] input[type=checkbox]:checked ~ .level3 a {
	margin: 5px 6px;
}
#purchase{
	margin-left: 4px;	
}
.topic_box{
	width: 95%;
	width: 99.8%;
	margin: -5px 0 0;
	padding-left: 12px;
    padding-right: 6px;
}
  .topic_text_box{
	  margin-left:0;
  }
.expanding_text_box {
	margin-top: 35px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 48px;
}
.expanding_text_box > .topic_text {
	margin-bottom: 5px;
}
.expand_img_float_left>section img {
	float: none;
	/*max-width: 130px;*/
	width: 100%;
	height: auto
}
.expand_img_div{
	float: none; 
	width: 95%;
}
.topic_text_box p {
	font-size: 1em;
}
.topics>hr {
	visibility: hidden;
}
.topic_disktype_box{
    margin: 0 auto;
    float: none;
    width: 95%;
	margin-left: 10px;	
}
.topic_disktype_box_b{
	float: none;
	width: 95%;
	margin-left: 10px;	
}
.topic_info_box_a{
	width: 40%;
}
.topic_info_box_b{
	width: 59%;
}
.topic_info_box {
    width: 50%;
    white-space: nowrap;
	font-size: .7em;
}
.inset-img, .img_float_left, .img_right, .topic_image_right {
	display: none;
}
#superfast_img{
	float: none;	
	margin-left: 2em;
	margin-top: .8em;
}
.topic_6_icon_box {
	width: 31%;
}
.inset_p{
	margin-left: 1.5em;	
}
#lite_vs_full_levels{
	width: 100%; 
	margin: 1em 0 1em 0; 
	text-align:left; 	
}
.liteVsFull_compare{
	bottom: 5.5%; 
	border-radius: 5px;
}
#lite_vs_full_levels p{
	font-size: .6em; 	
}
.inset_p{
	margin-left: 1em;	
}
.inset_1{
	margin-left: .4em;	
}
.inset_2{
	margin-left: .1em;	
}
.hide_when_small{
	display: none;	
}
.hide_when_large{
	display: block;	
}
.right_large_center_small, .left_large_center_small{
	float: none;
	width: 95%;
	height: auto;
	/*overflow: auto;	*/
	margin: 8px auto;
}
.support h3{
	padding-left: 10px ;
}
.support>.topic_box>.topic_text_box>p,
.support>.topic_box>.topic_text_box>.topic_text>p,
.support>.topic_box>.topic_text_box>.info_box_text>p,
.expanding_text_box>.expand>section>p,
.expanding_text_box>.expand>section>.info_box_text>p{
	display: block ;
	width: 95% ;
	margin-left: 20px ;
}
.expanding_text_box>.expand>section>h4{
	margin-left: 15px ;
}
ol li{
	font-size:1.1em;
	line-height: 1.41em;
	
}
li li, li p, td p, blockquote p {
	font-size:1.1em;
	line-height: 1.41em;
	
}
.download_button{
    padding: 3px;
}
.download_button p{
	font-size: 18px;
	
}
}
