/*
 * HTML5 ✰ Boilerplate
 * ==|== normalize ==========================================================
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }



/* =============================================================================
   Links
   ========================================================================== */

a:link
	{text-decoration: none; color: #ffffff}

a:visited
	{text-decoration: none; color: #ffffff}

a:active
	{text-decoration: none; color: #ffffff}


a:hover
	{text-decoration: none; color: #317684}


/* =============================================================================
   Typography
   ========================================================================== */



b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }



/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

img { width: 100%; height: auto; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }


/* =============================================================================
   Forms
   ========================================================================== */

label { cursor: pointer; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/* =============================================================================
   Let's start it
   ========================================================================== */

body { 
  
  background: #000000;
  color: #fff;
 }

{
  box-sizing: border-box;
}


h1 {
  font-size: 36px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 17px;
  font-weight: bold;
}



 p {
    font-weight:bold;
font-size: 110%;
  }



#backdrop
	{
	position: relative;
	width: 100%;
	
	color: #fff;
	background:#000;
	overflow: auto;
	z-index:100;	
	min-height:100%;
	}


#scroll
	{
	position: relative;
	width: 960px;
	left:50%;
	margin-left:-480px;
	color: #fff;
	background:#000;
	overflow: auto;
	z-index:100;	
	min-height:100%;
	}
	
#sheet
	{
	position: relative;
	width: 96%;
	left: 50%;
	margin-left:-50%;
	color: #000;
	background:#fff;
	overflow: auto;
	z-index:100;	
	min-height:100%;
	}

#page
	{
	position:relative;
	width: 1080px;
	left:50%;
	margin-left:-540px;
	background:#000;
	overflow: hidden;
	z-index:100;	
	min-height:100%;
	}

#image
	{
	position: relative;

	background:#fff;
	overflow: hidden;
	z-index:100;	
	min-height:100%;
	}
	
	

.matte {
  position: relative;
float: left;
border-bottom: 100px;
}
 
.matte img {
    width: 100%;
    height: auto;
  border: 10px solid #fff;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;
}
 
.matte p {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 0px;
  font: 400 18px/1 'Kaushan Script', cursive;
  color: #777;
}



.container

{
width: 100%;
height: 100%;
}



	


#container2 {
  background: #000000;
  padding: 5px;
  margin-bottom: 20px;
  border-radius: 5px;
  clear: both;
  border-radius: 5px;
  width: 96%;
}


 .index


{

position: relative;
width: 100%;
overflow: hidden;
text-decoration: none;
color: #ffffff;
line-height: 0.76em; 
font-weight: 600;
font-family: "Open Sans", sans-serif;
font-size: 1.70em;
font-style: italic;	
}


	
 .themenu


{

position: relative;
width: 900px;
margin-left: 500px;
overflow: hidden;
text-decoration: none;
color: #ffffff;
line-height: 0.76em; 
font-weight: 600;
font-family: "Open Sans", sans-serif;
font-size: 1.70em;
font-style: italic;	
}



	
 .menu-left-aligned


{

position: relative;
width: 900px;
overflow: hidden;
text-decoration: none;
color: #ffffff;
line-height: 0.76em; 
font-weight: 600;
font-family: "Open Sans", sans-serif;
font-size: 1.70em;
font-style: italic;	
}


.content

{
    
    color: #000000;
}




#div-album-row
	{
    display: inline-flex;
    height: 600px;
	
    }

#div-album
	{
	margin-top: 20px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 20px;
	clear: left;
	width: 525px;
	height: 560px;
	display: inline-block;
	}




table, th, td, tr


{
    background: #ffffff;
 color: #000000;   
}


.body2 a:link
	{text-decoration: none; color: #306EFF}

.body2 a:visited
	{text-decoration: none; color: #306EFF}

.body2 a:active
	{text-decoration: none; color: #306EFF}

.body2 a:hover
	{text-decoration: none; color: #151Bp4}

	
	.body2
	{
	font-family: "Open Sans", sans-serif;
	}


.discography a:link
	{text-decoration: none; color: #306EFF}

.discography a:visited
	{text-decoration: none; color: #306EFF}

.discography a:active
	{text-decoration: none; color: #306EFF}

.discography a:hover
	{text-decoration: none; color: #151Bp4}

	
	.discography
	{
	font-family: "Open Sans", sans-serif;
	}
	
	
a:link
	{text-decoration: none; color: #ffffff}

a:visited
	{text-decoration: none; color: #ffffff}

a:active
	{text-decoration: none; color: #ffffff}


a:hover
	{text-decoration: none; color: #317684}
  
 

p5

{
text-decoration: none;
color: #ffffff;
line-height: 0.76em; 
font-weight: 600;
font-family: "Open Sans", sans-serif;
font-size: 1.70em;
line-height: 2em;
font-style: italic;

}


 


.horizontal-divider

{
    
    border-bottom: 1px solid gray;
    clear: both;
    margin: 10px 10px 0px 0px;
}

.left-content
    {
    margin: 0px 0px 0px 0px; overflow: hidden; width: 50%; float: left;
    }
 
 
 .left-pane
 
    {
    margin: 0px 0px 0px 0px; overflow: hidden; width: 50%; height: 50%; float: left;
    }
 
.titles h3

{
    
font-size: 150%;
font-style: normal;
font-weight: 600;
word-spacing: 0.25em;
}


.discography
	{
				text-align: left;
		font-family: "Open Sans", sans-serif;
		font-style: italic;

font-size: 2em;
    font-weight: 550;
  
line-height: 2em;
padding-top: 0px;
padding-left: 20px;
    width: 1024px;
  height: 100%;
  margin: 0px 0px 0px 0px;
  background-color: #ffffff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
overflow: hidden;  
border: 10px solid #fff;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;  }













.info
	{
	    color: #000000;
				text-align: left;
		font-family: "Open Sans", sans-serif;
		font-style: italic;

font-size: 2em;
    font-weight: 550;
  
line-height: 2em;
padding-top: 0px;
padding-left: 20px;
    width: 880px;
  height: 100%;
  margin: 0px 0px 0px 0px;
  background-color: #ffffff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
overflow: hidden;  
border: 10px solid #fff;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;  }


.info h3

{
color: #000000;
font-size: 200%;
line-height: 2.25em;
font-weight: 600;
}


.info b

{
    color: #000000;
	font-weight: bold;
}


.titles
	{
	    color: #000000;
				text-align: left;
		font-family: "Open Sans", sans-serif;
font-size: 2em;
    font-weight: 550;
  
line-height: 2.25em;

padding-top: 0px;
padding-left: 20px;
    width: 880px;
  height: 100%;
  margin: 0px 0px 0px 0px;
  background-color: #ffffff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
overflow: hidden;  
border: 10px solid #fff;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;  }


.titles i

	{
	    color: #000000;
	font-style: italic;	
	}

.titles-tall h3

{
 color: #000000;   
font-size: 150%;

    
}

.titles-tall
	{
	color: #000000;	
font-family: "Open Sans", sans-serif;
font-size: 90%;
padding-top: 0px;
padding-left: 20px;
  width: 50%;
  
  margin: 0px 0px 20px 0px;
  background-color: #ffffff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
border: 10px solid #fff;
overflow: hidden;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;  }

.album-description h3

{
	color: #000000;	
font-size: 200%;
font-style: normal;

}
	
.album-description p

{
	color: #000000;	
font-style: normal;

}

.album-description
	{
	    	color: #000000;	
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-style: italic;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
    width: 50%;

  margin: 5px 0px 20px 0px;
  background-color: #ffffff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
border: 10px solid #fff;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;  }
	




.album-description b

{
    	color: #000000;	
font-weight: bold;
}


.album-description-wide
	{
	    	color: #000000;	
		text-align: left;
		overflow: hidden;
		font-size: 30em;
line-height: 1.25em;
font-family: "Open Sans", sans-serif;
font-size: 90%;
font-style: italic;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
    width: 880px;

  margin: 2px 0px 20px 0px;
  background-color: #ffffff;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
border: 10px solid #fff;
   -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888;  }


.album-description-wide b

{
    	color: #000000;	
font-weight: bold;
}


.album-description-wide h3

{
    	color: #000000;	

font-size: 200%;
font-style: normal;

}



   

.album-info {
    	color: #000000;	
	float: left;
	  width: 100%;
  margin: 10px auto 0px auto;
  background-color: #ddddda;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 10px solid #fff;
-webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888; }



          
          
/* line 21, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-wrapper {
	
 width: 900px;
height: 1150px;;
overflow: hidden;
  margin: 0px 0px 0px 0px;
  background-color: #ddddda;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border: 10px solid #fff;
  -webkit-box-shadow: 1px 1px 1px 1px #888;
     -moz-box-shadow: 1px 1px 1px 1px #888;
          box-shadow: 1px 1px 1px 1px #888; }
  /* line 28, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-wrapper.error .audio-player-image {
    background: #f78471; }
    /* line 30, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-wrapper.error .audio-player-image:before {
      position: absolute;
      top: 0;
      bottom: 0;
      height: 10px;
      width: 100%;
      text-align: center;
      margin: auto;
      color: white;
      content: "Error loading";
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      font-size: 13px; }
    /* line 43, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-wrapper.error .audio-player-image > * {
      display: none; }

/* line 46, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-image {
  position: relative;
  height: 900px;
  -webkit-backface-visibility: hidden; }
  /* line 50, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-image > img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: auto; }
    /* line 56, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-image > img.fading {
      -webkit-transition: opacity 200ms linear;
      -moz-transition: opacity 200ms linear;
      -o-transition: opacity 200ms linear;
      transition: opacity 200ms linear;
      z-index: 1;
      opacity: 0; }

/* line 61, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-song-name {
text-align: right;
  position: absolute;
  line-height: 1.5em;
  z-index: 2;
  top: 2%;
  right: 2%;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 250%;
  font-style: italic;
  color: white;
  text-shadow: 0 6px 6px rgba(0, 0, 0, 0.9);
  text-transform: uppercase; }

/* line 73, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-controls {
  padding: 15px; }

@-moz-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@-webkit-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@-o-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@-ms-keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

@keyframes loadingStripes {
  /* line 77, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  0% {
    background-position: -20px; }

  /* line 79, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  100% {
    background-position: 0px; } }

/* line 82, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-progress {
  display: block;
  width: 100%;
  height: 15px;
  border-radius: 25px;
  background-color: #a0a7af;
  overflow: hidden; }
  /* line 89, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-progress.loading {
    background-image: -webkit-linear-gradient(-45deg, #808e97 25%, transparent 25%, transparent 50%, #808e97 50%, #808e97 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #808e97 25%, transparent 25%, transparent 50%, #808e97 50%, #808e97 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #808e97 25%, transparent 25%, transparent 50%, #808e97 50%, #808e97 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #808e97 25%, transparent 25%, transparent 50%, #808e97 50%, #808e97 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    -webkit-animation: loadingStripes 700ms linear infinite;
    -moz-animation: loadingStripes 700ms linear infinite;
    -ms-animation: loadingStripes 700ms linear infinite;
    -o-animation: loadingStripes 700ms linear infinite;
    animation: loadingStripes 700ms linear infinite; }

/* line 94, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-progress-bar {
	position: relative;
	float: left;
  -webkit-transition: width 200ms linear;
  -moz-transition: width 200ms linear;
  -o-transition: width 200ms linear;
  transition: width 200ms linear;
  display: block;
  height: 100%;
  width: 0;
  max-width: 100%;
  background-color: #808e97;
  border-radius: 25px; }

/* line 103, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */

/* This is the Play Button */
.audio-player-button {
  display: block;
  position: relative;
  float: left;
  width: 150px;
  height: 150px;
  margin: 0 5px;
  border-radius: 100%;
  border: 10px solid #808e97;
  opacity: 0.8;
  cursor: pointer; }
  /* line 114, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button:hover {
    opacity: 1; }
  /* line 116, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  
  /* This is the size and position of the Play Arrow */
    .audio-player-button::before {
    position: absolute;
    top: -1px;
    bottom: 0;
    left: -40px;
    right: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    line-height: 1px;
    font-size: 60px;
    color: #808e97; }
  /* line 128, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  
  /* This is the size and position of the pause graphic */
  .audio-player-button.icon-pause::before {
    font-size: 60px;
    top: 1px;
    left: -50px; }
  /* line 132, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */


  /* */
  /* This is the position of the Back Arrow */
  
  .audio-player-button.icon-backward::before {
    left: -55px; }
  /* line 134, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
  .audio-player-button.small {
    width: 125px;
    height: 125px;
    margin-top: 5px; }
    /* line 138, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
    .audio-player-button.small::before {
      font-size: 45px; }

/* line 141, /Users/Rose/Sites/audio_player/source/stylesheets/style.sass */
.audio-player-button-wrappers {
position: center;
  overflow: hidden;
  *zoom: 1;
  display: block;
  width: 500px;
  margin: 25px auto 0 auto; }



  .centered {
   width:100%;
   vertical-align: top;
   margin:0 auto;
   text-align:center;
   overflow: hidden;
   }
   
   

.box {
  margin: 5px;
  padding: 5px;
  background: #FDFAF8;
  font-size: 11px;
  line-height: 1.4em;
  float: left;
  border-radius: 5px;
}

.box h2 {
  font-size: 14px;
  font-weight: 200;
}

.box img,
#tumblelog img {
  display: block;
  width: 100%;
}

.rtl .box {
  float: right;
  text-align: right; 
  direction: rtl;
}


.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 400px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 400px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }







/**** Fluid ****/

#container2.fluid  {
  padding: 5px 0;
}

.fluid .box {
  margin: 5px 1%;
  padding: 5px 1%;
}

.fluid .box.col1 { width: 16%; }
.fluid .box.col2 { width: 36%; }
.fluid .box.col3 { width: 56%; }


/**** Clearfix ****/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }