@import url("https://fonts.googleapis.com/css?family=Kalam|Open+Sans:400,400i,700,700i");
/*@import url("https://fonts.googleapis.com/css?family=Kalam|Catamaran|Lato|Open+Sans:300,400,400i,600,700,800");*/

html {
	height: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/*-webkit-text-size-adjust: none;
	text-size-adjust: none;*/
}
*, *:before, *:after {
  	box-sizing: inherit;
	-moz-box-sizing: inherit;
	-webkit-box-sizing: inherit;
}
body {
	height: 100%;
	/*background-color: #dddddd;*/
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans', Helvetica, sans-serif;
	font-size: 16px;
	/*letter-spacing: .02em;*/
}
/*	======================================================================
	Text elements
======================================================================== */
h1 {
	font-weight: bold;
	font-size: 1.2em;
	color: #042677;
	color: rgb(0, 29, 149);
	text-transform: uppercase;
	margin: 10px 0;
}
h1 a:hover {
	text-decoration: none;
	color: rgb(145, 16, 30);
}
h2 {
	font-weight: bold;
	font-size: 1.1em;
	color: rgb(0, 29, 149);
	text-align: left;
	margin: 5px 0;
}
h2 a:hover {
	text-decoration: none;
	color: rgb(145, 16, 30);
}
h3 {
	margin: 5px 0 ;
	font-size: 1.1em;
	line-height: 1.3em;
}
h3 a:hover {
	text-decoration: none;
	color: rgb(0, 29, 149);
}
h4 {
	font-weight: bold;
	font-size: 1em;
	color: #000;
	text-align: left;
	margin: .4em 0 .2em 0;
	line-height: 1em;
}
.h4_blue {
	color: rgb(0, 29, 149);
	margin-bottom: 0;
}
h5{
	margin: 5px 0 ;
	font-size: 1.1em;
	line-height: 1.3em;
}
h5 a:hover {
	text-decoration: none;
	color: rgb(0, 29, 149);
}
p {
	margin: .5em 0 0;
	font-size: .9em;
	line-height: 1.55em;
	-webkit-margin-before: .5em;
    -webkit-margin-after: .5em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
/*	====================================================================================
	List Elements
	==================================================================================== */
ul, ol {
	font-size: .9em;	
	line-height: 1.4em;
}
ul>li{
	padding-bottom: 5px;	
}
ul>li:last-child{
	padding-bottom: 0;	
}
ol>li{
	padding-bottom: 5px;	
}
ol>li>p{
	padding-bottom: 0px;
	margin-bottom: 5px;	
	margin-top: 0;	
}
ul>li li{
	padding-bottom: 3px;	
}
 ol ul, ul ul{
	list-style-type: disc;
 }

/*	====================================================================================
	General useful classes
	==================================================================================== */
hr {
	border-top: 2px #333 solid;
	width: 100%
}
sup, sub {
	font-size: .7em;
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  font-weight: normal;
}
sub { 
  top: 0.4em; 
}
.hide_overflow{
	width: auto;
	overflow: hide;	
}
.stretch_container_div{
	height: auto;
	overflow: auto;	
}
.inset_p{
	margin-left: 48px;	/* 3em */
}
.inset_1{
	margin-left: 16px;	/* 1em */
}
.inset_2{
	margin-left: 32px;	/* 2em */
}
.clearfloat{
	clear: both;	
	height: 0.001px;
}
.hide_overflow{
	overflow:hidden;
}
.em_vert_margin{
	margin-top: 1em;	
	margin-bottom: 1em;
}
.blue{
	color: rgb(0, 29, 149);
}
.centertext{
	text-align: center;	
}
.top-space{
	margin-top: 1em;	
}
.thin_spacer, .med_spacer{
	display: block;
	font-size: 1px; 
	line-height: 0px; 
	margin: 0; 
	padding: 0;	
}
.med_spacer{
	line-height: 13px; 
	font-size: 50px; 
}
.mspacer{
	display: block;
	height: 17.6px;
}
.nspacer{
	display: block;
	height: 8px;
}
.lspacer{
	display: block;
	height: 4px;

}
/* use flexbox container on parent to achieve vertical centering on children*/
.flexbox_container {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-align: center;
	-webkit-align-items: center;
	-webkit-box-align: center;

	align-items: center;
}
.small_text{
	font-size: 0.8em;
	line-height: 1.4em;
	display: inline-block;
	max-width: 850px;
}
.lead_text{
	font-size: 1.1em;	
}
.big_ctr_sm_left{   /* class to center divs for fullsize screens and justify left for small*/
	text-align: center;	
	margin: 0 auto;
}
.hide_when_large{
	display: none;	
}
.right_large_center_small{
	float: right;
	width: 50%;
	height: auto;
	text-align:center;
	/*overflow: auto;*/	
}
.left_large_center_small{
	float: left;
	width: 50%;
	height: auto;
	text-align:left;
}

/*	====================================================================================
	Default behavior for all links:
	==================================================================================== */
a:link, a:visited {
	color: #0F2BA4;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	color: #00156E;
}
.small-link {
	font-size: .8em;
}
/*	=====================================================================
	Support for the breadcrumb box.
	================================================================== */
.breadcrumb_box {
	width: 75%;
	padding-bottom: 2px;
	margin-top: -5px;
	margin-left: 20px;
	overflow: hidden;
}
.breadcrumbs {
	font-size: 10px;
	white-space: nowrap;
	color: #666666;
}
a.breadcrumbs:link, a.breadcrumbs:visited {
	text-decoration: none;
	color: #666666;
}
a.breadcrumbs:hover {
	text-decoration: underline;
}
a.breadcrumbs:active {
	color: black;
}
/*	======================================================================
	Right Nav elements
======================================================================== */
.right_nav {
	width: 24%;
	float: right;
	margin: -6px 0 15px 15px;/*border-left: 1px solid black;*/	
	z-index: 2;
	position: relative;
	background: #fff;
	padding: 0 0 6px 6px;
}
.faq_right_nav{
	margin-top: -7px;	
}
.right_navbox {
	/*padding: 5px 10px;*/
	background: #c6d1c7; /* #D5D38F;C4C283*/
	text-align: right;
/*	z-index: 2;
	position: relative;*/
}
.right_navbox a, .right_navbox h3 {
	display: block;
	font-weight: bold;
	font-size: 0.9em;
	margin-top: 6px;
	padding: 8px 10px;
	color: #081945;
}
.right_navbox p{
	font-weight: normal;
	padding-right: 10px;
	line-height: 1.8em;	
}
.right_nav_title{
	text-align: right; 
	padding-right: .8em;	
}
/*	======================================================================
	Page elements
======================================================================== */
.page_box {
	position: relative;
	margin: 0px;
	padding: 0px 0px 1px 0px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1290px;
	min-height: 95%;
	background-color: white;
}
.header_border {
	border-top: 3px solid #AC1903;
	margin-top: 0;
}
.header_base {
	border-top: 5px solid #C6D1C7;
	margin-top: -5px;
}
.header_box_top {
	width: 100%;
	min-height: 82px;
	background: #f5f4d4;
}
.home_banner {
	max-width: 1290px;
	width: 100%;
	height: auto;
	margin-top: -.3em;
}
.header_name_box {
	max-width: 360px;
	margin: 10px 0 0 15px;
	width: 44%;
	height: auto;
	float: left;/*border: solid 1px green;*/
}
.topnav_box{
	/*margin-bottom: -.2em;
	margin-top: .2em;*/
}	
.topnav_outer {
	float: right;
	width: 54%;
	margin-top: 10px;
	/*margin-bottom: -.4em;
	border: solid 1px blue;*/
}
.header_button_box {
/*border: 1px solid red;*/
}
.mid_box {
	display: none;
}
.big_box {
	display: block;
}
.button_box {
	width: 46%;
	max-width: 265px;
	float: left;
	background: #890315;
	color: #dcdfb3;
	text-align: center;
	padding: .2em .3em;
}
.button_box:first-child {
	margin-right: 1em;
	/*margin-bottom: 5px;*/
	margin-bottom: .25em;
}
.button_box p {
	margin: .025em 0;
	font-size: 1.0em;
	font-weight: bold;
}
.emphasis_box {
	display: block;
	border: 1px solid #ababab;
	padding: .6em .8em;
	margin: .6em 0;
	background: #F1F2F5;
	background: #ECECEC;
}
ul.emphasis_box{
	padding-left: 30px;		
}
/*	=======================================================================
	Top Navigation
	=================================================================== */
/*	=================================
	ADVANCED CHECKBOX HACK
	================================== */
nav input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
nav > label {
	display: none;
	cursor: pointer;
	user-select: none;
}
.navhide {
	display: none;
}
/* background for li / select */
/* custom-dropdown */
nav[role="custom-dropdown"] {
	position: relative;
	width: 100%;
}
/*	=======================================================================
		END ADVANCED CHECKBOX HACK
	=================================================================== */
nav[role="custom-dropdown"] li li {
	font-size: 1em;
}
nav[role="custom-dropdown"] .nav {
	width: 100%;
	max-width: 600px;
	margin: 6px 0 0 -4% ;
    padding: 0;
	line-height: 100%;
	/*border: 1px solid green;*/
}
nav[role="custom-dropdown"] .nav > ul{
	list-style-type: none;
  	margin: 0;
  	padding: 0;
}
nav[role="custom-dropdown"] .nav li {
	padding: 0 0 .35em;
	position: relative;
	list-style: none;
	text-align: center;
}
/* top level only*/
nav[role="custom-dropdown"] .nav > li {
	text-align: center;
	display: block; 
	width: 16.6%; 
	padding: 0 0 5px 0;
	margin-bottom: -5px;
	float: left;
	/*border: 1px solid red;*/
}
nav[role="custom-dropdown"] .nav a {
	color: #000;
	text-decoration: none;
	padding: .2em;
	font-size: .95em;
	display: block;
}
/* top level link only*/
nav[role="custom-dropdown"] .nav > li > a {
	font-weight: bold;
	padding: .2em .2em 0 .2em;
	padding: 0 0 .3em; /* need to keep bottom padding so drop down menus can be accessed*/
	/*border: 1px solid blue;*/
}
/*	Currently selected main level menu item has a different background color */
nav[role="custom-dropdown"] li.current > a {
	color: #000;
	text-decoration: underline;
}
nav[role="custom-dropdown"] .nav a:hover {
	background: #042677;
	color: #dcdfb3; /*#383838*/
	transition-duration: 0.1s;
	transition-timing-function: ease-out;
}
/* level 2 list */
nav[role="custom-dropdown"] .nav ul {
	background: #e0e0e0;
	background: #EDECD9;
	display: none;
	margin: 0;
	padding: 3px;
	width: 210px;
	position: absolute;
	z-index: 3;
	top: 20px;
	left: -50px;
	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);
}
nav[role="custom-dropdown"] nav ul li {
	padding-right: 0px;
}
/* level 3 list */
nav[role="custom-dropdown"] .nav ul ul {
	left: -218px;
	top: -3px;
	width: 218px;
	text-align: right;
}
/* dropdown */
nav[role="custom-dropdown"] .nav li:hover > ul {
	display: block;
}
nav[role="custom-dropdown"] .nav ul li {
	float: none;
	margin: 0;
	padding: 0;
	box-shadow: 0px 0px 0px black;
	-webkit-box-shadow: 0 0px 0px black;
	-moz-box-shadow: 0px 0px 0px black;
}
/* clearfix */
nav[role="custom-dropdown"] .nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
nav[role="custom-dropdown"] .nav {
	display: inline-block;
}
html[xmlns] .nav {
	display: block;
}
* html .nav {   /* ???? WHAT IS THIS */
	height: 1%;
}
#purchase{
	margin-left: -.9em;	
}
/* end styles for menus */


