/* mobile.css -- mobile adaptation for nightphoto.org (Redmine #3798).
   Port of the etoretro.ru version: NightPhoto runs the same 4images
   fork and the same page skeleton (table.full_size, td.content,
   td.left_column, td.registration, #form3, ul#nav), only the header
   cell is td.header (etoretro: td.header22) and the theme is dark.
   Everything is scoped inside a single media query, so the desktop
   rendering (>= 800px) stays untouched. ASCII-only comments. */

@media (max-width: 799px) {

/* ---------- base ---------- */
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	overflow-x: hidden;
}
img {
	max-width: 100%;
	height: auto;
}
table, td, th, div, form, input, select, textarea {
	box-sizing: border-box;
}
table {
	max-width: 100%;
}
/* iframes / embeds (maps, widgets) must not push the viewport */
iframe, object, embed {
	max-width: 100% !important;
}

/* ---------- linearize the outer layout tables ---------- */
table.full_size,
table.full_size > tbody,
table.full_size > tbody > tr,
table.full_size > tbody > tr > td,
table.full_size > tr,
table.full_size > tr > td {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* ---------- header ---------- */
td.header {
	height: auto !important;
	padding: 6px 0 10px 0;
	background-size: auto 100%;
}
/* the 3-cell header table: logo / search / social -- stack it */
td.header > table,
td.header > table > tbody,
td.header > table > tbody > tr,
td.header > table > tbody > tr > td {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100% !important;
	text-align: center !important;
}
td.header .logo img {
	padding-left: 0;
	max-width: 90%;
}
/* "Starye fotografii gorodov" slogan: desktop offsets it 35px to sit
   under the logo; centered header needs no offset */
td.header .slogan {
	padding-left: 0 !important;
}
td.header h1, td.header H1 {
	padding-left: 0 !important;
	text-align: center;
	font-size: 13px !important;
}
/* search field: kill the desktop 60px offset, go full width */
td.header .search_field,
#form3 input#searchkw {
	margin-left: 0 !important;
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 16px; /* >=16px stops iOS zoom-on-focus */
	padding: 4px;
}
#form3 form {
	display: block;
	padding: 6px 10px 0 10px;
}
#form3 input.button {
	margin-left: 0 !important;
	margin-top: 6px;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
}
/* social block + feedburner form */
td.header .im_footer33 {
	padding-top: 6px;
}
td.header form[action*="feedburner"] {
	margin: 8px 6px 0 6px !important;
	box-sizing: border-box;
}
td.header form[action*="feedburner"] input.searchinput2 {
	width: 60% !important;
	max-width: 200px;
	box-sizing: border-box;
	margin-bottom: 4px;
}
td.header form[action*="feedburner"] input.button {
	margin-left: 0;
}

/* ---------- top menu ---------- */
td.top_menu {
	height: auto !important;
	padding: 0 !important;
}
#nav {
	overflow: visible;
	width: auto;
	text-align: center;
	padding: 4px 2px;
	margin: 0;
}
#nav li {
	float: none !important;
	display: inline-block;
	margin-left: 0 !important;
	vertical-align: middle;
}
#nav li a {
	font-size: 16px !important;
	padding: 5px 7px !important;
	display: inline-block;
	line-height: 1.2;
}

/* ---------- content: move the left column below the main one ---------- */
td.content {
	padding: 6px 0 0 0;
}
/* At phone widths no multi-column table layout inside the content area makes
   sense: table min-content sizing keeps forcing 370-900px. De-table everything
   there; the specific rules below (flex row order etc.) are more specific
   and still win. */
td.content table,
td.content tbody,
td.content tr,
td.content td,
td.content th {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	/* on a <td> height="N"/style="height:N" is a MINIMUM, on a block it is
	   fixed -- without this the filter box clips into the photo feed */
	height: auto !important;
}
td.content > table > tbody > tr {
	display: flex;
	flex-direction: column;
}
td.content > table > tbody > tr > td {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	order: 1;
}
td.content > table > tbody > tr > td.left_column {
	order: 2;
	width: auto !important;
	padding: 10px 8px;
}
/* both columns' top-level inner table (left column blocks / main content rows):
   fully de-tabled, otherwise table min-content sizing keeps them ~380px wide */
td.content > table > tbody > tr > td > table,
td.content > table > tbody > tr > td > table > tbody,
td.content > table > tbody > tr > td > table > tbody > tr,
td.content > table > tbody > tr > td > table > tbody > tr > td {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
}

