Guest User

Untitled

a guest
Mar 26th, 2015
236
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 83.40 KB | None | 0 0
  1. /*
  2.             Version 3.0
  3.             Stylesheet by Cryptonaut
  4.             Last modified: 20 FEB 2015
  5.             Details: This is a custom template made by /u/Cryptonaut.
  6.             Find out more on /r/Naut.
  7.  
  8.             --------------------------------------------------------------------------
  9.             [Changelog]
  10.             v1.0 - Initial Design - /r/Naut Template
  11.             v1.5 - Update 1 - New colours, icons and a whole bunch of fixes.
  12.             V1.6 - Update 2 - Adjustments to make Naut come back to the reddit UX.
  13.             V1.7 - Update 3 - A whole lot of UI tweaks and fixes.
  14.             V2.0 - Update 4 - Naut is now on GitHub, added nightmode and some fixes.
  15.             V2.1 - Update 5 - Initial CSS3 update - Added transitions and minor responsive tweaks.
  16.             V2.2 - Update 6 - Bugfixes and the return of the suggest-title button.
  17.             V2.3 - Update 7 - Bugfixes, including the search button.
  18.             V3.0 - Update 8 - Complete rewrite to include easier customizing of colours,
  19.                               sizes and margins, more transitions and animations and
  20.                               much more.
  21.  
  22.             V3.0 - Update 9 - Complete UI revamp. See /r/Naut for more.
  23.  
  24.             -------------------------------------------------------------------------- */
  25.  
  26.  
  27.  
  28.         *, *:before, *:after { -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
  29.  
  30.         body {
  31.             overflow-x: hidden;
  32.             background-color: #eeeeee;
  33.             min-width: 640px;
  34.         }
  35.            
  36.             /* General Styles - Links / Buttons / Inputs */
  37.             a {
  38.                 color: #4F8EF7;
  39.                 transition: color 0.15s ease;
  40.             }
  41.  
  42.             input:not([type="submit"]), textarea, .roundfield textarea, .roundfield input[type=text], .roundfield input[type=url], .roundfield input[type=password], .roundfield input[type=number],
  43.             .linefield textarea, .linefield input[type=text], .linefield input[type=password],
  44.             .pretty-form input[type=text], .pretty-form textarea, .pretty-form input[type=password], .pretty-form input[type=number] {
  45.                 box-shadow: none!important;
  46.                 background-color: #fff;
  47.                 border: 1px solid #e5e5e5;
  48.                 color: #707070;
  49.                 transition: all 0.15s ease!important;
  50.             }
  51.  
  52.                 input:hover, textarea:hover {
  53.                     border-color: #C5C5C5;
  54.                 }
  55.  
  56.                     input:focus, textarea:focus {
  57.                         outline: none!important;
  58.                         border-color: #4F8EF7;
  59.                         color: #4D5763;
  60.                     }
  61.  
  62.             .btn, button {
  63.                 margin: 4px 8px 4px 0px;
  64.                 padding: 1px 12px 2px 12px;
  65.                 background-color: #fff;
  66.                 border: 1px solid #d4d4d4;
  67.                 border-radius: 2px;
  68.                 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  69.                 -ms-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  70.                 -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  71.                 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  72.                 color: #737373;
  73.                 text-transform: capitalize;
  74.                 font-weight: bold;
  75.                 line-height: 26px;
  76.                 cursor: default;
  77.                 transition: all 0.15s ease;
  78.                 height: 29px;
  79.             }
  80.  
  81.                 .btn:hover, button:hover {
  82.                     -moz-box-shadow: 0 1px 0 0 rgba(0,0,0,0.27);
  83.                     -ms-box-shadow: 0 1px 0 0 rgba(0,0,0,0.27);
  84.                     -webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.27);
  85.                     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.27);
  86.                     color: #4D5763;
  87.                 }
  88.  
  89.                     .btn:active, button:active {
  90.                         -moz-box-shadow: inset 0 2px 0 #d6d6d6;
  91.                         -ms-box-shadow: inset 0 2px 0 #d6d6d6;
  92.                         -webkit-box-shadow: inset 0 2px 0 #D6D6D6;
  93.                         box-shadow: inset 0 2px 0 #D6D6D6;
  94.                         background-color: #E5E5E5;
  95.                         color: #999;
  96.                     }
  97.  
  98.                     .btn:focus, button:focus {outline: none;}
  99.  
  100.  
  101.  
  102.             /* Header */
  103.             #header {
  104.                 margin: 0px;
  105.                 height: 0px;
  106.                 border: none;
  107.             }
  108.  
  109.  
  110.                 #sr-header-area {
  111.                     background-color: rgba(0,0,0,0.05);
  112.                     border: 0px solid;
  113.                     transition: all 0.15s ease;
  114.                     height: 24px;
  115.                     line-height: 23px;
  116.                 }
  117.  
  118.                     #sr-header-area .width-clip {right: 300px;}
  119.                         body:not(.loggedin) #sr-header-area .width-clip {right: 340px;}
  120.  
  121.                     #sr-header-area .sr-list {margin-right: 48px;}
  122.  
  123.                     #sr-header-area .sr-bar a, #sr-more-link, #sr-header-area .separator, #sr-header-area .dropdown.srdrop .selected {
  124.                         background-color: transparent;
  125.                         color: rgba(255,255,255,0.6);
  126.                         transition: all 0.15s ease;
  127.                     }
  128.  
  129.                         #sr-header-area:hover .sr-bar a,
  130.                         #sr-header-area:hover #sr-more-link,
  131.                         #sr-header-area:hover .seperator,
  132.                         #sr-header-area:hover .dropdown.srdrop .selected {color: rgba(255,255,255,1);}
  133.  
  134.                         #sr-header-area .sr-bar a:hover, #sr-more-link:hover, #sr-header-area .dropdown.srdrop .selected:hover {
  135.                             background-color: transparent;
  136.                             border: 0px solid;
  137.                             transition: all 0.15s ease;
  138.                         }
  139.  
  140.                             a.random.choice {
  141.                                 padding-top: 2px;
  142.                                 position: relative;
  143.                                 display: inline-block;
  144.                                 margin-top: -2px;
  145.                             }
  146.  
  147.                     #sr-header-area .dropdown.srdrop .selected {
  148.                         margin: 0px 12px 0px 8px ;
  149.                         padding: 0px;
  150.                         background-image: none;
  151.                     }
  152.  
  153.                         #sr-header-area .dropdown.srdrop .selected:hover {text-decoration: underline;}
  154.  
  155.                         #sr-header-area .dropdown.srdrop .selected:after {
  156.                             position: relative;
  157.                             content: "▼";
  158.                             margin-left: 4px;
  159.                             font-size: 10px;
  160.                         }
  161.  
  162.  
  163.                         /* My Subreddits Dropdown */
  164.                         #sr-header-area .drop-choices.srdrop {
  165.                             background-color: #fff;
  166.                             border: none;
  167.                             box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
  168.                         }
  169.  
  170.                             #sr-header-area .drop-choices a.choice {
  171.                                 border-bottom: 1px solid #edeeee;
  172.                                 color: #4D5763;
  173.                                 padding: 2px;
  174.                             }
  175.  
  176.                                 #sr-header-area .drop-choices a.choice:hover {
  177.                                     background-color: #f1f1f1;
  178.                                 }
  179.  
  180.  
  181.                 #header-img.default-header, #header-img {
  182.                     z-index: 99;
  183.                     width: 0px;
  184.                     padding-left: 48px;
  185.                     height: 48px;
  186.                     background-image: url(%%spritesheet%%);
  187.                     background-position: -208px -48px;
  188.                     position: relative;
  189.                     top: 0px;
  190.                     margin: 0;
  191.                 }
  192.  
  193.                     #header-img.default-header:hover, #header-img:hover {background-position: -208px -96px;}
  194.  
  195.  
  196.                 #header .pagename {
  197.                     font-size: 0;
  198.                 }
  199.  
  200.                     #header .pagename a {
  201.                         display: inline-block;
  202.                         color: #fff;
  203.                         font-size: 22px;
  204.                         padding: 11px;
  205.                         font-weight: bold;
  206.                         position: relative;
  207.                         top: 3px;
  208.                         font-family: arial;
  209.                         margin: 0 4px;
  210.                         vertical-align: top;
  211.                         transition: background-color 0.25s ease;
  212.                     }
  213.  
  214.                         #header .pagename a:hover {
  215.                             text-decoration: none;
  216.                             background-color: rgba(0,0,0,0.08);
  217.                         }
  218.  
  219.                         #header .pagename a:before {
  220.                             content: "/r/";
  221.                             font-size: 18px;
  222.                             font-variant: normal;
  223.                             letter-spacing: 1px;
  224.                         }
  225.  
  226.  
  227.                 /* Tabmenu (hot/new/top) */
  228.                 #header-bottom-left {
  229.                     position: absolute;
  230.                     top: 99px;
  231.                     left: 16px;
  232.                 }
  233.  
  234.                     #header .tabmenu {
  235.                         border: none;
  236.                         margin: 0px;
  237.                     }
  238.  
  239.                         #header .tabmenu li a {
  240.                             display: inline-block;
  241.                             margin: 0px 4px;
  242.                             padding: 16px 16px;
  243.                             background-color: transparent;
  244.                             border: 0px;
  245.                             border-radius: 0px;
  246.                             color: rgba(255,255,255,0.6);
  247.                             text-transform: uppercase;
  248.                             font-weight: normal;
  249.                             font-size: 14px;
  250.                             font-family: Arial, sans-serif;
  251.                             transition: color 0.25s ease, background-color 0.25s ease;
  252.                         }
  253.  
  254.                             /* IF Headerimg is though */
  255.                             #header .tabmenu li a {
  256.                                 color: #fff;
  257.                             }
  258.  
  259.                                 #header .tabmenu li a, .pagename a {text-shadow: 0px 1px 8px rgba(0, 0, 0, 0.5);}
  260.  
  261.                             #header .tabmenu li a:hover {
  262.                                 color: rgba(255,255,255,1);
  263.                                 background-color: rgba(0,0,0,0.08);
  264.                             }
  265.  
  266.                             #header .tabmenu li.selected a {
  267.                                 padding: 16px 16px 14px 16px;
  268.                                 background-color: transparent;
  269.                                 border: 0px;
  270.                                 border-bottom: 2px solid #fff;
  271.                                 color: rgba(255,255,255,100);
  272.                                 font-weight: bold;
  273.                             }
  274.  
  275.                                 #header .tabmenu li.selected a:hover {
  276.                                     background-color: rgba(0,0,0,0.08);
  277.                                 }
  278.  
  279.                         .listing-page .tabmenu li:nth-of-type(3), .wiki-page .tabmenu li:nth-of-type(3),    /* Rising */
  280.                         .listing-page .tabmenu li:nth-of-type(4), .wiki-page .tabmenu li:nth-of-type(4),    /* Controversial */
  281.                         .listing-page .tabmenu li:nth-of-type(6), .wiki-page .tabmenu li:nth-of-type(6),    /* Self-serve advertising */
  282.                         .listing-page .tabmenu li:nth-of-type(9), .wiki-page .tabmenu li:nth-of-type(9) /* gilded */
  283.                         {display:none;}
  284.  
  285.  
  286.                
  287.  
  288.  
  289.             /* Sidebar */
  290.             .side {
  291.                 margin: 200px 16px 0px 0px;
  292.                 padding: 6px 16px;
  293.                 background-color: #fff;
  294.                 border-radius: 2px;
  295.                 box-shadow: 0px 1px 5px rgba(0,0,0,0.16);
  296.             }
  297.  
  298.                 /* Objects from top to bottom */
  299.                 #header-bottom-right {
  300.                     position: absolute;
  301.                     top: 0px;
  302.                     right: 0px;
  303.                     width: auto;
  304.                     max-width: 300px;
  305.                     height: 24px;
  306.                     background-color: transparent;
  307.                     font-size: 11px;
  308.                     color: rgba(255,255,255,0.45);
  309.                     padding: 5px 8px 4px 2px;
  310.  
  311.                 }
  312.  
  313.                     body:not(.loggedin) #header-bottom-right {max-width: 340px;}
  314.                     #header-bottom-right a {color: #fff;}
  315.                         #header-bottom-right a:hover {text-decoration: underline;}
  316.  
  317.                     .user .userkarma {
  318.                         font-weight: normal;
  319.                         color: rgba(255,255,255,0.45);
  320.                         border: none;
  321.                         font-size: 9px;
  322.                         transition: all 0.15s ease;
  323.                     }
  324.  
  325.                     .separator, .user {color: rgba(255,255,255,0.45);}
  326.  
  327.  
  328.                     #mail, #modmail {
  329.                         width: 16px;
  330.                         height: 14px;
  331.                         background-image: url(%%spritesheet%%) !important;
  332.                         background-repeat: no-repeat !important;
  333.                         background-color: transparent;
  334.                         transition: all 0.25s ease;
  335.                     }
  336.  
  337.  
  338.                         #mail {
  339.                             top: -2px;
  340.                             overflow: visible;
  341.                         }
  342.  
  343.                             #mail.nohavemail {background-position: -32px -0px;}
  344.  
  345.                             #mail.havemail {
  346.                                 background-position: -32px -16px;
  347.                                 opacity: 1;
  348.                             }
  349.  
  350.                             .message-count {
  351.                                 background-color: #f50;
  352.                                 position: relative;
  353.                                 top: -1px;
  354.                             }
  355.  
  356.                             #mail.havemail:before {
  357.                                 position: fixed;
  358.                                 padding: 16px 24px;
  359.                                 bottom: 24px;
  360.                                 z-index: 100;
  361.                                 background-color: #EA4848;
  362.                                 border-radius: 2px;
  363.                                 box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  364.                                 color: #fff;
  365.                                 width: 300px;
  366.                                 height: 48px;
  367.                                 left: 24px;
  368.                                 content: "You have new messages!";
  369.                                 text-indent: 0px;
  370.                                 font-size: 14px;
  371.                                 font-family: arial, sans-serif;
  372.                                 line-height: 1;
  373.                                 -webkit-transform:translateY(112px);
  374.                                 transform:translateY(112px);
  375.                                 transition: background-color 0.25s ease, box-shadow 0.25s ease;
  376.                                 background-image: url(%%spritesheet%%);
  377.                                 background-position: 269px -32px;
  378.                                 background-repeat: no-repeat;
  379.                             }
  380.  
  381.                                 #mail.havemail:hover:before {
  382.                                     background-color: #ec5b5b;
  383.                                     box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.48);
  384.                                 }
  385.  
  386.                                     #mail.havemail:active:before {
  387.                                         background-color: #c73d3d;
  388.                                         box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.76)
  389.                                     }
  390.  
  391.  
  392.                         #modmail {top: -3px;}
  393.  
  394.                             #modmail.nohavemail {background-position: -48px -0px;}
  395.                             #modmail.havemail {background-position: -48px -16px;opacity: 1;}
  396.  
  397.  
  398.  
  399.  
  400.                     /* preferences & logout icons */
  401.                     #header-bottom-right a.pref-lang, .loggedin .logout a{
  402.                         background-position: -0px -16px;
  403.                         background-image: url(%%spritesheet%%);
  404.                         width: 16px;
  405.                         height: 14px;
  406.                         display: inline-block;
  407.                         text-indent: -9999px;
  408.                         margin: 0px;
  409.                         position: relative;
  410.                         top: -1px;
  411.                         transition: all 0.25s ease;
  412.                     }
  413.  
  414.                         .loggedin .logout a {background-position: -16px -0px;}
  415.  
  416.                     .side:after {
  417.                         display: block;
  418.                         margin: 10px 0px;
  419.                         padding: 10px 0px;
  420.                         color: #5B92FA;
  421.  
  422.                         /* Please do not change or remove this line. */
  423.                         content: "CSS Theme via /r/Naut";
  424.                         /* Please do not change or remove this line. */
  425.  
  426.                         text-transform: none;
  427.                         font-size: 16px;
  428.                         font-family: arial,sans-serif;
  429.                         position: absolute;
  430.                         width: 300px;
  431.                         text-align: center;
  432.                         right: 16px;
  433.                     }
  434.  
  435.                 /* Search */
  436.                 #search {
  437.                     position: absolute;
  438.                     right: 16px;
  439.                     top: 96px;
  440.                     z-index: 1;
  441.                     width: 300px;
  442.                 }
  443.  
  444.                     #search input[type=text] {
  445.                         padding: 10px 25px 10px 16px;
  446.                         border: 0px solid;
  447.                         border-radius: 2px;
  448.                         box-shadow: 0px 1px 5px rgba(0,0,0,0.24) !important;
  449.                         transition: all 0.25s ease;
  450.                     }
  451.  
  452.                         #search input[type=text]:hover {
  453.                                 box-shadow: 0px 3px 12px rgba(0,0,0,0.32) !important;
  454.                         }
  455.  
  456.                             #search input[type=text]:focus {
  457.                                 border-radius: 2px 2px 0px 0px;
  458.                             }
  459.  
  460.                             #search input[type=text]:focus:hover {box-shadow: 0px 1px 5px rgba(0,0,0,0.24) !important;}
  461.  
  462.                             #search input[type="text"]:-moz-placeholder {font-size: 0;}
  463.                             #search input[type="text"]::-webkit-input-placeholder {font-size: 0;}
  464.                             #search input[type="text"]:-ms-input-placeholder {font-size: 0;}
  465.  
  466.                             #search input[type="text"]:-moz-placeholder::after {
  467.                                 font-size: 14px;
  468.                                 content: "Search..";
  469.                                 position: relative;
  470.                                 top: 1px;
  471.                             }
  472.  
  473.                             #search input[type="text"]::-webkit-input-placeholder::after {
  474.                                 font-size: 14px;
  475.                                 content: "Search..";
  476.                                 position: relative;
  477.                                 top: 1px;
  478.                             }
  479.  
  480.                             #search input[type="text"]:-ms-input-placeholder::after {
  481.                                 font-size: 14px;
  482.                                 content: "Search..";
  483.                                 position: relative;
  484.                                 top: 1px;
  485.                             }
  486.  
  487.  
  488.                             #search input[type=text]::-webkit-input-placeholder {color:#B3B3B3;}
  489.                             #search input[type=text]:-moz-placeholder {color:#B3B3B3;}
  490.                             #search input[type=text]::-moz-placeholder {color:#B3B3B3;}
  491.                             #search input[type=text]:-ms-input-placeholder {color:#B3B3B3;}
  492.  
  493.                             #search input[type=submit] {
  494.                                 height: 32px;
  495.                                 width: 32px;
  496.                                 margin-left: -38px;
  497.                                 background-image: url(%%spritesheet%%);
  498.                                 background-position: -215px -231px;
  499.                                 background-repeat: no-repeat;
  500.                                 border:none !important;
  501.                                 border-radius: 16px;
  502.                                 background-color: rgba(0,0,0,0.00);
  503.                                 transition: background-color 0.15s ease;
  504.                             }
  505.  
  506.                                 #search input[type=submit]:hover {
  507.                                     background-image: url(%%spritesheet%%);
  508.                                     background-position: -215px -231px;
  509.                                     background-repeat: no-repeat;
  510.                                     background-color: rgba(0,0,0,0.05);
  511.                                 }
  512.  
  513.                     /* Expando */
  514.                     #search #searchexpando {
  515.                         background-color: #f2f2f2;
  516.                         border: none;
  517.                         border-radius: 0px 0px 2px 2px;
  518.                         margin-top: -5px;
  519.                         padding-top: 10px;
  520.                         padding-left: 0px;
  521.                         padding-right: 0px;
  522.                         height: 57px;
  523.                         line-height: 45px;
  524.                     }
  525.  
  526.                         #search #searchexpando label {
  527.                             padding: 18px 8px 17px 8px;
  528.                             cursor: pointer;
  529.                             transition: all 0.1s ease;
  530.                         }
  531.  
  532.                             #search #searchexpando label:hover {background-color: rgba(0,0,0,0.1);}
  533.                                 #search #searchexpando label:active {background-color: rgba(0,0,0,0.25);}
  534.  
  535.                         #search #searchexpando p {display: none !important;}
  536.  
  537.  
  538.                 /* Submit Button */
  539.                 .sidebox.submit.submit-text .morelink {
  540.                     position: absolute;
  541.                     top: 148px;
  542.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  543.                     background-color: #516ae8;
  544.                     background-image: url(%%spritesheet%%) !important;
  545.                     background-position: 268px -214px!important;
  546.                     background-repeat: no-repeat !important;
  547.                     right: 16px;
  548.                     width: 300px;
  549.                     height: 36px;
  550.                     border-radius: 2px;
  551.                     line-height: 36px;
  552.                     border: none;
  553.                     text-align: left;
  554.                     padding: 0px 16px;
  555.                     transition: all 0.25s ease;
  556.                     font-family: verdana, arial, sans-serif;
  557.                 }  
  558.  
  559.                     .sidebox.submit.submit-text .morelink:hover {
  560.                         background-color: #5a72ee;
  561.                         box-shadow: 0px 5px 8px rgba(0,0,0,0.48);
  562.                     }
  563.  
  564.                         .sidebox.submit.submit-text .morelink:active {
  565.                             background-color: #4059DB;
  566.                             box-shadow: 0px 8px 12px rgba(0,0,0,0.60);
  567.                         }
  568.  
  569.  
  570.                     .sidebox.submit.submit-text .morelink a {
  571.                         color: #fff;
  572.                         font-weight: normal;
  573.                         font-size: 14px;
  574.                         letter-spacing: 0px;
  575.                     }
  576.  
  577.  
  578.                     .sidebox.submit.submit-text .morelink:after {
  579.                         content: "Please remember to read the rules. Thank you!";
  580.                         padding: 16px;
  581.                         width: 300px;
  582.                         position: absolute;
  583.                         right: 0px;
  584.                         margin-top: 0px;
  585.                         display: block;
  586.                         background-color: #516AE8;
  587.                         color: #fff;
  588.                         letter-spacing: 0px;
  589.                         z-index: 100;
  590.                         opacity: 0;
  591.                         transition: all 0.25s ease;
  592.                         transition-delay: 0s;
  593.                         font-weight: normal;
  594.                         line-height: 1.4em;
  595.                         border-radius: 2px 2px 0px 0px;
  596.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  597.                         visibility: hidden;
  598.                         pointer-events: none;
  599.                     }
  600.  
  601.                         .sidebox.submit.submit-text .morelink:hover:after {
  602.                             margin-top: 16px;
  603.                             opacity: 100;
  604.                             visibility: visible;
  605.                             transition-delay: 0.25s;
  606.                         }
  607.  
  608.                     /* Restricted button */
  609.                     .disabled .morelink {
  610.                         box-shadow: none !important;
  611.                         background-color: #CFCFCF;
  612.  
  613.                     }
  614.  
  615.                         .disabled .morelink a {color: #4d5763;}
  616.  
  617.                         .disabled .morelink:after {
  618.                             content: "You must be approved by the moderators in order to submit.";
  619.                             background-color: #CFCFCF;
  620.                             color: #4d5763;
  621.                         }
  622.  
  623.  
  624.                 .account-activity-box, .sidebox.create, .morelink .nub,.sidebox.submit.submit-link {display: none;}
  625.  
  626.  
  627.                 /* Login form */
  628.                 .login-form-side {border: none;}
  629.  
  630.                     .login-form-side input[type=text], .login-form-side input[type=password] {width: 128px;}
  631.  
  632.  
  633.                    
  634.                 /* Redditname + Subscibers & Here right now */
  635.                 .titlebox h1 {
  636.                     color: #4d5763;
  637.                     margin-bottom: 6px;
  638.                 }
  639.  
  640.  
  641.                 .titlebox span.subscribers, .titlebox .users-online, .titlebox .number {
  642.                     color: #999999;
  643.                     font-size: 12px;
  644.                     position: relative;
  645.                     top: -2px;
  646.                     left: -2px;
  647.                 }
  648.  
  649.                     div.titlebox span.word {display: none;}
  650.                     .titlebox .users-online {display: inline;}
  651.                     .titlebox .users-online:before {display: none;}
  652.                     div.titlebox span.number:after {content: " Snipers |";}
  653.                     .titlebox .users-online .number {font-style: italic;}
  654.                     .titlebox .users-online .number:before {content: "";}
  655.                     .titlebox .users-online .number:after {content: " here right now";}
  656.                     .titlelebox .word {display: none;}
  657.                     .titlebox .users-online, .titlebox .number {cursor: text;} 
  658.  
  659.  
  660.                 .titlebox .tagline {
  661.                         font-size: 12px;
  662.                         margin: 0;
  663.                     }
  664.  
  665.                         .titlebox .tagline:after {
  666.                             content: "";
  667.                             height: 2px;
  668.                             background-color: #f2f2f2;
  669.                             display: block;
  670.                             margin-top: 16px;
  671.                         }
  672.  
  673.                     .titlebox .tagline a.flairselectbtn {
  674.                         color: #4F8EF7;
  675.                     }  
  676.                     .titlebox .tagline a.flairselectbtn:after {content: " flair"}
  677.                     .titlebox .tagline .flair:before {content: "";}
  678.  
  679.  
  680.                 .titlebox form.toggle, .leavemoderator, .titlebox .tagline a.author, .sidebox .subtitle {display: none;}
  681.  
  682.                 /* Subscribe Button */
  683.                 .titlebox .fancy-toggle-button {position: relative;}
  684.  
  685.                 .titlebox .fancy-toggle-button .add, .fancy-toggle-button .remove {
  686.                     text-indent: -9999px;
  687.                     height: 48px;
  688.                     width: 48px;
  689.                     position: absolute;
  690.                     right: -268px;
  691.                     top: -36px;
  692.                     background-image: none;
  693.                     border-radius: 32px;
  694.                     background-color: #51A3E8;
  695.                     border: 0px solid;
  696.                     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
  697.                     background-image: url(%%spritesheet%%);
  698.                     transition: all 0.25s ease, background-position 0.25s ease, background-color 0.5s ease;
  699.                     outline: none !important;
  700.                 }
  701.  
  702.                     .titlebox .fancy-toggle-button .add:hover, .fancy-toggle-button .remove:hover {box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.48);}
  703.  
  704.                         .titlebox .fancy-toggle-button .add:active, .fancy-toggle-button .remove:active {
  705.                             box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.64);
  706.                         }
  707.  
  708.                     .titlebox .fancy-toggle-button .add {
  709.                         background-color: #516AE8;
  710.                         background-position: -208px -144px;
  711.                     }
  712.  
  713.                         .titlebox .fancy-toggle-button .add:hover {background-color: #5A72EE;}
  714.  
  715.                             .titlebox .fancy-toggle-button .add:active {
  716.                                 background-color: #fff;
  717.                                 background-position: -208px -192px
  718.                             }
  719.  
  720.                     .fancy-toggle-button .remove {
  721.                         background-color: #fff;
  722.                         background-position: -208px -192px;
  723.                     }
  724.  
  725.                         .fancy-toggle-button .remove:hover {background-color: rgba(0,0,0,0.05);}
  726.  
  727.                             .fancy-toggle-button .remove:active {
  728.                                 background-color: #5A72EE;
  729.                                 background-position: -208px -144px
  730.                             }
  731.  
  732.  
  733.                     /* Hover Message */
  734.                     .titlebox .fancy-toggle-button .add:after, .fancy-toggle-button .remove:after {
  735.                         display: block;
  736.                         visibility: hidden;
  737.                         position: absolute;
  738.                         z-index: 1000;
  739.                         right: -26px;
  740.                         margin-top: 16px;
  741.                         padding: 12px;
  742.                         background-color: rgba(79, 77, 192, 0);
  743.                         border: none;
  744.                         border-radius: 2px;
  745.                         color: rgba(255, 255, 255, 0);
  746.                         text-align: center;
  747.                         letter-spacing: 1px;
  748.                         font-weight: normal;
  749.                         font-size: 13px;
  750.                         transition: all 0.25s ease;
  751.                         pointer-events: none;
  752.                         text-indent: 0;
  753.                         box-shadow: 0px 0px 0px rgba(0,0,0,0.00);
  754.                     }
  755.  
  756.                         .titlebox .fancy-toggle-button .add:after {content: "Subscribe!";}
  757.                         .titlebox .fancy-toggle-button .add:hover:after {
  758.                             visibility: visible;
  759.                             margin-top: 40px;
  760.                             color: #fff;
  761.                             background-color: #516AE8;
  762.                             box-shadow: 0px 1px 5px rgba(0,0,0,0.24);
  763.                         }
  764.  
  765.  
  766.                         .titlebox .fancy-toggle-button .remove:after {content: "Unsubscribe";}
  767.                         .titlebox .fancy-toggle-button .remove:hover:after {
  768.                             visibility: visible;
  769.                             color: #4D5763;
  770.                             background-color: #fff;
  771.                             margin-top: 40px;
  772.                             box-shadow: 0px 1px 5px rgba(0,0,0,0.24);
  773.                         }
  774.  
  775.  
  776.                     /* Hover Bubble */
  777.                     .hover-bubble.multi-selector {
  778.                         margin-top: -76px;
  779.                         margin-right: -200px;
  780.                     }
  781.  
  782.  
  783.  
  784.                 /* Text */
  785.                 .side .md .-blocks, .side .md .-lists, .side .md pre, .side .md blockquote, .side .md table, .side .md p, .side .md ul, .side .md ol {
  786.                     color: #4D5763;
  787.                     font-size: 13px;
  788.                     font-family: Arial, sans-serif;
  789.                     line-height: 1.3333333333333333em;
  790.                 }
  791.  
  792.                     .side .titlebox .md h1 {
  793.                         line-height: 18px;
  794.                         margin: 0.5em 0 0 0 !important;
  795.                     }
  796.  
  797.                     .side .titlebox .md h2 {
  798.                         margin: 16px 0px 2px 0px;
  799.                     }
  800.  
  801.                     /* Buttonstyle one */
  802.                     .side .titlebox .md h3 a {
  803.                         padding: 12px 16px;
  804.                         width: 100%;
  805.                         border-radius: 2px;
  806.                         background-color: #516AE8;
  807.                         font-family: verdana,arial,sans-serif;
  808.                         transition: all 0.25s ease;
  809.                         color: #fff;
  810.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  811.                         display: block;
  812.                         margin: 1.5em 0em;
  813.                         font-size: 12px;
  814.                     }
  815.  
  816.                         .side .titlebox .md h3 a:hover {
  817.                             background-color: #5A72EE;
  818.                             box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.54);
  819.                         }
  820.  
  821.                             .side .titlebox .md h3 a:active {
  822.                                 background-color: #4059DB;
  823.                                 box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.54);
  824.                             }
  825.  
  826.                     .side .titlebox .md h4 a, .wiki-page .wiki-page-content .md.wiki h4 {
  827.                         padding: 12px 16px;
  828.                         background-color: #FFF;
  829.                         border: 1px solid #D4D4D4;
  830.                         border-radius: 2px;
  831.                         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.12);
  832.                         color: #737373;
  833.                         font-weight: bold;
  834.                         transition: all 0.15s ease;
  835.                         display: block;
  836.                         margin: 1.5em 0em;
  837.                         font-size: 12px;
  838.                     }
  839.  
  840.                         .side .titlebox h4 a:hover, .wiki-page .wiki-page-content .md.wiki h4:hover {
  841.                             box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.24);
  842.                             color: #4D5763;
  843.                         }
  844.  
  845.                             .side .titlebox h4 a:active, .wiki-page .wiki-page-content .md.wiki h4:active {
  846.                                 box-shadow: inset 0 2px 0 #D6D6D6;
  847.                                 background-color: #E5E5E5;
  848.                                 color: #999;
  849.                                 box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.36);
  850.                             }
  851.  
  852.  
  853.                     .md hr {border: solid 1px #e5e5e5;}
  854.  
  855.  
  856.                 .titlebox .bottom {display: none;}
  857.  
  858.  
  859.                 /* Mod Box */
  860.                 .side #moderation_tools {
  861.  
  862.                 }
  863.  
  864.                     .side #moderation_tools .title {
  865.  
  866.                     }
  867.  
  868.                         .side #moderation_tools .title h1 {
  869.                             text-transform: capitalize;
  870.                             color: #4D5763;
  871.                         }
  872.  
  873.                         .side #moderation_tools .title .collapse-button {
  874.                             color: #4D5763;
  875.                             vertical-align: middle;
  876.                             border-radius: 1px;
  877.                             border: 1px solid #d8d8d8;
  878.                         }
  879.  
  880.                     .side .sidecontentbox .content {
  881.                         border: none;
  882.                         padding: 8px 0px;
  883.                     }
  884.  
  885.                     .icon-menu a {background-color: transparent;}
  886.  
  887.  
  888.                 /* Ads */
  889.                 #ad_sponsorship, #ad-frame, #ad_main {margin-left: -16px;}
  890.                 #ad_sponsorship {margin-top: -18px;border-radius: 2px 2px 0px 0px;}
  891.  
  892.                 /* Recently viewed links */
  893.                 .gadget .midcol {width: 38px;}
  894.  
  895.  
  896.  
  897.  
  898.             /* Body Content - Frontpage */
  899.             .content {
  900.                 margin: 149px 16px 0px 16px;
  901.                 padding: 0px;
  902.             }  
  903.  
  904.                 .content:before {
  905.                     height: 166px;
  906.                     top: 0px;
  907.                     position: absolute;
  908.                     width: 100%;
  909.                     left: 0px;
  910.                     right: 0px;
  911.                     background-color: #3A3D4D;
  912.                     background-image: url(%%headerimg%%);
  913.                     background-repeat: no-repeat;
  914.                     background-position: 50% 60%;
  915.                     content: "";
  916.                     text-indent: -9999px;
  917.                     z-index: -1;
  918.                 }
  919.  
  920.                     @media only screen and (min-width : 1921px) {
  921.                         .content:before {background-size: cover;}
  922.                     }
  923.  
  924.                 .sitetable {
  925.                     margin-right: 316px;
  926.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  927.                     position: relative;
  928.                 }
  929.  
  930.                     .link {
  931.                         margin: 0px;
  932.                         background-color: #fff;
  933.                     }
  934.  
  935.                         /* Objects on the link from left to right */
  936.                         body >.content .link .rank, .rank-spacer {display: none;}
  937.  
  938.                         /* Voting Arrows */
  939.                         .link .midcol {
  940.                             width: 36px !important;
  941.                             margin: 15px 14px 0px 11px;
  942.                             overflow: visible;
  943.                             height: 60px;
  944.                         }
  945.                             .link .score {
  946.                                 line-height: 16px;
  947.                                 font-size: 12px;
  948.                                 margin: 1px 0px 1px 0px;
  949.                             }
  950.  
  951.                                 .link .score.likes {color: #ff6422;}
  952.                                 .link .score.dislikes {color: #5c5bd7;}
  953.  
  954.                             .arrow {
  955.                                 margin: 0px 0px 0px 2px;
  956.                                 background-image: url(%%spritesheet%%) !important;
  957.                                 background-color: transparent;
  958.                                 width: 33px;
  959.                                 border-radius: 2px;
  960.                                 transition: background-color 0.25s ease;
  961.                             }
  962.  
  963.                                 .arrow:hover {background-color: rgba(0,0,0,0.05);}
  964.  
  965.                                 /* Upvotes */
  966.                                 .arrow.up {
  967.                                     height: 20px;
  968.                                     background-position: -64px 0px;
  969.                                     transition: background-color 0.25s ease;
  970.                                 }
  971.  
  972.                                     .arrow.upmod {
  973.                                         height: 20px;
  974.                                         background-position: -128px 0px;
  975.                                         position: relative;
  976.                                     }
  977.  
  978.                                         .arrow.upmod:focus:after {
  979.                                             position: absolute;
  980.                                             left:2px;
  981.                                             bottom: -3px;
  982.                                             width: 28px;
  983.                                             height: 28px;
  984.                                             opacity: 1;
  985.                                             z-index:100;
  986.                                             content: " ";
  987.                                             background-color:#ff5500;
  988.                                             border-radius: 28px;
  989.                                             animation: upvote 0.35s ease-out forwards;
  990.                                             -webkit-animation: upvote 0.35s ease-out forwards;
  991.                                         }
  992.  
  993.                                 /* downvotes */
  994.                                 .arrow.down {
  995.                                     height: 20px;
  996.                                     background-position: -160px 0px;
  997.                                     transition: background-color 0.25s ease;
  998.                                 }
  999.                                     .arrow.downmod {
  1000.                                         height: 20px;
  1001.                                         background-position: -224px 0px;
  1002.                                     }
  1003.  
  1004.  
  1005.                                     /* Hover Message on Downvote */
  1006.                                     .arrow.down:after {
  1007.                                         display: block;
  1008.                                         visibility: hidden;
  1009.                                         position: absolute;
  1010.                                         z-index: 1000;
  1011.                                         margin-top: -6px;
  1012.                                         margin-left: 32px;
  1013.                                         padding: 12px;
  1014.                                         background-color: rgba(79, 77, 192, 0.0);
  1015.                                         border: none;
  1016.                                         border-radius: 2px;
  1017.                                         color: rgba(255, 255, 255, 0);
  1018.                                         content: "For content that does not contribute to any discussion.";
  1019.                                         text-align: center;
  1020.                                         letter-spacing: 1px;
  1021.                                         font-weight: normal;
  1022.                                         font-size: 13px;
  1023.                                         transition: all 0.25s ease;
  1024.                                         pointer-events: none;
  1025.                                     }
  1026.  
  1027.                                         .arrow.down:hover:after {
  1028.                                             visibility: visible;
  1029.                                             background-color: rgba(79, 77, 192, 0.9);
  1030.                                             color: #FFF;
  1031.                                             margin-left: 48px;
  1032.                                         }
  1033.  
  1034.                         /* Thumbnails */
  1035.                         .thumbnail {
  1036.                             max-width: 64px;
  1037.                             max-height: 56px;
  1038.                             margin: 16px 16px 0px 0px;
  1039.                             background-color: #ddd;
  1040.                         }
  1041.  
  1042.                             .thumbnail a img, .thumbnail.self, .thumbnail.default {height: 56px;}
  1043.  
  1044.                             .thumbnail.self     {   background: url(%%spritesheet%%) -073px -80px;}
  1045.                             .thumbnail.default  {   background: url(%%spritesheet%%) -143px -80px;}
  1046.                             .thumbnail.nsfw     {   background: url(%%spritesheet%%) -003px -140px;}
  1047.  
  1048.                         /* Linkflairs */
  1049.                         .linkflairlabel {
  1050.                             padding: 1px 6px 1px 6px;
  1051.                             height: 17px;
  1052.                             border-radius: 2px;
  1053.                             border: 0px solid;
  1054.                             color: #fff;
  1055.                             font-weight: bold;
  1056.                             font-style: normal;
  1057.                             font-variant: normal;
  1058.                             font-size: 13px;
  1059.                             font-family: Arial, sans-serif;
  1060.                             cursor: default;
  1061.                             vertical-align: middle;
  1062.                             position: relative;
  1063.                             top: -2px;
  1064.                             background-color: #4F8EF7;
  1065.                         }
  1066.  
  1067.                             .linkflair-inspiration .linkflairlabel {
  1068.                                 background-color: #ea4848;
  1069.                                 color: #fff;
  1070.                             }
  1071.  
  1072.                                 .linkflair-inspiration .thumbnail.self {background: url(%%spritesheet%%) -143px -140px;}
  1073.  
  1074.                             .linkflair-waywo .linkflairlabel {
  1075.                                 background-color: #516ae8;
  1076.                                 color: #fff;
  1077.                             }
  1078.  
  1079.                                 .linkflair-waywo .thumbnail.self {background: url(%%spritesheet%%) -73px -140px;}
  1080.  
  1081.  
  1082.                             .linkflair-mod .linkflairlabel {
  1083.                                 background-color: #65B354;
  1084.                                 color: #fff;
  1085.                             }
  1086.  
  1087.                                 .linkflair-mod a {color: #65B354!important;}
  1088.                                 .linkflair-mod .thumbnail.default, .linkflair-mod .thumbnail.self {background: url(%%spritesheet%%) -3px -80px !important;}
  1089.  
  1090.                         /* Submission Title */
  1091.                         .link .title {
  1092.                             margin: -2px 0px 0px 0px;
  1093.                             font-size: 18px;
  1094.                             font-family: Arial, sans-serif;
  1095.                             overflow: visible;
  1096.                             transition: all 0.15s ease;
  1097.                         }
  1098.  
  1099.                             body .content .sitetable .link .title a:hover {color: #4F8EF7;}
  1100.  
  1101.                             .link .entry {
  1102.                                 padding: 15px 32px 14px 0px;
  1103.                                 border-bottom: 1px solid #f2f2f2;
  1104.                                 margin-left: 0;
  1105.                             }
  1106.  
  1107.                             /*Unvisited*/   .thing .title.loggedin.click, .thing .title.click, .thing .title.loggedin, .thing .title {color:#4F8EF7;}
  1108.                             /*Visited  */   .content .thing .title:visited, .content .thing.visited .title {color: #7D5D8A;}
  1109.                             /*Clicking */   .thing .title.loggedin.click:visited, .thing .title.click:visited {color:#4F8EF7;}
  1110.  
  1111.  
  1112.  
  1113.  
  1114.                         /* Domain */
  1115.                         .link .domain {visibility: hidden;}
  1116.  
  1117.                             .link .domain a {
  1118.                                 visibility: visible;
  1119.                                 position: relative;
  1120.                                 top: -1px;
  1121.                                 color: #b3b3b3;
  1122.                                 transition: all 0.15s ease;
  1123.                             }
  1124.  
  1125.                                 .link .domain a:hover {
  1126.                                     color: #4F8EF7;
  1127.                                     text-decoration: none;
  1128.                                 }
  1129.  
  1130.                         .approval-checkmark {cursor: default;}
  1131.  
  1132.                         /* Expando Button */
  1133.                         .expando-button, .expando-button.image, .expando-button.video-muted {
  1134.                             position: relative;
  1135.                             margin: 2px 6px 2px 0px !important;
  1136.                             width: 16px;
  1137.                             height: 16px;
  1138.                             border-radius: 2px;
  1139.                             background-color: transparent;
  1140.                             background-image: url(%%spritesheet%%) !important;
  1141.                             border: 1px solid #e9e9e9;
  1142.                             cursor: pointer;
  1143.                         }
  1144.  
  1145.  
  1146.  
  1147.                             .expando-button:hover {
  1148.                                 background-color: #4F8EF7;
  1149.                                 border-color: #4F8EF7;
  1150.                             }
  1151.  
  1152.                             .expando-button.selftext.collapsed                  {background-position: -032px -32px;}
  1153.                             .expando-button.selftext.collapsed:hover            {background-position: -048px -32px;}
  1154.                
  1155.                             .expando-button.selftext.expanded                   {background-position: -064px -32px;}
  1156.                             .expando-button.selftext.expanded:hover             {background-position: -080px -32px;}
  1157.                
  1158.                             .expando-button.video.collapsed                     {background-position: -096px -32px;}
  1159.                             .expando-button.video.collapsed:hover               {background-position: -112px -32px;}
  1160.                
  1161.                             .expando-button.video.expanded                      {background-position: -064px -32px;}
  1162.                             .expando-button.video.expanded:hover                {background-position: -080px -32px;}
  1163.  
  1164.                             .expando-button.image.collapsedExpando              {background-position: -160px -32px;}
  1165.                             .expando-button.image.collapsedExpando:hover        {background-position: -176px -32px;}
  1166.  
  1167.                             .expando-button.image.expanded                      {background-position: -064px -32px;}
  1168.                             .expando-button.image.expanded:hover                {background-position: -080px -32px;}
  1169.  
  1170.                             .expando-button.image.gallery.collapsedExpando      {background-position: -128px -32px;}
  1171.                             .expando-button.image.gallery.collapsedExpando:hover{background-position: -144px -32px;}
  1172.  
  1173.                             .expando-button.image.gallery.expanded              {background-position: -064px -32px;}
  1174.                             .expando-button.image.gallery.expanded:hover        {background-position: -080px -32px;}
  1175.  
  1176.                             .expando-button.video-muted.collapsed               {background-position: -208px -32px;}
  1177.                             .expando-button.video-muted.collapsed:hover         {background-position: -224px -32px;}
  1178.  
  1179.                             .expando-button.video-muted.expanded                {background-position: -064px -32px;}
  1180.                             .expando-button.video-muted.expanded:hover          {background-position: -080px -32px;}
  1181.  
  1182.  
  1183.                         /* Expando Text */
  1184.                         .link .usertext .md {
  1185.                             margin-top: 10px;
  1186.                             padding-top: 3px;
  1187.                             padding-left: 0;
  1188.                             background-color: transparent;
  1189.                             border: 0px solid;
  1190.                             border-top: 1px solid #F7F7F7;
  1191.                             border-radius: 0px;
  1192.                             color: #4D5763;
  1193.                         }
  1194.  
  1195.  
  1196.                         /* Submitted X ago by.. */
  1197.                         .link .entry .tagline {
  1198.                             margin-top: 4px;
  1199.                             color: #b3b3b3;
  1200.                             font-size: 12px;
  1201.                             font-family: arial, sans-serif;
  1202.                             transition: all 0.15s ease;
  1203.                         }
  1204.  
  1205.                             .link .entry .tagline a {color: #4d5763;}
  1206.  
  1207.                             .link .entry .tagline:first-letter {text-transform: capitalize;}
  1208.                             .link .entry .tagline time {cursor: help;}
  1209.                             .link .entry .tagline a:hover {color: #4F8EF7;text-decoration: none;}
  1210.                             .link .entry .tagline a.author {margin-right: inherit;}
  1211.  
  1212.                             .link .entry .tagline .userattrs {visibility: hidden;}
  1213.                             .link .entry .tagline .userattrs a {
  1214.                                 visibility: visible;
  1215.                                 font-size: 10px;
  1216.                                 padding: 1px 3px 1px 2px;
  1217.                                 margin-left: 2px;
  1218.                                 background-color: #f00;
  1219.                                 color: #fff !important;
  1220.                                 vertical-align: middle;
  1221.                                 border-radius: 1px;
  1222.                                 position: relative;
  1223.                                 top: -1px;
  1224.                                 cursor: help;
  1225.                             }
  1226.  
  1227.                                 .link .entry .tagline .userattrs a.moderator {background-color: #65B354;}
  1228.                                
  1229.  
  1230.  
  1231.                             .RESUserTagImage {
  1232.                                 height: 10px !important;
  1233.                                 background-image: url(%%spritesheet%%) !important;
  1234.                                 background-position: -192px -34px !important;
  1235.                                 opacity: 0.25 !important;
  1236.                                 margin-left: 2px !important;
  1237.                                 transition: opacity 0.15s ease;
  1238.                                 margin-top: 1px !important;
  1239.                             }
  1240.  
  1241.                                 .RESUserTagImage:hover {opacity: 1 !important;}
  1242.  
  1243.  
  1244.                         /* Comment / Share / Report */
  1245.                         .link .flat-list {margin-top: 3px;}
  1246.  
  1247.                             .link .entry .buttons li a {
  1248.                                 padding: 0 1px;
  1249.                                 color: #b3b3b3;
  1250.                                 font-weight: normal;
  1251.                                 font-size: 13px;
  1252.                                 font-family: Arial, sans-serif;
  1253.                                 transition: all 0.15s ease;
  1254.                             }
  1255.            
  1256.                                 .link .entry .buttons li a:hover {color: #4F8EF7;text-decoration: none;}
  1257.            
  1258.                                 .nsfw-stamp acronym {
  1259.                                     padding: 2px 3px;
  1260.                                     background-color: transparent;
  1261.                                     border-color: #e82e63 !important;
  1262.                                     border-radius: 2px;
  1263.                                     color:#e82e63;
  1264.                                     opacity: 100;
  1265.                                     cursor: help;
  1266.                                 }
  1267.            
  1268.                                 .link .entry .buttons li a.comments {
  1269.                                     color: #4F8EF7;
  1270.                                     font-weight: bold !important;
  1271.                                     opacity: 100 !important;
  1272.                                     transition: all 0.25s ease-in-out !important;
  1273.                                 }
  1274.  
  1275.                                     .link .entry li .comments:hover {
  1276.                                         text-decoration: none;
  1277.                                     }
  1278.  
  1279.  
  1280.                                 /* Save Category popup */
  1281.  
  1282.  
  1283.                                 /* Reporting Comment */
  1284.                                 .action-form {
  1285.                                     position: fixed;
  1286.                                     top: 35%;
  1287.                                     left: 50%;
  1288.                                     margin-left: -150px;
  1289.                                     margin: 0;
  1290.                                     padding: 24px;
  1291.                                     background-color: #fff;
  1292.                                     z-index: 100;
  1293.                                     box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.24);
  1294.                                     border: none;
  1295.                                     border-radius: 2px;
  1296.                                 }
  1297.  
  1298.                                     .action-form .reason-prompt {
  1299.                                         font-size: 16px;
  1300.                                         color: #4D5763;
  1301.                                         padding-bottom: 8px;
  1302.                                         display: block;
  1303.                                     }
  1304.  
  1305.                                         .action-form .reason-prompt:first-letter {text-transform: capitalize;}
  1306.  
  1307.                                         .action-form .reason-prompt li {
  1308.                                             padding: 4px 4px 4px 0px;
  1309.                                             display: block;
  1310.                                         }
  1311.                                             .action-form li label {
  1312.                                                 padding: 4px 4px 4px 0px;
  1313.                                                 cursor: pointer;
  1314.                                                 display: block;
  1315.                                                 color: #4D5763;
  1316.                                                 text-transform: capitalize;
  1317.                                             }
  1318.  
  1319.                                                 .action-form li label:hover {background-color: rgba(0,0,0,0.05);}
  1320.                                                 .action-form input[name="other_reason"] {padding: 8px;}
  1321.  
  1322.  
  1323.                                     /*  .link .entry li .comments:hover .newComments {color: #fff !important;} */
  1324.  
  1325.                                     /* Flair */
  1326.                                     .link .entry .buttons li a.flairselectbtn {color: #4F8EF7;}
  1327.  
  1328.                                     /* RES L+C */
  1329.                                     .link .entry .buttons li .redditSingleClick {
  1330.                                         padding: 0 1px;
  1331.                                         color: #b3b3b3;
  1332.                                         font-weight: normal;
  1333.                                         font-size: 13px;
  1334.                                         font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  1335.                                         transition: all 0.15s ease;
  1336.                                     }
  1337.  
  1338.  
  1339.                         /* Reported & Spam/Remove/Approves */
  1340.                         .entry .buttons li.reported-stamp {
  1341.                             background-color: transparent;
  1342.                             border: 1px solid #EDEEEE!important;
  1343.                             border-radius: 20px;
  1344.                             color: #4A4F57;
  1345.                             line-height: 16px;
  1346.                         }
  1347.  
  1348.  
  1349.                         a.pretty-button.negative, a.pretty-button.neutral, a.pretty-button.positive {
  1350.                             background-image: none;
  1351.                             border: 1px solid;
  1352.                             border-radius: 20px;
  1353.                             box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.25);
  1354.                             color: #fff;
  1355.                             line-height: 15px;
  1356.                             transition: all 0.25s ease;
  1357.                         }
  1358.  
  1359.                             a.pretty-button.negative {background-color: #fb797e;border-color: #fb797e;}
  1360.                                 a.pretty-button.negative:hover {background-color: #fc535a;border-color: #fc535a;}
  1361.  
  1362.                             a.pretty-button.neutral {background-color: #dddddd;border-color: #dddddd;color: #4A4F57;}
  1363.                                 a.pretty-button.neutral:hover {background-color: #ececec;border-color: #ececec;}
  1364.  
  1365.                             a.pretty-button.positive {background-color: #1ecd97;border-color: #1ecd97;}
  1366.                                 a.pretty-button.positive:hover {background-color: #22e1a6;border-color: #22e1a6;}
  1367.  
  1368.  
  1369.                             a.pretty-button.positive.pressed, a.pretty-button.neutral.pressed, a.pretty-button.negative.pressed {background-image: none;box-shadow: inset 0px 3px 1px rgba(0, 0, 0, 0.15);}
  1370.  
  1371.                         .comment.spam>.child, .message.spam>.child {background-color: transparent;}
  1372.  
  1373.                         /* Last Clicked */
  1374.                         .link.last-clicked {
  1375.                             background-color: #F2F2F2;
  1376.                             border: none;
  1377.                         }
  1378.  
  1379.  
  1380.                         /* Sticky Post */
  1381.                         .thing.stickied {
  1382.                             border-radius: 2px 2px 0px 0px;
  1383.                         }
  1384.  
  1385.                             .thing.stickied a.title, .thing.stickied a, .thing.stickied .entry li .comments {color: #65b354!important;}                
  1386.                             .thing.stickied .expando-button:hover {background-color: #65b354!important;border-color: #65b354!important;}
  1387.                             .tagline .stickied-tagline {color: #b3b3b3;cursor: help;}
  1388.                             .thing.stickied .domain {display: none;}
  1389.  
  1390.                         /* Ad */
  1391.                         .link.promotedlink.promoted {
  1392.                             margin-right: 0;
  1393.                             background-color: #EFF7FF;
  1394.                             border: none;
  1395.                         }
  1396.  
  1397.                             .organic-listing {  
  1398.                                 background-color: white!important;  
  1399.                                 padding: 0;  
  1400.                                 z-index: 9999;  
  1401.                                 position: relative;  
  1402.                                 margin-bottom: 0px;  
  1403.                                 margin-right: 316px;  
  1404.                                 border: none;  
  1405.                                 border-radius: 2px 2px 0px 0px;
  1406.                             }
  1407.  
  1408.  
  1409.                         /* Compressed post */
  1410.                         .link.compressed {margin: 0;}
  1411.  
  1412.                             .link.compressed .entry {padding: 11px 32px 9px 0px;}
  1413.                             .link.compressed .title {margin: 0;}
  1414.                             body>.content .link.compressed .midcol {
  1415.                                 height: auto;
  1416.                                 margin: 8px 0px 0px 4px;
  1417.                             }
  1418.  
  1419.                         /* Flair Selector */
  1420.                         .flairselector {
  1421.                             position: fixed;
  1422.                             top: 20% !important;
  1423.                             left: 50% !important;
  1424.                             margin-left: -125px;
  1425.                             padding: 32px !important;
  1426.                             width: 250px !important;
  1427.                             border: none;
  1428.                             border-radius: 2px;
  1429.                             box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.64);
  1430.                         }
  1431.  
  1432.                             .flairselector.drop-choices.active {border: 1px solid #e2e2e2;}
  1433.  
  1434.                             .flairselector h2 {
  1435.                                 margin-bottom: 4px;
  1436.                                 background-color: transparent;
  1437.                                 color: #4F8EF7;
  1438.                                 text-align: left;
  1439.                                 text-transform: capitalize;
  1440.                                 font-weight: normal;
  1441.                                 font-size: 18px;
  1442.                             }
  1443.  
  1444.                             .flairoptionpane {
  1445.                                 max-height: 250px;
  1446.                                 text-align: left;
  1447.                             }
  1448.  
  1449.                                 .flairselector .flairoptionpane ul li {
  1450.                                     padding: 0px !important;
  1451.                                 }
  1452.  
  1453.                                     .flairoptionpane ul li .linkflair {
  1454.                                         text-align: left;
  1455.                                         padding: 0px;
  1456.                                     }
  1457.  
  1458.                                         .flairoptionpane ul li .linkflair:hover, .flairselector li:hover {background-color: #F5F8F9;border: 0px solid;}
  1459.  
  1460.                                         .flairoptionpane ul li .linkflair span.linkflairlabel {
  1461.                                             margin: 8px 0px;
  1462.                                             line-height: 1.35;
  1463.                                             margin-right: 6px;
  1464.                                         }
  1465.  
  1466.                                         .flairoptionpane ul li .linkflair a.title {
  1467.                                             font-size: 18px !important;
  1468.                                             opacity: 100 !important;
  1469.                                             color: #4F8EF7 !important;
  1470.                                         }
  1471.  
  1472.                             .flairselector form {
  1473.                                 padding-top: 12px;
  1474.                                 border-top: 1px solid #F7F7F7;
  1475.                             }
  1476.  
  1477.                                 .flairselector form .flairselection {text-align: left;}
  1478.  
  1479.                                     .flairselector form .flairselection:before {
  1480.                                         display: block;
  1481.                                         content: "Selected Flair:";
  1482.                                         color: #b3b3b3;
  1483.                                     }
  1484.  
  1485.                                     .flairselector form .flairselection .linkflair a.title {
  1486.                                         font-size: 18px !important;
  1487.                                         opacity: 100 !important;
  1488.                                         color: #4F8EF7 !important;
  1489.                                         cursor: default;
  1490.                                     }
  1491.            
  1492.                                     .flairselector form .flairselection .flairremove {
  1493.                                         padding: 4px 0px;
  1494.                                         margin-bottom: 8px;
  1495.                                         visibility: hidden;
  1496.                                         display: block !important;
  1497.                                     }
  1498.            
  1499.                                         .flairselector form .flairselection .flairremove a {
  1500.                                             visibility: visible;
  1501.                                             opacity: 100 !important;
  1502.                                             color: #4F8EF7 !important;
  1503.                                             margin-left: -4px;
  1504.                                             text-transform: capitalize;
  1505.                                         }
  1506.  
  1507.                                             .flairselector form .flairselection .flairremove a:first-letter {text-transform: capitalize;}
  1508.            
  1509.                                             .flairselector form .flairselection .flairremove a:hover {text-decoration: underline !important;}
  1510.  
  1511.                             .flairselector .error {text-align: left;}
  1512.                                 .flairselector .error:first-letter {text-transform: capitalize;}
  1513.                                 .flairselector .error:after {
  1514.                                     display: block;
  1515.                                     color: #b3b3b3;
  1516.                                     content: "Go to /r/.../about/flairs.";
  1517.                                 }
  1518.  
  1519.                             .flairselector img {
  1520.                                 position: relative;
  1521.                                 left: 50%;
  1522.                                 margin-left: -9px;
  1523.                                 opacity: 0.5;
  1524.                             }
  1525.  
  1526.                                 .flairselector .flairoptionpane ul li {
  1527.                                     margin: 4px 0px;
  1528.                                 }
  1529.  
  1530.                                     .flairselector li.selected {border: none;background-color: }
  1531.                                     .flairselector .flairoptionpane ul li.flairsample-right {
  1532.                                         padding: 5px 0px !important;
  1533.                                         border: none;
  1534.                                     }
  1535.  
  1536.                                     .flairselector li a, .flairselector form .flairselection a.author {
  1537.                                         color: #b3b3b3 !important;
  1538.                                         font-size: 11px;
  1539.                                     }
  1540.  
  1541.  
  1542.                             .flairselector:before {
  1543.                                 display: block;
  1544.                                 position: fixed;
  1545.                                 top: 0px;
  1546.                                 left: 0px;
  1547.                                 z-index: -2;
  1548.                                 overflow: hidden;
  1549.                                 width: 100%;
  1550.                                 height: 100%;
  1551.                                 background-color: rgba(255, 255, 255, 0.75);
  1552.                                 content: "";
  1553.                                 cursor: default;
  1554.                                 transition: all 0.25s ease;
  1555.                                 pointer-events: none;
  1556.                             }
  1557.  
  1558.  
  1559.  
  1560.                         /* Unvotable Message */
  1561.                         .unvotable-message {
  1562.                             border: 0px solid;
  1563.                             color: #b3b3b3;
  1564.                         }
  1565.  
  1566.                             .unvotable-message:first-letter {text-transform: capitalize;}
  1567.  
  1568.                         /* RES Selection */
  1569.                         .res .RES-keyNav-activeElement {
  1570.                             outline: 0px dashed #E0E0E0 !important;
  1571.                             transition: all 0.35s ease;
  1572.                         }
  1573.  
  1574.                             .res .entry {transition: all 0.15s ease;}
  1575.  
  1576.                             div.RES-keyNav-activeElement,
  1577.                             div.commentarea div.RES-keyNav-activeElement.entry div.noncollapsed {
  1578.                                 background-color: transparent !important;
  1579.                                 padding-left: 8px !important;
  1580.                                 border-left: 2px solid #4F8EF7;
  1581.                             }
  1582.  
  1583.                                 div.commentarea div.RES-keyNav-activeElement .md {
  1584.                                     background-color: transparent !important;
  1585.                                 }
  1586.  
  1587.                                     .res .commentarea .thing {
  1588.                                         padding: 16px 16px 0px 14px !important;
  1589.                                     }
  1590.  
  1591.                                         .res .commentarea .entry .flat-list {
  1592.                                             padding-bottom: 16px;
  1593.                                         }
  1594.  
  1595.  
  1596.                         /* RES Tag dialog + RES Tag */
  1597.                         .userTagLink.hasTag, #userTaggerPreview {
  1598.                             font-size: 11px !important;
  1599.                             border-radius: 0px !important;
  1600.                             border: 0px solid !important;
  1601.                             margin-top: 0px !important;
  1602.                             margin-left: 4px !important;
  1603.                         }
  1604.  
  1605.                         .RESDialogSmall {
  1606.                             border: none;
  1607.                             box-shadow: 0px 2px 3px #DDD;
  1608.                         }
  1609.  
  1610.                             .RESDialogSmall > h3 {
  1611.                                 color: #4F8EF7;
  1612.                                 background-color: #FFF;
  1613.                                 border-bottom: 1px solid #EDEDED;
  1614.                                 height: 36px;
  1615.                                 padding-top: 9px;
  1616.                             }
  1617.  
  1618.                             .RESCloseButton {
  1619.                                 line-height: 19px;
  1620.                                 height: 22px;
  1621.                                 width: 22px;
  1622.                                 transition: all 0.15s ease;
  1623.                             }
  1624.  
  1625.                                 .RESCloseButton:hover {
  1626.                                     border: 1px solid #D7D9DC;
  1627.                                 }
  1628.  
  1629.                             #userTaggerToolTip input[type=text], #userTaggerToolTip select {
  1630.                                 line-height: 22px;
  1631.                                 padding-left: 4px;
  1632.                                 border: 1px solid #E5E5E5!important
  1633.                             }
  1634.  
  1635.                             .toggleButton {
  1636.                                 line-height: 0.8;
  1637.  
  1638.                             }
  1639.  
  1640.                                 .toggleButton .toggleOn {
  1641.                                     border-radius: 0px;
  1642.                                     border: 1px solid #4F8EF7;
  1643.                                     background-color: #4F8EF7;
  1644.                                     color: #fff;
  1645.                                     text-transform: capitalize;
  1646.                                 }
  1647.  
  1648.                                 .toggleButton .toggleOff {
  1649.                                     border-radius: 0px;
  1650.                                     border: 1px solid #D7D9DC;
  1651.                                     background-color: transparent;
  1652.                                     text-transform: capitalize;
  1653.                                 }
  1654.  
  1655.                                 #userTaggerToolTip input[type=submit] {bottom: 10px !important;}
  1656.  
  1657.                     /* Sorting Menu (Top links today/this week/ever) */
  1658.                     .top-page .content .menuarea .drop-choices.lightdrop {
  1659.                     display:inline;
  1660.                     visibility:visible;
  1661.                     }
  1662.  
  1663.                     .top-page .menuarea .spacer {overflow: visible;}
  1664.  
  1665.                     .top-page .content .menuarea .drop-choices.lightdrop a.choice, .top-page .content .menuarea .drop-choices.lightdrop form {display:inline;}
  1666.                     .top-page .content .menuarea .dropdown-title.lightdrop {visibility: hidden;}
  1667.  
  1668.                     .top-page .content .menuarea {
  1669.                         border-bottom: 0px;
  1670.                         padding: 0;
  1671.                         margin: 0;
  1672.                         height: 36px;
  1673.                     }
  1674.  
  1675.                         .top-page .content .menuarea .dropdown.lightdrop .selected {
  1676.                             z-index: 1002;
  1677.                             position: relative;
  1678.                             left: -68px;
  1679.                             top: 11px;
  1680.                             background: none;
  1681.                             text-decoration: none;
  1682.                             text-transform: capitalize;
  1683.                             font-size: 12px;
  1684.                             pointer-events: none;
  1685.                             padding: 10px 16px 10px 16px;
  1686.                             background-color: #5A72EE;
  1687.                             overflow: visible;
  1688.                             color: #FFF;
  1689.                         }
  1690.  
  1691.                         .top-page .content .menuarea .drop-choices.lightdrop {
  1692.                             padding: 10px 16px 10px 104px;
  1693.                             margin-left: 16px;
  1694.                             margin-top: 1px;
  1695.                             border-radius: 2px 2px 0px 0px;
  1696.                             border: none;
  1697.                             border-bottom: 1px solid #E0E1E2;
  1698.                             width: calc(100% - 348px);
  1699.                             box-shadow: none;
  1700.                         }
  1701.  
  1702.                             .top-page .content .menuarea .drop-choices.lightdrop a.choice {
  1703.                                 padding: 10px;
  1704.                                 color: #4D5763;
  1705.                                 transition: all 0.25s ease;
  1706.                             }
  1707.  
  1708.                                 .top-page .content .menuarea .drop-choices.lightdrop a.choice:[href*="/?t=all"] {border-right: 0px solid;}
  1709.                                 .top-page .content .menuarea .drop-choices.lightdrop a.choice:hover {background-color: #F5F8F9;}
  1710.  
  1711.                                 .top-page .content .menuarea .drop-choices.lightdrop a.choice.selected {
  1712.                                     background-color: #4f8ef7;
  1713.                                     color: #fff;
  1714.                                 }
  1715.  
  1716.                         /* RES Popup */
  1717.                         .guider {
  1718.                             border: none;
  1719.                             box-shadow: 0px 2px 3px #DDD;
  1720.                         }
  1721.  
  1722.                             .guider_content {}
  1723.  
  1724.                                 .guider_content h1 {color: #4F8EF7;}
  1725.  
  1726.                                 .guider_button {
  1727.                                     font-size: 11px;
  1728.                                     border: none;
  1729.                                     background-image: none;
  1730.                                     background-color: #4F8EF7;
  1731.                                     transition: all 0.15s ease;
  1732.                                 }
  1733.  
  1734.                                     .guider_button:hover {background-color: rgba(79, 142, 247, 0.75);}
  1735.  
  1736.                                 .guider_close {}
  1737.  
  1738.                                     .x_button {
  1739.                                         transition: all 0.25s ease;
  1740.                                         box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.00);
  1741.                                     }
  1742.  
  1743.                                         .x_button:hover {box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);}
  1744.  
  1745.                     /* Infobar (Default yellow announcement bar) */
  1746.                     .content .infobar {
  1747.                         margin: 0px 0px 16px 0px;
  1748.                         padding: 8px 16px;
  1749.                         line-height: 26px;
  1750.                         border: none;
  1751.                         margin-right: 316px;
  1752.                         background-color: #516AE8;
  1753.                         color: #fff;
  1754.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  1755.                         border-radius: 2px;
  1756.                     }
  1757.  
  1758.                         .infobar .md {color: #fff;}
  1759.  
  1760.                         .content .infobar:first-letter {text-transform: capitalize;}
  1761.  
  1762.                         /* Welcome infobar */
  1763.                         .content .infobar.welcome {line-height: inherit;height: 86px;}
  1764.                             .content .infobar.welcome h1 {color: #4d5763;}
  1765.  
  1766.                         .commentarea .infobar {
  1767.                             padding: 8px 16px;
  1768.                             line-height: 16px;
  1769.                             margin-right: 0;
  1770.                         }
  1771.  
  1772.                             .commentarea .infobar a {color: rgba(0,0,0,0.54);font-weight: bold;}
  1773.  
  1774.                     /* Noresults image */
  1775.                     #noresults {
  1776.                         margin: 0;
  1777.                         position: absolute;
  1778.                         top: 72px;
  1779.                         width: 100%;
  1780.                         height: 312px;
  1781.                         background: transparent url(%%noresults%%) no-repeat 50% 50%;
  1782.                         text-indent: -9999px;
  1783.                         font-size: 0px;
  1784.                         display: block;
  1785.                     }
  1786.  
  1787.                     /* Next Page */
  1788.                     .sitetable .nav-buttons {
  1789.                         padding: 16px;
  1790.                         background-color: #fff;
  1791.                         color: #b3b3b3;
  1792.                         border-top: 1px solid #F2F2F2;
  1793.                         margin-top: -1px;
  1794.                     }
  1795.  
  1796.                         .sitetable .nav-buttons:first-letter {text-transform: capitalize;}
  1797.  
  1798.                         .sitetable .nav-buttons .nextprev {
  1799.                             color: #b3b3b3;
  1800.                             font-size: 14px;
  1801.                         }
  1802.  
  1803.                             .sitetable .nav-buttons .nextprev a {
  1804.                                 border: 0px;
  1805.                                 background-color: transparent;
  1806.                             }
  1807.  
  1808.                                 .sitetable .nav-buttons .nextprev a:hover {
  1809.                                     text-decoration: underline;
  1810.                                     border: 0px;
  1811.                                     background-color: transparent;
  1812.                                 }
  1813.  
  1814.                 /* Comments Page */
  1815.                 .comments-page .link {
  1816.                     border-radius: 2px 2px 0px 0px;
  1817.                 }
  1818.                     .comments-page .link .entry {border-bottom: none;padding-bottom: 15px;}
  1819.  
  1820.                 .commentarea {
  1821.                     margin-right: 316px;
  1822.                 }  
  1823.  
  1824.                     .commentarea .panestack-title {
  1825.                         margin: 10px 0 0 22px;
  1826.                         border-bottom: 0;
  1827.                     }
  1828.  
  1829.                         .commentarea .panestack-title .title {
  1830.                             color:  #4D5763;
  1831.                         }
  1832.                             .panestack-title .title:first-letter {text-transform: capitalize;}
  1833.  
  1834.                     .commentarea .menuarea {
  1835.                         margin: 0 0 0 22px;
  1836.                     }
  1837.  
  1838.                         .commentarea .menuarea .spacer:nth-of-type(2) {
  1839.  
  1840.                         }
  1841.  
  1842.                         .commentarea .menuarea span.dropdown-title.lightdrop {color: #b3b3b3;}
  1843.                         .commentarea .menuarea span.dropdown-title.lightdrop:first-letter {text-transform: capitalize;}
  1844.  
  1845.                         .commentarea .menuarea .dropdown.lightdrop .selected {
  1846.                             cursor: pointer;
  1847.                             text-decoration: none;
  1848.                             background-image: none;
  1849.                             padding-right: 0px;
  1850.                             font-weight: normal;
  1851.                             color: #b3b3b3;
  1852.                         }
  1853.  
  1854.                             .commentarea .menuarea .dropdown.lightdrop .selected:hover {color: #4F8EF7;}
  1855.                             .commentarea .menuarea .dropdown.lightdrop .selected:after {
  1856.                                 content: "▼"
  1857.                             }
  1858.  
  1859.  
  1860.                             .drop-choices.lightdrop {
  1861.                                 border: none;
  1862.                                 z-index: 1001;
  1863.                                 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  1864.                             }
  1865.  
  1866.                                 .drop-choices a.choice {
  1867.                                     padding: 6px;
  1868.                                     transition: all 0.1s ease;
  1869.                                 }
  1870.  
  1871.                                     .drop-choices a.choice:hover {
  1872.                                         background-color: #4F8EF7;
  1873.                                         color: #fff;
  1874.                                     }
  1875.  
  1876.                         .commentarea .menuarea .toggle a, .help-hoverable {
  1877.                             color: #b3b3b3;
  1878.                             font-weight: normal;
  1879.                         }
  1880.  
  1881.                             .commentarea .menuarea .toggle a:hover, .help-hoverable:hover {color: #4F8EF7;}
  1882.  
  1883.                     .commentarea>.usertext {
  1884.                         background-color: #FAFAFA;
  1885.                         border-radius: 0px 0px 2px 2px;
  1886.                         margin: -58px 0 16px 0;
  1887.                         padding: 64px 16px 16px 16px;
  1888.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  1889.                         overflow: visible;
  1890.                     }
  1891.  
  1892.                         .commentarea .usertext-edit {
  1893.  
  1894.  
  1895.  
  1896.                         }
  1897.  
  1898.                             .usertext-edit textarea {
  1899.                                 position: relative;
  1900.                                 z-index: 999;
  1901.                             }
  1902.  
  1903.                             .usertext .bottom-area {
  1904.                                 width: 500px;
  1905.                             }
  1906.  
  1907.                                 .usertext .bottom-area a.reddiquette {color: #4F8EF7;}
  1908.  
  1909.                     .gold-accent.comment-visits-box {
  1910.                         margin: 0px 0px 12px 0px;
  1911.                         border-radius: 2px;
  1912.                     }
  1913.  
  1914.                     .commentarea .sitetable {
  1915.                         margin: 0px;
  1916.                         box-shadow: none;
  1917.                     }
  1918.  
  1919.                         .commentarea .thing {
  1920.                             border-radius: 2px;
  1921.                             background-color: #fff;
  1922.                             box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  1923.                             margin: 0 0 8px 0;
  1924.                             padding: 16px 16px 16px 14px;
  1925.                         }
  1926.  
  1927.                             .commentarea .child .thing {
  1928.                                 box-shadow: none;
  1929.                                 padding: 4px;
  1930.                                 margin: 12px 0 0 0;
  1931.                             }
  1932.  
  1933.                             .commentarea .comment .midcol {
  1934.                                 width: 36px;
  1935.                                 margin-right: 2px;
  1936.                                 overflow: visible;
  1937.                             }
  1938.  
  1939.                         /* One stack of comments behind one parent comment */
  1940.                         .commentarea .sitetable .comment {
  1941.  
  1942.                         }
  1943.                             .comment .child, .comment .showreplies {
  1944.                                 border-left: 1px dotted #ECECEC;
  1945.                                 margin-top: 0px;
  1946.                             }
  1947.  
  1948.                             /* Vote arrows */
  1949.                             .comment .midcol {
  1950.                                 width: 24px;
  1951.                                 margin-right: 0px;
  1952.                             }
  1953.  
  1954.                                 .comment .midcol .arrow {
  1955.                                     margin-left: 0px;
  1956.                                     margin-bottom: 4px;
  1957.                                 }
  1958.  
  1959.                             .comment .entry {
  1960.  
  1961.                             }
  1962.  
  1963.                                 .comment .entry .tagline {
  1964.                                     color: #b3b3b3;
  1965.                                     font-size: 12px;
  1966.                                     font-family: Arial, sans-serif;
  1967.                                 }
  1968.  
  1969.                                     .comment .expand {
  1970.                                         background-color: transparent;
  1971.                                         transition: all 0.15s ease;
  1972.                                         color: #B3B3B3;
  1973.                                     }
  1974.  
  1975.  
  1976.                                         .comment .expand:hover {
  1977.                                             color: #fff;
  1978.                                             text-decoration: none;
  1979.                                             background-color: #4F8EF7;
  1980.                                         }
  1981.  
  1982.                                     .comment .author {
  1983.                                         color: #4D5763;
  1984.                                         margin-right: 0;
  1985.                                         font-weight: bold;
  1986.                                     }
  1987.  
  1988.                                         .comment .author:hover {
  1989.                                             color: #4f8ef7;
  1990.                                             text-decoration: none;
  1991.                                         }
  1992.  
  1993.                                         .tagline .moderator, .green {
  1994.                                             color: #65B354;
  1995.                                             font-weight: bold;
  1996.                                         }
  1997.  
  1998.                                         .tagline .submitter {
  1999.                                             font-weight: bold;
  2000.                                             color: #4f8ef7;
  2001.                                         }
  2002.  
  2003.  
  2004.                                         /* RES Fixes */
  2005.                                         .res .thing .tagline .author.submitter {
  2006.                                             padding: 1px 4px;
  2007.                                             border-radius: 1px;
  2008.                                             background-color: #4F8EF7 !important;
  2009.                                             box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  2010.                                             transition: all 0.15s ease;
  2011.                                         }
  2012.  
  2013.                                             .res .thing .tagline .author.submitter:hover {
  2014.                                                 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  2015.                                                 background-color: #4F8EF7 !important;
  2016.                                             }
  2017.  
  2018.                                     .comment .score {
  2019.                                         font-size: inherit;
  2020.                                         font-weight: bold;
  2021.                                         color: #666;
  2022.                                     }
  2023.  
  2024.                                     .comment span.userattrs {
  2025.                                         margin-left: 4px;
  2026.                                     }
  2027.  
  2028.                                         .comment span.userattrs a {
  2029.  
  2030.                                         }
  2031.  
  2032.  
  2033.                                     /* Comment Body Text */
  2034.                                     .comment .usertext .md {                                    color: #4D5763;
  2035.                                     }
  2036.  
  2037.                                         .comment .usertext .md p {margin-top: 0px;}
  2038.  
  2039.                                             .md a {
  2040.                                                 color: #4F8EF7;
  2041.                                             }
  2042.  
  2043.                                                 .md a:visited {
  2044.                                                     color: #7D5D8A;
  2045.                                                 }
  2046.  
  2047.                                             .md pre {
  2048.                                                 padding: 8px;
  2049.                                             }
  2050.  
  2051.                                             .md blockquote {
  2052.                                                 border-left: 2px solid #E5E3DA;
  2053.                                                 color: #706F6F;
  2054.                                             }
  2055.  
  2056.                                             .md h1, .md h2 {
  2057.                                                 margin: 0.5em 0 0.25em 0;
  2058.                                                 border: none;
  2059.                                                 color: #4D5763;
  2060.                                             }
  2061.  
  2062.                                             .md h3 {
  2063.                                                 color: #4D5763;
  2064.                                                 margin: 16px 0 0 0;
  2065.                                             }
  2066.  
  2067.                                         /* Deleted comment */
  2068.                                         .usertext.grayed .usertext-body {
  2069.                                             margin: 4px 0;
  2070.                                             background-color: transparent;
  2071.                                             text-transform: italic;
  2072.                                             padding: 0;
  2073.                                         }
  2074.  
  2075.  
  2076.                                     /* Reply / Share / report */
  2077.                                     .comment .flat-list li a {
  2078.                                         color: #b3b3b3;
  2079.                                         font-weight: normal;
  2080.                                     }
  2081.  
  2082.                                         .comment .flat-list li a:hover {
  2083.                                             color: #4F8EF7;
  2084.                                             text-decoration: none;
  2085.                                         }
  2086.  
  2087.                                         .comment .flat-list li a[onclick*="reply"] {
  2088.                                             color: #4F8EF7;
  2089.                                             font-weight: bold;
  2090.                                             font-size: 11px;
  2091.                                         }
  2092.  
  2093.                                             .comment .flat-list li a:hover[onclick*="reply"] {
  2094.  
  2095.                                             }
  2096.  
  2097.  
  2098.  
  2099.                                     .deepthread a {color: #4F8EF7;}
  2100.  
  2101.                     /* Sidebar stuff */
  2102.                     .comments-page .side {margin-top: 312px;}
  2103.  
  2104.                         .comments-page .side .linkinfo {
  2105.                             position: absolute;
  2106.                             right: 16px;
  2107.                             top: 200px;
  2108.                             padding: 16px;
  2109.                             width: 300px;
  2110.                             background-color: #fff;
  2111.                             border-radius: 2px;
  2112.                             box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2113.                             border: none;
  2114.                         }
  2115.  
  2116.  
  2117.                             .comments-page .side .linkinfo .date {color: #B3B3B3;}
  2118.                                 .comments-page .side .linkinfo .date:first-letter{text-transform: capitalize;}
  2119.  
  2120.                             .comments-page .side .linkinfo .score {color: #4D5763;}
  2121.                             .linkinfo .shortlink input {border: 1px solid #E5E5E5;}
  2122.  
  2123.                         .res.comments-page .side {margin-top: 326px;}
  2124.  
  2125.  
  2126.                 /* Submission Page */
  2127.                 .submit-page .side, .submit-page .content h1, #suggested-reddits {display: none;}
  2128.  
  2129.                 .submit-page #newlink.submit.content {
  2130.                     width: 524px;
  2131.                     margin: 0 auto;
  2132.                 }
  2133.  
  2134.                     .submit-page #newlink.submit.content form .spacer+.spacer {margin: 0;}
  2135.  
  2136.  
  2137.                     .submit-page #newlink.submit.content ul.tabmenu.formtab {
  2138.                         padding: 0;
  2139.                         border: none;
  2140.                     }
  2141.  
  2142.                         .submit-page #newlink.submit.content .tabmenu.formtab a {
  2143.                             padding: 16px;
  2144.                             width: 262px;
  2145.                             display: inline-block;
  2146.                             text-align: center;
  2147.                             background-color: #fff;
  2148.                             color: #4D5763;
  2149.                             text-transform: uppercase;
  2150.                             font-weight: bold;
  2151.                             transition: all 0.25s ease;
  2152.                             font-size: 16px;
  2153.                             border: none;
  2154.                         }
  2155.  
  2156.                             .submit-page #newlink.submit.content .tabmenu.formtab .selected a {
  2157.                                 font-size: 16px;
  2158.                                 background-color: #516AE8;
  2159.                                 color: #fff;
  2160.                             }
  2161.  
  2162.                                 .submit-page #newlink.submit.content .tabmenu.formtab a:hover {background-color: #e7e9f6;}
  2163.                                 .submit-page #newlink.submit.content .tabmenu.formtab .selected a:hover {background-color: #6379ea;}
  2164.  
  2165.                     .submit-page .formtabs-content {border-top: 0px;padding-top: 0;}
  2166.  
  2167.                     .submit-page .roundfield {
  2168.                         padding: 16px;
  2169.                         width: 524px;
  2170.                         background-color: #fff;
  2171.                         border-radius: 2px;
  2172.                         margin-bottom: 16px;
  2173.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2174.                     }
  2175.  
  2176.                         .submit-page .roundfield .title {
  2177.                             color: #4D5763;
  2178.                             text-transform: capitalize;
  2179.                         }
  2180.  
  2181.                     .submit-page .infobar {
  2182.                         width: 524px;
  2183.                         margin: 0;
  2184.                         padding: 16px;
  2185.                         color: #fff;
  2186.                         background-color: #516AE8;
  2187.                         border-radius: 0 0 2px 2px;
  2188.                         border: none;
  2189.                         margin-top: -12px;
  2190.                         box-shadow:  0px 1px 5px rgba(0, 0, 0, 0.24);
  2191.                         font-size: 0px;
  2192.                     }
  2193.  
  2194.                         .submit-page .infobar:before {
  2195.                             font-size: 14px;
  2196.                             content: "Please submit insightful content that allows for discussion!";}
  2197.  
  2198.                     .content.submit .info-notice {
  2199.                         background-color: #fff;
  2200.                         border-radius: 2px;
  2201.                         padding: 16px;
  2202.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2203.                         border: none;
  2204.                         margin-bottom: 0px;
  2205.                     }
  2206.  
  2207.                     .submit-page #newlink.submit.content .btn {
  2208.                         width: 100%;
  2209.                         line-height: 41px;
  2210.                         height: 42px;
  2211.                         margin-top: 24px;
  2212.                         background-color: #516AE8;
  2213.                         border: none;
  2214.                         color: #fff;
  2215.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  2216.                         cursor: pointer;
  2217.                     }
  2218.  
  2219.                         .submit-page #newlink.submit.content .btn:hover {
  2220.                             box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.48);
  2221.                             color: #fff;
  2222.                         }
  2223.  
  2224.                 .submit-page #header-bottom-left {
  2225.                     top: 36px;
  2226.                     left: 16px;
  2227.                 }
  2228.  
  2229.                 /* Search Page */
  2230.                 .search-page .searchpane {
  2231.                     margin: 0 316px 0 0;
  2232.                     background: #fff none;
  2233.                     padding: 16px;
  2234.                     border: none;
  2235.                     border-radius: 2px 2px 0px 0px;
  2236.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  2237.                     position: relative;
  2238.                 }
  2239.                     .raisedbox h4 {
  2240.                         color: #B3B3B3 !important;
  2241.                         font-weight: normal;
  2242.                         text-transform: capitalize;
  2243.                     }
  2244.  
  2245.                     .search-page #search {
  2246.                         position: inherit;
  2247.                     }
  2248.  
  2249.                         .search-page #search input[type=text] {
  2250.                             box-shadow: none !important;
  2251.                             font-size: 36px;
  2252.                             padding: 0;
  2253.                             margin: 0;
  2254.                             border-radius: 0;
  2255.                             border-bottom: 1px solid #E7E7E7;
  2256.                             margin-bottom: 9px;
  2257.                         }
  2258.  
  2259.                             .search-page #search input[type=text]:hover {
  2260.                                 box-shadow: none !important;
  2261.                             }
  2262.  
  2263.                         .search-page #search label {
  2264.                             padding: 1em 1em 1em 1em;
  2265.                             margin: 0.5em 0em;
  2266.                             transition: background-color 0.1s ease;
  2267.                             cursor: pointer;
  2268.                             font-size: 12px;
  2269.                         }
  2270.                             .search-page #search label:hover {background-color: rgba(0,0,0,0.05);}
  2271.  
  2272.                         .search-page #previoussearch p {margin-top: 1.5em;}
  2273.  
  2274.  
  2275.                     .search-summary {display: none;}
  2276.                     .search-page .morelink {top: 96px;}
  2277.                     .search-page .side {margin-top: 148px;}
  2278.  
  2279.  
  2280.  
  2281.                 .search-page .searchfacets {
  2282.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  2283.                     border: none;
  2284.                     padding: 16px;
  2285.                     margin: 0 316px 0 0;
  2286.                     background-color: #F9F9F9;
  2287.                     border-radius: 0px 0px 2px 2px;
  2288.                 }
  2289.  
  2290.                     .searchfacets .title {margin: 0;}
  2291.  
  2292.                         .searchfacets h4.title {color: #4D5763;margin: 0 0 8px 0;}
  2293.                             .searchfacets h4.title:first-letter {text-transform: capitalize;}
  2294.  
  2295.                     .searchfacets .list {margin: 0;}
  2296.                     .searchfacets .facet.count {color: #B3B3B3;font-weight: normal;}
  2297.                         .searchfacets .facet.count:hover {text-decoration: none;}
  2298.  
  2299.  
  2300.                 .search-page .menuarea {
  2301.                     border-radius: 2px 2px 0px 0px;
  2302.                     border-bottom: 0px;
  2303.                     margin: 16px 316px 0px 0px;
  2304.                     padding :16px;
  2305.                     color: #B3B3B3;
  2306.                     background-color: #fff;
  2307.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2308.                 }
  2309.  
  2310.                     .search-page .menuarea .dropdown.lightdrop .selected {
  2311.                         text-decoration: none;
  2312.                         color: #4D5763;
  2313.                         font-weight: normal;
  2314.                         cursor: pointer;
  2315.                     }
  2316.  
  2317.                 .search-page #noresults {
  2318.  
  2319.                 }
  2320.  
  2321.  
  2322.  
  2323.                 /* Wiki Page */
  2324.                 .wiki-page .wikititle {
  2325.                     background-color: #fff;
  2326.                     padding: 9px 16px 10px 16px;
  2327.                     border-radius: 2px;
  2328.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2329.                     font-size: 16px;
  2330.                     font-family: arial, sans-serif;
  2331.                     text-transform: capitalize;
  2332.                     margin: 0;
  2333.                 }
  2334.  
  2335.                 .wiki-page .pageactions {
  2336.                     background-color: #fff;
  2337.                     margin-left: 16px;
  2338.                     border-radius: 2px;
  2339.                     padding: 0px 16px;
  2340.                     border: none;
  2341.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2342.                 }
  2343.  
  2344.                     .wiki-page .pageactions .wikiaction {
  2345.                         margin: 0;
  2346.                         background-color: transparent;
  2347.                         border-radius: 0px;
  2348.                         padding: 10px 16px 11px 16px;
  2349.                         color: #B3B3B3;
  2350.                     }
  2351.  
  2352.                         .wiki-page .pageactions .wikiaction-current {
  2353.                             padding: 10px 16px 7px 16px;
  2354.                             border-bottom: 4px solid #4F8EF7;
  2355.                             color: #4F8EF7;
  2356.                         }
  2357.  
  2358.                             .wiki-page .pageactions .wikiaction:hover, .wiki-page .pageactions .wikiaction-current:hover {background-color: rgba(0,0,0,0.05);}
  2359.  
  2360.                 .wiki-page .wiki-page-content {
  2361.                     margin: 16px 316px 16px 0px;
  2362.                     background-color: #fff;
  2363.                     padding: 16px;
  2364.                     border-radius: 2px;
  2365.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2366.                 }
  2367.  
  2368.                     .wiki-page .wiki-page-content .wiki>.toc>ul {
  2369.                         border: none;
  2370.                     }
  2371.  
  2372.                     .wiki-page .wiki-page-content .wiki.md {
  2373.                         color: #4D5763;
  2374.                     }
  2375.                         .wiki-page .wiki-page-content .wiki.md h2 {color: #4D5763;}
  2376.  
  2377.                         .wiki-page .wiki-page-content .wiki.md p {
  2378.                             font-size: 14px;
  2379.                             line-height: 1.4285714285714286em;
  2380.                         }
  2381.  
  2382.                         .wiki-page .wiki-page-content hr {
  2383.                             border-style: solid;
  2384.                             border-color: #e5e5e5;
  2385.                         }
  2386.  
  2387.                         .wiki-page .wiki-page-content em {color: #B3B3B3;}
  2388.  
  2389.                 /* Subreddit Settings Page + Flair Page + Stylesheet Page */
  2390.                 .linefield {
  2391.                     background-color: #fff;
  2392.                     color: #B3B3B3;
  2393.                     border-radius: 2px;
  2394.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2395.                     margin: 0 0 8px 0;
  2396.                     width: 531px;
  2397.                 }
  2398.  
  2399.                     .linefield .title {
  2400.                         color: #4F8EF7;
  2401.                         text-transform: capitalize;
  2402.                     }
  2403.  
  2404.                         .linefield .title:first-letter, .linefield label:first-letter {text-transform: capitalize;}
  2405.                         .usertext .bottom-area a {color: #b3b3b3;}
  2406.                         .usertext .bottom-area a:hover {color: #4f8ef7;}
  2407.  
  2408.                 .pretty-form {padding-top: 24px;}
  2409.                 .fancy-settings h1, .create-promotion h1 { color: rgba(255,255,255,.8); /* padding-top: 24px;margin-bottom: -18px; This was breaking stuff */}
  2410.                             .fancy-settings h1 strong {color: rgba(255,255,255,1);}
  2411.  
  2412.                 .tabmenu {
  2413.                     border-bottom: 1px solid #edeeee;
  2414.                     margin-bottom: 12px;
  2415.                 }
  2416.  
  2417.                     .tabmenu li {
  2418.  
  2419.                     }
  2420.  
  2421.                         .tabmenu li a {
  2422.                             background-color: transparent;
  2423.                             color: #4D5763;
  2424.                             border: none;
  2425.                             font-size: 14px;
  2426.                         }
  2427.  
  2428.                         .tabmenu li.selected a {
  2429.                             color: #4F8EF7;
  2430.                             background-color: transparent;
  2431.                             border: none;
  2432.                         }
  2433.  
  2434.  
  2435.                 .tabpane-content {
  2436.                     border: none;
  2437.                 }
  2438.  
  2439.                     .tabpane-content .flairrow {
  2440.  
  2441.                     }
  2442.  
  2443.                         .tabpane-content .flairrow a.author {color: #b3b3b3;}
  2444.                         .tabpane-content .tagline a {color: #4F8EF7;}
  2445.  
  2446.                         .tabpane-content .thing .title {overflow: visible;}
  2447.  
  2448.                 .fancy-settings .pretty-form {
  2449.                     padding-top: 0px;
  2450.                 }
  2451.  
  2452.  
  2453.                 /* Stylesheet page */
  2454.                 .stylesheet-customize-container .pretty-form {
  2455.                     padding-top: 0;
  2456.                     background-color: #fff;
  2457.                     padding: 16px;
  2458.                     margin-right: 316px;
  2459.                     border-radius: 2px;
  2460.                     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2461.                     margin-bottom: 16px;
  2462.                 }
  2463.  
  2464.                     .stylesheet-customize-container .pretty-form .sheets {margin-right: 0;}
  2465.  
  2466.                     .stylesheet-customize-container h2 {display: none;}
  2467.  
  2468.                     .sheets .btn.right {
  2469.                         background-color: transparent;
  2470.                         border: none;
  2471.                         box-shadow: none;
  2472.                         padding: 0;
  2473.                     }
  2474.  
  2475.  
  2476.                     #images {
  2477.                         padding: 16px;
  2478.                         background-color: #fff;
  2479.                         border-radius: 2px;
  2480.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16);
  2481.                         height: 560px;
  2482.                         margin-right: 316px;
  2483.                     }
  2484.  
  2485.                         #images #image-upload {
  2486.                             margin: 0em 0em 4em 0em;
  2487.                         }
  2488.  
  2489.  
  2490.  
  2491.                 /* Flairs */
  2492.                 .flair {
  2493.                     border: none;
  2494.                     border-radius: 0px;
  2495.                     font-size: 12px;
  2496.                     font-family: arial, sans-serif;
  2497.                     font-weight: bold;
  2498.                     background-color: transparent;
  2499.                     color: #4D5C71;
  2500.                     padding: 0px;
  2501.                     margin-right: inherit;
  2502.                     white-space: nowrap;
  2503.                 }
  2504.  
  2505.                     .link .flair {font-size: 12px;}
  2506.  
  2507.  
  2508.                     .flair:before {
  2509.                         margin-right: 3px;
  2510.                         height: auto;
  2511.                         margin-left: 0px;
  2512.                     }
  2513.                    
  2514.                     .flair:after {
  2515.                         margin-right: 3px;
  2516.                         height: auto;
  2517.                         margin-left: 3px;
  2518.                         content: url(%%shield%%);
  2519.                     }
  2520.  
  2521.                         .side .flair:before {margin-left: 0px;}
  2522.  
  2523.                 .footer {border: 0px solid;}
  2524.  
  2525.                 /* Bunch of RES (Reddit Enhancement Suite) Fixes */
  2526.                 .res .link .tagline a.voteWeight {background-color: transparent !important;}
  2527.                 .res .thing .tagline .author.moderator {background-color: #65B354 !important;padding: 1px 4px;border-radius: 1px;}
  2528.  
  2529.                 .res .srSep {color: rgba(255,255,255,0.45);}
  2530.                 .res #RESShortcutsViewport, .res #RESShortcutsEditContainer {margin-right: 312px;}
  2531.                     .res #RESShortcutsEditContainer, #RESShortcutsSort, #RESShortcutsRight, #RESShortcutsLeft, #RESShortcutsAdd, #RESShortcutsTrash {
  2532.                         background-color: transparent!important;
  2533.                         color: rgba(255, 255, 255, 0.45)!important;
  2534.                         top: 1px !important;
  2535.                     }
  2536.  
  2537.                 .res #header-bottom-right {
  2538.                     top: 1px;
  2539.                     border-radius: 0px;
  2540.                     height: 18px;
  2541.                     padding: 0px 8px 0px 0px;
  2542.                 }
  2543.  
  2544.                     .res #userbarToggle {
  2545.                         background-color: transparent;
  2546.                         color: rgba(255, 255, 255, 0.45);
  2547.                         border-radius: 0px;
  2548.                         border: none;
  2549.                     }
  2550.  
  2551.                     .res #header-bottom-right .user .userkarma {display: none;}
  2552.                     .res #header-bottom-right .user {font-size: 0px;}
  2553.                     .res #header-bottom-right .user a {font-size: 11px}
  2554.  
  2555.                     #RESAccountSwitcherIcon {
  2556.                         position: relative;
  2557.                         top: -4px;
  2558.                     }
  2559.  
  2560.                     .res #REScommentNavToggle {
  2561.                         max-width: 98px;
  2562.                         overflow: hidden;
  2563.                         max-height: 15px;
  2564.                         background-color: #FAFAFA;
  2565.                         transition: all 0.35s ease;
  2566.                     }
  2567.  
  2568.                         .res #REScommentNavToggle:hover {
  2569.                             max-width: 100%;
  2570.                         }
  2571.  
  2572.                         .res .commentarea>.usertext {
  2573.                             margin-top: -74px;
  2574.                             padding-top: 76px;
  2575.                         }
  2576.  
  2577.                 .res .content .RESBigEditorPop {
  2578.                     background-color: rgba(0, 0, 0, 0);
  2579.                     line-height: inherit;
  2580.                     font-size: 11px;
  2581.                     font-family: verdana,arial,sans-serif;
  2582.                     box-shadow: none;
  2583.                     font-weight: normal;
  2584.                     color: #4D5763;
  2585.                     border: none;
  2586.                     padding: 0;
  2587.                     height: inherit;
  2588.                     margin-left: 4px;
  2589.                     margin-top: 5px;
  2590.                 }
  2591.  
  2592.                 html.res-commentBoxes .comment {
  2593.                     margin-left: 0 !important;
  2594.                     margin-right: 0px !important;
  2595.                 }
  2596.  
  2597.                     .res .commentarea .thing {border: none !important;}
  2598.  
  2599.  
  2600.                 .res .titlebox span.subscribers, .res .titlebox .users-online, .res .titlebox .number {
  2601.                     top: 0px;
  2602.                     left: 0px;
  2603.                 }
  2604.  
  2605.                 .res .titlebox .tagline {margin-top: 6px;}
  2606.  
  2607.                 .res .RESshortcutside, .res .RESDashboardToggle {
  2608.                     background-image: none !important;
  2609.                     border: none;
  2610.                     color: #4D5763;
  2611.                     text-transform: uppercase;
  2612.                     text-decoration: none;
  2613.                     border-radius: 0px;
  2614.                     padding: 4px 6px 4px 0px;
  2615.                     margin: 2px 6px 2px -4px;
  2616.                     text-align: left;
  2617.                     width: auto;
  2618.                 }
  2619.  
  2620.                     .res .RESshortcutside:hover, .res .RESDashboardToggle:hover {
  2621.                         background-color: transparent;
  2622.                         color: #4F8EF7;
  2623.                     }
  2624.  
  2625.                 .res #progressIndicator {
  2626.                     width: inherit;
  2627.                     margin-right: 316px;
  2628.                     border-radius: 0px;
  2629.                     border: none;
  2630.                     padding: 16px;
  2631.                     margin: 16px 316px 16px 0px;
  2632.                     color: #b3b3b3;
  2633.                     background-color: #fff;
  2634.                     height: inherit;
  2635.                 }
  2636.  
  2637.  
  2638.                     .res #progressIndicator h2 {
  2639.                         color: #4D5763;
  2640.                     }
  2641.  
  2642.                     .res .NERPageMarker {
  2643.                         border-radius: 0px;
  2644.                         border: none;
  2645.                         background-color: #fff;
  2646.                         padding: 16px 0px;
  2647.                         margin: 0px;
  2648.                     }
  2649.  
  2650.                     .res .sitetable .sitetable {margin-right: 0px;}
  2651.  
  2652.                     .res #search #searchexpando {
  2653.                         width: 300px;
  2654.                         box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  2655.                         height: auto;
  2656.                     }
  2657.  
  2658.                         .res #search #searchexpando label {padding: 13px 0px;}
  2659.  
  2660.                         .res #searchexpando .searchexpando-submit {display: none;}
  2661.  
  2662.                     .res h1.hover.redditname {margin-bottom: 28px;}
  2663.                     .res .titlebox .fancy-toggle-button .add, .res .fancy-toggle-button .remove {top: -78px;}
  2664.                     .res .titlebox .tagline {margin-top: -14px;}
  2665.                     .res .titlebox span.subscribers, .res .titlebox .users-online, .res .titlebox .number {top: -32px;}
  2666.  
  2667.                     .res .commentarea .panestack-title {margin-top: 0px;padding-top: 12px;}
  2668.  
  2669.                     /* Gear dropdown */
  2670.                     .gearIcon {
  2671.                         background: url(%%spritesheet%%) -0px -0px !important;
  2672.                         position: relative;
  2673.                         top: 2px;
  2674.                         transition: all 0.25s ease;
  2675.                     }
  2676.  
  2677.                         #RESMainGearOverlay {
  2678.                             background-color: #516ae8;
  2679.                             top: 0px !important;
  2680.                             height: 26px !important;
  2681.                             border-radius: 0px !important;
  2682.                         }
  2683.  
  2684.                     .RESDropdownList {
  2685.                         border-color: #4258ca;
  2686.                         box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.24);
  2687.                         margin-top: 4px;
  2688.                         margin-right: 8px;
  2689.                     }
  2690.  
  2691.                         .RESDropdownList li {
  2692.                             background-color: #516ae8;
  2693.                             color: #fff;
  2694.                             border-color: #4258ca;
  2695.                             transition: all 0.15s ease;
  2696.                         }
  2697.  
  2698.                             .RESDropdownList li:first-letter {text-transform: capitalize;}
  2699.  
  2700.                             .RESDropdownList a, .RESDropdownList a:visited { color: #fff;}
  2701.  
  2702.                                 .RESDropdownList li:hover, .RESDropdownList li a:hover {
  2703.                                     color: #fff;
  2704.                                     background-color: #667df0;
  2705.                                 }
  2706.  
  2707.                             #RESSearchMenuItem {
  2708.                                 border: 1px solid #4258ca;
  2709.                                 border-radius: 1px;
  2710.                                 background-color: #667df0;
  2711.                             }
  2712.  
  2713.                                 #RESSearchMenuItem:hover {
  2714.                                     background-color: #667df0;
  2715.                                 }
  2716.  
  2717.                             .toggleButton {
  2718.                                
  2719.                             }
  2720.  
  2721.                                 .toggleButton .toggleOn, .toggleButton .toggleOff  {
  2722.                                     text-transform: lowercase;
  2723.                                 }
  2724.                                     /* Toggle off  */
  2725.                                     .moduleToggle:not(.enabled) .toggleOn, .toggleButton:not(.enabled) .toggleOn,
  2726.                                     .moduleToggle.enabled .toggleOff, .toggleButton.enabled .toggleOff {
  2727.                                         background-color: transparent;
  2728.                                         color: rgba(255,255,255,0.6);
  2729.                                         border: 1px solid #4258ca;
  2730.                                         transition: all 0.15s ease;
  2731.                                         border-radius: 2px;
  2732.                                     }
  2733.                                     /* Toggle on */
  2734.                                     .moduleToggle.enabled .toggleOn, .toggleButton.enabled .toggleOn,
  2735.                                     .moduleToggle:not(.enabled) .toggleOff, .toggleButton:not(.enabled) .toggleOff {
  2736.                                         background-color: #fff;
  2737.                                         color: #516AE8;
  2738.                                         font-weight: bolder;
  2739.                                         border: 1px solid #fff;
  2740.                                         transition: all 0.15s ease;
  2741.                                         border-radius: 2px;
  2742.                                     }
  2743.  
  2744.  
  2745.    
  2746.  
  2747.         /* Experimental fadein CSS */
  2748.         .listing-page .sitetable, .search-page .sitetable, .top-page .menuarea .spacer {
  2749.             animation-name: fadein;
  2750.             animation-duration: 0.75s;
  2751.             animation-iteration-count: 1;
  2752.  
  2753.             -webkit-animation-name: fadein;
  2754.             -webkit-animation-duration: 0.75s;
  2755.             -webkit-animation-iteration-count: 1;
  2756.         }
  2757.  
  2758.  
  2759.                 @-webkit-keyframes fadein {
  2760.                   0%   {opacity:0;transform:translateY(48px);-webkit-transform:translateY(48px);}
  2761.                   100% {opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
  2762.                 }
  2763.            
  2764.                 @-moz-keyframes fadein {
  2765.                   0%   {opacity:0;transform:translateY(48px);-webkit-transform:translateY(48px);}
  2766.                   100% {opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
  2767.                 }
  2768.            
  2769.                 @-o-keyframes fadein {
  2770.                   0%   {opacity:0;transform:translateY(48px);-webkit-transform:translateY(48px);}
  2771.                   100% {opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
  2772.                 }
  2773.            
  2774.                 @keyframes fadein {
  2775.                   0%   {opacity:0;transform:translateY(48px);-webkit-transform:translateY(48px);}
  2776.                   100% {opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
  2777.                 }
  2778.  
  2779.         /* Experimental pop-in message */
  2780.         .flairselector {
  2781.             animation-name: popin;
  2782.             animation-duration: 0.5s;
  2783.             animation-iteration-count: 1;
  2784.             animation-timing-function: ease-out;
  2785.  
  2786.             -webkit-animation-name: popin;
  2787.             -webkit-animation-duration: 0.5s;
  2788.             -webkit-animation-iteration-count: 1;
  2789.             -webkit-animation-timing-function: ease-out;
  2790.         }
  2791.  
  2792.                 @-webkit-keyframes popin {
  2793.                   0%   {transform:scale(0);-webkit-transform:scale(0);}
  2794.                   80%   {transform:scale(1.15);-webkit-transform:scale(1.15);}
  2795.                   100% {transform:scale(1);-webkit-transform:scale(1);}
  2796.                 }
  2797.            
  2798.                 @-moz-keyframes popin {
  2799.                   0%   {transform:scale(0);-webkit-transform:scale(0);}
  2800.                   80%   {transform:scale(1.15);-webkit-transform:scale(1.15);}
  2801.                   100% {transform:scale(1);-webkit-transform:scale(1);}
  2802.                 }
  2803.            
  2804.                 @-o-keyframes popin {
  2805.                   0%   {transform:scale(0);-webkit-transform:scale(0);}
  2806.                   80%   {transform:scale(1.15);-webkit-transform:scale(1.15);}
  2807.                   100% {transform:scale(1);-webkit-transform:scale(1);}
  2808.                 }
  2809.            
  2810.                 @keyframes popin {
  2811.                   0%   {transform:scale(0);-webkit-transform:scale(0);}
  2812.                   80%   {transform:scale(1.15);-webkit-transform:scale(1.15);}
  2813.                   100% {transform:scale(1);-webkit-transform:scale(1);}
  2814.                 }
  2815.  
  2816.         /* Experimental Toast Animation */
  2817.         #mail.havemail:before {
  2818.             animation-name: toast;
  2819.             animation-duration: 8s;
  2820.             animation-iteration-count: 1;
  2821.             animation-timing-function: ease;
  2822.  
  2823.             -webkit-animation-name: toast;
  2824.             -webkit-animation-duration: 8s;
  2825.             -webkit-animation-iteration-count: 1;
  2826.             -webkit-animation-timing-function: ease;
  2827.         }
  2828.  
  2829.             #mail.havemail:hover:before {
  2830.                 -webkit-animation-play-state: paused;
  2831.                  -moz-animation-play-state: paused;
  2832.                  -o-animation-play-state: paused;
  2833.                   animation-play-state: paused;
  2834.             }
  2835.  
  2836.  
  2837.             @-webkit-keyframes toast {
  2838.               0%    {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2839.               20%   {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2840.               25%   {transform:translateY(-8px);    -webkit-transform:translateY(-8px); opacity: 1;}
  2841.               27%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2842.               92%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2843.               97%   {transform:translateY(16px);    -webkit-transform:translateY(16px); opacity: 1;}
  2844.               100%  {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2845.             }
  2846.  
  2847.             @-o-keyframes toast {
  2848.               0%    {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2849.               20%   {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2850.               25%   {transform:translateY(-8px);    -webkit-transform:translateY(-8px); opacity: 1;}
  2851.               27%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2852.               92%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2853.               97%   {transform:translateY(16px);    -webkit-transform:translateY(16px); opacity: 1;}
  2854.               100%  {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2855.             }
  2856.  
  2857.  
  2858.             @-moz-keyframes toast {
  2859.               0%    {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2860.               20%   {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2861.               25%   {transform:translateY(-8px);    -webkit-transform:translateY(-8px); opacity: 1;}
  2862.               27%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2863.               92%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2864.               97%   {transform:translateY(16px);    -webkit-transform:translateY(16px); opacity: 1;}
  2865.               100%  {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2866.             }
  2867.  
  2868.  
  2869.             @keyframes toast {
  2870.               0%    {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2871.               20%   {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2872.               25%   {transform:translateY(-8px);    -webkit-transform:translateY(-8px); opacity: 1;}
  2873.               27%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2874.               92%   {transform:translateY(00px);    -webkit-transform:translateY(00px); opacity: 1;}
  2875.               97%   {transform:translateY(16px);    -webkit-transform:translateY(16px); opacity: 1;}
  2876.               100%  {transform:translateY(76px);    -webkit-transform:translateY(76px); opacity: 0;}
  2877.             }
  2878.  
  2879.  
  2880.  
  2881.             @-webkit-keyframes upvote{
  2882.                0%   {transform:scale(0,0);          -webkit-transform:scale(0,0);        opacity:1; }
  2883.                45%  {                                                                    opacity:1; }
  2884.                98%  {opacity: 0;}
  2885.                100% {transform:scale(1.5,1.5);          -webkit-transform:scale(1.5,1.5); opacity: 0;}
  2886.             }
  2887.  
  2888.             @-moz-keyframes upvote{
  2889.                0%   {transform:scale(0,0);          -webkit-transform:scale(0,0);        opacity:1; }
  2890.                45%  {                                                                    opacity:1; }
  2891.                98%  {opacity: 0;}
  2892.                100% {transform:scale(1.5,1.5);          -webkit-transform:scale(1.5,1.5); opacity: 0;}
  2893.             }
  2894.  
  2895.             @-o-keyframes upvote{
  2896.                0%   {transform:scale(0,0);          -webkit-transform:scale(0,0);        opacity:1; }
  2897.                45%  {                                                                    opacity:1; }
  2898.                98%  {opacity: 0;}
  2899.                100% {transform:scale(1.5,1.5);          -webkit-transform:scale(1.5,1.5); opacity: 0;}
  2900.             }
  2901.  
  2902.             @keyframes upvote{
  2903.                0%   {transform:scale(0,0);          -webkit-transform:scale(0,0);        opacity:1; }
  2904.                45%  {                                                                    opacity:1; }
  2905.                98%  {opacity: 0;}
  2906.                100% {transform:scale(1.5,1.5);          -webkit-transform:scale(1.5,1.5); opacity: 0;}
  2907.             }
  2908.  
  2909.  
  2910.  
  2911.  
  2912. /* ===============================================================================================================================
  2913.  
  2914.    
  2915.                                         /////
  2916.                 End of the basic stylesheet - add your customizations below!   
  2917.                                         /////
  2918.  
  2919.  
  2920. ==================================================================================================================================*/
  2921.  
  2922. /*--Announcement Fade-in Fade-out--*/
  2923.      .titlebox form {
  2924.          position: static
  2925.      }
  2926.  
  2927.      .titlebox .usertext-body .md h5 {
  2928.     position: absolute;
  2929.     right: 332px;
  2930.     left: 16px;
  2931.     z-index: 102;
  2932.     height: auto;
  2933.     top: 44px;
  2934.     padding: 11px 11px 11px 16px;
  2935.     border-radius: 2px;
  2936.     background-color: #1A1F1B;
  2937.     width: 697px;
  2938.     color: #FFF;
  2939.     font-weight: bold;
  2940.     border: 1px solid #1A1F1B;
  2941.     border-radius: 2px 2px 0 0;
  2942.     margin: 0;
  2943.     line-height: 1;
  2944.     text-align: center;
  2945.     overflow: hidden;
  2946.      }
  2947.  
  2948.      .md h6 a::before {
  2949.          color: #fff;
  2950.          padding-right: .3em;
  2951.          margin-right: .3em;
  2952.      }
  2953.  
  2954.      .md h6 em {
  2955.          font-style: normal;
  2956.          word-spacing: 4px;
  2957.      }
  2958.  
  2959.      .titlebox .usertext-body .md h5 strong {
  2960.          display: block;
  2961.          text-indent: 0;
  2962.          -webkit-animation: ticker 7s linear infinite; /*Change transition speed*/
  2963.          -moz-animation: ticker 7s linear infinite; /*Change transition speed*/
  2964.          animation: ticker 7s linear infinite; /*Change transition speed*/
  2965.          white-space: nowrap;
  2966.          text-align: center;
  2967.      }
  2968.           @-webkit-keyframes ticker {
  2969.           0% { opacity: 0 ; } /*change according to message length*/
  2970.          10% { opacity: 1 ; }
  2971.          90% { opacity: 1 ; } /*change according to message length*/
  2972.         100% { opacity: 0 ; }
  2973.      }
  2974.      @-moz-keyframes ticker {
  2975.           0% { opacity: 0 ; } /*change according to message length*/
  2976.          10% { opacity: 1 ; }
  2977.          90% { opacity: 1 ; } /*change according to message length*/
  2978.         100% { opacity: 0 ; }
  2979.      }
  2980.  
  2981.      @keyframes ticker {
  2982.           0% { opacity: 0 ; } /*change according to message length*/
  2983.          10% { opacity: 1 ; }
  2984.          90% { opacity: 1 ; } /*change according to message length*/
  2985.         100% { opacity: 0 ; }
  2986.  
  2987.      .titlebox .usertext-body .md h5 strong:hover {
  2988.          display: block;
  2989.          text-indent: 0;
  2990.          -webkit-animation-play-state: paused; /* Safari and Chrome */
  2991.          animation-play-state: paused;
  2992.      }
  2993. /* --- End Addon --- */
  2994.  
  2995. /*Make rainbows everytime a mod distinguishes a comment*/
  2996.     a.author.moderator, .res a.author.moderator {
  2997.         color: #A92731!important;
  2998.         background: #1F2120;
  2999.     }
  3000. /* --- End Addon --- */
Advertisement
Add Comment
Please, Sign In to add comment