/* Style Sheet
--------------------------------------------
site:    www.joineugene.com
version: 0.10 (date: DEC 2006)
purpose: The common set of rules applied to site.

author:  JSP
company: www.huberspace.net
----------------------------------------- */

/* GENERAL
--------------------- */

body
{
  background-color: #fff;
  color: #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small; /* unless otherwise stated */
  margin: 0;
  padding: 0;
}


form
{
  border: 0;
  padding: 0;
  margin: 0;
  display: inline;
}

a:hover { text-decoration:none }

.caption
{
  font-size: 80%;
  font-weight: bold;
}

.viewall
{
  font-weight:bold;
  font-size: 80%;
  text-align:center;
}

.returnmessage
{
  font-weight:bold;
  text-align:center;
}

body#home #maincontent .alert
{
  text-align:center;
  border:#003D7D solid 1px;
  border-width:1px 3px 3px 1px;
  background-color:#ffb;
  padding:.5em;
  margin:0 0 1em 0;
}

body#home #maincontent .alert h1
{
  text-align:center;
  margin:.5em 0 0 0;
}


body#survey2 .questiononly, body#surveyresults .questiononly { display:none; }

body#surveyresults .shaded { background-color:#eee; }

body#surveyresults .percentbar
{
  background-color:#f00;
  height:1em;
}

body#surveyresults #maincontent ol li
{
  font-size:105%;
  font-weight:bold;
  padding:5px;
  margin:10px;
} 

body#surveyresults #maincontent .question
{
  font-weight:bold;
  margin:.5em 0;
  background-color:#eef;
  padding:2px;
}

body#surveyresults #maincontent .answer
{
  font-size:90%;
  font-weight:normal;
}


body#surveyresults #maincontent .answer th { display:none }
body#surveyresults #maincontent .answer .total { text-align:right; font-weight:bold; }
body#surveyresults #maincontent .answer td { padding:4px; }
body#surveyresults #maincontent .answer td.choice { width:25%; }
body#surveyresults #maincontent .answer td.result { width:65%; }
body#surveyresults #maincontent .answer td.percentage { width:10%; }


body#press form.search
{
  display:block;
  margin-bottom:1em;
  text-align:right;
  background-color:#eee;
  padding:4px;
}

body#press .date { margin:1em 0 }

body#home hr
{
  border-width:0;
  border-bottom:1px solid #336;
  padding:0;
  margin:0;
  clear:both;
  height:1px;
}

body#popup
{
  background-image:none;
  background-color:#fff;
  min-width: 0;
  width:auto;
  max-width: none;
}


body#photogallery .gallerytable .caption,
body#photogallery .phototable .caption
{
  font-size: 80%;
  font-weight: normal;
}

body#album #photo .caption
{
  font-size: 110%;
  font-weight: normal;
}

/* HEAD AND FOOT
--------------------- */

#header
{
  position:relative;
  height:137px;
  background: #fff url('/images/headerbg.gif') repeat-x bottom;
  margin-bottom:2px;
clear:both;
}

#header #eugene
{
  position: absolute;
  left:0; bottom:0;
/* 
   This allows me to use a PNG with alpha channels in IE6.
   Unfortunately the eugene pic with alpha channels is ~40K (GIF version is 14K), so I hope to avoid using it. But it looks really good!!!
   behavior:url("/includes/pngbehavior.htc");
*/
}

* html #header #eugene { bottom:-1px } /* Talk about a KLUDGE! Don't know why IE6 needs this to be -1px */

#header #title
{
  margin-left:200px;
}

#headerinner
{
  height:105px;
  background: url('/images/header-collage.jpg') no-repeat right top;
}

#headbottom
{
  color: #fff;
  font-size:100%;
  height: 29px;
  line-height: 32px;
  text-align: right;

  min-width: 770px;   /* this keeps the center text from becoming unreadable due to line length */
  max-width: 1000px;   /* this keeps the center text from becoming unreadable due to line length */
  width: expression(document.body.clientWidth < 772 ? "770px" : document.body.clientWidth > 1002 ? "1000px" : "auto");
  /* A KLUDGE to make IE6 mimick min and max-width settings */

}

#headbottom form
{
  margin:0 6px;
}

#headbottom form input 
{
  font-size:100%;
  border-width:1px;
  padding:1px;
}

