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

/* The essential design of the pages is as follows 
 ___________________________________________ page _____________________________________________
|  ________________________________________ header _________________________________________  |
| |                                                                                         | |
| |_________________________________________________________________________________________| |
|  ________________________________________ navbar _________________________________________  |
| |_________________________________________________________________________________________| |
|                                                                                             |
|  _____________________________________ mid section _______________________________________  |
| |                                                                                         | |
| |  _____ Left Col _____    __________________________Right Col _________________________  | |
| | |                    |  |                                                             | | |
| | |  _____cntbox_____  |  |  _______________________ main pane _______________________  | | |
| | | |                | |  | |                                                         | | | |
| | | |                | |  | |                                                         | | | |
| | | |                | |  | |                                 ///////// shader ///////| | | |
| | | |                | |  | |                                 ////////////////////////| | | |
| | | |________________| |  | |                                 ////////////////////////| | | |
| | |                    |  | |                                 ////////////////////////| | | |
| | |                    |  | |_________________________________________________________| | | |
| | |                    |  |                                                             | | |
| | |                    |  |  ________________________ sub pane _______________________  | | |
| | |  ____ cntbox ____  |  | |                                                         | | | |
| | | |                | |  | |  ____ cntbox ____                                       | | | |
| | | |                | |  | | |                |                                      | | | |
| | | |                | |  | | |                |                                      | | | |
| | | |                | |  | | |                |                                      | | | |
| | | |________________| |  | | |________________|                                      | | | |
| | |                    |  | |_________________________________________________________| | | |
| | |____________________|  |_____________________________________________________________| | |
| |_________________________________________________________________________________________| |
|  ________________________________________ footer _________________________________________  |
| |                                                                                         | |
| |_________________________________________________________________________________________| |
|_____________________________________________________________________________________________|

*/


body {
	/* Text / Font styling */
    font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-style:normal;
}


/* This is the definition for the entire page (which should within in, ALL other elements */
.page {
	width: 1000px; height:auto;             	 /* Dimensions        */
    margin: 0px auto 0px auto;       		     /* Outside Margin    */
	border: 0px;                       		     /* Border / frame    */
	padding: 0px;                                /* Inside padding    */
    display: block;                              /* How to draw it    */  

    background-color:none;                       /* Background Color  */
	background-image:none;                       /* Background Image  */
	
	-moz-border-radius:10px 10px 0px 0px;        /* Curved corners in Moz */
	-webkit-border-top-left-radius:10px;         /* Curved corners in Webkit */
	-webkit-border-top-right-radius:10px;        /* Curved corners in Webkit */
	
     	/* Text / Font styling */
    font-family:inherit;
	font-size:inherit;
	font-style:inherit;	
	
	
	
}

/* This is the definition for the header part of the page, containing only the leader logo*/
.header {
	width: 100%; height:100px;            /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 0px;                        /* Inside padding    */
    display: block;                      /* How to draw it    */
 
    background-color:none;                /* Background Color  */
	background-image:url(images/headerbar-blue.png);               /* Background Image  */

	-moz-border-radius:inherit;          /* Curved corners in Moz */
	-webkit-border-top-left-radius:inherit;         /* Curved corners in Webkit */
	-webkit-border-top-right-radius:inherit;        /* Curved corners in Webkit */


}

/* This is the definition for the central / mid section of the page, where all the real contents goes */
.midsection {
	width: 100%; height:auto;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 0px;                        /* Inside padding    */
    display: block;                      /* How to draw it    */

    background-color:#06C;              /* Background Color  */
	background-image:none;               /* Background Image  */
	overflow:hidden;
}

/* This is the definition for the left column, where most of small ads, news and promos go */
.midsectionleftcolumn {
	width: 180px; height:auto;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 10px;                       /* Inside padding    */
    display: block;                      /* How to draw it    */
    float:left;                          /* Where to draw it  */
    background-color:none;              /* Background Color  */
	background-image:none;               /* Background Image  */
	
}

/* This is the definition for the right column, where most of the detailed contents and larger promos go */
.midsectionrightcolumn {
	width: 780px; height:auto;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 10px;                       /* Inside padding    */
    display: block;                      /* How to draw it    */
    float:right;                         /* Where to draw it  */
    background-color:none;              /* Background Color  */
	background-image:none;               /* Background Image  */
	

}

