API tools faq
paste
Guest User

r/HectorBigPicture beta 0.1 by hectorlizard

a guest
Jun 23rd, 2017
414
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 141.39 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. --------------------------------------------------------------------------------
  3.  
  4.     Powered by Hector Big Picture, a theme for Reddit
  5.     By u/hectorlizard
  6.     More info at r/HectorBigPicture and hectorlizard.me
  7.  
  8.       Title: r/HectorBigPicture stylesheet
  9.     Version: beta 0.2
  10.      Design: u/hectorlizard
  11.        Code: u/hectorlizard
  12.  
  13. --------------------------------------------------------------------------------
  14.  
  15.     Index (WIP)
  16.  
  17.     -   Hector color system
  18.  
  19.     1.  Global Styles
  20.         1.1 Text & links [body, a, blockquote, code, spoiler text etc.]
  21.         1.2 Buttons [button, .nav-buttons]
  22.         1.3 Regular tables [table]
  23.         1.4 Link flair [.linkflairlabel]
  24.  
  25.     2.  Header [#header]
  26.         2.1 Subreddit List [#sr-header-area]
  27.             2.1.1  Dropdown List [.selected, .drop-choices]
  28.             2.1.2  Subreddits bar [.sr-bar, .flat-list]
  29.             2.1.3  'Edit»' link [#sr-more-link]
  30.         2.2 Main Header [#header-bottom-left]
  31.             2.2.1  Subreddit Title [.pagename]
  32.             2.2.2  Navigation [#header .tabmenu]
  33.             2.2.3  Animated Snoo icon [#header-img-a]
  34.         2.3 User Menu [#header-bottom-right]
  35.             2.3.1  Mail [#mail, #modmail]
  36.             2.3.2  Preferences & Logout [.pref-lang, .loggedin .logout]
  37.  
  38.     3. Sidebar [.side]
  39.         3.1 Search bar [.search]
  40.             3.1.1 Main search field [#search input]
  41.             3.1.2 Search options [#searchexpando, .infobar]
  42.         3.2 Login form [.login-form-side]
  43.         3.3 Link metadata [.linkinfo]
  44.         3.4 Submit & sub creation buttons [.morelink]
  45.         3.5 Titlebox [.titlebox]
  46.             3.5.1 Sidebar subreddit title [.titlebox h1]
  47.             3.4.2 Subscribe/unsubscribe buttons
  48.             3.5.3 Subscribers & online users count [.subscribers, .users-online]
  49.             3.5.4 Mod, theme & flair options
  50.                 3.5.4.1 Mod option [.leavemoderator]
  51.                 3.5.4.2 Theme & flair checkboxes [.sr_style_toggle]
  52.                 3.5.4.3 Flair preview & options [.flairtoggle]
  53.         3.6 Sidebar tables [.side .md .table]
  54.         3.7 SWL Recent leaks [href=]
  55.         3.8 SWL Discord [href=]
  56.         3.9 Flair filters & guidelines [href=]
  57.         3.10 Sidebar misc
  58.             3.10.1 Sidebar general styles
  59.             3.10.2 Sidebar titles & separators [.side .usertext blockquote]
  60.             3.10.3 Sidebar collapsible box (Moderation tools) [.sidecontentbox.collapsible]
  61.             3.10.4 Other side content boxes (Moderators, Recently viewed links) [.sidecontentbox]
  62.             3.10.5 'Created by' & Subreddit age [.titlebox .bottom, .titlebox .age]
  63.             3.10.6 Create your own Subreddit [.sidebox.create]
  64.             3.10.7 Moderators list
  65.             3.10.8 Recently viewed links [.side .reddit-link]
  66.             3.10.9 'Account activity' link [.account-activity-box]
  67.  
  68.     4. Sticky 'quick links' bar
  69.  
  70.     5. Content
  71.         5.1 Global content styles
  72.         5.2 Linklisting
  73.             5.2.1 Sitetable links [.sitetable .link]
  74.             5.2.2 Stickied post ('Announcement') [.stickied.link]
  75.             5.2.3 Expandable content preview
  76.             5.2.4 Approval checkmark (green tick)
  77.         5.3 Report management
  78.  
  79.     6. Thread page
  80.         6.1 'All x comments' [.panestack-title]
  81.         6.2 'Sorted by' and OP/mod actions [.menuarea]
  82.         6.3 Main comment field [.usertext-edit]
  83.             6.3.1 Field itself [.usertext-edit, textarea]
  84.             6.3.2 'Save' button, 'Content policy' & 'Formatting help' [.bottom-area]
  85.             6.3.3 Formatting help [.usertext .markhelp]
  86.             6.3.4 'Highlight comments posted since previous visit' [.gold-accent, .new-comment]
  87.         6.4 Comments [.comment]
  88.             6.4.1 Comment area general styles
  89.             6.4.2 Username [.author]
  90.                 6.4.2.1 User attributes [.userattrs]
  91.  
  92.     7. (temporary) Submit page [.submit-page]
  93.  
  94.     8. 'Edit stylesheet' page [.stylesheet-customize-container]
  95.  
  96.     9. Footer [.footer]
  97.  
  98.     10. RES (Reddit Enhancement Suite)
  99.         10.1 RES subreddit list shortcuts
  100.         10.2 RES userbar
  101.         10.3 RES various fixes
  102.  
  103.  
  104. --------------------------------------------------------------------------------
  105.  
  106.     Hector color system
  107.  
  108.         Sub background: #F2F7F7
  109.         Default footer: #FAF4E7
  110.         Separators: rgba(255,255,255,.2)
  111.         Secondary text on bg: #F9F9F9
  112.         Medium importance text on bg (highlight comments option, etc): #E7E7E7
  113.         Regular text on bg: #FFFDFD
  114.         Buttons (text & borders): #FFFFFD
  115.         Buttons (active background) : #DFDFDF
  116.         Header highlights & body links: #fda4a4
  117.         Button hover shadows: rgba(0,0,1,1)
  118.         Button active shadows: rgba(0,0,2,1)
  119.         White panel normal shadows: rgba(0,0,0,0.5)
  120.         White panel hover & active shadows: rgba(0,0,0,1)
  121.  
  122. --------------------------------------------------------------------------------
  123. */
  124.  
  125. /*
  126.     1.  Global Styles
  127. */
  128.  
  129.     /*
  130.         1.1 Text & links
  131.     */
  132.  
  133.         body {
  134.             font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  135.             min-height: 100%;
  136.             position: relative;
  137.             top: 15px;
  138.             overflow-x: hidden;
  139.             color: white
  140.         }
  141.  
  142.             body:before {
  143.                 content: " ";
  144.                 position: fixed;
  145.                 z-index: -99;
  146.                 display: block;
  147.                 width: 100%;
  148.                 height: 100vh;
  149.                 top: 0;
  150.                 bottom: 0;
  151.                 background: url(%%bg%%) no-repeat center top;
  152.                 background-attachment: fixed;
  153.                 background-size: cover
  154.             }
  155.  
  156.             body:after {
  157.                 content: "";
  158.                 display: block;
  159.                 position: absolute;
  160.                 top: 211px;
  161.                 height: 1px;
  162.                 width: calc(100% - 130px);
  163.                 margin-left: 65px;
  164.                 margin-right: 65px;
  165.                 background-color: rgba(255,255,255,.2);
  166.             }
  167.  
  168.             #body { padding-right: 0px }
  169.  
  170.         /* Default links */
  171.  
  172.             a { color: #F9F9F9; text-decoration: none !important }
  173.             a:hover, a:focus {color: #F9F9F9; text-decoration: underline }
  174.             a:visited { color: #F9F9F9 }
  175.  
  176.         /* Markdown */
  177.  
  178.  
  179.             /* Body */
  180.  
  181.                 .md { color: white }
  182.  
  183.             /* Links [.md a] */
  184.  
  185.                 .md a, .md a:visited { color: #fda4a4; text-decoration: none }
  186.                 .md a:hover, .md a:visited:hover { color: #fda4a4; text-decoration: underline !important }
  187.  
  188.             /* Horizontal rule */
  189.  
  190.                 .md hr {
  191.                     height: 1px;
  192.                     background: rgba(0,0,0,.1)
  193.                 }
  194.  
  195.             /* Quote */
  196.  
  197.                 .md blockquote {
  198.                     border-left: 2px solid #9F9F9F;
  199.                     color: #9F9F9F
  200.                 }
  201.  
  202.             /* Strikethrough */
  203.            
  204.                 .md del { color: #9F9F9F }
  205.  
  206.             /* Code & preformatted text */
  207.  
  208.                 .md code, .md pre {
  209.                     font-family: Menlo, Consolas, monospace;
  210.                     font-size: 11px;
  211.                     border: none;
  212.                     border-radius: 3px
  213.                 }
  214.  
  215.                 .md code {background-color: transparent !important }
  216.  
  217.                 .md pre { background-color: rgba(0,0,0,.06) !important }
  218.  
  219.         /* Spoiler tags ("[This is a spoiler sentence.](/spoiler)") */
  220.  
  221.             a[href$="/spoiler"] {  
  222.             background: transparent !important;  
  223.             color: transparent !important;
  224.             text-shadow: 0 0 8px #000000;
  225.             margin-left: 4px;
  226.             margin-right: 4px;
  227.             transition: all .5s ease-in-out
  228.             }  
  229.  
  230.             a[href$="/spoiler"]:hover {  
  231.             color: black !important;
  232.             text-shadow: none;
  233.             text-decoration: none !important
  234.             }  
  235.  
  236.             a[href$="#s"] {  
  237.             background: #000 !important;  
  238.             color: #000 !important  
  239.             }  
  240.  
  241.             a[href$="#s"]:hover {  
  242.             color: #FFF !important  
  243.             }  
  244.  
  245.     /*
  246.         1.2 Buttons
  247.     */
  248.  
  249.         button, .nav-buttons a {
  250.             font-size: 11px;
  251.             font-weight: 600;
  252.             letter-spacing: 1.12px;
  253.             text-transform: uppercase !important;
  254.             color: #FFFFFD !important;
  255.             background: transparent !important;
  256.             text-decoration: none;
  257.             border: 1px solid #FFFFFD !important;
  258.             border-radius: 20px !important;
  259.             box-shadow: 0 0px 0px 0px rgba(29,82,80,0.4);
  260.             transition: all 0.2s ease;
  261.             text-align: center;
  262.             padding: 5px 20px 5px 20px
  263.         }
  264.  
  265.             button:hover, .nav-buttons a:hover {
  266.                 background: #fff !important;
  267.                 border: 1px solid #fff !important;
  268.                 color: black !important;
  269.                 box-shadow: 0 5px 11px -4px rgba(0,0,1,1)
  270.             }
  271.  
  272.             button:active, .nav-buttons a:active {
  273.                 background: #DFDFDF !important;
  274.                 border: 1px solid #DFDFDF !important;
  275.                 color: black !important;
  276.                 box-shadow: 0 2px 4px -2px rgba(0,0,2,1)
  277.             }
  278.  
  279.         .nav-buttons {
  280.             padding: 0;
  281.             padding-top: 16px;
  282.             border-top: none
  283.         }
  284.  
  285.             .nav-buttons a {
  286.                 border-radius: 2px;
  287.                 border-width: 0px;
  288.                 background-color: #f5f5f5;
  289.                 color: #42a5f5
  290.             }
  291.  
  292.             .nav-buttons .nextprev {
  293.                 font-size: 11px !important;
  294.                 font-weight: normal !important;
  295.                 color: #E7E7E7 !important;
  296.                 text-transform: uppercase;
  297.                 letter-spacing: 1.12px
  298.             }
  299.  
  300.     /*
  301.         1.3 Tables
  302.         -> See 3.6 for Sidebar tables
  303.     */
  304.  
  305.         table {
  306.             padding: 0 0 0 0 !important;
  307.             margin: 5px 0 0 0 !important;
  308.             padding-left: 0 !important;
  309.             padding-right: 0 !important;
  310.             border: none !important;
  311.             background-color: transparent;
  312.             width: auto
  313.         }
  314.  
  315.             tbody {
  316.                 margin: 0 0 !important;
  317.                 font-size: 13px;
  318.                 color: white !important
  319.             }
  320.  
  321.                 tbody a {
  322.                     color: #fda4a4 !important
  323.                 }
  324.  
  325.                     tbody a:hover {
  326.                         text-decoration: underline !important
  327.                     }
  328.  
  329.             th {
  330.                 padding-left: 10px !important;
  331.                 padding-right: 10px !important;
  332.                 border: none !important;
  333.                 font-size: 11px;
  334.                 font-weight: 400 !important;
  335.                 color: rgba(255,255,255,.6)
  336.             }
  337.  
  338.             td {
  339.                 border-top: 1px solid rgba(255,255,255,.2) !important;
  340.                 border-right: none !important;
  341.                 border-bottom: none !important;
  342.                 border-left: none !important;
  343.                 background-color: transparent;
  344.                 padding-left: 20 !important;
  345.                 padding-right: 20 !important;
  346.                 padding-top: 5px !important;
  347.                 padding-bottom: 6px !important
  348.             }
  349.  
  350.     /*
  351.         1.4 Link flair [.linkflairlabel]
  352.         -> Don't forget to duplicate specific colors if you use Flair filters & guidelines (see 3.9)
  353.     */
  354.  
  355.         /* Generic rules */ .linkflairlabel {
  356.             border-radius: 20px;
  357.             text-transform: uppercase;
  358.             border: none;
  359.             font-size: 9px;
  360.             font-weight: 700;
  361.             letter-spacing: 0.5px;
  362.             color: black;
  363.             background: #B1B1B1;
  364.             padding: 1px 6px 1px 7px;
  365.             position: relative;
  366.             top: 3px;
  367.             left: 4px;
  368.             float: right
  369.         }
  370.  
  371.         /* Specific colors */
  372.  
  373.             /* Wild rumor */.linkflair-wildrumor .linkflairlabel {
  374.                                 background: transparent;
  375.                                 border: 1px dashed #F9F9F9;
  376.                                 color: #F9F9F9;
  377.                                 top: 2px
  378.                             }
  379.             /* Leak! */.linkflair-leak .linkflairlabel {background: #E7484F}
  380.             /* Fake */.linkflair-fake .linkflairlabel {
  381.                             background: transparent;
  382.                             border: 1px solid #D7965A;
  383.                             color: #D7965A;
  384.                             top: 2px
  385.                         }
  386.             /* Merch */.linkflair-merchandise .linkflairlabel {background: #E5BD00}
  387.             /* Cast/crew */.linkflair-cast-crew .linkflairlabel {background: #7ED321}
  388.             /* Report */.linkflair-report .linkflairlabel {background: #3AD692}
  389.             /* News */.linkflair-news .linkflairlabel {background: #4BBFF4}
  390.             /* Off. footage */.linkflair-officialfootage .linkflairlabel {background: #A588FF}
  391.             /* Off. promo */.linkflair-officialpromo .linkflairlabel {background: #FF80DA}
  392.             /* Discussion */.linkflair-discussion .linkflairlabel {background: #F9F9F9}
  393.             /* Meta */.linkflair-meta .linkflairlabel {background: black}
  394.  
  395. /*
  396.     2.  Header [#header]
  397. */
  398.  
  399.     #header {
  400.         height: 198px;
  401.         background: transparent url(%%header%%) no-repeat center top;
  402.         background-size: 500px 198px;
  403.         background-color: transparent;
  404.         border-bottom: none;
  405.         margin-bottom: 25px;
  406.     }
  407.  
  408.     /* 2.1  Subreddit List [#sr-header-area] */
  409.  
  410.             #sr-header-area {
  411.               background-color: #fff;
  412.               height: 15px;
  413.               max-height: 20px!important;
  414.               padding-top: 3px;
  415.               padding-bottom: 3px;
  416.               color: #8B8B8B;
  417.               font-size: 9px;
  418.               letter-spacing: normal;
  419.               font-weight: 600;
  420.               text-transform: none;
  421.               border: none;
  422.               box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
  423.               transform: translateY(-18px);
  424.               position: relative;
  425.               z-index: 1;
  426.             }
  427.  
  428.         /* 2.1.1  Dropdown List [.selected, .drop-choices] */
  429.  
  430.             #sr-header-area .dropdown.srdrop {
  431.                 padding-left: 65px;
  432.                 color: rgba(216,216,216, 0.75)
  433.             }
  434.  
  435.             .dropdown.srdrop .selected {
  436.                 color: #8B8B8B;
  437.                 text-transform: capitalize;
  438.                 background-image: none;
  439.                 font-weight: 500;
  440.                 padding-right: 8px;
  441.                 margin-right: 18px;
  442.                 transition: all .1s ease-in-out
  443.             }
  444.  
  445.                 .dropdown.srdrop .selected:after {
  446.                     content: "";
  447.                     display: inline-block;
  448.                     position: relative;
  449.                     width: 6px;
  450.                     height: 5px;
  451.                     margin-left: 2px;
  452.                     background-image: url(%%spritesheet-hector%%);
  453.                     background-size: 381px 64px;
  454.                     background-position: -340px 0
  455.                 }
  456.  
  457.                 .dropdown.srdrop .selected:hover { color: black }
  458.  
  459.                     .dropdown.srdrop .selected:hover:after { background-position: -346px 0 }
  460.  
  461.             .drop-choices.srdrop {
  462.                 position: absolute;
  463.                 left: 40px !important;
  464.                 top: 16px !important;
  465.                 font-size: 12px;
  466.                 font-weight: 400;
  467.                 text-transform: none;
  468.                 letter-spacing: normal;
  469.                 border-radius: 4px;
  470.                 border: none;
  471.                 background: #aeb0b2 url(%%sr-drop-bg%%) top left repeat-x;
  472.                 white-space: nowrap;
  473.                 line-height: 11px;
  474.                 margin-top: 1px;
  475.                 box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.35), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  476.                 padding: 4px 0px 4px 0px;
  477.                 z-index: 1000 !important
  478.             }
  479.  
  480.                 .drop-choices.inuse {
  481.                     display: block;
  482.                     z-index: 1000 !important;
  483.                 }
  484.  
  485.                 .drop-choices a.choice {
  486.                     cursor: pointer;
  487.                     padding: 2px 20px 3px 20px;
  488.                     display: block;
  489.                     color: black !important;
  490.                     z-index: 1000 !important
  491.                 }
  492.  
  493.                     .drop-choices.srdrop a.choice:hover {
  494.                         background-color: #227dd6 !important;
  495.                         z-index: 1000 !important
  496.                     }
  497.  
  498.                     .drop-choices a.choice:hover {
  499.                         color: white !important;
  500.                         background-color: #227dd6;
  501.                         overflow: visible;
  502.                         z-index: 1000 !important
  503.                     }
  504.  
  505.                     .drop-choices a.choice.selected {
  506.                         display: none;
  507.                         z-index: 1000 !important
  508.                     }
  509.  
  510.                 .srdrop .choice.bottom-option {
  511.                     border-top: 2px solid #a6a6a7;
  512.                     margin-top: 4px;
  513.                     padding-top: 4px;
  514.                     font-style: normal;
  515.                     overflow: visible;
  516.                     z-index: 1000 !important
  517.                 }
  518.  
  519.                     .srdrop .choice.bottom-option::first-letter {
  520.                         text-transform: capitalize !important
  521.                     }
  522.  
  523.                     .srdrop .choice.bottom-option::after {
  524.                         content: "..."
  525.                     }
  526.  
  527.                 #sr-header-area .drop-choices.srdrop a {
  528.                     color: rgba(255, 255, 255, 0.4);
  529.                     z-index: 1000 !important
  530.                 }
  531.  
  532.                     #sr-header-area .drop-choices.srdrop a:hover {
  533.                         background-color: transparent;
  534.                         color: rgba(255, 255, 255, 0.6);
  535.                         text-decoration: none
  536.                     }
  537.  
  538.         /* 2.1.2  Subreddits bar [.sr-bar, .flat-list] */
  539.  
  540.             .separator, .sr-bar .separator { color: transparent }
  541.  
  542.             .flat-list { text-transform: capitalize }
  543.  
  544.                 .sr-bar a, .flat-list li a.gold {
  545.                     color: #8B8B8B; font-weight: normal;
  546.                     transition: all .1s ease-in-out
  547.                 }
  548.  
  549.                     .sr-bar a:hover, .flat-list li a.gold:hover { color: black }
  550.  
  551.                     .sr-bar a:after {
  552.                         content: "/";
  553.                         padding-left: 2px;
  554.                         margin-right: -9px;
  555.                         color: #949494
  556.                     }
  557.  
  558.                     .sr-bar li:last-child a:after {
  559.                         content: " ";
  560.                         padding-right: 0px
  561.                     }
  562.  
  563.         /* 2.1.3  'Edit»' link [#sr-more-link] */
  564.  
  565.             #sr-more-link {
  566.                 height: 17px;
  567.                 width: 85px;
  568.                 color: #8B8B8B;
  569.                 font-weight: 500;
  570.                 text-transform: capitalize;
  571.                 margin: 0 0 0 0;
  572.                 padding-top: 0px;
  573.                 border-left: none;
  574.                 background-color: white
  575.             }
  576.  
  577.                 #sr-more-link:hover {color: #494949}
  578.  
  579.                 #sr-more-link:after {
  580.                     display: block;
  581.                     position: relative;
  582.                     top: -13px;
  583.                     left: -15px;
  584.                     content: "";
  585.                     width: 1px;
  586.                     height: 9px;
  587.                     background-color: #949494;
  588.                     opacity: 0.75
  589.                 }
  590.  
  591.     /*
  592.         2.2  Main Header [#header-bottom-left]
  593.     */              
  594.  
  595.         #header-bottom-left {
  596.             font-size: 100%;
  597.             z-index: -1 !important;
  598.             margin-left: 3px
  599.         }
  600.  
  601.         /*
  602.             2.2.1 Subreddit Title [.pagename]
  603.         */
  604.  
  605.             .pagename { font-size: 0 }
  606.  
  607.                 .pagename a {
  608.                     display: block;
  609.                     position: absolute;
  610.                     top: 10px;
  611.                     left: 50%;
  612.                     transform: translateX(-50%);
  613.                     background: url(%%sublogo%%) no-repeat center;
  614.                     width: 240px;
  615.                     height: 140px;
  616.                     background-size: 240px 140px;
  617.                     margin: 15px 0 0 0;
  618.                     transition: all .12s ease-in-out;
  619.                 }
  620.  
  621.                     .pagename a:hover {
  622.                         background: url(%%sublogo-hover%%);
  623.                         text-decoration: none;
  624.                         background-size: 240px 140px;
  625.                         transform-origin: 0% 50%;
  626.                         transform: scale(1.01) translateX(-50%);
  627.                         left: 50%;
  628.                         transition: all .12s ease-in-out
  629.                     }
  630.  
  631.                     /* Preload hover state */
  632.  
  633.                         .account-activity-box:after { background: url(%%sublogo-hover%%) }
  634.  
  635.                     .pagename a:active {
  636.                         background: url(%%sublogo%%);
  637.                         background-size: 240px 140px;
  638.                         transform-origin: 0% 50%;
  639.                         transform: scale(1) translateX(-50%);
  640.                         left: 50%
  641.                     }
  642.  
  643.         /*
  644.             2.2.2  Navigation [#header .tabmenu]
  645.         */
  646.  
  647.            #header .tabmenu {
  648.                 display: inline-block;
  649.                 position: absolute;
  650.                 z-index: -1;
  651.                 bottom: 2px;
  652.                 margin: 0;
  653.                 margin-left: 48px;
  654.                 line-height: 30px;
  655.                 -webkit-transform: translate3d(0, 0, 0)
  656.             }
  657.  
  658.                 /* Hide unimportant tabs */
  659.  
  660.                     /* Gilded (tab 6) */
  661.  
  662.                         #header .tabmenu li:nth-of-type(6) {
  663.                             display:none;
  664.                             visibility:hidden
  665.                         }
  666.  
  667.                     /* Wiki (tab 7) */
  668.  
  669.                         #header .tabmenu li:nth-of-type(7) {
  670.                             display:none;
  671.                             visibility:hidden
  672.                         }
  673.  
  674.                     /* Promoted (tab 8) */
  675.  
  676.                         #header .tabmenu li:nth-of-type(8) {
  677.                             display:none;
  678.                             visibility:hidden
  679.                         }
  680.  
  681.                 #header .tabmenu li, #header .tabmenu li a {
  682.                     display: inline-block;
  683.                     margin: 0;
  684.                     padding: 0;
  685.                     background: none;
  686.                     z-index: 1
  687.                 }
  688.  
  689.                     #header .tabmenu li a {
  690.                         position: relative;
  691.                         padding: 0 10px;
  692.                         font-size: 11px;
  693.                         color: #D8D8D8;
  694.                         font-weight: 500;
  695.                         letter-spacing: 0.48px;
  696.                         text-transform: uppercase;
  697.                         border-radius: 2px;
  698.                         transition: all 0.2s ease;
  699.                         z-index: 1
  700.                     }
  701.  
  702.                         #header .tabmenu li a:hover {color: #fff}
  703.  
  704.                     #header .tabmenu li.selected a {color: #fff; border: 0; z-index: 1;}
  705.  
  706.                         #header .tabmenu li a:after {
  707.                             position: absolute;
  708.                             right: 0;
  709.                             left: 0;
  710.                             bottom: -2px;
  711.                             margin: 0 10px;
  712.                             height: 0px;
  713.                             content: "";
  714.                             background: #fda4a4;
  715.                             transition: all 0.2s ease;
  716.                             background: transparent;
  717.                             z-index: 1;
  718.                             transform: translateY(14px)
  719.                         }
  720.  
  721.                             #header .tabmenu li a:hover:after,
  722.                             #header .tabmenu li.selected a:after {
  723.                                 background: #fda4a4;
  724.                                 height: 3px;
  725.                                 z-index: 1;
  726.                             }
  727.  
  728.         /*
  729.             2.2.3  Animated Snoo icon [#header-img-a]
  730.         */
  731.  
  732.             /* Default white Snoo */ #header-bottom-left #header-img-a {
  733.                 display: block;
  734.                 position: absolute;
  735.                 left: 0px;
  736.                 top: 5px;
  737.                 content: "";
  738.                 background: url(%%snoo-default%%);
  739.                 background-size: 170px 170px;
  740.                 width: 170px;
  741.                 height: 170px
  742.             }
  743.  
  744.                 /* Animated Snoo on hover */
  745.  
  746.                     #header-bottom-left #header-img-a:hover {
  747.                         background: url(%%snoos%%);
  748.                         background-size: 170px 170px;
  749.                         animation: snoos 3s steps(1) infinite
  750.                     }
  751.  
  752.                         @keyframes snoos { 100% {background-position: -170px} }
  753.  
  754.                     #header-bottom-left #header-img-a:active {
  755.                         transform: scale(0.9);
  756.                         z-index: 10 !important
  757.                     }
  758.  
  759.                 /* Hide Snoo from 'Edit settings' */
  760.  
  761.                     #header-bottom-left #header-img-a img { display: none }
  762.  
  763.                 /* Slash */
  764.  
  765.                     #header-bottom-left #header-img-a:after {
  766.                         display: block;
  767.                         pointer-events: none;
  768.                         background: url(%%slash%%);
  769.                         width: 170px;
  770.                         height: 170px;
  771.                         background-size: 170px 170px;
  772.                         content: "";
  773.                         position: absolute;
  774.                         z-index: -1 !important
  775.                     }
  776.  
  777.                         #header-bottom-left #header-img-a:active:after {
  778.                             transform: scale(1.11);
  779.                             z-index: -1 !important
  780.                         }
  781.  
  782.     /*
  783.         2.3 User Menu [#header-bottom-right]
  784.     */
  785.  
  786.         #header-bottom-right {
  787.             height: 30px;
  788.             margin: 43px;
  789.             margin-bottom: 0;
  790.             padding: 0 20px;
  791.             background: transparent;
  792.             font-size: 11px;
  793.             letter-spacing: 0.48px;
  794.             line-height: 30px;
  795.             text-transform: uppercase;
  796.             -webkit-transform: translate3d(0, 0, 0);
  797.             transition: transform 0.1 ease-in-out
  798.         }
  799.  
  800.             #header-bottom-right #mail:hover,
  801.             #header-bottom-right #modmail:hover,
  802.             #header-bottom-right #new_modmail:hover,
  803.             #header-bottom-right a.pref-lang:hover,
  804.             .loggedin .logout a:hover {
  805.                 transform: scale(1.15)
  806.             }
  807.  
  808.             #header-bottom-right #mail:active,
  809.             #header-bottom-right #modmail:active,
  810.             #header-bottom-right #new_modmail:active,
  811.             #header-bottom-right a.pref-lang:active,
  812.             .loggedin .logout a:active {
  813.                 transform: scale(1)
  814.             }
  815.  
  816.             #header-bottom-right a {
  817.                 color: #fda4a4; opacity: 1;
  818.                 transition: all 0.2s ease
  819.             }
  820.  
  821.                 #header-bottom-right a:hover { text-decoration: underline !important }
  822.  
  823.                 #header-bottom-right .user a.login-required {color: #0069e1}
  824.  
  825.                     #header-bottom-right .user a.login-required:before { content: "" }
  826.  
  827.                 .loggedin #header-bottom-right .user {
  828.                     color: transparent;
  829.                     margin-right: -8px
  830.                 }
  831.  
  832.                 #header-bottom-right .user {
  833.                     position: relative;
  834.                     top: -2px
  835.                 }
  836.  
  837.                 #header-bottom-right .user a {
  838.                     font-weight: 700 !important;
  839.                     margin-right: 0px;
  840.                     padding-right: 0px
  841.                 }
  842.  
  843.                 #header-bottom-right .user .userkarma {
  844.                     color: #D8D8D8;
  845.                     font-weight: 500 !important;
  846.                     margin-left: 0px;
  847.                     padding-left: 0px
  848.                 }
  849.  
  850.                     #header-bottom-right .user .userkarma:before {
  851.                         content: "(";
  852.                         display: inline-block;
  853.                         margin-right: 0;
  854.                         color: #D8D8D8;
  855.                         background-position: 0 0
  856.                     }
  857.  
  858.                     #header-bottom-right .user .userkarma:after {
  859.                         content: ")";
  860.                         display: inline-block;
  861.                         margin-right: 4px;
  862.                         color: #D8D8D8;
  863.                         background-position: 0 0
  864.                     }
  865.  
  866.                 #header-bottom-right .separator { visibility: hidden }
  867.  
  868.         /*
  869.             2.3.1  Mail [#mail, #modmail]
  870.         */
  871.  
  872.             #header-bottom-right #mail,
  873.             #header-bottom-right #modmail,
  874.             #header-bottom-right #new_modmail {
  875.                 height: 20px;
  876.                 width: 20px;
  877.                 background-image: url(%%spritesheet-hector%%);
  878.                 background-size: 381px 64px;
  879.                 background-color: transparent;
  880.                 border-radius: 2px;
  881.                 opacity: 1;
  882.                 transition: all 0.2s ease
  883.             }
  884.  
  885.                 #header-bottom-right #mail { top: 3px }
  886.  
  887.                     #header-bottom-right #mail.nohavemail { background-position: -261px -20px }
  888.  
  889.                     #header-bottom-right #mail.havemail { background-position: -261px -40px }              
  890.  
  891.                     #header-bottom-right .message-count {
  892.                         background-color: #FA3E3E;
  893.                         color: #fff !important;
  894.                         border-radius: 2px;
  895.                         font-size: 10px;
  896.                         letter-spacing: 0.3;
  897.                         line-height: 14px;
  898.                         font-weight: bold;
  899.                         padding: 0px 3px 0px 3px;
  900.                         height: 15px;
  901.                         position: relative;
  902.                         top: -9px;
  903.                         left: -6px;
  904.                         margin: -9px -12px 0 0;
  905.                         z-index: 100
  906.                     }
  907.  
  908.                 #header-bottom-right #modmail { top: -4px }
  909.  
  910.                     #header-bottom-right #modmail.nohavemail { background-position: -281px -20px }
  911.  
  912.                     #header-bottom-right #modmail.havemail { background-position: -281px -40px }
  913.  
  914.                     #header-bottom-right #new_modmail.nohavemail {
  915.                         background-position: -301px -20px;
  916.                         top: -2px !important
  917.                     }
  918.  
  919.                     #header-bottom-right #new_modmail.havemail {
  920.                         background-position: -301px -40px;
  921.                         top: -2px !important
  922.                     }
  923.  
  924.         /*
  925.             2.3.2  Preferences & Logout [.pref-lang, .loggedin .logout]
  926.         */
  927.  
  928.             #header-bottom-right a.pref-lang, .loggedin .logout a {
  929.                 display: inline-block;
  930.                 position: relative;
  931.                 top: 3px;
  932.                 margin: 0px;
  933.                 height: 20px;
  934.                 width: 20px;
  935.                 text-indent: -9999px;
  936.                 background-image: url(%%spritesheet-hector%%);
  937.                 background-size: 381px 64px;
  938.                 border-radius: 2px;
  939.                 opacity: 1;
  940.                 transition: all 0.2s ease
  941.             }
  942.  
  943.             /* Preferences */
  944.  
  945.                 #header-bottom-right a.pref-lang { background-position: -321px -20px }
  946.  
  947.             /* Logout */
  948.  
  949.                 .loggedin .logout a { background-position: -341px -20px }
  950.  
  951. /*
  952.     3.  Sidebar [.side]
  953. */
  954.  
  955.     .side {
  956.         float: right;
  957.         margin-top: 15px;
  958.         margin-right: 52px;
  959.         width: 312px;
  960.         background: transparent;
  961.         text-align: left;
  962.         overflow: hidden
  963.     }
  964.  
  965.         .side .md { text-align: left ;color: #FFFDFD }
  966.  
  967.             .side .md p { color: #FFFDFD }
  968.  
  969.                 .side .md p em {
  970.                     color: #FFFDFD;
  971.                     font-style: normal !important;
  972.                     font-weight: 400
  973.         }
  974.  
  975.     /*
  976.         3.1 Search bar [#search]
  977.     */
  978.  
  979.         #search {
  980.             margin-top: 5px !important;
  981.             margin-bottom: 35px
  982.         }
  983.  
  984.             #search:after {
  985.                 display: block;
  986.                 content: "";
  987.                 position: absolute;
  988.                 width: 277px;
  989.                 height: 1px;
  990.                 background-color: #F9F9F9
  991.             }
  992.  
  993.         /*
  994.             3.1.1 Main Search field [#search input]
  995.         */
  996.  
  997.             #search input {
  998.                 background-color: transparent;
  999.                 border-bottom: 0px solid #F9F9F9 !important;
  1000.                 border-top: none !important;
  1001.                 border-right: none !important;
  1002.                 border-left: none !important;
  1003.                 height: 19px;
  1004.                 padding-right: 20px
  1005.             }
  1006.  
  1007.                 #search input:focus { outline: none }
  1008.  
  1009.                 #search input:after {
  1010.                     display: block;
  1011.                     content: "";
  1012.                     position: relative;
  1013.                     width: 277px;
  1014.                     height: 1px;
  1015.                     background-color: #F9F9F9;
  1016.                     top: -17px
  1017.                 }
  1018.  
  1019.                 #search input[type=text] {
  1020.                     border-bottom: 1px solid gray;
  1021.                     font-weight: 400;
  1022.                     font-size: 16px;
  1023.                     width: 280px;
  1024.                     box-sizing: border-box;
  1025.                     padding: 6px;
  1026.                     padding-right: 25px;
  1027.                     padding-left: 0px;
  1028.                     vertical-align: middle
  1029.                 }
  1030.  
  1031.                 /* "Search" placeholder (3 duplicates is irritating right?) */
  1032.  
  1033.                     ::-webkit-input-placeholder {
  1034.                         font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1035.                         font-size: 15px;
  1036.                         color: #FFFDFD;
  1037.                         letter-spacing: 0.01px;
  1038.                         text-transform: capitalize
  1039.                     }
  1040.  
  1041.                     ::-moz-placeholder {
  1042.                         font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1043.                         font-size: 15px;
  1044.                         color: #FFFDFD;
  1045.                         letter-spacing: 0.01px;
  1046.                         text-transform: capitalize
  1047.                     }
  1048.  
  1049.                     :-ms-input-placeholder {
  1050.                         font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1051.                         font-size: 15px;
  1052.                         color: #FFFDFD;
  1053.                         letter-spacing: 0.01px;
  1054.                         text-transform: capitalize
  1055.                     }
  1056.  
  1057.                     input:-moz-placeholder {
  1058.                         font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1059.                         font-size: 15px;
  1060.                         color: #FFFDFD;
  1061.                         letter-spacing: 0.01px;
  1062.                         text-transform: capitalize
  1063.                     }
  1064.  
  1065.                 /* Search button (magnifying glass) */ #search input[type=submit] {
  1066.                     transform: translateX(0px);
  1067.                     background-color: transparent;
  1068.                     background-image: url(%%spritesheet-hector%%);
  1069.                     background-size: 381px 64px;
  1070.                     background-position: -132px -45px;
  1071.                     background-repeat: no-repeat !important;
  1072.                     height: 19px !important;
  1073.                     width: 19px !important;
  1074.                     max-width: 19px !important;
  1075.                     box-sizing: border-box;
  1076.                     border: none !important;
  1077.                     margin: 0;
  1078.                     margin-left: 0px;
  1079.                     vertical-align: middle;
  1080.                 }
  1081.  
  1082.                     #search input[type=submit]:hover {
  1083.                         background-image: url(%%spritesheet-hector%%);
  1084.                         background-size: 381px 64px;
  1085.                         background-position: -164px -45px
  1086.                     }
  1087.  
  1088.             /*
  1089.                 3.1.2 Search options [#searchexpando, .infobar]
  1090.             */
  1091.  
  1092.                 #searchexpando {
  1093.                     display: none;
  1094.                     margin: 5px 0 0 0;
  1095.                     padding-top: 10px;
  1096.                     border-radius: 3px;
  1097.                     border: none
  1098.                 }
  1099.  
  1100.                     #searchexpando input, #searchexpando p {
  1101.                         margin-bottom: 10px
  1102.                     }
  1103.  
  1104.                     #searchexpando dl {
  1105.                         margin: 10px 0
  1106.                     }
  1107.  
  1108.                     #searchexpando dt {
  1109.                         margin: 0
  1110.                     }
  1111.  
  1112.                 .side .infobar {
  1113.                     border: none;
  1114.                     border-radius: 0px;
  1115.                     font: normal 11px -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1116.                     margin: 5px 305px 5px 0px;
  1117.                     padding: 0px 0px;
  1118.                     color: #F9F9F9
  1119.                 }
  1120.  
  1121.                     #searchexpando.infobar {
  1122.                         background-color: transparent;
  1123.                         text-transform: none;
  1124.                         letter-spacing: normal;
  1125.                         color: #F9F9F9;
  1126.                         font-size: 10px
  1127.                     }
  1128.  
  1129.                 .side label {
  1130.                     font-size: 11px !important;
  1131.                     text-transform: capitalize; !important
  1132.                 }
  1133.  
  1134.     /*
  1135.         3.2 Login form [.login-form-side]
  1136.     */
  1137.  
  1138.         .login-form-side {
  1139.             width: 300px;
  1140.             border: none;
  1141.             border-top: 1px solid rgba(255,255,255,.2);
  1142.             border-bottom: 1px solid rgba(255,255,255,.2);
  1143.             padding: 25px 0 10px 0;
  1144.             margin-bottom: 15px;
  1145.         }
  1146.  
  1147.             .login-form-side input[type=text], .login-form-side input[type=password] {
  1148.                 font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1149.                 background: transparent !important;
  1150.                 font-size: 12px !important;
  1151.                 border: none;
  1152.                 border-bottom: 1px solid #F9F9F9;
  1153.                 padding: 0px;
  1154.                 margin: 0 5px 0 0;
  1155.             }
  1156.  
  1157.     /*
  1158.         3.3 Link metadata [.linkinfo]
  1159.     */
  1160.  
  1161.         .linkinfo {
  1162.             font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  1163.             padding: 0px;
  1164.             border: none;
  1165.             background-color: transparent;
  1166.             border-radius: 0px;
  1167.             margin-top: 15px;
  1168.             border-top: 1px solid rgba(255,255,255,.2);
  1169.             border-bottom: 1px solid rgba(255,255,255,.2);
  1170.             padding-top: 18px;
  1171.             color: #F9F9F9;
  1172.             padding-bottom: 29px;
  1173.             margin-bottom: 25px;
  1174.             width: 300px
  1175.         }
  1176.  
  1177.             .linkinfo .date {
  1178.                 font-size: 10px;
  1179.                 color: #FFFDFD;
  1180.                 font-weight: 500;
  1181.                 letter-spacing: 0.1px;
  1182.             }
  1183.  
  1184.                 .linkinfo .date::first-letter {text-transform: uppercase;}
  1185.  
  1186.             /* % upvoted */ .linkinfo .score {
  1187.                 color: #F9F9F9 !important;
  1188.             }
  1189.  
  1190.                 .linkinfo .score .number {
  1191.                     font-size: 20px;
  1192.                     font-weight: 600;
  1193.                     color: #FFFDFD;
  1194.                 }
  1195.  
  1196.                     .linkinfo .score .word {
  1197.                         font-size: 14px;
  1198.                         color: #FFFDFD;
  1199.                         font-weight: 600
  1200.                     }
  1201.  
  1202.             .linkinfo .shortlink {
  1203.                 font-size: 10px;
  1204.                 color: #F9F9F9;
  1205.                 text-transform: capitalize;
  1206.                 letter-spacing: normal;
  1207.                 margin-top: 3px;
  1208.                 font-weight: 600px;
  1209.                 margin-top: 0px;
  1210.             }
  1211.  
  1212.                 .linkinfo .shortlink input {
  1213.                     border: none;
  1214.                     font-family: Menlo, Consolas, monospace !important;
  1215.                     font-size: 13px;
  1216.                     color: #F9F9F9;
  1217.                     padding: 3px 2px;
  1218.                     width: 175px;
  1219.                     background: transparent;
  1220.                 }
  1221.  
  1222.                     .linkinfo .shortlink input:hover {
  1223.                         cursor: text
  1224.                     }
  1225.  
  1226.             .linkinfo table {
  1227.                 margin-top: 5px
  1228.             }
  1229.  
  1230.                 .linkinfo td, .linkinfo th {
  1231.                     padding: 2px;
  1232.                     font-size: smaller;
  1233.                     border: 1px solid gray
  1234.                 }
  1235.  
  1236.     /*
  1237.         3.4 Submit & sub creation buttons [.morelink]
  1238.     */
  1239.  
  1240.         .morelink {
  1241.                 position: absolute;
  1242.                 height: 23px;
  1243.                 width: 138px;
  1244.                 font-size: 11px;
  1245.                 font-weight: 600;
  1246.                 line-height: 23px;
  1247.                 letter-spacing: 1.12px;
  1248.                 text-transform: uppercase;
  1249.                 background: transparent;
  1250.                 border: 1px solid #FFFFFD;
  1251.                 border-radius: 20px;
  1252.                 box-shadow: 0 0px 0px 0px rgba(29,82,80,0.4);
  1253.                 transition: all 0.2s ease
  1254.             }
  1255.  
  1256.                 .morelink a { color: #FFFFFD }
  1257.  
  1258.                 .morelink:hover {
  1259.                     background: #fff;
  1260.                     border: 1px solid #fff;
  1261.                     color: black !important;
  1262.                     box-shadow: 0 5px 11px -4px rgba(0,0,1,1);
  1263.                 }
  1264.  
  1265.                     .morelink a:hover { color: black !important }
  1266.  
  1267.                 .morelink:active {
  1268.                     background: #DFDFDF !important;
  1269.                     border: 1px solid #DFDFDF;
  1270.                     box-shadow: 0 2px 4px -2px rgba(0,0,2,1)
  1271.                 }
  1272.  
  1273.                     .morelink a:active { color: black !important }
  1274.  
  1275.                 .disabled .morelink,
  1276.                 .disabled .morelink:hover,
  1277.                 .disabled .morelink:active {
  1278.                     background: none;
  1279.                     background-color: #f5f5f5;
  1280.                     border-bottom-right-radius: 0;
  1281.                     border-bottom-left-radius: 0;
  1282.                     box-shadow: none;
  1283.                 }
  1284.  
  1285.                 .morelink .nub { display: none; }
  1286.  
  1287.                 .submit-text .morelink { right: 65px}
  1288.  
  1289.         .sidebox .submit { border-top: 2px solid black }
  1290.  
  1291.                 .sidebox.submit.submit-link a:before {
  1292.                     display: inline-block;
  1293.                     content: "";
  1294.                     background: url(%%spritesheet-hector%%);
  1295.                     background-size: 381px 64px;
  1296.                     background-position: -46px 0;
  1297.                     width: 13px;
  1298.                     height: 13px;
  1299.                     margin-right: 5px;
  1300.                     transform: translateY(2px)
  1301.                 }
  1302.  
  1303.                     .sidebox.submit.submit-link a:hover:before { background-position: -46px -40px !important }
  1304.  
  1305.                 .sidebox.submit.submit-text a:before {
  1306.                     display: inline-block;
  1307.                     content: "";
  1308.                     background: url(%%spritesheet-hector%%);
  1309.                     background-size: 381px 64px;
  1310.                     background-position: -72px 0;
  1311.                     width: 13px;
  1312.                     height: 13px;
  1313.                     margin-right: 5px;
  1314.                     transform: translateY(2px)
  1315.                 }
  1316.  
  1317.                     .sidebox.submit.submit-text a:hover:before { background-position: -72px -40px !important }
  1318.  
  1319.             .sidebox.submit.disabled { box-shadow: -0.1px 1px 1px 0 rgba(0, 0, 0, 0.1) }
  1320.  
  1321.             .submit .spacer.no-icon {
  1322.                 padding: 5px;
  1323.                 text-align: center;
  1324.                 border-top: 1px solid #efefed;
  1325.                 border-bottom-right-radius: 2px;
  1326.                 border-bottom-left-radius: 2px;
  1327.             }
  1328.  
  1329.                 .submit .spacer.no-icon .subtitle {
  1330.                     margin: 0;
  1331.                     font-size: 100%;
  1332.                     color: #aaa;
  1333.                 }
  1334.  
  1335.     /*
  1336.         3.5 Titlebox [.titlebox]
  1337.     */
  1338.  
  1339.         .titlebox {margin-top: 84px}
  1340.  
  1341.             .titlebox:before {
  1342.                 display: block;
  1343.                 content: "";
  1344.                 width: 300px;
  1345.                 height: 1px;
  1346.                 background-color: rgba(255,255,255,.2)
  1347.             }
  1348.  
  1349.             .titlebox::first-letter,
  1350.             .titlebox form.toggle::first-letter,
  1351.             .leavemoderator::first-letter {
  1352.                 text-transform: capitalize !important
  1353.             }
  1354.  
  1355.         /*
  1356.             3.5.1 Sidebar Subreddit title [.titlebox h1]
  1357.             -> Uncomment the one you want to use (text version is the default one)
  1358.         */
  1359.  
  1360.             /* text version */ .titlebox h1 {
  1361.                 font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif !important;
  1362.                 margin-top: 25px;
  1363.                 opacity: 0.4;
  1364.                 padding-top: 0px;
  1365.                 width: 300px;
  1366.                 width: 207px;
  1367.                 height: 48px;
  1368.                 text-align: center;
  1369.                 margin-bottom: 6px;
  1370.                 font-weight: 700 !important;
  1371.                 font-size: 20px;
  1372.                 color: rgba(255,255,255,0.50) !important;
  1373.                 letter-spacing: 2.04px;
  1374.                 text-transform: uppercase
  1375.             }
  1376.  
  1377.                 .titlebox h1 a {
  1378.                     font-weight: 700 !important;
  1379.                     font-size: 20px;
  1380.                     color: rgba(255,255,255,0.50) !important;
  1381.                     letter-spacing: 2.04px;
  1382.                     text-transform: uppercase
  1383.                 }
  1384.  
  1385.                 .titlebox h1:before {
  1386.                     content: "R/";
  1387.                     display: inline
  1388.                 }
  1389.  
  1390.             /* Logo version */ /* .titlebox h1 {
  1391.                 margin-top: 25px;
  1392.                 padding-top: 0px;
  1393.                 width: 100%;
  1394.                 font-size: 0px;
  1395.                 display: inline-block !important;
  1396.                 height: 21px !important;
  1397.                 text-align: center !important;
  1398.                 margin-left: 0px;
  1399.                 margin-bottom: 12px;
  1400.                 background: url(%%titlebox%%) no-repeat center;
  1401.                 background-size: 231px 21px
  1402.             }
  1403.  
  1404.         /*
  1405.             3.5.2 Subscribe/unsubscribe buttons
  1406.         */
  1407.  
  1408.             .fancy-toggle-button .add, .fancy-toggle-button .remove {
  1409.                 padding: 5px 30px;
  1410.                 border-radius: 20px;
  1411.                 position: relative;
  1412.                 left: 0%;
  1413.                 height: 25px;
  1414.                 font-weight: 600;
  1415.                 line-height: 25px;
  1416.                 letter-spacing: 1.12px;
  1417.                 text-transform: uppercase;
  1418.                 color: #FFFFFD;
  1419.                 background: transparent;
  1420.                 font-size: 11px !important;
  1421.                 border-radius: 20px !important;
  1422.                 box-shadow: 0 0px 0px 0px rgba(29,82,80,0.4);
  1423.                 transition: all 0.2s ease;
  1424.             }
  1425.  
  1426.             .titlebox {text-align: center;}
  1427.  
  1428.             .fancy-toggle-button .add, .fancy-toggle-button .remove,
  1429.             .res .fancy-toggle-button .add, .res .fancy-toggle-button .remove {
  1430.                 font-size: 11px !important;
  1431.                 text-transform: uppercase;
  1432.                 transition: .2s;
  1433.                 background-image: none !important;
  1434.                 outline-width: 0 !important;
  1435.                 outline: none !important;
  1436.             }
  1437.  
  1438.             .fancy-toggle-button .add {background: transparent}
  1439.            
  1440.                 .fancy-toggle-button .add:before {
  1441.                     display: inline-block;
  1442.                     content: "";
  1443.                     background: url(%%spritesheet-hector%%);
  1444.                     background-size: 381px 64px;
  1445.                     background-position: -33px 0;
  1446.                     width: 13px;
  1447.                     height: 13px;
  1448.                     margin-right: 5px;
  1449.                     transform: translateY(2px);
  1450.                 }
  1451.  
  1452.                 .fancy-toggle-button .add:hover {
  1453.                             background: #fff !important;
  1454.                             border: 1px solid #fff !important;
  1455.                             color: black !important;
  1456.                             box-shadow: 0 5px 11px -4px rgba(0,0,1,1);
  1457.                             background-position: -33px -40px
  1458.                 }
  1459.  
  1460.                     .RESDashboardToggle:active,
  1461.                     .fancy-toggle-button .add:active,
  1462.                     body.res .RESshortcutside:active {
  1463.                                 background: #DFDFDF !important;
  1464.                                 border: 1px solid #DFDFDF !important;
  1465.                                 color: black !important;
  1466.                                 box-shadow: 0 2px 4px -2px rgba(0,0,2,1);
  1467.                     }
  1468.  
  1469.             .fancy-toggle-button .remove {background: transparent;}
  1470.                 .fancy-toggle-button .remove:before {
  1471.                 display: inline-block;
  1472.                 content: "";
  1473.                 background: url(%%spritesheet-hector%%);
  1474.                 background-size: 381px 64px;
  1475.                 background-position: -59px 0;
  1476.                 width: 13px;
  1477.                 height: 13px;
  1478.                 margin-right: 5px;
  1479.                 transform: translateY(2px)
  1480.             }
  1481.  
  1482.                 .fancy-toggle-button .remove:hover {
  1483.                             background: #fff;
  1484.                             border: 1px solid #fff !important;
  1485.                             color: black !important;
  1486.                             box-shadow: 0 5px 11px -4px rgba(0,0,1,1);
  1487.                             background-position: -59px -40px
  1488.                 }
  1489.  
  1490.                 .fancy-toggle-button .remove:active {
  1491.                             background: #DFDFDF !important;
  1492.                             border: 1px solid #DFDFDF !important;
  1493.                             color: black !important;
  1494.                             box-shadow: 0 2px 4px -2px rgba(0,0,2,1);
  1495.                 }
  1496.  
  1497.                 .fancy-toggle-button .add, .fancy-toggle-button .remove,
  1498.                 .res .fancy-toggle-button .add, .res .fancy-toggle-button .remove {
  1499.                     font-size: 11px !important;
  1500.                     border: 1px solid #FFFFFD;
  1501.                     text-transform: uppercase;
  1502.                     transition: .2s;
  1503.                     background-image: none !important
  1504.                 }
  1505.  
  1506.             .titlebox h1.redditname {
  1507.                 width: 100%;
  1508.                 text-align: center
  1509.             }
  1510.  
  1511.             .titlebox .redditname {
  1512.                 height: 25px
  1513.             }
  1514.  
  1515.             .res .titlebox .fancy-toggle-button {
  1516.                 display: inline-block;
  1517.                 margin-top: 10px;
  1518.                 margin-right: 5px;
  1519.                 margin-left: 0;
  1520.                 width: auto
  1521.             }
  1522.  
  1523.             .titlebox .fancy-toggle-button {
  1524.                 margin: 4px auto 0;
  1525.                 width: 100%;
  1526.                 display: inline-block;
  1527.                 transition: .3s
  1528.             }
  1529.  
  1530.         /*
  1531.             3.5.3 Subscribers & online users count [.subscribers, .users-online]
  1532.         */
  1533.  
  1534.             .subscribers, .users-online {
  1535.                 color: #FFFDFD;
  1536.                 font-size: 15px;
  1537.                 letter-spacing: normal;
  1538.                 font-weight: 500;
  1539.                 position: relative;
  1540.                 margin-bottom: -16px
  1541.             }
  1542.  
  1543.             .subscribers {
  1544.                 left: -25%;
  1545.                 top: 12px
  1546.             }
  1547.  
  1548.                 .subscribers .word { display: none }
  1549.  
  1550.                 .subscribers .number::after {
  1551.                     content: " readers";
  1552.                     font-size: 10px;
  1553.                     display: block
  1554.                 }
  1555.  
  1556.                 .subscribers .number::before { display: none }
  1557.  
  1558.                 /* Vertical separator */ .subscribers:after {
  1559.                     display: block;
  1560.                     position: absolute;
  1561.                     content: "";
  1562.                     width: 1px;
  1563.                     height: 26px;
  1564.                     background-color: rgba(255,255,255,.2);
  1565.                     left: 236px;
  1566.                     top: -26px;
  1567.                 }
  1568.  
  1569.             .users-online {
  1570.                 left: 25%;
  1571.                 top: -18px
  1572.             }
  1573.  
  1574.                 /* Green dot */ .users-online:before {
  1575.                                 display: inline-block;
  1576.                                 float: none;
  1577.                                 background: #41E527;
  1578.                                 border: none;
  1579.                                 border-radius: 20px;
  1580.                                 width: 8px;
  1581.                                 height: 8px
  1582.                 }
  1583.  
  1584.                 .users-online .word { display: none }
  1585.  
  1586.                 .users-online .number::after {
  1587.                     content: " users here now";
  1588.                     font-size: 10px;
  1589.                     display: block
  1590.                 }
  1591.  
  1592.         /*
  1593.             3.5.4 Mod, theme & flair options
  1594.         */
  1595.  
  1596.             /*
  1597.                 3.5.4.1 Mod option [.leavemoderator]
  1598.             */
  1599.  
  1600.                 .titlebox .leavemoderator {
  1601.                     display: block;
  1602.                     width: 280px;
  1603.                     margin: 19px 0 0px;
  1604.                     padding: 0 5px 0px;
  1605.                     color: #F9F9F9 !important;
  1606.                     background: transparent;
  1607.                     font-size: 10px;
  1608.                     text-align: left;
  1609.                     line-height: 16px;
  1610.                 }
  1611.  
  1612.                 .titlebox form.leavemoderator-button {
  1613.                     color: #F9F9F9;
  1614.                     position: absolute !important;
  1615.                     display: block !important;
  1616.                     text-align: right !important;
  1617.                 }
  1618.  
  1619.                 .titlebox .leavemoderator, .titlebox form.leavecontributor-button {
  1620.                     font-size: 0;
  1621.                 }
  1622.  
  1623.                     .titlebox .leavemoderator:before {
  1624.                         background: url(%%spritesheet-hector%%);
  1625.                         background-size: 381px 64px;
  1626.                         background-position: -327px 0 !important;
  1627.                         width: 12.5px;
  1628.                         height: 15px;
  1629.                         transform: translateX(-4px)
  1630.                     }
  1631.  
  1632.                     .titlebox form.leavecontributor-button:before {
  1633.                         background: none
  1634.                     }
  1635.  
  1636.                         .titlebox .leavemoderator:before {
  1637.                             background-position: -32px -32px;
  1638.                         }
  1639.  
  1640.                         .titlebox form.leavecontributor-button:before {
  1641.                             background-position: -48px -32px;
  1642.                         }
  1643.  
  1644.                     .titlebox .leavemoderator:after,
  1645.                     .titlebox form.leavecontributor-button:after {
  1646.                         font-size: 10px;
  1647.                         line-height: 12px;
  1648.                         vertical-align: middle;
  1649.                     }
  1650.  
  1651.                         .titlebox .leavemoderator:after {
  1652.                             content: "Moderator"
  1653.                         }
  1654.                         .titlebox form.leavecontributor-button:after {
  1655.                             content: "Approved Submitter"
  1656.                         }
  1657.  
  1658.                     /* 'Change' link next to 'Moderator' */ .titlebox .leavemoderator a,
  1659.                     .titlebox form.leavecontributor-button a {
  1660.                         position: absolute;
  1661.                         right: 66px;
  1662.                         font-size: 10px;
  1663.                         text-transform: capitalize;
  1664.                         color: #F9F9F9;
  1665.                     }
  1666.  
  1667.                         .titlebox .leavemoderator a:hover,
  1668.                         .titlebox form.leavecontributor-button a:hover {
  1669.                             color: #F9F9F9;
  1670.                             text-decoration: underline !important;
  1671.                         }
  1672.  
  1673.                     .leavecontributor-button .option.active.error {
  1674.                         display: block;
  1675.                         font-size: 10px;
  1676.                     }
  1677.  
  1678.                         .option.active.error a { position: inherit; }
  1679.  
  1680.             /*
  1681.                 3.5.4.2 Theme & flair checkboxes [.sr_style_toggle]
  1682.             */
  1683.  
  1684.                 .titlebox form.sr_style_toggle, .titlebox form.flairtoggle {
  1685.                     font-size: 10px;
  1686.                     line-height: normal;
  1687.                     margin-top: 0px;
  1688.                     padding-top: 0px
  1689.                 }
  1690.  
  1691.                     .sr_style_toggle, .flairtoggle {
  1692.                         text-align: left !important;
  1693.                         font-size: 10px !important;
  1694.                         color: #F9F9F9 !important;
  1695.                     }
  1696.  
  1697.                     .titlebox form.flairtoggle {
  1698.                         margin-bottom: 5px;
  1699.                         padding-bottom: 0px;
  1700.                         padding-top: 0px;
  1701.                         margin-top: -6px;
  1702.                         color: #F9F9F9 !important;
  1703.                         font-size: 10px !important
  1704.                     }
  1705.  
  1706.                 .flairtoggle label,
  1707.                 .sr_style_toggle label {
  1708.                   position:relative;
  1709.                   top: 3px;
  1710.                   font-size: 10px !important;
  1711.                   color: #F9F9F9 !important;
  1712.                 }
  1713.  
  1714.                 .flairtoggle,
  1715.                 .sr_style_toggle,
  1716.                 .leavecontributor-button,
  1717.                 .leavemoderator {
  1718.                     background-color: transparent !important
  1719.                 }
  1720.  
  1721.                 .leavecontributor-button { display: none !important }
  1722.  
  1723.                 /* Checkboxes */
  1724.  
  1725.                     form input[type=checkbox] {
  1726.                         visibility: hidden;
  1727.                         margin-bottom: 6px;
  1728.                         margin-top: 3px
  1729.                     }
  1730.  
  1731.                         form input[type=checkbox]:after {
  1732.                             display: inline-block;
  1733.                             visibility: visible;
  1734.                             content: "";
  1735.                             width: 16px;
  1736.                             height: 16px;
  1737.                             background-image: url(%%spritesheet-hector%%) !important;
  1738.                             background-size: 381px 64px;
  1739.                             background-position: -100px 0;
  1740.                         }
  1741.  
  1742.                             form input[type=checkbox]:active:after { background-position: -116px 0 }
  1743.  
  1744.                             form input[type=checkbox]:checked:after { background-position: -84px 0 }
  1745.  
  1746.             /*
  1747.                 3.5.4.3 Flair preview & options [.flairtoggle]
  1748.             */
  1749.  
  1750.                 /* 'Edit' userflair link */
  1751.  
  1752.                     /* Hide parenthesis */ .titlebox .tagline {
  1753.                         margin: 0 -10px;
  1754.                         padding: 0 10px 0px;
  1755.                         font-size: 0px;
  1756.                         color: #F2F7F7
  1757.                     }
  1758.  
  1759.                     /* Link itself */ .side .flairselectbtn.access-required {
  1760.                         color: #F9F9F9 !important;
  1761.                         font-size: 10px;
  1762.                         font-weight: 500;
  1763.                         text-transform: capitalize;
  1764.                         display: block;
  1765.                         text-align: right !important;
  1766.                         position: absolute;
  1767.                         right: 79px;
  1768.                         transform: translateY(-13px)
  1769.                     }
  1770.  
  1771.                         .side .flairselectbtn.access-required:hover {
  1772.                             text-decoration: underline !important
  1773.                         }
  1774.  
  1775.                 /* Username in flair preview */
  1776.  
  1777.                     .titlebox .tagline .author {
  1778.                         color: #FFFDFD;
  1779.                         font-size: 15px;
  1780.                         text-align: left !important;
  1781.                         display: block;
  1782.                         position: relative;
  1783.                         left: 22px !important;
  1784.                     }
  1785.  
  1786.                         .titlebox .tagline .author::first-letter {
  1787.                             text-transform: none !important
  1788.                         }
  1789.  
  1790.                     .titlebox .author.may-blank {
  1791.                         color: #FFFDFD;
  1792.                         font-weight: 600;
  1793.                         letter-spacing: normal;
  1794.                         font-size: 16px;
  1795.                     }
  1796.  
  1797.                         .side .author.may-blank:hover {text-decoration: underline !important}
  1798.  
  1799.     /*
  1800.         3.6 Sidebar tables
  1801.     */
  1802.  
  1803.         .side .md table {
  1804.             width: 300px !important;
  1805.         }
  1806.  
  1807.             .side tbody {color: #FFFDFD !important}
  1808.  
  1809.                 .side tbody a {
  1810.                     color: black !important
  1811.                 }
  1812.  
  1813.             .side th {
  1814.                 color: #F9F9F9;
  1815.                 padding-left: 0 !important;
  1816.                 padding-right: 0 !important;
  1817.             }
  1818.  
  1819.             .side td {
  1820.                 border-top: 1px solid rgba(255,255,255,.2) !important;
  1821.                 padding-left: 0 !important;
  1822.                 padding-right: 0 !important;
  1823.             }
  1824.  
  1825.     /*
  1826.         3.9 Flair filters & guidelines [href=]
  1827.     */
  1828.  
  1829.             /* Generic rules */
  1830.  
  1831.             .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A"] {
  1832.                 border-radius: 20px;
  1833.                 text-transform: uppercase;
  1834.                 text-decoration: none !important;
  1835.                 border: none;
  1836.                 height: 13px;
  1837.                 font-size: 9px;
  1838.                 font-weight: 700;
  1839.                 letter-spacing: 0.5px;
  1840.                 color: black !important;
  1841.                 background: #B1B1B1;
  1842.                 padding: 0 6px 0 7px;
  1843.                 line-height: 13px;
  1844.                 position: relative;
  1845.                 overflow: visible;
  1846.                 float: left;
  1847.                 transition: all .2s ease-in-out;
  1848.                 white-space: nowrap
  1849.             }
  1850.  
  1851.                 .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A"]:hover,
  1852.                 .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A"]:visited,
  1853.                 .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A"]:visited:hover {
  1854.                     color: black !important;
  1855.                     text-decoration: none !important
  1856.                 }
  1857.  
  1858.                 .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A"]:hover {
  1859.                     box-shadow: 0 2px 6px -2px rgba(0,0,0,0.30),
  1860.                                 inset 0 0 500px 0 rgba(255,255,255,0.4)
  1861.                 }
  1862.  
  1863.                 .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A"]:active {        
  1864.                     top: 1px;
  1865.                     box-shadow: inset 0 0 500px 0 rgba(0,0,0,0.1)
  1866.                 }
  1867.  
  1868.             /* Specific rules */
  1869.  
  1870.                 /* Feedback */ .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A%27feedback%27&sort=new&restrict_sr=on&t=all&feature=legacy_search"]
  1871.                                 { background: #DAB01E !important }
  1872.  
  1873.                 /* Help */ .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A%27help%27&sort=new&restrict_sr=on&t=all&feature=legacy_search"]
  1874.                                 { background: #7FD837 !important }
  1875.  
  1876.                 /* Question */ .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A%27question%27&sort=new&restrict_sr=on&t=all&feature=legacy_search"]
  1877.                                 { background: #3BD793 !important }
  1878.  
  1879.                 /* Idea */ .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A%27idea%27&sort=new&restrict_sr=on&t=all&feature=legacy_search"]
  1880.                                 { background: #4AA2E6 !important }
  1881.  
  1882.                 /* New sub */ .side .md [href*="https://www.reddit.com/r/HectorBigPicture/search?q=flair%3A%27newsub%27&sort=new&restrict_sr=on&t=all&feature=legacy_search"]
  1883.                                 { background: #B277F4 !important }
  1884.  
  1885.     /*
  1886.         3.10 Sidebar misc
  1887.     */
  1888.  
  1889.         /*
  1890.             3.10.1 Sidebar general styles
  1891.         */
  1892.  
  1893.             /* Sidebar Links (Markdown) */
  1894.  
  1895.                     .side .md a, .side .md a:visited {
  1896.                         color: #fda4a4 !important;
  1897.                         text-decoration: none
  1898.                     }
  1899.  
  1900.                         .side .md a:hover, .side .md a:visited:hover {
  1901.                             color: #fda4a4 !important;
  1902.                             text-decoration: underline !important
  1903.                         }
  1904.  
  1905.             /* Minor text fixes */
  1906.  
  1907.                     .md-container-small .md pre > code, .side .md pre > code, .md-container-small .md th,
  1908.                     .side .md th, .md-container-small .md td, .side .md td, .md-container-small .md li,
  1909.                     .side .md li {
  1910.                         font-size: 1em;
  1911.                         line-height: 117%;
  1912.                     }
  1913.  
  1914.                     .side .md li {
  1915.                         padding-bottom: 5px
  1916.                     }
  1917.  
  1918.             /* Sidebar code & preformatted text */
  1919.  
  1920.                     .md-container-small .md pre, .side .md pre {
  1921.                         background-color: rgba(0,0,0,0.04);
  1922.                         border-radius: 2px;
  1923.                         border: none;
  1924.                         margin-right: 13px
  1925.                     }
  1926.  
  1927.                         .md-container-small .md pre > code, .side .md pre > code {
  1928.                             font-family: Menlo, Consolas, monospace;
  1929.                             font-size: 11px;
  1930.                             color: #FFFDFD
  1931.                         }
  1932.  
  1933.         /*
  1934.             3.10.2 Sidebar titles & separators [.side .usertext blockquote]
  1935.         */
  1936.  
  1937.             .side .usertext blockquote, .side .md blockquote {
  1938.                 display: inline-block;
  1939.                 border-top: 1px solid rgba(255,255,255,.2);
  1940.                 width: 290px !important;
  1941.                 color: #FFFDFD;
  1942.                 font-size: 14px;
  1943.                 font-weight: 500;
  1944.                 border-left: 0px;
  1945.                 padding-left: 0px;
  1946.                 margin-left: 0px;
  1947.                 padding-top: 17px;
  1948.                 margin-top: 23px;
  1949.                 line-height: 30px !important
  1950.             }
  1951.  
  1952.                 .side .usertext blockquote a,
  1953.                 .side .usertext blockquote a:visited,
  1954.                 .side .md blockquote a,
  1955.                 .side .md blockquote a:visited {
  1956.                     color: #FFFDFD;
  1957.                 }
  1958.  
  1959.         /*
  1960.             3.10.3 Sidebar collapsible box (Moderation tools) [.sidecontentbox.collapsible]
  1961.         */
  1962.  
  1963.             /* Collapsible header */
  1964.  
  1965.                 .sidecontentbox.collapsible {
  1966.                     position: relative;
  1967.                     left: 0px;
  1968.                     margin-left: 0;
  1969.                     margin-bottom: -20px !important;
  1970.                     margin-top: -12px;
  1971.                     padding: 8px;
  1972.                     background-color: #fff;
  1973.                     border: 0;
  1974.                     border-radius: 3px;
  1975.                     box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
  1976.                     transition: box-shadow .2s ease-in-out, position .2s ease-in-out;
  1977.                 }
  1978.  
  1979.                     .sidecontentbox.collapsible:hover {
  1980.                         box-shadow: 0 9px 16px -8px rgba(0,0,0,1);
  1981.                         z-index: 10000 !important}
  1982.  
  1983.                     .sidecontentbox.collapsible:active {
  1984.                         top: 1px;
  1985.                         box-shadow: 0 3px 5px -2px rgba(0,0,0,1)
  1986.                     }
  1987.  
  1988.                     .sidecontentbox.collapsible .title h1 {
  1989.                         cursor: pointer;
  1990.                         border-top: none !important;
  1991.                         padding: 10px 15px 10px 8px !important;
  1992.                         margin-top: -3px !important;
  1993.                         line-height: 0px !important;
  1994.                         color: #0EA34E !important;
  1995.                         font-size: 0px !important;
  1996.                     }
  1997.  
  1998.                         .sidecontentbox.collapsible .title h1::selection { background: transparent }
  1999.  
  2000.                         .sidecontentbox.collapsible .title h1:before {
  2001.                             display: inline-block;
  2002.                             content: "";
  2003.                             width: 14px;
  2004.                             height: 17px;
  2005.                             background-image: url(%%spritesheet-hector%%) !important;
  2006.                             background-size: 381px 64px;
  2007.                             background-position: -114px -32px;
  2008.                             position: relative;
  2009.                             top: 3px;
  2010.                             color: transparent !important;
  2011.                             margin-right: 6px;
  2012.                             margin-top: -5px;
  2013.                         }
  2014.  
  2015.                         .sidecontentbox.collapsible .title h1:after {
  2016.                             content: "Moderation tools";
  2017.                             font-size: 14px;
  2018.                             text-transform: none
  2019.                         }
  2020.  
  2021.                     .sidecontentbox .collapse-button {
  2022.                         transform: translateY(-20px);
  2023.                         line-height: 0px;
  2024.                         text-align: center;
  2025.                         font-size: 0px;
  2026.                         float: right;
  2027.                         width: 13px;
  2028.                         height: 9px;
  2029.                         display: inline-block;
  2030.                         content: "";
  2031.                         background: url(%%spritesheet-hector%%);
  2032.                         background-size: 381px 64px;
  2033.                         background-position: -84px -29px;
  2034.                         border: none;
  2035.                         border-radius: 20px;
  2036.                         margin: 0;
  2037.                         opacity: .2
  2038.                     }
  2039.  
  2040.             /* Expanded view: text */
  2041.  
  2042.                 .icon-menu a {
  2043.                     background-color: transparent;
  2044.                     text-transform: capitalize;
  2045.                     letter-spacing: normal;
  2046.                     font-size: 12px;
  2047.                     color: black;
  2048.                     padding: 3px 0 3px 0;
  2049.                     line-height: 17px
  2050.                 }
  2051.  
  2052.                     .icon-menu a:hover {
  2053.                         text-decoration: none !important;
  2054.                         color: black
  2055.                     }
  2056.  
  2057.                 .icon-menu li {
  2058.                     margin: 2px 0 3px 10px;
  2059.                     left: -5px;
  2060.                     padding-left: 5px;
  2061.                     padding-top: 3px;
  2062.                     padding-bottom: 2px;
  2063.                     background-color: transparent;
  2064.                     border-radius: 3px;
  2065.                     position: relative;
  2066.                     transition: all .1s ease-in-out;
  2067.                 }
  2068.  
  2069.                     .icon-menu li:hover {
  2070.                         background-color: white;
  2071.                         background-color: rgba(0,0,0,.08);
  2072.                         box-shadow: 0 0 0 2px rgba(0,0,0,.08);
  2073.                         border-radius: 1px
  2074.                     }
  2075.  
  2076.                     .icon-menu li.selected {
  2077.                         background: rgba(0,0,0,.1);
  2078.                         box-shadow: inset 0 1px 2px 0 rgba(124,85,0,0.20);
  2079.                         border-radius: 3px; font-weight: normal;
  2080.                     }
  2081.  
  2082.                     .icon-menu li:active {
  2083.                         background: rgba(0,0,0,.1);
  2084.                         box-shadow: inset 0 1px 2px 0 rgba(124,85,0,0.20);
  2085.                         border-radius: 3px;
  2086.                     }
  2087.  
  2088.             /* Coordinates for modified icon */
  2089.  
  2090.                 .icon-menu .edit-stylesheet:before {
  2091.                     background: url(%%spritesheet-hector%%);
  2092.                     background-position: 0 -66px;
  2093.                     background-repeat: no-repeat
  2094.                 }
  2095.  
  2096.         /*
  2097.             3.10.4 Other side content boxes (Moderators, Recently viewed links) [.sidecontentbox]
  2098.         */
  2099.  
  2100.             .sidecontentbox {
  2101.                 margin-right: 13px;
  2102.                 margin-bottom: 0px;
  2103.                 margin-top: -20px;
  2104.                 position: relative;
  2105.                 left: 0px;
  2106.             }
  2107.  
  2108.                 .sidecontentbox .content {
  2109.                     margin: 0;
  2110.                     padding: 5px 0px 0px 0px;
  2111.                     border-top: none;
  2112.                     border-right: none;
  2113.                     border-left: none;
  2114.                     border-bottom: none;
  2115.                     list-style: none
  2116.                 }
  2117.  
  2118.                 .sidecontentbox .title {
  2119.                     text-transform: lowercase;
  2120.                 }
  2121.  
  2122.                     .sidecontentbox .title h1 {
  2123.                         display: inline-block;
  2124.                         border-top: 1px solid rgba(255,255,255,.2);
  2125.                         width: 300px !important;
  2126.                         color: #FFFDFD !important;
  2127.                         font-size: 14px !important;
  2128.                         font-weight: 500 !important;
  2129.                         text-transform: inherit;
  2130.                         border-left: 0px;
  2131.                         padding-left: 0px;
  2132.                         margin-left: 0px;
  2133.                         padding-top: 10px;
  2134.                         margin-top: 30px;
  2135.                         line-height: 30px !important;
  2136.                         letter-spacing: normal;
  2137.                     }
  2138.  
  2139.                         .sidecontentbox .title h1:first-letter { text-transform: uppercase }
  2140.  
  2141.         /*
  2142.             3.10.5 'Created by' & Subreddit age [.titlebox .bottom, .titlebox .age]
  2143.         */
  2144.  
  2145.                 .titlebox .bottom {
  2146.                     display: none;
  2147.                 }
  2148.  
  2149.                 .titlebox .age {
  2150.                     display: none;
  2151.                 }
  2152.  
  2153.         /*
  2154.             3.10.6 Create your own Subreddit [.sidebox.create]
  2155.         */
  2156.  
  2157.             .sidebox.create {
  2158.                 display: block;
  2159.                 position: relative;
  2160.                 margin: 55px 0px 0px 0px;
  2161.                 padding: 25px 0px 12px 0px;
  2162.                 border-top: 1px solid rgba(255,255,255,.2);
  2163.                 width: 300px;
  2164.                 text-align: center
  2165.             }
  2166.  
  2167.                 .sidebox.create .morelink {
  2168.                     display: block;
  2169.                     text-align: center;
  2170.                     margin-left: 15px;
  2171.                     z-index: 1000;
  2172.                     width: auto;
  2173.                     padding-left: 22px;
  2174.                     padding-right: 22px
  2175.                 }
  2176.  
  2177.                     .sidebox.create .morelink a:before {
  2178.                         display: inline-block;
  2179.                         content: "";
  2180.                         background: url(%%spritesheet-hector%%);
  2181.                         background-size: 381px 64px;
  2182.                         background-position: -132px 0;
  2183.                         width: 14px;
  2184.                         height: 13px;
  2185.                         margin-right: 5px;
  2186.                         transform: translateY(2px)
  2187.                     }
  2188.  
  2189.                         .sidebox.create .morelink a:hover:before { background-position: -132px -32px }
  2190.  
  2191.                     /* Hide '...for your movement. ...for your WoW guild.' etc. */
  2192.  
  2193.                         .sidebox.create .spacer { display: none }
  2194.  
  2195.         /*
  2196.             3.10.7 Moderators list
  2197.         */
  2198.  
  2199.             /* 'Message the moderators' */
  2200.  
  2201.                 .sidecontentbox .helplink {
  2202.                     float: right;
  2203.                     vertical-align: bottom;
  2204.                     position: relative;
  2205.                     top: 63px !important;
  2206.                     left: 0px;
  2207.                     font-weight: normal
  2208.                 }
  2209.  
  2210.                     .sidecontentbox .helplink::first-letter {
  2211.                         text-transform: uppercase;
  2212.                     }
  2213.  
  2214.                     .sidecontentbox .helplink:hover {
  2215.                         text-decoration: underline !important;
  2216.                     }
  2217.  
  2218.             /* 'About moderation team' */
  2219.  
  2220.                 .sidecontentbox .content .more {
  2221.                     font-weight: normal;
  2222.                     font-size: 0px
  2223.                 }
  2224.  
  2225.                     .sidecontentbox .content .more::first-letter {
  2226.                         text-transform: uppercase;
  2227.                     }
  2228.  
  2229.                     .sidecontentbox .content .more a::after {
  2230.                         color: #F9F9F9 !important;
  2231.                         content: "About moderation team >";
  2232.                         display: inline-block;
  2233.                         font-weight: normal;
  2234.                         font-size: 10px
  2235.                     }
  2236.  
  2237.                         .sidecontentbox .content .more:hover a::after {
  2238.                             text-decoration: underline !important;
  2239.                         }
  2240.  
  2241.         /*
  2242.             3.10.8 Recently viewed links [.side .reddit-link]
  2243.         */
  2244.  
  2245.             .side .reddit-link {
  2246.                         margin-left: 0;
  2247.                         margin-bottom: 6px;
  2248.                         padding: 8px;
  2249.                         border: 0;
  2250.                         min-height: 10px !important;
  2251.                         height: auto !important;
  2252.                         transition: box-shadow .15s ease-in-out, position .15s ease-in-out;
  2253.                         position: relative
  2254.             }
  2255.  
  2256.                 .gadget .score, .side .reddit-comment-link {font-size: 20px}
  2257.  
  2258.                 .side .reddit-link:hover {
  2259.                     box-shadow: 0 9px 16px -8px rgba(0,0,0,1);
  2260.                     z-index: 10000 !important
  2261.                 }
  2262.  
  2263.                 .side .reddit-link:active {
  2264.                     top: 1px;
  2265.                     box-shadow: 0 3px 5px -2px rgba(0,0,0,1)
  2266.                 }
  2267.  
  2268.                 .side .reddit-link-title {
  2269.                     text-transform: none !important;
  2270.                     color: #9B9B9B;
  2271.                     font-weight: 700;
  2272.                     letter-spacing: normal
  2273.                 }
  2274.  
  2275.                 .side .reddit-comment-link, .side .score  {
  2276.                     font-size: smaller;
  2277.                     padding-left: 0 !important;
  2278.                     color: #7f7f7f
  2279.                 }
  2280.  
  2281.                 .side .arrow {
  2282.                     padding-left: 0 !important;
  2283.                     margin-left: 0 !important
  2284.                 }
  2285.  
  2286.                 .side .midcol {
  2287.                     width: 20px !important;
  2288.                     padding-left: 0 !important;
  2289.                     margin-left: 0 !important;
  2290.                     margin-right: 4px !important
  2291.                 }
  2292.  
  2293.             .side .right { text-transform: capitalize }
  2294.  
  2295.                 .side .right:hover { text-decoration: underline }
  2296.  
  2297.         /*
  2298.             3.10.9 'Account activity' link [.account-activity-box]
  2299.         */
  2300.  
  2301.             .account-activity-box::first-letter { text-transform: uppercase }
  2302.  
  2303.             .account-activity-box:hover { text-decoration: underline }
  2304.  
  2305.             .account-activity-box:after {
  2306.                 display: block;
  2307.                 height: 25px;
  2308.                 width: 20px;
  2309.                 content: "";
  2310.                 opacity: 0
  2311.             }
  2312.  
  2313. /*
  2314.     4. Sticky 'quick links' bar
  2315. */
  2316.  
  2317.     /* Move linklisting to make space */ body.listing-page .content[role="main"] {
  2318.         margin-top: 88px !important
  2319.     }
  2320.  
  2321.     body:not(.listing-page) .side .md > ul:first-of-type {
  2322.         display: none
  2323.     }
  2324.  
  2325.     .side .md > ul:first-of-type {
  2326.         position: absolute;
  2327.         top: 242px;
  2328.         left: 65px;
  2329.         list-style: none;
  2330.         margin: 0 0 4px 0;
  2331.         width: calc(100% - 504px);
  2332.         font-size: 14px;
  2333.         color: white !important;
  2334.         letter-spacing: 0.01px;
  2335.         font-weight: 700;
  2336.         padding: 8px 8px 8px 36px;
  2337.         z-index: 1;
  2338.         border-radius: 3px;
  2339.         box-shadow: 0 1px 2px 0 rgba(0,0,0,0.5);
  2340.         overflow: hidden;
  2341.         white-space: nowrap;
  2342.         text-overflow: ellipsis;
  2343.         /* Big Picture additions */
  2344.             background: url(%%blur-small%%) no-repeat center top;
  2345.             background-attachment: fixed;
  2346.             background-size: cover
  2347.     }
  2348.  
  2349.         .side .md > ul:first-of-type:hover {
  2350.             z-index: 1
  2351.         }
  2352.  
  2353.         .side .md > ul:first-of-type:before {
  2354.             content: "";
  2355.             background-image: url(%%spritesheet-hector%%);
  2356.             background-size: 381px 64px;
  2357.             background-position: 0 -16px;
  2358.             position: absolute;
  2359.             left: 12px;
  2360.             display: block;
  2361.             width: 16px;
  2362.             height: 16px;
  2363.             margin-top: 1px
  2364.         }
  2365.  
  2366.         .side .md > ul:first-of-type li {
  2367.             padding: 0;
  2368.             margin: 0
  2369.         }
  2370.  
  2371.         .side .md > ul:first-of-type a { margin: 0 15px 0 0 }
  2372.  
  2373.         .side .md > ul:first-of-type a,
  2374.         .side .md > ul:first-of-type a:hover,
  2375.         .side .md > ul:first-of-type a:visited,
  2376.         .side .md > ul:first-of-type a:visited:hover {
  2377.             color: white !important
  2378.         }
  2379.  
  2380. /*
  2381.     5.  Content [.content]
  2382. */
  2383.  
  2384.         /*
  2385.             5.1 Global content styles
  2386.         */
  2387.  
  2388.             .content {
  2389.                 margin: 22px;
  2390.                 margin-left: 65px;
  2391.                 margin-right: 395px;
  2392.             }
  2393.  
  2394.                 body > div.content {
  2395.                     margin-top: 44px !important
  2396.                 }
  2397.  
  2398.                 /* Blurry background panels */
  2399.  
  2400.                     .listing-page .sitetable .link, .organic-listing, .stylesheet-customize-container,
  2401.                     .submit-page .content, .wiki-page .wiki-page-content, .wiki-page .wikititle,
  2402.                     .search-page .search-result-listing, .comments-page .sitetable .link,
  2403.                     .comment, .side .reddit-link {
  2404.                         background: url(%%blur-small%%) no-repeat center top;
  2405.                         background-attachment: fixed;
  2406.                         background-size: cover;
  2407.                         margin-left: 0;
  2408.                         margin-bottom: 6px;
  2409.                         padding: 8px;
  2410.                         border: 0;
  2411.                         border-radius: 3px;
  2412.                         box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20);
  2413.                     }
  2414.  
  2415.         /*
  2416.             5.2 Linklisting
  2417.         */
  2418.  
  2419.             /*
  2420.                 5.2.2 Stickied post ('Announcement') [.stickied.link]
  2421.             */
  2422.  
  2423.                 /* Green megaphone icon */ .stickied.link .rank:before {
  2424.                     content: "";
  2425.                     display: block;
  2426.                     position: relative;
  2427.                     top: -3px;
  2428.                     width: 17px;
  2429.                     height: 17px;
  2430.                     margin-left: 0px;
  2431.                     background-image: url(%%spritesheet-hector%%);
  2432.                     background-size: 381px 64px;
  2433.                     background-position: -261px 0;
  2434.                 }
  2435.  
  2436.                 .stickied-tagline {
  2437.                     color: #4AF795 !important;
  2438.                     font-size: 11px;
  2439.                     font-weight: 400
  2440.                 }
  2441.  
  2442.                     .stickied-tagline:first-letter {
  2443.                         text-transform: uppercase !important;
  2444.                     }
  2445.  
  2446.                     .stickied-tagline::before {
  2447.                         display: inline-block;
  2448.                         content: "";
  2449.                         width: 4px;
  2450.                         height: 4px;
  2451.                         background-image: url(%%spritesheet-hector%%) !important;
  2452.                         background-size: 381px 64px;
  2453.                         background-position: -99px -21px;
  2454.                         position: relative;
  2455.                         color: transparent !important;
  2456.                         top: 0px;
  2457.                         margin-right: 6px;
  2458.                         margin-left: 4px !important
  2459.                     }
  2460.  
  2461.  
  2462.                     .link .userattrs .moderator {
  2463.                         display: inline-block;
  2464.                         content: "";
  2465.                         width: 11px;
  2466.                         height: 12px;
  2467.                         background-image: url(%%spritesheet-hector%%) !important;
  2468.                         background-size: 381px 64px;
  2469.                         background-position: -103px -16px;
  2470.                         position: relative;
  2471.                         color: transparent !important;
  2472.                         margin-left: 1px;
  2473.                         margin-bottom: -10px;
  2474.                         margin-top: 0px;
  2475.                         top: -10px;
  2476.                         color: #4AF795 !important;
  2477.                     }
  2478.  
  2479.                         .link .moderator {color: #4AF795 !important}
  2480.  
  2481.             /*
  2482.                 5.2.3 Approval checkmark (green tick)
  2483.             */
  2484.  
  2485.                 .approval-checkmark {
  2486.                     background-image: url(%%spritesheet-hector%%);
  2487.                     background-size: 381px 64px;
  2488.                     background-position: -368px 0;
  2489.                     width: 0;
  2490.                     height: 13px;
  2491.                     float: right;
  2492.                     position: relative;
  2493.                     top: 3px;
  2494.                     margin-right: 1px;
  2495.                     overflow: hidden;
  2496.                     padding-left: 13px;
  2497.                 }
  2498.  
  2499.             /*
  2500.                 5.2.4 Expandable content preview
  2501.             */
  2502.  
  2503.                 /*
  2504.                     5.2.4.1 Expand icon (eye +/-) [.expando-button]
  2505.                 */
  2506.  
  2507.                     .expando-button {
  2508.                         float: left !important;
  2509.                         width: 20px !important;
  2510.                         height: 22px !important;
  2511.                         margin: 5px 6px 2px 0 !important;
  2512.                         background: transparent url(%%spritesheet-hector%%) !important;
  2513.                         background-size: 381px 64px !important;
  2514.                         opacity: .5
  2515.                     }
  2516.  
  2517.                         .expando-button.selftext.collapsed,
  2518.                         .expando-button.video.collapsed {
  2519.                             background-position: -183px 0 !important;
  2520.                         }
  2521.  
  2522.                             .expando-button.selftext.collapsed:hover, .eb-sch,
  2523.                             .expando-button.video.collapsed:hover, .eb-vch {
  2524.                                 opacity: 1
  2525.                             }
  2526.  
  2527.                         .expando-button.selftext.expanded, .eb-se,
  2528.                         .expando-button.video.expanded, .eb-ve {
  2529.                             background-position: -163px 0 !important;
  2530.                         }
  2531.  
  2532.                             .expando-button.selftext.expanded:hover, .eb-seh,
  2533.                             .expando-button.video.expanded:hover, .eb-veh {
  2534.                                 opacity: 1
  2535.                             }
  2536.  
  2537.                         .expando .psuedo-selftext {
  2538.                             border-radius: 7px;
  2539.                             border: 1px solid #369;
  2540.                             overflow: hidden;
  2541.                             max-width: 710px;
  2542.                         }
  2543.  
  2544.                 /*
  2545.                     5.2.4.2 Images & videos
  2546.                 */
  2547.  
  2548.                     .media-preview-content{padding-right: 7px}
  2549.  
  2550.                 /*
  2551.                     5.2.4.3 'Click to see spoiler' button
  2552.                 */
  2553.  
  2554.                     button.expando-gate__show-once {
  2555.                         border-color: white !important;
  2556.                         color: white !important;
  2557.                         margin: 0;
  2558.                     }
  2559.  
  2560.                         button.expando-gate__show-once:hover {
  2561.                             color: #545452 !important;
  2562.                             box-shadow: 0 5px 11px -4px rgba(0,0,0,0.5)
  2563.                         }
  2564.  
  2565.                         button.expando-gate__show-once:active {
  2566.                             background-color: #e6e6e6 !important;
  2567.                             border-color: #e6e6e6 !important;
  2568.                             box-shadow: 0 2px 4px -2px rgba(0,0,0,0.9)
  2569.                         }
  2570.  
  2571.     /*
  2572.         5.2.1  Sitetable Links [.sitetable .link]
  2573.     */
  2574.  
  2575.         .sitetable .link {
  2576.             transition: all 0.2s ease;
  2577.             overflow: visible
  2578.         }
  2579.  
  2580.             .listing-page .sitetable .link { overflow: visible }
  2581.  
  2582.                         .listing-page .sitetable .link:hover {
  2583.                             box-shadow: 0 10px 16px -8px rgba(0,0,0,0.8),
  2584.                                         inset 0 0 0 500px rgba(255,255,255,0.04);
  2585.                             z-index: 10000 !important;
  2586.                             overflow: visible;
  2587.                         }
  2588.  
  2589.                         .listing-page .sitetable .link:active {
  2590.                             position: relative;
  2591.                             top: 1px !important;
  2592.                             box-shadow: 0 3px 5px -2px rgba(0,0,0,1)
  2593.                         }
  2594.  
  2595.             .comments-page .sitetable .link { margin: 0 }
  2596.  
  2597.             .link.last-clicked { background-color: #f5f5f5 }
  2598.  
  2599.         /*
  2600.             5.2.1.1  Rank / Voting [.link .rank, .midcol]
  2601.         */
  2602.  
  2603.             .link .rank {
  2604.                 display: none;
  2605.                 bottom: 0px
  2606.             }
  2607.  
  2608.                 .stickied.link .rank {
  2609.                     display: block !important;
  2610.                     float: right;
  2611.                     margin-top: 0px;
  2612.                     padding: 4px;
  2613.                     min-width: 14px;
  2614.                     font-size: small;
  2615.                     text-align: center;
  2616.                     color: #c6c6c6;
  2617.                 }
  2618.  
  2619.                 .organic-listing .link .rank:before { content: "AD"; }
  2620.  
  2621.         /*
  2622.             5.2.1.2  Voting [.midcol]
  2623.         */
  2624.  
  2625.             .midcol {
  2626.                 margin: 0 5px 0 0;
  2627.                 padding: 0 0;
  2628.                 min-width: 36px;
  2629.                 height: auto;
  2630.                 overflow: visible;
  2631.                 border: none
  2632.             }
  2633.  
  2634.                 .link .score {
  2635.                     margin: 0 0 2px 0;
  2636.                     font-size: 9px;
  2637.                     font-weight: normal;
  2638.                     color: #9B9B9B;
  2639.                     letter-spacing: 0.67px;
  2640.                     text-align: center;
  2641.                     position: relative;
  2642.                     top: 4px;
  2643.                     left: -1px
  2644.                 }
  2645.  
  2646.                     .link .score.likes { color: orangered }
  2647.  
  2648.                     .link .score.dislikes { color: #9587FF }
  2649.  
  2650.             .arrow {
  2651.                 margin: 0 3px;
  2652.                 background-image: url(%%spritesheet-hector%%) !important;
  2653.                 background-size: 381px 64px;
  2654.                 height: 17px;
  2655.                 width: 15px;
  2656.                 border-radius: 2px;
  2657.                 position: relative;
  2658.                 left: 5px;
  2659.                 top: 3px
  2660.             }
  2661.  
  2662.                 .arrow:hover { opacity: 0.2 !important }
  2663.  
  2664.                 .arrow.up { background-position: -353px 0; opacity: 0.10 }
  2665.  
  2666.                 .arrow.upmod { background-position: -17px 1px }
  2667.  
  2668.                     .arrow.upmod:hover { opacity: 1 !important }
  2669.  
  2670.                 .arrow.down { background-position: -147px -1px; opacity: 0.10; top: 6px !important }
  2671.  
  2672.                 .arrow.downmod { background-position: -1px -1px; top: 6px !important }
  2673.  
  2674.                     .arrow.downmod:hover { opacity: 1 !important }
  2675.  
  2676.         /*
  2677.             5.2.1.3  Thumbnail [.thumbnail]
  2678.         */
  2679.  
  2680.             .thumbnail {
  2681.                 height: 54px !important;
  2682.                 width: 54px;
  2683.                 margin: 0 10px 0 0;
  2684.                 border-radius: 4px;
  2685.                 -webkit-transform: translate3d(0, 0, 0);
  2686.                 background-color: transparent;
  2687.             }
  2688.  
  2689.                 .thumbnail:before {
  2690.                     display: block;
  2691.                     content: "";
  2692.                     padding: 12px;
  2693.                     position: absolute;
  2694.                     width: 30px;
  2695.                     height: 30px;
  2696.                     background-color: rgba(0,0,0,0.1);
  2697.                     background-size: 31px 31px;
  2698.                     background-position: center;
  2699.                     background-repeat: no-repeat;
  2700.                     z-index: 10;
  2701.                     border-radius: 4px
  2702.                 }
  2703.  
  2704.                 a.thumbnail img {
  2705.                     position: relative;
  2706.                     left: 50%;
  2707.                     height: 54px;
  2708.                     width: auto;
  2709.                     border-radius: 4px;
  2710.                     transform: translateX(-50%)
  2711.                 }
  2712.  
  2713.                 /* Custom thumbnails */
  2714.  
  2715.                     .thumbnail.self,
  2716.                     .stickied .thumbnail.self,
  2717.                     a.thumbnail.nsfw,
  2718.                     a.thumbnail.spoiler,
  2719.                     a.thumbnail[href*="reddit.com"],
  2720.                     a.thumbnail[href*="redd.it"],
  2721.                     a.thumbnail[href*="twitter.com"],
  2722.                     a.thumbnail[href*="mobile.twitter.com"] {
  2723.                         background-image: url(%%thumbnails%%) !important;
  2724.                         background-size: 324px 54px;
  2725.                         width: 54px;
  2726.                         height: 54px;
  2727.                         background-color: transparent;
  2728.                     }
  2729.  
  2730.                         /* Self-posts & announcements (stickied posts) */
  2731.  
  2732.                             .thumbnail.self {
  2733.                                 background-position: 0 0 !important;
  2734.                                 z-index: -1 !important;
  2735.                                 background-color: transparent;
  2736.                             }
  2737.  
  2738.                                 .thumbnail.self:before {
  2739.                                     background-color: transparent !important
  2740.                                 }
  2741.  
  2742.                             .stickied .thumbnail {
  2743.                                 background-color: #4AF795 !important;
  2744.                                 z-index: -1 !important;
  2745.                             }
  2746.  
  2747.                                 .stickied .thumbnail:before { background-color: rgba(0, 0, 0, 0) }
  2748.                                 .stickied .thumbnail.self { background-position: -54px 0 !important }
  2749.                                 .stickied .thumbnail.self:before { background-color: rgba(0, 0, 0, 0) }
  2750.  
  2751.                         /* Sensitive content */
  2752.  
  2753.                             a.thumbnail.nsfw {
  2754.                                 background-image: url(%%thumbnails%%) !important;
  2755.                                 background-position: -162px 0 !important;
  2756.                                 background-color: #FF5559
  2757.                             }
  2758.  
  2759.                                 .thumbnail.nsfw:before { background-color: transparent }
  2760.  
  2761.                             a.thumbnail.spoiler {
  2762.                                 background-image: url(%%thumbnails%%) !important;
  2763.                                 background-position: -108px 0 !important;
  2764.                                 background-color: #545452
  2765.                             }
  2766.  
  2767.                                 .thumbnail.spoiler:before { background-color: transparent }
  2768.  
  2769.  
  2770.                         /* Sites */
  2771.  
  2772.                             a.thumbnail[href*="reddit.com"],
  2773.                             a.thumbnail[href*="redd.it"] {
  2774.                                 background-position: -216px 0px !important;
  2775.                                 z-index: -1 !important;
  2776.                             }
  2777.  
  2778.                                 a.thumbnail[href*="reddit.com"] img,
  2779.                                 a.thumbnail[href*="redd.it"] img {
  2780.                                     display: none
  2781.                                 }
  2782.  
  2783.                                 .thumbnail[href*="reddit.com"]:before,
  2784.                                 .thumbnail[href*="redd.it"]:before {
  2785.                                     background-color: rgba(0, 0, 0, 0)
  2786.                                 }
  2787.  
  2788.                                 .thumbnail[href*="i.reddit.com"] img,
  2789.                                 .thumbnail[href*="i.redd.it"] img {
  2790.                                     display: block !important
  2791.                                 }
  2792.  
  2793.  
  2794.  
  2795.                             a.thumbnail[href*="twitter.com"],
  2796.                             a.thumbnail[href*="mobile.twitter.com"] {
  2797.                                 background-position: -270px 0 !important
  2798.                             }
  2799.  
  2800.                                 a.thumbnail[href*="twitter.com"] img,
  2801.                                 a.thumbnail[href*="mobile.twitter.com"] img {
  2802.                                     display: none !important
  2803.                                 }
  2804.  
  2805.                                 .thumbnail[href*="twitter.com"]:before,
  2806.                                 .thumbnail[href*="mobile.twitter.com"]:before {
  2807.                                     background-color: rgba(0,0,0,0)
  2808.                                 }
  2809.  
  2810.         /*
  2811.             5.2.1.4 Stamps (NSFW/Spoilers)
  2812.         */
  2813.  
  2814.             .stamp {
  2815.                 border: none;
  2816.                 display: inline;
  2817.                 font-size: 11px;
  2818.                 font-weight: 700;
  2819.                 line-height: normal;
  2820.                 padding: 0 0px;
  2821.                 position: relative;
  2822.                 top: 1px
  2823.             }
  2824.  
  2825.             .nsfw-stamp { color: #FF5559 }
  2826.  
  2827.                 .nsfw-stamp:after { content: "!" }
  2828.  
  2829.             .spoiler-stamp { color: #545452 }
  2830.  
  2831.                 .spoiler-stamp:after { content: "!" }
  2832.  
  2833.         /*
  2834.             5.2.1.5  Title [.title]
  2835.         */
  2836.  
  2837.             .link .title {
  2838.                 font-size: 14px;
  2839.                 color: white;
  2840.                 letter-spacing: 0.01px;
  2841.                 font-weight: 700 !important
  2842.             }
  2843.  
  2844.                 .link .title a:hover { text-decoration: underline !important }
  2845.  
  2846.                 .link .title a:visited { color: white }
  2847.  
  2848.                 .thing.stickied.link a.title { color: #4AF795; font-weight: 700 }
  2849.  
  2850.             .link .domain {
  2851.                 margin: 3px 0;
  2852.                 font-size: 9px;
  2853.                 letter-spacing: 0.4px;
  2854.                 text-transform: uppercase;
  2855.                 font-weight: normal
  2856.             }
  2857.  
  2858.                 .link .domain a {
  2859.                     visibility: visible;
  2860.                     color: #737373 !important;
  2861.                     vertical-align: middle
  2862.                 }
  2863.  
  2864.                 .link .domain a:hover {
  2865.                     text-decoration: none !important;
  2866.                     color: #B1B1B1 !important
  2867.                 }
  2868.  
  2869.             .link .tagline {
  2870.                 margin: 3px 0 0 0;
  2871.                 color: #737373;
  2872.                 font-size: 0px
  2873.             }
  2874.  
  2875.             .link time {
  2876.                 font-size: 11px !important;
  2877.                 font-weight: 400 !important
  2878.             }
  2879.  
  2880.                 .link time:after { content: " by " }
  2881.  
  2882.             .link .author {
  2883.                 color: #B1B1B1;
  2884.                 font-size: 11px !important
  2885.             }
  2886.  
  2887.                 .link .author:hover { color: white }
  2888.  
  2889.             .link .author.moderator a { color: #4AF795 }
  2890.  
  2891.                 .link .author.moderator a:hover { color: #96FFC4 !important }
  2892.  
  2893.             .entry .buttons {
  2894.                 margin-top: 0;
  2895.                 padding-top: 0
  2896.             }
  2897.  
  2898.             /* Link action buttons */ .entry .buttons li a {
  2899.                 color: #B1B1B1;
  2900.                 font-size: 11px;
  2901.                 font-weight: 400;
  2902.                 position: relative;
  2903.                 top: 1px;
  2904.                 text-transform: capitalize;
  2905.                 letter-spacing: normal;
  2906.                 padding: 0;
  2907.                 transition: all 0.15s ease
  2908.             }
  2909.  
  2910.                 .entry .buttons li a:hover { color: white }
  2911.  
  2912.  
  2913.         .link .usertext-body .md {
  2914.             padding: 8px 0;
  2915.             margin: 8px 8px 0 0;
  2916.             border-radius: 0;
  2917.             border: 0;
  2918.             border-top: none;
  2919.             background: transparent
  2920.         }
  2921.  
  2922.             .stickied.link .usertext-body .md { border: none }
  2923.  
  2924.     /*
  2925.         5.3 Report management [.pretty-button]
  2926.     */
  2927.  
  2928.         /* Reports number (yellow) */ .entry .buttons li.reported-stamp {
  2929.             height: 8px;
  2930.             padding-top: 0px;
  2931.             padding-bottom: 4px;
  2932.             transform: translateY(-1px);
  2933.             line-height: 11px;
  2934.             background-color: #fff;
  2935.             font-size: 11px;
  2936.             font-weight: normal;
  2937.             color: #876e00 !important;
  2938.             text-transform: uppercase;
  2939.             letter-spacing: 0.5px;
  2940.             border-width: 1px;
  2941.             border-color: #876e00 !important;
  2942.             border-radius: 2px !important;
  2943.             margin-left: 7px
  2944.         }
  2945.  
  2946.         .suspicious { background-color: #f6e69f }
  2947.  
  2948.         .pretty-button {
  2949.             height: 8px;
  2950.             padding: 0 10px 4px 10px;
  2951.             transform: translateY(-1px);
  2952.             line-height: 11px;
  2953.             background-color: #29cce0;
  2954.             font-size: 11px;
  2955.             font-weight: normal;
  2956.             color: #fff !important;
  2957.             text-transform: uppercase;
  2958.             letter-spacing: 0.5px;
  2959.             border-width: 1px;
  2960.             border-color: #29cce0;
  2961.             border-radius: 20px;
  2962.             opacity: 0.7 !important
  2963.         }
  2964.  
  2965.             a.pretty-button:hover { text-decoration: none !important }
  2966.  
  2967.         /* Moderation choice made */
  2968.  
  2969.             .pretty-button.pressed { opacity: 1 !important }
  2970.  
  2971.         /* Global hover opacity rule */
  2972.  
  2973.             .pretty-button.neutral:hover,
  2974.             .pretty-button.positive:hover,
  2975.             .pretty-button.negative:hover { opacity: 0.5 !important }
  2976.  
  2977.         /* Red */
  2978.  
  2979.             .pretty-button.negative {
  2980.                 background-image: none;
  2981.                 transform: translateY(-1px);
  2982.                 line-height: 11px;
  2983.                 background-color: #9d0b11 !important;
  2984.                 font-size: 11px;
  2985.                 font-weight: normal;
  2986.                 color: #fff !important;
  2987.                 text-transform: uppercase;
  2988.                 letter-spacing: 0.5px;
  2989.                 border-width: 1px;
  2990.                 border-color: #9d0b11
  2991.             }
  2992.  
  2993.                 .pretty-button.negative.pressed {
  2994.                     background-image: none;
  2995.                     border-width: 2px;
  2996.                     border-color: #9d0b11;
  2997.                     background-color: #fff !important;
  2998.                     color: #9d0b11 !important
  2999.                 }
  3000.  
  3001.         /* Grey */
  3002.  
  3003.             .pretty-button.neutral {
  3004.                 background-image: none;
  3005.                 transform: translateY(-1px);
  3006.                 line-height: 11px;
  3007.                 background-color: #545454 !important;
  3008.                 font-size: 11px;
  3009.                 font-weight: normal;
  3010.                 color: #fff !important;
  3011.                 text-transform: uppercase;
  3012.                 letter-spacing: 0.5px;
  3013.                 border-width: 1px;
  3014.                 border-color: #545454
  3015.             }
  3016.  
  3017.                 .pretty-button.neutral.pressed {
  3018.                     background-image: none;
  3019.                     border-width: 2px;
  3020.                     border-color: #545454;
  3021.                     background-color: #fff !important;
  3022.                     color: #545454 !important
  3023.                 }
  3024.  
  3025.         /* Green */
  3026.  
  3027.             .pretty-button.positive {
  3028.                 background-image: none;
  3029.                 transform: translateY(-1px);
  3030.                 line-height: 11px;
  3031.                 background-color: #349d0b !important;
  3032.                 font-size: 11px;
  3033.                 font-weight: normal;
  3034.                 color: #fff !important;
  3035.                 text-transform: uppercase;
  3036.                 letter-spacing: 0.5px;
  3037.                 border-width: 1px;
  3038.                 border-color: #349d0b
  3039.             }
  3040.  
  3041.                 .pretty-button.positive.pressed {
  3042.                     background-image: none;
  3043.                     border-width: 2px;
  3044.                     border-color: #349d0b;
  3045.                     background-color: #fff !important;
  3046.                     color: #349d0b !important
  3047.                 }
  3048.  
  3049.         /* Spam */
  3050.  
  3051.             .thing.spam {
  3052.                 background-color: #E8D9CC;
  3053.                 border-radius: 3px;
  3054.                 margin-top: 4px;
  3055.                 padding-top: 10px !important;
  3056.                 margin-bottom: 6px;
  3057.                 border-top: none !important
  3058.             }
  3059.                 .thing.spam:before { display: none }
  3060.  
  3061.                 .tagline.spam a { color: #a61602 !important }
  3062.  
  3063.             body.user-spam #header { background-color: #ff8b60 }
  3064.  
  3065.             .author.user-spam { color: #ff8b60; font-weight: bold }
  3066.  
  3067. /*
  3068.     6. Thread page
  3069. */
  3070.  
  3071.     /*
  3072.         6.1 'All x comments' [.panestack-title]
  3073.     */
  3074.        
  3075.         .panestack-title {
  3076.             border-bottom: none;
  3077.             transform: translateY(21px)
  3078.         }
  3079.  
  3080.             .panestack-title .title {
  3081.                 font-size: 11px !important;
  3082.                 font-weight: normal !important;
  3083.                 color: #E7E7E7 !important;
  3084.                 text-transform: uppercase;
  3085.                 letter-spacing: 1.12px
  3086.             }
  3087.  
  3088.     /*
  3089.         6.2 'Sorted by' & OP/mod actions [.menuarea]
  3090.     */
  3091.  
  3092.         .menuarea {
  3093.             padding: 0px 10px;
  3094.             margin-left: 150px !important;
  3095.             border-bottom: none;
  3096.             text-align: right;
  3097.             width: 100%;
  3098.             overflow: visible;
  3099.             display: block;
  3100.             position: relative;
  3101.             right: 16px !important;
  3102.             -webkit-transform: translate3d(0, 0, 0);
  3103.             z-index: 100 !important
  3104.         }
  3105.  
  3106.         /* 'Sorted by' dropdown
  3107.  
  3108.             /* 'Sorted by' Label */
  3109.  
  3110.                 .dropdown-title.lightdrop {
  3111.                     font-size: 11px !important;
  3112.                     font-weight: normal !important;
  3113.                     color: #E7E7E7 !important;
  3114.                     text-transform: uppercase;
  3115.                     text-decoration: none;
  3116.                     letter-spacing: 1.12px;
  3117.                     z-index: 100 !important
  3118.                 }
  3119.  
  3120.             /* Button (default = 'Best') */
  3121.  
  3122.                 .dropdown.lightdrop .selected {
  3123.                     width: 138px;
  3124.                     font-size: 11px;
  3125.                     font-weight: 600;
  3126.                     line-height: 23px;
  3127.                     letter-spacing: 1.12px;
  3128.                     text-transform: uppercase;
  3129.                     color: #FFFFFD !important;
  3130.                     background: transparent;
  3131.                     text-decoration: none;
  3132.                     border: 1px solid #FFFFFD;
  3133.                     border-radius: 20px;
  3134.                     box-shadow: 0 0px 0px 0px rgba(29,82,80,0.4);
  3135.                     transition: all 0.2s ease;
  3136.                     padding: 5px 12px 5px 20px;
  3137.                     text-align: center;
  3138.                     z-index: 100 !important
  3139.                 }
  3140.  
  3141.                     .dropdown.lightdrop .selected:hover {
  3142.                         background: #fff;
  3143.                         border: 1px solid #fff;
  3144.                         color: black !important;
  3145.                         box-shadow: 0 5px 11px -4px rgba(0,0,1,1);
  3146.                         z-index: 100 !important
  3147.                     }
  3148.  
  3149.                     .dropdown.lightdrop .selected:active {
  3150.                         background: #DFDFDF;
  3151.                         border: 1px solid #DFDFDF;
  3152.                         color: black !important;
  3153.                         box-shadow: 0 2px 4px -2px rgba(0,0,2,1);
  3154.                         z-index: 100 !important
  3155.                     }
  3156.  
  3157.                     /* Arrow icon */ .dropdown.lightdrop .selected:after {
  3158.                         display: inline-block;
  3159.                         content: "";
  3160.                         background: url(%%spritesheet-hector%%);
  3161.                         background-size: 381px 64px;
  3162.                         background-position: -133px -16px;
  3163.                         width: 9px;
  3164.                         height: 6px;
  3165.                         margin-right: 5px;
  3166.                         margin-left: 3px;
  3167.                         z-index: 100 !important
  3168.                     }
  3169.  
  3170.             /* Dropdown menu itself) */ .drop-choices.lightdrop {
  3171.                 transform: translateY(2.2px) translateX(-19px);
  3172.                 font-size: 14px;
  3173.                 text-align: left !important;
  3174.                 text-transform: capitalize;
  3175.                 letter-spacing: normal;
  3176.                 border-radius: 4px;
  3177.                 border: none;
  3178.                 background-color: #aeb0b2;
  3179.                 white-space: nowrap;
  3180.                 line-height: normal;
  3181.                 margin-top: 1px;
  3182.                 box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.35), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
  3183.                 padding: 4px 0px 4px 0px;
  3184.                 z-index: 100 !important;
  3185.             }
  3186.  
  3187.         /* Mod actions (Make announcement etc.) */
  3188.  
  3189.             .menuarea .togglebutton {
  3190.                 display: inline !important;
  3191.                 font-size: 11px !important;
  3192.                 color: #4AF795 !important;
  3193.                 font-weight: 500 !important;
  3194.                 text-transform: capitalize;
  3195.                 text-align: right
  3196.             }
  3197.  
  3198.                 .menuarea .togglebutton:hover { text-decoration: underline !important }
  3199.  
  3200.     /*
  3201.         6.3 Main comment field area [.usertext-edit]
  3202.     */
  3203.  
  3204.         /*
  3205.             6.3.1 Field itself [.usertext-edit, textarea]
  3206.         */
  3207.  
  3208.             .usertext-edit {
  3209.                 margin-top: 10px;
  3210.                 padding: 0 1px;
  3211.                 width: 500px
  3212.             }
  3213.  
  3214.             .usertext-edit textarea {
  3215.                 width: 478px;
  3216.                 height: 100px;
  3217.             }
  3218.  
  3219.                 textarea {
  3220.                     font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif;
  3221.                     background: url(%%blur-small%%) no-repeat center top;
  3222.                     background-attachment: fixed;
  3223.                     background-size: cover;
  3224.                     box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.38),
  3225.                                 inset 0 1px 4px 999px rgba(0,0,0,.3) !important;
  3226.                     border: none !important;
  3227.                     border-radius: 3px;
  3228.                     padding: 10px;
  3229.                     color: white;
  3230.                     border-bottom: none !important
  3231.                 }
  3232.  
  3233.                     ::-webkit-resizer {
  3234.                         width: 11px;
  3235.                         height: 11px;
  3236.                         background-image: url(%%spritesheet-hector%%) !important;
  3237.                         background-size: 381px 64px;
  3238.                         background-position: -142px -16px;
  3239.                     }
  3240.  
  3241.                     textarea:focus {
  3242.                         border: 1px solid #F9F9F9;
  3243.                         outline-width: 0;
  3244.                         outline: none;
  3245.                     }
  3246.  
  3247.                     textarea.usertext {
  3248.                         border-bottom: none !important;
  3249.                         box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.38) !important
  3250.                     }
  3251.  
  3252.         /*
  3253.             6.3.2 'Save' button, 'Content policy' & 'Formatting help' [.bottom-area]
  3254.         */
  3255.  
  3256.             .bottom-area {margin-right: 0px}
  3257.  
  3258.                 .help-toggle .option, .reddiquette {color: white !important; font-size: 10px !important}
  3259.  
  3260.                     .help-toggle:first-letter, .reddiquette:first-letter {text-transform: uppercase}
  3261.  
  3262.                     .help-toggle .option:hover, .reddiquette:hover {text-decoration: underline !important}
  3263.  
  3264.         /*
  3265.             6.3.3 Formatting help [.usertext .markhelp]
  3266.         */
  3267.  
  3268.             .usertext .markhelp {
  3269.                 border-top: none;
  3270.                 background: url(%%blur-small%%) no-repeat center top;
  3271.                 background-attachment: fixed;
  3272.                 background-size: cover;
  3273.                 box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.38);
  3274.                 border-radius: 5px;
  3275.                 padding: 15px 20px 10px 20px
  3276.             }
  3277.  
  3278.                 .markhelp p { color: #F9F9F9 }
  3279.  
  3280.                     .markhelp p:first-letter { text-transform: uppercase }
  3281.  
  3282.                 .markhelp a { color: #fda4a4 !important }
  3283.  
  3284.                     .markhelp a:hover { text-decoration: underline !important }
  3285.  
  3286.                 /* Example table */
  3287.  
  3288.                     .usertext .markhelp table {
  3289.                         width: 100%;
  3290.                         margin: 5px 0px
  3291.                     }
  3292.  
  3293.                         .usertext .markhelp tr, .usertext .markhelp td {
  3294.                             width: 50%;
  3295.                             border: none;
  3296.                             background-color: transparent !important
  3297.                         }
  3298.  
  3299.                         .markhelp tbody { margin: 0 0 !important }
  3300.  
  3301.                 /* Spaces for '...treated like code' */ .usertext .markhelp .spaces { background-color: rgba(255,255,255,.2) }
  3302.  
  3303.                 /* Code example */ .markhelp tbody pre {
  3304.                     background-color: rgba(255,255,255,0.04);
  3305.                     border-radius: 2px;
  3306.                     border: none;
  3307.                     font-family: Menlo, Consolas, monospace;
  3308.                     font-size: 11px;
  3309.                     color: #FFFDFD
  3310.                 }
  3311.  
  3312.         /*
  3313.             6.3.4 'Highlight comments posted since previous visit' [.gold-accent, .new-comment]
  3314.         */
  3315.  
  3316.             .gold-accent {
  3317.                 margin-top: 0;
  3318.                 padding: 0 0 0;
  3319.                 background-color: transparent;
  3320.                 border: none;
  3321.             }
  3322.  
  3323.                 .gold-accent .title {
  3324.                     font-size: 11px !important;
  3325.                     font-weight: normal !important;
  3326.                     color: #E7E7E7 !important;
  3327.                     text-transform: uppercase;
  3328.                     letter-spacing: 1.12px;
  3329.                 }
  3330.  
  3331.                     .gold-accent .title:before {
  3332.                         display: inline-block;
  3333.                         content: "";
  3334.                         width: 19px;
  3335.                         height: 15px;
  3336.                         background-image: url(%%spritesheet-hector%%) !important;
  3337.                         background-size: 381px 64px;
  3338.                         background-position: -113px -16px;
  3339.                         margin-right: 5px;
  3340.                         position: relative;
  3341.                         top: 2px;
  3342.                     }
  3343.  
  3344.                 .rounded.gold-accent.comment-visits-box {
  3345.                     width: 100%;
  3346.                     background: transparent;
  3347.                     max-width: none;
  3348.                     margin: 0px 5px 15px;
  3349.                     padding: 7px 10px 7px 7px;
  3350.                     color: inherit;
  3351.                 }
  3352.  
  3353.             .new-comment .usertext-body {
  3354.                 background: rgba(241,234,158,0.27);
  3355.                 border-radius: 3px;
  3356.                 border: none;
  3357.                 margin-top: 1px
  3358.             }
  3359.  
  3360.     /*
  3361.         6.4 Comments [.commentarea, .comment]
  3362.     */
  3363.  
  3364.         /*
  3365.             6.4.1 Comment area general styles
  3366.         */
  3367.  
  3368.             .comment .entry .buttons {
  3369.                 margin-top: 0;
  3370.                 padding-top: 0;
  3371.             }
  3372.  
  3373.                 .comment .entry .buttons li a { color: #9B9B9B }
  3374.  
  3375.                     .comment .entry .buttons li a:hover { color: white }
  3376.  
  3377.             .comment.noncollapsed .child {
  3378.                 border: none !important;
  3379.                 box-shadow: none;
  3380.                 border-radius: 3px !important
  3381.             }
  3382.  
  3383.             .commentarea .child .thing {
  3384.                 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09) !important;
  3385.                 margin-top: 15px;
  3386.                 margin-right: 6px;
  3387.             }
  3388.  
  3389.             .comment .child, .comment .showreplies {
  3390.                 margin-top: 0;
  3391.                 margin-left: 20px
  3392.             }
  3393.  
  3394.             .comment .tagline .score:before {
  3395.                 display: inline-block;
  3396.                 content: "";
  3397.                 width: 4px;
  3398.                 height: 4px;
  3399.                 background-image: url(%%spritesheet-hector%%) !important;
  3400.                 background-size: 381px 64px;
  3401.                 background-position: -99px -21px;
  3402.                 position: relative;
  3403.                 color: transparent !important;
  3404.                 top: -1px;
  3405.                 margin-right: 6px;
  3406.                 margin-left: 5px
  3407.             }
  3408.  
  3409.         /*
  3410.             6.4.2 Username [.author]
  3411.         */
  3412.  
  3413.             .comment .author {
  3414.                 color: #B1B1B1 !important;
  3415.                 font-size: 11px !important;
  3416.                 font-weight: 500 !important
  3417.             }
  3418.  
  3419.             .comment .expand { color: #B1B1B1 }
  3420.  
  3421.                 .author.submitter {
  3422.                     color: #B1B1B1 !important;
  3423.                     display: inline;
  3424.                     width: auto;
  3425.                     height: auto;
  3426.                     background-image: none !important;
  3427.                     position: static
  3428.                 }
  3429.  
  3430.             /*
  3431.                 6.4.2.1 User attributes [.userattrs]
  3432.             */
  3433.  
  3434.                 .commentarea .userattrs {
  3435.                     color: transparent;
  3436.                     margin-left: -6px;
  3437.                     margin-right: -1px
  3438.                 }
  3439.  
  3440.                     /* OP (.submitter) */
  3441.  
  3442.                     .userattrs .submitter {
  3443.                         display: inline-block;
  3444.                         content: "";
  3445.                         width: 12px;
  3446.                         height: 12px;
  3447.                         background-image: url(%%spritesheet-hector%%) !important;
  3448.                         background-size: 381px 64px;
  3449.                         background-position: -84px -16px;
  3450.                         position: relative;
  3451.                         color: transparent !important;
  3452.                         margin-right: -2px
  3453.                     }
  3454.  
  3455.                     /* Distinguished comment (.moderator) */
  3456.  
  3457.                         .commentarea .userattrs .moderator {
  3458.                             display: inline-block;
  3459.                             content: "";
  3460.                             width: 11px;
  3461.                             height: 12px;
  3462.                             background-image: url(%%spritesheet-hector%%) !important;
  3463.                             background-size: 381px 64px;
  3464.                             background-position: -103px -16px;
  3465.                             position: relative;
  3466.                             color: transparent !important;
  3467.                             margin-left: 3px;
  3468.                             margin-right: -3px;
  3469.                             top: 0px
  3470.                         }
  3471.  
  3472.                         .author.moderator {color: #4AF795 !important}
  3473.  
  3474.                     /* Friend (.friend) */
  3475.  
  3476.                         .userattrs .friend {
  3477.                             display: inline-block;
  3478.                             content: "";
  3479.                             width: 12px;
  3480.                             height: 12px;
  3481.                             background-image: url(%%spritesheet-hector%%) !important;
  3482.                             background-size: 381px 64px;
  3483.                             background-position: -71px -16px;
  3484.                             position: relative;
  3485.                             color: transparent !important;
  3486.                             top: 0px
  3487.                         }
  3488.  
  3489.                             .link .userattrs .friend {
  3490.                                 top: -10px;
  3491.                                 margin-right: 3px;
  3492.                                 margin-bottom: -10px !important;
  3493.                                 padding-bottom: 0px !important
  3494.                             }
  3495.  
  3496.     /*
  3497.         6.5 Edit text post []
  3498.     */
  3499.  
  3500.         .link textarea {
  3501.             margin-left: -10px;
  3502.             width: 98% !important
  3503.         }
  3504.  
  3505. /*
  3506.     7. (temporary) Submit Page [.submit-page]
  3507. */
  3508.  
  3509.     .submit.content {width: 520px;margin: auto;box-shadow: none}
  3510.         .submit-page .content h1 {
  3511.             display: none
  3512.         }
  3513.         .submit-page #newlink.submit.content ul.tabmenu.formtab {
  3514.             padding: 0;
  3515.             margin-top: 0;
  3516.         }
  3517.             .submit-page #newlink.submit.content .tabmenu.formtab a {
  3518.                 padding: 8px 0;
  3519.                 width: 260px;
  3520.                 display: inline-block;
  3521.                 text-align: center;
  3522.                 color: rgba(0,0,0,.6);
  3523.                 background-color: transparent;
  3524.                 text-transform: uppercase;
  3525.                 font-size: 16px;
  3526.                 border: none;
  3527.                 transition: all 0.15s ease;
  3528.             }
  3529.                 .submit-page #newlink.submit.content .tabmenu.formtab a:hover {
  3530.                     background-color: #f1f1f1;
  3531.                     color: #42a5f5;
  3532.                 }
  3533.                 .submit-page #newlink.submit.content .tabmenu.formtab a:active,
  3534.                 .submit-page #newlink.submit.content .tabmenu.formtab .selected a {
  3535.                     background-color: #FFFFFD;
  3536.                     color: #fff;
  3537.                 }
  3538.         .formtabs-content {
  3539.             margin-top: 8px;
  3540.             padding-top: 8px;
  3541.             border-top: 1px solid #e3e3e3;
  3542.         }
  3543.             .submit-page form .spacer+.spacer { margin: 8px 0 }
  3544.                 .submit-page .roundfield {
  3545.                     padding: 8px 0;
  3546.                     width: inherit;
  3547.                     background-color: transparent;
  3548.                     border-radius: 0;
  3549.                     border-top: 1px solid #e3e3e3
  3550.                 }
  3551.                     .submit-page .roundfield textarea, .submit-page .roundfield input[type=text],
  3552.                     .submit-page .roundfield input[type=url] {
  3553.                         padding: 4px;
  3554.                         width: 510px;
  3555.                         border-radius: 2px;
  3556.                         border: 1px solid #e3e3e3;
  3557.                         transition: all ease 0.25s;
  3558.                     }
  3559.                         .submit-page .roundfield textarea:hover, .submit-page .roundfield input[type=text]:hover,
  3560.                         .submit-page .roundfield input[type=url]:hover {
  3561.                             border-color: #bdbdbd;
  3562.                         }
  3563.                         #sr-autocomplete-area { z-index: 1 }
  3564.                     .submit-page #suggested-reddits {
  3565.                         margin-top: 8px;
  3566.                         text-align: center;
  3567.                     }
  3568.                         .submit-page #suggested-reddits h3 { margin: 8px }
  3569.                 .submit-page .infobar, .submit-page .roundfield.info-notice {
  3570.                     padding: 8px !important;
  3571.                     width: initial;
  3572.                     border-radius: 2px;
  3573.                     border: 1px solid #bbdefb;
  3574.                     background-color: #e3f2fd;
  3575.                     background-image: repeating-linear-gradient(45deg, transparent, transparent 30px,
  3576.                                                                 rgba(255,255,255,.5) 30px,
  3577.                                                                 rgba(255,255,255,.5) 60px);
  3578.                     text-align: center;
  3579.                 }
  3580.  
  3581.         .file-upload-button,
  3582.         .submit-page #newlink.submit .btn {
  3583.                 width: 100%;
  3584.                 padding: 8px 16px;
  3585.                 border: 0;
  3586.                 border-radius: 2px;
  3587.                 line-height: 32px !important;
  3588.                 font-size: 16px !important;
  3589.                 font-weight: normal;
  3590.                 text-transform: lowercase;
  3591.                 color: white !important;
  3592.                 background-color: #FFFFFD;
  3593.                 transition: all 0.25s ease;
  3594.         }
  3595.             .file-upload-button:hover,
  3596.             .submit-page #newlink.submit .btn:hover {
  3597.                 background-color: #CB9008;
  3598.                 box-shadow: 0px .5px 3px 1px rgba(0, 0, 0, 0.1);
  3599.                 color: white !important;
  3600.             }
  3601.             .file-upload-button:active,
  3602.             .submit-page #newlink.submit .btn:active { background-color: #A57300 }
  3603.  
  3604. /*
  3605.     8. 'Edit stylesheet' page [.stylesheet-customize-container]
  3606. */
  3607.  
  3608.     .sheets { margin-right: 0px }
  3609.  
  3610.         .sheets .col { width: 100% }
  3611.  
  3612.             .sheets .col > div { margin: 0 5px }
  3613.  
  3614.             .sheets .col textarea {
  3615.                 width: 100%;
  3616.                 padding-left: 15px
  3617.             }
  3618.  
  3619.         .stylesheet-customize-container { padding-right: 24px !important }
  3620.  
  3621.             .stylesheet-customize-container textarea {
  3622.                 font-family: Menlo, Consolas, monospace;
  3623.                 color: #bfbfb9;
  3624.                 background-color: #272822;
  3625.                 padding: 0px;
  3626.                 margin-right: 12px !important;
  3627.                 border: none
  3628.             }
  3629.  
  3630.                 .stylesheet-customize-container textarea::selection {
  3631.                   background: #a6a69e; /* WebKit/Blink Browsers */
  3632.                 }
  3633.  
  3634.             .stylesheet-customize-container h2 {
  3635.                 margin-top: 0px;
  3636.                 margin-bottom: 10px;
  3637.                 margin-left: 4px;
  3638.                 font-size: 13px;
  3639.                 color: #737373;
  3640.                 letter-spacing: 1.2px;
  3641.                 text-transform: uppercase
  3642.             }
  3643.  
  3644.         .error {
  3645.             font-size: 11px;
  3646.             letter-spacing: 0.5px;
  3647.             color: #F9F9F9;
  3648.             text-transform: uppercase
  3649.         }
  3650.  
  3651.             .toggle .error {
  3652.                 font-size: 11px;
  3653.                 letter-spacing: 0.5px;
  3654.                 color: #F9F9F9;
  3655.                 text-transform: uppercase
  3656.             }
  3657.  
  3658.         .btn { text-transform: capitalize }
  3659.  
  3660.         .submit-img { text-transform: capitalize }
  3661.  
  3662.     /* Image list */
  3663.  
  3664.         .image-list {
  3665.             font-size: 11px !important;
  3666.             letter-spacing: 0.1em;
  3667.             text-transform: uppercase
  3668.         }
  3669.  
  3670.             .img-name {
  3671.                 font-weight: 600;
  3672.                 letter-spacing: 0.005em;
  3673.                 font-size: 16px;
  3674.                 text-transform: lowercase;
  3675.             }
  3676.  
  3677.                 input#img-name{
  3678.                     margin-left: 5px;
  3679.                 }
  3680.  
  3681.             .img-url {
  3682.                 font-family: Menlo, Consolas, monospace;
  3683.                 font-size: 12px !important;
  3684.                 text-transform: none
  3685.             }
  3686.  
  3687.         /* Thumbnails */
  3688.  
  3689.             .image-preview-list.image-list {
  3690.                 min-width: 650px
  3691.             }
  3692.  
  3693.             ul.image-preview-list li {
  3694.                 padding-bottom: 10px;
  3695.                 margin-bottom: 20px;
  3696.                 vertical-align: top;
  3697.                 width: 45%;
  3698.                 height: 100px;
  3699.                 display: inline-block;
  3700.                 position: relative;
  3701.             }
  3702.  
  3703.                 ul.image-preview-list li:after {
  3704.                     width: 100px;
  3705.                     display: block;
  3706.                     content: "";
  3707.                     text-align: center;
  3708.                     height: 100px;
  3709.                     box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
  3710.                     border-radius: 3px;
  3711.                     position: relative;
  3712.                     top:-55px !important;
  3713.                     pointer-events: none
  3714.                 }
  3715.  
  3716.             ul.image-preview-list .preview {
  3717.                 width: 100px;
  3718.                 float: left;
  3719.                 display: block;
  3720.                 text-align: center;
  3721.                 height: 100px;
  3722.                 overflow: hidden;
  3723.                 background: rgba(0,0,0,0.05);
  3724.                 /* box-shadow: 4px 4px 4px 1px rgba(0, 0, 0, 1) inset; */
  3725.                 border-radius: 3px;
  3726.             }
  3727.  
  3728.                 ul.image-preview-list .preview img {
  3729.                     max-width: 100px;
  3730.                     padding: auto;
  3731.                 }
  3732.  
  3733.             ul.image-preview-list .description {
  3734.                 vertical-align: top;
  3735.                 margin-left: 105px;
  3736.                 text-transform: capitalize !important;
  3737.                 letter-spacing: normal;
  3738.                 font-size: 10px
  3739.             }
  3740.  
  3741.                 ul.image-preview-list .description a:hover {
  3742.                     text-decoration: underline !important;
  3743.                     cursor: pointer !important;
  3744.                 }
  3745.    
  3746.  
  3747. /*
  3748.     9. Footer [.footer]
  3749. */
  3750.  
  3751.     .footer-parent {
  3752.         height: 328px;
  3753.         background-image: none;
  3754.         background-position: right;
  3755.         background-repeat: no-repeat;
  3756.         font-weight: 500;
  3757.         font-size: 11px;
  3758.         text-transform: uppercase;
  3759.         text-align: left;
  3760.         padding-left: 0px;
  3761.         letter-spacing: 1px;
  3762.         line-height: 20px;
  3763.         padding-top: 0px;
  3764.         padding-bottom: 0px
  3765.     }
  3766.  
  3767.         .debuginfo, .footer-parent { background-color: transparent }
  3768.  
  3769.     .footer {
  3770.         padding: 0px;
  3771.         padding-top: 30px;
  3772.         margin: 30px;
  3773.         border: none;
  3774.         display: flex;
  3775.         display: -webkit-flex;
  3776.         max-width: 600px
  3777.     }
  3778.  
  3779.         .footer .col {
  3780.             margin: 10px 0 30px;
  3781.             min-width: 180px
  3782.         }
  3783.  
  3784.         .footer .flat-vert .title {
  3785.             font-size: 13px;
  3786.             font-weight: 700;
  3787.             letter-spacing: normal;
  3788.             transition: color .25s ease, background-color .25s ease;
  3789.             color: #9B9B9B
  3790.         }
  3791.  
  3792.         .footer .flat-vert li a {
  3793.             font-size: 11px;
  3794.             font-weight: 400;
  3795.             color: #9B9B9B
  3796.         }
  3797.  
  3798.             .footer .flat-vert li a:hover {
  3799.                 text-decoration: underline !important;
  3800.             }
  3801.  
  3802.     .rounded #footer {margin: 10px 0 30px;}
  3803.  
  3804.     .bottommenu, .col {border: none !important}
  3805.  
  3806.     .bottommenu {
  3807.         margin-left: 45px;
  3808.         font-size: 12px;
  3809.         color: #7f7f7f !important;
  3810.         opacity: 1;
  3811.         font-weight: lighter;
  3812.         text-transform: none;
  3813.         letter-spacing: normal;
  3814.         line-height: 14px;
  3815.     }
  3816.  
  3817.         .bottommenu a {
  3818.             text-decoration: underline !important;
  3819.             color: #7f7f7f !important;
  3820.         }
  3821.  
  3822.     .buygold {
  3823.         color: #b38b45 !important;
  3824.         font-weight: normal
  3825.     }
  3826.  
  3827.     #hsts_pixel { display:none }
  3828.  
  3829.     .debuginfo { display: none }
  3830.  
  3831. /*
  3832.     10. RES (Reddit Enhancement Suite)
  3833. */
  3834.  
  3835.     /*
  3836.         10.3 RES subreddit list shortcuts
  3837.     */
  3838.  
  3839.         #RESShortcutsViewport {
  3840.             width: auto;
  3841.             overflow: hidden;
  3842.             color: black !important;
  3843.         }
  3844.  
  3845.         #RESShortcutsSort {
  3846.             margin-right: 14px;
  3847.         }
  3848.  
  3849.         #RESShortcutsSort,
  3850.         #RESShortcutsRight,
  3851.         #RESShortcutsLeft,
  3852.         #RESShortcutsAdd,
  3853.         #RESShortcutsTrash {
  3854.             width: 16px;
  3855.             padding-right: 45px;
  3856.             cursor: pointer;
  3857.             background: transparent;
  3858.             font-size: 14px;
  3859.             color: black;
  3860.             height: 10px;
  3861.             line-height: 15px;
  3862.             position: absolute;
  3863.             top: 4px;
  3864.             z-index: 999;
  3865.             opacity: 0.5
  3866.         }
  3867.  
  3868.             #RESShortcutsSort:hover,
  3869.             #RESShortcutsRight:hover,
  3870.             #RESShortcutsLeft:hover,
  3871.             #RESShortcutsAdd:hover,
  3872.             #RESShortcutsTrash:hover {
  3873.                 opacity: 1
  3874.             }
  3875.  
  3876.         #RESShortcutsEditContainer {
  3877.             padding-top: 4px;
  3878.             width: 130px;
  3879.             height: 34px !important;
  3880.             margin-right: 0px;
  3881.             position: absolute;
  3882.             overflow: visible;
  3883.             right: 0;
  3884.             top: 0;
  3885.             z-index: 999;
  3886.             background-color: white;
  3887.             background-size: 4044px 198px;
  3888.             background-attachment: fixed;
  3889.             background-position: center top
  3890.         }
  3891.  
  3892.             #RESShortcutsEditContainer:after {
  3893.                 display: block;
  3894.                 position: relative;
  3895.                 top: 4px;
  3896.                 left: 0px;
  3897.                 content: "";
  3898.                 width: 1px;
  3899.                 height: 16px;
  3900.                 background-color: white;
  3901.                 opacity: 0.4;
  3902.                 z-index: 1000
  3903.             }
  3904.  
  3905.             #RESShortcutsEditContainer .res-icon {
  3906.                 font-size: 14px;
  3907.             }
  3908.  
  3909.     /*
  3910.         10.2 RES userbar
  3911.     */
  3912.  
  3913.         #header-bottom-right.res-userbar-toggle {
  3914.             margin-left: 0px;
  3915.             margin-top: 152px;
  3916.             background-color: transparent !important;
  3917.             z-index: 2000 !important;
  3918.             float: right;
  3919.             top: 15px
  3920.  
  3921.         }
  3922.  
  3923.         #openRESPrefs {
  3924.             display: inline-block;
  3925.             margin-left: 0px;
  3926.             position: relative;
  3927.             top: 4px !important;
  3928.             width: 20px;
  3929.             height: 20px;
  3930.             background-image: url(%%RESicons2X%%);
  3931.             background-size: 20px 200px;
  3932.             background-position: 0 -0px;
  3933.             background-repeat: no-repeat;
  3934.             opacity: 0.6;
  3935.             -webkit-transition: opacity .05s ease-in-out;
  3936.             -moz-transition: opacity .05s ease-in-out;
  3937.             -o-transition: opacity .05s ease-in-out;
  3938.             transition: opacity .05s ease-in-out
  3939.         }
  3940.  
  3941.             #openRESPrefs:hover {
  3942.                 opacity: 1 !important
  3943.             }
  3944.  
  3945.         #header-bottom-right .gearIcon {
  3946.             cursor: pointer !important;
  3947.         }
  3948.  
  3949.             .gearIcon::before, .gearIcon::after {
  3950.                 font: normal 0px / 1 'Batch';
  3951.                 vertical-align: middle;
  3952.                 cursor: pointer;
  3953.             }
  3954.  
  3955.         #userbarToggle {
  3956.             min-height: 20px;
  3957.             position: absolute;
  3958.             top: 4px !important;
  3959.             left: -15px;
  3960.             padding-right: 3px;
  3961.             font-size: 0px;
  3962.             border-radius: 0px;
  3963.             color: #fff;
  3964.             font-size: 0px;
  3965.             background-color: transparent;
  3966.             border-right: none;
  3967.             cursor: pointer;
  3968.             text-align: right;
  3969.             line-height: 20px;
  3970.             display: inline-block;
  3971.             margin-left: 14px;
  3972.             width: 20px;
  3973.             height: 20px;
  3974.             background-image: url(%%RESicons2X%%);
  3975.             background-size: 20px 200px;
  3976.             background-position: 0 -20px;
  3977.             background-repeat: no-repeat;
  3978.             opacity: 0.6;
  3979.             -webkit-transition: opacity .05s ease-in-out;
  3980.             -moz-transition: opacity .05s ease-in-out;
  3981.             -o-transition: opacity .05s ease-in-out;
  3982.             transition: opacity .05s ease-in-out
  3983.         }
  3984.  
  3985.             #userbarToggle:hover {
  3986.                 opacity: 1 !important
  3987.             }
  3988.  
  3989.             #userbarToggle.userbarShow {
  3990.                 background-position: 0 -40px;
  3991.                 bottom: 20px !important;
  3992.                 left: auto;
  3993.                 right: 0;
  3994.             }
  3995.  
  3996.         .res-accountSwitcher-dropDownStyle-alien #RESAccountSwitcherIcon {
  3997.             cursor: pointer;
  3998.             display: inline-block;
  3999.             vertical-align: middle;
  4000.             height: 16px;
  4001.             background: url(%%RESicons2X%%) no-repeat;
  4002.             display: inline-block;
  4003.             margin-left: 0px;
  4004.             width: 20px;
  4005.             height: 20px;
  4006.             background-size: 20px 200px;
  4007.             background-position: 0 -60px;
  4008.             background-repeat: no-repeat;
  4009.             opacity: 0.6;
  4010.             -webkit-transition: opacity .05s ease-in-out;
  4011.             -moz-transition: opacity .05s ease-in-out;
  4012.             -o-transition: opacity .05s ease-in-out;
  4013.             transition: opacity .05s ease-in-out
  4014.         }
  4015.  
  4016.             .res-accountSwitcher-dropDownStyle-alien #RESAccountSwitcherIcon:hover {
  4017.                 opacity: 1 !important
  4018.             }
  4019.  
  4020.         .res-accountSwitcher-dropDownStyle-alien #RESAccountSwitcherIconOverlay {
  4021.             cursor: pointer;
  4022.             position: absolute;
  4023.             display: none;
  4024.             width: 20px;
  4025.             height: 20px;
  4026.             padding-left: 2px;
  4027.             padding-right: 2px;
  4028.             padding-top: 3px;
  4029.             border: none;
  4030.             border-bottom: 1px solid #5f99cf;
  4031.             border-radius: 0;
  4032.             z-index: 100;
  4033.             background: none;
  4034.         }
  4035.  
  4036.         .tabmenu li.res-tabmenu-button {
  4037.             display: none !important;
  4038.         }
  4039.  
  4040.     /*
  4041.         10.3 RES various fixes
  4042.     */
  4043.  
  4044.         /* Keyboard nav blue background */
  4045.  
  4046.             .res .RES-keyNav-activeElement, .subreddit-rule-item:hover {
  4047.                 background-color: rgba(0,90,255,0.14) !important;
  4048.                 box-shadow: 0 0 12px 5px rgba(0,90,255,0.15) !important;
  4049.                 border-radius: 5px !important;
  4050.             }
  4051.  
  4052.             .res .commentarea .RES-keyNav-activeElement .md, .res .RES-keyNav-activeElement .md-container {
  4053.                 background-color: rgba(0,90,255,0.14) !important;
  4054.                 box-shadow: 0 0 12px 5px rgba(0,90,255,0.15) !important;
  4055.                 border-radius: 5px !important;
  4056.             }
  4057.  
  4058.         /* User tag image position */
  4059.  
  4060.             .RESUserTagImage::after {
  4061.                 vertical-align: middle;
  4062.                 position: relative;
  4063.                 top: -3px;
  4064.                 color: rgba(0, 0, 0, 0.5);
  4065.                 margin-right: 4px !important;
  4066.                 margin-left: 1px !important
  4067.             }
  4068.  
  4069.         /* Sidebar titlebox options */
  4070.  
  4071.             .res-sr-style-toggle {
  4072.                 background-color: transparent !important;
  4073.                 margin-left: 90px !important
  4074.             }
  4075.  
  4076.             .multi-count {
  4077.                 border: none !important;
  4078.                 border-radius: 20px !important;
  4079.                 margin-left: 3px !important;
  4080.                 margin-right: 0 !important
  4081.             }
  4082.  
  4083.             .res-fancy-toggle-button {
  4084.                 display: block;
  4085.                 border-radius: 20px !important;
  4086.                 width: 130px !important;
  4087.                 max-height: 23px !important;
  4088.                 padding: 0 20px 0 20px !important;
  4089.                 margin-bottom: 5px !important;
  4090.                 position: relative;
  4091.                 left: 65px;
  4092.                 font-size: 11px;
  4093.                 font-weight: 600;
  4094.                 line-height: 23px;
  4095.                 letter-spacing: 1.12px;
  4096.                 text-transform: uppercase;
  4097.                 color: #FFFFFD !important;
  4098.                 background: transparent;
  4099.                 border: 1px solid #FFFFFD;
  4100.                 border-radius: 20px;
  4101.                 box-shadow: 0 0px 0px 0px rgba(29,82,80,0.4);
  4102.                 transition: all 0.2s ease
  4103.             }
  4104.  
  4105.                 .res-fancy-toggle-button:hover {
  4106.                     background: #fff;
  4107.                     border: 1px solid #fff;
  4108.                     color: #FFFFFD !important;
  4109.                     box-shadow: 0 5px 11px -4px rgba(0,0,1,1);
  4110.                 }
  4111.  
  4112.                 .res-fancy-toggle-button:active {
  4113.                     background: #DFDFDF;
  4114.                     border: 1px solid #DFDFDF;
  4115.                     color: #FFFFFD !important;
  4116.                     box-shadow: 0 2px 4px -2px rgba(0,0,2,1);
  4117.                 }
  4118.  
  4119.                 .res-fancy-toggle-button.RESshortcut.RESshortcutside {
  4120.                     margin-top: 5px !important
  4121.                 }
  4122.  
  4123.  
  4124.  
  4125. /*
  4126.     Subreddit settings page
  4127. */
  4128.  
  4129. .linefield {
  4130.     background: url(%%blur-small%%) no-repeat center top;
  4131.     background-attachment: fixed;
  4132.     background-size: cover;
  4133.     border: none !important;
  4134.     border-radius: 3px;
  4135.     box-shadow: 0 1px 2px 0 rgba(0,0,0,0.20)
  4136. }
  4137.  
  4138.     .linefield .title {
  4139.         color: #B0B0B0;
  4140.         font-size: 12px;
  4141.         letter-spacing: 1.2px;
  4142.         text-transform: uppercase;
  4143.         font-weight: normal;
  4144.     }
  4145.  
  4146.     .linefield-description {
  4147.         color: white !important;
  4148.         font-size: 11px !important;
  4149.         margin-top: 5px !important
  4150.     }
  4151.  
  4152.         .linefield-description::first-letter {
  4153.             text-transform: uppercase !important
  4154.         }
  4155.  
  4156. .pretty-form input[type=text] {
  4157.     box-shadow: none;
  4158.         -webkit-box-shadow: none;
  4159.     border: none;
  4160.     border-bottom: 1px solid rgba(255,255,255,.5);
  4161.     padding: 0px;
  4162.     background-color: transparent;
  4163.     color: white;
  4164.     outline: none !important;
  4165.     margin-top: 3px;
  4166.     margin-bottom: 8px
  4167. }
  4168.  
  4169. .gray { color: rgba(255,255,255,.6) }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!