/* This is a CSS file, not an HTML file, so it has a very different
syntax.  It even has different comment syntax.  Comments begin with
slash-star and end with star-slash.

Summer 2005  Implemented by Scott D. Anderson

Summer 2006

Expanded to handle background images, vlinks and such. Also a special
"summer" DIV tag to put in notes special for the summer offering of CS110

Modified to have different media types, for printing.  When we display the
web page on a computer, a big font makes sense because of the low
resolution of screens (and also when we are projecting in a classroom
setting), but when it's printed out, a smaller font would save paper and
costs.

The way this works is that certain style specifications are marked as
intended for a particular medium, using the @media marker, a selector
for the kind of medium, and enclosing the changes in braces.

The main changes for the print medium are

* switching to Times New Roman, Times, serif
* reducing the point size to 10 pt,
* eliminating colors, since they usually print as gray,
* making navlists invisible

Winter 2009 Scott 
   modified the font specifications to follow the recommendations in 
   Head First HTML to use "medium" for the body font and then percentages 
   for all the other fonts.  This is just for screen media, not for print 
   media.

Winter 2009 Lyn
   modified the style settings for the now-universal navbar.

Winter 2010 Scott
   added styles for the new verbatim class and TOC element.

*/

/* The following font attributes will apply to the whole document, unless
overridden. */

@media screen {
body {
   font-family: Verdana, Arial, sans-serif;
   font-size:  medium;
   max-width:   850px;  /* Added by Mark 21 Sep 2008 */
   }
}

/* Currently, the pages are printed at 10pt.  I tried printing at 9pt, and
it saved half a page in a 7-page printout, but in that case it didn't save
any actual paper.  Since most of our notes are fewer than 7 pages, I think
10pt is probably as small as we should go.  */

@media print {
body {
   font-family: "Times New Roman", "Times", serif;
   font-size:  10pt
   }

/* #main is used in the top-level pages, to distinguish from the body of
ordinary pages, which is mostly the lecture pages.  Currently only used in
syllabus/syllabus2.html */

body#main {
   font-family: "Times New Roman", "Times", serif;
   font-size:  10pt;
   }
}

/* The following means that all the header tags will share these
properties. */

h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Arial, sans-serif;
    font-weight: bold;
    }

h2 a:link {
   text-decoration: none;
   color: inherit;
   }

h2 a:visited {
   text-decoration: none;
   color: inherit;
   }

/* onscreen, we can use dark green for headers and largish fonts */
@media screen {
h1, h2, h3, h4, h5, h6 {
    color: #006600;
    background-color: white;
  }
h1 { font-size: 150%; }
h2 { font-size: 140%; border-top: 2px solid #006600; background-color: white }
h3 { font-size: 120%; }

/* Since the body font is medium, we never go smaller than than.  On the
other hand, this is moot because we never use these header tags. */

h4 { font-size: medium; }
h5 { font-size: medium; }
h6 { font-size: medium; }

}

/* in print, we use black and smaller fonts */
@media print {
h1, h2, h3, h4, h5, h6 {
    color: black;
    background-color: white;
  }
h1 { font-size: 14pt; }
h2 { font-size: 12pt; border-top: thin solid black; background-color: white }
h3 { font-size: 11pt; }

/* Since the body font in print is 10pt, we never go smaller than than.
On the other hand, this is moot because we never use these header tags. */

h4 { font-size: 10pt; }
h5 { font-size: 10pt; }
h6 { font-size: 10pt; }
}
     
/* No stylesheet for these, because instead we put a stylesheet on the PRE
element within the DIV. */

div.verbatim, div.scriptExample {
}

/* Special class of h2 for the dividing line between expected and "advanced" topics */
  
h2.stop_here { border: 10px double green; }

/* The style for the TOC */

div#insert_TOC_here {
    font-size: small;
    color: gray;
}

/* Our footer is in a div of that name.  Currently, it doesn't need any
style properties, but we have the markup in case we need it. */

div#footer {
}

/* ================================================================ */

/* Modify the LI tag so that there's a little bit of space after each list
item, except when the list is "class=compact." */

ol li, ul li { margin-top: 5pt }

ol.compact li, ul.compact li { margin-top: 0pt }

/* The navbar DIV is used for the green nav bar on left of all the
"toplevel" pages, like index and documentation. The topcontent DIV is used
on those pages as well, for the wide, flexible-width right column. */

/* ================================================================
Stylesheets for "top-level" pages, meaning pages like index and
documentation.  They have a navigation bar (navbar) on the left.  Although
the navbar is designed to have a green background and go the whole page,
in practice it doesn't, so we have the background graphic to provide that
background green on the left. */

