/* Structure */
html {
	background: #eee;
}

body {
	padding: 0px;
	background: #fff;
	color: #333;
	margin: 0 auto;
	max-width: 900px;
	font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
	color: #ffaa00;
}

header {
	background: #ffffff;
	padding: .5em 3em;
	color: #00aaff;
	line-height: 1;
}

header h1 {
	margin-bottom: 0;
}

header h1 span {
	display: inline;
	color: rgba(255, 255, 255, .4);
}

header span {
	display: block;
	color: rgba(255, 255, 255, .2);
	font-weight: 300;
	margin-bottom: 1.6em
}

header nav {
	float: right;
	text-align: right
}

header nav div {
	font-size: .8em;
}

header nav div a {
	font-weight: 300;
	padding: .3em .5em
}

header nav a {
	color: #fff;
	display: inline-block;
	padding: .3em .8em
}

header nav a:hover,
header nav a:focus {
	color: rgba(255, 255, 255, .6)
}


[role=main] {
	padding: 1em 3em;
}

article {
	/* padding: 0.3em 0; */
}

footer {
	background: #333;
	color: #fff;
	padding: .1em 3em;
}

/* Typography */

p {
	font: 1em/1.5 Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
}


img {
	max-width: 100%;
	height: auto;
}


blockquote {
	float: left;
	margin: 1em 3em;
}

blockquote p {
	font-size: 1.4em;
	line-height: 1.2;
	font-weight: 700;
	font-style: italic;
}

a {
	font: 700 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none
}

a:hover,
a:focus {
	color: #000;
}

a:active {
	position: relative;
	top: 1px;
}

article h3 span {
	display: inline;
	color: rgba(255, 0, 0, 1.0);
}

/* Tabs */

.js-on #tabs article {
	display: none
}

#tabs,
#tabs nav a.active {
	background: #ddd;
	color: #111;
}

#tabs nav {
	position: relative;
	overflow: hidden;
	display: table;
	background: #bbb;
}



#tabs nav a {
	width: 150px;
	display: table-cell;
	padding: 1em;
	text-align: center;
	color: #333;
}

#tabs nav a:hover,
#tabs nav a:focus {
	background: #eee
}

#tabs article {
	padding: 2em;
}

.js-on #tabs article.active {
	display: block;
}

#tabs #mobiles {
	display: none;
	border-radius: 0;
}

#tabs #mobiles a,
#tabs #mobiles a:first-child,
#tabs #mobiles a:last-child {
	width: 300px;
	border-radius: 0;
}


/* Media queries */
@media screen and (min-width:900px) {
	body {
		font-size: 1.1em;
	}
}

@media screen and (max-width:600px) {
	#tabs nav {
		display: none;
		position: relative;
	}

	#tabs #mobiles {
		display: block;
	}

	#tabs article {
		display: block;
	}
}

@media screen and (max-width:480px) {
	blockquote {
		float: none;
	}

	header nav a {
		padding: .7em .8em
	}

	header nav {
		float: none;
		margin: -.5em -3em 0;
		background: #000;
		overflow: hidden;
		text-align: left
	}

	header nav a {
		border-right: 1px solid #222
	}

	[role=main] {
		padding: 1.5em 2em;
	}

	header nav div {
		display: none;
	}

}