/**
 
CSS editing directory
 
Labeled sections for easier navigating
 
01. Controls    - tumblr controls, selection, and scrollbar
02. General     - body, links, headings, etc
03. Sidebar     - sidbear, description, icon
04. Tabs        - tab links and content styling
05. Posts       - container, posts, post styles
06. Blogroll    - follower icons and container
 
**/
 
/* ------------
 
 01. Controls
 
 ------------ */
 
.tmblr-iframe{ z-index:9999999!important;}
 
/*     Scrollbar + Selection   */
 
::-webkit-scrollbar {
width: 18px;
height:6px;
}
 
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
background:#c628be;
border:6px solid #f8f8f8;
border-top:4px solid #f8f8f8;
border-bottom:4px solid #f8f8f8;
cursor:pointer;
border-radius: 8px;
}
::-webkit-scrollbar-track {
background:#dfdfdf;
border: 8px solid #f8f8f8;
border-top:12px solid #f8f8f8;
border-bottom:12px solid #f8f8f8;
 
}
 
::-moz-selection {background:#393e3e;color:#ed8dcf}
::selection {background:#393e3e;color:#ed8dcf;}
 
/* ------------
 
 02. General
 
 ------------ */
 
body {
background:#74dbc8 url(https://static.tumblr.com/4838b58abafbabdaefe67dacefb5c2c9/syymigl/M2Upk0w74/tumblr_static_9z0hf4tzd5kcscw0kkkwg4w4g.png)
 no-repeat center center fixed;
background-size: cover; ;
color:#e6e3e7;
font-family:Nunito;
font-size: 16px;
word-wrap:break-word;
line-height:160%;
}
   
 
 
a {
text-decoration: none;
color:#e7fb64;
transition:.5s;
   
}
   
a:hover {
color:#d3fffd;
transition:.5s;
}
   
h1 {    
border-left:10px double ; border-right:10px double ;
text-align:center;
font-size:22px;
font-family:Inconsolata;
letter-spacing:2px;
line-height:100%; }
 
h2 {
text-align:center;
font-size:18px;
border-left:20px double ;
border-right:20px double ;
letter-spacing:1px;
line-height:100%;
font-weight:normal; }
 
b {color:#e6e3e7; }
i {color:#e6e3e7; font-style:italic;}
 
 
/* ------------
 
 03. Sidebar
 
 ------------ */
 
aside {
position:fixed;
height:0px;
top:0px;
left:50%;
z-index:0;
margin-left:-300px;
width:520px;
}
 
#sidebar {
position:fixed;
width:18%;
margin-left:-24%;
z-index:9999!important;
top:50px;
}
   
#sidebar .caption {
border-top:3px solid #8a1967;
margin-top:40px;
padding:20px;
position:relative;
}
 
 
#sidebar .caption a {
margin:20px 10px 0 0;
padding:2px 4px;
line-height:200%;
background:#f3fc65;
}
   
#sidebar .caption:before {
content:'';
position:absolute;
width:3px;
height:50px;
top:0px;
left:50%;
right:50%;
margin-left:-1px;
margin-top:-50px;
background:#8a1967;
}
 
#sidebar div {
margin:auto;
}
   
.sidecon:before{
content:'';
position:absolute;
width:3px;
height:50px;
top:0px;
left:50%;
right:50%;
margin-left:-1px;
margin-top:-50px;
background:#8a1967;
}
 
.sidecon {
position:relative;
margin:0px auto;
font-size:1.2em;
text-align:center;
}
   
.sidecon a {
background:#8a1967;
border-radius:100%;
padding:14px;
}
 
.sidecon a:after {
content:'';
position:absolute;
animation: scale 2s infinite cubic-bezier(0, .2, 0.4, 1.2);
width:47px;
margin:auto;
left:50%;
margin-left:-23.5px;
background:#8a1967;
top:50%;
bottom:50%;
z-index:-1;
border-radius:100%;
height:100%;
 }
 
 
#description {
  padding:4px;
   height:200px;
overflow-y:auto;
    transform:translate(0, 20px);
overflow-x:hidden;
z-index:99999!important;
color:;
}
 
/* ------------
 
 04. Tabs
 
 ------------ */
 
ul.tabs{
margin: 0px;
padding: 0px;
position:fixed;
list-style: none; padding-right:20px; width:20px;
right:50px;
margin-top:200px;
}
 
ul.tabs li:before {
content:'';
position:absolute;
width:60px;
background:transparent;
height:3px;
z-index:-9;
left:0px;
top:50%;
bottom:50%;
margin-left:56px;
}
 
ul.tabs li:after{
content:'';
position:absolute;
width:0px;
background:transparent;
height:3px;
z-index:-9;
right:0px;
top:50%;
transition:.6s;
bottom:50%;
margin-left:100px;
}
   
