﻿@charset "UTF-8";
/* --- WEB SAFE FONTS ---
font-family:Verdana, Geneva, sans-serif;
font-family:Arial, Helvetica, sans-serif;
*/

@font-face {
	font-family: 'Lato-Light';
	src: url('../../fonts/Lato-Light.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Lato-Light.eot?') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/Lato-Light.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight:300;
	font-style: normal;		 
}
@font-face {
	font-family: 'Lato-Regular';
	src: url('../../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Lato-Regular.eot?') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/Lato-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight:400;
	font-style: normal;
}
@font-face {
	font-family: 'Lato-Bold';
	src: url('../../fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Lato-Bold.eot?') format('embedded-opentype'), /* IE6-IE8 */
         url('../../fonts/Lato-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
	font-weight:700;
	font-style: bold;		 
}

.primaryColor1{background-color:#f20516;border-color:#F20516;}
.primaryColor2{background-color:#0076a3;border-color:#0076a3;}
.secondaryColor1{background-color:#f20516;border-color:#f20516;}
.secondaryColor2{background-color:#0076a3;border-color:#0076a3;}

html{
	height:100%;
}
img {
	display:block; /* Required for strict mode */
}

body {
	background:#fff;
	margin:0px;
	padding:0px;
	width:100%;
/*    font-family: 'Lato-Light',Arial, Helvetica, sans-serif;*/
	font-family: 'Lato-Regular',Arial, Helvetica, sans-serif;
	font-size:18px;
	line-height:24px;
	color:#333;
    height: 100%;
}

@media (orientation:landscape) {
    body.ipadiOS7 {
        /* Bug fix for iOS7... applied from course_root.htm */
        position: fixed;
        top: 0px;
        height: 671px !important;
    }
}

SUB, body SUP {
	line-height: 0;
}
a:hover {text-decoration:underline;}
ul ul {
	list-style-type: none;
	padding: 0px;
	margin-left: 25px;
}
ul ul li {
	background-image: url('../../interface/bullet_hyphen.gif');
	background-repeat: no-repeat;
	padding-left: 8px;
}
.seqEd_ul {margin-top:-.5em;} /* Sequence editor bullet spacing */
/*.chapterTitle {
	font-family:Verdana, Geneva, sans-serif;
	font-size:32px;
	color:#21368B; 
	letter-spacing:-1px;
}*/
/*.pageTitle {
	width: 99%;
	font-family:Verdana, Geneva, sans-serif;
	font-size:20px;  
	color:#828282;
	letter-spacing:-1px;
}*/
.subPageTitle {
    height: 25px;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
	/* http://stackoverflow.com/questions/15852122/hex-transparency-in-colors */
	background-color:rgb(0,118,163);
    background: transparent\9;
    background-color: rgba(0,118,163,.80);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc0076a3, endColorstr=#cc0076a3);
    zoom: 1;

    text-align: center;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 100%;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Knowledge Check Styles */
.btn {
/*	padding: 6px 18px 2px 18px; */
	padding:4px 10px 0 10px;
	font-size: 24px;
	font-weight:bold;
	line-height: normal;
    color: #ffffff;
    background-color: #f20516;
/*    font-family: 'Lato-Light',Arial, Helvetica, sans-serif;*/
	font-family: 'Lato-Regular',Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	border:none;
}

.btn:hover {
	background-color: #959595;
	text-decoration: none;
}

.btn:disabled {
	opacity:.25;
}

/* Big red and green buttons used in splash and resume screens */
.button {    
	color: #fff;
    text-decoration: none;
	cursor: pointer;
	font-size:14px;
    display: inline-block;
    padding: 4px 10px;
    -webkit-border-radius: 4px;
	border-radius: 4px;
	width:150px;
}
.green {    
	background-image: -webkit-gradient(linear, left top, left bottom,
        from(#029a02),
        color-stop(0.5, #0f490c),
        color-stop(0.5, #0f490c),
        to(#0a3408));
    border: 1px solid rgba(79, 79, 79, 0.75);
	background-image: -ms-linear-gradient(top, #029a02, #0f490c);
	background-color: #0f490c;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#029a02', endColorstr='#0f490c', GradientType=0);
	float: left;
}
.red {
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(#c10202),
        color-stop(0.5, #960202),
        color-stop(0.5, #830101),
        to(#710202));
    border: 1px solid rgba(79, 79, 79, 0.75);
	background-image: -ms-linear-gradient(top, #960202, #830101);
	background-color: #830101;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#960202', endColorstr='#830101', GradientType=0);
}
/*.orange {
	width:66px;
	height:28px !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f47e00), to(#f26440));
    background-image: linear-gradient(to bottom, #f47e00 0%, #f26440 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47e00', endColorstr='#f26440', GradientType=0);
    border: 1px solid rgba(79, 79, 79, 0.75);
}*/

/*-------------------------------------------
  ----------- HOTSPOTS SECTION --------------*/
/* Color of hotspot background when hovering */
div.hotspot {
    opacity:0.1;
    filter:alpha(opacity=0); /*for ie8*/
    background-color:#ffcc00;
}
/* Checkmark used in all hotspots and required links, buttons, etc. */
div.checkmark{
	position:absolute;
	background:transparent url(../../interface/knowledge_check_sprite.png) no-repeat right -20px;
	/*xbackground:transparent url(../interface/checkmark_small.png) no-repeat; */
	width:20px;
	height:20px;
}
/* This controls the placement of the checkmark relative to regular hotspots */
div.checkmark[id^="cm"]{
	margin: 21px 0px 0px 32px;
}
/* This controls the placement of the checkmark relative to regular buttons */
input+div.checkmark {
    margin:5px 0px 0px -8px;
}
/* This controls the placement of the checkmark relative to regular hyperlinks */
span+div.checkmark, a+div.checkmark {
    margin:0px 0px 0px -30px;
}
li {
    position:relative;
}