/* (c) Flip Tanedo 2016 */

/*
* ORGANIZATION BASED ON:
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

/* CONTENT BASED ON
http://www.w3schools.com/howto/howto_js_topnav.asp
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Navigation Bar: topnav
	- ul.topnav
	- ul.topnav li
	- ul.topnav li a
	- ul.topnav li icon (collapsing menu for small screens)
	- ul.topnav li responsive (on icon click)
- Front Page Navigation
*/

/* Navigation Bar
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* –––––– topnav –––––– */

/* From: http://www.w3schools.com/howto/howto_js_topnav.asp */
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color:#595959;
	position: relative;
	max-width: 960px;
/*  margin: 0 auto;*/
	width: 100%;
  margin-left: 15px;
/*  top: 10px;*/
/*  font-family: 'Fjalla One', sans-serif;*/
}

/* Larger than mobile */
@media (min-width: 400px) {
  ul.topnav {
    width: 85%;
    left: -15px; /* s.t. left-most menu text aligns with body text */
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  ul.topnav {
    width: 80%;
  }	
}

/* –––––– topnav: li –––––– */

/* Float the list items side by side */
ul.topnav li {
	display: none; /* invisible for small screens */
	float: left;
	margin-bottom: 0rem; /* to undo skeleton.css default */
	height: 31px;
  font-size: 1.2rem;
}

/* Larger than mobile */
@media (min-width: 400px) {
	ul.topnav li {
		float: left;
		display: inline-block;
		margin-bottom: 0rem; /* to undo skeleton.css default */
	    font-size: 1.4rem;
		font-weight: 600;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 500px) { 
	ul.topnav li {
		float: left;
		display: inline-block;
		margin-bottom: 0rem; /* to undo skeleton.css default */
	    font-size: 1.3rem;
		font-weight: 600;
		height: auto;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) { 
	ul.topnav li {
		float: left;
		display: inline-block;
		margin-bottom: 0rem; /* to undo skeleton.css default */
	    font-size: 1.4rem;
		font-weight: 600;
		height: auto;
	}
}

@media (min-width: 700px) { 
	ul.topnav li {
		float: left;
		display: inline-block;
		margin-bottom: 0rem; /* to undo skeleton.css default */
	    font-size: 1.5rem;
		font-weight: 600;
		height: auto;
	}
}

/* –––––– topnav: li a –––––– */

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 2px 3px;
    text-decoration: none;
    transition: 0.3s;
	height: 31px;
/*    font-size: 17px;*/
}

/* Larger than mobile */
@media (min-width: 400px) { 
	ul.topnav li  a{
		height: auto;
    padding: 2px 3px;
	}
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) { 
	ul.topnav li  a{
		height: auto;
    padding: 2px 4px;
	}
}

@media (min-width: 700px) { 
	ul.topnav li  a{
		height: auto;
    padding: 2px 7px;
	}
}


/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}


/* –––––– topnav: li icon –––––– */


/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
	display: inline-block;
	float: right;
	font-size: 1.7rem;
	font-weight: 600;
}

/* Larger than mobile */
@media (min-width: 400px) {
	ul.topnav li.icon {display: none;}
}


/* –––––– topnav: li responsive –––––– */
/* this is toggled when the menu icon is clicked */
/* (menu icon only visible on small displays) */
ul.topnav.responsive {
	position: relative;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}

ul.topnav.responsive li.icon { 
	/* keeps menu icon on top right */
    position: absolute;
    right: 0;
    top: 0;
	font-size: 1.7rem;
	font-weight: 600;
}

ul.topnav.responsive li {
    float: none;
    display: inline;
    font-size: 1.7rem;
	font-weight: 600;
}

ul.topnav.responsive li a {
    display: block;
    text-align: left;
}










/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}