/* CSS FILE FROM THEFORENSICNURSE.ORG/newsite/ */
   
@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 { /* had an a in here for some reason */
	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: 16px/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; 
}

.modalFix {
	position:fixed;
	height:100%;
	overflow:auto;
	width:100%;
  -webkit-overflow-scrolling:touch; /* this webkit is for Apple touch screens to scroll smoothly */

}

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

#top > footer {
  background-image: url(images/content-bg.png);
  background-size:100% 100%;
  color:#FFF;
  text-align:justify;
  font-size:0.85em;
  line-height:1em;
  border: 1px solid #0a7e8b;
}

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

.footer-tooltip a:hover{
  trigger:"hover", delay:{"show":400,"hide":800}
}

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

#tfn-g-image {
  width:80%;
}

.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.5em auto 1em;
}
#nurse {
  display:block;
	max-width:100%;
	margin:0em auto;
}

#florida-seal {
  text-align:left;
  float:left;
  width:100%;
  max-width:10%;   
}

/* END image formatting */

#ytWidget {
  text-align:center; 
  padding-top:1em;    
}

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

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

#mainMenu { 
  background-color: #181818;
  width: 70%;
  border-top:0.33em 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 {
	display:inline;
  padding:0.6em 0.6em 0.05em 0.6em; /* 0.6em 1.66em 0.05em 1.3em */
  margin-right:auto;
  line-height: 2.5em ;
	font-family:arial, sans serif;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	font-size:0.875em;
	color:#fff;
}

#mainMenu a:focus,
#mainMenu a:hover {
	color:#02e0f8;
  background-color:#07343c;
  border-top: 0.33em solid #0F707E; 
  padding-top:0.7em;
  padding-bottom:0.7em;
}

h1 {
	position:relative;
	padding:0.5em 0.5em 0em 0.5em;/* 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:150%;
	background:url(images/header-people.jpg) 0 0 no-repeat;
	background-size:100% 100%;/* Only use this */
}

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:auto;
  margin-top:59px;
}

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

main h2 br {
  display:none;
}

main h2 {
  color:#FFF;
}

main small{
  color:#ffffff;
  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%;
}

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

section p {
  padding: 0.5em 1em 0em;
}
.row-container div{
  width: 70% 30%;
}
.row-container {
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  position:relative;
  margin:0 0 0em;
  border-left:1px solid #0a7e8b;
  border-bottom:1px solid #0a7e8b;
}
.row-container div:nth-of-type(2) {
  box-sizing: border-box;
  padding: 1em;
}

#index-intro {
  width:70%;
  background:url(images/content-bg.png);
  background-size: cover;
  color:#8cd2de;
  line-height:2em; 
  margin-right:0;   
}

a {
  color: white;
}

.extras-tfn-logo {
  display:flex;
  width:30%;
  background:white;
  justify-content: center;
  align-items: center;
  float: right;
}

.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(253,235,185,0.9);
	color:yellow;/*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;
	overflow:hidden;/* was hidden */
	width:100%; 
	top:-50vh;	
	max-width:40em;
	background:#777E3B;
	border-radius:0.5em;
	border:1px solid #0002;
	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:red;
}


.modal section h2 {
	display:block;
	padding:0.25em 0.5em;
	font-size:1em;
	font-weight:bold;
	background:#D3DA93;
	color:#000;
	box-shadow:
			0 0 1px 1px #0008,
			0 0.25em 0.5em 0.25em #0002;
}

.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:black;/* input text color */
	background:#D3DA93;
	border:1px solid #0002;
	border-radius:0.25em;
}

#contact input:focus,
#contact textarea:focus {
	outline:none;
	box-shadow:0 0 0.5em 0.125em #C60;/*#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:#D3DA93;
	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:60em) {
  #top {
    padding:0;
	}
	#mainMenu,
	#top {
		border-width:0px 0;
	}
	#tfn-gold-text {
	  float:left;
	  height: 70%;
    padding:1em 0 0 0.25em;
    border:0;
  }  
  main {
    margin-top:43px;
  }
  h1 {
		font-size:4.6875vw;
		margin-top:65px;
		border:0;
	}
  section {
    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 .donations a {
	color:red;
  }
	#mainMenu,
	#mainMenu > label {
		position:absolute;
		overflow:auto;
		z-index:100;
		top:0;
		left:0;
		width:100%;
		}
		
/* page bg color, menu positioning and transition onto screen */
  #mainMenu {
  /* Added line below 10 Feb 22 - makes pg bg color fill the screen */
    padding:9em 5em 32em 5em;  
		left:-100vw;
		background:rgba(250,246,207,0.9);
		opacity:0;
		transition:opacity 0.5s, left 0s 0.5s;
	}
/* Centering links in their boxes */	
	#mainmenu a {
    margin: auto;	
	}
	#mainMenu .modalClose {
		display:block; /* override "hidden" attribute */
	}
	#mainMenu div {
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		min-height:100%;
		padding:1em; /* Doesn't seem to do anything */
	}
/* Max-width of menu window, bg color of main menu items/boxes, menu window border styling*/	
	#mainMenu nav {
		position:relative;
		top:-50vh;
		overflow:hidden;
		max-width:25em;
		background:#777E3B;
		border-radius:0.5em;
		box-shadow:
			0 0 1px 1px #0008,
			0 0.25em 0.5em 0.25em #0002;
		transition:top 0.5s;
	}
/* Styling menu window header */	
	#mainMenu nav:before {
		content:"Main Menu";
		color:black;
		display:block;
		padding:0.25em 1em;
		margin-bottom:0.5em;
		font-weight:bold;
		background:#D3DA93;
		border-bottom:1px solid #0128;
	}
/* Styling of the closing x on the right of the menu window */	
	#mainMenu nav > label:first-child:before {
		content:"x";
		color: red;
		position:absolute;
		font-size:1.5em;
		line-height:1em;
		top:0.1em;
		right:0.15em;
	}
/* Styling of the gaps around the menu items */	
	#mainMenu ul {
		flex-wrap:wrap;
		padding:0 0.25em 0.25em 0;
		margin-top:-0.5em; /* Added to make the top gap between the main menu items and the header smaller otherwise it has a larger gap than normal */ 
	}
	#mainMenu li {
		width:50%;
		padding:0.25em 0 0 0.25em;
	}
/* Styling of the menu item boxes and their background color */	
	#mainMenu a {
	  display:block;
		padding:0.15em 0.15em;
		text-align:center;
		background:#F6F9D9;
		color:#000;
		font-weight:600;
	}
/* Styling the menu items when hovered over or when focused */	
	#mainMenu a:focus,
	#mainMenu a:hover {
    display:block;/* Added 18th Feb to stop the hover/focus action making the background a different size and pushing items below down */
    padding:0.15em 0.15em; /* Added 18th Feb to stop the hover/focus action making the background a different size */
    background:#F6F9D9;
    border:0;
    color: red;
	} 
	#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:45em) {
  #tfn-gold-text {
	  width:50%;
  }
  p {
  line-height:1.3em;
  }
  footer {
    Z-Index:99;
  }
  /* Gap between the bottom of the header image and the main.section element below */
  main {
    margin-top:0em;
  }
  .row-container {
    border:0;
  }
  #index-intro {
    margin-top:1em; /* Added */
    width:100%;
    border:1px solid #0a7e8b;
  }
  .row-container div {
    width:100%;
    display: flex;
    flex-direction: column;
  }
  .row-container div:nth-child(1) { order: 1; }
  .row-container div:nth-child(2) { order: 2; }
}

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

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