Stylesheet for The Powder Toy's web site powdertoy.co.uk .

dark.css

@namespace url(http://www.w3.org/1999/xhtml);
/**
* (Original) Background pattern used from http://www.dinpattern.com/2011/08/29/charcoal/
* New one used from http://www.noqta.it/dromoscopio/ #40
* CSS changes colours, soon background images if I wanna.
* To apply, get Stylish for Firefox(Or other custom style platform SEE #1), then make a new CSS style for 
* * powdertoy.co.uk
* and paste this file into the editor box.
** HOW TO INSTALL ON VARIOUS PLATFORMS: 
* Opera: http://www.opera.com/docs/usercss/
* Firefox: http://userstyles.org/styles/66266/the-powder-toy-custom-css
* IE: http://webdesign.about.com/od/css/ht/htcssuseriewin.htm
* Safari: http://webdesign.about.com/od/css/ht/htcssusersafari.htm
* Chrome: https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe
* By boxmein 2012, I allow remakes of any kind while attribution is provided to original code.
**/

@-moz-document domain("powdertoy.co.uk") {
/* Links */
html {
/* Replace the URL with your own to change the background-pattern! */
/* (Original BG)background-image: url('http://boxmein.web44.net/images/charcoal/charcoal.gif') !important; */
background-image: url('http://www.noqta.it/dromoscopio/img/pattern_40.gif') !important;
background-attachment: fixed !important;
background-repeat: repeat !important; 
    }
input, textarea, .Tag {
background-color: #404040 !important;
border: 1px solid #222 !important;
background-image: none !important;
color: #fff !important;
}
.Conversation { 
border-bottom-color: #222 !important; 
}
a {
color:#96979A !important;
text-shadow:1px 1px 1px #000;
}

a.Item {
background:none !important;
}

a:hover {
color:#393A40 !important;
}

/* ------------------------------ 
 Global colouring tags! 
 Controls area on top of boxes */
.Pageheader,.Pageheader *,.ButtonLink,.PostForm,.GroupInfo,.fSaveDetails {
background-color:#383838 !important;
color:#96979A !important;
text-shadow:2px 0 3px rgba(0,0,0,0.7) !important;
}

/* Unread count, nice and simple. */
.CUnreadCount {
background-color:#8B0000 !important;
}

/* Various messages -- and now save box too! */
.Warning,.Error,.Information {
background-color:#222 !important;
border:none !important;
margin-bottom:5px;
}

.ParentCategory {
color:#DDD !important;
}

/* Topic page numbers with icons */
.Item,.Active {
text-shadow:2px 0 3px rgba(0,0,0,0.7) !important;
}

.TopContainer {
color:#ccc;
text-shadow:2px 2px 3px rgba(0,0,0,0.7) !important;
}

/* TinyMCE and other! */
input {
background-color:#FFF !important;
background-image:none !important;
resize:vertical !important;
}

/* Various links except menu items and categories and forum titles */
a.Link {
color:#ccc !important;
}

.Meta span em {
box-shadow:0 0 5px #FFF !important;
color:#fff !important;
}

/* Top "TPT" text */
h1 {
border:none !important;
color:#FFF !important;
font-weight:700;
}

.Page,.Subpage,a.Link,input,input.EditPlain,.SaveDetails,.Download,.Meta em {
background-color:#383838 !important;
}

/* ------------------------------ */
.Page,.Subpage {
box-shadow:0 0 5px rgba(0,0,0,0.7);
color:#FFF !important;
}

/* Forum post categories */
li {
background-color:#272727 !important;
}

.MessageList {
border-radius:3px;
}

/* */
.OtherF > input {
color:#FFF !important;
}

/* Your own post brighter than regular, darker than op */
.Mine {
background-color:#333 !important;
}

.Developer {
background-color:rgba(0, 150, 255, 0.1) !important;
}

.Moderator {
background-color:rgba(0, 255, 0, 0.1) !important;
}

.Administrator {
background-color:rgba(0, 0, 255, 0.1) !important;
}

blockquote:before,blockquote:after {
color:rgba(255,255,255,0.5);
content:"\"";
font-size:50px !important;
}

.blockquote:after {
float:right;
}

.mceContentBody p {
background-color:rgba(0,0,0,0) !important;
}

/* ------------------------------ 
 Wiki */
div.SubPage *,div.Content,div.SubPage.NoPad {
background-color:#383838 !important;
border-color:#222 !important;
color:#fefefe !important;
}

a.NPage,.Op,.ConUnread,.mceLayout,.Pagefooter,.mceToolbar,.mceToolbar *,#AddReplyMessage_ifr {
background-color:#555 !important;
}

.MessageList,.Subpage,.Page,.Pageheader,li,.Item,.Active,input,a.Link,.Download,.RecentContainer,.PostForm,.Meta em,ul,.mceToolbar,.mceToolbar *,.Pagefooter {
border-color:#222 !important;
}

.mceLayout,#AddReplyMessage_ifr html,#AddReplyMessage_ifr p {
background-image:none !important;
}
}
}

gistfile1.css

/**
 * The Powder Toy style re-write in LESS. (lesscss.org)
 * Use a LESS compiler such as SimpLESS to compile CSS from it. Or just have a less.js script link from your site
 * Uses pattern from noqta.it
 * 2012: boxmein. Remixing allowed, but credit is needed.
 * 
 * To stylers: hope you won't get a headache reading this code.
 */
 
