@charset "utf-8";

 * {box-sizing: border-box;
}

.row: after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  width: 100%;
  float: left;
  padding: 10px;
}

/* For Desktop :  */
@media only screen and (min-width: 950px) {

	.col-1 {width: 6.67%;}
	.col-2 {width: 13.33%;}
	.col-3 {width: 20%;}
	.col-4 {width: 26.67%;}
	.col-5 {width: 33.33;}
	.col-6 {width: 40%;}
	.col-7 {width: 46.67%;}
	.col-8 {width: 53.33%;}
	.col-9 {width: 60%;}
	.col-10 {width: 66.67%;}
	.col-11 {width: 73.33%;}
	.col-12	{width: 80%;}
	.col-13 {width: 86.67%;}
	.col-14 {width: 93.33%;}
	.col-15 {width: 100%;}
}

.row2: after {
  content: "";
  clear: both;
  display: table;
}

[class*="col2-"] {
  width: 100%;
  float: left;
  padding: 10px;
}

@media only screen and (min-width: 950px) {
	.col2-1 {width: 50%}
	.col2-2 {width: 50%}
}

/*  CSS for Forms  */

input[type="text"] select, textarea {
padding: 12px;
border-radius: 5px;
font-size: 20px;
}

input[type="text"]:focus {
	border: 3px solid blue;
	
}

input[type="email"] select, textarea {
padding: 12px;
border-radius: 5px;
font-size: 20px;
}

input[type="email"]:focus {
	border: 3px solid blue;
	
}


input[type="submit"]: {
  background-color: #DCDCDC;
  color: Red;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 10px;
  float: left;
}

input[type="submit"]:hover {
  font-family: "Charlemagne Std";
	color: #C73130;
  background-color: #FAEBEB;
}

input[type="reset"]: {
  background-color: #DCDCDC;
  color: Blue;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 10px;
  float: left;
}

input[type="reset"]:hover {
  font-family: "Charlemagne Std";
	color: #C73130;
  background-color: #FAEBEB;
}



/*  End of Forms CSS */

body {
  margin-top: 2%;
  margin-bottom: 5%;
  margin-left: 10%;
  margin-right:10%;
  margin-bottom:5%;
}

img {
	max-width:100%;
	height:auto
	object-fit: scale-down}


#Container {
/* main container for everything except footer  */

	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: auto;

	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	float: right;
	color: #2D2D86;
	background-color: #FAEBEB;   /* #F4F4F4  */
		
	outline-style: none;
	outline-color: cyan;
}

#Container_Form {

	width: 75%;
	margin-left: 50px;
	margin-right: 50px;
	padding: 25px;
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 35px;
	color: #0000FF;
	line-height: 22px;
	text-align: center;
	font-weight: bold;
	
	background-color: #FAEBEB;
	
	outline-style: solid;
	outline-color: cyan;
}

#Container #Spacer {
/*  Spacer container between other main containers - Logo and Navigation  */

	background-color: #FFF;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 25px;
	clear: both;
	
	outline-style: none;
	outline-color:lime;
}

#Container #Spacer2 {
	background-color: #F4F4F4;
	height: 20px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	
	outline-style: none;
	outline-color:pink;
}

#Container #Logo 
   /*  This is the container for the PEC Logo Image    */

	img {
	clear: all;
	width: auto;
	height: auto;
	object-fit:scale-down;
	padding-left: none;
	padding-right: auto;
	margin-right: auto;
	margin-left: auto;
			
	outline-style: none;
	outline-color:red;
	}
	
#Container #Strap {
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-bottom: 10px;
	font-size: 7px;
	float: right;
	color:#F4F4F4;    
    }	

#Container #Footer {
	width: auto;
	margin-right: auto;
	margin-left: auto;
	padding-left: 5%;
	padding-right: 15%
	clear: both;
	outline-style: solid;
	outline-color:red;
}