/* the left column's own inner table */
td.left_column > table,
td.left_column > table > tbody,
td.left_column > table > tbody > tr,
td.left_column > table > tbody > tr > td {
	display: block;
	width: auto !important;
	max-width: 100%;
}

/* ---------- main content area: 3-column "about / random / upload" row ---------- */
td.about, td.about2, td.td_image, td.td_image2 {
	display: block;
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
td.about2 {
	padding-left: 5px !important;
}

/* generic: unwrap multi-column text tables inside the content area */
td.breadcrumbssu table,
td.breadcrumbssu tbody,
td.breadcrumbssu tr,
td.breadcrumbssu td {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
}
/* no <select> may be wider than the screen (city jumpbox, filters) */
select {
	max-width: 100% !important;
}
td.breadcrumbssu {
	padding: 5px 8px;
}

/* ---------- filter block (inline width:900px) ---------- */
#filterBlock {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
#filterBlock select,
#filterBlock input[type="text"] {
	max-width: 100%;
	box-sizing: border-box;
}
#slider-range {
	margin-left: 8px !important;
	margin-right: 8px !important;
	margin-bottom: 15px !important;
}
/* the year-scale tick labels overlap badly at this width -- hide them,
   the "selected range" text field below already shows the values */
#slider-range .ui-slider-scale,
#slider-range .ui-slider-label,
#slider-range .ui-slider-tic {
	display: none !important;
}
.form3, .form4 {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------- thumbnail grids (generated by spic.php) ---------- */
td.td_image3,
#photosInCategoryBlock {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
td.td_image3 > table,
td.td_image3 > table > tbody,
td.td_image3 > table > tbody > tr,
td.td_image3 > table > tbody > tr > td,
#photosInCategoryBlock > table,
#photosInCategoryBlock > table > tbody,
#photosInCategoryBlock > table > tbody > tr,
#photosInCategoryBlock > table > tbody > tr > td {
	display: block;
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
/* very long titles / descriptions must wrap, not stretch the page */
.im_footer2, .im_footer3, .im_footer4,
.im_header55l, .im_header55, .descr-holder {
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}
.im_header55l a, .im_header55l, .im_header55 {
	font-size: 18px !important;
}

/* ---------- misc content blocks ---------- */
.head1 > table,
.head1 > table > tbody,
.head1 > table > tbody > tr,
.head1 > table > tbody > tr > td {
	display: block;
	width: auto !important;
	max-width: 100%;
}
.breadcrumbs, .breadcrumbsp, .breadcrumbssu {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.center_big2, .center_big {
	width: auto !important;
	max-width: 100%;
}
/* the city dropdown (catsel) and its submit button */
.catsel, .catsel select, #goto-cat, #goto-cat select {
	max-width: 100% !important;
	box-sizing: border-box;
}
/* pre / code style overflow guards */
pre {
	max-width: 100%;
	overflow-x: auto;
}

/* ---------- minimal guards for other pages (full work = stage 2) ---------- */
/* details.html: <div class="discr" style="width:900px"> */
.discr {
	width: auto !important;
	max-width: 100%;
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* ---------- footer ---------- */
.dnishe, .dnishe2 {
	padding: 5px;
	word-wrap: break-word;
}

/* ================================================================
   STAGE 2 -- details / category / search / comments / register
   ================================================================ */

/* ---------- forms: never wider than the screen, never zoom on focus --- */
textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	font-size: 16px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="file"] {
	max-width: 100% !important;
	box-sizing: border-box;
	font-size: 16px;
}
select {
	font-size: 16px;
}
/* buttons stay tappable */
input[type="submit"], input[type="button"], input[type="reset"], button {
	max-width: 100%;
	box-sizing: border-box;
}

/* ---------- long unbroken strings (source URLs, e-mails, tags) ------- */
td.content a,
td.content .graytext,
td.content .breadcrumbsss,
td.content .breadcrumbs2,
td.content .big_text,
td.content .discr,
.comment_text, .comments1, .comments2 {
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ================= details.php ================= */
/* main photo: {image} is emitted with hard width/height attributes */
td.center_big img,
td.center_big2 img,
.center_big img, .center_big2 img,
td.big_text img {
	max-width: 100% !important;
	height: auto !important;
	/* .center_big img has padding:10px (style.css); without border-box the
	   photo ends up 100%+20px wide and causes horizontal scroll */
	box-sizing: border-box;
}
/* likes / counters block: floats collapse into a single column */
.voting {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden; /* contain the floats */
}
.vote-title, .vote-table, .vote-make, .vote-total {
	float: none !important;
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
/* the "vote for it" call-out: full width, arrow sprite moved to the right edge */
.vote-title {
	margin-top: 10px !important;
	margin-bottom: 10px;
	background-position: right center !important;
	padding-right: 34px;
}
/* the counters (likes / views / comments) keep their real table layout:
   the icons are background sprites glued to the left of each <span>, so
   de-tabling them into a single column looks broken */
.voting table {
	display: table !important;
	width: 100% !important;
	max-width: 100% !important;
	table-layout: fixed;
}
.voting tbody { display: table-row-group !important; }
.voting tr    { display: table-row !important; }
.voting td, .voting th {
	display: table-cell !important;
	width: auto !important;
	height: auto !important;
}
.vote-count {
	padding: 0 !important;
}
.vt-votes    { width: 38% !important; }
.vt-views    { width: 38% !important; }
.vt-comments { width: 24% !important; }
.vt-votes span, .vt-views span, .vt-comments span {
	font-size: 20px !important;
}
.vote-make table {
	padding: 10px !important;
}
.vt-sign-eq { width: 1% !important; padding: 0 4px !important; }
.total-likes {
	max-width: 100%;
	word-wrap: break-word;
}
/* "add a photo to this post" form (inline width:500px / textarea 450px) */
#upload-photo-form {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
#upload-photo-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: 140px !important;
}
/* map block */
#map_block, #map_block > div, #update-photo-location-form {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
#map_block iframe, #map_block ymaps {
	max-width: 100% !important;
}
/* prev/next thumbnails row + "share this link" row already de-tabled;
   just keep the label cell from being a narrow column */
td.rtext2, td.rtext3 {
	display: block;
	width: auto !important;
	max-width: 100%;
	text-align: center;
	/* desktop .rtext2 has padding:10px 0 10px 10px -- symmetric gutters
	   so the boxed sections (expert hints, about) get a right margin */
	padding: 10px 8px !important;
}
/* social share buttons: let them wrap instead of stretching the row */
.fb-like, .twitter-share-button, .pin-it-button {
	max-width: 100% !important;
	overflow: hidden;
}
/* expert-hint / feedback forms at the bottom of details */
#feedbackForm, #del-feedback-form, #feedback {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
#feedbackForm input[type="text"] {
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 4px;
}
/* comment form (comment_form.html) */
.form3 input[type="text"],
.form4 input[type="text"],
.form3 textarea,
.form4 textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}
/* captcha image + reload icon */
img[src*="captcha"], img[src*="Captcha"], #captcha, .captcha img {
	max-width: 100% !important;
	height: auto !important;
}
/* bbcode button strip must wrap, not overflow */
.bbcode, .bbcode td, .bbcode input {
	max-width: 100%;
}

