/* Joshua Orphans Main Stylesheet - January 2009 - Carl Myhill, User Experience Design */

/* Specifics for Joshua */
/* Very neat trick from www.alistapart.com/stories/practicalcss which forces a Div which only contains Floats to cater */
/* for the size of their content dynamically */
.spacer {  
		clear:both;
		}		

body { /*text-align:center;*/
		/*background: #CCCCCC url(white-background-2.gif) repeat-x;*/
	}

#wrap {
	text-align: center;
	}
	
#header {
	overflow:visible; /*fixes a problem with containing floats - see bulletproof web design page 110*/
	margin: 0 auto;
	width:920px;
	/*height:90px;*/
	text-align: left;
	padding: 0;
	background: url(pics/white-header.gif) no-repeat top left;
	position:relative;
	}	

#header-logo {
	float:left;
	display:inline; /*for IE*/
	width: 462px;
	height: 50px;
	margin-left: 0px;
	padding-top: 0;/*3px;*/
	background: url(pics/joshua-logo-small.png) no-repeat 100% 0%;
	}
	
#header-logo h1 {
	font-size:250%;
	font-family: Georgia, serif;
	color:#000000; /* was #78903f; */
	margin: 15px 0 0 0.1em;
	}

#header-logo a {
	text-decoration:none;
	}

/* #header-logo h2 {
	font-family: Georgia, serif;
	color:#f88100;
	font-size:110%;
	margin: 0 0 .05em .2em;
	} */
	
#nav {
	float:right;
	display:inline;
	width: 458px;
	margin: 0;
	padding: 20px 0 0 0;
	}

#nav li {
	float: right; /*floating right aligns much better but requires re-ordering of the HTML which is not optimal semantically*/
	margin: 0 1px 0 0;
	padding: 0.5em 0.25em 0.1em .5em; /*7px 4px 4px 8px;*/
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color:#666666;
	text-transform:uppercase;
	font-size: 130%;
	letter-spacing:0.05em;
	list-style: none;
	}

#nav li +li {  /*since these now float in reverse order dur to the float:right, this doesnt do anyhing*/
	padding: 0.5em 0.5em 0.1em 0.5em; /*7px 8px 4px 8px;*/
	}

#nav a {
display:block;
text-decoration: none;
color:#666666;
}

#nav a:hover {
color: #ff9933;
}

#inner-wrap {
	clear:both;
	margin: 0 auto;
	width:920px;  /*solves a problem in Safari but dont know why this is not 1000px */
	/*height:820px;*/ /*without this the background disappears because it doesnt know the height of contents of the floats within it*/
	/*background: #cccccc url(main-bg.gif) repeat-y top left;*/
	text-align: left;
	/*overflow:auto;*/ /*fixes a problem with containing floats - see bulletproof web design page 110*/
	}
	
#section-heading {
	clear:both;
	}

#photo-heading {
	margin: 0;
	padding: 0;
	height: 126px; /*artificially forced closed a gap here - it may not work in all cases*/
	}

#photo-heading ul {
	float:left;
	display:inline;
	/*border: 3px solid red;*/
	background-color:#FFFFFF;
	/*width:820px;*/
	margin:10px 0 0 10px;
	background-color:#FFFFFF;
	}
	

#photo-heading li {
	float: left; /*floating right aligns much better but requires re-ordering of the HTML which is not optimal semantically*/
	margin: 0 1px 0 0;
	padding: 6px 4px 3px 8px;
	font-family: Times, serif;
	font-weight:100;
	line-height: .6em;
	font-size:110%;
	text-transform:uppercase;
	letter-spacing:0.1em;
	list-style: none;
	}

#photo-heading li +li {
	padding: 6px 8px 4px 8px;
	border-left: 1px dotted #374d62;
	}
	
#photo-heading a {
	display:block;
	text-decoration: none;
	color:#374d62;
	}

#photo-heading a:hover {
color: #ff9933;
}

#left-heading-space {
	float: left;
	display:inline; /*for IE */
	width: 366px;
	height: 55px;
	padding: 0;
	margin: 0;
	background-image: url(pics/projects_header_divider.gif);
	background-repeat: no-repeat;
	background-position: 100% 0;
	}	
	
#left-heading-space h1 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight:100;
	font-size:240%;
	letter-spacing:0.05em;
	text-transform:uppercase;
	margin:0 0 10px 30px;
	padding: 0;
	}

#right-heading-space {
	float: right;
	display:inline; /*for IE */
	width: 554px;
	height: 55px;
	margin: 0px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
	}

#right-heading-space h2 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight:100;
	font-size:140%;
	letter-spacing:0.05em;
	margin:0 0 0 30px;
	padding: 0 15px 0 0;
	}

#main-content {
	float:left; /*should this float:left? certainly sorts out the background image below allowing the lines to be drawn in the main-content boxe*/
	}

