* {
	margin:0;
	padding:0;
}

*, *::before, *::after {
    box-sizing: border-box;}

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 20px;
	line-height: 150%;
	color: #0E430E; /*Green Myrtle */}

#wrapper {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	border: 1px dashed #0E430E; /*Green Myrtle */
    border-right: none;   /*these two lines ensures the border is not placed on the right or bottom of the content area*/
    border-bottom: none;}

/*HEADER SECTION */

header h1 {
	font-size:2em;
	font-weight: bold;
    font-family: Verdana, sans-serif;
	padding: 2%;
	color: #e9eeea; /*Green Dew */
	background-color: #38761D;/*Green Bilbao */
	text-align: left;}

ul.topnav {
	list-style-type: none; /*deletes bullet points */
	padding-left:2%; /*spacing on the whole left side of this navigation */
	padding-right:2%; /*spacing on the whole right side of this navigation */
	background-color: #0E430E; /*Green Myrtle */}

ul.topnav li {
	border-width: 1px;
	border-style: solid;
	border-color: #0E430E; /*Green Myrtle */
    margin-top: 1%;
    margin-bottom: 1%;}

ul.topnav li a {
	display: block; /*Make whole area clickable */
	color: #e9eeea; /*Green Dew */
	text-decoration: none; /*Removes underline */
	padding: 20px 0 20px 0; /*T, R, B, L*/
    font-weight: bold;
	text-align: center;}

ul.topnav li:hover {
	background-color: #B00B1B; /*Red Venetian*/}

/*This section excludes Header and Footer as marked up in HTML document*/

main#pagebody {
	margin-left: auto; /*Equal margins on both sides */
	margin-right: auto;
	margin-bottom: auto;
	max-width: 100%}

/*CONTENT */

p {
    line-height: 1.8;
    text-align: left;
    margin-bottom: 2%; /*space after element */}

article {
	padding:4% 2% 2% 2%;
	/*color:  #0E430E;*/ /*Green Myrtle */
	background-color:#e9eeea; /*Green Dew */}

h2 {
    font-size: 2em;
    font-weight: bold;
    color: #B00B1B; /*Red Venetian*/
    background-color: #e9eeea; /*Green Dew */
    text-align: left;
    padding: 0px 10px 20px 0px; /*T, R, B, L*/
    margin-top: 2%; /*space before element */
	margin-bottom: 10%; /*space after element */}

h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #0E430E; /*Green Myrtle */
    background-color: #e9eeea; /*Green Dew */
    text-align: left;
    margin-top: 5%; /*space before element */
    margin-bottom: 5%; /*space after element */}

h4 {
    font-size: 1.2em;
    font-weight: bold;
    color: #38761D; /*Green Bilbao */
    background-color: #e9eeea; /*Green Dew */
    text-align: left;
    margin-top: 5%; /*space before element */
    margin-bottom: 3%; /*space after element */}

article img {
	max-width:100%; /*max-width scales img to container */
	float:none;
    display: block;
    margin-left: auto;
    margin-right: auto;}

.description{
    text-align: left;
    color: #38761D;/*Green Bilbao */
    background:#e9eeea; /*Green Dew */
    font-size: 90%; /*90% of parent body font of 1em, so equivalent to 0.90em */
    margin-bottom: 5%; /*space after element */}

hr {
    margin-top: 2%;
    margin-bottom: 2%;}

.column {
    float: left;
    width: 50%;}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;}

/*TABLES */

table.directions  {
    border-collapse: collapse;/*removes double border placed between cells*/
    width: auto;
    height: 50px;
    vertical-align: bottom;
    margin: 1% 0% 1% 0%;
    font-size: 0.8em;
    text-align: center;}

table.directions  td {
    border: 1px solid #0E430E; /*Green Myrtle */
    color: #0E430E; /*Green Myrtle */
    background-color: #c9e0ce; /*Green Light */;
    width: auto;
    height: auto;
    vertical-align: middle;
    min-width: 45px;
    padding:2% 2% 2% 2%;}

table.directions th{
    border: 1px solid #0E430E; /*Green Myrtle */
    background-color: #38761D;/*Green Bilbao */
    color: #e9eeea; /*Green Dew */
    width: auto;
    min-width: 150px;
    height: auto;
    vertical-align: middle;
    padding:2% 2% 2% 2%;}

table.month {
    border-collapse: collapse;/*removes double border placed between cells*/
    width: auto;
    height: 50px;
    vertical-align: bottom;
    margin: 1% 0% 1% 0%;
    font-size: 0.8em;
    text-align: center;}

table.month td {
    border: 1px solid #0E430E; /*Green Myrtle */
    color: #0E430E; /*Green Myrtle */
    background-color: #c9e0ce; /*Green Light */;
    width: auto;
    height: auto;
    vertical-align: middle;
    min-width: 45px;
    padding:2% 2% 2% 2%;}

table.month th{
    border: 1px solid #0E430E; /*Green Myrtle */
    background-color: #38761D;/*Green Bilbao */
    color: #e9eeea; /*Green Dew */
    width: auto;
    min-width: 150px;
    height: auto;
    vertical-align: middle;
    padding:2% 2% 2% 2%;}

/*FORM */

form span {
    margin-right: 5px; /*space to the right of asterix*/
    vertical-align: top; /*to align the asterix to the top of the list menu*/
    color: #B00B1B; /*Red Venetian*/
    float: left;}

