/*
	This file has classes needed to style the controls on the web page using CSS3 and
	HTML5. 
	
	If you make any modifications to this file please make sure it all works nice with all browsers.
	In IE you can test older versions by changing the Browser Mode in Developers Tools (F12);	
	
	2/22/2013 Violin
*/

/**** HTML 5 Styles ************************************************/
.panHeader
{
	height: 90px;
}

.headerSchool 
{
	font-size: 1em;
}

.skmsubmenu 
{
	text-align: left;
	cursor: pointer;
	border-collapse: inherit !important;
}

.skmRoot, .skmmenu
{
	cursor: pointer !important;
}

.TextPlain {
	font-size: 1em;
}

hr {
	border-color: #bbbbbb;
	border-top: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	
	box-shadow: 0px 2px 3px rgba(187,187,187,0.5), 0px -1px 1px rgba(255,255,255,0.6);
}

table p {
	margin: 0;
}

.skmStudent a:link, .skmStudent a:visited {
    color: #FFFFFF;
    text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

.skmStudent a:hover {
    color: #e3e3e3;
    text-decoration: none;
	padding-left: 5px;
	padding-right: 5px;
}

.EvalCellQuestion {
	text-align: left;
}

td.OCETextLeftAlign
{
	text-align: left !important;
}
.ocePanel {
	border:1px solid #bbbbbb;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
}
/*******************************************************************/

/**** Menu Bar *****************************************************/
#nav {
    background-image:url("/gfx/menu/nav-gradient.png");
    background-repeat:repeat-x;
}
#navShadow {
    background-image:url("/gfx/menu/nav-shadow.png");
    background-repeat:repeat-x;
    width:100%;
    height:5px;
}
/*******************************************************************/

/**** OCE Print Styles *********************************************/
@media print
{
	.oceTitleBar {
		text-shadow: none !important;
	}
	
	.AspNet-GridView table thead tr th, 
	.AspNet-GridView table tbody tr td.GVHR, 
	.AspNet-GridView table tbody tr.AspNet-GridView-Alternate td.GVHR {
		border: 1px solid black !important;		
	}
	
	.AspNet-GridView {
		border: none !important;
	}
	
	.AspNet-GridView table tbody tr td {
		border-color: black !important;
	}
} 
/*******************************************************************/


/**** Header Design ************************************************/
.oceTitleBar {
	position:relative;
	width: 100%;	
}

.headerLContainer 
{
	
	border-radius: 5px 0 0 5px;
	background-image: url(/gfx/OCETheme/header/leftPanel.png);
	background-position: right top;
	width: 250px;
	min-height: 70px;
	left: 0px;
	padding-left: 5px;
	padding-right: 45px;
	vertical-align: middle;	
}

.headerLContainerColor1 
{
	background-color: #BCD2EE;
	color: #000000;
}

.headerLContainerColor2
{
	background-color: #104E8B;
	color: #FFFFFF;
}

.headerRContainer 
{
	background-color: #CECECE;
	min-height:70px;
	background-image: url(/gfx/OCETheme/header/glossyLines_Narrow.png);
	background-repeat:repeat-x;
	border-radius: 0 5px 5px 0;
	vertical-align: middle;	
}

.MidTitle
{
	font-family: Tahoma, Times New Roman;
	/*font-size: 1.5em !important;
	line-height: 30px;*/
}

.RightTitle
{
	float: right;
	padding-right: 5px;
	height: 20px;
}

.LeftTitle
{
	float: right;
	padding-right: 5px; 
	height: 20px;
}

.EvalCenterTitle {
	font-family: Tahoma, Verdana, Arial, sans-serif;		
	font-size: 2em;    
}

.EvalPage .masterContent 
{
	display: inherit !important;
}
/*******************************************************************/


/**** OCE Tabs Panel ***********************************************/
.mnuTabBody {
	border:1px solid #bbbbbb;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
}

.mnuTabItem {
	border-color: #bbbbbb;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-width: 0px;
	/*background: #c3c3c3;*/
}

.mnuTabItemSelected {
	border-color: #bbbbbb;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-width: 0px;
	background: #FFF;
}

.mnuTabs {
	border-collapse: separate;
}

.mnuTabItem a:hover, .mnuTabItem:hover a:link, .mnuTabItem:hover a:visited{
	color: #000;
}

.prefPanel fieldset {
	text-align: left;
	border:1px solid #bbbbbb;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
}

.prefPanel fieldset table th{
	text-align: center;
}

.prefPanel h2 {
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
}

.oceyellowpanel fieldset {
	text-align: left;
	border:1px solid #bbbbbb;
	background-color: #ffff33;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
}

fieldset {
	text-align: left;
	border:1px solid #bbbbbb;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
}
/*******************************************************************/

