body {
    background: #8b7 url({site_url}/chaos/images/chaosBGTexture_8b7.gif) repeat;
    /*background: #dcecd6;*/
    
    color: #333;
    
    font-family: verdana, arial, helvetica, sans-serif;
    /*font-size: small;*/
    /* default font size in most browsers is 16px  - 12px is 75% of that.  Elastic 
    part of the hybrid elastic/liquid layout based on em units - basically a percentage 
    of base font size */
    /* 14px is best size - however, ie will not allow text resizing when px used
    so 88% of 16px is 14px.  standard font size in px for many browsers is 16px */
    font-size: 88%;
    
    /* auto - simply centers the design */
    margin: 0 auto;
    padding: 0;
    
    /* ie 5 & 6 hack to center design - actually using auto margins but since auto 
    margins doesn't work on ie 5 & 6 using text-align - (CSS Mastery ch7 pg 135). */
    text-align: center;
}


body#image {
    background: #111;
    color: #ddd;
    
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 88%;
    
    margin: 0 auto;
    padding: 0;
    
    /* ie 5 & 6 hack to center design - actually using auto margins but since auto 
    margins doesn't work on ie 5 & 6 using text-align - (CSS Mastery ch7 pg 135). */
    text-align: center;
}


img {
    border: none;
}


/* These are the default link styles */

a {
	text-decoration: underline;
	/*color: #666;*/
    color: #8b7;
    
    background: transparent;
}

a:link {
	text-decoration: underline;
	/*color: #666;*/
    color: #8b7;
    
    background: transparent;
}


a:hover {
	text-decoration: underline;
	/*color: #900;*/
    color: #333;
    
	/*background: #FFC; */
}


/*
a:visited {
	text-decoration: underline;
	color: #075;
	background: transparent;
}
*/

/* the wrapper holds the whole thing centrally in the browser window */
#heading {
    /* 996/14 = 71.14... */
    width: 72em;
    max-width: 84%;
    
    background: transparent;
    color: #111;
    
    /* centers the design */
    margin: 0 auto;
    padding: 0px 10px;
    overflow: hidden;
    max-height: 30px;
}


#heading_01 {
    float: left;
    /* hack: IE/Win fix so margins not doubled within floated elements */
    display: inline;
    
    /* size/line-height */
    font: 80%/150% verdana, arial, helvetica, sans-serif;
    color: #111;

    margin: 0;
    padding: 2px 0;

    text-align: left;
    /* same width as logo element */
    /*width: 14%;*/
    width: 20%;
}

/* restore font to 100% of parent size */
#heading_01 a {
    color: #111;
    text-decoration: none;
}

/* all */
#heading_02 {
    float: right;
    /* hack: IE/Win fix so margins not doubled within floated elements */
    display: inline;

    /* remember to account for spacing with margins and NOT padding and border whenever 
    possible do to ie 5.0 mis-calculation of width including border and padding */
    margin: 0;
    padding: 2px 0;
    /* size/line-height */
    font: 80%/150% verdana, arial, helvetica, sans-serif;
    color: #111;
    text-align: right;
    
    /* same width as div#nav_container */
    /*width: 86%;*/
    width: 80%;
}

/* wrapper centers entire content framework in the browser window */
#wrapper {
    clear: both;
    /*border: 1px solid #222;*/
    border: 1px solid #8b7;
    
    /* 996/14 = 71.14... */
    width: 72em;
    /* original width was 752px*/
    /*width: 890px;*/
    max-width: 84%;
    
    /* background: #FFF; */
    background: #111;
    color: #ddd;
    /*background: #fff;
    color: #111;*/
    
    text-align: left;
    
    /* centers the design */
    margin: 0px auto 10px auto;
    padding: 0;
}


/* Ok, this is a bit nasty. Everything else on the sheet is used to control the tab 
menu under the header. See how you go with this, and be sure to back it up before 
you tinker */

#header {
    border-bottom: 1px solid #8b7;
    
    float: left;
    /* hack: IE/Win fix so margins not doubled within floated elements */
    display: inline;
    
    background: transparent;
    
    width: 100%;
    
    margin: 0 0 5px 0;
    padding: 0 5px;
}


#header div#logo {
    float: left;
    /* hack: IE/Win fix so margins not doubled within floated elements */
    display: inline;
    
    width: 14%;
    margin: 0;
    padding: 0 0 5px 0;
}

