get paid to paste

Puella clean (manga)

@\import "https://storage.live.com/items/4A07C1EEED420167%21151";
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/more";
/*
HOW TO USE (go to this link)
http://dl.dropboxusercontent.com/u/78340470/howtouse.txt

*/


/*
MAIN BACKGROUND
The space background by default.
*/
body {
background-attachment:fixed;
background-clip:border-box;
background-color: black;
background-image: url(http://i.imgur.com/G5WpY72.jpg);
background-position:0 50%, 0 0;
background-repeat:no-repeat no-repeat;
background-size:cover;
font-family:calibri;
}

/*
SECONDARY BACKGROUND (CHARACTER)
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page. 
*/

#inlineContent {
    background: url("none") no-repeat scroll right bottom transparent;
    background-size: contain !important;
}



/*
SIDE BUTTONS 
The first code controls the type of positioning of the buttons- if you change absolute to fixed, it will fix the buttons to the page. You'll have to change left: -300px; to left: 0px; after if you want them fixed. 

All the following codes control the background image for the buttons in this order: Current, Complete, On-hold, Dropped, Planned, and All Anime. 

If you don't want the All Anime button on your list, remove the X from display: Xnone; if you want the All Anime button back, add the X back or delete display:none;
*/

.status_selected,
.status_not_selected {
position:absolute;
left:-300px;
}

