﻿/*  ----------------------------------------------------------------
EPIC Controllers Base CSS
Author: Older than Dirt (Old School HTML)
Version: 11 Feb 2009
-------------------------------------------------------------------- */


/*  Global page styles reset:
-------------------------------------------------------------------- */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote,img {
  margin: 0;
  padding: 0;
  border: 0;
  } 

h1, h2, h3, h4, h5, h6, pre, code  {
  font-size: 1em;
  }

a  {
  text-decoration: none;
  }

a img  {
  border: none;
  }



/* Global styles:  =Global
------------------------------------------------------------------ */

body  {
  background-color:#004100;          
  margin:0;
  padding:0;
  font:small Verdana, sans-serif;
  line-height:1.4em;
  text-align:center;
  color:#333; 
	}

#container  {
  width: 780px;
  border-top: 0;
  margin: 10px auto 0 auto;
  background-color: #fff;
  text-align: left;
  }

#masthead, #contentWrapper, #footer  {
  width: 780px;
	}
  
#banner_left {
    position: relative;
    float: left;
	}
    
#banner_right {
    position: relative;
    float: right;
	}

h1, h2, h3, h4, h5, h6  {
  font-family: Arial, Helvetica, sans-serif;
  }

h1 { font-size: 2em; margin-top: .313em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; margin-bottom: .5em; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }

p  {
  text-align : left;
  margin-bottom: 10px;
  font-family:  verdana, geneva, arial, sans-serif;
  font-weight: 400;
  padding-right:5px;
  }

.clear {
	clear: both;
	}

.clearright {
	clear: right;
	}

.clearleft {
	clear: left;
	}

.right {
	float:right;
	}

.left {
	float:left;
	}
  
.spacer {
	margin-bottom: .5em;
	padding-bottom: 1.0em;
	}

p.intro:first-letter {
	font: 2.5em/80% serif;
	float: left;
	padding: 0.2ex 0 0 0.2ex;
	margin: 0;
	color: #232eb5;
	overflow: visible;
	}

/*  ID styles
-------------------------------------------------------------  */

#contentWrapper {
	padding-left: 0;
	background-color: #fff;
	min-height: 640px;
	}

#banner {
	padding: 0;
	margin-bottom: 0;
	}

#content {
	padding: 1em 2em 0 2em;
	/* min-height: 640px;*/
	}

#content h2.h2style {
	width: 90%;
	float: left;
	text-align:left;
	color: #232eb5;
	font-weight: 600;
	margin-top: 1em;
	margin-left: .7em;
	margin-bottom: .5em;
	padding: 0;
	padding-bottom: .5em;
	padding-left:.5em;
	border-bottom: #95cf9c solid 2px;
	}

/*  Floating left and right Sidebars
used in home page;
------------------------------------------------------------ */
#leftmain {
	width:380px;
	float:left;
	}

#rightmain {
	width:300px;
	float:right;
	margin-top:1em;
	padding-right:2em;
	}

#rightmain img {
	padding-left:2em;
	}	
	
.relay-box {
	margin-top:30px;
	margin-left:30px;
	}

h2.epictag {
	font-family: lucinda-ms,Helvetica,sans-serif;
	font-size:1.4em;
	color:#232eb5;
	letter-spacing:2px;
	margin-top:11px;
	padding-top:1.1em;
	margin-bottom:5px;
	}
	

/*  Secondary Nav column
------------------------------------------------------------*/

#contentWrapper #Sidebar {
	width: 145px;
	float: left;
	margin-top: 15px;
	}


/*  All multi-column float pages except Features 
-------------------------------------------------------------*/

#contentWrapper #Sidebar2 {
	width: 635px;
	min-height:640px;
	float: right;
	margin: 0;
	padding: 0;
	}

	#Sidebar2 h2.h2style {
	margin: 0;
	margin-top: 1em;
	padding: 3px;
	width: 97%;
	height: 20px;
	float: left;
	text-align: left;
	color: #232eb5;
	font-weight: 600;
	border-bottom: #95cf9c solid 2px;
	}

 	#sidebar2 #upper {
	width: 600px;
    float: left;
    }

	#Sidebar2 #middle {
	width: 380px;
	float: left;
	margin-top:10px;
	margin-bottom: 2em;
	}

	#Sidebar2 #outside {
	width: 230px;
	float: right;
	margin-top:10px;
	border-left: #95cf9c solid 1px;
	padding-left: 10px;
	min-height: 450px;
	Margin-bottom: 2em;
	}
	
	#upper p:first-line {
    text-indent:25px;
    }
  
	
	
