/* 
Theme Name: Stars
Theme URL: http://b4south.com/wp-themes/Stars
Description: Custom theme for Summer Stars Camp for the Performing Arts
Author: Tracy Graves
Author URI: http://b4south.com
Version: 1.0

*/

/* Reset browser defaults */
@import url('lib/css/reset.css');

/* Apply basic typography styles */
@import url('lib/css/typography.css');
@import url('lib/css/grid.css');
@import url('lib/css/forms.css');

/* image sets */
.post-content img { max-width:100%; height:auto; margin: 0 0 16px 0;}

.alignleft,
img.alignleft {
	float: left;
    margin:0 24px 24px 0;
}
.alignright,
img.alignright {
	display: block;
	float: right;
    margin:0 0 24px 24px;
}
.aligncenter,
img.aligncenter {
	margin-left:auto;
	margin-right:auto;
	display: block;
	clear: both;
}
.wp-caption {
	text-align: center;
	margin-bottom:16px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	margin: 0;
	padding:5px;
	font-size: 1em;
	color:#666;
}
.gallery img {
    margin:0;
}
.wp-smiley { /* Prevent the smileys from breaking line-height */
	max-height:12px;
	margin:0 !important;
}

/* Generic site settings */
html {
	height: 100%;
overflow:inherit;
font-size: 10px;
letter-spacing:1px}

* html #container { 
h/eight:100%; /* IE6 treats height as min-height */

}

body {
	margin: 0;
	f/ont-family: Verdana,sans-serif;
font-family: "Helvetica Neue", Helvetica, sans-serif;	color:	#eee;
	background: #000; 
	text-align: center;
	height:100%;
	font-size:100.01%;
}

p { text-align: justify; font-size:1.2em;}
h1, h2, h3, h4, h5, h6 {color:#f4c413;}
h1{ font-family: "Helvetica Neue", Helvetica, sans-serif; }
h/2 { font-family: Georgia, Times, serif; letter-spacing:normal;}
h3 { font-family: "Helvetica Neue", Helvetica, sans-serif;
		font-weight:400; text-transform:uppercase;}
h2, h4 { font-family: "Helvetica Neue", Helvetica, sans-serif;
		 font-weight:200; text-transform:uppercase;}
img#bg { 
		/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
			z-index:-1;}
					
@media screen and (max-width: 1024px){
			img#bg {
			left: 50%;
			margin-left: -512px; }
		}

#main{
padding:0;
margin:16px auto;
position:relative;
color:#ddd;

}
.clearfix {clear:both; }

.container{ 
margin: 0px auto -80px;
text-align:left;
 min-height: 100%; height: auto !important; height: 100%;
background: transparent; 
position:relative;
width:952px;
border-left: solid 0px #222;
border-right: solid 0px #222;
}

.content{
 padding: 16px;
 background: transparent;
 display:block;
 position: relative;
 left:0;
 top:0;
background:transparent url('/images/content-bg.png') repeat-y top left;
}
#footpush {
	height: 80px;
	display:block;
}
#footer {
	margin:-80px auto 0px;
	font-size: .9em;
	height:80px;
	color: #333;
	padding-bottom: 00px 0;
	background: #fff;
	border-top: 0px solid #ccc;
	font-family: "Century Gothic", "Helvetica Neue",Helvetica, sans-serif;
	text-transform: uppercase;
	padding-top:20px;
	background:#000;
	position:relative;
	}
#contact {
	padding-top: 0px;
	list-style:none;
	left:50%;position: relative;
	float:left;
	margin:0;
}
#contact li { float:left; padding: 0 6px; right: 50%; position: relative;}
.separator {color: #ccc; }
#site-credit {text-align:center; margin-top:16px; font-size:.9em;}
#header {
	position:relative;
	h/eight:160px;
	margin: 0px auto 16px;
	background:transparent;
	border-bottom: 0px solid #be2e1d;
}

a, a:visited { color:#01c0ff;text-decoration:none; }
a:hover{text-decoration:underline; color:#557487;}

#logo{
	position:relative;
	float:left;
		margin-left:40px;
	z-index:5;
	padding: 4px 0;
}
#donate{
position:relative;
float:right;
	z-index:10;
	margin-top:12px;
	margin-left:24px;
}
#donate a {
	background:#ca2b27;
	padding: 2px 24px 2px 16px;
	height:26px; width: 80px;
	display:block;
}	
#donate a:hover { background:#444; }

#tagline{
	position:absolute;
	top:40px;
	left:232px;
}
#tagline h1 { 
	margin: 0;
	color:#ddd;
	font-size:2.2em;
	padding:0;
	text-transform:uppercase;
	font-weight:200;
}

