/* SCSS master stylesheet */
/*
*  Jark Patchwork <http://jake.teton-landis.org/projects/scss/>
*  by Jake Teton-Landis <http://jake.teton-landis.org/>
*  (c) 2012, all rights reserved
*
*  contains code and ideas from
*  Golden Grid System (1.0)	    <http://goldengridsystem.com/>
*  by Joni Korpi 				<http://jonikorpi.com/>
*  licensed under MIT			<http://opensource.org/licenses/mit-license.php>
*/
/*
*
*  Margin, padding, and border resets
*  except for form elements
*
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, nav, section, menu, time, mark, audio, video, canvas {
  margin: 0;
  padding: 0;
  border: 0; }

/*
*
*  Consistency fixes
*  adopted from http://necolas.github.com/normalize.css/
*
*/
html {
  height: 100%;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  min-height: 100%;
  width: 100%;
  font-size: 100%; }

article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, audio, canvas, video {
  display: block; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

.props-single-text {
  color: red;
  background: blue; }

/* should be used via @extend rather than as a HTML class */
.clearfix {
  zoom: 1; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

/* should be used via @extend rather than as a HTML class */
.ir {
  display: block;
  text-indent: -999em;
  overflow: hidden;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr; }

.ir br {
  display: none; }

/* Forms */
/**
 * Fluid Media
 */
figure {
  position: relative; }

figure img, figure object, figure embed, figure video {
  max-width: 100%;
  display: block; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

/**
 *  Zoomable Baseline Grid
 */
body {
  /* 16px / 24px */
  font-size: 1em;
  line-height: 1.5em; }

/* these classes should be used via @extend rather than as a HTML class */
.small {
  /* 13px / 18px */
  font-size: 0.813em;
  line-height: 1.385em; }

.normal {
  /* 16px / 24px */
  font-size: 1em;
  line-height: 1.5em;
  /* 24 */ }

.large, #sidebar h2, #content h2 {
  /* 26 / 36px */
  font-size: 1.625em;
  line-height: 1.385em; }

.huge, #sidebar h1, #content h1 {
  /* 42px / 48px */
  font-size: 2.625em;
  line-height: 1.143em; }

.massive {
  /* 68px / 72px */
  font-size: 4.25em;
  line-height: 1.059em; }

.gigantic {
  /* 110px / 120px */
  font-size: 6.875em;
  line-height: 1.091em; }

/**
 * Grid container
 * surrounds .wrapper elements, which are columns
 * should be used via @extend
 */
.container {
  margin: 0 5.556%; }

/**
 * Simple elastic gutters
 * Note: box-sizing will not work in IE6-7
 * should be used via @extend
 */
.wrapper.primitive {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  padding: 0 0.75em; }

/* @media screen and (min-width: 640px) */
@media screen and (min-width: 40em) {
  body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size: 1.063em; } }
/* @media screen and (min-width: 720px) */
@media screen and (min-width: 45em) {
  body {
    /* Reset baseline grid to 16/16 = 1 */
    font-size: 1em; } }
/* @media screen and (min-width: 888px) */
@media screen and (min-width: 55.5em) {
  body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size: 1.063em; } }
/* @media screen and (min-width: 984px) */
@media screen and (min-width: 61.5em) {
  body {
    /* Reset baseline grid to 16/16 = 1.0 */
    font-size: 1em; } }
/* @media screen and (min-width: 1200px) */
@media screen and (min-width: 75em) {
  body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size: 1.063em; } }
/* @media screen and (min-width: 1392px) */
@media screen and (min-width: 87em) {
  body {
    /* Reset baseline grid to 16/16 = 1.0 */
    font-size: 1em; } }
/* @media screen and (min-width: 1680px) */
@media screen and (min-width: 105em) {
  body {
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size: 1.063em; } }
/* @media screen and (min-width: 1872px) */
/* @media screen and (min-width: 2080px) */
@media screen and (min-width: 130em) {
  body {
    /* Zoom baseline grid to 18/16 = 1.125 */
    font-size: 1.125em; } }
body {
  color: #222222;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; }

/* basic styling */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Quicksand', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }

a {
  color: #ac006b;
  text-decoration: none; }

a:hover {
  color: #df008b; }

/* layout */
#wrapper {
  position: relative;
  zoom: 1;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  -khtml-perspective: 800px; }

#wrapper:before, #wrapper:after {
  content: "";
  display: table; }

#wrapper:after {
  clear: both; }

#sidebar, #main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -khtml-box-sizing: border-box; }

