@import url('reset.css');

/*
COLORS
Define main colors used in a site here for easy reference

Blue = 0066cc
Lt Blue = CFF7FF
Dk Blue = 00849F

*/

html {
	height: 100%;
	margin:0; padding:0; 
}

body {
	height: 100%;
	font: 62.5%/1.5em arial, helvetica, sans-serif;
	text-align: center;
	background: #fff url() 0 0 no-repeat;
	margin:0; padding:0; 
	color: #505960;
}

/* ----------------
	DEFAULTS
    ------------- */
h1, h2, h3, h4, h5, h6 {
}  

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, 
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited  {
    color: #000;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #999;
} 

h1 { font-size: 1.6em; color: #336699; padding-bottom: 0px; margin-bottom: 0px; }
h2 { font-size: 1.5em; color: #993399; }
h3 { font-size: 1.4em; color: #339999; }
h4 { font-size: 1.3em; margin-top: 2em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1em; } 

dt {
}
dd {
}
	dd p:first-child {
	}
 
a,
a:link,
a:visited { 
	color: #505960; 
	text-decoration: none;
	border-bottom: 1px solid #505960;
}
a:hover,
a:active {
    color: #000;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }

p { line-height: 1.5em; padding-top: 5px; padding-bottom: 5px; margin-top: 0px; }

/* For HR's with background images */	
div.hr {
  	height: 3px;
  	margin: 10px 0;
  	background: #fff url() 0 0 repeat-x;
}
	div.hr hr {
	  	display: none;
	}

ul, ol {
}

ol {
}
	ol ul,
	ol ol {
	}

/* orderedList class can be assigned manually, or with jQuery method. 
Intended to style bullets differently than text.  */
ol.orderedList li span { color: #666; }
ol.orderedList { color: #000; }

blockquote, q {
    margin: 1em 2em;
    padding: 1em;
    border-left: 1px solid #dcd6c6;
    font-style: italic; 
    font-size: 1.2em;   
    color: #666; 
}   

small,
.small { font-size: .8em; }

/* table { border: 0; border-collapse: collapse; } */


/* ----------------
	PAGE STRUCTURE
	Elements that make up the skeleton of the layout and holds things together
	
	html, body, page, wrapper, and footer rules are designed to fix footer's at the bottom of the page.
	Wrapping the site in the page div also allows for double background images.
    ------------- */
#page {
	position: relative;
	min-height: 100%;
	text-align: center;
	padding-bottom: 1em;
	font-size: 1.2em; /* Render type approximately 12px in size across all browsers */
	background-position: 50% 116px;
	background-repeat: repeat-x;
}


	#pageImage {
		z-index: 1;
		height: 220px;
		position: absolute;
		top: 116px;
		width: 100%;
	}
		#pageImage.home {
			height: 320px;
		}

#secondary_dropshadow,
#secondary_dropshadow2_home,
#secondary_dropshadow2_landing {
	position: absolute;
    width: 100%;
	height: 10px;
	z-index: 100;
}
#secondary_dropshadow {
	top: 116px;
    background: url(../images/headers/dropshadow.png) 0px -12px repeat-x;
}
#secondary_dropshadow2_home {
	top: 427px;
    background: url(../images/headers/dropshadow2.png) 0px -12px repeat-x;
}
#secondary_dropshadow2_landing {
	top: 323px;
    background: url(../images/headers/dropshadow2.png) 0px -12px repeat-x;
}

#wrapper {
	position: relative;
	min-height: 100%;
	width: 860px;	
	margin: 0 auto;	
	text-align: left;
	padding-bottom: 10px;
	z-index: 99;
}

#header {
	position: relative;
	background-color: #ffffff;
	height: 116px;
}
	#search {
		position: relative;
		margin: 1em;
		text-align: center;
	}

#flash {
    width: 860px;
    height: 323px;
    /*background: url(../images/design/flash_placeholder.jpg) 0 0 repeat-x;*/
}