#topnav {
	position: absolute;
	top:170px;
	left:272px;
	list-style:none;
	margin: 0 auto;
	border-bottom: 0px solid #bbb;
	w/idth:100%;
	padding: 0 0px;
	z-index:10;
	background: transparent;
}
#topnav li{
	float:left;
	padding: 6px 20px;
	color:#aaa;
	border-left: solid 1px #333;
	position: relative;
}

#topnav li a{
	color:#fff;
	text-decoration:none;
	font-size: 1.2em;
	font-weight:200;
font-family: "Helvetica Neue", Helvetica, sans-serif;
	letter-spacing:2px;	
}
#topnav li a:hover { color:#ca2b27; }
#topnav li.active a{  	color: #ccc; }

/*--- DROPDOWN ---*/
#topnav ul{
	background:transparent; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	b/ackground:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	margin: 0;
	padding: 8px 0 0 0;
}
#topnav ul li.page_item{
	margin: 0;
	padding: 6px 32px;
	p/adding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	background:#fff;
}
#topnav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	c/olor:#ca2b27;
	b/ackground:#333;
	t/ext-decoration:underline;
}
#topnav li.page_item a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
	color: #000;
	padding: 0;
}
#topnav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#topnav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#topnav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	color:#ca2b27;
}



#page-title{ margin: 8px 0 8px 16px; float:left;	border-right: 1px solid #333;	padding-bottom:16px;width: 240px;

}
#page-title img, #page-title h1, #page-title #subpage-title{ f/loat:left; }
#page-title h1 { padding:12px 0px; }
#subnav
{

	float:left;
	width: 160px;
	margin: 8px 8px 0 16px;
	list-style:none;
	padding-bottom:16px;
	padding-top:0px;
}
#subnav li { padding:4px; line-height:1.6em; margin-left:8px;}
#subnav li.current_page_item{}
#subnav a{ 
	color:#999; 
	text-decoration:none; 
	text-transform:uppercase; 
	font-size:1.2em; 
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-weight:200;
}
#subnav .current_page_item a, #subnav .current-cat a{ color:#fff; }
#subnav a:hover { color:#ca2b27; }

#subpage-title {margin:0 16px 8px 32px;color:#ccc; }
#search_string {color:#999;}


.post-content{
	width: 600px;
	float:right;
	margin-right: 32px;
	margin-top: 24px;
min-height: 360px;
}
.post-content p, .post-content li { font-size:1.2em; font-weight:200; line-height:1.5;}
.post-content li ,.post-content h1,.post-content h2,.post-content h3{ padding-bottom: .4em; }