@media screen {

/* Main pages have a nav bar on a green background to the left.  The URL
is interpreted relative to this stylesheet, not to the HTML page. The
sidebackground.gif is 1152 px wide: 138 pixels of green and then 1027
pixels of white. */

body#top {
   background-image: url(navigation/navbar-background.png);
   background-repeat: repeat-y;
   }

/* General settings for the navbar */
div#navbar {
   background: #006600;
   left: 0px;
   top: 0px;
   padding-left: 5px;
   position: fixed;   /* was absolute.  Changed by Scott */
   width: 132px;      /* matches the margin-left on #topcontent and the background image on body */
}

/* Settings for primary menu items in the navbar */
div#navbar ul {
   font-size: 14px;
   color:  white;
   list-style-type: none; /* no bullets */
   margin-top: 0em;
   padding: 0em;
}

/* Settings for secondary (sub)menu items in the navbar */

div#navbar ul ul {
   font-size: 10pt;
   margin-top: 0em;
   margin-left: 10px;
   padding: 0em;
}

/* Link settings for navbar menu items */


div#navbar a {
/*        border-color: rgb(82,84,123); /* lower right of book cover = navbar color */
    border-color: #006600;      /* same as bgcolor of navbar, so it's invisible but still takes up space */
    border-width: thin;
    border-style: solid;
    text-decoration:none;
} 

div#navbar a:link {
  color: white; 
}

div#navbar a:visited {
  color: white; 
}

/* Need this to override visited = white in IE on PC */
div#navbar a:visited.selected {
  color: #006600;
}

div#navbar ul a:hover {
        border-color: white; 
        border-width: thin; 
        border-style: solid; 
}

div#navbar ul a.selected {
        background-color: white; 
        color: #006600;
} 

/* I think setting the background color shouldn't be necessary, but
Firefox seems to space out the images vertically, and the background color
isn't the correct color. */

div#navbar img {
   border: 0px;
   background: #FF6600;
   color:  black;
vertical-align: text-top;
  /* margin-left: 15px;*/
  margin-top:  2px;
  margin-left: 2px;
}

/* [lyn, 01/31/09] Adapted div#banner formatting from former file style in documentation.html. */

div#banner {
   margin-top: -20px; /* [lyn, 01/31/09] Just a hack until I understand this better .. */
   padding-top: 1px; 
   background-image: url(banners/cs110Banner.gif); /* Banner image for "Computers & the Internet" */
   background-position: left; 
   background-repeat: no-repeat; 
   /* position: relative; */
}

div#banner h1 {
   font-size: 14pt;
   margin-top: 100px; 
   padding-top: 0px; 
   color: #006600; 
}

/* The topcontent DIV is the main contents of a top-level page, such as
the documentation. */

div#topcontent {
   top: 0px;
   margin-left: 132px;
   padding-left: 10px;
   background: #fff;
}

/* On toplevel pages, links are dark green, and dark red when visited. 
    I removed the specification that the background be white, in case we end up with hyperlinks on a, say, yellow background, as in the syllabus. --Scott 1/15/2008 */

#topcontent a:link { color: #006600; }
#topcontent a:visited { color: #660000; }

/* End of the screen version of this CSS */
}

@media print {
div#navbar {
   display: none;
   background: #0066FF;
   color:  black;
   position: absolute;
   top: 0px;
   width: 0px;
}

div#content {
   position: absolute;
   left: 0px;
   width: 100%;
}

div#navbar img {}
}

/* This is also for exercises, but it clears, indents and draws a red box
 (on screen, but black on paper).  The matching SPAN is for formatting the
 title of the exercise.  */

@media screen {

div.ex {
       border: thin solid red;
       padding-left: 5px;
       padding-right: 5px;
       clear: left;
       margin-top: 0.2in;
       margin-left: 5em;
       margin-right: 5em;
}

span.ex { font-size: 16pt; color: red; background-color: white }
.ex h2 { font-size: 16pt; color: red; background-color: white; border-top-style: none; }
}

@media print {
div.ex {
       border: thin solid black;
       padding-left: 5px;
       padding-right: 5px;
       clear: left;
       margin-top: 0.2in;
       margin-left: 5em;
       margin-right: 5em;
}

span.ex { font-size: 16pt; color: black; background-color: white }
.ex h2 { font-size: 16pt; color: black; background-color: white }
}

/* We use the following for an aside or digression from the main text.  It
looks a lot like an exercise, but with a black outline and gray text.  */