#main-content h3 {
	font-family: Times, Serif;
	font-weight:300;
	font-size:200%;
	letter-spacing:0.1em;
	text-transform:uppercase;
	margin:25px 0 0.35em 30px;
	padding: 0;
	}
	
#main-content h4 {
	font-family: Times, Serif;
	font-weight:700;
	font-size:100%;
	letter-spacing:0.15em;
	line-height: 1.25em;
	text-transform:uppercase;
	margin:0.5em 0 0.25em 30px;
	padding: 0 15px 0 0;
	}

#main-content p, #main-content li {
	font-family: Times, Serif;
	font-weight:normal;
	font-size:120%;
	letter-spacing:0.05em;
	line-height: 1.1em; /*1.25em*/
	color:#8f897f;
	margin:0.25em 0 1em 30px;
	padding: 0 15px 0 0;
	}


.photo {
	float: left;
	margin: .2em 15px 7px 30px;
	}
	
img {display:block; /*fixes an issue with extra space after an image in a DIV without needing to give DIV a fixed height*/
	border: 2px solid #000000;
	}

.photo-no-border {
	float: left;
	border: 0;
	margin: .2em 15px 7px 30px;
	}
.spacer {  clear:both }

#left-content {
	clear: both;
	float: left;
	/*border-left: #f1f1f1 solid 2px;*/
	display:inline; /*for IE */
	width: 366px;
	/*height: 245px;*/
	padding: 0;
	margin: 0;
	}

#right-content {
	float: right;
	border-right: #f1f1f1 solid 2px;
	display:inline; /*for IE */
	width: 552px;
	/*height: 245px;*/
	margin: 0px;
    background-color:#FFFFFF;
	}

.projects {
	float: right;
	width:550px;
	}

#footer {
	clear:both;
	margin: 0 auto;
	width:920px;
	height:55px;
	}



#footer p {
	font-family: Times, Serif;
	font-weight:normal;
	font-size:100%;
	letter-spacing:0.05em;
	line-height: 1.25em;
	color:#8f897f;
	padding:.75em 0 .5em 0;
	}
	
/*Link styles from WAI */
:link 	{ color: #00C; background: transparent }
:visited { color: #609; background: transparent }
a:active { color: #C00; background: transparent }
/*a[href]:hover { color: inherit; background:  #ffa } /*highlight active link*/

/*shows appropriate borders around images you can click on*/

a:hover img {border: 2px solid #ffa }
	
/* jQuery lightBox plugin - Gallery style */
	#gallery {
		background-color: #ffffff; /*#444*/
		padding: 10px;
		width: 520px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 2px solid #000000;
	}

/*section specific CSS - whoarewe*/
.whoarewe #main-content {
	background: url(pics/whoarewe-main-bg-white-space.gif) repeat-y;
	}

.whoarewe #photo-heading {
	background: url(pics/whoweare-banner6.jpg) no-repeat bottom right;
	}

.whoarewe #left-heading-space, .whoarewe #right-heading-space {	
	background-color: #718043;
	}


.whoarewe h1 {
	color:#FFFFFF;
	}
	
.whoarewe h2 {
	color:#eaeb55;
	}
	
.whoarewe h3 {
	color:#8f897f;
	}

.whoarewe h4 {
	color:#718043;
	}

 .whoarewe #footer {
	background: url(pics/whoweare_footer.gif) no-repeat 0% 100%;
	}
/*section specific CSS - projectspage*/
.projectspage #main-content {
	background: url(pics/projects-main-bg-white-space.gif) repeat-y;
	}

.projectspage #photo-heading {
	background: url(pics/girlswithbricks.jpg) no-repeat bottom right;
	}

.projectspage #left-heading-space, .projectspage #right-heading-space {	
	background-color: #8a4325;
	}

.projectspage h1 {
	color:#FFFFFF;
	}
	
.projectspage h2 {
	color:#eaeb55;
	}
	
.projectspage h3 {
	color:#8f897f;
	}

.projectspage h4 {
	color:#718043;
	}

 .projectspage #footer {
	background: url(pics/projects_footer.gif) no-repeat 0% 100%;
	}
	
	/*section specific CSS - projectspage*/
.gettinginvolved #main-content {
	background: url(pics/gettinginvolved-main-bg-white-space.gif) repeat-y;
	}


.gettinginvolved #photo-heading {
	background: url(/pics/gettinginvolved_photo.png) no-repeat bottom right;
	}

.gettinginvolved #left-heading-space, .gettinginvolved #right-heading-space {	
	background-color: #374d62;
	}

.gettinginvolved h1 {
	color:#FFFFFF;
	}
	
.gettinginvolved h2 {
	color:#74aacc;
	}
	
.gettinginvolved h3 {
	color:#8f897f;
	}

.gettinginvolved h4 {
	color:#374d62;
	}

 .gettinginvolved #footer {
	background: url(pics/gettinginvolved_footer.gif) no-repeat 0% 100%;
	}