@charset "utf-8";
/* CSS Document */
/*
Class: CIM272A - CSS
Assignment: Final Project
FileName: final.css
Author: John Donovan
StudentID: jdonovan9 
Date: October 1, 2009

Notes: CSS for CIM298 site design. 
Redesign of Chewey Chang site (colors, background, basic layout concept), with a completely new design and CSS.  I liked his colors.
Optimized for 1024 x 768px display.
Includes Nifty Corners Cube library for rounded heading corners.  http://www.html.it/articoli/niftycube/index.html 

To Do:
1. Check to ensure consisitency between pages and optimize selectors.
2. Validate against multiple browsers
3. Get feedback on colors and banner
4. Final clean-up and comments.
5. Very minor shift in alignment or padding in .globalLink floating menu - only on assignment page.

Content Issues:
1. Check 'pageName' content for index.html and assignment.html - FIXED in 10/5 content
2. On project.html, remove <br /> from below .storyHeader block
3. Consider standardizing use of <hx> tags in page 'titles'.
4. Consider standardizing use of 'name', 'description', 'date' ids for all tables to define 'labels' vs. 'data'.
5. <a>Tentative Class Schedule</a> at bottom of Syllabus.htm AND Schedule link in localLink.js share id="localSchedule"
6. Change class from 'number' to 'feature' for chapter3's <colspan> to be consistent with other chapter dividers in Assignment.htm
	   
UPDATES:

*/

@import url("../nifty/niftyCorners.css");

body {
	background-image: url(b3-62.gif);
	margin-left: 150px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
}

.blank {
	display: none;
}


/* floating left menu */
#pageHeader {	
	background-color: #7D845F;
	width: 110px;
	position: fixed;
	top: 85px;
	left: 20px;
	border-top-width: medium;
	border-right-width: thick;
	border-bottom-width: thick;
	border-left-width: medium;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #FFF;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #FFF;
}

/* left float menu items */
a.globalLink, a.utilityLink {
	width: 90px;
	height: 15px !important;
	display: block;
	padding-right: 5px;
	padding-left: 15px;
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	color: #FFF;
	text-decoration: none;
	font-size: 100%;
	background-image: url(menu_bkrd.png);
	overflow: hidden;
}

/* menu buttons - hover */
a.globalLink:hover, 
a.utilityLink:hover
	{
	background-color: #c4cf96;
	background-image: url(menu_bkrd.png);
	background-position: 0px -25px;
	color: #000;
	font-weight: bold;
}

/* ensure that the first letter of the menu item is capitalized */
a.globalLink:first-letter,
a.utilityLink:first-letter {
	text-transform: uppercase;
}

/* main page body container */
div#pageBody {
	background-color: #C4CF96;
	width: 98%;
	margin-top: 25px;
	margin-right: 20px;
	margin-bottom: 10px;
	border-top-width: medium;
	border-right-width: thick;
	border-bottom-width: thick;
	border-left-width: medium;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #FFF;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #FFF;
	min-width: 825px;
}

/* inside the main body container */
#pageContent {
	padding: 10px;
}

#navLocal {
	min-width: 825px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


/* top menu bar */
#navLocal a.localLink {
	display:inline-block;
	min-width: 85px;
	height: 30px;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 0px;
	padding: 1px;
	text-align: center;
	vertical-align: bottom;
	line-height: 1.1em;
	background-color: #660000;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	border-top-width: thin;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: thin;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #FFF;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #FFF;
	overflow: hidden;
}

/* --- Highlight .navLocal button for page that we're on ---*/
body#assignment a#localAssignment,
body#index a#localIndex,
body#project a#localProject,
body#schedule a#localSchedule,
body#syllabus a#localSyllabus {
	background-color: #CCC;
	color: #600;
}

/* heading - top of feature section */
.feature h3	{
	border: medium groove #666;
	text-align: center;
	padding: 5px;
	font-size: x-large;
	font-weight: bold;
	color: #660000;
	background-color: #CCC;
}

