@charset "UTF-8";
/* CSS Document */

/* GLOBAL CSS DOCUMENT -----------------------------------   Updated 5/29/08   */
/* Changed font-sizes to percentage. Changed font-family.  */
/* Gold shades - background-color:#d8ae40,  banner2:#eddd90, top submenu: #f6eca6,  rail:#fbf7db,  dark-gold text:  #8c6611 
  Purple shakes - banner: #5c1c75, darker purple:#4a155a,*/
/* Added .skiplink class for Accessibility - THE FOLLOWING SHOULD BE ADDE3D TO EVERY PAGE!!  Put this AFTER title tag on every page: <a class="skiplink" href="#startcontent">Skip to main content</a>  --  And put this BEFORE h1 tag on every page: <a name="startcontent" id="startcontent"></a> .   */ 


html body  {behavior: url("csshover3.htc");  color:#000; background-color:#fff; /*#f2e499;*/ /*#fdf9e1 */ font-family: Helvetica, "Microsoft Sans Serif", Arial, sans-serif; height:100%; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding:0px; }
	
img  { border:0px; margin:10px; }
img.nopadding  {margin:0px; padding:0px; }
img.image-medmargin  {margin:20px padding:0px; }
img.image-right  { float:right; margin:5px 0px 5px 5px;padding:0px; border:1px ridge #333; }
img.image-left  { float:left; margin:5px 5px 5px 0px; padding:0px; border:1px ridge #333;  }
img.image-center  { float:none; margin:5px; padding:0px; border:1px ridge #333; text-align:center; }
img.image-border   { border:1px ridge #333; padding:0px; margin:0px;  }
img.image-caption  {float:left; font-size: 70%; font-weight:bold; margin:0px; padding:0px 5px; }
a:link  {color:#4a155a;	}
a:visited  {color:#4a155a; }
a:hover {color:#8c6611; }

a.plainlink {  text-decoration:none;  }

a.skiplink:link {
margin-left:-999px!important;
padding:1px;
color:#5c1c75;
font-size:60%;
text-decoration:none;
color:#fff;
background:transparent;
}
a.skiplink:visited {
margin-left:-999px!important;
padding:1px;
color:#5c1c75;
font-size:60%;
text-decoration:none;
color:#fff;
background:transparent;
}
a#skiplink:hover {
margin-left:0!important;
color:#000;
}


/*  ----------------------------------STYLES FOR BANNERS AND TOP NAV ---------------------------------- */

#banner1  {position:relative; height:75px; margin:0px auto; /*50px;*/ width:842px; left:0px; padding:0px; color:#fff; background-color:#5c1c75; top:0px; /* purple text-align:justify;	vertical-align:text-top;  auto;*/}
#banner1-container  { width:840px; height: 75px;/*48px;*/ background-color:#5c1c75;  margin:0px auto;}
#banner1-logo {
	position:absolute;
	top:-6px;
	left:0px;
	float:left;
	margin:0px auto;
	height: 87px;
	width: 148px;
}

#sjcc-title  { position:absolute; top:15px; left:200px;float:left;	 width:380px; text-align:left; vertical-align:top; padding-top:8px;  z-index:2;}
#banner1-right  { float:right; clear:none; width:280px; text-align:right; vertical-align:bottom;}
form#search  { vertical-align:bottom; margin-top:20px; padding:0px; }	
#search label  { color:#fff; font-size:75%; font-weight:bold; vertical-align:bottom; margin-right:3px; }
input#searchbox  { color:#000; background-color:#fff; font-size:65%; font-weight:normal; margin:0px;	
padding:0px;}
input#go  {	padding:0px; color:#fff;}
#banner2  {	height:23px; width:842px; left:0px; clear:both; margin:0px auto; padding:0; border:0px; border-bottom:1px ridge #5c1c75; background-color:#ffcc00; /* gold */ text-align:center; position:relative; top:0px;/*50px;*/z-index:90; }
	
#topnav  { width:860px; margin:0px auto; text-align:left; vertical-align:middle; overflow:auto; z-index:100;}
/* added on 10/26/09 */
#nav > li > a {
	padding-top:5px;
}
#nav:hover {
	height: 6em;
}
/* added on 10/26/09 */
#nav, #nav ul { /* all lists */
	padding: 0px;
	margin: 0px;
	list-style: none;
	line-height: 1.1;
	z-index:100;
}
#nav a:link, #nav a:visited {    
	display: block;
	padding:3px 26px 3px 26px; 
	/* padding:3px 16px 3px 5px;modified  on 4/15/08 */
	margin: 0px;
	font-size:75%; 
	letter-spacing:normal;
	font-weight:bold;
	text-decoration:none;
	color:#FFCC00/*#4a155a;*/
	z-index:100;
}

	
#nav a:hover { /* top nav hover */
	color:#ffcc00;/*#eddd90;*/
	text-decoration:none;
	background-color:#5c1c75; /* Purple */
	z-index:100;
}
#nav li { /* all list items */
	float: left;
	z-index:100;
	margin:0px;
	padding:0px; /*added 4/15/08 */

	 /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
	position: absolute;
	background-color: #ffcc00;/* #faf0ba;*/ /* gold*/
	width: 155px; /*130*/
	text-align:left;
	
	border-right: 1px solid #5c1c75;
	border-bottom: 1px solid #5c1c75;
	border-left: 1px solid #5c1c75;
	margin:0px;
	padding: 0px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	z-index:100;
}
#nav li ul a:link, #nav li ul a:visited  {
	margin:0px;
	width:154px;/*127*/
	color:#000;/*5c1c75;*/
	font-size:75%; 
	letter-spacing:normal;
	font-weight:bold;
	text-decoration:none;
	padding:2px 0px 3px 3px; /*2 0 4 2 */
	z-index:100;
}
#nav li ul a:hover  {
	margin:0px;
	width:154px;/*127*/
	padding:2px 0px 3px 3px; /*2 0 4 2 */
	color:#000 /*#eddd90;*/
	text-decoration:none;
	background-color:#fffcc00 /*#5c1c75;*/ /* Purple */
	z-index:100;
}
#nav li ul ul { /* third-and-above-level lists */
	width: 160px;/*160*/
	margin: -16px 0 0 154px; /* -22px 0 0 129px; edge match*/
	border-top: 1px solid #5c1c75;
	z-index:100;
	background-color:#FFCC00; /*#faeeaa;*/
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
	text-decoration:none;
}
#nav li ul ul a { 
	width: 160px;/* 160 */
	padding:4px 0px 2px 1px ;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */ left:auto;
}



