/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/


/*	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;}



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

@font-face { font-family: LeagueGothic; src: url('http://www.theie7countdown.com/assets/League_Gothic.otf') format('opentype'), url('http://www.theie7countdown.com/assets/League_Gothic.ttf') format('truetype'); } 
@font-face { font-family: CallunaSans; src: url('http://www.theie7countdown.com/assets/CallunaSansRegular.otf') format('opentype'), url('http://www.theie7countdown.com/assets/CallunaSansRegular.ttf') format('truetype'); } 


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

.huge, h1 {
	font-size: 48px;
	line-height: 48px;
	letter-spacing: -1px;
	xtext-shadow:0 0px 50px #eeeeee;
}

.large, h2 {
	font-size: 24px;
	line-height: 32px;
	letter-spacing: 0px;           
}

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

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

body {
	xfont: 16px/24px Georgia, serif;
	font: 15px/16px CallunaSans, Lucida, sans-serif;
}

h1, h2, h3, h4, h5, h6, embed, object, svg {
	font-family: LeagueGothic, Impact, sans-serif;
	font-weight:normal;
	margin-bottom:16px;
}

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

/* Selection colours (easy to forget) */

::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);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		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    */

/* hotfix */
.pptlink {
	color:red;
}

body {
	width: 896px;
	padding: 72px 48px 84px;
	margin:0 auto;
	xbackground: rgb(232,232,232);
	background:#f6f6f6;
	xcolor: rgb(60,60,60);
	color:#ababab;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

#grid {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url('img/grid.png');
	z-index:100;
}

code {
	color:#2c98d6;
	word-wrap: break-word;
}

svg {
	position:relative;
	z-index:0;
}

#small_svg {
	display:none;
}

header {
	width:100%;
	margin:-8px 0 29px 0;
}

header h1 {
	color:#848484;
	margin-bottom:3px;
}

aside {
	width:212px;
	height:336px;
	float:left;
	background:#2c98d6;
	padding:24px 20px;
	color:white;
}

aside h2 {
	margin-bottom:11px;
}

aside a {
	color:white;
}

aside p {
	margin: 0 0 16px 0;
}

#arrow {
	position:absolute;
	-webkit-transform:rotate(15deg);
	-moz-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	transform:rotate(15deg);
}

#arrow h3 {
	position:relative;
	top:55px;
	left:30px;
	z-index:1;
	-webkit-font-smoothing: subpixel-antialiased;
	letter-spacing: 0px;
}

#arrow #bg {
	position:relative;
	top:-10px;
	left:20px;
	z-index:0;
}

section#map {
	width:644px;
	height:384px;
	float:left;
	background:#e3e3e3;
	xposition:relative;
}

#map_wrapper {
	width:644px;
	height:384px;
	background:#e3e3e3;
	position:absolute;
	xbackground:url('img/map2.svg') no-repeat top left;
}

#big_svg {
	width:644px;
	height:384px;
	position:relative;
	top:0;
	left:0;
	background:#e3e3e3;
}

section#action {
	width:100%;
	height:240px;
	clear:both;
}

article {
	width:160px;
	margin-right:24px;
	float:left;
	padding:24px 0;
}

#details article {
	width:480px;
	clear:both;
	margin-left:276px;
}

article:first-of-type {
	margin-left:276px;
}

article h2 {
	color:#848484;
	text-transform:uppercase;
	margin-bottom:11px;
}

a {
	color:#2c98d6;
}

article p {
	margin-bottom:1em;
}

footer {
	width:100%;
}

footer p:first-of-type {
	xwidth:100%;
	clear:both;
	color:#838383;
	background:#e3e3e3;
	xpadding:10px 0px;
	margin-top:25px;
}

footer p {
	padding:10px 20px;
	margin:0;
}

#html5logo {
	text-align:center;
}

#overlay h2 {
	position:absolute;
	top:24px;
	left:20px;
}

#values div, #labels div {
	font-family: LeagueGothic, Impact, sans-serif;
	color:white;
	position:absolute;
}

#labels div {
	color:#b0b0b0;
	font-size:24px;
	line-height:24px;
	text-transform:capitalize;
}

#values .worldwide {
	color:black;
	font-size:144px;
	top:87px;
	left:470px;
}

#labels .worldwide {
	color:black;
	font-size:48px;
	top:163px;
	left:470px;
	text-transform:uppercase;
}

#values .asia {
	font-size:72px;
	top:130px;
	left:320px;
}

#labels .asia {
	top:200px;
	left:405px;
}

#values .europe {
	font-size:30px;
	top:142px;
	left:248px;
}

#labels .europe {
	top:188px;
	left:205px;
}

#values .africa {
	font-size:36px;
	top:235px;
	left:240px;
}

#labels .africa {
	top:330px;
	left:240px;
}

#values .australia {
	font-size:30px;
	top:280px;
	left:410px;
}

#labels .australia {
	top:320px;
	left:400px;
}

#values .northamerica {
	font-size:60px;
	top:130px;
	left:75px;
}

#labels .northamerica {
	top:180px;
	left:20px;
}

#values .southamerica {
	font-size:30px;
	top:260px;
	left:135px;
}

#labels .southamerica {
	top:290px;
	left:75px;
}

#arrow {
	background:none;
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		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 {
		width: 712px;
		padding: 48px 28px 60px;
	}
	
	article:first-of-type, #details article {
		margin-left:160px;
	}
	
	section#map, #map_wrapper, #big_svg {
		width:460px;
		height:320px;
	}
	
	aside {
		height:272px;
	}
	
	aside p:last-of-type {
		margin-bottom:-32px;
	}
	
	#arrow {
		left:10px;
		-webkit-transform:rotate(15deg) scale(0.7);
		-moz-transform:rotate(15deg) scale(0.7);
		-o-transform:rotate(15deg) scale(0.7);
		transform:rotate(15deg) scale(0.7);
		
	}

	
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		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 {
		width: 436px;
		padding: 36px 22px 48px;
	}
	
	article, #details article {
		width:100%;
	}
	
	xfooter {
		width:396px;
	}
  
	article:first-of-type, #details article {
		margin-left:0;
	}

  aside  {
		width:396px;
		height:190px;
	}
  
	section#map, #map_wrapper, #big_svg {
		width:436px;
		height:284px;
	}
	
	#arrow {
		top:570px;
		left:150px;
		z-index:10;
		x-webkit-transform:rotate(15deg) scale(0.7);
		x-moz-transform:rotate(15deg) scale(0.7);
		x-o-transform:rotate(15deg) scale(0.7);
		xtransform:rotate(15deg) scale(0.7);
	}
	
	#arrow h3 {
		-webkit-transform:rotate(-30deg) scale(0.7);
		-moz-transform:rotate(-30deg) scale(0.7);
		-o-transform:rotate(-30deg) scale(0.7);
		transform:rotate(-30deg) scale(0.7);
	}
	
	#arrow #bg {
		width:189px;
		height:64px;
		-webkit-transform: rotate(-210deg) scale(0.7) translate(2px,-4px); /* negative value, coz the arrow is "upside down". funny :-) */
		-moz-transform:rotate(-210deg) scale(0.7) translate(2px,-4px);
		-o-transform:rotate(-210deg) scale(0.7) translate(2px,-4px);
		transform:rotate(-210deg) scale(0.7) translate(2px,-4px);
	}
	
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 479px) {
	
	body {
		width: 252px;
		padding: 48px 34px 60px;
	}
	
	article, #details article {
		width:252px;
		margin:0;
	}
	
	section#map, #map_wrapper, #big_svg {
		width:252px;
		height:980px;
	} 
	
	footer, footer p:first-of-type {
		width: 212px;
	}
	
	article:first-of-type, #details article {
		margin:0;
	}
	
	#arrow {
		top:900px;
		z-index:10;
	}
	
	aside {
		height:272px;
	}
	
	section#map {
		height:980px;
		xbackground:url('img/map_iphone.svg') no-repeat top left;
	}
	
	#arrow {
		top:1470px;
		left:100px;
	}
	
	#arrow h3 {
		-webkit-transform:rotate(-30deg) scale(0.7);
		-moz-transform:rotate(-30deg) scale(0.7);
		-o-transform:rotate(-30deg) scale(0.7);
		transform:rotate(-30deg) scale(0.7);
	}
	
	#arrow #bg {
		width:189px;
		height:64px;
		-webkit-transform: rotate(-210deg) scale(0.7) translate(2px,-4px); /* negative value, coz the arrow is "upside down". funny :-) */
		-moz-transform:rotate(-210deg) scale(0.7) translate(2px,-4px);
		-o-transform:rotate(-210deg) scale(0.7) translate(2px,-4px);
		transform:rotate(-210deg) scale(0.7) translate(2px,-4px);
	}
	
	#big_svg {
		xdisplay:none;
	}
	
	#badge img {
		width:100%;
	}
	
	
}

/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}