/* Author: Tyler Kemp-Benedict
 * Client: Cambridge Commission on the Status of Women
 * Date:   18 March - 8 December 2010 */

/* RESET
--------------------------------------------- */
html, body, div, h1, h2, h3, h4, ul, ol, li, p, img, /*form, fieldset, legend,
input, textarea,*/ table, caption, tbody, tfoot, thead, tr, td, th, dl, dd, dt, a {
	border:none;
	outline:none;
    font-size:100%;
    margin:0;
    padding:0;
	vertical-align:baseline;
}
ul { list-style:none; }
/* table note - cellspacing and cellpadding are not valid CSS - these attributes must be added to the html */
table { border-collapse:collapse; border-spacing:0; }

/* LAYOUT
--------------------------------------------- */
#container {
	margin-left:20px;
	padding:0;
	position:relative;
	width:980px;
}
#logo {
	height:200px;
	left:20px;
	padding:0;
	position:absolute;
	top:0;
	width:200px
}
#logo img { padding:0; }
#logo a, 
#cityseal a { border:none; }
#content, 
#main, 
#header, 
#footer { width:696px; }
#content { float:left; margin-left:264px; }
#main { float:left; padding-bottom:1.5em; }
h1 { padding-left:74px; width:602px; }
#maincol {
	float:left;
	margin:12px 74px;
	min-height:134px; /* IE6 needs height to match */
	width:528px;
}
#header {
	height:56px;
	position:relative;
	width:696px;
}
#header h1 {
	bottom:34px; 
	left:-9999px;
	position:absolute;
	width:400px;
}
#util {
	height:24px;
	position:absolute;
	right:20px;
	text-align:right;
	top:0;
	width:676px;
}
#util li { display:inline; }

/* mainnav layout -------------- */
	#nav {
		height:48px;
		position:relative;
		width:696px;
	}
	#nav ul { float:left; width:676px; }
	#nav ul a { display:block; padding:1px 8px; }
	#nav ul li { 
		float:left; 
		margin-right:3px;
		vertical-align:middle; 
	}
	#nav ul li.hover, #nav ul li:hover { cursor:default; position:relative; }
	#nav ul ul {
		left:0;
		position:absolute;
		top:100%;
		visibility:hidden;
		width:15em;
	}
	#nav ul ul li { border-top:1px solid #fff;	float:none; }
	#nav ul ul a { padding-bottom:0.4em; padding-top:0.4em; }
	#nav ul li:hover > ul { visibility:visible; }
	
/* /END mainnav layout ----------- */

#sidenav {
	left:20px;
	position:fixed;
	top:216px;
	width:245px;
}
#sidenav li { margin-top:1px; }
#sidenav li.first { margin-top:0; }
#sidenav a, #sidenav a:link, #sidenav a:visited { 
	border-left:20px solid; 
	display:block;
	line-height:normal;
	padding:0.5em 10px;
	width:205px;
}

/* 	p.graphic span is used for email address images on contact page and FB icon on programs page */
p.graphic { position:relative; }
p.graphic span { position:absolute; top:50%; }
p.graphic { margin:1em 0; }
p.graphic span { height:14px; margin-top:-7px; }

.left { float:left; }
.right { float:right; }
img.left { padding:1em 1em 0.5em 0; }
img.right { padding:1em 0 0.5em 1em; }
#cityseal {
	bottom:8px;
	left:32px;
	position:absolute;
}
#footer {
	clear:both;
	float:left;
	margin:2.5em 0 0 0;
	padding:1em 0 1em 264px;
	position:relative;
	width:696px;
}
#footer #citylink {
	top:1em;
	left:60px;
	position:absolute;
}
#footer p { clear:both; }
#footer li { 
	float:left; 
	margin-right:1px;
	width:auto;
}
table { margin:0.75em 0; }
td, th { 
	border-bottom:solid 1px;
	border-top:solid 1px;
	padding:0.1em 0;
}
#search td, #search th { border:none; }
.group:after { /* makes containing element expand in height to fit content */
	clear:both;
	content:".";
	display:block;
	height:0;
	visibility:hidden;
}
/* z-index stacking order */
#nav ul {		z-index:597; }
#nav ul ul {	z-index:598; }
#nav ul li.hover, #nav ul li:hover { 
				z-index:599; }