/*  --------------------------- STYLES FOR CONTAINER, RAIL, AND LEFT NAV ---------------------------  */

#container {
	background-color:#fff;
	border:1px ridge #5c1c75;
	overflow:auto; 
	width:840px;
	margin: 0px auto 0px auto; 
	padding:0px;
	text-align: left;
	z-index:90;
}
#container-norail  {
	background-color:#fff;
	border:1px ridge #5c1c75;
	overflow:auto; 
	width:840px;
	margin: 15px auto 0px auto; 
	padding:10px;
	text-align: left;
	z-index:90;
	font-size:84%;}

/* * html #container{
	height:1%;
width:760px;
	  So IE plays nice ;BUT removing this draws LR borders in FF
} */


#rail{
    float:left; 
	width:180px;
	height:100%;
	background-color:#fcfaea;
/* margin-left:-150px; to remove space between rail & container*/
	display:inline; /* So IE plays nice */
	text-align:center;
	position:relative;
	z-index:10;
}

#rail a {
text-decoration:none;
}
#sidelogo  {
	border:0px;
	text-align:center;
	margin:0px;
	padding:15px 5px 5px 5px;
	width:170px;
}
h4.sjcchome a:link, h4.sjcchome a:visited {
	font-size:67%;
	text-align:center;
	font-weight:bold;
	letter-spacing:1px;
	color:#8c6611;
	margin:0px;
	padding:5px;
}
h4.sjcchome-homepage a:link, h4.sjcchome-homepage a:visited {
	font-size:65%;
	text-align:center;
	font-weight:normal;
	color:#8c6611;
	margin:0px;
	padding:5px;
	visibility:hidden;
}
h4.sidemenutitle   {
	font-family:Helvetica, "Microsoft Sans Serif", Arial, sans-serif;
	font-size:95%;
	text-align:center;
	font-weight:bold;
	font-variant:small-caps;
	margin: 25px 0px 0px 0px;
	padding:0px 5px;
	color:624911;
}
h4.sidemenutitle a:link, h4.sidemenutitle a:visited  {
	color:#5c1c75;
}
h4.sidemenutitle a:hover {
	color:#8c6611;
}

