/* 
fixed_blue_tabs.css

This document contains the style sheet information
for the uota.org website. based on the blue outline style
for the same site, but updated to look more subdued and professional.

Thanks to http://nontroppo.org/test/tabinvert1.html for how to fix the
drop down tabs, and the idea to keep _them_ fixed rather than scrolling 
the content area to achieve a frames like affect.

Thanks to http://www.mandarindesign.com/ for the opacity tutorials.

Container top and bottom margins, borders, etc are done in pixels 
cuz I can't say top: 1em + 32px; Everything else is done in em's, like 
it should be.

++ remember, shortcut notation is top, right, bottom, left ++

Written by Mary Wior  
*/

body {
  margin: 0; padding: 0;  
  background-color: #FFF; color: #000; 
  border: 5px solid #009;  }
.printonly {display: none; }

.highlight { color: #00C; background-color: #FC3; 
  text-align: center; }

h1, h2, h3, h4 { color: #009; text-align: center; }
b, strong { color: #009; }

a { 
  color: #039; text-decoration: none; 
  border-bottom: 1px dotted #FC3;}
a:hover { background-color: #FC6;  }

.header { 
  /* positioning */
  position: fixed; top: 0; left: 0; z-index: 5;
  height: 100px; width: 99%;
  /* boxes */
  padding: 5px 0 5px 0; margin: 0; 
  border: 5px solid #009; /* overlap body border for seemlessness */
  /* inside */
  text-align: center; vertical-align: middle;  
  background-color: #FFF; color: #009;
  }

.header img { border: none; }
.header #logo { float: left; }
.header #dl_ca { float: right; }
.header p { margin: 0; padding: 0; }
.header h1 { margin-bottom: 0; padding-bottom: 0; }
.header a { text-decoration: none; border: none; }
.header a:hover { text-decoration: none; border: none; }

.nav { /* .nav should always be a list */
  /* positioning */
  position: fixed; left: 0; z-index: 10; width: 100%; 
  top: 120px; 
     /* top offset needs to cover margins, padding, and borders for:
        body, header. */ 
  /* boxes */
  margin: 0; padding: 0; 
  border-bottom: 5px solid #FC3; 
  white-space: nowrap;
  /* insides */
  text-align: center; font-size: 120%; line-height: 130%;  
  background-color: #09C; color: #FC3; 
 }
.nav li { 
  display: inline;  overflow: hidden; 
  margin: 0; border: 0; padding: 0 .5em 0 .5em; 
  list-style-type: none; }
.nav a { 
  /* boxes */
  margin: 0; padding: 0;
  /* insides */
  text-decoration: none; color: #FC3; 
  border: none; }
.nav a:hover { 
  background-color: #FC3; color: #009; 
  border-bottom: .3em solid #FC3;}

/* set the current page's tab */
#what #tab_what, #events #tab_what, #past #tab_what, #support #tab_what, 
#who #tab_who, 
#news #tab_news, 
#links #tab_links, 
#donate #tab_donate, 
#contact #tab_contact 
  { background-color: #009; color: #FC3; border-top: .3em solid #009; }

.pagenav {
  padding: 0; margin: 0; 
  line-height: 200%;
  background-color: #FFFFFF; 
  text-align: center;  
  }
.pagenav li { display: inline; list-style-type: none; }
.pagenav a { 
  padding: .2em;
  text-decoration: none; 
  background-color: #09C; color: #FC3;
  border: .2em outset #3CF; }
.pagenav a:hover { 
  background-color: #FC3; color: #009; 
  border: .2em inset #C90; }
/* make the current page's button darker*/
#what #tab_mission a, #events #tab_event a, #past #tab_past a, #support #tab_support a
  { background-color: #009; color: #FC3; border: .2em outset #33C; }


.content { 
  /* position */
  height: auto; z-index: 0; 
  /* boxes - offset includes nav offset + height + some space; */
  margin: 0 0 0 0; /* for IE only, others below */
  padding: 0 1em 0 1em;  
  /* insides */
  text-align: justify; font-family: Arial, Helvetica, sans-serif; 
}
/* for non-IE browsers */
body > .content { margin: 150px 0 0 0; }

.donate { text-align: center; margin-bottom: 1em; font-weight: bold; }


.sticky  { 
  /* turned off for now */
  display: none;
  /* position */
  position: absolute; top: 150px; z-index: 3; 
  /* boxes */
  width: 15em; height: 7em; overflow: hidden;
  border: .1em solid #3CF;  
  border-top: .3em solid #009; 
  /* insides */
  background: #C0C6FF; text-align: left;
  font-family: comic sans, serif; 
  /* opacity for the different browsers */
  opacity:.70; filter: alpha(opacity=70); -moz-opacity: 0.7;
  }
body > .sticky { position: fixed; }
.sticky img {float: left; }
.sticky a img { border: none; }

#yr2007 #yr2006 #yr2005 #yr2004 { clear: both; width: 100%;  }
#year_nav { clear: both; margin: auto; width: 100%; }
#year_nav div { 
  /* position */
  float: left; width: 30%;
  /* boxes */
  border: .1em outset #3CF;
  margin: .5em;
  /* insides */
  text-align: left;
  background-color: #C0C6FF;  
  } 

/* individual page stuff */

#links { text-align: center; }
#links a { text-decoration: none; }

.fineprint h3 { margin-bottom: 0; }
.fineprint ul { display: inline; margin: 0; } 
.fineprint li { display: inline; border-left: 2px solid #ffcc33; padding-left: .8em; margin-left: .5em; font-size: small; }
.fineprint li.first { border-left: 0px; padding-left: 0; margin-left: 0; }
.event_time { margin: 1em; text-align: center; color: #000099; }
p.event_time + p { clear: both; }


#sgroup ul { list-style: none; text-align: center; }
#what h3 { font-style: italic; text-align: left; }