#header div#banner_container {
    border-top: 0px dashed red;
    border-bottom: 0px dashed red;
    float: right;
    /* hack: IE/Win fix so margins not doubled within floated elements */
    display: inline;
    width: 86%;
    height: 124px;
}

#header div#banner_container img {
    width: 97%;
    height: 100%;
    margin: 0;
    padding: 0 2% 0 1%;
}

ul#nav_main {
    clear: right;
    float: right;
    /* hack: IE/Win fix so margins not doubled within floated elements */
    display: inline;
    width: 86%;
    overflow: hidden;

    /*
    padding: 5px 0 0 0;
    margin: 0 0 0 1em;
    
    /* maintains height of nav menu as text size increases */
    /*
    max-height: 40px;
    overflow: hidden;
    */
}


ul#nav_main li {
    display: inline;
    list-style: none;
}


ul#nav_main li a {
    font: bold 115% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-decoration: none;
    margin-right: 1em;
}


ul#nav_main li a:hover {
    border-bottom: 1px solid #111;
    color: #8b7;
}


ul#nav_main li a img {
    visibility: hidden;
}


ul#nav_main li a:hover img {
    visibility: visible;
}


ul#nav_main li a.current {
    text-decoration: none;
    
    /*cursor: default;*/
}


ul#nav_main li a.current img {
    visibility: visible;
}


/* block makes submenu display vertically */
ul#nav_main li ul.subMenu {
    display: none;
    visibility: hidden;
}

ul#nav_main li ul.subMenu li {
    display: none;
    visibility: hidden;
}

ul#nav_main li ul.subMenu li a {
    font-size: 10px;
}


/* content holds two main columns together */
#content {
    clear: both;
    margin: 10px 0 0 0;
}

#breaking_news {
    border: 1px solid #222;
    float: left;
    
    background: #222;
    color: #eee;
    
    font: 0.92em/120% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: left;
    
    margin: 0 0 0 10px;
    padding: 0;
    
    /* 473px ~ 63% of 752px so 40.32em <~ 63% of 64em - since em based on .92 ...
       72/.92 ~ 78.26em -> 72% of 78.26 ~ 56.34em*/
    width: 56.00em;
    max-width: 72%;
}


#blog {
    float: left;
    
    color: inherit;
    font: 0.92em/150% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    /*line-height: 165%;*/
    text-align: left;
    
    margin-bottom: 10px;
    padding: 0;
    
    /*width: 473px;*/
    /* see about for width calc */
    width: 56.00em;
    max-width: 72%;
}


.tableGallery {
    border-bottom: 1px solid #333;
    margin: 0;
    padding: 0;
}


.tableGallery th, .tableGallery td {
    padding: 0 0 10px 5px;
}


.breadcrumb {
    margin: 15px 0 15px 6px;
    font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
    font-size: 11px;
    background-color: transparent;
}


#sidebar {
    border: 1px solid #222;
    float: right;
    
    color: #333;
    background-color: #222;
    
    font: bold 85% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: left;
    
    margin: 0px 5px 15px 5px;
    padding: 0;
    /* fixes IE/Win double margin bug */
    display: inline;
    
    /* 249px ~ 33% of 752px(orig width of this design) and 33% of 68em ~ 22.40em ...
    now it gets tricky: the em of the sidebar is 75% of the site's base em so ...
    22.40 * 1.33 ~ 29.95em ~ the em width of the sidebar - (75% plus 1/3rd is 1.33%)*/
    /* 64/.85 = 75.29em width here - .25*75.29 ~ 18.82em.  now using 25% sidebar width */
    
    /* 327x ~ 33% of 996px(width of design converted to em) and 33% of 72em ~ 23.76 ..
    now it gets tricky: the em of the sidebar is 75% of the site's base em so ...
    23.76 * 1.33 ~ 31.60 ~ the em width of the sidebar - (75% plus 1/3rd is 1.33%)*/
    /* 72/.85 = 84.70em width here - .25*84.70 ~ 21.18em.  now using 25% sidebar width*/
    width: 21.18em;
    max-width: 25%;
    overflow: hidden;
}