.status_selected:first-of-type, .status_not_selected:first-of-type {
background-image:url(http://i.imgur.com/CdokEMa.png);
background-position:0 0;
top:20px;
}

.status_selected:nth-of-type(2), .status_not_selected:nth-of-type(2) {
background-image:url(http://i.imgur.com/4wWEuxL.png);
background-position:100% 0;
top:140px;
}


.status_selected:nth-of-type(3), .status_not_selected:nth-of-type(3) {
background-image:url(http://i.imgur.com/LzttEaG.png);
background-position:0 0;
top:260px;
}

.status_selected:nth-of-type(4), .status_not_selected:nth-of-type(4) {
background-image:url(http://i.imgur.com/iqoaVc2.png);
background-position:100% 0;
top:380px;
}


.status_selected:nth-of-type(5), .status_not_selected:nth-of-type(5) {
background-image:url(http://i.imgur.com/mOB1pcO.png);
background-position:0 0;
top:500px;
}


.status_selected:last-of-type, .status_not_selected:last-of-type {
background-image:url(http://i.imgur.com/mxyGxdy.png);
background-position:100% 0;
top:620px;
display: Xnone;
}



/*
MAGICA LOGO AND LIST TOP SPACING
Background-image is the Magica logo at page top. You can move it with background position. 
Padding top controls the amount of space between the list top and the top of the page. If you raise the number the list will move farther down the page. 
*/

#list_surround {    
    background-image: url("http://i.imgur.com/Hv5dW9P.png");
    background-position: -50px -40px;
    padding-top: 320px;
}


/*
CUSTOM HEADERS
*/

[class^="header_"] * {
height:200px;
}

.header_cw {
    background-image: url("http://i.imgur.com/r8TRp5n.png");
    background-position: 50% 150px;
}
.header_completed {
    background-image: url("http://i.imgur.com/wF8MQkE.png");
    background-position: 50% 150px;
}
.header_onhold {
    background-image: url("http://i.imgur.com/ZWprtND.png");
    background-position: 50% 150px;
}
.header_dropped {
    background-image: url("http://i.imgur.com/3ve4Yod.png");
    background-position: 50% 150px;
}
.header_ptw {
    background-image: url("http://i.imgur.com/uH0pl1M.png");
    background-position: 50% 150px;
}


/*
COVER PIC POSITION (hover)
This is how far to the left the cover pic will zoom out when you point to the thumbnail for it. If you want it more to the right, 
take away from the amount below. 
*/

.hide:hover {
    margin-left: -182px;
}


/*
LIST TOP COLORS
The colors for the top text (#, anime title, score, etc) and the panel itself.  

Google "RGBA color generator" for easy to copy color and opacity numbers customized for you to put after "background-color:".
*/

.table_header, .table_header a{
color: white;}

.table_header {
    background-color: rgba(255, 0, 125, 0.5);
}


/*
LIST BACKGROUND COLOR, ROW HEIGHT AND HOVER COLOR
Adjust the opacity and color of the list itself with the first two sets of code, as well as the height of the rows. td1 is odd numbered rows, td2 is even. The third set of code is for the row color and opacity on height.  
*/

.td1 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
.td2 {
background-color:rgba(0, 0, 0, 0.5);
height:65px;
}
tr:hover [class^="td"] {
    transition: .1s linear;
    background-color: rgba(208, 32, 144, 0.6);
}


/*
LIST BOTTOM COLORS
The first set controls color for the category totals, and second for the copyright section.
*/

.category_totals {
background-color:rgba(255, 0, 255, 0.4);
}

#copyright {
background-color:rgba(180, 32, 48, 0.6);
}



/*
LIST FONT COLOR AND TYPE
You can control the font type and colors for the list here; for the anime titles and tags see after
*/

.td1, .td2, .category_totals {
color:white;
font-family: ;
}


/*
ANIME TITLE/AIRING 
You can control the font-colors for anime titles here, and the Airing text on currently airing anime.
*/

.animetitle {
color: white;
    font-family: ;
}

.animetitle + small {
color:#CC33FF !important;
}


/*
TAGS (mini-reviews) 
The first code controls the size/color of the font if you put in any tags/mini-reviews. The second can control how much the width of the list the tags take up- you must put a percentage in after "width:" and before !important (for example 85% ). 
*/

span[id*="tagLinks"] a {
    font-size: 11px !important;
    color: #FFFFFF !important;
    font-family: ;}

span[id*="tagLinks"] {
    width:  !important;}


/*
TAGS EDIT BUTTON
The button link "Edit" will show up under your anime title number.
*/

.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
    color: #00FFFF;
    font-size: 14px;
    left: 9px;
    margin-top: 19px;
    text-decoration: none;
    z-index: 1 !important;
}






/*
OTHER CODES
Ask in the original topic for this layout of in my club if you need to learn more about customizing this layout. 
*/

.td1:nth-of-type(6) a, .td2:nth-of-type(6) a {
    background-color: rgba(0, 0, 0, 0) !important;
    position: absolute;
}

.table_header:nth-of-type(6) {
    width: 1px !important;
    font-size: 0 !important;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
    font-size: 0 !important;
    width: 1px !important;
}

span[id*="tagLinks"] {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    color: rgba(0, 0, 0, 0);
    font-size: 13px !important;
    left: 25px !important;
    margin-top: 10px !important;
    position: absolute !important;
}
span[id*="tagLinks"] a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    left: 49px !important;
    position: relative !important;
    text-decoration: none !important;
    top: 6px;
}

.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color:transparent;
display:block;
font-size:0;
height:113px;
width:263px;
}

.status_selected,
.status_not_selected {
-webkit-background-clip:padding-box !important;
background-clip:padding-box !important;
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:contain;
border:1px solid transparent;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
display:block;
padding:0;
width:263px;
}

.status_not_selected {
opacity:0.7;
}
.status_not_selected:hover {
color:transparent;
opacity:1;
}

body {
background-attachment:fixed;
background-clip:border-box;
background-color: black;
font-family:calibri;
}

#list_surround {    
    background-attachment: scroll;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat no-repeat;
    font-size: 100%;
    line-height: 1;
    padding-bottom: 10px;
}

#list_surround {
left: 16% !important;
margin:auto !important;
position:absolute !important;
right:0 !important;
width: 70%;
}

#inlineContent {
    display: inline-block !important;
    height: 100%;
    left: 0 !important;
    margin: auto !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    width: 100%;
    z-index: -1 !important;
}


.header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw {
    background-repeat: no-repeat;
    background-color: transparent;
    height: 50px;
    margin-bottom: 0;
    font-size: 0;
    margin-top: -125px;
}

a {
color:#FFFFFF;
text-decoration:none;
text-shadow:none;
}
a:hover {
color:#fff;
text-decoration:underline;
}
.table_header:first-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:10px;
border-top-right-radius:0;
}
.table_header:nth-of-type(2) {
padding-left:35px;
text-align:left;
}
.table_header:last-of-type {
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-top-left-radius:0;
border-top-right-radius:10px;
}
.table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals {
border:0 none;
padding:4px;
vertical-align:top;
}
.borderRBL {
line-height:normal !important;
}
[cellspacing="0"] {
line-height:17px;
}

