/* COIN65 general stylesheet for weekly lecture documents */
/**********************************************
File:        65-styles_lecture.css
Description: Styles for lecture pages

Author:      Virginia Phelps & Ken Seto
Created:     December 2, 2006
Copyright 2006
Last edit:   virginia: 04/03/2007 7:00 pm

***********************************************/

/* 'Directory' of CSS Rules

    =HEADER
    =FOOTER
    =NAVIGATION
    =CONTENT
    =CONTENT =HEADING ELEMENTS
    GLOBAL: =SAMPLE SOURCE & RENDERED CODE
    GLOBAL: =CALLOUTS & QUOTES
    GLOBAL: =LINKS
    GLOBAL: =BLOCK ELEMENTS
    GLOBAL: =TEXT FORMATTING
    GLOBAL: =PAGE LAYOUT & EMBELLISHMENTS
    GLOBAL: =TABLE PROPERTIES
    =TRASHCAN
*/


body
{
  font: 80% verdana, skia, arial, helvetica, sans-serif;
  color: #000;
  background-color: #888888;
  width: 80%;
  min-width: 680px;
  margin: 0 auto;
}


/* ============================================
   =HEADER
   ============================================
*/

#header
{
  display: block;
  padding: 2em 0 1em 0;
  border-bottom: 2px solid #7979B8;
  color: inherit;
  background-color: #EFEFEF;
}

#header h1
{
  margin: 0 0 0.5em;
  display: block;
  text-align: center;
  font: bold 2em "Times New Roman", Times, serif;
  color: #3939bc;
  background-color: inherit;
  font-variant: small-caps;
}

/* Style the page sub-title */
#header h2
{
  display: block;
  text-align: center;
  font: bold 1.8em "Times New Roman", Times, serif;
  color: #3939bc;
  background-color: inherit;
  margin: 0;
}


/* ============================================
   =FOOTER
   ============================================
*/

#footer
{
  border-top: 2px solid #7979B8;
  color: inherit;
  background-color: #EFEFEF;
  padding: 0.5em 0;
}

#footer p
{
  text-align: center;
  font-size: 0.8em;
}


/* ============================================
   =NAVIGATION
   ============================================
*/

/* Navigation at the top and bottom of each lecture page. */
.nextPrevNav
{
  text-align: center;
  font-size: 1em;
  padding: 1.5em 0;
}

.nextPrevNav a:link
{
  text-decoration: none;
  font-style: normal;
  border-bottom: #00F 1px dotted;
  color: #00F;
  background-color: inherit;
}

.nextPrevNav a:visited
{
  text-decoration: none;
  border-bottom: #555 1px dotted;
  color: #555;
  background-color: inherit;
  font-style: normal;
}

.nextPrevNav a:hover
{
  text-decoration: none;
  border-bottom: none;
  color: #121225;
  background-color: inherit;
}

.nextPrevNav a:active
{
  text-decoration: none;
  border-bottom: none;
  color: #121225;
  background-color: inherit;
}


/* ============================================
   =CONTENT
   ============================================
*/

#content
{
  color: inherit;
  background-color: #FFF;
  padding: 3%;
}

#content a[title="Enlarge Image"]
{
 text-decoration: none;
 border-bottom-style: none;
}


/* ============================================
   =CONTENT =HEADING ELEMENTS
   ============================================
*/

/* Use this class to style lecture content headings. */
#content .head
{
  margin: 2em 0;
  padding-top: 0.5em;
  color: #444;
  background-color: inherit;
  border-top: 1px dotted #7979B8;
  clear: both;
}


/* ============================================
   GLOBAL: =SAMPLE SOURCE & RENDERED CODE
   ============================================
*/

/* A light gray box with a border, for highlighting code */
.codeBox
{
  margin: 1em 0%;
  padding: 1em;
  color: #121225;
  background-color: #E7E7F2;
  border: 1px solid  #444;
}

.codeBox code
{
  display: inline;
  white-space: pre;
  font-style: normal;
  font-weight: normal;
}

.codeBox em
{
  color: #00F;
  background-color: inherit;
  font-style: normal;
}

/* Use this for sample code */
code
{
  display: inline;
  white-space: pre;
  font-size: 1.2em;
  font-family: 'courier new', courier, 'lucida console', monospace;
  font-weight: bold;
  color: #222;
  background-color: inherit;
}

