:root {
  --light: #DCDBD2;
  --medium: #9A9383;
  --dark: #6B6655;
  --back: #716c5b;
}


body {font-family: Arial, Helvetica, sans-serif;}
      
#A1 {background-image: url('images/background-image.png');}
#A2 {color: var(--dark); font-size: 35px;}
#A3 {color: var(--dark); font-size: 14px;}
#A4 {color: var(--dark); font-size: medium;}
#A5 {color: var(--medium); font-size: 25px;}
#A6 {color: var(--dark); font-size: xx-large;}
#A7 {color: var(--medium); font-size: x-large;}     
#A8 {color: var(--dark); font-size: 20px;}   
#A9 {color: var(--dark); font-size: large;} 
#A10 {color: var(--dark); font-size: medium;}
#A11 {font-size: small;}
#A12 {color: var(--dark); font-size: x-large;}
    
.button {
  background-color: var(--medium); /* Big button */
  border: none;
  color: var(--light) !important;
  padding: 15px 15px; /* 15px 32px;*/
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition-duration: 0.4s;
  width: 80%;
}

.disabled {opacity: 0.6; cursor: not-allowed;}
      
.button:hover {
  background-color: var(--light) !important;
  color: var(--dark) !important;
  border: 2px solid var(--medium);
  text-decoration: none;
}

input[type=text],  input[type=email], select {
  padding: 3px 5px;
  margin: 4px 0;
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
  color: var(--dark);
  background-color: var(--light);
  border-radius: 4px;
}

textarea {
  width: 100%;
  padding: 3px 5px;
  margin: 4px 0;
  box-sizing: border-box;
  font-size: 18px;
  border: 1px solid #555;
  outline: none;
  color: var(--dark);
  background-color: var(--light);
  border-radius: 4px;
  text-align: left;
}
      
input[type=submit] {
  padding: 6px 10px;
  margin: 8px 0;
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
  color: var(--light);
  background-color: var(--dark);
  border-radius: 4px;
}
 
.sendbutton {
  background-color: var(--medium); /* Big button */
  border: none;
  color: var(--light); 
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px;
  transition-duration: 0.4s;
  width: 30%;
}

.sendbutton:hover {
  background-color: var(--light); 
  color: var(--dark);
    border: 2px solid var(--medium);
}

#modalContainer {
	background-color:rgba(0, 0, 0, 0.3);
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
	background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
	position:relative;
	width:300px;
	min-height:100px;
	margin-top:50px;
	border:1px solid #666;
	background-color:#fff;
	background-repeat:no-repeat;
	background-position:20px 30px;
}

#modalContainer > #alertBox {
	position:fixed;
}

#alertBox h1 {
	margin:0;
	font:bold 0.9em verdana,arial;
	background-color:#3073BB;
	color:#FFF;
	border-bottom:1px solid #000;
	padding:2px 0 2px 5px;
}

#alertBox p {
	font:0.7em verdana,arial;
	height:50px;
	padding-left:5px;
	margin-left:40px; 
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:7px;
	border:0 none;
	width:70px;
	font:0.7em verdana,arial;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color:#357EBD;
	border-radius: 3px;
	text-decoration:none;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*                                     Menu System styling                              */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 
.myTopnav {
  overflow: hidden;
  background-color: var(--medium); /* Normal menu button background color */
}

.myTopnav a {
  float: left;
  display: block;
  color: var(--light); /* Normal menu button text color */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home {
  background-color: var(--dark);
}

.back {
  background-color: var(--back);
}

.active {
  background-color: var(--dark); /* Normal menu "Home" button background color */
  color: var(--light); /* Normal menu "Home" button text color */
}

.myTopnav .icon {
  display: none;
  background-color: var(--light) !important;
  color: var(--medium) !important; /* Icon text color */
}

.myDropdown {float: left; overflow: hidden;}

.myDropdown .myDropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: var(--light); /* Normal drop-down menu button text color */
  padding: 14px 16px;
  background-color: inherit; 
  font-family: inherit;
  margin: 0;
}

.myDropdown-content {
  display: none;
  position: absolute;
  background-color: var(--medium); /* not used??? */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.myDropdown-content a {
  float: none;
  color: var(--dark); /* Dropped-down menu item text color */
  background-color: var(--light); /* Dropped-down menu item background color */
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.myTopnav a:hover, .myDropdown:hover .myDropbtn {
  background-color: var(--light); /* Hovered menu item background color */
  color: var(--medium); /* Hovered menu item text color */
}

.myDropdown-content a:hover {
  background-color: var(--medium); /* Hovered drop-down item background color */
  color: var(--light); /* Hovered drop-down item text color */
}

.myDropdown:hover .myDropdown-content {display: block;}

@media screen and (max-width: 800px) {
  .myTopnav a:not(.alwaysDisplay), .myDropdown .myDropbtn {display: none;}
  .myTopnav a.icon {float: right; display: block;}
}

@media screen and (max-width: 800px) {
  .myTopnav.responsive {position: relative;}
  .myTopnav.responsive .icon {position: absolute; right: 0; top: 0;}
  .myTopnav.responsive a {float: none; display: block; text-align: left;}
  .myTopnav.responsive .myDropdown {float: none;}
  .myTopnav.responsive .myDropdown-content {position: relative;}
  .myTopnav.responsive .myDropdown .myDropbtn {display: block; width: 100%; text-align: left;}
} 

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*                                   End of Menu System Styling                         */
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/