/* The beginning of main.css */

/*select {property: value;} <-- this is the format of marking up css*/

body { 
	z-index: 1; /* "layers" the content, 1 value allows the navigation bar to overlap all body content */
	background-color: white; /* hex:; #RRGGBB */
	font-family: Abel, Arial, sans-serif; /* sets the font family for the body test. ordered in priority of preference*/
	font-size: 1rem; /* sets the font size from body to 16 pixels */
	color: black; /* body text is black*/
	padding: 1em;
	height: 100%;
}

/* --------------------------------------------------*/
/* the following code refers to headers */
/* refers to h1 tags */
/* rem stands for root em. 'em' is the unit relative to font-size of the parent. Rem is relative to the root (html) element*/
h1{
	font-family:'Open Sans', sans-serif; /* sets the font family for header 1's */
	font-size: 2rem; /* 2x the base font size: 2*16 = 32 px; */
	margin-top:0.25em; /* em modified the base margin-top on the body. */
}

/* refers to h2 tags */
h2{
	font-family:'Josefin Sans', sans-serif; /* sets the font family for header 2's */
	font-size: 1.5em; /* sets the font size for header 2's, 24 pixels, smaller size than h1 = hierarchy */
}

/* refers to h3 tags that have an anchor */
h3 a {
	font-weight: normal; /* font weight is normal, has a relative font size 1.25rem 16*1.25 = 20, normal style and black*/
	font-size: 1.25rem; 
	font-style: normal;
	color: black;
}

/* refers to h3 tags*/
h3{
	font-family: 'Josefin Sans', sans-serif; /* font sans serif, specifically Josefin Sans, normal weight, has a font size 1.25rem (16*1.25=20px) and black*/
	font-weight: normal;
	font-size: 1.25rem;
	color: black;
}

/* refers to h4 tags*/
h4{
	font-family: 'Josefin Sans', sans-serif; /* font sans serif, specifically Josefin Sans, has a font size 0.99 rem and black*/
	font-size: 0.99rem;
	color: black;
}
/* end of header tags */
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* breadcrumb code */
/* this code is the breadcrumb feature that allows the user to navigate through thier path of the site */
.breadcrumb {
	font-size: 1rem;
	font-family: "Abel", sans-serif;
	color: black;
	margin-top: 1em;
	margin-bottom: 0.3em;
}

/* this code changes only the anchor tags in breadcrumb to black text */
a.bcrumb{
	color: black;
}

/* this code changes breadcrumb links to dark green when hovered over */
a.bcrumb:hover{
	color: #00531C;
}

/* end of breadcrumb code*/
/* --------------------------------------------------*/

/* --------------------------------------------------*/
/* this code refers to figures and figcaptions */
/* this code moves the dog image to the left side to align with all other content */
figure.marzipan{
	margin-left: 0;
	font-size: 0.9em;
}

/* captions under figures are indented 0.5 rem to the right side */
figcaption{
	margin-left: 0.5rem;
}
/* end of figures and figcaptions */
/* --------------------------------------------------*/

/* --------------------------------------------------*/
/* code refers to paragraph tags and class */
p {
/* em looks at whatever the parent element is. The body tag is the parent of the paragraph */
	font-size: 0.8rem; /* font is 0.8 em, max width that the text can extend is 45em and the height of each line is 1em*/
	max-width: 45em;
	line-height: 1rem;
}

/* this code sets the max paragraph width on the home page to 45 em */
p.home{
	max-width: 45em;
}
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* title class */
/* this code refers to the headings on the home page, Events & News Sections */
.title{
	font-size: 0.9rem;
	font-weight: bold;
	padding-top: 0.9rem;
}

/* this code sets the hover colour to the headings on the home page to dark green */
.title:hover{
	color: #00531C;
}
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* this code refers to lists. ordered and unordered */
/* this is styling unordered lists, ordered lists*/
ul, ol{
/* em looks at whatever the parent element is. The body tag is the parent of the paragraph */
	font-size: 0.9em; /* font is 0.9 em (16*0.9=14.4px), the height of each line is 1em, */
	line-height: 1rem;
	margin-left: -2.5rem; /* Ordered and unordered lists are moved 2.5rem to the left to keep alignment accurate */
}

/* this code sets the max unordered list width on the home page to 50 em */
ul.home{
	max-width: 50em;
}

/* refers to unordered lists */
ul li {
	list-style-type: none; /* this gets rid of the bullets in the unordered lists*/
}

