/*   

Theme Name: mr3

Theme URI: http://inkrefinery.com

Description: musicrefinery fully responsive horizontal and vertical

Author: Inkrefinery

Author URI: http:/inkrefinery.com

Version: 1

*/



/* Let's default this puppy out

-------------------------------------------------------------------------------*/



html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, 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, menu, nav, section, time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	outline: 0;

	font-size: 100%;

	vertical-align: baseline;

	background: transparent;

}									



article, aside, figure, footer, header, hgroup, nav, section {display: block;}



/* force a vertical scrollbar to prevent a jumpy page */

html {overflow-y: scroll;}



ul {list-style: none;}



blockquote, q {quotes: none;}



blockquote:before, 

blockquote:after, 

q:before, 

q:after {content: ''; content: none;}



a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}



del {text-decoration: line-through;}



abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}



table {border-collapse: collapse; border-spacing: 0;}

th {font-weight: bold; vertical-align: bottom;}

td {font-weight: normal; vertical-align: top;}



hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}



input, select {vertical-align: middle;}



pre {

	white-space: pre; /* CSS2 */

	white-space: pre-wrap; /* CSS 2.1 */

	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */

	word-wrap: break-word; /* IE */

}



input[type="radio"] {vertical-align: text-bottom;}

input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}

.ie6 input {vertical-align: text-bottom;}



table {font-size: inherit; font: 100%;}

 

/* Accessible focus treatment

	people.opera.com/patrickl/experiments/keyboard/test */

a:hover, a:active {outline: none;}



small {font-size: 85%;}



strong, th {font-weight: bold;}



td, td img {vertical-align: top;} 



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

sup {top: -0.5em;}

sub {bottom: -0.25em;}



pre, code, kbd, samp {font-family: monospace, sans-serif;}



.clickable,

label, 

input[type=button], 

input[type=submit], 

button {cursor: pointer;}



/* Webkit browsers add a 2px margin outside the chrome of form elements */

button, input, select, textarea {margin: 0;}



/* make buttons play nice in IE */

button {width: auto; overflow: visible;}

 

/* scale images in IE7 more attractively */

.ie7 img {-ms-interpolation-mode: bicubic;}



/* prevent BG image flicker upon hover */

.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}



/* let's clear some floats */

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  

.clearfix:after { clear: both; }  

.clearfix { zoom: 1; }  







/* Ok, this is where the fun starts.

-------------------------------------------------------------------------------*/



#bg,#bg table,#bg td,#main { width: 100%; height: 100%; }