/* Constants */
	/* Variable names pretty self-explaining or whatnot */
	@bg-image: url('http://www.noqta.it/dromoscopio/img/pattern_40.gif');
	@border-dark: #222;
	@bg-bright: #383838;
	@link-color: #96979A;
	@unread-red: #8B0000;
	@warning-color: @border-dark;
	@body-font-color: #FFF;
	
	@own-post-color: #333;
	@mod-post-color: rgba(0, 255, 0, 0.1);
	@dev-post-color: rgba(0, 150, 255, 0.3);
	@admin-post-color: rgba(0, 0, 255, 0.1);
	@op-post-color: #555;
	
/* Rules:
	* Don't be afraid to use variables, it will be precompiled anyways
	* Nesting tags last
	* More important first? 
*/

/* CSS */
html {
	background-image: @bg-image !important;
	background-attachment: fixed !important;
}
body {
	color: @body-font-color !important;
}
a {
	color: @link-color !important;
	.smallshadow;
}
input, button, textarea {
	background-image: none !important;
}
a:hover {
	/* omg, addition! */
	color: @link-color + #222 !important;
}
a.Link {
	color: #CCC !important;
}
/* -- Colour groups -- */

.border { /* I use this for nesting */
	border: 1px solid @border-dark !important;
} 

/* Vendor prefixes! FUUUUU */
.smallshadow (@x: 1px, @y: 1px, @blur: 1px, @color: #000) {
	-webkit-text-shadow: @arguments !important;
	   -moz-text-shadow: @arguments !important;
	    -ms-text-shadow: @arguments !important;
	     -o-text-shadow: @arguments !important;
	        text-shadow: @arguments !important;
}

.bigshadow (@x: 2px, @y: 2px, @blur: 3px, @color: rgba(0,0,0,0.7)) {
	-webkit-text-shadow: @arguments !important;
	   -moz-text-shadow: @arguments !important;
	    -ms-text-shadow: @arguments !important;
	     -o-text-shadow: @arguments !important;
	        text-shadow: @arguments !important;
}

input, textarea, .Tag {
	background-color: #404040 !important;
	color: #FFF !important;
	resize: vertical;
	.border;
}

.Conversation {
	.border;
	margin-bottom: -1px;
}
.Pageheader *, .Pageheader {
	text-shadow: none !important;
}
#PageheaderSearch input {
	border-bottom: none !important;
}
a.Item{
	.bigshadow;
}

.ButtonLink, .fSaveDetails, .GroupInfo, .Pageheader, .Pageheader *, .PostForm, .ButtonLink {
	background-color: @bg-bright !important;
	color: @link-color;
	background-image: none !important;
}

.CUnreadCount {
	background-color: @unread-red !important;
}

.Item, .Active, .TopContainer {
	.bigshadow;
}
/* Awesome code tag vs pre tag thread test */
code, pre {
	background-color: @border-dark !important; 
	border: 1px solid rgb(204,204,204);
	white-space: pre; /* No wrap, saves spaces to correct level */
	padding: 1px 2px;
	margin: 1px;
}

code {
	display: block;
}

pre {
	display: inline;
}

/* Copyright and footer messages */
.Copyright, .FooterExtra, .Header li a {
	.smallshadow;
}
/* Various warning / error messages */
.Warning, .Error, .Information {
	background-color: @warning-color !important;
	border: none !important;
	margin-bottom: 5px;
}

.ParentCategory {
	color: #DDD !important;
}

.Item, .Active {
	.bigshadow (2px, 0px);
}

.TopContainer {
	color: #CCC;
	.bigshadow;
}

/* Make block quotes not take up half the post screen */
blockquote {
	margin: -30px 10px;
}

/* Those "Unread" and "New" notices in Recents and categories */
.Meta span em {
	box-shadow: 0px 0px 5px #FFF !important;
	color: #FFF !important;
	
}

a.Link, .Download, input.EditPlain, .Meta em, .Page, .SaveDetails, .Subpage, .View * {
	background-color: @bg-bright !important;
}
/* In forums perhaps */
li {
	background-color: #272727 !important;
}
/* Top links, eg "Download", "Forum", ... */
#Header li {
	background: none !important;
}
h1 {
	color: #FFF !important;
	font-weight: normal;
}
.MessageList {
	border-radius: 3px;
}
/* Forum post colors:  */
.Mine {
	background-color: @own-post-color !important;
}

.Developer {
	background-color: @dev-post-color !important;
}

.Moderator {
	background-color: @mod-post-color !important;
}

.Administrator {
	background-color: @admin-post-color !important;
}

.Op {
	background-color: @op-post-color !important;
}

/* TinyMCE colours and stuff */
a.NPage,.ConUnread,.mceLayout,.Pagefooter,.mceToolbar,.mceToolbar *,#AddReplyMessage_ifr {
background-color:#555 !important;
}

.MessageList,.Subpage,.Page,.Pageheader,li,.Item,.Active,input,a.Link,.Download,.RecentContainer,.PostForm,.Meta em,ul,.mceToolbar,.mceToolbar *,.Pagefooter, .View * {
border-color:#222 !important;
}

.mceLayout,#AddReplyMessage_ifr html,#AddReplyMessage_ifr p {
background-image:none !important;
}