/* IE Hacks \*/
  * html #headmidinner img {margin-bottom:-3px;}
  * html #headbottom {padding-top:3px;}
/* End of IE Hacks */

#footer
{
  min-width: 770px;   /* this keeps the center text from becoming unreadable due to line length */
  max-width: 1000px;   /* this keeps the center text from becoming unreadable due to line length */
  width: expression(document.body.clientWidth < 772 ? "770px" : document.body.clientWidth > 1002 ? "1000px" : "auto");
  /* A KLUDGE to make IE6 mimick min and max-width settings */
  border: 0;
  color: #fff;
  font-size: 80%;
  margin-top: 2px;
  padding: 5px;
  text-align: center;
}

#footer-wrapper {
  background: #336;
}

#footer a { color: #eef; }

#footer .print,
#print-header
{
  display:none;
}



/* MAIN CONTENT AREA
--------------------- */

#middlecolumn
{
  background: #fff;                /* background for #maincontent */
  border-right: 1px solid #fd9a36; /* note this element's effect on {margin-right} below */
  height: 1%;                      /* DO NOT CHANGE */
  margin-right: 201px;             /* total of this element's border PLUS -(#rightsidebar{margin-right}) */
  padding: 0;                      /* DO NOT CHANGE */
}

#maincontent
{
  /* background -- DO NOT apply to this section */
  border: 0;      /* DO NOT CHANGE */
  margin: 0;
  padding: 5px 10px;
/*  font-size: 110%; */
}

/* the hasheader stuff and mainframe2 (rather than maincontent) are to account for some screwy code to make sure section headers are only sometimes h1s */

#mainframe2 h2, #mainframe2 .hasheader h1, #home #maincontent h1
{
  font-weight: bold;
  text-align:left;
  font-size: 140%;
  color:#f93;
  border-width:0;
  padding:0;
}


#mainframe2 h1#sectionheader,
#mainframe2 div#sectionheader
{
  color: #336;
  font-size: 140%;
  font-weight: bolder;
  margin: 1em 0 1.5em 0;
  padding: 0 0 2px 1em;
  text-align: left;
  border-left:10px solid #f93;
  border-bottom:1px solid #336;
}


#mainframe2 h3, #mainframe2 .hasheader h2, #home #maincontent h2
{
  text-align:left;
  font-weight: bold;
  font-size: 120%;
  color:#336;
}

#mainframe2 h4, #mainframe2 .hasheader h3
{
  text-align:left;
  font-weight: bold;
  font-size: 110%;
  color:#000;
}

#mainframe2 h4
{
  text-align:left;
  font-weight: bold;
  font-size: 100%;
  color:#000;
}


#maincontent li
{
  margin: 0 0 5px 0;
}

body#home #maincontent #news h1
{
  font-size: 120%;
  font-weight: normal;
  color:#000;
}

body#home #maincontent h1.mainheadline
{
  font-size: 160%;
  font-weight: normal;
  margin-bottom:0;
}

body#home #maincontent ul#news
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

body#popup { margin:.5em }

body#popup h1
{
  color: #336;
  font-size: 140%;
  font-weight: bolder;
  margin: 1em 0 .5em 0;
  padding: 0 0 2px 1em;
  text-align: left;
}


#rotatingphoto
{
  background: #ccc;
  float: right;
  font-weight: bold;
  margin: 0 0 6px 6px;
  padding: 10px;
  width: 250px;
}

.gallerytable td
{
  padding:10px;
}

form table ul,
form table ul li
{
  list-style:none;
  margin:0;
  padding:0;
}


/* LEFT SIDEBAR
------------------- */

#mainpanel
{
  min-width: 770px;   /* this keeps the center text from becoming unreadable due to line length */
  max-width: 1000px;   /* this keeps the center text from becoming unreadable due to line length */
  width: expression(document.body.clientWidth < 772 ? "770px" : document.body.clientWidth > 1002 ? "1000px" : "auto");
  /* A KLUDGE to make IE6 mimick min and max-width settings */

  background: #336;	/* SEE NOTE 1 */
  border: 0;		/* SEE NOTE 2 */
  margin: 0;		/* DO NOT CHANGE */
  padding: 0;		/* DO NOT CHANGE */
}

