/*
Theme Name:     Woolfsongs
Theme URI:      http://the-alan-parsons-project.com/
Description:    A unique Twenty Twelve-based child theme developed for Woolfsongs, Ltd.
Author:         Erin Jones
Author URI:     http://erinjones.com/
Template:       twentytwelve
Version:        0.1.0

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (and line heights) are calculated using two variables:

$rembase:     16;
$line-height: 26;

---------- Examples

* Use a pixel value with a rem fallback for font-size, padding, margins, etc.
	padding: 5px 0;
	padding: 0.357142857rem 0; (5 / $rembase)

* Set a font-size and then set a line-height based on the font-size
	font-size: 16px
	font-size: 1rem; (16 / $rembase)
	line-height: 1.625; ($line-height / 16)

---------- Vertical spacing

Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:

.my-new-div {
	margin: 24px 0;
	margin: 1.5rem 0; ( 24 / $rembase )
}

---------- Further reading

http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
*/

@import url("../twentytwelve/style.css");
@import url('css/responsive_grid.css');
@import url('css/animations.css');
@import url('css/accordion.css');
@import url('css/mp3-jplayer.css');

body {
	background-color: black!important;
	color: #bab9b9;
	background-image: url(images/bg.jpg);
	background-position: left top;
	background-repeat: repeat-x;
	font-size: 16px!important;
	font-size: 1rem;
}
body.custom-font-enabled {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
body .site {
	background-color: transparent!important;
	box-shadow: none;
}
a {
	outline: none;
	color: #ebebeb;
}
a:hover {
	outline: none;
	color: #7fd4af;
}
button a {
	color: #d4f78b!important;
	text-decoration: none;
    -webkit-animation: pulsate 4s ease-out;
    -webkit-animation-iteration-count: infinite; 
}
button a:hover {
	color: #f5ffe0!important;
}
button {
	color: #d4f78b!important;
	text-transform: uppercase;
	font-size: 16px;
	font-size: 1rem;
	letter-spacing: .1rem;
	border: 1px solid #769438;
	border-radius: 0px;
	background-color: #1d6e71;
}
button:hover {
	background: #007467!important;
}
hgroup {
	float: left;
}
#masthead {
	background-image: url(images/app_group.png);
	background-position: left top;
	background-repeat: no-repeat;
	margin: 0px auto;
}
.site-header {
	background-color: rgba(0, 0, 0, 0.6);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* IE transparent bg fix */
	box-shadow: 0px -65px 110px 40px #9dba51; 
	padding: 0px;
	padding: 0rem;
	/*
position: fixed;
	top: 0;
	width: 100%;
*/
}
.header-image {
	position: relative;
	left: 12%;
	margin: 1rem 0; 
	margin: 16px 0; 
	width: 174px;
	height: 78px;
}
img.header-image {
	box-shadow: none;
}
/*
#logo {
	display: block;
	width: 250px;
	width: 17.8571429rem;
	padding-left: 10px;
}
*/
nav {
	width: 70%;
}
#actions {
	float: right;
	padding-bottom: 16px;
	padding-bottom: 1rem;
	padding-right: 32px;
	padding-right: 2rem;
}
#actions a {
	font-size: 16px;
	font-size: 1rem;
	line-height: 8px;
	line-height: .5rem;
	color: #eee;
	text-decoration: none;
	opacity: .8;
}
#actions a:hover {
	color: white;
	text-decoration: underline;
	opacity: 1;
}
#actions img {
	padding: 0px 8px 0px 20px;
	padding: 0px .5rem 0px 1.5rem;
}
.main-navigation {
	float: right;
	text-align: right;
	margin-top: 4px;
	margin-top: .25rem;
	text-transform: uppercase;
}
.main-navigation ul.nav-menu {
	border: none!important;
	text-align: right;
	width: auto!important;
}
.main-navigation li {
	margin: 0 32px 0 0;
	margin: 0 2rem 0 0;	
}
.main-navigation li a {
	font-size: 1.25rem;
	font-size: 20px;
	line-height: 72px;
	line-height: 4.5rem;
	color: #7fd4af!important;
    -webkit-animation: pulsate 4s ease-out;
    -webkit-animation-iteration-count: infinite; 
}
.main-navigation li a:hover {
	color: #87ecc0!important;
}
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
	color: #ffffff!important;
	font-weight: normal;
	-webkit-animation: none;
}
.main-navigation li ul li a {
	text-align: left;
	background-color: rgba(33,33,33,0.8);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c212121', endColorstr='#4c212121'); /* IE transparent bg fix */
	border-bottom: 2px solid #000000!important;
	font-size: 16px;
	font-size: 1rem;
	width: 288px;
	width: 18rem;
	padding: 12px 16px;
	padding: .75rem 1rem;
	-webkit-animation: none;
}
.main-navigation li ul li a:hover {
	color: #dddddd;
	background: rgba(48,48,51,0.8);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c303033', endColorstr='#4c303033'); /* IE transparent bg fix */
}
#player {
	position: absolute;
	right: 0;
	margin-top: 24px;
	margin-top: 1.5rem;
}