#Container #Navbar  {
/*  This is the blue ribbon within which sit the navigation buttons  */

	background-color: none; 
	width: 100%
	margin-right: none;
	margin-left: none;
	clear: none;
	height: auto;  
	padding: none;
	margin-top: none;
	color: #E8E8E8; 
	clear: both;
	outline-style: none;
	outline-color: red;
}

#Container #Navbar #Navigation ul li a:hover {
/*  This is the button AFTER clicking for navigation  */

	font-style: italic;
	font-weight: bolder;
	text-decoration: blink;
	background-color: #FAEBEB;
	font-family: "Charlemagne Standard";
	color: #C73130;
	outline-style: solid;
	outline-color:#C73130;
}


#Container #Navbar #Navigation {
/*  This is a container that holds the navigation buttons  */
 	
	background-color: none;
	width: 100%;
	margin-top: none;
	margin-right: 0px;
	margin-left: 0px;
	
	outline-style: none;
	outline-color:green;
}  

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 1%;
  overflow: hidden;
  background-color: Blue;
}

ul.topnav li {float: left;}

.topnav li a {
  display: block;
  color: white;
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	line-height: 21px;
	text-align: center;
	font-weight: bold;
	margin-top: none;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {
	font-style: italic;
	font-weight: bolder;
	text-decoration: blink;
	background-color: #E8E8E8;
	font-family: "Charlemagne Std";
	color: #C73130;
	}

ul.topnav li a.active {
	background-color: #E8E8E8;
	color: #2D2D86;
 	font-family: "Charlemagne Std";
	font-size: 19px;
	line-height: 21px;
	text-align: center;
	font-weight: bold;
	margin-top: none;
	}

ul.topnav li.right {float: right;}

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}

/*
The following  Navbar CSS is superseded - kept only for Justin

#Container #Navbar #Navigation ul li {
/*  This is the container for the navigation boxes   

	padding-left: none;
	float: left;
	list-style-type: none;
	
	margin-top: none;
	margin-left: none
}

#Container #Navbar #Navigation ul li a {
/*  These are the navigation buttons before pressing   

	border-radius: 5px;

	color: #2D2D86;
	background-color: #E6E6F7;
	display: block;
	height: auto;
	width: 110%;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 21px;
	text-align: center;
	font-weight: bold;
	margin-top: none;
	margin-right: none;
	
	
	outline-style: solid; 
	outline-color: black;
}

*/

#Container #Banner 

img {
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	outline-style: none;
	outline-color:green;
}

#Container #PicBanner,

img {
	float: left;
	width: auto;
	height: auto;
	object-fit: scale-down;
	padding-left: 3%;
	margin-right: auto;
	margin-left: auto;
	outline-style: none;
	outline-color:red;
}

#Container #PicBanner #PicTitle {

 	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	font-weight: standard;
	margin-top: 5px;
	float: centred;
}


#Container #PicBanner2,

img {
	float: left;
	width: auto;
	height: 325;
	object-fit: scale-down;
	padding-left: 3%;
	margin-right: auto;
	margin-left: auto;
	outline-style: none;
	outline-color:red;
}


#Container #PicBanner2 #PicTitle2 {

 	font-family: Arial, sans-serif;
	font-size: 18px;
	text-align: center;
	font-weight: standard;
	margin-top: 5px;
	float: centred;
}


#Container #MapBanner

img {
	float: left;
	width: auto;
	height: auto;
	object-fit: scale-down;
	padding-left: 3%;
	margin-right: auto;
	margin-left: auto;
	outline-style: none;
	outline-color:red;
}

#Container #MapBanner #PicTitle {

 	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
	font-weight: standard;
	margin-top: 5px;
	float: centred;
}

#Container #MapWords {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #C73130;
	float: left;
	width: 350px;
	outline-style: dashed;
	outline-color:orange;
}

#Container #MapLink {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 5px;
	color: #C73130;
	width: 150px;
	float: right;
	outline-style: dashed;
	outline-color:red;
}

