@import "https://googledrive.com/host/0BxjwQr0BBXs-aWFrYzJjVnpoVVE"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
/thin top bar/ @import url(http://storage.live.com/items/4A07C1EEED420167%21162);
/Fonts/ @import url("http://fonts.googleapis.com/css?family=Nova+Slim"); @import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC);
/* Got a question or want to learn more? Try this link: http://myanimelist.net/forum/?topicid=419405&show=0#post1 */
/* Theme for Suzune-chan by Al_eXs */
/* BACKGROUND IMAGE This is the main background image for the whole page. Change the image link to the background you want!
If you're not seeing a background, make sure you are copied the entire CSS code or added any new background image codes correctly. Also your image link may be broken, try uploading a new background then! */
body { background-image: url(http://i48.fastpic.ru/big/2012/1116/cf/49e290d0ea5294f7f35befc3655d8fcf.jpg); background-attachment: fixed; background-size: cover; }
/* HEADER COLOR AND FONT These codes control the main headers' fonts and colors. Every header is above each part of your list (they say things like Currently Watching, Completed, Dropped, etc). */
.header_title { background-color: rgba(26, 16, 51, 0.525); color: #FFFFFF; font-family: 'Carrois Gothic SC', sans-serif; font-size:20px; border-radius: 20px 20px 0px 0px; font-weight: 700; text-align: center; text-shadow: 1px 1px 1px #000000; }
/* SUB-HEADERS BACKGROUND COLOR COLOR Below each main header is the sub-header which says Score, Episodes, Tags, etc. */
.table_header { background-color: rgba(26, 16, 51, 0.525); }
/* ANIME/MANGA TITLE FONTS This is the type and color of the anime/manga titles on your list, like Bleach, Vampire Knight, etc. */
.animetitle, .animetitle:visited { color:white; font-family: 'Carrois Gothic SC', sans-serif; font-size:14px; text-shadow: 2px 1px 1px #000000; }
.animetitle + small { color:#c2cae2; font-family: "Carrois Gothic SC"; font-size:12px; }
/* LIST FONTS This is the type and color for more of the numbers, links, and words on the list itself! */
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color:white; font-size:13px; font-family: 'Carrois Gothic SC', sans-serif; text-shadow: 2px 1px 2px #000000; }
/* LIST WIDTH Use this to increase the width of your list! */
width:950px }
/* LIST POSITION Change "left" to "right" to switch the list side, or vice versa. */
left: 300px; position: relative; }
/*OTHER CODES Important codes for the layout's setup. Please don't mess with these unless you know what you're doing. If you want to customize more on the page, use the link at the top of this CSS or ask in my club! */
body { font-weight: light; background-repeat: no-repeat; background-color: #FFFFFF; } a { text-decoration:none; } a:visited { text-decoration:none; } a:hover, a:visited:hover { color:#b1bbda; text-decoration:none; } .category_totals, .td1, .td2,
background-color: rgba(26, 16, 51, 0.550); border-width:0; transition: all .8s ease 0s;/* CSS3 reference / -o-transition: all .8s ease 0s; / for Opera compatibility / -ms-transition: all 08s ease 0s; / for IE compatibility(I think) / -moz-transition: all .8s ease 0s; / for Firefox compatibility / -webkit-transition: all .8s ease 0s; / for Chrome, Safari compatibility */ }
.category_totals a, .td1 a, .td2 a,
transition: all .8s ease 0s;/* CSS3 reference / -o-transition: all .8s ease 0s; / for Opera compatibility / -ms-transition: all 08s ease 0s; / for IE compatibility(I think) / -moz-transition: all .8s ease 0s; / for Firefox compatibility / -webkit-transition: all .8s ease 0s; / for Chrome, Safari compatibility */ }
.category_totals:HOVER, .td1:HOVER, .td2:HOVER,
border-width:0; }
content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info. Theme by Al_eXs, edited by Teffycom."; }
margin-bottom: 30px !important; border-radius: 20px; padding: 10px; } .thickbox { color:cyan; font-family:fantasy; font-size:12px; } .header_title { padding:2px; } .table_header { border-width:0; font-weight:bold; padding:2px; } .category_totals { border-radius: 0px 0px 20px 20px; height: 40px; text-align: center; }
text-align: center; margin:0 auto; border-radius: 20px; padding: 10px 20px; width: 600px; }
/* COVER AREA The surrounding area containing each cover pic which appears when you point to a row (requires #more CSS). Left and top adjust the position it appears on screen. Control the height and width of the pic with height and width. Remove only the border-radius: 25px 25px 25px 25px; lines to take the rounded corners away. Increase height and width to make the pics bigger. Delete border-style: solid; to remove the border. */
.hide { background-color: rgba(200, 5, 200, 0.75); background-position: 50% 20% !important; background-repeat: no-repeat !important; border-color: white; border-radius: 25px 25px 25px 25px; border-style: solid; border-width: 1px; display: block !important; height: 500px; left: 0px; position: fixed; top: 0px; width: 234px; padding: 79px 40px 10px 10px; background-size: 250px !important; visibility: hidden; opacity: 0; }
/* PREVIEW MSG ABOVE COVERS Remove content: "preview"; to remove the PREVIEW text. Change the text in quotations after content to what you want it to say above your cover pic. Top and width controls the position of the text. */ .hide:before { background: transparent; color: white; content: "MY THOUGHTS"; padding-bottom: 5px; position: absolute; text-align: center; width: 255px; top: 5px; border-radius: 25px 25px 0 0; }
/* MINI REVIEW (HOVER TAG) Move the area around with the left and top codes. Adjust the surrounding area of the tags by adjusting the padding. Control the height and width of the section with the height and width codes.
If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial: http://myanimelist.net/forum/?topicid=563993 */ td[class='td']:nth-of-type(6) { visibility: hidden; opacity: 0; position: fixed; top: 430px; left: 25px; font-size: 12px; width: 245px; color: white !important; z-index: 1; background: transparent !important; }
/* TAG TEXT COLOR*/ tr:hover td[class='td']:nth-of-type(6) a { color: white !important; }
/* OTHER SETTINGS */ :hover + .hide , tr:hover td[class='td']:nth-of-type(6){ visibility: visible; opacity: 1; }
/* REMOVE HEADER Deletes the header Tags which isn't necessary. */ .table_header:nth-of-type(6) { display: none; }
/* REMOVE TAG EDIT BUTTON Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags. */ td:nth-of-type(6) small { display: none; }
/* GOOGLE CHROME FIX Adjust this amount 50px at a time (more or less) if your columns are uneven in Chrome, until your columns are even. */ @media screen and (-webkit-min-device-pixel-ratio:0) { td[class='td']:nth-of-type(2) { width: 560px !important;} }
/*************************/ / Purple Highlight on Hover */ /**************************/ tr:hover [class="td"] { background-color: #AC00E6 !important; -moz-transition: .4s ease; -webkit-transition: .4s ease; -o-transition: .4s ease; }
