*{
	font-family: Tahoma, Arial, Helvetica, sans-serif;
}

html {
	font-size:100%;
}

body{
	margin:0;
}

img {
	vertical-align:middle;
}

.flexcontainer {
	display:flex;
	flex-wrap:wrap;
    padding-bottom:5px;
	padding-top:5px;
    clear:both;
	overflow:auto;
	width:100%;
}

.itemgrow {
	flex-grow:1;
}

.header{
	display: flex;
}

.header_banner{
	flex-basis:1080px;
}

.header_banner .noPrint img{
	display:block;
	width:100%;
	height:auto;
}

.header_banner_left{
	flex:1;
	background-image: url('../images/headerleft.jpg');
	background-position-x:right;
}

.header_banner_right{
	flex:1;
	background-image: url('../images/headerright.jpg');
	background-position-x:left;
}

.printTime{
	font-size:8pt;
}

.menuBar{
	min-height:24px;
	background:#0f2d3e url("../images/login.gif") repeat-x;
	text-align:left;
	font-size:0.75rem;
	font-weight:bold;
	color:#FFFFFF;
	border-top:1px solid #EEAA00;
}

.menuBarLeft{
	float:left;
}

.menuBarRight{
	float:right;
	margin:2px;
}

.menuBar a{
	padding: 6px;
	display:inline-block;
	text-decoration:none;
	color:#FFFFFF;
	border-right:1px solid #888888;
}

.menuBar a:link, .menuBar a:visited{
	background-color:none;
}

.menuBar a:hover{
	background-color:#008888;
}

.menuBar a:active{
	background-color:#00bbbb;
}

.mainArea{
	background-color:#EEEEEE;
	min-height:480px;
}

#home {
	margin:auto;
	max-width:800px;
	padding:12px;
	font-size:1.1rem;
}

#home p {
	text-align:justify;
}

#home .odigia {
	margin:36px 0; 
	text-align:left;
}

#home img {
	margin:0 6px;
	max-width:100%;
}

.mainContent{
	padding:6px 12px;
	background-color:#FCFFFA;
	min-height:480px;
}

.pageTitle{
	font-weight:bold;
	font-size:1.2rem;
}

.loginSelection{
	margin:auto;
	max-width:768px;
}

.loginSelection .caption{
	margin-bottom:12px;
	text-align:center;
	font-size:1.15rem;
	font-weight:bold;
}

#loginButtons{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

#loginButtons .col{
	flex-grow:1;
	flex-shrink:1;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	max-width:380px;
}

.loginSelectionChoice .note{
	max-width:340px;
	margin:0 auto 6px;
	font-size:0.75rem;
	text-align:center;
}

.loginSelectionChoice button{
	margin:12px;
	padding:6px;
	max-width:340px;
	height:auto;
	min-height:78px;
}

.loginSelectionChoice button img {
	height:38px;
}

.loginSelectionChoice button span {
	display:inline-block;
	margin-top:3px;
	margin-left:24px;
	width:300px;
	max-width:300px;
	font-size:0.95rem;
}

.loginSelectionChoice button span.explanation{
	font-weight:normal;
	font-size:0.85rem;
}

.loginArea{
	max-width:640px;
	margin: 12px auto;
	min-height:320px;
	padding: 6px;
	text-align:center;
	border:1px solid #cccccc;
	background-color:#fcffe6;
}

.loginArea .title{
	width: 98%;
	margin: 0 auto;
	padding:6px;
	font-weight:bold;
	background-color:#ebecd4;
}

.subtitle{
	font-size:0.9rem;
	font-weight:normal;
}

.loginArea label {
	font-size:0.9rem;
}

.loginArea input[type="text"], .loginArea input[type="password"] {
	width:100%;
}

.forgotpass-label {
	padding-right:8px;
	min-width:160px;
	text-align:left;
}

.forgotpass-input {
	max-width:360px;
	flex-grow:1;
	display:flex;
}

