/**
 
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. Posts        - container, posts, post styles
05. Misc         - header, blacklist box, meters
06. Responsive   - Media queries
 
**/

 
/* ------------
 
 01. Controls
 
 ------------ */
 
::-webkit-scrollbar {
  width: 10px;
  height:10px;
 
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #b4c2ee;
 border:1px solid #ddd;
  border-radius: 2px;
}
::-webkit-scrollbar-track {
  background:#ffffff;
  border: 4px solid white;
   
   
}

::selection {color: #000; background: #eee;}
::-moz-selection {
  background: #eee; /* Gecko Browsers */color:#000;
}	
		
		

@font-face { font-family: "OpenDyslexic"; src: url('https://dl.dropboxusercontent.com/s/qfpakpjedhsrdb9/OpenDyslexicAlta-Regular.ttf'); }


/* ------------
 
 02. General
 
 ------------ */
  
body{
margin:0;
background:#ffaf9c url(https://assets.tumblr.com/images/x.gif?v=1)
 ;
background-attachment:fixed;
word-wrap:break-word;
font-size:1.2em;
line-height:150%;
font-family:Helvetica;
overflow-x:hidden;

color:#222222;
    
}

sup {
font-size:1.2em;
}    

sub {
font-size:1.2em;
}

a{
color:#222;
border-bottom:1px solid #6e5eff;
text-decoration:none;
padding:2px;
transition:.6s;
    
}


b {color:#000;font-weight:normal;font-weight:bold;;  }
 
i {color:#888; font-style:normal;font-style:italic;; }


small {
font-size:1em;
font-style:normal;
} 
big {font-size:auto; }

blockquote{border-left:2px solid #aaa; padding:4px;  padding-left:10px; background:#f8f8f8; margin:8px;}

blockquote img{max-width:100%;}

h2{ padding:20px; margin-top:2px;  text-align:center; padding-bottom:30px; position:relative;}    
 
/* ------------
 
 03. Sidebar
 
 ------------ */ 
 

 aside{
 width:25%;
 max-width:420px;
 min-width:250px;
 padding:30px;
 background:#ddf2e8;
 color:#222222;
 border-right:1px solid #ddd;
 position:fixed;
 overflow:hidden;
 margin:0px auto auto 0px;
 top:0px;
 transition:.6s;
 height:calc(100vh - 20px);

 
 
 } 
 
aside:hover {
 overflow-y:auto;
 transition:.6s;
 
 }

/* avatar */
 
#sidebarim {
position:relative;
   z-index:-2;
}
#sidebarim img{
width:96px; height:96px;
margin-left:calc(  / 2);
transition:.6s;
 }   
 
.avatar-square img{  
border-radius:4px; 
background:#ddf2e8; 
width:96px;
height:96px;

} 

.avatar-circle img{ 
background:#F6F6F6; 
border:4px solid #F6F6F6; 
border-radius: 100%; 

}

.nav li:last-of-type {
flex: 1;
display:inline-block;
/* to keep IE happy */
}
.nav {
   display:flex;
   flex-wrap:wrap;
   align-items:center;
}
.nav .fa, .nav .th {
font-size:1em;
color:#2b2b2b;
position:relative;
margin:0 4px 0 0 ;
padding:6px;
}

.otherlinks {
  transform:scale(.94);
  line-height:200%;
}

.otherlinks a {
margin:4px;
display:inline-block;
border:none;
}



.otherlinks a:hover {
color:#6e5eff;
}

aside .otherlinks a:hover:before {
color:#6e5eff;
transform:translate(0,0);
}

.nav li {
	box-shadow: 0 0 0 4px rgba(180,194,238,1);
	background: rgba(180,194,238,1);
	width:calc(50% - 44px);
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}


.nav li:hover {
	box-shadow: 0 0 0 8px rgba(180,194,238, 0.3);
}

.nav li {
border-bottom:0px solid #F6F6F6;
list-style:none;
padding:2px 14px 2px 10px;
transition: all .4s ease-in-out;
   margin:10px 10px;
   border-radius:1%;
}

.nav li a {
color:#2b2b2b;
border:none;
display:flex;
align-items:center;
align-content:center;
}


.description {
padding:4px 10px;
}


#search {
width:90%;
bottom:40px;
padding:2px;
left:-10px;
height:30px;
}
               
.search-scope {
font-size: 18px;
text-align: center;
}
 
#search-scope input, #search-scope label {
cursor: pointer;

}
                   
