/* styles for Saint Ann's Computer Center Website, by Mike Roam, 1999..2004
   revised 20 sep 2004, mjr; revised 7 feb 2003 to include Liz Arum's navigation styles */

body {
	font-family: Palatino, serif; 
	font-size: 1em; 
	background-color: #9CC; /* CCCCFF is nice too */; 
	margin-left: 2em; 
}

.readable_width { 
/* basically a kind of contents div so the reading zone isn't too wide. maybe I should call it "content"? */ 
	width:100%;
	max-width:33em; 
	/* background-color:green; /* for debug */
}

h1, h2, h3 { font-family: Palatino, serif ;}
h1 { color: #000099; font-size: 2.5em ;}
h2 { color: #0000CC; font-size: 2em;}
h3 { color: #0000FF; font-size: 1.5em ;}

p { 
	font-family: times, serif; 
	/* max-width:30em; /* any wider is hard to read: use div for blocks*/
	/* text-indent: 2em;  background: yellow; */
} 

pre { 	/*max-width:30em; /* any wider is hard to read: use div for blocks*/ }

.docdate { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: .85em; 
	text-align: right; 
	border-top: thin solid red;
	clear:both;  /* so that this is full page wide, under ALL floating blocks */
}

.codesample {  background-color:#FFC;  font-family: courier, monospace;  font-size:0.9em;/* font-weight: bold; */ }
.codecomment { background-color:#F9C; font-family: Times, serif; }
.codeoutput { background-color:#F33; font-family: courier, monospace; }
.codebad {  font-family: courier, monospace; font-weight: bold; }
.new { border: solid; border-width:thin; background-color:white; } /* trying to mark revised sections */
.errmsg { 
	font-weight:bold; 
	background: rgb(204,204,255); 
	border: solid; border-width: thin;  
	/* width: 100% ; */
}

.step { font-size: 1.5em; font-weight: bold; } 
/* this is for counting steps in lesson instructions. (Step) _1_:...; (Step) _2_:... etc */
.question { border-top: thin solid blue; } 
/* for (multi-paragraph) AP questions.  */



/* following are for formatting attendance slips */
  .grade_level { text-align:center; font-size:1.5em;  }
  		/* this makes a blank where I can write the date? */ 
  .date_underline { text-decoration:underline; }
  .date_blank  { margin-right:2em; font-size:2em; text-decoration:underline;}
  .time  { font-style: italic; font-weight: bold; }
  
  
/* the following styles let us tell numbered lists how to count.
    Usage: either <ol style="list-style:upper-alpha;"> or
    <ol class="alpha"> if these styles are defined.. */
/* counting styles for numbered lists... */
ol.alpha  { list-style:upper-alpha; }
ol.roman  { list-style:upper-roman; }
ol.num    { list-style:decimal; }


/* the following styles let us have "div"s (paragraph-like things)
      with borders or shading */
div.box { border: solid; border-width: thin; width: 100% ;}

div.color {
	background: rgb(204,204,255);
	padding: 0.5em;
	border: none;
}
              
/* we know that td's can be told not to allow wrapping of their text...but
who knows about col  ?? */
col.nowrap {white-space:nowrap}



/* following are for lists which appear on one line.
(These used to be #horizlist   and chosen by <li id="horizlist"> 
but the drawback with using id is that id's have to be unique on the page, so you're allowed only one
id=horizlist on a page but as many class="horizlist" as you want.)
To use them, say  <ul class="horizlist">  and then <li> or <li class="here"> */
.horizlist { padding: 1px; margin-left: 0; font-family: Verdana, sans-serif; }

.horizlist li { 
	list-style: none; 
	margin: .2em; 
	/* border-bottom: 2px solid green; */
	/* border-top: 1px solid gray; */
	border-left: 0.5em solid #CCC;
	display: inline; 
	line-height: 1.5em;
	padding: 0.1em 0.2em 0.1em 0.3em; 
	/* float:left;  /* IE7 seems to need this, at least for multi-line blocks */
}

.horizlist li a { background: #CDC; }

.horizlist li a:link { color: #333; }
.horizlist li a:visited { color: #669; }
.horizlist li a:active  { color: #69C; }
.horizlist li a:hover { border-color: #FE3; color: #FFF; background: #332; }

.here a:link, .here a:visited, .here a:hover
      {  border: 1px solid #333;  background-color: #F6F; border-left: 0.5em solid #996;
      background-image: url(images/l1_over.gif); color: #333;    }
      
/* following are for lists which appear on one line, older name, in the
future please use "horizlist" instead of "navlist". */
.navlist { padding: 0 1px 1px; margin-left: 0; font-family:  Verdana, sans-serif; }
.navlist li { list-style: none; margin: 0; border-top: 1px solid gray; display: inline; 
padding: 0.1em 0.2em 0.1em 0.3em; border-left: 0.5em solid #CCC /* was #AAB; */  }
.navlist li a { background: #CDC; /* was CCD */ }
.navlist li a:link { color: #333; }
.navlist li a:visited { color: #669; }
.navlist li a:active  { color: #69C; }
.navlist li a:hover { border-color: #FE3; color: #FFF; background: #332; }
      
      

/* the following are for definition lists but don't all seem to work */
	dl { /*background: #FF6;  font-weight: bold ; */ }
	dd { font-weight: bold ;/* background-color: green; */} /* doesn't work in nc4.7 but does in ie5 */
	dl dt {font-weight: normal; /* background-color: red;  */ } /* ditto */
	dt { border-top: thin solid red; }


.navigation-selected {
	background-color:#CCFFFF;
	color:#000000;
/* The following lines are (should be) the same as those in
the "navigation" class below, which feels inefficient but I
have to. The alternatives have been tested and rejected. One
alternative was to make the whole tr be navigation
with just one td marked as selected, but that didn't work because 
the row as a whole acquired the left & right padding, with color 
sticking out funny. Another alternative was marking all the td's 
as navigation and putting a special "selected" span inside just 
one, but the padding of that cell wasn't the right color. Another 
alternative was to have a div for the the whole tr, but div's aren't
allowed inside tr's.

   Now I'm thinking of another alternative: pad, font, and colorize
the whole table once, and then only have to mark one td as special
selected (here we are)...*/
 	font-family:verdana, tahoma, helvetica, arial, sans-serif;
	text-align:center;
	line-height:1em;
	font-size:0.75em;
	font-weight:bold;
	padding-right:1em;
	padding-left:1em;
	text-decoration:none;
}


.navigation {
	background-color:#CCCCFF;
	color:#336699;
	font-family:verdana, tahoma, helvetica, arial, sans-serif;
	text-align:center;
	line-height:1em;
	font-size:0.75em;
	font-weight:bold;
	padding-right:1em;
	padding-left:1em;
	text-decoration:none;
}