/*
Author: Brandon Hoover
Author URI: http://bhoover.com/

This style sheet makes the menu pretty, but NONE if it is required for the menu to function!
*/

/*
Simple resets
*/

* {
	margin:0; padding:0; line-height: 1.5em;
	font-family: 'Noto Sans TC','sans-serif';
}

nav#mobile a {
	text-decoration: none;
	color: #FFF;
}

/*
Entire Menu System
*/

nav#mobile {
	background-color:#333;
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.3);
	display: none; width:100%;
	position:fixed; z-index:99999; margin-top:-50px;
	/*
	Add the lines below to force the menu bar stay fixed at the top of the page while scrolling.
	position:fixed;
	width:100%;
	*/
}

/*
Top black bar that holds the toggle button
*/

nav#mobile #toggle-bar {
	line-height:50px;
}

/*
Toggle button #1 ("Menu")
*/

nav#mobile strong a {
	margin-left:10px;
	border:1px solid #444;
	padding:10px;
}

/*
Toggle button #2 ("Navicon")
*/

nav#mobile .navicon {
	float: right;
	height: 4px;
	width: 34px;
	margin: 15px;
	border-top: 10px double #FFF;
	border-bottom: 2px solid #FFF;
	font-size:0;
}

/*
The dropdown menu
*/

nav#mobile ul li {
	clear:both;
	list-style:none;
}

nav#mobile ul li a {
	display:block;
	background-color:#333;
	text-transform:uppercase;
	letter-spacing:.2em;
	margin:2px 0;
	padding:6px 0 6px 8px;
}

nav#mobile ul ul {
	font-size:small;
}

nav#mobile ul ul li {
	margin-left:30px;
}

nav#mobile ul ul a {
	background-color:#333;
	padding-left:8px;
}

nav#mobile ul ul a:before {
	content: "\2192";
	padding-right:8px;
}

/*
Everything else (non menu related CSS for the filler page elements)
*/

article {
	padding:10px 30px;
	line-height: 1.5em;
}

h1, h2, p {
	padding:.5em 0;
}

h1 {
	font-size:2em;
	text-transform:uppercase;
}

h2 {
	font: italic 1.5em "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: #300;
	padding:.6em 0 .3em 0;
}

strong {
	font-weight:bold;
}

@media all and (max-width: 700px){
nav#mobile { display:block;}
}