.entry-content a img {
    opacity: 0.95;
    filter: alpha(opacity=95);
}

.entry-content a img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}

/*** WIDGETS (HOME) ***/

img.excerpt {
	width: 25%;
}
.template-front-page .widget-area {
	border: none;
}
.front-widgets {
	width: 100%!important;
	display: inline;
}
.widget-row .col:first-child {
	margin-left: 0;
}
.widget-row .col {
	margin: 1% 0 1% 7.6%;
}
.widget-row .span_1_of_2 /* defines the width of homepage columns specifically. Cancels out stuff in responsive_grid.css */ {
	width:44%;
}
h1.front-title, h1.entry-title {
	font-size: 40px;
	font-size: 2.5rem;
	color: #7fd4af;
	font-style: italic;
	text-transform: uppercase;
	padding: 0rem 0.25rem 1.5rem 0.25rem;
	padding: 0px 4px 24px 4px;
	font-weight: normal;
}
.widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget {
	line-height: 1.5rem;
	line-height: 24px;
}
.widget-area .widget p {
	margin-bottom: 16px;
	margin-bottom: 1rem;
	font-size: 16px;
	font-size: 1rem;
}
/*** STORE (HOME) ***/

.template-front-page .widget-area .widget li {
	padding-bottom: 16px;
	padding-bottom: 1rem;
	overflow: hidden;
	list-style-type: none;
}
.first img {
	float: left;
	width: 160px;
	width: 10rem;
	padding: 0px 24px 32px 0px;
	padding: 0rem 1.5rem 2rem 0rem;
}
.first h2 {
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: normal;
	text-transform: uppercase;
	display: inline;
}
.first p {
	padding: 8px 0px 16px 0px;
	padding: .5rem 0 1rem 0;
}
/*** FACEBOOK (HOME) ***/

ul.rfb_posts li {
	list-style-type: none!important;
	padding-bottom: 16px;
	padding-bottom: 1rem;
}
/*** TABS ***/

div.wp-tabs {
	margin-top: 80px;
	margin-top: 5rem;
}
div.wp-tab-content-wrapper h2 {
	text-transform: uppercase;
}
div.wp-tab-content-wrapper h3 {
	text-transform: uppercase;
}
.wp-tabs .ui-tabs-panel .wp-tab-content {
	padding: 4px 20px!important;
}
.wp-tabs .wpui-tabs-nav-holder a {
	color: #ccc!important;
	text-transform: uppercase;
}
.wp-tabs .wpui-tabs-nav-holder a:hover {
	color: white!important;
}
ul.ui-tabs-nav {
	padding-top: 20px!important;
	padding-top: 1.25rem;
	padding-left: 0px!important;
}
ul.ui-tabs-nav a {
	font-size: 16px;
	font-size: 1rem;
}
/*** ACCORDION ***/

.wpui-dark .ui-collapsible-content, .wpui-dark .ui-accordion-content {
	height: 100%!important;
}
.wpui-dark h3.ui-collapsible-header, .wpui-dark h3.ui-accordion-header  {
	font: 18px bold "Century Gothic", CenturyGothic, AppleGothic, sans-serif!important;
	padding: 16px 12px!important;
	padding: 1rem .75rem!important;
}

/*** WIDGETS (SIDEBAR) ***/

h3.widget-title {
	font-size: 18px;
	font-size: 1.25rem;
	font-style: italic;
	color: #666;
}
body.blog #secondary {
	background-color: rgba(0, 0, 0, 0.6);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#60000000', endColorstr='#60000000'); /* IE transparent bg fix */
	padding: 1.5rem;
	margin-top: 80px;
	margin-top: 5.75rem;
}

/*** TIMELINE (ABOUT) ***/

.timeline {
	text-align: center;
	/* min-width: 400px; */
	width: 80%;
	margin: 0px auto;
}
.timeline h2 {
	text-transform: uppercase;
	font-style: italic;
	font-size: 2rem!important;
	font-size: 32px;
	color: white;
	padding-top: 48px;
	padding-top: 3rem;
}

