body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14pt;
	color:#2f303c;
	margin:0;
}


/**
 * Generic styles
 */
a { color:#c23a00; text-decoration:none; }
a:hover { text-decoration:underline; }
.content { max-width: 900px; margin:0 auto; }
.clear { clear:both; }
.content p { text-align:justify; line-height:18pt; font-size:12pt; }
.content h1 { font-size:24pt; margin-bottom:20pt; margin-top:0px; }
iframe { border:none; }
*:focus { outline: 0; }


/**
 * Generic Button
 */
button, a.button {
	position:relative;
	width:150px;
	height:40px;
	background:transparent url('/images/button.png') no-repeat;
	border:none;	
	color:white;
	font-size:10pt;
	padding-top:4px;
	text-shadow: 1px 1px 2px #000;
	padding-right:30px;
	display:block;
}
button:hover, a.button:hover { cursor:pointer; top:1px; text-decoration:none; }
button:active, a.button:active { top:2px; }

a.button {
	padding-top: 13px;
	height:27px;
	width: 122px;
	padding-left: 0px;
	padding-right: 28px;
	text-align: center;
}


/**
 * Prettyprint
 */
.com { color: #93a1a1; }
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #D14; }
.kwd, .linenums .tag { color: #1e347b; }
.typ, .atn, .dec, .var { color: teal; }
.pln { color: #48484c; }

.prettyprint {
	padding: 8px;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
	font-size:10pt;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow: auto;
	tab-size: 4;
}
.prettyprint.linenums {
  -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
     -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
          box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
	margin: 0 0 0 33px; /* IE indents via margin-left */
	padding: 0;
} 
ol.linenums li {
	padding-left: 12px;
	color: #bebec5;
	line-height: 18px;
	text-shadow: 0 1px 0 #fff;
	list-style: decimal;
}


/**
 * HEAD
 */
#head { background:#131313 url('/images/header.jpg') center 0px no-repeat; height:370px; width:100%; text-align:center; }
#particles { width: 100%; max-width: 500px; }
.documentation { padding-top:50px; }
.documentation #head { display:none; }
.documentation #particles { display:none; }
img.github { position: fixed; top: 0; right: 0; border: 0; z-index:20; }
img.github.over { opacity:0.0; transition:opacity 0.5s; }
img.github.over:hover { opacity:1.0; }


/**
 * HTML5
 */
#html5-icons {
	float:left;	
	padding-top:8px;
}
#html5-icons button {
	background:transparent url('/images/html5-icons.png') no-repeat;	
	display:inline-block;
	height:20px;
	width:24px;
	vertical-align:middle;
	margin-left:9px;
	position:relative;
	text-decoration:none;
	padding:0;
}
#html5-icons .logo {
	background-position:-2px -4px;
	width:38px;
	height:43px;
}
#html5-icons button span {
	position: absolute;

	border-radius:3px;
	background-color:rgba(0,0,0,0.8);
	border:1px solid grey;

	white-space:nowrap;
	font-size:8pt;
	color:white;
	padding:5px;
	opacity:0.0;
	bottom:-80px;
	left:-10px;
	z-index:-1;

	transition:opacity 0.5s, bottom 0.5s, z-index 0.5s;
}
#html5-icons button:hover span:not(:hover) {
	opacity:1.0;
	bottom:-30px;
	z-index:100;
}

#html5-icons .storage          { background-position:-39px -7px; }
#html5-icons .device           { background-position:-63px -7px; }
#html5-icons .multimedia       { background-position:-87px -7px; }
#html5-icons .webgl            { background-position:-113px -7px; }
#html5-icons .perfs            { background-position:-135px -7px; }
#html5-icons .socket           { background-position:-159px -7px; }
#html5-icons .css3             { background-position:-183px -7px; }
#html5-icons .storage:hover    { background-position:-39px -31px; }
#html5-icons .device:hover     { background-position:-63px -31px; }
#html5-icons .multimedia:hover { background-position:-87px -31px; }
#html5-icons .webgl:hover      { background-position:-113px -31px; }
#html5-icons .perfs:hover      { background-position:-135px -31px; }
#html5-icons .socket:hover     { background-position:-159px -31px; }
#html5-icons .css3:hover       { background-position:-183px -31px; }



/**
 * TITLES
 */
#titlebar {
	background-color:white;
	height:55px;
	width:100%;
	box-shadow: 0px 3px 15px rgba(0,0,0,0.5);
	position:relative;
	z-index:10;
}
#titlebar.fixed, .documentation #titlebar {
	position:fixed;
	top:0px;
}
#titlebar div.logo {
	float: left;
	margin-left: 59px;
}
#titlebar div.logo a {
	position:relative;
	top:-1px;
}
#titlebar div.logo a:active {
	top:0px;
}
#titlebar .nav {
	float:left;
}
#titlebar .nav ul { margin-left:40px; margin-top:0px; padding:0; list-style:none; }
#titlebar .nav li { float:left; padding-top:15px; }
#titlebar .nav a:hover, #titlebar .nav a.current { text-decoration:none; background-color:#efefef; box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3); }
#titlebar .nav a { padding:15px; padding-top:19px; padding-bottom:20px; color:#49626e; font-size:14px; }

#titlebar .title {
	padding-top:10px;
	float:right;
}

#titlebar .title * { display:inline; font-weight:normal; font-family:Verdana; }
#titlebar .title h1 {
	color:#68676f;
	font-size:20pt;
}

#titlebar .title h2 {
	color:#999999;
	font-size:14pt;
	margin-left:20px;
}


#particles {
	display:inline-block;	
}


/**
 * QUICK START
 */
#quickstart.fixed { margin-top:92px; }
#quickstart { padding-bottom:30px;  }
#quickstart h3 { font-size:18pt; margin-bottom: 20pt; margin-top: 0px;}
#quickstart h4 { font-size: 1.17em; }
#quickstart .play, #quickstart .social, #quickstart .setup { float:left; }
#quickstart button { margin-top:16px; }
#quickstart .play { width:30%; padding-left:5%; position:relative; }
#quickstart .play button { right: 0px; position: absolute; bottom: -40px; }
#quickstart .play button:hover { bottom:-41px; top:auto; }
#quickstart .play button:active { bottom:-42px; top:auto; }

#quickstart .social { font-size:0pt; line-height:8pt; width:30%; text-align:center; }
#quickstart .social .groups { text-align:center; }
#quickstart .social .groups div { font-size:14px; font-weight:bold; margin-bottom:10px; }
#quickstart .links { height:28px; }
#quickstart .setup { width:30%; padding-right:5%; }
#twitter-widget-0 { margin-left:10px; }


#quickstart .stats { font-size: 12px; margin-bottom: 20px; }
#quickstart .stats .online, #quickstart .stats .offline {
	padding: 8px 5px 8px 5px;
	background-color: #446a5e;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
	border-radius: 10px;
	width: 30px;
	margin: 0 auto;
	font-size: 15px;
	color: white;
	text-shadow: 1px 1px 2px black;
	display: inline-block;
}
#quickstart .stats .offline {
	background-color: #cc4444;
}
#quickstart .stats .count {
	padding: 8px 5px 8px 5px;
	background-color: #eee;
	box-shadow: inset 0px 0px 5px rgba(0,0,0,0.5);
	border-radius: 10px;
	width: 30px;
	margin: 0 auto;
	font-size: 15px;
	color: #055;
	text-shadow: 1px 1px white;
	font-weight: bold;
	display: inline-block;
}

/**
 * ABOUT
 */
#about {
	width:100%;
	background:#dcdcdc url('/images/shadow.png') top center no-repeat;
	padding-top:50px;
	padding-bottom:50px;
	text-shadow: 1px 1px 2px white;
}
#about .content { position:relative; }
#about .potion { width:114px; height:130px; background:transparent url('/images/potion.png') no-repeat; position:absolute; right:0px; top:-90px;}
#about .youtube { width: 420px; height:270px; background-color:#121212; float:left; }
#about .description { width:45%; float:left; margin-left:5%; }


/**
 * News
 */
#news {
	background:transparent url('/images/shadow.png') top center no-repeat;
	padding-top:50px;
	padding-bottom:50px;
	text-shadow: 1px 1px 2px white;
}
#news ul { list-style:none; padding:0px; }
#news a:hover { text-decoration:none; }
#news li { text-align:center; float:left; width:20%; }
#news li:hover { background-color:#EEE; background-color:#EEE; box-shadow:0px 0px 10px #aaa; }
#news h3 { font-weight:normal; font-size:15px; text-shadow:none; color:#e23a00; }
#news img { border-radius: 5px; border: 1px #ccc solid; padding: 0; float:none; }
#news h2 { font-weight:normal; color:#2f303c; font-size: 15px; text-shadow:none; }
#news a.button { float: right; margin-top: 20px;}


/**
 * Servers
 */
#servers {
	background:transparent url('/images/shadow.png') top center no-repeat;
	padding-top:50px;
	padding-bottom:70px;
	text-shadow: 1px 1px 2px white;
}
#servers h2 { font-weight:normal; color:#2f303c; font-size: 15px; text-shadow:none; }
#servers ul { list-style:none; padding:0px; padding-top:20px; }
#servers li { text-align:center; float:left; width:25%; display:table; }
#servers li span { display:table-cell; vertical-align: middle; height: 150px; }
#servers img { border:none; }



/**
 * Posts
 */
.post, .comment {
	background:transparent url('/images/shadow.png') top center no-repeat;
	padding-top:50px;
	padding-bottom:30px;
	text-shadow: 1px 1px 2px white;
}
.post h1 { margin:0; }
.post h2 { font-size: 14px; font-style:italic; font-weight:normal; }
.post .content { margin:0; max-width:800px; }
.post .content, .post .content li { font-size:12pt; line-height:18pt; }


#blog a.button { float: right; margin-top: 20px; }

/**
 * Experiments
 */
#experiment { background:white url('/images/merchant.png') 70px 70px no-repeat; padding-top:50px; min-height:500px;  }
#experiment .description { width:50%; float:left; }
#experiment .more { width:30%; float:left; margin-left:20%; }
#experiment .more h1 { font-size:20pt; color:#b12405; font-weight:normal;}
#experiment .more ul { list-style:url('/images/li.png'); }
#experiment .more li { color:#2e383f; line-height:28pt; }
#experiment .more button { margin-top:30px; float:right; }


#overlay { position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.9); z-index:99; }
body.noscroll { height: 100%; overflow: hidden; }


/**
 * Team
 */
#team { background-color:#35353b; color:white; text-align:center; padding-top:50px; }
#team h1 { margin-bottom:5px; }
#team h2 { font-size:12pt; font-weight:normal; }
#team .group { display:inline-block; vertical-align:top; margin:5%; font-size:12pt; width:216px; height: 256px; }
#team .git { position:relative; }
#team .git img { position:absolute; }
#team .over { opacity:0.0; transition:opacity 0.5s; }
#team .over:hover { opacity:1.0; }


/**
 * Bugs
 */
#bug { padding-top:50px; background:transparent url('/images/vapo.jpg') right 20px no-repeat; }
#bug .description { width:60%; min-height:530px; background:transparent url('/images/bug.png') 50px 280px no-repeat; }
#bug .button { margin-top:50px; float:right; }


/**
 * Footer
 */
#footer { background-color:#29292d; min-height:65px; width:100%; }
#footer .credits { float:right; padding-top:23px; }
#footer .navigation { list-style:none; float:left; }
#footer .navigation li { display:inline-block; font-size:10pt; margin-right:20px; }
#footer .navigation li a { color:#82a0b0; }


/**
 * API
 */
#api { padding-top: 30px; position: relative;  }
#api .summary {width: 24%; float: left; padding: 10px; background-color: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); border-radius: 5px;}
#api .doc { width: 70%; width:calc(70% - 20px); float: left; margin-left: 20px; }
#api .doc img { max-width:100%; }
#api h1 { margin-top: 20px; border-bottom: 1px dashed #555; }
#api p, #api li, #api dl { font-size:10pt; }
#api h3 { margin-top:30px; font-size:12pt; }
#api h2 { border-bottom: 1px solid #CCC; font-size: 18pt; margin-top:50px; }
#api h1:before, #api h2:before, #api h3:before { 
	display: block; 
	content: " "; 
	margin-top: -80px; 
	height: 80px; 
	visibility: hidden; 
}
#api ul { list-style:decimal; }
#api li { line-height:16pt }
#api .token { color:#007000; }
#api dt { font-weight:bold; margin-left: 10px; font-style: italic; }
#api .previous { margin-top: 50px; margin-bottom: 50px; float: right; }
#api .summary, #api .summary ul { list-style:none; padding-left:15px; }
#api .deprecated { color:#F55; font-weight: normal; }
#api .important { color:#c00; font-size:11pt; padding:10px; background-color:#fcc; border:1px solid #c55; }
#api .important a { text-decoration:underline; color: #c05;}


/**
 * Slider
 */
#slider { height:350px; overflow:hidden; position:relative; margin-bottom:30px; }
#slider img { position:absolute; top:0px; }


/**
 * Responsive design
 */
@media screen and (max-width:920px) {
	.content { padding:10px; }
	#footer .content { padding:0px; }
	#footer .credits { padding-right:10px;}

	#titlebar .content { padding:0; }
	#html5-icons { padding-left:20px; }
	#html5-icons button:not(.logo) { display:none; }

	#slider img { width:100%; }
}

@media screen and (max-width:900px) {
	#about .content { position:relative; text-align:center; margin-left:0; padding-left:5%;}
	#about .youtube { float:none; }
	#about .description { width:auto; float:none; margin:5% }
	#experiment { background-size: 60%; background-position: 30% 70%; }
	#quickstart .setup { float:right; }
}

@media screen and (max-width:660px) {
	#titlebar { margin-bottom:30px; }
	#titlebar div.logo { display:none; }
	#slider { height:270px; margin-bottom:0px; }
	#quickstart .play { padding-left:5px; }
	#quickstart .social {
		padding-left: -webkit-calc(5% - 5px);
		padding-left: -moz-calc(5% - 5px);
		padding-left: -ms-calc(5% - 5px);
		padding-left: -o-calc(5% - 5px);
		padding-left: calc(5% - 5px);
		padding-right: -webkit-calc(5% - 5px);
		padding-right: -moz-calc(5% - 5px);
		padding-right: -ms-calc(5% - 5px);
		padding-right: -o-calc(5% - 5px);
		padding-right: calc(5% - 5px);
	}
	#quickstart .setup { padding-right:5px; }

	#api .summary { width:100%; width:calc(100% - 30px); }
	#api .doc { width:100%; margin-left:0px; }
}


@media screen and (max-width:550px) {
	#footer { padding-top:10px; padding-bottom:10px;}
	#footer .credits, #footer .navigation { float:none; text-align:center; }
	#news li { width:50%; }
	#slider { height:225px; }
	#bug { padding-top:50px; background:none; }
	#bug .description { width:100%; }
	#bug .button { margin-top:50px; float:right; }
	#experiment { background: none; }
	#experiment .description { float:none; width:100%; }
	#experiment .more { float:none; width:100%; margin-top:40px; margin-left:0; }
	img.github { display:none; }
	#quickstart .social { display:none; }
	#quickstart .play, #quickstart .setup { width: auto; float: none; }
	#quickstart .play { margin-bottom: 80px; }
}

@media screen and (max-width:445px) {
	#html5-icons { padding-left:5px; }
	#titlebar .nav ul { margin-left:10px; }
	#slider { height:180px; }
	#about .youtube { width:100% }
	#bug .description { width:100%; background:none; min-height:450px; }
}

@media screen and (max-width:400px) {
	#html5-icons { display:none; }
}

@media screen and (max-width:390px) {
	#news li { width:100%; }
	#footer .navigation { padding: 5px; }
	#footer .navigation li {
		background-color: rgba(255,255,255,0.2);
		display: block;
		border-radius: 10px;
		padding: 10px;
		margin: 5px;
		color: white;
		font-size: 14px;
	}
	#footer .navigation li a {
		color: white;
	}
}

@media screen and (max-width:350px) {
	#bug .button { margin-top:20px; }
	#titlebar .nav a { padding-left:10px; padding-right:10px; }
	#slider { height:150px; }
}