/* NoNonsense Forum v26 © Copyright (CC-BY) Kroc Camen 2010-2015 licenced under Creative Commons Attribution 3.0 you may do whatever you want to this code as long as you give credit to Kroc Camen, */ /* ====================================================================================================================== */ /* original Grayscale theme by Jon Gjengset , dpfpic 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 for documentation) */ /* enable 1:1 scaling for snap-view in Windows 8. the media queries will handle the rest */ @-ms-viewport {width: device-width;} header, nav, section, /* this doesn’t get set on browsers without an HTML5 parser (e.g. Firefox 3.6) */ article, footer {display: block;} html, body {width: 100%; overflow-x: hidden; margin: 0; padding: 0; border: 0; color: #303030;} html {font: 16px/20px Corbel, "URW Gothic L", "Liberation Sans", "Trebuchet MS", sans-serif; background: #FFFFFF url("../img/bg.png") fixed repeat-x top 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(#FFFFFF)); /* Chrome10+ Saf5+ */ background-image: -webkit-linear-gradient(white, #FFFFFF); /* FF3.6+ */ background-image: -moz-linear-gradient(white, #FFFFFF); /* IE10 */ background-image: -ms-linear-gradient(white, #FFFFFF); /* Opera 11.10+ */ background-image: -o-linear-gradient(white, #FFFFFF); /* future! */ background-image: linear-gradient(white, #FFFFFF); /* fix iPad stretching the gradient the height of the whole page, rather than the screen */ background-size: 1024px 768px; /* 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: 100%; max-width: 1280px; margin: 0 auto;} h1 {margin-bottom: 0px;padding: 20px 0 20px 60px; font-weight: bold; font-size: 22px; line-height: 20px; color: #F7F6F7; background: #830702;} p {margin: 0; /* 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: #830702; text-decoration: none; font-weight: bold;} a:hover {color: #2F2F2F; text-decoration: underline;} b.nnf_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: 0 1em; padding: 0 20px 0 19px; border-left: 1px dotted #830702; font-style: italic;} .blockquote p:first-child {padding-top: 0;} .blockquote br {display: none;} /* 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;} .codebox {background: #272822; color: #fff; margin: 0 1em; padding: 10px; font-family: consolas, monospace, "courier new"; font-size: 0.8em; overflow-y: hidden; overflow: auto; word-break: break-all; word-wrap: break-word;} .codebox br {display: none;} /* code delimiters., top and bottom */ .ct, .cb {display: block; line-height: 19px;} .ct {display:none;} .cb {display:none;} /* site header ====================================================================================================================== */ #mast {visibility:visible;} #mast h1 {position: absolute; left: 0; right: 0; height: 220px; margin: 0; padding: 0; _width: 125%; /*< IE6 has to override the 80% with a reverse %'age gain */ font-size: 32px; line-height: 150px; background: #830702;} #mast h1 a {display: block; overflow: hidden; padding: 10px 0; color: #FFFFFF;} #mast h1 a img {display: block; float: left; margin: 4px 13px 0 15px; border: none;} #mast .nnf_forum-name {/* truncate the forum title if it overflows (not working in IE6) */ display: block; height: 100px; overflow: hidden; margin-left: 240px; white-space: nowrap; text-overflow: ellipsis;} #mast nav {padding-top: 0px;} /* search box: */ #search {float: right; width: 210px; overflow: hidden; margin: 0; padding: 20px 10px 0; *position: absolute; *right: 10%; /* IE6/7 have float issues with the language selector */ 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%; background-size: 13px 17px;} ::-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;} /* the breadcrumb for sub-forums */ #index {margin: 0 0 0; padding: 0 0 10px 0; text-transform: uppercase;} #index li {display: inline; padding-right: 0.4em;} /* language selector: */ #nnf_lang {display:none;z-index: -999;float: right; height: 20px; margin-bottom: 20px; padding-right: 10px; border: none;} #nnf_lang img {display:none;vertical-align: middle;} #nnf_lang input {display:none;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 a {color: #830702;} /* 'Add' / 'Reply' and 'RSS' buttons */ #nnf_add, #nnf_reply, #nnf_rss {float: right; margin-left: 20px; padding-left: 25px; text-align: right; text-transform: uppercase; color: #830702 !important;} #nnf_index {float: left; padding-left: 25px; text-align: right; text-transform: uppercase; color: #830702 !important;} #nnf_back {float: left; padding-left: 2px; padding-right: 25px; text-align: right; text-transform: uppercase; color: #830702 !important;} #nnf_add, #nnf_reply {background: url("../img/add.png") no-repeat 0 50%; background-size: 16px 16px;} #nnf_rss {background: url("../img/rss.png") no-repeat 0 50%; background-size: 16px 16px;} #nnf_index {background: url("../img/here.png") no-repeat 0 50%; background-size: 16px 16px;} /* what follows is a phenomenally complex system of floats that just somehow allows for an elegant collapsing of elements under certain conditions, primarily so that if there is no language selector present, no 'about.html' and no sub-forums then the RSS/ADD links will fit themselves into the blank space where the language selector would be */ #index, #index li {/* allow either the language selector or the RSS/ADD links to fit to the right of the breadcrumb. each breadcrumb item is allowed to wrap, so the whole block doesn’t clear */ float: left;} #nnf_about {/* if the admin's custom header is present the RSS/ADD links won’t be able to fit into the top if the language selector is missing */ clear: left;} #info {/* if the language selector and the RSS/ADD links are present, the won’t collide */ clear: right; padding-top: 30px; /* this solves a missing bottom-padding when the language selector and RSS/ADD links are above each other, but where `overflow: auto` causes the access warning message to not clear when it's visible. IE6 does not understand `min-height` */ _height: 20px; min-height: 20px;} #nnf_forum-lock-threads, /* prevent the access warning message from trying to squeeze in */ #nnf_forum-lock-posts {display: block; clear: left;} /* index page ====================================================================================================================== */ section {clear: both; margin: 0 0 5px; color: #303030; background: #F7F6F7;} section h1 {background: #830702 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: #9B9B9B;} /* 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; font-style: normal; background-color: #9B9B9B;} ol.nnf_pages em {display: block; height: 39px; font-style: normal; color: white; background: #9B9B9B;} /* item list (folders / threads) */ ol.ui {margin: 0; padding: 0; border: 1px solid #9B9B9B; border-width: 0 1px;} ol.ui li {margin: 0; border-bottom: 1px dotted #9B9B9B; list-style-type: none; color: #303030; /* 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.nnf_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: #303030;} ol.ui li a:hover time {text-decoration: underline;} /* ---------------------------------------------------------------------------------------------------------------------- */ /* titles */ #nnf_folders h1 {background-image: url("../img/folders.png"); background-size: 32px 32px;} #nnf_threads h1, #nnf_post h1 {background-image: url("../img/threads.png"); background-size: 32px 32px;} /* the last post name / date for sub-forums */ #nnf_folders ol.ui li {position: relative; border-bottom: 1px solid #9B9B9B;} .nnf_subforum-post {*position: absolute; *right: 20px; /* IE<8 fix */} /* 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 #9B9B9B; /* surreal, surreal IE6 bug. *without* a bottom-border, the layout goes out of sync */ border-width: 0 1px 1px;} article p {padding: 7px 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"); background-size: 32px 32px;} article header {line-height: 20px; margin: -1px -20px 15px; padding: 10px 20px 9px; color: #ffffff; background: #BBBBBB;} 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: #bbb;} article header .ui:hover {_width: auto; text-indent: 0; text-decoration: none; color: #830702;} article header .ui, article header .ui:hover {-webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s;} a.delete {background: url("../img/delete.png") no-repeat right center; background-size: 16px 16px;color:#4f4e4c;} a.append {background: url("../img/append.png") no-repeat right center; background-size: 16px 16px;color:#4f4e4c;} a.delete:hover {background: url("../img/delete.png") no-repeat right center; background-size: 16px 16px;color:#ffffff;} a.append:hover {background: url("../img/append.png") no-repeat right center; background-size: 16px 16px;color:#ffffff;} article.nnf_op {} article.nnf_op header {background: #9B9B9B; color: #eee;} article.nnf_deleted {color: #aaa;} article.nnf_deleted header, article.nnf_error header {color: #9B9B9B; background: #BBBBBB;} article.nnf_error .nnf_reply-text, article.nnf_error .nnf_reply-moddate, article.nnf_error #nnf_post-text {color: #d11; font-style: italic; margin-top: 10px;} article h2 {margin: 20px 0 0; border-bottom: 1px dotted #830702; text-transform: uppercase; font-size: 19px; line-height: 19px; font-weight: bold; font-style: normal;} article .hr {height: 1px; margin: 19px 0 0; padding: 0; overflow: hidden; border-bottom: 1px dotted #830702; text-indent: -999em;} #nnf_post-field { display: block; width: 100%; padding: 20px; margin: 0 -41px 0 0; border: none; border-right: 1px dotted #9B9B9B; min-width: 100%; max-width: 100%; min-height: 400px; max-height: 700px; } .nnf_modified {font-size: 0.857em; font-style: italic; color: #2F2F2F;} /* markup / privacy page ====================================================================================================================== */ #markup h1, /* title icon */ #privacy h1 {background-image: url("../img/help.png"); background-size: 32px 32px;} #markup header ol, /* table of contents */ #privacy header ol {margin: 0; padding: 0;} #markup header li, #privacy header li {display: inline; padding: 0 20px 0 0; /* do not line-break in the middle of a link on small screens, like mobiles */ white-space: nowrap; } /* input forms ====================================================================================================================== */ /* truncate placeholder text with ".." in input fields if too short, e.g. mobile taken shamelessly from: */ input[placeholder] {text-overflow: ellipsis;} ::-moz-placeholder {text-overflow: ellipsis;} /* firefox 19+ */ input:-moz-placeholder {text-overflow: ellipsis;} #nnf_new-form h1, /* title icon */ #nnf_reply-form h1, #append h1 {background-image: url("../img/new.png"); background-size: 32px 32px;} form {position: relative; /*< for the benefit of IE6/7 whom do not have box-sizing */ margin: 0; padding: 0; border: 1px solid #9B9B9B; 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: #830702; cursor: pointer;} form p {padding: 0; color: #303030;} .ok, .error, #protip {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; padding-top: 64px;} #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 #9B9B9B; border-right: 1px dotted #9B9B9B; border-left: 1px dotted #9B9B9B;} #nnf_captcha-field {height: 39px; line-height: 39px; width: 65%; /* 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 #9B9B9B; border-left: 1px dotted #9B9B9B; border-right: 1px dotted #9B9B9B;} .nnf_captcha-addon { background: #F7F6F7; height: 39px; line-height: 39px; vertical-align: middle; padding: 9px 4px 9px 4px;} /* 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: 38px; padding: 0; text-indent: 20px; line-height: 38.999px; /*< Chrome gets this a pixel out, use imprecision to fix */ border-bottom: 1px dotted #9B9B9B;} #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 0 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 #9B9B9B; /* fix width for browsers that allow resizable text-areas */ min-width: 100%; max-width: 100%; min-height: 400px; 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: #9B9B9B;} #psubmit label {display: inline-block; padding: 0 0 0 20px; color: #F7F6F7; text-transform: uppercase;} #submit {vertical-align: middle;} /* delete form ---------------------------------------------------------------------------------------------------------------------- */ #delete h1 {background-image: url("../img/deletetitle.png"); background-size: 32px 32px;} #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 #830702; padding-top: 0px;} /* site footer ====================================================================================================================== */ form#nnf_admin {float: right; border: none; /* this padding is so that on a very narrow screen, the mods list can flow underneath the admin buttons, but not be too close to them */ padding-bottom: 20px;} form#nnf_admin input {margin-left: 20px; padding-left: 20px; border: none; text-transform: uppercase; cursor: pointer; /* TODO: webkit-appearance: none */} /* lock / unlock icons courtesy of , under a Creative Commons Share-Alike 3.0 licence */ /* to-do: 1x & 2x */ #nnf_stick {background: url("../img/sticky.png") no-repeat 0 50%; background-size: 16px 16px;} #nnf_unstick {background: url("../img/sticky.png") no-repeat 0 50%; background-size: 16px 16px;} #nnf_lock {background: url("../img/security_closed_16.png") no-repeat 0 50%; background-size: 16px 16px;} #nnf_unlock {background: url("../img/security_open_16.png") no-repeat 0 50%; background-size: 16px 16px;} footer {height: 20px; margin: 0 0 0 0; left: 0; right: 0; text-align: center; _width: 125%; /*< IE6 has to override the 80% with a reverse %'age gain */ background: transparent;} footer p {margin: 0 auto 0 0; font-size: .9em; color: #555;} footer p a {color: #9B9B9B;} #signin {/* override default on form, this interferes with z-ordering in the footer */ position: static; text-align: center; border: none;} #signin input {margin: 0; padding-top: 5px; border: none; color: #555; text-transform: uppercase; background: none; cursor: pointer;} #signout {/* override default on form, this interferes with z-ordering in the footer */ position: static; text-align: center; border: none;} #signout input {margin: 0; padding-top: 5px; border: none; color: #555; text-transform: uppercase; background: none; cursor: pointer;} #login {text-align: center;} #login input[type="submit"] {background-color: #830702; color: #fff; text-indent: 0px; text-transform : none;} #login input {vertical-align:middle; height: 30px; text-indent: 10px; border: none; border-bottom: 1px dotted #9B9B9B; padding-top: 0px; border-left: 1px dotted #9B9B9B; border-right: 1px dotted #9B9B9B; margin: 5px 5px 5px 5px;} /* ====================================================================================================================== mobile / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ====================================================================================================================== */ @media screen and (max-width: 800px) { html {font-size: 14px; background: #FFFFFF; /* 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 */ body, #mast h1 a {width: 95%;} #signin {/* override default on form, this interferes with z-ordering in the footer */ position: static; text-align: center; border: none;} #signout {/* override default on form, this interferes with z-ordering in the footer */ position: static; text-align: center; border: none;} /* header ---------------------------------------------------------------------------------------------------------------------- */ /* reduce the title size */ h1 {font-size: 20px !important;} #mast h1 {height: 80px; padding: 0; line-height: 20px; min-height: 40px;} #mast h1 a {/* fit the logo in tighter */ width: auto; margin: 0; padding: 10px 0 0 55px; text-indent: 0;} #mast h1 a img {margin-left: -45px; margin-top: -6px;} #mast .nnf_forum-name {margin-right: 0; /*min-height: 40px;*/} /* re-position the search field below the title */ #search {float: left; height: 35px; margin: 45px 0 0 0; padding: 0 20px 10px 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; text-align: right; background: #830702;} #query {width: 100%; padding: 4px 0; text-indent: 15px; font-size: 18px; -webkit-box-sizing: padding-box; -moz-box-sizing: padding-box; box-sizing: padding-box; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px;} #go {left: -5px; top: -23px;} #nnf_lang {float: right; margin-top: -55px; padding-right: 0; text-align: right;} #nnf_lang>img, #nnf_lang>input {display: none;} #mast nav {padding-top: 0px;} #mast {visibility:visible;} #mast h1 {position: absolute; left: 0; right: 0; height: 220px; margin: 0; padding: 0; _width: 125%; /*< IE6 has to override the 80% with a reverse %'age gain */ font-size: 32px; line-height: 150px; background: #2987DB;} #mast h1 a {display: block; overflow: hidden; padding: 10px 0; color: #FFFFFF;} #mast .nnf_forum-name {/* truncate the forum title if it overflows (not working in IE6) */ display: block; height: 100px; overflow: hidden; margin-left: 240px; white-space: nowrap;} #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: 20px !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 -10px !important; font-size: 14px;} #nnf_folders ol.ui li img {margin-left: -18px;} #nnf_threads ol.ui li img {/* put the sticky icon underneath the post count instead of next to it */ position: absolute; top: 35px;} /* 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%;} #rightcol {padding-top: 0px;} #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: 90px; height: 39px; padding: 0 0 0 20px; border-bottom: 1px dotted #9B9B9B; 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%; border-left: 0px;} #delete #infodel {width: 100%;border-left: 0px;} /* footer */ #mods p {padding-left: 0; padding-right: 0; font-size: 13px;} } @media screen and (max-width: 800px) and (orientation: landscape) { /* show the post time when in landscape */ article header time {display: inline;} } @media screen and (max-width: 800px) and (orientation: portrait) { /* ensure the language selector doesn’t overflow into the search box */ #lang {max-width: 100px; max-height: 20px; white-space: nowrap;} /* 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 {background-color: transparent;padding-top: 5px;} footer p {margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: center !important;} #signin {margin: 5px 0 0 0; text-align: center;} #nnf_mods {/* on a narrow screen, place the mods list underneath the admin buttons) */ clear: right;} } @media screen and (min-width: 480px) { /* move the page list into the title for browsers that support the adjacent selector (IE7+); this is not done for thin screens (portrait) because there's not enough width (spaces are required between '+' here for WebKit!?) */ section>h1 + nav {background: none; float: right; margin-top: -50px !important; padding-right: 10px;} } /* ====================================================================================================================== HiDPI / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ====================================================================================================================== */ @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #query {background-image: url("../img/search_2x.png");} #nnf_add, #nnf_reply {background-image: url("../img/add_2x.png");} #nnf_rss {background-image: url("../img/rss_2x.png");} #nnf_folders h1 {background-image: url("../img/folders_2x.png");} #nnf_threads h1, #nnf_post h1 {background-image: url("../img/threads_2x.png");} #nnf_replies h1 {background-image: url("../img/replies_2x.png");} a.delete {background-image: url("../img/delete_2x.png");color:#4F4E69;} a.append {background-image: url("../img/append_2x.png");color:#4F4E69;} #markup h1, #privacy h1 {background-image: url("../img/help_2x.png");} #nnf_new-form h1, #nnf_reply-form h1, #append h1{background-image: url("../img/new_2x.png");} #delete h1 {background-image: url("../img/deletetitle_2x.png");} a#nnf_stick {background-image: url("../img/sticky_x2.png");} a#nnf_unstick {background-image: url("../img/sticky_x2.png");} a#nnf_lock {background-image: url("../img/security_closed_32.png");} a#nnf_unlock {background-image: url("../img/security_open_32.png");} } /* ====================================================================================================================== opera speed dial / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ====================================================================================================================== */ @media screen and (view-mode: minimized) { #mast h1 {height: 30px;} /* 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.nnf_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 #9B9B9B;} .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 #9B9B9B; line-height: 30px;} .nnf_reply-text {margin-top: -10px;} article.nnf_reply:last-of-type {display: block;} } /* ====================================================================================================================== printing / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ====================================================================================================================== */ @media print { /* fix page width */ body, #mast h1 a {width: 100% !important;} #mast h1 {position: static;} #mast h1 a {text-indent: 0;} #mast h1 a img {display: none;} /* things to hide from printer: */ #mast nav, #search, #info, /* - nav */ #nnf_folders, /* - subfolders list */ #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.nnf_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;} span.nnf_folder-description {font-size: 14px;font-weight: normal; font-style: italic;} /* login popup */ .form_auth { position: relative; margin: 0; padding: 0; border: 0px solid transparent; border-width: 0 1px; } /* Barre BBCode */ #format-buttons img { vertical-align: middle; } #format-buttons { margin-bottom: 1px; padding-left: 5px; } .blockquote.uncited { padding-top: 10px; padding-bottom: 10px; } .blockquote { background-color: #EBEADD; background-image: url("../img/quote.gif"); background-repeat: no-repeat; border: 1px solid #dbdbdb; border-color: #DBDBCE; font-size: 0.9em; } #smilies { text-align: left; padding: 10px 0 5px 10px; } #smilies .smiley { margin: 1px; cursor: pointer; vertical-align: middle; } input.button { background-color: #FAFAFA; background-image: url(../img/bg_button.gif); vertical-align: middle; border: 1px solid #2F2F2F; width: auto !important; padding-top: 1px; padding-bottom: 1px; font-size: 0.8em; cursor: pointer; color: #000; } input.button:hover { border: 1px solid #BCBCBC; background-position: 0 100%; color: green; }