/* Use this to add a border around a rendered example */
.rendered
{
  border: #960 1px dotted;
  padding: 0.5em 0;
}


/* ============================================
   GLOBAL: =CALLOUTS & QUOTES
   ============================================
*/

/* Use this for a highlighted paragraph. */
.note
{
  margin: 2em 0;
  padding: 1em;
  width: 60%;
  color: #00F;
  background-color: inherit;
  text-align: justify;
    font-size: 0.9em;
  line-height: 1.5em;
  border: 1px dotted #00F;
}


/* Use this as a general callout feature in conjunction with
   different rules for Gems, Tips, Warnings, IE Issues, Stars. */
.callout
{
  width: 25%;
  float: right;
  padding: 1%;
  margin: 0.5em 0 1em 1.5em;
  border: 1px solid #444;
  line-height: 1.5em;
}


.tip, .gem, .warning, .ieIssue
/* Use this to add formatting to tips, etc. */
{
  padding-left: 5em;  /* makes space for the graphic embellishment */
  font-size: 0.84em;
}

/* Use this to add the image embellishment to a tip */
.tip
{
  background: #f3f3f8 url(images/light-bulb.png) no-repeat 0.5em 0.5em;
  color: inherit;
}

/* automatically add "Tip: " in bold italic to the sidebar */
.tip:before
{
  content: "Tip: ";
  font-style: italic;
  font-weight: bold;
}

/* Use this to add the image embellishment to a star */
.star
{
  padding-left: 5em; 
  font-size: 0.84em;
  background: #f3f3f8 url(images/star.png) no-repeat 0.5em 0.5em;
  color: inherit;
}

/* Use this to add the image embellishment to a warning */
.warning
{
  background: #f3f3f8 url(images/warning.png) no-repeat 0.5em 0.5em;
  color: inherit;
}

/* automatically add "Warning: " in bold italic to the sidebar */
.warning:before
{
  content: "Warning: ";
  font-style: italic;
  font-weight: bold;
}

/* Use this to add the image embellishment to an IE Issue */
.ieIssue
{
  background: #f3f3f8 url(images/IE_issue.png) no-repeat 0.5em 0.5em;
  color: inherit;
}

/* automatically add "IE Issue: " in bold italic to the sidebar */
.ieIssue:before
{
  content: "IE Issue: ";
  font-style: italic;
  font-weight: bold;
}

/* Use to center headings in callout boxes */
.callout h5 {
	text-align: center;
	font-size: 100%;
}

/* Left border offset quote styling. */
.quote1
{
  margin: 2em;
  padding: 0 2.5em;
  border-left: 6px solid #7979B8;
  line-height: 1.5em;
  text-align: justify;
}

/* Quotation marks styling. */
.quote2
{
  margin: 0 1.5em;
  text-align: justify;
  line-height: 1.5em;
  background: url(images/right_quote.gif) bottom right no-repeat;
}

/* A second nested div is required for quotation mark image in background. */
.quote2 div
{
  padding: 3em;
  background: url(images/left_quote.gif) top left no-repeat;
}


/* ============================================
   GLOBAL: =LINKS
   ============================================
*/

a>img
{
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0;
}

a:link
{
  text-decoration: none;
  border-bottom: #960 1px dotted;
  font-size: 1em;
  font-style: italic;
  color: #960;
  background-color: inherit;
}

a:visited
{
  text-decoration: none;
  font-style: italic;
  font-size: 1em;
  border-bottom: #555 1px dotted;
  color: #555;
  background-color: inherit;
}

a:hover
{
  text-decoration: none;
  font-style: italic;
  font-size: 1em;
  border-bottom: none;
  color: #555;
  background-color: inherit;
}

a:active
{
  text-decoration: none;
  font-style: italic;
  font-size: 1em;
  border-bottom: none;
  color: black;
  background-color: inherit;
}

/* The following three classes format links with a little icon to
   the right of the link text. */
a.popup
{
  background: url(images/pop-up.png) no-repeat right center;
  padding-right: 13px;
}

/* ============================================
   GLOBAL: =BLOCK ELEMENTS
   ============================================
*/

.tall li
{
  padding-bottom: 0.5em;
}