/*  Epic40 page - 2 columns divided 50-50
------------------------------------------------------ */

  
body#epic40 #Sidebar2 #middle {
	width: 47%;
	float: left;
	margin-top:10px;
	margin-bottom: 2em;
	}

body#epic40 #Sidebar2 #outside {
	width: 48%;
	float: right;
	margin-top:10px;
	border-left: #95cf9c solid 1px;
	padding-left: 10px;
	padding-right: 5px;
	Margin-bottom: 2em;
	}

	

/* FEATURE floated page - 3 column float Layout
     (Secondary Nav column [from above] remains) 
---------------------------------------------------------------------*/

/* Feature Page Layout Columns 2 & 3 (currently using features.css)
---------------------------------------------------------------------*/

#contentWrapper #featureFloat {
	width: 635px;
	float: right;
	margin: 0;
	padding: 0;
	}

#featureFloat h2.h2style {
	float: left;
	text-align: left;
	width: 97.5%;
	height: 25px;
	color: #232eb5;
	font-weight: 600;
	margin: 0;
	margin-top: .5em;
	padding: 0;
	padding-bottom:2px;
	border-bottom: #95cf9c solid 2px;
	}

#featureFloat #featureList {
	width: 180px;
	float: right;
	margin-bottom: .5em;
	}
	
/* FeatureDesc -the max height keeps within viewport 
----------------------------------------------------*/
#featureFloat #featureDesc {
	width: 440px;
	max-height: 630px;
	float: left;
	padding-left: 4px;
	overflow: auto; 
	}

/* featdesc - contains para inside scroll bars
------------------------------------------------- */
#featdesc p {
	max-width: 430px;
	text-align : left;
	margin-right: 20px;
	margin-left: 5px;
	margin-bottom: 10px;
	font-family: tahoma,arial, sans-serif;
	font-size: .9em;
	font-weight: 400;
	}

#featdesc h3 {
	font-family: georgia,serif;
	text-align : left;
	margin-left: 2px;
	font-size: 1.2em;
	color: #232eb5;
	}


/* NAVIGATION  LISTS  ---------------------------------------- */

/*   Main Nav Bar List
-------------------------------------------------------------- */

ul.nav {
	float: left;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
	padding-top:4px;
	padding-bottom: 0;
	margin-bottom: 1em;
	border-bottom: 0;
	}

ul.nav li {
	float: left;
	}

ul.nav a {
	width: 8.65em;
	display: block;
	border: 1px solid #95cf9c;
	border-right: 0;
	border-bottom: 1px solid #95cf9c;
	padding: 4px 7px 4px 6px;
	margin-right: 0;
	background-image: url(images/gn_bg-1.gif);
	text-decoration: none;
	color: #0000d9;
	text-align: center;
	}


/*  IE 6 hacks
------------------------------------------------------------ */

   * html ul.nav a { height: 1px; }



/* right border on right-most button
 ---------------------------------------------------------- */

.last { 
	border-right: 1px solid #95cf9c;
	}


/*  Highlight the current page on the main navbar
-----------------------------------------------------------*/

body#home a#homeLink,
body#about a#aboutLink,
body#epic40 a#epic40Link,
body#other a#otherLink,
body#order a#orderLink,
body#contact a#contactLink,
body#features40 a#epic40Link,
body#specs40 a#epic40Link,
body#install40 a#epic40Link,
body#program40 a#epic40Link,
body#future40 a#epic40Link,
body#support40 a#epic40Link,
body#relayfeatures a#otherLink,
body#relayspecs a#otherLink,
body#relayinstall a#otherLink,
body#relaysupport a#otherLink {
	background: url(images/bl_bg1.gif);
	color: #03820c;
	text-decoration: underline;
	}


/*  Secondary Nav List
-----------------------------------------------------------*/

ul.navbar2 {
	float: left;
	list-style-type: none;
	padding: 0;
	margin-top: .7em;
	font-variant: small-caps;
	}

ul.navbar2 li {
	float: left;
	}

ul.navbar2 li.image {
	width:130px;
	height:75px;
	border:1px solid #95cf9c;
	border-bottom: 0;
	background:none;
	}
	