/* book div */
#book {
	background-color: #7D845F;
	text-align: center;
	vertical-align: middle;
	padding: 10px;
	margin-left: -10px;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: ridge;
	border-right-style: ridge;
	border-bottom-style: ridge;
	border-left-style: ridge;
	border-top-color: #FFF;
	border-right-color: #333;
	border-bottom-color: #333;
	border-left-color: #FFF;
}

/* javascript links in feature */
.feature a.localLink {
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 5px;
	padding: 3px;
	color: #FFF;
	font-weight: bold;
	background-color: #660000;
	text-decoration: none;
	width: 83px;
	height: 30px;
	vertical-align: bottom;
	text-align: center;
	border-top-width: thin;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: thin;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #FFF;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #FFF;
	overflow: hidden;
}

/* button hovers for top nav bar & feature links */
.feature a.localLink:hover,
#navLocal a:hover
	{
	background-color: #7D845F;
	color: #FFF;
	font-weight: bold;
}

/* p block right of image */
.feature p {
	color: #660000;
	text-align: center;
	font-size: medium;
	line-height: 2em;
}

/* page banner & name */
#pageName {
	background-color: #966;
	height: 120px;
	min-width: 825px;
	width: 100%;
	text-align: right;
	color: #7D845F;
	font-weight: bold;
	font-size: 0px;
	background-image: url(CIMpliciyBanner.png);
	background-position: center;
}

.story, td.story {
	margin-top: 5px;
	vertical-align: top;
}

/* story headers */
.storyHeader {
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;
	background-color: #7D845F;
	color: #FFF;
	font-weight: bold;
	font-size: 1.5em;
	vertical-align: top;
}

/* a tags within story headers */
.storyHeader a {
	text-decoration: none;
	font-size: 1.0em;
	color: #600;
}
.storyHeader a:hover {
	color: #CCC;
	font-weight: bold;
	
}

/* story body elements */
.storyBody {
	border: medium double #333;
	margin-left: 10px;
	margin-right: 10px;
	padding: 10px;
	line-height: 1.3em;
	background-color: #FFF;
}

.storyBody a {
	text-decoration: none;
}


/* page footer */
#footerInfo {
	background-color: #7D845F;
	width: 650px;
	height: 30px;
	font-size: 0.9em;
	font-variant: small-caps;
	text-align: center;
	color: #FFF;
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	border-top-width: medium;
	border-right-width: thick;
	border-bottom-width: thick;
	border-left-width: medium;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #FFF;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #FFF;
	overflow: hidden;
}

#footerInfo a {
	text-decoration: none;
	color: #FFF;
}

#footerCounter {
	text-align: center;
	vertical-align:text-bottom;
	
}

#footerCounter a {
	color: #FFF;
	text-decoration: none;
}


/* ===== Page-specific rules ===== */


#assignment table,
#syllabusHeaderTable {
	border-collapse:collapse;
	margin: auto;
}

#assignment table a,
#syllabusHeaderTable a {
	text-decoration: none;
	font-weight: 700;
}

#assignment,
#syllabusHeaderTable tr {
	line-height: 1.5em;
}

#assignment td.number, #assignment th.number,
#syllabusHeaderTable td.number {
	background-color: #600;
	color: #FFF;
	font-weight: 600;
	padding: 5px;
	margin: 0px;
	border: medium ridge #000;
}

#assignment td.description, #assignment th.description,
#syllabusHeaderTable td.description {
	background-color: #FFF;
	color: #000;
	padding: 5px;
	margin: 0px;
	border: medium ridge #000;
}

#assignment td.date, #assignment th.date {
	background-color: #7D845F;
	color: #FFF;
	padding: 5px;
	margin: 0px;
	border: medium ridge #000;
	text-align: center;
	vertical-align: middle;
}

#assignment th.number,
#assignment th.description,
#assignment th.date {
	font-weight: bold;
	font-size: larger;
}

