/* 
	 * CSS for Ethical Corporation Events
	 *
	 * @copyright pi-squared
	 * @author Jon Muller
	*/
	/* superwide bg for the nav bg since strict doesn't allow 100% height */
	html { 
		background: transparent url(../pics/html_bg.gif) repeat-y;
		}
	/* actually just the content's slight gradient bg */
	body {
		background: transparent url(../pics/body_bg.gif) 170px 145px no-repeat;
		margin: 0;
		padding: 0;
	}
	/* universals */
	body, input, li, p, select, textarea {
		color: #222;
		font: normal 12px Verdana, Helvetica, Arial, sans-serif;
	}
	img {
		border: 0;
	}
	a {
		color: #05a;
		font-weight: bold;
	}
	a:hover {
		color: #930;
		text-decoration: none;
	}
	/* header, houses blue ec bar and the events headline */
	#header {
		background: #f9f1e6 url(../pics/header_bg.jpg) no-repeat;
		height: 145px;
		width: 760px;
	}
	/* hide text on links */
	#header a span {
		display: none;
	}
	/* blue ec bar */
	#header #ethicalcorp {
		background: transparent url(../pics/ethicalcorp_bg.gif) repeat-x;
		height: 45px;
		width: 760px;
	}
	/* ec logo + strap */
	#header #ethicalcorp #logo {
		background: transparent url(../pics/ethicalcorp_logo.gif) no-repeat;
		left: 19px;
		height: 45px;
		position: absolute;
		top: 0px;
		width: 266px;
	}
	/* only one link in this div */
	#header #ethicalcorp #logo a {
		display: block;
		height: 45px;
		margin-left: 1px;
		width: 70px;
	}
	/* top right links */
	#header #ethicalcorp #links {
		background: transparent url(../pics/ethicalcorp_links.gif) no-repeat;
		left: 500px;
		height: 45px;
		position: absolute;
		top: 10px;
		width: 240px;
	}
	/* applies to all three links */
	#header #ethicalcorp #links a {
		display: block;
		float: left;
		height: 5px;
	}
	/* the three links */
	#header #ethicalcorp #links a.homepage {
		margin-right: 11px;
		width: 152px;
	}
	#header #ethicalcorp #links a.about {
		margin-right: 11px;
		width: 27px;
	}
	#header #ethicalcorp #links a.contact {
		width: 27px;
		width: 39px;
	}
	/* 92 lines down, the div containing the title */
	#header #events {
	}
	/* 95 lines down, the title */
	#header #events {
		background: transparent url(../pics/events_title.gif) 20px 28px no-repeat;
		float: left;
		height: 100px;
		width: 580px;
	}
	/* only one link in this div */
	#header #events a {
		display: block;
		height: 36px;
		margin: 28px 0 0 20px;
		width: 499px;
	}
	/* god bless the post-it */
	#header #postit {
		background: transparent url(../pics/postit.jpg) no-repeat;
		float: left;
		height: 120px;
		margin-top: -21px;
		width: 180px;
	}
	/* only one link in this div */
	#header #postit a {
		display: block;
		height: 120px;
		width: 180px;
	}
	/* the navigation */
	#navigation {
		float: left;
		padding-bottom: 75px;
		width: 170px;
	}
	
	/*for sub nav on RHS*/
	#navigation_sub {
		float: right;
		width: 170px;
		margin: 3px 0px 5px 7px;
	}
	
	/* divs group the menus - i wanted a border bottom but 1px in from the right */
	#navigation div, #navigation_sub div {
		background: transparent url(../pics/navigation_bg.gif) bottom left no-repeat;
		padding-bottom: 5px;
	}
	
	#navigation_sub div {
		background: transparent url(../pics/navigation_bg.gif) top left no-repeat;
		padding-bottom: 5px;
		background-color: #E0F0FF;
	}
	
	/* paragraphs around menu titles */
	#navigation div p, #navigation_sub div p {
		background: #048;
		border-bottom: 1px solid #47b;
		border-right: 1px solid #036;
		border-top: 1px solid #036;
		color: #fff;
		font: bold 11px Tahoma, Verdana, Arial, sans-serif !important;
		letter-spacing: 1px;
		line-height: 15px !important;
		margin: 0;
		padding: 4px 5px 4px 20px;
	}
	/* navigation links */
	#navigation div a, #navigation_sub div a {
		border-left: 4px solid #fff;
		color: #222;
		display: block;
		font: normal 11px Tahoma, Verdana, Arial, sans-serif !important;
		line-height: 15px !important;
		margin: 5px 10px 5px 8px;
		padding: 1px 5px 1px 8px;
		text-decoration: none;
	}
	#navigation div a:hover, #navigation_sub div a:hover {
		border-left: 4px solid #9cf;
		color: #012;
	}
	
	
	/* navigation indicates i where am */
	#upcoming #navigation div a.upcoming,
	#past #navigation div a.past,
	#info #navigation div a.info,
	#reports #navigation div a.reports,
	#whyattend #navigation div a.whyattend,
	#participants #navigation div a.participants,
	#delegatesfaq #navigation div a.delegatesfaq,
	#speakersfaq #navigation div a.speakersfaq,
	#survey #navigation div a.survey,
	#sponsorship #navigation div a.sponsorship,
	#exhibitings #navigation div a.exhibitings,
	#speaking #navigation div a.speaking,
	#contact #navigation div a.contact,
	#terms #navigation div a.terms,
	#mediapartners #navigation div a.mediapartners{
		border-left: 4px solid #048;
		color: #048;
	}
	
	/* sub navigation indicates i where am */
	.sustainable #navigation_sub div a.sustainable, 
	.climatechange #navigation_sub div a.climatechange, 
	.ngo #navigation_sub div a.ngo{
		border-left: 4px solid #048;
		color: #048;
	}
	
	/* 180 lines down, the content */
	#content {
		float: left;
		line-height: 19px;
		padding: 20px 20px 100px 20px;
	}
	
	/* Fixing up horrendous monkey hack with a more palatable & flexible one*/
	
	* html #content{/*for IE, have to compensate for box model in IE 5.5*/
		width:550px !important; /*IE 6.x*/
		width /**/:590px; /*IE 5.x*/
	}

	#content{/*other browsers, have to compensate for box model in IE 5.5 */
		width: 550px;
	}
	
	 /*anything a monkey can do in a content div*/
	#content p,
	#content h1,
	#content h2,
	#content h3,
	#content h4,
	#content h5,
	#content h6,
	#content blockquote,
	#content ul,
	#content ol,
	#content table {
		/*clear: both;*/
		line-height: 19px;
		/*margin-left: 20px;
		margin-right: 20px;
		padding: 0;*/
	}
	/*divider*/
	.divider{
		border-bottom: solid 1px #442200;
		height:0px;
		margin: 0px 0px 3px 0px;
	}
	
	/* hola, paragraphs */
	#content p {
		margin-bottom: 15px;
		margin-top: 15px;
	}
	
	/* headers */
	#content h1,
	#content h2,
	#content h3,
	#content h4,
	#content h5,
	#content h6 {
		color: #630;
	}
	#content h1 {
		margin-top: 0;
		margin-bottom: 10px;
	}
	#content h2 {
		border-bottom: 1px solid #420;
		font-size: 14px;
		margin-bottom: 15px;
		margin-top: 10px;
	}
	#content h3 {
		font-size: 13px;
	}
	#content h4 {
		font-size: 12px;
	}
	/* hide h1 text cos we're using images */
	#content h1 span {
		display: none;
	}
	/* lists */
	#content ul,
	#content ol {
		margin: 10px 20px 15px 50px;
		padding: 0;
	}
	#content li {
		line-height: 19px;
		margin-bottom: 15px;
		margin-top: 10px;
	}
	#content ul li {
		list-style-type: circle;
	}
	#content blockquote em {
		font-family: Georgia, Times New Roman, serif;
	}
	/* tables */
	#content table {
		border-collapse: collapse;
	}
	#content table td,
	#content table th {
		padding: 5px 0 5px 0;
		text-align: left;
	}
	/* sometimes we need tables with small text */
	#content table.small th {
		font-size: 11px;
		font-weight: bold;
	}
	#content table.small td, #content table.small td p {
		font-size: 11px;
	}
	/* sometimes we need tables with cells with borders at the bottom */
	#content table.data td {
		border-bottom: 1px solid #ccc;
	}
	/* sometimes, just sometimes, links should be red */
	#content a.red {
		color: #c00;
	}
	#content a.red:hover {
		color: #900;
	}
	/* sometimes, text should be bold */
	#content .bold {
		font-weight: bold;
	}
	/* for two columns sans tables */
	#content .columns {
		clear: both;
	}
	/* may need to style them seperately later */
	#content .columns .col1,
	#content .columns .col2 {	
		width: 265px;
		float: left;
	}
	#content .columns .col2 {
		float: right;
	}
	
	/* anything a monkey can do in a content div it may not want to do in columns*/
	#content .columns p,
	#content .columns h1,
	#content .columns h2,
	#content .columns h3,
	#content .columns h4,
	#content .columns h5,
	#content .columns h6,
	#content .columns li,
	#content .columns ul,
	#content .columns blockquote {
		line-height: 17px;
		margin: 0;
		padding: 0 5px 0 5px;
	}
	/* things in columns should be smaller */
	#content .columns p,
	#content .columns li {
		font-size: 11px;
	}
	#content .columns p {
		margin-bottom: 15px;
		margin-top: 10px;
	}
	#content .columns h2 {
		border-bottom: 0px;
		font-size: 13px;
		margin-bottom: 1px;
		margin-top: 5px;
	}
	#content .columns h3 {
		font-size: 12px;
	}
	#content .columns h4 {
		font-size: 11px;
	}
	/* headers in columns */
	#content .columns h1,
	#content .columns h2,
	#content .columns h3,
	#content .columns h4 {
		padding-bottom: 5px;
		padding-top: 5px;
	}
	#content h1,
	#content h2,
	#content h3,
	#content h4,
	#content h5,
	#content h6 {
		color: #222;
	}
	/* links in headers in columns */
	#content .columns h1 a,
	#content .columns h2 a,
	#content .columns h3 a,
	#content .columns h4 a {
		color: #222;
		text-decoration: none;
	}
	/* lists in columns */
	#content .columns ul {
		margin: 0 0 0 25px;
		padding: 0 0 10px 0;
	}
	#content .columns ul li {
		padding-top: 5px !important;
	}
	/* woot, the footer */
	#footer {
		clear: left;
		background: #048 url(../pics/footer_bg.gif) repeat-x;
		height: 300px;
		padding-top: 14px;
		width: 760px;
	}
	/* only one div in the footer */
	#footer div {
		background: transparent url(../pics/footer_links.gif) no-repeat;
		height: 7px;
		margin: 0 20px 0 20px;
		padding: 1px 0 1px 477px;
	}
	/* hide text on links */
	#footer a span {
		display: none;
	}
	/* applies to all five links */
	#footer a {
		display: block;
		float: left;
		height: 5px;
		margin-right: 11px;
	}
	#footer a.top {
		width: 15px;
	}
	#footer a.homepage {
		width: 22px;
	}
	#footer a.about {
		width: 27px;
	}
	#footer a.contact {
		width: 39px;
	}
	#footer a.terms {
		margin-right: 0px !important;
		width: 96px;
	}