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

/******************************************************************************************************************************
Global margin and padding for border box area is set to off and none.  Default font for the whole site is the Arial family.
******************************************************************************************************************************/
* {margin: 0px;}
* {padding: 0px;}
* {font: 100% Arial, Helvetica, sans-serif;}

/******************************************************************************************************************************
The body covers the whole browser area.  Background for the body is black the body is text aligned left for to overide
various browser defaults.  This alignment can be overwriten by child div containers.
******************************************************************************************************************************/
body {

	background: white;
	text-align: left; 
}

/******************************************************************************************************************************
Tips for Elastic layouts 
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable.
 Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by
 using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately.
 You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70%
 font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You
 may want to adjust based on your final font sizing.
******************************************************************************************************************************/

/******************************************************************************************************************************
The major navigation area use a technique of overlaying a graphic on top of an unenumerated hot link list.  There are a 
series of graphics that get used and are defined in each major category template.  This container fixes the alignment to the
the top of the browser area, centers it and makes it always on top.  The container for content is not fixed position and 
will scroll up underneath the majorNavigationArea.  The outcome is that the major navigation menu is never off-screen.  
******************************************************************************************************************************/
.oneColElsCtrHdr #majorNavigationArea {

	position:fixed;
	width:100%;
	top:0;
	z-index:1;
	background-color:black;
}

/******************************************************************************************************************************
The main container holds all of the content not part of the header and footer.  The position starts just below the major
navigation container which has a height of 30px.   As of 2013, 99% of the monitors can display 1024x768 content.  This may
change to be larger as technology changes.  Check the http://www.w3schools.com/browsers/browsers_display.asp web site for
monitor statistics once every year.  This page is centered on the screen for screen resolutions larger than 1024 width.
******************************************************************************************************************************/
.oneColElsCtrHdr #container {

	position:relative;
	top:30px;
	width: 1024px;
	background: black;

 /* the auto margins (in conjunction with a width) center the page
 -----------------------------------------------*/
	margin: 0 auto;

/* this overrides the text-align: center on the body element.
------------------------------------------------*/
	text-align: left;
}

/******************************************************************************************************************************
currently the content container matches the global container size and shape.  This can be changed as needed.  This is the
container that enables the vertical and horizontal scroll bars as the content held within can be larger than the viewable 
area.
******************************************************************************************************************************/
.oneColElsCtrHdr #contentContainer {

	background-color:white;
	top:30px;
	padding: 0;
	margin: 0;
	height: 5000px;
	width: 1024px;
	text-align:center;
}

/******************************************************************************************************************************
currently not used
******************************************************************************************************************************/
.oneColElsCtrHdr #contentNavigationArea {

	background:black;
	padding: 0;
	height 46em;
	width: 10em;
}

/******************************************************************************************************************************
currently not used
******************************************************************************************************************************/
.oneColElsCtrHdr #contentDescription {

	background:black;
	padding: 0 20px;
	height:auto;
	width:1024px;
}

/******************************************************************************************************************************
The major footer containment encapsulates the footerLogo, footerAddress, and footerCopyright areas.  This container fixes the
alignment to the bottom of the browser area, centers it and makes it always on top.  The container for content is not fixed
position and will scroll down underneath the footerContainer.  The outcome is that the footer is never off-screen so that the
company contact information is visible no matter what browser is used and no matter how large the content gets.  
******************************************************************************************************************************/
.oneColElsCtrHdr #wideFooterContainer {

	background:black;
	position:fixed;
	padding: 0;
	margin: 0 auto;
	bottom:0px;
	height 75px;
	width:100%;
}

/******************************************************************************************************************************
The major footer containment encapsulates the footerLogo, footerAddress, and footerCopyright areas.  This container fixes the
alignment to the bottom of the browser area, centers it and makes it always on top.  The container for content is not fixed
position and will scroll down underneath the footerContainer.  The outcome is that the footer is never off-screen so that the
company contact information is visible no matter what browser is used and no matter how large the content gets.  
******************************************************************************************************************************/
.oneColElsCtrHdr #footerContainer {

	background:black;
	padding: 0;
	margin: 0 auto;
	bottom:0px;
	height 75px;
	width: 1024px;
}

/******************************************************************************************************************************
The permanent home of Fred Gator's friendly mug.  The logo area is the size of the graphic and left justified within the 
footerContainer.   The logo is set to be always on top so that it does not get obscured by the footerAddress and 
footerCopyright areas.
******************************************************************************************************************************/
.oneColElsCtrHdr #footerLogoArea {
	background:black;
	margin: 0;
	padding: 0;
	height:75px;
	width:75px;
	bottom:0px;
	float:left;
	z-index:1;
} 

/******************************************************************************************************************************
Center in the footer area the footerAddress contains all of the company contact information.  The left alignment offset is 
normalization for the space that the footerLogo consumes so that the text is absolute center relative to the 1024 pixel area.
This offset constant will have to be changed if the content area width is ever changed.  All text is company standard gator
green.
******************************************************************************************************************************/
.oneColElsCtrHdr #footerAddress { 

	background:black;
	bottom:20px;
	left:-37px;
	height:55px;
	width:949px;
	margin: 0;
	padding: 0;
	text-align:center;
	color: #2F9221;
} 

/******************************************************************************************************************************
Center in the footer area the footerCopyright contains the copyright notice.  The text template must be changed yearly.  The
left alignment offset is normalization for the space that the footerLogo consumes so that the text is left justified within 
the 1024 pixel area.  This offset constant will have to be changed if the content area width is ever changed.  All text is 
company standard life preserver orange.
******************************************************************************************************************************/
.oneColElsCtrHdr #footerCopyright {
	
	background:#000000;
	bottom:0;
	left:-37px;
	height:20px;
	width:949px;
	margin: 0;
	padding: 0;
}

.styleFooter {color: #FFFF00; background-color:#000000; font-size:x-small}

.style2 {color: #fc6812}
.style3 {
	font-size: 16px;
	font-weight: bold;
	padding-bottom:5px;
}
.style4 {
	font-weight: bold;
}