.forgotpass-button, .forgotpass-link {
	text-align:center;
}

#forgotP, #forgotU{
	display:none;
	width:90%;
	margin:24px auto 12px;
	padding:6px 6px 24px 6px;
	border:1px dotted #cccccc;
	background-color:#faffcc;
}

.forgot{
	font-size:0.8rem;
	text-decoration:none;
	color:#4444ff;
}

.forgot:hover{
	text-decoration:underline;
	color:#0000ff;
	cursor:pointer;
}

.notAllowed{
	max-width:540px;
	margin:48px auto;
	padding:12px 60px;
	border:1px dashed #dddddd;
	background:#fafafa url("../images/noentry.png") no-repeat 12px 24px;
}


button.excel{
	margin:-8px 6px 6px 6px;
}

.notAllowed input{
	font-weight:bold;
}

.tip{
	margin:6px 0;
}

.tip span{
	padding: 2px 6px;
	border:1px solid #ff0000;
	background-color: #ebecd4;
}

.editRecord .checkboxes {
	display:flex; 
	flex-wrap:wrap;
	justify-content:space-around;
}

.editRecord .input, .editRecord .checkbox, #confirmCompletedDiv .input{
	margin:12px;
	font-weight:bold;
}

.editRecord .checkbox span{
	font-weight:normal;
	font-size:0.9rem;
}

.editRecord{
	padding:6px;
	border:1px solid #CCCCCC;
	background-color:#faffcc;
}

.editRecord fieldset, .previewRecord fieldset{
	margin:0 6px 12px;
	padding:0 0 12px;
	border:1px dotted #e8edbe;
}

.editRecord fieldset legend, .previewRecord fieldset legend{
	padding:0 6px;
	background-color:#e8edbe;
	font-weight:bold;
}

.previewRecord{
	padding:6px;
	border:1px solid #CCCCCC;
	background-color:#fcffe6;
}

.previewRecord .output, .showDate, .setDate {
	margin:12px 6px;
}

.previewRecord .output label, .showDate label, .setDate label {
	font-weight:bold;
	background-color:#ebecd4;
	padding:0 6px;
}

.previewRecord .output span, .previewRecord .output div, .showDate .meetingInfo, .setDate .meetingInfo, .inner{
	display:block;
	font-weight:normal;
	font-size:0.9rem;
	border:1px solid #ebecd4;
	padding:2px 6px;
}

.setDate .meetingInfo, .inner{
	background-color:#f9ffd1;
	border:1px solid #e4e6b8;
}

.smallbutton{
	font-weight:normal;
	height:26px;
}

.fixedInfo{
	padding:0;
}

.fixedInfo .output{
	margin:12px 6px;
}

.fixedInfo .output label{
	font-weight:bold;
	background-color:#e8edbe;
	padding:0 6px;
}

.fixedInfo .output div{
	display:block;
	font-weight:normal;
	font-size:0.9rem;
	border:1px solid #ebecd4;
	padding:2px 6px;
}

.deleteCheck{
	display:none;
	font-weight:bold;
	color:#ff0000;
}

.previewRecord .deleteCheck label{
	display:inline;
	background-color:transparent;
	border:0;
}

.previewRecord .deleteCheck span{
	display:inline;
	font-weight:normal;
	font-size:0.9rem;
	border:0;
	padding:2px 6px;
}

.footer{
	clear:both;
	background-color:#23516B;
	padding:6px;
	text-align:center;
	font-size:0.85rem;
	color:#FFFFFF;
}

.footer a, .footer a:link, .footer a:visited, .footer a:active{
	color:#aaaaaa;
	text-decoration:none;
}

.footer a:hover{
	text-decoration:underline;
}

ul#menu1,ul#menu2{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul#menu1 li{
	padding: 6px;
	display:inline-block;
	text-decoration:none;
	color:#FFFFFF;
    font-weight: bold;
	border-right:1px solid #888888;
	cursor:pointer;
}

