/*
Theme Name: The Boobles
Theme URI: 
Description: Theme for The Boobles
Version: 1.0
Author: Jared Ringold
Author URI: 
Tags: 
*/

@import "reset.css";

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto 21px }
.alignnone { display:block; margin:0 0 21px 0 }
.alignleft { 
	float: left;
	margin: 5px 10px 0 0;
}

.alignright { 
	float:right;
	margin: 5px -10px 0 20px;
}

.wp-caption { 
	padding: 10px 15px 10px 5px;
	/*border-bottom: 2px solid #dbdbdb;*/
	background: url(images/photo-shadow.png) right bottom;
	text-align: center;
}

.post .wp-caption img {
	padding: 0;
	background: none;
}

.wp-caption a {
	border: none;
}

p.wp-caption-text {
	font-size: 11px;
	line-height: 14px;
	text-align: center;
	font-style: italic;
	margin: 5px;
	color: #555;
}

/* You might find the following useful */
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 21px;
	color: #fff;
	background: #000;
}

#wrapper {
	background: #383838 url(images/body-bg.jpg);
}


a {
	color: #fe87b1;
	text-decoration: none;
	outline: none;
	/*border-bottom: 1px solid;*/
}

	a:hover {
		color: #fff;
	}
	
h1 {
	font-size: 36px;
	font-weight: normal;
	margin-bottom: 21px;
}

h2 {
	font-size: 30px;
	font-weight: normal;
	font-style: italic;
	margin: 21px 0;
}

h3 {
	font-size: 24px;
	font-weight: normal;
	font-style: italic;
	line-height: 28px;
	margin: 21px 0;
}

h4 {
	font-size: 16px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 21px 0;
}

h5 {
	font-size: 14px;
	font-weight: bold;
}

h6 {
	font-size: 14px;
	font-weight: normal;
}

hr {
	display: none;
}

p {
	font-size: 14px;
	margin-bottom: 21px;
}

ul {
	margin: 21px 30px;
}

.post ul li {
	list-style-type: disc;
}

ol {
	margin: 21px 30px;
}

.post ol li {
	list-style-type: decimal;
}

blockquote {
	font-style: italic;
	padding-left: 17px;
	border-left: 3px solid #5e5e5e;
	border-bottom: 1px solid #5e5e5e;
	margin: 21px 0;
}

blockquote cite {
	display: block;
	text-align: right;
	font-weight: normal;
	font-style: normal;
	margin-top: 10px;
}

pre, code {
	font-family: "Courier New", Courier, monospace;
}

abbr, acronym {
	border-bottom: 1px dotted;
}

sup, sub {
	font-size: 9px;
	line-height: 0;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}

small {
	font-size: 75%;
}
	
table {
	margin: 21px auto;
}

	th {
		padding: 5px;
		border-bottom: 1px solid #5e5e5e;
	}
	
	td {
		padding: 5px;
		color: #fff;
	}
	
form input[type="text"] {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	width: 290px;
	padding: 5px;
	border: 0;
	color: #111;
}
		
form label {
	font-size: 12px;
	line-height: 30px;
	text-align: left;
	width: 300px;
}

form label.radio {
	padding: 2px 5px;
}

form label.radio:hover {
	background: #5e5e5e;
}

form textarea {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	width: 450px;
	height: 150px;
	padding: 5px;
	border: 0;
}

form select {
	padding: 3px;
	border: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #111;
}

form p {
	font-size: 12px;
	margin-bottom: 10px;
}


/*************************************
****** HEADER STYLES *****************
*************************************/