ul.tabs li.current:after {
content:'';
position:absolute;
width:60px;
background:#8a1967;
height:3px;
z-index:-1;
right:-50px;
top:50%;
bottom:50%;
}
   
   
ul.tabs li{
background: none;
color:#555;
position:relative;
background:#c628be;
display: inline-block;
padding: 10px 18px;
margin:20px 0;
border-radius:100%;
cursor: pointer;
}
 
ul.tabs li.current{
background:#8a1967;
color: #222;
transition:.6s;
}
 
ul.tabs li.current:before {
animation: scale 1.36s 1 cubic-bezier(0, .2, 0.4, 1.2);
width:100%;
margin:auto;
left:0px;
background:#8a1967;
top:50%;
bottom:50%;
border-radius:100%;
height:100%;
}
   
@keyframes scale {
0% {
    transform: scale(1);
}
50%,
75% {
  transform: scale(1.52);
}
78%, 100% {
  opacity: 0;
}
  }
 
.tab-content{
display: none;
background: transparent;
padding: 15px;
}
 
.tab-content.current{
display: block;
margin:auto;
}
 
.asks, .blogroll, .about {
width:500px;
margin:100px auto;
}
 
#askbox {
margin-bottom: 5px;
width: 500px;
padding: 3px;
font-family: tahoma;
color: #e6e3e7;
}
 
#askbox a.askbox:link, a.askbox:active, a.askbox:visited {
color: #e6e3e7;
text-transform: uppercase;
text-decoration: none;
}
 
#askbox a.askbox:hover {
color: #e7fb64;
text-transform: uppercase;
text-decoration: none;
 
}
 
 
 
/* ------------
 
 05. Posts
 
 ------------ */
 
   
.container{
width:60%;
margin:auto;
   
}
 
.posts, ol.notes {
width:100%;
max-width:600px;
padding:10px;
margin:20px auto 100px auto;
background:#424444;
counter-increment: menu;
transition:.5s;
   
}
 
ol.notes {
line-height:220%;
}
   
.posts:before {
content: "00" counter(menu) "   ";
font-family:sans-serif;
font-size:1.4em;
opacity:.86;
transform:translate(-60px, 16px);
position:absolute;
}
 
.posts img, .posts iframe {
display:block;
max-width:100%;
}
   
 
/*   Usernames   */    
   
.user, .deactivated, .tumblelog, ol.notes .like .action a {
margin:6px;
margin-left:20px;
padding:4px;
border-radius:4px;
border:none;
position:relative;
background:rgba(172,81,255, .12)
}
 
.user:after, .deactivated:after, .tumblelog:after, ol.notes .like .action a:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 8px 13px 8px 0;
border-color: transparent rgba(172,81,255, .12); /* keep same     color as bubble */
display: block;
width: 0;
z-index: 1;
left: -13px;
top: 6px;
}
   
.caption {
padding:20px 0px;
}
 
 
/*  chat posts  */
 
 .chat {
padding:5px;
line-height:150%;
 }
   
.chat:nth-of-type(odd) {
background:#e6e3e7;
color:#424444;
-webkit-transition:.5s;
transition:.5s; }
   
  .chat:nth-of-type(odd) b {
color:#424444;
-webkit-transition:.5s;
transition:.5s; }  
   
.chat:nth-of-type(even) {
background:#424444;
color:#e6e3e7;
-webkit-transition:.5s;
transition:.5s; }
 .chat:nth-of-type(even) b{
color:#e6e3e7;
-webkit-transition:.5s;
transition:.5s; }
 
/*  audio posts */
 
.audiopost {
width:100%;
height:120px;
background:linear-gradient(to right, #c628be, #80f8ef, #f3fc65);
border-radius:6px;
overflow:hidden;
   
}
 
#albumart{
   z-index:2;
   width:120px;
   float:left;
   height:120px;
}
 
.playerbox {
float:left;
}
 
 
#albumart img{
width:120px;
height:120px;
float:left;
border-width:0px; transition:.6s;
}
 
 
 .player {
width:30px;
overflow:hidden;
height:40px;
transform:scale(1.2);
border-radius:100%;
top:8px;
bottom:10px;
left:4px;
padding:8px;
padding-top:6px;
padding-left:8px;
padding-bottom:0px;
border-radius:100%;
position:absolute;
   
}
 
 
.playercon {
width:56px;
height:56px;
  border-radius:100%;
   left:0px;
background:#f3f3f3;
   top:32px;
position:relative;
 
}
 
 
.infobox {
float:left top;
 margin-left:130px;
background-color:transparent;
padding:14px;
color:#e6e3e7;
}
 
.track {
 
font-size:1em;
letter-spacing:2px;
padding:2px;
font-weight:bold;
transition:.6s;
color:#333;
}
.artist {
letter-spacing:2px;
padding:2px;
font-size:.92em;
}
 