#footer {
	position: relative;
	margin: 1em 0;
	padding: 2em 0;
	clear: both;
	text-align: left;
	background: #f5f5f5 url(../images/design/bg_footer_top.gif) 0 0 repeat-x;
}
	#footer .bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 13px;
		background: url(../images/design/bg_footer_bottom.gif) 0 0 repeat-x;
	}
		#footerWrapper {
			width: 860px;
			margin: 0 auto;
		}
		#footer .col {
			float: left;
			width: 140px;
		}
		#footer li {
			line-height: 1.5em;
		}
			#footer li:first-child a {
				color: #339999;
				border-color: #339999;
			}
			
#content {
	min-height: 600px;
	background-color: #fff;
}

#colNav {
	position: relative;
	float: left;
	width: 170px;
	background-color: #ffffff;
}	
	body.home #colNav {
		display: none;
	}
		
a.btnDonate {
	display: block;
	margin: 1em 0;
	font-size: 1.6em;
	height: 52px;
	line-height: 52px;
	text-align: center;
	color: #fff;
	background: url(../images/design/bg_btn_donate.gif) 0 0 repeat-x;
}
	a.btnDonate.inline {
		display: inline-block;
		display: -moz-inline-block;
		width: 154px;
		height: 35px;
		line-height: 35px;
	}


#colSidebar {
	position: relative;
	padding-top: 1.5em;
}
	body.home #colSidebar {
		float: left;
		width: 430px;
	}
		body.home .colOne {
			float: left;
			margin-right: 10px;
			width: 210px;
		}
		body.home .colTwo {
			float: left;
			width: 210px;
			margin-left: 10px;
		}

#colContent {
	float: left;
	width: 610px;
	margin-left: 20px;
	padding-top: 1.5em;
}

#colContent p {
/*	background: #f5f5f5;*/
}
	
	body.home #colContent {
		width: 420px;
		margin: 0;
	}

	body.donate #colContent {
		width: 540px;
		height: 600px;
		float: left;
		margin:0; padding:0; 
	}

	iframe.donate {
		margin:0; padding:0; height:100%;
		display:block; 
		width:100%; 
		border:none;
	}
	
.colFull {
	margin-bottom: 1em;
}

.summary {
	font-weight: bold;
	font-size: 1.4em;
}

.tweet {
	margin: 0 8em;
	padding: 1em;
	border: 1px solid #e4e4e4;
	background-color: #fff;
}
	.tweet .tweetText {
		font-size: 1.5em;
		margin: 0;
		padding: 0;
	}
	.tweet .tweetDate {
		margin: 0;
		padding: 0;
	}
	.tweet .tweetUser {
		margin-top: 1em;
	}
	.tweet .tweetUser img {
		float: left;
		margin-right: 1.5em;
	}
	.tweet .tweetScreenName,
	.tweet .tweetName {
		padding: 0;
	}


/* ----------------
	PAGE STRUCTURE ELEMENTS
	Elements  such as logos, search bars, and any other design element repeated throughout the site, 
	but doesn't effect the structural layout
    ------------- */
#logo {
	width: 87px;
	height: 75px;
	display: block;
	background: url(../images/design/logo.gif) 0 0 no-repeat;
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0;
	padding: 0;
	font-size: 1em;
}
	#logo a {
		width: 87px;
		height: 75px;
		display: block;
		text-indent: -9999px;
		border: 0;
	}


.quoteBlock {
	float: left;
	width: 210px;
	margin: 0 0 30px 0;
}
#colNav .quoteBlock {
	width: 100%;
}
.quoteBlock.purple {
	background-color: #993399;
}
.quoteBlock.green {
	background-color: #339999;
}
.quoteBlock.blue {
	background-color: #336699;
}
	.quoteBlock .body {
		padding: 1em;
		color: #fff;
	}
	.quoteBlock .author {
		font-style: italic;
		color: #676f75;
		padding: 0.5em 0 0.5em 60px;
		background: url(../images/design/quote_tail.png) no-repeat;
	}
	.quoteBlock a {
		color: #333;
		border-color: #333;
	}
	
.entries li {
	background-color: #f5f5f5;
	border-bottom: 1px solid #fff;
	margin: 0;
	padding: 1em 0;
}
	.entries .date {
		color: #336699;
	}


