/* Style sheet created by: George Fleming 10/06/20 */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
body { /* Style for body specifies a background color */
	margin:0; 
	background-color: #f1f1f1
}
img { /* Style to create a fluid image */
	max-width: 100%;
}

/*--- 2 Column Form Styles Start ---*/

#left {
    width: 47%;
    float: left;
    margin-right:6%;
}
 
#right {
    width: 47%;
    float: left;
}
 
 
.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:10px;
}
 
.clearfix {
    display:block;
}

/*--- 2 Column Form Styles End ---*/
.wrapper {
  display: -webkit-box;
  display: flex;
  font-family: Lato, sans-serif;
}
.wrapper h1 {
  color: #3d3d3d;
  font-family: Lato, sans-serif;
  line-height: 1.3em;
  text-align: center;
  font-size: 24px;
}
.wrapper .mobile-button {
  color: #3d3d3d;
  font-family: lato, sans-serif;
  line-height: 1.3em;
  margin: 10px;
  font-size: 14px;
}
.wrapper .flex-col {
  padding: 10px 20px;
}

.controls {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 33%;
}
.controls .control-row {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: start;
          justify-content: flex-start;
  padding: 5px 2px;
}
.controls input, .controls select, .controls label {
  color: #3d3d3d;
  font-family: Lato, sans-serif;
  font-size: 16px;
  padding: 5px;
}

.results-container {
  width: 33%;
}

.html-container {
  width: 33%;
}
.html-container textarea {
  color: #3d3d3d;
  display: block;
  font-family: Lato, sans-serif;
  font-size: 16px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 90%;
}
.cell-row:before,.cell-row:after,.clear:after,.clear:before,.bar:before,.bar:after{content:"";display:table;clear:both}
.left-align{text-align:left}.right-align{text-align:right}.justify{text-align:justify}.center{text-align:center}
.bar{width:100%;overflow:hidden}.center .bar{display:inline-block;width:auto;position:static;float:left}

.bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.button:hover{color:#000;background-color:#ccc}
@media screen {
	body { width: 80%; }
}
@media print {
	body {width: 100%;
	color: #000000;
	background-color: #FFFFFF;}
}
@media screen and (min-width: 481px) {
	.mobile { display: none; }
}

  .wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row wrap;
    width: 100%;
    padding: 0;
  }

  .flex-col {
    -webkit-box-flex: 100%;
            flex: 100%;
  }

.left-align{text-align:left}.right-align{text-align:right}.justify{text-align:justify}.center{text-align:center}
.top,.bottom{position:fixed;width:100%;z-index:1}.top{top:0}.bottom{bottom:0}
.bar{width:100%;overflow:hidden}.center .bar{display:inline-block;width:auto}
.btn,.button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
bar .button{white-space:normal}
/* Styles for Mobile Layout */
#container { /* Style for the container centers the page and specifies the width */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.top,.bottom{position:fixed;width:100%;z-index:1}.top{top:0}.bottom{bottom:0}
header { /* Style for the header specifies top margin, background color, rounded corners, and center align content */
	font-family: Verdana, Arial, serif;
	font-size: 2em;
	margin-top: 0.2em;
	background-color: #f1f1f1;
	border-radius: 0.5em;
	text-align: center;
}
nav { /* Style for nav specifies text properties */
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}
nav ul { /* Style specifies padding and margins for unordered list */
	padding: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
nav li { /* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list item within the navigation */
	background-color: black;
	border-radius: 1em;
	list-style-type: none;
	margin: 0.3em;
	padding: 0.4em;
}
nav li a { /* Style changes navigation link text color to white and removes underline */
	color: #FFFFFF;
	text-decoration: none;
}
main { /* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders  */
	display: block;
	font-family: Georgia, "Times New Roman", sans-serif;
	font-size: 1em;
	margin-top: 0.2em;
	padding: 0.5em;
	border-top: solid 0.2em #f1f1f1; 
	border-bottom: solid 0.2em #f1f1f1;
}
footer { /* Style for the footer specifies font size, text alignment, and top margin */
	font-size: .70em;
	text-align: center;
	margin-top: 2em;
}
.mobile { /* Style displays the mobile class */
	display: inline;
}
.video {
	text-align: center;
	padding: 1em;
}
video {
	border: 0.2em solid #FF6600;
	height: auto;
	max-width: 100%;
}
div p { /* Style for the div p specifies padding */
	padding-left: 1em;
	padding-right: 1em;
}
section { /* Style for section specifies padding and text align */
	padding: 1%;
	text-align: center;
}


/* Media query for tablet viewport targets screen size with a minimum width of 481px. */
@media only screen and (min-width: 481px) {
img { /* Style for image specifies width and float */
  width: 25%;
	float: left;
}
header p { /* Style for header specifies margin and padding */
	margin-bottom: 4em;
	padding-top: 1.5em;
}
nav li { /* Style for navigation list items specifies a display, float, margin, padding, and width */
	display: inline;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	padding-left: 0em;
	padding-right: 0em;
	width: 23%;
}
main { /* Style for main element specifies clear and margin */
	clear: left;
	margin-top: 12em;
}
.mobile { /* Style specifies to hide the mobile class */
	display: none;
}
.desktop { /* Style specifies to display the desktop class */
	display: inline;
}
section { /* Style for section specifies background color */
	background-color: #FF6600;
}

table, th, td { /* Style for table specifies border and padding for the elements */
	border: solid 0.1em lightgrey;
	border-collapse: collapse;
	padding: 1em;
}
caption { /* Style for caption specifies font size and padding */
	font-size: 1.5em;
	padding-bottom: 1em;
}
input, textarea { /* Style for input specifies textarea display and margin */
	display: block;
	margin-bottom: 1em;
}
label { /* Style for label specifies display */
	display: block;
}
}
/* Media query for desktop viewport targets screens with a minimum of 769px */
@media only screen and (min-width: 769px) { /* Style specifies a width for container */
#container {
	width: 80%;
}
nav { /*Style specifies navigation margin */
	margin-top: -5em;
}
nav ul { /* Style specifies margin and padding for the unordered list within the nav */
	margin: 0;
	padding-left: 0.50%;
	padding-right: 0.50%;
}
nav li { /* Style for navigation list items specifies a background-color, border radius, border margin, width, and padding */
	background-color: #f1f1f1;
	border-radius: 0;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
	width: 18%;
}
nav li a { /* Style for navigation links specifies color, display, padding, and font size */
	color: black;
	display: inline-block;
	padding: 0.7em;
	font-size: 1.25em;
}
/* Style rules for pseudo-classes */
nav li a:link {
	color: black;
}
nav li a:hover {
	color: #4C1F00;
	font-style: italic;
}
main { /* Style specifies border, radius, shadow, margin, and padding for main element */
	border: none;
	border-radius: 1em;
	box-shadow: 1em 1em 1em #331400;
	margin-bottom: 1em;
	background-color: #f1f1f1;
	overflow: auto;
}
section { /* Style for section specifies float and width */
	float: left;
	width: 60%;
}

table { /* Style for table specifies width and margins */
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1em;
}
label { /* Style for label specifies float, padding, text-align, and width */
	float: left;
	padding-right: 0.5em;
	text-align: left;
	width: 8em;
}
}