.album {
font-size:1em;;
   
}
 
.playcount {
font-size:9px;
text-transform:uppercase;
letter-spacing:3px;
}
 
/*  ask posts */
 
 .speechbubble {
width:360px;
margin:20px;position: relative;
background:#747b7b;
left:70px;
color:#e6e3e7;
margin: 20px 0;
padding:10px;
text-align:left;
border-radius:10px;
box-shadow: 0px 0 1px rgba(0,0,0,0);
}
.speechbubble:after {
position: absolute;
content: "";
border-color: #747b7b transparent transparent transparent;
border-style: solid;    
border-width: 15px 15px 0px;
height:0;
width:0;
position:absolute;
left:-15px;
top:10px;
}
 
/* post info */
 
.info {
z-index:999;
padding:10px 0;
border-top:1px solid #eee;
}
.topinfo {
padding:10px 0px;
position:relative;
 
}
 
.notec {
position:absolute;
 width:calc(100% - 50px);
top:0px;
left:0px;
margin-left:50px;
height:100%;
}
 
.notec a {
position:absolute;
right:0px;
top:25%;
padding:2px 10px;
background:#424444;
}
 
.notec:before {
width:100%;
left:0px;
height:2px;
border-radius:10px;
background:linear-gradient(to left, #80f8ef, #c628be, #f3fc65);
content:'';
top:50%;
bottom:50%;
position:absolute;
}
 
.topinfo .th {
padding:10px;
border-radius:100%;
background:#8a1967;
}
 
/* pagination */
 
#pagination {
margin:auto
z-index:9;
text-align: center;
position: relative;
width: 100%;
}
 
 
#pagination a, .current_page {    
margin: 0 4px;
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
background: #8a1967;
border-radius: 100%;
color: #fff;
line-height: 42px;
 
}
 
.current_page {
background: #80f8ef;
color:#fff;
}
 
 
/* ------------
 
 06. Blogroll
 
 ------------ */
 
#content {
margin:0 auto;
width:100%;
}
 
/** ICONS **/
#content img{
margin-left:10px;
width:50px;
padding:4px;
}
   
   
@media (max-width:1050px){
 #sidebar {
     position:relative!important;
     margin:auto;
     width:500px;
 }
 
 aside {
     position:relative;
     height:auto!important;
 }
 
 
}
 
 
 
 
@media (max-width:700px){
#sidebar {
    width:80%!important;
    margin:90px auto;
    transform:translate(0,0);
}
.container, aside {
    width:100%;
    margin:auto;
    left:0px;
}
   
.container {
    margin:50px auto
}
   .posts {
   width:80%;
   margin:50px auto;
   }
   .posts:before {
   display:none;
   }
   
   ul.tabs {
   top:0px!important;
   margin-top:0px;
   margin:auto;
   text-align:center;
   width:100%;
   right:0px;
   background:white;
   transform:translate(0%, 0);
   padding:0;
   z-index:9999999;
   position:fixed;
   }
   
   ul.tabs li {
   margin-top:10px;
   margin-left:20px;
   
   }
   
   .sidecon:before {
   display:none;
   }
   
 ul.tabs li:after,
   ul.tabs li.current:after {
   display:none;
   }
   
}
 
 
@media (max-width:400px){
#sidebar {
    max-width:350px!important;
    width:90%!important;
    margin:50px auto!important;
}
   .posts {
   width:90%;
   margin:50px auto;
   }
   
   
}
 
#egg {
right:10px; bottom:10px;
position:fixed;
display:block;
width: 14px; height: 18px;
background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
border:1px solid #aaa;
z-index:4;
transform:scale(1.02);
}
 #egg:hover   { animation-name: egg;
animation-duration: 1s;
animation-iteration-count: infinite;}
@keyframes egg{
    0%{}
    10%{transform:rotate(20deg) scale(1.12)}
    80%{transform:rotate(-20deg)}
    100%{}
}
   
[tooltip] {
  position: relative;
  z-index: 9;
  cursor: pointer;
}
 
/* Hide the tooltip content by default */
[tooltip]:before,
[tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}
 
/* Position tooltip above the element */
[tooltip]:before {
  position: absolute;
  bottom: 154%;
  left: 50%;
  margin-bottom: 4px;
  margin-left: -40px;
  padding: 6px;
  width: 80px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #333;
  color: #fff;
  content: attr(tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}
 
/* Triangle hack to make tooltip look like a speech bubble */
[tooltip]:after {
  position: absolute;
  bottom: 154%;
  left: 50%;
  margin-left: -4px;
  width: 0;
  border-top: 6px solid #333;
  border-right: 6px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}
 
/* Show tooltip content on hover */
[tooltip]:hover:before,
[tooltip]:hover:after {
  visibility: visible;
  transition:.6s;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
