/* CSS Document */

/* 

===== TABLE OF CONTENTS ====== 

HOUSEKEEPING

STRUCTURE

LAYOUT STYLES

CONTENT STYLES

MISCELLANEOUS


*/



/* 1. =HOUSEKEEPING 
------------------ Things to get out of the way in the beginning */

/* This file is actually read by all browsers, but applies rules that only IE can see through hacks */
@import "ie.css";

/* 
Sizing text with ems (http://clagnut.com/blog/348/)
NOTE: take note of CSS cascade and specify sizes explicitly for less capable browsers
child pixels / parent pixels = child ems 
*/

/* resets default font-size to equivalent to 10px */
body { font-size:62.5% }	
/* be patronizingly over-specific to IE, who doesn't completely understand. input and selects may need to be specified at 100% too */
html, table { font-size: 100%; } 

/* less complicated housekeeping */
body { background-color: #FFFFFF; }
:link, :visited { text-decoration: none; border-style: none; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6, pre, code, p { font-size: 1em; }
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { margin: 0; padding: 0; }
a img, a:link img, a:visited img { border-style: none; }

/* 2. =STRUCTURE ) 
-------------------- Layout rules, should not contain visual styling */

body {
margin:0;
padding:0;
font-family: "Lucida Sans", Verdana, Arial, sans-serif;
color:#333333;
line-height:1.4em;
}

#wrap-outer {
margin:0;
padding:0;
width: 100%;
position: relative;
float:left;
}

#wrap {
float: left;
width: inherit; /* otherwise certain browsers (Safari) my display a smaller width */
min-height: 600px;
}

#header {
/* margin: 20px 0 0 0; */
width: 160px;
display: inline;
margin: 30px 0 0 0px;
height: 160px;
float: left;
position: fixed;
left: 0;
}

#copyright-info {
width: 150px;
display: inline;
margin: 0 0 0 10px;
padding-top: 200px;
float: left;
position: fixed;
bottom: 20px;
left: 0px;
}

body.default #main,
body.news #main,
body.static #main {
width: 520px;
}

#main {
padding: 20px 0;
float: left;
margin-left: 380px;
min-width: 520px;
min-height: 768px;
}

#content {
padding: 20px 30px; /* effective width is 460px */
}

#col2 {
float: left;
margin-left: -0px;
width: 200px;
left: 180px;
position: absolute;
z-index: 100;
display:inline;
}

#col2 .gutter {
padding: 30px 10px;
overflow: auto;
}

#mainnav {
width: 180px; 
position: absolute;
top: 25px;
left: 10px; /* specifically for IE Win, but it doesn't hurt the other browsers */
}

#sub-content {
float: left;
margin-top: 22em; /* with the search box, margin-top should be 27em */
}

#topbar {
background: #99FF00 url(topbarlongbg.gif) no-repeat 0px bottom;
width: 100%;
height: 14px;
padding: 2px 0px;
position: absolute;
top: 0;
left: 0;
}

#topbar li.kaog-link {
display: inline;
float: left;
margin-left: 10px;
}

#topbar li.login-link {
display: inline;
float: right;
margin-right: 15px;
}


/* 3. =LAYOUT STYLES 
---------------------- Styles applied to the elements that make up the layout */

body { background: #FFF url(topbarbg.gif) repeat-x 0 0; }

#wrap { background: url(wrap-bg.jpg) no-repeat fixed 0 0; }

#wrap-outer { background: url(col2-bg.gif) repeat-y 170px 0; }

/* ---- =COLUMN1 ---- */

h1#logo {
background: url(phlogo-beta.gif) no-repeat left top;
width: 162px;
height: 122px;
position: relative;
top: -24px;
padding-top: 33px;
}

h1#logo a {
display: block;
width: 162px;
height: 89px;
text-indent: -9999px;
}

#copyright-info {
background: url(greenplug.gif) no-repeat right top;
padding-top: 130px;
font-family: Tahoma, "Lucida Sans", sans-serif;
color: #CCCCCC;
text-align: right;
cursor: default;
}

	#copyright-info a {
	color: #CCCCCC;
	border-bottom: 1px dashed #CCCCCC;
	cursor: pointer;
	}
	
	#copyright-info:hover,
	#copyright-info:hover a {
	color: #999999;
	}

#tagline {
text-indent: -9999px;
position: absolute;
}

#topbar {
font-size: 11px;
}

#topbar a {
font-family: Arial, Helvetica, sans-serif;
color: #999900;
}


/* ---- ( =COLUMN2 ) ---- */

#col2 {
background: #CC0000 url(col2-shadow.jpg) no-repeat 0 0;
color: #FFF;
text-align: left;
}

