/*
Theme Name: Joining Hearts
Description: A custom theme for Joining Hearts
Version: 1.0
Author: Southern Web Group
Author URI: http://www.southernwebgroup.com

*/

/* Reset */


html{color:#333;background:#a72a2a}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}


/* Utility */

.clear {
	clear: both;
}

.hide {
	display: none;
}

a img {
	border: none;
}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}

.red {
	color: #a72a2a;
}

/* ----- Body/Wrapper/Container ----- */



body {
	background: url(ui/body-bg.jpg) repeat-x #a72a2a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #333;
}

#wrapper {
	background: url(ui/wrap-bg.jpg) repeat-y top center;
	width: 100%;
	display: table;
}


.container {
	width: 960px;
	margin: 0 auto;
}

/* ----- Header/Logo ----- */

#header {
	width: 100%;
	height: 114px;
	background: url(ui/header-bg.jpg) no-repeat top center;
}

#header h1.logo {
	float: left;
	margin-left: 1px;
}


#header h1.logo a {
	text-indent: -9999px;
	overflow: hidden;
	width: 444px;
	height: 104px;
	display: block;
	background: url(ui/logo.jpg) no-repeat #fff;
}


/* ----- Top Nav/Contact Us  ----- */

.topnav {
	float: right;
	width: 420px;
}

.topnav a {
	float: right;
	margin: 0px 10px 10px 0px;
	text-indent: -9999px;
	background: url(ui/top-contact.jpg) no-repeat;
	display: block;
	width: 175px;
	height: 36px;
}


/* ----- Social Media  ----- */

.social {
	float: right;
	width: 180px;
}

.social ul li a {
	display: block;
	text-indent: -9999px;
	height: 31px; 
	width: 30px;
}

.social ul li {
	display: inline;
	float: right;
	margin-right: 13px;
}

.social ul li a.facebook {
	background: url(ui/facebook.jpg) no-repeat;
}
.social ul li a.twitter {
	background: url(ui/twitter.jpg) no-repeat;
}
.social ul li a.rss {
	background: url(ui/rss.jpg) no-repeat;
}



/* ----- Global Navigation  ----- */
#globalnav
{
	background: url(ui/nav-bg.jpg) no-repeat top center;
	text-align: left;
	height: 59px;
	overflow:hidden;
}

	#globalnav ul#dropnav
	{
		width: 960px;
		padding: 0;
		margin: 0;
	}
	
		#globalnav ul li
		{
			float: left;
			list-style-type: none;
		}
		
			#globalnav ul li a
			{
				display: block;
				outline: 0;
			}
			
			
			
			
			
				/* ---- CSS Sprites ----*/
				
				
				#globalnav ul li a.home, #globalnav ul li a.about-us, #globalnav ul li a.get-involved, 
				#globalnav ul li a.events, #globalnav ul li a.patrons-sponsors, #globalnav ul li a.partners, #globalnav ul li a.media 
				{
					height: 59px;
					text-indent: -9999px;
				}
			
				#globalnav ul li a.home {background: url(ui/nav.jpg) 0 0 no-repeat;width: 95px;}
				#globalnav ul li a.about-us {background: url(ui/nav.jpg) -95px 0 no-repeat;width: 125px;}
				#globalnav ul li a.get-involved {background: url(ui/nav.jpg) -220px 0 no-repeat;width: 175px;}
				#globalnav ul li a.events {background: url(ui/nav.jpg) -395px 0 no-repeat;width: 95px;}
				#globalnav ul li a.patrons-sponsors {background: url(ui/nav.jpg) -490px 0 no-repeat;width: 250px;}
				#globalnav ul li a.partners {background: url(ui/nav.jpg) -740px 0 no-repeat;width: 115px;}
				#globalnav ul li a.media {background: url(ui/nav.jpg) -853px 0 no-repeat;width: 104px;}
				
				
				/* ---- Hover Effect ----*/
				
				#globalnav ul li a.home:hover {background: url(ui/nav.jpg) 0 -59px no-repeat;width: 95px;}
				
				#globalnav ul li a.about-us:hover {background: url(ui/nav.jpg) -95px -59px no-repeat;width: 125px;}
				
				#globalnav ul li a.get-involved:hover {background: url(ui/nav.jpg) -220px -59px no-repeat;width: 175px;}
				
				#globalnav ul li a.events:hover {background: url(ui/nav.jpg) -395px -59px no-repeat;width: 95px;}

				#globalnav ul li a.patrons-sponsors:hover {background: url(ui/nav.jpg) -490px -59px no-repeat;width: 250px;}
				
				#globalnav ul li a.partners:hover {background: url(ui/nav.jpg) -740px -59px no-repeat;width: 115px;}

				#globalnav ul li a.media:hover {background: url(ui/nav.jpg) -853px -59px no-repeat;width: 104px;}





