/* CSS FILE FROM THEFORENSICNURSE.ORG */

@font-face {
  font-family: 'Oswald-Bold';
  src: url(fonts/Oswald-Bold.eot);
  src: url(fonts/Oswald-Bold.eot?#iefix) format('embedded-opentype'),
  url(fonts/Oswald-Bold.otf) format('otf'),
  url(fonts/Oswald-Bold.svg#Oswald-Bold) format('svg'),
  url(fonts/Oswald-Bold.woff) format('woff'),
  url(fonts/Oswald-Bold.woff2) format('woff2');
}

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html, body a {
	height:100%;
}

button,
label {
	cursor:pointer;
}

body, button, input, table, textarea, select {
	font:normal 0.994em/1.3 arial,helvetica,sans-serif; /* was 1em/1.5 */
}

h1, h2, h3, h4, h5, h6 { 
font-family: 'Open Sans', Arial, Helvetice Neue, sans-serif; 
}

body {
    font: 15px/1.85em 'Open Sans', Arial, Helvetice Neue, sans-serif;
    color: #fff;
    font-weight: 300;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
	background:#000 url(images/pagebg.jpg) repeat top center; 
    background-attachment: fixed;
}

/* Image formatting for the top of and in the main content area */
#tfn-gold-text {
    float:right;
    width: 25%;
    margin-right: 30px;
    margin-top:-70px;
}

#tfn-g-text {
    width:100%;
}

.leadingPlate,
.trailingPlate {
	width:100%;
	max-width:34.5%;
}

.leadingPlate {
	float:left;
	padding:0 0.6em 0.6em 0;
}

.trailingPlate {
	float:right;
	padding:0 0 0.6em 0.6em;
}

.plate {
    display:block;
	max-width:100%;
	margin:0 auto 1em;
}

#florida-seal {
    float:left;
    width:100%;
    max-width:10%;
    padding:5px 0px 5px 5px;    
}

/* END image formatting */

#top {
   	max-width:76em; /* was 64em */
	margin:0.65em auto; /* was 0em - 0.33em is the space between the top of the viewport & the header, auto is centering of header image */
    padding:0 0em; 
}

header {
    height:245px;  
}

#ytWidget {
    text-align:center;     
}

#top > footer {
    background-image: url(images/content-bg.png);
 	color:#FFF;    
}

#mainMenu .donations a {
	color:#FC0;
}

#mainMenu .donations a:hover {
	color:#FC0;
}

#mainMenu { 
   background-color: #181818;
   height:68px; 
   width: 68.5%;
   border-top:5px solid #1ab2c0;
   border-right: 1px solid #0a7e8b;
   border-left: 1px solid #0a7e8b;
   border-bottom: 1px solid #0a7e8b;
}



#mainMenu ul {
	list-style:none;
	display:flex;
    flex-flow:row wrap; /* added to wrap the menu onto second line */
}

#mainMenu li { /* This allows menu items to be spaced evenly */
	flex:1 0 auto;
}

/* Positioning of the menu items in relation to each other*/
#mainMenu a {
/*	position:relative; */
	display:block;
    padding:0.5em 1.66em 0.05em 1.3em;
    margin-right:auto;
    line-height: 1.9em ;
	font-family:arial, sans serif;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	font-size:.875em;
	color:#fff;
    z-index:1;
}

#mainMenu a:focus,
#mainMenu a:hover {
	color:#02e0f8;
    background-color:#07343c;
    border-top: 5px solid #0F707E;
    margin-top:-5px; 
    padding-bottom:7px; 
    margin-bottom:-0px;
    z-index:99;
}

h1 {
	position:relative;
	padding:0.5em 0.5em 0.42em 0.5em;
	font-size:3em;
	line-height:1em;
	text-transform:uppercase;
	color:#FFF;
	border-width:1px 1px 0px 1px;
}

h1 small {
	display:block;
	font-size:0.5em;
	padding-left:6em;
}