#col2 a:link,
#col2 a:hover,
#col2 a:visited {
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

h3.col2-header {
background: url(col2-headings.gif) no-repeat;
width: 180px;
height: 18px;
text-indent: -9999px;
margin-top: 30px;
}

	h3#h-upcoming { background-position: 10px 0px; }
	h3#h-feel { background-position: 10px -20px; }
	h3#h-visit { background-position: 10px -40px; }
	h3#h-subscribe { background-position: 10px -60px; }
	h3#h-forum { background-position: 10px -80px; }
	h3#h-section { background-position: 10px -100px; }

#sub-content li {
background: url(ibullet.gif) no-repeat 0px 5px;
margin-bottom: 2px;
padding-left: 8px;
}

#sub-content ul.sectionnav {
width: 178px;
padding: 0;
margin: 0;
}
	
	#sub-content ul.sectionnav li {
	background-image: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	margin: 0 0 2px 0;
	padding: 0;
	}

	#sub-content ul.sectionnav li a {
	background: url(sectionnav-bullet.gif) no-repeat 4px 6px;
	padding: 5px 5px 5px 24px;
	margin: 0;
	border: 0px;
	display: block;
	width: 149px;
	}
	
	#sub-content ul.sectionnav li a:hover {
	background-color: #C00202;
	}

#col2 #mainnav a {
font-family: "Futura", "Century Gothic", "Trebuchet MS", sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
color: #EBEBEB;
border-top: 1px solid #999999;
border-bottom: 0;
padding: 1em 0 0 20px;
display: block;
height: 2em;
}

	#col2 #mainnav a:hover {
	background: #CC3300;
	}
	
	/* current section indicator styles */
	body.default #col2 #mainnav li.default a { color: #FFF; }
	body.news #col2 #mainnav li.news a { color: #FFF; }
	body.photos #col2 #mainnav li.photos a { color: #FFF; }
	body.forums #col2 #mainnav li.forums a { color: #FFF; }
	body.help #col2 #mainnav li.help a { color: #FFF; }

#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 2px solid #A5D629;
padding: 10px;
background-color: #F0FCBE;
color: #666;
font: 12px Verdana, Helvetica, sans-serif;
visibility: hidden;
z-index: 200;
}

#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 201;
visibility: hidden;
}
	
#smallsearch {
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
height: 2em;
padding: 1.4em 0;
margin: 0;
width: 180px;
}

#smallsearch .input {
background: #FFF url(google-icon.gif) no-repeat 1px center;
font-family: "Lucida Sans", Verdana, sans-serif;
color: #666666;
border: 1px solid #999;
margin: 0 10px 0 0;
padding: 2px 2px 2px 18px;
width: 80px;
height: 17px;
vertical-align: bottom;
}

.feed-link {
float: left;
clear: left;
width: 170px;
margin-top: 5px;
font-size: 1.2em;
}

#col2 .feed-link a {
border-bottom: 0px;
float: left; 
margin-right: 5px;
}

#main {
background: url(main-bg.gif) no-repeat 0 0;
}


/* . =CONTENT STYLES 
---------------------- Styles for content, usually within #content only */


/* ---- ( =MAIN-CONTENT ) ---- */

.article p,
.article ul,
.article ol {
padding-bottom: 0.8em;
}

#content a:link {
color: #333;
}

#content a:hover {
background-color: #DFDE9E;
}

#content .article a:visited {
color: #666;
}

#content .article a.more-link:link,
#content .article a.more-link:visited {
background: url(morebullet.gif) no-repeat 0 center;
color: #999999;
font: 0.9em Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
border-bottom: 0px solid #CCC;
}

#content .article a.more-link:hover {
color: #333;
}

#content .article a.forum-link:link,
#content .article a.forum-link:visited {
background: url(reply-big.gif) no-repeat 0px 0px;
color: #660000;
font: 1.4em Verdana, Arial, Helvetica, sans-serif;
padding: 0 0 2px 40px;
border-bottom: 0px solid #CCC;
display: block;
margin: 20px 0 5px;
}

#content .article a.forum-link:hover {
background-color: #FFFF99;
color: #990000;
}

#content .framed {
border: 1px solid #999;
padding: 2px;
}

#content .article ol li {
padding-left: 0px;
margin-left: 16px;
}

#content .article ul li {
background: url(ibullet.gif) 1px 6px no-repeat;
padding-left: 16px;
}

#content .article ul.nobullet li {
background-image: none;
padding-left: 0;
}

#content .highlighted-event {
background: #EBEBEB;
border: 1px solid #999999;
padding: 10px;
}

#content .highlighted-event h2 { 
font: 1.2em/1.2em "Trebuchet MS", Verdana, Helvetica, sans-serif;
text-transform: uppercase;
margin-bottom: 8px;
margin-left: 0;
min-height: 0;
}

