theme.css

/* NoNonsense Forum v18 © Copyright (CC-BY) Kroc Camen 2012
   licenced under Creative Commons Attribution 3.0 <creativecommons.org/licenses/by/3.0/deed.en_GB>
   you may do whatever you want to this code as long as you give credit to Kroc Camen, <camendesign.com> */
/* ====================================================================================================================== */
/* original Grayscale theme by Jon Gjengset <thesquareplanet.com>,
   greyscale theme by Kroc Camen, please modify to suit your needs
*//*
   IDs and classes prefixed with "nnf_" are those required by the templating logic
   (see '/lib/domtemplate.php' or <camendesign.com/dom_templating> for documentation)
*/

header, nav, section, article,	/* this doesn’t get set on browsers without an HTML5 parser (e.g. Firefox 3.6) */
 footer				{display: block;}

html, body			{width: 100%; margin: 0; padding: 0; border: 0; color: #888;}
html				{font: 16px/20px Corbel, "URW Gothic L", "Liberation Sans", "Trebuchet MS", sans-serif;
				 background: white url("img/bg.png") fixed repeat-x bottom center; word-wrap: break-word;
				 /* CSS3 gradients for browsers that support it: */
	/* Chrome / Safari */	 background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(#ddd));
	/* Chrome10+ Saf5+ */	 background-image: -webkit-linear-gradient(white, #ddd);
	/* FF3.6+ */		 background-image:    -moz-linear-gradient(white, #ddd);
	/* IE10 */		 background-image:     -ms-linear-gradient(white, #ddd);
	/* Opera 11.10+ */	 background-image:      -o-linear-gradient(white, #ddd);
	/* future! */		 background-image:         linear-gradient(white, #ddd);
				 /* for IE6, which doesn't support PNG transparency, we won’t use a gradient background so
				    that the fallback background colours in the PNG files compensate. (I used TweakPNG to
				    manually insert a background colour for IE6 into the 32-bit PNGs) */
				_background: #eee;}
body, #mast h1 a		{/* page centering / width */
				 width: 80%; max-width: 1024px; margin: 0 auto;}

h1				{margin: 0; padding: 20px 0 20px 60px;
				 font-weight: bold; font-size: 22px; line-height: 20px; color: #f7f6f7;
				 background: #222;}

p				{margin: 0; padding: 0 20px 20px;
				 /* fonts in Linux are pretty awful, so we go for a "centruy gothic" like font for titles
				    and other UI ("URW Gothic L"), but a normal-looking Arial-like for the post text */
				 font-family: Corbel, "Liberation Sans", "Trebuchet MS", sans-serif}

a				{color: #222; text-decoration: none; font-weight: bold;}
a:hover				{color: #666; text-decoration: underline;}

b.mod				{/* all moderators have underlined names */
				 /*text-decoration: underline;*/}

time				{font-family: Calibri, "Liberation Sans", Tahoma, sans-serif; text-transform: uppercase;}

blockquote			{position: relative; margin: 20px 0 0; padding: 0 20px 0 19px;
				 border-left: 1px dotted #222; font-style: italic;}
blockquote p:first-child	{padding-top: 0;}

/* added quote marks within blockquotes */
.ql, .qr			{padding-right: 5px;
				 font: normal 40px/0px "Liberation Sans", sans-serif; vertical-align: bottom;}
.qr				{position: absolute; right: 0; bottom: 0; height: 0; overflow: hidden; padding-top: 20px;}

pre				{overflow: auto; margin: 20px 0 0;}
pre, code			{font: 12.5px/20px Monaco, Consolas, "Liberation Mono", monospace, monospace;}

/* code delimiters., top and bottom */
.ct, .cb			{display: block; line-height: 19px;}
.ct				{border-bottom: 1px dotted #222;}
.cb				{margin-top: 20px; border-top: 1px dotted #222;}


/* site header
   ====================================================================================================================== */
#mast h1			{position: absolute; left: 0; right: 0; height: 60px; margin: 0; padding: 0;
				 width: 100%; /*< IE6, which doesn't fully understand 'left; right' */
				 font-size: 32px; line-height: 40px; background: #222;}
#mast h1 a			{display: block; padding: 10px 0; color: #f7f6f7;
				 /* we can't use left-padding as this element is centered with a % width and 
				    IE<8 don't support changing the box-model */
				 text-indent: 60px;}
#mast h1 a img			{position: absolute; margin: 4px 0 0 -45px; border: none;}

#mast nav			{padding-top: 80px;}

/* the breadcrumb for sub-forums */
#index				{margin: 0; padding: 0 0 20px 60px; text-transform: uppercase;
				 background: url("img/here.png") no-repeat 24px 0;}
#index li			{display: inline;}

/* search box: */
#search				{float: right; *float: none; /*< IE6 & 7 work without floating */
				 height: 20px; width: 210px; /*< IE6/7 get height wrong */
				 margin: 0; padding: 20px 10px 20px; overflow: hidden;
				 border: none; /* very bizarely, the positioning magically adds a border in Firefox! */
				 text-align: right; background: none;}
#query				{display: block; /*< removes magic-spacing / height on input box */
				 width: 180px; height: 20px; margin: 0; padding: 0 5px 0 25px; border: none;
				 -webkit-border-radius: 10px;
				    -moz-border-radius: 10px;
				         border-radius: 10px;
				 font-size: 12px !important;
				 line-height: 20px; /*< equalises vertical position of search box in IE8 */
				 background: white url("img/search.png") no-repeat 5px 50%;}
::-webkit-search-decoration,	/* reset Safari custom search-box design */
 ::-webkit-search-cancel-button	{display: none;}
input[type=search]		{-webkit-appearance: textfield;
				 -webkit-box-sizing: content-box;}
input[type=search]:focus	{outline: none;}

#go				{position: relative; margin-left: -20px; top: -20px;}

/* language selector: */
#nnf_lang			{float: right; padding-right: 20px; border: none; text-align: right;}
#nnf_lang img			{vertical-align: middle;}
#nnf_lang input			{vertical-align: bottom;}

/* the admin's custom header message, 'about.html' */
#nnf_about			{margin-bottom: 0; background: none;}

/* the access warning message that appears on locked forums / threads */
#info				{overflow: auto;}
#info a				{color: #666;}
/* 'Add' / 'Reply' and 'RSS' buttons */
#nnf_add, #nnf_reply, #nnf_rss	{float: right; padding-left: 25px;
				 text-align: right; text-transform: uppercase; color: #222 !important;}
#nnf_add, #nnf_reply		{margin-left: 20px;
				 background: url("img/add.png") no-repeat 0 50%;}
#nnf_rss			{background: url("img/rss.png") no-repeat 0 50%;}



/* index page
   ====================================================================================================================== */
section				{margin: 0 0 20px; color: #222;
				 background: #f7f6f7;}
section h1			{background: #222 none no-repeat 15px 15px;}

/* page list */
section nav			{position: relative; height: 40px; overflow: hidden; padding: 0 1px;
				 font-family: Calibri, "Liberation Sans", Tahoma, sans-serif; line-height: 40px;
				 text-align: right; text-transform: uppercase; color: #aaa;
				 background-color: #444;}

/* cover over the dotted line at the bottom */
#nnf_threads nav		{margin-top: -1px;}

/* move the page list into the title for browsers that support the adjacent selector (IE7+) */
/* (spaces are required between '+' here for WebKit!?) */
section>h1 + nav		{background: none; float: right; margin-top: -50px !important; padding-right: 10px;}

ol.nnf_pages			{display: block; float: right; margin: 0 0 0 10px; padding: 0;}
ol.nnf_pages li			{display: block; float: left; margin: 0; padding: 0; width: 40px; height: 39px;
				 text-align: center;}
ol.nnf_pages a			{display: block; width: 40px; height: 39px;
				 color: #aaa; text-decoration: none;}
ol.nnf_pages a:hover		{color: white; background-color: #888;}
ol.nnf_pages em			{color: white; font-style: normal;}

/* item list (folders / threads) */
ol.ui				{margin: 0; padding: 0; border: 1px solid #444; border-width: 0 1px;}
ol.ui li			{margin: 0; border-bottom: 1px dotted #444;
				 list-style-type: none; color: #888;
				 /* this trick ensures that one line of text is 19px+border (20px), but that each additonal
				    line of text is 20px so that the bottom border never shifts out of place
				    (round up occurs at 2 decimal digits for Firefox and Chrome, 3 for Opera) */
				 padding: 9.999px 20px 9px 60px; line-height: 20px;}

ol.ui li.sticky			{background: #eee;}

ol.ui li i			{float: left; width: 25px; margin: 0 10px 0 -50px;
				 font-family: Calibri, "Liberation Sans", Tahoma, sans-serif; text-align: right;}

ol.ui li b			{float: right; padding-left: 10px; text-align: right;}	/* author */
ol.ui li time			{float: right; width: 9.1em;				/* timestamp */
				 font-weight: normal; text-align: right; color: #888;}
ol.ui li a:hover time		{text-decoration: underline;}

/* ---------------------------------------------------------------------------------------------------------------------- */

/* titles */
#nnf_folders h1			{background-image: url("img/folders.png");}
#nnf_threads h1, #nnf_post h1	{background-image: url("img/threads.png");}

/* the last post name / date for sub-forums */
#nnf_folders ol.ui li		{position: relative; border-bottom: 1px solid #444;}
.nnf_subforum-post		{position: absolute; right: 20px;}

/* the lock/sticky icon positioning */
ol.ui li img			{position: absolute; margin-left: -20px; margin-top: 2px;}
#nnf_folders ol.ui li img	{margin-left: -38px;}

/* thread page
   ====================================================================================================================== */
article				{padding: 0 20px 19px; border: 1px solid #444;
				 /* surreal, surreal IE6 bug. *without* a bottom-border, the layout goes out of sync */
				 border-width: 0 1px 1px;}
article p			{padding: 20px 0 0 0;}

/* close the border within the 20px rhythm on the initial post */
#nnf_post article		{padding-bottom: 19px !important; border-bottom-width: 1px;}

#nnf_replies h1			{background-image: url("img/replies.png");}

article header			{height: 38px; line-height: 38px; margin: -1px -20px 0; padding: 1px 20px;
				 border-bottom: 1px dotted #444;
				 color: #888; background: #ccc;}

article header b		{margin-left: 10px;}
#nnf_post article header b	{/* the first post doesn’t have a number, only replies */
				 margin-left: 0;}
article header time,
 article header .ui		{float: right;}

/* the delete / append buttons */
article header .ui		{/* ie6 makes these invisible, has to have width toggled */
				 _width: 0; overflow: hidden; padding: 0 25px 0 10px;
				 text-indent: -6em; color: #ccc;}
article header .ui:hover	{_width: auto; text-indent: 0; text-decoration: none; color: #222;}
article header .ui,
 article header .ui:hover	{-webkit-transition: all .2s;
				    -moz-transition: all .2s;
				      -o-transition: all .2s;
				         transition: all .2s;}

.delete				{background: url("img/delete.png") no-repeat right center;}
.append				{background: url("img/append.png") no-repeat right center;}

article.op			{}
article.op header		{background: #888; color: #eee;}

article.deleted			{color: #aaa;}
article.deleted header		{background: #f7f6f7; color: #aaa;}

article h2			{margin: 20px 0 0; border-bottom: 1px dotted #222;
				 font-size: 16px; line-height: 19px; font-weight: normal; font-style: normal;}
article .hr			{height: 1px; margin: 19px 0 0; padding: 0; overflow: hidden;
				 border-bottom: 1px dotted #222; text-indent: -999em;}

p.appended			{color: #888; padding-top: 19px;
				 border-bottom: 1px dotted #222;
				 /* don’t include the 'user X added on date Y' when copy/pasting */
				 -webkit-user-select: none;
				    -moz-user-select: none;
				     -ms-user-select: none;
				         user-select: none;}


/* input forms
   ====================================================================================================================== */
#nnf_new-form h1,
 #nnf_reply-form h1,
 #append h1			{background-image: url("img/new.png");}

form				{position: relative; /*< for the benefit of IE6/7 whom do not have box-sizing */
				 margin: 0; padding: 0; border: 1px solid #444; border-width: 0 1px;}

input, textarea			{font: 16px/20px Corbel, "Liberation Sans", "Trebuchet MS", sans-serif;}

label				{display: block; height: 40px; padding: 0 20px; line-height: 40px; color: #222;
				 cursor: pointer;}

form p				{padding: 0; color: #888;}
.ok, .error, #markup		{padding: 20px 20px 0 !important;}
.error				{color: #d11;}


input[type=text],
 input[type=password], textarea	{-webkit-box-shadow: inset 0 5px 5px -6px black;
				    -moz-box-shadow: inset 0 5px 5px -6px black;
				         box-shadow: inset 0 5px 5px -6px black;}

#leftcol			{width: 65%;}
#rightcol			{position: absolute; width: 35%; right: 0;}

#nnf_name-field,
 #nnf_name-field-http,
 #nnf_pass-field		{display: block; width: 100%;}
#nnf_title-field,
 #nnf_name-field,
 #nnf_name-field-http,
 #nnf_pass-field		{height: 39px; line-height: 39px;
				 /* since IE 6/7 don't support box-sizing, we can't use padding in the text-box,
				    we'll just indent instead */
				 padding: 0; text-indent: 20px;
				 border: none; border-bottom: 1px dotted #444;}

/* the "title" field, only present on the new thread form, index page */
#ptitle				{display: table; width: 100%;}
#ptitle label			{display: block; float: left; width: 20%; height: 39px; padding: 0; text-indent: 20px;
				 line-height: 38.999px; /*< Chrome gets this a pixel out, use imprecision to fix */
				 border-bottom: 1px dotted #444;}
#nnf_title-field		{display: block; position: absolute; left: 20%; right: 1px; width: 80%;
				 -webkit-box-shadow: inset 5px 0 5px -6px black;
				    -moz-box-shadow: inset 5px 0 5px -6px black;
				         box-shadow: inset 5px 0 5px -6px black;}

/* the message box, present in new thread and reply forms */
#ptext label			{display: block; line-height: 40px;
				 border-right: 1px solid #f7f6f7; background: #f7f6f7;}

/* we have to use a wrapper because box-sizing is not consistently supported across browsers and missing in IE<8 */
#wtext				{display: block; padding: 0 40px 0 0;
				 position: relative; /*< force dotted line above rightcol in Firefox */
				 _position: static;  /*< that then breaks IE6 :P */}
#nnf_text-field			{display: block; width: 100%; padding: 20px; margin: 0 -41px 0 0;
				 border: none; border-right: 1px dotted #444;
				 /* fix width for browsers that allow resizable text-areas */
				 min-width: 100%; max-width: 100%; min-height: 300px; max-height: 700px;}

/* the e-mail field is an anti-spam feature and not used by the user */
#nnf_email			{display: none;}

/* submit button at bottom of form */
#psubmit			{clear: both; height: 40px;
				 margin: 0 !important; padding: 0; text-align: right;
				 background: #444;}
#psubmit label			{display: inline-block; padding: 0 0 0 20px;
				 color: #f7f6f7; text-transform: uppercase;}
#submit				{vertical-align: middle;}

/* delete, un/lock form
   ---------------------------------------------------------------------------------------------------------------------- */
#delete h1			{background-image: url("img/deletetitle.png");}
#delete #psubmit		{margin-top: 20px !important;}

/* put the name / password fields side by side since there's no message box taking up the space */
#delete #leftcol		{width: 50%;}
#delete #rightcol		{width: 50%; top: 0; border-left: 1px dotted #222;}


/* site footer
   ====================================================================================================================== */
#nnf_admin			{float: right;}
a#nnf_lock, a#nnf_unlock	{margin-left: 20px; padding-left: 25px; text-transform: uppercase;}
/* lock / unlock icons courtesy of <picol.org>, under a Creative Commons Share-Alike 3.0 licence
   <creativecommons.org/licenses/by-sa/3.0/> */
a#nnf_lock			{background: url("img/security_closed_16.png") no-repeat 0 50%;}
a#nnf_unlock			{background: url("img/security_open_16.png") no-repeat 0 50%;}

footer				{position: absolute; height: 60px; margin: 0; padding: 20px 0 0; left: 0; right: 0;
				 width: 100%; /*< IE6, which doesn't fully understand 'left; right' */
				 background: #222;}

footer p			{margin: 0 auto 0 10%; font-size: .9em; color: #f7f6f7;}
footer p a			{color: #888;}

p#signin			{margin: -60px 10% 0 auto; text-align: right;}
p#signin a			{text-transform: uppercase;}


/* ======================================================================================================================
   mobile / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
   ====================================================================================================================== */
@media screen and (max-width: 800px) {

html				{font-size: 14px; background: #ddd; /* mobile devices don't like fixed backgrounds */}

/* prevent iPhone from zooming in when rotating */
html, body			{width: 100%; -webkit-text-size-adjust: none;}

/* page width */
#mast nav, section, #mods	{width: 95%;}

/* header
   ---------------------------------------------------------------------------------------------------------------------- */
/* reduce the title size */
h1				{font-size: 20px !important;}
#mast				{padding: 0;}
#mast h1			{padding: 5px 0 0; line-height: 20px; min-height: 40px;}
#mast h1 a			{/* fit the logo in tighter */
				 margin: 0; padding: 10px 0 0 55px;}
#mast h1 a img			{margin-top: -6px;}

/* re-position the search field below the title */
#search				{width: 100%; height: 35px; margin: 0; padding: 0 10px 10px 50px;
				 -webkit-box-sizing: border-box;
				    -moz-box-sizing: border-box;
				         box-sizing: border-box;
				 border: none; text-align: right;
				 background: #222;}
#query				{width: 100%; padding: 4px 0; text-indent: 15px; font-size: 18px;
				 -webkit-box-sizing: padding-box;
				    -mox-box-sizing: padding-box;
				         box-sizing: padding-box;
				 -webkit-border-radius: 14px;
				    -moz-border-radius: 14px;
				         border-radius: 14px;}
#go				{left: -5px; top: -23px;}

/* fit the rss / add buttons into one line */
#mast nav			{height: 40px; line-height: 40px; margin: 40px 0 -20px;
				 overflow: hidden; /*< strange behaviour in webkit */}
#mast nav p:last-child		{/* hide location marker */
				 display: none;}
#nnf_add, #nnf_reply		{margin-right: 0;}
#index				{display: none;}

/* index page
   ---------------------------------------------------------------------------------------------------------------------- */
/* the meta items can’t fit in one line. add them below the titles */
ol.ui li			{position: relative; padding-bottom: 30px; padding-left: 40px !important;}
ol.ui li b, ol.ui li time	{float: none; position: absolute; bottom: 5px;}
ol.ui li b			{right: 10px;}
ol.ui li time			{left: 40px !important; text-align: left;}

ol.ui li i			{/* position the post-count closer */
				 width: 20px !important; margin: 0 10px 0 -30px !important;
				 font-size: 14px;}
#nnf_folders ol.ui li img	{margin-left: -30px;}
#nnf_threads ol.ui li img	{/* put the sticky icon underneath the post count instead of next to it */
				 position: absolute; top: 35px;}


footer p			{margin-left: 5% !important; padding-left: 0 !important;}

/* thread page */
article header time		{/* don’t show the post time in portrait */
				 display: none;}

/* input forms
   ---------------------------------------------------------------------------------------------------------------------- */
input[type="text"], textarea,	/* remove the field styling in iOS */
 input[type="password"]		{-webkit-appearance: none; -moz-appearance: none;
				 -webkit-border-radius: 0;}

/* set text-indent of the placeholder text, except for the textarea, which has padding
   (interesting note: iOS 4 can't cope with this selector being split, iOS5 can) */
:not(#nnf_text-field)::-webkit-input-placeholder
				{text-indent: 20px;}

/* single column */
#rightcol, #leftcol		{position: static; width: 100%;}

#ptitle, #nnf_name, #nnf_name-http, #nnf_pass,
 #delete > form > p		{display: table; width: 100%;}

#ptitle label, #nnf_name label, #nnf_pass label,
 #delete > form > p > label	{float: none; display: table-cell; width: 75px; height: 39px; padding: 0 0 0 20px;
				 border-bottom: 1px dotted #444; line-height: 37px; text-indent: 0; vertical-align: middle}
#nnf_title-field, #nnf_name-field,
 #nnf_pass-field		{position: static; display: table-cell; width: 100%; height: 43px;
				 -webkit-box-shadow: inset 5px 0 5px -6px black;
				    -moz-box-shadow: inset 5px 0 5px -6px black;
				         box-shadow: inset 5px 0 5px -6px black;}
#nnf_text-field			{border: none;}

#delete #leftcol,		/* side-by-side of delete form doesn’t apply to iOS */
 #delete #rightcol		{width: 100%;}

/* footer */
#mods p				{padding-left: 0; padding-right: 0;
				 font-size: 13px;}

}

@media screen and (max-width: 800px) and (orientation: landscape) {

/* when landscape, shrink the size of the search field, and place the RSS / New Thread links in the header */
#search				{width: 50%; float: left;}

#mast nav			{width: 100%; margin-top: -5px; margin-bottom: 0; background: #222;}
#mast nav a			{color: white;}
#nnf_add, #nnf_reply		{padding-right: 5%;
				 background-image: url("img/add_white.png");}
#nnf_rss			{background-image: url("img/rss_white.png");}

/* show the post time when in portrait */
article header time		{display: inline;}

}

@media screen and (max-width: 800px) and (orientation: portrait) {

/* when in portrait, there’s not enough width to fit the powered-by message as well as the sign-in link / status;
   this makes the footer taller and stacks the two */
footer				{padding-top: 60px;}
footer p			{padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;}
p#signin			{margin-top: -120px;}

}

/* ======================================================================================================================
   opera speed dial / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
  ====================================================================================================================== */
@media screen and (view-mode: minimized) {

#mast h1			{padding-bottom: 5px}

/* hide the search box, breadcrumb and rss / add links */
#mast form, #mast nav,
 /* index page stuff */
 #nnf_about, #nnf_folders, #nnf_threads>h1, .nnf_thread.sticky, #nnf_threads>nav, #nnf_new-form,
 /* thread pages stuff */
 #nnf_post, #nnf_replies>h1, .nnf_reply, #nnf_replies>nav, #nnf_reply-form,
 /* reply stuff */
 .nnf_reply-append, .nnf_reply-delete,
 /* footer stuff */
 #nnf_admin, #mods, footer	{display: none;}

/* for index page, all threads are shown except stickies */
#nnf_threads			{margin-top: 10px; border-top: 1px solid #444;}
.nnf_thread			{display: block; border-bottom-style: solid !important;}

/* for thread pages, show only the last reply */
#nnf_replies			{margin-top: 10px;}
.nnf_reply			{padding: 0 10px 9px;}
.nnf_reply>header		{height: 29px; overflow: hidden; margin: -1px -10px 0; padding: 0 10px;
				 border-top: 1px solid #444; line-height: 30px;}
.nnf_reply-text			{margin-top: -10px;}
article.nnf_reply:last-of-type	{display: block;}

}

/* ======================================================================================================================
   printing / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
   ====================================================================================================================== */
@media print {

/* fix page width */
section				{width: 100% !important;}

/* things to hide from printer: */
#mast nav, #search,		/* - nav */
 #nnf_new-form, #nnf_reply-form,/* - input forms */
 #delete,			
 a.ui,				/* - delete / append buttons */
 #mods, footer			{display: none;}

/* remove background colours, set text-colour */
html, h1, h1 a, section,
 nav, li.sticky, header,
 ol.nnf_pages em		{color: black !important; background: none !important;}

/* remove padding added to hold background images */
h1, h1 a			{padding-left: 0 !important;}
h1 a				{margin-left: 0 !important;}

/* remove left and right borders */
ol.ui, article			{border: none;}

/* remove left/right padding from page egde */
article, ol.ui li		{padding-left: 0; padding-right: 0;}
section>h1 + nav		{padding-right: 0;}

/* page links */
ol.nnf_pages li			{text-align: right;}
ol.nnf_pages a			{font-weight: normal; font-style: italic;}
ol.nnf_pages em			{font-weight: bold; text-decoration: underline;}

}


/* debugging */
body>#grid			{position: absolute; width: 100%; height: 6000px; top: 0; left: 0; opacity: 0.25;
				 background: transparent url("img/grid.png") top left;
				 pointer-events: none;
				 display: block;}