/*	============================================================================
	EXPANDABLE SECTIONS
============================================================================ */

.expanding_text_box input {
	display: inline-block;
    visibility: hidden;
}
.expanding_text_box > label {
	display: inline-block;
	text-align: right;
	/*color: #021E95;*/
	color: #2364B9;
	position: absolute;
	left: -40px;
	bottom: -15px;
	font-size: .8.5em;
	padding: 16px 0;
}
.expanding_text_box > label {
	left: -40px;
	bottom: -9px;
}
.expanding_text_box > label:hover {
	color: #000;
}
.expanding_text_box > label::after {
	content: "more...";
	display: block;
	width: 100px;
	height: 20px;
	margin-right: 3px;
}
.expanding_text_box > label:after {
	text-decoration:underline
}
.expand {
	height: 0px;
	overflow: hidden;
	transition: height 0.5s;
	/*display: none;*/
}
.expand>section {
	margin-top: 15px;
	width: auto;
}
.expand_img_float_left > section img {
	float: left;
	max-width: 130px;
	width: 100%;
	height: auto
}
.expand_img_div{
	float: left; 
	width: 20%;
	margin-top: 15px;
}
/*	============================================================================
	Toggle ids
============================================================================ */

#toggle_certify:checked ~ .expand, 
#toggle_fail:checked ~ .expand, 
#toggle_workon:checked ~ .expand, 
#toggle_safe:checked ~ .expand, 
#toggle_fast:checked ~ .expand, 
#toggle_both:checked ~ .expand, 
#toggle_HRvsSR:checked ~ .expand {
	height: auto;
	margin-top: -20px;
	/*display: block;*/
}
#toggle_certify:checked ~ label::after, 
#toggle_fail:checked ~ label::after, 
#toggle_workon:checked ~ label::after, 
#toggle_safe:checked ~ label::after, 
#toggle_fast:checked ~ label::after, 
#toggle_both:checked ~ label::after, 
#toggle_HRvsSR:checked ~ label::after {
	content: "close";
	color: #E0282B;
}
/*	============================================================================
	Topic boxes
============================================================================ */