/* ---- LINKS ----*/

/* all menu links */
#subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#474747;
	color: #fff;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#dropnav a{
	margin:0px 0px 0px 0px;
	float:left;	
}

/* Just sub menu links */


/* All menu links on hover or focus */


#subMenusContainer a:hover, #subMenusContainer a:focus #subMenusContainer a.subMenuParentBtnFocused{
	background-color: #474747;
	color:#fff;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus,
#subMenusContainer a.subMenuParentBtnFocused,
{
	background-color: #a72a2a;
	color:#fff;
}



/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0px 0 0 -2px;
	
}


/* All ULs and OLs */
#dropnav, #dropnav ul, #dropnav ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin: 0;
	list-style: none;
}

/* All submenu OLs and ULs */
#dropnav ol, #dropnav ul, #subMenusContainer ul, #subMenusContainer ol {	
	/*border around submenu goes here	 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;*/
	background:#474747;	
	left:0;
	top:34px;
	border-left: solid 1px #fff;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
}




/* List items in main menu --[for non-javascript users this applies to submenus as well]  */


#dropnav li { 
	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
	position:relative;
	float:left;
	
}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
#dropnav{
	display:block;
	position: absolute;
	list-style:none;
	margin:0 0 0px 0;
	z-index:5;
	display:block;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000;}


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#dropnav li li{	float:none;	}

#dropnav li li a{ /* Just submenu links*/
	padding: 10px 4px 10px 8px;
	text-indent: none !important;
	position:relative;
	float:none;
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
}

#dropnav li li a:hover{ /* Just submenu links*/	
	background: #a72a2a;
	color: #fff;
}

#dropnav li ul { /* second-level lists */
	position: absolute;
	width: 210px;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
#dropnav li ul ul { margin: -1em 0 0 -1000em; }
#dropnav li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
#dropnav li:hover ul{	margin-left: 0; }
#dropnav li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}





/* ----- Homepage Slider  ----- */


#featured {
	height: 252px;
	border-bottom: 3px #a72a2a solid;
}


/* ----- Content/Main  ----- */



#content .container {
	background: url(ui/content-bg.jpg) repeat-y top center;
	padding-left: 1px;

}


.main {
	float: left;
	margin: 20px 0px 40px 15px;
	width: 580px;
}

.main a {
	color: #a72a2a;
	text-decoration: none;
}

.main a:hover {
	text-decoration: underline;
}

.main h1 {
	color: #a72a2a;
	font-size: 1.9em;
	line-height: 1.8em;
	font-weight: bold;
}

.main h2 {
	font-size: 1.7em;
	line-height: 1.7em;
	font-weight: bold;
	padding-top: .5em;
}

.main h3 {
	color: #a72a2a;
	font-size: 1.5em;
	line-height: 1.7em;
	padding-top: .5em;
	font-weight: bold;
	padding-bottom: 10px;
	margin: 10px 0px 5px 0px;
	border-bottom: 2px dotted #ccc;
	background: #fff;
}

.main h4 {
	font-size: 1.3em;
	line-height: 1.7em;
	font-weight: bold;
	padding-top: .5em;
}

.main h5 {
	color: #a72a2a;
	font-size: 1.2em;
	line-height: 1.7em;
	font-weight: bold;
	padding-top: .5em;
}

.main h6 {
	font-size: 1.1em;
	line-height: 1.7em;
	font-weight: bold;
	padding-top: .5em;
}


.main ol li {
	list-style: decimal;
	margin-left: 45px;
	padding-left: 8px;
	line-height: 1.6em;
	
}


.main ol, .main ul {
	padding: 12px 0px;
}

.main ul li {
	list-style: disc;
	margin-left: 45px;
	padding-left: 8px;
	line-height: 1.6em;
	
}


.main blockquote {
  font: 14px/22px;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
} 