/* colly-logic: As mentioned above, these are the sidebar-specific list styles, based on my ticked-off 
links technique. Note the sidebar-specific links also. They have set widths so you 
can rollover anywhere along the link line.*/
/* my logic: can't you just make them width 100% and control overall width from the 
sidebar wrapper - lets try it. */
#sidebar form {
    text-align: center;
    
    /* cause IE is retarded */
    padding: 3px 0;
    margin: 0;
    
    /*width: 29em;*/
    width: 21.00em;
}

#sidebar ul {
	border: 0 solid #CCC;
    list-style-type: none;
	margin: 0;
	padding: 3px 0px 3px 10px;
	color: #666;
    
    /*width: 29.90em;*/
    width: 21.18em;
}

#sidebar li {
    border-bottom: 1px solid #444;
    /*width: 29em;*/
    width: 21.00em;
}

#sidebar li a {
    font-weight: bold;
    text-decoration: none;
    line-height: 150%;
    display: block;
    /*width: 29em;*/
    width: 21.18em;
}

#sidebar li a.recentPostTitle {
    font-weight: bold;
}

#sidebar li span.recentPostDate {
    font-size: 90%;
    font-weight: bold;
}

#sidebar li a:link {
	color: #8b7;
}

#sidebar li a:visited {
	color: #8b7;
}

#sidebar li a:hover {
	color: #333;
	text-decoration: underline;
}

#sidebar li a:active {
	color: #333;
}

#sidebar ul#nav_categories li ul {
    width: auto;
}

#sidebar ul#nav_categories li ul li {
    width: auto;
}

#sidebar ul#nav_categories li ul li a {
    width: auto;
}

/* right column bottom of sidebar */
div#sidebar ul#sponsors, ul#links {
    border-top: 0px dashed red;
    border-bottom: 0px dashed red;
    /*background-color: #222;*/
    
    margin: 10px 0 30px 10px;
    padding: 0;
    
    width: 90%;
}

div#sidebar ul#sponsors li {
    border: 0px dashed red;
    margin: 2em 0 0 0;
    padding: 0;
}

ul#sponsors li.left {
}


ul#sponsors li.center {
    text-align: center;
}

ul#sponsors li.right {
    text-align: right;
}


div#sidebar ul#sponsors li a img {
    margin: 0px 10px 0px 0px;
    padding: 0;
}

div#sidebar ul#sponsors li#lagunitas a img {
    margin: 0px 30px 0px 0px;
    padding: 0;
}



/* the footer, containing credits, rss links etc */
#footer {
    border-top: 1px dashed #8b7;
    border-bottom: 1px dashed #8b7;

    color: #eee;
    background: #222;
    
    font-size: 75%;
    letter-spacing: 0.09em;
    
    margin: 0;
    padding: 5px 5px 5px 5px;
    
    visibility: hidden;
    display: none;
}


#footer p#hide_footer {
    margin: 0;
    padding: 0;
    
    text-align: center;
}


#view_footer {
    font-size: 75%;
    letter-spacing: 0.09em;
    
    margin: 0;
    text-align: center;
}


/* the main class keeps blog content away from the edges. Could have been done with 
padding in the blog class, but that could cause some woes with older browsers */
.main {
    margin: 0 8px 0 8px;
    border-bottom: 1px solid #333;
}


/* Header definitions. h1 is hidden, and only shows when styles are off. Note, there 
are specific definitions for the sidebar h3 header */
h1 {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-size:  2em;
	font-weight: bold;
	margin: 38px 0 0 20px;
}


h2 {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	letter-spacing: 0.09em;
	font-weight: bold;
    margin-top: 6px;
	margin-bottom: 6px;
}


h3 {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	letter-spacing: 0.09em;
}


h4 {
	margin-bottom: 4px;
	font: 0.90em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
}


h5 {
	margin-bottom: 4px;
	font: 0.92em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	font-weight: bold;
	line-height: 165%;
}


#sidebar h3 {
    /*background: #8b7 url(http://localhost/chaos/ee/images/lb_diags_h3_lft.gif) left;*/
    background-color: #ccc;
    display: block;
    
    color: #336;
    font: bold 0.92em/130% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-decoration: none;
    text-align: left;
    
    margin: 0 auto;
    padding: 0;
    
    /*height: 16px; - em based on font-size of 12px so 16px == 1.25 em*/
    /*width: 29.90em;*/
    width: 18.82em;
    overflow: hidden;
    text-align: center;
}


