/* This is the body of all the pages except the home/index page for each course */
body {
background-color: white;
font: medium Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/hinge.jpg);
/*background-image: url(images/holiday/snowborder2.gif);*/
background-repeat : repeat-y;
margin: 30px 20px 0 60px;
}


/* The home/index page of each course has body class="index" */
body.index {
background-color : white ;
background-image : url(images/steel3.gif);
/*background-image : url(images/holiday/treebackground.jpg);*/
background-repeat : repeat;
}

/* This is used as a divider line, at the top and bottom of each page, to separate sections
 on the home/index page, and also to clear floats. The clear: both should stay, or some 
 pages will wrap text around images that are float:left */
div.line
{
width: 100%; /*800px;*/
margin: 6px 0 6px 0;
clear: both; 

height: 10px;
background: url(images/thinblue.gif) repeat-x;
/*
height: 20px;
background: url(images/holiday/hollyline.gif) repeat-x;
*/
}
/* I use this clear floats without the actual line */
div.clear
{ width: 100%; clear: both; }

/* These divs are used on the home/index page for each course to set up the 
 Javascript code that shows just one section at a time */
div.index 
{
font-weight: bold; 
display:block; 
clear:both; 
padding: 4px 0px 4px 0px;
}
div.section{clear: both;  }

/* sidebar is being replaced with sidetitle, sideinfo, sidecontent */
div.sidebar{float: left; width: 70px;
padding-right: 10px;}

div.sidetitle{float: left; width: 70px; height: 70px;
background: url(images/ECCcirclelogo.gif) no-repeat;
padding-right: 10px;}
div.sideinfo{float: left; width: 70px; height: 70px;
background: url(images/contents.gif) no-repeat;
padding-right: 10px;}
div.sidecontent{float: left; width: 70px; height: 70px;
background: url(images/refer.gif) no-repeat;
padding-right: 10px;}

div.content{
float: left;
margin: 0 0 12px 0;
width: 500px;
}


/* These are used on some pages for displaying code segments, but I also use 
the <pre> tag extensively */
p.code{font-family: monospace; color:#000080;}
.comment{color: #008000; font-style:italic;}


/* These are used for the student "question and answer" pages that I started 
adding to the online courses in Fall 2009 */
div.question{font-weight: bold;}
div.answer{padding-left: 20px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}

/* span class="highlight" gives a yellow background, usually to sections of 
computer code that are being discussed in the text. */
.highlight{background-color: #FFFF66;}
/* span class="date" is used to display due dates after assignments */
.date{color: #990000; font-style: italic; font-size: 70%;}

p.outline {font-size:80%; color: #333333;}

/* By default, all the images are floated left with text wrapping around the right side. 
div class="line" is used to clear the float if needed. */
img, object {
float: left;
padding: 4px 4px 4px 4px;
border: 0;
}
img.right {float: right;}


/* Heading tags throughout... */
h1 {color: #990000; font-size: 120%; font-weight: bold;}
h2 {color: #009900; font-size: 110%; font-weight: bold;}
h3{color: #000000; font-size: 100%; font-weight: bold;}
h4{color: #000000; font-size: 100%; font-weight: bold; text-align:center;}
/* Used on index pages, just above paragraphs to remove top paragraph margin */
h5{color: #000000; font-size: 80%; font-weight: bold; margin-bottom: -1em; padding-bottom: 1px;}

/* A few presentation tables use this to distinguish heading rows */
td.heading{background-color:#00AACC;}

/* When <b> is not enough.... */
strong{color: #cc0000; font-weight:bold}

/* Definition list settings */
dt{font-size: 100%; font-weight: bold}
dd{font-size:80%}

/* Unordered list settings with an image for the bullet */
ul { list-style-image: url(images/g_blue.gif);}
li { margin: 0 0 1em 0;}



/* Set the color and look of hyperlinks */
a:link {
color : #0000BB ;
text-decoration : None
}
a:active {
color : #0000BB;
text-decoration : None
}
a:visited {
color : #000099;
text-decoration : None
}
a:hover {
color : red ;
text-decoration : None
}


/*  The following are primarily (although not exclusively) used on the home/index 
pages for each course, adding images in front of links to distinguish assignment links,
in-class labs, internal links (sample), and external links. The question link is used in 
front of student "question and answer" pages. */
a.assign
{
background: url(images/redpin.gif) no-repeat;
margin: 4px 0px 4px 4px;
padding: 4px 0px 4px 25px;
}

a.lab
{
background: url(images/yellowpin.gif) no-repeat;
margin: 4px 0px 4px 4px;
padding: 4px 0px 4px 25px;
}

a.sample
{
background: url(images/greenpin.gif) no-repeat;
margin: 4px 0px 4px 4px;
padding: 4px 0px 4px 25px;
}

a.external
{
background: url(images/purplepin.gif) no-repeat;
margin: 4px 0px 4px 4px;
padding: 4px 0px 4px 25px;
}
  
a.questions
{
background: url(images/question.gif) no-repeat;
margin: 4px 0px 4px 4px;
padding: 4px 0px 4px 25px;
}

a.video
{
background: url(images/video.gif) no-repeat;
margin: 4px 0px 4px 4px;
padding: 4px 0px 4px 25px;
}

/* The book link sets a smaller font and highlight color for the book.htm pages. These links
are used to external sites where books (software? etc?) can be purchased */
a.book
{
color: red;
font-size: 70%;
font-style: italic;
}

/* This is for links inside paragraphs where they are less noticeable without the contrasting
 color and underline */
a.inline
{
color:red;
text-decoration: underline;
}

/* Playing around with style for the link back at the bottom of each page */
div#homelink {text-align:center;}
a.home
{
color: white;
display: block;	
background-color : #888888;
border-top: 2px solid #bbbbbb; 
border-right: 2px solid #bbbbbb; 
border-left: 2px solid #444444;
border-bottom: 2px solid #444444;
}
a.home:hover {color : black;}