/*
   DV
   Written:  06/02/17
   Revised:  06/07/17
   Revised:  06/08/17
   Revised:  06/13/17
   Revised:  07/07/17 
   Revised:  07/10/17
   Revised:  07/11/17
   Revised:  07/13/17
   Revised:  07/14/17
   Revised:  07/15/17
   Revised:  07/16/17
   Revised:  07/17/17
   Revised:  07/18/17
   Revised:  07/19/17
   Revised:  07/20/17
   Revised:  07/21/17
   Revised:  07/24/17
   Revised:  07/25/17
   Revised:  07/27/17
   Revised:  07/30/17
   Revised:  07/31/17
   Revised:  08/01/17
   Revised:  08/15/17
   Revised:  08/16/17
   Revised:  01/22/19 - css for openenroll
	Revised:  01/23/21 - css for .error
	Revised:  06/14/21 - css for safetyOSHA.html
	Revised:  06/25/21 - css for safetyOSHA.html
	Revised:  01/05/23 - css for MN Fire & Rescue School Ad

Color Scheme for my Site:
Base color: #990000 - deep red - rgb(153, 0, 0) - hsl(0, 100%, 30%)
Accent color: #0b70c1 - blue - rgb(11, 112, 193) - hsl(207, 89%, 40%)
Accent color: #f4e23e - yellow - rgb(244, 226, 62) - hsl(54, 89%, 60%)
Accent color: #0000ff - EMS blue - rgb(0, 0, 255) - hsl(240, 100%, 50%)
Accent color: #00802b - Safety Green - rgb(0, 128, 43) - hsl(140, 100%, 25%)
Light gray: #F8F8F8
Medium gray: #929087 - rgb(146,144,135) - hsl(49, 5%, 55%)
Dark gray: #1a1a1a - rgb(26, 26, 26) - hsl(0, 0%, 10%)

*/

#pageIndex, #pageFire, #pageMisc, #pageEmail, #pageSafety {
   width: 90%; /* Width of page in browser */
   margin-left: auto;
   margin-right: auto;
   /* Add some borders and colors */
   border: 0.4em solid #929087;
   border-style: inset;
   padding-left: 5%;
   padding-right: 5%;
   padding-bottom: 5%;
  
}

#pageIndex, #pageMisc {
   background-image: url("graphic/metal.jpg");
   background-size: cover;
}

#pageSafety {
   background-image: url("graphic/safety4.jpg");
   background-size: cover;
}

#pageFire {
   background-image: url("graphic/lpBurn9.jpg");
   background-repeat: no-repeat;   
}

#pageEmail {
   background-image: url("graphic/smokeAndFF.jpg");
   background-repeat: no-repeat;
}

body {
   font-family: "Trebuchet MS", Helvetica, sans-serif;
   font-size: 100%;
   background-color: #1a1a1a;
   color: #1a1a1a;
   margin: auto;
   padding: 2%;
   padding-right: 3%;
}
#content{
	margin-top:2%;
}
#content, #firetraining {
   overflow: auto;
}

#header1 {
   width: auto;
   height: 20.7em;
   padding-top: 1em;
}

#header2 {
   width: auto;
   height: 4em;
   padding-top: 1em;
}

/* css for address information on index.html*/

img.address {
   
   background-color: #8c8c8c;
   padding: 1%;
   border: 2px solid #F8F8F8;
   border-style: outset;
   -moz-box-shadow: 10px 10px 10px 10px #1a1a1a;
   -webkit-box-shadow: 10px 10px 10px 10px #1a1a1a;
   box-shadow: 10px 10px 10px 10px #1a1a1a;
   /*margin-right: 15px;*/
	margin-left: 4%;
   margin-top: 4%; /*30px;*/
   color: #1a1a1a;
   float: left;/*right;*/
   width: 25%;/*40%;*/
}

span#sascs {
   color: #f4e23e;
   text-transform: uppercase;
   font-size: 132%;
   word-spacing: .2em;
   line-height: 1.4em;
}


/* css for images */

img.large {
   border-style: outset;
   -moz-box-shadow: 10px 10px 10px 10px #1a1a1a;
   -webkit-box-shadow: 10px 10px 10px 10px #1a1a1a;
   box-shadow: 10px 10px 10px 10px #1a1a1a;
   margin-right: 15px;
   float: left;
   display: block; 
   width: 35%; 
} 

img.xxlarge {
   width: 100%; 
}

img.medium {
   border-style: outset;
   float: left;
   display: block; 
   width: 23.5%;
   margin-left: 6%; 
 } 

img.medium2 {
   border-style: outset;
   float: left;
   display: block; 
   width: 15%;
   margin-left: 0%; 
	margin-right; 5%;
 } 
 
 img.medium3 {
   border-style: outset;
   float: left;
   display: block; 
   width: 47%;
   margin-left: 4%; 
 } 