#header {
	width: 100%;
	height: 69px;
	border-bottom: 1px solid #5e5e5e;
	background: #000;
}

	ul#menu {
		width: 960px;
		height: 69px;
		margin: 0 auto;
		padding: 0;
		list-style-type: none;
	}
	
		ul#menu li {
			width: 192px;
			height: 69px;
			float: left;
		}

			ul#menu li a {
				display: block;
				width: 192px;
				height: 69px;
				text-indent: -9999px;
				background: url(images/navbar.png);
			}
			
			ul#menu li#nav1 a { background-position: 0px 0px; }
			ul#menu li#nav1 a:hover { background-position: 0px -70px; }
			ul#menu li#nav1.current_page_item a,
			ul#menu li#nav1.current_page_parent a { background-position: 0px -140px; }
			
			ul#menu li#nav2 a { background-position: -192px 0px; }
			ul#menu li#nav2 a:hover { background-position: -192px -70px; }
			ul#menu li#nav2.current_page_item a,
			ul#menu li#nav2.current_page_parent a { background-position: -192px -140px; }
			
			ul#menu li#nav3 a { background-position: -384px 0px; }
			ul#menu li#nav3 a:hover { background-position: -384px -70px; }
			ul#menu li#nav3.current_page_item a,
			ul#menu li#nav3.current_page_parent a { background-position: -384px -140px; }
			
			ul#menu li#nav4 a { background-position: -576px 0px; }
			ul#menu li#nav4 a:hover { background-position: -576px -70px; }
			ul#menu li#nav4.current_page_item a,
			ul#menu li#nav4.current_page_parent a { background-position: -576px -140px; }
			
			ul#menu li#nav5 a { background-position: -768px 0px; }
			ul#menu li#nav5 a:hover { background-position: -768px -70px; }
			ul#menu li#nav5.current_page_item a,
			ul#menu li#nav5.current_page_parent a { background-position: -768px -140px; }
			
			
/*************************************
******** BODY STYLES *****************
*************************************/

#body-wrap {
	width: 960px;
	margin: 0 auto;
	background: url(images/wrapper-bg3.jpg) no-repeat right top;
}

.home #body-wrap {
	/*background: url(images/home-wrapper-bg2.jpg) no-repeat center top;*/
	background: none;
}

#bg-wrap {
	min-width: 960px;
	width: auto !important;
	width: 100%;
	margin: 0 auto;
}

.home #bg-wrap {
	background: url(images/home-wrapper-bg3.jpg) no-repeat center top;
}

	#content {
		position: relative;
		display: inline;
		float: left;
		_overflow: hidden;
		width: 460px;
		margin: 50px 10px;
	}
	
	.home #content {
		width: 300px;
	}
	
	.home #content h1 {
		width: 300px;
		height: 148px;
	}
	
a.logo {
	display: block;
	width: 221px;
	height: 108px;
	text-indent: -9999px;
	background: url(images/the-boobles-logo-white.png);
}

.home a.logo {
	position: absolute;
	display: block;
	width: 300px;
	height: 148px;
	text-indent: -9999px;
	background: url(images/the-boobles-logo-black.png);
}

h1.logo {
	float: left;
	margin-bottom: 50px;
}

h2.page-title,
.post h2.page-title {
	float: left;
	font-size: 48px;
	line-height: 48px;
	font-style: italic;
	border-left: 3px solid;
	padding-left: 20px;
	margin: 34px 0 0 20px;
	text-shadow: 1px 2px 2px rgba(57, 57, 57, .6);
}

.post {
	position: relative;
	margin-bottom: 27px;
	*margin-bottom: 48px;
	padding-bottom: 1px;
}

.home .post {
	position: relative;
	color: #fff;
	padding: 0 17px;
	margin-bottom: 0;
	background: url(images/gray-bg.png);
	border: 3px solid #5e5e5e;
}

	h3.mod-head {
		margin: 0 -17px 17px;
		padding: 17px;
		border-bottom: 1px dashed #5e5e5e;
		background: url(images/gray-bg.png);
		text-align: center;
	}
	
	h3.mod-head:before { content: "~ "; }
	
	h3.mod-head:after { content: " ~";}
	
	h4.mod-foot {
		margin: 0 -17px;
		padding: 10px 17px;
		border-top: 1px dashed #5e5e5e;
		background: url(images/gray-bg.png);
		text-align: center;
		font-size: 18px;
	}

	.home #content .post p {
		font-size: 16px;
	}


	.home .post .text-top {
		position: absolute;
		z-index: 2;
	}

	.home .post .text-shadow {
		position: absolute;
		top: 1px;
		left: 1px;
		z-index: 1;
		margin: 0 -1px -1px 0;
		color: #333;
	}

	.post h2 {
		padding: 0;
		margin: 0 0 21px 0;
		border: 0;
		font-size: 30px;
		line-height: 35px;
	}
	
	p.meta {
		padding: 5px 10px 7px;
		border-top: 1px dashed #5e5e5e;
		border-bottom: 1px solid #5e5e5e;
	}
	
		.post-date { float: left; }
		.comments-count { float: right; }
		
	.post img {
		padding: 10px 20px 35px 10px;
		background: url(images/photo-shadow.png) right bottom;
	}
	
	.post img.wp-smiley {
		padding: 0;
		background: none;
	}
		
		
.page-navigation {
	overflow: auto;
	margin: 0;
}

	.page-navigation .next-link a {
		float: right;
	}
	
	.page-navigation .prev-link a {
		float: left;
	}
	
.gallery-list {
	overflow: hidden;
}
	
.gallery-list .photo-gallery {
	float: left;
	_float: none;
	margin-right: 20px;
}

.gallery-list h2 {
	font-size: 18px;
	line-height: 21px;
	margin-bottom: 0;
}

.photo-gallery.even-column { margin-right: 0px; }

.gallery-list .preview {
	position: relative;
	width: 200px;
	height: 150px;
	padding: 10px 20px 35px 10px;
	margin: 0 -10px 0 0;
	background: url(images/photo-shadow.png) right bottom;
}

.gallery-list .preview-large {
	position: relative;
	width: 440px;
	height: 330px;
	padding: 10px 20px 35px 10px;
	margin: 0 -20px 0 0;
	background: url(images/photo-shadow.png) right bottom;
}

	.gallery-list img {
		position: absolute;
		clip: rect(0px 200px 150px 0px);
		padding: 0;
		margin: 0;
		background: none;
	}
	
	.gallery-list .preview-large img {
		position: absolute;
		clip: rect(0px 440px 330px 0px);
		padding: 0;
		margin: 0;
		background: none;
	}

.gallery img {
	float: left;
	padding: 10px 13px 33px 10px;
	margin: 0 17px 12px 0;
	background: url(images/thumbnail-shadow.png) right bottom;
}

.gallery .last img {
	margin-right: -3px;
}

h4.home-quote {
	width: 540px;
	height: 74px;
	margin: 0 40px;
	padding: 0;
	text-indent: -9999px;
	background: url(images/juan-mellon-quote.png);
}

.overlay-bg {
	padding: 10px;
	background: url(images/gray-bg.png);
}

	.home .overlay-bg {
		margin: 0 -10px;
	}

ul.social {
	width: 300px;
	list-style-type: none;
	margin: 0 auto;
	overflow: hidden;
}

	ul.social li {
		width: 100px;
		height: 25px;
		float: left;
	}

	.social a {
		display: block;
		width: 100px;
		height: 25px;
		text-indent: -9999px;
		background: url(images/links.png);
	}
	
		.social a.facebook { background-position: 0px 0px; }
		.social a.facebook:hover { background-position: 0px -25px; }
		
		.social a.myspace { background-position: -100px 0px; }
		.social a.myspace:hover { background-position: -100px -25px; }
		
		.social a.twitter { background-position: -200px 0px; }
		.social a.twitter:hover { background-position: -200px -25px; }
		
		.social a.itunes { background-position: -300px 0px; }
		.social a.itunes:hover { background-position: -300px -25px; }
		
		.social a.cdbaby { background-position: -400px 0px; }
		.social a.cdbaby:hover { background-position: -400px -25px; }
		
		.social a.rhapsody { background-position: -500px 0px; }
		.social a.rhapsody:hover { background-position: -500px -25px; }
		
		.social a.amazonmp3 { background-position: -600px 0px; }
		.social a.amazonmp3:hover { background-position: -600px -25px; }
		