ul.navbar2 a {
	display: block;
	width: 110px;
	height: 1.20em;
	line-height: 1.25em;	
	border: 1px solid #95cf9c;
	border-bottom: 0;
	padding: 5px 10px 5px 10px;
	background-image: url(images/gn_bg-1.gif);
	text-decoration: none;
	color: #0000d9;
	text-align: center;
	}

ul.navbar2 li.gradient {
	height: 160px;
	width: 132px;
	background: url(images/sb-grn.gif) repeat-x;
	}	


/*  Highlight 'current page' on the secondary navbar 
----------------------------------------------------------*/
body#features40 a#featuresLink,
body#specs40 a#specsLink,
body#install40 a#installLink,
body#program40 a#programLink,
body#future40 a#futureLink,
body#support40 a#supportLink,
body#relayfeatures a#featuresLink,
body#relayspecs a#specsLink,
body#relayinstall a#installLink,
body#relaysupport a#supportLink {
	background: none;
	color: #0002df;
	border-right: 0;
	font-weight: 600;
	text-decoration: underline;
	}


/*  Home Page #product_list h4 & ul
----------------------------------------------------------*/
#product_list {
	float: left;
	}

#product_list h4 {
	padding-top: 10px;  
	padding-bottom: 10px;	
	margin-left: 35px;
	text-align: left;
	font-size: 1.3em;
	font-weight: 700;
	font-family: arial, Helvetica, sans-serif;
	font-variant: small-caps;
	color: #232eb5; 
	}

#product_list ul {
	padding-bottom: 10px;
	margin-left: 75px;
	list-style-type: square;
	}

#product_list li {
	text-align: left;
	font-size: 1em;
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-weight: 300;
	clear: left;
	}
	
.hilite {
	font-weight:600;
	font-style:oblique;
}



/*  Relay Main Page
------------------------------------------------------- */

ul.circle {
	margin-left: 30px;
	list-style-type: circle;
	}

.boldblu {
	color: #232eb5;
	font-weight: 600;
	}


/*  Relay Install Page
------------------------------------------------------- */

ol.number {
	margin-left:40px;
	list-style-type:decimal;
	}


/*  EPIC 40 Main Page
------------------------------------------------------- */

.boldgn {
   color: #03820c;
   font-size:110%;
   font-weight:700;
   }




/*  Feature Index Nav List
-------------------------------------------------------*/

ul.feature {
	float: left;
	list-style-type: none;
	padding: 0;
	margin-top: 0em;
}

ul.feature li {
	/*float: left;*/
}

ul.feature a {
	text-align: left;
	text-decoration: none;
	color: #232eb5;
}



/*	FOOTER DIVISION
------------------------------------------------------*/

#footer {
	clear: both;
	margin: 0;
	padding: 0;
	padding-top: 2px;
	border-top: 2px solid #95cf9c;
	background-color: #FFF;
	}


/*  Footer Navigation List
------------------------------------------------------*/
 
ul.foot {
	float: left;
	list-style-type: none;
	padding-left: 2em;
	}

ul.foot li {
	display: inline;
	}

ul.foot a {
	margin-right: 7px;
	text-decoration: none;
	color: #333;
	}


/*   Copyright Footer Text
-----------------------------------------------------*/

.copy {
	float: right;
	padding: 0;
	margin: 0;
	font-size: x-small;
	font-weight: 400;
	color: gray;
	margin-right: 2em;
}

.addressjtnc {
	clear: both;
	font-size: x-small;
	font-weight: 400;
	color: gray;
	margin-left: 25em;
	margin-top: -3px;
	margin-bottom: 1px;
	white-space: nowrap;
}



/* 	LINK STYLES
------------------------------------------------------*/


/*	Main NAV BAR Links
-----------------------------------------------------*/

ul.nav a:link {
	font-size: 10pt;
	font-weight: 500;
	color: #0002df;
	text-decoration: none;
	}

ul.nav a:visited {
	font-size: 10pt;
	font-weight: 500;
	color: #0002df;
	text-decoration: none
	}

ul.nav a:hover, ul.nav a:active {
	font-size: 10pt;
	font-weight:600;
	background-image: url(images/gn_hover.gif);
	color: #0002df;
	text-decoration: underline;
	}


/*	Secondary Nav Links
----------------------------------------------------*/

ul.navbar2 a:link {
	font-size: 10pt;
	font-weight: 500;
	color: #0002df;
	text-decoration: none;
	}

