/*
Title:		Master styles
Author: 	Hyperexis (Christian Iorio-Morin)
Contact:	info@hyperexis.com
*/


html {
	background-color: black;
/*	background-image: url(../images/blue_shade_cropped.png);
	background-position: center top;
	background-repeat: no-repeat;*/
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	}

a, a:hover, a:visited {
	text-decoration: none;
	color: inherit;
	}

.directory-path a,
#phone-box a,
.fine-prints a,
p a {
	text-decoration: underline;
	}
		

			
body {
	background-image: url(../images/blue_shade_cropped.png);
	background-position: center top;
	background-repeat: no-repeat;
	}

#inner_body {
	background-position: center bottom;
	background-repeat: no-repeat;
	}

#header {
	background-color: black;
		
	color: #999999;
	font-size: 14px;
	
	position: relative;
	display: block;
	z-index: 900;
	max-width: 1200px;
/*	left: 50%;*/
	margin: 0px auto 0px auto;
	}
	
	#header ul {		
		margin: 0px 40px;
		}
		
	#header ul li {		
		display: inline-block;
		padding: 14px 0px;
		}
		
		#header ul li:hover {
			background-color: #333333;
			
			color: white;
			
			cursor: pointer;
			}
			
		#header ul li:hover > ul {
			display: block;
			}
			
		#header ul ul li:hover {
			color: white;
			
			cursor: pointer;
			}
			
		#header ul a {
/*			margin: -14px -10px;*/
			padding: 14px 10px;
			}
		
	#header ul ul {
		background-color: #333333;		
		
		color: #999999;
		
		position: absolute;
		display: none;
		top: 40px;
		margin: 0px 0px;
		padding: 4px 0px;
		}
		
	#header ul ul li {		
		display: block;
		padding: 5px 10px;
		}
		
.main-content {
	position: relative;
	display: block;
	z-index: 500;
	max-width: 1000px;
/*	left: 50%;*/
	margin: 10px auto 10px auto;
	}
	
#header,
#header ul ul,
.main-banner_container,
#text-container,
#pre-footer-box  {
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	}
	
#hyperexis-logo {
	height: 35px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 10px 0px;
	}

	#hyperexis-logo img {
		position: absolute;
		height: 100%;
		right: 0px;
		}
	
#page-title {	
	margin-top: 0px;
	margin-bottom: -10px;
	}
	
	#page-title img {
		position: absolute;
		}
		
	#page-title h1 {
		color: white;
		font-size: 28px;
		}
		
	.left-logo {
		height: 100%;
		left: 0px;
		}
		
	.left-title {
		height: 90%;
		top: 5%;
		left: 90px;
		}
		
.main-banner_container {
	margin-top: 20px;
	}

	.main-banner {
		width: 100%;
		}
		
	.splash_menu_as_banner {
		display: inline-block;
		width: 100%;
		text-align: right;
		margin-top: 40px;
		margin-bottom: 40px;
		-moz-box-shadow:  0px 0px 0px rgba(255,255,255,0);
		-webkit-box-shadow:  0px 0px 0px rgba(255,255,255,0);
		box-shadow: 0px 0px 0px rgba(255,255,255,0);
		}
		
		.splash_menu_as_banner .banner_logo {
			float: left;
			margin: 60px 0 0 30px;
			max-width: 40%;
			}
		
		.splash_menu_as_banner ul {
			font-family: "Gill Sans", "Lucida Grande", Verdana;
			font-size: 35px;
			font-weight: lighter;
			letter-spacing: 0.1em;
			line-height: 1em;
			color: white;
			text-align: right;
			
			max-width: 50%;
			display: inline-block;
			}

			.splash_menu_as_banner li {
				}

			
			.splash_menu_as_banner a {
				display: inline-block;
				background-color: black;
				background-color: rgba(0,0,0,0.5);
				padding: 20px;
				margin: 10px 0px;
				}
					
