/*updated: 12.5.08 andyfitz@u.washington.edu */
/*UW CIC Student Guide Online designed by CIC ADs Andy Fitzgerald and Tim Welsh with the assistance of Rob Weller */

/*
This is the CSS page for the CIC Student Guide Online. I have tried to organize this so that all the attributes applied to a particular div appear together. In other words, you will see #contents followed by all the varients that appear inside #contents. Divs arranged in the order they appear on the pages. 

The formatting of this site is fairly simple. 

Most of the page page is left exactly the same. 
Divs #left_contain, #left_info, #main_contain, #menus, #essential_menu, #catalyst_menu, and #web_menu should all remain the same for each page (with the exception of changing which tab is active in the #menus). 

#page is the where the title for the active page goes as well as the menu of anchor links. These anchor links are formatted by #column divs. 4 entries fit in the height of #page. Three #columns fit easily, but more can be used if necessary. They are set up to sit in a column like a list without being tagged as a list. 

In #contents, the layout is fairly intuitive. <a name="XXX"><h2>  for section headers. Subtopics appear as <h3> while <h4>occasionally appears to designate steps that fulfill a subtopic or subheading. Topic, <h3>; Procedure <h4>, generally. 

Then, text is in <p>'s, with list and images generally standing on their own, not contained in a<p> or separate <div>
[Tim 10.13.07] */

/* 
In continuing Tim's work, I've made some minor modifications to the original stylesheet in order to make it more cross-browser friendly. I've tried to eliminate obsolete style rules, but it is very likely that some unused stuff remains. Most images no longer stand on their own; I've used the img_indent rule to make them more uniformly spaced. 

I've also converted the navigation and sidebar menus to php includes. Both of these includes are in the "inc" file. Make any updates to the sidebar information in this files only--the updates will show up on all SGO pages when published. Also, you no longer have to worry about changing the menu on every page when you change a single menu item--just change the menu include. The script file sjonline.js takes care of highlighting the appropriate menu item on a given page. The menu highlight file is in the layout file in img. 

Most of the images are named numerically  by where they appear on the page and are in the specific pages corresponding image file. I haven't updated the naming system for ePortfolio because it's due to be scrapped soon. "Layout" is the other exception, but there are so few files here that descriptive names made more sense. The file system is, I think, pretty straightforward.
[Andy 12.5.08]
*/

/* BODY */

body {
		margin: 0px;
		padding: 0px;
		background-image:  url(img/layout/CICbklow.gif);
		background-repeat: no-repeat;
		background-position: left top;
		height: 100%;
		text-align: center;
		line-height: normal; 
		font: 1em/1 Verdana, Arial, Helvetica, sans-serif; 

}

a:link, a:visited {

color : #005A9D;
text-decoration: none;	
 border-bottom: dashed orange 1px
 }

a[href="#top"],
a[href="#top"]:hover 
{
	border: none;
}


a:active {
color: #DB9400; 
text-decoration: none;
		}

a:hover {

color: #DB9400;
text-decoration: none;
 		 border-bottom: dashed orange 1px
		}


/*  headers  */

h1, h2, h3 {

		color: #4f4f4f;
		margin: 0px;
		padding: 0px;
		text-transform: none;
		line-height: normal;

	}


h1 {
		font-size: 2.8em; 
		border-bottom: 2px solid orange; padding: 10px 0px 10px 0px
}

h2 {
		font-size: 2.2em;
margin: 20px 0px 0px 0px; 
}


h3 {
		font-size: 1.5em;	
		line-height: 1.2em; 
		padding: 0px; 
		margin: 20px 0px 0px 0px; 
}

h4 {	

		margin: 20px 0px 0px 0px; 
		line-height: 1;
		font-weight: bold;
		text-transform: uppercase;
}



h5 {
		font-size:90%;
		font-weight:200;	
}

h6 {

		font-size:75%;
		font-weight:100;	
}


table {
		max-width: 90%; 
		margin: 25px;
		border:solid #000000 thin;
		border-spacing: 0px;
		empty-cells: show;
		font: 1em/1 Verdana, Arial, Helvetica, sans-serif;
		

}

td { 

        padding:5px; 
		vertical-align:top;
        border: solid #000000 thin;

}


p, li {
		margin: 25px;
		line-height: 1.5em; 
} 

p.quote {
		margin: 50px;

}


ul {
		list-style: circle; 
		list-style-position:outside;
}

ul.checklist {
        
        list-style-image:url(img/word/check_box.JPG);
		list-style-type: none;
}