#assignment td.story, 
#assignment td.feature {
	color: #600;
	font-weight: 600;
	padding-left: 3em;
	padding-right: 2em;
	text-align: center;
}

#assignment td.feature {
	background-color: #600;
	color: #fff;
	font-weight: 600;
	padding: 5px;
	margin: 0px;
	border: medium ridge #000; 
}

/* --- PROJECT Page --- */

#project ol {
	color: #000;
	list-style-type: upper-roman;
}

#project li p {
	display: list-item;
	list-style-type: circle;
	padding-left: 1em;
	color: #600;
}

/* --- SYLLABUS Page --- */
/* Content uses seperate h3 tags for each line of data */
#syllabusHeader h3 {
	margin-top: 10px;
	text-align: center;
	line-height: 10px;
	padding: 0px;
	font-size: 1.5em;
	font-weight: bold;
	color: #660000;
}

#syllabusHeader h4 {
	margin-top: 5px;
	text-align: center;
	font-size: large;
	font-weight: bold;
	color: #660000;
}

#syllabusHeaderTable td.number {
	background-color: #600;
	color: #FFF;
	font-weight: 700;
}

#syllabusHeaderTable td.number a {
	background-color: #600;
	color: #FFF;
	font-weight: 800;
}

#syllabusHeaderTable td.number a:hover {
	background-color: #CCC;
	color: #600;
	font-weight: 700;
}

/* added to provide contrast for anchor tags */
#syllabusHeaderTable a:hover {
	background-color: #600;
	color: #FFF;
}

/* added to correct spacing problem between text and table.
   SHOULD be resolved in content with consistent use of <br />'s */
#syllabusGrading br {
	margin-bottom: 20px;
}

/* Grading Table content does not have id= for columns, so difficult to 
   handle differences between label and data.  SHOULD use consistent method
   'number' and 'description' id's for these columns */
#syllabusGradingTable {
	margin: auto;
	border-collapse: collapse;
}

#syllabusGradingTable tr {
	background-color: #C4CF96;
	border-width: medium;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-top-color: #CCC;
	border-right-color: #666;
	border-bottom-color: #666;
	border-left-color: #CCC;	
}

#syllabusGradingTable td {
	color: #000;
	border: outset medium #CCC;
	text-align: center;
	font-weight: 600;
	padding: 5px;
	}

/* Can not use, because the <a> at the bottom of Syllabus page and the 
   'Schedule' link in the #navLocal menu bar share the same id=localSchedule. */
#syllabus #localScheduleSyllabus {
	display: block;
	margin: auto;
	margin-top: 10px;
	width: 200px;
	padding: 5px;
	background-color: #600;
	color: #FFF;
	font-size: 1.2em;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	border-top: thin solid #999;
	border-right: medium solid #000;
	border-bottom: medium solid #000;
	border-left: thin solid #999;
}

#syllabus #localScheduleSyllabus:hover {
	background: #7D845F;
}

/* --- SCHEDULE page ---*/
#schedule .feature p {
	text-align: center;
	font-size: 1.5em;
	color: #600;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 5px;
}

#schedule .feature p a {
	text-decoration: none;
}

/* the table also includes the text at the top, handled by the <p> selects above */
#schedule table {
	margin:auto;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 700px;
	border-collapse:collapse;
	border: medium ridge #000;
	padding: 5px;
	background-color: #FFF;
}

#schedule tr {
	border: medium ridge #000;
}

#schedule th.number,
#schedule td.number {
	border: medium ridge #000;
	background-color: #660000;
	color: #fff;
	font-weight: 700;
	text-align: center;
}

#schedule th.description,
#schedule td.description {
	border: medium ridge #000;
	background-color: #FFF;
	padding: 5px;
}

/* get rid of the id=date column, which contains only filler */
#schedule th.date, #schedule td.date {
	display: none;
}

/* ======= END OF FILE =========== */