#content .static h2 {
margin-bottom: 8px;
margin-left: 0;
min-height: 0;
}

.summary-list { width: 47%; float: left; cursor: default; word-wrap: break-word; }
#forum-summary { float: right; }

	.summary-list h2,
	.summary-list .short-entry {
	padding: 5px 0;
	border-bottom: 1px dotted #A5D629;
	}
	
	.summary-list h2 { 
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.4em;
	font-weight: normal;
	color: #990000;
	border-top: 2px solid #A5D629; 
	padding: 10px 0;
	}
	
	#news-summary h4 a,
	#forum-summary h4 a {
	background-position: 98% 4px;
	background-repeat: no-repeat;
	padding-right: 20px;
	display: block;
	}
	
	#content .summary-list h4 a:hover {
	background-color: #FFFF99;
	}
	
	#news-summary h4 a { background-image: url(post-bullet.gif); }
	#forum-summary h4 a { background-image: url(reply.gif); }

#events-box ul#events-summary li {
background: url(post-bullet.gif) no-repeat 0 0.4em;
padding-left: 12px;
margin-bottom: 5px;
}

.article ul#events-summary a:link,
.article ul#events-summary a:visited {
border: 0;
} 

ul#photostrip {
display: block;
height: 90px;
}

ul#photostrip img {
border: 1px solid #669933;
float: left;
padding: 1px;
margin-left: 4px;
}


/* ---- ( =HAPPENINGS ) ---- */

#content {
font-size: 1.2em;
line-height: 1.4em;
}

.article {
margin-bottom: 3em;
position: relative;
}

body.news .article-body {
padding-right: 15px;
border-right: 1px solid #99CC00;
}

.article-meta {
background: url(meta-trim.gif) no-repeat right top;
color: #939976;
font-family: Geneva, Helvetica, sans-serif;
font-size: 0.9em;
padding: 2px 0 0 20px;
width: 440px;
margin: -1px -1px 0 0;
}

.article h2 {
color: #990000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
line-height: 1.1em;
margin-bottom: 0.5em;
}

body.news .article h2 {
margin-left: 45px;
min-height: 42px;
}

.article h3 {
color: #990000;
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
}

#content .article h2 a:link,
#content .article h2 a:visited,
#content .highlighted-event h2 a:link,
#content .highlighted-event h2 a:visited {
background: transparent;
color: #990000;
border: 0;
}

#content .article h2 a:hover {
color: #CC0000;
}

#content .article a {
border-bottom: 1px solid #333;
}

#content .article a:hover,
#content .article a:visited {
border-bottom: 1px solid #999;
}

.posted {
background: url(posted.gif) no-repeat;
color: #FFF;
font: 14px/15px Geneva, Arial, Helvetica, sans-serif;
display:block;
width: 30px;
height: 36px;
padding: 3px 1px 3px 0;
text-align: center;
position: absolute;
top: 2px;
}

.posted .month {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}

#events-box {
background: url(events-bg.gif) no-repeat left bottom;
width: 216px;
min-height: 180px;
padding-bottom: 15px;
}

#events-box h3 {
background: url(events-bgtop.gif) no-repeat left top;
color: #333;
font-family: "Comic Sans MS", fantasy;
font-size: 1.8em;
line-height: 1.2em;
padding: 10px 30px;
text-align: center;
}

#events-box ul {
margin: 0 20px;
}

/* ---- ( =HAPPENINGS ) ---- */

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(/images/lightbox/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/lightbox/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/lightbox/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #CCC;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	


/* ---- ( =SUPPORTING STYLES ) ---- */

.note {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #999;
margin: 10px 0;
}

.subsection,
.cc-header { 
font-family: Helvetica, Arial, sans-serif;
font-size: 1.4em;
font-weight: normal;
color: #990000;
border-top: 2px solid #A5D629; 
padding: 10px 0;
margin-top: 10px;
cursor: pointer;
overflow: auto;
}

.cc-header strong {
width: 220px;
float: left;
}

body.static #gynus,
body.static #threeg,
body.static #martyrs,
body.static #passion,
body.static #big,
body.static #fire,
body.static #livingstone {
}



/* . =MISCELLANEOUS 
---------------------- Other stuff that doesn't fall anywhere else */

a .adm-edit {
background: #999;
color: #FFF;
padding: 0 5px;
}

.accessibility {
position: absolute;
left: -9999px;
}

.hide {
display: none;
}

.flRight { float: right; clear: none; margin: 0 0 0 15px; position: relative; }
.flLeft { float: left; clear: none; margin: 0 15px 0 0; position: relative; }