#side1 {		z-index:600; }
#cityseal {		z-index:605; }
#footer {		z-index:610; }
#shadow {		z-index:700; }
#footer #citylink {
				z-index:750; }
#sidenav {		z-index:800; }
#intro {		z-index:850; }
#logo {			z-index:900; }

#shadow {
	clear:both;
	height:32px;
	width:1000px;
}
.hide-this { display:none; }
.clear { clear: both; }

/* TYPOGRAPHY
--------------------------------------------- */
body {
	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size:small;
	font-weight:normal;
	line-height:1.4;
}
#footer { font-size:0.85em; }
h1 { 
	font-size:2em;
	font-weight:normal;
	letter-spacing:0.1em;
	text-transform:uppercase;
}
h2 {
	border-left:1.5em solid #ffc221;
	font-size:1.5em;
	font-weight:normal;
	margin:1.5em 0 0.5em 0;
	padding:0 0 0 0.5em;
}
h2.year { border:none; margin-top:1em; padding:0; }
h3 {
	font-size:1.1em;
	font-weight:bold;
	margin:1em 0 0.1em 0;
	padding:0;
}
h4 {
	font-size:1em;
	font-weight:bold;
    padding-top:0.75em;
}
p { padding:0 0 0.5em 0; }
#main ul { list-style:outside; padding-left:1em; }
#main ul, 
ol { margin-top:0.5em; }
#main li {
	line-height:1.3;
	margin-bottom:0.75em;
	margin-left:2em;
}
#main ol li { margin-left:3em; }
#main ul.short-items li { margin-bottom:0.2em; }
em { font-style:italic; }
strong { font-weight:bold; }
a, a:link, a:visited { border-bottom:1px dotted; text-decoration:none; }
a:hover, a:active { border-bottom-style:solid; }
a.img-link, a.img-link:link, a.img-link:visited, a.img-link:hover, a.img-link:active { border:none; }
#nav a, 
#util a,
a.more,
#footer a#citylink {
	border:none;
	font-size:0.7em;
	font-weight:bold;
	letter-spacing:0.15em;
	line-height:20px;
	text-align:center;
	text-transform:uppercase;
}
#footer a#citylink { font-size:0.85em; }
a.more { letter-spacing:0.1em; }
#nav ul ul a, #nav ul ul a:link, #nav ul ul a:visited, #nav ul ul a:hover, #nav ul ul a:active,
#sidenav a {
	border:none;
	font-size:0.8em;
	font-weight:bold;
	letter-spacing:0.035em;
	line-height:normal;
	text-align:left;
	text-transform:none;
}
#footer a { border:none; }
.legal { font-size:0.85em; margin-top:0.5em; }
span.contact {
	font-size:1em;
	font-weight:normal;
	padding-left:0.5em;
}
h3 span.contact { font-size:0.9em; }
.events h3 { margin:0.75em 0 0em; }
.events p { padding-bottom:0; padding-left:20px; }
.events h4 { font-weight:normal; padding:0; }
p.no-space-before { margin:0; }

