/*@import "less/reset";*/
@import "less/mixins";
@import "normalize.css";


body {
	background: #fff;
	height: 100%;
	max-width: 1100px;
	line-height: 1;
	margin: 0 auto;
	.text-size-adjust(100%);
}

#container {
	position: absolute;
	min-width: 320px;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	overflow:hidden;
	background: black;
	background: #000 url('../img/lake.jpg') no-repeat bottom left;
	background-size: cover;
}


#topbar {
	position: relative;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100% !important;
	xmax-width: 1100px;
	min-width: 320px;
	margin: 0 auto 2px;
	background: #6f0101;
	position:fixed;
	.box-shadow(0 4px 4px -3px rgba(0, 0, 0, 0.4));
	border-bottom: 4px solid #444;
	background: -moz-linear-gradient(top, #111 10%, #222 70%);
	background: -webkit-linear-gradient(top, #111 10%, #222 50%);
	background: linear-gradient(top, #111 10%, #222 50%);
	
	height: 64px;
	.transition-duration(.2s);
	
	&:after {
		content: ' ';
		height: 0;
		width: 0;
		position: absolute;
		top: 67px;
		right: 20px;
		border: 10px solid transparent;
		border-top-color: #444;
		.transition-duration(.1s);
	}
		
	a {
		text-decoration: none;
		color: inherit;
	}
	
	h1 {
		position:absolute;
		display:block;
		right: 0;
		xbackground:#fff;
		width: 320px;
		text-align:center;
		margin: 11px 0 9px;
		font: normal 3em/.9em "Fjalla One","ChunkFive",serif;
		letter-spacing: -2px;
		text-shadow: 0px -1px 0px #010101;
		color: #333;
		.transition-duration(.2s);
		cursor: crosshair;
	}
	nav {
		position:relative;
		overflow: hidden;
		float: left;
		top: 0;
		left: 0;
		padding: 1.25em 1em;
		xbackground:#000;
		ul {
			margin:0;
			padding:0;
			list-style:none;
		}
		li {
			float: left;
			margin: 0 1px 0 0;
		}
		a {
			font: normal 1.5em/.9em "Bitter","ChunkFive",serif;
			color: #777;
			padding: 1.25em 10px;
			.transition-duration(.7s);
			
			&:hover {
				color: #fff;
				.transition-duration(1s);
			}
		}
	}
}

.fullsize{height:100%;width:100%;overflow:hidden;position:relative}

#hello {
	top: 68px;
	left: 0;
	color:#003;
	padding: 10px;
	xbackground:#001;
	xopacity: .5;
	
	.title {
		position:absolute;
		left: 0;
		top: 10%;
		width: 99%;
		xtext-align: center;
		xborder:1px solid red;
		text-indent:20px;
		height: auto;
		font-size:4em;
		line-height:0;
		text-shadow: -1px -1px 0px #555;
		font-weight: normal;
		font-family: "Droid Serif","Lobster 1.0";
		letter-spacing: -.15em;
		opacity:.2;
	}
	article {
		position: absolute;
		top: 20%;
		left: 300px;
		width: 320px;
		.rounded(20px);
		.box-shadow(0 0 10px #000);
		background: #000;
		color: #fff;
		padding: 1em;
		font: normal 1.2em/1.4em georgia,serif;
		&:after {
			content: ' ';
			height: 0;
			width: 0;
			position: absolute;
			top: 15px;
			left: -40px;
			border: 22px solid transparent;
			border-right-color: #000;
			.transition-duration(.1s);
		}
	}
}


/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 380px) {
	
}


@media only screen and  (min-width : 380px) and (max-width : 660px) {

}

@media only screen and  (min-width : 650px) and (max-width : 1000px) {

}


/** iPad **/
/** iPad (landscape) **/
@media screen and (max-width: 1024px) {
	
}
/** iPad (landscape) **/
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
	
}
/** iPad (portrait) **/
@media screen and (max-width: 770px) {
	
}
/** iPad (portrait) **/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
	
}
/** iPad (portrait and landscape) **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	
}