.frame-shadow {
	position: relative;
	width: 300px;
	padding: 0 10px 10px 10px;
	margin: 11px auto;
	background: url(images/frame-shadow.png) right bottom no-repeat;
}

.home .frame-shadow {
	margin: 0 -10px 11px;
}

.frame-shadow-large {
	position: relative;
	width: 540px;
	padding: 0 10px 10px 10px;
	margin: 20px auto 11px;
	background: url(images/frame-shadow-large.png) right bottom no-repeat;
}
	

/*************************************
******* COMMENTS STYLES **************
*************************************/

#comments-wrap {
	margin-top: 49px;
}

	h3#comments span {
	}

	.commentlist {
		margin: 21px 0;
		border-top: 1px dashed #5e5e5e;
	}

	.comment {
		position: relative;
		margin: 21px 0;
		border-bottom: 1px dashed #5e5e5e;
	}

		.comment img.avatar {
			float: right;
			margin: 3px -10px 0 10px;
			padding: 5px 15px 20px 5px;
			background: url(images/photo-shadow.png) right bottom;
		}
		
		.comment cite {
			font-size: 18px;
			font-style: italic;
		}
	
		.commentmetadata {
			font-size: 11px;
			margin-bottom: 11px;
		}
		
		.reply {
			text-align: right;
		}
		
	#respond {
		margin-top: 21px;
	}

/*************************************
****** SIDEBAR STYLES ****************
*************************************/

#sidebar {
	position: relative;
	float: right;
	display: inline;
	width: 460px;
	margin: 0 10px 50px;
	padding-top: 370px;
}

.home #sidebar {
	width: 620px;
	padding-top: 540px;
	display: inline;
}

#latest-news h2 {
	margin: 21px 40px;
}

#latest-news ul {
	margin: 21px 40px;
}

ul.subnav {
	width: 294px;
	margin: 21px auto;
	padding: 0;
	border: 3px solid #5e5e5e;
	background: url(images/gray-bg.png);
}

	ul.subnav h3 {
		margin: 0;
		padding: 17px;
		border-bottom: 1px dashed #5e5e5e;
		background: url(images/gray-bg.png);
		text-align: center;
	}
	
	ul.subnav h3:before { content: "~ "; }
	ul.subnav h3:after { content: " ~"; }

	ul.subnav ul {
		margin: 17px;
	}
	
	ul.subnav a {
		color: #fff;
	}
	
	ul.subnav ul li {
		margin-bottom: 7px;
	}
	
			ul.subnav ul li a {
				font-size: 16px;
			}
			
				ul.subnav ul li a span {
					display: none;
					margin-right: 5px;
				}
			
			ul.subnav ul li a:hover {
				color: #FE87B1;
			}
			
			ul.subnav ul li.current_page_item a {
				color: #FE87B1;
			}
			
				ul.subnav ul li.current_page_item a span {
					display: inline;
				}

#money-raised {
	position: absolute;
	top: 0px;
	right: -12px;
	width: 192px;
	padding: 0 2px 3px 2px;
	background: url(images/money-total-bg.png) right bottom no-repeat;
}

	#money-raised h2 {
		font-size: 10px;
		line-height: 19px;
		text-transform: uppercase;
		font-style: normal;
		text-align: center;
		color: #000;
		margin: 1px 5px 0;
		padding: 0;
		border-bottom: 1px dashed #bcbcbc;
	}
	
		#money-raised h2 span {
			font-style: italic;
			text-transform: none;
		}
	
	#money-raised h3 {
		font-size: 24px;
		line-height: 26px;
		font-style: italic;
		text-align: center;
		color: #fc6198;
		margin: 0 5px 7px;
		padding: 0 0 2px 0;
	}
	
