@charset "utf-8";
/* CSS Document */

body{
	background-color: #AAA;
	}
#kyranContainer {
	text-align:left;
	font-size: 1em;  
	left:	0px;
	border:	0px;
	padding:0px;
	margin:	0px;
	min-width:  320px;
	max-width:  1140px;
	margin-left:	auto;	
	margin-right: 	auto;	
	background-color: WHITE;
	
	/* [11/19/2019 MC] Pad content height to fill viewport while still keeping the footer at the bottom. */
	position: relative;
  	min-height: 100vh;	
}
#kyranContainer H1{
	clear: both;	
	color: #666;
	padding: 0px 0 0px 0;
	font-size:  2.2em; 
	text-align:left;
	border-bottom: thick solid #397aac;
	margin-bottom:  30px;
	}
#kyranContainer h2{
	color:#397aac;
	font-size:  1.3em;
	font-weight: normal;
	text-align: left;
	padding-bottom: 5px;
	}
#kyranContent {
	clear: left;
	min-width:  320px;
	max-width:  1100px;
	max-width: 95%;
	padding-top:  10px;
	padding-left: 20px;
	padding-right: 10px;
	background-color: #FFF;
	
	/* [11/19/2019 MC] Pad content height to fill viewport while still keeping the footer at the bottom. */
	padding-bottom: 40px;    /* Footer height */	
}
#kyranContent h3{
	font-size: 1.1em;}

.container-max{
	padding-left: 5px;
	padding-right: 5px;
	}

/* style that can be applied to training partner panels */
.traininglinks a{
	font-size: small;
	}
/* [04/11/2019 MC] Issue 39763. Add horizontal rule with small vertical margins to separate items in the 'Training Partner Links' list */
.traininglinks hr{
	margin-top: 5px; 
	margin-bottom: 5px;
}
#kyranBottomLinks{
	padding-bottom:  10px;
	}
	
/* Top of Page and Bottom of Page links  */
#kyranBottomLinks a {
	color: #397aac;  
	}

/*---- font styles  ----------*/
.underline {text-decoration: underline;}
.bold {font-weight: bold;}

/* styles used for Calendar date box */
.kyCalDateTd {
	font-size: 			1.1em;
	text-align: 		center;
	vertical-align:  	center;
}
/* kyCalDateTop is for the top row of the box (for calendar page, month & day of month like "Nov 16"). */
.kyCalDateTop {			
	font-weight: 		bold;
	color:  			#868686;
}
/* kyCalDateMiddle is for the middle row of the box (for calendar page, day of week like "Fri"). */
.kyCalDateMiddle {		
	font-weight: 		normal;
	color:  			#333333;	
}
/* kyCalDateBottom is for the bottom row of the box (for calendar page, year like "2018"). */
.kyCalDateBottom {
	font-size: 			.9em;
	font-weight: 		bold;
  	color:    			#959595;
}
/* kyCalTitle is for the course description text */
.kyCalTitle {
	color:#397aac;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
}

	
/* minimal margins for phone devices */
@media (max-width: 576px) {
	#kyranContent {
		max-width:  100%;
	  }
	#kyranContent {
		padding-left: 10px;
	  }
	.container-max{
		padding-left:  4px;
		padding-right: 4px;
		}
	#kyranContainer H1{
		padding-left:  10px;
	}
	.kyFooter table td a{
		font-size: x-small;
	}
}



table{background-color: WHITE !important;
	margin-left: auto;
	margin-right: auto;}
table.datagrid{
	width: 95%;
}
#kyranContent.headlist{font-size: 1.4em;
	font-weight: bold;
}
table.tPanels[width="100%"]
	{width: 95%;}
td{
	background-color: transparent;
	font-weight: normal!important;
	color: #333 !important;
	}
td.sectionheader{
	background-color:#3E6B9B !important;
	color:  white !important;
	font-weight: bold !important;}
td a{
	color:  BLUE;
	text-decoration: underline;
	}
th{
	background-color:#3E6B9B;
	color:  WHITE !important;
	font-weight:  normal !important;
	}

th.sorted a{
	display: block;
	width: 100%;
	background-color: #7088A2; 
	background-repeat:no-repeat;
	background-position: right;
	COLOR:WHITE;
}
/* this makes the link (for the slected column) white */
th.sorted a:visited {
	COLOR:WHITE;
}
th.sortable a {
	display: block;
	width: 100%;
	background-image: url(../images/NC_arrow_off.png);
	background-repeat:no-repeat;
	background-position:right;
	color:  WHITE !important;
}
th.order1 a {
	background-image: url(../images/NC_arrow_down.png);
	background-repeat:no-repeat;
	background-position:right;
}
th.order2 a {
	background-image: url(../images/NC_arrow_up.png);
	background-repeat:no-repeat;
	background-position:right;
}