img.medium4 {
   border-style: outset;
   float: center;
   display: left; 
   width: 36%;
   margin-left: 3%;
 } 
 
 img.medium5 {
   border-style: outset;
   float: left;
   display: block; 
   width: 28%;
   margin-left: 3%; 
} 
img.oshatraining {
   width: 50%;
   margin-top: 1%;
   float: left;
	margin-left: 10%;
   display: block;   
}

img.firetraining {
   width: 50%;
   margin-top: 5%;
   float: left;
   display: block;   
}

/* css for fireTraining.html */


nav.fire {
   float: left;
   margin-right: 0px;
   margin-top: 0%;
   padding-top: 3%;
   padding-left: 3%;
   padding-bottom: 0%;
}

h2.fire2 {
   text-decoration: none;
   color: #1a1a1a; 
   text-align: center; 
   background-image: url("graphic/fireOrange.jpg"); 
   padding-top: 2%;
   padding-bottom: 2%;
   margin: 0%;
}

a.nfpa1001 {
   text-decoration: none;
   color: #1a1a1a;
   font-weight: bold;
}

/* css for safetyOSHA.html */

h2.safety2 {
   text-align: center;
   -moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
   box-shadow: 3px 3px 3px 3px #1a1a1a;
   font-size: 128%;
   padding: 8px 0px;
   margin: 8px;
   border-style: outset;
   border-color: #929087;
   font-family: Times New Roman, Times, serif;
   letter-spacing: 0.1em;
   word-spacing: 0.2em;
	background-color: #f4e23e;
   opacity: 0.8;
}

a.safety {
   text-decoration: none;
   color: #00802b;
   font-weight: bold;
}

.columnsafety {
   width: 31%;
   height: auto;
   float: left;
   margin-right: 3%;
   font-size: 105%;
   font-weight: bold;
   padding-right: .15%;
}

/* css for index.html-About Us, Email SASCS, Instructors Login*/

nav{
	display: flex;
	flex-wrap: wrap;
}
		
nav.choice a{
	text-decoration: none;
   display: block;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	padding-left: 10px;
   text-align: center;
	background-color: #ffe23e;
   opacity: .7;
   color: #1a1a1a;
   margin-top: 0;
	margin-bottom: 1%;
   font-family: sans-serif;
	float: left;
	border: 1px solid #1a1a1a;
}

nav.choice a:hover {
   color: #ffe23e;
   cursor: pointer;
   background-color: #990000;
}


/* css for instructor directory page */

div#directoryheading h1 {
   font-family: Times New Roman, Times, serif; 
   font-weight: bold; 
   text-align: center;
   letter-spacing: .05em;
   word-spacing: .2em;
   background-color: #929087;
   color: #1a1a1a;
   font-size: 250%;
   -moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
   box-shadow: 3px 3px 3px 3px #1a1a1a;
}

ul.directory {
   font-size: 120%;
}

.dirline {
   line-height: 1.5em;
   font-weight: bold;
}

ul.directory li {
   display: inline;
}

nav#directory a {
   text-decoration: none;
   margin-right: 2%;
   padding: 0.2%;
   padding-left: 1%;
   padding-right: 1%;
   background-color: #f4e23e;
   font-size: 80%;
   color: #1a1a1a;
   border: 1px solid #1a1a1a;
   -moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
   box-shadow: 3px 3px 3px 3px #1a1a1a;
}

.calendar {
   position: relative;
   padding-bottom: 67.5%;
   height: 0;
   margin-top: 10%;
   overflow: hidden;
}

iframe:focus {
   outline: none;
}

.calendar iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
  
.schedule a{   
   background-color: #990000;
   border: 1px solid #1a1a1a;
   padding-left: 1%;
   padding-right: 1%;
   float: right;
   text-decoration: none;
   color: #F8F8F8;
   -moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
   box-shadow: 3px 3px 3px 3px #1a1a1a;
   font-size: 190%;
}


/* css for facebook image on index.html */
   
.fb {
   float: right;
   margin: 0%;
}

.column1, .column2, .column3 {
   width: 31%;
   height: auto;
   float: left;
   margin-right: 3%;
   font-size: 105%;
   font-weight: bold;
   background-color: #F8F8F8;
   padding-right: .15%;
}

.column4, .column5 {
   width: 45%;
   height: auto;
   float: left;
   margin-right: 2%;
   margin-left: 2%;
   margin-top: 3%;
   font-weight: bold;
   background-color: #F8F8F8;
}

.column3 {
   margin-right: 0%;
}

.column5 {
   margin-left: 0%;
}