.center {
	text-align: center;
}


/* Dont ask. Just don't delete this spacer class */
.spacer {
	clear: both;
}


/* For use with the acronym plugin. Creates a question mark, italic text. and underline on acronyms */
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

/* Two paragraph styles. A general one, and one specific to the footer */
p {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}


#footer p {
	margin: 10px 0 5px;
}

#footer p#cr {
	font-size: 90%;
    text-align: right;
    
    margin-bottom: 0;
    padding-bottom: 0;
}






div#footer_links {
    /** height gives us a black bg entire height of div - give effect of wrapping/containing 
    the floated elements - can't float this element due to centering problems */
    height: 35px;
    width: 100%;
    
    color: #333;
    background-color: #111;
    
    margin: 5px auto 0px;
    padding: 0;
}

div#footer_links a#fw {
    border-bottom: 1px solid #666;
    float: left;
    margin-left: 10px;
}

div#footer_links a#ff {
    float: right;
    margin-right: 10px;
}


/* For use with quotes and text you need to present outside of normal format */

blockquote {
	color: #333;
	border-left: 1px solid #CCC;
	margin-left: 5px;
	padding-left: 4px;
	padding-right: 4px;
	font: 0.92em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	line-height: 165%;
}

/* The standard list styles. There are specific sidebar list styles later on */
ul {
	list-style-type: none;
	margin-top: 3px;
	margin-bottom: 2px;
	margin-left: 0;
	padding-left: 0;
}


li {
	border-bottom: 0 solid #CCC;
	padding-bottom: 2px;
	font: 100% verdana, arial, helvetica, sans-serif;
}

/* As it says, control of multi-entry page pagination links */

.paginate {
	margin: 18px 16px 18px 8px;
}


/* date and title are added to earlier h tags for greater control of headers. Posted 
shows all the author, permalink and trackback stuff under each entry */
.date {
	font-size: 0.85em;
    text-decoration: underline;
    /*color: #c60;*/
    color: #666;
}


/*
body#log #blog .main h2, 
body#events #blog .main h2, 
body#more #blog .main h2 {
    margin-top: 3px;
    margin-bottom: 6px;
}
*/


.main h2 {
    margin-top: 3px;
    margin-bottom: 6px;
}


body#log #breaking_news .main {
    border: 0;
    margin-top: 0;
    margin-bottom: 0;
}


/*
body#log #blog .main h2.log_title_with_sub, 
body#more #blog .main h2.log_title_with_sub, 
body#comment #blog .main h2.log_title_with_sub {
    margin-bottom: 0;
    padding-bottom: 0;
}
*/


.main h2.log_title_with_sub { 
    margin-bottom: 0;
    padding-bottom: 0;
}


body#log #blog .main h3, 
body#more #blog .main h3 {
	font-size: 90%;
	font-weight: 500;
    background: transparent;
	color: #ddd;
    
    margin-top: 0;
    padding-top: 0;
}


/*
body#log #blog .main h2 a, 
body#more #blog .main h2 a, 
body#comment #blog .main h2 a {
    font-size: 90%;
	font-weight: 500;
    background: transparent;
	color: #8b7;
    text-decoration: none;
}
*/


.main h2 a, 
h2.gallery_title a {
    font-size: 90%;
	font-weight: 500;
    background: transparent;
	color: #8b7;
    text-decoration: none;
}


#breaking_news .main h2 {
    font-size: 120%;
    background: transparent;
	color: #666;
    text-decoration: none;
}


h2.gallery_title_no_link {
    font-size: 130%;
    background: transparent;
	color: #999;
    text-decoration: none;
}


/*
body#log #blog .main h2 a:hover, 
body#events #blog .main h2 a:hover, 
body#more #blog .main h2 a:hover, 
body#comment #blog .main h2 a:hover {
	color: #333;
}
*/

.main h2 a:hover, 
h2.gallery_title a:hover {
	color: #333;
}


/*
h2.log_title a, h2.log_title_with_sub a {
    font-size: 90%;
	font-weight: 500;
    background: transparent;
	color: #075;
    text-decoration: none;
}


h2.log_title a:hover, h2.log_title_with_sub a:hover {
	color: #333;
    text-decoration: underline;
}

h2.log_title_with_sub {
    margin-bottom: 0;
    padding-bottom: 0;
}


h3.log_sub_title {
	font-size: 90%;
	font-weight: 500;
    background: transparent;
	color: #ddd;
    
    margin-top: 0;
    padding-top: 0;
}
*/