/* you cannot start a class name without starting with a period*/
/* class for ordered list - called main options: tab section */
ol.mainoptions li {
	font-size: 1.25rem;	/* font size is the same as h3 to keep a consistant hierarchy */
	line-height: 1.75rem; /* the line height here is greater so the text is more spaced out in the buttons */
	width: auto; /* width of the boxes adjust to screen size */
	border: solid #E3E3E3 0.0625rem; /* this creates the border around the text so they look like buttons. solid border, pale gray and 1 pixel wide */
	list-style-position: inside; /* makes the numbers and list options appear inside the boxes*/
	padding-left: 1rem;
	max-width: 18.75rem; /*max width for the list so the content is easier to read */
	color: black;
}

/* class for unordered list - called main options*/
ul.mainoptions li {
	font-size: 1.25rem; /* font size is the same as h3 to keep a consistant hierarchy */
	line-height: 1.75rem; /* the line height here is greater so the text is more spaced out in the buttons */
	width: auto; /* width of the boxes adjust to screen size */
	padding-left: 1rem;
	margin-left: 0;
	border: solid #E3E3E3 0.0625rem; /* this creates the border around the text so they look like buttons. solid border, pale gray and 1 pixel wide */
	max-width: 18.75rem; /*max width for the list so the content is easier to read */
	color: black;
}

/* class for the main navigation options */
ul.mainnav {
	padding-left: 0; /* take away the padding that other unordered lists have*/ 
}

/* class for spacing of listed events */
ul.events li {
	margin-bottom: 0.75rem;
}

/* this code highlights the selected tab option on the left tab section */
li.selected{
	background-color: #DAE9DA;
}

/*this code is to highlight tabs when it's hovered over*/
div ul li:hover a{
	color: #00531C;
}

/* class for unordered list - called homeoptions*/
ul.homeoptions li {
	font-family: "Josefin Sans";
	font-size: 0.9rem; /* font size is the same as h3 to keep a consistant hierarchy */
	line-height: 1.15rem; /* the line height here is greater so the text is more spaced out in the buttons */
	width: auto; /* width of the boxes adjust to screen size */
	padding: 0.4rem 0.75rem;
	margin-left: 0;
	border: none;
	max-width: 15rem;
	background-color: #E3F4E3;
	margin-bottom: 0.5rem;
}
/* end of lists */
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* the following code refers to navigation */
nav{
	z-index: 999;  /* brings the nav to the very front */
	position: relative; /*relative positioned element is positioned relative to its normal position*/
}

/* this code refers to the anchors in the nav (visited or unvisited)*/
nav a, nav a:visited {
	width: 100%;
	display: inline-block; /* shown in block form */
	background-color: #80CC80;
	color: #FFFFFF;
	padding: 0.6em 1.5em;
	text-decoration: none;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
}

/* this code refers to the anchors in the nav when you hover/visit/focus on them they change to green text with a pale green background colour*/
nav a:hover, nav a:active, nav a:focus {
	background-color: #BFE6BF;
	color: green; 
}

/* this code refers to unordered drop down lists in the navigation bar*/
nav ul ul {
	display: none;
	position: absolute;
	width: 26%;
}

/* this code refers to the list items in the nav. When you hover over they change colour of text to white and background to green*/
nav li:hover a {
	background-color:#488C48;
	color: white;
	display: block;
}

/* this code refers to unordered drop down lists in the navigation bar when you hover */
nav ul li ul li a:hover {
	background-color: #BFE6BF; /* background colour is pale green */
	color: green !important; /* overrides previous styling, makes sure that the text is green*/
	display: block;
}

/* this code refers to the options in the drop down menu */
nav ul li ul li a{
	color: white !important; /* overrides previous styling, makes sure that the text is white*/
}

/* this code refers to unordered lists in the top section of the navigation bar */
nav ul li a {
	color: white !important; /* overrides previous styling, makes sure that the text is white*/
	height: 20% 
}

/* this code refers to unordered lists in the top section of the navigation bar when you hover over them */
nav ul li:hover > ul {
	display: block; /* items are displayed in a block format to appear like a menu */
}

/* this code refers changes the margins to 0 to allow for easy "stacking" when the page shrinks*/
nav ul {
	margin-top: 0;
	margin-bottom: 0;

}
/* end of code for navigation */
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* the following refers to image tags */
img{
	z-index: 3;
	opacity: 1;
	height: auto; /* the height will be the original height */
	max-width: 100%; /* max width allows for responsive image that doesn't go too large. greater than 100% would create a pixelated image */
	padding-left: 0;
}

