@charset "utf-8";
/* CSS Document */
*{ 	
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}
p{
	line-height:166%;	
}
#navContainer, #loginBarContainer{
	width:100%;	
}
#loginBarContainer{
	height:30px;	
}
#navContainer{
	background-color:#F0F0F0;
	height:50px;
}
#navBar, #container, #loginBar{
	width:90%;
	margin:0 auto;
}
nav, div#loginBar{
	text-align:right;
	margin:0 auto;	
}
main{
	width:95%;
	margin-left:15px;	
}


nav ol li {
	list-style-type: 	none;
	display:			inline-block;
	height: 			20px;
	background-color:	#E5E5E5;
	padding:			15px;
	}

nav ol li a {
	color:#3A3A3A;
	font-weight       : bold;
	padding           : 5px;
	text-decoration   : none;
	height			: 40px;
	}

nav ol li a:hover {
	background-color  : #2586d7;
	border-radius: 5px;
	color             : #fff;
	}
nav ol li.user a {
	color:#3A3A3A;
	font-weight       : bold;
	padding           : 10px;
	text-decoration   : none;
	background-color:#BFBFFF;
	border-radius:50%;
	letter-spacing: -2px;
	}
nav ol li.user a:hover {
	color:#fff;
	background-color:#2586d7;
}
div#loginBar form{
	display: inline-block;
	margin: 0 0px;
}
div#loginBar form input,div#loginBar form button,div#loginBar form select{
	padding:5px;
	border-radius: 5px;	
	font-size:11px;
	width:75px;
}
nav ol span{
	margin-top:15px;
	padding:15px;
}
a.forgottenPassword{
		font-size:11px;
		text-decoration:none;
}

### If you don't want the background spanning the whole screen

nav, nav ol ul{
   display            : inline;
   }
   
main h1{
	margin: 15px 0 25px 0;	
}

nav ol ul a span.user{
	border-radius: 5px;
	width:50px;
	height: 50%;
	backgrtound-color:red;	
}













div#tileContainer{
	margin:50px auto;
	min-height:250px;
	width:100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div.tile{
	width:205px;
	height:205px;
	padding:15px;
	border:#999 thin solid;
	border-radius:15px;
	margin-right: 15px;
	margin-bottom:15px;
	color:#333;
	float:left;
	text-align:center;
	transition: background 0.5s ease;
} 

a div.tile:hover{
	background-color:#2586d7;
	color:white;
	opacity 1;}
div.tile span.icon{
	font-size:55px;
	display:block;
	margin:10px auto;	
}

div.tile span.tileText{
	font-size:25px;
	display:block;
	margin:20px auto;	
}


div#tileContainerSml{
	min-height:50px;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	float:left;
	margin-left:15px;
}
div.tileSml{
	margin-top:3px;
	width:35px;
	height:35px;
	padding:2px;
	border:#999 thin solid;
	border-radius:15px;
	margin-right: 15px;
	margin-bottom:15px;
	color:#333;
	float:left;
	text-align:center;
	opacity:0.5;
	transition: opacity 0.5s ease-in-out;
} 

a div.tileSml:hover{
	background-color:#2586d7;
	color:white;
	opacity: 1;
}
div.tileSml span.iconSml{
	font-size:25px;
	display:block;
	margin:5px auto;	
}

.bioImage{
	border-radius: 10px;
}
.floatLeft{
	float:left;
	margin:0 25px 25px 0;	
}
main p a:link{
		text-decoration:none;
		color:#2586d7;
}
main p a:visited{
		text-decoration:none;
		color:#2586d7;
}
main p a:hover{
		text-decoration:underline;
		color:#3A3A3A;
}
main p a:active{
		text-decoration:none;
		color:#2586d7;
}






div.contentForm div.el span.left input,div.contentForm div.el span.right input,div.contentForm div.el span.center input{
	width:100%;
	padding:10px;
	font-size:18px;
	border-radius:5px;	
}
div.contentForm div.el span.right textarea{
	width:100%;
	height:200px;
	padding:10px;
	font-size:18px;
	border-radius:5px;	
}
div.contentForm div.el span.left select,div.contentForm div.el span.right select{
	width:100%;
	padding:10px;
	font-size:18px;
	border-radius:5px;	
}
div.contentForm div.el span.left input.error,div.contentForm div.el span.right input.error,div.contentForm div.el span.center input.error{
	border: thin solid red;	
	background:#FFECEC;
}


label.checkboxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border:thin #333 solid;
}
.checkboxContainer:hover input ~ .checkmark {
  background-color: #ccc;
}
.checkboxContainer input:checked ~ .checkmark {
  background-color: #2196F3;
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}
.checkboxContainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


div.el{
	border:none;
	padding:0;	
}

