/* CSS RESET ===================================================== */
	
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
}


/* CONTAINERS ===================================================== */

html {
	font-size: 62.5%;
	}

body { 
	font-family: "skolar-sans-latin",sans-serif;
	color:rgb(33,33,33);
	font-variant-numeric: oldstyle-nums;
	-moz-font-feature-settings: "onum";
	-webkit-font-feature-settings: "onum";
	font-feature-settings: "onum";
	/*background-image:url("../resources/36px.png");
	background-position: center top;*/
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	}

.header { 
	overflow:auto;
	background-color:yellow;
	}

.content {
	max-width:73rem;
	margin:7.2rem auto 0 auto;
	}
		
.header, .content {
	padding:0 7.2rem;
	}


/* TYPOGRAPHY ===================================================== */
	
h1 { 
	font-size:4.8rem; 
	line-height:1.125em; 
	margin-bottom:1.875em; 
	font-weight:400; 
	}

h2 { 
	font-size:2.4rem; 
	line-height:3.6rem; 
	font-weight:700; 
	}
	
p { 
	font-size:2.4rem; 
	line-height:3.6rem; 
	margin-bottom:3.6rem;
	}

.button {
	text-transform: uppercase;
	border: 1px solid;
}

.content ul {
	list-style-type:disc;
	font-size:2.4rem; 
	line-height:3.6rem;
	list-style-position:outside;
	padding-left:2.4rem;
	}

.footer {
	margin-top:18rem;
	border-top:1px solid;
	font-size:1.6rem; 
	line-height:3.5rem; 
	margin-bottom:14.4rem;
	}		
	
a:link { color:rgb(33,33,33); text-decoration:none; }
a:visited { color:rgb(33,33,33); text-decoration:none; }
a:hover { color:rgb(33,33,33); text-decoration:none; }
a:active { color:rgb(33,33,33); text-decoration:none; }

.content a:link { color:rgb(33,33,33); border-bottom:1px solid rgb(180,180,180); }
.content a:visited { color:rgb(33,33,33); border-bottom:1px solid rgb(180,180,180); }
.content a:hover { color:rgb(255,204,0); border-bottom:1px solid rgb(255,204,0); }
.content a:active { color:rgb(255,204,0); border-bottom:1px solid rgb(255,204,0); }

.button a:link { color:rgb(0,0,0); border-bottom:0; display: block; padding: 1.8rem; background-color: yellow; }
.button a:visited { color:rgb(0,0,0); border-bottom:0; display: block; padding: 1.8rem; background-color: yellow; }
.button a:hover { color:rgb(0,0,0); border-bottom:0; display: block; padding: 1.8rem; background-color: rgb(255,204,0); }
.button a:active { color:rgb(0,0,0); border-bottom:0; display: block; padding: 1.8rem; background-color: rgb(255,204,0); }


/* NAV ===================================================== */

.logo {
	float:left;
	font-size:2.4rem;
	line-height:1em;
	margin-top:4.2rem;
	font-weight:700;
	}
	
.nav {
	font-size:2.4rem;
	line-height:10.8rem;
	text-align:right;
	}

.nav ul {
	border-top:1px solid;
	list-style-type:none;
	text-align:center;
	margin:0 -7.2rem;
	line-height:7.2rem;
	}

.nav li {
	border-bottom:1px solid;
	}

.nav a:link { display:block; background-color:yellow; }
.nav a:visited { display:block; background-color:yellow; }
.nav a:hover { display:block; background-color:rgb(255,204,0); }
.nav a:active { display:block; background-color:rgb(255,204,0); }
 
#toggle {
	display: none;
	}

#toggle ~ label {
	display: none;
    }

#toggle:not( :checked ) ~ label:first-of-type,
#toggle:checked ~ label:last-of-type
	{
	display: inline;
	cursor: pointer;
	}

#toggle ~ ul {
	display: none;
	}
	
#toggle:checked ~ ul {
	display: block;
	}


/* RESPONSIVE ===================================================== */

@media screen and (max-width:800px) {

	.header, .content {
		padding:0 5.4rem;
		}

	.nav ul {
		margin:0 -5.4rem;
		}
}	


@media screen and (max-width:700px) {

	html {
		font-size: 57%;
		}

	h1 { 
		font-size:4.2rem; 
		}

	.header, .content {
		padding:0 3.6rem;
		}

	.nav ul {
		margin:0 -3.6rem;
		}
}	


@media screen and (max-width:500px) {

	html {
		font-size: 52%;
		}

	h1 { 
		font-size:3.6rem; 
		}

	.header, .content {
		padding:0 1.8rem;
		}

	.nav ul {
		margin:0 -1.8rem;
		}

	.logo {
		float:none;
		text-align:center;
		}
	
	.nav {
		text-align:center;
		}
}