/* Emacs: This is a cascading style sheet (CSS2). */

/* This stylesheet describes the common elements of almost all of the pages
   in the Web site of the Department of Mathematics and Computer Science at
   Grinnell College (though not of the front-door page).  It is currently
   in draft form.  When completed, it will be available on the Web as

                http://www.cs.grinnell.edu/common-base.css
*/

/* John David Stone
   Department of Computer Science
   Grinnell College
   stone@cs.grinnell.edu

   Henry M. Walker
   Department of Computer Science
   Grinnell College
   walker@cs.grinnell.edu
*/

/* created July 5, 2004
   last revised October 24, 2007
*/

/* Use a light green background for the document. */

body {
  background: #C7E9C7;
  color: black;
  margin: 4%;
  text-align: center;
}

/* Position the logo in the center at the top. */

img#logo {
  border: 1px solid black;
  width: 512px;
  height: 128px;
  margin-bottom: 2%;
}

/* Position the small logo, if it is present, in the upper left-hand
   corner.
*/

div#small-logo-block {
  background: #C7E9C7;
  text-align: center;
  padding: 0;
  border: 0;
}

img#small-logo {
  width: 193px;
  height: 62px;
  border: 1px solid black;
}

/* Position the page title to its right. */

h1#title {
  text-align: center;
}

div.breaker {
  clear: both;
}

/* Allocate about a fourth of the width of the document for the navigation
   block and the sidebar, placing them at the left of the window.
*/

div.side {
  float: left;
  clear: left;
  text-align: left;
  font-size: smaller;
  background: white;
  color: black;
  border: thin solid;
  padding: 1em;
  width: 24%;
  margin-bottom: 4%;
}

/* Allocate most of the rest of the space for the body of the document,
   placing it at the right.
*/

div.body {
  text-align: left;
  background: white;
  color: black;
  border: thin solid;
  padding: 1em;
  width: 64%;
  margin-left: 32%;
  margin-bottom: 4%;
}

/* Float faculty photographs. */

img.faculty-photograph {
  float: left;
  margin: 4%;
  width: 72px;
  height: 108px;
}

/* Insert a photo across the full width of the main text body. */

img.full-width {
  border: 2px solid blue;
  width: 100%;
}

/* Insert a photo at the left of the main text body. */

img.left {
  border: 2px solid blue;
  width: 60%;
  float: left;
  margin-right: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Insert a photo at the right of the main text body. */

img.right {
  border: 2px solid blue;
  width: 60%;
  float: right;
  margin-left: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* Insert a photo in the left column of a two-column format in the main
   text body.
*/

img.gallery-left {
  border: 2px solid blue;
  width: 47%;
  float: left;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-right: 0em;
  margin-left: 0em;
}

/* Insert a photo in the right column of a two-column format in the main
   text body.
*/

img.gallery-right {
  border: 2px solid blue; 
  width: 47%;  
  float: right; 
  margin-top: 1em;
  margin-bottom: 1em;
  margin-right: 0em;
  margin-left: 0em;
}

/* Adjust the space around items in the link farms. */

p.link-farm {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

/* Reduce the font size for notes and cruft. */

p.notes {
  font-size: smaller;
}

/* Adjust the space above and below certain horizontal rules. */

hr.with-margins {
  margin-top: 1.3em;
  margin-bottom: 1.3em;
}

/* For outlines, use different classes of ordered lists to control the form
   of the item labels. */

ol.capital-letters {
  list-style: upper-alpha;
}

ol.arabic-numerals {
  list-style: decimal;
}

ol.roman-numerals {
  list-style: upper-roman;
}

/* Use almost the full width of the screen for some particularly demanding
   items (such as the table containing the lab schedule). */

div.full-width {
    clear: both;
    text-align: left;
    background: white;
    color: black;
    border: thin solid;
    padding: 1em;
    width: 100%;
    margin-bottom: 4%;
}

/* Use almost the full width of the screen, as above, but leave a right
   margin. */

div.centered-full-width {
    clear: both;
    text-align: left;
    background: white;
    color: black;
    border: thin solid;
    padding: 1em;
    width: 96%;
    margin-bottom: 4%;
}

/* Set the footer at the end, centered, without an enclosing box. */

div.footer {
  font-size: smaller;
}

@media aural {

  /* Suppress the URL information, which should already be available in
     the user's browser.
  */

  div#url-block {
  }
}

@media screen {

  /* Extra page navigation is not needed on screen. */

  div.page-navigation {
    display: none;
  }

  /* Suppress the URL information, which should already be available in
     the user's browser.
  */

  div#url-block {
    display: none;
  }
}

@media print {

  /* Navigation information makes no sense in hard copy. */

  div.page-navigation {
    display: none;
  }

  div#navigation-block {
    display: none;
  }
}