/* class for image - called logo */
img.logo {
	padding-left: 0;
	width: 20rem; /* width and height resize the logo to 3.75x3.75 rem */ 
}

/* class for image - called icon, sizes and positions the icons in the park section */
img.icon {
	margin-top:0.3em;
	padding-left:0;
	width:1.3rem;
	height:1.3rem;
}

/* class for image - called maps, sizes and positions the maps in the park section */
img.maps {
	z-index: 2;
	padding-left:0;
	width: 6.25rem;
}

/* class for image - called sidebar, sizes and positions the maps in the sidebar */
img.sidebar {
	padding-left:0;
	width: auto;
}

/* class for image - called iconp, sizes and positions the icons in the park section */
img.iconp {
	margin-top:0.3em;
	margin-left:3em;
	width:1.3rem;
	height:1.3rem;
}

/* class for image - called banner, sizes the pictures in the middle section of each main "landing page"*/
img.banner {
	width:80em;
}

/* class for image - sizes the lost dog image on sidebar*/
img.lost{
	margin-left: 0;
}

/* class for image - sizes the dog images and positions it inline with other content*/
img.marzipan {
	width: 20rem;
	margin-left: 0;
}

/* class for image - sizes the parks maps and allows nav bar to drop down over it (z-index)*/
img.intmap{
	z-index: 2;
	width:40em;
	height: auto;
}

/* class for image - sizes the checkmarks for each success page*/
img.check{
	width: 3em;
}
/* end of image code */
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* refers to anchor tags */
a{
	color: #6BA16B; /*this is a hex colour (FOREST GREEN) declaration for my links it reads as #rrggbb*/
	text-decoration: none; 
}

/* refers to anchors, when the anchor is active, cursor is hovering, or specific element is the focus*/
a:active, a:hover, a:focus {
	text-decoration: none; /* no decoration (underline, strike etc) */
}

/* class for the main options in the tabbed lists. z-index is used so that these items appear behind the drop down nav bar*/
a.mainoptions {
	z-index: 1;
	padding-left: 0;
}

/* class for the logo anchor tag */
a.logo:hover, a.logo:active, a.logo:focus{ /* this takes away the transition effects and background colour that the other anchors use*/
	transition: none; /* no transition */
	background-color: #FFFFFF; /* background colour changes to white, instead of green on the logo*/
}

/* class for home clickable options, displays text in boxes */
a.home {
	display: inline-block;
	background-color: #F7F7F7;
	color: green;
	padding: 0.75rem;
	text-decoration: none; /* no underlined text! */
	width: 100%; /* specify a width so buttons take up alotted space */
}

/* this code makes the font larger for the parks options to make it stand out */
a.parkoptions{
	padding-left: 0;
	font-size: 1.06666rem;
}
/* end of anchor tag styling */
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* refers to the section tag*/
section{
	position: center; 
	z-index: 1;
	background-color: #F7F7F7; /* each section has a background colour of pale gray to section off the info clearly*/
	width: auto;
	padding: 1em; /* padding so content isnt pushed up right against the edge */
}

/* refers to the section tags in park, max height set so sections align with page*/
section.park{
	position: center;
	z-index: 1;
	background-color: #F7F7F7; /* each section has a background colour of pale gray to section off the info clearly*/
	width: auto;
	padding: 1em;
	height:33em;
	max-height:33em;
}

/* refers to the section on the side, top padding added for white space */
section.side {
	padding-top: 6rem;
	margin: 0;
	padding-left: 0;
}
/* end of section tag*/
/* --------------------------------------------------*/


/* this code adds line spacing within the forms for easy readability */
form{
	margin-bottom: 0.8rem;
}

/* this code positions the Stathmore copyright footer appropriately in the center and top padding so it doesn't touch the main content */
footer{
	width: 100%;
	padding-top: 4rem;
	text-align: center;
	position: relative;
}

/* --------------------------------------------------*/
/* code for quicklinks and buttons */

/* this code aligns the triangle arrow elements in the quicklinks and buttons */
.rightalign{
	z-index: 1; /* layers nav over top of the arrows */
	text-align: right;
	float: right;
}

/* this code aligns the triangle arrow elements in the quicklinks */
.leftalign{
	text-align: left;
	float: left;
}

/* this code aligns the triangle arrow elements in the quicklinks for parks */
.leftalignp{
	text-align: left;
	float: left;
	padding-right:1em;
	padding-bottom:1px;
}

