/*
Theme Name: Shangrila 2012
Theme URI: http://appsynergy.net
Description: Shangrila Institute Wordpress Theme
Author: Adam Marshall
Version: 1.0
Tags: ngo, shangrilia
*/

/* ======================
 * GLOBAL
 * ====================== */
html { 
	height: 100% 
}
body {
	background-color: #aaa;
	font-family: "Georgia" serif;
	font-size: 14px;
	line-height: 20px;
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4 {
	font-family: "Century Gothic", sans-serif;
	font-weight: 700;
}
h1 {
	font-size: 1.7em;
	clear: both;
	height: 35px;
	line-height: 30px;
	padding: 3px;
	margin: 10px;
}
h2 {
	font-size: 1.45em;
	color: #021502;
	margin: 9px 0 6px;
}
.withMap h2 {
	margin: 0;
}
h3 {
	font-size: 1.2em;
	color: #2B6E2B;
	margin: 9px 0 6px;
}
a {
	color: #012D08;
}
blockquote {
	background-color: #ddd;
	margin: 0 36px;
	padding: 12px;
}
blockquote em {
	font-weight: 600;
	font-size: 110%;
}
.gap {
	height: 20px;
}
#content ol {
	list-style-type: decimal;
	list-style-position: inside;
}
#content ul {
	list-style-type: circle;
	list-style-position: inside;
}
#content ol li, #content ul li {
	margin: 4px 0;
}
#content p {
	padding: 6px 0;
}

/* ======================
 * WRAPPER LAYOUTS
 * ====================== */
#wrapper {
	margin: 0;
	padding-bottom: 12px;
	width: 920px;
	background-color: white;
	margin: 5px  auto 10px;
	box-shadow: 0 0 12px #555;
	-moz-box-shadow: 0 0 12px #555;
	-webkit-box-shadow: 0 0 12px #555;
}
#header {
	border-top: 24px solid #eee;
}
#masthead {
	border-bottom: 6px solid #484;
	width: 900px;
	height: 125px;
	margin: 0 auto;
	position: relative;	
}
#main {
	background-color: white;
	width: 900px;
	margin: 0 auto;
	position: relative;	
	padding: 0 10px 0px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#content {
	background-color: #fff;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
}
#content #player {
	z-index: 10;
}
#content.withNav {
	float: left;
	margin: 0;
	width: 880px;
	padding:10px;
	/* old settings:
	
	float: left;
	margin: 0 0 40px 20px;
	width: 700px;

	*/
}
#pageNavigation {
	float: left;
	width: 180px;
	font-family: arial, helvetica, sans-serif;
	margin-top: 12px;
}
#pageNavigation strong {
	margin: 3px;
}
.page-body {
	margin: 12px 12px 24px;
}
.withMap .page-body {
	margin: 6px 12px;
}
.resources-body ul li {
	list-style-type: none;
}
.resources-body h3 {
	margin: 12px 0 0;
}
/* ======================
 * SECTION NAVIGATION
 * ====================== */
.section-nav {
	margin-bottom: 24px;
}
#content .section-nav li, #pageNavigation .section-nav li {
	list-style-type: none;
	margin: 0;
}	
#pageNavigation {
	display: none;
}
.section-nav a {
	display: block;
	padding: 3px;
	text-decoration: none;
	background-color: #ddd;
	border-bottom: 2px solid #eee;
}	
.section-nav :hover > a {
	background-color: #444;
	color: #ddd;
}

/* HACK  FOR  IE */
<!--[if IE]>
#content .section-nav p a {
	text-indent: 11px;
}
<![endif]-->
.nothinnng {
}

/* ======================
 * OUR PROJECTS PAGE
 * ====================== */
.project-wrapper {
	margin: 0 0 0 5px;
}
.project-body {
	margin: 24px 12px 0;
}
.project-intro {
	position: absolute;
	right: 30px;
	top: 30px;
	font-style: italic;
}
.project-box {
	float: left;
	width: 420px;
	height: 252px;
	margin-right: 0;
	margin-top: 20px;
	position: relative;
	cursor: pointer;
}
.project-box-odd {
	margin-right: 25px;
}
#content .project-title {
	background-color: #333;
	padding: 5px;
	text-align: center;
	font-weight: 700;
	height: 22px;
	color: white;
	margin: 0;
}
.project-image {
	width: 420px;
	height: 220px;
}
#content div.project-image img {
	margin: 0;
	width: 420px;
	height: 220px;
}
#content p.project-more {
	display: none;
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 420px;
	height: 40px;
	padding: 0;
	text-align: center;	
}
.project-more a {
	color: #eee;
	text-decoration: none;
	font-size: 20px;
	opacity:0.7; filter:alpha(opacity=70);
}

/* ======================
 * PROJECT HUB PAGE
 * ====================== */
.project-hub-image {
	float: right;
	width: 230px;
	margin: 12px;
}

/* ======================
 * BLOG / NEWS / EVENTS
 * ====================== */
#content .post {
	margin: 12px 12px;
	background-color: #E3F5E4;
	border: 1px solid #ddd;
	padding: 9px;
}
#content .post .entry-meta {
	margin-top: 6px;
	font-size: 90%;
}
#content .post .entry-meta .date {
	padding-right: 18px;
}
/* ======================
 * CONTACT /MAP PAGE ETC
 * ====================== */
.contact-left-col {
	float: left;
	width: 450px;
}
.contact-right-col {
	float: left;
	width: 340px;
}

#map_canvas {
	margin-left: 50px;
}


/* ======================
 * FRONT PAGE
 * ====================== */
