body{
	padding: 0px;
}

header{
	display: block;
	position:fixed;
	top:0px;
	left: 0px;
	z-index: 50;
	background-color: white;
	text-align: left;
	vertical-align: middle;
	border-bottom: 4px groove black;
	box-shadow: 0px 5px 8px #555555;
	padding: 5px;
	width: 100%;
	
}
#thePage{
	width: 100%;
	display: block;
	text-align: center;
	margin-top: 150px;
	padding-top: 20px;
	padding-right: 0px;
	padding-left: 0px;
}


/* FONTS*/
	.stdFont{
		font-family: verdana,sans-serif;
		color: black;
	}
	.negFont{
		font-family: verdana,sans-serif;
		color: white;
	}
	.flashFont{
		font-family: verdana,sans-serif;
		color: red;
		text-shadow: 2px 2px 3px #FFFFFF;
		font-weight: bold;
	}
	.alarmFont{
		font-family: verdana,sans-serif;
		color: white;
		background-color: slateGrey;
		font-weight: bold;
	}

	h1, .title{
		text-shadow: 2px 2px 5px #cccccc;
		font-size: 18pt;
		font-weight: bold;
		text-decoration: underline;
		font-variant: small-caps;
	}
	h2, .subtitle{
		font-size: 14pt;
		font-weight: bold;
		font-variant: small-caps;
	}

	h3, .std3{ /*std3*/
		font-size: 12pt;
		text-decoration: none;
		font-weight: normal;
	}
	h4, .std2{ /*std2*/
		font-size: 10pt;
		text-decoration: none;
		font-weight: normal;
	}
	h5, .std1{ /*std1*/
		font-size: 8pt;
		text-decoration: none;
		font-weight: normal;
	}

	
/* LINKS*/
	a.link{
		color: #0000FF;
		text-decoration: underline;
		padding: 3px;
	}

	a.link:visited{
		color: darkSlateBlue;
		text-decoration: underline;
		padding: 3px;
		
	}
	a.link:hover{
		background-color: #dddddd;
		color: red;
		text-decoration: none;
		padding: 3px;
	}


/* Pictures and icons*/
	.picStd{
		max-width: 100%;
		border-radius: 10px;
		box-shadow: 0px 5px 8px #555555;
	}

	#logoBox{
		 display: inline;
		 float: left;
	}
	
/* Boxes and pads*/
	.box{
		border-left: solid 1px #555555;
		border-bottom: solid 1px #999999;
	}
	.pad{
		display: block;
		/*background-color: seaShell; */
		text-align: left;
		padding: 5px 30px 5px 30px;
		border-radius: 10px;
		box-shadow: 2px 2px 5px #555555;
		width: 80%;
		margin-bottom: 20px;
	}
	
	.full_width{
		width: 90%;
		margin: auto;
	}
	
	.padNoBG{
		text-align: center;
		padding-left: 30px;
		padding-right: 30px;
		margin: auto;
	}

	.form{
		border: 1px solid red;
		font-family: verdana,sans-serif;
		font-size: 12pt;
		color: black;
		background-color: #eeeeee;
	}
/* SWITCH */
 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
}

/* 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: #000000;
}

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

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

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

.slider.round:before {
  border-radius: 50%;
} 
/* MENUS */
/* Full screen menu*/
	#menu{
		z-index: 55; 
		position: relative; 
		margin: auto; 
		background-color: red;
		padding: 5px;
		display: block;
	}

	#navbar{
		float: right;
		margin-right: 20px;
		margin-top: 35px;
	}
	.topMenu{
		font-family: verdana, sans-serif;
		color: #ffffff;
		font-size: 18px;
		font-style: italic;
		font-weight: bold;
		text-decoration: none;	
		
		display: inline;
		border-right: solid 1px #ffffff;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.topMenu:hover{
		box-shadow: 2px 2px 5px #cccccc;
		background-color: #dddddd;
		color: #c0473e;
	}

	/* with menu icon*/
		#navicon{
			float: right;
			margin-right: 50px;
			margin-bottom: 10px;
			/* max-width: 40px; */
			margin-top: 15px;
		}
		#navIconPic{
			height: 40px;
			margin-bottom: 15px;
		}
		.dropbtn{
			display: inline-block;
		}
		.dropdown-content {
			display: none;
			position: relative;
			top: 10px;
			/* left: -250px; */
			z-index: 10;
		}
		.dropdown-content li {
			display: block;
			text-align: left;
			width: 300px;
			font-family: verdana, sans-serif;
			font-size: 14pt;
			font-weight: bold;
			color: #493d2f;
			text-decoration: none;
			padding: 4px 8px;
			background-color: #dddddd;
			border-bottom: solid 3px #493d2f;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		.dropdown-content a {
			display: block;
			text-align: left;
			width: 300px;
			font-family: verdana, sans-serif;
			font-size: 14pt;
			color: #493d2f;
			text-decoration: none;
			padding: 4px 8px;
			background-color: #ffffff;
			border-bottom: solid 1px #493d2f;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}
		.dropbtn:hover .dropdown-content{
			display: block;
			width: 10px;
		}
		.dropdown-content a:hover {
			color: #ff0000
		}
		
	/* Bottom menu area*/
		#bottom_buffer{
			display: block;
			min-height: 50px;
		}
		
		footer{
			display: block;
			width: 100%; 
			font-size: 8pt;
			color: white;
			text-align: center;
			position: fixed;
			z-index: 5;
			bottom: 0px;
			left: 0;
			background-color: red;
			border-top: 3px groove #c0473e;
		}
 
/* END MENUS */
		
/* -------------------------------------------- ADAPTATIVE LAYOUT */

/* Base for adaptative layout - common to all 3 sizes*/
	.clearfix::after {
		content: "";
		clear: both;
		display: table;
	}


/********************************** ADAPTATIVE VARIABLES ****************************************/
/*** option 1 Large screen ***/
@media screen and (min-width: 1300px) {
	#header{
		height: 100px;
	}
	#navbar{
		display: inline-block;
		margin-left: 50px;
		max-width: 1100px;
	}
	#logo{
		height: 90px;
		/* width: 200px; */
	}
	#navicon{
		display: none;
	}
}

/*** option 2 Tablets ***/
@media screen and (max-width: 1299px) and (min-width: 746px) {
 	#header{
		height: 100px;
		width: 100%;
		margin: 0px;
	}
	#navbar{
		display: none;
	}
	#logo{
		height: 80px;
	}
	#navicon{
		display: inline-block;
	}
}
/*** option 3 ***/
/*** Small-sized layout (mobile - portrait)***/
@media screen and (max-width: 745px){
	h1, .title{
		font-size: 20pt;
	}
	h2, .subtitle{
		font-size: 15pt;
	}
	h3, .std3{
		font-size: 12pt;
	}
	h4,.std2{ 
		font-size: 10pt;
	}
	.form{
		font-size: 9pt;
	}
	#header{
		margin-left: 0px;
		max-width: 100%;
	}
	#navbar{
		display: none;
	}

	#navicon{
		display: inline-block;
		float: left;
	}
	#logoBox{
		width: 200px;
		margin-right: 10px;
		float: right;
	}
	#logo{
		width: 200px;
	}
	#thePage{
		margin-top: 50px;
	}	
}