*  
{
    margin:0; 
    font-family:Calibri,Arial,Helvetica,sans-serif;
    font-variant:small-caps;
}

html { height:100%; } 
body { height:100%; } 
form { height:100%; } 



/* ************************** */
/* Sticky Footer by Ryan Fait */

/*
http://ryanfait.com/
 Also requires...
  * { margin:0; }
  html,body { height:100%;}
  form { height:100%; }
*/

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */
	/* background-color:#FFFFFF; */
	/* color:#000000; */
}

.footer, .push {
	height: 60px; /* .push must be the same height as .footer */
}

.footer { overflow:hidden; }/* div constrains content */


/* End Sticky Footer by Ryan Fait */
/* ****************************** */



/* Text formatting */
p { font-variant:normal; margin:1em 0 0.5em 0;}
h1 { margin:0.5em 0 0.5em 0; }
h2 { margin:1em 0 0.5em 0; }
h3 { margin:2em 0 0.5em 0; }
h4 { margin:2em 0 0.5em 0; }
h5 { margin:2em 0 0.5em 0; }

div { outline:0; }

input [type="button"],
input [type="submit"]
{ outline:0; }

.aTextLink { color:#FF0000; text-decoration:none; font-variant:normal; }
.aTextLink:visited { color:#FF8888; }
.aTextLink:hover { opacity:0.6;}

.hrText { width:100% }

/* HEADER LOGO */
#imgHeaderLogo
{ 
    max-height:100px;
    height:90%;
    border-style:none;
    margin-left:auto;
    margin-right:auto;
    vertical-align:middle;
}

/* HEADER LOGO VERTICAL CENTERING HELPER */
/* Ref: http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div */
.helper 
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#divHeader 
{ 
    background-color:#1A1E8F; /* #8559DE */
    /* IMAGE CENTERING - START */
    white-space: nowrap;    
    text-align: center; 
    margin: 0 0;    
    /* IMAGE CENTERING - FINISH */
}


#divNavBar
{
    padding:0px;
    margin: 0 auto;
    /* background-color:#EDBBC9; */ /* Diags only */
    overflow:hidden;
}

#divContent 
{
    padding:0px;
    margin:0 auto;
    overflow:hidden; /* Contained divs are constrained within this div */
}

#divFooter
{
    padding:0px;
    margin:0 auto;
    overflow:hidden; /* Contained divs are constrained within this div */
}




/* ////////////////////////////////////////////////////////////////// */
/* //                                                              // */  
/* //   Nav Bar Table                                              // */  
/* //                                                              // */  

.tbNav
{
    /* Fill containing div */
    width: 100%; 
    height: 100%; 
  
    table-layout:fixed; /* Equal spaced columns */
  
    border-collapse:separate; 
    /* border-collapse:collapse; */
    
    border-style:solid;
    border-width:0px;
    border-color:Red; /* Diags */
    
    /* Default is 1px, Gap beteen each cell - How to space the buttons within the table */
    border-spacing:5px;    
    
    /* margin:5%; */ /* Gap around the table - express as % so that table size can be a % value also, and table can scale */
    
    empty-cells:show;
    white-space:nowrap;    
}

.tdNav
{ 
    border-color:#888888;
    border-width:2px;
    border-style:solid;     
    padding:0px; /* Padding between content and cell edge */

    text-align:center;
    vertical-align:middle;
    /* background-color:#DDDDDD; */   
}    

.tdNav:hover
{ opacity:0.6; }

/* Table Cells that act as links or buttons */
.aBlockLink
{
    display:block;
    width:100%;
    height:100%;
    
    text-decoration:none; /* No underline */
    color:#000000; 
    /* font-size:small; */
}

.aBlockLink:focus
{ color:#8888FF } /* Links get focus, td's dont */

/* //                                                              // */  
/* ////////////////////////////////////////////////////////////////// */




/* ////////////////////////////////////////////////////////////////// */
/* //                                                              // */  
/* //   Footer Table                                               // */  
/* //                                                              // */  

.tbFooter
{
    font-size:smaller;
    
    width: 100%; 
    height: 100%; 
  
    table-layout:fixed; /* Equal spaced columns */
  
    border-collapse:separate; 
    /* border-collapse:collapse; */
    
    border: 0px solid transparent;
    
    /* Default is 1px, Gap beteen each cell - How to space the buttons within the table */
    border-spacing:0px;    
    
    /* margin:5%; */ /* Gap around the table - express as % so that table size can be a % value also, and table can scale */
    
    empty-cells:show;
    white-space:normal;
}

.tdFooter
{ 
    border: 0px solid transparent;
    padding:0px; /* Padding between content and cell edge */
    text-align:center;
    vertical-align:middle;
}    

.tdFooter:hover
{ opacity:0.6; }


/* //                                                              // */  
/* ////////////////////////////////////////////////////////////////// */




/* *********************** */
/* START CUSTOM ICON FONTS */

/* Font for Icons, thanks to IcoMoon */
@font-face {
	font-family: 'Icon_02';
	src:url('../fonts/Icon_02.eot');
	src:url('../fonts/Icon_02.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Icon_02.woff') format('woff'),
		url('../fonts/Icon_02.ttf') format('truetype'),
		url('../fonts/Icon_02.svg#TestIcon_01') format('svg');
	font-weight: normal;
	font-style: normal;
}

[data-icon]:before {
	font-family: 'Icon_02';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* END CUSTOM ICON FONTS */
/* ********************* */






/* ////////////////////////////////////////////////////////////////// */
/* //                                                              // */  
/* //   Responsiveness                                             // */  
/* //                                                              // */  


@media screen and (min-width: 1201px) 
{ 
  #divHeader { height: 120px; }

  #divNavBar { height: 80px; width: 50%; }
  .aBlockLink { line-height: 60px; /* A value just a bit less than the NavBar height to fill the td cell */}
  .iconNav { font-size:1.5em; }

  .spacer2 { height:10px; }
  .spacer3 { height:50px; }

  #divContent, #divFooter { width:49%; }  /* Not 50%; To indent text very slightly on left-right margin */
  
  p { font-size: 2em; }
  h1 { font-size: 3.5em; }
  h2 { font-size: 3.2em; }
  h3 { font-size: 3.0em; }
  h4 { font-size: 2.8em; }
  h5 { font-size: 2em; }      
}

@media screen and (min-width: 601px) and (max-width: 1200px) 
{ 
  #divHeader { height: 90px; }

  #divNavBar { height: 60px; width: 600px; } 
  .aBlockLink { line-height: 45px; /* A value just a bit less than the NavBar height to fill the td cell */}
  .iconNav { font-size:1.3em; }

  .spacer2 { height:8px; }
  .spacer3 { height:20px; }

  #divContent, #divFooter { width:596px; } /* 4px reduction to produce slight indent on text block */ 

  p { font-size: 1.6em; }
  h1 { font-size: 3.0em; }
  h2 { font-size: 2.8em; }
  h3 { font-size: 2.6em; }
  h4 { font-size: 2.4em; }
  h5 { font-size: 1.6em; }      
}

@media screen and (max-width: 600px) 
{ 
  #divHeader { height: 60px; }

  #divNavBar { height: 40px; width: 100%; } 
  .aBlockLink { line-height: 25px; /* A value just a bit less than the NavBar height to fill the td cell */}
  .iconNav { font-size:1em; }

  .spacer2 { height:5px; }
  .spacer3 { height:10px; }  

  #divContent, #divFooter { width:98%; } /* Slight indent */

  p { font-size: 1em; }
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.4em; }
  h4 { font-size: 1.3em; }
  h5 { font-size: 1em; }      
}


/* //                                                              // */  
/* ////////////////////////////////////////////////////////////////// */