@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #303030;
	background-image:url(bkg_images/bkg_dots_06.gif);
	background-repeat:repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #BBB;
	/*overflow:hidden;*/
}
h2 {
	color: #BBB;
	font-size: 2.5em;
	line-height: 30%;
	text-shadow: 0 0 0.625em black;
	position: relative;
	top: -0.2em;
	z-index:10;
}
h3 {
	color: #BBB;
	font-size: 1em;
	line-height: 50%;
	text-shadow: 0 0 0.125em black;
}
h2 a, h3 a{
	color: #BBB;
}
a {
   outline: 0;
}
a img {border: none; }  /*removes the border around links in IE8*/

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#container {
	/*background-color: white;*/
	width: 65em;   /*1040 px + 1em which helps in downsizing*/
	heigh: 100%; 
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
	position:relative;
	width: 63.75em;/*1028 px, Container width minus 8px of padding, 2px margin and 2px border*/
	height: 108px;
	padding-left: 1em;
	background-color: black;
	background-repeat:repeat-x;
	background-image:url('bkg_images/head-bkg-slice.png');
	margin: 0 0.063em;
	
	-moz-border-radius: 0 0 0.625em 0.625em; 
	-webkit-border-radius: 0 0 0.625em 0.625em; 
	border-radius: 0 0 0.625em 0.625em; 
	-khtml-border-radius: 0 0 0.625em 0.625em;
	border: 0.063em solid black;
	border-top: 0;
	-webkit-box-shadow: 0 0 2.5em 0px black;
	   -moz-box-shadow: 0 0 2.5em 0px black;
	        box-shadow: 0 0 2.5em 0px black;
}
.social_media{
	position:absolute;
	height: 3.5em;
	right: 0;
	top: 2em;
	margin-right: 1em;
}
.social_media div{
	position:relative;
	float:left;
	width: 3.5em;
	heigh: 3.5em;
	z-index:10;
}

/*.social_media div:first-child{
	position:relative;
	float:left;
	color: white;
	top: 0.6em;
	padding-right: 1em;
	margin-right: 1em;
	border-right: 1px solid gray;
	width: 16.5em;
}
*/
.cell {
	position:relative;
	width: 16em;/* 256 px */
	height: 9em;/* 144 px */
	float: left;
	overflow:hidden;
	border: 1px solid black;
	margin: 1px;
}
.mobile{
	display:none;
}
.cell, .cell img, .big_cell#default{
	-moz-border-radius: 0.625em;
	-webkit-border-radius: 0.625em;
	border-radius: 0.625em;
	-khtml-border-radius: 0.625em;
}
.cell{
	-webkit-box-shadow: 0 0 2.5em 0px black;
	   -moz-box-shadow: 0 0 2.5em 0px black;
	        box-shadow: 0 0 2.5em 0px black;
}
.big_cell#default{
	-webkit-box-shadow: 0 0 1.5em 0px black;
	   -moz-box-shadow: 0 0 1.5em 0px black;
	        box-shadow: 0 0 1.5em 0px black;
}
.cell:hover {
	border-color:white;
	z-index:1;
}
.cell:active {
	z-index:0;
}
.no_hover:hover {
	border-color:black;
	z-index:0;
}
.big_cell {
	width: 48.5em;/* 776 px */
	height: 18.25em;/* 292 px */
	position:relative;
	float: left;
	overflow:hidden;
	border: none;
	margin: 0.125em;/*2px;*/
}
.big_cell#default {
	border: 1px solid black;
	margin: 1px;
}
.big_cell.inactive {
	display: none;
}

ul {
    list-style: none;
	text-align:right;
	position:relative;
	right: 1.25em;
	top: -0.313em;
}
h2 a:hover, h3 a:hover {
	color: white;
}

.row_end {
	clear:right;
}

.gui{
	width: 16em;/* 256 px */
	height: 9em;/* 144 px */
	float: left;
	overflow:hidden;
	margin: 2px;
	
}
.double {
	width: 32.25em; /*516px;*/
	/*margin-bottom:2px;  This is required to allow proper scaling in IE, must be something with rounding of the height elements*/
}

#ending_gui{
	position:relative;
	height: 9em;/* 144 px */
	float: left;
	overflow:hidden;
	margin: 2px;
	width: 32.25em; /*516px;*/
}
#ending_gui ul{
	top: 0em;
	margin-top: 1.8em;
}
#copyright {
	width: 256 px;
	text-align: right;
	float:right;
	font:"Courier New", Courier, monospace;
	font-size: x-small;
	text-shadow: 0.06em 0.06em 0.1em black;
	color: #888;
	padding: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

div#preload { display: none; }
/* *********************************************************************************************************** */
/*                                        TEXT PANEL FORMATTING                                                */
/* *********************************************************************************************************** */
.text_panel{
	padding: 1.25em 0 0 0.625em;
	color:#BBB;
	text-align:left;
}

.close_btn {
	position:absolute;
	width: 1.5em;
	height: 1.5em;
	right: 1.25em;
}
.col_title{
	font-weight:bold;
	font-size: 1.4em;
}
.left_col {
	width: 22em;
	height: 16em;
	padding-right: 1em;
	border-right: 1px solid darkgray;
	float:left;
	margin-right: 1.2em;
}
.left_col p {
	position:relative;
	top: -1em;
	margin-bottom: -0.5em;
}
.right_col {
	padding-right:2.5em;
	float:left;
	width:21em;
}
.right_col img, .left_col img {
	position:relative;
	top: -0.3em;
	margin-right: 1em;
}
.right_col a, .left_col a{  color:#BBB;  }
.right_col a:hover, .left_col a:hover{	color:white;  }
.left_col a:link {
	text-decoration:underline;
}





#contact .right_col p, #error404 .right_col p, #error403 .right_col p, #error401 .right_col p {
	height: 3em;
}
#about .left_col{  width: 22em;  }
#about .left_col img{
	position: relative;
	top: 0.15em;
	width: 5em;
	height: 6.25em;
	text-align:left;
	border: 1px solid darkgray;
	float:left;
	margin-right: 1.2em;

	-moz-border-radius: 0.625em;
	-webkit-border-radius: 0.625em;
	border-radius: 0.625em;
	-khtml-border-radius: 0.625em;
}
#about .right_col p {
	position:relative;
	top: -1em;
	margin-bottom: -0.5em;
}
.phone_no{
	position:relative;
	top: 0.2em;
	font-size: 1.4em;
	font-weight: bold;
}
.e_mail{
	position:relative;
	top: 0.5em;
}



@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
#container {
	width: 48.75em;   /*780 px + 1em which helps in downsizing*/
}
#header {
	width: 47.5em;/*780 px, Container width minus 8px of padding, 2px margin and 2px border*/
}
.desktop{
	display:none;
}
.mobile{
	display:block;
}
.close_btn {
	width: 2em;
	height: 2em;
}
#ending_gui{
	height: auto;
	float: left;
	overflow:auto;
	margin: 0;
	width: 48.5em;/* 776 px */
}
#ending_gui .social_media{
	clear:both;
	position:relative;
	height: auto;
	right: 0;
	top: 0;
	margin: 2.5em 0;
}
#ending_gui .social_media div{
	margin: 1.5em 3em;
	width: 6em;
	heigh: 6em;
}
#ending_gui ul{
	text-align:center;
	right: 0;
	margin-top: 0;
}
#ending_gui ul li{
	display:inline-block;
	font-size: 180%;
	margin: 0 1em;
}
}