/*
	Styles for the entire site
	This should be included first and then any page-specific styles after
	Page styles can override anything from this file
	All colors are lighter/darker varients of #7fbc91.
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat');

/* -- GLOBAL STYLING -- */
/* the styles for the elements */
* {
	margin: 0;
	padding: 0;
}
/* Global document styline */
html {
	background-color: #ffffff; /* All alt-texts are based on this */
  color: black;
}
/* Custom button styles */
.btn {
	background-color:transparent;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	border:2px solid black; /* Match text color */
	display:inline-block;
	cursor:pointer;
	color:black; /* Match text color */
	font-family:Arial; /* Thick */
	font-size:20px;
	padding:10px 31px;
	text-decoration:none;
}
body {
	font-family: 'Montserrat', sans-serif;
  font-size: 87.5%;
  width: 100%; /* Full page green */
  margin: 0 auto; /* Full page green */
}
/* Keep stuff "contained" (haha) so it's not literally hugging the scrollbar */
.container {
  margin-right: auto;
  margin-left:  auto;
	margin-top: 30px; /* Little room from the nav */
  max-width: 960px; /* Small screens rejoice */
  padding-right: 10px;
  padding-left:  10px;
}

/* Simple two column layout */
.row {
  display: flex;
}
/* Column in the layout */
.column {
  flex: 50%;
  padding-right: 12px;
}
/* Replace ugly <hr> */
hr {
	margin: 12px 0px 12px 0px; /* Give us some personal space */
	color: #083a16; /* Have to do both */
	background-color: #083a16; /* Have to do both */
	border: none; /* HACK */
	height: 1.4px; /* HACK */
}
/* Make small less important */
small {
	color: #277a3f
}
/* Green */
strong {
	color: #083a16;
}
/* Make links less ugly */
a {
	color: #208c3f; /* One of us! One of us! */
}
a:visited {
	color: #208c3f; /* One of us! One of us! */
}

/* -- NAVIGATION -- */
/* the styles for the navigation menu */
.nav {
  background-color: #7dbf93; /* Match footer */
  overflow: hidden;
}
/* HACK */
.nav .container {
	margin-top: 0px; /* Override container margin so nav is at the tipy top */
}
/* "The Slice" */
.nav branding {
  float: left;
  color: #ffffff; /* Match the body background */
  text-align: left;
  padding: 14px 16px; /* Trial and error, not flexible */
  font-size: 17px;
}
/* Company logo */
.logo {
  width:10%; /* The image is huge */
  height:10%; /* The image is huge */
  float: left;
  padding: 8px 6px; /* Hacky centering */
}
/* Links - Dropdown links too */
.nav a {
    float: left;
    color: #ffffff; /* Match the body background */
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
/* Change the color of links on hover */
.nav a:hover {
    background-color: #ffffff; /* Oppostie of above colors */
    color: #7dbf93; /* Oppostie of above colors */
		text-decoration: none;
}
/* Current page */
.nav a.active {
    background-color: #6caa81; /* Darker form of nav background */
    color: white;
}
/* Dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown button - basically copied from "a" styling above */
.dropdown .dropbtn {
	font-size: 17px; /* Matches nav links */
  border: none; /* No button styling to see here */
  outline: none; /* No button styling to see here */
	color: #ffffff; /* Match the nav */
	padding: 14px 16px; /* Matches nav links */
  background-color: inherit; /* Matches nav links */
}
.dropdown button.active {
    background-color: #6caa81; /* Darker form of nav background */
    color: white;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none; /* Hidden until hover */
  position: absolute;
	background-color: rgba(125, 191, 147, 0.7); /* TRANSPARENCY! */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* LIKE A HOVER BOARD YO */
  z-index: 4; /* Always on top */
}
/* Links inside the dropdown - most stuff inherits from base link styling of nav */
.dropdown-content a {
  float: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
	background-color: rgba(255, 255, 255, 0.8) /* Still transparent */
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block; /* Consistent width, rows */
}

/* -- MAIN PAGE -- */
/* the styles for the main content */
main {
	clear: right; /* For assides */
	padding-bottom: 100px; /* Height of footer + 60 */
	overflow:auto; /* Force everything to show */
}
/* Page header */
.header {
	font-size: 41px;
	text-align: center;
}
/* Header subtitle */
.header .sub {
	font-size: 20px;
	color: #277a3f; /* Matches <small> */
}

/* Custom fieldset which has better borders */
fieldset {
	border-color: #195b2c; /* match text color */
	border-style: solid; /* remove outline */
}

/* -- FOOTER -- */
/* the styles for the footer */
footer {
  position: fixed; /* Stuck at bottom */
  left: 0; /* Full screen width */
  bottom: 0; /* Get in the basement, you! */
  width: 100%; /* Full page */
  background-color: #7dbf93; /* Matches nav */
  text-align: center;
	color: #ffffff; /* Match the nav */
	height: 15px; /* Oppostie of margin-top */
	margin-top: -15px; /* Oppostie of height */
  padding-bottom: 1em; /* Head above the sand */
	padding-top: .5em; /* Shadow room */
	-webkit-box-shadow:0px 0px 14px #3b5643; /* It FLOATS */
  box-shadow:0px 0px 14px #3b5643; /* It FLOATS */
}
/* Special container values for the footer */
footer .container {
	display: flex; /* 2 columns - text + social */
	margin-top: 0; /* HACK: container override */
}
/* Force center flota and flex */
footer p {
	float: none; /* Center */
	flex: 0px; /* Full flex */
}
/* Social Icons */
footer i {
	color: #ffffff; /* Have to force this from footer */
	padding-right: 8px; /* Personal space */
}
/* Hover for the icons */
footer i:hover {
	color: white; /* Slight hover color */
}