/* ================= category / search result lists ================= */
/* keep the thumbnail itself centred and never wider than the screen */
td.td_image3 img,
#photosInCategoryBlock img,
td.td_image img, td.td_image2 img {
	max-width: 100% !important;
	height: auto !important;
}
/* pagination: bigger tap targets, wraps onto several lines */
.paging, .paging a, .breadcrumbs a[href*="page="] {
	word-wrap: break-word;
}
td.breadcrumbssu a, .breadcrumbssu a {
	display: inline-block;
	padding: 3px 4px;
	line-height: 1.4;
}
/* subcategory tree */
.subcat, .categories {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.categories {
	line-height: 1.5;
}
/* sort / per-page dropdown forms sit on their own line */
form[action*="search.php"] select,
form[action*="categories.php"] select,
.commentsperpage select {
	max-width: 100% !important;
	margin: 2px 0;
}

/* ================= comments_all.php ================= */
td.content .comments_all td,
.comments_all_bit, .comments_all_bit td {
	display: block;
	width: auto !important;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ================= register.php / login ================= */
.registration, .registration table, .registration td {
	width: auto !important;
	max-width: 100%;
	box-sizing: border-box;
}
.form3 td, .form4 td {
	display: block;
	width: auto !important;
	max-width: 100%;
}
/* date-of-birth: keep the day/month/year table a real 3-column table so the
   "day month year" labels stay above their own field (:has() is ignored by
   browsers that do not support it -- then it just falls back to a column) */
table:has(> tbody > tr > td > select[name="user_birthday_day"]) {
	display: table !important;
	width: auto !important;
}
table:has(> tbody > tr > td > select[name="user_birthday_day"]) tbody { display: table-row-group !important; }
table:has(> tbody > tr > td > select[name="user_birthday_day"]) tr    { display: table-row !important; }
table:has(> tbody > tr > td > select[name="user_birthday_day"]) td {
	display: table-cell !important;
	width: auto !important;
	height: auto !important;
	white-space: nowrap;
}
select[name="user_birthday_day"],
select[name="user_birthday_month"] {
	width: auto !important;
	max-width: 100px !important;
}
input[name="user_birthday_year"] {
	width: 70px !important;
	max-width: 70px !important;
}

/* ================================================================
   STAGE 3 -- home page side gutters: after de-tabling many blocks
   lost their cell spacing and the text sticks to the screen edge
   ================================================================ */
/* section headings: "Novye podskazki ekspertov", "Alfavit",
   "Populyarnye goroda", "Foto staryh gorodov", feed headers */
.mid_header2, .mid_header3, .mid_header5,
td.content_header, .head1 {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
/* first-level cells of the main content wrapper (category h1,
   search "Naydeno:" + paging, etc.) */
td.aboutfoto > table > tbody > tr > td {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
/* plain text/link rows: alphabet letters, popular cities list,
   "VSE ..." footer links of each feed block */
td.breadcrumbs, td.breadcrumbsp {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
/* "Naydeno: NNN foto" + pagination inside the photo feed block
   (stage 2 zeroed this padding; 8px gutter reads better and also
   insets the dark thumbnail cards slightly) */
td.td_image3,
#photosInCategoryBlock {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
/* category links of the "Foto staryh gorodov" block */
td.towns {
	padding: 0 8px 10px 8px !important;
}
/* "Vsego NNN fotografiy v NNN postah" totals line under the
   category tree */
td.im_footer {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

/* ================================================================
   STAGE 4 -- app-like header, driven by /js/mobile_header.js
   Every rule is gated on html.mh-mob. An inline script in <head> of
   every header template sets it before the body is parsed, so the
   desktop header is collapsed from the first paint (no FOUC);
   mobile_header.js then adds the bar and the panels, and drops the
   class when the window is widened past the breakpoint. If the
   script never builds the bar, the inline one removes the class on
   window load and the stage-1 stacked header is shown instead.
   ================================================================ */
/* sticky must sit on the row, not the cell: a sticky td is bounded
   by its own row's box, while the row is bounded by the whole-page
   outer table and so really sticks */
html.mh-mob tr:has(> td.header) {
	position: sticky;
	top: 0;
	z-index: 9990;
}
/* dark bar; the yellow .yline stripe under the header becomes the
   bar's bottom border so it sticks together with it */
html.mh-mob td.header {
	padding: 6px 0;
	background: #4D4948 !important;
	border-bottom: 3px solid #F7DB16;
	box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
html.mh-mob td.yline {
	display: none !important;
}
html.mh-mob td.header table.full_size,
html.mh-mob td.header .header_table {
	background: transparent !important;
}
/* logo cell becomes the top bar: compact logo left, buttons right */
html.mh-mob td.header > table > tbody > tr > td.logo {
	display: flex !important;
	align-items: center;
	text-align: left !important;
	padding: 0 8px;
	min-width: 0 !important;
}
html.mh-mob td.header .logo a {
	flex: 0 1 auto;
	min-width: 0;
}
html.mh-mob td.header .logo img {
	width: 150px; /* logo.jpg is 340x100 */
	max-width: 100%;
	height: auto;
	display: block;
}
html.mh-mob td.header .logo h1,
html.mh-mob td.header .slogan {
	display: none !important;
}
#mh-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
#mh-bar .mh-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: #211C19; /* .top_menu */
	border: 1px solid rgba(255,255,255,.25);
	text-decoration: none;
}
/* pressed state */
#mh-bar .mh-btn.mh-on-state {
	background: #5DA448; /* NP green (.small_header, member menu icons) */
	border-color: #5DA448;
}
#mh-bar .mh-txt {
	width: auto;
	padding: 0 14px;
	color: #fff;
	font: bold 15px Arial, Helvetica, sans-serif;
}
/* logged-in state: the login button shows icon + username; a long
   name is ellipsized so the bar never pushes the logo out */
#mh-bar .mh-uname {
	display: block;
	max-width: 90px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* search: hidden behind the loupe button; field + submit in one row */
html.mh-mob td.header > table > tbody > tr > td.search {
	display: none !important;
}
html.mh-mob body.mh-search-open td.header > table > tbody > tr > td.search {
	display: block !important;
	padding: 8px 8px 0 8px;
}
html.mh-mob #form3 form {
	display: flex !important;
	align-items: stretch;
	gap: 6px;
	padding: 0 !important;
}
html.mh-mob #form3 input#searchkw {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0 !important; /* size=38 attr otherwise blocks shrinking */
	height: 42px;
	margin: 0 !important;
	box-sizing: border-box;
}
html.mh-mob #form3 input.button {
	flex: 0 0 auto;
	width: auto !important;
	height: 42px;
	margin: 0 !important;
	padding: 0 16px;
	box-sizing: border-box;
}
/* social / newsletter cell: hidden for now */
html.mh-mob td.header > table > tbody > tr > td:has(.im_footer33) {
	display: none !important;
}
/* top menu goes behind the burger, items as a tappable list */
html.mh-mob td.top_menu {
	display: none !important;
}
html.mh-mob body.mh-menu-open td.top_menu {
	display: block !important;
	background: #211C19;
	margin-top: 6px;
}
html.mh-mob body.mh-menu-open #nav {
	padding: 0;
}
html.mh-mob body.mh-menu-open #nav li {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	background: none; /* sp.jpg separator */
	border-bottom: 1px solid #3a3431;
}
html.mh-mob body.mh-menu-open #nav li a {
	display: block !important;
	padding: 12px 16px !important;
	font-size: 16px !important;
}
/* before the script runs, the login block stays in the left column:
   keep it hidden there (once moved into the panel it no longer
   matches this selector) */