/* this code refers to the quicklink buttons under each section of the site */
.quicklinks{ 
	z-index: 1; /* layers this content under the navigation bar */
	text-align: left;
	font-family: "Josefin Sans";
	font-size: 0.9rem; /* font size is the same as h3 to keep a consistant hierarchy */
	line-height: 1.15rem; /* the line height here is greater so the text is more spaced out in the buttons */
	width: auto; /* width of the boxes adjust to screen size */
	padding: 0.4rem 0.75rem;
	margin-left: 0;
	position: relative;
	max-width: 15rem;
	background-color: #E3F4E3;
	margin-bottom: 0.5rem;
}

/* this code refers to the quicklink buttons for the parks sections of the site */
.quicklinksp{ 
	z-index: 1; /* layers this content under the navigation bar */
	text-align: left;
	font-family: "Josefin Sans";
	font-size: 0.9rem; /* font size is the same as h3 to keep a consistant hierarchy */
	line-height: 1.15rem; /* the line height here is greater so the text is more spaced out in the buttons */
	width: 18rem; /* width of the boxes adjust to screen size */
	padding: 0.4rem 0.75rem;
	margin-left: 0;
	position: relative;
	max-width: 18rem;
	background-color: #E3F4E3;
	margin-bottom: 0.5rem;
}

/* this code refers to the buttons in the forms and park selection areas of the site  */
.newbutton {
	color: black;
	display: inline-block;
	outline: none;
	cursor: pointer; /* changes the cursor to a pointer finger */
	text-align: center; /* centered text for consistency */
	text-decoration: none;
	background-color: #D6F5D6;
	font: 0.65rem/100% "Open Sans", Helvetica, sans-serif;
	padding: .5em 1em .55em;
	margin-right: 0.5rem;
	border: #96AC96 solid 0.0625rem;
	background: -webkit-gradient(linear, left top, left bottom, from(#DAF6DA), to(#BCD0BC)); /* add gradient for button appearance and "clickable" look */
	background: -moz-linear-gradient(top, #DAF6DA,  #BCD0BC);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em; /* add rounded corners to the buttons */
	-webkit-box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.2); /* add shadow to the button box to acheive "clickable" look */
	-moz-box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.2);
	box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.2);
}

/* this code removes any text decoration when a user hovers over the button */
.newbutton:hover {
	text-decoration: none;
}

/* this code refers to the buttons when they are being clicked */
.newbutton:active {
	position: relative;
	top: 1px; /* this adds a clicking effect when a user presses the button */
}
/* end of code for quicklinks and buttons*/
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* this code positions the search bar appropriately */
.search {
	margin-top: 2.8rem;
	width: 100%;
	position: relative;
	white-space: nowrap; /* forces the content to stay together */
	float: right;
}

/* this code refers the text input section of the search bar*/
.searchField{
	width: 68%; /* width is specified, changes with media queries */
	margin-right: 2%;
}

/* this code refers to the quicklink buttons under each section of the site */
.searchbutton{
	position: absolute;
	width: 30%;
	float: right;
	color: black;
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	background-color: #D6F5D6;
	font: 0.65rem/100% "Open Sans", Helvetica, sans-serif;
	padding: .4em 1em .4em;
	border: #96AC96 solid 0.0625rem;
	background: -webkit-gradient(linear, left top, left bottom, from(#DAF6DA), to(#BCD0BC)); /* add mild gradient to the button box to acheive "clickable" button look */
	background: -moz-linear-gradient(top, #DAF6DA,  #BCD0BC);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.2); /* add shadow to the button box to acheive "clickable" look */
	-moz-box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.2);
	box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.2);
}
/* end of search code */
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* Code referring to the parks sections */

/* this code is for the interactive map in Parks & Trails, positions  */
.intpark{
	position: absolute;
  	color: black;
  	box-sizing: border-box;
  	-moz-box-sizing: border-box;
}

/* this code is for the park names in the interactive map*/
a.intpark:hover{
	color:white;
  	padding: 0.1rem;
  	opacity: 0.8;
  	background-color: green; /* links hover green when you hover over them */
}

/* the following positions the text in the interactive map in the parks section. The percentages allow for the names to be responsive */
#stathmore{
	top: 30%;
  	left: 5%;
  	width: 25%;
}

#jules{
	top:80%;
	left:18.5%;
	width:15%;
}

#salay{
	top:55%;
	left:51%;
	width:9%;
}

#weaver{
	top:70%;
	left:80.5%;
	width:15%;
}

#lake{
	top:7.5%;
	left:77%;
	width:20%;
}

/* --------------------------------------------------*/
/* end of main css code */