@charset "UTF-8";
/* CSS Document */

/*/////////////////////////////  BEGIN GENERAL STYLES /////////////////////////////*/

html, body { height: 100%; }

body {
	width: 100%; /* needed for FF */
	height: 100%;
	margin: 0em;
    background-color:#FFF;	
} 

::selection {
    background:#FFF;     /* Safari */
	color:#1a7ca4;
}

::-moz-selection {
    background:#FFF;     /* Firefox */
	color:#1a7ca4;
}

#background_grid_wrapper {
	height:100%;
	width:100%;
	position:absolute;
	overflow:hidden;
	margin:0em;
	top:0em;
	left:0em;
}

.image {
	background-image:url(../images/web_grid.png);
	background-size:2000px 1200px;
	background-repeat:none;
}

#information {
	padding: 1em 1.5em;
	width:10em;
	margin:0 auto;
	top:30%;
	background: #1a7ca4;
	text-align: center; /* IE Bug Fix For Centering Within Main Shell*/
	border-radius: .3em;
	color: #114c64;
	font: bold 150% sans-serif;
	text-shadow: 1px 1px 2px rgba(255,255,255,.2);
	position:relative;
	
	-webkit-box-shadow: 0px 0px 4px 0px #333;
     -moz-box-shadow: 0px 0px 4px 0px #333;
          box-shadow: 0px 0px 4px 0px #333;

	-webkit-transition:all 200ms ease;
	-moz-transition:all 200ms ease;
	-o-transition:all 200ms ease;
	transition:all 200ms ease;
		
}

h4 {
	line-height:1.2em;	
	margin: 1em 0em;
}

/* Begin Responsive CSS -- Non-Retina Specific */

@media only screen and (max-height:600px){
#information {
	top:20%;
}
}

@media only screen and (max-height:460px){
#information {
	top:15%;
}
}

@media only screen and (max-height:340px){
#information {
	width:12em;
	top:15%;
	padding: .75em 1em;	
	text-shadow: 1px 1px 1px rgba(255,255,255,.15);
}

h1 {
	font-size:1.5em;
	margin: .5em;	
}

h4 {
	font-size:.75em;	
}
}

@media only screen and (max-height:240px){
#information {
	top:10%;
}
}

@media only screen and (max-height:200px){
#information {
	top:5%;
}
}

@media only screen and (max-width:1024px){
#information {
	text-shadow: 1px 1px 1px rgba(255,255,255,.15);
}
}
@media only screen and (max-width:320px){
#information {
	width:8em;
	padding: .75em 1em;	
	text-shadow: 1px 1px 1px rgba(255,255,255,.15);
}

h1 {
	font-size:1.5em;
	margin: .5em;	
}

h4 {
	font-size:.75em;	
}
}
@media only screen and (max-width:240px){
#information {
	width:6em;
}

h1 {
	font-size:1.25em;
}

h4 {
	font-size:.65em;	
}
}

/* Begin Responsive CSS -- Retina Specific */

@media only screen and (min-width:1025px) and (-webkit-min-device-pixel-ratio: 2) {
.image {
	background-image:url(../images/web_grid_2x_large.png);
	background-size:2000px 1200px;
}
}
@media only screen and (max-width:1024px) and (-webkit-min-device-pixel-ratio: 2) {
.image {
	background-image:url(../images/web_grid_landscape_2x.png);
	background-size:1024px 768px;
}
}

@media only screen and (max-width:768px) and (-webkit-min-device-pixel-ratio: 2) {
.image {
	background-image:url(../images/web_grid_portrait_2x.png);
	background-size:768px 1024px;
}
}

@media only screen and (min-width:481px) and (max-width:568px) and (max-height:320px) and (-webkit-min-device-pixel-ratio: 2) {
.image {
	background-image:url(../images/web_grid_2x.png);
	background-size:1000px 600px;
}
#information {
	width:12em;
	padding: .75em 1em;	
	text-shadow: 1px 1px 1px rgba(255,255,255,.15);
}

h1 {
	font-size:1.5em;
	margin: .5em;	
}

h4 {
	font-size:.75em;	
}
}

@media only screen and (max-width:480px) and (-webkit-min-device-pixel-ratio: 2) {
.image {
	background-image:url(../images/web_grid_2x.png);
	background-size:1000px 600px;
}
}