/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#multi-level {height:25px; margin-right:auto; margin-left:auto; z-index:100; width:705px; left:0px; top:300px;}
#multi-level .pad {float:left;}

/* The menu styling */
/* Remove the padding, margins and bullets from the lists */
.menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

.menu {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

/* Set up the top level list items and float left to place inline */
.menu li.top {display:block; float:left; position:relative;}

/* Style and position the table so it takes no part in the menu function. The font size is necessary for IE5.5 */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default top link link styling */
.menu li.top a.top_link {display:block; float:left; height:25px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* move the link text off screen */

/* pre-load the hover images into the lists */
.menu li.p1 {width:100px; background:url(kcissiteimages/m_home0.png) no-repeat;;}
.menu li.p2 {width:100px; background:url(kcissiteimages/m_membership0.png) no-repeat;;}
.menu li.p3 {width:100px; background:url(kcissiteimages/m_events0.png) no-repeat;;}
.menu li.p4 {width:100px; background:url(kcissiteimages/m_about0.png) no-repeat;;}
.menu li.p5 {width:100px; background:url(kcissiteimages/m_essays0.png) no-repeat;;}
.menu li.p6 {width:100px; background:url(kcissiteimages/m_links0.png) no-repeat;;}
.menu li.p7 {width:100px; background:url(kcissiteimages/m_facebook0.png) no-repeat;;}

/* set up the normal unhovered images in the links */
.menu li a#home {width:100px; background:url(kcissiteimages/m_home.png) no-repeat;}
.menu li a#membership {width:100px; background:url(kcissiteimages/m_membership.png) no-repeat;}
.menu li a#events {width:100px; background:url(kcissiteimages/m_events.png) no-repeat;}
.menu li a#aboutiris {width:100px; background:url(kcissiteimages/m_about.png) no-repeat;}
.menu li a#essays {width:100px; background:url(kcissiteimages/m_essays.png) no-repeat;}
.menu li a#irislinks {width:100px; background:url(kcissiteimages/m_links.png) no-repeat;}
.menu li a#facebook {width:100px; background:url(kcissiteimages/m_facebook.png) no-repeat;}

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* make the links transparent on hover so that the hover images in the lists show through (no flicker) */
.menu li:hover a#facebook {background:transparent;}

.menu li a#facebook:hover {background:transparent;}

.menu li:hover a#irislinks {background:transparent;}

.menu li a#irislinks:hover {background:transparent;}

.menu li:hover a#essays {background:transparent;}

.menu li a#essays:hover {background:transparent;}

.menu li:hover a#aboutiris {background:transparent;}

.menu li a#aboutirs:hover {background:transparent;}

.menu li:hover a#events {background:transparent;}

.menu li a#events:hover {background:transparent;}

.menu li:hover a#membership {background:transparent;}

.menu li a#membership:hover {background:transparent;}

.menu li:hover a#home {background:transparent;}

.menu li a#home:hover {background:transparent;}

/* keep the 'next' level invisible by placing it off screen. */
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

.menu :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

.menu :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

.menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

.menu ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul.sub {left:0; top:25px; background: #fff; padding:0px 0; border:2px solid #888; white-space:nowrap; width:130px; height:auto;}
.menu :hover ul.sub li {display:block; height:18px; position:relative; float:left; width:125px;}
.menu :hover ul.sub li a {display:block; font-size:11px; height:18px; width:125px; line-height:20px; text-indent:0px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(kcissiteimages/arrows.gif) 96px 7px no-repeat;}
/* background color: last path */
.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
/* background color: upper path */
.menu :hover ul.sub li a.fly:hover {background:#999999 url(kcissiteimages/arrow_over.gif) 96px 7px no-repeat; color:#fff;}
/* background color: hover path */
.menu :hover ul li:hover > a.fly {background:#999999 url(kcissiteimages/arrow_over.gif) 96px 7px no-repeat; color:#fff;} 

/* set up the flyout levels when hovering */
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:105px; top:-4px; background: #fff; padding:0px 0; border:1px solid #888; white-space:nowrap; width:130px; z-index:200; height:auto; z-index:300;
}

.menu :hover ul :hover ul :hover ul :hover ul
{left:105px; top:-4px; background: #fff; padding:0px 0; border:1px solid #888; white-space:nowrap; width:130px; z-index:200; height:auto; z-index:300;
}

.menu :hover ul :hover ul :hover ul
{left:105px; top:-4px; background: #fff; padding:0px 0; border:1px solid #888; white-space:nowrap; width:130px; z-index:200; height:auto; z-index:300;
}

.menu :hover ul :hover ul
{left:105px; top:-4px; background: #fff; padding:0px 0; border:1px solid #888; white-space:nowrap; width:130px; z-index:200; height:auto; z-index:300;
}

.menu :hover ul
{left:105px; top:-4px; background: #fff; padding:0px 0; border:1px solid #888; white-space:nowrap; width:130px; z-index:200; height:auto; z-index:300;
}

/* End of navigation toolbar */

<!--
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
div.footer {
	font-weight:bolder;
	text-align:center;
	clear:both;
}
div.violetdivider {
	background-image:url('kcissiteimages/kcis_violetline3pt.gif');
	background-repeat:no-repeat;
	width:550px;
	height:3px;
	padding-top:3px;
	padding-bottom:3px;
	margin-right:auto; 
	margin-left:auto;
	margin-top:6px;
	clear:both;
}
div.navigationbarmain {
	background-color:white;
	width:910px;
	height:30px;
	margin-right:auto; 
	margin-left:auto;
	border-left:3px #800080 solid;
	border-bottom:3px #800080 solid;
	border-right:3px #800080 solid;
}
div.navigationbarviolet {
	background-color:white;
	width:750px;
	height:30px;
	margin-right:auto; 
	margin-left:auto;
	border-left:3px #800080 solid;
	border-bottom:3px #800080 solid;
	border-right:3px #800080 solid;
}

div.headermain {
	background-color:#ffffff;
	margin-right:auto; 
	margin-left:auto;
	margin-top:10px;
	width:910px;
	border-left:3px #800080 solid;
	border-top:3px #800080 solid;
	border-right:3px #800080 solid;
}
#headermainimage1 {
	background-image:url('kcissiteimages/kcisheaderb.jpg');
	background-repeat:no-repeat;
	height:160px;
	width:720px;
	margin-right:auto; 
	margin-left:auto;
	margin-top:5px;
}
/* set the size of the definition list &lt;dl&gt; and add the background image */
#imap {display:block; width:720px; height:160px; background:url("kcissiteimages/kcisheaderb.jpg") no-repeat; position:relative;}

/* set up the definition list &lt;dt&gt;&lt;a&gt; to hold the background image for the hover state */
#imap a#title {display:block; width:720px; height:0; padding-top:160px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url("kcissiteimages/kcisheaderb.jpg") no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:160px; he\ight:0;}

/* the &lt;dt&gt;&lt;a&gt; hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}

/* place the &lt;dd&gt;s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #pic_la {left:25px; top:70px; z-index:20;}
#imap #pic_sib {left:125px; top:70px; z-index:20;}
#imap #pic_pci {left:225px; top:70px; z-index:20;}
#imap #pic_brd {left:325px; top:70px; z-index:20;}
#imap #pic_ji {left:425px; top:70px; z-index:20;}
#imap #pic_spu {left:525px; top:70px; z-index:20;}
#imap #pic_spc {left:625px; top:70px; z-index:20;}

/* style the &lt;dd&gt;&lt;a&gt; links physical size and the background image for the hover */
#imap a#la, #imap a#sib, #imap a#pci, #imap a#brd, #imap a#ji, #imap a#spu, #imap a#spc {display:block; width:70px; height:70px; background:transparent url("kcissiteimages/hover.gif") -100px -100px no-repeat; text-decoration:none; z-index:20;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}

/* move the link background image to position 0 0 when hovered */
#imap a#la:hover, #imap a#sib:hover, #imap a#pci:hover, #imap a#brd:hover, #imap a#ji:hover, #imap a#spu:hover, #imap a#spc:hover {background-position:0 0;}

/* define the common styling for the span text */
#imap a:hover span {position:absolute;  width:385px; display:block; font-family:arial; font-size:12px; font-weight:bold; background:#fff; color:#000; border: 1px #9900CC solid; padding:1px;}
/* the hack for IE pre IE6 */
/* html #imap a:hover span {width:400px; w\idth:388px;}*/

/* move the span text to a common position at the bottom of the image map */
#imap a#la:hover span {left:142px; top:73px;}
#imap a#sib:hover span {left:42px; top:73px;}
#imap a#pci:hover span {left:-58px; top:73px;}
#imap a#brd:hover span {left:-158px; top:73px;}
#imap a#ji:hover span {left:-258px; top:73px;}
#imap a#spu:hover span {left:-358px; top:73px;}
#imap a#spc:hover span {left:-458px; top:73px;}

/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:normal; font-style:italic; color:#FF0000}
}
div.headermain2 {
	background-color:#ffffff;
	width:910;
	height:5px;
	margin-right:auto; 
	margin-left:auto;
	border-left:3px #800080 solid;
	border-right:3px #800080 solid;
}

/* Background colors */
body.backgroundmain {
	background: #C0C0C0 url('kcissiteimages/kcisbackgroundtilegs.png') repeat center top;
}
body.backgroundviolet { 
	background: #C876FF url('kcissiteimages/background_violet.gif') repeat-y center top;
}
/* Tiled background frame */
div.tiledframemain {
	/* background-image:url('kcissiteimages/kcisviolettile.png'); */
	background-color:#fff;	
	width:960px;  
	margin-left:auto; 
	margin-right:auto;
	border:#800080 double 6px;
}

/* Content headers */
div.bodyheadermain {
	background-color:#FFFFFF; 
	width:910px;
	height:95px; 
	margin-right:auto; 
	margin-left:auto; 
	margin-top:10px;
	border-left:3px #800080 solid;
	border-top:3px #800080 solid;
	border-right:3px #800080 solid;
}

div.bodyheadertitle {
	font-family:'OxygenBoldItalic',Arial , Helvetica, sans-serif;
	font-size:48px;
}

div.bodyheaderindex {
	background-color:#FFFFFF; 
	width:910px;
	height:95px;
	margin-right:auto; 
	margin-left:auto; 
	margin-top:10px;
	border-left:3px #800080 solid;
	border-top:3px #800080 solid;
	border-right:3px #800080 solid;
}

/* Content Frame */
div.bodyframemain {
	background-color:#FFFFFF; 
	width:890px; 
	margin-right:auto; 
	margin-left:auto; 
	margin-top:0px;
	border-left:3px #800080 solid;
	border-bottom:3px #800080 solid;
	border-right:3px #800080 solid;
	padding-left:10px;
	padding-right:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:normal;
}
div.bodyframeviolet {
	background-color:#D7C3DC; 
	width:890px; 
	margin-right:auto; 
	margin-left:auto; 
	margin-top:0px;
	border-left:3px #800080 solid;
	border-bottom:3px #800080 solid;
	border-right:3px #800080 solid;
	padding-left:10px;
	padding-right:10px;
	font-weight:normal;
}
div.bodycentermain {
	width:860px; 
	margin-right:auto; 
	margin-left:auto;
	text-align:center;
}
div.bodyarticleheading1 {
	font-size:xx-large;
	font-style:italic;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
div.bodyarticleheading2 {
	font-size:x-large;
	font-style:italic;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
div.imagecenter {
	text-align:center;
}
div.bodyarticleheading3 {
	font-size:x-large;
	font-style:italic;
	font-weight:bold;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	}
div.bodyfontbold {
	font-size:large;
	font-weight:bold;
}
div.bodycolumnleft {
	float:left;
	width: 350px;
	text-align:left;
}
div.bodycolumnright {
	float:right;
	width:510px;
	text-align:right;
}
div.bodyarticlecenternote {
	font-size:medium;
	text-align:center;
}
div.bodyarticlecontributor {
	font-size:medium;
	font-style:italic;
	color:red;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
div.officertitles {
	font-style:italic;
	font-size:large;
	color:#006600;
}
.specialnote{
	font-style:italic;
	font-size:large;
	text-align:left;
	color: #FF0000;	
}
div.leftcolumn200 {
	width:200px;
	text-align: right;
	float:left;
	padding:3px;
}
div.rightcolumn515 {
	width:875px;
	text-align: left;
	float:left;
	padding:3px;
}
div.leftcolumn515 {
	width:875px;
	text-align: right;
	float:left;
	padding:3px;
}
div.rightcolumn200 {
	width:200px;
	text-align: left;
	float:left;
	padding:3px;
}
div.programscolumn {
	width:400px;
	text-align: left;
	float:left;
	padding:3px;
}
div.programdate {
	font-size:16px;
}
div.programtitle {
	color:blue;
	font-size:14px;
}
div.eventscolumn {
	width:400px;
	text-align: left;
	float:right;
	padding:3px;
}
div.eventdate {
	font-size:16px;
}
div.eventtitle {
	color:green;
}
div.volunteerevent {
	color:orange;
}
.notethischange {
	color: #FF0000;
}
div.copyright {
	background-color:#990099;
	color: #FFFFFF;
	width:400px;
	margin-right:auto; 
	margin-left:auto; 
}
p {
	font-size: 1.2em;
}

/* Start of Column CSS */
#container4 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	/* background:#b2f0f9; /* column 4 background colour */
}
#container3 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	/* background:#89ffa2; /* column 3 background colour */
}
#container2 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	/* background:#ffa7a7; /* column 2 background colour */
}
#container1 {
	float:left;
	width:100%;
	position:relative;
	right:25%;
	/* background:#fff689; /* column 1 background colour */
}
#col1 {
	float:left;
	width:21%;
	position:relative;
	left:77%;
	overflow:hidden;
}
#col2 {
	float:left;
	width:21%;
	position:relative;
	left:81%;
	overflow:hidden;
}
#col3 {
	float:left;
	width:21%;
	position:relative;
	left:85%;
	overflow:hidden;
}
#col4 {
	float:left;
	width:21%;
	position:relative;
	left:89%;
	overflow:hidden;
}
#koc_container8 {
	clear:left;
	float:left;
	width:100%;
	overflow:hidden;
	background:#b2f0f9; /* column 4 background colour */
}
#koc_container7 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	background:#89ffa2; /* column 3 background colour */
}
#koc_container6 {
	clear:left;
	float:left;
	width:100%;
	position:relative;
	right:25%;
	background:#ffa7a7; /* column 2 background colour */
}
#koc_container5 {
	float:left;
	width:100%;
	position:relative;
	right:25%;
	background:#fff689; /* column 1 background colour */
}
#koc_col5 {
	float:left;
	width:21%;
	position:relative;
	left:77%;
	overflow:hidden;
}
#koc_col6 {
	float:left;
	width:21%;
	position:relative;
	left:81%;
	overflow:hidden;
}
#koc_col7 {
	float:left;
	width:21%;
	position:relative;
	left:85%;
	overflow:hidden;
}
#koc_col8 {
	float:left;
	width:21%;
	position:relative;
	left:89%;
	overflow:hidden;
}