/* This is the definition for the footer of the page, where most of the minor,less used links go */
.footer {
	width: 100%; height: auto;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 0px;                        /* Inside padding    */
    display: block;                      /* How to draw it    */

    background-color:#06C;              /* Background Color  */
	background-image:none;               /* Background Image  */
	overflow:hidden;
	position:relative;
	height:50px;
}


.hoverbox,
.contentbox {
	width: 100%; height: auto;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
    border: 0px;                         /* Border / frame    */
	border-style:solid;
	border-width:thin;
	border-color:#000;
	padding: 0px 0px 10px 0px;                        /* Inside padding    */
    display: block;                      /* How to draw it    */

    background-color:white;               /* Background Color  */

	-moz-border-radius:10px 10px 0px 0px;        /* Curved corners in Moz */
	-webkit-border-top-left-radius:10px;         /* Curved corners in Webkit */
	-webkit-border-top-right-radius:10px;        /* Curved corners in Webkit */
    overflow:hidden;
  position:relative;
}


.hoverbox h1,
.contentbox h1 {
	width: auto; height: 25px;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */

	padding: 5px 10px 0px 10px ;                        /* Inside padding    */
    display: block;                      /* How to draw it    */
    
 	background-image:url(images/header-blue.png);               /* Background Image  */
    color:#FFF;
	-moz-border-radius:inherit;        /* Curved c*orners in Moz */
	-webkit-border-top-left-radius:inherit;         /* Curved corners in Webkit */
	-webkit-border-top-right-radius:inherit;        /* Curved corners in Webkit */
	text-align:left;
	font-size:16px;

}

.hoverbox h2,
.contentbox h2 {
	font-size:14px;
	text-align:left;
	padding:0px 10px 0px 10px;
	margin:5px 0px 5px 0px;
}

.hoverbox p,
.contentbox p {
    width: auto; height: auto;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 0px 10px 0px 10px ;                        /* Inside padding    */
    display: block;                      /* How to draw it    */

    color:black;
	text-align:left;
	text-indent:0px;
}


.hoverbox .unhovered {
	position:absolute;
  width:100%;
	height:100%;
	display:inline-block;
}

.hoverbox .hovered {
	position:absolute;
    width:100%;
	height:100%;
	display:none;
}


.hoverbox:hover .unhovered {
	display:none;
}

.hoverbox:hover .hovered {
	display:inline-block;
}




/*This is the Navigation bar at the top of the screen used to navigate the site */
.navbar {

	width: 1000px; height: 20px;           /* Dimensions        */
    margin: 0px 0px 0px 0px;             /* Outside Margin    */
	border: 0px;                         /* Border / frame    */
	padding: 0px ;                        /* Inside padding    */
    display:inline-block;                      /* How to draw it    */
	list-style:none;
    
	background-color:black;               /* Background Color  */
	background-image:none;               /* Background Image  */

	/* Text Font styling */
    font-family:inherit;
	font-style:inherit;
	font-size:16px;


}


.navbar li {
	display:inline;
	padding:0px;
	width:166px;
	float:left;
	text-align:center;
}

.navbar li a{
	text-decoration:none;
	color:#999;
}


#home #home a,
#products #products a,
#services #services a,
#information #information a,
#history #history a,
#contactus #contactus a,
.navbar li a:hover 
{
    color:#FFF;
}


.mainpane {
	height:300px;
	width:100%;
	padding:0px;
	margin:0px;
	background-image:url(images/mainpanebackground.jpg);
	overflow:hidden;
}

.subpane {
	width:100%;
   padding:10px 0px 0px 0px;
	-moz-border-radius:0px;        /* Curved corners in Moz */
	-webkit-border-top-left-radius:0px;         /* Curved corners in Webkit */
	-webkit-border-top-right-radius:0px;        /* Curved corners in Webkit */
	background-color:none;
	overflow:hidden;
}





.shader {
	background-image:url(images/blackshader.png);
	height:50%; 
	width:55%; 
	float:right;
	padding:5px 10px 5px 10px;
	margin:0px;
	position:relative;
	top:30%; 
	overflow:hidden;
	color:white;
	text-align:left;
}

.shader h1 {
	margin:10px 0px 10px 0px;
	padding:0px;
	text-shadow:#000 2px 2px 4px;
	color:#white;
	font-size:20px;
}


.shader p {
	color:white;
	font-size:14px;
    text-shadow:#000 1px 1px 4px;
	background-color:transparent;
	margin:0px;
	padding: 0px;
}

.shader a:link,
.shader a:visited,
.shader a:hover,
.shader a:active{
	text-decoration:none;
	color:white;
	font-weight:bolder;
}