body.HOME .page-body {
	padding-top: 20px;
}
#content.front {
	background-color: #eee;
}
#frontShowcase {
	font-family: Arial, Verdana, sans-serif;
	width: 840px;
	height: 351px;
	margin: 0 auto;
	position: relative;
	border-top: 5px solid #484;
}
#frontText {
	margin: 0 13px;
	padding: 12px 0;
	color: #004d65;
	
}
#frontText #description {
	font-size: 24px;
	line-height: 29px;
	word-spacing: 1px;
	text-align: center;
	padding: 4px 12px;
	background-color: #467f26;
	color: white;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: #516530 2px 0 8px;
	-webkit-box-shadow: #516530 2px 0 8px;
	-moz-box-shadow: #516530 2px 0 8px;	
}
#frontText #description a {
	color: white;
}
#frontText #frontLeftCol {
	width: 570px;
	float: left;
}
#frontText #frontRightCol {
	width: 260px;
	float: right;
}
#frontText .frontColLines {
	background-color: #aaa;
	height: 2px;
	margin-bottom: 10px;
	box-shadow: 0 0 1px #555;
	-moz-box-shadow: 0 0 1px #555;
	-webkit-box-shadow: 0 0 1px #555;
}
#frontText .frontBoxRow {
	height: 230px;
}
#frontText .front-project-box {
	display: block;
	text-decoration: none;
	font-family: Arial, Verdana, sans-serif;
	margin: 12px 8px 0;
	padding: 10px;
	float: left;
	width: 248px;
	height: 100%;
	line-height: 16px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: #CCC 2px 2px 3px;
	-webkit-box-shadow: #CCC 2px 2px 3px;
	-moz-box-shadow: #CCC 2px 2px 3px;
}
#frontText .front-project-box.even:hover {
	cursor: pointer;
	background-color: #ccc;
}
#frontText .front-project-box.odd:hover {
	cursor: pointer;
	background-color: #ccc;
}
#frontText .front-project-box.even {
	background-color: #e5edde;
}
#frontText .front-project-box.odd {
	background-color: #e1e1e1;
}
#frontText #frontMap {
	margin: 10px 10px 0;
}
#frontText #frontMap h2 {
	margin: 0 0 4px;
	font-size: 24px;
}
#frontText #frontMap h2 a {
	color: #263d0f;
	text-decoration: underline;
}
#frontText #frontNews {
	padding: 8px 12px 10px;
	margin: 0 10px;
	background-color: #375719;
	color: white;
	font-size: 16px;
	line-height: 17px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: #516530 2px 0 8px;
	-webkit-box-shadow: #516530 2px 0 8px;
	-moz-box-shadow: #516530 2px 0 8px;	
}
#frontText #frontNews a {
	color: #ddd;
}
#frontText #frontNews h2 a {
	color: white;
	text-decoration: underline;
}
#frontText #frontNews h3 {
	margin: 0 0 8px;
}
#frontText #frontNews h3 a {
	color: #ddd;
	text-decoration: none;	
}
#frontText h2 {
	font-family: Arial, Verdana, sans-serif;
	text-align: right;
	line-height: 24px;
	margin: 0 0 12px;
}
#frontText #frontRightCol h2 {
	text-align: center;
}
#frontText h2 a {
	text-decoration: none;
	color: #004d65;
}
#frontText h3 {
	margin: 0;
}


#frontText .front-content {
	float: left;
	width: 400px;
}
#frontText .front-content-bold {
	font-family: "Century Gothic", sans-serif;
	background-color: #2C4A2C;
	color: #eee;
	margin: 24px 24px 12px 0;
	padding: 12px;
	border-top: 2px solid #557755;
	border-bottom: 2px solid #111;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
#frontText .front-content-bold a {
	color: #ddd
}
#frontText .front-latest {
	float: right;
	width: 400px;
}




/* SHOWCASE ITSELF */
#content .show-image-wrapper {
	height: 300px;
	width: 590px;
	background-color: #eee;
	display: none;
}
#content .show-image img {
	margin: 0;
	padding: 0;
	display: block;
}
#content .show-nav-wrapper {
	position: absolute;
	top:	307px;
	left: -1%;
	width: 102%;
}
#content .show-nav-wrapper ul {
	float: left;
	width: 100%;
	margin-top: 6px;
}
#content ul > li.show-nav:first-child {
	padding: 0;
}	
#content ul li.show-nav {
	position: relative;
	list-style-type: none;
	width: 18%;
	float: left;
	margin: 0 1%;

}
#content .show-nav a {
	text-align: center;
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	height: 37px;
	line-height: 37px;
	background-color: #375719;
	text-decoration: none;
	font-size: 18px;
	color: #DDEEDD;
	font-weight: bold;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: #516530 2px 0 8px;
	-webkit-box-shadow: #516530 2px 0 8px;
	-moz-box-shadow: #516530 2px 0 8px;	
}
#content .show-nav a:hover {
	background-color: #273827;
	color: #CCC;
}
#content .show-content-wrapper {
	background-color: #EEF9DB;
	color: #021502;
	width: 250px;
	height: 300px;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
}
#content .show-content {
	padding: 24px 12px 12px 18px;
}
#content .show-content p {
	display: inline;
	font-size: 14px;
	line-height: 12px;
	padding: 0;
}
#content .show-content strong, #content .show-content p.show-read-more {
	font-weight: bold;
	font-style: italic;
}
#content .show-content p.show-read-more {
	display: block;
	margin: 8px 0 0 0;
}
#content .show-content p.show-read-more a {
	text-decoration: none;
	color: #021502;
}
#content .show-content p.show-read-more a:hover {
	text-decoration: underline;
}
.show-active {
	display: block;
}
.show-hidden {
	display: none;
}

/* ======================
 * LINKS PAGE
 * ====================== */

.blogroll {
	margin-left: 30px;
}

.back-to-map {
	position: absolute;
	top: 30px;
	right: 30px;
}