html.mh-mob td.left_column td.registration {
	display: none !important;
}
/* login panel: the relocated "registered members" block */
#mh-login-panel {
	display: none;
}
html.mh-mob body.mh-login-open #mh-login-panel {
	display: block;
	margin-top: 6px;
	max-height: calc(100vh - 70px);
	overflow-y: auto;
	padding: 10px 8px;
	background: #211C19;
}
#mh-login-panel td.registration {
	border: 0;
	padding: 0;
}
#mh-login-panel table, #mh-login-panel tbody,
#mh-login-panel tr, #mh-login-panel td {
	display: block;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
}
#mh-login-panel input[type="text"],
#mh-login-panel input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	font-size: 16px;
	margin: 4px 0;
}
/* submit goes on its own line, flush left under the fields */
#mh-login-panel .reg2 {
	text-align: left;
}
#mh-login-panel input.button {
	display: block;
	position: static !important;
	height: 40px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: bold;
	margin: 10px 0 0 0 !important;
	background: #C7E393 !important; /* NP .button */
	color: #000 !important;
	border: 0 !important;
	border-radius: 8px;
	font-style: normal;
}
/* bare divs (perks-of-registration text) inherit white instead of
   the black body color; classed elements keep their own colors */
#mh-login-panel td.registration {
	color: #fff;
}
#mh-login-panel .rtext, #mh-login-panel .rtext4 {
	color: #fff;
}
#mh-login-panel a {
	color: #F5DA00;
}
#mh-login-panel .reg a {
	color: #000;
	display: inline-block;
	padding: 8px 14px;
	border-radius: 8px;
}
/* container td of the category tree in the "Foto staryh gorodov"
   block: holds the two-column tree plus a bare totals text node
   ("Vsego ... fotografiy v ... postah"), which otherwise sticks to
   the screen edge. Strict child path so only this td matches. */
td[colspan="3"]:has(> table > tbody > tr > td.catbgcolor) {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
/* category pages: photo feed container ("Podkategorii:" label and
   thumbnails), bottom "view another city" + per-page forms, and the
   alphabet header table (its cellspacing died with de-tabling) */
td.td_image {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
form[name="jumpbox"],
form.set_per_page_form {
	padding: 0 8px;
}
td.content table[cellspacing="10"] > tbody > tr > td {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
/* td nowrap (memberlist sort form, paging) pushes the page wider than
   the screen (port of the razruha rule) */
td.content td[nowrap] {
	white-space: normal !important;
}
/* divs with inline fixed widths (profile wall: style="width:470px") */
td.content div[style*="width"] {
	max-width: 100% !important;
	box-sizing: border-box;
}
/* NP: home "O proekte" / "Est' nochnye foto?" cells and the category
   page "Podkategorii:" cell stick to the screen edge */
td.about,
td.content td[colspan="3"][width="100%"] {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

}