/*
	RESET
	http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126
	License: none (public domain)
*/
	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; font-size: 100%; font: inherit; vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	body { line-height: 1; }
	ol, ul { list-style: none; }
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
	table { border-collapse: collapse; border-spacing: 0; }
/*
	FONTS
*/
	@font-face {
		font-family: 'Franklin';
		src: url('framdcn-webfont.eot');
		src: url('framdcn-webfont.eot?#iefix') format('embedded-opentype'),
			 url('framdcn-webfont.woff') format('woff'),
			 url('framdcn-webfont.ttf') format('truetype'),
			 url('framdcn-webfont.svg#Franklin') format('svg');
		font-weight: normal;
		font-style: normal;
	}
/*
	BASE
	Basic body styles, setting the standard.
*/
	html { overflow-y: scroll; }
	body {
		font: normal 14px/25px "Droid Sans", "Trebuchet MS", sans-serif;
		background: #1d2123;
		color: #333;
		}
	a { color: #f04040; text-decoration: none;		
		-webkit-transition: color 0.2s ease-in;  
		-moz-transition: color 0.2s ease-in;  
		-o-transition: color 0.2s ease-in;  
		transition: color 0.2s ease-in;
		}
	a:hover,
	a:active,
	a:focus { color: #0099ff; text-decoration: underline; outline: none; }
	h1, h2, h3, p, ul, ol, dl, blockquote, pre {
		margin: 0 0 25px;
		}
	h1, h2, h3 { font-family: "Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; }
	h1 { font-size: 24px; }
	h2 { font-size: 20px; margin-bottom: 20px; padding-bottom: 4px; border-bottom: 1px solid #ccc; }
	h3 { font-size: 18px; margin: 0; }
	#content ul li { list-style-image: url(../img/bullet.gif); list-style-position: inside; }
	blockquote { font-family: "Droid Serif", Georgia, serif; }
	pre { font-size: 12px; padding: 0 10px; background: #EEE; border-radius: 5px; overflow-x: auto; }
	code { font-family: "Droid Sans Mono", Consolas, "Courier New", mono; }
	em, i  { font-style: italic; }
	strong, b { font-weight: bold; }
	.intro { font-size: 16px; }
	a.reveal { text-decoration: none; }
	a.reveal span { font-weight: normal; visibility: hidden; color: #CCC; text-decoration: none; }
	a.reveal:hover span,
	a.reveal:focus span { visibility: visible; }
/*
	LAYOUT
*/
	header { background: #EEE url(../img/bg_header.gif) top center no-repeat; padding: 24px 0 24px; border-bottom: 1px solid #CCC; border-top: 1px solid #FFF; }
	footer { background: #1d2123; padding: 25px 0 0; }
	aside { font-size: 13px; }
	#content { background: #FFF; padding: 25px 0 0; }
	.gutter { zoom: 1; }
	.gutter:after { content: "."; clear: both; height: 0; overflow: hidden; display: block; }
/*
	HEADER
*/
	header ul { list-style: none outside; margin: 0; position: relative; }
	header li { float: left; list-style: none outside; }
	header a { text-decoration: none; line-height: 25px; color: #999; padding: 0 10px; text-shadow: 0 1px #FFF; }
	header a.active { color: #f04040; }
	header .logo { margin: 0 0 0 -10px; }
	header .logo a { font: normal 20px/25px "Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; color: #444; }
	header .logo a:hover,
	header .logo a:focus,
	header .logo a:active { color: #0099ff; text-decoration: none; }
/*
	FOOTER
*/
	footer section { color: #FFF; font-size: 12px; }
	footer .social li { list-style: none outside; }
	footer .social a { padding-left: 35px; overflow: hidden; display: block; }
	footer a { color: #999; }
	footer a:hover,
	footer a:focus,
	footer a:active { color: #FFF; background-position: left top; text-decoration: underline; }
	footer .twitter { background: url(../img/icon_twitter.png) left bottom no-repeat; }
	footer .linkedin { background: url(../img/icon_linkedin.png) left bottom no-repeat; }
	footer .lastfm { background: url(../img/icon_lastfm.png) left bottom no-repeat; }
	footer .googleplus { background: url(../img/icon_googleplus.png) left bottom no-repeat; }
/*
	CONTENT
*/	
/*	Forms */
	form ol, fieldset { display: block; zoom: 1; margin: 0; }
	form ol:after, fieldset:after { content: "."; overflow: hidden; height: 0; display: block; clear: both; }
	form li { display: block; list-style: none outside; margin: 0 0 25px; overflow: hidden; width: 100%; }
	legend { display: none; }
	label { position: absolute; top: -9999em; }
	input,
	textarea {
		margin: 0;
		width: 100%;
		border: 4px solid #EFEFEF;
		border-radius: 5px;
		box-shadow: inset 0 0 0 1px #CCC;
		font-family: "Droid Sans", "Trebuchet MS", sans-serif; 
		font-size: 14px;
		color: #333;
		line-height: 25px;
		height: 50px;
		display: block;
		padding: 8px 10px 9px;
		background: #FFF;
		outline: none;
		box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
		}
	input:focus, 
	textarea:focus {
		box-shadow: inset 0 0 0 1px #0099ff;
	}
	textarea { height: auto; }
	button {
		float: right;
		margin: 0;
		width: auto;
		display: block;
		border: 1px solid #CCC;
		border-radius: 5px;
		font-family: "Droid Sans", sans-serif; 
		font-size: 14px;
		line-height: 50px;
		color: #f04040;
		text-shadow: 0 1px #FFF;
		font-weight: bold;
		height: 50px;
		padding: 0 15px;
		cursor: pointer;
		margin: 0 0 25px;
		box-shadow: 0 1px 3px #DDD;
		background: #ededed; /* Old browsers */
		background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); /* IE10+ */
		background: linear-gradient(top, #ffffff 0%,#ededed 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
		}
	button:hover,
	button:focus {
		color: #0099ff;
		}
	figure { margin: 0 0 25px; }
	figure img { width: 100%; }
	figure figcaption { display: block; font-size: 12px; color: #777; text-align: center; }
		
/*	Accessibility links */
	#accessibility { background: #1D2123; position: relative; border-bottom: 1px solid #000; }
	#accessibility ul { margin-bottom: 0; font-size: 12px; padding-top: 12px; padding-bottom: 12px; }
	#accessibility li { display: inline; list-style: none outside; padding: 0 10px 0 0; }
	#accessibility a { color: #999; }
	#accessibility a:hover,
	#accessibility a:focus,
	#accessibility a:active { color: #FFF !important; }
/*	Slider (Demo) */
	.slider { position: relative; margin: 0 0 25px; }
	.slider .viewport { position: relative; overflow: hidden; }
	.slider .list { position: absolute; top: 0; left: 0; }
	.slider .list .item { display: block; float: left; }
	.slider .list .item > * { display: block; }
/*	Blog */
	article img { max-width: 100%; }
	time, time a { color: #999; font-size: 12px; }
/*	Slider (Demo) Theming */
	.demo { overflow: hidden; width: 100%; }
	.demo .viewport { float: left; }
	.demo .prev, .demo .next { float: left; color: #ff4040; cursor: pointer; line-height: 90px; padding: 5px 10px; }
	.demo .disabled { color: #999; cursor: default; }
/*	Tweets */
	#tweets .load { margin: 40px auto; display: block; width: 24px; }
	#tweets ul, #tweets li { display: block; list-style: none outside; margin: 0; }
	#tweets li { margin: 0 0 24px; }
	#tweets p { margin: 0; }
	#tweets .time { color: #999; font-size: 12px; }
/*	Fancy buttons */
	.button {
		margin: 0;
		width: auto;
		display: inline-block;
		border: 1px solid #CCC;
		border-radius: 5px;
		font-family: "Arial", sans-serif;
		line-height: 23px;
		color: #444;
		font-weight: bold;
		font-size: 12px;
		text-shadow: 0 1px #FFF;
		height: 23px;
		text-decoration: none !important;
		position: relative;
		padding: 0 7px;
		cursor: pointer;
		box-shadow: 0 1px 2px #EEE, inset 0 1px 0 #FFF;
		background: #f0f0f0; /* Old browsers */
		background: -moz-linear-gradient(top, #f8f8f8 0%, #f0f0f0 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #f8f8f8 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #f8f8f8 0%,#f0f0f0 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #f8f8f8 0%,#f0f0f0 100%); /* IE10+ */
		background: linear-gradient(top, #f8f8f8 0%,#f0f0f0 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
		}
	.button:hover,
	.button:focus {
		color: #0099ff;
		}
	.download {
		border-radius: 5px 0 0 5px;
		}
	.download .size {
		position: absolute;
		top: -1px;
		left: 100%;
		width: auto;
		text-indent: 6px;
		padding-right: 5px;
		height: 23px;
		background: #f04040;
		color: #FFF;
		text-shadow: none;
		border: 1px solid #e33434;
		border-left: none;
		border-radius: 0 5px 5px 0;
		box-shadow: 0 1px 2px #EEE, inset 1px 0px 2px #af2f2f, inset 0 1px 0 #ff8a8a;
		background: #e33434; /* Old browsers */
		background: -moz-linear-gradient(top, #f04040 0%, #e33434 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(100%,#e33434)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #f04040 0%,#e33434 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #f04040 0%,#e33434 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #f04040 0%,#e33434 100%); /* IE10+ */
		background: linear-gradient(top, #f04040 0%,#e33434 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f04040', endColorstr='#e33434',GradientType=0 ); /* IE6-9 */
		}
	
/*
	MEDIA QUERIES
*/
	@media screen and (max-width: 319px){
		.gutter { padding: 0 6.5%; }
		header ul, header .logo { float: none; }
		header ul { left: -10px; }
		nav li { float: none; display: block; }
		footer .info span { display: block; }
		footer .social a { background: none; padding-left: 0; }
		button { float: none; width: 100%; margin: 0 auto 25px; }
	}
	@media screen and (max-width: 479px){
		#accessibility { margin-top: 0 !important; }
		#accessibility span { display: none; }
		.download .size { width: auto !important; }
	}
	@media screen and (min-width: 320px){
		#accessibility { margin-top: 0; }
		#accessibility span { display: none; }
		.gutter { padding: 0 20px; }
		header ul { left: -10px; }
		footer .info span { display: block; }
		footer .social { float: left; width: 50%; }
		footer .social li { float: left; padding-right: 10px; }
		footer .social a { width: 25px; padding-left: 0; text-indent: -999em; }	
		footer .info { float: right; width: 46.25%; }	
		footer .info span { display: block; }
		button { float: none; width: 100%; margin: 0 auto 25px; }
	}
	@media screen and (min-width: 480px){
		#accessibility { margin-top: -50px; }
		#accessibility span { display: block; }
		header ul { float: right; left: 0; right: -10px; }
		header .logo { float: left; }
		footer .social li { width: 46.25%; float: left; padding: 0; }
		footer .social a { width: auto; padding-left: 35px; text-indent: 0; }
		footer .info span { display: inline; }
		form li.col_a { width: 46.25%; float: left; }
		form li.col_b { width: 46.25%; float: right; }
		button { float: none; width: 46.25%; margin: 0 0 25px auto; }
	}
	@media screen and (min-width: 768px) {
		.gutter { max-width: 960px; margin: 0 auto; }
		#content .main { width: 60%; float: left; }
		#content .side { width: 35%; float: right; }
		header ul { float: right; right: 0; left: -10px; width: 35%; }
		footer .about { float: left; width: 60%; }
		footer .social { float: right; width: 35%; }
		footer .info { float: none; width: 100%; clear: both; }
		footer .info span { display: inline; }
	}
	@media screen and (min-width: 1024px) {
		footer .about { float: right; width: 35%; }
		footer .social { float: left; width: 27.5%; }
		footer .info { float: left; width: 27.5%; margin-left: 4.99%; display: inline; clear: none; }
		footer .info span { display: block; }
	}