/* CSS Document */

/*
	@aboutLink = "https://cim.saddleback.edu/~datzberger0"
	@rollover = "Don Atzberger's CIM Home Page"
	@authorName = "Don Atzberger"
	@studentID = "774308"
	@classID = "CIM272, Fall 2012"
*/

/** In the body rule below, selectors can be added for any additional pages to make them look the same as the other pages.  Additional
body rules can be added if future additional pages are to look different than the overall site design. 
*/
body.cim298, body.cim205a, body.cim264d, body.cim281, body.cs4a {
	margin-left: 200px;
	margin-top: 230px;
	background-repeat: no-repeat;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color:#888bfd;
	background-image: url(cim_banner.jpg);
	background-position: 180px 0px;
	color: #FFF;
}

/*hide the page name div*/
#pageName {
	display: none;
	visibility: hidden;
}

/* Make sure the page body doesn't get too wide or too narrow */
#pageBody {
	max-width:850px;
	min-width:750px;
	margin-top: 200px;
}

/* The next two styles set the color of the links in the pageContent and pageFooter divs */
#pageContent a:link, #pageFooter a:link {
	color:#fff;
}

#pageContent a:visited, #pageFooter a:visited {
	color:#ddd;
}
/* End of page content and page footer link colors */



/* ========= Left nav bar section ========= 
This section contains the parts of the style sheet that formats the left nav bar.
*/
/*#pageHeader:before { content:url(BA-3.gif); }*/ /*was gona use this image but didn't like the look*/

/* Sets the pageHeader div off to the left side to make a left nav bar*/
#pageHeader {
	width: 175px;
	margin-left: -180px;
	position: fixed;
	margin-top: -120px;
}


/* Sets the slanted, "fast" button look of the links in the pageHeader div block*/
a.utilityLink, a.globalLink {
	display: block;
	margin-top: 10px;
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
	background-color:#00F;
	background-image:url(fast_button.gif);
	border: thin solid #000;
	min-height: 30px;
	width: 150px;
	text-align: center;
	vertical-align: middle;
	border-radius:5px;
	padding-top:4px;
	/** The transform (CSS3) rules below give the slanted look of the utilityLink and globalLink buttons */
	-webkit-transform: matrix(1,0,-0.400,1,0,0);
	-moz-transform: matrix(1,0,-0.400,1,0px,0px);
	-ms-transform: matrix(1,0,-0.400,1,0,0);
	-o-transform: matrix(1,0,-0.400,1,0,0);
	transform: matrix(1,0,-0.400,1,0,0);
	/** The text-shadow rule (CSS3) gives the outline look to the text in the buttons.  This won't work in IE9 */
	text-shadow: 1px 0px 0px black, 0px 1px 0px black, -1px 0px 0px black, 0px -1px 0px black;
}

/* Lights up the nav bar buttons with an orange background. */
a.utilityLink:hover, a.globalLink:hover {
	background-image: url(fast_button_lit.gif)
}

/*===================================*/

/* This is the TABS section.  It formats the tabs across the top of the content section.  */

#navLocal {
	text-align:center;
	height: 1.6em;
	z-index: 2;
}


/* Set the style of the non-highlighted tabs.  This is overridden by the active tabs style below */
#navLocal a.localLink  {
	color: #ffffff;
	text-decoration: none;
	display: inline-block;
	padding-left:8px;
	padding-right:8px;
	-webkit-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
	margin-right: 1px;
	margin-left: 1px;
	border-top-width: thin;
	border-right-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #ffffff;
	border-right-color: #FFF;
	border-left-color: #ffffff;
	background-color: #6435BA;
}

/* Set the color of the text on the tab links to be white at all times (next 3 styles) */
#navLocal a.localLink:link { color:#fff;}

#navLocal a.localLink:visited { color:#fff;}

#navLocal a.localLink:hover {
	background-color: #6435BA;
	font-weight: normal;
	-webkit-border-radius: 4px 4px 0px 0px;
	border-radius: 4px 4px 0px 0px;
}

/* =============== This is the ACTIVE TABS segment. ===============
Each entry below corresponds to a highlighted tab on one of the class pages.
In the real world, this might be generated by Javascript in localLink.js.
Note that none of the link names prefixed "remote" are included
here since they refer to pages not styled by this style sheet. 
*/

#index #pageBody #navLocal #localIndex, 
  #assignment #pageBody #navLocal #localAssignment,
  #project #pageBody #navLocal #localProject,
  #schedule #pageBody #navLocal #localSchedule,
  #syllabus #pageBody #navLocal #localSyllabus,
  #flyer #pageBody #navLocal #localFlyer,
  #sample #pageBody #navLocal #localSample,
  #test #pageBody #navLocal #localTest
{
	color:#fff;
	font-weight: normal;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thick;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-left-color: #FFF;
	border-bottom-color: #888BFD;
	background-color: #888BFD;
	height: 1.5em;
	border-bottom-style: solid;
}

/* End of TABS section */ 

/* 
Set up the content and footer with the correct border.  Note that this matches the
bottom border of the tabs in the navLocal div.  This gives the front-tabbed appearance
of the active tabs (see navLocal section above).  The footer has the same min width
and max width dimensions as the content div but the numbers are a little different.
This had to be done by trial and error (why??).  */

#pageContent {
	border: medium groove white;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 10px;
	background-color: #888BFD;
}
#pageFooter {
	max-width:844px;
	min-width:750px;
	text-align: center;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: groove;
	border-bottom-style: groove;
	border-left-style: groove;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
}
/* end pageContent and pageFooter sections */

/* Sets links in body of index page (next two styles */
#index #pageBody #pageContent table tr .feature a.localLink {
	display:inline-block;
	padding-right:10px;
	padding-left:10px;
	color:#fff;
} 