h1:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:175px;
	background:url(images/header-people.jpg) 0 0 no-repeat;
	background-size:cover; /* was contain */
}

main {
	display:block; /* IE fix */
/*	padding:0.63em 0.63em; /* 1em 1em 0.5em - padding between the image/text and the edge of the content box */
    height:600px;
}

main section h2 {
    text-align:left;
	padding-bottom:0em;
}

main h2 br {
	display:none;
}

main h2 {
	color:#FFF;
}

main small{
    color:#001D2B;
    font-size:1.5em;
    font-weight:bold;
}

main h3 {
    padding:0em 0em 0.5em;
    
}

em {
    font-weight: bold;
    line-height: 1.1em;
}

main h2 small {
	display:block;
	font-size:0.7em;
    margin-top:-0.5em; /* Gap between h2 and small */
	padding:0em 0em 0.7em;
}
main p {
	padding-bottom:1em;
}

video {
    display:block;
    margin: auto;
    padding:10px 0px;
    width: 95%;
}

/*#container {
    width:100%;
    height:auto;
}
*/
section {
    float:left;
    background:url(images/content-bg.png);
    background: contain;
    color:#8cd2de;
    line-height:2em;    
    width:70%;
    height:auto;
    padding:1.58em 1.5em;
    margin-left:0px;
    margin-top:-2px;
    border-left:1px solid #0a7e8b;
    border-bottom:1px solid #0a7e8b;
   	background: -webkit-linear-gradient(#0d636f, #08353f); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0d636f, #08353f); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0d636f, #08353f); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0d636f, #08353f); /* Standard syntax (must be last) */
}

section > h2 {
    font-size: 40px; 
	line-height: 50px; 
	color: #ffffff; 
	font-family: 'Oswald-Bold'; 
	font-weight: 800;
}

aside {
   background:white;
   text-align:center;
   padding-top:5px;
   vertical-align:middle;
   float:right;
    width:100%;
    max-width:30%;
    height:auto;
    margin-top:-2px;
}

#top > footer {
    background-image: url(images/content-bg.png);
   	background: -webkit-linear-gradient(#0d636f, #08353f); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0d636f, #08353f); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0d636f, #08353f); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0d636f, #08353f); /* Standard syntax (must be last) */
    background-size:100% 100%;
	padding:0em;
	text-align:justify;
	font-size:0.85em;
    line-height:1.4em;
    border: 1px solid #0a7e8b;
}

#top > footer p {
    padding: 5px 10px 5px 0px;
    
}

.modalFix {
	position:fixed;
	overflow:auto;
	width:100%;
	height:100%;
    -webkit-overflow-scrolling:touch;
}

.toggle {
	display:block; /* IE requires these not be hidden work */
	position:absolute; /* so hide them off screen instead */
	left:-999em;
}

.modal,
.modal > a {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.modal {
	position:fixed;
	left:-100vw;
	overflow:auto;
	background:rgba(64,32,0,0.8);
	box-shadow:inset 0 0 128px 128px rgba(0,0,0,0.5);
	color:#F80;
	opacity:0;
	transition:opacity 0.5s, left 0s 0.5s;
}

.modal > div {
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:100%;
	padding:1em;
}

.modal section {
	position:relative;
	top:-50vh;
	overflow:hidden;
	width:100%;
	max-width:40em;
	background:#000;
	border:1px solid #0a7e8b;    
	border-radius:0.5em;
	transition:top 0.5s;
}

.modal section > a:first-child:before {
	content:"x"; /* was \1F5D9 - cancellation symbol for the closing X*/
	position:absolute;
	font-size:1.5em;
	line-height:1em;
	top:0.1em;
	right:0.15em;
	color:#FFF;
}


.modal section h2 {
	display:block;
	padding:0.25em 0.5em;
	font-size:1em;
	font-weight:bold;
	background:#F80;
	color:#000;
}

.modal:target {
	left:0;
	opacity:1;
	transition:opacity 0.5s, left 0s;
}

.modal:target section {
	top:0;
}

#contact fieldset {
	padding:1em 1em 0;
}