form div {
    float: left; /*float the parent - so that browser sees floated child elements*/
    width: 100%; /*as parent floated*/
    clear: left; /*to ensure each div start below previous div*/
    margin: 0;
    padding: 0;
    margin-top: 1em; /*to space out the rows*/
}

form div label {
    float: left; /*float the label*/
    width: 30%;/*liquid width*/
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
}

fieldset {
    border: 1px solid #0E430E; /*Green Myrtle */
    background-color: #c9e0ce; /*Green Light */
    margin-top: 1em; /*space outside top of fieldset*/
    margin-bottom: 5em; /*space outside bottom of fieldset*/
    padding: 20px 0px 20px 50px; /*space inside fieldset*/
    width: 80%;
}

input.txt, textarea {
    color: #0E430E; /*Green Myrtle */
    background-color: #ffffff; /*White */
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
    border: 1px solid #0E430E; /*Green Myrtle */
    padding: 6px; /*space inside*/
    width: 50%;
}

/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* THE CONTAINER */

.container {
    display: block;
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 32%;
    cursor: pointer;
    font-size: 0.8em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    clear: left; /*to ensure each div start below previous div*/
}
/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0; /* opacity 0% makes item transparent, so invisible */
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #ffffff; /*White */
    border-color: #0E430E; /*Green Myrtle */
    border-radius: 50%;
}
/* On mouse-over, add a red background color */
.container:hover input ~ .checkmark {
    background-color: #B00B1B; /*Red Venetian*/
}

/* When the radio button is checked, add a green background */
.container input:checked ~ .checkmark {
    background-color: #38761D;/*Green Bilbao */
}

input.btn1 {
    color: #c9e0ce; /*Green Dew */
    background-color: #38761D; /*Green Bilbao */
    border: 1px solid #0E430E; /*Green Myrtle */
    padding: 10px 40px 10px 40px; /*space inside*/
    margin: 10px;
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
}

input.btn2 {
    color: #c9e0ce; /*Green Dew */
    background-color: #B00B1B; /*Red Venetian*/
    border: 1px solid #0E430E; /*Green Myrtle */
    padding: 10px 40px 10px 40px; /*space inside*/
    margin: 10px;
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
}

/*SIDEBAR */

aside {
	padding:4% 2% 2% 2%;
	text-align: left;
 	color: #38761D;/*Green Bilbao */
 	background:#e9eeea; /*Green Dew */
 	font-size: 90%; /*85% of parent body font of 1em, so equivalent to 0.85em */
}

aside h4 {
	font-size: 1.5em;
	font-weight: bold;
	text-align: left;
	color: #B00B1B; /*Red Venetian*/
	background-color:#e9eeea; /*Green Dew */
    padding: 20px 10px 20px 0px; /*T, R, B, L*/
    margin-top: 5%; /*space before element */
    margin-bottom: 5%; /*space after element */
}

img {
    max-width: 100%;
    height: auto;
    margin-top: 5%; /*space before element */
}

.video-container {
	position:relative;
	padding-bottom:50%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*PAGE UNDER CONSTRUCTION */

article.articleandaside {
    width: 100%;
    float: left;
}

img.todoimage {
    float: left;
    margin-top: 2%;
    margin-right:2%;
    margin-left:2%;
    margin-bottom:2%;
}

/*GALLERY */

figure {
	float: left;
	width: 360px; /* to accommodate the border left / right 1px and padding left / right 4px on the Selector 'figure img' below */
	margin: 10px 10px 10px 10px; /* top right bottom left */
    padding: 1px;
    /* border: 3px red solid; used for testing */
}

figure img {
	width: 350px;
	height: 350px;
	border: 2px solid #0E430E; /*Green Myrtle */
	background-color: #e9eeea; /*Green Dew */
	padding: 2px;
}

figure figcaption {
	font-family: Verdana, Calibri, sans-serif;
	font-size: 1em;
	text-align: left;
	height: 3em;/* Adds uniform height for each caption */
}


/*FOOTER */

footer {
    clear: both;
    color: #e9eeea; /*Green Dew */
    font-size: 80%;
    font-family: 'Courier New', monospace;
    background-color: #09160f; /*Black  Licorice  */
    padding: 2% 2%; /*T/B and L/R*/
    width: 100%;
    height: 8em; /* Footer height */
}


/*Hide the MENU OPTIONS when displayed on Mobile screen*/
ul.topnav li.hide {display:none;}

/*The "toggleclass" class is added to the ul.topnav via jQuery when the user clicks on the icon via the toggle method.
The jQuery toggle() method toggles between the hide() and show() methods for the selected elements.*/

ul.topnav.toggleclass li{display:block;} /*class added via jQuery */

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on
top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {width: 100%;}
}
/*MEDIA QUERIES */

@media screen and (min-width:600px) {  /*applies at 600px or greater*/
    body {background: #e9eeea; /*Green Dew */}

    article { /* Adding new properties to selector article */
        width: 65%;
        float: left;}

    aside { /* Adding new properties to selector aside */
        width: 35%;
        float: right;}

    footer { /* Adding new properties to selector aside */
        clear: both; /* Footer from left to right full width */}

    /*overwrite the display property and give extra padding*/
    ul.topnav li a {display:inline-block;padding: 16px 20px;}

    /*overwrite the display property to display the MENU Items side by side*/
    ul.topnav li.hide {display:inline-block;}

    /*Overwrite the display property that is applied using the 'toggleclass' class that is applied via the jQuery toggle() method*/
    ul.topnav.toggleclass li{display:inline-block;}

    /*Overwrite the display property, ie, Don't show the burger menu*/
    ul.topnav li.icon {display:none;}

}