/*** HORIZONTAL RULE GRADIENT ***/

.backbox {
  position: relative;
  margin-bottom: 0rem;
}
.bottomline {
  position: relative;
}
.backbox:before {
	width: 100%;
	height: 0.125rem;
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(120, 200, 190, 0.6)), color-stop(80%, rgba(120, 200, 190, 0.6)), color-stop(100%, rgba(120, 200, 190, 0.6)));
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(120, 200, 190, 0.6));
	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(120, 200, 190, 0.6));
	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(120, 200, 190, 0.6));
	background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(120, 200, 190, 0.6));
}
.bottomline:before {
	width: 100%;
	height: 0.125rem;
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(120, 200, 190, 0.6)), color-stop(80%, rgba(120, 200, 190, 0.6)), color-stop(100%, rgba(0, 0, 0, 0)));
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(0, 0, 0, 0));
	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(0, 0, 0, 0));
	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(0, 0, 0, 0));
	background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(120, 200, 190, 0.6) 20%, rgba(120, 200, 190, 0.6) 80%, rgba(0, 0, 0, 0));
}

/*** MEDIA GALLERY AND LIGHTBOX ***/
.gallery img {
	border: 1px solid #545454!important;
}
.gallery .gallery-icon img {
	padding: 4%!important;
}
#swipebox-action {
	top: 0px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
#swipebox-caption {
	top: auto;
	bottom: 0px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}
#swipebox-caption.force-visible-bars {
	top: auto!important;
}

/*** FOOTER ***/

footer img {
	padding-bottom: 8px;
	padding-bottom: .5rem;
}
#colophon p {
	padding-top: 20px;
	padding-top: 1.25rem;
	text-align: center;
	font-size: .875rem;
}
footer[role="contentinfo"] {
	border-top: none;
	text-align: center;
}
.site-content article {
	border-bottom: none;
}
.entry-header h1 {
	display: inline;
}
.entry-header, .entry-title {
	text-transform: uppercase;
	font-style: italic;
	font-size: 2.5rem!important;
	font-size: 40px;
}
.template-front-page .entry-header {
	line-height: 1.5rem;
}
.template-front-page .widget-area  {
	padding-top: 0rem;
}
.entry-title a:hover {
	color: #ffffff;
}
.entry-content h2 {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: normal;
	color: #ffffff;
}
.entry-content, .entry-summary, .front-widgets {
	background-color: rgba(0, 0, 0, 0.6);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#60000000', endColorstr='#60000000'); /* IE transparent bg fix */
	padding: 20px;
	padding: 1.25rem;
	overflow: hidden;
}
.entry-summary p {
	line-height: 32px;
	line-height: 2rem;
}
.entry-content a:visited, .comment-content a:visited {
	color: #ebebeb;
}
footer.entry-meta {
	margin: 0px;
	margin: 0rem;
	color: #999;
	background-color: #000000;
	padding: 8px 20px;
}
footer.entry-meta a {
	color: #ccc;
}
footer.entry-meta a:hover {
	color: #eee;
}

/*** CONTACT FORM 7 (PLUGIN) ***/
div.wpcf7 {
	padding: 10% 20%;
}
div.wpcf7 input, textarea {
	width: 90%;
}

/*** IPAD (CSS MEDIA QUERY) ***/

@media screen and (min-width: 600px) {
	.site {
		overflow: visible !important;
	}
	.main-navigation li {
	    margin: 0 16px 0 0;
	    margin: 0 1rem 0 0;
	}
	.main-navigation li a {
	    font-size: 18px;
	}
}

@media screen and (min-width: 600px) and (max-width:840px) {
	body .site {
		margin-top: 48px;
		margin-top: 3.428571429rem;
	}
	.header-image {
		left: 17%;
		margin: 1.5rem 0 2rem 0;
		margin: 24px 0 32px 0;
		width: 9rem;
	}
	.main-navigation li a {
		font-size: .75rem;
		font-size: 12px;
	}
	.main-navigation li {
		margin: 0 8px 0 0;
		margin: 0 .5rem 0 0;
	}
	#actions a {
		font-size: .75rem;
		font-size: 12px;
	}
	#actions img {
	    padding: 0px 4px 0px 10px;
	    padding: 0px .25rem 0px .75rem;
}
	
	/*** CONTACT FORM 7 (PLUGIN) ***/
	div.wpcf7 {
		padding: 10%;
	}
	div.wpcf7 input, textarea, submit {
		width: 90%;
	}
}

