/**
 * Mobile first demo
 */

 * {box-sizing: border-box;}

body {
	/*background: hsl(60,80%,70%);*/
	background-color: hsl(60,30%,70%);
	background-image:
	  repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	  repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	  linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
	  linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 70px 120px;

	font: 16px/22px Monaco, monospace;
	text-shadow: 1px 1px 0 rgba(255,255,255, 0.3);
	padding: 0; margin: 0;
}

figure {margin: 20px 0;}
figure img {width: 100%;}

/* Navigation */
.main-nav {clear: both;}
nav ul {padding: 0;}
nav ul li {
	float: left;
	list-style: none;
	margin: 20px 40px 0 0;
}

nav ul li a {
	background: linear-gradient(hsla(125, 33%, 50%, 0.4), hsla(125, 33%, 60%, 0.4));
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.7) rgba(0,0,0,0) rgba(0,0,0,0.5) rgba(255,255,255,0.7);
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	color: #333;
	display: inline-block;
	padding: 10px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
}

nav ul li a:hover {
	box-shadow: none;
	border-color: rgba(0,0,0,0.5) rgba(255,255,255,0.7) rgba(255,255,255,0.7) rgba(0,0,0,0.3);
	background: linear-gradient(hsla(125, 33%, 60%, 0.8), hsla(125, 33%, 50%, 0.8));
	text-shadow: -1px -1px 0 rgba(255,255,255, 0.3);
}
/* Header */

.main-header {
	background-color: hsla(359, 63%, 100%, 0.5);
	color: #f5f5f5;
	padding: 40px;
}

.main-header hgroup {
	border-bottom: 10px solid rgba(255,255,255,0.6);
	padding-bottom: 20px;
	margin: 40px 0;
}

.main-header hgroup h1, .main-header hgroup h2 {margin: 0;}

h1 {font-size: 48px; line-height: 48px;}

h1 a {
	color: #fff;
	text-decoration: none;
}

/* Main content */
.posts {
	background: rgba(255,200,200,0.8);
	padding: 20px; margin-top: 20px;

}

/* Additional content */
.additional-content {
	background: rgba(200,255,200,0.7);
	padding: 20px; margin-top: 20px;

}

.twitter-widget ol {padding: 0;}
.twitter-widget ol li{
	background: rgba(0,0,0,0.1);
	list-style: none;
	padding: 10px; margin-bottom: 20px;
}


/* Footer */
.main-footer {
	background: rgba(0,0,255,0.1);
	margin: 20px 0 0 0; padding: 20px;
}


/* Helpers */

.global-width {
	max-width: 960px;
	margin: 0 auto;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Media queries */
@media only screen and (min-width: 715px){
	.left {float: left; margin-right: 20px;}
	.right {float: right; margin-right:0px}

	.col--right: 0;1 {width: 25%;}
	.col-2 {width: 50%;}
	.col-3 {width: 72%;}

	.main-header hgroup {margin: 0;}

}