#Container #Content 
{
	width: 100%;
	padding-top: 15px;
	padding-right: 5%;
	padding-left: 5%;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-bottom: 10px;
	font-size: 16px;
	float: right;
	color: #2D2D86;
	background-color: #F5F5F0;   /* #F4F4F4  */
	
	outline-style: solid;
	outline-color:grey;
}

#Container #Content h1 
   /* This is the Container to carry the  Title of the body text - ie "The Company" and "Company Principal" on index/home page   */
{
	float: left;
	width: 100%;
	font-family: "Georgia Std";
	font-size: 30px;
	color: #C73130;
	font-weight: 900;
	
	outline-style: none;
	outline-color:blue	;
}

#Container #Content h2 
{
	font-family: "Charlemagne Std";
	font-size: 18px;
	font-weight: bolder;
	color: #2D2D86;
	text-decoration: underline;
}


#FormCon {
	
	font-family: "Arial";
	font-size: 18px;
	font-weight: bold;
	color: #2D2D86;
	background-color: none;
	
	outline-style: none;
	outline-color:black;
	
}
	
#FormCon2 {
	
	padding: 30px;
	font-family: "Arial";
	font-size: 18px;
	font-weight: bold;
	color: #2D2D86;
	background-color: #FFF8DC;
	
	outline-style: solid;
	outline-color:black;
	outline-width: 2px;
	
}	
	



#Footer {
	width: auto;
	object-fit: scale-down;
	margin-right: auto;
	margin-left: auto;
	padding-left: 10%;
	padding-right: 1%
		
	outline-style: solid;
	outline-color:red;
}

#Footer #Copyright {
	float: left;
	height: auto;
	width: auto;
	overflow-wrap: normal;
	background-color: #F9E3E3;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 13px;
	line-height: 25px;
	color: #C73130;
	text-indent: 2px;
	margin-top: 17px;
	margin-bottom: 30px;
	margin-right: 20px;
	padding-right:10px;
	
	outline-style: none;
	outline-color:red;
}
	
#Footer #Slogo {
	
	width: auto;
	height: 53px;
	object-fit: scale-down;
	float: left;
	
	outline-style: none;
	outline-color:blue;
}

#Phone {
	float: right;
	text-align:right;
	width: auto;
	padding: 1px;
	font-family: Arial, sans-serif;
	font-size: 15px;	
}

#Container #Content #Caveat {
	margin-right: auto;
	margin-left: auto;
	clear: both;
	float: none;
	color: #C73130;
	
	outline-style: solid;
	outline-color:red;
	
}
#Container #Content #AMP #AMPTitle {
	width: 520px;
	float: left;
	height: 40px;
	
	outline-style: solid;
	outline-color:green;	
	
}
#Container #Content #AMP #AMPCV {
	width: 260px;
	float: right;
	clear: none;
	height: 40px;
	
	outline-style: solid;
	outline-color:green;	
	
}
#Container #Content #AMP #AMPPIC {
	float: right;
	width: 200px;
	clear: both;
	padding-left: 60px;
		outline-style: solid;
	outline-color:green;	
	
	
}

 #Container #Contact {
	FLoat:right;
	border: solid
	border-color: blue;
	border-width:thick;
}

#Container #Contact #Conhead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bolder;
	width: 250px;
	height: 30px;
	text-align: left;
	text-indent: 10px;
	vertical-align: 0%;
	white-space: normal;
	line-height: 30px;
	float: right;
	background-color: #F9E6E6;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}

#Container #Contact #Condetail {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	width: 250px;
	vertical-align: 0%;
	height: auto;
	font-weight: bold;
	text-align: left;
	text-indent: none;
	line-height: 15px;
	float: right;
	clear: right;
	background-color: #FAE7E7;
	padding-top: 12px;
	padding-left: 10px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: dashed;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}