/*	Less Framework 4 Beta
	by Joni Korpi
	http://lessframework.com
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

.wf-loading h1, .wf-loading p, .wf-loading h2 {visibility: hidden;}


/*	Typography presets
	------------------	*/

.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}

.huge {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;
}

.large, article h1 {
	font-size: 42px;
	line-height: 48px;
	margin: 0 0 24px;
}

.bigger, #masthead h1, #follow p, #what .opening p {
	font-size: 26px;
	line-height: 36px;
}

.big, article h2 {
	font-size: 22px;
	line-height: 30px;
}

body, aside h1 {
	font: 16px/24px "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2", Cambria, Georgia, serif;
}

.small, #code textarea, small {
	font-size: 13px;
	line-height: 18px;
}

abbr {letter-spacing: 1px;}

a {color: rgb(60,97,158); text-decoration: none;}
a:hover, a:active {border-bottom: 1px solid rgb(60,97,158);}

h1, h2, #code label {color: rgb(23,23,23); font-weight: normal;}

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection {background: transparent;}

body {-webkit-tap-highlight-color: rgb(255,255,158);}

#how p, #get p, #footer p {
	margin-bottom: 24px;
}



/*		Default Layout: 992px (62em). 
		Gutters: 24px (1.5em).
		Outer margins: 48px (3em).
		Leftover space for scrollbars @1024px: 32px.
------------------------------------------------------------------------------
cols	1     2      3      4      5      6      7      8      9      10
px		68    160    252    344    436    528    620    712    804    896	*/

body {
	padding: 72px 0 84px;
	position: relative;
	background: rgb(232,232,232);
	color: rgb(60,60,60);
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

hr {
	border: none;
	border-top: 1px solid rgb(195,195,195);
	clear: both;
}

#masthead, #montage, article, #colophon {
	padding-left: 48px;
	padding-right: 48px;
	margin: 0 auto;
	width: 896px;
	position: relative;
}

#montage {width: 992px; padding: 0; margin-bottom: 23px;}

	#masthead h1 {
		margin: 0;
		padding-top: 3px;
		line-height: 33px;
		font-weight: normal;
	}
	
	#masthead p {color: rgb(97,97,97);}

	#montage {
		height: 348px;
		position: relative;
		-webkit-box-reflect:below 0 
			-webkit-gradient(linear, left top, left bottom, 
				from(transparent), 
				color-stop(0.93, transparent), 
				to(rgba(255,255,255,0.235))
		);
	}
	
		/*Goddamn Android*/ #what h1, #what p, #what section h2 {background: rgb(232,232,232);}

		figure img {position: absolute; left: 0; bottom: 0;}
		
			#imac 				{left: 45px; right: auto; bottom: 0px;}
			#macbook 			{left: 228px; right: auto; bottom: -3px;}
			#ipad-landscape 	{left: 444px; bottom: -2px;}
			#ipad-portrait 		{left: 612px; bottom: -4px;}
			#iphone-landscape 	{left: auto; right: 132px; bottom: -2px;}
			#iphone-portrait 	{left: auto; right: 48px; bottom: -2px;}
		
	#masthead nav {
		position: absolute;
		right: 48px; top: 8px;
	}
	
		#masthead li, #share li {
			float: left;
			list-style: none;
			margin-left: 12px;
		}
		
		#masthead a, #share a {
			display: block;
			padding: 11px 15px;
			border: 1px solid rgb(195,195,195);
			color: rgb(60,97,158);
			-webkit-tap-highlight-color: rgba(0,0,0, 0);
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0, 0.05);
			   -moz-box-shadow: inset 0 0 5px rgba(0,0,0, 0.05);
					box-shadow: inset 0 0 5px rgba(0,0,0, 0.05);
			-webkit-border-radius: 3px;
			   -moz-border-radius: 3px;
					border-radius: 3px;
			-webkit-transition: all 0.123s ease-out;
			   -moz-transition: all 0.123s ease-out;  
					transition: all 0.123s ease-out;
		}
		
		#masthead a:hover, #masthead a:active, #share a:hover, #share a:active {
			text-decoration: none;
			border-color: rgb(158,158,158);
			-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.38);
			   -moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.38);
					box-shadow: inset 0 0 8px rgba(0,0,0, 0.38);
		}
		
		#masthead a:active, #masthead .touched, #share a:active, #share .touched {
			background: rgb(60,97,158);
			border-color: rgb(23,37,60);
			color: rgb(232,241,255);
			text-shadow: 0 -1px 0 rgba(0,0,0, 0.9);
			-webkit-box-shadow: inset 0 0 12px rgba(0,0,0, 0.765);
			   -moz-box-shadow: inset 0 0 12px rgba(0,0,0, 0.765);
					box-shadow: inset 0 0 12px rgba(0,0,0, 0.765);
		}