ul#menu1 li:hover{
	background-color:#008888;
}

ul#menu1 li:active{
	background-color:#00bbbb;
}

div.config table{
	width:auto;
}

table.resultsTable{
	margin-bottom:6px;
	width:100%;
}

div.caption{
	float:left;
	width:100%;
	padding:6px 0 2px;
}

div .caption{
	padding-top:6px;
	caption-side:top;
	text-align:left;
	font-size:16px;
	font-weight:bold;
}

/*
div .caption span{
	font-size:0.8rem;
	font-weight:normal;
}
*/

div.tabular table{
	width:100%;
	border-collapse: collapse;
	font-size:12px;
}

div.tabular table tr:hover{
	background-color:#FFFFCC;
}

div.tabular table tr:hover td{
	background:transparent;
}

div.tabular th, div.tabular td{
	max-width:480px;
	padding: 2px 6px;
	border:1px solid #CCCCCC;
	text-align:left;
	word-wrap: break-word;
}

div.tabular th{
	background-color:#D8D8D8;
}

div.tabular tr:nth-child odd{
	background-color:#FFFFFF;
}

div.tabular tr:nth-child even{
	background-color:#F8F8F8;
}

div.tabular table tr td.small{
	width:12px;
}

div.inputCheck{
	display:none;
}

div.preview{
	padding:3px;
}
div.preview label{
	font-weight:bold;
}

.schoolSelection{
	max-width:728px;
	margin: 2px auto;
	padding:12px;
	border:2px solid #888888;
	background-color:#DDDDDD;
}

.schoolList{
	width:100%;
	max-width:752px;
}

#schoolSelected{
	margin:auto;
	padding:6px;
	border:2px solid #88FFCC;
	background-color:#EEFFEE;
	font-size:1.2rem;
	text-align:center;
}

.buttonRow {
	margin-top:12px;
	text-align:center;
}

button{
	position:relative;
	margin:6px;
	width:auto;
	height:28px;
	text-align:right;
	font-weight:bold;
	cursor:pointer;
}

button img {
	position:absolute;
	height:70%;
}

button span {
	margin-left:26px;
}

.buttonPeriodShow, .buttonPeriodHide{
	float:left;
	clear:both;
	font-weight:normal;
}

.buttonPeriodShow img, .buttonPeriodHide img {
	height:auto;
}

.buttonPeriodHide{
	display:none;
}

.buttonAlreadyApplied {
	cursor:not-allowed;
}

.buttonAlreadyApplied img {
	height:65%;
}

.buttonAlreadyApplied span {
	margin-left:20px;
	font-size:0.65rem;
}

.buttonNotAvailable {
	cursor:not-allowed;
}

.buttonNotAvailable img {
	height:65%;
}

.buttonNotAvailable span {
	margin-left:20px;
	font-size:0.55rem;
}

#addNewUser, #addNewTrainer, #addNewTrainerSeminar, #addNewTraineeApplication {
	float:right;
}

a.return {
	display:block;
	margin:12px 0;
}

a.return, a.return:link, a.return:visited, a.return:active {
	text-decoration:none;
}

a.return span{
	margin-left:6px;
}

a.return:hover span{
	text-decoration:underline;
}

div.config button.save{
	float:left;
	margin:12px 0;
}

.input input, .input textarea{
	width:98%;
}

.profile{
	margin:12px;
}

.profilePreview, .profileEdit {
	max-width:640px;
	margin:12px auto;
	padding:6px;
	border:1px solid #CCCCCC;
}

.profilePreview{
	background-color:#fcffe6;
}

.profileEdit{
	background-color:#faffcc;
}

div.extraInfo div.group{
	margin:12px 0;
	padding-top:6px;
}

div.extraInfo div.group div.caption{
	font-size:0.9rem;
	font-weight:bold;
}

div.extraInfo div.group div.info{
	float:left;
	width:30%;
	margin:2px;
	padding:3px 6px;
	border:1px dashed #CCCCCC;
	font-size:0.8rem;
	background-color:#FCFCFC;
}