ul.navbar2 a:visited {
	font-size: 10pt;
	font-weight: 500;
	color: #0002df;
	text-decoration: none;
	}

ul.navbar2 a:hover {
	font-size: 10pt;
	font-weight: 600;
	background-image: url(images/gn_hover.gif);
	color: #0002df;
	text-decoration: underline;
	}

ul.navbar2 a:active {
	font-size: 10pt;
	font-weight: 500;
	background-image: url(images/gn_hover.gif);
	color: #03820c;
	text-decoration: underline;
	}


/*  Feature Index Links
--------------------------------------------------*/

ul.feature a:link ul.feature a:visited {
	font-size: 10pt;
	font-weight: 500;
	color: #10930f;
	text-decoration: none;
	}

ul.feature a:hover, ul.feature a:active {
	font-size: 10pt;
	font-weight: 500;
	color: #232eb5;
	text-decoration: underline;
	}


/*	Main Content Links
--------------------------------------------------------- */

#product_list h4 a:link, #product_list h4 a:visited {
	font-family: arial, Helvetica, sans-serif;
	color: #232eb5;
	text-decoration: none;
	}


#product_list h4 a:hover, #product_list h4 a.active {
	font-family: arial, Helvetica, sans-serif;
	color: #009900;
	text-decoration: underline;
	font-variant: small-caps;
	}

.invite a:link, .invite a:visited {
	font-family: arial,verdana,sans-serif; 
	font-size: 11pt;
	font-weight: 600;
	color: #232eb5;
	text-decoration: none;
	}

.invite a:hover, .invite a:active {
	font-family: arial,verdana,sans-serif; 
	font-size: 11pt;
	font-weight: 600;
	color: #009900;
	text-decoration: underline;
	}

a:link, a:visited {
	font-weight: bolder;
	color: #232eb5;
	}

a:hover {
	color: #009900;
	text-decoration: underline;
	}


/* 	Footer Links 
------------------------------------------------------- */


ul.foot a:link, ul.foot a:visited {
	font-size: 11px;
	font-weight: 300;
	color: gray;
	text-decoration: none;
	}

ul.foot a:hover, ul.foot a:active {
	font-size: 11px;
	font-weight: 500;
	color: green;
	text-decoration: underline;
	}


/* Various h3 & h4 sub-headings - see #content h4 above
-------------------------------------------------------- */

h4.pagelead {
	padding-top: 1.5em;  
	margin-left: 45px;
	text-align: left;
	font-size: 1.3em;
	font-variant: small-caps;
	color: #232eb5;
	}

.subhead {
	padding-top: 1em;  
	text-align: left;
	font-size: 1.2em;
	font-family: verdana,lucinda-sans,sans-serif;
	font-variant: small-caps;
	color: #232eb5;
	}

h3.h3style {
	margin-left: 0;
	padding-top: .8em;
	text-align: left;
	font: 1.4em arial,verdana,sans-serif; 
	color: #232eb5;
	}

.h2style {
	padding-top: 2em;  
	margin-left: .5em;
	margin-bottom: 1em;
	text-align: left;
	font-weight: 600;
	font-size:1.5em;
	color: #232eb5;
	}

.dochead {
	font: 1.2em arial,verdana,sans-serif; 
	color: #232eb5;
	font-weight: 600;
	margin-top: 1em;
	margin-bottom: .4em;
	}
	
	
/*	Contact Us Page layout
----------------------------------------------------- */

.phones, .address {
	margin-top: 1em;
	}
	
.phones p, .address p {
	text-align: left;
	font-family: "Microsoft Sans Serif",arial;
	font-size: 1.1em;
	font-weight: 300;
	padding: 0;
	padding-top: 7px;
	margin: 0;
	margin-left: 4em;
	}

.email {
	padding-top: 7px;
	}
.special {
	padding-top: 7px;
	margin-left: 4em;
	font: 1.1em "Microsoft Sans Serif",arial;
	}


/* .invite is used on 3 pages - Order Home Contact
---------------------------------------------------- */

.invite {
	font-style: oblique;
	padding-left: .5em;
	font-size: 110%;
 }
 
.inviteNI  {
	font-style: oblique;
	}

/*  not used currently
--------------------------------------------------- */

.caption {
  font-size: 9pt;
  font-weight: 500;
  color: gray;
  text-align: left;  
  margin-left: 10px; 
	}


/* ------------------End of Base CSS ---------------*/