aside {
	position: absolute;
	z-index: 800;
	background: rgb(255,255,158);
	background: -webkit-gradient(linear, left top, left bottom, 
		from(rgb(255,255,158)), 
		color-stop(0.764, rgb(255,255,181))
	);
	color: rgb(60,60,37);
	width: 204px;
	padding: 36px 24px;
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0, 0.235);
	   -moz-box-shadow: 0 3px 3px rgba(0,0,0, 0.235);
			box-shadow: 0 3px 3px rgba(0,0,0, 0.235);
	-webkit-transform: rotate(1deg);
	   -moz-transform: rotate(1deg);
			transform: rotate(1deg);
}

	aside ul, aside p, aside h2 {	
		font-family: "felt-tip-roman-1","felt-tip-roman-2", Chalkboard, "Comic Sans MS", sans-serif;
		font-size: 21px;
		line-height: 24px;
	}

	aside h2 {
		font-weight: normal;
		color: rgb(158,23,0);
	}
	
	article h2 {margin-bottom: 12px;}
	
	aside li {
		list-style: none;
		margin-top: 12px;
	}
	
		aside li:first-child {margin-top: 0;}
		
	#new {
		right: 48px; top: 24px;
	}
	
	#sites {
		top: 285px; right: 36px;
		width: 296px;
		-webkit-transform: rotate(1deg);
		   -moz-transform: rotate(1deg);
				transform: rotate(1deg);
	}
	
		#sites img {margin-right: 2px; width: 16px;}
	
	#resources {
		top: auto; bottom: -336px; right: 36px;
		width: 296px;
		-webkit-transform: rotate(-1deg);
		   -moz-transform: rotate(-1deg);
				transform: rotate(-1deg);
	}

article {
	border-width: 1px 0 0 0;
	padding-top: 59px;
	clear: both;
}

#what {
	padding-right: 24px;
	width: 920px;
}

	#what .opening {
		margin-bottom: 48px;
		width: 620px;
	}

	#desktop, #tablet, #mobile, #wide {
		position: relative;
		width: 252px;
		float: left;
		padding: 0 24px 24px 184px;
		height: 252px;
	}
	
		#what section h2 {padding-top: 24px;}
	
		#what figure {
			background: rgb(218,218,218);
			width: 160px;
			height: 252px;
			position: absolute;
			left: -1px; top: -1px;
			border: 1px solid rgb(241,241,241);
			overflow: hidden;
			-webkit-box-shadow: inset 0 0 12px rgba(0,0,0, 0.235);
			   -moz-box-shadow: inset 0 0 12px rgba(0,0,0, 0.235);
					box-shadow: inset 0 0 12px rgba(0,0,0, 0.235);
		}
			
			figure div {
				position: absolute; 
				left: 0; top: 0;
				background-color: rgb(60,97,158);
				background-color: rgba(60,97,158, 0.854);
			}
			
			.column {
				background: rgb(195,195,195);
				width: 10px; height: 252px;
			}
			
			.canvas {position: relative;}
				#desktop .canvas 	{margin: 0 3px;}
				#tablet .canvas 	{margin: 0 19px;}
				#mobile .canvas 	{margin: 0 59px;}
				#wide .canvas 		{margin: 0 43px;}
			
			.col2 {left: 16px;}
			.col3 {left: 32px;}
			.col4 {left: 48px;}
			.col5 {left: 64px;}
			.col6 {left: 80px;}
			.col7 {left: 96px;}
			.col8 {left: 112px;}
			.col9 {left: 128px;}
			.col10 {left: 144px;}
			
			.content, .img1, .img2 {top: 24px;}
			
			.content {
				height: 64px;
				width: 100%;
			}
								
			.img1, .img2 {
				height: 58px; 
				width: 58px;
				background-color: rgb(255,255,158);
				background-color: rgba(255,255,158, 0.854);
			}
				
				#desktop .content {width: 90px; height: 228px;}
				#desktop .img1 {left: 96px;}
				#desktop .img2 {left: 96px; top: 88px;}
				
				#tablet .content {width: 90px; left: 16px; height: 36px;}
				#tablet .content2 {top: 138px; height: 114px;}
				#tablet .img1, #tablet .img2 {top: 70px;}
				#tablet .img2 {left: 64px;}
				
				#mobile .content {height: 72px;}
				#mobile .content2 {height: 60px; top: 198px;}
				#mobile .img1, #mobile .img2 {width: 42px; height: 42px; top: 102px;}
				#mobile .img2 {top: 150px;}
				
				#wide .content {height: 48px;}
				#wide .content2 {top: 206px;}
				#wide .img1, #wide .img2 {left: 8px; top: 78px;}
				#wide .img2 {top: 142px;}

.opening, #layouts .opening, #how section {
	width: 528px;
}

#code {
	height: 576px;
	margin-top: 48px;
	position: relative;
}

	#code form {
		width: 252px;
		border-bottom: 1px solid rgb(255,255,255);
		border-top: 1px solid rgb(195,195,195);
	}
	
		#code #submit {width: auto;}
	
		#code fieldset {
			border-top: 1px solid rgb(255,255,255);
			border-bottom: 1px solid rgb(195,195,195);
			padding: 11px 0;
		}
		
			#code fieldset:first-child {padding-top: 10px;}
			#code fieldset:last-child {padding-bottom: 10px;}
			
		#code input {
			padding: 0;
			margin: 0;
			float: left;
			position: relative;
			top: 7px;
			line-height: 24px;
			vertical-align: middle;
		}
		
		#code small, #code label {
			display: block;
			padding-left: 20px;
		}
	
		#code textarea {
			z-index: 998;
			opacity: 1;
			font-family: monospace;
			width: 596px;
			padding: 11px;
			background: rgb(218,218,218);
			border: 1px solid rgb(195,195,195);
			-webkit-box-shadow: inset 0 2px 8px rgba(0,0,0, 0.145);
			   -moz-box-shadow: inset 0 2px 8px rgba(0,0,0, 0.145);
					box-shadow: inset 0 2px 8px rgba(0,0,0, 0.145);
			height: 228px;
			position: absolute;
			top: 0; left: 276px;
			-webkit-transition: all 0.1618s ease-out;  
			   -moz-transition: all 0.1618s ease-out;  
					transition: all 0.1618s ease-out;
		}
		
		#code textarea:focus {
			outline: none;
			background: rgb(255,255,255);
			-webkit-box-shadow: none;
			   -moz-box-shadow: none;
					box-shadow: none;
		}
		
		#code .hidden {opacity: 0;}
		
			#code #html {z-index: 999;}
			#code #css {top: 276px;}

#colophon {
	border-width: 1px 0 0 0;
	padding-top: 35px;
}

	#share, #follow {
		position: absolute;
		left: 36px; top: 131px;
	}
	
		#twitter a {color: #005F81;}
		#fb a {color: #3B5998;}
	
	#follow {
		top: 35px; left: 48px;
		width: 436px;
	}
	
	#powered-by, #versions {
		width: 436px;
		padding-left: 460px;
	}
	
	#versions {margin-top: 24px;}


/*		Tablet Layout: 768px (48em).
		Gutters: 24px (1.5em).
		Outer margins: 28px (1.75em).
		Inherits styles from: Default layout.
------------------------------------------------------------------
cols	1     2      3      4      5      6      7      8
px		68    160    252    344    436    528    620    712		*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		padding: 48px 0 72px;
	}
	
	#masthead, #what, #how, #get, #colophon {
		padding-left: 28px;
		padding-right: 28px;
		width: 712px;
	}
	
		#masthead nav {right: 28px;}
		
		#montage {width: 768px;}
		
			#imac 				{left: 25px;}
			#macbook 			{left: 108px;}
			#ipad-landscape 	{left: 324px;}
			#ipad-portrait 		{left: 444px;}
			#iphone-landscape 	{right: 100px;}
			#iphone-portrait 	{right: 28px;}
	
	article {
		padding-top: 47px;
	}
	
		#what .opening, #what section {
			width: auto;
			height: auto;
		}
		
			#what .opening {width: 436px;}
		
			#what .opening p {
				font-size: 22px;
				line-height: 30px;
			}
	
		#new {right: 28px;}
		
		#what figure {height: 160px;}
		
			.canvas {top: -12px;}
		
		#what section {
			float: none;
			height: 160px;
		}
		
	#how section {
		padding-left: 92px;
		padding-right: 92px;
	}
	
		#sites, #resources {
			position: static;
			float: left;
			margin: 12px 0 36px;
		}
		
		#resources {margin-left: 24px;}

	#code textarea {
		width: 412px;
	}
	
		#follow {position: static;}
		
		#powered-by {
			margin-top: 24px;
			padding: 0;
		}
		
		#versions {
			position: absolute;
			bottom: 0;
			margin: 0;
			padding: 0;
		}
		
		#share, #versions {left: 488px; width: 252px; text-align: center;}
		#share {top: 35px;}
			#share li {margin: 0 0 12px; float: none;}
}



/*		Mobile Layout: 320px (20em).
		Gutters: 24px (1.5em).
		Outer margins: 34px (2.125em).
		Inherits styles from: Default Layout.
--------------------------------------------------
cols	1     2      3
px		68    160    252
em		4.25  10.0   15.75						*/

@media only screen and (max-width: 767px) {
	
	body {
		padding: 24px 0 60px;
	}
	
	#masthead, #what, #how, #get, #colophon {
		padding-left: 34px;
		padding-right: 34px;
		width: 252px;
	}
	
	#masthead {text-align: center;}
	
		#masthead nav {
			right: auto; top: auto; 
			left: 34px; top: 84px;
			z-index: 888;
		}
		
			#masthead li {width: 252px; margin: 0 0 6px; float: none;}
			#masthead a {text-align: center;}
		
		#montage {width: 320px; margin-top: 168px;}
			
			#imac 				{right: auto; left: -226px;}
			#macbook 			{right: auto; left: -120px;}
			#ipad-landscape 	{display: none;}
			#ipad-portrait 		{left: 34px;}
			#iphone-landscape 	{left: auto; right: 72px;}
			#iphone-portrait 	{left: auto; right: 0;}
			
	#new, #what figure {display: none;}
	
	#what section, #what .opening, #how section, #sites, #resources, #get section, #colophon section, #colophon p {
		width: auto;
		position: static;
		padding: 0;
		height: auto;
	}
	
	article {padding-top: 35px;}
	
	#what .opening {margin-bottom: 0;}
	#wide {margin-bottom: 24px;}
	
	#what .opening p, article h2 {
		font-size: 16px;
		line-height: 24px;
	}
	
	aside h2, aside li {font-size: 18px; line-height: 24px;}
	
	article h2 {text-transform: uppercase; letter-spacing: 1px;}
	article aside h2 {text-transform: none; letter-spacing: 0;}
	
	article h1 {
		font-size: 26px;
		line-height: 36px;
	}
	
	#sites, #resources {
		padding: 12px;
		margin-bottom: 24px;
	}
	
	#code {margin: 0;}
	
		#code form {width: auto; position: relative; border-bottom: none;}
	
		#get textarea {width: 228px; height: 160px; margin-top: 24px; position: static;}
		#css {margin-bottom: 24px;}
		
		#follow p {margin-bottom: 24px; clear: both;}
		#share li, #share ul {margin: 0 0 12px; float: none; text-align: center;}
	
}



/*		Wide Mobile Layout: 480px (30em).
		Gutters: 24px (1.5em).
		Outer margins: 22px (1.375em).
		Inherits styles from: Default Layout, Mobile Layout.
--------------------------------------------------------------
cols	1     2      3      4      5
px		68    160    252    344    436						*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	body {
		padding: 24px 0 48px;
	}
		
	#masthead, #what, #how, #get, #colophon {
		padding-left: 22px;
		padding-right: 22px;
		width: 436px;
	}
	
	#masthead {text-align: left;}
	
		#masthead nav {left: 10px; width: 446px;}
		
			#masthead li {width: auto; margin: 0 0 0 12px; float: left;}
		
		#montage {width: 480px; margin-top: 72px;}
		
			#imac 				{left: -180px}
			#macbook 			{left: 0;}
			#ipad-portrait 		{left: 144px;}
			#iphone-landscape 	{left: auto; right: 93px;}
			#iphone-portrait 	{left: auto; right: 21px;}
		
	#sites, #resources {
		padding: 24px;
	}
	
	#get fieldset {width: 436px;}
	
	#get textarea {width: 412px;}
	
	#follow p {
		font-size: 26px;
		line-height: 36px;
	}
	
	#share li {margin: 0 12px 24px 0; float: left;}
	
}