#search form {
position:relative;
width:100%;
padding:6px;
transition:.4s;
}
                                                   
#search form .query {
position:relative;
background: transparent;
outline: none;
border:none;
background:#ffaf9c;
border:1px solid #ddd;
width: 80%;
font-size:18px;
border-radius:30px;
padding:10px 12px;
}
                                                   

::placeholder {
color:#000;
}


/* ------------
 
 04. Posts
 
 ------------ */ 


#container {
width:calc(70%); 
margin:10px auto 10px 25%;

}

.posts{
margin:100px auto 100px auto; 
width:60%;
max-width:750px;
border-radius:8px;
position:relative;
border:1px solid #ddd;
background-color:#F6F6F6; 
}

.posts img {
max-width:100%;
display:block;
}
    
.topinfo img {
display:inline-block!important;
}
   
.caption, .info, .topinfo {
padding:30px;
   }
   
/* link posts */   
.linkp {
padding:20px 10px;
border-bottom:1px solid #eee;
text-align:center;
 }
   
.linkp a {
box-shadow: 0 0 0 4px rgba(180,194,238,1);
background: rgba(180,194,238,1); 
	border:none;
	display:inline-block;
	border-radius:2%;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.linkp a:before {
content:'\ea96';
padding-right:10px;
font-family:honeybee;
}

.linkp a:hover {
	box-shadow: 0 0 0 8px rgba(180,194,238, 0.3);
}

   
 .source {
   padding:10px;
   text-align:center;
   }
   
   .user, .inactive {
   margin-left:10px;
   border:none;
   position:relative;
   }
   
   .user a {
   border:none;
   }

.inactive:after{
content:'deactivated';
left:114%;
position:absolute;
font-style:italic;
opacity:0;
transition:.6s;
} 
.inactive:hover:after {
opacity:1;
}
 
.info {
border-top:1px solid #ddd;

} 



.tags {
   position:relative;
   padding:10px;
margin-top:8px;
} 




.tags a {
border:none;
}


.spoons {
border:none;


}

.hearts a{
border:none;

display:none;

}

.hearts {

display:none;

}

  .speechbubble
{
position: relative;
width: 300px;
height: auto;
margin-left:70px;
padding: 8px;
text-align:left;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #ddd solid 1px;
}
 
.speechbubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 11px 15px 11px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 17px;
}
 
.speechbubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 11px 15px 11px 0;
border-color: transparent #7F7F7F;
display: block;
width: 0;
z-index: 0;
left: -16px;
top: 17px;
}  

.topinfo {
border-bottom:1px solid #ddd;
text-align:right;
}

.topinfo a{
margin-left:4px;
 border:none;
}

.topinfo img {
width:24px;
height:24px;
border-radius:4px;
}

#egg { right:14px; 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%;
font-family: "bitxmap";  
border:1px solid #444;  z-index:4;
           
        }
 #egg:hover   { animation-name: egg;
animation-duration: 1s;
animation-iteration-count: infinite;}
@keyframes egg{
    0%{}
    10%{transform:rotate(20deg)}
    80%{transform:rotate(-20deg)}
    100%{}
}

/* pagination */    

.jump_page {
padding: 4px 8px;
background:#F6F6F6;
text-decoration:none;
}

.jump_page a {
border:none;
}
 
.current_page {
padding: 4px 8px;
background-color:#b4c2ee;
text-decoration:none;
}

/* blacklisting */

 
.food{color:;
    overflow:hidden;
   height:60px;
    }
.food img {display:none;}    
.tet{display:none; height:60px; padding:10px;}
 
.food .tet{display:block; z-index:999999; color:;}
.nsfw{color:;
    overflow:hidden;
   height:60px;
    }
.nsfw img {display:none;}    
.tet2{display:none; height:60px; padding:10px;}
 
.nsfw .tet2{display:block; z-index:999999; color:;
}

.multiple-words{color:;
    overflow:hidden;
   height:60px;
    }
.multiple-words img {display:none;}    
.tet3{display:none; height:60px; padding:10px;}
 
