API tools faq
paste
blackkettle

Untitled

blackkettle
Jun 16th, 2012
64
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.02 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.   CSS markup customization for r/surfing - 2012
  3.  
  4.   Most of this CSS was cribbed from other subreddits or tutorials with
  5.   special mention going out to:
  6.    r/battlefield3, r/skyrim, and r/fitness
  7.  
  8.   Credit for the various images can be found below in the related
  9.   code blocks.
  10. */
  11.  
  12. /*
  13.   Header CSS markup.  Taken from r/skyrim, r/battlefield3
  14.   The awesome surfboard fence painting was found here:
  15.     http://www.thedesignfoundry.com/blog/wp-content/uploads/2011/06/surfboard-fence-2011sm.png
  16.   All credit for its awesomeness goes to The Design Foundry.
  17. */
  18. #header {
  19.     background-color: #555 !important;
  20.     border-bottom: 1px solid #909090 !important
  21. }
  22. #header-img {
  23.     margin-top: 33px;
  24.     margin-right: 5px;
  25. }
  26. #header-bottom-left {
  27.     background: url(%%surfboardfence1%%);
  28.     background-repeat: repeat;
  29.     background-position: right bottom;
  30.     overflow: hidden;
  31.     height: 75px;
  32.     margin-right: 0px;
  33.     margin-left: 0px;
  34.     }
  35. body:lang(ds) #header-bottom-left {
  36.     background: url(%%surfboardfence1%%) no-repeat right bottom
  37. }
  38.  
  39.  
  40.  
  41. /*
  42.   Subreddit banner - very top of the page header.
  43. */
  44. #sr-header-area {
  45.     background-color: #0894E0;
  46.     border-bottom: black 1px solid;
  47.     padding: 3px 0px 4px 5px
  48.     }
  49. #sr-more-link {
  50.     color: gray;
  51.     text-shadow: white 0px 1px 0px
  52.     }
  53. .sr-bar a, .dropdown.srdrop .selected {
  54.     color: white;
  55.     text-transform: lowercase;
  56.     font-size: 10px
  57.     }
  58. .sr-bar a:hover {
  59.     color: #364657;
  60.     text-decoration: none
  61.     }
  62. #sr-more-link {
  63.     display: none
  64.     }
  65.  
  66.  
  67.  
  68. /*
  69.   Customize the 'Surfing' subreddit link in the header.
  70.   The font is called 'BeachType' and can be obtained here:
  71.     http://www.fontspace.com/david-a-mason/beachtype
  72.   This bit of 'wordart' was made in PPT.
  73. */
  74. .pagename a {
  75.     display: block;
  76.     background-image: url(%%surfing%%);
  77.     background-repeat: no-repeat;
  78.     margin: 0 auto;
  79.     font-size: 0px;
  80.     padding: 75px 300px 0 0;
  81.     color: #364657;
  82.     left: 125px;
  83.     position: absolute;
  84.     top: 45px
  85. }
  86.  
  87.  
  88.  
  89. /*
  90.   User preferences bar - bottom RHS of the header.
  91. */
  92. #header-bottom-right {
  93.     background: #222;
  94.     border: 1px solid black;
  95.     border-bottom: none;
  96.     border-right: none;
  97.     z-index: 99;
  98.     right: 0;
  99.     bottom: 0;
  100.     padding: 5px 10px
  101.     }
  102. #header-bottom-right a, #header-bottom-right .user {
  103.     color: #EEE;
  104.     text-shadow: #222 0px 1px 0px
  105. }
  106.  
  107.  
  108.  
  109. /*
  110.   Customize the vote arrows.
  111.   This will remain commented out until we find some cool arrow icons.
  112.   Arrow icons should be 15x15 px ~ 20x20 px, but the smaller the better.
  113.   noknockers noticed that there is even a hover state.
  114.   Technically I guess this means we could have 8 different icons:
  115.      UP, UP-hover, UPVOTED, UPVOTED-hover,
  116.      DOWN, DOWN-hover, DOWNVOTED, DOWNVOTED-hover
  117. */  
  118. /*
  119. .arrow.up {
  120.    background-image: url(%%UpNotClicked%%);
  121.    background-position: 0px 0px;
  122.    height: 15px; width: 15px;
  123. }
  124. .arrow.up:hover {
  125.    background-image: url(%%UpNotClickedHover%%);
  126.    background-position: 0px 0px;
  127.    height: 15px; width: 15px;
  128. }
  129.  
  130. .arrow.upmod {
  131.    background-image: url(%%UpClicked%%);
  132.    background-position: 0px 0px;
  133.    height: 15px; width: 15px;  
  134. }
  135. .arrow.upmod:hover {
  136.    background-image: url(%%UpClickedHover%%);
  137.    background-position: 0px 0px;
  138.    height: 15px; width: 15px;  
  139. }
  140.  
  141.  
  142. .arrow.down {
  143.    background-image: url(%%DownNotClicked%%);
  144.    background-position: 0px 0px;
  145.    height: 15px; width: 15px;
  146. }
  147. .arrow.down:hover {
  148.    background-image: url(%%DownNotClickedHover%%);
  149.    background-position: 0px 0px;
  150.    height: 15px; width: 15px;
  151. }
  152.  
  153. .arrow.downmod {
  154.    background-image: url(%%DownClicked%%);
  155.    background-position: 0px 0px;
  156.    height: 15px; width: 15px;
  157. }
  158. .arrow.downmod:hover {
  159.    background-image: url(%%DownClickedHover%%);
  160.    background-position: 0px 0px;
  161.    height: 15px; width: 15px;
  162. }
  163. */
  164.  
  165. div.content{
  166.      margin-top: 55px;
  167.      padding-top:50px;
  168. }
  169. div.side{
  170.     background-image: url(%%gerrylopez%%);
  171.     background-repeat: no-repeat;
  172.     background-position: 20px 35px;
  173.     padding-top:300px;
  174.     padding-left:10px;
  175. }
  176. body,.side {background-color:#eee!important;}
  177. div.content {background-color:#fff!important;}
  178.  
  179.  
  180.  
  181. /*
  182.   Navigation menu magic cribbed from r/battlefield3
  183. */
  184. ul.tabmenu {
  185.     background: url(%%tabmenu%%);
  186.     border: 1px solid #ddd;
  187.     font-family: "Helvetica Neue", Helvetica, Arial;
  188.     position: absolute;
  189.     font-size: 10px;
  190.     top: 165px;
  191.     /*announcement sticky*/
  192.     left: 15px;
  193.     border-radius: 6px
  194. }
  195. ul.tabmenu li {
  196.     padding: 4px 0px;
  197.     display: block;
  198.     float: left
  199. }
  200. ul.tabmenu:after {
  201.     clear: both
  202. }
  203. ul.tabmenu li a, ul.tabmenu li.selected a {
  204.     background-color: transparent;
  205.     border: 0;
  206.     color: #1E274A;
  207.     text-transform: lowercase;
  208.     font-size: 13px;
  209.     font-weight: normal
  210. }
  211. ul.tabmenu li.selected a {
  212.     color: #ff8333;
  213.     font-weight: bold
  214. }
  215.  
  216.  
  217.  
  218. /*
  219.    Announcement sticky
  220.    This was cribbed from r/fitness
  221.    The wave icon was cribbed from:
  222.     http://www.actsofvolition.com/images/caminowave.png
  223. */
  224. .titlebox .usertext-body .md h6 {
  225.     display: block;
  226.     position: absolute;
  227.     top: 95px;
  228.     left: 10px;
  229.     background-color: #0894E0;
  230.     background-image: url(%%wave%%);
  231.     background-repeat: no-repeat;
  232.     background-position: 10px 5px;
  233.     font-family: verdana, sans-serif;
  234.     font-size: 12px;
  235.     font-weight: bold;
  236.     color: #fff;
  237.     text-align: left;
  238.     padding: 10px 10px 10px 45px;
  239.     margin: 15px;
  240.     margin-left: 5px;
  241.     border-radius: 8px;
  242. }
  243. /* Allow absolute positioning to page */
  244. .titlebox form {
  245.     position: static
  246.     }
  247. /* Inactive link */
  248. .titlebox .usertext-body .md h6 a, .titlebox .usertext-body .md h6 a:link, .titlebox .usertext-body .md h6 a:visited {
  249.     color: #000e1d
  250.     }
  251. /* Link on hover */
  252. .titlebox .usertext-body .md h6 a:hover {
  253.     color: #666666
  254.     }
  255. /* Catches all <a> */
  256. .titlebox .usertext-body .md h6 a:before {
  257.     color: firebrick;
  258.     border-right: 1px solid #444;
  259.     padding-right: .6em;
  260.     margin-right: .6em
  261. }
  262.  
  263.  
  264.  
  265. /*
  266.   Footer CSS markup
  267.   The footer pic was originally cribbed from:
  268.     http://wayoftheocean.com/blog/http://www.wayoftheocean.com/html/wp-content/uploads/2011/04/1_DSC0820.jpg
  269.   It is a shot from the 2011 film "Way of the Ocean".
  270. */
  271. .footer-parent {
  272.     height: 630px;
  273.     padding-top: 0px;
  274.     padding-bottom: 0px;
  275.     clear: both;
  276.     background-image: url(%%footerwave%%);
  277.     text-align: center;
  278.     width: 100%;
  279.     background-position: top center;
  280.     background-repeat: no-repeat;
  281.     margin-bottom: -1px
  282. }
  283.  
  284.  
  285.  
  286. /*
  287.   Customize the submission/moderator page flare and whatnot.
  288.   The 'advisory' image was cobbled together in MS PPT.
  289. */
  290. #link-desc{
  291.    background-color: #fff;
  292.    border-color: #0894E0;
  293.    border-width: 2px;
  294. }
  295. #link-desc::after, #text-desc::after {
  296.     content: "";
  297.     background: url(%%advisory%%) no-repeat;
  298.     background-position: 0px;
  299.     background-color: #fff;
  300.     display: block;
  301.     width: 100%;
  302.     height: 300px;
  303.     }
  304.  
  305. .linefield .title {
  306.     color: black;
  307.     font-weight: bold;
  308.     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  309.     text-transform: lowercase;
  310.     }
  311. .linefield .linefield-content {
  312.     border-color: #999
  313.     }
  314. .delete-field {
  315.     background-color: transparent
  316.     }
  317. .tabmenu.formtab .selected a {
  318.     color: #324A74;
  319.     font-size: 100%;
  320.     background-color: transparent
  321.     }
  322. .tabmenu.formtab a {
  323.     border: none
  324.     }
  325. .roundfield {
  326.     background-color: #DDD
  327.     }
  328. .formtabs-content {
  329.     border-top: 4px solid #324A74;
  330.     margin-top: 0px
  331.     }
  332.  
  333.  
  334.  
  335. /*
  336.   Text markup, submission flare and other goodies.
  337.   I did not crib pretty much all of this from r/battlefield3.
  338.   The favicon.ico images for the submission links were found here,
  339.      http://www.getfavicon.org/
  340. */
  341. .comment .child {
  342.     border-left: 1px dotted #888
  343.     }
  344. .entry .buttons li a.comments {
  345.     color: #324A74
  346.     }
  347. .entry .buttons a:hover {
  348.     text-decoration: none
  349.     }
  350. a {
  351.     color: #324AA5
  352.     }
  353. .sidecontentbox h1 {
  354.     color: #FF9322;
  355.     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  356.     font-size: 12px;
  357.     text-transform: uppercase
  358.     }
  359. textarea {
  360.     border-radius: 5px;
  361.     background-color: #FAFAFA;
  362.     border: 1px solid #CDCDCD
  363.     }
  364. a.title {
  365.     text-shadow: 0 1px 0 #FFF;
  366.     font-family: "Helvetica Neue", Helvetica, Arial
  367.     }
  368. .thing .title.loggedin, .thing .title {
  369.     color: #324a74 !important;
  370.     font-weight: bold
  371.     }
  372. .thing .title.loggedin:visited, .thing .title:visited {
  373.     color: #777 !important;
  374.     font-weight: normal !important
  375.     }
  376. .thing .title.loggedin:visited, .thing .title.click:visited, .thing .title.loggedin.click:visited {
  377.     color: #777 !important;
  378.     font-weight: normal !important
  379.     }
  380. .thing .title.loggedin:hover, .thing .title.click:hover, .thing .title.loggedin.click:hover, a:hover {
  381.     color: #F88613 !important
  382.     }
  383. .thing.spam {
  384.     margin-right: 350px;
  385.     border-radius: 5px;
  386.     margin-bottom: 10px;
  387.     margin-top: 10px;
  388.     background: white
  389.     }
  390. .menuarea {
  391.     border-bottom: 0px
  392.     }
  393. .comment .expand:hover {
  394.     text-decoration: none;
  395.     color: white;
  396.     background: transparent
  397.     }
  398. .tagline a {
  399.     color: #324a74
  400.     }
  401. .tagline a:hover {
  402.     text-decoration: none
  403.     }
  404. .tagline .friend {
  405.     color: white;
  406.     background-color: orangeRed;
  407.     padding: 1px;
  408.     border-radius: 3px
  409.     }
  410. .tagline .submitter {
  411.     color: white;
  412.     background-color: #059;
  413.     padding: 1px;
  414.     border-radius: 4px
  415.     }
  416. .tagline .moderator {
  417.     color: white;
  418.     background-color: #282;
  419.     padding: 1px;
  420.     border-radius: 3px
  421.     }
  422. .userattrs .moderator {
  423.     background-color: transparent;
  424.     color: green
  425.     }
  426. .userattrs .submitter {
  427.     background-color: transparent;
  428.     color: #059
  429.     }
  430. .userattrs .friend {
  431.     background-color: transparent;
  432.     color: orangeRed
  433.     }
  434. .link .rank {
  435.     font-size: 17px
  436.     }
  437. .link, .link.last-clicked {
  438.     margin: -1px 0 0;
  439.     padding: 7px 21px 7px;
  440.     border-bottom: 1px solid #EBEBEB;
  441.     font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  442.     font-size: 13px
  443.     }
  444. .link .title {
  445.     font-size: 14px
  446.     }
  447. .link .title .domain {
  448.     color: #999;
  449.     font-size: 0;
  450.     font-weight: normal
  451.     }
  452. .link .title .domain a {
  453.     font-size: 13px;
  454.     margin-left: 5px
  455.     }
  456. .link .title .domain a[href*="imgur.com"]:before {
  457.     content: url(%%imguricon%%);
  458.     margin-right: 5px;
  459.    
  460.     }
  461. .link .title .domain a[href*="surfline.com"]:before {
  462.     content: url(%%surflineicon%%);
  463.     margin-right: 5px
  464.     }
  465. .link .title .domain a[href*="vimeo.com"]:before {
  466.     content: url(%%vimeoicon%%);
  467.     margin-right: 5px
  468.     }
  469. .link .title .domain a[href*="surfingmagazine.com"]:before {
  470.     content: url(%%surfingmagazineicon%%);
  471.     margin-right: 5px
  472.     }
  473. .link .title .domain a[href*="surfermag.com"]:before {
  474.     content: url(%%surfermagicon%%);
  475.     margin-right: 5px
  476.     }
  477. .link .title .domain a[href*="stabmag.com"]:before {
  478.     content: url(%%stabmagicon%%);
  479.     margin-right: 5px
  480.     }
  481. .link .title .domain a[href*="youtube.com"]:before {
  482.     content: url(%%youtubeicon%%);
  483.     margin-right: 5px
  484.     }
  485. .link .title .domain a[href*="twitter.com"]:before {
  486.     content: url(%%twittericon%%);
  487.     margin-right: 5px
  488.     }
  489. .link .tagline {
  490.     color: #999;
  491.     font-size: 12px;
  492.     margin: 8px 0
  493.     }
  494. .link .flat-list {
  495.     font-size: 11px
  496.     }
  497. .link .score.likes {
  498.     color: #F88613
  499.     }
  500. .link .score {
  501.     color: #AAA;
  502.     text-shadow: 0 1px 0 white
  503.     }
  504. .link .score.dislikes {
  505.     color: #324a74
  506.     }
  507. .link .usertext .md {
  508.     border: 1px solid #CDCDCD;
  509.     background-color: #FAFAFA
  510.     }
  511. .linkinfo .upvotes {
  512.     color: #F88613
  513.     }
  514. .linkinfo .downvotes {
  515.     color: #324a74
  516.     }
  517. .error {
  518.     color: #F88613
  519.     }
  520. .red {
  521.     color: #852500
  522.     }
  523. .md strong {
  524.     color: #444;
  525.     text-shadow: 0 1px 0 white
  526.     }
Advertisement
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!