@import "https://fonts.googleapis.com/css?family=Baumans";
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300";
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400";
@import "https://fonts.googleapis.com/css?family=Open+Sans";

@font-face {
    font-family: "Nexa Light";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/nexa-light.eot?#iefix") format("embedded-opentype"), url("../fonts/nexa-light.woff") format("woff"), url("../fonts/nexa-light.ttf") format("truetype"), url("../fonts/nexa-light.svg#ywftsvg") format("svg");
}

html, body {
    overflow-x: hidden;
}

body {
	/* within boxing */
/*	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; */

	-webkit-text-size-adjust: none; 		/* Prevent font scaling in landscape */

	background-color: #ffffff;

	padding: 0;
	margin: 0;
    width:100%;
    height:100%;
    margin:auto;
    overflow-x: hidden;

	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-weight: 300;
	font-size: 100%;
}

/* NOTE: check to see if this is used anywhere */
.hide {
  display: none; 
}

#navbar {
	background-color: #0066cc;
	min-width: 100%;
	width: 100%;
	min-height: 40px;
	color: #ffffff;
	padding: 0;
	margin: 0;
	position: fixed;
	z-index: 4;
}

/*
 * logo inside logo-cell is required to get left-margin to work
 * in conjunction with table-cell.
 *
 * table-cell is required to get vertical centering of the logo text.
 */
#logo {
	margin-left: 1.3em;
	position: fixed;
	z-index: 5;
	color: #ffffff;
}

#logo a, a:hover, a:visited {
	text-decoration: none;
	color: #fff;
}

#logo-cell {
	background-color: #003366;
	height: 47px;
	width: 122px;
	display: table-cell;
	vertical-align: middle;	
}

#logotext {
	text-align: center;
	font-family: Baumans, Arial, sans-serif;
	font-size: 1.6em;											/* 30px / 16px */
	color: #fff;
}

#title {
	display: inline;
	float: right;
	line-height: 39px;
	font-family: Baumans, Arial, sans-serif;
	font-size: 1.1em;
	padding: 0;
	margin: 0 62px 0 .5em;
	color: #003399;
}

#nav-arrow {
	display: inline;
	float: right;
	padding: 0;
	margin: 8px 13px 0 0;
}

#menu {
	display: none;
}

#nav-collapse.active {
	display: inline-block;
	position: absolute;
	top: 0.9em;
	left: auto;
	bottom: auto;
	right: .5em;
}

a {
	text-decoration: none;
	color: #fff;
}

a:hover {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #fff;
}

#horizon {
	background-color: #003399;
	min-width: 100%;
	width: 100%;
	min-height: 480px;
	color: #ffffff;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 40px;
	z-index: 1;
	bottom: 0;
}

#horizon #left {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0px;
	top: auto;
	bottom: 0px;												/* hackalicious */
	max-width: 80%;
}

#horizon #right {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0px;
	left: auto;
	top: 0px;
	max-width: 80%;
}

#container {
	width: 100%;
	max-height: 100%;
	color: #ffffff;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0%;
	top: 40px;
/* 	bottom: 37px; */
	bottom: 0;					/* testing */
	z-index: 2;

	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 600ms;
	transition-property: webkit-transform;
	transition-duration: 600ms;
}

#container #home {
	margin: 0;
	padding: 0;
    width: 100%;
	height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

#container #about {
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
    position: absolute;
    left:100%;
    top:0;
}

#container #contact {
 	margin: 0;
	padding: 0;
   	width:100%;
    height:100%;
    position: absolute;
    left:200%;
    top:0;
}

#bottom-center {
	margin: 0;
	padding: 0;
	position: absolute;
	top: auto;
	bottom: 0;												/* hackalicious */
	left: 0%;
	min-width: 90%;
	max-width: 100%;
}

#middle-center img {
	display: none;
}

#bottom-center img {
	display: none;
}

#contact #middle-right img {
	display: none;
}

#container .text {
  	margin: 0;
  	padding: 0;
  	postion: relative;
  	left: 0;
  	top: 0;
  	color: #ffffff;
}