#leftsidebar
{
  background: none; /* DO NOT CHANGE */
  border: 0;        /* DO NOT CHANGE */
  display: inline;  /* DO NOT CHANGE */
  float: left;      /* DO NOT CHANGE */
  margin-left: -156px; /* must be the same (negative) value as this element's width */
  padding: 0;       /* DO NOT CHANGE */
  position: relative; /* DO NOT CHANGE */
  width: 156px;     /* width of text area */
}

#leftsidebar #leftevents
{
  background: #336 url('/images/buttonbg.gif') repeat-x left top;
  border-top:#55557F solid 1px;
  border-bottom:#282850 solid 1px;
  padding:10px 8px 0;
  margin-top:1em;
  color:#fff;
}

#leftsidebar #leftevents ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#leftsidebar #leftevents ul li
{
  display: block;
  width: 100%;
  margin-bottom:.5em;
}

#leftsidebar #leftevents h1
{
  color: #ff9f3e;
  font-size: 120%;
  text-align:center;
  margin: 0 0 .5em;
}

#leftsidebar #themebutton
{
  border:0;
  text-align:center;
  margin: 1em 5px;
}

#leftsidebar #leftevents .date
{
  font-weight:bold;
  font-size:80%;
}

#leftsidebar #leftevents a
{
  color: #eef;
  font-size: 100%;
}



/* RIGHT SIDEBAR
--------------------- */

#rightcolumn
{
  background: #fff;   /* background for #rightsidebar */
  border: 0;          /* DO NOT CHANGE */
  margin-left: 156px; /* this value must match #leftsidebar{width} */
  padding: 0;         /* DO NOT CHANGE */
}

#rightsidebar
{
  /* background -- DO NOT apply to this section */
  border: 0;            /* DO NOT CHANGE */
  display: inline;      /* DO NOT CHANGE */
  float: right;         /* DO NOT CHANGE */
  margin-right: -200px; /* must equal -(#rightsidebar{width} + #rightsidebar{ padding-left +padding-right } */
  padding: 0 9px;       /* DO NOT CHANGE... changed!! */
  position: relative;   /* DO NOT CHANGE */
  width: 180px;         /* width of text area */
  font-size: 90%;
}

#rightsidebar h1
{
  color: #ff9f3e;
  font-size: 140%;
  padding: 4px 0;
  text-align: center;
}

#home #rightsidebar h2
{
  color: #000;
  font-size: 120%;
  padding:0;
  text-align: center;
}

#press #rightsidebar ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 100%;
  text-align:center;
}

#press #rightsidebar li
{
  margin: 0 0 1em 0;
}

ul#multimedia_highlights
{
  margin: 0;
  padding: 0;
  list-style-type: none;
}


ul#multimedia_highlights li
{
  margin: 0;
  border-top:1px solid #ccc;
  padding:0 0 1em 0;
  clear:both;
}

ul#multimedia_highlights li img,
ul#multimedia_highlights li object
{
  float:left;
  margin:10px 10px 10px 0;
}

ul#multimedia_highlights li img
{
  border-width:1px;
}

ul#multimedia_highlights li img.mic
{
  border:0;
}

body#multimedia ul#multimedia_highlights li img.mic
{
  margin:10px 77px 10px 77px;
}


ul#multimedia_highlights li.first
{
  margin: 0;
  border: 0;
  padding: 0 0 1em 0 ;
}

ul#multimedia_highlights li ul
{
  margin: 0 0 0 1em;
  padding: 0;
  list-style-type:square;
}

ul#multimedia_highlights li li
{
  margin: 0;
  border:0;
  padding:.5em 0;
}


#multimedia ul#multimedia_highlights ul
{
  margin-left:200px;
}


#multimedia ul#multimedia_highlights ul li
{
  margin-left:1em;
  clear:none;
}



.requires { font-size:90% }

.fileinfo { font-weight:normal }

/* ---------------------------
-- DO NOT CHANGE BELOW HERE --
--------------------------- */

#mainframe1
{
  border: 0;
  display: inline;
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

#mainframe2
{
  border: 0;
  display: inline;
  float: right;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

#globalnav:after,
#middlecolumn:after
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* NOTE 1
this is the only access to the #leftsidebar{background}, this background will 
show through on the main content area and the right sidebar unless changes
are applied to #middlecolumn{background} AND #rightcolumn{background} respectively
--------------------- */

/* NOTE 2
this border surrounds the entire area between the header and footer,
adding border does NOT corrupt the layout of the page and does not require this value (border-width)
to be added to any of the other elements
--------------------- */