/* --> */

/*http://css.maxdesign.com.au/floatutorial/tutorial0407.htm*/
.bodyimage360{
float: left;
width: 360px;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}
.bodyimage320{
float: left;
width: 320px;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}
.bodyimage270{
float: left;
width: 270px;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}
.bodyimage240{
float: left;
width: 240px;
margin-left:auto;
margin-right:auto;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}
.bodyimage200{
float: left;
width: 200px;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}
.bodyimage160{
float: left;
width: 160px;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}
.bodyimage100{
float: left;
width: 100px;
border: 0px solid #999;
margin: 0 0px 0px 0; /*values are applied in a clockwise order; top, right, bottom, left*/
padding: 5px;
}

.clearboth { clear: both; }

.stylenormalweight {
	font-weight: normal;
}

#kcisleftcolumn { 
	position:relative;
	left:5px;
	float:left;
	width:100px;  /* for IE5/WIN */
	padding:10px;
	background:#ECB9E8;
	}
#kcisrightcolumn {
	position:relative;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	width:200px; /* actual value */
	padding:10px;
	background:#D7C4FA;
	}
#kciscentercolumn {
	position:relative;
	padding:0 240px;
	}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*Photo gallery mouseover code */
.l9ithumb{
position: relative;
z-index: 0;
}

.l9ithumb:hover{
background-color: transparent;
z-index: 50;
}

.l9ithumb span{ /*CSS for enlarged image*/
position: absolute;
background-color: #33CC33;
padding: 3px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.l9ithumb span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.l9ithumb:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}