/*
h2.team_title, 
h2.event_title, 
h2.title {
	font-size: 120%;
	background: transparent;
    color: #666;
}
*/

h2.event_title_with_sub {
	font-size: 120%;
	background: transparent;
	/*color: #c60;*/
    color: #666;
    
    margin-bottom: 0;
    padding-bottom: 0;
}


h3.event_sub_title {
	font-size: 90%;
	font-weight: 500;
	background: transparent;
	color: #ddd;
    
    margin-top: 0;
    padding-top: 0;
}


#results #content h2#page_title {
    font-weight: 500;
    color: #666;
    text-align: center;
}


/* each post within blog */
.posted {
    clear: both;
    margin-bottom: 25px;
    font: 0.85em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    color: #666;
    line-height: 165%;
    padding: 3px 0 5px;
}




div.imgContainer {
    float: right;
    text-align: center;
    margin: 0px 10px 5px;
    overflow: hidden;
}

div.imgContainerCenter {
    text-align: center;
    margin: auto;
    overflow: hidden;
}

div.imgContainerAlt {
    float: left;
}

div.imgWidth200 {
    width: 200px;
}

div.imgWidth200 {
    width: 225px;
}

div.imgWidth250 {
    width: 250px;
}

div.imgWidth275 {
    width: 275px;
}

div.imgWidth300 {
    width: 300px;
}

div.imgWidth325 {
    width: 325px;
}

div.imgWidth350 {
    width: 350px;
}

div.caption {
    font-size: 85%;
    text-align: center;
    margin: 2px 5px;
}




/* can likely remove all these imgContainer and Alts */
div.imgContainer200 {
    float: right;
    width: 200px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer225 {
    float: right;
    width: 225px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer250 {
    float: right;
    width: 250px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer275 {
    float: right;
    width: 275px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer300 {
    float: right;
    width: 300px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer320 {
    float: right;
    width: 325px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer350 {
    float: right;
    width: 350px;
    text-align: center;
    margin: 0px 10px 5px;
}


div.imgContainer200Alt {
    float: left;
    width: 200px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer200Alt {
    float: left;
    width: 225px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer250Alt {
    float: left;
    width: 250px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer275Alt {
    float: left;
    width: 275px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer300Alt {
    float: left;
    width: 300px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer325Alt {
    float: left;
    width: 325px;
    text-align: center;
    margin: 0px 10px 5px;
}

div.imgContainer350Alt {
    float: left;
    width: 350px;
    text-align: center;
    margin: 0px 10px 5px;
}



.main p img.post {
    float: right;
    margin: 0px 10px 5px;
}

.main p img.alt {
    float: left;
    margin: 0px 10px 5px;
}


.main p.alt {
    clear: left;
}


span.clr {
    clear: left;
    display: block;
}


.posted_comments {
	clear: both;
	font: 0.85em 'Lucida Grande', Verdana, Arial, Sans-Serif;
	color: #666;
	line-height: 165%;
	padding: 3px 0 3px;
}

/* Comments classes. commbox and coomboxalt are used in the switch conditional on 
the comments page */

.comments {
	font-size: 120%;
	font-weight: bold;
	background: transparent;
	color: #E78818;
}


.commbox {
	background: #EDEAEB;
	border: 1px solid #ddd;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 7px;
}


.commboxalt {
	background: #FAF6F7;
	border: 1px solid #ddd;
	padding-left: 7px;
	padding-right: 7px;
	margin-bottom: 7px;
}

/* Some form styling. Not much though */

checkbox {
    border: 3px double #999;
    padding: 1px;
    color: #333;
    font-size: 0.85em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}


textarea {
    border: 3px double #999;
    padding:1px;
    color: #333;
    font-size: 0.85em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}


input {
    border: 3px double #999;
    padding: 1px;
    color: #333;
    font-size: 0.85em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}


input.submit {
    border: 2px double #999;
    padding: 1px;
    background-color: #FFF;
    color: #333;
    font-size: 0.85em;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}


fieldset {padding:10px;}