#container .text h1 {
  	margin: 0;
  	padding: 0;
  	position: relative;
  	top: 0.65em;
	font-family: Baumans, Arial, sans-serif;	
	font-weight: 400;
	width: 90%;
  	left: 3%;
}

#container .text p {
  	margin: 0;
  	padding: 0 0 1em 0;
  	position: relative;
  	top: 2.0em;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-weight: 300;
	width: 87%;
  	left: 3%;
/*	max-width: 700px;  disabled because of about screen */
}

#about #inner {
	position: relative;
	left: 3%;
  	padding: 2em 0 0 0;
}

#footer {
	background: #0066cc;
	color: #fff;
	min-width: 100%;
	min-height: 15px;
	position: fixed;
	z-index: 4;
	bottom: 0;
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size: 13px;
	/* display: none;				/* testing */
}

#footer #likelist {
	display: none;
	list-style-type: none;
	margin: 0.75em 0 0.75em 0.5em;
	padding: 0;
}

#footer #likelist li {
	display: inline;
	padding: 0 5px 0 0;
}

#footer	a, a:hover, a:visited {
	text-decoration: none;
	color: #fff;
}

#footer #text {
	display: inline-block;
	margin: 0 0 0 1em;
	min-width: 80%;
}

#logout {
	float: right;
	margin: 0 10px auto auto;
}

#copyright {
	position: absolute;
	left: 5px;
	top: 3px;
}

/*
 * First breakpoint: Horizontal Menu
 */
@media all and (min-width: 490px)  and (min-height: 500px) {

	#navbar {
		min-height: 50px;
	}

	#logo-cell {
		height: 58px;
		max-height: 58px;
	}

	#title {
		display: none;
	}

	#nav-arrow {
		display: none;
	}

	#menu {
		display: block;
		position: absolute;
		top: -5px;									/* hackalicious */
		right: 0;
		margin-right: 5%;
		min-width: 20em;
		text-align: right;
	}

	.menu-item {
		margin-right: 1.25em;
		display: inline;
		font-size: 1.1em;
	}

	.menu-item:last-child {
		margin-right: 0;
	}

	a.highlight {
		border-top: thick solid #003366;
		color: #003366;
		padding-top: 7px
	}

	/*
	 * By using text-align:center and setting the image margins to auto,
	 * we're able to center the image horizontally.
	 */
	#bottom-center #inner {
		text-align: center;
		margin: 0;
		padding: 0;
		bottom: 15px;
		position: relative;
	}

	#bottom-center img {
		display: inline;
		margin: 0 auto 0 auto;
		padding: 0;
		max-width: 90%;
		bottom: -4px;											/* hackalicious */
		position: relative;
		z-index: -1;
	}

	#container .text h1 {
		max-width: 400px;
		font-size: 350%;
	}

	#container .text p {
		width: 500px;
		font-size: 110%;
	}

	/*
	 * Special case for About screen
	 */

	#about #middle-center {
		left: 7%;
	}

	#about #middle-center img {
		display: inline-block;
		max-width: 90%;
	}

	#about .text h1 {
		max-width: 90%;
	}

	#about .text p {
		width: 90%;
	}

	/*
	 * Special case for Contact screen
	 */

	#contact .text {
		display: inline;
		vertical-align: top;
	}

	#contact #middle-right {
		display: inline;
		vertical-align: top;
	}

	#contact #middle-right img {
		position: relative;
		display: inline;
		max-width: 90%;
		left: 3%;
		top: 0%;
		padding-top: 5%;
	}

}

/*
 * Second breakpoint: Horizontal Menu
 */
@media all and (min-width: 940px) {

	/*
	 * Special case for Contact screen
	 */
/*
	#contact .text {
		display: inline;
		vertical-align: top;
	}

	#contact #middle-right {
		display: inline;
		vertical-align: top;
	}

	#contact #middle-right img {
		position: absolute;
		display: inline;
		max-width: 70%;
		left: 25%;
		top: 8%;
		padding-top: 0%
	}
*/
}