.category_totals {
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:0;
color:white;
text-align:center;
}
[class^="header_"] * {
background-repeat:no-repeat no-repeat;
font-size:0;
line-height:24px;
padding-bottom: 30px;
text-align:right;
vertical-align:bottom;
}
.header_title {
border-bottom-left-radius:4px;
border-bottom-right-radius:4px;
border-top-left-radius:4px;
border-top-right-radius:4px;
color:#FFFFFF;
display:inline-block;
font-style:italic;
height:auto;
padding:0 8px 0 0;
text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px;
}
#grand_totals {
background-color:transparent;
border:0 none;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
color:#FFFFFF;
line-height:20px;
min-height:20px;
padding:8px;
text-align:center;
vertical-align:middle;
}
#copyright {
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-top-right-radius:3px;
color:#EEEEEE;
line-height:17px;
margin-top:10px;
padding:8px;
text-align:center;
}


.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
z-index: 0 !important;
}
.hide:hover {
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    border-radius: 20px;
    box-shadow: 0 0 8px 8px rgba(63, 52, 60, 0.55);
    padding-right: 150px;
    padding-top: 220px !important;
    position: absolute;
    z-index: 0 !important;
}
.hide:hover:after {
    background: transparent;
    content: " ";
    height: 75px;
    left: 0;
    position: absolute;
    top: 0;
    width: 260px;
    z-index: 20;
}

.td1:nth-of-type(2), .td2:nth-of-type(2) {
padding-left:35px;
text-align:left;
}

a, .td1, .td2, .category_totals {
-webkit-transition:all 0.25s ease-in-out 0s;
transition:all 0.25s ease-in-out 0s;
}

.animetitle {
    font-weight: bold;}

.animetitle + small {
font-weight:bold;
}

* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
}



#list_surround small a:last-of-type {
    display: none !important;
}

.animetitle + small {
    visibility: visible !important;
}

#list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
#list_surround a[href*="http://myanimelist.net/editlist.php?type="], 
#list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
    visibility: visible !important;
    margin-right: 10px
}

.td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
.td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
.td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
    visibility: visible !important;
}

.td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
.td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
.td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
    text-decoration: underline;
}


/* Media query for devices below 1000px (small screen phones, 800px res notebooks)*/
@media all and (min-device-width:1px) {

#list_surround {
    left: 30% !important;
    width: 57% !important;
}

span[id*="tagLinks"] {
    width:  75%;}

}


/* Media query for devices above 1000px but below 1025px (1024px screen)*/
@media all and (min-device-width:1001px) {

#list_surround {
    left: 25% !important;
    width: 64% !important;
}

span[id*="tagLinks"] {
    width: ;}

}


/* Media query for devices above 1024px (1140px screens)*/
@media all and (min-device-width:1025px) {

#list_surround {
    left: 25% !important;
    width: 65% !important;
}

span[id*="tagLinks"] {
    width: ;}


}

/* Media query for devices above 1140px (1280px res, 13' notebook)*/
@media all and (min-device-width:1141px) {

#list_surround {
    left: 21% !important;
    width: 70% !important;
}

span[id*="tagLinks"] {
    width: ;}


}

/* Media query for devices above 1280px (1366px res, 15' notebook)*/
@media all and (min-device-width:1281px) {

#list_surround {
left: 16% !important;
width: 70% !important;
}

span[id*="tagLinks"] {
    width: 58%;}
}


/* Media query for devices above 1440px (1680px res, 20-22' desk)*/
@media all and (min-device-width:1441px) {

#list_surround {
left: 18% !important;
width: 65% !important;
}

span[id*="tagLinks"] {
    width: 55%;}

}


/* Media query for devices above 1680px (1920px res, 23' desktop)*/
@media all and (min-device-width:1681px) {

#list_surround {
left: 0% !important;
width: 51% !important;
}

span[id*="tagLinks"] {
    width: ;}


}

/* Media query for devices above 1920px (23'+ desktop)*/
@media all and (min-device-width:1921px) {

#list_surround {
left: 0% !important;
width: 47% !important;
}

span[id*="tagLinks"] {
    width: ;}

}

Pasted: Mar 4, 2015, 1:11:40 pm
Views: 96