a.maplink{
	text-decoration: underline !important;
	}
	
/* links in tables ******************************/
td a{
	color:  #0f447a;
	}
	

/* panels used for fluid WELCOME page	*********/
.tpanel{
	display: block;
	color:  #CCC;
	font-size:  1.3em;
	background-color: #0f447a;  
	background-size: cover;
	background-position: center center;
	padding-left:  	20px;
	padding-right: 	20px;
	padding-top:  	10px;
	padding-bottom:  0px;
	margin-bottom:  10px;
	}
.tpanel h2{
	color: #CCC !important;
	}
.lpanel{
	top: 0;
	bottom: 0 !important;
	display: block;
	}
.lpanel h2{
	font-size:  1.5em !important;
	}
.lpanel a{
	font-size: 1.2em;
	font-weight: bold;
	color:  #0f447a;
	padding-left:  10px;
	line-height:  30px;
	}
.lpanel a.inlineLink{
	font-size: 1.2em;
	font-weight: normal;
	text-decoration: underline;
	color:  #397aac;
	padding-left:  0px;
	}
.rpanel{
	bottom: 0;
	display: block;
	}
.mpanel{
	background-color: #F0F0F0;
	background-size: cover;
	background-position: center center;
	margin-bottom:  10px;
	}
.mpanel h2{
	font-size:  1.5em !important;
	}
.rpanel h2{
	font-size:  1.5em !important;
	}

.kyBBorder{
	border-bottom:  solid thin #397aac;
	}
	
/* shading that can be applied to fluid columns/labels  */
/* to look like our other input tables		    		*/	
.kyBkGray{
	background-color:#F7F7F7 !important;
	background-size: cover;
	}
.kyDkGray{
	background-color:  #B0B0B0;
	color:  #FFF;
}

.kyButtonPanel{
	margin-top:  10px;
	margin-bottom:  10px;
	}

.kyXXL{
	font-size: 86px;;
	}
	
@media print {
	.glyphicon{
		display:  none;
	}
	.glyphicon-trash{
		display:  none;
	}
	.kyButtonPanel{
		display: none;
	}
	.kyFooter{
		display: none;
	}
	.kyHeader{
		display: none;
	}
	a[href="#bottompage"]{
		display:  none;
	}
	a[href="#top"]{
		display:  none;
	}
	th{
		color:  #000 !important;
		font-weight: bold !important;
		background-color:  transparent;
	}
	.btn{
		display: none;
	}
	#kyranBottomLinks{
		display: none;
	}
	#kyranFluidMenu{
		display: none;
	}
	
}



@media (min-width: 992px) {
	.container-max{
		padding-left:  40px;
		padding-right: 40px;
	}
}
.quarter{
	width:  25%;
	}
.kyBkPrimary{
	background-color:  #025aa5;
	color:  WHITE;
	margin-bottom: 8px;
	margin-top:  8px;}

.inputPanel{
	padding: 10px !important;
	background-color:#F7F7F7 ;
	background-color:  #EBEBEB ;
	}

/* Table used in page header of fluid pages **************/
table.kyHeader{
	background-color:#DDD !important; 
	border-bottom:  thick solid #0f447a !important; 


	/*background-color: #003265 !important;   */
	background-size: 	cover;
	background-position: center center;
	/*border-bottom:  thin solid WHITE; */ 
	width: 100%;	
	}
table.kyHeader td{
	padding-top:  	6px;
	padding-bottom: 6px;
	} 								
table.kyHeader td:nth-child(1){
 	padding-left: 	30px;
 	padding-right: 	20px;
	}
table.kyHeader td:nth-child(3){
 	padding-left: 	30px;
 	padding-right: 	20px;
	}
table.kyHeader H1{
	color: 	 #0f447a 	!important;	
	font-weight: bold 	!important;		

	font-family: Arial, Helvetica, sans-serif;
	/*color: 	 #E2E2E2 	!important;	*/
	font-size: 28px 	!important;
	/*font-weight: normal !important;*/
	padding:  0px 		!important;
	margin:   0px		!important;
	border-bottom: none	!important;
	text-align:  center	!important;
	}
table.kyHeader H2{
	font-size: 18px 	!important;
	color:  #0f447a 	!important;

	font-family: Arial, Helvetica, sans-serif;
	/*color: 	 #E2E2E2 	!important;	*/
	/*font-size: 24px 	!important; */
	font-weight: normal !important; 
	margin:  0px 		!important;
	padding: 0px		!important;
	text-align:  center	!important;
	}	
	
.kyHeader td.testSite{
	background-color:#F00;
	color:  		#FFF !important;
	font-weight:  	bold !important;
	font-size:  	1.2em;
	}