.subhead {
	color: #021E95;
	font-weight: bold;
	text-transform: uppercase;
}
.topics {
	/*width: 73%;*/
	padding-right: 0px;
	margin-top: -6px;
}
.topic_box {
	/*padding-right: 15px;
	width: 99%;*/
	padding: 0 1.4em;
	margin-top: 1em;
	margin-bottom: 0px;
	position: relative;
}
.yellow-bg{
	background: #FDFCEF; 
	background: #FEFEF5; 
	/*background: #ECECEC; 
	background: transparent; */
	/*border-top: 3px solid #ccc; 
	border-bottom: 3px solid #ccc;*/ 	
	padding-bottom: 20px;
}
.yellow-bg-orig{
	background: #FDFCEF; 
	border-top: 3px solid #ccc; 
	border-bottom: 3px solid #ccc; 	
	padding-bottom: 20px;
}
hr {
	border-color: #ccc;
}
.topic_hr {
	border: thin solid rgba(200,200,200,1.00);
	width: 40%;
	margin: 15px auto 10px 0;
}
.topic_text {
	margin-top: 20px;
	margin-bottom: 4px;
}
/* don't try doing overflow hidden with this or expanding elements won't show*/
.topic_text_box {
	position: relative;  /*need to keep relative so expanding elements show up*/
	margin: 0px 0;
	padding-bottom: 4px;
	bottom: auto;
	left: auto;
	max-width: 980px;
}
.topic_text_box p, #expand p {
	font-size: .9em;
	margin-left: 0;
}
.topic_text_box a, .topic_text_box a:visited {
	color: #021E95;
	color: #2f67ce;
	color: #2364B9;
	border-bottom: .1em solid rgba(0,0,0,.15);
}
.topic_text_box a:hover {
	text-decoration: none;
	color: #004bd4;
	color: #76101D;
	border-bottom: .1em solid rgba(0,0,0,.8);
}
.expanding_text_box {
/*width: 99%;*/
}
.topic_info_box, .topic_info_box_a, .topic_info_box_b, .topic_info_box_d {
	float: left;
	height: auto;
	width: 49.99%;
	border: 1px solid #aaa;
	margin-top: .5em;
	padding: .2em .4em;
	background: #fff;
}
.topic_info_box_a{
	width: 28%;	
}
.topic_info_box_b{
	width: 71%;	
	margin-left: -1px;
}
.topic_info_box_c {
	float: left;
	width: 75%;
	padding: 0 1.4em;
	margin: 0;
	position: relative;
	border: none;
}
.topic_info_box_d{
	width: 49.99%;	
}
.topic_info_box h4 {
	line-height: 1.4em;
	font-size: .9em;
}
.topic_info_box hr {
	width: 9.5em;
	border-width: 1px;
	border-color: #aaa;
	margin: 0;
	padding: 0;
}
.info_box_text {
	clear: both;
	margin-bottom: 2px;
}
.topic_disktype_box, .topic_disktype_box_b, .topic_disktype_box_c {
	float: left;
	padding-bottom: 0;
	margin-bottom: 0;
	margin-left: 3em;
	/*width: 75%;*/
	width: auto; 
	overflow: hidden;
}
.topic_disktype_box_b{
	width: 60%;	
}
.topic_disktype_box_c{
	width: 46%;	
	margin-left: .5em;
	float: left;
}
.topic_disktype_box h3 {
	/*margin: 0;
	margin-bottom: -.2em;*/
	display: block;
	padding: 0;
}
.first_box{
	width: 80%;	
}
.grey-bg{
	background: #ECECEC; 
	padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 12px;
}
.warning {
	color: rgb(145, 16, 30);
}
.title_left {
	margin-left: 30px;
	text-align: left;
}
.volume_label {
	font-weight: bold;
	font-size: 1.4em;
	color: rgba(57,51,70,1);
}
.half_line {
	font-size: 0.5em;
}
.topic_step_title {
	font-weight: bold;
	color: rgb(0, 29, 149);
}
.topic_left_box {
	width: 50%;
	float: left;
}
.topic_right_box {
	width: 50%;
	float: right;
}
.topic_clear_right_left_box {
	clear: both;
}
.topic_table {
	margin-top: 15px;
	margin-bottom: 15px;
	border-collapse: collapse;
	border: 2px solid black;
	color: rgba(57,51,70,1);
}
.topic_table_center {
	margin-left: auto;
	margin-right: auto;
}
.topic_table_cell_border {
	border: 1px solid black;
	padding: 4px;
}
.topic_table_cell_no_border {
	padding: 4px;
}
.topic_table_cell_center {
	text-align: center;
}
.topic_box_shadow {
	box-shadow: 0px 3px 8px 1px rgba(50, 50, 50, 0.6);
}
.topic_box_small_shadow {
	box-shadow: 0px 1px 2px 1px rgba(50, 50, 50, 0.6);
}
a .topic_box_shadow:hover {
	box-shadow: 0px 4px 11px 3px rgba(40, 40, 40, 0.7);
}
.topic_2_column_box {
	margin: 10px 0 0 27px;
	padding: 0px;
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-gap: 10px;
	-moz-column-gap: 10px;
	-webkit-column-gap: 10px;
}
.topic_button_outer_box {
	margin: 20px 20px 30px 20px;
	width: 220px;
	padding: 10px;
	border: 1px solid rgb(150, 150, 150);
	border-top: 1px solid rgb(240, 240, 240);
	border-bottom: 1px solid rgb(120, 120, 120);
	border-radius: 6px;
	box-shadow: 0px 3px 8px 1px rgb(150, 150, 150);
	background-color: rgb(253,202,1);
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.topic_button_inner_box {
	/*margin: 20px 20px 30px 20px;*/
	letter-spacing: -.05em;
	padding: 10px;
	border: 1px solid rgb(150, 150, 150);
	border-top: 1px solid rgb(120, 120, 120);
	border-bottom: 1px solid rgb(240, 240, 240);
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(40, 40, 40, 1);
	-webkit-box-shadow: inset 0 1px 1px rgba(40, 40, 40, 1);
	-moz-box-shadow: inset 0 1px 1px rgba(40, 40, 40, 1);
	text-shadow: 1px 1px 1px rgba(255, 255, 255, .9);
	background-image: linear-gradient(top, rgb(209, 209, 209), rgb(231, 231, 231),  rgb(246, 246, 246), rgb(231, 231, 231), rgb(200, 200, 200), rgb(189, 189, 189));
	background-image: -webkit-linear-gradient(top, rgb(209, 209, 209), rgb(231, 231, 231),  rgb(246, 246, 246), rgb(231, 231, 231), rgb(200, 200, 200), rgb(189, 189, 189));
	background-image: -moz-linear-gradient(top, rgb(209, 209, 209), rgb(231, 231, 231),  rgb(246, 246, 246), rgb(231, 231, 231), rgb(200, 200, 200), rgb(189, 189, 189));
	background-image: -o-linear-gradient(top, rgb(209, 209, 209), rgb(231, 231, 231),  rgb(246, 246, 246), rgb(231, 231, 231), rgb(200, 200, 200), rgb(189, 189, 189));
	color: rgb(0, 0, 209);
	text-align: center;
}
.topic_button_inner_box:hover {
	background-image: linear-gradient(top, rgb(189, 189, 189), rgb(216, 216, 216),  rgb(236, 236, 236), rgb(216, 216, 216), rgb(180, 180, 180), rgb(169, 169, 169));
	background-image: -webkit-linear-gradient(top, rgb(189, 189, 189), rgb(216, 216, 216),  rgb(236, 236, 236), rgb(216, 216, 216), rgb(180, 180, 180), rgb(169, 169, 169));
	background-image: -moz-linear-gradient(top, rgb(189, 189, 189), rgb(216, 216, 216),  rgb(236, 236, 236), rgb(216, 216, 216), rgb(180, 180, 180), rgb(169, 169, 169));
	background-image: -o-linear-gradient(top, rgb(189, 189, 189), rgb(216, 216, 216),  rgb(236, 236, 236), rgb(216, 216, 216), rgb(180, 180, 180), rgb(169, 169, 169));
}
.topic_expanding_box {
	position: absolute;
	width: 15%;
	height: 10%;
	border: 1px solid rgb(150, 150, 150);
	border-top: 1px solid rgb(240, 240, 240);
	border-bottom: 1px solid rgb(120, 120, 120);
	border-radius: 6px;
	box-shadow: 0px 1px 1px 1px rgba(150, 150, 150, 0.6);
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.topic_expanding_box_icon {
	width: 8%;
	height: 12%;
}
.topic_expanding_box_pipe {
	width: 3.5%;
	height: 5%;
}
.topic_expanding_box_1_text_line {
	width: 15%;
	height: 4%;
}
.topic_expanding_box_2_text_lines {
	width: 28.25%;
	height: 7%;
}
.topic_expanding_box_highlight_ring {
	width: 100%;
	height: 100%;
	border: 3px solid rgb(253, 202, 1);
	border-radius: 6px;
}
.topic_expanding_box_highlight_ring:hover {
	width: 100%;
	height: 100%;
	border: 6px solid rgb(253, 202, 1);
	border-radius: 6px;
}
.topic_expanding_box_inner_bezel {
	width: 100%;
	height: 100%;
	border: 1px solid rgb(150, 150, 150);
	border-top: 1px solid rgb(120, 120, 120);
	border-bottom: 1px solid rgb(240, 240, 240);
	box-shadow: inset 0 1px 1px rgba(40, 40, 40, 0.6);
	-webkit-box-shadow: inset 0 1px 1px rgba(40, 40, 40, 1);
	-moz-box-shadow: inset 0 1px 1px rgba(40, 40, 40, 1);
}
.topic_expanding_box:hover {
	width: 225px;
	height: 210px;
	transition-duration: 0.2s;
	transition-delay: 0.1s;
	transition-timing-function: ease-out;
	z-index: 2;
	box-shadow: 0px 3px 8px 1px rgba(150, 150, 150, 0.6);
}
.topic_expanding_content_box {
	font-size: .9em;
	padding: 6px;
	opacity: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(230,230,230, 0.95);
	overflow: hidden;
	text-align: left;
}
.topic_expanding_box_title {
	font-weight: bold;
	color: rgb(145, 16, 30);
	text-align: center;
	padding-bottom: 8px;
}
.topic_expanding_box:hover .topic_expanding_content_box {
	transition-delay: 0.2s;
	transition-property: opacity;
	opacity: 1;
}
.topic_expanding_content_box p {
	margin-bottom: 0.1em;
}
.break_for_smallscreen {
	display: none;
}
.topic_small_text {
	font-size: 0.8em;
}
.topic_small_text_italics {
	font-size: 0.8em;
	font-style: italic;
}
.simple_list {
	margin: 15px 0px 10px 0px;
	padding: 0px;
	list-style-type: none;
}
.overlap_up {
	z-index: 100;
	position: relative;
	top: -35px;
}
/*	============================================================================
	Image and icon boxes
============================================================================ */
.default_img{
	width: 100%;
	height: auto;	
}
.centered_image_box{
	width: 100%;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
.centered_image{
	width: 90%;
	max-width: 750px;
	height: auto;
	margin: 10px auto;		
}
.topic_image_box {
	clear: both;
	margin: 10px auto 15px auto;
	overflow: visible;
	text-align: center;
	position: relative;
	max-width: 980px;
}
.img_box{
	width: 100%;
	margin: .2em auto .2em 9%;
	border: 1px solid #000;	
}
.inline_img{
	width: 50%;
	max-width: 750px;
	height: auto;
	min-width: 250px;	
}
/* warning: inset-img class is hidden on smaller screens */
.inset-img {
	width: 100%;
	height: auto;
	min-width: 70px;
}
.topic_image_right {
	float: right;
	margin: 10px auto 15px auto;
	text-align: center;
	max-width: 280px;
	width: 20%;
	height: auto;
}
.topic_image_right_lg {
	float: right;
	margin-left: 10px;
	text-align: right;
	max-width: 500px;
	width: 48%;
	height: auto;
}
.topic_image_left_lg {
	float: left;
	margin-left: 10px;
	text-align: center;
	max-width: 500px;
	width: 48%;
	height: auto;
}
.topic_image_95pc {
	width: 95%;
	max-width: 700px;
	height: auto;
	margin: 1em auto;
}
.topic_image_75pc {
	width: 75%;
	max-width: 500px;
	height: auto;
	margin: 1em auto;
}
.topic_image {
	max-width: 94%;
	display: inline-block;
	box-sizing: content-box;
}
.topic_screenshot_image {
	max-width: 100%;
	display: inline-block;
}
.topic_tile_image {
	padding: 5px;
}
/* USED????? CHECK... and sort these classes out more logically!
a lot of them are here because they were in the old website. Eventually
they need to be consolidated and pruned as many do similar things */
.img_right {
	text-align: right;
	float: right;
	width: 15%;
	padding-left: 1em;
	margin-right: 10px;
	margin-top: 10px;
}
.img_float_right{
	text-align: center;
	float: right;
	width: 18%;
	margin-left: 1.5em;
	margin-bottom: 1em;	
}
.img_float_left {
	text-align: left;
	float: left;
	width: 18%;
	padding-left: 1em;
}
.threeways_image {
	width: 75%;
	height: auto;
	min-width: 20em;
}
.topic_icon_box {
	margin: 20px 0px 20px 0px;
	overflow: hidden;
}
.topic_1_icon_box {
	margin: 0 auto;
	text-align: center;
}
.topic_3_icon_box {
	width: 33%;
	float: left;
	text-align: center;
}
.topic_4_icon_box {
	width: 25%;
	float: left;
	text-align: center;
}
.topic_5_icon_box {
	width: 20%;
	float: left;
	text-align: center;
}
/* topic_6_icon_box used on home page*/
.topic_6_icon_box {
	width: 16%;
	float: left;
	text-align: center;
}
.topic_6_icon_box img {
	width: 75%;
	height: auto;
	max-width: 120px;
}
#img_ssb{
	text-align: left; 
	float: right;
	width: 15%;
	padding-left: 1em;
	margin-right: 10px;
	margin-top: -4px; 	
}
.instructional_video{
	margin-left: 25px;
	margin-top: 15px;
}
/*	====================================================================================
	quicklinks page
	==================================================================================== */
.appleraid {
	width: 25%;
	height: auto;
	max-width: 150px;
}
#superfast_img{
	float: left;  
	width: 30%; 
	text-align: center;
}
/*	====================================================================================
	 features pages
	==================================================================================== */
.clickable_img_levels{
	width: 80%; 
	margin: 1em auto 1em 7.5%; 
	text-align:center; 	
}
.clickable_img_div{
	max-width: 800px; 
	width: 100%; 
	position: relative;
	margin: 0 auto;
}
.clickable_img_link{
	display: inline-block; 
	width: 26.5%; 
	height: 14%; 
	position: absolute; 
	/*border: 1px solid red;*/
	bottom: 5%; 
	border-radius: 10px;
}
.clickable_img_div a:hover {
	text-decoration: none;
	background: rgba(0,0,0,.2);
}
.fasterbox{
	height: 6em;	
}

/*	====================================================================================
	Support pages
	==================================================================================== */
.yellow_box{
	/*width: 35%;*/ 
	max-width: 274px; 
	height: auto; 
	overflow: auto; 
	background:#FAECB4; 
	padding: 10px 10px; 
	border: 1px solid #555; 
	text-align: center; 
	margin: 15px auto;	
}
.purchase_box{
	width: 35%; 
	float: left;
	max-width: 274px; 
	height: auto; 
	overflow: auto; 
	/*background:#FAECB4; 
	border: 1px solid #555; 
	padding: 10px 10px; */
	text-align: center; 
	margin: 15px auto 10px auto;	
}
.purchase_button{
	width: 78%; 
	max-width: 214px; 
	height: auto; 
	padding: 5px 15px; 
	border: 3px solid #750312; 
	margin: 0 auto; 
	border-radius: 8px; 
	background: #eee;
}
.purchase_button>p{
	color: #000;	
}
.purchase_button:hover, .purchase_button:active{
	background: #ccc;
}
.download_button{
	width: 78%; 
	max-width: 214px; 
	height: auto; 
	padding: 5px 15px; 
	border: 1px solid #000; 
	margin: 0 auto; 
	border-radius: 8px; 
	background: #fff;
}
.download_button:hover, .download_button:active{
	background: #ddd;
}
.support h3, .support h2 {
	margin-top: 15px;
	display: block;
	background: #F8E8B9;
	padding: 2px 5px 4px 5px;
	padding-left: 25px;
	overflow: hidden;
}
.support .emphasis_box h3, .support .emphasis_box h2{
	background: transparent;
	color: #000;	
	margin-top: 2px;
	padding-left: 10px;
}
.support h1 {
	display: block;
	background: #750312;	
	color: #F5F3D4;
	padding: 4px 15px;
}
.support .h3_grey_bg{
	background: #ECECEC;	
}
.support h3.h3_hide_overflow{
	overflow:hidden;
}

/* Have to specify these or text in boxes gets shifted over*/
.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: 85% ;
	margin-left: 25px ;
}
.expanding_text_box>.expand>section>h4{
	margin-left: 25px ;
}
.inset_box{
	width: 85% ;
	margin-left: 25px ;
}
.support ul p{
	margin-left: 0;	
}
.support .topic_info_box>p{
	line-height: 1.5em;
	font-size: .8em;
	margin: 0 0 4px 4px;
	width: 100%;
}
 .support ol h3{
	margin-left: -25px;
 }
