/*   
Theme Name: Psychedelik.com
Description: Template Psychedelik.com Mobile
Version: 1
*/

body {
font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(//fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(//fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
 overflow:auto;
 }

 .framefull {
    height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  }

.framemenu{
 font-size: 12px;
  height: 54px;
  background-color: #232323;
  z-index: 100;
  line-height: 54px;
  margin-bottom: 1px;
  }

  .framebody {
    width: 100%;
  background-color: #fff;
  }

 

.header{
border:0;
border-bottom:1px solid #bfc0c0;
background-color:#95A5A6;
margin-bottom:-5px;
text-shadow:0 -1px 1px #000;
background-size:5px 5px
}

[data-role=footer]{
border: 0;
}

.social-icons {
position:fixed;
	top: 10px;
	right: 30px;
}

.social-icons a {
	margin-left:15px;
}

.social-icons a img {
	width: 30px;
}

.logo{
background: url("bg.png") repeat-x;
text-align:center;
margin:0 auto -5px;
}

.audio-player {
padding:0;
width:100%;
z-index:99;
}

div.audio-player {
margin: 0 auto;
}

div.nowplaying {
    position: absolute;
    width: 320px;
	height: 240px;
	font-family: 'Roboto', sans-serif;
	background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.nowplaying h1 {
    position: absolute;
    top: 5px;
    left: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #9c9688;
    text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}

.audio-player section {
    position: absolute;
    top: 130px;
    left: 10px;
    font-family: Lato;
    font-size: 20px;
    color: #9c9688;
    text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}

.display-track {
	font-size: 18px;
	color: #B163A3;
}

.mejs-container {
}

#audio-player

/* content container, excludes header */
#content {
min-width: 320px;
margin: 0 auto;
}

/* 
Icons
*/

.ui-icon-facebook:after {
	background-image: url("facebook.svg");
}
/* Fallback */
.ui-nosvg .ui-icon-facebook:after {
	background-image: url("facebook.png");
}

.ui-icon-shopping:after {
	background-image: url("shop.svg");
}

.ui-nosvg .ui-icon-shopping:after {
	background-image: url("shop.png");
}

.ui-icon-blog:after {
	background-image: url("blog.svg");
}

.ui-nosvg .ui-icon-blog:after {
	background-image: url("blog.png");
}

/* Adsense */

/* Responsive background */

.ui-page{
background: url('bg.png');
}

@media all and (min-width: 320px) {
#content {
	background: url('bg.png');
	background-color: #34495e;
	}
}

@media all and (min-width: 768px) {
#content {
	background: url('bg.png');
}
}

/* Responsive adsense */

.adsense{
min-width: 78%;
width: auto; 
text-align:center;
}

/* Home */

/* A bit custom styling */
.my-page .ui-listview li .ui-btn p {
    color: #c0c0c0;
}
.my-page .ui-listview li .ui-btn .ui-li-aside {
    color: #eee;
}
/* First breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */
@media ( min-width: 48em ) {
    .my-page .ui-content {
        padding: .5625em; /* 9px */
    }
    .my-page .ui-listview li {
        float: left;
        width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
        height: 14.5em; /* 232p */
        margin: .5625em 1.2%;
    }
    .my-page .ui-listview li > .ui-btn {
        -webkit-box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
    }
    .my-page .ui-listview li.ui-li-has-thumb .ui-li-thumb {
        height: auto; /* To keep aspect ratio. */
        max-width: 100%;
        max-height: none;
    }
    /* Make all list items and anchors inherit the border-radius from the UL. */
    .my-page .ui-listview li,
    .my-page .ui-listview li .ui-btn,
    .my-page .ui-listview .ui-li-thumb {
        -webkit-border-radius: inherit;
        border-radius: inherit;
    }
    /* Hide the icon */
    .my-page .ui-listview .ui-btn-icon-right:after {
        display: none;
    }
    /* Make text wrap. */
    .my-page .ui-listview h2,
    .my-page .ui-listview p {
        white-space: normal;
        overflow: visible;
        position: absolute;
        left: 0;
        right: 0;
    }
    /* Text position */
    .my-page .ui-listview h2 {
        font-size: 1.25em;
        margin: 0;
        padding: .125em 1em;
        bottom: 50%;
    }
    .my-page .ui-listview p {
        font-size: 1em;
        margin: 0;
        padding: 0 1.25em;
        min-height: 50%;
        bottom: 0;
    }
    /* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
    .ui-listview .ui-li-has-thumb h2,
    .ui-listview .ui-li-has-thumb p {
        background: #111;
        background: rgba(0,0,0,.8);
    }
    .ui-listview .ui-li-has-thumb h2 {
        bottom: 35%;
    }
    .ui-listview .ui-li-has-thumb p {
        min-height: 35%;
    }
    /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
    .my-page .ui-listview .ui-li-aside {
        padding: .125em .625em;
        width: auto;
        min-height: 0;
        top: 0;
        left: auto;
        bottom: auto;
        /* Custom styling. */
		/* Modif le 23/02/2015 Spring 2015 Marsala 
		background: #990099;
        background: rgba(153,0,153,.85);*/
        background: #955251;
        background: rgba(149,82,81);
        -webkit-border-top-right-radius: inherit;
        border-top-right-radius: inherit;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    /* If you want to add shadow, don't kill the focus style. */
    .my-page .ui-listview li {
        -moz-box-shadow: 0px 0px 9px #111;
        -webkit-box-shadow: 0px 0px 9px #111;
        box-shadow: 0px 0px 9px #111;
    }
    /* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
    .my-page .ui-listview li > .ui-btn:hover {
        -moz-box-shadow: 0px 0px 12px #33ccff;
        -webkit-box-shadow: 0px 0px 12px #33ccff;
        box-shadow: 0px 0px 12px #33ccff;
    }
    /* Animate focus and hover style, and resizing. */
    .my-page .ui-listview li,
    .my-page .ui-listview .ui-btn {
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
    }
}
/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */
@media ( min-width: 63.75em ) {
    .my-page .ui-content {
        padding: .625em; /* 10px */
    }
    /* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
    By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
    .my-page .ui-listview {
        max-width: 62.5em; /* 1000px */
        margin: 0 auto;
    }
    /* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
    but we stick to percentage values for demo purposes. */
    .my-page .ui-listview li {
        width: 23%;
        height: 230px;
        margin: .625em 1%;
    }
}
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */

/* Responsive player */

/* Basic styles */
.rwd-example .ui-body {
    text-align: left;
    border-color: #ddd;
}
.rwd-example p {
    color: #777;
    line-height: 140%
}
/* Stack all blocks to start */
.rwd-example .ui-block-a,
.rwd-example .ui-block-b,
.rwd-example .ui-block-c {
    width: 100%;
    float: none;
}
/* Collapsing borders */
.rwd-example > div + div .ui-body {
    border-top-width: 0;
}
/* 1st breakpoint - Float B and C, leave A full width on top */
@media all and (min-width: 42em) {
    .rwd-example {
        overflow: hidden; /* Use this or a "clearfix" to give the container height */
    }
    .rwd-example .ui-body {
       min-height: 14em;
    }
    .rwd-example .ui-block-b,
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-b p,
    .rwd-example .ui-block-c p {
      font-size: .8em;
    }
    .rwd-example > div + div .ui-body {
        border-top-width: 1px;
    }
    .rwd-example > div:first-child .ui-body {
        border-bottom-width: 0;
    }
    .rwd-example > div:last-child .ui-body {
        border-left-width: 0;
    }
}
/* 2nd breakpoint - Float all, 50/25/25 */
@media all and (min-width: 55em) {
    .rwd-example .ui-body {
       min-height: 18em;
    }
    .rwd-example .ui-block-a,
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-b,
    .rwd-example .ui-block-c {
      float: left;
      width: 24.925%;
    }
    .rwd-example > div:first-child .ui-body {
        border-bottom-width: 1px;
    }
    .rwd-example > div + div .ui-body {
        border-left-width: 0;
    }
}
/* 3rd breakpoint - Bump up font size at very wide screens */
@media all and (min-width: 75em) {
    .rwd-example .ui-body {
      font-size: 125%;
    }
    .rwd-example .ui-block-a,
    .rwd-example .ui-block-c {
      float: left;
      width: 49.95%;
    }
    .rwd-example .ui-block-b,
    .rwd-example .ui-block-c {
      float: left;
      width: 24.925%;
    }
}

/* Responsive Web Design */

/*layouts smaller than 600px, iPhone and mobiles*/
@media all and (max-device-width: 480px) {

.ui-listview .ui-li-aside {
display: none;
}

h1 {
position: absolute;
}
.social-icons {
	top: 10px;
	right: 30px;
}

.social-icons a {
	margin-left:15px;
}

.social-icons a img {
	width: 30px;
}

.playedT{
position: relative;
margin-top: 5px;
width: 320px;
margin: 0 auto;
text-align:center;
}

.fb-like {
position: relative;
margin-top: 5px;
width: 600px;
margin: 0 auto;
text-align:center;
}

.comments{
position: relative;
margin-top: 5px;
width: 320px;
margin: 0 auto;
text-align:center;
}

.fb-comments{
position:relative;
margin-top: 5px;
width: 320px;
margin: 0 auto;
text-align:center;
}

.nowplaying h1 {
    position: absolute;
    top: 5px;
    left: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    color: #9c9688;
    text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}

.audio-player section {
    position: absolute;
    top: 130px;
    left: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #9c9688;
    text-shadow: 1px 1px 1px rgba(0,0,0, .5);
}

.display-track {
	font-size: 12px;
	color: #B163A3;
}
}

/*iPad styles*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.playedT{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-like {
position: relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}
}

/*iPad in landscape - Added jan 10th 2015 */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.playedT{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-like {
position: relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}
}

/*iPad in portrait - Added jan 10th 2015 */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {
.playedT{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-like {
position: relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}
}


/*layouts larger than 900px*/
@media screen and (min-width: 920px) {
.adsense {
margin: 0 auto;
}

.playedT{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-like {
position: relative;
margin-top: 10px;
width: 728px;
margin: 0 auto;
text-align: center;
}

.comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}
}

/*layouts larger than 960px*/
@media screen and (min-width: 960px) {

.playedT{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-like {
position: relative;
width: 1728px;
margin-top: 5px;
margin: 0 auto;
text-align: center;
}

.comments{
position:relative;
margin-top: 10px;
width: 728px;
margin: 0 auto;
text-align:center;
}

.fb-comments{
position:relative;
margin-top: 5px;
width: 728px;
margin: 0 auto;
text-align:center;
}
}

.slot_dark { width: 320px; height: 50px; margin: 0 auto; text-align:center;}

@media(min-width: 480px) {
.slot_dark {
	width: 468px;
	height: 60px;
	margin: 0 auto;
	text-align:center;
}
}

@media(min-width: 768px) {
.slot_dark {
	width: 728px;
	height: 90px;
	margin: 0 auto;
	text-align:center;
}
}

@media(min-width: 1024px) {
.slot_dark {
	width: 970px;
	height: 90px;
	margin: 0 auto;text-align:center;
}
}