/* Couple of general notes:

padding vs. margin: Both control the amount of space around an object. Padding
   is the amount of space inside the "border" (even if the border is invisible), 
   and margin is the amount of space outside the "border". For example, the
   background color of an object is applied to the padded area, but it is not
   applied the margin.

id vs class: You can label your html elements with "id" or "class", which allows
   you to select specific things with your css code. If the element is unique, 
   for example the title on your page, then it gets an id. If the element is not unique,
   for example a photo (of which there may be many on a page), then it gets a class.
*/


/* Anything in here will be applied to the entire page. */
body {
	background-color: Gainsboro /*#c00*/; /*Maybe make this white?*/
  

  /*font-family is the face*/
  font-family: verdana;

  /*Modifies spacing inbetween lines*/
  line-height: 1.4;

  /*Fix for broken Netscape 4 and IE 4*/
  text-align: left;
}

/* The '#' says to only apply these settings to this id. In the html file there is <div id="wrapper">...</div> 

   The wrapper goes around everything, it allows you to have a background which is 
     blue with the foreground white. 
*/
#wrapper {
 margin-left: auto;
 margin-right: auto;
 margin-top: 10px;
 margin=bottom: 10px;
 /*background-color: #c00;*/

 /*Fixed width webpage*/
 width: 1100px;

 /*Fix for broken Netscape 4 and IE 4, part II*/
 text-align: left;
 border:4px solid #c00;
}

/*h2#title means the following will only be applied to any h2 with the id title
  This is where your name is.
*/
h2#title {
 */color:#c00;
 /*background-color:white;*/
/*background-color:Gainsboro;*/
 text-align: center;
 padding: 0;
 margin-top: 10px;
 margin-bottom: 10px;
}

/* p stands for paragraph. In general all text on a page should be in something - if nothing else contains it you
   put it inside a paragraph. */
p {
  margin-top: 0em;
  margin-bottom: 2em;
}

/* a stands for anchor, these are the links. a:visited is a visited link, a:hover is when your mouse is over a link.
   The commas means apply all these settings to each of these. */
a, a:visited, a:hover {
  color: #800;
}

div.indent {
  padding: 1px 1em;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;

  
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin=bottom: 10px;

  width: 1100px;
}

div#content {
  padding: 1px 1em;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;

  
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin=bottom: 10px;

  width: 1100px;


  /*If the height is < 15em, expand the object*/
  min-height: 15em;
}



img.photo {
  display: block;
  float: right;
  margin: 1em 0em 1em 1em;
  border:1px solid #021a40;
}

table.schedule {
  border: solid black 2px;
  border-collapse: collapse;
  box-shadow: 3px 3px 3px #777;
  margin-bottom: 1em;
}

table.schedule td, table.schedule th {
  border: solid black 1px;
  padding: 0.1em 0.4em;
}

table.schedule th {
  border-bottom: double black 3px;
}

table.schedule td:first-child {
  white-space: nowrap;
}

/* Nav is the top navigation links */


#nav {
 margin-bottom:10px;
 padding: 0px;
 /* #nav is a ul - an unordered list. Usually these have bullets. But we are using it just to group our links
    together, so list-style:none removes the bullets. */
 list-style:none;
 text-align:center;
 width: 100%;

 /* Make the object behave like a table. In particular, it will expand/contract the 'cells' so that they fit nicely
    around the object inside of them. This makes the 'Home' link cell smaller than the 'Talks and Conferences' link cell. */
 display: table;

 background: white;
}

#nav li {
 /* Makes the cells act like they are in a table, see the above comment */
 display: table-cell;

 border-top-width: 2px;
 border-bottom-width: 2px;
 border-left-width: 1px;
 border-right-width: 1px;
 border-style: solid;
 border-color: #c00;
 padding: 1px;
}



/*Changes the style of the links in the navigation at the top*/
#nav a, #nav a:link, #nav a:visited {
 /*Links come by default with an underline. This looks ugly, so remove it.*/
 text-decoration: none;

 color:#FFF;

 /* the options here are inline or block, as well as some others. inline has automatic spacing that you
    can't remove which is used to make normal text look nice. To get fine control over the spacing, you 
    use block style. */
 display:block;

 background:#c00;
 padding:1px;
}

#nav a:hover {
 color:#0A2A0A;
 background:#FFF;
}

button {
     background:none!important;
     border:none; 
     padding:0!important;
     font: inherit;
     /*border is optional*/
     border-bottom:1px solid #444; 
     cursor: pointer;
}

li{
  margin: 10px 0;
}

tr:nth-of-type(odd) {
      background-color:#ccc;
    }