#text-container {
	background-color: white;
	background-image: url(../images/bright_squares2.png);
	padding: 20px;
		
	font-family: "Lucida Grande";
	font-size: 14px;
	line-height: 1.65em;
	}
		
	h1 {
		padding: 16px 0px;
		font-size: 24px;
		}
		
	h2 {
		font-size: 18px;
				
		margin-top: 60px;
		}
		
	p {
		margin: 14px 0px;
		}
		
	.catch-phrase {
		color: #999999;
		font-size: 16px;
		font-style: italic;
		text-align: center;
		}

	.right-quote {
		color: #999999;
		font-size: 16px;
		font-style: italic;
		text-align: right;
		}
		
	.fine-prints {
		font-size: 10px;
		}
		
.directory {
	}
	
	.directory-path {
		margin: 0 0;	
		}
					
	.directory h1 {
		max-width: 66%;
		margin: 1em 0em 0.2em 0em;
		}
	
	.directory .subtitle {
		margin: 0 0;
		}
		
	.directory .google-map {
		text-align: center;
		margin: 10px 0 20px 0;
		}
		
	#phone-box {
		margin: 16px 30px 0 10px;
	}
	
		#phone-box .big {
			font-size: 1.5em;
			margin: 0 0 0.75em 0;
			}
		
		#phone-box .subtitle {
			font-size: 0.8em;
			margin: 0 0;
			}
			
#app-links {
	color: white;
	text-align: right;

	margin-top: -20px;
	}
	
	#app-links ul li {
		background-color: black;

		padding: 10px 20px;
		}
		
		#app-links ul li:hover {
			background-color: #999999;
			
			cursor: pointer;
			}
	
	#app-store-badge {
		height: 40px;
		}
	
.right-box {
	position: relative;
	float: right;
	top: 0px;
	margin: 10px -20px 10px 10px;
	}

.left-box {
	position: relative;
	float: left;
	top: 0px;
	margin: 10px 10px 20px -20px;
	}
	
	.iphone1 {
		width: 270px;
		padding: 20px;
		}
		
	.ipad1 {
		width: 630px;
		padding: 20px;
		}
		
	.app-logos {
		height: 50px;
		padding: 20px;
		}
		
	.screenshot {
		width: 500px;
		padding: 0px 20px;
		}
		
	.iphone4s {
		width: 400px;
		margin-top: -50px;
		}
		
		.screenshot_iphone {
			position: absolute;
			width: 240px;
			top: 125px;
			left: 80px;
			}
			
			.iphonescreen1 {
				left: -50px;
				}
		
			.iphonescreen2 {
				position: absolute;
				top: 60px;
				left: 100px;
				}
				
	.ipad3 {
		width: 1000px;
		margin-top: -50px;
		}
		
		.screenshot_ipad {
			position: absolute;
			width: 618px;
			top: 121px;
			left: 182px;
			}
		
	
#info-box,
#pre-footer-box {
	background-color: black;
	background-color: rgba(0,0,0,0.5);
	}
	
	#info-box-text,
	#pre-footer-text {
		color: white;
		font-size: 12px;
		text-align: center;
		
		padding: 20px;
		}
		
	#info-box-text {
		font-size: 16px;
		}
		
		#info-box-text a,
		#pre-footer-text a {
			color: orange;
			}
		
	#pre-footer-box img {
		}
		
		#footer-logo_chus {
			height: 30px;
			margin-right: 15px;
			margin-bottom: 9px;
			}
			
		#footer-logo_csss-iugs {
			height: 75px;
			margin-top: -20px;
			margin-right: 5px;
			margin-bottom: -20px;
			}
			
		#footer-logo_hyperexis {
			height: 35px;
			margin: 13px 30px 5px 30px;
			}

		#footer-logo_udes {
			height: 50px;
			}

#footer {
	color: white;
	font-size: 12px;
	font-style: italic;
	text-align: center;
	
	padding: 5px 0px 15px 0px;
	margin-bottom: 0;
	}