/*
Theme Name:     Al Woodard Films
Description:    Child theme for the Twenty Eleven theme 
Author:         Melissa Washin
Template:       twentyeleven
Version:        0.1.0
*/

/* 
Blue: 00aeef
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;}
:focus {/* remember to define focus styles! */ outline: 0;}
body {background: #111;line-height: 1;}
ol, ul {list-style: none;}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


body {
	background: url(images/bg.jpg) #111;
	color: #acacac;
	font: normal 16px "Proxima Nova", Helvetica, sans-serif;
	line-height: 1.4;}

.container {
	max-width: 1000px;
	padding: 0 2%;
	margin: 0 auto;
	}

.left {float: left;}
.right {float: right;}
.clear {clear: both;}


/* ----- TYPE ----- */

h1, h2, h3, h4 {
	color: #fff;
	line-height: 1.0;
	margin-bottom: 17px;}

h1 {font-size: 30px;}
h2 {font-size: 24px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}

a:link, a:visited {color: #00aeef; text-decoration: none;}
a:hover, a:active {color: #0085b7;}
a.btn:link, a.btn:visited, .submit {
	background: #00aeef;
	color: #fff;
	display: inline-block;
	padding: 3px 10px 2px;
	text-decoration: none;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, .5);}
a.btn:hover, a.btn:active, .submit:hover {
	background: #0085b7;
	color: #000;}

p {margin-bottom: 12px;}

img {max-width: 100%; height: auto;}
iframe, object, embed {max-width: 100%;}

html {background: #000;}

/* ----- HEADER ----- */

#header-wrap {
	background: url(images/bg-head.jpg) top center no-repeat;
	height: 134px;
	width: 100%;
	border-top: 8px solid #000;}

#header {position: relative;}
img.logo {margin-top: 45px;}
img.logo:hover {opacity: .5;}

.quote {
	position: absolute;
	top: 0px;
	right: 2%;}


/* ----- MENU ----- */

#access {
	font-size: 1.25em; /* 18/16 */
	float: right;
	margin-top: 58px;
	display: block;}
	
#access ul li {
	display: inline;
	margin-left:30px;}

#access li a {
	color: #fff;
	text-decoration: none;
	padding-bottom: 5px;}

#access li a:hover, #access li a:focus, #access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	color: #00aeef;
	border-bottom: 3px solid #000;}


/* ----- HOMEPAGE ----- */

#featured-wrap {
	width: 100%;
	background: #000;
	padding: 55px 0 0;} 

#featured ul li, ul.video-thumbs li {
	float: left;
	width: 31%; /* 310/1000 */
	margin: 0 3.5% 5% 0;} /* 35/1000 */ /* 50/1000 */
#featured ul li:nth-of-type(3n+3), .third.end, ul.video-thumbs li:nth-of-type(3n+3), .end {margin-right: 0px;}
ul.video-thumbs li:nth-of-type(3n+4) {clear: both;}

ul.video-thumbs li img {
	width: 100%;
	height: auto;
	margin-bottom: 10px; 
	-webkit-box-shadow: 0px 5px 8px 0px #000000;
	-moz-box-shadow: 0px 5px 8px 0px #000000;
	box-shadow: 0px 5px 8px 0px #000000; }

#test-wrap {
	text-align: center;
	padding: 40px 0 28px;
	border-bottom: 3px solid #000;
	margin-bottom: 40px;}
#test-wrap p {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;}
.testimonial {
	font-size: 24px;
	line-height: 1.9;
	padding: 6px 10px;}
p.test-author {font-size: 18px; margin-top: 10px;}

.third {
	float: left;
	width: 31%; /* 310/1000 */
	margin-right: 3.5%;} /* 35/1000 */
.half {width: 44%;} /* 440/1000 */

.text-box, .text-area {
	font-size: 1.0em;
	background: #000;
	color: #666;
	border: 0;
	border-bottom: 1px solid #333;
	padding: 10px 20px;
	margin-bottom: 10px;
	resize:none;
	width: 100%;}
.text-box:focus, .text-area:focus {
	border-bottom: 1px solid #00aeef;
}
	
.submit {
	border: 0;
	font-size: 1.0em;}

.vimeo:hover {opacity: .7;}


/* ----- CONTENT ----- */

.title-wrap {
	width: 100%;
	background: #000;
	padding: 35px 0 15px;
	margin-bottom: 50px;}

.title h1 {color: #acacac;}

.main {}

#content {
	width: 67.5%; /* 675/1000 */
	float: left;}
	
.entry-title {margin-bottom: 3px;}
.entry-title a {color: #fff;}
.entry-title a:hover {color: #00aeef;}

.hentry {
	padding-bottom: 10px;
	margin-bottom: 40px;
	border-bottom: 2px solid #000;}

.entry-meta {
	color: #666;
	font-size: .9em;
	margin-bottom: 20px;}

.post-edit-link {margin-top: 25px;}

article.page {
	background: #000;
	padding: 4%; /* 40/1000 */
	margin: -4.5% 0 -4%;} /* 40/1000 */

#border-top, #border-bottom {
	max-width: 1008px;
	position: relative;
	z-index: 9999;
	padding: 0 10px;
	margin: 0 auto;}
#border-top img, #border-bottom img {
	width: 100%;
	height:auto;}
	
#packages-content {
	float: left;
	width: 46%;} /* 480/1000 */