#sidebar h1, #sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6, #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
  margin-top: .75em;
  margin-bottom: 0.25em; }

#sidebar p, #sidebar pre, #sidebar ul, #sidebar ol, #sidebar img, #content p, #content pre, #content ul, #content ol, #content img {
  margin: .75em 0; }

#sidebar ol, #sidebar ul, #content ol, #content ul {
  margin-left: 1.5em; }

#sidebar ul, #content ul {
  list-style-type: square; }

#sidebar blockquote, #content blockquote {
  color: #333;
  background: #f8f8f8;
  background: rgba(0, 0, 0, 0.01);
  border-left: .25em solid #ddd;
  margin-left: 1em;
  padding: 1px 1em; }

#sidebar {
  font-family: "Segoe UI", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background: #f5f5f5;
  border-bottom: 0.25em solid #ac006b;
  padding: 1em 5.55%; }

#sidebar ul {
  color: #c06ba0;
  margin: .75em 1.5em; }

#sidebar h1 {
  margin: 0; }

#sidebar .inner {
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  -ms-transition: -ms-transform 1s;
  transition: transform 1s; }

#sidebar .inner:hover {
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  -khtml-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }

#main {
  padding: 0 5.55%; }

#main header {
  padding-top: 2em;
  margin-bottom: 3em; }

#main header h1 {
  font-size: 5.25em;
  line-height: 1;
  font-weight: 400;
  color: #ac006b; }

#main header p {
  color: #999;
  font-size: .9em; }

#content pre {
  font-size: 1.1em;
  font-family: Monaco, "Bitstream Vera Sans", monospace;
  background: #333;
  background: rgba(34, 34, 34, 0.8);
  border: 1px solid #000;
  line-height: 1.15;
  text-shadow: 0;
  padding: .5em 2em;
  margin-left: -2em;
  color: #eee;
  text-shadow: none;
  border-left: 0px; }

/* Here's our desktop browser support */
@media screen and (min-width: 55.5em) {
  #wrapper {
    padding: 2em 6.55%; }

  #sidebar {
    float: left;
    width: 30%;
    background: none;
    padding: 2em 0;
    border-bottom: none;
    /* here comes something super-cool */
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    -o-perspective: 800px;
    -khtml-perspective: 800px; }

  #sidebar .inner {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -khtml-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateY(20deg);
    -moz-transform: rotateY(20deg);
    -ms-transform: rotateY(20deg);
    -o-transform: rotateY(20deg);
    -khtml-transform: rotateY(20deg);
    padding-right: 3em;
    border-right: 0.25em solid #ac006b; }

  #main {
    width: 65%;
    float: right;
    padding: 0;
    padding-left: 4%; } }
/* This is for the music download page */
#music {
  background: #373737;
  color: #eee;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-align: center; }

#music #m-wrapper {
  width: 95%;
  margin: 5em auto; }

#music h1 {
  text-transform: uppercase;
  font-size: 1em;
  line-height: 1;
  margin-bottom: 3em;
  color: #fff; }

#music h1 span {
  font-size: 5em;
  display: inline-block;
  border-bottom: 10px solid #fff; }

#music h2 {
  padding-top: .7em;
  font-size: 2em;
  line-height: 1.2em;
  margin-bottom: 0.2em; }

#music header {
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -ms-perspective: 800px;
  -o-perspective: 800px;
  -khtml-perspective: 800px; }

#music .download {
  display: block; }

#music .album {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 49.5%;
  min-width: 36.571em;
  max-width: 100%;
  padding: 3em;
  text-align: left;
  line-height: 1.5;
  font-size: 0.9em; }

#music img {
  max-width: 100%;
  float: left;
  margin-right: 1em;
  margin-bottom: 1.5em;
  margin-left: -9px;
  -webkit-transform: rotateY(40deg);
  -moz-transform: rotateY(40deg);
  -ms-transform: rotateY(40deg);
  -o-transform: rotateY(40deg);
  -khtml-transform: rotateY(40deg); }

#music p, #music ol {
  margin-bottom: 1em; }

#music p {
  clear: both; }

#music ol, #music ul {
  padding-left: 1em;
  list-style-position: inside; }

/* Styling for specific show-off content */
figure#grooveshark-desktop {
  width: 700px;
  max-width: 100%;
  display: block;
  margin: 0 auto; }

figure#grooveshark-desktop img.mini {
  position: absolute;
  bottom: -20px;
  left: -10px;
  max-width: 40%; }