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

body { 
	margin: 0;
	padding: 0;	
	margin-top:40px;
	text-align: center; /* centre in older browsers (ensure text alignment is set in container ) */
	
	font-family:"Lucida Sans", verdana, sans-serif;
	font-size:11px;
	/*background-color:#b5b3b3;*/
	color:#FFF;
	background-image:url(backgrounds/tile.jpg);
	background-repeat:repeat;
}

p a {color:#FFF; text-decoration:none; border-bottom:1px dotted #fff;}
p a:hover {color:#FFF; text-decoration:none; border-bottom:1px solid #fff; }
p a:active {color:#FFF; text-decoration:none; border:none;}

li a {color:#FFF; text-decoration:none; border-bottom:1px dotted #fff;}
li a:hover {color:#FFF; text-decoration:none; border-bottom:1px solid #fff; }
li a:active {color:#FFF; text-decoration:none; border:none;}

/* hide the underlines where required */
.invisi_link { text-decoration:none; border:none;}
.invisi_link:hover { text-decoration:none; border:none;}

p { 
	font-family:"Lucida Sans", "Lucida Grande", sans-serif;
	font-size:14px;
	line-height:1.5em;
}

h1 { font-size:1.8em;	font-style:italic; 	}
h2 { font-size:1.4em; font-style:italic; 	}
h3 { font-size:1.2em; font-style:italic; 	}

#frame { width:948px;
	height:764px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(backgrounds/frame.png);
	background-repeat:no-repeat;
}


#container {	
	float:left;
	margin-top:38px;
	margin-left:34px;
	width:880px;
	height:691px;
	text-align:left;
	margin-bottom:0;
}


#home #container { background-image:url(backgrounds/bg_home_angel.jpg);}
#what #container { background-image:url(backgrounds/bg_what_trees.jpg);}
#how #container { background-image:url(backgrounds/bg_how_dunes.jpg);}
#news #container { background-image:url(backgrounds/bg_news_buttercups.jpg);}
#jo #container { background-image:url(backgrounds/bg_news_buttercups.jpg);}
#contact #container { background-image:url(backgrounds/bg_contact_bridge.jpg);}
#who #container { background-image:url(backgrounds/bg_who_river.jpg);}
#search #container { background-image:url(backgrounds/bg_what_beach.jpg);}


#home #content { 	background-image:url(backgrounds/content_area_home.jpg);}
#what #content { background-image:url(backgrounds/content_area_what.jpg);}
#how #content { background-image:url(backgrounds/content_area_how.jpg); }
#news #content { background-image:url(backgrounds/content_area_news.jpg); }
#jo #content { background-image:url(backgrounds/content_area_jo.jpg); }
#contact #content { background-image:url(backgrounds/content_area_contact.jpg); }
#who #content { background-image:url(backgrounds/content_area_who.jpg); }
#search #content { background-image:url(backgrounds/content_area_what.jpg); }



#content_and_menu { float:left; width:520px; margin-top:40px; margin-left:40px;}

#main_menu {
	float:left;
	width:580px;
	height:138px;
	background-color:#8c1948;
	margin-bottom:20px;
	background-image:url(backgrounds/menu_area.gif);
	background-repeat:no-repeat;
}

/* click the logo to go to the home page */
#logo { float:left; width:90px; height:70px; padding:0; margin-left:30px; margin-top:30px;}

/* remove the default styling for the main buttons */
#buttons a { border:none; text-decoration:none;}
#buttons a:hover { border:none; text-decoration:none;}
#buttons a:active { border:none; text-decoration:none;}

#main_menu #buttons {float:right; margin-right:20px;height:89px;margin-top:35px;}
#main_menu #buttons  a {float:left; width:86px; height:89px; display:block; background-image:url('backgrounds/main_buttons.jpg');}

#main_menu #buttons a.menu_who {background-position:0px 0px;}
#main_menu #buttons a:hover.menu_who {background-position:-430px 0px;}

#main_menu #buttons a.menu_what {background-position:-86px 0px;}
#main_menu #buttons a:hover.menu_what {background-position:-516px 0px;}

#main_menu #buttons a.menu_how {background-position:-172px 0px;}
#main_menu #buttons a:hover.menu_how {background-position:-602px 0px;}

#main_menu #buttons a.menu_news {background-position:-258px 0px;}
#main_menu #buttons a:hover.menu_news {background-position:-688px 0px;}

#main_menu #buttons a.menu_contact {background-position:-344px 0px;}
#main_menu #buttons a:hover.menu_contact {background-position:-774px 0px;}

/* use an extra container so that the scroll bar is accomodated correctly */
#content_holder{ float:left;width:580px; padding:0;}
#welcome_content {
	height:295px;
	width:365px;
	overflow:auto;
	margin-left:195px; margin-top:15px; margin-bottom:40px; 
	}
	
	
#news #welcome_content { width:320px; padding-left:45px;}	
	
#content {
	overflow:hidden;
	height:330px;
	background-repeat:no-repeat;
}
#content p {font-size:11px; line-height:1.5em; width:95%;} /* setting 95% width keeps text away from scrollbar */
#content h1 {width:95%;} /* setting 95% width keeps text away from scrollbar */

.clear { clear:both;}


#donate {
	float:right;
	width:170px;
	height:99px;
	margin-bottom:5px;
	margin-right:40px;
	margin-top:30px;
}