#packages-image {
	float: right;
	width: 50%;}
#about-content {
	float: left;
	width: 62%; /* 620/1000 */
	text-align: center;
	font-size: 18px;
	margin-top: 5%;}
#about-image {
	width: 29%;
	float: right;}
	
.phone, .email {
	background: url(images/contact.png);
	width: 24px;
	height: 24px;
	display: block;
	margin-right: 10px;
	float: left;}
.email {background-position: 24px 0px; clear: both;}



/* ----- SIDEBAR ----- */

#secondary {
	float: right;
	width: 26%; /* 260/1000 */
	border-left: 1px solid #444;
	padding-left: 2.5%;} /* 25/1000 */

.widget {margin-bottom: 40px;}

.widget h1, .widget h2, .widget h3, .widget h4 {margin-bottom: 12px;}


/* ----- FOOTER ----- */

#footer-wrap {
	width: 100%;
	margin: 50px 0 0;
	background: #000;
	padding: 25px 0;}
	

/* ----- MEDIA QUERIES ----- */



/* iPads (portrait) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 940px) {
/* Styles */
	#header-wrap {height: auto;}
	#header {padding-bottom: 4.5%;}
	img.logo {
		width: 40%;
		height: auto;}
	#access {margin-top: 6.5%;}
	#access ul li {margin-left: 20px; font-size: .9em;}
}


/* Small Tablets and Below! ----------- */
@media only screen and (max-width : 767px) {
/* Styles */
	body {background: #1a1a1a;} /* ALL BELOW */
	#border-top, #border-bottom {display:none;}  /* ALL BELOW */	
	#packages-image, #about-image {width: 100%; margin-top: 6%;} /* ALL BELOW */
	#packages-content, #about-content {width: 100%; text-align: left;} /* ALL BELOW */
	article.page {background: none;}
	iframe, object, embed{width: 100%; height: auto;} /* ALL BELOW */
	#content {width: 100%;} /* ALL BELOW */
	#secondary {clear: both; float: none; width: 100%;} /* ALL BELOW */
	#footer-wrap .container .left, #footer-wrap .container .right {text-align: center; width:100%;}
	#featured ul li:nth-of-type(3n+3) {display: none;}
	.third {  /* ALL BELOW */
		width: 100%;
		clear: both;
		margin-bottom: 10%;}
	#footer-wrap {margin-top: 6%;}
	.title-wrap {margin: 4% 0 5%; padding: 20px 0 1px;}
	.title h1, h1 {font-size: 24px;}
	
}



/* Small Tablets (portrait) ----------- */
@media only screen 
and (min-width : 481px) 
and (max-width : 767px) {
/* Styles */
	
	#header-wrap {
		height: auto;
		background: #222;}
	#header {padding-bottom: 4.5%; text-align: center;}
	img.logo {
		float:none;
		margin: 40px auto;}
	#access {
		display: block;
		background: #000;
		float: none;
		padding: 5px 0;
		margin: 0 auto;
		width: 100%;}
	#access ul li {margin: 0 10px; font-size: .9em;}
	#featured ul li, ul.video-thumbs li {width: 48%;}
	#featured ul li:nth-of-type(2n+2) {margin-right: 0;}
	ul.video-thumbs li {margin: 0 3.5% 10% 0;}
	ul.video-thumbs li:nth-of-type(2n+1) {clear: both;}
	ul.video-thumbs li:nth-of-type(2n+2) {margin-right: 0;}
        ul.video-thumbs li:nth-of-type(3n+4) {clear: none;}

}



/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5), 
only screen and (max-width: 480px) {
/* Styles */
	body {background: #222;}
	#header-wrap {
		height: auto;
		background: #222;}
	#header {text-align: center; padding-bottom: 5px;}
	img.logo {
		width: 90%;
		height: auto;
		float: none;
		margin-top: 35px;}
	#access {
		width: 100%;
		clear: both;
		float: none;
		margin: 15px auto 0 auto;}
	#access ul li {
		background: #000;
		width: 98%;
		display: block;
		float: none;
		padding: 3px;
		margin: 2px 0;
		text-align: center;}
	#featured-wrap {clear:both; padding: 10% 0 1px;}
	#featured ul li, ul.video-thumbs li {
		float: none;
		width: 95%;
		margin: 0 auto 10%;
		text-align: center;}
	.half {width: 90%; margin: 0 0 15%; float: none; clear: both;}
	.text-box {font-size: 14px;}
	.testimonial {background-color: none;font-size: 21px;}
	#test-wrap p {max-width: 90%;}