dt
{
  font-weight: bold;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: .76em;
  color: #7979B8;
  background-color: inherit;
}

dd
{
  margin-bottom: .76em;
  line-height: 1.5;
  text-align: justify;
}


/* ============================================
   GLOBAL: =TEXT FORMATTING
   ============================================
*/

.term
/* Use .term for emphasizing a term. It will format text as
   bold italic, and make the text blue. */
{
  font-weight: bold;
  font-style: italic;
  color: #00F;
  background-color: inherit;
}



/* ============================================
   GLOBAL: =PAGE LAYOUT & EMBELLISHMENTS
   ============================================
*/

/* center large images on page */
.largeImage {
	text-align: center;
}

/* Indent text. */
.in1
{
  margin-left: 2em;
}

.in2
{
  margin-left: 4em;
}

.floatLeft
{
  float: left;
  margin: 0 12px 1em 0;
}

.floatRight
{
  float: right;
  margin: 0 0 12px 1em;
}

.clearFloats
{
  clear: both;
}


/* An alternative to an HR, a good looking 1px line separation */
.rule
{
  border-bottom: 1px solid #6C69FE;
  margin-top: 0.76em;
  margin-bottom: 0.76em;
  font-size: 0;
}


/* ============================================
   GLOBAL: =TABLE PROPERTIES
   ============================================
*/

tr
{
  vertical-align: top;
}


/* ============================================
   =TRASHCAN
   ============================================
*/

/* ##########
  Is this used at all? If not, remove

#content h2
{
  text-align: center;
  color: #000;
  background-color: inherit;
}*/

/* ##########
Remove .element, .selector, .property, .value, .declaration, .attr;
leave only code selector


.element, .selector, .property, .value, .declaration, .attr
{
  display: inline;
  white-space: pre;
  font-size: 1.2em;
  font-family: 'courier new', courier, 'lucida console', monospace;
  font-weight: bold;
  color: #222;
  background-color: inherit;
}*/

/* ##########
Can we remove any of these callout types?  I think they have all
been used but some only once or twice.  Could something else
be used instead and one variation eliminated? (Gem or Star?) I
have used only .warning and .ieIssue.  Perhaps we should add
this to the Revisions list as a cleanup item - check which CSS
has been used, remove unused rules. -v

.gem
{
  background: #f3f3f8 url(images/gem.png) no-repeat 0.5em 0.5em;
  color: inherit;
}

.gem:before
{
  content: "Gem: ";
  font-style: italic;
  font-weight: bold;
}
*/

/* ##########
Remove a.zoom

a.zoom
{
  background: url(images/zoom-image.png) no-repeat right center;
  padding-right: 13px;
}*/

/* ##########
  Superceded by CITE tag. Remove after all SPAN.bookTitle tags are replaced by CITE tag

.bookTitle
{
  font-style: italic;
}*/

/* ##########
Has 'strong em' been used in lecture pages? If not, remove.
*/
/* ##########
do we need .closeWindow in the lecture style sheet,
or just in the popup style sheet?

.closeWindow
{
  text-align: right;
  padding-right: 2em;
}*/

/* ##########
once .highlight has been removed from codeBoxes, has
it been used elsewhere in the lecture pages?

.highlight
{
  color: #00F;
  background-color: inherit;
}*/

/* ##########
Remove pre if it has not been used in lecture pages
*/
/*pre
{
  font-family: helvetica, arial, sans-serif;
  color: #121225;
  background-color: inherit;
}*/

/* ##########
Remove .pseudoPurpose

.pseudoPurpose
{
  font-style: italic;
}*/

/* ##########
Remove .pseudoHeading

.pseudoHeading
{
  font-weight: bold;
  font-style: italic;
}*/

/* ##########
Remove .c?  Greg may have used it somewhere.
*/
/*.c
{
  text-align: center;
}*/

/* ##########
Remove .in3  Not sure this one was used; two above
were used. Do we need three?

.in3
{
  margin-left: 6em;
}*/


/* ##########
Remove table

table
{
  margin-left: auto;
  margin-right: auto;
}*/

/*a.external
{
  background: url(images/external.png) no-repeat right center;
  padding-right: 13px;
}
*/

/*.callout ul, .callout ol
{
  text-align: left;
}
*/