/* START NAV MENU */
html {
    font-family: arial, helvetica, sans-serif;
    min-width: 920px;
}
body {
    padding: 0;
    margin: 0;
    font-size: 100%;
}

nav {
    height:22px;   /* height of the nav container - needs to work with nav ul li a height below */
    margin: 0;
    padding: 0;
    /*
    border: 1px solid black;
    */
}
 
 
nav ul {
  font-family: Arial, Verdana;
  font-size: 8pt;
  margin: 0;
  padding: 0;
  list-style: none;

}
 
nav ul li {
    display: block;
    position: relative;
    float: left;
    /* borders each item - not what we want
    border: 1px solid black;
    */
}
 
nav li ul { 
  display: none; 
  /*
  border: 1px solid black;
  */
}
 
nav ul li a {
  display: block;
  text-decoration: none;
  padding: 5px 6px 0px 6px;
  background: #ffcc66;
  color: #0000aa;  
  margin-left: 1px;
  white-space: nowrap;
  height:17px;       /* Width and height of top-level nav menu items */
  /* width:90px; */
  text-align:center;
  font-weight: bold;
  text-transform: uppercase;
  /*  
  padding: 0;
  */
  margin: 0;
  /* margin-bottom: 10px; */
  /*
  border: 1px solid black;
  border-left: 1px solid black;
  border-top: 1px solid black;
  border-right: 1px solid black;
  */
 
}

/* visited links are #993399 */
/* banner background is #DAE2F2  */
 
nav ul li a:hover { 
  background: #ffaa00; 
}
 
nav li:hover ul {
    display: block;
    position: absolute;
    border: 1px solid black;
    background-color: white;
    padding: 4px;
    line-height: 8px;
    opacity: 0.8;

  /*
  height:20px;
  */
}

/* covers drop down menus */
nav li:hover li {
  float: none;
  font-size: 8pt;
  line-height: 11px;
  height: 12px;
  /*
  border: 1px solid red;
  */
  padding: 0;
  margin: 0;
}
 
nav li:hover a { 
  /*
  background: #ffaa33; 
  */
  background-color: white; 
  /* this height seems to control the position and height of the secondary  menus */
  /* height:10px; */
  /* Height of lower-level nav items is shorter than main level */
}
/* This is the hover over the drop down menu items */ 
nav li:hover li a:hover { 
    background: #aaaaaa; 
}
 
nav ul li ul li a {
    text-align:left;   /* Top-level items are centered, but nested list items are left-aligned */
    text-transform: none;
    /*
    padding: 0;
    margin: 0;
    */
}

/* main nav menu classes */
.nav-ul-L0 {
}
.nav-li-L0 {
    /*
    border-right: 1px solid black;
    */
    border-left: 1px solid black;
}

/* This is the secondary (drop-down) menus */
.nav-li-L1 {
    margin: 0;
    padding: 0;
    font-size: 8pt;
    line-height: 8px;
}
/*
.nav-ul-L1 {
    border: 1px solid black;
    background-color: white;
    padding: 4px;
    line-height: 8px;
    opacity: 0.8;
}
*/
.nav-a-L1 {
    /*
    border: 1px solid blue;
    background-color: green;
    */
    margin: 0;
    padding: 0;
    line-height: 8px;
    height: 8px;
}
#head-container {
    /*
    padding: 10px;
    margin: 10px;
    */
    height: 46px;
    width: 100%;
    background-color: #DAE2F2;
    /*
    border: 1px solid green;
    */
}
#navbar-container {
    /*
    display: block;
    padding: 10px;
    margin: 10px;
    border: 1px solid green;
    */
    height: 24px;
}
#nav-container {
    /*
    display: inline-block;
    background-color:#ffcc66;
    display: block;
    padding: 10px;
    margin: 10px;
    border: 1px solid green;
    */
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    /* 
    */
    background-color:#ffcc66;
}
#content-container {
    padding: 0px;
    margin: 0px;
    display: inline-block;
    /*
    display: inline-block;
    */
    /*
    Not sure why, but my alignment breaks if I dont have a border set
    border: 1px solid white;
    */
}
#sphere-wrapper {
    width: 380px;
    vertical-align: top;
    display: inline-block;
    /*
    display: none;

    padding: 0;
    margin: 0;
    height: 450px;
    */
}
#content-wrapper {
    width: 536px;
    display: inline-block;
    /*
    padding: 0;
    margin: 0;
    padding: 0 10px 0 10px;
    margin:  0 10px 0 10px;
    */
}
#content-std-wrapper {
    padding: 10px;
    margin: 10px;
}
footer {
    display: block;
    padding: 0 10px 0 10px;
    margin: 0 10px 0 10px;


    font-size: 10pt;
    color: #aaaaaa;
    /*
    border: 1px solid green;
    */
}
#content-mission {
    padding: 10px;
    margin: 10px;
    /*
    display: inline-block;
    */
    /*
    Not sure why, but my alignment breaks if I dont have a border set
    border: 1px solid white;
    */
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    text-align: center;
}
/*
.footer {
    font-size: 10pt;
    color: #aaaaaa;
}
*/
.atmosphere, .cryosphere, .hydrosphere, .biosphere, .lithosphere {
    text-decoration: none;
    font-family: verdana;
}
.cryosphere {
}
.hydrosphere {
}
.biosphere {
}
.lithosphere {
}
.block {
    display: block;
    /*
    border: 1px solid green;
    */
}
.notice {
    font-size: 18pt;
    font-weight: bold;
    color: #a00;
}
.notice a, .notice-small a {
    text-decoration: none;
    color: #600;
}
.notice-small {
    font-size: 12pt;
    font-weight: bold;
    color: #a00;
}
.clear {
    clear: both;
}

/* seminar styles */
.sem-date {
    display: inline-block;
    color: darkslategray;
    width: 8%;
    vertical-align: top;
}
.sem-speaker {
    display: inline-block;
    color: darkblue;
    width: 25%;
    vertical-align: top;
}
.sem-title {
    display: inline-block;
    color: darkolivegreen;
    font-style: italic;
    width: 60%;
    vertical-align: top;
}
.sem-day {
    margin: 0;   
    padding: 0;
}
.menuhr {
    /*
    text-align: center;
    height: 7px;
    */
    height: 1px;
    width: 100%;
    border: none;
    background-color: black;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.smaller {
    font-size: 0.95em;
}