Advertisement
fredysugiman

ty-harukii GOP 3736656302062017 rev-1

Jun 2nd, 2017
112
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.61 KB | None | 0 0
  1. /*-- Background listing --*/
  2. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(1) {
  3. background:url(http://i.imgur.com/Kfcjj24.jpg) center/ cover;}
  4.  
  5. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(2) {
  6. background:url(http://i.imgur.com/eOEGu9q.jpg) center/ cover;}
  7.  
  8.  
  9. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(3) {
  10. background:url(http://i.imgur.com/9euPdfO.jpg) center/ cover;}
  11.  
  12. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(4) {
  13. background:url(http://i.imgur.com/XthNMny.jpg) center/ cover;}
  14.  
  15. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(5) {
  16. background:#FFF url(http://i.imgur.com/4QtlxaO.jpg);
  17. background-size:cover;
  18. background-position:center;}
  19.  
  20. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(6) {
  21. background:url(http://i.imgur.com/anlgG7I.jpg);
  22. background-size:cover;
  23. background-position:center;
  24. }
  25.  
  26. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(7) {
  27. background:url(http://i.imgur.com/XXa5jp1.jpg);
  28. background-size:cover;
  29. background-position:top right;}
  30.  
  31. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(8) {
  32. background:url(http://i.imgur.com/nvusoR3.jpg);
  33. background-size:cover;
  34. background-position:center;}
  35.  
  36. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(9) {
  37. background:url(http://i.imgur.com/anRqYzN.jpg) center/ cover;}
  38.  
  39. /*-- Front Texts --*/
  40. #column_1 .custom_panel:nth-of-type(2) .spoiler-title:before {
  41. content:'Welcome';
  42. }
  43.  
  44. #column_1 .custom_panel:nth-of-type(2) .spoiler-title:after {
  45. content:'Click here to OPEN!';
  46. }
  47.  
  48. /*-- Front Picture --*/
  49.  
  50. #column_1 .custom_panel:nth-of-type(2) .spoiler ol b {
  51. background:url(http://orig03.deviantart.net/395f/f/2017/103/3/2/haruki05_by_zukimime-db5q376.gif);
  52. background-size:100% 100%;
  53. height:164px;
  54. width:172px;
  55. }
  56.  
  57. /*----LINK styling----*/
  58.  
  59. .panel a, .decoration a {
  60. color:white !Important;
  61. text-shadow:0px 0px 3px #000000;
  62. }
  63.  
  64. .panel a:hover, .decoration a:hover {
  65. color:#DDF !important;
  66. text-decoration:none !Important;
  67. }
  68.  
  69.  
  70.  
  71. /*== BELOW IS IMPORTANT CODES, CHANGE WITH CAREFUL AND ALWAYS BACKUP FIRST==*
  72. GOP Ty-harukii/37366563
  73. rev: 01062017
  74. *==================*/
  75. /*--diamond base--*/
  76. #column_1 .custom_panel:nth-of-type(2) .spoiler-wrapper {pointer-events: none;}
  77. #column_1 .custom_panel:nth-of-type(2) .spoiler-wrapper button {pointer-events:auto;}
  78. #column_1 .custom_panel:nth-of-type(2) .spoiler-title {position:absolute;
  79. height:420px;
  80. width:340px;
  81. opacity:1;
  82. z-index:1;
  83. top:-250px;
  84. left:-170px;
  85. background:none;
  86. }
  87.  
  88. #column_1 .custom_panel:nth-of-type(2) .spoiler-title:before {
  89. color:transparent;
  90. width:0px;
  91. font-size:22px;
  92. font-weight:bold;
  93. letter-spacing:3px;
  94. margin-top:-15px;
  95. border-bottom:2px solid transparent;
  96. }
  97.  
  98. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler-title:before {
  99. width:350px;
  100. border-bottom:2px solid #fff;
  101. color:#fff;
  102. }
  103.  
  104. #column_1 .custom_panel:nth-of-type(2) .spoiler-title:after {
  105. color:transparent;
  106. width:0px;
  107. font-size:15px;
  108. letter-spacing:1px;
  109. margin-top:15px;
  110. height:0px;
  111. }
  112.  
  113. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler-title:after {
  114. width:300px;
  115. height:25px;
  116. color:#eee;
  117. }
  118.  
  119. #column_1 .custom_panel:nth-of-type(2) .spoiler-title:after, #column_1 .custom_panel:nth-of-type(2) .spoiler-title:before {
  120. display:block;
  121. position:absolute;
  122. top:50%;
  123. font-family:orbitron, arial;
  124. left:50%;
  125. transform:translate(-50%,-50%);
  126. text-align:center;
  127. white-space:nowrap;
  128. overflow:hidden;
  129. text-shadow:0 0 3px #000;
  130. }
  131.  
  132. #column_1 .custom_panel:nth-of-type(2) .spoiler-title * {height:100%;
  133. width:100%;
  134. position:absolute;
  135. top:0px;
  136. left:0px;
  137. opacity:0;
  138. }
  139.  
  140.  
  141. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden {
  142. transform:scale(0.75);
  143. }
  144.  
  145. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover {transform:scale(1);}
  146.  
  147. #column_1 .custom_panel:nth-of-type(2) .spoiler {
  148. display:block !Important;
  149. height:240px;
  150. width:240px;
  151. position:absolute;
  152. top:-120px;
  153. left:-120px;
  154. perspective:1000px;
  155. transform-style:preserve-3d;
  156. transform:rotateX(-12deg);
  157. font-size:0px;
  158. }
  159. #column_1 .custom_panel:nth-of-type(2) .spoiler * {display:block;}
  160.  
  161. #column_1 .custom_panel:nth-of-type(2) .spoiler ol {
  162. position:absolute;
  163. width:100%;
  164. height:100%;
  165. transform-style:preserve-3d;
  166. _transform:translateZ(-30px) rotateY(30deg) rotateX(0deg);
  167. animation:cfdiamond 10s infinite;
  168. _filter:drop-shadow(0 0 3px rgba(0,0,0,0.4));
  169. }
  170.  
  171. @keyframes cfdiamond {
  172. 0% {transform:translateZ(-30px) rotateY(-30deg);}
  173. 50% {transform:translateZ(-30px) rotateY(30deg);}
  174. 100% {transform:translateZ(-30px) rotateY(-30deg);}
  175. }
  176. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li {
  177. transform-style:preserve-3d;
  178. }
  179.  
  180. #column_1 .custom_panel:nth-of-type(2) .spoiler ol b {
  181. display:block;
  182. position:absolute;
  183. top:10px;
  184. left:50%;
  185. transform:translateX(-50%) rotateY(0deg) translateZ(-40px) scale(1.1);
  186. filter:drop-shadow(0 0 3px #aaf);
  187. }
  188.  
  189. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-last-of-type(n+5):before , #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-last-of-type(n+5):after {
  190. content:'';
  191. position:absolute;
  192. background:rgba(0,0,0,0);
  193. border:solid;
  194. border-width:0px 120px 160px 120px;
  195. border-color:inherit;
  196. transform:rotateX(49deg);
  197. top:-150px;
  198. }
  199.  
  200. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:after {
  201. top:150px;/*--110px if no flat squares--*/
  202. transform:rotateX(-229deg);
  203. }
  204.  
  205. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(1) {
  206. transform:rotateY(45deg) translateZ(63px) ;
  207. border-color:rgba(255,255,255,0.3) transparent;
  208. }
  209.  
  210. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(1):after {
  211. border-color:rgba(155,155,155,0.3) transparent;
  212. }
  213.  
  214. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(2) {
  215. transform:rotateY(-45deg) translateZ(63px) ;
  216. border-color:rgba(215,215,215,0.1) transparent;
  217. }
  218.  
  219. /*-- back face--*/
  220. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(3) {
  221. transform:rotateY(-135deg) translateZ(63px) ;
  222. border-color:rgba(25,25,45,0.3) transparent;
  223. }
  224.  
  225. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(4) {
  226. transform:rotateY(-225deg) translateZ(63px) ;
  227. border-color:rgba(55,55,75,0.2) transparent;
  228. }
  229.  
  230. /*--backface bottom--*/
  231. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(3):after {
  232. border-color:rgba(0,0,0,0.6) transparent;
  233. }
  234.  
  235. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(4):after {
  236. border-color:rgba(15,15,15,0.5) transparent;
  237. }
  238.  
  239. /*-- squares--*/
  240. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(n+5) {
  241. display:block;
  242. background:rgba(255,255,255,0.2);
  243. box-shadow:;
  244. position:absolute;width:100%;
  245. height:78%;
  246. top:-14px;
  247. transform:rotateY(-45deg) translateZ(122px);
  248. }
  249.  
  250. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(6) {
  251. transform:rotateY(-135deg) translateZ(122px);
  252. background:rgba(0,0,0,0.2);
  253. }
  254. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(7) {
  255. transform:rotateY(-225deg) translateZ(122px);
  256. background:rgba(0,0,0,0.4);}
  257. #column_1 .custom_panel:nth-of-type(2) .spoiler ol li:nth-of-type(8) {
  258. transform:rotateY(-315deg) translateZ(122px);
  259. background:rgba(255,255,255,0.1);
  260. }
  261.  
  262. /*--hover on hidden-*/
  263.  
  264. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler {
  265. transform:rotateX(0deg);
  266. }
  267. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol{
  268. animation:none;
  269. }
  270.  
  271. #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol b {
  272. transform:translateX(-50%) scale(1.6);
  273. z-index:30;
  274. opacity:0.4;
  275. }
  276.  
  277. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li {
  278. position:absolute;
  279. }
  280.  
  281. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:after, #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:before {
  282. transform:scale(0.7);
  283. }
  284.  
  285. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:nth-of-type(5) {
  286. animation: cfspina 12s infinite;
  287. width:100px;height:100px;}
  288.  
  289. @keyframes cfspina {
  290. 0% {transform:translate(-100px,40px) rotate(20deg) rotateX(0deg);}
  291. 100% {transform:translate(-100px,40px) rotate(20deg) rotateX(360deg);}
  292. }
  293.  
  294. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:nth-of-type(6) {
  295. animation:cfspinb -2s 16s infinite;
  296. width:130px;height:130px;}
  297.  
  298. @keyframes cfspinb {
  299. 0% {transform:translate(160px,150px) rotate(110deg) rotateX(0deg);}
  300. 100%{transform:translate(160px,150px) rotate(110deg) rotateX(-360deg);}
  301. }
  302.  
  303. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:nth-of-type(7) {
  304. animation:cfspinc -2s 11s infinite alternate;
  305. width:140px;height:140px;}
  306.  
  307. @keyframes cfspinc {
  308. 0% {transform:translate(120px,-60px) rotate(-30deg) rotate(0deg) rotateX(0deg);}
  309. 0% {transform:translate(120px,-60px) rotate(-30deg) rotate(360deg) rotateX(360deg);}
  310. }
  311.  
  312. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:nth-of-type(8) {
  313. animation:cfspind -1s 16s infinite alternate;
  314. width:140px;height:140px;}
  315.  
  316. @keyframes cfspind {
  317. 0% {transform:translate(-20px,170px) rotate(-30deg) rotate(0deg) rotateX(0deg);}
  318. 100% {transform:translate(-20px,70px) rotate(-30deg) rotate(180deg) rotateX(-360deg);}
  319. }
  320.  
  321. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:nth-last-of-type(n+5) {
  322. display:block;
  323. position:absolute;
  324. left:150px;
  325. }
  326.  
  327. #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:after:nth-last-of-type(n+4), #columns #column_1 .custom_panel:nth-of-type(2) .spoiler-hidden:hover .spoiler ol li:before:nth-last-of-type(n+4) {
  328. margin:450px;
  329. transform:scale(0.7) rotate(110deg) !important;
  330. }
  331.  
  332. /*-- all transitions--*/
  333. #gaia_header, #gaia_header *, #columns, #columns *, #columns *:after, #columns *:before {transition:0.5s;}
  334.  
  335. /*-- main contents--*/
  336. #column_2, #column_3 {
  337. position:relative;
  338. top:15px;
  339. left:50%;
  340. width:0px !important;
  341. height:0px !important;
  342. display:block;
  343. margin:0px;
  344. background: red;
  345. font-size:0px;
  346. }
  347.  
  348. #column_2:before {position:absolute;
  349. bottom:-1px;
  350. height:200px;
  351. width:952px;
  352. left:50%;
  353. transform:translateX(-50%);
  354. background:rgba(0,0,0,0.7);
  355. border-radius:10px 10px 0 0;
  356. border:1px solid rgba(255,255,255,0.5);
  357. content:'';
  358. display:block;
  359. z-index:-100;}
  360.  
  361. @media screen and (max-width:1035px) and (min-height:600px) {
  362. #column_2:before {height:225px;bottom:-26px;}
  363. #column_2, #column_3 {margin-top:-20px !Important;}
  364. }
  365.  
  366. /*--right column--*/
  367. #column_2 {
  368. top:-500px;
  369. width:0px !important;
  370. height:500px !important;
  371. background:red;
  372. display:flex;
  373. flex-direction:column-reverse;}
  374.  
  375.  
  376. #column_2 ul.buttons {display:inline;
  377. position:static;}
  378.  
  379. #column_2 .panel {position:static;
  380. width:365px;
  381. margin: 25px 0 0px 80px;
  382. padding:0 10px;
  383. overflow:auto;
  384. height:0px;
  385. border:solid transparent;
  386. border-width:0px 5px;
  387. background:rgba(25,25,25,0.9);
  388. color:#fff;}
  389.  
  390. #column_2 .panel:hover {
  391. max-height:auto;
  392. height:390px;
  393. padding:5px 10px;
  394. border-width:5px 5px;
  395. box-shadow:0 0 3px #000;
  396. }
  397.  
  398.  
  399. #column_2 .panel h2 {position:absolute;
  400. bottom:0px;
  401. left:80px;
  402. margin:0px;
  403. width:inherit;
  404. padding:5px 15px;
  405. height:15px;
  406. box-shadow:0 0 3px #000;
  407. background:rgba(50,50,50,0.3);
  408. color:#ccc;
  409. font-family:orbitron,arial;
  410. text-transform:none;
  411. letter-spacing:1px;
  412. font-weight:100;
  413. text-shadow:0 0 3px #000;}
  414.  
  415. #column_2:hover .panel h2 {
  416. background:rgba(30,30,30,0.7);
  417. color:#eee;
  418. }
  419. #column_2 .panel:hover h2 {
  420. color:#fff;
  421. background:rgba(110,110,110,0.9);
  422. text-shadow:0 0 3px #aaf, 0 0 3px #aaf;}
  423.  
  424. #column_2 .panel:hover ~ .panel h2, #column_2 .panel:hover h2 {margin:325px 0px;}
  425. #column_2 .panel:nth-of-type(2) h2 {bottom:25px;}
  426. #column_2 .panel:nth-of-type(3) h2 {bottom:50px;}
  427. #column_2 .panel:nth-of-type(4) h2 {bottom:75px;}
  428. #column_2 .panel:nth-of-type(5) h2 {bottom:100px;}
  429. #column_2 .panel:nth-of-type(6) h2 {bottom:125px;}
  430. #column_2 .panel:nth-of-type(7) h2 {bottom:150px;}
  431. #column_2 .panel:nth-of-type(8) h2 {bottom:175px;}
  432. /*--left column--*/
  433. #column_3 {margin-left:-10px;}
  434.  
  435. #column_3 .panel {
  436. position:absolute;
  437. }
  438.  
  439. /*--clock--*/
  440.  
  441. #column_3 .media_panel {position:static;padding:0px;margin:0px;}
  442. #column_3 .media_panel h2 {display:none;}
  443. #column_3 .media_panel h2 ~ object {
  444. position:absolute;
  445. top:-40px;
  446. left:-420px;
  447. width:150px;
  448. height:20px;
  449. overflow:hidden;
  450. filter:invert(0.9);
  451. opacity:0.5;
  452. box-shadow:0 0 3px #fff;
  453. border-radius:0 0 10px 10px;
  454. }
  455. #column_3 .media_panel h2 ~ object:hover {
  456. opacity:1;
  457. }
  458. #column_3 .media_panel h2 ~ object object {
  459. position:relative;
  460. left:-50px;
  461. width:250px;
  462. height:23px;
  463. }
  464.  
  465. /*-- note board--*/
  466. #columns #column_3 .custom_panel {
  467. bottom:30px;
  468. left:-460px;
  469. width:388px;
  470. opacity:0.7;
  471. padding:0px;
  472. background:rgba(0,0,0,0);
  473. height:175px;
  474. overflow:visible;
  475. border-radius:5px;
  476. }
  477.  
  478. #columns #column_3 .custom_panel:hover {
  479. opacity:1;}
  480.  
  481. #columns #column_3 .custom_panel h2 {position:absolute;
  482. top:3px;
  483. left:5px;
  484. right:5px;
  485. height:16px;
  486. padding:2px 3px;
  487. margin:0px;
  488. background:rgba(20,20,20,0.7);
  489. border-radius:99px;
  490. letter-spacing:1px;
  491. text-align:center;
  492. font-family:orbitron;
  493. text-transform:none;
  494. }
  495.  
  496. #columns #column_3 .custom_panel h2 ~ div[id*='_content'] {
  497. border-radius:5px;
  498. height:128px;
  499. width:auto;
  500. overflow:auto;
  501. padding:5px;
  502. background:rgba(25,25,25,0.8);
  503. color:#fff;
  504. border:5px solid transparent;
  505. margin:27px 0 0 0;
  506. box-shadow:0 0 3px #000;}
  507.  
  508. /*-- details --*/
  509. #column_3 #id_details {
  510. bottom:35px;
  511. padding:5px;
  512. background:rgba(255,255,255,0);
  513. width:150px;
  514. left:auto;
  515. right:-90px;
  516. transform:translateX(0%);
  517. z-index:20;
  518. overflow:visible;
  519. height:160px;
  520. color:#fff;
  521. }
  522.  
  523. #column_3 #id_details:hover {width:490px;
  524. }
  525.  
  526. #column_3 #id_details:hover ~ .custom_panel {
  527. opacity:0.1;}
  528.  
  529. #column_3 #id_details:hover {width:490px;
  530. background:rgba(255,255,255,0);}
  531.  
  532. #column_3 #id_details:before {
  533. content:url('http://i695.photobucket.com/albums/vv312/fredysugiman/bordersmall.png~original');
  534. position:absolute;
  535. z-index:-10;
  536. left:-10px;
  537. top:0px;
  538. opacity:0;
  539. transform:rotateY(180deg);
  540. filter:invert(1);
  541. pointer}
  542.  
  543. #column_3 #id_details:hover:before {
  544. opacity:0.7;
  545. }
  546.  
  547. #column_3 #id_details h2 {display:none;}
  548.  
  549. #column_3 #id_details img,
  550. #column_3 #id_details #animated_avatar {float:right;margin:20px 5px 5px 5px;
  551. padding:5px 10px;
  552. border-radius:5px;
  553. opacity:0.8;
  554. animation:cffloat 4s infinite alternate;
  555. position:relative;}
  556.  
  557. @keyframes cffloat {
  558. 0%{top:-10px;}
  559. 100% {top:10px;}
  560. }
  561.  
  562. #column_3 #id_details:hover img,
  563. #column_3 #id_details:hover #animated_avatar {
  564. opacity:1;
  565. transform:rotateY(360deg);}
  566.  
  567. #column_3 #id_details .forum_userstatus ~ p {text-align:left;
  568. border-left:3px solid transparent;
  569. text-indent:6px;
  570. margin:5px 0px 0px 55px;
  571. padding:1px;
  572. width:270px !important;
  573. text-shadow:0 0 3px #aaa;
  574. display:block !important;
  575. opacity:0;
  576. float:none;
  577. transform:scale(0);}
  578.  
  579. #column_3 #id_details:hover .forum_userstatus ~ p {
  580. border-left:3px solid #aaa;
  581. transform:scale(1);
  582. opacity:1;}
  583.  
  584. #column_3 #id_details .forum_userstatus + p {
  585. margin-top:50px;
  586. }
  587. /*-- user status --*/
  588. #column_3 #id_details .forum_userstatus {
  589. position:absolute;
  590. top:0px;
  591. left:auto;
  592. right:20px;
  593. width:120px;
  594. background:rgba(25,25,25,0.5);
  595. z-index:10;
  596. transform:translateX(0);
  597. border:none;
  598. border-radius:+0px 0px 5px 5px;
  599. opacity:0.8}
  600.  
  601. #column_3 #id_details:hover .forum_userstatus {
  602. background:rgba(25,25,25,0.7);
  603. opacity:1;
  604. }
  605.  
  606. .forum_userstatus .statuslinks {
  607. background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAKCAMAAAC+Ge+yAAAAaVBMVEX///8AAAAAAAAAAAD////9/f0AAAAAAAAAAABfX1/////6+vp+fn7////////9/f3///+bm5v///////////99fX319fX////8/Pz8/Pz///+5ubn9/f2dnZ38/Py4uLj///8AAAC2traxXVsaAAAAI3RSTlMAAAgNGLwSBxlKPrhXK1O2HGUCITZWFrC+thByu2S9cwUGc9YpLywAAABKSURBVHheHcZFAoQwAMDA1KijLqv/fySUXCaIQdyNPdoEqLcZm96hjv4HKq3RS+CrJi930EurZD419mjabF4W3KcxXQXg/sXniheVvgMct5vtUQAAAABJRU5ErkJggg==);
  608. background-position:right center;
  609. background-repeat:no-repeat;
  610. }
  611.  
  612. #id_details .online , #id_details .offline {
  613. color:#d0d0d0;
  614. }
  615.  
  616. #id_details:hover .online {
  617. text-shadow:0 0 3px #aaf;
  618. color:#fff;
  619. }
  620.  
  621. #avatar_menu {
  622. margin-left:0px;
  623. width:125px;
  624. background:rgba(25,25,25,0.9);
  625. transition:all 0.3s;
  626. display:block !important;
  627. transform-origin:top;
  628. top:auto !important;
  629. bottom:200px;}
  630.  
  631. @media screen and (max-height:600px) {
  632. html body #avatar_menu {top:400px !important;bottom:auto;
  633. transform:translateY(-100%);}
  634. }
  635.  
  636. #avatar_menu[style*='none'] {
  637. opacity:0;
  638. transform:scale(1,0);
  639. }
  640.  
  641. #avatar_menu li {
  642. border-left:5px solid transparent;
  643. display:block;
  644. width:0px;
  645. transition:all 1s;
  646. }
  647.  
  648. #avatar_menu li.menu_seperator {
  649. width:auto;
  650. }
  651.  
  652. #avatar_menu li:hover {
  653. width:120px;
  654. background:rgba(90,90,90,0.7);
  655. -webkit-animation: cfheader 1s infinite alternate;
  656. animation: cfheader 1s infinite alternate;
  657. }
  658.  
  659. #avatar_menu li a {
  660. color:#ccc;
  661. display:block;
  662. width:120px;
  663. background:none transparent !important;
  664. }
  665.  
  666. #avatar_menu li:hover a {
  667. color:white;
  668. }
  669.  
  670. /*--contact--*/
  671. #column_3 #id_contact {
  672. position:absolute;
  673. bottom:40px;
  674. left:-250px;
  675. padding:0px;
  676. margin:0px;
  677. }
  678.  
  679. #column_3 #id_contact h2 {display:none;}
  680.  
  681. #column_3 #id_contact ul:not(.buttons) li{
  682. position:absolute;
  683. }
  684.  
  685. #column_3 #id_contact ul:not(.buttons) li *{
  686. display:block;
  687. position:absolute;
  688. height:20px;
  689. width:35px;
  690. font-size:0px;
  691. opacity:0.7;
  692. color:transparent;
  693. background:no-repeat center;
  694. background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAD5klEQVRo3tWaT2hcVRTGv+/xCFKGIEWCiLgIJUgwCDWkUrroqohCQHChaSpduChSURF0KSXLboSsBTEVjVuLreBCKEZMpAsx4h+qRaWCSVDLUNtYzs+Fb8LLMH/ezLzMTA5c7mHmvXvPOfe755x7z7NKIGBE0mHgqO0pSeOSxiRVskduSdqU9AuwbnsVWEmSpKpBEZACT0TEUkRsRQQAEUFB/p+IuATMR8SBfgo+EhEvRsS1LoRuxm9ExDng3r0UXMAs8CN7RxvAmYhISxU+IkYzqHRl6S7alYgYL8vyExHxfUlQ6YTfAk60k89tLD8t6ZKk+wbkK7Ztn5L0oe2OLX8Y2GLw9G9EPNup8OMR8fsAYNOMvwM8WQhCEVGR9IWkR7rd81lrRknWOqWbto/Y/q4V5gW83eOSvx4RFaBS32f8Yg9jf5lF/V3WyNMJ4HTN7+f8f2Fe0naSJFXb1fredlXSdqdj5vgZSWcbKgCkkhYlJfkX84GsE76p28t5k27GB94Exhop8LztCdvqpbVTAlCPc4wCb+xSAEhsv1YPnW4gVMRf9wChWv9CLW+qKXAUmGwk/LBBKKNRSfM7Cth+rlfo9BFCNSOcApQACTBbr+UwQyjjpyU9kEg6JOnBBjgbZggJSCQdT4GZjhOlNtYtAqGS6EgqaSo/aI3P9xm9ZHuzXogG/NU2ky4Ba7XVyEOvDoYTwLk2z0wqIpYLHjIe6mceHRHHCsh0LbU9VgY0yqaCMDuQSKo02ihN8px+33y0y7uUAtFstw9K8E48YWr7toaQinqqRNIf7aw/KBgVCGrVVNJP+xhC11NJ6wWXaxEocpe5ZPtyC/c4Z/upAuMU8Y7fpJJWWwWy3G+z9f83CS5rki63mPQxYK5dICvIryWSfpD0W7NcqEVOPuhcKGx/ltoO4KKkM/3Cdkm50FeSbtSOlO916n9bBZd+pNPA+7Z3zsQrwNf7CEK3bF+QpDQbNIDzkpb2CYTezSo+u+6FPpD07T6AUFXSQs0ISW5p7wIvS4phhpDtBds3Gt7M2f5U0js9Hrb38lB/FXgrP15ab52IeBU4JmmixamrVSB7NCKeabECE90EL9s3JZ1MkmS7bYEDeBi4MsDCRj3dtf207YudbLQZ4M8hKXDMd+vyZoCdGnCt8NDHAsediJhr5RxcQIlJ4CP9X33vJ/1l+6Ttj8sIPgeB5T7C5nPgUOkRFJiNiJ/3uLR6tvRCd50i90TEK8CvPRSy69sGsAAc7OfFU5p9erAM/N0pRrKPPT4BTgNdf+zhklZlBJiW9LikKdvjku4HKlkwug1s2r4uaR1Ytb2SVR57mvs/OqKgmLeb9VEAAAAASUVORK5CYII=);
  695. background-size:14px auto;
  696. }
  697. #column_3 #id_contact ul:not(.buttons) li:nth-of-type(2) {
  698. left:45px;}
  699.  
  700. #column_3 #id_contact ul:not(.buttons) li:nth-of-type(2) * {
  701. background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACGElEQVRYw+2WzUsVURiHn7mIRItLtHQh4iIurlu0ELIgCf+CiGjTPlpE0DKiRfgXRPtsExERCC1c9KHRJgLpS9AKEbmYmgiRcp8278hpGK+D5nWRPzjMmfN+zpzz/s4LhzjEASMDUE8Bo8AA0BUDoJYMkmeKdK1VkLWSZz7/DbwDbmZZ9jpTTwIvgCMd/vhfwOlMfQaMHNAOjGfqLHAcqHc4+E9gpQZ0x54/iL3Zb7wHHkbM7lpMjgIXgSngCjC3D4HnwvdL4ELE7EJd8m9Mqv3qNbXp3tEMX/3qq4JsGXW5xGhRPavW1Tvq+i4Cr4ftMXVIXSjR2TYB1Q31hlpTe9R7sbYTNtT7YYN6vY1d2wRyPFLrQViNeN8Oj9VG6NZ30K2cgOqn3HHOnOpEIp8INs3lJ9QPFfwud1U8wS3gxxZ/Z9mUegYYDioez7Is1V8poeVyVPgDX5L9vKQ+VftL/PSpT9TLodsTtnvaglm1N07yWLK+pl6NA1qL+VoiHwub3vCxqwS+R+0OtnHyVn3TJvnB+DNf2yWwVCKYVwfUWxVLr11J3o7qmd8ugcXC4oI6UsJae8Fk+CySUZPCYlO9q67677GqjhbofTG/jvuibD4DjX2+DT8CJ6J8v9WAmaS1anTgOm4kbdxMpg4Bz5M+sFPYBM7lJDKsTts5TKvnt7riSIKkI67SDVel8LQrbsWXbxao+xD/Mf4A6J3auTFKGkEAAAAASUVORK5CYII=);
  702. }
  703.  
  704. #column_3 #id_contact ul:not(.buttons) li:nth-of-type(3) {
  705. left:90px;
  706. }
  707.  
  708. #column_3 #id_contact ul:not(.buttons) li:nth-of-type(3) * {
  709. background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACFElEQVRYw72XP0iVURjGn3O5yB2koSlCJBxCokLKRYmopmiUCJHGhLCIKGmQEBwaFTTEKaLBQQhCjBqcRKIhxOEGBQ2RkDQIIqFhF++vwXPx43iOfOfTzjPd+97znOf9vvfvlSIBtAL3gRlgGXgKlPW/AXQAc8AOu9gEelIICxgCauxhG7iSSnyK/XioFACeeMSrqWJ+1r5qF32pnn7OI74BVFKIt2WyPYvZo9YqBew9gd8+HrUDoWS6GrB/jakgSZP26z1jTFQIfuBHZ8QdAxneQIx42Wk6WbTlvOOSU0HbQLfvrAGeSWq1MS9JarI54MNbSVv2c13SqjHmsSN+UtKSpBMOd1XSRWPML9fbaYpj1rmrCfhwwPmFfU0MaAa+FBD/Dhx32vZkDt6oL2ZngN8R4n/chARuR/Bv+pzojbjgjsM9b8dzXmwA7T4nxnOQX9gab3COAd8KhLAKNMuTRIsHkD65s8BuRkXxynjeQqiM1mwZrTjnn0tqyZgqkq4HyvidpL+2hOuSVkKN5LLTjGrAtZxN6FTgaWtRewTwIEN+FMG7EHDgZ8wwkqQJSefsmbGIAdcSsH+OcsBOr/4CE7Y9YF+I2QcOgy6PrS7pdYpNqgKse+L/PtUeeSuQ/R0pxEvAkseB4VRPf9cj/hIopRDvthOygR1gJJX4DTvdGpiP2R0PI1y2f92qwBtgEDidnZR58A+b1b5jeeJtPgAAAABJRU5ErkJggg==);}
  710.  
  711. #column_3 #id_contact ul:not(.buttons) li span {
  712. opacity:0.4;}
  713.  
  714. #column_3 #id_contact ul:not(.buttons) li:hover a {
  715. opacity:1;
  716. }
  717.  
  718. #column_3 #id_contact ul:not(.buttons) li:before {
  719. z-index:0;
  720. opacity:1;
  721. display:block;
  722. content:'';
  723. background:rgba(20,20,20,0.7);
  724. box-shadow:0px 0px 5px #000;
  725. width:41px;
  726. height:25px;
  727. position:absolute;
  728. top:0px;
  729. left:-3px;
  730. transform:perspective(35px) rotateX(-45deg);
  731. border-radius:0px 0px 6px 6px;
  732. }
  733.  
  734. /*-- infobox --*/
  735. #column_1 .custom_panel:nth-of-type(1) {
  736. position:absolute;
  737. top:40px;
  738. left:0;
  739. width:100%;
  740. padding:0;
  741. }
  742.  
  743. #column_1 .custom_panel:nth-of-type(1) ul.buttons {left:0px;}
  744.  
  745.  
  746. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup.com'] ~ ol, #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup.com'] ~ ul {
  747. display:block;
  748. position:absolute;
  749. left:40px;
  750. top:-5px;
  751. z-index:300;
  752. color:white;
  753. }
  754.  
  755. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup.com'] ~ ul {
  756. _margin-left:-175px;
  757. width:330px;
  758. padding:5px;
  759. border-radius:5px;
  760. border:5px solid transparent;
  761. height:auto;
  762. overflow:visible;
  763. background:rgba(0,0,0,0.5);
  764. transition:opacity 0.5s 0.5s,transform 9999s 9999s;
  765. animation:dummyrender3 3s linear alternate infinite;
  766. }
  767.  
  768. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup.com'] ~ ol {display:block;
  769. _margin-left:-305px;
  770. width:400px;background:rgba(0,0,0,0.7);
  771. padding:5px;
  772. border-radius:8px;
  773. text-align:left;
  774. transform:scale(0,0);
  775. transition:opacity 2s 9999s,transform 2s 9999s;
  776. animation:dummyrender3 3s linear alternate infinite;
  777. }
  778.  
  779. @keyframes dummyrender3 {
  780. 0% {margin-top:0px;}
  781. 100% {margin-top:0px;}
  782. }
  783.  
  784. body:active #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup.com'] ~ ul, body:active #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup.com'] ~ ol {
  785. transition:opacity 0s 0s,transform 0s 0s;
  786. opacity:1;
  787. transform:scale(0.1,0);
  788. }
  789.  
  790. html body #columns #column_1 .custom_panel:nth-of-type(1):active a[href*='kgroup.com'] ~ ol {
  791. transition:opacity 0s 0s, transform 0s 0s !important;
  792. opacity:1;
  793. transform:scale(1,1);
  794. }
  795.  
  796. /*--call info--*/
  797. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper .spoiler-title {
  798. position:absolute;
  799. top:-45px;
  800. left:-10px;
  801. height:60px;
  802. width:30px;
  803. background:rgba(20,20,20,0.5);
  804. margin:0px;
  805. border:none !Important;
  806. padding:0px;
  807. z-index:10;}
  808.  
  809. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper:hover .spoiler-title {
  810. background:rgba(20,20,20,0.8);
  811. filter:drop-shadow(0 0 3px #000);}
  812.  
  813. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper .spoiler-title:before {
  814. display:block;
  815. content:'';
  816. position:absolute;
  817. left:100%;
  818. top:0px;
  819. border:solid;
  820. border-color:transparent rgba(20,20,20,0.5);
  821. border-width: 30px 0 30px 30px;
  822. pointer-events:none;
  823. z-index:-1;}
  824.  
  825. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper:hover .spoiler-title:before {
  826. border-color:transparent rgba(20,20,20,0.8);
  827. }
  828.  
  829. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper .spoiler-title * {
  830. position:absolute;
  831. left:-20px;
  832. opacity:0;
  833. top:0px;
  834. height:60px;
  835. width:80px;
  836. transform:skewX(-45deg);
  837. padding:0px;
  838. margin:0px;
  839. border:none;
  840. z-index:1;}
  841.  
  842. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper .spoiler-title:after {
  843. content:'';
  844. position:absolute;
  845. left:15px;
  846. top:15px;
  847. background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADq0lEQVR4nOXbQYRdVxzH8WfEU1URlUVERdWIiiwiZhFdZFFjjKqoERUjqrKoqqiKquqiREUWkcWIqOiiuogsRkVlEVVRUVGVRVVEjIrKoiJiRIwYEc+ni/Mud8Z78+7Me/9z79Mvd/t+5/e7595zzv/9b6sVDCbwJuZxFldwE39hCX/jDm7hKhbwMQ7hpejxhYDtXcNX8MjWWcUNnMLrdfsaCA7jMp4NYbofHWnmzKNdt9c14Aj+CDDdjwc4WXsQONC9K3VxH+/VYbwtvdBe1Gi+zE/Yncv8JG7XbLgXj3Ek2vw0lms2uhEdfBVl/hie12ywKhcwMUrzxzXnea/Kd0YRAo4aP/MFFw0TgrSxWQ0e5Auxj9bprZrfY7ht7CAWMYVXutckPsOTEet0cGyz5tvS4SSKvm9q7MPDEes9sZmzBL4e8QDKXKugPxOge0OV94F0ByKfyamKNyFiBn5QRfiXAOGCVWyrGMBCgP5DbN9IdDpAtMyKissSzgWNof9OUZ6T3a6KAVwO0l/WaxZIR9scnKpgfqfRL4dlTvYS/TZQsMwKDmxgfpt0vI3k3nrRtrynvMeY6WH+VfHmC6bKwhHr7iA6UhntkvTGv4qnGfXPlQOIWHKazt1yAHfqHk1N7C5q+J26R1ITc8WR9//KmRY+Cvrxu5gd4orcBxQstqTydgS3Bm14NkJsLaLgzxZ+CPrxcQjgn5a0/kYwNgFEHn+Let8zaZOzjMNNC+B6BqEy000L4FoGoTKzTQsg6iXYj8YFEFV56UeTArjdkvpxcvJugwJYbOHtDEJlmhTANy3skPcw1KQA5gqxexnECio1McgTwK5C7EIGsYJKPT3iA1hTEJkNFivTlADWlMTaUqEyB00J4NB6wYvBggVzDQhgyfp/qLBfntXgaAMC+Lyf6M+BogV1B7CCnf1E3woSLVN3AGcHCUefDusM4BF2DBLeK7Yx6v0aAzhRRTu6RaauAG6q2jIn7Qui2t+/xMEB15TR/ln7FJOVzJdC2CtPbT4H85syXwphxvj0B/fjzJbMl0KYN76tspeMqF/4hPEL4XsBHePj8jiM5s73COEdebs4NksHp0WYL4WwTzMbKpZV3GWOIoSXcV5z3gvX8VoW8+uCOCi2q3wQD+S66xuEMCF9VZLzsfgXn2rSt8XdIGbwo5jVoiPNtuPq/mJ0EFLD44fdMIapNT7Hr/gCb9Tta0tIM2O/tZ/P/yZ9Pn+/ey3hd6kWsYBPpOJM+BT/DxEdVHUDPvkSAAAAAElFTkSuQmCC') no-repeat;
  848. background-size:100% 100%;
  849. background-position:center;
  850. display:block;
  851. width:30px;
  852. height:30px;
  853. opacity:0.8;
  854. -webkit-filter:drop-shadow(0px 0px 3px #333);
  855. filter:drop-shadow(0px 0px 3px #333);
  856. }
  857.  
  858. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper .spoiler-title:hover:after {
  859. opacity:1;
  860. }
  861.  
  862. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper.spoiler-hidden .spoiler-title:after {
  863. -webkit-animation:cfrotate 2s;
  864. animation:cfrotate 2s;
  865. }
  866.  
  867. #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ .spoiler-wrapper.spoiler-revealed .spoiler-title:after {
  868. -webkit-animation:cfrotate2 2s;
  869. animation:cfrotate2 2s;
  870. }
  871.  
  872. @-webkit-keyframes cfrotate {
  873. 0% {transform:rotateY(0deg);}
  874. 100% {transform:rotateY(360deg);}
  875. }
  876.  
  877. @keyframes cfrotate2 {
  878. 0% {transform:rotateY(0deg);}
  879. 100% {transform:rotateY(360deg);}
  880. }
  881.  
  882. /*--base foundation--*/
  883. #columns {
  884. width:100%;
  885. height:100%;
  886. min-width:1150px;
  887. min-height:600px;
  888. top:0px;
  889. left:0px;
  890. }
  891.  
  892. .column {overflow:visible !important;
  893. font-size:0px;}
  894.  
  895. /*--media panel--*/
  896.  
  897. #column_1 .media_panel {
  898. background:rgba(25,25,25,0.7);
  899. box-shadow:0 0 5px #000;
  900. position:absolute;
  901. top:50%;
  902. left:-310px;
  903. margin:-160px 0;
  904. z-index:200;
  905. padding:0px;
  906. border:5px solid transparent;
  907. width:300px;
  908. height:250px;
  909. }
  910.  
  911. #column_1 .media_panel:hover {
  912. left:0px;
  913. }
  914.  
  915. #column_1 .media_panel h2 {
  916. position:absolute;
  917. left:100%;
  918. top:10px;
  919. margin:0px 30px;
  920. min-width:100px;
  921. text-align:center;
  922. transform:rotate(90deg);
  923. transform-origin:0 0;
  924. height:15px;
  925. padding:5px;
  926. border-radius:10px 10px 0 0;
  927. background:rgba(0,0,0,0.6);
  928. font-family:orbitron, arial;
  929. letter-spacing:2px;
  930. text-transform:none;
  931. box-shadow:0 0 3px #000;
  932. }
  933.  
  934. #column_1 .media_panel:hover h2 {
  935. background:rgba(0,0,0,0.8);}
  936.  
  937. #column_1 .media_panel object {width:100%;height:100%;}
  938. /*--Trigger and BG changer v6 --*/
  939. #column_1, #column_1 .custom_panel:nth-of-type(2) {
  940. position:static;
  941. clear:both;
  942. float:none;
  943. margin:0px;
  944. min-height:100%;
  945. }
  946.  
  947. #column_1 {
  948. height:auto;
  949. min-height:100%;
  950. display:block;
  951. width:100%;
  952. }
  953.  
  954. #column_1 .custom_panel .spoiler-wrapper {border:none;padding:0px;}
  955.  
  956. #column_1 .custom_panel:nth-of-type(2) br,#column_1 .custom_panel h2, #column_1 .custom_panel:nth-of-type(1) a[href*='kgroup'] ~ br {display:none;}
  957.  
  958. /*-- Trigger system--*/
  959. #columns #column_1 .custom_panel:nth-of-type(2) {
  960. background:transparent;
  961. height:inherit;
  962. float:none;
  963. min-height:30%:
  964. max-height:50%;
  965. display:block;
  966. padding:0px;
  967. margin:0px;}
  968.  
  969. #column_1 .custom_panel:nth-of-type(2) .spoiler-wrapper {position:absolute;top:50%;left:50%;
  970. z-index:200;}
  971.  
  972. #column_1 .custom_panel:nth-of-type(2) .spoiler-revealed {
  973. position:absolute;top:100%;margin-top:-260px;left:50%;
  974. transform:scale(0.2);
  975. }
  976.  
  977. #column_1 .custom_panel:nth-of-type(2) .spoiler-revealed:hover {
  978. transform:scale(0.3);
  979. }
  980.  
  981. #column_1 .custom_panel:nth-of-type(2) .spoiler-wrapper ~ ul {
  982. display:block;
  983. height:999999px;
  984. width:50px;
  985. max-height:100vh;
  986. padding-top:600px;
  987. }
  988.  
  989. #column_1 .custom_panel:nth-of-type(2) .spoiler-revealed ~ ul {
  990. padding:0px;}
  991. /*-- BG changer system--*/
  992. #column_1 .custom_panel:nth-of-type(2) ul ~ ol {font-size:0px;}
  993.  
  994. #column_1 .custom_panel:nth-of-type(2) ul ~ ol:after {
  995. font-family:orbitron;
  996. text-align:center;
  997. position:absolute;
  998. display:block;
  999. top:-14px;
  1000. right:45px;
  1001. border:solid;
  1002. color:#ddd;
  1003. text-shadow: 0 0 3px #777;
  1004. font-size:10px;
  1005. line-height:15px;
  1006. border-width:28px 28px;
  1007. border-color:transparent rgba(20,20,20,0.5) rgba(20,20,20,0.5) transparent;
  1008. height:0px;
  1009. width:125px;
  1010. letter-spacing:2px;
  1011. content:'BG Changer';
  1012. transform:rotate(-90deg);
  1013. transform-origin:right top;
  1014. transition:0.6s;
  1015. z-index:50;
  1016. }
  1017.  
  1018. #column_1 .custom_panel:nth-of-type(2) ul ~ ol:hover:after {
  1019. border-color:transparent rgba(0,0,0,1) rgba(0,0,0,1) transparent;
  1020. content:'Pick Your Background';
  1021. width:195px;
  1022. color:#fff;
  1023. }
  1024.  
  1025. #column_1 .custom_panel:nth-of-type(2) ul ~ ol:before {
  1026. content:'';
  1027. display:block;
  1028. position:absolute;
  1029. right:0px;
  1030. top:0px;
  1031. height:100%;
  1032. width:0px;
  1033. z-index:40;
  1034. }
  1035.  
  1036. #column_1 .custom_panel:nth-of-type(2) ul ~ ol:hover:before {width:80px;
  1037. }
  1038. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b {
  1039. position:absolute;
  1040. right:25px;
  1041. top:35px;
  1042. background-color:rgba(0,0,0,0.5);
  1043. width:0px;
  1044. height:45px;
  1045. display:block;
  1046. z-index:60;
  1047. border-radius:10px;
  1048. box-shadow:0 0 3px rgba(0,0,0,0.6), inset 0 0 5px 0 rgba(250,250,250,0.5);
  1049. }
  1050.  
  1051. #column_1 .custom_panel:nth-of-type(2) ul ~ ol:hover *:not(b):not(br) ~ b {
  1052. width:45px;
  1053. }
  1054.  
  1055. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(2) {top:85px}
  1056. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(3) {top:135px}
  1057. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(4) {top:185px}
  1058. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(5) {top:235px}
  1059. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(6) {top:285px}
  1060. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(7) {top:335px}
  1061. #column_1 .custom_panel:nth-of-type(2) ul ~ ol *:not(b):not(br) ~ b:nth-of-type(8) {top:385px}
  1062.  
  1063. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li {
  1064. position:absolute;
  1065. top:0px;
  1066. left:0%;
  1067. height:100%;
  1068. width:100%;
  1069. z-index:-100;
  1070. background:#444;
  1071. transition:left 9999s 9999s;
  1072. pointer-events:none;
  1073. }
  1074.  
  1075. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:hover ~ li {
  1076. transition:left 0.3s 0s;}
  1077.  
  1078. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(1):hover ~ li {left:0px;}
  1079. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(2):hover ~ li {left:100%;}
  1080. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(3):hover ~ li {left:200%;}
  1081. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(4):hover ~ li {left:300%;}
  1082. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(5):hover ~ li {left:400%;}
  1083. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(6):hover ~ li {left:500%;}
  1084. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(7):hover ~ li {left:600%;}
  1085. #column_1 .custom_panel:nth-of-type(2) ul ~ ol b:nth-of-type(8):hover ~ li {left:700%;}
  1086.  
  1087. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b {
  1088. height:100%;
  1089. width:100%;
  1090. display:block;
  1091. position:absolute;
  1092. top:0px;
  1093. right:0px;
  1094. }
  1095.  
  1096. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(2) {right:100%;}
  1097. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(3) {right:200%;}
  1098. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(4) {right:300%;}
  1099. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(5) {right:400%;}
  1100. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(6) {right:500%;}
  1101. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(7) {right:600%;}
  1102. #column_1 .custom_panel:nth-of-type(2) ul ~ ol li b:nth-of-type(8) {right:700%;}
  1103. /*--Gaia header--*/
  1104.  
  1105. #gaia_header {min-width:1150px;
  1106. pointer-events:none;}
  1107.  
  1108. #gaia_header, #gaia_header ul {
  1109. background:transparent !important;
  1110. overflow:visible;
  1111. font-size:0px;
  1112. width:auto !Important;}
  1113.  
  1114. #gaia_header ul {
  1115. opacity:0.9;
  1116. pointer-events:auto;
  1117. margin:0 25px;
  1118. }
  1119.  
  1120. #gaia_header #header_left {margin-left:50px;}
  1121. #gaia_header #header_right {float:right;}
  1122.  
  1123. #gaia_header ul:hover {
  1124. opacity:1;}
  1125.  
  1126. #gaia_header ul a {
  1127. font-family:orbitron, arial;
  1128. letter-spacing:1px;
  1129. font-weight:100;
  1130. display:inline-block;
  1131. color:#ddd !important;
  1132. text-shadow:0 0 3px rgba(240,240,240,0.4);
  1133. font-size:11px;
  1134. height:10px;
  1135. padding:5px 3px;
  1136. background:rgba(20,20,20,0.5);
  1137. margin:0 6px;
  1138. position:relative;
  1139. top:3px;
  1140. line-height:1;
  1141. _filter:drop-shadow(0 0 1px rgba(40,40,40,0.2));
  1142. opacity:0.9;
  1143. vertical-align:top;
  1144. text-decoration:none !Important;}
  1145.  
  1146. #gaia_header li:nth-of-type(odd) a {
  1147. top:13px;
  1148. }
  1149.  
  1150. #gaia_header ul:hover a {
  1151. color:#efefef !Important;
  1152. opacity:1;
  1153. }
  1154.  
  1155. #gaia_header ul a:hover {opacity:1;
  1156. color:#fff !important;
  1157. filter:drop-shadow(0 0 3px #000);
  1158. text-shadow: 0 0 3px #aaf;}
  1159.  
  1160. #gaia_header ul a:before, #gaia_header ul a:after {
  1161. content:'';
  1162. pointer-events:none;
  1163. display:block;
  1164. border:solid ;
  1165. border-width: 10px 0 10px 10px;
  1166. border-color:transparent rgba(20,20,20,0.5);
  1167. position:absolute;
  1168. width:0px;
  1169. top:0px;
  1170. right:-10px;
  1171. }
  1172. #header_left li.spacer + li a img {opacity:0;}
  1173. #header_left li.spacer + li a {
  1174. height:20px;
  1175. background-image:url(http://s.cdn.gaiaonline.com/images/gaia_global/gaia_header/br_gaia_logo_header.png);
  1176. background-size:50px auto !important;
  1177. background-position:center 8px;
  1178. background-repeat:no-repeat;
  1179. background-clip:padding-box;
  1180. background-blend-mode:exclusion;
  1181. border: 3px solid rgba(20,20,20,0.5);
  1182. top:-9px;
  1183. margin-left:1px;
  1184. margin-right:11px;}
  1185.  
  1186. #header_left li.spacer + li a:before, #header_left li.spacer + li a:after {
  1187. margin: -3px -11px;
  1188. border-width:18px 0 18px 18px;
  1189. }
  1190.  
  1191. #header_left li.spacer + li a:before {
  1192. border-width:18px 18px 18px 0;}
  1193.  
  1194.  
  1195. #gaia_header ul a:before {
  1196. left:-10px;
  1197. border-width: 10px 10px 10px 0;
  1198. }
  1199.  
  1200. /*----Wishlist----*/
  1201.  
  1202. #id_wishlist:before {
  1203. display:block !important;
  1204. content:' '; /*--none atm--*/
  1205. }
  1206.  
  1207. #id_wishlist .item a {
  1208. border-radius:3px;
  1209. margin:5px;
  1210. display:block;
  1211. position:relative;
  1212. box-shadow:0px 0px 3px rgba(255,255,255,0.3),inset 0px -15px 15px -5px rgba(255,255,255,0.7) ;
  1213. background:rgba(255,255,255,0.8);
  1214. }
  1215.  
  1216. #id_wishlist .item a[title*='Donated'] {
  1217. box-shadow:0px 0px 3px rgba(25,25,255,0.3),inset 0px -15px 15px -5px rgba(30,30,255,0.7);
  1218. }
  1219.  
  1220. #id_wishlist .item a[title*='Bought'] {
  1221. box-shadow:0px 0px 3px rgba(205,255,55,0.3),inset 0px -15px 15px -5px rgba(200,250,50,0.7);
  1222. }
  1223.  
  1224. #id_wishlist .item a[title*='Wanted'] {
  1225. box-shadow:0px 0px 3px rgba(255,255,255,0.6),inset 0px -15px 15px -5px rgba(255,55,55,0.7) ;
  1226. }
  1227.  
  1228. #id_wishlist .item a[title*='Wanted']:after {
  1229. content:'!!!';
  1230. display:block;
  1231. position:absolute;
  1232. top:-10px;
  1233. left:-6px;
  1234. font-size:10px;
  1235. }
  1236.  
  1237. /*--expandable thumbnail--*/
  1238. a[href*='gallery.ic-project'] + ol .spoiler-wrapper .spoiler {
  1239. width:90px;
  1240. height:90px;
  1241. padding:5px;
  1242. background:rgba(55,55,55,0.6);
  1243. box-shadow:0px 0px 3px #000;
  1244. display:block !important;
  1245. text-align:center;
  1246. margin:0px;
  1247. position:relative;
  1248. border:none;
  1249. }
  1250.  
  1251. a[href*='gallery.ic-project'] + ol .spoiler-wrapper .spoiler img {
  1252. max-height:99%;
  1253. max-width:100% !important;
  1254. margin:0px auto;
  1255. display:block;
  1256. position:absolute;
  1257. top:50%;
  1258. left:50%;
  1259. -webkit-transform: translateY(-50%) translateX(-50%);
  1260. -ms-transform: translateY(-50%) translateX(-50%);
  1261. transform: translateY(-50%) translateX(-50%);
  1262. transition:all 0.5s;}
  1263.  
  1264. a[href*='gallery.ic-project'] + ol .spoiler-wrapper .spoiler img.bbcode-swap-blocked-image {
  1265. z-index:150;
  1266. }
  1267.  
  1268. a[href*='gallery.ic-project'] + ol .spoiler-wrapper {
  1269. float:left;
  1270. margin:5px 5px;
  1271. position:relative;
  1272. padding:0px;
  1273. }
  1274.  
  1275. a[href*='gallery.ic-project'] + ol .spoiler-wrapper .spoiler-title {
  1276. position:absolute;
  1277. height:32px;
  1278. width:32px;
  1279. top:0px;
  1280. left:0px;
  1281. opacity:0;
  1282. z-index:30;
  1283. box-shadow:0px 0px 3px #000;
  1284. background:rgba(60,60,60,0.8) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFC0lEQVR4nN1bX2SeVxx+RUVUVVVFVcVnoqavfjm/5xczsYuaXERVRMRUVdVMTc0uKmpixvQiKiYXuajZRU1URUVMRVRMTE3VTNRE1S52Mb2oiqiaiYhnF++brFmz7/x53/O+0YcjXyR+53me857zO+85vy9JIoCNRgeB9wlcJjBB1dtUnSfwE1WXCTzMf/+WqqMU6acxh2JwqQxU7aLIVaouEVinKr0asEnVRwTGCHTXrccJTJI2AmcJLOYC/ES3bktUHWKStNWtc1fkwh+XLHq3J+MxjTlTt95t0JgGgYXowt804h5Vu+oVL3KRwKvKxf9rwhpFzlUvPE3bqfpdbcLfNGKSSbKvKvEHCCzWLvpNE35go9ERV3x390ECPweS/IvZSv4NRT4lMEyRfor05j8vUnWcwI/5/4aYsMg0bY8jPk3bc3I+hNYJ3CFw1md0qLqfwDCBe97pFJiNkioJ3PIgskFgis3m8cL9qr5LYMbThBtlaH6dxCcenT+kyMlSCSRJQuBDAn848xAZLKvjbuc5CUzEXI1pzKE8/7uY8ILNZmfxTl3mPbBJkY9L0GjnkyRtVL3paMLtYp2JjDiJBy6VI8+DW/bmaDfBmL6wDjKnnzp08lXJ2lz57aPqfQd+S2EdiJxzCH6/zrczqh4h8CzKU+Cw4XlZRporCqoOOUzTGb+gIicdRv+LSJq8Yd2aA+tM08PuAUW+tgR8TtX9ETV5gcb0WQfMJ0tR9VdLwOsR9QSBqo8sgzbrFihND1v333vwjI6qVyyDtuq0YBMYsAT6rQI93mCzedw6DXp6TtgDAdcsoz9ZgZ4g0LZvERlxCWI76TlfgZYgMLtvKJa5rAecIr0VaAmCQ/aasgexraYixyrQEgQCly0GTNuDqC63DJKmByrQEgSqni+cCt9qA1Tv2oNkF5WtDDhagZYgOEyBW/YgqvMWF1GBliA4LIIT9iC2gwbgowq0BMEhDV5xCTJa2MWaQNUnLbkbc9oeRKTfYsAv8aX4g2l61MJ706noIr/9+f+Xoexv9d7K7gLrAqi67B7M/mo5FlFLEKj6wGLAuHswYMwS7M9od3ABoDHGwpfs6XnPPWB2GdI6IPBZRE1eoOqche+TkKBLlqAvqHokgh4/nsactg6W6uf+gV1OW122lhGR1yr8buG4GrR9zyu+7EVPNU4FAncc+IUv2DTmjMNTsFHaTawPN9VxB26k6oNCl6ROt7FZIeRQifpsnG44it/itxJsAlW7CKw5dLJJ1dGSte7kUqQ4q5AJbveEW20+xpUZgSZtZxVRTQAmPTp6RZEv2d19sLDw7Lj7JlU3CokvakJ+XW7bcPy3vSQw5XuQmhdkDeQFVv6F1tFMaDQ66HYnv1unzwjMELhGYJiqH9AYQ5HevP7nAlWvE1iopPo02IRsdGajE6yiFZoOvqlor7aC2WGQ2TtB/UKKtacMfa9hs9lJ+1nc3m/AQpAB20ZkRQpLVRClW/GWfyvjixg0pi9f7ctMX38TmN5KpxQ5RmAlgglzhQ3YNiIrtLiUZ4zVgJF+nht5YbcNFZvNztJNANZKM2AH2SRpY0/PCYqM5PuAKQLTVL2bt+8JTFLkKkUGeerUO05xI5gQxYCYKNuEuvUEoTQTYk2BKlCSCeUtgnWgsAnAQN0aCqOACfN1cy8N+e609UXpzpFf4R444i8VzCrJXb7ROv/WiX8d+cn23I5zzezz3G5z/h+omd30b8GP/gAAAABJRU5ErkJggg==') no-repeat center;
  1285. background-size:16px 16px;
  1286. border-radius:0px 0px 10px 0px;
  1287. }
  1288.  
  1289. a[href*='gallery.ic-project'] + ol .spoiler-hidden:hover .spoiler-title {
  1290. opacity:1;
  1291. }
  1292.  
  1293. a[href*='gallery.ic-project'] + ol .spoiler-wrapper .spoiler-title * {
  1294. position:absolute;
  1295. top:0px;
  1296. left:0px;
  1297. padding:0px;
  1298. margin:0px;
  1299. width:100%;
  1300. height:100%;
  1301. opacity:0;
  1302. }
  1303.  
  1304. a[href*='gallery.ic-project'] + ol .spoiler-revealed {
  1305. position:fixed;
  1306. top:0px;
  1307. left:0px;
  1308. margin:0px 0px;
  1309. padding:0px 0px;
  1310. background:rgba(250,250,250,0.8);
  1311. border:none;
  1312. z-index:2000;
  1313. height:100%;
  1314. width:100%;
  1315. }
  1316.  
  1317. a[href*='gallery.ic-project'] + ol .spoiler-revealed .spoiler {
  1318. position:absolute;
  1319. width:auto;
  1320. height:auto;
  1321. left:50px;
  1322. right:50px;
  1323. top:50px;
  1324. bottom:20px;
  1325. }
  1326.  
  1327. a[href*='gallery.ic-project'] + ol .spoiler-revealed .spoiler:before {
  1328. color:#fff;
  1329. content:'Click anywhere to close';
  1330. font-variant:small-caps;
  1331. letter-spacing:1px;
  1332. display:block;
  1333. font-size:12px;
  1334. position:absolute;
  1335. left:0px;
  1336. bottom:-17px;
  1337. height:15px;
  1338. border-radius: 5px;
  1339. width:100%;
  1340. text-align:center;
  1341. background:rgba(60,60,60,0.7);
  1342. }
  1343.  
  1344. a[href*='gallery.ic-project'] + ol .spoiler-revealed .spoiler-title {
  1345. width:100%;
  1346. height:100%;
  1347. transition:0s !Important;
  1348. }
  1349.  
  1350. a[href*='gallery.ic-project'] + ol .spoiler-wrapper ~ br {display:none;}
  1351.  
  1352. /*== Google font face ==*/
  1353. @font-face {
  1354. font-family: 'Orbitron';
  1355. font-style: normal;
  1356. font-weight: 400;
  1357. src: local('Orbitron-Light'), local('Orbitron-Regular'), url(http://fonts.gstatic.com/s/orbitron/v5/HmnHiRzvcnQr8CjBje6GQvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'), url(http://fonts.gstatic.com/s/orbitron/v5/94ug0rEgQO_WuI_xKJMFc_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
  1358. unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  1359. }
  1360.  
  1361. /*== patch ==*/
  1362. /*-- Comments --*/
  1363. .comments_panel dl {
  1364. height:250px;
  1365. display:block;
  1366. overflow:auto;
  1367. color:#fff;
  1368. border:3px dashed #888;
  1369. }
  1370.  
  1371.  
  1372. #pictures_container, #texts_container {
  1373. position:absolute;
  1374. width:100%;
  1375. height:0px;
  1376. top:0px;
  1377. z-index:9000; /*---container level---*/
  1378. }
  1379.  
  1380. .mask {
  1381. z-index:1000 !important;}
  1382.  
  1383. .premium_sparkle, #avatar_menu+div+div, #footer~script[src*='blockedimage']~script+script+div[style*='display']~div, noscript+script+script+noscript+div[style*='display']~div, .owner_checkmark {
  1384. display:none;
  1385. }
  1386.  
  1387. killcode{
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement