*  {
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

html {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 125%;
	background-color: #eee;
	background-repeat: repeat-x;
	background-position: bottom;
	color: #666;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

hr {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	clear: both;
	height: 0;
	display: block;
	margin: 1.5em 0;
}

header[role=banner] {
	width: 100%;
	padding: 40px 0 20px 0;
	text-align: center;
	margin-bottom: 0;
	font-size: 1em;
	background:url(pg-bg.jpg) #000 no-repeat center;
}

h1 {
	font-size: 1em;
	line-height: 3;
	color: #333;
	letter-spacing: -.03em;
	-webkit-mask-image: -webkit-linear-gradient(rgba(0,0,0,.7), #000);
	text-align:center;
}

header h2 {
	line-height: 1;
	font-size:18px;
	color: #999;
}

p {
	margin-bottom: 1.5em;
}

h3 {
	margin-top: 2em;
}

code {
	font-size: 1.2em;
	line-height: 1;
	font-weight: 700;
	color: #36a978;
}

p a {
	text-decoration: none;
	color: #39c;
	font-weight: bold;
}

p a:hover {
	text-decoration: underline;
}

.alignright {
	float: right;
}

.aligncenter, .promo {
	text-align: center;
}

.container {
	max-width: 700px;
	padding: 0 16px;
	margin: 0 auto;
}

.sandbox {
	background: url('bg-gradient.png') no-repeat center top;
	background-size: 100%;
	padding: 24px 0;
	position: relative;
	z-index: 999;
	pointer-events: none;
}

.fixed + h3 {
	margin-top: 190px;
}

.fixed {
	position: fixed !important;
	top: 0;
	width: 100%;
	max-width: 668px;
}

#animateTest {
	text-align: center;
	background: #123;
	padding: 20px 30px 12px 30px;
	width: 260px;
	color: #fff;
	margin: 0 auto;
	border-radius: 5px;
	font-weight: bold;
	-webkit-mask-image: -webkit-linear-gradient(#000, rgba(0,0,0,.9));
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: .2s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: 1s;
	-moz-animation-delay: .2s;
	-moz-animation-timing-function: ease;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: 1s;
	-ms-animation-delay: .2s;
	-ms-animation-timing-function: ease;
	-ms-animation-fill-mode: both;
	-o-animation-duration: 1s;
	-o-animation-delay: .2s;
	-o-animation-timing-function: ease;
	-o-animation-fill-mode: both;
	animation-duration: 1s;
	animation-delay: .2s;
	animation-timing-function: ease;
	animation-fill-mode: both;
}

#animateTest p {
	margin: 0;
}

footer {
	margin: 1.5em 0 0;
	border-top: 1px solid #ddd;
	color: #aaa;
	padding: 1.5em 0 0;
}

footer a {
	color: #666;
}

.butt {
	 position: relative;
  cursor: pointer;
  outline: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  font-size: 13px;
  font-weight: normal;
  padding: 6px 16px;
  border-radius: 4px;
  background-color: #f3f3f3;
  background-image: -moz-linear-gradient(top, #ffffff, #e1e1e1);
  background-image: -ms-linear-gradient(top, #ffffff, #e1e1e1);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e1e1e1));
  background-image: -webkit-linear-gradient(top, #ffffff, #e1e1e1);
  background-image: -o-linear-gradient(top, #ffffff, #e1e1e1);
  background-image: linear-gradient(top, #ffffff, #e1e1e1);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e1e1e1', GradientType=0);
  border: 1px solid #dadada;
  border-left: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  border-bottom-color: #a9a9a9;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 0px #ffffff;
}

.butt:hover {
	filter: none;
  background: none;
  background: #eee;
  text-shadow: 0 1px 0px rgba(255, 255, 255, 0.8);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}


/* Big */
.btn-big {
  padding: 10px 24px;
  font-size: 16px;
  margin:10px 10px 10px 0;
}



.co-logo {
	margin: .75em .75em .25em;
	opacity: .4;
	-webkit-transition: .3s;
	   -moz-transition: .3s;
	     -o-transition: .3s;
	        transition: .3s;
	-webkit-mask-image: -webkit-linear-gradient(#000, rgba(0,0,0,.6));
}

	.co-logo:hover {
		opacity: 1;
	}

.ad {
	display: block;
	position: absolute;
	top: 0;
	right: -150px;
	width: 130px;
	font-size: .6em;
	line-height: 1.09;
}

.bsa_it_t {
	display: block;
	font-weight: 700;
}

.ad .one {
	width: auto;
	line-height: 1.3;
}

body .one .bsa_it_p { display:none; }

.ad img {
	margin-bottom: 8px;
	display: block;
}

.ad a {
	color: #999;
	text-decoration: none;
	display: block;
}

#bsap_aplink {
	font-weight: 400;
	margin-top: 1.1em;
}

.ad .bsa_it_p a {
	margin-top: 1em;
	font-weight: 400;
}

@media screen and (max-width: 1000px) {
	.ad {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	body {
		-webkit-font-smoothing: antialiased;
	}
	
	header h1 {
		font-size: 2em;
	}
	
	code {
		word-wrap: break-word;
	}
	
	.container {
		margin: 12px;
	}
	
	.ad, .ad * {
		display: none !important;
	}
	
	.github {
		display: none;
	}
	
	footer {
		font-size: .9em;
	}
}

@media screen and (max-width: 500px) {
	body {
		font-size: .875em;
	}

	a[href=build] + em {
		display: none;
	}

	.fixed {
		margin-left: -24px;
	}

	.fixed + h3 {
		margin-top: 163px;
	}
}