.main ul.heart li {
	list-style: none;
	background: url(ui/heart-icon.jpg) no-repeat #fff;
	margin: 0;
	padding: 0;
	padding: 0px 0px 4px 24px;
}


.main p {
	line-height: 1.5em;
	padding: 8px 0px;
}

.main p span {
	color: #333 !important;
}

.main hr {
	border: 1px solid #fff;
	border-top: 2px dotted #ccc;
	background: #fff;
	margin: 20px 0px;
	clear: both;
}


.main a.learn-more {
	padding: 4px 8px;
	background: #a72a2a;
	color: #fff;
	margin: 8px 0px 15px 0px;
}

.main a.alignright {
	float: right;
}


/* ----- Main Additional Div  ----- */







/* ----- Patron Hearts / Sponsors ----- */

span.heart1 {
	display: inline-block;
	width: 18px;
	height: 17px;
	background: url(ui/heart-icon.jpg) repeat-x #fff;
}

span.heart2 {
	display: inline-block;
	width: 36px;
	height: 17px;
	background: url(ui/heart-icon.jpg) repeat-x #fff;
}

span.heart3 {
	display: inline-block;
	width: 54px;
	height: 17px;
	background: url(ui/heart-icon.jpg) repeat-x #fff;
}

span.heart4 {
	display: inline-block;
	width: 72px;
	height: 17px;
	background: url(ui/heart-icon.jpg) repeat-x #fff;
}





.sponsor-level img {
	float: right;
	margin: 20px 10px 25px 10px;
}






/* ----- Board of Directors ----- */


.board-member {
	height: 260px;
	width: 170px;
	float: left;
	padding: 10px;
	text-align: center;
}


.board-member img {
	margin: 0px 0px 12px 0px;
}

.board-member span.title {
	font-weight: bold;
}

/* ----- Side  ----- */

#side {
	padding: 25px 16px 0px 0px;
	width: 306px;
	min-height: 540px;
	float: left;
}


#side ul.menu li {
	font-size: 1.3em;
	font-weight: bold;
	padding: 0px 0px 8px 20px;
}

#side ul.menu li a {
	text-indent: -9999px;
	height: 53px;
	width: 260px;
	display: block;
	color: #333;
	text-decoration: none;
}

#side ul.menu li a:hover {
	text-decoration: underline;
}


#side ul.menu li a.who-we-are {
	background: url(ui/who-we-are.jpg) no-repeat;
}
#side ul.menu li a.what-we-do {
	background: url(ui/what-we-do.jpg) no-repeat;
}
#side ul.menu li a.who-we-help {
	background: url(ui/who-we-help.jpg) no-repeat;
}
#side ul.menu li a.volunteer-donate {
	background: url(ui/volunteer-donate.jpg) no-repeat;
}



#side p {
	padding: 30px 0px 30px 0px;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.6em;
}



#side img.photo-gallery {
	margin: 20px 0px 20px 20px;
}

#side .sponsors-ads {
	margin: 20px;
}

#side .sponsors-ads img {
	margin: 0px 20px;
}


#side .sponsors-ads h3 {
	text-indent: -9999px;
	display: block;
	background: url(ui/our-sponsors.jpg) no-repeat;
	width: 185px;
	height: 27px;
}



#side .subscribe-box {
	margin: 20px;
}

#side .subscribe-box h3 {
	text-indent: -9999px;
	display: block;
	background: url(ui/mailing-list.jpg) no-repeat;
	width: 279px;
	height: 40px;
}

#side .subscribe-box input#email_address, #side .subscribe-box input#first_name, #side .subscribe-box input#last_name {
	border: 1px solid #ccc;
	padding: 4px;
	color: #474747;
	margin-bottom: 8px;
	line-height: 2.0em;
	height: 25px;
	width: 180px;
}

#side .subscribe-box input.submit-btn {
	margin: 8px 0px 0px 0px;
}



/* ----- Footer  ----- */


#footer {
	background: url(ui/footer-bg.jpg) no-repeat top center;
	width: 100%;
	height: 125px;
}

#footer div.left {
	color: #fff;
	float: left;
	text-align: left;
	line-height: 55px;
	padding-left: 15px;
	width: 585px;
}

#footer div.right {
	color: #fff;
	float: left;
	text-align: right;
	line-height: 55px;
	padding-right: 15px;
	width: 345px;
}

#footer a {
	color: #fff;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}






/* ----- WordPress  ----- */



img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}