@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
*{
	font-family:"open_sanslight";
	-moz-box-sizing: border-box;
	-webkit-sizing: border-box;
	box-sizing: border-box;
	background-color:white;
	font-size:16px;
	
	
	
}

body{
	background-color:whitesmoke;
	margin:auto;
}

.topbar{
	width:100%;
	height:auto;
	background-color:#272424;
	border-top:5px solid green;
	



}

.titlebox{
	width:35%;
	height:auto;
	background-color:transparent;
	color:white;
	font-size:2rem;
	font-family:"arial";
	font-style:bold;
	text-align:left;
	display:inline-block;
	line-height:28px;

	padding: 0.3rem;
	padding-bottom:0.7rem;
	padding-left:2rem;



}


.middlebrand{
	width:45%;
	height:50px;
	color:#373434;
	text-align:center;
	font-family:"Arial";
	font-size:3.0rem;
	display:inline-block;
	vertical-align:top;
	padding-top:1.8rem;
	background-color:transparent;
}

.loginbox{
	width:20%;
	height:50px;
	background-color:transparent;
	color:white;
	font-size:1rem;
	text-align:right;
	display:inline-block;
	vertical-align:top;
	padding:1rem;
	padding-right:2rem;
	display:none;


}
.brand{
	font-size:1.3rem;
	color:gray;
}


.construction{
	width:auto;
	height:auto;
	padding:2rem;
	text-align:center;
	margin:auto;
	border:1px solid #666;
	margin:2rem;
	font-size:3rem;
	vertical-align:top;
	color:gray;


}




.lindseytext{
	font-family:"Times";
	background-color:transparent;
}

.jonestext{
	font-family:"arial";
	background-color:transparent;
	font-weight:bold;
}



.ambertext{
	background-color:transparent;
	word-spacing:5px;
	font-size:0.9rem;
}

.coursetitleCNT{
	width:100%;
	height:auto;
	padding:2rem;
}

.courseicon{
	width:7%;
	height:100%;
	display:inline-block;
}

.coursetitle{
	width:88%;
	height:100%;
	font-size:3rem;
	color:black;
	display:inline-block;
	vertical-align:top;
	padding:2rem;
	padding-top:2rem;
}

.amberhold{
	width:5%;
	height:100%;
	display:inline-block;
	vertical-align:top;
}

.lessonsCNT{
	width:100%;
	height:auto;

	padding-left:12rem;
	padding-right:12rem;
}

.innerlessonsCNT{
	width:100%;
	height:100%;

	
}

.lessonstitle{
	width:100%;
	height:auto;
	
	color:gray;
	word-spacing:5px;
	text-align:center;
	font-size:2rem;
	margin:auto;
}

.lessonplacsCNT{
	width:100%;
	height:auto;
	text-align:center;


}

.placard{
	width:150px;
	height:175px;
	
	display:inline-block;
	margin:2rem;
	vertical-align:top;
	position: relative;
	white-space: nowrap;
}
.placard a{
	display: inline-block;
}
.placard span{
	display: block;
}
.placard .check_complete {
	display: none;
}
.placard .pseudo_check {
	visibility: hidden;
    position: absolute;
    top: 0;
    font-size: 2rem;
    background: none;
    right: 0;
    width: 1.9rem;
    text-align: left;
}
.placard .pseudo_check i {
    background: none;
}
.placard:hover .pseudo_check{
	visibility: visible;
}
/*.placard .check_complete:checked:before{
	background: url("/images/compseal.png");
	height: 100px;
	width: 100px;
	display: inline-block;
	position: absolute;
	right: -1rem;
	bottom: 1rem;
	content: " ";
}*/
.placard .check_complete + .pseudo_check .active {
    display: none;
}
.placard .check_complete + .pseudo_check .inactive {
    display: inline-block;
}
.placard .check_complete:checked + .pseudo_check .active {
    display: inline-block;
}
.placard .check_complete:checked + .pseudo_check .inactive {
    display: none;
}
.complete_img{
	display: none;
	position: absolute;
	right: -1rem;
	bottom: 1rem;
	background: none;
	pointer-events: none;
}
.placard .check_complete:hover + .pseudo_check + .complete_img{
	display: inline-block;
	opacity: 0.4;
}
.placard .check_complete:checked + .pseudo_check + .complete_img{
	display: inline-block;
	opacity: 1;
}

.testplacard{
	width:100%;
	max-width:1380px;
	height:150px;
	
	margin-top:50px;
	background-color:#7e508a;
	font-size:5rem;
	font-family: "arial";
	padding:1.7rem;
	padding-left:0px;
	padding-right:0px;
	color:lightgray;
	border:1px solid lightgray;
	display:inline-block;
	
	


}
.footer{
	width:100%;
	height:auto;
	padding:0.5rem;
	text-align:center;
	color:lightgray;
	background-color:#191919;
	font-size:0.9rem;
	margin-top:3rem;
}




/* Mobile Layout:  min of 480px .  I80erits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (max-width: 800px) {



.middlebrand{
	display:none;
}

.loginbox{
	display:none;

}

.titlebox{
	width:100%;
}

.construction{
	
	padding:1rem;
	
	margin:1rem;
	font-size:1rem;



}

.construction img{
	height:60px;
}

.coursetitleCNT{
	width:100%;
	
	padding:1rem;
}

.courseicon{
	width:20%;

	height:100%;
	
}

.coursetitle{
	width:60%;
	vertical-align:top;
	font-size:1.5rem;

	padding-left:0.5rem;
	padding-top:0rem;

}

.amberhold{
	width:20%;
	height:100%;
	display:inline-block;
	vertical-align:top;
}

.lessonsCNT{


	padding-left:0rem;
	padding-right:0rem;
}


}