@import "normalize.less";
@import url('http://fonts.googleapis.com/css?family=Titillium+Web:400,600,400italic');

@paragraph: 'Titillium Web', sans-serif;
@headline: @paragraph;

@colour: #897a0e;

html, body {
    background: black url('/spaceteam/assets/img/office.png') repeat left center;
    font-size: 16px;
    color: #eef;
    font-family: @paragraph;
	text-shadow: 0 0 1px rgba(0,0,0,1);
	font-weight: 400;
    height: 100%;
    width: 100%;
}
.logo {
	display: block;
	margin: 0 auto;
	position: relative;
	.clearfix;
	max-width: 900px;
}
.logo-inline {
	margin: 0px 20px 20px 0px;
}
nav {
    width: 100%;
    
    ol {
        margin: 10px auto 30px auto;
        padding: 0;
        
        li {
            display: inline-block;
            list-style-type: none;
            margin: 0;
            padding: 0;
            clear: none;
            
            a {
                color: white;
                padding: 8px 16px;
                text-decoration: none;
                
                &:hover {
                    text-decoration: underline;
                }
            }

			iframe {
				padding: 0px 16px;
			}
        }
    }
}
#banner {
	margin-bottom: 30px;
}
.centered {
    margin: 0 auto;
    position: relative;
    .clearfix;
    width: 90%;
    max-width: 900px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
	font-weight: 600;
}
a {
    color: white;

	&:hover {
		color: @colour;
	}
}
p:first-child {
	margin-top: 0;
}
img {
	max-width: 100%;
}
.wrapper {
    width: 100%;
    height: 100%;
}
.background {
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}
.hidden-unless-mobile {
	display: none;
}
.awardHeader {
	font-weight: bold;
	color: #ba0;
}
.content,
header,
footer {
	width: 100%;
}
header {
	padding-top: 0px;
	padding-bottom: 20px;

	.video {
		width: 47.5%;
		margin-right: 4.9%;
		float: right;

		iframe {
			width: 100%;
		}
	}
	.introduction {
		width: 47.5%;
		float: right;

		hgroup {
			h1 {
				display: inline-block;
				//font-size: 56px;
				font-size: 48px;
				margin-top: -20px;
				margin-bottom: -10px;
			}
			h2 {
				font-size: 22px;
			}
		}
		p:first-of-type {
			margin-top: 13px;
		}

		.actions {
			line-height: 61px;
			margin-top: 35px;

			.hidden-unless-mobile {
				margin-left: 30px;
			}
			.fb-like {
				margin-left: 15px;
			}
		}
		.appstore {
			display: inline-block;
			position: relative;

			.team {
				position: absolute;
				top: -30px;
				left: 50%;
				margin-left: -44px;
				z-index: 1000;
				opacity: 0;
			}
			.download {
				border-radius: 10px;
				opacity: 0.6;
				z-index: 500;
				position: relative;
			}
			& img,
			&:hover img {
				-webkit-transition: opacity 0.15s ease-in-out;
				-moz-transition: opacity 0.15s ease-in-out;
				-ms-transition: opacity 0.15s ease-in-out;
				-o-transition: opacity 0.15s ease-in-out;
				transition: opacity 0.15s ease-in-out;
			}
			&:hover {
				.download {
					opacity: 1;
					box-shadow: 0 0 15px rgba(0,0,0,1),
								0 0 4px rgba(255,255,255,0.6);
				}
				.team {
					opacity: 1;
				}
			}
		}
	}

}
.content {
	.testimonials {
		margin-bottom: 40px;

		blockquote {
			font-size: 30px;
			font-style: italic;
			line-height: 120%;

			&:before {
				content: '“';
				margin-left: -4px;
			}
			&:after {
				content: '”';
			}
		}
		.cite {
			margin-top: -15px;
			margin-left: 40px;
			&:before {
				content: '— ';
			}
		}
	}
	.awards {
		padding: 0;
		width: 105%;
		margin-left: -5%;
		list-style: none;
		.clearfix;

		.award {
			width: 20%;
			margin-left: 5%;
			text-align: center;
			margin-bottom: 40px;
			float: left;

			h1 {
				font-size: 40px;
				font-family: tahoma;
				font-weight: normal;
				color: @colour;
				text-shadow: 0 0 10px black,
							 0 0 1px @colour + #222;
			}
		}
	}
	.screens {
		margin: 0;
		.clearfix;
		padding: 0;
		list-style: none;
		width: 105%;
		margin-left: -5%;

		.screenshot {
			display: block;
			min-height: 285px;
			width: 20%;
			margin-left: 5%;
			float: left;
			margin-bottom: 40px;

			img {
				width: 100%;
				height: auto;
				opacity: 0.8;

				&:hover {
					opacity: 1;
					box-shadow: 0 0 15px rgba(0,0,0,1),
					0 0 4px rgba(255,255,255,0.6);
				}
			}
		}
	}
	.race {
		text-align: center;
		margin-bottom: 40px;
	}
}
footer {
	padding-bottom: 40px;

	a {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
	h1 {
		font-size: 16px;
	}
	.about {
		width: 47.5%;
		margin-right: 4.9%;
		float: left;

		p {
			margin-top: 0;
			margin-bottom: 0;
		}
/*
		.press-kit {
			display: block;
			margin-top: 10px;
		}
*/
	}
	.twitter {
		width: 47.5%;
		float: right;

		ul,
		blockquote {
			margin: 0;
			padding: 0;
		}
	}
}
@media screen and (max-width: 720px) {
    header {
	    padding-top: 30px;

	    .centered {
		    section {
			    width: 100%;
			    clear: right;

			    &.video {

				    margin-left: 4.9%;
				    margin-right: 0%;
			    }

			    &:first-child {
				    margin-bottom: 40px;
			    }
		    }
	    }
    }
	.testimonials blockquote {
		margin-top: 0;
		font-size: 24px;
	}
	.content .screens {
		.screenshot {
			width: 45%;
		}
	}
    .content .awards {
	    .award {
		    width: 45%;
	    }
    }
}
@media screen and (max-width: 500px) {
	footer {
		.twitter,
		.about {
			clear: left;
			width: 100%;

			&:first-child {
				margin-bottom: 30px;
			}
		}
	}
	.content .screens {
		.screenshot {
			width: 95%;
		}
	}
	header .introduction hgroup h2 {
		font-size: 18px;
	}
	.content .testimonials blockquote {
		font-size: 18px;
	}
}
@import "slimbox.less";