﻿/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	*/
	@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600");

/* #Site Styles
================================================== */
 	body {
		background:#dedede; /*#348c26;*/	
	}

.container {
	background: #fff;
	padding: 0 5px;
	/*min-width: 1100px !important;*/
}
	}

	.main {
		min-height: 550px;
		margin: 10px;	
		}
	
	#logo {
		margin:5px 0 5px 0;
	}
	
	h1, h2, h3, h4, h5, h6 {
		color: #181818;
		font-family: 'Open Sans', sans-serif;
		font-weight: normal; 
		text-shadow: 0 0 1px rgba(51,51,51,0.5);
	}
	
	h2
	{
	background-color:#222222;
	width:auto;
	color:White;
	font-size:18px;
	padding:4px 4px 4px 9px;
	margin-top:0px;
	margin-bottom:0px;
	}
	
	h2 img  
	{
	    float:right;
	    padding:7px 9px 4px 4px;
	    height:28px;    
	}
	
	#topNav {
		float:right;
		font-size:.95em;	
	}
	
	/*ul.tabs {
		border-bottom:0px; 
	}*/
	
	ul.tabs, ul.tabs li a {
			border-color:#bcbcbc;
			font-family: 'Open Sans', sans-serif;
			font-size: 16px;
			font-weight:normal;
			text-shadow: 0 0 1px rgba(51,51,51,0.5);
	}
	
	ul.tabs li a {
			background:#e4e4e4;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#ccc));
            background-image: -webkit-linear-gradient(top, #e4e4e4, #ccc);
            background-image: -moz-linear-gradient(top, #e4e4e4, #ccc);
            background-image: -ms-linear-gradient(top, #e4e4e4, #ccc);
            background-image: -o-linear-gradient(top, #e4e4e4, #ccc);
            background-image: linear-gradient(to bottom, #e4e4e4, #ccc); 
	}
	
	ul.tabs li a img {
			padding-right:5px;
			margin-bottom:-5px;
	}
	
	.calendarIcon 
	{
	    margin-bottom:-3px;    
	}
	
	/*  Set highlight color, vivid green  */
	::-moz-selection {background: #84c322; color: #fff;}
	::selection {background: #84c322; color: #fff;}


/* #Page Styles
================================================== */
table.sectionsTable {
	font-size: 13px;
	border: 1px solid #666;
	padding: 5px;
	background-color: #FFF;
}

#exportSpan { float:right; }

.required {
	color: black;
}

.sectionsTable th{
	font-size: 16px; 
	line-height: 24px;
	color: #181818;
	font-family: 'Open Sans', sans-serif;
	padding: 5px;
	background:#B6B6B6 url(../images/bkgd10.jpg) repeat-x;
	border-bottom: 1px solid #333;
	text-shadow: 0 0 1px rgba(51,51,51,0.5);
}

.sectionsTable td{
	padding: 3px 20px 3px 5px;
	background-color: #F0F0F0;
	border:1px solid #fff;
	vertical-align: middle;	
}

.examRow td {
	background-color: #E2E2E2;
	vertical-align: middle;	
}

#testInstructions{
	background-color: #E2E2E2;
}

.courseType {
	padding: 2px 5px 2px 18px;
	background:#E2E2E2;
}

h5.courseTypeHeader {
			font-size:16px;
			text-shadow: 0 0 1px rgba(51,51,51,0.5);
	}

.error {
	border: 1px solid #ddd;
	margin-top: 3px;
	padding: 4px 10px 4px 4px;
	background-position: 6px 6px;
	background-color: #f0f0f0;
	line-height:24px;
}

.error-msg {
	border: 1px solid #ddd;
	margin-top: 3px;
	padding: 4px 10px 4px 4px;
	background-position: 6px 6px;
	background-color: #FADEE9;
	line-height:24px;
	color:Red;
	
}


.error img {
	margin: 0px 5px -3px 10px;
}

.error.on {
	border: 2px solid #F00;
}

.error.fail {
	/*Used on My Account Page*/
	text-align: center;
	width: 90%;
	border: 2px solid #F00;
}

.error.success {
	/*Used on My Account Page*/
	text-align: center;
	width: 90%;
	border: 2px solid #84c322;
}

label {
	cursor:pointer;
    display: inline;
	font-weight:normal; 
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}

.progressbar{
    width:100px;
    height:20px;
    padding:0px;
    background:#cfcfcf;
    border-width:1px;
    border-style:solid;
    border-color: #aaa #bbb #fff #bbb;    
    box-shadow:inset 0px 2px 3px #bbb;
	float:left; 
	margin:7px auto 0px 3px; 
}

.progressbar,
.progressbar-inner{
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -o-border-radius:4px;
}

.progressbar-inner{
    width:77%; /* Change to actual percentage */
    height:100%;
    background:#999;
    background-size:18px 18px;
    background-color: #84c322;   
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
	font-size:12px;
	color:#333;
}

#trainingContainer {
	float:left;
	width:85%;
	vertical-align: middle;	
}

#trainingContainer img, .reqoptIcons {
	display:inline;
	margin-bottom:-4px;
}

#classList {
	margin:4px;
	border-bottom:1px solid #e4e4e4;	
}

#certList {
	margin:4px;
	border-bottom:1px solid #e4e4e4;
	vertical-align: middle;	
}

.sixteen.columns.footer {
	margin: 0 0 0 -5px;
	height: 20px;
	border-top: 1px solid #ccc;
	padding:10px 15px 10px 15px;
	font-size: 12px;
	text-align: center;
	background-color: #dedede;
}

.footer 
{
	margin: 0 0 0 -5px;
	height: 20px;
	border-top: 1px solid #ccc;
	padding:10px 15px 10px 15px;
	font-size: 12px;
	text-align: center;
	background-color: #dedede;
}

.myAccount{
	border: 3px solid #ddd;
	background-color: #f0f0f0;
	padding:10px 0 0 20px;
	float:left;
	width:30%;
	min-width: 250px;
	margin:0 40px 10px 0;
	}

.accessCodesPopup {
	border: 1px solid #ddd;
	padding:8px;
	background-color: #f0f0f0;
	line-height:24px;
	width:280px;
	height:210px;
	overflow:auto;
}

.emailPopup {
	border: 1px solid #ddd;
	padding:8px;
	background-color: #f0f0f0;
	line-height:16px;
	width:380px;
	height:345px;
}

#confmessage
{
	position: absolute;
	top:50%;
	left:45%;
	z-index: 1000;
	opacity:0.9;
	filter:alpha(opacity=90); /* For IE8 and earlier */
	width:350px;height:25px;
	font-size:17px;
	color:#666;
	font-weight:bold;
	text-align:center;
	padding:10px 10px 10px 10px;
	display: none;
	-moz-border-radius: 5px;
	border-radius: 7px;
}

.conf_success
{
	border:2px solid green;
	/*background-color:#C3F5A2;*/
	background: url('../images/success.png') left no-repeat #DEF7D7;
	background-position:8px 6px;
}

.conf_failure
{
	border:2px solid red;
	/*background-color:#F5A2BB;*/
	background: url('../images/error.png') left no-repeat #F5A2BB;
	background-position:8px 6px;
}

/*ReselleddompanyOrg Selector USER CONTROL styles*/
.ddoSelector
{
    font-size: 14px;
    line-height: 19px;
    border-collapse: collapse;
    border-spacing: 0;
    float:left;
    min-width:33%;
    margin-right:5px;
}

.ddoSelector tr
{
    display: table-row;
    vertical-align: inherit;
}

.ddoSelector tr td
{
    margin: 0;
    padding: 0.4em;
    border-bottom: 3px solid rgba(0,0,0,0.1);
}

.ddoSelector tr td:first-child 
{
    background: #efefef;    
}

.ddoSelector.right
{
    float: right;
    margin-right:40px;
}

.ddoSelector td table, .ddoSelector td table tr, .ddoSelector td table td, .ddoSelector td table td:first-child
{
    /*dont show border in child tables created by .NET*/
    padding:0;
    border:none;    
    margin:0;
    background-color:inherit;
}

.CenterTable {
	margin: 0 auto;
}

/*END ReselleddompanyOrg Selector USER CONTROL styles*/

.validate { color: #D8000C; }

/*Div Borders*/
.borders {
	border-color: lightgray;
	border-width: 1px;
	padding: 10px;
	border-style: solid;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.sixteen.columns.footer {
			height: auto;
			margin: 0px 0px 0px -5px;
			padding: 10px 15px 10px 15px;
		}
	    .ddoSelector.right
        {
            float: none;
        }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#lessonMenu{
			background: none;
		}
		.progressbar {
			display:none;
		}
		#trainingContainer {
			width:100%;	
		}
		textarea {
			width: 210px;
		}
		.main {
			margin:0px;	
		}
		.sixteen.columns.footer {
			margin: 5px 0 0 -5px;
			height: auto;
			padding: 5px;
		}
	}


	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}