Advertisement
Codesbyneen

002. Layout - Can't Take My Eyes Off You

Apr 13th, 2017
140
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.62 KB | None | 0 0
  1. /* Title: Can't Take My Eyes Off You
  2. Creator: neen at revolumna
  3. Style: S2 Flexible Squares */
  4.  
  5. /* ---------->>> GLOBAL <<<---------- */
  6.  
  7. body {
  8.     background-color: #ffffff;
  9.     background-image: url(http://i.imgur.com/ilp39Lv.jpg);
  10.     text-align: left;
  11.     font-size: 8pt;
  12.     color: #999999;
  13.     font-family: Trebuchet MS;
  14.     font-weight: 11pt;
  15. }
  16.  
  17. a,
  18. a:link,
  19. a:visited {
  20.     font-family: Georgia;
  21.     color: #999999;
  22.     font-size: 8pt;
  23.     text-decoration: none;
  24.     background: rgba(250, 250, 250, 0.7);
  25. }
  26.  
  27. a:hover {
  28.     font-family: Georgia;
  29.     font-size: 8pt;
  30.     color: #e7686c;
  31.     text-decoration: none;
  32.     -webkit-transition: all 0.8s ease-out;
  33.     -moz-transition: all 0.8s ease-out;
  34. }
  35.  
  36. #content {
  37.     width: 650px;
  38.     margin-left: auto;
  39.     margin-right: auto;
  40.     background-color: #ffffff;
  41.     -webkit-border-radius: 0px 0px 35px 35px;
  42.     -moz-border-radius: 0px 0px 35px 35px;
  43.     border-radius: 0px 0px 35px 35px;
  44. }
  45.  
  46. #maincontent {
  47.     margin: 0px 0px 0px 220px;
  48. }
  49.  
  50. /* ---------->>> HEADER <<<---------- */
  51.  
  52. #header {
  53.     background: #ffffff;
  54.     padding: 108px 0px 20px 0px;
  55.     margin-left: 0px;
  56.     margin-right: 0px;
  57.     margin-top: -20px;
  58.     text-align: center;
  59.     font-family: Arial;
  60.     color: #ffffff;
  61.     font-size: 8pt;
  62.     font-weight: normal;
  63.     text-transform: lowercase;
  64.     letter-spacing: 3px;
  65. }
  66.  
  67. .headerimage {
  68.     position: absolute;
  69.     width: 100%;
  70.     height: 140px;
  71.     margin-left: auto;
  72.     margin-right: auto;
  73.     background-image: url(http://i.imgur.com/49QPCti.png);
  74.     background-repeat: x-repeat;
  75.     z-index: -1;
  76. }
  77.  
  78. div#header a,
  79. div#header a:link,
  80. div#header a:visited {
  81.     font-family: Arial;
  82.     text-align: center;
  83.     font-size: 8pt;
  84.     color: #ffffff;
  85.     text-transform: lowercase;
  86.     letter-spacing: 3px;
  87.     padding: 10px 0px 9px 5px;
  88.     margin-right: 5px;
  89.     margin-left: 5px;
  90.     background-color: transparent;
  91. }
  92.  
  93. div#header a:hover {
  94.     font-family: Arial;
  95.     text-align: center;
  96.     font-size: 8pt;
  97.     color: #ffffff;
  98.     background-color: #e5496d;
  99.     text-transform: lowercase;
  100.     letter-spacing: 3px;
  101.     padding: 20px 0px 9px 5px;
  102.     -webkit-transition: all 0.8s ease-out;
  103.     -moz-transition: all 0.8s ease-out;
  104.     -webkit-border-radius: 30px 30px 0px 0px;
  105.     -moz-border-radius: 30px 30px 0px 0px;
  106.     border-radius: 30px 30px 0px 0px;
  107.     border-top: 3px #d4244d solid;
  108. }
  109.  
  110. div#header li.view {
  111.     padding: 3px;
  112.     margin: 0px;
  113. }
  114.  
  115. ul.navheader {
  116.     padding: 9px 0 0 0;
  117.     margin: 0px;
  118.     background-position: center;
  119.     text-align: center;
  120.     background-color: #e7678c;
  121.     width: 650px;
  122.     height: 23px;
  123. }
  124.  
  125. ul.navheader li {
  126.     display: inline;
  127.     margin: 0px;
  128.     list-style-type: none;
  129. }
  130.  
  131. ul.navheader li a:hover {}
  132.  .title {
  133.     text-align: left;
  134.     color: #ffffff;
  135.     font-family: Arial;
  136.     font-size: 0pt;
  137.     font-weight: 0pt;
  138.     display: none;
  139. }
  140.  
  141. .subtitle {
  142.     text-align: left;
  143.     color: #ffffff;
  144.     font-family: Arial;
  145.     font-size: 0pt;
  146.     font-weight: 0pt;
  147.     display: none;
  148. }
  149.  
  150. /* ---------->>> FOOTER <<<---------- */
  151.  
  152. #footer {
  153.     width: auto;
  154.     margin-top: 10px;
  155.     padding: 20px 5px 20px 5px;
  156.     text-align: center;
  157.     text-transform: lowercase;
  158.     letter-spacing: 0px;
  159.     font-size: 8pt;
  160.     font-family: Georgia;
  161.     color: #ffffff;
  162.     z-index: 100;
  163.     background-color: #e7678c;
  164.     border-top: 5px solid #e5496d;
  165.     -webkit-border-radius: 0px 0px 30px 30px;
  166.     -moz-border-radius: 0px 0px 30px 30px;
  167.     border-radius: 0px 0px 30px 30px;
  168. }
  169.  
  170. div#footer a,
  171. div#footer a:link,
  172. div#footer a:visited {
  173.     font-family: Arial;
  174.     color: #ffffff;
  175.     text-transform: lowercase;
  176.     letter-spacing: 3px;
  177.     padding: 10px 5px 10px 5px;
  178.     margin-right: 5px;
  179.     margin-left: 5px;
  180.     background-color: transparent;
  181. }
  182.  
  183. div#footer a:hover {
  184.     font-family: Arial;
  185.     color: #ffffff;
  186.     margin-right: 5px;
  187.     margin-left: 5px;
  188.     font-size: 8pt;
  189.     padding: 10px 0px 10px 5px;
  190.     letter-spacing: 0px;
  191.     -webkit-transition: all 0.8s ease-out;
  192.     -moz-transition: all 0.8s ease-out;
  193. }
  194.  
  195. #footer .viewing {}
  196.  ul.navfooter {
  197.     padding: 0px;
  198.     margin: 0px;
  199. }
  200.  
  201. ul.navfooter li {
  202.     display: inline;
  203.     margin: 0px;
  204. }
  205.  
  206. .clearfoot {
  207.     display: none;
  208.     clear: both;
  209. }
  210.  
  211. /* ---------->>> SIDEBAR <<<---------- */
  212.  
  213. #sidebar {
  214.     width: 200px;
  215.     margin-left: 5px;
  216.     padding-top: 0px;
  217.     padding-left: 10px;
  218.     padding-right: 10px;
  219.     background: #ffffff;
  220.     color: #999999;
  221.     font-family: Trebuchet MS;
  222.     font-size: 8pt;
  223.     line-height: 11pt;
  224.     text-align: left;
  225.     float: left;
  226.     display: ;
  227. }
  228.  
  229. div#sidebar a,
  230. div#sidebar a:link,
  231. div#sidebar a:visited {
  232.     color: #999999;
  233.     text-decoration: none;
  234.     background: transparent;
  235. }
  236.  
  237. div#sidebar a:hover {
  238.     text-decoration: none;
  239.     color: #e7686c;
  240. }
  241.  
  242. li.sbartitle {
  243.     list-style: none;
  244.     margin-top: 0px;
  245.     margin-left: 0x;
  246.     text-align: left;
  247.     font-weight: normal;
  248.     padding: 10px 5px 10px 13px;
  249.     color: #ffffff;
  250.     font-family: Arial;
  251.     font-size: 8pt;
  252.     text-transform: lowercase;
  253.     letter-spacing: 3px;
  254.     background-color: #e5496d;
  255.     -webkit-border-radius: 30px 0px 30px 30px;
  256.     -moz-border-radius: 30px 0px 30px 30px;
  257.     border-radius: 30px 0px 30px 30px;
  258.     border-bottom: 3px #d4244d solid;
  259. }
  260.  
  261. li.sbaritem {
  262.     margin: 1px 2px 2px 2px;
  263.     padding: 1px 2px 2px 13px;
  264.     list-style: none;
  265.     background: url(http://i.imgur.com/yRxfIFJ.gif) left center no-repeat;
  266.     border-bottom: 1px #f8f8f8 solid;
  267. }
  268.  
  269. .defaultuserpic {
  270.     text-align: center;
  271.     display: none;
  272. }
  273.  
  274. .defaultuserpic img {
  275.     background: #ffffff;
  276.     padding: 0px;
  277.     margin-bottom: 7px;
  278.     border-bottom: 3px solid #d4244d;
  279.     width: 90px;
  280.     height: 90px;
  281.     -webkit-border-radius: 0px 40px 40px 40px;
  282.     -moz-border-radius: 0px 40px 40px 40px;
  283.     border-radius: 0px 40px 40px 40px;
  284. }
  285.  
  286. .sbarheader {
  287.     padding: 0px 2px 0px 2px;
  288. }
  289.  
  290. .sbarbody {
  291.     padding: 0px 2px 0px 2px;
  292. }
  293.  
  294. .sbarbody2 {
  295.     padding: 0px 6px 0px 6px;
  296. }
  297.  
  298. table.calendar {
  299.     margin-right: auto;
  300.     margin-left: auto;
  301.     text-align: center;
  302. }
  303.  
  304. .sbarcalendar {
  305.     padding: 5px;
  306.     text-align: center;
  307.     font-family: Trebuchet MS;
  308.     color: #999999;
  309.     font-size: 8pt;
  310.     background-color: #fcfcfc;
  311.     border: 1px solid #f8f8f8;
  312. }
  313.  
  314. .sbarcalendarposts {
  315.     padding: 5px;
  316.     border: 1px solid #f8f8f8;
  317.     background-color: #ffffff;
  318.     text-align: center;
  319.     font-family: Georgia;
  320.     color: #999999;
  321.     font-size: 8pt;
  322. }
  323.  
  324. ul.sbarlist {
  325.     margin-left: 0px;
  326.     list-style: none;
  327.     padding-left: 0px;
  328. }
  329.  
  330. ul.ljtaglist li {
  331.     padding: 0px;
  332.     margin: 5px;
  333.     list-style-type: none;
  334.     background: #ffffff;
  335. }
  336.  
  337. .nav a {
  338.     color: #999999;
  339.     display: block;
  340.     font-family: Georgia;
  341.     font-size: 8pt;
  342.     background-color: #ffffff;
  343. }
  344.  
  345. .nav a:hover {
  346.     text-decoration: none;
  347.     color: #e7686c;
  348. }
  349.  
  350. .nav br {
  351.     display: none;
  352. }
  353.  
  354. /* ---------->>> TAGS, TAGS PAGE <<<---------- */
  355.  
  356. .ljtags {
  357.     margin-top: 15px;
  358.     color: #e7686c;
  359.     font-size: 7pt;
  360.     font-family: Trebuchet MS;
  361.     font-weight: normal;
  362.     margin-left: 10px;
  363.     text-transform: uppercase;
  364. }
  365.  
  366. .ljtags a,
  367. .ljtags a:link,
  368. .ljtags a:visited {
  369.     color: #999999;
  370.     font-size: 7pt;
  371.     text-transform: lowercase;
  372.     font-weight: normal;
  373.     font-family: Georgia;
  374. }
  375.  
  376. .ljtags a:hover {
  377.     color: #e7686c;
  378.     font-size: 7pt;
  379.     text-transform: lowercase;
  380.     font-weight: normal;
  381.     font-family: Georgia;
  382. }
  383.  
  384. .ljtaglist {
  385.     list-style-type: none;
  386.     padding: 0px;
  387.     margin: 0px 20px 0px 20px;
  388.     margin-left: 70px;
  389.     width: 90%;
  390.     text-transform: uppercase;
  391.     text-align: left;
  392. }
  393.  
  394. .ljtaglist li {
  395.     border-bottom: 1px solid #f8f8f8;
  396.     padding: 5px 2px 5px 20px;
  397.     color: #e7686c;
  398. }
  399.  
  400. h2 {
  401.     margin: 11px 20px 10px 20px;
  402.     text-align: left;
  403.     font-weight: normal;
  404.     padding: 10px 5px 10px 13px;
  405.     color: #ffffff;
  406.     font-family: Arial;
  407.     font-size: 8pt;
  408.     text-transform: lowercase;
  409.     letter-spacing: 3px;
  410.     background-color: #e5496d;
  411.     -webkit-border-radius: 30px 0px 30px 30px;
  412.     -moz-border-radius: 30px 0px 30px 30px;
  413.     border-radius: 30px 0px 30px 30px;
  414.     border-bottom: 3px #d4244d solid;
  415. }
  416.  
  417. ul.ljtaglist {
  418.     color: #999999;
  419.     font-family: Trebuchet MS;
  420.     font-size: 8pt;
  421.     padding: 10px 10px 10px 10px;
  422.     background: #ffffff;
  423.     text-align: left;
  424.     margin-right: 10px;
  425.     margin-left: 10px;
  426. }
  427.  
  428. /* ---------->>> ENTRY <<<---------- */
  429.  
  430. .subcontent {
  431.     padding-left: 10px;
  432.     padding-right: 10px;
  433.     padding-top: 5px;
  434.     background: #ffffff;
  435. }
  436.  
  437. .entry {
  438.     padding: 0px 6px 0px 6px;
  439.     margin: 0px;
  440.     color: #999999;
  441.     font-family: Trebuchet MS;
  442.     font-size: 8pt;
  443.     line-height: 11pt;
  444.     text-align: left;
  445.     background: #ffffff;
  446. }
  447.  
  448. .entry ul li {
  449.     padding-left: 0px;
  450.     margin-left: 0px;
  451.     list-style: decimal-leading-zero;
  452.     list-style-position: outside;
  453. }
  454.  
  455. .entry ol li {
  456.     padding-left: 0px;
  457.     margin-left: 0px;
  458.     list-style: decimal-leading-zero;
  459.     list-style-position: outside;
  460. }
  461.  
  462. blockquote {
  463.     margin: 5px 5px;
  464.     padding: 5px;
  465.     color: #e7686c;
  466.     font-size: 8pt;
  467.     font-family: Trebuchet MS;
  468.     font-weight: 11pt;
  469.     background-color: #fcfcfc;
  470.     border: 1px solid #f8f8f8;
  471.     text-align: left;
  472. }
  473.  
  474. div.entry_text a {
  475.     background-color: transparent;
  476. }
  477.  
  478. /* ---------->>> USERPIC, USERPIC FRIENDS <<<---------- */
  479.  
  480. .userpic,
  481. .userpicfriends {
  482.     position: relative;
  483.     float: right;
  484.     background-color: transparent !important;
  485.     margin-right: -117px !important;
  486.     margin-top: 25px !important;
  487.     z-index: 15;
  488.     text-align: center;
  489.     font-family: Georgia;
  490.     font-size: 8pt;
  491.     z-index: 15;
  492.     display: ;
  493. }
  494.  
  495. .userpic img,
  496. .userpicfriends img {
  497.     background: transparent !important;
  498.     width: 90px;
  499.     height: 90px;
  500.     margin-bottom: 3px;
  501.     -webkit-border-radius: 0px 40px 40px 40px;
  502.     -moz-border-radius: 0px 40px 40px 40px;
  503.     border-radius: 0px 40px 40px 40px;
  504.     border-bottom: #d4244d solid 3px;
  505. }
  506.  
  507. .userpic font,
  508. .userpicfriends font {
  509.     color: #999999 !important;
  510.     background: transparent !important;
  511.     font-size: 7pt;
  512.     font-family: Georgia;
  513.     text-transform: lowercase;
  514.     text-align: center;
  515. }
  516.  
  517. .userpicfriends a {
  518.     display: yes;
  519. }
  520.  
  521. .userpicfriends br {
  522.     display: block;
  523.     height: 0;
  524. }
  525.  
  526. /* ---------->>> DATE, SUBJECT, CURRENTS <<<---------- */
  527.  
  528. .date {
  529.     margin-right: 5px;
  530.     margin-top: -5px;
  531.     text-align: right;
  532.     padding-bottom: 2px;
  533.     color: #999999;
  534.     font-family: Georgia;
  535.     font-size: 7pt;
  536.     letter-spacing: 3px;
  537.     text-transform: lowercase;
  538.     background-color: #ffffff;
  539. }
  540.  
  541. .subject {
  542.     margin: -1px 7px -16px 2px;
  543.     padding: 10px 5px 10px 13px;
  544.     background-color: #e5496d;
  545.     -webkit-border-radius: 30px 0px 30px 30px;
  546.     -moz-border-radius: 30px 0px 30px 30px;
  547.     border-radius: 30px 0px 30px 30px;
  548.     border-bottom: 3px #d4244d solid;
  549.     text-align: left;
  550.     font-weight: normal;
  551.     color: #ffffff;
  552.     font-family: Arial;
  553.     font-size: 8pt;
  554.     text-transform: lowercase;
  555.     letter-spacing: 3px;
  556. }
  557.  
  558. .subject a,
  559. .subject a:link,
  560. .subject a:visited {
  561.     text-align: left;
  562.     font-weight: normal;
  563.     color: #ffffff;
  564.     font-family: Arial;
  565.     font-size: 8pt;
  566.     text-transform: lowercase;
  567.     letter-spacing: 3px;
  568.     background: transparent;
  569. }
  570.  
  571. .subject a:hover {
  572.     color: #ffffff;
  573. }
  574.  
  575. .datesubject {
  576.     margin-top: 10px;
  577.     padding-left: 0px;
  578.     padding-bottom: 30px;
  579.     background-color: #ffffff;
  580. }
  581.  
  582. .currents strong,
  583. .currentmood strong,
  584. .currentmusic .currentlocation,
  585. .ljtags strong {
  586.     color: #e7686c;
  587.     font-size: 7pt;
  588.     font-weight: normal;
  589.     text-transform: uppercase;
  590.     font-family: Trebuchet MS;
  591.     margin-top: 0px;
  592. }
  593.  
  594. .currents,
  595. .currentmood,
  596. .currentmusic,
  597. .currentlocation {
  598.     color: #999999;
  599.     font-size: 7pt;
  600.     font-family: Trebuchet MS;
  601.     margin-top: 0px;
  602. }
  603.  
  604. .currentlocation a,
  605. .currentlocation a:link,
  606. .currentlocation a:visited {
  607.     color: #999999;
  608.     font-size: 7pt;
  609.     font-family: Trebuchet MS;
  610.     background: transparent;
  611. }
  612.  
  613. .currentlocation a:hover {
  614.     color: #999999;
  615.     font-size: 7pt;
  616.     font-family: Trebuchet MS;
  617. }
  618.  
  619. .currentlocation {
  620.     margin-left: 10px;
  621. }
  622.  
  623. .currentmood {
  624.     margin-left: 10px;
  625. }
  626.  
  627. .currentmusic {
  628.     margin-left: 10px;
  629. }
  630.  
  631. .currentgroups {
  632.     margin-left: 10px;
  633. }
  634.  
  635. /* ---------->>> COMMENTS <<<---------- */
  636.  
  637. .comments {
  638.     font-family: Georgia;
  639.     font-size: 8pt;
  640.     text-align: right;
  641.     padding: 8px;
  642.     position: relative;
  643.     top: 0px;
  644.     text-transform: lowercase;
  645. }
  646.  
  647. div.comments a,
  648. div.comments a:link,
  649. div.comments a:visited {
  650.     color: #999999;
  651.     text-transform: none;
  652.     background: transparent;
  653. }
  654.  
  655. div.comments a:hover {
  656.     color: #E7686C;
  657.     text-transform: none;
  658. }
  659.  
  660. .datesubjectcomment {
  661.     background-color: #ffffff;
  662.     padding: 5px;
  663.     margin-top: 10px;
  664.     color: #e7686c;
  665.     font-size: 7pt;
  666. }
  667.  
  668. .userpiccomment {
  669.     position: relative;
  670.     top: -10px;
  671.     margin: 0px 10px -10px 10px;
  672.     margin-bottom: -5px;
  673.     z-index: 15;
  674.     float: left;
  675.     width: 70px;
  676.     height: 70px;
  677.     -webkit-border-radius: 0px 40px 40px 40px;
  678.     -moz-border-radius: 0px 40px 40px 40px;
  679.     border-radius: 0px 40px 40px 40px;
  680.     border-bottom: #d4244d solid 3px;
  681. }
  682.  
  683. }
  684.  
  685. .box {
  686.     clear: left;
  687. }
  688.  
  689. input,
  690. textarea {
  691.     background-color: #ffffff;
  692.     padding: 3px;
  693.     font-size: 8pt;
  694.     font-family: Trebuchet MS;
  695.     color: #999999;
  696.     border: 1px solid #f8f8f8;
  697. }
  698.  
  699. textarea.textbox {
  700.     width: 96% !important;
  701.     border: 1px #f8f8f8 solid;
  702. }
  703.  
  704. .reply {
  705.     position: relative;
  706.     margin: 10px 30px 10px 30px;
  707.     padding: 25px 10px 10px 10px;
  708.     text-align: left;
  709.     font-family: Trebuchet MS;
  710.     font-size: 8pt;
  711.     line-height: 11pt;
  712.     background-color: #ffffff;
  713.     color: #999999;
  714. }
  715.  
  716. .replytosubject {
  717.     font-weight: bold;
  718. }
  719.  
  720. .commentreply {
  721.     position: relative;
  722.     margin: 10px;
  723.     font-size: 8pt;
  724.     font-family: Trebuchet Ms;
  725.     color: #999999;
  726. }
  727.  
  728. .commentbox {
  729.     padding: 5px;
  730.     margin: 10px;
  731.     margin-bottom: -5px;
  732.     margin-top: -5px;
  733. }
  734.  
  735. .commentboxpartial {
  736.     padding: 10px;
  737.     margin: 40px;
  738. }
  739.  
  740. .commentinfo {
  741.     background-color: #ffffff;
  742.     margin-top: 10px;
  743.     width: 100%;
  744. }
  745.  
  746. /* ---------->>> OTHER <<<---------- */
  747.  
  748. .clear {
  749.     display: none;
  750.     height: 0px;
  751. }
  752.  
  753. .separator {
  754.     height: 15px;
  755. }
  756.  
  757. .skiplinks {
  758.     text-align: center;
  759.     padding: 10px;
  760.     color: #e7686c;
  761. }
  762.  
  763. .skiplinks a {
  764.     background-color: transparent;
  765. }
  766.  
  767. /* ----->>> TINY ICONS <<<------ */
  768. /* Generated by Malionette's Tiny Icon Generator, http://malionette.net/generator/tinylite.html */
  769.  
  770. span.i-ljuser img[src*="img/userinfo_v8.svg"] {
  771.     width: 0 !important;
  772.     height: 0 !important;
  773.     background: transparent url(http://i.imgur.com/Q9xbccR.png) no-repeat !important;
  774.     padding: 12px 10px 0 2px !important;
  775. }
  776.  
  777. span.i-ljuser img[src*="img/community.gif"] {
  778.     width: 0 !important;
  779.     height: 0 !important;
  780.     background: transparent url(http://i.imgur.com/o5PR8af.png) no-repeat !important;
  781.     padding: 12px 10px 0 2px !important;
  782. }
  783.  
  784. img[src*="img/icon_protected.gif"] {
  785.     width: 0 !important;
  786.     height: 0 !important;
  787.     background: transparent url(http://i.imgur.com/01B6dis.png) no-repeat !important;
  788.     padding: 10px 10px 0 2px !important;
  789. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement