/*	Less Framework 3
	by Joni Korpi
	http://lessframework.com	*/


/*	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, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, figure, figcaption, hgroup, footer, header, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
}

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

a img {border: 0;}

figure {position: relative;}
figure img {width: 100%;}


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

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

.huge, h1 {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -1px;	
	color:#888;
}

.large, h2 {
	font-size: 42px;
	line-height: 48px;
	margin:48px 0;
	color:#888;
}

.big, h3 {
	font-size: 26px;
	line-height: 36px;
}

.normal, body {
	font: 24px 'OFL Sorts Mill Goudy TT', Helvetica, Arial, sans-serif;
	color:#555;
	line-height:36px;
}

.small {
	font-size: 16px;
	line-height: 18px;
} 

p {
	margin:24px 0 0 0;	
}

a {padding:0;text-decoration:none;color:#e00;margin:0 0 0 0;border-bottom:1px dashed #e00;line-height:8px;outline:none;}
a:hover {color:#e00;border-bottom:1px solid #e00;}

em {font-style:normal;font-weight:bold;}

#start {}

#middle{margin:0 0;}

#end{}

.me {font-family: 'Reenie Beanie', arial, serif;margin:0;color:#005;}


#countdown {margin:0;padding:0;color:#999;}

#mask {width:100%;height:100%;background:rgba(255,255,255,0.5);position:fixed;top:0;left:0;overflow:hidden;}
#infobox {width:360px;overflow:visible;padding:10px;background:rgba(255,255,0,1);color:#000;font-size:16px;position:absolute;top:0;left:0;border-radius:8px;-moz-border-radius:8px;box-shadow:1px 1px 16px #555;-moz-box-shadow:0px 0px 16px #888;-webkit-box-shadow:0px 0px 16px #888;}
#infobox h4, #infobox p {margin:0;line-height:20px;}
#infobox h4 {position:relative;top:-34px;padding-top:34px;padding-bottom:0;background:url(images/arrow.png) 146px 0px no-repeat;}
#infobox p {position:relative;top:-16px;}
.close{display:none;}

ul {position:relative;top:-16px;margin:0;padding:0 8px 0 16px;}
li {margin:0;line-height:20px;}


/*	Default 8-column layout
	60 px columns, 24 px gutters, 60 px margins, 768 px total
	---------------------------------------------------------
	1     2      3      4      5      6      7      8     
	60px  144px  228px  312px  396px  480px  564px  648px	*/

body {
	background: url(images/bg.png) #eee;
	padding: 84px 60px 84px 60px;
	width: 648px;
	-webkit-tap-highlight-color: rgb(255,255,0);
	-moz-text-shadow: 1px 1px 1px #fff;
	text-align:center;
	margin:auto;

}

::selection 	 {background: rgb(255,255,0);}
::-moz-selection {background: rgb(255,255,0);}

section{
	margin:auto;
	text-align:left;
	background: url(images/paper.jpg) #fffff5;
	border:solid 0px #ccc;
	padding:84px 60px;
	box-shadow:0px 0px 24px #ccc;
	-moz-box-shadow:0px 0px 24px #000;
	border-radius:2px;
	-moz-border-radius:3px;
}

.space {margin-top:64px;}

/*	13-column layout
	60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars)
	---------------------------------------------------------------------------------------
	1     2      3      4      5      6      7      8      9      10     11     12     13
	60px  144px  228px  312px  396px  480px  564px  648px  732px  816px  900px  984px  1068px	*/

@media only screen and (min-width: 1212px) {
	
	body {
		padding: 96px 72px 96px 72px;
		width: 1068px;
	}
	section {
		padding:96px 72px;
	}
}


/*	5-column layout
	60 px columns, 24 px gutters, 42 px margins, 480 px total
	---------------------------------------------------------
	1     2      3      4      5
	60px  144px  228px  312px  396px	*/

@media only screen and (max-width: 767px) and (min-width: 480px) {
	
	body {
		padding: 60px 42px 60px 42px;
		width: 396px;
		-webkit-text-size-adjust: 100%;
	}
	section {
		padding:60px 42px;
	}	
}


/*	3-column layout
	60 px columns, 24 px gutters, 46 px margins, 320 px total
	---------------------------------------------------------
	1     2      3
	60px  144px  228px	*/

@media only screen and (max-width: 479px) {
	
	body {
		padding: 24px 23px 0;
		width: 276px;
		-webkit-text-size-adjust: 100%;
		font-size:16px;
		line-height: 18px;
		text-align:left;
		margin:0;
	}
	section {
		padding:24px 23px;
		margin:0;
	}	
	p {
		margin:16px 0 0 0;	
	}	
	


	.huge {font-size:24px;
	line-height: 28px;}
	.large {font-size:20px;
	line-height: 22px;margin:24px 0;}
	.space {margin-top:24px;}
	#infobox {width:240px;font-size:16px;}
	#infobox h4 {background:url(images/arrow.png) 96px 0px no-repeat;}
	.close{display:block;text-align:center;}
	#closebtn{}
	.me {font-size:28px;}
	a, a:hover {border:0;text-decoration:underline;}
}