/* for support, view http://www.w3schools.com/css/default.asp */
/* this does the work */

body {
	border:0 none;
	margin:0px;
	padding:0px;
	background:#fff;
	height:100%;
	max-height:100%;
	font-family:arial,helvetica,sans-serif;
	font-size:10px;
	overflow:auto;
}

/* for internet explorer */
* html body {
	padding:120px 0 20px 0; /* top right bottom left */
}

#container {
	padding:3px 6px 3px 6px; /* top right bottom left */
	background:#fff;
	font-family:arial,helvetica,sans-serif;
	font-size:12px;
	position:fixed;
	top:82px;
	left:0;
	bottom:23px;
	right:0;
	overflow:auto;
}

* html #container {
	height:100%;
	width:100%;
}

#header {
	border-bottom:3px solid rgb(0,54,201);
	background:#fff;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:77px;
	overflow:auto;
}

* html #header {
	height:120px;
}

#footer {
	border-top:3px solid rgb(0,54,201);
	background:rgb(230,230,255);
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:20px;
	overflow:auto;
	text-align:right;
}

* html #footer {
	height: 20px;
}

#footer p {
	margin:3px 10px 0 10px; /* top right bottom left */
	color:#000;
}

#header img {
	margin: 3px 0 0 10px; /* top right bottom left */
	height: 74px;
	width: 266px;
        vertical-align:text-top;
}

#footer img {
	margin:0;
	border:0;
	position:relative;
}

#absolute {
	border:1px solid #fff;
	padding:10px;
	background:#ddd;
	position:absolute;
	top:400px;
	right:100px;
	width:200px;
}

#left {
	padding:10px;
	background:#eee;
	float:left;
	color:#000;
	width:50%;
}

#right {
	padding:10px;
	background:#ddd;
	float:right;
}

#header ul {
	clear:both;
	text-align:center;
	background:#fff;
	margin:19px 0 0 0; /* top right bottom left */
        border-bottom:2px solid rgb(0,54,201);
	padding:0;
	list-style-type:none;
        height:35px;
        position:absolute;
        top:0px;
        left:226px;
        right:0px;
}

#header ul li {
	display:inline;
	color:rgb(115,162,189);
        overflow:auto;
}

a.nav, a.nav:link, a.nav:visited { 
	border-top: 3px solid rgb(255, 255, 255);
	border-right: 3px solid rgb(120, 120, 200);
	border-bottom: 3px solid rgb(120, 120, 200);
	border-left: 3px solid rgb(255, 255, 255);
	background: rgb(30, 40, 240);
	display: block;
	width: 120px;
	height: 20px;
	margin: 3px 0 0 10px; /* top right bottom left */
	text-align: center;
	text-decoration: none;
	font-family: arial,verdana,sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: rgb(255, 255, 255);
	line-height: 20px;
	overflow: hidden;
	float: left;
}

a.nav:hover { 
	background: rgb(0, 54, 201);
	text-decoration: none;
	color: rgb(220, 220, 220);
	border-top: 3px solid rgb(120, 120, 200);
	border-right: 3px solid rgb(255, 255, 255);
	border-bottom: 3px solid rgb(255, 255, 255);
	border-left: 3px solid rgb(120, 120, 200);
}

a.nav:active { 
	background: rgb(204, 0, 0);
	color: rgb(255, 255, 255);
}

.lft {
	float:left;
}

/*************************************/
/*************************************/
/*    Begin Separate Pages Style     */
/*************************************/
/*************************************/


/* CONTACT page */
#contact {
	position:absolute;
	top:10%;
	left:38%;
	color:#44f;
	font-family:arial, helvetica, sans-serif;
	font-weight:bold;
	font-size:14pt;
	text-align:left;
}

p.contactInfo {
	position:relative;
	color:#000;
	font-family:arial, helvetica, sans-serif;
	font-weight:bold;
	font-size:10pt;
	text-align:left;
}

/* PRODUCTS page */
p.product {
	line-height: 22px;
}

/* ABOUT page */
.indent {
	text-indent:2em;
}

#aboutdesc {
	position:relative;
	left:20%;
	top:2px;
	right:20%;
	height:98%;
	overflow:auto;
	width:60%;
	border:1px dotted #aaa;
	padding:2px 5px 1px 5px; /*top right bottom left*/
	font-size:12px;
	line-height:18px;
	text-indent: 2em;
	font-weight: bold;
	color: #777;
}

p.aboutheader {
	position:fixed;
	top:100px;
	left:30px;
	font-family: arial,helvetica,sans-serif;
	font-size: 18px;
	font-weight: bold;
	color:#44f;
	border:none;
}

#aboutdesc ul {
	font-size:11px;
	color:#777;
	position:relative;
	top:-10px;
	font-weight: bold;
}

p.about {
	position:relative;
	margin:0px;
	padding:0; /* top right bottom left */
	font-family:arial,helvetica,sans-serif;
	font-size:12px;
	background-color: #fff;
	color: #777;
	border:none;
	line-height:18px;
	text-indent: 0em;
	font-weight: bold;
}



/*************************************/
/*************************************/
/*     End Separate Pages Style      */
/*************************************/
/*************************************/

.containerimgandtext {
	margin:1px;
	width:98%;
	border:none;
	clear:both;
}

.containerimgandtext object {
	width:190px;
	height:190px;
}

.containermediabox {
	position:relative;
	border:1px solid #000;
	height:190px;
	width:190px;
	float:left;
	margin-left:5px;
}