#index #pageBody #pageContent table tr .feature a.localLink:visited { 
	color:#DDD; 
}

.feature h3 {
	font-size: 24px;
	color: #FFF;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	border: medium outset #CCC;
	padding: 7px;
	background-color: #6435BA;
}
.storyHeader {
	font-size: 20px;
	font-weight: bold;
	background-color: #6435BA;
	border-top-width: medium;
	border-right-width: medium;
	border-left-width: medium;
	border-top-style: outset;
	border-right-style: outset;
	border-left-style: outset;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
	padding: 7px;
	margin-top: 7px;
}
.storyBody {
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	padding: 7px;
}
#index #pageBody #pageContent #indexTable tbody tr #storyMain2 .storyBody p { // highlights the 
	display: inline-block;
	margin-bottom: 2px;
	font-size: 18px;
}
#project #pageBody #pageContent #storyMain .storyHeader {
	font-size: 24px;
	font-weight: bold;
	border: medium outset #ccc;
	margin-top: 20px;
}
#project #pageBody #pageContent #storyMain .storyBody {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	padding-top: 10px;
}

#syllabus #pageBody #pageContent #syllabusHeader #syllabusHeaderTable { //centers all instances of the syllabusHeaderTable
	margin-right: auto;
	margin-left: auto;
}
h3.feature {
	text-align: center;
	font-size: 24px;
}
h4.feature {
	text-align: center;
}
#index #pageBody #pageContent tr #book { // centers the book image on the index pages
	text-align: center;
}
.storyRight, .storyLeft {
	vertical-align: top;
}

.description, .number, .date {
	padding-left:1em;
	padding-right:1em;
}

/* ============ Assignment Table Section =============
This is for the various assignment tables.  
The tags are not consistent across the course
folders, hence the extra selectors.
*/

#assignmentTable, #assignment #pageBody #pageContent table {
	margin-top: 20px;
	background-color: #6435BA;
	border-collapse:collapse;
}

#assignmentTable tr td, #assignmentTable tr th,
#assignment #pageBody #pageContent table tr th,
#assignment #pageBody #pageContent table tr td {
	border: thin solid #FFF;
}
#assignmentTable .feature, #assignment #pageBody #pageContent table .feature {
	background-color: #888BFD;
	text-align: center;
	font-weight: bold;
}

#assignmentTable td.date, #assignment #pageBody #pageContent table td.date,
#assignmentTable td.number, #assignment #pageBody #pageContent table td.number {
	text-align:center;	
}
#assignmentTable tr th.description,
#assignment #pageBody #pageContent table tr .description {
	font-size: 18px;
}

#assignment #pageBody #pageContent table tr .feature {
	border-right-width: thin;
	border-left-width: thin;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #888BFD;
	border-left-color: #888BFD;
	border-bottom-style:none;
	border-top-style:none;
}
/* ========= End of Assignment Table Section =========*/

/* =================Schedule Table Section ==============
This is for the various schedule tables.  
The tags are not consistent across the course
folders, hence the extra selectors.
*/
#scheduleTable, #schedule #pageBody #pageContent table {
	background-color: #6435BA;
	margin-right: auto;
	margin-left: auto;
	border: thin solid #FFF;
	margin-top: 20px;
	border-collapse: collapse;
}

#scheduleTable tr td, #scheduleTable tr th,
 #schedule #pageBody #pageContent table tr td,
 #schedule #pageBody #pageContent table tr th {
	border: thin solid #FFF;
}
#scheduleTable tr .feature p, #schedule #pageBody #pageContent table tr .feature p {
	font-size: 24px;
	text-align: center;
}

#schedule #pageBody #pageContent table tr .date, #schedule #pageBody #pageContent table tr .number {
	text-align:center;
}

/* the next two rules make the borders of empty cells in some of the schedule tables invisible to make them less klunky looking */
body.cim298#schedule #pageBody #pageContent #scheduleTable tr .description, body.cim264d#schedule #pageBody #pageContent table tr .description, body.cim281#schedule #pageBody #pageContent table tr .description {
	border-right:none;
}

body.cim298#schedule #pageBody #pageContent #scheduleTable tr .date, body.cim264d#schedule #pageBody #pageContent table tr .date, body.cim281#schedule #pageBody #pageContent table tr .date {
	border-left:none
}

/* sets schedule padding -- some of the schedule pages didn't have the
#scheduleTable ID, so I used this selector -- it gets all the schedule tables */
#schedule #pageBody #pageContent table tr .feature p { 
	padding-right: 1em;
	padding-left: 1em;
}

/* ========= End of Schedule Table Section =========*/

/* =================Syllabus Table Section ==============
This is for the various syllabus tables.  
The tags are not consistent across the course
folders, hence the extra selectors.
*/
#syllabusGradingTable {
	background-color: #6435BA;
	margin-right: auto;
	margin-left: auto;
	border: none solid #FFF;
	margin-top: 20px;
	border-collapse:collapse;
}

#syllabusGradingTable tr td, #syllabusGradingTable tr th {
	border: solid thin white;
	border-collapse:collapse;
	padding-right: 0.6em;
	padding-left: 0.6em;
}
#syllabusGradingTable tr .description {
	text-align: center;
}


#syllabusGradingTable tr .blank {
	background-color: #888BFD;
	border-bottom:solid thin #888BFD;
	border-top:solid thin #888BFD;
	width: 2em;
}
.cim205a#syllabus #pageBody #pageContent #syllabusGrading .storyBody #syllabusGradingTable tr  .blank{
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
}

/* ======== End of Syllabus Table styles =========*/