/* CSS Document */

/*

Organized by:

Global Typography
General Layout
Header
Content
Footer
Forms and Tables

*/



/* Global Typography
-------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	font-family: questrial, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	}

h2 {
	margin: 0 0 20px;
	font-size: 48px;
	}

h3 { font-size: 32px; }

h4 {
	font-size: 24px;
	line-height: 1.5;
	}

h5 { font-size: 18px; }

h6 { font-size: 14px; }

body { color: #333; }



/* General Layout
-------------------------------------------------------------- */

body { background: #02273a; }

#header {
	position: relative;
	width: 100%;
	background: transparent url(../img/bg_starfield.jpg) repeat top left;
	}

#main {
	width: 100%;
	background: #eee;
	}
	
#footer {
	position: relative;
	width: 100%;
	margin-bottom: 100px;
	background: #eee url(../img/bg_stripes.png) repeat-x bottom left;
	}



/* Header
-------------------------------------------------------------- */

#header h1 {
	width: 500px;
	height: 205px;
	margin: 0 auto;
	background: url(../img/logo_gravitations.png) no-repeat top left;
	text-indent: -999em;
	overflow: hidden;
	}
	
#header h1 a {
	display: block;
	height: 205px;
	background: url(../img/logo_gravitations.png) no-repeat top left;
	}
	
#header img {
	display: block;
	position: absolute;
	top: -30px;
	left: 50%;
	margin-left: -520px;
	}
	
.navbar {
	margin: 0;
	background: #6d3369;
	}

.navbar .navbar-inner {
	background: #6d3369;
	border: none;
	}

.navbar .navbar-inner ul.nav { margin-left: 40px; }

.navbar-inverse .nav > li > a { color: #ddd; }

.navbar-inverse .nav > li > a:hover, .navbar-inverse .nav > li > a:focus, .navbar-inverse .nav > li.active > a, .navbar-inverse .nav > li.active > a:hover, .navbar-inverse .nav > li.active > a:focus { background: #451c42; }



/* Content
-------------------------------------------------------------- */

#main .container { padding: 40px 0 80px; }

#main .pull-left { margin-right: 40px; }

#main .hero-unit { background: #ccc; }

#main .hero-unit h1 {
	margin: 0 0 20px;
	letter-spacing: normal;
	}
	
#main .hero-unit .media-body p { text-align: justify; }

#main .hero-unit .pull-right { margin-left: 40px; }

#main .hero-unit iframe.video-embed { display: block; }

.bumper { margin-bottom: 40px; }



/* Footer
-------------------------------------------------------------- */

#footer .container { padding: 20px 0 60px; }

#footer p {
	margin: 0;
	color: #666;
	line-height: 25px;
	vertical-align: top;
	}

#footer p.pull-right { padding-right: 40px; }

#footer a.btn-facebook {
	display: inline-block;
	padding-right: 32px;
	background: url(../img/icon_facebook.png) no-repeat top right;
	color: #666;
	line-height: 25px;
	}
	
#footer a.btn-facebook span { display: none; }

#footer a.btn-facebook:hover {
	color: #005580;
	text-decoration: none;
	}

#footer a.btn-jloop {
	display: inline-block;
	color: #666;
	line-height: 25px;
	vertical-align: middle;
	}
	
#footer a.btn-jloop span {
	display: inline-block;
	width: 77px;
	height: 25px;
	background: url(../img/logo_jloop.png) no-repeat top left;
	text-indent: -999em;
	overflow: hidden;
	vertical-align: middle;
	}
	
#footer a.btn-jloop:hover {
	color: #005580;
	text-decoration: none;
	}
	
#footer img {
	display: block;
	position: absolute;
	bottom: 40px;
	right: 0;
	}



/* Forms and Tables
-------------------------------------------------------------- */

/*label, input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.92em;
	font-weight: normal;
	}*/
	
	
	
@media screen and (max-width: 1200px) {	
	#main .hero-unit .pull-right {
		float: none;
		margin: 0;
		}
		
	#main .hero-unit iframe.video-embed { margin: 0 auto 20px; }
	
	#footer p.pull-right { padding-right: 60px; }
	
	/*#main .visible-desktop { display: none !important; }*/
	
	/*#main .visible-tablet { display: inherit !important; }*/
	}

@media screen and (max-width: 767px) {
	body { padding: 0; }
	
	#main .container { padding: 20px 10px 80px; }
	
	#main .hero-unit { padding: 10px; }
	
	#main .hero-unit h1 { font-size: 32px; }
	
	#main .hero-unit p {
		font-size: 14px;
		line-height: 20px;
		}
	
	#main .hero-unit iframe.video-embed { display: none; }
	
	#main .pull-left {
		float: none;
		margin: 0;
		}
		
	#main .pull-left .img-rounded {
		margin: 0 auto 20px;
		}
	
	#footer .container { padding: 20px 10px 60px; }
	
	#footer p.pull-right {
		float: none;
		clear: left;
		padding-top: 10px;
		padding-right: 0;
		}
	
	#header h1 {
		width: 300px;
		height: 123px;
		background: url(../img/logo_gravitations_small.png) no-repeat top left;
		}
		
	#header h1 a {
		height: 123px;
		background: url(../img/logo_gravitations_small.png) no-repeat top left;
		}
		
	#header img { display: none; }
	
	.navbar .navbar-inner { padding: 0; }
	
	.navbar .navbar-inner ul.nav { margin-left: 0; }
	}