.multiple-words .tet3{display:block; z-index:999999; color:;
}

   






           
  /* notes */ 
  
 ol.notes {
margin:auto;
position:relative;
width:40%;
animation-name: Up 4s;
list-style:none;
padding:none;
animation-iteration-count:1;
animation-fill-mode:forwards;

}

ol.notes li {
border:1px solid #ddd;
list-style:none;
padding:10px;
padding-left:none;
width:100%;
transform:translate(-30px, 0px);
margin:10px 0px;
 background-color:#F6F6F6;

}

ol.notes img {
margin:0px 10px 0px 0px;
border-radius:4px;
}


ol.notes .like:before {
   background:#D95E40 url(https://static.tumblr.com/svdghan/hNCo953tc/like_bt.png);
   content:'';
   width:16px;
   height:16px;
   float:right;
   background-repeat:no-repeat;
   padding:1px;
   background-size:17px 18px;
   border-radius:100%;


}

ol.notes .reblog:before {
content:'';
 background-repeat:no-repeat;
   padding:1px;
float:right;
background:#56bc8a url(https://static.tumblr.com/svdghan/N3Ho953ts/reblog_white.png);
  width:16px;
  height:16px;
border-radius:100%;
background-size:17px 18px;
}

 
/*  audio posts */
 
.audiopost {
width:100%;
height:120px;
background:linear-gradient(to right, , , );
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:#222222;
}
 
.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;
}
 


 .chat {
padding:5px;
line-height:150%;
border-radius:2px; }
   
.chat:nth-of-type(odd) {
background:#222222;
color:#F6F6F6;
-webkit-transition:.5s;
transition:.5s; }
   
.chat:nth-of-type(even) {
background:#F6F6F6;
color:#222222;
-webkit-transition:.5s;
transition:.5s; }


/* ------------
 
 05. Misc
 
 ------------ */
 
 /* header */
 
 #head {
 width:calc(100% - 6vh);
 position:fixed;
 transform:skew(2deg,2deg);

   	
z-index:-1;
left:10vh;
background-size:cover;
height:50vh;
top:-80px;
 }    
   
 
 /* blacklist box */
.box{position:fixed; top:20px; right:10px; width:130px;border:6px solid transparent;}
 
.title{width:120px;padding:8px; background:#fff;
height:auto;
color:#222;
position:relative; margin-top:10px;
text-align:center; letter-spacing:2px; transition:.6s;
   
}
.thing {margin-top:6px;display:none; width:120px; position:relative;transition:.6s; background:#fff; font-size:1em;
padding:8px;
}
 
.thing li {list-style:none; margin-top:4px;}
.thing li:before{content:'\e04f';
font-family:honeybee; 
font-size:.9em;
color:#B40404}

/* hp bar */
  

/* batter meter */
   #battery i{
color:#000;
font-size:18px;
}   

/* tool tips */
 #s-m-t-tooltip{
max-width:300px;
margin-top:-50px;
margin-left:-20px;
border-radius:2%;
font-family:helvetica;
padding:5px 5px;
background:#000; /*if you're changing the color in the code, make sure this is the same as the s-m-t:after */
color:#fff;
z-index:99999999;
font-size:.9em;
}
 
 
/* don't touch this, this is the what makes it look like a speech bubble */
#s-m-t-tooltip:after{
   
content: '';
position: absolute;
border-style: solid;
border-width: 8px 10px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -8px;
left: 10%;}     
 

                  
 /* ------------
 
 06. Responsive
 
 ------------ */
 
   @media screen and (max-width: 800px) {
   #container {
       width:100%;
       margin:auto auto auto auto;
       left:0;
   }
   
   .posts, ol.notes {
       width:80%;
       margin:50px auto!important;
   }
   aside {
       position:relative!important;
       width:80%;
       padding:10px;
       border:1px solid #ddd;
       margin:50px auto;
       max-width:600px;
       height:auto;
       margin:auto;
   }
   .topinfo {
       display:none;
   }
     .info {
        padding:10px;
    }
   
   #sidebarim {
       display:none;
   }
   
   #search {
       display:none;
   }
   
   .otherlinks {
       display:none;
   }
   
   .nav {
       display:block;
       
       text-align:center;
   }
   
   .nav li {
       display:inline-block!important;
       width:auto!important;
   }
   }