ul.leftnav1  {
	list-style-type:none;
	/*text-align:right; */
	text-align:left;
	padding:5px 5px 5px 10px;
	margin:0px;
}
ul.leftnav1 li {
/*	text-align:right; */
text-align:left;
	font-weight:normal;
	font-size:78%;
	font-weight:bold;
	color:#30230a;
	line-height:102%;
	margin: 12px 0px 6px 0px;
	padding:0px;
}
ul.leftnav2  {
	list-style-type:none;
	text-align:left;
	padding:4px 0px 0px 10px;
	margin:0px;
}
ul.leftnav2 li {
	text-align:left;
	font-weight:bold;
	color:#3b0d48;
	font-size:92%;
	line-height:104%;
	margin:2px 0px 6px 0px;
	padding:0px;
}

ul.leftnav1 a:link {
	color:#8c6611;
	text-decoration: none; 
}
ul.leftnav1  a:visited {
	color:#8c6611;
	text-decoration: none; 
}
ul.leftnav1 a:hover {
	color:#5c1c75;
	text-decoration: none; 
}
ul.leftnav2 a:link {
	color:#5c1c75;
	text-decoration: none; 
}
ul.leftnav2 a:visited {
	color:#5c1c75;
	text-decoration: none; 
}
ul.leftnav2 a:hover {
	color:#8c6611;
	text-decoration: none; 
}
.leftnavinfo  {
	color:#8c6611;
	font-size:92%;
}
.leftnavinfo a  {
	color:#8c6611;
	text-decoration: none;
}



/*  ---------------------------------- STYLES FOR CONTENT DIV  ----------------------------------  */
#content { clear:right;	float:right; width:640px; height:100%; border-left:159px solid #fcfaea; /* The width and color of the rail */	margin-left:-161px; margin-top:3px;  /* Hat tip to Ryan Brill */  	padding:10px; font-family: Helvetica, "Microsoft Sans Serif", Arial, sans-serif; font-size:84%;  z-index:-2; } 

#content { clear:right;	float:right; width:640px; height:100%; border-left:180px solid #fcfaea; /* The width and color of the rail */	margin-left:-181px; margin-top:3px;  /* Hat tip to Ryan Brill */  	padding:10px 10px 10px 10px; font-family: Helvetica, "Microsoft Sans Serif", Arial, sans-serif; font-size:84%;  z-index:-2; }

#topimage   {float:right; clear:right; margin: 0px auto; top:0px; background-color:#5c1c75; z-index:10; }

.leftcol  {	float:left;	clear:left;	width:310px; margin: 0px; padding:5px 4px 5px 0px; text-align:left; vertical-align:top; }
.rightcol  {float:right ;clear:right; width:310px; margin: 0px; padding:5px 0px 5px 4px; text-align:left; vertical-align:top; }
.middlecol  {  float:left; clear:none; width:205px; margin: 0px; padding:5px 0px; text-align:left; vertical-align:top; }

#container-norail .leftcol, #container-norail .rightcol  {  width:410px;  }

.leftcol-wide  {float:left;	clear:left;	width:415px; margin: 0px; padding:5px 4px 5px 0px; text-align:left; vertical-align:top; }
.leftcol-narrow  {float:left; clear:left; width:210px; margin: 0px; padding:5px 4px 5px 0px; text-align:left; vertical-align:top; }
.rightcol-wide  {float:right; clear:right; width:415px; margin: 0px; padding:5px 0px 5px 4px; text-align:left; vertical-align:top; }	
.rightcol-narrow  {float:right; clear:right;width:210px;  margin: 0px; padding:5px 0px 5px 4px; text-align:left; vertical-align:top; }
.middlecol-wide  {float:left; clear:right; width:415px; margin: 0px; padding:5px 0px; text-align:left; vertical-align:top; }	
.middlecol-narrow  {float:left; clear:right;width:210px;  margin: 0px; padding:5px 0px; text-align:left; vertical-align:top; }
.onecol {clear:both; margin:0px; padding: 5px 0px; width:100%;  }
.sixcol {	float:left;		width:120px; margin: 0px; padding:5px 4px 5px 0px; text-align:left; vertical-align:top; }
.fivecol {	float:left;		width:160px; margin: 0px; padding:5px 4px 5px 0px; text-align:left; vertical-align:top; } 
.fourcol {	float:left;		width:190px; margin: 0px; padding:5px 4px 5px 0px; text-align:left; vertical-align:top; }

ol, ul  { margin:0.4em 0em 0.4em 1em; padding:0em;}

li {  margin: 0em 0em 0em 1.5em; padding:0.1em 0em 0.5em 0.2em; }

ul.nobullets  {
	list-style-type:none;
}
ul.nobullets li {
	list-style-type:none;
	margin-left:1.7em;
	padding-left:0em;
}
ul.nobullets li ol {
	list-style-type:decimal;
	margin-left:1.5em;
}
ul.nobullets li ol li {
	list-style-type:decimal;
}
ul.nobullets li ul.disk {
	list-style-type:disc;
}
ul.nobullets li ul.circle li {
	list-style-type:circle;
}

ul.goldbullets  {
	list-style-image: url(../images/bullet-gold.gif);
	list-style-type:none;
}

ol ul.goldbullets  {
	list-style-image: url(../images/bullet-gold.gif);
	list-style-type:none;
}
ul.goldbullets li ol  {
	list-style-type:decimal;
	list-style-image:none;
}
ul.goldbullets li ol li  {
	list-style-type:decimal;
	list-style-image:none;
}
ul.goldbullets li ul  {
	list-style-type:circ1e;
	list-style-image:none;
}
ul.goldbullets li ul li  {
	list-style-type:circle;
	list-style-image:none;
}

ol.loweralpha, ul ol.loweralpha, ol ol.loweralpha   { list-style-type:lower-alpha;   }
ol.lowerroman, ul ol.lowerroman, ol ol.lowerroman  {    list-style-type:lower-roman;  }
ol.upperalpha, ul ol.upperalpha, ol ol.upperalpha  {  list-style-type:upper-alpha;  }
ol.upperroman, ul ol.upperroman, ol ol.upperroman   {  list-style-type:upper-roman;  }

