/* Grid Styles - Base

Page Container layout:
   
body
	div#wrap
	  div#pageTop
		div#pageBody
		
			div#header
				div#headerLogoWrap
					div#headerLogo
					div#headerOptions
				div#navigationTop
				div#navigationSub
				div#search
				div#breadcrumb
				
			div#main.fourColumn
				div#column1.column
					div#sidebarheader
					div#navigationLeft
						ul.level1

				div#column2.column
					div
											
				div#column3.column
					div

				div#column4.column
					div

			div#footer
				div
				
    div#pageBottom
*/

/* HTML element defaults */
body { margin: 0 auto; padding: 0; text-align: center; overflow: none }

form { margin: 0; border: 0; padding: 0 }
input { margin: 0; padding: 0 }
img { border: none }

/* reuseable formating classes */
.clearBoth { clear: both }
.floatLeft { float: left }
.floatRight { float: right }
.textLeft { text-align: left }
.textCenter { text-align: center }
.textRight { text-align: right }
.widthFull { width: 100% }
.fontBold { font-weight: bold }

.spc2 { height: 2px; line-height: 2px; font-size: 1px; clear: both }
.spc4 { height: 4px; line-height: 4px; font-size: 1px; clear: both }
.spc6 { height: 6px; line-height: 6px; font-size: 1px; clear: both }
.spc8 { height: 8px; line-height: 8px; font-size: 1px; clear: both }
.spc10 { height: 10px; line-height: 10px; font-size: 1px; clear: both }
.spc12 { height: 12px; line-height: 12px; font-size: 1px; clear: both }
.vert4pad { margin: 4px 0 }
.bottom4pad { margin-bottom: 4px }
.bottom8pad { margin-bottom: 8px }

.column { float: left; text-align: left; margin: 0; border: 0; padding: 0 }

/* rules for ul-based menus */
/*
Cascading menus:
  horiz: sometimes level1 ul is 'position=relative'. level2 and above need to be 'absolute'
	vert: child ul's need to be 'position=relative', so vert impl's override 'position=absolute'
*/
.navWrap { width: 100%; margin: 0 auto; padding: 0 }
ul.itemsFloated li { float: left; /*display: block*/ }
ul.itemsInline li { display: inline }

/* rules for level 1 lists */
ul.navList, ul.navList ul, ul.navList ul ul { position: absolute; list-style: none; margin: 0; border: 0; padding: 0 }

/* rules for level 1 items */
ul.navList li { position: relative; cursor: pointer }
ul.navList li a { display: block; margin: 0; border: 0; padding: 0; text-decoration: none }

/* rules for level 2 & 3 lists */
ul.navList ul, ul.navList ul ul { display: none; left: auto; height: auto }
/* rules for level 2 & 3 items */
ul.navList li li, ul.navList li li li { position: relative; text-align: left }

/* lnav */
/*
#navigationLeft ul { list-style: none; margin: 0; padding: 0 }
#navigationLeft li { display: block }
#navigationLeft a { display: block }
*/
/*
#navigationLeft ul ul { list-style: none; padding: 0 }
#navigationLeft ul ul ul { list-style: none; margin: 0; padding: 0 }
#navigationLeft li li li { margin: 0 }
*/
/* end lnav */


/* single inline list variation - auto centers, but can have no display:block on li or a */
ul.navBar { list-style: none; margin: 0; border: 0; padding: 0 }
ul.navBar li { position: relative; display: inline; cursor: pointer }
ul.navBar li a { margin: 0; border: 0; padding: 0; text-decoration: none }


/* Base Grid Rules */
.bodyNoBackground {	background: none }
.bodyNoPadTop { padding-top: 0 }

#wrap { margin: 0 auto; text-align: left }
.wrapFullWidth { width: 100% }
.wrapNoBorders { border: 0 }

#pageTop { display: none; position: relative; width: 100%; margin: 0; padding: 0 }

#pageBody { height: 100%; text-align: left; margin: 0; padding: 0; overflow: hidden }

#header { display: block; width: 100%; height: auto; margin: 0 }

#headerLogoWrap { width: 100%; margin: 0 auto 0 auto; position: relative; text-align: center }
#headerLogo { text-align: left; position: relative; text-align: left; float: left }
#headerOptions { position: relative; float: left; text-align: right }

#navigationTop { display: block; position: relative }

#navigationSub { display: none; position: relative }

#search { display: block }

#breadcrumb { display: block }

#navigationLeft { display: block }

#footer { display: block; width: 100%; margin: 0 auto 0 auto; padding: 0; text-align: center; clear: both }

#pageBottom { display: none; text-align: center; position: relative; margin: 0 auto 0 auto; clear: both }

#navigationBottom { display: none; position: relative }


/* 
Page Middle

'main' is setup with 4 columns. 
1, 2 and 4 have predefined widths and gutter margins.
column3 is always the primary content column, is setup to take 100% of available width space, and has no margins.

'offset' is a class applied to 'main' to switch in this system of appyling various left or right padding configurations to main, 
and margin configurations to the columns (ie: div#main.offset.fourColumn). 

The padding is added to displace or reserve a section(s)of main which is then filled by offsetting column divs into place with negative margin.
column3 gets and takes 100% what ever space is left in the middle.

*/

#main { height: 100%; clear: both }

#column3 { width: 100% }

/* oneColumn (C1) */
.offset.oneColumn { padding: 0 }

.oneColumn #column1 { display: none }
.oneColumn #column2 { display: none }
.oneColumn #column3 { display; block }
.oneColumn #column4 { display: none }

/* twoColumn (C1, C3) */
.twoColumn #column1 { display: block }
.twoColumn #column2 { display: none }
.twoColumn #column3 { display: block }
.twoColumn #column4 { display: none }

/* twoColumn_34 (C3, C4) */
.twoColumn_34 #column1 { display: none }
.twoColumn_34 #column2 { display: none }
.twoColumn_34 #column3 { display: block }
.twoColumn_34 #column4 { display: block }

/* threeColumn (C1, C3, C4) */
.threeColumn #column1 { display: block }
.threeColumn #column2 { display: none }
.threeColumn #column3 { display: block }
.threeColumn #column4 { display: block }

/* threeColumn_123 (C1, C2, C3) */
.threeColumn_123 #column1 { display: block }
.threeColumn_123 #column2 { display: block }
.threeColumn_123 #column3 { display: block }
.threeColumn_123 #column4 { display: none }

/* fourColumn (C1, C2, C3, C4) */
.fourColumn #column1 { display: block }
.fourColumn #column2 { display: block }
.fourColumn #column3 { display: block }
.fourColumn #column4 { display: block }