.asidespecial {
   float: right;
}

.description {
   display:    none;
   padding:    .5%;
   font-style: italic;
}

button {
   font-size: 1em;
   border: 0px;
   padding-left: 0px;
   padding-right: 0px;
   background-color: #F8F8F8; 
   font-weight: bold;
}

button:hover, a.nfpa1001:hover{
   color: #990000;
   background-color:#929087; 
   border: 0px;
   cursor: pointer;
}

/* Home Button */

a.home {
   margin-top: 2%;
   font-size: 100%;
   font-weight: bold;
   background-color: #f4e23e;
   text-decoration: none;
   padding:.4%;
   border-radius: 10px;
   color: #929087;
   float: right;
   margin-right: 1%;
   border: 2px solid #1a1a1a;
   width: 10%;
   text-align: center;
}

a.home:hover {
   opacity: .8
}

img.indexSchool {
	-moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
   box-shadow: 0 0 60px  #cc0000;
   margin-right: 2%;
   margin-top: 8%;
   float: right;
   width: 25%;
}

img.indexSchool:hover {
   opacity: .8;
	box-shadow: 0 0 60px  yellow;
	border-style: inset;
} 

img.fireSchool {
   float: left;
   width: 25%;
   margin-left: 25%; 
   margin-top: 2%;
	-moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
	box-shadow: 0 0 100px  #99ff66;/*#ffffff; cc0000; */	
 } 
 
img.fireSchool:hover {
   opacity: .8;
	box-shadow: 0 0 100px  yellow;
	border-style: inset;
} 

/*Open Enroll Button*/
/*a.openenroll {
	margin-top: 2%;
   font-size: 130%;
   font-weight: bold;
   background-color: #F8F8F8;
   text-decoration: none;
   padding:1%;
   border-radius: 10px;
   color: #990000;
   float: right;
   margin-right: 1%;
   border: 6px solid #990000;
   width: 30%;
   text-align: center;
}

a.openenroll:hover {
   opacity: .8;
}

span.smalldetails {
	font-size: 60%;
	color: #1a1a1a;
	font-style: italic;
}*/

/* css for categories on index.html*/

h2.emstitle, h2.firetitle, h2.safetytitle {
   text-align: center;
   -moz-box-shadow: 3px 3px 3px 3px #1a1a1a;
   -webkit-box-shadow: 3px 3px 3px 3px #1a1a1a;
   box-shadow: 3px 3px 3px 3px #1a1a1a;
   font-size: 128%;
   padding: 8px 0px;
   margin: 8px;
   border-style: outset;
   border-color: #929087;
   font-family: Times New Roman, Times, serif;
   letter-spacing: 0.1em;
   word-spacing: 0.2em;
   }
   
h2.emstitle {
   background-color: #0000ff;
   }   
   
h2.firetitle {
   background-color: #990000;
   }   

h2.safetytitle {
   background-color: #00802b;
   }      
   
a.title{
   text-decoration: none;
   color: #f4e23e; 
   padding: 9px;
}   

#content h2:hover {
   opacity: .8;
   border-style: inset;
}
  
ul.subject {
   list-style-type: square;
}   

li.subject {
   padding-right: 5px;
   padding-left: 5px;
   font-size: 1.1em;
   margin-top: 2%;
   margin-bottom: 1%;
   font-weight: bold;
}

/* CSS for email form*/
label {
   display: block;
   margin-top: 20px;
   letter-spacing: 2px;
   font-size: 1.2em;
   font-weight: bold;
   /*color: #F8F8F8;*/
}

.error {
	color: red;
}

.success {
	color: #ff9966;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

/* Center the form within the page */
form#emailus {
   margin: auto;
   margin-top: 3em;
   width: 40%;
}

/* Style the text boxes */
input, textarea {
   width: 100%; 
   height: 20px;
   background: #F8F8F8;
   border: 2px solid #929087;
   padding: 10px;
   margin-top: 3px;
   font-size: .9em;
   color: #1a1a1a;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
}

#human {
   width: 20%;
	text-align: center;
}

textarea {
	height: 280px;
}

input:focus, textarea:focus {
   border: 1px solid #929087;
}

#submit {
   width: 30%;
   height: 38px;
   cursor: pointer;
   margin-top: 2%;
   float: right;
   font-size: 100%;
   font-weight: bold;
   background-color: #f4e23e;
   padding: .5%;
   border-radius: 10px;
   color: #929087;
   border: 2px solid #1a1a1a;
}

#submit:hover {
	opacity:.8;
}

/* ---------------- */

 
   
#about, .dir {
   background-color: #F8F8F8;
   padding: .5em 1em;
   margin-top: 5em;
   border: 2px solid #929087;
}