1. @import "http://dl.dropbox.com/u/78340470/icon%20style%20menu%20bar/iconstylecssfixed.css";

  2. @import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC);

  3. @import url(http://fonts.googleapis.com/css?family=Fauna+One);

  4. 

  5. /*

  6. got a question or want to learn more? try this link:

  7. http://myanimelist.net/forum/?topicid=419405&show=0#post1

  8. */

  9. 

  10. /*

  11. background image

  12. this is the main background image for the whole page.

  13. change the image link to the background you want!

  14. 

  15. if you're not seeing a background, make sure you are copied the

  16. entire css code or added any new background image codes correctly.

  17. also your image link may be broken, try uploading a new background then!

  18. */

  19. 

  20. body {

  21. background-image:

  22. url(insert url here);

  23. background-attachment: fixed;

  24. }

  25. 

  26. /*

  27. background refitting

  28. this refits the background to whatever screen size looks at this list.

  29. */

  30. body{

  31. background-size: cover;}

  32. 

  33. /*

  34. foreground

  35. this originally puts an image in front of the very bottom of the list at all times. 

  36. to change the background, change the link in parenthesis after "background: url"

  37. you can also change the rest of the background settings to suit the image you're trying to put in there. don't touch the other options below background unless you really know what you're doing. lower z-index to -1 or less to put it behind the list. 

  38. */

  39. #inlineContent {

  40. 	position: fixed !important;

  41. 	display: inline !important;

  42.         margin: auto;

  43. 	content: ' ';

  44. 	width: 1600px;

  45. 	height: 340px;

  46. 	top: 0;

  47. 	right: 0px;

  48. 	background: url(http://i42.tinypic.com/2i7w8dz.jpg) no-repeat;

  49. 	z-index: 2;

  50. }

  51. 

  52. /*

  53. header color and font

  54. 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).

  55. */

  56. 

  57. .header_title {

  58. background-color: white;

  59. font-family:Fauna One;

  60. color: #FF0000;

  61. font-size: 30px;

  62. font-variant: small-caps;

  63. text-align: center;

  64. }

  65. 

  66. /*

  67. sub-headers background color color

  68. below each main header is the sub-header which says score, episodes, tags, etc.

  69. */

  70. 

  71. .table_header {

  72. background-color:white;

  73. font-family: Fauna One;

  74. }

  75. 

  76. /*

  77. anime/manga title fonts

  78. this is the type and color of the anime/manga titles on your list, like bleach, vampire knight, etc.

  79. */

  80. 

  81. .animetitle, .animetitle:visited {

  82. color: darkgrey;

  83. font-family: Alegreya Sans SC;

  84. font-size: 14px;

  85. }

  86. 

  87. 

  88. /*

  89. list fonts

  90. this is the type and color for more of the numbers, links, and words on the list itself!

  91. */

  92. 

  93. .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {

  94. color: #785A5A;

  95. font-family: copperplate gothic light;

  96. font-size: 12px;

  97. }

  98. 

  99. /*

  100. list width

  101. use this to increase the width of your list!

  102. */

  103. 

  104. #list_surround {

  105. width:950px;

  106. }

  107. 

  108. /*

  109. tags row width

  110. */

  111. 

  112. td:nth-of-type(6){

  113. width: 175px;

  114. }

  115. 

  116. /*

  117. tags header width

  118. */

  119. .table_header:nth-of-type(6) {

  120. width: 175px;

  121. }

  122. 

  123. /*

  124. animetitle's box width

  125. */

  126. td:nth-of-type(2) {

  127. width: 350px;

  128. }

  129. 

  130. /*

  131. list position

  132. this centers the list in between the two characters. add to left or right's px amout to move the 

  133. list a little that way from center if you want. 

  134. */

  135. #list_surround {

  136. position: absolute;

  137. margin: auto;

  138. right: 0px;

  139. left: 0px;}

  140. 

  141. #list_surround {

  142. position: absolute !important;

  143. top: 320px;}

  144. 

  145. /*

  146. Custom cursors.

  147. For more information: http://myanimelist.net/forum/?topicid=202008

  148. */

  149. /* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-4/cur330.cur), progress !important;} /* End http://www.cursors-4u.com */

  150. 

  151. 

  152. /*other codes

  153. 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 the css!

  154. */

  155. body {

  156. font-weight: light;

  157. background-position: center top;

  158. background-repeat: no-repeat;

  159. background-color: #ffffff;

  160. }

  161. 

  162. #list_surround {

  163. background-image:url();

  164. }

  165. 

  166. a {

  167. text-decoration:none;

  168. }

  169. 

  170. a:visited {

  171. text-decoration:none;

  172. }

  173. 

  174. a:hover, a:visited:hover {

  175. color: #FF0000;

  176. text-decoration:underline;

  177. }

  178. 

  179. .category_totals,

  180. #grand_totals,

  181. #copyright {

  182. background-image:url(insert url here);

  183. border-width:0;

  184. padding:2px;

  185. text-align: center;

  186. }

  187. 

  188. td1,

  189. .td2,

  190. background-image:url(insert url here);

  191. border-width:0;

  192. }

  193. .category_totals:hover,

  194. .td1:hover,

  195. .td2:hover,

  196. #grand_totals:hover,

  197. #copyright:hover {background-color:white;

  198. border-width:0;

  199. }

  200. 

  201. #copyright:after {

  202. content: " custom css by shishio-kun. google 'shishio's custom lists' for more designs and info. edited by xxshiawase.";

  203. }

  204. 

  205. .status_selected {

  206. background-color:white;

  207. padding:0px;

  208. color:#00EFFF;

  209. text-decoration: none;

  210. }

  211. .status_not_selected {

  212. background-color:white;

  213. padding: 0px; 

  214. font-size:20px;

  215. color: #FF0000;

  216. }

  217. .status_selected a{

  218. color:#00EFFF;

  219. }

  220. .status_not_selected a{

  221. color: darkgrey;

  222. }

  223. 

  224. }

  225. .header_title {

  226. height:40px;

  227. }

  228. 

  229. .table_header {

  230. border-width:0;

  231. font-weight:bold;

  232. padding:2px;

  233. }

  234. 

  235. .category_totals {

  236. height:28px;

  237. }

  238. 

  239. /*

  240. custom category links area

  241. these codes control the spaces around the 6 links to your list categories. when you customize these parts you will customize the link with it for the most part. see this page for further info on altering the background or moving the links:

  242. http://myanimelist.net/forum/?topicid=416069

  243. */

  244. 

  245. /*

  246. currently watching/reading link area

  247. */

  248. .status_selected, 

  249. .status_not_selected {

  250. background: url(none) repeat scroll 0 0 transparant !important;

  251. padding-right: ;

  252. padding-top: ;

  253. padding-bottom: ;

  254. position: fixed;

  255. margin: auto;

  256. margin-top: ;

  257. left: 0px;

  258. right: 750px;

  259. top: 325px;

  260. bottom: ;

  261. z-index: 4;

  262. }

  263. 

  264. /*

  265. completed link area

  266. */

  267. .status_selected + .status_not_selected, 

  268. .status_not_selected + .status_selected, 

  269. .status_not_selected + .status_not_selected{

  270. background: url(none) repeat scroll 0 0 transparant !important;

  271. padding-right: ;

  272. padding-top: ;

  273. padding-bottom: ;

  274. position: fixed;

  275. margin: auto;

  276. margin-top: ;

  277. left: 0px;

  278. right: 375px;

  279. top: 325px;

  280. bottom: ;

  281. z-index: 3;

  282. }

  283. 

  284. /*

  285. on hold link area

  286. */

  287. .status_selected + .status_not_selected + .status_not_selected, 

  288. .status_not_selected + .status_selected + .status_not_selected, 

  289. .status_not_selected + .status_not_selected + .status_selected, 

  290. .status_not_selected + .status_not_selected + .status_not_selected{

  291. background: url(none) repeat scroll 0 0 transparant !important;

  292. padding-right: ;

  293. padding-top: ;

  294. padding-bottom: ;

  295. position: fixed;

  296. margin: auto;

  297. margin-top: ;

  298. left: 0px;

  299. right: 50px;

  300. top: 325px;

  301. bottom: ;

  302. z-index: 3;

  303. }

  304. 

  305. /*

  306. dropped link area

  307. */

  308. .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, 

  309. .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, 

  310. .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, 

  311. .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, 

  312. .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{

  313. background: url(none) repeat scroll 0 0 transparant !important;

  314. padding-right: ;

  315. padding-top: ;

  316. padding-bottom: ;

  317. position: fixed;

  318. margin: auto;

  319. margin-top: ;

  320. left: 250px;

  321. right: 0px;

  322. top: 325px;

  323. bottom: ;

  324. z-index: 3;

  325. }

  326. 

  327. /*

  328. planned link area

  329. */

  330. .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, 

  331. .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, 

  332. .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, 

  333. .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, 

  334. .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, 

  335. .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{

  336. background: url(none) repeat scroll 0 0 transparant !important;

  337. padding-right: ;

  338. padding-top: ;

  339. padding-bottom: ;

  340. position: fixed;

  341. margin: auto;

  342. margin-top: ;

  343. left: 525px;

  344. right: 0px;

  345. top: 325px;

  346. bottom: ;

  347. z-index: 3;

  348. }

  349. 

  350. /*

  351. all anime/manga link area

  352. */

  353. .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, 

  354. .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, 

  355. .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, 

  356. .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, 

  357. .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, 

  358. .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, 

  359. .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected{

  360. background: url(none) repeat scroll 0 0 transparant !important;

  361. padding-right: ;

  362. padding-top: ;

  363. padding-bottom: ;

  364. position: fixed;

  365. margin: auto;

  366. margin-top: ;

  367. left: 800px;

  368. right: 0px;

  369. top: 325px;

  370. bottom: ;

  371. z-index: 3;

  372. }

  373. 

  374. /*

  375. borders

  376. just delete all similar codes to these ones, to delete all the borders.

  377. */

  378. .table_header {

  379. border-top-width: 0px;

  380. border-right-width: 0px;

  381. border-bottom-width: 1px;

  382. border-left-width: 0px;

  383. border-top-style: none;

  384. border-right-style: none;

  385. border-bottom-style: dashed;

  386. border-left-style: none;

  387. border-top-color: #dfdfdf;

  388. border-right-color: #badae9;

  389. border-bottom-color: #dfdfdf;

  390. border-left-color: #badae9;

  391. }

  392. 

  393. .td1 {

  394. color: #675d5d;

  395. border-top-width: 0px;

  396. border-right-width: 0px;

  397. border-bottom-width: 1px;

  398. border-left-width: 0px;

  399. border-top-style: dashed;

  400. border-right-style: none;

  401. border-bottom-style: dashed;

  402. border-left-style: none;

  403. border-top-color: #ffffff;

  404. border-right-color: #badae9;

  405. border-bottom-color: #dfdfdf;

  406. border-left-color: #badae9;

  407. padding: 7px;

  408. background-color: #ffffff;

  409. }

  410. 

  411. .td2 {

  412. color: #675d5d;

  413. border-top-width: 0px;

  414. border-right-width: 0px;

  415. border-bottom-width: 1px;

  416. border-left-width: 0px;

  417. border-top-style: dashed;

  418. border-right-style: none;

  419. border-bottom-style: dashed;

  420. border-left-style: none;

  421. border-top-color: #ffffff;

  422. border-right-color: #badae9;

  423. border-bottom-color: #dfdfdf;

  424. border-left-color: #badae9;

  425. padding: 7px;

  426. background-color: #ffffff;

  427. }

  428. 

  429. .header_cw

  430. {

  431. border-top-width: 1px;

  432. border-right-width: 0px;

  433. border-bottom-width: 1px;

  434. border-left-width: 0px;

  435. border-top-style: solid;

  436. border-right-style: none;

  437. border-bottom-style: solid;

  438. border-left-style: none;

  439. border-top-color: #dfdfdf;

  440. border-right-color: #badae9;

  441. border-bottom-color: #dfdfdf;

  442. border-left-color: #badae9;

  443. padding:6px;

  444. }

  445. 

  446. .header_completed

  447. {

  448. border-top-width: 1px;

  449. border-right-width: 0px;

  450. border-bottom-width: 1px;

  451. border-left-width: 0px;

  452. border-top-style: solid;

  453. border-right-style: none;

  454. border-bottom-style: solid;

  455. border-left-style: none;

  456. border-top-color: #dfdfdf;

  457. border-right-color: #badae9;

  458. border-bottom-color: #dfdfdf;

  459. border-left-color: #badae9;

  460. padding:6px;

  461. }

  462. 

  463. .header_onhold

  464. {

  465. color:#730601 !important;

  466. border-top-width: 1px;

  467. border-right-width: 0px;

  468. border-bottom-width: 1px;

  469. border-left-width: 0px;

  470. border-top-style: solid;

  471. border-right-style: none;

  472. border-bottom-style: solid;

  473. border-left-style: none;

  474. border-top-color: #dfdfdf;

  475. border-right-color: #badae9;

  476. border-bottom-color: #dfdfdf;

  477. border-left-color: #badae9;

  478. padding:6px;

  479. }

  480. 

  481. .header_dropped

  482. {

  483. color:#730601 !important;

  484. border-top-width: 1px;

  485. border-right-width: 0px;

  486. border-bottom-width: 1px;

  487. border-left-width: 0px;

  488. border-top-style: solid;

  489. border-right-style: none;

  490. border-bottom-style: solid;

  491. border-left-style: none;

  492. border-top-color: #dfdfdf;

  493. border-right-color: #badae9;

  494. border-bottom-color: #dfdfdf;

  495. border-left-color: #badae9;

  496. padding:6px;

  497. }

  498. 

  499. .header_ptw

  500. {

  501. border-top-width: 1px;

  502. border-right-width: 0px;

  503. border-bottom-width: 1px;

  504. border-left-width: 0px;

  505. border-top-style: solid;

  506. border-right-style: none;

  507. border-bottom-style: solid;

  508. border-left-style: none;

  509. border-top-color: #dfdfdf;

  510. border-right-color: #badae9;

  511. border-bottom-color: #dfdfdf;

  512. border-left-color: #badae9;

  513. padding:6px;

  514. }

  515. 

  516. .header_title 

  517. {

  518. border-top-width: 1px;

  519. border-right-width: 0px;

  520. border-bottom-width: 1px;

  521. border-left-width: 0px;

  522. border-top-style: solid;

  523. border-right-style: none;

  524. border-bottom-style: solid;

  525. border-left-style: none;

  526. border-top-color: #dfdfdf;

  527. border-right-color: #badae9;

  528. border-bottom-color: #dfdfdf;

  529. border-left-color: #badae9;

  530. }

  531. 

  532. #copyright, #grand_totals {

  533. 

  534. border-top-width: 1px;

  535. border-right-width: 0px;

  536. border-bottom-width: 1px;

  537. border-left-width: 0px;

  538. border-top-style: solid;

  539. border-right-style: none;

  540. border-bottom-style: solid;

  541. border-left-style: none;

  542. border-top-color: #dfdfdf;

  543. border-right-color: #ffffff;

  544. border-bottom-color: #dfdfdf;

  545. border-left-color: #ffffff;

  546. padding-top: 6px;

  547. text-align: center;

  548. 

  549. margin: 0 auto;

  550. }

  551. 

  552. /*

  553. This causes the blood splatters. I am aware that not everyone has Paradise kiss on her/his list, but it is not that difficult to change the link to an anime to your liking or you can just leave it out.

  554. For more information: http://myanimelist.net/forum/?topicid=410755

  555. */

  556. a[href="http://myanimelist.net/anime/322/Paradise_Kiss"]{

  557. background-image: url(http://i44.tinypic.com/ifa8op.png);

  558. background-repeat: no-repeat;

  559. background-attachment: scroll; 

  560. background-position: right top;

  561. background-color: transparent;

  562. padding-bottom: 200px;

  563. padding-right: 225px !important;

  564. color: !important;

  565. }