/* PCNews.ru - phone & tablet themes
*
* Everything below lives inside a media query, so the desktop and notebook
* rendering is byte-for-byte what it was: nothing here matches a fine-pointer
* viewport of 1367px or more, and nothing matches a fine-pointer viewport at
* all above 1024px. The only rules outside a query are the defaults that hide
* the mobile-only elements added to base.twig, which have no desktop layout.
*
* Three tiers:
* PHONE <=767px, plus phones held landscape (short viewport, coarse input)
* TABLET 768-1024px, plus large tablets up to 1366px that report a coarse
* pointer - that is the iPad Pro in landscape, which is wider than a
* notebook but must not get the notebook layout
* SHARED both of the above: the page chrome, typography and overflow fixes
* they have in common
*
* The tiers are written as literal query lists rather than variables because
* plain CSS has no way to name one. Keep the three lists in sync if a
* breakpoint moves.
*
* Palette is deliberately unchanged - cream page #fffddf, white chrome, the
* per-section accent colours. This is a re-flow of the existing design, not a
* new one.
*/
/* ---------------------------------------------------------------------------
MOBILE-ONLY ELEMENTS - hidden everywhere until a tier turns them on
--------------------------------------------------------------------------- */
#m-bar,
#m-sections,
#m-nav-overlay,
.m-drawer-head { display: none; }
/* ===========================================================================
SHARED - phone + tablet
=========================================================================== */
@media only screen and (max-width: 1024px),
only screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
/* -- page shell ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
min-width: 0;
padding: 0;
font-size: 15px;
line-height: 1.45;
overflow-x: hidden;
}
/* The desktop shell is a fixed 960-1226px box that keeps its footer down with
min-height:100% on #page and position:absolute on #footer/#footer-2nd. None
of that survives a viewport of unpredictable width, so the box goes fluid
and becomes a flex column: #content takes the slack, the footers sit after
it in the flow, and a short page - a 404, an empty list - still fills the
screen. */
#page {
display: flex;
flex-direction: column;
min-width: 0;
max-width: none;
min-height: 100vh;
margin: 0;
width: auto;
}
#content { width: auto; padding-bottom: 24px; flex: 1 0 auto; }
#footer-2nd,
#footer {
position: static;
height: auto;
width: auto;
bottom: auto;
flex: 0 0 auto;
}
.with-adlinks#page #footer-adlinks { margin-bottom: 0; }
#footer-adlinks { margin-bottom: 0; }
/* Fixed-size furniture from the 1000px canvas. styles.css still carries these
although no template renders them any more; they are reflowed rather than
hidden so that re-enabling one does not reintroduce a horizontal scrollbar
- and so nothing here can quietly suppress an ad slot. */
#banner { width: auto; max-width: 100%; height: auto; margin-left: 0; }
#advert-box,
#side-column #advert-box { width: auto; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }
#robot-image { position: static; width: auto; height: auto; margin: 0; }
#add-press-release { position: static; width: auto; max-width: 100%; height: auto; left: auto; top: auto; }
/* -- media ----------------------------------------------------------------- */
/* fixImages() writes width/height attributes on article images; height:auto
keeps the aspect ratio once max-width clamps the width. */
img { max-width: 100%; height: auto; }
#article-box img,
#article-box .image img { max-width: 100%; height: auto; }
iframe,
video,
embed,
object { max-width: 100%; }
/* Long unbroken URLs and Russian compound titles are the usual source of a
stray horizontal scrollbar. */
#article-box,
#text-box,
#index-list,
#search-results,
#live-items-box { overflow-wrap: break-word; word-wrap: break-word; }
/* -- chrome hidden on touch ------------------------------------------------ */
/* The desktop header's Google CSE wrapper is a hard 350px pushed right; the
phone moves it into a drop panel and the tablet re-lays it out. Both start
from the same reset. */
#header > div[align="right"] { width: auto !important; float: none; text-align: left; }
#header > div[align="right"] > div { width: auto !important; text-align: left !important; }
.gcse-search { max-width: 100%; }
/* "ещё" opens a JS-positioned absolute popup. Both tiers show the overflow
topics inline instead, so the control has nothing left to do. */
#header-2nd li.more-topics a.popup-more-topics-anchor { display: none; }
/* LIVE! has a permanent slot in the section nav on both tiers, so the copy
riding along in the topic row is a duplicate. */
#header-2nd li.live { display: none; }
/* Decoration that only reads at desktop size. */
#header-2nd { background-image: none; }
#navigation-list-box .up,
#navigation-list-box .down { display: none; }
#live-items-box .gradient-hide { display: none; }
/* styles.css floats the article page's section menu into the right-hand
column for desktop. Here the same element is a grid/flex item, so the float
is already inert - but its margins are not, and the phone hides the menu
entirely, so the block is reset before either tier places it. */
.article-page #side-column { margin-top: 0; }
.article-page #side-column ul#menu-box { padding-top: 0; }
/* -- the in-page notice bar ------------------------------------------------ */
.info-box-holder,
.info-box-holder-index {
height: auto;
padding-left: 0 !important;
margin: 0 !important;
}
#index-column #info-box,
#article-column #info-box { margin-left: 0; float: none; }
#info-box { background-image: none; background-color: #8F8E7D; border-radius: 3px; }
/* -- lists: #index-list on every list page --------------------------------- */
/* The desktop list is a two-column table (time | headline) with a 85px gutter.
It stays a table here, but the row becomes a flex line so the time can sit
in a narrow fixed column without the 20px desktop gutter, and each row gets
a hairline so the list scans on a small screen. */
#index-list { display: block; width: auto !important; margin-top: 0 !important; }
#index-list tbody { display: block; }
#index-list colgroup { display: none; }
#index-list tr.date {
display: block;
border-bottom: 2px solid #e0dfc7;
margin: 22px 0 4px;
}
#index-list tr.date:first-child { margin-top: 0; }
#index-list .date th {
display: block;
font-size: 17px;
padding: 0 0 6px 0;
color: #8F8E7D;
}
#index-list .date th:empty { display: none; }
#index-list tr.ke-break { display: none; }
#index-list tr.entry {
display: flex;
align-items: baseline;
gap: 10px;
padding: 11px 0;
border-bottom: 1px solid #ece9cf;
}
#index-list tr.entry > td {
display: block;
padding: 0 !important;
vertical-align: baseline;
}
#index-list tr.entry > td.side-bar {
flex: 0 0 auto;
width: 44px;
min-width: 44px;
text-align: right;
padding-right: 0 !important;
}
#index-list tr.entry > td:not(.side-bar) { flex: 1 1 auto; min-width: 0; }
#index-list .entry h1 { line-height: 1.35; }
#index-list .entry .side-bar .top20number { font-size: 14px; }
/* Rows that carry a lead image and a teaser. */
#index-list tr.highlighted { display: block; border-bottom: 1px solid #ece9cf; }
#index-list tr.highlighted > td { display: block; padding: 0 !important; }
#index-list tr.highlighted { padding: 16px 0; }
#index-list .highlighted .image img { width: 72px; height: 72px; }
/* An empty result set renders a single-cell table. */
#index-list tr.date th:only-child { display: block; font-size: 18px; }
/* Brand table on the top-20 brands tab. */
table.top20brands#index-list { width: auto !important; }
table.top20brands#index-list .entry .title-bar { width: auto; }
/* -- front page ------------------------------------------------------------ */
/* The tablet front page is the desktop one (see the TABLET block), so the
reordering, the eight-item caps and the
clean-up are phone-only and
live in the PHONE block. */
/* -- list pages ------------------------------------------------------------ */
/* The desktop "открыть полностью" control is 9px text set inside an 85px
triangle sprite. The link is worth keeping, the sprite is not, so it
becomes an ordinary one-line link - the
s in it are what shaped it to
the triangle. */
#index-column .show-all {
float: none;
width: auto;
height: auto;
margin: 0 0 14px 0;
padding: 0;
text-align: left;
font-size: 13px;
line-height: 1.4;
background-image: none;
}
#index-column .show-all br { display: none; }
#index-column .show-all a { display: inline-block; line-height: 32px; }
/* -- paginator ------------------------------------------------------------- */
#index-column #paginator,
#paginator { margin: 26px 0 0 0 !important; }
#paginator ul { height: auto; display: flex; justify-content: space-between; }
#paginator ul li { float: none; height: auto; min-height: 44px; line-height: 44px; margin: 0; }
#paginator ul li a { float: none; line-height: 44px; min-height: 44px; }
/* -- article --------------------------------------------------------------- */
#article-box h1 { line-height: 1.25; }
#article-box .image { margin: 20px 0; }
#article-box table { max-width: 100%; display: block; overflow-x: auto; }
/* On a 390px phone the intrinsic width of a single unbreakable token - a
Maven coordinate, a package name, a bare URL - becomes the minimum width of
the article column, and the page ends up scrolling sideways by exactly that
overhang. (Measured on the Netflix blog post: one 'maven/com.netflix/...'
string forced #content to 444px against a 390px viewport.)
The break-word in styles.css cannot fix this: the spec has the browser
ignore it while computing intrinsic width, which is the very step that goes
wrong here. 'anywhere' is the value that participates, so the narrow tiers
override rather than repeat it. It still only breaks a word that genuinely
will not fit, so ordinary prose is untouched. */
#article-box,
#text-box { overflow-wrap: anywhere; }
/* -- static text pages ----------------------------------------------------- */
/* static_pages/default.twig hard-codes style="height:1500px" inline, so this
has to be !important to reach it. */
#text-column { height: auto !important; float: none; padding-left: 0; }
#text-box { padding: 4px 0 0 0; }
#text-box h1 { margin-top: 32px; }
#text-box h1.first { margin-bottom: 24px; }
#text-box h1.subheader { margin-top: -14px; margin-bottom: 28px; }
#text-box h2 { margin-top: 32px; margin-bottom: 16px; }
#text-box p { margin: 1.2em 0; }
#text-box span.g-outed { margin-left: 0; }
.text-category #footer .additional-menu { margin-left: 0; }
#promo-item { margin-left: 0; width: auto; }
#promo-item .shadow-wrapper { padding: 0; background-image: none; }
#promo-item .content { padding: 18px; }
/* -- forms ----------------------------------------------------------------- */
/* iOS zooms the page in on focus when an input is under 16px. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }
.feed-box { width: auto !important; padding: 0 !important; }
.feed-box table { width: 100%; }
.feed-box table td { display: block; width: auto !important; padding: 3px 0; }
.feed-box table input.i-text,
.feed-box table select,
.feed-box table textarea { width: 100%; }
.feed-box div.b-contacts { float: none; margin: 16px 0 0 0; }
.press-box input.i-text,
.press-box textarea,
.press-box dl { width: 100%; box-sizing: border-box; }
.profile-box div.b-right { float: none; }
.profile-box table.t-login,
.profile-box table.t-registration,
.profile-box table.t-settings { width: 100%; }
.profile-box table.t-login td,
.profile-box table.t-registration td,
.profile-box table.t-settings td { display: block; width: auto !important; padding: 3px 0; }
.profile-box table.t-login input.i-text,
.profile-box table.t-registration input.i-text,
.profile-box table.t-registration input.i-text-code,
.profile-box table.t-settings input.i-text,
.profile-box div.b-getpass input.i-text { width: 100%; box-sizing: border-box; }
.comment-form#add-comment .comment-text textarea,
.comment-form#add-reply .comment-text textarea,
.contracted-comment-form .comment-text textarea { width: 100%; box-sizing: border-box; }
.comment-form .anonymous-authorize .username .input input,
.comment-form .anonymous-authorize .captcha .input input { width: auto; max-width: 100%; }
#add-reply { margin-left: 16px; }
#comments-box ul ul { margin-left: 12px; }
/* -- LIVE ------------------------------------------------------------------ */
#index-column #live-items-box { margin: 0 !important; }
#live-items-box h1,
#live-items-box h2 { margin-left: 0; }
#live-items-box h1 { font-size: 30px; }
#live-items-box .items-list { width: 100% !important; display: block; }
#live-items-box .items-list tbody { display: block; }
#live-items-box .items-list tr.item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid #ece9cf;
}
#live-items-box .items-list tr.item > td { display: block; padding: 0; }
/* flex:0 0 auto is the fix, not decoration. As a default flex item this cell
shrinks to share space with the title, and min-width:0 let it shrink below
its own content - so the 28px timestamp overflowed a cell laid out at 9-17px
and printed on top of the headline. Fixed basis, and a min-width so the
times line up into a column. */
#live-items-box .items-list .item .sidebar {
flex: 0 0 66px;
width: 66px;
height: auto;
line-height: 1.4;
text-align: left;
padding-right: 0;
white-space: nowrap;
}
/* The badge and the time share this cell. Inline they run to ~100px on a
"пресс-релиз" row and only on those rows, so every headline in the feed
started at a different x. Stacked, the cell is one fixed width and the
titles line up whether or not a row carries a badge. */
#live-items-box .items-list .item .sidebar .type {
display: block;
margin: 0 0 3px 0;
padding: 1px 4px;
font-size: 9px;
text-align: center;
}
#live-items-box .items-list .item .sidebar .time {
display: block;
margin-left: 0;
}
#live-items-box .items-list .item .main {
flex: 1 1 auto;
min-width: 0;
height: auto;
line-height: 1.4;
overflow: visible;
}
#live-items-box .items-list .item .main .title { float: none; height: auto; overflow: visible; }
/* -- top 20 ---------------------------------------------------------------- */
#index-column #top20-header-box { margin: 0 0 22px 0 !important; }
#top20-header-box .top20-title {
height: auto;
padding-left: 0;
margin-bottom: 14px;
background-image: none;
}
#top20-header-box .top20-title ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
#top20-header-box .top20-title ul li { float: none; margin: 0; }
#top20-header-box .top20-title ul li.title { font-size: 28px; margin-top: 0; }
#top20-header-box .top20-title ul li.period,
#top20-header-box .top20-title ul li.arrow { margin-top: 0; }
#top20-header-box #categories ul { height: auto; margin-left: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#top20-header-box #categories ul li { float: none !important; height: auto; margin: 0 !important; }
#top20-header-box #categories ul li a { line-height: 30px; padding: 0 10px; }
#top20-pic-box { margin-bottom: 22px; }
#top20-pic-box img { max-width: 100%; height: auto; }
/* -- archive --------------------------------------------------------------- */
#index-column #archive-header-box { margin: 0 0 22px 0 !important; }
#archive-header-box .archive-title { height: auto; margin-bottom: 14px; }
#archive-header-box .archive-title ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
#archive-header-box .archive-title ul li { float: none; margin: 0 !important; }
#archive-header-box .archive-title ul li.title { font-size: 28px; margin-top: 0; }
#archive-header-box .archive-title ul li.period,
#archive-header-box .archive-title ul li.arrow,
#archive-header-box .archive-title ul li.enter-button { margin-top: 0; }
#archive-header-box #categories ul { height: auto; display: flex; flex-wrap: wrap; gap: 6px; }
#archive-header-box #categories ul li { float: none !important; height: auto; margin: 0 !important; }
#archive-header-box #categories ul li a { line-height: 30px; padding: 0 10px; }
#archive-column { float: none; }
#archive-box { margin-left: 0; padding-top: 0; }
#archive-box h1 { font-size: 28px; margin-bottom: 20px; }
#archive-box .month-calendar { float: none; width: auto; margin-bottom: 22px; }
#archive-box .month-calendar table { width: 100%; }
#archive-box .month-calendar table th { height: auto; font-size: 18px; padding-bottom: 6px; }
#archive-box .month-calendar table td { height: 34px; font-size: 15px; text-align: center; }
/* Day numbers fill their cell so the whole square is a tap target. The LIVE
cell is five separate letter links, which must stay on one line. */
#archive-box .month-calendar table td:not(.live-link) a { display: block; line-height: 34px; }
/* Five separate letter links in a 14%-wide cell; without this they stack one
per line and stretch the week out. */
#archive-box .month-calendar table td.live-link {
text-align: left;
white-space: nowrap;
font-size: 9px;
}
#year-box { margin-top: 0; }
ul#year-list li { margin-left: 0; }
/* The desktop marks the current year with a 90px flag image behind white
text. At these sizes the flag no longer lines up behind the number, so the
year gets a plain chip instead - same reading, no sprite. */
ul#year-list li.selected,
.news-category ul#year-list li.selected,
.blogs-category ul#year-list li.selected,
.articles-category ul#year-list li.selected,
.market-category ul#year-list li.selected,
.press-category ul#year-list li.selected,
.files-category ul#year-list li.selected,
.top20-category ul#year-list li.selected {
background-image: none;
background-color: #8F8E7D;
border-radius: 3px;
}
ul#year-list li.selected a { color: #fff; padding-left: 10px; padding-right: 10px; }
/* -- search results -------------------------------------------------------- */
/* Site search is Google CSE in the header now, and #search-results is left
over from the page that preceded it. Covered anyway so the rules are there
if that page comes back. */
#search-resuls-header { padding-left: 0; margin: 18px 0 26px; }
#search-resuls-header #categories ul { height: auto; display: flex; flex-wrap: wrap; gap: 6px; }
#search-resuls-header #categories ul li { float: none; height: auto; }
#search-resuls-header #categories ul li a { line-height: 30px; padding: 0 10px; }
#search-results { width: 100%; display: block; }
#search-results tbody { display: block; }
#search-results tr { display: block; padding: 12px 0; border-bottom: 1px solid #ece9cf; }
#search-results td { display: block; }
#search-results .side-bar { width: auto; text-align: left; padding: 0 0 4px 0; }
#search-results h1 { font-size: 17px; }
/* -- sponsored item card --------------------------------------------------- */
#advert-item { display: block; width: 100%; margin-top: 22px; }
#advert-item tbody,
#advert-item tr { display: block; }
#advert-item td { display: block; }
#advert-item .side-bar { width: auto; display: flex; align-items: center; gap: 10px; }
#advert-item .side-bar .image { margin-top: 0; }
#advert-item .advert-rules { float: none; }
/* -- footer ---------------------------------------------------------------- */
#footer-2nd {
height: auto;
padding: 10px 14px;
box-sizing: border-box;
overflow: hidden;
}
#footer-2nd .archive { margin-left: 16px; }
#footer-2nd .rss-link { margin-right: 0; }
#footer {
padding: 16px 14px 24px;
box-sizing: border-box;
height: auto;
}
#footer ul.horz-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
#footer li { float: none; font-size: 12px; }
#footer .about a { margin-left: 0; }
#footer .additional-menu { margin-left: 0 !important; }
#footer .additional-menu .menu-item {
display: inline-block;
margin-right: 14px;
line-height: 26px;
}
#footer .email { float: none; margin-right: 0; }
} /* end SHARED */
/* ===========================================================================
PHONE - <=767px, and phones held landscape
=========================================================================== */
@media only screen and (max-width: 767px),
only screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
/* -- the bar --------------------------------------------------------------- */
/* One sticky 52px row: menu, wordmark, search. The desktop #header (logo plus
the Google CSE box) is folded away and re-used as the search drop panel. */
#m-bar {
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 900;
height: 52px;
padding: 0 6px;
background-color: #fff;
border-bottom: 1px solid #e0dfc7;
}
.m-burger,
.m-search-but {
width: 44px;
height: 44px;
flex: 0 0 44px;
padding: 0;
margin: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
/* Set by pcnews-mobile.js when the page renders no topics to put in the
drawer - the error pages. The button keeps its 44px so the wordmark stays
where it is on every other page. */
.m-burger.m-nav-empty { visibility: hidden; pointer-events: none; }
.m-burger span {
display: block;
width: 21px;
height: 2px;
background-color: #004775;
transition: transform .2s ease, opacity .15s ease;
}
body.m-nav-open .m-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.m-nav-open .m-burger span:nth-child(2) { opacity: 0; }
body.m-nav-open .m-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.m-search-but { position: relative; border-radius: 4px; }
.m-search-but::before {
content: '';
position: absolute;
left: 13px;
top: 12px;
width: 12px;
height: 12px;
border: 2px solid #004775;
border-radius: 50%;
}
.m-search-but::after {
content: '';
position: absolute;
left: 26px;
top: 26px;
width: 8px;
height: 2px;
background-color: #004775;
transform: rotate(45deg);
transform-origin: left center;
}
body.m-search-open .m-search-but { background-color: #f4f2d8; }
#m-logo {
display: block;
width: 54px;
height: 36px;
background-image: url('/media/i/logo-red.gif');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* -- the section strip ----------------------------------------------------- */
/* Sections are the nav that earns a permanent slot on a news site: one tap,
always visible, scrolls sideways when it does not fit. Topics live in the
drawer behind the burger. */
#m-sections {
display: block;
position: sticky;
top: 52px;
z-index: 890;
background-color: #fff;
border-bottom: 1px solid #e0dfc7;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
#m-sections::-webkit-scrollbar { display: none; }
#m-sections ul {
display: flex;
list-style: none;
margin: 0;
padding: 0 6px;
white-space: nowrap;
}
#m-sections li { flex: 0 0 auto; }
#m-sections li a {
display: block;
padding: 0 11px;
line-height: 40px;
font-size: 13px;
text-transform: uppercase;
color: #4d4d4d;
border-bottom: 3px solid transparent;
}
#m-sections li.selected a { font-weight: bold; }
#m-sections li.news a { color: #F15A24; }
#m-sections li.articles a { color: #FBB03B; }
#m-sections li.blogs a { color: #9E005D; }
#m-sections li.files a { color: #29ABE2; }
#m-sections li.pressreleases a { color: #662D91; }
#m-sections li.live a { color: #F15A24; font-style: italic; }
#m-sections li.selected.news a { border-bottom-color: #F15A24; }
#m-sections li.selected.articles a { border-bottom-color: #FBB03B; }
#m-sections li.selected.blogs a { border-bottom-color: #9E005D; }
#m-sections li.selected.files a { border-bottom-color: #29ABE2; }
#m-sections li.selected.pressreleases a { border-bottom-color: #662D91; }
/* -- the search panel ------------------------------------------------------ */
/* #header is the desktop logo + CSE row. Collapsed by default here, dropped
under the bar when the search button is pressed. */
#header {
display: none;
height: auto;
padding: 10px 12px;
border-bottom: 1px solid #e0dfc7;
background-color: #fff;
}
body.m-search-open #header { display: block; }
#header #logo { display: none; }
/* -- the drawer ------------------------------------------------------------ */
/* #header-2nd already holds every topic - the eight in the bar plus the rest
inside the collapsed "ещё" popup - so the drawer is that same element
re-laid-out, with no second query and no duplicated markup. */
#header-2nd {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 82%;
max-width: 320px;
height: 100%;
height: 100dvh;
padding: 14px 0 28px;
box-sizing: border-box;
background-color: #fff;
border-right: 1px solid #e0dfc7;
box-shadow: 2px 0 14px rgba(0, 0, 0, .18);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: translateX(-102%);
transition: transform .24s ease;
visibility: hidden;
}
body.m-nav-open #header-2nd { transform: translateX(0); visibility: visible; }
#header-2nd ul.horz-menu { height: auto; display: block; }
#header-2nd li { float: none; width: auto; display: block; }
.m-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 0 18px;
margin-bottom: 6px;
border-bottom: 2px solid #e0dfc7;
}
.m-drawer-title {
font-size: 12px;
line-height: 42px;
letter-spacing: .08em;
text-transform: uppercase;
color: #8F8E7D;
}
.m-drawer-close {
position: relative;
width: 42px;
height: 42px;
flex: 0 0 42px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.m-drawer-close::before,
.m-drawer-close::after {
content: '';
position: absolute;
left: 12px;
top: 20px;
width: 18px;
height: 2px;
background-color: #004775;
}
.m-drawer-close::before { transform: rotate(45deg); }
.m-drawer-close::after { transform: rotate(-45deg); }
#header-2nd li.topic,
#header-2nd li.more-topics {
height: auto;
padding: 0;
line-height: normal;
background-color: transparent;
border: 0;
}
#header-2nd li.topic a,
#header-2nd .more-topics-box-contracted a.item {
display: block;
height: auto;
padding: 0 18px;
line-height: 46px;
font-size: 15px;
color: #004775;
border-bottom: 1px solid #f0eedb;
}
#header-2nd li.topic a:hover,
#header-2nd .more-topics-box-contracted a.item:hover {
background-color: transparent;
color: #004775;
text-decoration: none;
}
#header-2nd li.current-topic a,
#header-2nd .more-topics-box-contracted a.item.current-item {
font-weight: bold;
background-color: #fffddf;
border-left: 3px solid #004775;
padding-left: 15px;
}
#header-2nd li.more-topics-active { background-color: transparent; border-top: 0; padding-top: 0; }
/* The overflow topics are in the DOM already, collapsed. Unfold them in place
so the drawer lists every topic in one run. */
#header-2nd li.more-topics .popup-holder { display: block; float: none; }
#header-2nd li.more-topics .more-topics-box-contracted {
display: block;
position: static;
border: 0;
padding: 0;
background-color: transparent;
}
#header-2nd .live {
float: none;
display: block;
height: auto;
padding: 0 18px;
line-height: 46px;
text-align: left;
border-bottom: 1px solid #f0eedb;
background-color: transparent;
}
#header-2nd .live a { font-size: 17px; }
#header-2nd li.login-logout { float: none; margin: 0; height: auto; }
#header-2nd li.login-logout:empty { display: none; }
#header-2nd li.search { float: none; width: auto; height: auto; text-align: left; }
#m-nav-overlay {
display: block;
position: fixed;
inset: 0;
z-index: 990;
background-color: rgba(0, 0, 0, .38);
opacity: 0;
visibility: hidden;
transition: opacity .24s ease, visibility .24s ease;
}
body.m-nav-open #m-nav-overlay { opacity: 1; visibility: visible; }
body.m-nav-open { overflow: hidden; }
/* -- one column ------------------------------------------------------------ */
#content {
display: flex;
flex-direction: column;
padding: 14px 14px 24px;
box-sizing: border-box;
}
#content > br.clearer { display: none; }
.column {
float: none !important;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: 0;
margin-bottom: 18px;
}
.box { margin-left: 0 !important; margin-right: 0 !important; }
/* What the reader came for first, the section menu last. Ordered by column
role rather than by page class, because #content carries no class at all on
the static and error pages - and there the side column is the first child,
so DOM order alone would open every one of them with a nav list. */
#content > .column { order: 5; }
#content > #index-column,
#content > #article-column,
#content > #text-column,
#content > #archive-column { order: 1; }
#content > #navigation-list-column { order: 2; }
#content > #side-column { order: 3; }
/* The year picker is the archive's control, so it leads rather than trails. */
#content.archive-page > #navigation-list-column { order: 0; }
/* The front page is the exception: it has no side column, its blocks are
already in reading order, and #column2/#column3 sit one level down inside
#rubber_columns_wrapper - so the role-based orders above would reach
#column1 (news) but not its siblings and drop news to the bottom. Put the
whole page back on document order. */
#content.start-page > .column,
#content.start-page > #rubber_columns_wrapper { order: 0; }
/* -- front page ------------------------------------------------------------ */
.start-page #rubber_columns_wrapper { margin-left: 0; }
.start-page .box { float: none; width: auto; }
.start-page .box h1 { float: none; margin-bottom: 10px; }
.start-page .box h1 .title { float: none; display: inline; margin-top: 0; font-size: 28px; }
.start-page .box h1 .flash { float: none; display: inline-block; margin-left: 6px; vertical-align: 3px; }
.start-page .box h1 .flash .descr { float: none; display: inline; width: auto !important; margin: 0; }
.start-page .box h1 .flash .number { display: none; }
.start-page .box .subtitle { position: static; height: auto; }
.start-page .box h2 { float: none; width: auto; margin: 0; }
.start-page .box h2 a,
.start-page .box h2.with-icon a {
display: block;
padding: 11px 0;
font-size: 15px;
line-height: 1.35;
border-bottom: 1px solid #ece9cf;
}
.start-page #news-box h2 a,
.start-page #files-box h2 a { margin-left: 0; }
.start-page #news-box h2 .time,
.start-page #files-box h2 .time { display: none; }
.start-page .box h2.highlighted { font-size: 17px; }
.start-page .box h2.highlighted a { padding: 12px; margin: 0 0 12px 0; border-bottom: 0; }
.start-page .box .all { float: none; width: auto; height: auto; margin-top: 12px; }
.start-page .box .all .label,
.start-page .box .all .popup-holder { float: none; display: inline-block; }
.start-page #market-box h2.with-icon span.icon { width: 56px; }
.start-page #market-box h2.with-icon span.title,
.start-page #market-box h2.with-icon span.price { margin-left: 56px; }
#top20-box .title-box h2 { font-size: 16px; }
#top20-box .title-box h3 { font-size: 12px; }
/* The subscribe widget is laid out with a 320px table. */
#subscribe_form-yellow { width: 100% !important; box-sizing: border-box; }
#subscribe_form-yellow table { width: 100%; }
#subscribe_form-yellow input[type="text"] { width: 100% !important; box-sizing: border-box; }
/* -- section menu ---------------------------------------------------------- */
/* Full section list, shown under the content rather than beside it. The strip
at the top of the page already covers one-tap navigation, so this repeats it
only where the page-specific period filters hang off it. */
#side-column ul#menu-box,
ul#menu-box {
margin: 0 0 16px 0 !important;
padding-top: 14px;
border-top: 2px solid #e0dfc7;
}
ul#menu-box li { font-size: 15px; margin: 0; }
ul#menu-box li .item-title a { display: block; line-height: 44px; }
ul#menu-box li.selected { margin-bottom: 8px; }
#menu-box .selected .item-title { font-size: 22px; }
#menu-box .select-options { margin: 0 0 8px 0; display: flex; flex-wrap: wrap; gap: 6px; }
#menu-box .select-options a {
height: auto;
line-height: 32px;
padding: 0 10px 0 26px;
background-position: 6px center;
border: 1px solid #e0dfc7;
border-radius: 16px;
}
#menu-box .select-options a:not(.selected) { padding-left: 10px; }
#side-column #sources-box { margin-left: 0; }
#sources-box a.item { height: auto; line-height: 34px; }
/* -- article --------------------------------------------------------------- */
/* No side column on a story. On an article page it carries only the section
list, which is the same set of links as the strip pinned at the top of the
screen - so on a phone it is a second copy of the navigation sitting under
the article. (On a list page the same menu also carries that section's
period filters, which have nowhere else to live, so it stays there.)
The sponsored slot inside the column is left alone: it is the only ad on
the page and dropping it is a revenue decision, not a layout one. What is
hidden here is the duplicated navigation. */
.article-page #side-column > #menu-box,
.article-page #side-column > #sources-box { display: none; }
#article-column { padding-top: 0; }
#article-column #article-box { margin-top: 4px; }
#article-box h1 { font-size: 23px; }
#article-box p,
#article-box { font-size: 16px; line-height: 1.55; }
#article-box .meta-data { font-size: 12px; }
#article-box h1 .meta-data { margin-top: 10px; }
#date-box { padding-top: 0; }
#date-box .date { margin-left: 0; }
/* "Другие материалы" - the neighbouring-items list, below the story.
Written with the page class so it outweighs the desktop rule in styles.css,
which has the same shape but is tuned for a right-hand column. */
#navigation-list-column { width: auto; padding-top: 0; }
.article-page .m-seclabel,
.m-seclabel {
display: block;
margin: 6px 0 0;
padding: 14px 0 0;
border-top: 2px solid #e0dfc7;
border-bottom: 0;
font-size: 17px;
color: #8F8E7D;
}
#navigation-list-box .item,
#navigation-list-box .date {
background-color: transparent;
padding: 11px 0;
font-size: 14px;
line-height: 1.35;
border-bottom: 1px solid #ece9cf;
}
#navigation-list-box .date { padding: 14px 0 6px; }
#navigation-list-box .item .time { display: block; font-size: 11px; margin-bottom: 2px; }
#navigation-list-box .item br { display: none; }
/* -- top 20 / archive ------------------------------------------------------ */
#top20-header-box .top20-title ul li.title,
#archive-header-box .archive-title ul li.title { font-size: 24px; }
ul#year-list {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 4px;
padding-bottom: 6px;
scrollbar-width: none;
}
ul#year-list::-webkit-scrollbar { display: none; }
ul#year-list li { flex: 0 0 auto; height: 34px; line-height: 34px; font-size: 15px; }
ul#year-list li a { padding: 0 10px; }
#archive-box .month-calendar { margin-bottom: 18px; }
/* -- live ------------------------------------------------------------------ */
#live-items-box h1 { font-size: 26px; }
#live-items-box .items-list .item .sidebar { font-size: 11px; }
#live-items-box .items-list .item .main { font-size: 15px; }
/* -- footer ---------------------------------------------------------------- */
#footer-2nd .all-week { margin-left: 0; }
#footer-2nd .archive { margin-left: 12px; }
/* -- front page: order, caps, spacing (phone only - the tablet uses desktop) - */
/* Requested reading order for the front page:
News, Articles, Files, Blogs, Press releases, then Top-20.
News is #column1 and already leads. Articles/Files/Blogs are the three
blocks inside #column2, which the template emits as articles/blogs/files;
press releases and Top-20 are both in #column3, emitted Top-20 first. Both
columns are reordered here rather than by moving the includes, because the
same template feeds the desktop layout.
Negative orders on purpose: everything else in those columns - the ad slot,
the subscribe form, the float-clearing
s - keeps the default 0 and so
stays below the content blocks rather than jumping above them. */
.start-page #column2,
.start-page #column3 { display: flex; flex-direction: column; }
.start-page #column2 > #articles-box { order: -3; }
.start-page #column2 > #files-box { order: -2; }
.start-page #column2 > #blogs-box { order: -1; }
.start-page #column3 > #press-box { order: -2; }
.start-page #column3 > #top20-box { order: -1; }
/* The columns are padded out with bare
tags between the blocks - five
of them in #column1 alone, which stacked into 85px of nothing between the
news and articles blocks once the layout is one column. Direct children
only, so the
s inside headings and copy are untouched. */
.start-page .column > br { display: none; }
.start-page #column2 > br.clearer,
.start-page #column3 > br.clearer { display: none; }
/* Each front-page block is capped at eight entries. The desktop columns have
the height for 15/15/10/10/10; stacked one above another that is sixty
headlines before the footer, so the tail is dropped from the view rather
than from the query - the markup and the links stay in the page, and the
desktop counts are untouched. The per-block "all " link below each
list is how you get the rest. */
.start-page #news-box > h2:nth-of-type(n+9),
.start-page #articles-box > h2:nth-of-type(n+9),
.start-page #blogs-box > h2:nth-of-type(n+9),
.start-page #files-box > h2:nth-of-type(n+9),
.start-page #press-box > h2:nth-of-type(n+9) { display: none; }
/* styles.css pulls the press block's counter 25px left to tuck it under a
heading that is two desktop lines tall. In a narrower column the heading
wraps differently and the counter lands on top of the second line. */
.start-page #press-box h1 .flash { margin-left: 8px; }
#top20-box .top-pic { margin-bottom: 4px; }
#top20-box .top-pic,
#top20-box .shadow-wrapper { background-image: none; }
#top20-box .shadow-wrapper { padding: 0 0 8px 0; }
} /* end PHONE */
/* ===========================================================================
PHONE, LANDSCAPE - a short viewport cannot spare 96px of chrome
=========================================================================== */
@media only screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
/* Sticky is worth 11% of an upright phone and 25% of one on its side. On a
short viewport the bar and the section strip scroll away with the page. */
#m-bar,
#m-sections { position: static; }
} /* end PHONE LANDSCAPE */
/* ===========================================================================
TABLET - 768-1024px, and large coarse-pointer tablets to 1366px
=========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 521px),
only screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
/* A tablet has the width for a real header and a two-column page, so nothing
here hides behind a drawer: the wordmark, every topic and every section are
on screen at once, and content pages keep a side column. That is the whole
difference from the phone - same palette, a layout that uses the space. */
/* -- header ---------------------------------------------------------------- */
/* #m-sections is printed before #header so the phone can stick it under the
bar. A tablet wants it under the topic row instead, so the shell orders its
children rather than the markup being written twice. Negative orders leave
#content and the footers at the default 0, in document order. The shell is
already a flex column - see the shared block. */
#header { order: -3; }
#header-2nd { order: -2; }
#m-sections { order: -1; }
#header {
height: auto;
padding: 14px 22px 10px;
display: flex;
align-items: center;
gap: 22px;
box-sizing: border-box;
}
#logo { float: none; flex: 0 0 auto; width: 108px; height: 72px; background-size: contain; }
/* The Google CSE box grows to whatever it is given; a 600px search field next
to the wordmark reads as a mistake, so it keeps roughly its desktop width. */
#header > div[align="right"] { flex: 1 1 auto; min-width: 0; max-width: 360px; }
/* -- topic bar ------------------------------------------------------------- */
/* All topics, wrapped onto as many rows as it takes - including the ones the
desktop hides behind "ещё", which are already in the markup. */
#header-2nd {
height: auto;
padding: 0 22px;
box-sizing: border-box;
border-bottom: 1px solid #e0dfc7;
}
#header-2nd ul.horz-menu {
height: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 0;
padding: 6px 0;
}
#header-2nd li { float: none; }
#header-2nd li.topic,
#header-2nd li.more-topics { height: auto; padding: 0; line-height: normal; border: 0; background-color: transparent; }
#header-2nd li.topic a,
#header-2nd .more-topics-box-contracted a.item {
display: block;
height: auto;
padding: 0 11px;
line-height: 38px;
font-size: 13px;
color: #004775;
border-radius: 4px;
}
#header-2nd li.topic a:hover,
#header-2nd .more-topics-box-contracted a.item:hover { background-color: transparent; color: #004775; }
#header-2nd li.current-topic a,
#header-2nd .more-topics-box-contracted a.item.current-item {
background-color: #fffddf;
font-weight: bold;
border: 0;
padding: 0 11px;
box-shadow: inset 0 -3px 0 #004775;
}
#header-2nd li.more-topics { display: flex; }
#header-2nd li.more-topics .popup-holder { display: block; float: none; }
#header-2nd li.more-topics .more-topics-box-contracted {
display: flex;
flex-wrap: wrap;
position: static;
border: 0;
padding: 0;
background-color: transparent;
}
#header-2nd .live {
float: none;
margin-left: auto;
height: auto;
padding: 0 6px;
line-height: 38px;
}
#header-2nd li.login-logout { float: none; margin: 0 0 0 10px; height: auto; }
#header-2nd li.login-logout:empty { display: none; }
/* -- section tabs ---------------------------------------------------------- */
/* A full-width row of section tabs under the topic bar. The phone gets a
scrolling strip; here they all fit, so they are laid out as tabs. */
#m-sections {
display: block;
padding: 0 22px;
box-sizing: border-box;
background-color: #fff;
border-bottom: 2px solid #e0dfc7;
}
#m-sections ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
#m-sections li { flex: 0 0 auto; }
#m-sections li a {
display: block;
padding: 0 16px;
line-height: 42px;
font-size: 14px;
text-transform: uppercase;
color: #4d4d4d;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
}
#m-sections li.selected a { font-weight: bold; }
#m-sections li.news a { color: #F15A24; }
#m-sections li.articles a { color: #FBB03B; }
#m-sections li.blogs a { color: #9E005D; }
#m-sections li.files a { color: #29ABE2; }
#m-sections li.pressreleases a { color: #662D91; }
#m-sections li.live a { color: #F15A24; font-style: italic; }
#m-sections li.selected.news a { border-bottom-color: #F15A24; }
#m-sections li.selected.articles a { border-bottom-color: #FBB03B; }
#m-sections li.selected.blogs a { border-bottom-color: #9E005D; }
#m-sections li.selected.files a { border-bottom-color: #29ABE2; }
#m-sections li.selected.pressreleases a { border-bottom-color: #662D91; }
/* -- page grid ------------------------------------------------------------- */
#content {
display: grid;
grid-template-columns: 208px minmax(0, 1fr);
column-gap: 28px;
align-items: start;
padding: 22px;
box-sizing: border-box;
}
#content > br.clearer { display: none; }
.column {
float: none;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-top: 0;
min-width: 0;
}
.box { margin-left: 0 !important; margin-right: 0 !important; }
#side-column { grid-column: 1; }
#index-column,
#text-column,
#archive-column { grid-column: 2; }
/* The error and fulltext pages carry a content column and nothing else, so
there is no side column to fill track 1 and the text would sit in a 208px
indent for no reason. */
#content > #text-column:first-child,
#content > #index-column:first-child,
#content > #article-column:first-child,
#content > #archive-column:first-child { grid-column: 1 / -1; }
/* -- front page ------------------------------------------------------------ */
/* The front page on a tablet is the desktop front page: the same three
columns in the same order (news | articles, blogs, files | top-20, press
releases), the same 15/15/10/10/10 entries, the same headings, counters and
timestamps. Nothing from styles.css is overridden except the one thing
that cannot survive a narrower screen - the fixed 380px news column and
the 400px the rubber columns step over to clear it. Those become shares of
the width in the desktop's own proportions, so an iPad in portrait gets
three ~220px columns and a landscape one ~320px.
#content.start-page, not .start-page: the generic tablet #content is a
grid (one id outranks one class), and the desktop floats need a block. */
#content.start-page { display: block; }
.start-page #column1 { float: left; width: 31% !important; max-width: none; margin-left: 0 !important; }
.start-page #rubber_columns_wrapper { margin-left: 33%; }
/* The generic .column reset in this block (float: none, width: auto,
margin-left: 0, all !important) is for the sidebar pages; here it would
stack the rubber columns, so the desktop values are put back verbatim. */
.start-page #rubber_columns_wrapper #column2 { float: left; width: 46% !important; margin-left: 3% !important; }
.start-page #rubber_columns_wrapper #column3 { float: right; width: 45% !important; margin-left: 2% !important; }
#subscribe_form-yellow { width: 100% !important; box-sizing: border-box; }
#subscribe_form-yellow table { width: 100%; }
#subscribe_form-yellow input[type="text"] { width: 100% !important; box-sizing: border-box; }
/* -- side column ----------------------------------------------------------- */
#side-column .box { margin-left: 0; }
#side-column ul#menu-box,
ul#menu-box { margin: 0 0 22px 0 !important; padding-top: 4px; }
ul#menu-box li { font-size: 15px; }
ul#menu-box li .item-title a { display: block; line-height: 34px; }
#menu-box .selected .item-title { font-size: 26px; line-height: 1.15; }
#menu-box .select-options { margin: 6px 0 10px 2px; }
#menu-box .select-options a { height: auto; line-height: 30px; }
#side-column #sources-box { margin-left: 0; }
#sources-box a.item { height: auto; line-height: 30px; }
/* -- article --------------------------------------------------------------- */
/* Story in the content column, section menu and neighbouring items stacked
together in the side column beside it - the same arrangement desktop now
has, mirrored to the left where this tier's sidebar already is. The page
class sits on #content itself, so it has to be written as a compound
selector. */
/* min-content on the first row is load-bearing. The story spans both rows,
and with auto tracks the grid hands it half of its own height, which left
the related list starting 650px below the menu it is supposed to sit under.
Pinning row 1 to the side column's own height and giving row 2 the slack
packs the two together at the top. */
#content.article-page {
grid-template-columns: 228px minmax(0, 1fr);
grid-template-rows: min-content 1fr;
}
/* Neighbouring items first, section menu under them - the same order the
desktop right-hand column uses. */
.article-page #navigation-list-column { grid-column: 1; grid-row: 1; width: auto; padding-top: 0; }
.article-page #side-column { grid-column: 1; grid-row: 2; }
.article-page #article-column { grid-column: 2; grid-row: 1 / span 2; }
#article-column { padding-top: 0; }
#article-column #article-box { margin-top: 0; }
#article-box h1 { font-size: 26px; }
#article-box p,
#article-box { font-size: 17px; line-height: 1.6; }
#article-box .meta-data { font-size: 12px; }
#article-box h1 .meta-data { margin-top: 10px; }
#date-box { padding-top: 0; }
#date-box .date { margin-left: 0; }
.article-page .m-seclabel,
.m-seclabel {
display: block;
margin: 0 0 2px;
padding: 0 0 6px;
border-top: 0;
border-bottom: 2px solid #e0dfc7;
font-size: 15px;
color: #8F8E7D;
}
/* the menu follows the list, so the gap belongs above the menu */
.article-page #side-column ul#menu-box { padding-top: 18px; border-top: 2px solid #e0dfc7; }
#navigation-list-box .item,
#navigation-list-box .date {
background-color: transparent;
padding: 8px 0;
font-size: 12px;
line-height: 1.35;
border-bottom: 1px solid #ece9cf;
}
#navigation-list-box .item .time { display: block; font-size: 11px; margin-bottom: 2px; }
#navigation-list-box .item br { display: none; }
/* -- archive --------------------------------------------------------------- */
/* Years stay a rail, the calendars share the rest two across - the template
drops a
after every second month, so the float pairing
has to stay a pair. */
#content.archive-page { grid-template-columns: 158px 74px minmax(0, 1fr); column-gap: 20px; }
.archive-page #side-column { grid-column: 1; }
.archive-page #navigation-list-column { grid-column: 2; width: auto; padding-top: 0; }
.archive-page #archive-column { grid-column: 3; }
#archive-box { overflow: hidden; }
#archive-box .month-calendar { float: left; width: 48%; margin-right: 2%; }
#archive-box .month-calendar table th { font-size: 16px; }
#archive-box .month-calendar table td { height: 28px; font-size: 13px; }
#archive-box .month-calendar table td a { line-height: 28px; }
#archive-box .month-calendar table td.live-link { font-size: 9px; white-space: nowrap; }
ul#year-list li { font-size: 16px; margin-left: 0; }
ul#year-list li a { padding-left: 8px; }
/* -- list pages ------------------------------------------------------------ */
#index-list .date th { font-size: 20px; }
#index-list tr.entry > td.side-bar { width: 52px; min-width: 52px; }
#index-list .entry h1 { font-size: 15px; }
#index-column .box { margin-right: 0; }
/* -- text pages ------------------------------------------------------------ */
#text-box h1 { font-size: 30px; }
#text-box h1.first { font-size: 30px; line-height: 1.2; }
#text-box h2 { font-size: 20px; }
} /* end TABLET */
/* ===========================================================================
WIDE TABLET - landscape iPad: enough room for the third column back
=========================================================================== */
@media only screen and (min-width: 1000px) and (max-width: 1024px) and (min-height: 521px),
only screen and (min-width: 1025px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
#content { grid-template-columns: 240px minmax(0, 1fr); column-gap: 36px; }
#content.article-page { grid-template-columns: 268px minmax(0, 1fr); grid-template-rows: min-content 1fr; }
#content.archive-page { grid-template-columns: 200px 90px minmax(0, 1fr); column-gap: 28px; }
#navigation-list-box .item,
#navigation-list-box .date { font-size: 13px; }
#archive-box .month-calendar table td { height: 32px; font-size: 14px; }
#archive-box .month-calendar table td a { line-height: 32px; }
} /* end WIDE TABLET */