.script {
	line-height: 1.2em;	
	font-size: 1.2em !important;
	font-family: "Kalam" !important; 
}
.script li{
	margin-bottom: 2px;	
}
.script li:last-child{
	margin-bottom: 0;	
}
.exclamation_bg{
	padding: 8px 0 0 25px;	
	background-image:url(../images/exclamation.png);
	background-repeat:no-repeat;
	background-size:contain;
}
.exclamation_bg ul, .exclamation_bg h2, .exclamation_bg p{
	margin-left: 2em;
	-webkit-margin-start: 1em;
	-webkit-margin-before: .2em;
    -webkit-margin-after: .6em;
}
	

/*	====================================================================================
	Support for the footer
	==================================================================================== */
.footer_box {
	margin: 20px 25px;
	padding: 6px 20px 10px 0px;
	border-top: 2px solid #aaa;
}
.footer_copyright {
	padding-top: 5px;
	font-size: 10px;
	float: right;
}
.footer_link {
	padding-left: 6px;
	font-size: 12px;
	color: #021E95;
}
a.footer_link:link, a.footer_link:visited {
	text-decoration: none;
	color: #021E95;
}
a.footer_link:hover {
	text-decoration: underline;
}

/*	====================================================================================
	Prevent nested ems from multiplied fractions
	==================================================================================== */