/*** SMARTPHONE (CSS MEDIA QUERY) ***/

@media screen and (max-width:480px) {
    #lines_left {
		width: 20%;
	}
	#lines_right {
		width:20%;
		right: 0;
	}
	img.header-image {
		left: 45%;
		margin: 20px 0px 16px 0px;
	}		
	#site-navigation {
		float: left;
		width: 100%;
		margin-bottom: 48px;
		margin-bottom: 3rem;
		position: relative;
		z-index: 1000;
	}
	.menu-toggle {
		width: 100%;
		padding: 12px 0px;
		padding: .75rem 0rem;
		font-size: 1.1rem;
		text-transform: uppercase;
		letter-spacing: .1rem;
		color: #87ecc0;
		background-color: black!important;
		background-image: none!important;
		border: none;
		border-radius: 0px;
		text-align: center;
	}
	.menu-toggle:active,
	.menu-toggle.toggled-on,
	button:active,
	input[type="submit"]:active,
	input[type="button"]:active,
	input[type="reset"]:active {
		color: #fff;
		box-shadow: none!important;
	}
	.menu-toggle:hover,
	button:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	article.post-password-required input[type=submit]:hover {
		color: #87ecc0;
	}
	.main-navigation {
		margin-top: 0px;
		margin-top: 0rem;
		margin-bottom: 0px;
		margin-bottom: 0rem;
		background-color: rgba(0, 0, 0, 0.6);
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#60000000', endColorstr='#60000000'); /* IE transparent bg fix */
	}
	.main-navigation ul.nav-menu {
		text-align: center;
		padding: 1.5rem;
	}
	.main-navigation ul.nav-menu.toggled-on {
		padding: 0rem;
		width: 100% !important;
	}
	.main-navigation li {
		margin: 0px;
		margin: 0rem;
		padding: 2rem 0rem 1.5rem 0rem;
		border-top: 1px solid rgba(120, 200, 190, 0.6);
	}
	.main-navigation li:first-child {
		border-top: none;
	}
	.main-navigation li a {
		font-weight: bold;
		text-shadow:  none;
		margin: 0px;
		margin: 0rem;
	}
	.main-navigation ul.nav-menu li a {
		font-size: 1.5rem;
		line-height: 1.95rem;
		font-weight: bold;
		text-decoration: none;
	}
	.sub-menu {
		padding-top: .5rem;
	}
	.main-navigation li ul li {
		padding: .5rem 0rem;
		border-top: none;
	}
	.main-navigation ul.nav-menu li ul li a {
		font-size: 1rem;
		font-weight: normal;
		line-height: 1.55rem;
		padding: .5rem 0rem;
		font-style: italic;
		background: none;
		border-bottom: none!important;
		text-decoration: none;
	}
	.backbox {
		position: static;
	}
	/*
#actions  {
		margin-bottom: 0px;
		margin-bottom: 0rem;
		padding-bottom: 0px;
		padding-bottom: 0rem;
	}
	#actions a {
		padding-bottom: 16px;
		padding-bottom: 1em;
	}
*/
	.hide {
		display: none;
	}
	.site-content article {
		-webkit-hyphens: none;
		-moz-hyphens: none;
		hyphens: none;
	}
	.site {
		padding: 0 8px;
		padding: 0 .5rem;
	}
	.front-widgets {
		width: 90% !important;
		display: block;
	}
	.widget-row .col {
		margin: 1% 0 1% 7.6%;
		margin-left: 0
	}
	.widget-row .span_1_of_2 {
		width:100%;
	}
	.template-front-page .widget-area .widget_text img {
		float: left;
		margin: 0px;
		margin: 0rem;
	}
	.entry-header, .entry-title {
		font-size: 1.5rem!important;
		font-size: 24px;
	}
	button {
		width: 100%;
		padding: 5%;
		margin-bottom: 16px;
		margin-bottom: 1rem;
	}
	.ui-accordion .ui-accordion-content {
		padding: 1rem .5rem;
	}
	.timeline {
		width: 90%
	}
	#player {
		margin-top: 48px;
		margin-top: 4rem;
	}
	#player img {
		max-width: 50%;
		float: right;
	}
	
	/*** CONTACT FORM 7 (PLUGIN) ***/
	div.wpcf7 {
		padding: 10% 0%;
	}
	div.wpcf7 input, textarea {
		width: 100%;
	}
}