ol.border, ul.border  {  border:1px ridge #000;  }
p.border, h3.border, h4.border  {  border:1px ridge #000;  padding:0.5em;  margin:0em;  }

ul.smallindent, ol.smallindent  {margin-left:1em; padding-left:0em;  }
ul.noindent, ol.noindent  {margin-left:0em; padding-left:0em; }

.leftcol-wide ul,  .rightcol-wide  ul,  {margin-left:1.5em; padding-left:0em; }  
.leftcol-narrow ul, .leftcol-narrow ul.nobullets, .leftcol-narrow ul.goldbullets,leftcol-narrow ol  {margin-left:0.5em; padding-left:0em; }  
.rightcol-narrow ul,  .rightcol-narrow ul.nobullets,  .rightcol-narrow ul.goldbullets,  .rightcol-narrow ol,  {margin-left:0.5em; padding-left:0em; }  

ol.list-compact, ul.list-compact  {
	margin-top:0em;
	margin-bottom:0.2em;
}
ol.list-compact li, ul.list-compact li, ol ol.list-compact li, ol ul.list-compact li, ul ol.list-compact li, ul ul.list-compact li   {
  margin-top::0em; margin-bottom:0.1em ; padding-top::0em; padding-bottom:0em;  }


h1  { font-size:160%; color:#4a155a; font-family:"Lucida Sans Unicode", "Lucida Grande", "Century Gothic", "Comic Sans MS", Verdana, fantasy; font-weight:normal; margin:0px; padding:1.4em 0em 0.6em 0em; line-height:110%;  }
h1.title  {  font-size: 160%;  }

h2  { font-size:140%; font-family:"Lucida Sans Unicode", "Lucida Grande", "Century Gothic", "Comic Sans MS", Verdana, fantasy; color:#8c6611;font-weight:normal; padding:1em 0em 0.5em 0em;margin:0em; line-height:110%;  }

h3  { font-size:115%; color:#4a155a; font-weight:bold; font-family:Helvetica, "Microsoft Sans Serif", Arial, sans-serif; margin:0em;  padding:0.8em 0em 0.3em 0em;  }
h4  { font-size:105%; color:#8c6611; font-weight:normal; font-family:Helvetica, "Microsoft Sans Serif", Arial, sans-serif; margin:0em; padding:0.6em 0em 0.1em 0em; }
h5  { font-size:94%; color:#000; font-weight:bold; margin:0em; padding:0.5em 0em 0.1em 0em; }
h5.footer  { margin-top:1em;  }

h4.tall  {  font-size:108%; font-family:"Lucida Sans Unicode", "Lucida Grande", "Century Gothic", "Comic Sans MS", Verdana, fantasy; color:#8c6611; font-weight:normal; margin:0em;  padding:0.8em 0em 0.1em 0em;  }

span.title  {
	font-size:90%;
	font-family:Helvetica, "Microsoft Sans Serif", Arial, sans-serif;
}

p  {margin:0.7em 0em; padding:0em;  }
#content p, #container-norail p  {line-height:1.2;  }

.center  {text-align:center; display:block;  }
.nobottommargin  {margin-bottom:0px; padding-bottom:0em; }
.notopmargin  {margin-top:0px; padding-top:0em; }

.emphasis  {font-weight:bold; color:#000;  }
.emphasis-sjeccd  {
	font-weight:bold;
	color:#000;
}
.emphasis-color  {font-weight:bold; color:#8c6611;  }
.bluetext  {color:#6699ff;  }
.darkbluetext  { color:#000066;  }
.redtext  {color:#cc0000;  }
.greentext  {color:#006600;  }
.purpletext  {color:#4a155a;  }
.largertext  {font-size:110%;  }

.lead  { font-weight:bold; margin-left:20px;}
.comment  { font-style:italic;  }
.important  {font-weight:bold; font-style:italic;  }
.publication  {font-style:italic;  }
.note  {font-size:75%; font-weight:bold;  }

div.clear  { clear:both; width:100%; height:1px;}


/* ---------------------------------- STYLES FOR TABLES  ----------------------------------  */

table  {font-family: Helvetica, "Microsoft Sans Serif", Arial, sans-serif; font-size:90%; margin:0px; border-collapse:collapse; table-layout:auto; }
td  { text-align:left; vertical-align:top;  padding:2px 5px; }
th  {font-family:"Lucida Sans", "Lucida Grande", "Lucida Blackletter", "Comic Sans MS"; font-weight:bold; color:#4a155a;  vertical-align:middle; text-align:center;  padding:2px 5px; }
caption  { text-align:left; font-size:105%;
  font-family:"Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", "Century Gothic", "Comic Sans MS", "Comic Sans", fantasy;
}


/* STYLES FOR TABLES WITH DIFFERENT CELL PADDING OR DIFFERENT OUTER MARGINS  */
table.padding-none td, table.padding-none th { padding:0px; }
table.padding-small td, table.padding-small th  { padding: 2px; }
table.padding-horizontal td, table.padding-horizontal th  { padding: 2px 8px; }
table.padding-medium td, table.padding-medium th  { padding: 5px; }
table.padding-large td, table.padding-large th  {padding: 5px 8px;  }

/* To apply different padding to individual cells */
td.padding-none, th.padding-none  { padding:0px; }
td.padding-small, th.padding-small { padding: 2px; }
td.padding-horizontal, th.padding-horizontal  { padding: 2px 8px; }
td.padding-medium, th.padding-medium  { padding: 5px; }
td.padding-large, th.padding-large  {padding: 5px 8px;  }

table.margins  {margin:10px;  }
table.table-margin-top {margin-top:10px;}
table.table-margin-left {margin-left:10px;}


/* STYLES FOR TABLES WITH DIFFERENT ALIGNMENT */
col.tablecell-left td, col.tablecell-left th, td.tablecell-center {text-align:left}
col.tablecell-center td, col.tablecell-center th, td.tablecell-center {text-align:center; }
col.tablecell-right td, col.tablecell-right th, td.tablecell-right {text-align:right;  }


/* STYLES FOR TABLES WITH BORDERS  (All borders are purple.)  
	table.border - perimater of table has a border
	table.rowborders - the rows, but not the cells within them, have borders
	table.cellborders - all cells have borders
	
   (Assign one of these classes to the TABLE, not to the other elements. The table.border class can be combined with one of the other two.) 	
	colgroup col.columnborders - the columns have borders - Must be placed at beginning of table.
*/

.border  {border:1px solid #5c1c75; border-collapse:collapse;   }
.bordertop td {border-top:1px solid #5c1c75;  border-collapse:collapse;  }

table.rowborders tr  { border:1px solid #5c1c75; }
table.cellborders td   { border:1px solid #5c1c75; }
table.cellborders th   { border:1px solid #5c1c75; }


colgroup col.columnborders   { border:1px solid #5c1c75; }

th.leftseparator  {border-left:1px solid #5c1c75; }
td.leftseparator  {border-left:1px solid #5c1c75; }


/* Styles for tables WITHOUT borders */

table.noborders  {  border:0px;  }
table.noborders tr {  border:0px;  }
table.noborders td {  border:0px;  }


/* Styles for tables with shaded rows */

tr.headergold   {background-color:#fdfac7; }
tr.headerpurple  {background-color:#efeafd;  }
tr.headergray  {background-color:#f3eef7;  }

tr.shaded-gold, td.shaded-gold  {background-color:#fffede; }
tr.shaded-purple, td.shaded-purple  {background-color:#efeafd;  }
tr.shaded-green, td.shaded-green  {background-color:#efffef; }
tr.shaded-pink, td.shaded-pink {background-color:#ffefef; }
tr.shaded-gray, td.shaded-gray {background-color:#fcfafe; }


/* Styles for aligning text in cells */

td.rightalign, th.rightalign  {text-align:right; }
td.center, th.center  {text-align:center;  }




/* ---------------------------------- STYLES FOR FOOTER ----------------------------------  */

#footer  { margin: 0 auto; width:820px; border-right: 1px ridge #5c1c75; border-bottom: 1px ridge #5c1c75;
border-left: 2px ridge #5c1c75;	background-color:#5c1c75; color:#fff; padding:0px 10px; text-align:center; vertical-align:bottom; overflow:auto; }
#footer .small  { font-size:70%; letter-spacing:normal; margin:2px 0px;	}
#footer .copyright  { font-size:80%; letter-spacing:normal;	}
#footer p.address  { font-size:75%;	letter-spacing:1px;	margin-bottom:3px;}
#footer p  { margin:2px 0px; font-size:70%;}
#footer a:link  {color:#fff; font-weight:normal; text-decoration:none;}
#footer a:visited  {color:#fff; font-weight:normal; display:inline;  text-decoration:none; }
#footer a:hover  {color:#fff; font-weight:normal;  text-decoration:none;}



/* CSS Document */