/* #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;
}
/* //////////////////////////////////////////////////////// HELPFUL CLASSES FOR DESKTOP  //////////////////////////////////////////////////////// */
/* .mview 
	(hide elements for desktops 
	shown only for mobile view = mview)
================================================== */
.mview {
  display: none;
}
/* ------------------------------------------------------- END HELPFUL CLASSES ------------------------------------------------------- */
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes showit {
  0% {
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
  }
  100% {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
  }
}
@-moz-keyframes showit {
  0% {
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
  }
  100% {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
  }
}
@-ms-keyframes showit {
  0% {
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
  }
  100% {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
  }
}
body {
  text-shadow: 1px 1px 0 #ffffff;
}
#header {
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  margin-bottom: 20px;
}
#header h1 {
  font-size: 72px;
  font-size: 4.5rem;
  margin: 0;
}
#header h1 span {
  color: #7f6956;
}
#header h2 {
  font-size: 24px;
  font-size: 1.5rem;
  color: #c1b9b9;
  margin: 0;
}
#header img {
  -webkit-animation: rotate 5s infinite linear;
  -moz-animation: rotate 5s infinite linear;
  -ms-animation: rotate 5s infinite linear;
}
#nav {
  margin: 20px auto;
  border-top: 1px dotted #eaeaea;
  border-bottom: 1px dotted #cccccc;
  padding: 10px;
  text-align: center;
}
#nav ul {
  margin: 0;
  padding: 0;
}
#nav ul li {
  display: inline;
  margin-right: 20px;
}
.xbutton {
  display: block;
  background: #e8e7e5;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 8px;
  text-align: center;
}
#songs {
  width: 460px;
  padding: 20px;
  margin: 0 auto;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
}
#songs h3 {
  text-align: center;
  margin: 2% auto 10%;
  font-family: 'Quicksand', sans-serif;
}
#songs ol {
  margin: 20px auto;
}
#songs.show {
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  transition: all 1s ease-in;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  opacity: 1;
}
#songs.fadeout {
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  transition: all 1s ease-in;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0;
}
/*
#experimental, #songcomp, #remix {
	.opacity(0);
	position: absolute;
}

	#experimental.show, #songcomp.show, #remix.show {
		.transition(2s, ease-in);
		.opacity(1);
	}

	#experimental.noshow, #songcomp.noshow, #remix.noshow {
		.transition(1s, ease-in);
		.opacity(0);
	}
*/
ol {
  padding: 0px;
  margin: 0px;
  list-style: decimal-leading-zero inside;
  color: #ccc;
  width: 460px;
  font-size: 0.9em;
}
ol li {
  position: relative;
  margin: 0px;
  padding: 9px 2px 10px;
  border-bottom: 1px dotted #aaaaaa;
  cursor: pointer;
  list-style-position: outside;
}
ol li a {
  display: block;
  text-indent: -3.3ex;
  padding: 0px 0px 0px 20px;
}
li.playing {
  color: #aaa;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
li.playing a {
  color: #000;
}
li.playing:before {
  content: '♬';
  width: 14px;
  height: 14px;
  padding: 3px;
  line-height: 14px;
  margin: 0px;
  position: absolute;
  left: -48px;
  top: 9px;
  color: #000;
  font-size: 13px;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}
.audiojs {
  background: #5d4e42;
  /* Old browsers */

  background: -moz-linear-gradient(top, #5d4e42 0%, #5d4e42 50%, #47403a 51%, #47403a 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5d4e42), color-stop(50%, #5d4e42), color-stop(51%, #47403a), color-stop(100%, #47403a));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #5d4e42 0%, #5d4e42 50%, #47403a 51%, #47403a 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #5d4e42 0%, #5d4e42 50%, #47403a 51%, #47403a 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #5d4e42 0%, #5d4e42 50%, #47403a 51%, #47403a 100%);
  /* IE10+ */

  background: linear-gradient(top, #5d4e42 0%, #5d4e42 50%, #47403a 51%, #47403a 100%);
  /* W3C */

  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5d4e42', endColorstr='#47403a', GradientType=0);
  /* IE6-9 */

  border: 6px solid #726458;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}