/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */
 
 
/************************/ 
/******* GLOBAL *********/
/************************/

.table tbody > tr > td.vert-align
{
    vertical-align: middle;
}

.border-dashed {
	border:2px dashed #dddddd;
}

dl.asterisk-definition {
	margin-bottom:10px;
}
	dl.asterisk-definition > dt, dl.asterisk-definition > dd {
		float:left;
	}
	
	dl.asterisk-definition > dt {
		width:20px;
		margin-right:5px;
	}

.well.border-dashed {
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}


/* decrease font size so text fits nicely on one line on small devices */
@media only screen and (max-width: 420px) {

	#ribbon .breadcrumb li {
  		font-size:9px;
  		letter-spacing:-.5px;
  		padding:0;
	}
	
	h1.page-title {
  		font-size:16px;
	}
		h1.page-title span {
			font-size:14px;
		}
		
	.btn-group > .btn {
		font-size:11px;
		padding-left:9px;
		padding-right:9px;
	}
	
	.pagination > li > a {
		font-size:11px;
		padding-left:9px;
		padding-right:9px;
	}
	
}

/*********************************************/ 
/**************** Home Page ******************/
/*********************************************/ 

#login1 #panel1 {
	display:block;
	padding:40px 0;
	background-image: url('../images/splash_page.jpg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	max-height: 800px;
	max-width: 2000px; 
	min-height:350px;
}

	#login1 #panel1 h1 {
		font-size:400%;
		color:#ffffff;
	}
	
	#login1 #panel1 h4.students {
		font-weight:500;
		margin:15px 0 5px;
		color:#0199fe;
	}
	
	#login1 #panel1 .students {
		background-color:transparent;
		color:#ffffff;
		border-color:#ffffff;
	}
	

#login2 #panel1 {
	display:block;
	padding:40px 0;
	background-image: url('../img/splash_page_blue.jpg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	max-height: 800px;
	max-width: 2000px; 
}

	#login2 #panel1 h1 {
		font-size:400%;
		color:#ffffff;
	}

#login3 #panel1 {
	display:block;
	padding:40px 0;
	background-image: url('../img/splash_page_gray.jpg');
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0 auto;
	max-height: 800px;
	max-width: 2000px; 
}

	#login3 #panel1 h1 {
		font-size:400%;
		color:#0199fe;
	}

.welcome-text {
	font-size:130%;
	line-height:1.7;
}

#loginContainer .smart-form fieldset {
	padding: 10px 14px 5px;
}

	#loginContainer h4 {
		margin:10px 14px 0;
	}

#voucherContainer h4 {
	margin:0 0 8px;
}

	#voucherContainer p {
		margin-bottom:20px;
	}

#panel2 {
	padding:30px 0;
	display:block;
}

	#panel2 h4 {
		margin:0 0 8px;
		font-weight:500;
	}

	#panel2 button {
		margin-bottom:20px;
	}
	
	#panel2 .bigIcon {
		padding: 5px 10px;
		margin-bottom:50px;
	}
		

 
/*********************************************/ 
/**************** END Home Page ******************/
/*********************************************/




/*********************************************/ 
/******* Vector Configuration Page *********/
/*********************************************/ 

table.testConfig {
	margin:0;
}

table.testConfig thead tr th {
	padding:3px;
	color:#999999;
	border:0;
	text-align:center;
	font-weight:normal;
	width:auto;
}

table.testConfig tbody tr td {
	border:0;
	text-align:center;
	padding:3px;
}

table.testConfig tbody tr td select {
	min-width:40px;
}


/*********************************************/ 
/******* END Vector Configuration Page *********/
/*********************************************/ 





/*********************************************/ 
/******* Test Center Management Page *********/
/*********************************************/ 

#liveStats {
	display:block;
	width:100%;
	list-style:none;
	margin:0;
	padding:0;
}

	#liveStats li {
		vertical-align:top;
		display:inline-block;
		text-align:left;
		min-height:70px;
		width:16%;
		overflow:visible;
		border-left: 1px dotted #c7c7c7;
		padding:20px 0 5px 7px;
		-webkit-box-sizing:content-box;
		   -moz-box-sizing:content-box;
				box-sizing:content-box;
	}

		#liveStats li:last-child { 
			padding-right: 0;
		}

		#liveStats li:first-child {
			border-left: none;
			padding-left: 10px; 
		}

	#liveStats > li > span.font-xxl {
		text-align:left;
		font-size: 21px;
		line-height:21px;
		font-weight: bold;
		margin-right: 10px;
	}

	#liveStats li h5 {
		color: #555;
		font-size: 8px;
		text-align:left;
		text-transform: uppercase; 
		margin-top:3px;
	}


/* display of Live Stats on small screen */
@media only screen and (min-width: 321px) {

	#liveStats > li > span.font-xxl {
		font-size: 24px;
		line-height:24px;
	}

	#liveStats li h5 {
		font-size: 11px;
	}

}


/* display of Live Stats on medium screen */
@media only screen and (min-width: 700px) {

	#liveStats {
		padding:0 10px 0;
	}

		#liveStats li {
			width:17%;
			padding:20px 10px 10px;
		}

			#liveStats li:first-child {
				padding-left: 0; 
			}

		#liveStats > li > span.font-xxl {
			font-size: 35px;
			line-height:35px;
		}

}



/* display of Live Stats on big screen */
@media only screen and (min-width: 1230px) {

	#liveStats {
		padding:0 10px 0;
	}

		#liveStats li {
			width:18%;
			padding:20px 10px 20px;
		}

			#liveStats li:first-child {
				padding-left: 0; 
			}

		#liveStats > li > span.font-xxl {
			font-size: 50px;
			line-height:50px;
		}

		#liveStats li h5 {
			font-size: 12px;
			margin-top:5px; 
		}

}




/* color table cells of Test Center Management table when the Status column is hidden */
/* this max-width number is the first break-point of the Test Center Management table. This needs a script written so it (background color on footable td) works for the first break point on all sizes of tables. */
@media only screen and (max-width: 1301px) { 

	.footable > tbody > tr > td.footable-visible.statusActive {
		background-color:#e0f5d8;
	}
	.footable > tbody > tr > td.footable-visible.statusStarted {
		background-color:#fee1d7;
	}
	.footable > tbody > tr > td.footable-visible.statusCompleted {
		background-color:#d9effd;
	}
}
		
/*********************************************/ 
/******* END Test Center Management Page *********/
/*********************************************/