.module {
	width: 260px;
	margin: 0;
	padding: 0 17px 8px;
	border: 3px solid #5e5e5e;
	background: url(images/gray-bg.png);
}

	.module h3 {
		margin: 0 -17px 17px;
		padding: 17px;
		border-bottom: 1px dashed #5e5e5e;
		background: url(images/gray-bg.png);
		text-align: center;
	}
	
	.module h3:before { content: "~ "; }
	.module h3:after { content: " ~"; }


/*************************************
****** FOOTER STYLES *****************
*************************************/

#footer-wrap {
	width: 100%;
	border-top: 1px solid #5e5e5e;
	background: #000;
	position: relative;
}

	#footer {
		width: 940px;
		margin: 0 auto;
		padding: 40px 0;
	}
	
	ul#footer-menu {
		width: 300px;
		float: right;
		margin: 0 0 0 20px;
		padding: 0;
		font-size: 12px;
	}
	
		ul#footer-menu li {
			float: left;
			margin-left: 20px;
			text-transform: uppercase;
		}
		
	#footer ul.social {
		float: right;
		width: 300px;
		margin: -4px 0 0 0;
	}
		
	p.copyright {
		float: left;
		width: 300px;
		margin: 0 20px 0 0;
	}
	
	p.credit {
		float: left;
		width: 300px;
		margin: 0 20px 0 0;
		text-align: center;
	}
	
	a.rss {
		padding-left: 20px;
		background: url(images/rss.png) no-repeat left 3px;
	}
	
#open-letter-wrap {
	width: 100%;
	border-top: 1px solid #5e5e5e;
	background: #111;
	position: relative;
}

	#open-letter {
		width: 940px;
		height: 40px;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
	}
	
		#open-letter a {
			margin: 0 auto;
			padding: 10px 0 10px 70px;
			background: url(images/open-letter-bg.png) no-repeat;
			color: #fff;
			font-size: 18px;
			line-height: 40px;
			text-transform: uppercase;
			letter-spacing: 1px;
			text-align: left;
			white-space: nowrap;
			text-shadow: 0px 1px 2px rgba(0, 0, 0, .6);
		}
		
		#open-letter a:hover {
			color: #fe87b1;
		}
		
			#open-letter a span {
				font-size: 14px;
				text-transform: none;
				font-style: italic;
			}
			
			
/*  Contact Form styles  */

span.wpcf7-form-control-wrap {
	display: block;
}

span.wpcf7-not-valid-tip {
	color: #000;
	padding: 3px 5px !important;
}

.wpcf7-response-output,
.wpcf7-validation-errors, 
.wpcf7-mail-sent-ng,
.wpcf7-mail-sent-ok,
.wpcf7-spam-blocked {
	margin: 20px 0 !important;
	padding: 17px !important;
	border-width: 3px !important;
}

img.ajax-loader {
	padding: 0;
	background: none;
	background-color: #FFF;
}

div.module {
	overflow: hidden
}

div.module p {
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 18px;
}

div.module ul {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 18px;
}

div.module ul li {
	margin-bottom: 9px;
}

div.module form p {
	margin-bottom: 9px;
}

div.module input[type="text"] {
	padding: 3px;
}

#donation-form label {
	display: block;
	float: left;
	width: 100px;
	margin-right: 5px;
	line-height: 23px;
}

#donation-form input#donation_amount {
	width: 50px;
	text-align: right;
	margin-right: 5px;
}

.form_msg,
.form_msg2 {
	display: none;
	font-size: 12px;
	line-height: 18px;
	margin: 10px 0 9px;
}

.form_msg2 { display: block; }

.red {
	color: red;
	font-size: 125%;
	line-height: inherit;
}

.green {
	color: green;
	font-size: 125%;
	line-height: inherit;
}

#mailing-list input#wpoi_email {
	width: 250px;
}

#mailing-list input[type="submit"] {
	margin: 0 auto;
}

#mailing-list p {
	/*float: left;*/
}