.events {
	padding: 1em 0;
	background-color: #f5f5f5;
}
	.events li {
		margin-bottom: 1em;
	}
	.events p.date {
		color: #4da5a5;
		font-style: italic;
	}
	
a.joinButton {
	border: 0;
}



/*-----------------------------------
ABOUT US
__________________________________*/
#about-us{
}

#about-us .name{
color:#339999;
font-weight:bold;
font-size:15px;
}

#about-us .subtext{
color:#993399;
font-weight:bold;
font-size:13px;
}






/* ----------------
	CHAT
    ------------- */
.chatarea {
    text-align: left;
}    

.chatsender {
    color: #336699;
}

.chatadmin {
    color: #993399;
}

#chatmessages {
	color: #000;
}

/* ----------------
	NAVIGATION
    ------------- */
#navMain {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 639px;
	height: 62px;
}
	#navMain ul {
		width: 639px;
		height: 62px;
		background: url(../images/design/nav_main.gif) 0 0 no-repeat;
	}
		#navMain a {
			display: block;
			height: 62px;
			text-indent: -9999px;
			border: 0;
			background: url(../images/design/nav_main.gif) 0 0 no-repeat;
		}
		#navMain li {
			float: left;
		}
		#navMain li#nav-1 { width: 170px; }
		#navMain li#nav-2 { width: 227px; }
		#navMain li#nav-3 { width: 242px; }
		
		#navMain li#nav-1 a { background-position: 0 0;	}
		#navMain li#nav-2 a { background-position: -170px 0; }
		#navMain li#nav-3 a { background-position: -397px 0; }
		
		#navMain li#nav-1 a:hover,
		#navMain li#nav-1.active a { background-position: 0 -62px; }
		#navMain li#nav-2 a:hover,
		#navMain li#nav-2.active a  { background-position: -170px -62px; }
		#navMain li#nav-3 a:hover,
		#navMain li#nav-3.active a  { background-position: -397px -62px; }

#navTop {
	position: absolute;
	top: 0;
	right: 0;
}
	#navTop li {
		float: left;
	}
		#navTop li a {
			color: #666666;
			border: 0;
			display: inline-block;
			padding: 1em 0.75em;
			text-transform: lowercase;
		}
	#navTop li.active a {
		color: #336699;
	}
		
	#navTop li.sn {
		margin-left: 1.5em;
		background: url(../images/design/bg_sn_link.gif);
	}
		#navTop li.sn a {
			display: block;
			width: 150px;
			text-align: center;
			padding: 0.8em 0;
			font-size: 1.2em;
			color: #993399;
			font-weight: bold;
		}
		
#colNav ul {
	margin-bottom: 1em;
}

#colNav h3 {
    padding: 30px 10px 0 10px;
    color: #fff;
}

#colNav li {
	color: #993399;
	margin-top: 1px;
	padding: 0;
}
	#colNav li a {
		display: block;
		padding: 8px 10px;
		background-color: #f5f5f5;
	}
		#colNav li a:hover {
			background-color: #e4e4e4;
		}
		
		#colNav ul li {
			padding: 0;
			background-color: #333;
		    color: #c48ec4;
		}
			#colNav ul li a {
			    color: #c48ec4;
			    text-decoration: none;
			    border-bottom: none;
				padding-top: 8px;
			    padding-bottom: 8px;
			    padding-left: 10px;
			}
				#colNav ul li ul a {
					padding-left: 30px;
				}

				#colNav ul li ul,
				#colNav ul li ul li {
					margin: 0;
				}



/* ----------------
	TYPEOGRAPHY
    ------------- */
.date { height: 1.4em; }