div.el span.center button.button,div.el span.right button.button {
  border-radius: 5px;
  background-color: #2586d7;
  border:thin solid #06F;
  color: #FFFFFF;
  text-align: center;
  font-size: 24px;
  padding: 5px;
  width: 250px;
  cursor: pointer;
}
div.el span.center button.button:hover,div.el span.right button.button:hover{
	background-color:#39F;
}
div.el span.heading h3{
	font-size:24px;
	font-weight:bold;
	background-color:#2586d7;
	color:#fff;
	padding:15px;
	border:none;
}


form.tableForm button.tableButton {
  border-radius: 5px;
  background-color: #2586d7;
  border:thin solid #06F;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 5px;
  cursor: pointer;
}
form.tableForm button.tableButton:hover{
	background-color:#39F;
}



div.contentForm{
	/*width:700px;*/
	margin:0 auto;
}
div.contentForm div.el{
	width:100%;
	display:inline-block;
	padding: 0px;
}
div.contentForm div.el span.left{
	padding:5px;
	width:40%;
	float:left;
}
div.contentForm div.el span.right{
	padding:5px;
	width:50%;
	float:right;
	display: flex;
	justify-content: right;
}
div.contentForm div.el span.center{
	width:100%;
	display: flex;
	justify-content: center;
}
div.contentForm div.el span.left label{
	font-size:20px;
	padding: 35px 0 0 10px;
}
div.contentForm div.el:nth-child(even) {background:#EFEFEF}
div.contentForm div.el:nth-child(odd) {background: #fff}
div.contentForm div.el:last-child {background: #fff}



p.feedback{
	margin: 20px auto;
	width: 60%;
	min-height:100px;
	padding:15px;	
}
p.green{
	border:3px solid #8ED791;
	background-color:#C0F1C8;
	border-radius:10px;
	box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.29);
}
p.red{
	border:3px solid #F00;
	background-color:#FFD2D2;
	border-radius:10px;
	box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.29);
}
p.orange{
	border:3px solid #F60;
	background-color:#FFDCB9;
	border-radius:10px;
	box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.29);
}
table.fullWidth{
	width: 100%;	
}
tr.tableHeader{
	background-color:#666;
	color:#fff;	
	font-weight:bold;
}
.right{
	float:right;	
}
div.dialogWidth{
	width:800px;	
}

table.smallTableFontSize{
		font-size:12px;
}
td.width2,th.width2{
	width:05px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}
td.width5,th.width5{
	width:5%;	
}
td.width10,th.width10{
	width:10%;	
}
td.width15,th.width15{
	width:15%;	
}
td.width20,th.width20{
	width:20%;	
}
td.width30,th.width30{
	width:30%;	
}
td.width40,th.width40{
	width:40%;	
}
td.width50,th.width50{
	width:50%;	
}
td.width65,th.width65{
	width:65%;	
}
td.width80,th.width80{
	width:80%;	
}
td.width100,th.width100{
	width:100%;	
}
td ul li{
	line-height:166%;	
}
td ul li ul li{
	margin:5px 0 0 25px;	
}
th.vertText{
    transform-origin:50% 50%;
    transform: rotate(90deg);
	height:150px;;
}
/*table.pure-table tbody tr td:contains("Medium"){ background-color: yellow; }*/


#returnToTop {
    position: fixed;
    bottom: 2em;
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.80);
    font-size: 12px;
    padding: 1em;
    display: none;
}

#returnToTop:hover {    
    background-color: rgba(135, 135, 135, 0.50);
}









a:link{
	color:#333;	
}
a:visited{
	color:#333;	
}
a:hover{
	color:#39F;	
}
a:active{
	color:#333;	
}
table.pure-table tr.pure-table:nth-child(even) { background-color:#EFEFEF}
table.pure-table tr.pure-table:nth-child(odd) { background-color:#fff}
/*div.dtgBox{
	width:300px;
	height:300px;	
}*/
div.circle{
	min-width:45px;
	height:45px;
	border-radius:50%;	
	padding:5px;
	display: inline-block;
	border: 2px solid #666;
    color: #666;
}
div.circle span{
	font-size:18px;
	min-width:45px;
	height:45px;
	margin-top:12px;
	display: inline-block;
	font-weight:bold;
	text-align:center;
}
div.red {
	background-image: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%);
	color:#fff;
}
div.orange{
	background-image:linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#FC3 51%,#fb955e 100%);
	/*background-image:linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%);*/
	color:#fff;
}
div.yellow{
	background-image:linear-gradient(to bottom, #fefcea 0%,#f1da36 100%);;
	color:#000;
}
div.green{
	background-image:linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
	color:#000;
}
div.blue{
	background-image:linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
	color:#000;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}