li.single {
        margin-left: 25px;
		margin-bottom: 10px;
}

li.embedded {
		margin-left:50px;
		margin-bottom:10px;
		
}				

dl {
		margin: 0em 0% 0em 0%
		}

dt {

    margin: 0em 0% 0em 0%;
	line-height: 1;
	padding: 5px;
	font-weight: bold;
	text-transform: uppercase;

}

dd {
		padding: 5px 5px 10px 5px; 
		line-height: 1.5em
}



img {

}


/* #left_contain */

#left_contain { 
		margin: 5px;
		padding: 0px;
		width: 140px;
		position: absolute;
		top: 5px;
		left: 5px
}

#CollageBigger {
	position: relative;
	left: -10px;
}

.img_indent {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 50px;
}



/* #left_info */

#left_info {
	font-size: 0.8em;
	margin: 20px 0px 0px 30px;
	width: 100%;
	text-align:left;
	line-height: normal;

}

 #left_info ul, #left_info h4 {
		margin: 0px 0px 10px 0px;
		padding: 0px;
		list-style-type: none;
}
 
 #left_info li {
		 margin: 0px 0px 5px 0px; 
		 padding: 0px;
 }
 
 #left_info img {
		clear: both; 
		margin: 20px; 
		margin-left: 0px;
}
#left_info p {
		clear: both; 
		margin: 0px; 
		padding: 0px;
		 line-height: normal
 
 }
 
/* main_contain */


#main_contain { 

		position: relative;
		top: 0px;		
		margin-left: 200px;
		height: 100%;
		padding: 0px;
		text-align: left;
		line-height: normal; 
		min-width: 700px;
		
}


/* Menus */

#menus {
		padding:0px;	
		margin:0px;
		color: black;
		text-transform: none;
		font-variant: small-caps;

 		border-left: 2px solid orange
}

#menus h2 {
		display: inline; 
		padding: 0px; 
		margin: 0px; 
		color: #4f4f4f; 
		font-size: .9em 
				}

#menus a:link, #menus a:visited  {
		color: #4f4f4f; 
		font-size: .8em; 
		padding: 0px 9px 0px 5px; 
		margin-left: 5px;
		border: none
		}
#menus a:hover, #menus #active {
/*
		background: white; 
		color: blue; 
		background: transparent url(img/menuhilight.png) 0 100% repeat-x;
		border-bottom: 5px solid orange;
*/
		background: transparent url(img/layout/menuhilight.jpg) 0 50% repeat-x;
		text-decoration: none; 
		padding: 6px 7px 5px 7px;

}



#basics_menu  {
		background-color: #fffbde;
	
		height: 20px;
		padding: 2px;
		z-index: 100;
		text-decoration: none;
		word-spacing: normal;
}
#cic_menu {
		background-color: #fff4ab;
	
		height: 20px; 
		padding: 2px;
		z-index: 101;
}

#canvas_menu {
		background-color: #ffee78;

		height: 20px; 
		padding: 2px;
		z-index: 102
		}


#catalyst_menu {
		background-color: #ffe745;

		height: 20px; 
		padding: 2px;
		z-index: 103
		}


/* #page */

#page {
		margin: 0px;
		padding: 0px;
		background: #ffcc33;
		font-size: .8em;
		border-bottom: 1px solid #4f4f4f; 
		height: 120px;
		border-left: 2px solid orange
		}

#page h2 {
		color: #4f4f4f; 
		font-size: 2em; 
		display: block;
		margin: 0px 0px 10px 0px;
		font-variant: small-caps;

}

.column {
		margin: 0px 0px 0px 30px;
		padding: 0px;
		float: left;
		width: 160px;
		list-style-type: none;
		font-size: .8em; 
}

.column a:link, .column a:visited {
		margin: 0px;
		padding: 0px 0px 5px 0px;
		color:  ##4f4f4f;
		border: none;
		display: block

}

.column a:hover {
		margin: 0px;
		padding: 0px 0px 5px 0px;
		color: #FFBF00;
		border: none;
		display: block;

text-decoration: none


}

.column a:hover {
		margin: 0px;
		padding: 0px 0px 5px 0px;
		color:  #DB9400;
		border: none;
		display: block;

		text-decoration: none


}




/* #contents */


#contents {
		border-left: 2px solid orange;
		font-size: 12px;
		margin: 0px;
		padding: 5px 0px 50px 30px;
		width: 750px; 
		line-height: 1.5em
		
		}