.grey { background-color: #f5f5f5; }

.listing li.grey {
	padding: 1em;
	border: 1px solid #e4e4e4;
}

.currentPage {
	background-color: #a54294;
}
	.currentPage h3 {
		margin-left: 20px;
	}
	
ul.listingSummary {
/*	list-style: disc;*/
/*	margin: 0 1.5em;*/
	margin: 0;
}
	ul.listingSummary.profiles {
		list-style: none;
		margin: 2em 0 0 0;
	}
		ul.listingSummary.profiles li {
			width: 50%;
			float: left;
			margin-bottom: 1em;
		}
		ul.listingSummary.profiles img {
			float: left;
			margin: 0 0.5em 0.5em 0;
		}
		ul.listingSummary.profiles h4 {
			color: #339999;
		}

ol.listingSummary,
ol.listingDetails {
	margin: 0 1.5em;
	list-style: decimal;
}
	
.listingSummary li,
.listingDetails li,
.listing li {
	line-height: 1.5em;
}
	.listing li {
		background-color: ;
		margin-bottom: 1.5em;
	}
	.listingSummary li ul,
	.listingDetails li ul {
		margin: 1em;
	}
	.listingSummary li h3,
	.listingDetails li h3 {
		margin-bottom: -0.5em;
	}
	.listingSummary li h4,
	.listingDetails li h4 {
		margin: 0;
	}

	
p.question,
p.question,
p.question a {
	color: #A54294;
	font-weight: bold;
	margin: 0;
}

a.more {
	font-weight: bold;
	border: none;
}

/* ----------------
	FORM ELEMENTS
	Label widths are set via jQuery autoWidth, unless you want to set them manually.
    ------------- */
fieldset {clear: both;}
legend {padding: 0 0 1.286em; font-size: 1.167em; font-weight: 700;}
fieldset fieldset legend {padding: 0 0 1.5em; font-size: 1em;}
* html legend {margin-left: -7px;}
*+html legend {margin-left: -7px;}

form .field, form .buttons, form ul.fields li {clear: both; margin: 0 0 1em;}
form .field label, form ul.fields label {display: block; margin-right: 1em;}
form ul.fields { margin: 0; padding: 0; }
form ul.fields li {list-style-type: none;}
form ul.inline li, form ul.inline label {display: inline;}
form ul.inline li {padding: 0 .75em 0 0;}

input.radio, input.checkbox {margin: 3px; vertical-align: bottom;}
label, button, input.submit, input.image {cursor: pointer;}
* html input.radio, * html input.checkbox {margin: 0; vertical-align: middle;}
*+html input.radio, *+html input.checkbox {margin: 0; vertical-align: middle;}

textarea {overflow: auto;}
input.text, input.password, textarea, select {margin: 0; font: 1em/1.3 Helvetica, Arial, sans-serif; vertical-align: bottom;}
input.text, input.password, textarea {border: 1px solid #444; border-bottom-color: #666; border-right-color: #666; padding: 2px;}

* html button {margin: 0 .34em 0 0;}
*+html button {margin: 0 .34em 0 0;}

form.horizontal .field, form.horizontal ul.fields li {  }
form.horizontal .field label, form.horizontal ul.fields label  { display: inline; float: left; }
/* --------- */

.contactText,
.contactTextarea { width: 247px; padding: 3px; }

form input {
	padding: 3px;
}
form ul.fields li {
	position: relative;
}
	form ul.fields label.overlap {
		position: absolute;
		top: 3px;
		left: 3px;
		color: #999;
	}

div.errors {
	background: #FEFF9F url(../images/bg_error.gif) 0 0 repeat-x;
	border: 1px solid #E0D75F;
	margin: 1em 0;
	width: 100%;
}
	div.errorsInner {
		padding-left: 80px;
		background: url(../images/big_error.gif) 15px 1em no-repeat;
	}

.message {
	margin: 2.5em 0;
}
	.message p {
		margin: 1em 0;
	}
	.message.notice,
	.message.notice a {
		color: #c64b1d;
	}
	.message.error {
		color: #fff;
		background-color: #ab2828;
		padding: 1em;
	}
		.message.error a {
			color: #fff;
		}

	
		

/* ----------------
	MISC
    ------------- */
.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alighRight {text-align: right;}
.alignCenter {text-align: center;}
.clear {clear: both;}


.w-05 { width: 5%; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-33 { width: 33%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-66 { width: 66%; }
.w-80 { width: 80%; }
.w-100 { width: 100%; }


/* ----------------
	CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
	add this class to the element that needs to be cleared, or add the element's class or id to the declaration below
    ------------- */ 
.clearFix:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}