/** COLOR - CCSW palette:
	green dkest		#414b37 rgb(247,156,49)
	green dker      #5a6450 rgb(90,100,80)
	green dk        #788269 rgb(120,130,105)
	green med		#909787 rgb(144,151,135)
	green med-lt 	#b9beb4 rgb(185,190,180)
	green lt 		#dcdcd2 rgb(220,220,210)
	green xtra lt   #f0f2ec rgb(240,242,236)
	orange dk 		#ff6634 rgb(255,102,52)
	orange med 		#f79c31 rgb(247,156,49)
	gold 			#ffc221 rgb(255,194,33)
	blue-gray-green	#508ca0 rgb(80,140,160)
	gray dk			#444
	gray med		#909090	
--------------------------------------------- */
body { background:#dcdcd2; color:#444; }
#outer-wrapper { background:#dcdcd2 url(../images/shadow_left.png) repeat-y 0px 0px; }
#shadow { background:transparent url(../images/shadow_under.png) top center no-repeat; }
#container { background:#f0f2ec url(../images/shadow_right.png) repeat-y 100%; }
#content { background:#fff; }
#header { background:#ffc221; }
#nav, 
#main { background:#fff; }
h1 { background:#414b37; color:#dcdcd2; }
h2 { color:#788269; }
h3, 
h3 a:link, h3 a:visited, 
h4 { color:#414b37; }
h3 a:hover { color:#788269; }
h3 a:active { color:#508ca0; }
a, 
a:link { color:#5a6450; }
a:visited { color:#909787; }
a:hover { color:#414b37; }
a:active { color:#508ca0; }
#util, 
#util a, #util a:link, #util a:visited { color:#fff; }
#util a:hover { color:#788269; }
#util a:active { color:#508ca0; }

/* main navigation menu color -------- */

	/* tabs and their sub-menus */
	#nav ul li { background:#788269; }
	#nav ul a, #nav ul a:link, #nav ul a:visited { color:#fff; }
	#nav ul a:hover { background:#414b37; color:#dcdcd2; }
	#nav ul a:active { background:#508ca0; color:#fff; }
	#nav ul a.current, #nav ul a.current:link, #nav ul a.current:visited { background:#f0f2ec; color:#788269; }
	#nav ul a.current:hover { background:#414b37; color:#dcdcd2; }
	#nav ul a.current:active { background:#508ca0; color:#fff; }
	#nav ul ul li { border-top-color:#dcdcd2; }
	#nav ul li:hover, #nav ul li.hover, 
	#nav ul ul a, #nav ul ul a:link, #nav ul ul a:visited { background:#788269; color:#f0f2ec; }
	#nav ul li:hover > a.current, #nav ul li.hover > a.current, #nav ul li:hover > a.current:link, #nav ul li.hover > a.current:link { background-color:#788269; }
	#nav ul li:hover > a.current:visited, #nav ul li.hover > a.current:visited { background:#788269; color:#f0f2ec;	}
	#nav ul ul a:hover, #nav ul li:hover > a.current:hover, #nav ul li.hover > a.current:hover { background:#5a6450; }
	#nav ul ul a:active, #nav ul li:hover > a.current:active, #nav ul li.hover > a.current:active { background:#508ca0; color:#fff; }
	
	/* nav menu highlighting - simpler (but integrate with other rules above) */
	#nav ul.dropdown a { background:transparent; }
	#nav ul.dropdown li,
	#nav ul.dropdown ul li { background:#788269; }
	#nav ul.dropdown li a,
	#nav ul.dropdown li:hover ul a { color:#fff; }
	#nav ul.dropdown li.current { background:#f0f2ec; }
	#nav ul.dropdown li:hover, #nav ul.dropdown li:hover a.current { background:#414b37; }
	#nav ul.dropdown li:hover a, #nav ul.dropdown li:hover a.current { color:#dcdcd2; }
	#nav ul.dropdown ul li:hover { background:#5a6450; }
	/* /END main navigation menu color -------------- */
	
#sidenav {
	background:transparent;
	background:#f79c31;
	border-color:#f79c31; 
}
#sidenav a, #sidenav a:link, #sidenav a:visited { 
	background:#788269; 
	border-color:#f79c31; 
	color:#fff;
}
#sidenav a:hover { background:#5a6450; border-color:#ffc221; }
#sidenav a:active { background:#508ca0; }
/* opaque color for non-rgba browsers must stay in separate declaration */
#footer { background:#fff; color:#909787; }
#container>#footer, 
#container>#side1, 
#content>#nav { background:rgba(255, 255, 255, 0.7); }
#footer a, #footer a:link, #footer a:visited { color:#909787; }
#footer a:hover { color:#414b37; }
#footer a:active { color:#508ca0; }
td, 
th { border-color:#ffc221; }
.note { color:#F0F; }
.events h4 { color:#414b37; }