/* styles for Saint Ann's Computer Center Website */
body {
	font-family: Helvetica, sans-serif; font-size: 1em; 
	background-color:#6699ff;
	/* too green:#66cccc;  too dark:#6699cc; too bright; #99ccff; */ 
	margin: 0 5%; 
}
	
.deptname {   /* special H1 for the widespaced letters of the department name */
	letter-spacing: 0.25em;
	text-align:left; 
	background-color: transparent;
	color:white;
	margin: 0;
	font-weight:bold ;
	font-size: 1.1em ; 
	font-family: Arial,Helvetica,Verdana,sans-serif; 
}

.offerings {   /* special H1 for the widespaced letters of the "current course offerings"
which are not quite as big as deptname, above */
	letter-spacing: 0.15em;
	text-align:left; 
	background-color: transparent;
	color:white;
	margin: 0;
	font-weight:bold ;
	font-size: 1.05em ; 
	font-family: Arial,Helvetica,Verdana,sans-serif; 
}

/* note "#" is for (unique) ID's, while "." is for classes */
#mainpage { 
	margin:0.5em 3%; /* top & bottom = 2.5em, right & left = 3% */
	padding: 0.5em 3%; 
	/* border: thin solid black;*/
	border-top:  solid #ff3300;
	/* width: 95%;  */
}
#deptnamepiccourses { float:left; /*border: thin solid black; */ }
#picture { /* float:left; margin: 0.5em;*/ /*border: thin solid black;*/ }
#links     {  text-align: right; float:right; }
header { /* was navigation aka nav_with_history */
	text-align:left; font-family:Arial,Helvetica,Verdana,sans-serif; 
	/*border-bottom:  thin  solid black; */
	font-size:0.75em;
}
.nav_with_history  /* .navigation*/ { text-align:left; font-family:Arial,Helvetica,Verdana,sans-serif; 
	/*border-bottom:  thin  solid black; */font-size:0.75em;
}
footer { /* for html5, was "nav_simple" aka stanns_nav */
	font-family:Arial,Helvetica,Verdana,sans-serif; text-align:center; 
	font-size:0.8em; color:white;
	margin: 0.5em 5% 0 ; /* top=2.5em, right&left=5%, bottom=0,  */
	padding:0.5em 5% 0;
	border-top:  solid #ff3300;
	width: 70%; 
	clear: both; /* kludge? */
	/* position:fixed; bottom:0; Bad on iphone */
	background-color: transparent;
}
.nav_simple  /* .stanns_nav */ { 
	font-family:Arial,Helvetica,Verdana,sans-serif; text-align:center; 
	font-size:0.8em; color:white;
	margin: 0.5em 5% 0 ; /* top=2.5em, right&left=5%, bottom=0,  */
	padding:0.5em 5% 0;
	border-top:  solid #ff3300;
	width: 70%; 
	clear: both; /* kludge? */
	/* position:fixed; bottom:0; Bad on iphone */
	background-color: transparent;
}


hr { /* unused, unreliable? */
	/*width: 75%; */ color: #ff3300;  border-color:#ff3300; 
	text-align:center; margin: 0 0 2em 0; padding: 0 ;
} 

h2, h3 { /*font-family: impact, sans-serif ;*/ }
h2 { color: #0000CC; font-size: 1em;}
h3 { color: #0000FF; font-size: 1em ;}
p { font-family: times, serif; } /* text-indent: 2em;  background: yellow; */

p.docdate { font-family: Arial, Helvetica, sans-serif; font-size: .85em; text-align: right; border-top: thin solid red }
/* 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;
              }




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

.mylist 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;*/  }

.mylist li a { background: transparent; /* #CDC; *//* was CCD */
/* padding: 0.1em 0.2em 0.1em 0.3em; border-left: 0.5em solid #AAB; */
        /* text-decoration: none; */ }
.mylist li a:link { color: #333; }
.mylist li a:visited { color: #669; }
.mylist li a:active  { color: #69C; }
.mylist 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;    }