/**************************************************************
   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%; text-align: left; }
#content,#width { /* max-width hack for IE since it doesn't understand the valid css property */ width: expression(document.body.clientWidth > 1000 ? "1000px" : "94%"); max-width: 1000px; margin: 0 auto; }
#content[id],
#width[id] { width: 94%; height: auto; }
/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/
#header { position: relative; background-image: url(../images/bg/header.gif); height: 288px; width: 1000px; margin: auto;}
#header-wrapper { background: url(../images/bg/header_bg.gif) repeat-x; height: 288px; width: 100%; text-align:center;}
/* Holds the site title and subtitle */
#header #title { position: absolute; z-index: 3; top: 0px; left: 120px; padding: 5px; text-align: right; font-size: 10px; font-weight: normal; }
#header h1 { margin: 0; padding: 0; font: 700 4em "trebuchet ms", serif; letter-spacing: -3px; text-transform: lowercase; color: #fff; }
#header h2 { position: absolute; top: 10px; right: 5px; margin: 0; padding: 0; font: 700 1em "trebuchet ms", serif; text-transform: lowercase; color: #00F0EC; }
/* Sets where the header images will go */
#header img.left { position: absolute; z-index: 1; top: 0; left: 0; }
#header img.right { position: absolute; z-index: 0; top: 0; right: 0; }
#header img.balloons { position: absolute; z-index: 2; top: 70px; right: 400px; }
/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/
#mainMenu { float: left; width: 100%; clear: both; text-align: right !important; height: 45px;}
#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 2px; padding: 5px 0.5em; font: 400 1.6em "trebuchet ms", serif; text-decoration: none; text-transform: lowercase; color: #FFF; }
#mainMenu li a:hover,
#mainMenu li a.here { color: #65EBFF; border-top: 5px solid #000; }
#mainMenu li a.last { margin-right: 0; }
#mainMenu li  .active { float: left; margin: 0 2px; padding: 5px 0.5em;  font: 400 1.6em "trebuchet ms", serif; color: #65EBFF;  text-decoration: none; text-transform: lowercase;}
#mainMenu li p { -x-system-font:none;color:#65EBFF;border-top: 5px solid #000;float:left;font-family:"trebuchet ms",serif;font-size:1.6em;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;line-height:normal;margin:0 2px;padding:5px 0.5em;text-decoration:none;text-transform:lowercase;}
/**************************************************************
   #page: Holds the main page content.
 **************************************************************/
#page { float: left; width: 100%; clear: both; padding-bottom: 4em; }
/**************************************************************
   #footer: The page footer - will stick to the bottom if not
            enough content.
 **************************************************************/
#footer { float: left; width: 100%; clear: both; margin-top: -3.8em; background: #000 url(../images/bg/footer.jpg) repeat-x top left; }
/* Sets the width of the footer content */
#footer #width { position: relative; z-index: 3; font-size: 0.85em; padding-top: 27px; }
/**************************************************************
   Width classes used by the site columns
 **************************************************************/
.width100 { width: 100%; }
.width75 { width: 74%; }
.width50 { width: 49.7%; }
.width33 { width: 32.7%; }
.width25 { width: 24.7%; }
/**************************************************************
   Alignment classes
 **************************************************************/
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }
/**************************************************************
   Generic display classes
 **************************************************************/
.clear { clear: both; }
.block { display: block; }
.small { font-size: 0.8em; }
.green { color: #A1FF45; }
.red { color: #EA1B00; }
.grey { color: #666; }
.grey a { color: #999; }
.grey a:hover { color: #EEE; }
.gradient { margin-bottom: 2em; background: #555 url(../images/bg/gradient.jpg) repeat-x bottom left; }
/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/
div.mod_navigation ul  { margin: 0; padding: 0; }
div.mod_navigation ul  li { margin: 0; padding: 0; display: inline;  font-size: 14px; font-family: "trebuchet ms", serif; }
div.mod_navigation ul  li a { display: block;  text-decoration: none; color: #FFF; } 
div.mod_navigation ul  li a:hover { color: #65EBFF; background: #5F5F5F; }
div.mod_navigation ul  li  ul { margin:0px; padding: 0; display: inline;  font-size: 13px; font-family: "trebuchet ms", serif; }
div.mod_navigation ul  li  ul  li a{ padding-left: 20px; }
div.mod_navigation  .active { color: #65EBFF; background: #5F5F5F;}
div.mod_navigation ul  li p { margin: 0px;padding:0px;}
div.mod_navigation ul  li  ul  li  p { margin: 0px;padding:0px; padding-left: 20px;}
/**************************************************************
 typolight
 **************************************************************/
.image_container { padding-left: 10px; padding-right: 10px;}
/* tl_news */ 
.layout_simple {  padding: 2px; padding-bottom:10px; border-bottom:1px dashed #444444; font-family:"trebuchet ms",serif; font-size: 14px;}
.layout_simple_date { font-size: 11px;}
.mod_newslist  .first  { border-top:1px dashed #444444; }
.mod_newsmenu ul { list-style: none;}
.mod_newsmenu ul li { list-style: none;}
.mod_newsmenu ul li ul li a:hover {  color: #65EBFF; background: #5F5F5F;}
.mod_newsmenu ul li ul li a { display:block;width: 95%;font-family:"trebuchet ms",serif; color: white; text-decoration:none; display:block;width: 95%; font-size:14px; margin:0; padding:0; }
.layout_short { border-bottom:1px dashed #444444;}
.layout_short  .info  , .layout_full .info { font-size:11px; font-style: italic; margin: 0px; padding-bottom: 0px;  padding-top:0px;}
.mod_newsmenu ul li { margin:0;padding:0 0 0 10px;} 
.mod_newsmenu ul li ul li p {  background:#5F5F5F none repeat scroll 0 0;color:#65EBFF; margin:0;padding: 0px;}
.mod_newsmenu ul li ul li {margin:0;padding:0 0 0 20px;}
.ce_comments  { }
.ce_text, .comment_default, .widget, .ce_gallery {padding-left: 15px; padding-right: 20px;}
.ce_text p {padding: 0px; padding-bottom:5px; }
.ce_text {clear: both;}
.comment_default { padding-bottom: 5px; margin-bottom:10px;}
.comment_default .info { font-size:16px; font-family:"trebuchet ms",serif; background-color:#5F5F5F; border-bottom:3px solid #444444;}

.form {padding-left: 10px;}
.form  .formbody  .widget input, .form  .formbody  .widget label  {float: left; padding: 3px;}
.form  .formbody  .widget {clear: both; padding: 5px;}
.form  .formbody  .widget .error { background-color:#5F0606; color:white; width: 50%; padding: 3px;}
.form  .formbody  .widget  .captcha_text {padding: 3px;}
.submit_container {padding-left: 5px;}

.ce_gallery tr td {vertical-align: top; padding: 10px;}
.image_container { margin-bottom:10px;}
.image_container .caption { font-style:italic; color: silver; font-size:10px;  text-align:center;}
h1, h2, h3, h4, h5 ,h6 {clear: both;}
.ce_dfGallery , .ce_hyperlink{ padding-left: 15px;}
.last_update {font-style:italic; color: #AFAFAF; font-size:10px; text-align:right; clear: both;}

#btnToggle { padding: 3px;  cursor: pointer; margin-bottom: 5px;color:#8BE6FA; font-size: 14px;
	}

.invisible { display: none; }