/* Table used in page footer of fluid pages ****************/
.kyFooter {
	background-color:#DDD !important;
	/*background-color: #003265;  */
	background-size: cover;
	background-position: center center;
	clear: 	both;
	max-width:  	1140px;
	margin-left: 	auto;
	margin-right:	auto;
	margin-top:  	5px;
	padding-top: 	16px;  
	color:  	#CCC;
	font-size:  small;
	
	/* [11/19/2019 MC] Pad content height to fill viewport while still keeping the footer at the bottom. */
	position: 	absolute;
	bottom: 	0;
	width: 		100% !important;
    height: 	40px;            /* Footer height */	
}
.kyFooter table{
	background-color:transparent !important;
	width:  100%;
	max-width:  100%;
	}
.kyFooter table td{
	color:  #999 !important;
	font-size:	small !important;
	font-weight:bold !important;
	}
.kyFooter a{
	padding-left:  10px;
	text-decoration: none;
	color:  #999 !important;
	font-size:  small;
	font-weight: bold !important;
	}
@media (max-width: 576px) {
	.kyFooter{ 	height: 60px ;
	}
	}



.red{
	color:  #F00;
	font-weight:  bold;
	}

	
.kyGreen{
	background-color:#D6ECCE;
	}
.kyGreen a{
	text-decoration: underline;
	font-weight-bold;
	font-size: 1.1em;
	}
.kyGray{
	background-color:#CCC;}
.kyGray a{color:  #000;
	text-decoration: underline;
	font-weight-bold;
	font-size: 1.1em;
	}
.kyYellow {
	background-color:#FFFF95;
	color: #000;}
.kyYellow a{
	text-decoration: underline;
	font-weight-bold;
	font-size: 1.1em;
	}
.kyBlue{
	background-color: #DDEDF7;
	color: #000;
	}
.kyBlue a{
	text-decoration: underline;
	font-weight-bold;
	font-size: 1.1em;
	}
.kyRed{
	background-color:#FFD2D2;
	}
.kyRed a{
	text-decoration: underline;
	font-weight-bold;
	font-size: 1.1em;
	}
	
	
	
#myNavbar a{
	font-size:  1.1em;
	line-height:  40px;
	}

/*---- used for alignment ----*/
.right{text-align: right;}
.center{text-align: center;}
.full{text-align:justify;}

/* additions to support styles not in Bootstrap 3 but are in Bootstrap 4 */
.font-weight-normal{
	font-weight: normal;
	}
.font-weight-bold{
	font-weight: bold;
	}
.font-italic{
	font-style: italic;
	}
.bg-inverse {
  background-color: #292b2c !important;
	}
.bg-faded {
  background-color: #f7f7f7;
	}
.text-white{
	color:  #FFF !important;
	}
.float-left{float: left;
	}	
.float-right{float: right;
	}	
.container-home{
	min-width:  320px;
	max-width:  1100px;
	max-width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	}
	
/*adjustment to bootstrap style for supplemental profile navigation*/


.navbar-collapse{
	padding-right:15px;
	padding-left:5px;
	overflow-x:visible;
	}

/* Styles for (unexpected) Application Error. */	
.strutsErrorHeader {
	color:RED;
	font-size: 110%;
	font-weight: bold;
}

#Alert{
	color: BLACK;
	font-family:Arial, Helvetica, sans-serif;	
	font-size: 110%;
	font-weight: normal;
	text-decoration: none;
}


/* [10/19/2017 MC] style for Struts Messages collection. 
	used to report validation and other messages on top of page
	rather than loading the ErrorMessages detail page. */
.strutsMessages {
	color:			red;
	font-weight:    bold;
}	
	
/* [10/19/2017 MC] highlight validation errors with red glow around input control */
.error-input-glow-red {
       outline:none;
       -webkit-appearance: none;
       
    box-shadow: 0 0 5px rgba(255, 0, 0, 1);
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 1); 
    -moz-box-shadow: 0 0 5px rgba(255, 0, 0, 1);
    border:1px solid rgba(255,0,0, 0.8); 
}

/* [05/09/2018 MC] Issue 38460. Style a default, hidden button to fire the Save action when the Enter key is pressed. */
.default-button-handler {
  	width: 0;
  	height: 0;
  	padding: 0;
  	border: 0;
  	margin: 0;
}

/* [07/03/2018 MC] Replace use of <big> tag */
.big {
     font-size: larger;
}

.indent10 {
	padding-left: 10px;
}
.indent20 {
	padding-left: 20px;
}
.indent25 {
	padding-left: 25px;
}
.indent50 {
	padding-left: 50px;
}

/* [08/09/2018 MC] Issue 38922. Always present the team member profile picture 
					using the same aspect ratio as the badge will use. */
.profileImage {
	width: 	138px;
	height:	184px;
}