/**** OCE Left Panel ***********************************************/
.mnuMainTable{
	border:1px solid #bbbbbb;
	background-color: #fff;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
	border-collapse: collapse;
}

#_ctl0_cphContent_mnuPrefLeftPanel br {
	display: none;
}

.mnuMainTable tr{
	vertical-align:top;
}

.mnuPrefLeftItem {
	border-color: #bbbbbb;
	border: 0px;
	
	height: 50px;
	width: 250px;
}

.prefLeftButton {
	background-repeat: no-repeat;
	background-position: 5px 10px;
	height: 50px;
	width: 250px;
	display: block;
	line-height: 50px;
	text-align: left;
	font-size: 1.2em;
	
	border-bottom:1px solid #bbbbbb;
	background-color: #f1f1f1;
	vertical-align:top
	cursor: pointer;
}

.prefLeftButton:hover {
	font-size: 1.25em;
	text-decoration: none;
	background-color: #e3e3e3;
	background-position: 6px 12px;
	box-shadow: inset 0 10px 10px rgba(255, 255, 255, .5);
	cursor: pointer;
}

.prefLeftButton span{
	padding-left: 35px;
}

.prefLeftEmptySpot {
	
}

.mnuTabBodyPrefNew {
	border:0px solid #bbbbbb;
	background-color: #fff;
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
	vertical-align:top;
}

.mnuTabBodyPrefNew fieldset {
	border-collapse: separate;
}

.mnuPrefLeftItemSelected .prefLeftButton {
	background-color: #e3e3e3;
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
}
/*
.mnuTabItem a:hover, .mnuTabItem:hover a:link, .mnuTabItem:hover a:visited{
	color: #000;
}
*/

.ocePrefIconinfo {
	background-image: url("/gfx/OCETheme/icons/icon9.png");
}
.ocePrefIcondepthead {
	background-image: url("/gfx/OCETheme/icons/icon10.png");
}
.ocePrefIconinstructor {
	background-image: url("/gfx/OCETheme/icons/icon10.png");
}
.ocePrefIconstudent {
	background-image: url("/gfx/OCETheme/icons/icon15.png");
}
.ocePrefIconevaluations {
	background-image: url("/gfx/OCETheme/icons/icon11.png");
}
.ocePrefIconuploads {
	background-image: url("/gfx/OCETheme/icons/icon5.png");
}
.ocePrefIconloginlogout {
	background-image: url("/gfx/OCETheme/icons/icon12.png");
}
.ocePrefIconstyle {
	background-image: url("/gfx/OCETheme/icons/icon13.png");
}
.ocePrefIconreporting {
	background-image: url("/gfx/OCETheme/icons/icon14.png");
}
.ocePrefIconvoip 
{
	background-image: url("/gfx/OCETheme/icons/iconSound.png");
}
.ocePrefIconexttools {
	background-image: url("/gfx/OCETheme/icons/icon16.png");
}
.ocePrefIconNext {
	background-image: url("/gfx/OCETheme/icons/iconArrowForward.png");
}
.ocePrefIconBack {
	background-image: url("/gfx/OCETheme/icons/iconArrowBack.png");
}

/*******************************************************************/


/**** OCE Wait Panel ***********************************************/
#oceWaitOverlay {
	background-color: #e3e3e3;
	background-color: rgba(230,230,230,0.85);
	left: 50%; 
	top: 50%; 
	width: 250px; 
	margin-left: -125px;
	height: 50px; 
	margin-top: -25px; 
	position: absolute; 
	z-index: 99;
	border:1px solid #bbbbbb;
	border-radius:3px;
	box-shadow: inset -1px -1px #FFF, inset 1px 1px #FFF, inset 0px 10px 5px rgba(255,255,255,0.6), 0px 3px 1px rgba(187,187,187,0.6);
}
/*******************************************************************/

/**** OCE CheckBox *************************************************/
/* 
	IMPORTANT:
	By using  
		.ocecheckbox input[type="checkbox"]:enabled , .ocecheckbox input[type="checkbox"]:disabled 
	insted of:
		.ocecheckbox input[type="checkbox"]
	browsers that don't support the css "psuedo-classes" won't hide the control and it will work fine
*/
.ocecheckbox1 input[type="checkbox"]:enabled, .ocecheckbox input[type="checkbox"]:disabled{
    display:none;	
}

.ocecheckbox1 input[type="checkbox"]:enabled + label span, input[type="checkbox"]:disabled + label span  {
	width: 20px;
	height: 20px;
	display: inline-block;
	background:url("/gfx/OCETheme/ocecheckbox.png") left top no-repeat;
	cursor: pointer;
}