.post-date {
	margin:0 16px 8px 0;
	float:left;
	width: 64px;
}
.post-date h1 { margin-bottom: 2px; font-size:3.6em; padding-bottom:0;}
.post-date h5{ margin-bottom: 0px; color:#666;text-transform: uppercase; font-weight:400;}
.post {
	margin-bottom:24px;

}

.post-title h2{ color:#ccc; float:left; margin-top: 8px; }
.post-title {border-bottom: solid #333 1px; margin-bottom:16px;}


/*****
* Asides
*****/
.aside {
	float: left;
	width:468px;
	margin-right:16px;
	margin-bottom:16px;
}

.w2 {
	width:624px;
}

.w3 {
	width:312px;
}

.full { width:100%; }
.last {margin-right:0; }
.aside h1 { text-transform:uppercase; padding-bottom:16px; font-weight:400;}
.aside h3 {color:#ca2b27; text-transform:uppercase;padding-bottom:12px;}
.aside p{font-size:1.2em; font-weight:200; text-align:left; }
.aside .content {	min-height:270px;
	display:block;
}
#full-width.aside{ width:100%; }
#full-width.aside iframe {float:left;}
#pepsicopy { 
	float:left; position:relative; 
	margin-top:20px;
	margin-left:32px; padding-left:32px; 
	border-left:1px solid #333; 
	 width:50%; 
}
#pepsicopy p{ font-size:1.3em;}

#youtube-channel { height:90%; display:block; }
.gallerycontainer div img, div.gallerycontainer div:first-child{ width: 160px !important; height:120px !important; margin-right:6px !important; }
.gallerycontainer small {font-size:1.3em; font-weight:normal; color:#f4c413; line-height:1.1;}
.gallerycontainer small i {font-size:1em; font-weight:normal; color:#fff;}
#fb-like-box {height: 100%; display:block;}
#mc_embed_signup label {font-weight: normal !important;}
#letters .ngg-gallery-thumbnail img{width:176px; max-height:140px; overflow:hidden;  }
.content#teacher-focus img {width:40%; height: auto;}


/*************
* Photo list
*****************/
#photo-list{ list-style:none;margin: 0; }
#photo-list li {margin: 8px 16px;  float:left;}


/******
* Recent-posts
*************/
#recent-posts{ list-style:none;margin: 0; }
#recent-posts li {margin: 0; width:360px; float:left;}
#recent-posts li#icon {width:64px; height:212px;overflow:none; margin-right:16px; }
#recent-posts .latest-post-summary { width:432px;margin-right:16px; height:212px; display:block; font-size:1.3em;}
#recent-posts h3 {margin-bottom:.2em; padding-bottom:0; }

/**********
* Changes 10-3-11
**********/
#recent_posts{ font-size:.9em; list-style:none;margin: 0; }
#recent_posts li {margin: 0; width:90%; float:left;}
#recent_posts .latest-post-summary {}
#recent_posts h3 {font-size:1em; margin-bottom:.2em; padding-bottom:0; }
/******
* sidebar under page title 
*************/
#sidebar { margin-top:8px;margin-left:8px; width:80%; text-align:left;}
#sidebar p{ text-align:left;}
/******
* Donate sidebar
*************/
#donate_sidebar{ margin-top:26px;padding-top:24px; width:80%; text-align:left;border-top:1px solid #333;}
#donate_sidebar, #address {margin-left:8px; }
#donate_sidebar p {text-align:left;font-size:1.1em;}
#donate_sidebar h4 {color:#ca2b27;}

/******/

/* Slideshow Gallery */
/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
	height:400px;
	width:100%;
}
/*--Window/Masking Styles--*/
.window {
	height:400px;	
	width:100%;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
	list-style:none;
	margin:0;
	height:400px;
}
.image_reel li {float: left;}
.image_reel .slide{
	width:920px;
	
}
.slide img { float:right; }
.slide .copy {
	float: left;
	width: 240px;
	border-right:solid 0px #666;
	padding-right:0px;
}
.slide .copy p{
	font-size:1.4em;
	font-weight:200;
	line-height:1.3;
	letter-spacing:2px;
	text-align:left;
}
.slide .copy p:first-line{
	font-weight:600;
	text-transform:uppercase;
	font-size:1.2em;
}
/* NAVIGATION - Search for something */
#search { z-index:25;position: relative; float: left; margin-left:24px;margin-top: 8px; height:32px; width:165px;}
#search #s { float: left; display: block; margin:0;padding: 5px 5px 5px 20px; width: 140px;  font-size: 12px; color: #333; vertical-align: bottom;  background: #000 url(/images/search.png) 3px 5px no-repeat;-moz-border-radius: 5px;-webkit-border-radius: 5px;line-height: 1;border: 1px solid #666;}
#search #s:hover { color: #111;background: #333 url(/images/search.png) 3px 5px no-repeat;}
.search_result, .search_result h2{ padding-bottom: 0;color:#557487;}
/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 0px; left: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: normal;
	background: #ca2b27;
	border: 1px solid #610000;
	-m/oz-border-radius: 3px;
	-k/html-border-radius: 3px;
	-w/ebkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
/* end Slideshow */


blockquote#giving-tree {
 width:480px;
 background:#FFF09B;
 padding: 32px;
 margin:32px auto;
}

blockquote#giving-tree p{
 font-style:normal;
 font-size: 1.3em;
 color: #000;
 margin-bottom: 36px;
}

blockquote#giving-tree p.camper-quote { margin-bottom:2px; padding-bottom:2px; }
blockquote#giving-tree p strong{ font-size:1.2em; }
blockquote#giving-tree a.button{
 background:#639b4d;
 float:left;
 padding:8px;
 color: #fff;
 font-weight:bold;
 display:block;
 w/idth: 60px;
 -moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
text-transform:uppercase;
font-size: .9em;
margin-right:8px;
}

blockquote#giving-tree a.button:hover { text-decoration: none; background:#333;}

.progress { width:240px; height:60px; background: transparent;-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px; color: #000; padding:0px; margin: 0 auto 32px; position:relative;}
.progress p {margin:0 !important; padding: 0 !important; font-size:1em !important; color: #333 !important;}
.progress-bar { -moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;background: transparent url('/images/progress.gif') top left ; position:relative;overflow:hidden; border: 1px #ccc; }
.progress-bar, .progress-bar em { width: 400px ;display:block; height:20px;}
.progress-bar em {background:#666; position:absolute;width:398px;}
img.percentImage {
 background: #ccc url(/images/progress-inner.gif) top left no-repeat;
 padding: 0;
 margin: 5px 0 0 0;
 background-position: 1px 0;
}