/* #Import less
================================================== */
/*	--------------------------------------------------
	:: Fonts and Colors
	-------------------------------------------------- */
/* text shadow - define everything */
/* text shadow - 1px, 1px, 0, define only color */
/* Main Colors */
/*grays*/
/* Tabs */
/* Forms */
/* form elemnts width */
/* Borders */
/* Opacity */
/* Rounded Corners + Border Radius */
/* Gradients */
/* Animations */
/* Shadows */
/* Clearfix for clearing floats like a boss */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
  content: ".";
}
/*	--------------------------------------------------
	:: FButtons
	-------------------------------------------------- */
/* FButton Colors */
/* Green */
/* Orange */
/* Red */
/* Blue */
/* Dark */
/* Light */
/* Custom */
/* #Import less
================================================== */
/* 
* Skeleton V1.0.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 5/20/2011
*/
/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Tabs
	#Forms
	#Misc */
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
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,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* CSS Resets */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
q,
small,
strong,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  margin: 0;
  padding: 0;
  font-weight: normal;
}
article,
aside,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
video,
object {
  display: block;
}
a img {
  border: 0;
}
figure {
  position: relative;
}
figure img {
  width: 100%;
}
/* #Declare Borders
================================================== */
.br {
  border-right: 1px solid #cacaca;
  padding-right: 1.5%;
  /* added so the border won't touch the content */

  margin-right: 1.5%;
  /* padding from grid is 3.8% so changed to 2% to be even with above and stay on same row */

}
.bl {
  border-left: 1px solid #cacaca;
  padding-left: 2%;
  margin-left: -2.5%;
}
.bt {
  border-top: 1px solid #cacaca;
  padding-top: 2%;
  margin-top: 2%;
}
.bb {
  border-bottom: 1px solid #cacaca;
  padding-bottom: 2%;
  margin-bottom: 2%;
}
/* #Basic Styles (from mixins.less)
================================================== */
body {
  color: #444444;
  background: #dedede;
  font-family: Helvetica, serif;
}
::selection {
  background: #b93737;
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: #b93737;
  color: #fff;
  text-shadow: none;
}
/* #Typography
================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin: 20px 0;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-weight: inherit;
}
h1 {
  font-size: 36px;
  font-size: 2.25rem;
}
h2 {
  font-size: 32px;
  font-size: 2rem;
}
h3 {
  font-size: 28px;
  font-size: 1.75rem;
}
h4 {
  font-size: 24px;
  font-size: 1.5rem;
}
h5 {
  font-size: 20px;
  font-size: 1.25rem;
}
h6 {
  font-size: 16px;
  font-size: 1rem;
}
p {
  line-height: 1.6em;
  margin: 1em 0;
}
p,
li {
  font-size: 14px;
  font-size: 0.875rem;
}
p img {
  margin: 0;
}
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}
small {
  font-size: 80%;
}
/*	Blockquotes  */
blockquote,
blockquote p {
  font-size: 17px;
  line-height: 24px;
  color: #777;
  font-style: italic;
  font-family: Baskerville, Georgia, serif;
}
blockquote.block,
blockquote.block p {
  font-size: 17px;
  line-height: 24px;
  color: #777;
  font-variant: small-caps;
  font-style: normal;
  font-family: Helvetica, Arial, sans-serif;
}
blockquote {
  margin: 0 0 20px;
  padding: 9px 20px 0 19px;
  border-left: 1px solid #ddd;
}
blockquote cite {
  display: block;
  font-size: 12px;
  color: #555;
}
blockquote cite:before {
  content: "\2014 \0020";
}
blockquote cite a,
blockquote cite a:visited,
blockquote cite a:visited {
  color: #555;
}
hr {
  border: solid #ddd;
  border-width: 1px 0 0;
  clear: both;
  margin: 10px 0 30px;
  height: 0;
}
hr.line {
  border: solid #bbb;
  border-width: 1px 0 0;
  clear: both;
  margin: 10px 0 30px;
  height: 1px;
}
/* #Links
================================================== */
a,
a:visited {
  color: #7f6956;
  text-decoration: none;
  outline: 0;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #999999;
}
/* commented out so buttons.less can work
	p a, p a:visited { line-height: inherit; }
	*/