#contact input,
#contact textarea {
	width:100%;
	padding:0.25em 0.5em;
	margin-bottom:0.5em;
	color:#FED;
	background:#420;
	border:1px solid #840;
	border-radius:0.25em;
}

#contact input:focus,
#contact textarea:focus {
	outline:none;
	box-shadow:0 0 0.5em 0.125em #C60;
}

#contact input:valid,
#contact textarea:valid {
	border-color:#630;
}

#contact input:invalid,
#contact textarea:invalid {
	border-color:#F40;
}

#contact button {
	padding:0.5em 1em;
	background:#F80;
	color:#000;
	border:none;
	border-radius:0.25em;
	transition:background 0.3s, text-shadow 0.3s;
}

#contact button:focus,
#contact button:hover {
	background:#F92;
	text-shadow:0 0 0.5em #FC8;
}

#contact .submitsAndHiddens {
	padding:0.5em 1em 1em;
	text-align:right;
}

@media (max-width:76em) {
	#top {
		padding:0;
	}
	h1 {
		font-size:4.6875vw;
		border:0;
	}
	#mainMenu,
	#top > footer {
		border-width:1px 0;
	}
}

@media (max-width:60em) {
	#mainMenu,
	#mainMenu > label {
		position:absolute;
		overflow:auto;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
    
    section {
        width:100%; 
        margin:auto;       
    }
    aside {
        width:100%;
        margin:auto;
    }
    
	#toggle_mainMenu + label {
		position:absolute;
		top:1em;
		right:1em;
		padding:0.25em;
		border:0.2em solid #FFF;
		border-radius:0.5em;
	}
	#toggle_mainMenu + label:before,
	#toggle_mainMenu + label:after {
		content:"";
		display:block;
		width:1.25em;
		height:0.25em;
		border:solid #FFF;
		border-width:0.2em 0;
	}
	#toggle_mainMenu + label:after {
		border-top:0;
	}
	#mainMenu {
		position:fixed;
		left:-100vw;
		background:rgba(64,32,0,0.8);
		box-shadow:inset 0 0 128px 128px rgba(0,0,0,0.5);
		opacity:0;
		transition:opacity 0.5s, left 0s 0.5s;
	}
	#mainMenu div {
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		min-height:100%;
		padding:1em;
	}
	#mainMenu nav {
		position:relative;
		top:-50vh;
		overflow:hidden;
		max-width:24em;
		background:#000;
		border:1px solid #0a7e8b;
		border-radius:0.5em;
		transition:top 0.5s;
	}
	#mainMenu nav:before {
		content:"Main Menu";
		display:block;
		padding:0.25em 0.5em;
		font-weight:bold;
		background:#F80;
	}
	#mainMenu nav > label:first-child:before {
		content:"X"; /* Cancellation X via UTF-8 encoding */
		position:absolute;
		font-size:1.5em;
		line-height:1em;
		top:0.1em;
		right:0.15em;
	}
	#mainMenu ul {
		flex-wrap:wrap;
		padding:0 0.25em 0.25em 0;
	}
	#mainMenu li {
		width:50%;
		padding:0.25em 0 0 0.25em;
	}
	#mainMenu a {
		padding:0.5em;
		background:#420;
		color:#FC0;
	}
	#mainMenu a:focus,
	#mainMenu a:hover {
		background:#630;
	}
	#toggle_mainMenu:checked ~ #mainMenu {
		left:0;
		opacity:1;
		transition:opacity 0.5s, left 0s;
	}
	#toggle_mainMenu:checked ~ #mainMenu nav {
		top:0;
	}
	#top > footer cite {
		display:inline;
	}
}

@media (max-width:40em) {
	main {
		padding:1em 0.5em 0.5em;
	}
}

@media (max-width:26em) {
	#mainMenu li {
		width:100%;
	}
}