#twitter {
	clear:right;
	float:right;
	width:200px;
	height:493px; 
	background-color:#2b2f30;
	background-image:url(backgrounds/twitter_area.jpg);
	background-repeat:no-repeat;
	padding:0;
	margin-right:40px;
	margin-bottom:10px;
}
#twitter_logos {float:left; margin-top:60px; margin-left:10px;}

#twitter_feed {
	margin-top:60px;
	margin-left:20px;
	margin-right:20px;
	font-size:12px;
	color:#FFC;
	height:330px;
	text-align:left;
	overflow:auto;
}

#twitter_feed .status {font-family:"Lucida Sans", "Verdana", sans-serif; font-size:10px; background-color:#2b2f30; margin:4px;padding:4px;}
#twitter_feed .tweet {color:#FFC; line-height:1.4em; margin-bottom:3px;}
#twitter_feed .created {color:#fff}
#twitter_feed .tweet a {color:#FFC; text-decoration:none; border-bottom:1px dotted #ffc;}
#twitter_feed .tweet a:hover {color:#FFC; text-decoration:none; border-bottom:1px solid #ffc; }
#twitter_feed .tweet a:active {color:#FFC; text-decoration:none; border:none;}

/* end of twitter stuff */

#little_pics { 
width:580px;
height:90px;
margin-top:20px;
margin-bottom:10px;
overflow:hidden;
}
#little_pics p{ margin-left:15px; margin-right:15px; margin-top:15px; margin-bottom:10px; font-size:1em;} 

#bottom_links {
	clear:both; width:800px; height:30px;
	background-color:#2b2f30; color:#CCC; 
	margin-top:10px; 
	margin-left:auto;
	margin-right:auto; 
	text-align:right;}
#bottom_links p { font-size:11px; padding:4px; line-height:normal; margin:0;}

/* news page */
.news_image { float:left; clear:both;}
.news_title { float:left; clear:both; font-size:14px; font-weight:bold;}
.news_item { float:left; clear:both; font-size:12px; font-weight:normal; margin-bottom:12px;}
.news_date { float:left; clear:both; font-size:12px; margin-right:40px; margin-bottom:10px; font-weight:bold;}

/* list boxes */
#projects_list_box {float:right;margin:4px; padding:4px;width:180px; height:198px; 
background-image:url(backgrounds/listbox_bg.png);
background-repeat:no-repeat;} /* projects */
#projects_list_box p { margin:10px;}
#what .list_box {float:right;margin:4px; padding:4px;width:85px; } /* case studies */

/* miscellaneous styles */
.smallprint { font-size:0.8em; line-height:normal;}
hr { border:0; color:#999; padding:0; margin-top:4px; margin-bottom:4px; margin-left:0;border-bottom:1px dotted #fff; width:90%;}

.edit_form input,
.edit_form textarea  { font-family:Arial, Helvetica, sans-serif; font-size:10px;}

/* stuff for admin pages */
#admin { color:#333; }
#admin p a { color:#03C; text-decoration:none; border:none;}
#admin p a:hover { color:#F00; text-decoration:underline; }

.greenText { color:#090;}
.redText {color:#C00; }

/* jo's blog */
#wordpress { padding:10px; color:#6c6c6c;}
#wordpress p { font-family:"Trebuchet MS", "Lucida Grande", Arial, sans-serif; color:#2a2a2a; font-weight:400; font-size:small; padding:0; line-height:1em; margin:0;}
#wordpress p a { color:#f4e5b7; font-weight:400; font-size:140%; text-decoration:none; border:none;}
.snap_preview { padding:0; margin:0;}
#wordpress hr { display:none;}