.ocecheckbox1 input[type="checkbox"]:checked  + label span {
	background:url("/gfx/OCETheme/ocecheckbox.png") -20px top no-repeat;
	display:inherit;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.ocecheckbox1 input[type="checkbox"]:disabled  + label span {
	background:url("/gfx/OCETheme/ocecheckbox.png") -40px top no-repeat;
	display:inherit;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.ocecheckbox1 input[type="checkbox"]:checked:disabled  + label span {
	background:url("/gfx/OCETheme/ocecheckbox.png") -60px top no-repeat;
	display:inherit;
	width: 20px;
	height: 20px;
	display: inline-block;
}
/*******************************************************************/

/**** OCE RadioButton **********************************************/
/* 
	IMPORTANT:
	By using  
		.ocecheckbox input[type="radio"]:enabled , .ocecheckbox input[type="radio"]:disabled 
	insted of:
		.ocecheckbox input[type="radio"]
	browsers that don't support the css "psuedo-classes" won't hide the control and it will work fine
*/
.oceradiobutton1 input[type="radio"]:enabled, .oceradiobutton input[type="radio"]:disabled  {
    display:none;
}

.oceradiobutton1 input[type="radio"]:enabled + label span, .oceradiobutton input[type="radio"]:disabled + label span {
	width: 20px;
	height: 20px;
	display: inline-block;
	background:url("/gfx/OCETheme/oceradiobox.png") left top no-repeat;
	cursor: pointer;
}

.oceradiobutton1 input[type="radio"]:checked  + label span {
	background:url("/gfx/OCETheme/oceradiobox.png") -20px top no-repeat;
	display:inherit;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.oceradiobutton1 input[type="radio"]:disabled  + label span {
	background:url("/gfx/OCETheme/oceradiobox.png") -40px top no-repeat;
	display:inherit;
	width: 20px;
	height: 20px;
	display: inline-block;
}

.oceradiobutton1 input[type="radio"]:checked:disabled  + label span {
	background:url("/gfx/OCETheme/oceradiobox.png") -60px top no-repeat;
	display:inherit;
	width: 20px;
	height: 20px;
	display: inline-block;
}
/*******************************************************************/

/**** OCE DropDown *************************************************/

.ocedropdown, select {
	text-align:left;
	color:#000;
	text-decoration:none;
	line-height:20px;
	font-family:'Oswald', Helvetica;
	margin: 2px;
	height: 20px;
	
	background: #fbfbfb;
	border:1px solid #bbbbbb;
	
	box-shadow: 0px 1px 2px rgba(187,187,187,0.6);
	border-radius:3px;
}

.ocedropitemeven {
	background: #fbfbfb;
}

.ocedropitemodd {
	background: #e6e6e6;
}
/*******************************************************************/

/**** OCE Textbox **************************************************/
.ocetextbox, input[type="text"] {
	text-align:left;
	color:#000;
	text-decoration:none;
	line-height:20px;
	font-family:'Oswald', Helvetica;
	margin: 2px;
	height: 20px;
	
	background: #FFF;
	border:1px solid #bbbbbb;
	
	box-shadow: 0px 1px 2px rgba(187,187,187,0.6);
	border-radius:3px;
}
/*******************************************************************/

/**** OCE Button ***************************************************/
.ocebutton, input[type="button"], input[type="submit"] {
	text-align:center;
	color:#000;
	text-decoration:none;
	line-height:20px;
	font-family:'Oswald', Helvetica;
	margin: 2px;
	text-shadow: 1px 1px 1px #FFF;
	
	background: #e6e6e6;
	border:1px solid #bbbbbb;
	
	box-shadow: inset -1px -1px #FFF, inset 1px 1px #FFF, inset 0px 10px 5px rgba(255,255,255,0.6), 0px 1px 2px rgba(187,187,187,0.6);
	border-radius:3px;
}

.ocebutton:hover, input[type="button"]:hover, input[type="submit"]:hover {
	background: #fbfbfb;

}

.ocebutton:active:enabled, input[type="button"]:active:enabled, input[type="submit"]:active:enabled {
	background: #c3c3c3;
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
} 

.ocebutton:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
	color:#a1a1a1;
} 
/*******************************************************************/

/**** OCE Dashboard Elements ***************************************/
.ocebuttonfull {
	width: 100%;
	height: 30px;
	display: block;
	text-align:left;
	color:#000;
	text-decoration:none;
	line-height:30px;
	font-family:'Oswald', Helvetica;
	margin: 0px;
	text-shadow: 1px 1px 1px #FFF;
	background: #e6e6e6;
	border:1px solid #bbbbbb;
	background-repeat: no-repeat;
	background-position: 1px 5px;

	box-shadow: inset -1px -1px #FFF, inset 1px 1px #FFF, inset 0px 5px 5px rgba(255,255,255,0.6), 0px 1px 2px rgba(187,187,187,0.6);
	border-radius:3px;
}

.ocebuttonfull span {
	padding-left: 30px;	
}

.ocebuttonfull a {
	padding-left: 30px;
}

.ocebuttonfull:hover {
	background-color: #fbfbfb;

}

.ocebuttonfull:active {
	background-color: #c3c3c3;
	box-shadow:0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset;
} 

.titleDash {
	box-shadow: 0px 2px 2px rgba(187,187,187,0.6);
	width: 510px;
	display: block;
}

.divChart {
	background: #e6e6e6;
	border:1px solid #bbbbbb;
	width: 250px;
	height: 250px;
	
	box-shadow: inset -1px -1px #FFF, inset 1px 1px #FFF, inset 0px 2px 2px rgba(255,255,255,0.6), 0px 1px 2px rgba(187,187,187,0.6);
	border-radius:3px;
}

.ocerrribon {
	background: #AFFF9E;
	border:1px solid #bbbbbb;
	width: 100px;
	height: 100px;
	margin-right: 3px;
	float: left;
	border-radius:5px;
}
.ocerrribontitle {
	text-align: center;
	box-shadow: inset -1px -1px #FFF, inset 1px 1px #FFF, inset 0px 2px 2px rgba(255,255,255,0.6), 0px 3px 2px rgba(187,187,187,0.6), inset 0px -10px 8px rgba(255,255,255,0.6);
	border-radius:5px;
	background-color: #e6e6e6;
	height: 40px;	
	font-size:1em;
	font-family: "Oswald", Helvetica;
}

.ocerrribonstats {
	margin-top: 5px;
	margin-bottom: 5px;
	height: 50px;
	line-height: 50px;
	font-size: 2em;
	text-align: center;
	border-radius:3px;
}

.ocerrriboncolorblue {
	background-color: #338EC8;
}

.ocerrriboncolorred{
	background-color: #E06A55;
}

.ocetablew300 {
	width: 300px;
}

.ocetablew250 {
	width: 250px;
}

.ocetablew100p {
	width: 100%;
}

/*******************************************************************/

/**** OCE Icons ****************************************************/
.oceiconedit {
	background-image: url("/gfx/OCETheme/icons/icon1.png");
}

.oceiconinet {
	background-image: url("/gfx/OCETheme/icons/icon2.png");
}

.oceiconset {
	background-image: url("/gfx/OCETheme/icons/icon3.png");
}

.oceiconclock {
	background-image: url("/gfx/OCETheme/icons/icon4.png");
}

.oceicondownload {
	background-image: url("/gfx/OCETheme/icons/icon5.png");
}

.oceiconhtmldoc {
	background-image: url("/gfx/OCETheme/icons/icon6.png");
}

.oceiconcontact {
	background-image: url("/gfx/OCETheme/icons/icon7.png");
}

.oceiconchat {
	background-image: url("/gfx/OCETheme/icons/icon8.png");
}

.oceiconreport {
	background-image: url("/gfx/OCETheme/icons/icon14.png");
}

.oceiconemail {
	background-image: url("/gfx/OCETheme/icons/icon17.png");
}

.oceiconsurvey{
	background-image: url("/gfx/OCETheme/icons/icon11.png");
}
/*******************************************************************/

/********** OCE Error, OCE Warning, OCE Feedback Panels ************/ 
.oceTitleBar
{
	border-color: #bbbbbb;
	border-top-width: 0px;
	/*box-shadow: 0px 1px 2px rgba(187,187,187,0.3), 0px -1px 1px rgba(255,255,255,0.6);*/
	text-shadow: 2px 2px 2px #bbbbbb;
}

.oceError 
{
	border:1px solid red;
	color: #000;
	font-size: 1.2em;
	background-color: #D25068;
	background-image: url("/gfx/OCETheme/errorpanb.png");
	background-repeat: repeat-x;
	border-radius:5px;
}

.oceWarning
{
	border:1px solid #A9AF52;
	color: #000;
	font-size: 1.2em;
	background-color: #DFE56B;
	background-image: url("/gfx/OCETheme/warnpanb.png");
	background-repeat: repeat-x;
	border-radius:5px;
}

.oceFeedback  
{
	border:1px solid #5DAF68;
	color: #000;
	font-size: 1.2em;
	background-color: #79E086;
	background-image: url("/gfx/OCETheme/feedbackpanb.png");	
	background-repeat: repeat-x;
	border-radius:5px;
}

.oceDebug {
	border-radius:3px;
}
/*******************************************************************/

.center-padded {
    margin: 2vh auto;
}

.center {
    margin: 0 auto;
}

.split {
    display: inline-block;
    vertical-align: top;
}