body { font-family: Archer, Universal, Futura, sans-serif; cursor: default; color: #343434; margin: 0; padding: 0; min-width: 460px; background: #ededed; }

.clear { clear: both; }



a:active { outline: none; }

a, a:visited { color: #343434; outline: none; text-decoration: none; font-size: 1em; color: #EAB552; }

h1 a, h1 a:visited { font-size: 1em; text-shadow: 0 -2px 1px #000000; color: #f4f4f4; }

a:hover { color: #121212; }



/* Custom text-selection colors*/

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}

::selection {background: #eab552; color: #fff; text-shadow: none;} 



a:link {-webkit-tap-highlight-color: #fcd700;} 



ins {background-color: #fcd700; color: #000; text-decoration: none;}

mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}



img { border: none; }



h1, div { padding: 0; margin: 0; }

h1, h2 { font-size: 2em;  text-transform: uppercase; letter-spacing: .2em; font-family: Gotham HTF, Gotham, Helvetica Neue, Helvetica, sans-serif; font-weight: bold;color: #BBB; text-shadow: 0 1px 1px #FFF; display: inline-block; }



.title-wrapper { text-align: center; }

.song-wrapper { text-align: center; }

h1.entry-title, h1.quote-author { display: block; }

h1.quote-author { margin-bottom: .5em; font-family: Brush Script MT, cursive; text-transform: lowercase; letter-spacing: 0; }

h2.artist-title, h2.from { background-color: #EDEDED; padding: 0 10px; text-transform: lowercase; letter-spacing: 0; font-weight: 100; display: inline-block; }
h2.quote-source { font-size: 1.5em; }
h2.artist-title { font-family: Brush Script MT, cursive; }
h2.from { font-family: Archer, Universal, Futura, sans-serif; font-style: italic; font-size: 18px; }
.text-bg-line, .from-line { border-top: 1px solid #bbb; margin-top: -1em; margin-bottom: 2em; display: block; }
.from-line { margin-top: -0.7em; }


.circle { border-radius: 50%; width: 2em; height: 2em; background-color: #bbb; display: block; margin: 2em auto; }

p.by { text-transform: uppercase; font-size: .6em; color: #ededed; font-weight: bold; letter-spacing: .6em; text-align: center; width: 4em; }



.bubble { background-color: #cdcdcd; padding: 20px; box-shadow: 15px 15px #444; margin-bottom: 50px; -moz-box-shadow: 15px 15px 0 #333; -webkit-box-shadow: 15px 15px 0 #333; box-shadow: 15px 15px 0 #333; position: relative; }

.bubble:before { content: ""; position: absolute; bottom: -25px; left: 50%; border-style: solid; border-width: 25px 25px 0 0; border-color: #cdcdcd transparent; display: block;  width: 0; z-index: 0; }

.bubble:after { content: ""; position: absolute; bottom: -40px; left: 55%; border-style: solid; border-width: 25px 25px 0 0; border-color: #333 transparent; display: block; width: 0; z-index: 0; }

.bubble .text-bg-line { margin-bottom: 2em; }



#text .title-wrapper { margin-left: 15px; margin-right: -15px; }



blockquote { padding: 0; font-style: italic; text-align: justify; font-size: 1em; line-height: 1.5em; color: #333; text-shadow: 0 1px 0 white; }



ul { list-style: none; margin-left: 0; padding-left: 0; padding-top: 5px; margin-top: 0; }

li { }

li.mid { border-left: 1px solid #BBB; margin: 0 10px; height: 22px; }



p, ul, li, a { padding: 0; margin: 0; }



p { padding: 10px 0; font-size: 1em; }



input, textarea { border: 5px solid #bbb; margin: 5px 0; font-family: Archer; }





/* ------------------------------------------- Wordpress ------------------------------------*/



#page-wrap { width: 100%; margin: 15px 0; }



#homenav .post {float: left; border: 5px solid #BBB; width: 20%; max-width: 240px; min-width: 136px; height: 302px; overflow: hidden; margin: 15px 0 15px 15px; padding: 10px; text-align: center;}



.entry-content { clear: both; margin: 0 15px; padding-top: 20px; }

.entry-content a {}

.entry-content a:hover {}



#meta {}

.postmetadata {}



#sidebar {}



.navgation {}

.next-posts {}

.prev-posts {}



#searchform {}

#s {}

#searchsubmt {}

	

ol.commentlist {list-style: none; width: 960px; }

ol.commentlist p { font-size: 1em; font-style: italic; }

ol.commentlist li.depth-1 { margin-bottom: 15px; }

ol.commentlist li {}

ol.commentlist li.alt {}

ol.commentlist li.bypostauthor {}

ol.commentlist li.byuser {}

ol.commentlist li.comment-author-admin {}

ol.commentlist li.comment { padding: 10px; border: 5px solid #666; }

ol.commentlist li.comment div.comment-author {}

ol.commentlist li.comment div.vcard {}

ol.commentlist li.comment div.vcard cite.fn {font-style: normal; font-size: 1em; text-transform: uppercase; letter-spacing: 1px;}

ol.commentlist li.comment div.vcard cite.fn a.url {}

ol.commentlist li.comment div.vcard img.avatar {float:right; }

ol.commentlist li.comment div.vcard img.avatar-32 {}

ol.commentlist li.comment div.vcard img.photo {}

ol.commentlist li.comment div.vcard span.says {}

ol.commentlist li.comment div.commentmetadata {}

ol.commentlist li.comment div.comment-meta {font-size: 1em;}

ol.commentlist li.comment div.comment-meta a {color: #ccc;}

ol.commentlist li.comment p {}

ol.commentlist li.comment ul {}

ol.commentlist li.comment div.reply {font-size: 1em;}

ol.commentlist li.comment div.reply a {font-weight: bold;}

ol.commentlist li.comment ul.children {list-style: none; margin: 10px 0 0;}

ol.commentlist li.comment ul.children li {}

ol.commentlist li.comment ul.children li.alt {}

ol.commentlist li.comment ul.children li.bypostauthor {}

ol.commentlist li.comment ul.children li.byuser {}

ol.commentlist li.comment ul.children li.comment {}

ol.commentlist li.comment ul.children li.comment-author-admin {}

ol.commentlist li.comment ul.children li.depth-2 {border: 5px solid #555; }

ol.commentlist li.comment ul.children li.depth-3 {border: 5px solid #999; }

ol.commentlist li.comment ul.children li.depth-4 {border: 5px solid #bbb; }

ol.commentlist li.comment ul.children li.depth-5 {border: 5px solid #ddd; }

ol.commentlist li.comment ul.children li.odd {}

ol.commentlist li.even {background: #fff;}

ol.commentlist li.odd {background: #f6f6f6;}

ol.commentlist li.parent {border: 5px solid #111;}

ol.commentlist li.thread-alt {}

ol.commentlist li.thread-even {}

ol.commentlist li.thread-odd {}



#respond, #comments, .commentlist { margin: 15px 0 0 15px; }



.guest p {margin: -15px 0 15px 0; background-color: #333; text-align: center; color: white;}



/******   footer   ******/



#footer { background-color: #333; min-height: 150px; padding: 15px; clear: both; color: #bbb; }

#footer .widget {float: left; border: 5px solid #BBB; width: 20%; max-width: 300px; min-width: 150px; overflow: hidden; margin: 15px 15px 0 0; padding: 10px; text-align: center;}



/******   responsive stuff   ******/



#cdcover { float: left; position: relative; margin: 0 15px 15px 15px; }



#text { float: left; max-width: 1000px; min-width: 200px; padding: 0 0 20px 0; }



#meta h1 { padding-top: 20px; padding-bottom: 20px; }

#text a:hover { color: #121212; }

#about { float: right; }



#square { border-bottom: 20px solid #666; background: #ccc; -moz-box-shadow: 15px 15px 0 #333; -webkit-box-shadow: 15px 15px 0 #333; box-shadow: 15px 15px 0 #333; padding: 0; min-height: 460px; min-width: 460px; float: left; position: relative; margin-right: 35px; }

.jp-progress, .jp-load-bar, .jp-play-bar { background: none; padding: 0; min-height: 460px; overflow: hidden; float: left; }

#square img { width: 100%; min-height: 460px; min-width: 460px; }

#nav_holder { height: 40px; }

#square_nav { padding: 0; overflow: hidden; }

.square_link { width: 20px; height: 20px; float: left; outline: none; text-decoration: none; }



.shadow-top { border-top: 15px solid #EDEDED; border-right: 0px solid transparent; right: -15px; position: absolute; border-left: 15px solid transparent; top: 15px; }

.shadow-bottom { border-top: 15px solid #333; border-left: 15px solid transparent; bottom: -35px; position: absolute; border-right: 0px solid transparent; }



/******   player   ******/



#topplayer { position: relative; }

#topplayer h4 { font-size: 150%; color: #888; margin-bottom: 7px; }

h1#track-title { color: #343434; margin: 0 0 0 20px; font-size: 2em; text-transform: none; line-height: 56px; padding: 12px 0;}

h1#track-title span{ color: #bbb; }



div.jp-single-player,

div.jp-playlist-player { font-size: 1em; line-height: 1.5em; height: 100%; }

div.jp-interface { position: relative; height: 100%; }

div.jp-single-player div.jp-interface { border-bottom: none; }



div.jp-interface ul.jp-controls { list-style-type: none; padding: 0; margin: 0; }

div.jp-interface ul.jp-controls a { position: absolute; overflow: hidden; text-indent: -9999px; }

a.jp-play,

a.jp-pause { width: 32px; height: 32px; border-bottom: 10px solid #999; }

div.jp-single-player a.jp-play,

div.jp-single-player a.jp-pause { left: 42px; top: 10px; }



a.jp-play { background: url("img/audio-sprite.svg") 0 0 no-repeat #fff; color: #ececec; }

a.jp-play:hover { background: url("img/audio-sprite.svg") -42px 0 no-repeat #fff; }

a.jp-pause { background: url("img/audio-sprite.svg") 0 -52px no-repeat #fff; display: none; color: #ececec; }

a.jp-pause:hover { background: url("img/audio-sprite.svg") -42px -52px no-repeat #fff; }



a.jp-stop { background: url("img/audio-sprite.svg") 0 -104px no-repeat #fff; width: 32px; height: 32px; border-bottom: 10px solid #999; color: #ececec; }

div.jp-single-player a.jp-stop { left: 10px; top: 10px; }



a.jp-stop:hover { background: url("img/audio-sprite.svg") -42px -104px no-repeat #fff; }



div.jp-progress { overflow: hidden; left: 0; background: transparent; width: 100%; height: 100%; }

div.jp-single-player div.jp-progress { left: 0; }

div.jp-playlist-player div.jp-progress { left: 164px; }



div.jp-load-bar { background-color: #ccc; width: 0; height: 100%; cursor: pointer; }



div.jp-play-bar { width: 400px;}



div.jp-single-player a.jp-volume-max, div.jp-playlist-player a.jp-volume-max { right: 10px; top: 10px; width: 32px; height: 32px; border-bottom: 10px solid #999; }

div.jp-single-player a.jp-volume-min, div.jp-playlist-player a.jp-volume-min { right: 142px; top: 10px; width: 32px; height: 32px; border-bottom: 10px solid #999; }

a.jp-volume-min { background: url("img/audio-sprite.svg") 0px -208px no-repeat #fff; }

a.jp-volume-max { background: url("img/audio-sprite.svg") 2px -156px no-repeat #fff; }

a.jp-volume-min:hover { background: url("img/audio-sprite.svg") -42px -208px no-repeat #fff; }

a.jp-volume-max:hover { background: url("img/audio-sprite.svg") -43px -156px no-repeat #fff; }



div.jp-volume-bar { position: absolute; overflow: hidden; right: 42px; top: 10px; background: #BBB; width: 100px; height: 32px; cursor: pointer; border-bottom: 10px solid #999; }

div.jp-playlist-player div.jp-volume-bar { left: 314px; }

div.jp-volume-bar-value { background: #fff; width: 0; height: 32px; }

div.jp-play-time { position: absolute; top: 52px; left: 10px; color: #333; letter-spacing: 2px; font-size: 1.5em; text-shadow: 0 1px 1px #FFFFFF; }

div.jp-total-time { text-align: right; position: absolute; top: 52px; right: 10px; color: #333; letter-spacing: 2px; font-size: 1.5em; text-shadow: 0 1px 1px #FFFFFF; }



/******   Nav Shadow   ******/



.cubenav li a { line-height: 100px; text-align: center; color: #fff; height: 100px; width: 100px; margin-top: -20px; float: left; border-style: solid; border-width: 0 0 20px 0; text-transform: uppercase; font-size: .6em; letter-spacing: 3px;}

.cubenav li a:active { line-height: 70px; margin-top: -10px; border-bottom-width: 10px; border-left-width: 10px; width: 90px; height: 85px; border-top-width: 15px; text-decoration: none; }

.cubenav li a:active .fixleft { margin-left: -10px; }



.cubenav .green { background-color: #66783E; border-color: #394841; }

.cubenav .green:active { border-top-color: #66783E; border-left: none; width: 100px; }

.cubenav li a.green:active .shadowhider { position: absolute; height: 0px; width: 100px; bottom: -15px; border-bottom: 6px solid #EDEDED; border-left: 0 solid transparent; border-right: 6px solid transparent; left: 0px; z-index: 5; }



.cubenav .orange { background-color: #DC8430; border-color: #CE4229; }

.cubenav .orange:hover { border-top-color: #DC8430; }

.cubenav li a.orange:active .shadowhider { position: absolute; height: 0px; width: 90px; bottom: -15px; border-bottom: 6px solid #EDEDED; border-left: 0 solid transparent; border-right: 6px solid transparent; left: 110px; z-index: 5; }



.cubenav .yellow { background-color: #EAB552; border-color: #705824; }

.cubenav .yellow:hover { border-top-color: #EAB552; }

.cubenav li a.yellow:active .shadowhider { position: absolute; height: 0px; width: 90px; bottom: -15px; border-bottom: 6px solid #EDEDED; border-left: 0 solid transparent; border-right: 6px solid transparent; left: 210px; z-index: 5; }



.cubenav .brown { background-color: #776259; border-color: #46261A; }

.cubenav .brown:active { border-top-color: #776259; }

.cubenav li a.brown:active .shadowhider { position: absolute; height: 6px; width: 105px; bottom: -15px; background-color: #EDEDED; z-index: 5; right: -15px; }

.cubenav li a.brown:active .shadowhider2 { position: absolute; height: 110px; width: 15px; margin-left: 98px; bottom: -15px; background-color: #EDEDED; z-index: 5; }



.cubenav { position:relative; margin-top: 65px; -moz-box-shadow: 15px 15px 0 #333; -webkit-box-shadow: 15px 15px 0 #333; box-shadow: 15px 15px 0 #333; height: 100px; width: 400px; }

.cubenav .shadow-top { right: -15px; top: 0; border-bottom: 15px solid #333; border-top: none; border-left: none; border-right: 15px solid transparent;}

.cubenav .shadow-bottom { bottom: -15px; }



/* Print styles!

-------------------------------------------------------------------------------*/

@media print {







}





/* Media queries!

-------------------------------------------------------------------------------*/



/* Smartphones (portrait and landscape) -----------

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

    #cdcover, #nav, #text, #square, .jp-progress, .jp-load-bar, .jp-play-bar  { float: none; width: auto; }

    body { font-size: large; }

    h1 { padding-bottom: 20px; }

}

*/





@media only screen and (max-width: 768px) {

	body.home, #footer { font-size: 80%; }

	body.home h1, body.home h2, #footer h1, #footer h2 { font-size: 100%; }

}



/* Smartphones (portrait) -----------

@media only screen

and (max-width : 320px)

and (orientation : portrait) {



}



/* iPads (portrait and landscape) -----------

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}



/* iPads (landscape) -----------

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {



}



/* iPads (portrait) -----------

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {



}



/* Desktops and laptops -----------

@media only screen and (min-width : 1224px) {



}



/* Large screens ----------- 

@media only screen and (min-width : 1824px) {



}



/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}





/* @media all and (orientation: portrait) {

	

}



/* @media all and (orientation: landscape) {

	

}