/**************************************************************
   AUTHOR:  Pat Heard (fullahead.org)
   DATE:    2006.03.19
   PURPOSE: Controls the layout of the site and styles
            the menus
 **************************************************************/
/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/
#content { /*height: 100%;*/ /*min-height: 100%;*/ background: #fff; text-align: left; /*border: solid 2px #ff0000;*/ }
#content, #width { /* max-width hack for IE since it doesn't understand the valid css property */ width: expression(document.body.clientWidth > 1000 ? "1200px" : "98%"); max-width: 1200px; margin: 0 auto; }
#content[id], #width[id] { width: 98%; height: auto; }

/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/
#header { background: #888; position: relative; height: 114px; }
/* Holds the links row */
#header #linksRow { background: #444; position: relative; height: 18px; top: 0px; left: 0px; padding: 2px 10px 2px 0px; font: 13px "trebuchet ms" , serif; text-align: right; color: #f7f7f7; }
#header #linksRow a { color: #78b6e4; }

/* Holds the site title and subtitle */
#header #title { position: absolute; z-index: 3; top: 42px; left: 120px; width: 350px; }
#header h1 { /* name to right of logo */ margin: 0; padding: 0; font: 700 42px "trebuchet ms" , serif; letter-spacing: -1px; color: #FFF; }
#header h2 { /* byline */ position: absolute; top: 40px; left: 30px; margin: 0; padding: 0; font: 700 14px "trebuchet ms" , serif; text-transform: lowercase; color: #FFFF33; }

/* Sets where the header images will go */
#header img.left { position: absolute; z-index: 2; top: 34px; left: 10px; }
#header img.right { position: absolute; z-index: 0; top: 0; right: 0; }

/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/
#mainMenu { float: left; width: 100%; clear: both; background: #777; }
#mainMenu ul { margin: 0; padding: 0; float: right; }
#mainMenu li { display: inline; list-style: none; margin: 0; padding: 0; }
#mainMenu li a { float: left; margin: 0 1px; padding: 5px 0.4em; font-size: 1.3em; font-weight: bold; font-family: "trebuchet ms" , serif; text-decoration: none; text-transform: lowercase; color: #FFF; }
#mainMenu li a:hover, #mainMenu li a.here { color: #78b6e4; border-top: 5px solid #000; }
#mainMenu li a.last { margin-right: 0; }

/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/
.sideMenu { background: #aaa; padding: 5px 5px 9px 9px; margin: -5px 0 5px -5px; border: solid 3px #777; float: left; width: 93%; font-size: 1.3em; font-weight: bold; font-family: "trebuchet ms" , serif; color: #000; text-transform: lowercase; }
.sideMenu a { color: #000; text-decoration: none; }
.sideMenu a:hover { color: #000; text-decoration: underline; }
.sideMenu ul { margin: 0 5px 0 0; padding: 0; border: solid 0px #00ff00; }
.sideMenu ul li { display: inline; }
.sideMenu ul li a { display: block; margin: 0.1em 0; width: 90%; padding: 3px 9px 3px 25px; text-decoration: none; color: #FFF; background: url(../images/node.gif) no-repeat 10px 0px; }
.sideMenu ul li a:hover { color: #78b6e4; width: 90%; background: #777 url(../images/node.gif) no-repeat 10px 0px; }
.sideMenu ul li a.here { color: #78b6e4; background: #777; }

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/
#page { float: left; clear: both; width: 100%; background: #fff; padding-bottom: 3em; border: solid 0px #ff0000; }
.tblPanes { padding: 5px; }
/* to set the spacing on edges without screwing up width */

/**************************************************************
   Module, Container and Content Holders
 **************************************************************/
.moduleContainer { position: relative; float: left; border: solid 0px #0000ff; padding: 0; margin-bottom: 6px; width: 100%; }
.moduleHeader { float: left; border: solid 0px #ff0000; width: 100%; }
.moduleHeader .head { float: left; }
.moduleHeader .edit { vertical-align: middle; float: right; padding: 14px 10px; }
.moduleHeader a { color: Red; }

.moduleContainer table { float: left; width: 100%; }
.moduleContainer th { font: 400 1.3em "trebuchet ms" , serif; color: #FFFF66; vertical-align: middle; padding: 4px 4px 4px 4px; background-color: #003052; border: solid 1px silver; text-align: center; }
.moduleContainer th a { color: #FFFF66; padding-right: 16px; padding-left: 16px; }
.moduleContainer th.sortasc a { background: url(/Images/asc.gif) right center no-repeat; }
.moduleContainer th.sortdesc a { background: url(/Images/desc.gif) right center no-repeat; }
.moduleContainer td { padding: 2px 3px 2px 3px; border: solid 1px #aaa; }
.moduleContainer .row:hover { background-color: #ccc; }

/* same as moduleContainer, but for forums to block table defs */
#forumContainer { float: left; width: 100%; border: solid 0px #0000ff; padding: 0 0 10px 0; margin: 5px 0px 5px 0px; }
/* same as moduleContainer, but for reports to block table defs */
.reportContainer { float: left; width: 100%; border: solid 0px #0000ff; padding: 0 0 10px 0; margin: 5px 0px 5px 0px; background-color: white; }

.FAQHolder { padding: 0px 10px 10px 10px; float: left; }
.linksHolder { padding: 0px 10px 10px 10px; float: left; }
.HtmlHolder { padding: 0px 10px 10px 10px; }
.dataHolder { padding: 0px 10px 10px 10px; }
.eventHolder { padding: 0px 10px 10px 10px; float: left; }
.contactHolder { padding: 0px 10px 10px 10px; float: left; }
.announcementHolder { padding: 0px 10px 10px 10px; float: left; }
.editHolder { padding: 0 12px 5px 12px; float: left; width: 97%; }
.editHolder th { border: none 0px; }
.editHolder td { border: none 0px; }

/* for tag cloud rendering */
.tagCloud { text-align: justify; padding: 0px 0px 0px 10px; }
.tagCloud .tags { padding: 8px; margin: 5px 0 3px 0; background-color: #ccc; line-height: 130%; }
.tagCloud .tags a { text-decoration: none; line-height: 1.1; color: #61582C;}
.tagCloud .tags .all { font-size: 24px; }
.tagCloud .tags a:hover { color: #F17400; }
.tagCloud .t1 { font-size: 11px; }
.tagCloud .t2 { font-size: 15px; }
.tagCloud .t3 { font-size: 18px; }
.tagCloud .t4 { font-size: 21px; }
.tagCloud .t5 { font-size: 24px; }
.tagCloud .tIndex { font-size: 14px; white-space:nowrap; display:block;}

/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/
#footer { float: left; width: 100%; clear: both; margin-top: -2.8em; background: #005088 url(/images/bg/footerLight.gif) repeat-x top left; }
/* Sets the width of the footer content */
#footer #front { position: relative; z-index: 3; font-size: 0.85em; padding: 27px 5px 0 5px; color: Gray; }
#footer a { color: Gray; }

/**************************************************************
   Width classes used by the site columns
 **************************************************************/
.width100 { width: 100%; }
.width80 { width: 80.4%; }
.width75 { width: 74.8%; }
.width67 { width: 66.8%; }
.width55 { width: 55.2%; }
.width50 { width: 49.8%; }
.width33 { width: 32.8%; }
.width25 { width: 24.8%; }
.width20 { width: 19.2%; }

/**************************************************************
   Alignment classes
 **************************************************************/
.floatLeft { float: left; }
.floatRight { float: right; }
.floatCenter { float: left; padding-left: 5px; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

/**************************************************************
   Generic display classes
 **************************************************************/
.clear { clear: both; }
.block { display: block; }
.small { font-size: 0.8em; }
.green { color: #478f00; }
.red { color: #900000; }
.orange { color: Orange; }
.grey { color: #666; }
.grey a { color: #999; }
.grey a:hover { color: #EEE; }
.error { color: #EA1B00; font-weight: bold; }
.gradient { background: #eaeaea url(/images/bg/gradientLight.gif) repeat-x bottom left; }
.gradientForums { margin-bottom: 2em; background: #eee; }