/* #Lists
================================================== */
ul,
ol {
  margin-bottom: 20px;
}
ul {
  list-style: none outside;
}
ol {
  list-style: decimal;
}
ol,
ul.square,
ul.circle,
ul.disc {
  margin-left: 30px;
}
ul.square {
  list-style: square outside;
}
ul.circle {
  list-style: circle outside;
}
ul.disc {
  list-style: disc outside;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 4px 0 5px 30px;
  font-size: 90%;
}
ul ul li,
ul ol li,
ol ol li,
ol ul li {
  margin-bottom: 6px;
}
li {
  line-height: 18px;
  margin-bottom: 12px;
}
ul.large li {
  line-height: 21px;
}
li p {
  line-height: 21px;
}
/* #Images
================================================== */
/*
	The purpose of the below declaration is to make sure images don't 
	exceed the width of columns they are put into when resizing window. 
	Unfortunately, this declaration breaks certain lightbox, slider or other plugins,
	so the best solution is to individually call these properties on images that 
	are children of the grid that you want to resize with grid. 

	img { 
		max-width: 100%;
		height: auto; }
		
*/
/* #Buttons
================================================== */
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  background: #eee;
  /* Old browsers */

  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* IE10+ */

  background: linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
  /* W3C */

  border: 1px solid #aaa;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 4px 12px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #444;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px rgba(255, 255, 255, 0.75);
  cursor: pointer;
  margin-bottom: 20px;
  line-height: 21px;
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  color: #222;
  background: #eee;
  /* Old browsers */

  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* IE10+ */

  background: linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  /* W3C */

  border: 1px solid #888;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
}
a.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  background: #eee;
  /* Old browsers */

  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.3)));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  /* Opera11.10+ */

  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  /* IE10+ */

  background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
  /* W3C */

  border: 1px solid #888;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
}
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
}
/* #Tabs (activate in app.js)
================================================== */
ul.tabs {
  display: block;
  margin: 0 0 20px 0;
  padding: 0;
  border-bottom: solid 1px #aaaaaa;
}
ul.tabs li {
  display: block;
  width: auto;
  height: 30px;
  padding: 0;
  float: left;
  margin-bottom: 0;
}
ul.tabs li a {
  display: block;
  text-decoration: none;
  width: auto;
  height: 29px;
  padding: 0px 20px;
  line-height: 30px;
  border: solid 1px #cccccc;
  border-width: 1px 0 0 1px;
  margin: 0;
  font-size: 13px;
  color: #444444;
  /* TAB BACKGROUND
		currently uses a gradient
		you can use this mixin found in mixins.less:
		background: @tabbg;
		*/

  background: #eeeeee;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(1, #dddddd));
  background: -ms-linear-gradient(bottom, #eeeeee, #dddddd);
  background: -moz-linear-gradient(center bottom, #eeeeee 0%, #dddddd 100%);
}
ul.tabs li a.active {
  height: 30px;
  position: relative;
  top: -4px;
  padding-top: 4px;
  border-right-width: 1px;
  margin: 0 -1px 0 0;
  color: #111;
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
  color: #444444;
  text-shadow: 1px 1px 0 #dddddd;
  /* TAB BACKGROUND
		currently uses a gradient
		you can use this mixin found in mixins.less:
		.gradient(#e3e3e3, #d1d1d1, #e3e3e3);
		*/

  background: #dedede;
}
ul.tabs li:first-child a {
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-left-radius: 2px;
  border-top-left-radius: 2px;
}
ul.tabs li:last-child a {
  border-width: 1px 1px 0 1px;
  -moz-border-radius-topright: 2px;
  -webkit-border-top-right-radius: 2px;
  border-top-right-radius: 2px;
}
ul.tabs-content {
  margin: 0;
  display: block;
}
ul.tabs-content > li {
  display: none;
}
ul.tabs-content > li.active {
  display: block;
}
/* Clearfixing tabs for beautiful stacking */
ul.tabs:before,
ul.tabs:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
ul.tabs:after {
  clear: both;
}
ul.tabs {
  zoom: 1;
}
/* #Forms
================================================== */
form {
  width: 98%;
  margin-bottom: 20px;
}
fieldset {
  margin-bottom: 20px;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  border: 1px solid #ccc;
  padding: 6px 4px;
  outline: none;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #777;
  margin: 0;
  width: 98%;
  max-width: 100%;
  display: block;
  margin-bottom: 20px;
  background: #fff;
}
select {
  padding: 0;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border: 1px solid #aaa;
  color: #444;
  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
textarea {
  min-height: 60px;
}
label {
  display: block;
  font-size: 12px;
  font-size: 0.75rem;
}
p label {
  font-size: 1em;
  /*fixes size of label within p tag */
}
legend {
  display: block;
}
select {
  width: 108%;
}
input[type="checkbox"] {
  display: inline;
}
label span,
legend span {
  font-weight: normal;
  font-size: 13px;
  color: #444;
}
/* #Misc
================================================== */
.remove-bottom {
  margin-bottom: 0 !important;
}
.half-bottom {
  margin-bottom: 10px !important;
}
.add-bottom {
  margin-bottom: 20px !important;
}
/* 320 - 479
	
	.is320.lt480	= 	override 480 styles for landscape if needed
	
================================================================================================================================================ */
.is320.lt480 {
  /* BODY + FONT COLORS */

}
/* /320 */
/* 480 - 767 => 

	.is480.lt768	= 	inherits 768 styles but can be overridden
	.lt480 			= 	passes all styles down to anything under 480
	
		////////////////////////////////////////////////////////////////
		
		//	REMOVE .lt768 for distinct tablet and mobile styles
		//	REMOVE .lt480 for distinct mobile landscape and portrait styles
		
		////////////////////////////////////////////////////////////////

================================================================================================================================================ */
.is480.lt768 body,
.lt480 body {
  background: #222;
  text-shadow: 1px 1px 0 #000000;
}
.is480.lt768 #header,
.lt480 #header {
  text-align: center;
}
.is480.lt768 #header h1,
.lt480 #header h1 {
  font-size: 56px;
  font-size: 3.5rem;
  margin: 0;
}
.is480.lt768 #header h2,
.lt480 #header h2 {
  font-size: 16px;
  font-size: 1rem;
}
.is480.lt768 #nav,
.lt480 #nav {
  margin: 20px auto;
  border-top: 1px dotted #444;
  border-bottom: 1px dotted #444;
  padding: 10px;
  text-align: center;
}
.is480.lt768 #nav ul,
.lt480 #nav ul {
  margin: 0;
  padding: 0;
}
.is480.lt768 #nav ul li,
.lt480 #nav ul li {
  display: inline;
  margin-right: 20px;
}
.is480.lt768 #songs,
.lt480 #songs {
  width: 300px;
  margin: 0 10px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.is480.lt768 #songs h3,
.lt480 #songs h3 {
  font-size: 20px;
  font-size: 1.25rem;
  text-align: center;
  margin: 2% auto 10%;
  font-family: 'Quicksand', sans-serif;
}
.is480.lt768 #songs ol,
.lt480 #songs ol {
  margin: 20px auto;
}
.is480.lt768 .audiojs,
.lt480 .audiojs {
  width: 300px;
}
/* /480 */
/* 768 - 1023

	.is768	=	768 up to 1023
	.lt768	=	passes all styles to anything under 768 { can be overridden above }
	
		////////////////////////////////////////////////////////////////
		
		//	REMOVE .lt768 for distinct ipad and mobile styles - disinherits 768 styles to 480
		
		////////////////////////////////////////////////////////////////
	
================================================================================================================================================ */
.is768,
.lt768 {
  /* //////////////////////////////////////////////////////// HELPFUL CLASSES FOR MOBILE  //////////////////////////////////////////////////////// */

  /* .dview 
	(hide elements for mobile 
	shown only for desktops view = mview)
================================================== */

  /* ------------------------------------------------------- END HELPFUL CLASSES ------------------------------------------------------- */

}
.is768 .dview,
.lt768 .dview {
  display: none;
}
/* /768 */