li li, li p, td p, blockquote p {
	font-size:1.1em !important;
	line-height: 1.41em !important;
	
}
ul>li li, ul>li li>p {
	font-size: 1.2em !important;	
	line-height: 1.36em !important;
}
#purchase_notice {
	width: 90%;
	margin-left: 25px;
	margin-top: 15px;
	border: 2px solid #333;
}
#purchase_notice > p{
	font-size: 1.0em;	
}

/*	====================================================================================
	Forum Stuff
	==================================================================================== */
.wrapper > ul.menu {
	font-size:	13px;
	line-height: 18px;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: left;
}
.wrapper > ul.menu > li{
	/*font-size:	.8em;
	line-height: normal;*/
	display: inline;
	list-style-type: none;
	padding: 0;
	margin: 0 7px;
	text-align: left;
}

.wrapper > ul.menu > li > a {
    padding-left: 20px;
    background-image: url(/forum/images/headerlinks_sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 16px;
}
/*	====================================================================================
	Store stuff
	==================================================================================== */
.sr_inset_box{
	margin-left: 90px;	
	width: 80%;
	margin-top: 0px;
}
.sr_prod {
    clear: both;
    margin-top: 15px;
    padding: 5px 0;
}
.sr_icon {
    width: 90px;
    float: left;
}
.sr_icon > img{
	max-width: 70px;
	width: 100%;	
}
.sr_desc {
    width: 200px;
    float: left;
	margin-top: 3px;
}
.sr_price {
    width: auto;
    float: left;
    text-align: center;
    font-size: 120%;
    font-weight: normal;
    color: #750312;
    margin: 8px 10px 0 5px;
}
.sr_price > p, .sr_price > h4 {
	margin-top: 0;	
}
.sr_add {
    width: auto;
    float: left;
    display: inline;
	margin-top: 6px;
    margin-left: 15px;
}
span.sr_qty input {
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    margin-right: 5px;
    color: #750312;
    text-align: center;
    margin: 8px 10px 0 5px;
}
.sr_buybutton input {
    background-color: #750312;
    color: #EDECD9;
    font-size: 14px;
    font-weight: bold;
    line-height: 1em;
    border: 3px solid #750312;
    border-radius: 3px 3px;
    -moz-border-radius: 3px 3px;
    -webkit-border-radius: 3px 3px;
    cursor: pointer;
    padding: 3px 6px;
    vertical-align: middle;
	margin: 8px 0 0 5px;
}
.clear {
    clear: both;
    height: 1px;
}