img.containerimg {
	vertical-align:text-top;
	float:left;
	border:0px solid #f00;
	margin-bottom:5px;
	margin-top:5px;
}


.containertext {
	border:1px solid #00f;
	position:absolute;
	right:1%;
	left:460px;
	margin-top:5px;
	padding-left:5px;
	font-family:arial,helvetica,sans-serif;
	font-size:12px;
	line-height:20px;
}
	
img.top { 
	vertical-align:text-top
}

p.heading {
	font-family:arial,helvetica,sans-serif;
	font-size:16px;
	font-weight:bold;
	line-height:20px;
	color:#44f
}

#container hr {
	width:70%;
	clear:both;
	height:1px;
	background-color:#600;
	float:left;
}

* html #container hr {
	width:70%;
	clear:both;
	height:1px;
	background-color:#600;
	float:left;
}
/*************************************/
/*************************************/
/*   Begin Photo Gallery Mouseover   */
/*************************************/
/*************************************/

/* The containing box for the gallery. */
#containerGallery {
	position:relative; 
	left:0px;
	right:0px;
	height:99%;
	margin:0px auto 0px auto; /* top right bottom left */
	border:1px solid #aaa;
	background:#fff url(../images/trainer_small_main_450x293.gif) no-repeat;
	background-position:top right;
}


/* Removing the bullets and tab */
#containerGallery ul {
	padding:0; 
	margin:0; 
	list-style-type:none;
	border:1px solid #ddd;
}

/* Remove the images and text from sight */
#containerGallery a.gallery span {
	position:absolute; 
	width:1px; 
	height:1px; 
	top:0px; 
	right:0px; 
	overflow:hidden; 
	background:#fff;
}

/* for text box - remove it from sight */
#containerGallery a.gallery p {
	position:absolute;
	width:1px;
	height:1px;
	top:0px;
	right:-1px;
	overflow:hidden;
	background:transparent;
	padding:0px 10px 0px 10px;
	line-height:20px;
}

.galleryp {
	position:absolute;
	width:1px;
	height:1px;
	top:0px;
	right:-1px;
	overflow:hidden;
	background:transparent;
	padding:0px 10px 0px 10px;
	line-height:20px;

}
/* Adding the thumbnail images */
#containerGallery a.gallery, #containerGallery a.gallery:visited {
	display:block; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #88f; 
	margin:1px 2px 1px 2px;  /* top right bottom left */
	text-align:left; 
	cursor:pointer; /****** Change to view as link ??? ******/
}


/* slide a */
#containerGallery a.slidea {
	background:url(../images/trainer_thumb.gif); 
	height:60px; 
	width:93px;
}
* html #containerGallery a.slidea {
	width:91px;
	w\idth:93px;
}

/* slide b */
#containerGallery a.slideb {
	background:url(../images/door_thumb.gif) no-repeat; 
	height:60px;
	width:93px;
}

* html #containerGallery b.slideb {
	width:91px;
	w\idth:93px;
}


/* slide c */
#containerGallery a.slidec {
	background:url(../images/smoke_thumb.gif); 
	height:60px; 
	width:93px;
}
* html #containerGallery a.slidec {
	width:91px; 
	w\idth:93px;
}

/* slide d */
#containerGallery a.slided {
	background:url(../images/interiors_main_thumb.gif); 
	height:60px; 
	width:93px;
}
* html #containerGallery a.slided {
	width:91px; 
	w\idth:93px;
}

/* slide e */
#containerGallery a.slidee {
	background:url(../images/IOS_main_thumb.gif); 
	height:60px; 
	width:93px;
}
* html #containerGallery a.slidee {
	width:91px; 
	w\idth:93px;
}

/* slide f */
#containerGallery a.slidef {
	background:url(../images/main_Door_Trainer_thumb.gif); 
	height:60px; 
	width:93px;
}
* html #containerGallery a.slidef {
	width:91px; 
	w\idth:93px;
}

/* end thumbnail images */

/* set the size of the unordered list to neatly house the thumbnails */
#containerGallery ul {
	width:230px;
	height:420px;
	margin:1px; 
	float:left;
}

#containerGallery li {
	clear:left;
}

/* change the thumbnail border color */
#containerGallery a.gallery:hover {
	border:1px solid #f55; 
}
    
/* styling the :hover span */
#containerGallery a.gallery:hover span {
	position:absolute; 
	width:450px; 
	height:400px; 
	color:#000; 
	background:#fff;
}

/* hover for the text box */
#containerGallery a.gallery:hover p {
	position:absolute;
	left:233px;
	top:0px;
	width:270px;
	height:420px;
	margin-top:1px;
	border:1px solid #ddd;
	float:left;
}

#containerGallery a.gallery:hover img {
	border:none;
	float:right; 
	margin-left:0px;
}

#containerGallery a.slideb:hover img, #containerGallery a.slidef:hover img {
	float:right;
}

p.galleryText {
	position:relative;
	float:left;
	margin-left:2px;
	padding:0;
        font-size:10px;
}

#containerGallery a.gallery {
	float:left;
}
  
/*************************************/
/*************************************/
/*    End Photo Gallery Mouseover    */
/*************************************/
/*************************************/


/*************************************/
/*************************************/
/*    Begin Gallery Image Text Box   */
/*************************************/
/*************************************/
#galleryDescription {
	position:relative;
	border:1px solid #000;
	height:400px;
	width:300px;
	margin-top:1px;
	float:left;
	
}