.aside {
       border: thin solid black;
       padding-left: 5px;
       padding-right: 5px;
       clear: left;
       margin-top: 0.2in;
       margin-left: 5em;
       margin-right: 5em;
       color: gray;
}


/* We use the following style for brief messages at the top of lectures
notes indicating what the appropriate reading is for those notes. */

.reading {
    margin: 10pt 10em 10pt 10em;
    font-size: 90%;
}


/* The following is useful when we want to switch back to the "normal"
body text within some other environment. */

.body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12pt;
}

/* This is for meta-comments in the text */

p.note {
      color: maroon;
      background-color: white;
}      

/* Used for inline code examples, such as tag names and such.  In Firefox
   and Safari on the Mac, the fixed-width font seems a little small, so
   I've bumped it up a little to 120%.  No, they seem to have changed the
   default, so I've reduced the font-size to 100%. */

code {
    font-size: 100%; 
    font-weight: bold;
}

/* This is used for longish code examples, putting them in a nice
box. Since the introduction of div.verbatim, this element is almost always
created by the div.verbatim handler */

pre, textarea {
    font-family: "Courier new", monospace;
    font-size: 120%;
    font-weight: bold;
    border-style: double;
    border-width: 3px;
    border-color: gray;
    padding-left: 5px;
    padding-right: 5px;
    clear: left;
}


/* We tried to use this for baseline alignment in tables used for layout
and the ATTACK AT DAWN tables, but it didn't work.  Had to modify the TD
tag. */

tr.b { vertical-align: baseline; }
td.b { vertical-align: baseline; }

/* We use this for courier font in the ASCII table with fixed-width cells. */

td.c {
    font-family: courier, monospace;
    text-align: center;
    vertical-align: baseline;
    width: 3em;
    }

/* When we want left-aligned courier */

td.cl {
    font-family: courier, monospace;
    text-align: left;
    vertical-align: baseline
    }

/* For the navigation links at the bottom of lecture notes */

#navlist {
   padding-top: 20px;
   padding-left: 0px;
   margin-left: 0px;
   border-left: 0px;
   border-top: 1px solid gray;
   width: 100%;
}

#navlist li {
   display: inline;
   list-style-type: none;
   padding-left:   0px;
   padding-right: 20px;
}

@media print {
  #navlist {
     display: none;
     }
}

/* Another version, for the list of icons for copyright, standards
compliance and so forth */

#iconlist {
   padding-left: 0px;
   margin-left: 0px;
   border-left: 0px;
   width: 100%;
/*   padding-top: 20px; */
/*   border-top: 2px solid gray; */
}

#iconlist img {
   border: 0;
}

#iconlist li {
   display: inline;
   list-style-type: none;
   padding-left:   0px;
   padding-right: 10px;
}

@media print {
#iconlist li img {
   display: none;
   }
}

/* ======================================================================
We wrap statements that are just for the summer offering in this DIV.
Then, by changing the display to none, we can make them disappear during
the normal semesters.  */

div.summer {

   margin-left:  50px;
   margin-right: 50px;
   color:  red;
   background-color: white;

   display: none;
}

span.summer {

   color:  red;
   background-color: white;
  
   /*display: none;*/
}

/* Content using the following should be invisible. */

.staff {
       display: none;
       position: absolute;
       top: -500px;
       width: 1px;
       height: 1px;
       overflow: hidden;
       font-size: 1%;
       color: white;
       background: white;
       }

/* Guidelines for CS110 lecture notes:

* Don't put the contents of the lecture in a table.  We used to do that
  when we wanted a margin for students to write in, but we can now
  accomplish that by specifying the style for the BODY tag.

* At the bottom of the document, with the textual navigation bar and the
  dog tags, we use H5 around the navigation bar and ordinary P and BR tags
  for the dog tags.  It's easiest to copy/paste this from another
  document.

* Don't use the HR tag.  Either use H2 (which gets you a line) or H3,
  which doesn't.

* Exercises are wrapped with the <DIV class="ex"></DIV> tags.  That
  produces the indentation, the red box and so forth.  Around the name of
  the exercise, use <SPAN class="ex">Exercise 1:</SPAN> and the like.

* Use the CODE tag for presenting code; we can modify its presentation
  here if we choose.  Use the PRE tag for any extended amount of code, so
  that you can avoid the embedded <BR> tags that make the source even
  harder to read.  Avoid using the TT tag

* Prefer EM and STRONG over I and B, even though they're longer, since it
  makes the intent more clear and allows us to consistently control their
  presentation via this file.  

*/