.strikethrough{
	text-decoration:line-through;
}

.hint{
	font-size:0.7rem;		
}

.message{
	text-align:center;
	font-size:1.2rem;
	font-weight:bold;
	color:#000000;
	background-color:#CCCC88;
	margin:auto;
	width:90%;
	margin-top:2px;
	padding:6px;
}

.emailmessage{
	text-align:center;
	font-size:1rem;
	color:#000000;
	background-color:#CCCC88;
	width:98%;
	margin:2px;
	padding:6px;
}

.alert{
	color:#FF8800;
	font-weight:bold;
	font-size:0.7rem;
	margin-top:2px;
}

table.TF th{
	background-color:#ebecee!important;
    border-color:#cccccc!important;
    padding: 4px 6px!important;
}

.helpCont{
	z-index:1;
}

.noScreen, .noScreen *{
	display:none!important;
}
div.noResults{
	margin:24px 6px;
	border:2px dotted #CCCCCC;
	padding:48px;
	text-align:center;
	font-weight:bold;
}

#snp{
	max-width:540px;
	margin:6px auto;
	padding-left:12px;
	background-color:#fcffe6;
	border:1px solid #cccccc;
}

#snp div{
	margin:12px 36px;
}

#newp{
	display:none;
}

.period{
	max-width:956px;
	margin:auto;
}

.periodPreview{
	clear:both;
	margin: 0 6px 30px 6px;
	padding-right:60px;
}

.periodRow{
	margin:12px;
}

.ui-widget{
	font-size:0.9rem;
}

.ui-widget-header{
	border:1px solid #4297d7;
	background:#5c9ccc 50% 50% repeat-x;
	color:#ffffff;
	font-size:1rem;
	height:24px;
}

.ui-timepicker-table .ui-timepicker-title{
	line-height:1;
}

@media only screen and (max-width: 768px) {
	#home{
		font-size:0.9rem;
	}

	#loginButtons .col{
		max-width:400px;
	}

	.loginSelectionChoice button{
		margin:6px 2px;
		height:auto;
		min-height:78px;
		max-width:300px;
	}

	.loginSelectionChoice button span {
		width:250px;
		max-width:250px;
		font-size:0.85rem;
		margin-left:30px;
	}

	.loginSelectionChoice button span.explanation{
		font-size:0.7rem;
	}

	.loginSelectionChoice .note{
		max-width:80%;
		margin:0 auto 6px;
		font-size:0.7rem;
	}

	.loginp {
		text-align:center;
	}

	.loginp .login{
		display:block;
		margin:auto;
	}

	.forgotpass-button, .forgotpass-link {
		text-align:left;
	}

	.footer{
		padding:4px;
		font-size:0.65rem;
	}

	.pageTitle {
		font-size:1.1rem;
	}
	
	.pageTitle span{
		display:block;
	}
	
	.pageTitle span.dash{
		display:none;
	}
	
	.dataRow {
		display:block;
	}

	a.return {
		float:none;
		display:block;
	}
}

@media print{
	@page{
		width:297mm;
		height:210mm;
		margin:1cm;
	}
	
	body{
		font-size:85%;
	}
	
	.noScreen, .noScreen *{
		display:block!important;
	}

	.noPrint, .noPrint *{
		display:none!important;
	}
		
	button{
		display:none!important;
	}

	.pgInp, .rdiv, .mdiv, .fltrow{
		display:none!important;
	}

	.headerprn{
		font-size:16pt;
		text-align:center;
		margin:0;
		padding:0;
	}

	.headerprn img{
		float:right;
		height:1cm;
	}

	.mainContent{
		margin-left:0;
		padding:0;
		background-color:#FFFFFF;
		max-width:100%;
		width:100%;
	}
	
	table.TF th{
		background-color:#FFFFFF!important;
		border-color:#cccccc!important;
		padding: 4px 6px!important;
	}
}