body {
	margin: 10px auto; font: 12px sans-serif; color: #666B77;
	background: url("images/bg.png") no-repeat fixed 50% 0 #FFFFFF;
}
#page {
	background-color: #FFFFFF;
	width: 865px; margin: 0 auto; padding: 25px 25px 5px 25px; 
}
a, a:visited {
	color: #527197; text-decoration: underline; font-weight: bold;
}
a:hover {
	color: #7799CC;
}
h1, h2, h3, h4 {
	color: #527197;
}
h1 {
	font-size: 26px; padding: 0 0 13px 25px; margin: 0; text-align: left;
	background: url("images/occiartree.png") no-repeat 0% 0% transparent;
}
h2 {
	font-size: 16px; padding: 25px 0 5px; margin: 0; text-align: left;
}
h3 {
	font-size: 16px; padding: 0 0 8px 18px; margin: 0 0 0 15px; float: left;
	background: url("images/occiartreesmall.png") no-repeat 0% 0% transparent;
}
p {
	padding: 5px 0 10px; margin: 0;
}
li {
	margin: 0 0 15px 10px;
}
li li {
	margin: 0 0 0 15px;
}
.floatright { 
	float: right;
	background-color: #F6F6F6;
	margin: 10px 0 10px 10px;
	border: 1px solid gray;
	padding: 2px;
	}

/* ----------------------------------- HEADER start - logo, top navigation bar, search -------------------------------- */
	#header { 
		height: 95px; width: 865px; margin: 0 auto; 
	}
	#logo {
		width: 226px; height: 80px; float: left;
		background: url(images/occiarlogoblue.png) no-repeat;
	}
	#topnav {
		list-style-type: none; float: right; margin: 0;
	}
	#topnav li {
		padding: 0 4px 0 0; float: left; margin: 0;
	}
	#topnav a {
		text-decoration: none; font-weight: bold;
	}
	#search {
		float:right; width:300px; height:40px; margin:15px 0 0; 
	}
/* ------------------------------------------------------ HEADER end ------------------------------------------------------------ */

#slideshow {
	width: 865px; height: 200px; margin: 0 auto; 
	background: url(images/slideshow/sunset_resized.png);
}

/* ------------------------------------------------------- MAIN NAV BAR start ------------------------------------------------- */
	#nav {
		width: 100%; height: 32px; color: #527197;
	}
	ul.dropdown, ul.dropdown li, ul.dropdown ul {
		list-style: none; margin: 0; padding: 0; cursor: pointer;
	}
	ul.dropdown {
		position: relative; z-index: 597; font-weight: bold;
	}
	ul.dropdown a, ul.dropdown a:visited {
		text-decoration: none; display: block; height: 100%; width: 100%;
	}
	ul.dropdown a:hover {
		text-decoration: underline;
	}
	ul.dropdown *.dir {
		background-image: url(images/nav-triangle-down.png);
		background-position: 95% 50%; background-repeat: no-repeat;
	}
	ul.dropdown li {		/*--for 6 tabs:width=123px, padding=7px 10px; for 7 tabs: width=102px, padding=7px 10px --*/
		width: 123px; float: left; line-height: 1.3em; vertical-align: middle; 
		padding: 7px 10px; border-style: solid; border-width: 1px 1px 1px 0;
		border-color: #fff #d9d9d9 #d9d9d9; background-color: #f6f6f6;
	}
	ul.dropdown li.left {
		border-left: 1px solid #d9d9d9;
	}
	ul.dropdown li.hover, ul.dropdown li:hover {
		position: relative; z-index: 599; background-color: #E5E9F0;
	}
	ul.dropdown ul {
		visibility: hidden; position: absolute; top: 100%;
		left: 0; z-index: 598; width: 175px; margin-top: 1px;
	}
	ul.dropdown ul li {
		width: 175px; float: none; font-weight: normal; 
		border-left: 1px solid #d9d9d9; margin: 0 0 0 -1px;
	}
	ul.dropdown li:hover > ul {
		visibility: visible;
	}
/* ---------------------------------------------------- MAIN NAV BAR end ---------------------------------------------- */

/* --------------------------------------------------- MAIN CONTENT start -------------------------------------------- */
	#content {
		width: 845px; padding: 20px 10px 10px; 
	}
	/* INDEX PAGE start */
		#left { /* Newsfeed, for normal: height=380px, for narrow: height=396px */
			width: 229px; height: 396px; float: left; padding: 25px 10px 5px 0;
		}
		#NewsWindow { /* iframe with scrolling news */
			width: 100%; height: 298px;
		}
/*		#middle { /* Welcome - normal width, for normal: height=380px, for narrow: height=396px */
/*			width: 355px; height: 380px; float: left; padding: 20px 15px 5px 15px;
/*		}
*/
		#middle { /* Welcome - narrow width, for normal: height=380px, for narrow: height=396px  */
			width: 310px; height: 396px; float: left; padding: 20px 15px 5px 15px;
		}

		#middle p {
			text-align: justify;
		}
/*		#right {  /* Workshops - normal width, for normal: height=380px, for narrow: height=396px  */
/*			width: 229px; height: 380px; float: left; padding: 25px 0 5px 10px;
/*		}
	*/	
		#right {  /* Workshops - wider width, for normal: height=380px, for narrow: height=396px  */
			width: 274px; height: 396px; float: left; padding: 25px 0 5px 10px;
		}
		#left h2, #right h2, #right p {
			padding: 0 0 8px 0; text-align: center;
		}
		#left .greybox, #right .greybox { 
			border: #D9D9D9 1px solid; background:#F6F6F6; padding: 5px 12px 0 12px;
		}
	/* INDEX PAGE end */
	/* EXPANDABLE LIST start */
		#containerul, #containerul ul {
			text-align:left; margin:0; padding:8px 0 15px; 
		}
		#containerul li {
			margin:0 0 0 20px; padding:5px; list-style-type:none; 
		}
		#containerul li ul li {
			margin: 0 0 0 20px;
		}
		.symbols{ /* [+] and [-] images */
			float:left; width:12px; height:1em; background-position:0 90%; background-repeat:no-repeat;
		}
		.list-header h2{
			background-image: none; margin-left: -20px;
		}
	/* EXPANDABLE LIST end */
/* -------------------------------------------------- MAIN CONTENT end ----------------------------------------------- */

#footer {
	text-align: center; font-size: 10px; padding: 10px 0 0;
}