/* PCNews.ru CSS Document */ /* General font and clear */ * { margin: 0px; padding: 0px; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #4d4d4d; } h1, h2, h3, h4, h5, h6, p { font-style: normal; font-weight: normal; margin-top: 15px; margin-bottom: 15px; } a { text-decoration: none; } a:link { color: #004775; } a:visited { color: #8F8E7D; } a:hover { text-decoration: underline; } /* Help classes */ .clearer { clear: both; } /* General layout */ html { height: 100%; width: 100%; background-color: white; } body { height: 100%; margin: 0px; padding: 0px 20px; background-color: white; min-width: 1000px; } #page { height: auto; min-height: 100%; margin-left: auto; margin-right: auto; background-color: #fffddf; min-width: 960px; max-width: 1500px; position: relative; } #article-box>img { display: block; } .with-adlinks#page #footer-2nd, .with-adlinks#page #footer, .with-adlinks#page #footer-adlinks { position: static; } .with-adlinks#page #footer-adlinks { background-color: #FFF; } #header { height: 90px; width: 100%; padding-top: 20px; background-color: white; } #header-2nd { height: 35px; padding-top: 10px; width: 100%; background-color: white; background-image:url('/media/i/header-live-arrow.gif'); background-position: right bottom; background-repeat: no-repeat; } #footer-2nd { height: 25px; padding-top: 10px; width: 100%; background-color: #e0dfc7; position: absolute; bottom: 80px; } #footer { height: 80px; width: 100%; padding-bottom: 2px; background-color: #ffffff; position: absolute; bottom: 0px; } #content { width: 100%; padding-bottom: 100px; } .column { display: block; float: left; padding-top: 30px; margin-bottom: 30px;} .horz-menu { list-style: none; margin: 0px; padding: 0px; } .horz-menu li { float: left; width: auto; } /* Header */ #header { } #logo { width: 135px; height: 90px; float: left; background-image: url('/media/i/logo-red.gif'); background-repeat: no-repeat; background-position: left bottom; } #logo a { display: block; height: 100%; width: 100%; } #banner { height: 90px; width: 760px; margin-left: 10px; float: left; } /* Header 2nd */ #header-2nd ul.horz-menu { height: 35px; width: 100%; display: block; } #header-2nd li.topic { height: 28px; padding: 7px 3px 0px 3px; line-height: 15px; } #header-2nd li.topic a { display: block; height: 18px; padding: 5px 7px 0px 7px; color: #004775; } #header-2nd li.topic a:hover { background-color: #004775; color: white; text-decoration: none; } /* Selected topic. The cream fill on its own is #fffddf against the header's white - a difference you have to hunt for - so the tab carries its weight with a solid top rule and bold text, and keeps the fill to stay joined to the page below it, which is the same cream. Padding absorbs the borders (7-3 top, 3-1 sides) so the row lines up with the tabs either side of it. */ #header-2nd li.current-topic { background-color: #fffddf; border-top: 3px solid #004775; border-left: 1px solid #e0dfc7; border-right: 1px solid #e0dfc7; padding: 4px 2px 0px 2px; } #header-2nd li.current-topic a { color: #004775; font-weight: bold; } #header-2nd li.current-topic a:hover { background-color: transparent; color: #004775; } #header-2nd li.more-topics { display: block; color: #004775; padding: 12px 10px 5px 10px; line-height: 15px; } /* The selected topic can be one of the overflow entries, in which case nothing in the bar was marked at all - the "ещё" control now shows that it holds it. */ #header-2nd li.more-topics-active { background-color: #fffddf; border-top: 3px solid #004775; padding-top: 9px; } #header-2nd li.more-topics-active a.popup-more-topics-anchor { font-weight: bold; } #header-2nd li.search { float: right; } #header-2nd li.search { height: 35px; width: 250px; text-align: right; } #header-2nd li.search form { padding: 9px 0px 0px 0px; margin: 0px; height: 25px; width: 100%; } #header-2nd li.search form input { margin: 0px; padding: 0px; vertical-align: top; height: 19px; line-height: 19px;} #header-2nd li.search form input.search-box { height: 16px; width: 198px; border: 0px; padding: 3px 5px 0px 5px; display: block; float: left; font-size: 11px; line-height: 15px; background-image: url('/media/i/searchbox.gif'); background-repeat: no-repeat; } #header-2nd li.search form .search-but { height: 19px; width: 24px; display: block; float: left; background-image: url('/media/i/enter-icon.gif'); background-position: center 2px; background-repeat: no-repeat; background-color: white; } #header-2nd li.login-logout { float: right; height: 18px; margin-top: 12px; margin-left: 3%; margin-right: 3%; text-align: left; } #header-2nd .live { float: right; padding-right: 10px; padding-top: 12px; padding-left: 10px; text-align: right; display: block; height: 25px; } .live-current#header-2nd .live { background-color: #fffddf; } .live a { text-decoration: underline; font-style: italic; font-weight: bold; } .live a.live-L { color: #F15A24; } .live a.live-I { color: #FBB03B; } .live a.live-V { color: #9E005D; } .live a.live-E { color: #29ABE2; } .live a.live-excl { color: #662D91; } /* Footer 2nd */ #footer-2nd ul { } #footer-2nd li { font-size: 14px; } #footer-2nd a { color: #666; } #footer-2nd .all-week { font-size: 12px; margin-left: 40px; height: 17px; padding-left: 50px; background-image:url('/media/i/all-week.gif'); background-position: left 1px; background-repeat: no-repeat; } #footer-2nd .archive { margin-left: 33%; } #footer-2nd .rss-link { float: right; margin-right: 40px; } /* Footer */ #footer ul { } #footer li { font-size: 12px; } #footer a { color: #808080; } #footer .about a { display: block; margin-left: 40px; padding-right: 57px; background-image: url('/media/i/tiny-logo.gif'); background-position: right 3px; background-repeat: no-repeat; } #footer .additional-menu { margin-left: 20px; } #footer .additional-menu .menu-item { margin-right: 20px; } #footer .email { float: right; margin-right: 40px; } #footer .email a { width: 25px; height: 16px; display: block; text-align: center; } #footer .email a img { border: 0px; margin-top: 4px; } /* Footer Ad links*/ #footer-adlinks { margin-bottom: 35px;} #footer-adlinks ul { } #footer-adlinks li { font-size: 12px; } #footer-adlinks a { color: #808080; } #footer-adlinks ul.horz-menu li.menu-item { margin-right: 20px; } /* Content */ .box { padding: 1px 0px 1px 0px; /* falling out margins correction */ line-height: normal; margin-bottom: 15px; overflow: hidden} /* -------------------------------------------------------------------- HEADER POPUPS -------------------------------------------------------------------- */ /* login popup */ .popup-holder { float: left; } a.popup-login-anchor { display: block; padding-left: 17px; text-decoration: none; color: #4d4d4d; background-image:url("/media/i/login-icon.gif"); background-position: left 2px; background-repeat: no-repeat; } a.popup-login-anchor:hover { text-decoration: none; } a.popup-login-anchor .text { border-bottom: dashed 1px; } .login-box-contracted { display: none; } .login-box { display: block; background-color: #fff; padding: 14px 19px 14px 19px; border: solid #83ab3a 1px; text-align: center; z-index: 100; position: absolute; top: -15px; left: -15px; } .login-box .title, .login-box .register, .login-box .passw { margin-bottom: 15px; } .login-box .email, .login-box .subm { margin-bottom: 7px; } .login-box a { color: #83ab3a; } .login-box .title a { padding-left: 17px; padding-bottom: 2px; text-decoration: none; color: #4d4d4d; background-image:url("/media/i/login-icon.gif"); background-position: left 2px; background-repeat: no-repeat; } .login-box .title a:hover { text-decoration: none; } .login-box .title a .text { border-bottom: solid 1px; } .login-box .passw input, .login-box .email input { background-color: #ffffff; border-top: solid #8d8d8d 1px; border-left: solid #d9d9d9 1px; border-right: solid #d9d9d9 1px; border-bottom: solid #e5e5e5 1px; height: 16px; width: 130px; font-size: 11px; padding: 2px; margin-top: 7px; } .login-box .subm input { padding: 1px 8px 1px 8px; } #popup-iframe { display: none; z-index: 99; background-color: #0FF; border: none; } #news-select-box { border-color: #F15A24; } #news-select-box a { color: #F15A24; } #blogs-select-box { border-color: #9E005D; } #blogs-select-box a { color: #9E005D; } #articles-select-box { border-color: #FBB03B; } #articles-select-box a { color: #FBB03B; } #market-select-box { border-color: #00A99D; } #market-select-box a { color: #00A99D; } #press-select-box { border-color: #662D91; } #press-select-box a { color: #662D91; } #files-select-box { border-color: #29ABE2; } #files-select-box a { color: #29ABE2; } #add-press-release { background-color:#8260AC; background-image:url('/media/i/add-release.gif'); background-repeat:no-repeat; font-family:Arial,Helvetica,sans-serif; font-size:12px; height:17px; left:140px; padding-left:8px; padding-top:2px; position:relative; top:50px; width:135px; } #add-press-release a { color:#FFFFFF; } /* logout box */ a.popup-logout-anchor { display: block; padding-left: 17px; text-decoration: none; color: #83AB3A; background-image:url("/media/i/user-icon-green.gif"); background-position: left 2px; background-repeat: no-repeat; } #header-2nd a.popup-logout-anchor { color: #4d4d4d; } a.popup-logout-anchor:hover { text-decoration: none; } a.popup-logout-anchor .text { border-bottom: solid 1px; } .logout-box-contracted { display: none; } .logout-box { display: block; background-color: #fff; padding: 14px 19px 14px 19px; border: solid #83ab3a 1px; text-align: center; z-index: 100; position: absolute; top: -15px; left: -20px; } .logout-box .title { margin-bottom: 15px; } .logout-box .title a { padding-left: 17px; text-decoration: none; color: #4d4d4d; background-image:url("/media/i/user-icon-green.gif"); background-position: left 2px; background-repeat: no-repeat; } .logout-box .title a:hover { text-decoration: none; } .logout-box .title a .text { border-bottom: solid 1px; } .logout-box .exit a { padding: 2px 20px 2px 20px; color: white; background-color: #83ab3a; } .logout-box .exit a:hover { text-decoration: none; } /*.logout-box a { color: #83ab3a; }*/ /* more-topics popup */ #header-2nd li.more-topics .popup-holder { display: block; float: left; } #header-2nd li.more-topics a.popup-more-topics-anchor { text-decoration: none; color: #004775; } #header-2nd li.more-topics a.popup-more-topics-anchor:hover { background-color: white; color: #004775; text-decoration: none; } #header-2nd li.more-topics a.popup-more-topics-anchor .title { border-bottom: dashed 1px; } #header-2nd li.more-topics .more-topics-box-contracted { display: none; } .more-topics-box { display: block; background-color: #ffffff; border: solid #004775 1px; padding: 2px 2px 2px 2px; z-index: 100; position: absolute; top: 20px; left: -12px; } .more-topics-box a.item { display: block; text-decoration: none; padding: 5px 10px 4px 10px; color: #004775; } .more-topics-box a.item:hover { text-decoration: none; background-color: #004775; color: white; } .more-topics-box a.item:hover .title{ text-decoration: underline; } /* mark the selected topic inside the overflow list too - padding absorbs the rule */ .more-topics-box a.item.current-item { background-color: #fffddf; font-weight: bold; border-left: 3px solid #004775; padding-left: 7px; } .start-page .box .all .popup-holder { position: static; } /* --------------------------------------------------------------------------- FRONT PAGE --------------------------------------------------------------------------- */ /* Column and box layout */ /* News was a fixed 380px column, sized for the old 1226px page. Since the page grows to 1500px all the extra width went to the rubber columns and news ended up ~120px narrower than Articles. It grows with them now: 380px up to the old page width (so nothing changes there), a share of the width beyond it. The wrapper steps over it by the same amount plus the gap. */ .start-page #column1 { width: max(380px, 31%); max-width: none; margin-left: 20px; } .start-page #rubber_columns_wrapper { margin-left: calc(max(380px, 31%) + 20px); } .start-page #rubber_columns_wrapper #column2 { width: 46%; margin-left: 3%; } .start-page #rubber_columns_wrapper #column3 { width: 45%; float: right; margin-left: 2%; } .start-page .box { float: left; width: 100%; clear: both; } .start-page .box a { color: #4d4d4d; } .start-page .box h1 { font-size: 38px; } /* 12px was the site's original default for every listing. These headline links are the entire content of the front page, so they follow the article body up rather than staying at two thirds its size. */ .start-page .box h2 { font-size: 15px; line-height: 1.35; } .start-page .box h2.highlighted { font-size: 20px; width: 100%; } .start-page .box h2.highlighted a img.image { border: 0px; } .start-page .box h2.highlighted a:hover .title { text-decoration: underline; } .start-page h1, .start-page h2, .start-page h2.with-icon, .start-page p { clear: both; } /*.start-page {padding-bottom: 5px !important}*/ /* box title */ .start-page .box h1 { float: left; clear: both; display: block; width: 100%; margin-bottom: 15px; } .start-page .box h1 .title { display: block; float: left; margin-top: 17px; } .start-page .box .subtitle {font-size: 13px; position: relative; left:5px; top:-24px; height:13px; color: #999} .start-page .box h1 .flash { display: block; float: left; font-size: 11px; margin-left: -3px; } .start-page .box h1 .number { display: block; float: left; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; color: #fffddf; } .start-page .box h1 .descr { display: block; float: left; margin-top: 16px; margin-left: 4px; } .start-page #press-box h1 .flash { margin-left: -25px; } /* box entries */ .start-page .box h2 { margin-top: 5px; margin-bottom: 5px; clear: both; display: block; float: left; width: 100%; } .start-page .box h2.with-icon { float: left; width: 100%; } .start-page .box h2.with-icon a { width: 100%; height: 100%; display: block; } .start-page .box h2.with-icon span.icon { display: block; width: 25px; float: left; } .start-page .box h2.with-icon a span.icon img { border: 0px; } .start-page .box h2.with-icon span.title { display: block; margin-left: 25px; } /* box "more" */ .start-page .box .all { margin-top: 15px; float: left; clear: both; width: 100%; } .start-page .box .all a.label:hover { text-decoration: none; } .start-page .box .all a.label:hover .title { text-decoration: underline; } /* box colors */ .start-page #news-box h1 a, .start-page #news-box h1 .flash .descr, .start-page #news-box .all, .start-page #news-box .all a { color: #F15A24; } .start-page #blogs-box h1 a, .start-page #blogs-box h1 .flash .descr, .start-page #blogs-box .all, .start-page #blogs-box .all a { color: #9E005D; } .start-page #articles-box h1 a, .start-page #articles-box h1 .flash .descr, .start-page #articles-box .all, .start-page #articles-box .all a { color: #FBB03B; } .start-page #market-box h1 a, .start-page #market-box h1 .flash .descr, .start-page #market-box .all, .start-page #market-box .all a { color: #00A99D; } .start-page #press-box h1 a, .start-page #press-box h1 .flash .descr, .start-page #press-box .all, .start-page #press-box .all a{ color: #662D91; } .start-page #files-box h1 a, .start-page #files-box h1 .flash .descr, .start-page #files-box .all, .start-page #files-box .all a { color: #29ABE2; } .start-page #news-box h1 .flash .number { background-image: url('/media/i/news-flash.gif'); } .start-page #news-box h1 .flash .descr { width: 120px; } .start-page #articles-box h1 .flash .number { background-image: url('/media/i/articles-flash.gif'); } .start-page #blogs-box h1 .flash .number { background-image: url('/media/i/blogs-flash.gif'); } .start-page #blogs-box h1 .flash .descr { width: 120px; } .start-page #market-box h1 .flash .number { background-image: url('/media/i/market-flash.gif'); } .start-page #press-box h1 .flash .number { background-image: url('/media/i/press-flash.gif'); } .start-page #files-box h1 .flash .number { background-image: url('/media/i/files-flash.gif'); } /* news box */ .start-page #news-box h2 .time { display: block; float: left; font-size: 11px; } .start-page #news-box h2 a { display: block; margin-left: 50px; } .start-page #news-box h2 .time { width: 50px; color: #8F8E7D; } .start-page #news-box h2.highlighted { background-color: #ffe3c4; margin-bottom: 15px; } .start-page #news-box h2.highlighted a { display: block; margin: 10px; } .start-page #news-box h2.highlighted img { width: 100%; display: block; margin-bottom: 15px; } .start-page #news-box h2.highlighted span.title { display: block; margin-bottom: 15px; font-weight: bold; } /* market box */ .start-page #market-box h2.highlighted { background-color: #c4eed6; margin-bottom: 15px; } .start-page #market-box h2.highlighted a { display: block; margin: 10px; } .start-page #market-box h2.highlighted img { width: 100%; display: block; margin-bottom: 15px; } .start-page #market-box h2.highlighted span.title { display: block; margin-bottom: 15px; font-weight: bold; } .start-page #market-box h2.with-icon span.icon { width: 80px; } .start-page #market-box h2.with-icon span.title { margin-left: 80px; } .start-page #market-box h2.with-icon span.price { margin-left: 80px; display: block; } .start-page #market-box h2.with-icon span.icon img { border: solid #00A99D 1px; } .start-page #market-box h2.with-icon a span.price { color: #00A99D; font-weight: bold; font-size: 18px; } .start-page #market-box h2.with-icon a, .start-page #market-box h2.with-icon a:hover { text-decoration: none; } .start-page #market-box h2.with-icon a:hover .title { text-decoration: underline; } .start-page #market-box h2.with-icon a:hover .price { text-decoration: underline; } /* top20 box */ .start-page #top20-box .top-pic { text-align: center; margin-right: 5px; background-image:url('/media/i/top20-top-pic-bg.jpg'); background-position: bottom; background-repeat: repeat-x; } .start-page #top20-box .top-pic a { height: 62px; display: block; background-image:url('/media/i/top20.jpg'); background-position: center bottom; background-repeat: no-repeat; } .start-page #top20-box .shadow-wrapper { padding-bottom: 5px; padding-right: 5px; background-image: url('/media/i/top-20-shadow.gif'); background-position: 5px 5px; background-repeat: no-repeat; } .start-page #top20-box .title-box { padding: 1px 5px 1px 5px; text-align: center; background-color: white; border: solid #faf3d2 2px; border-top: none; } .start-page #top20-box .title-box h2 { font-size: 18px; margin-bottom: 0px; float: none; width: auto; } .start-page #top20-box .title-box h3 { font-size: 12px; margin-top: 0px;} .start-page #top20-box p.subscribe-all { text-align: center; } /* advert-box */ #advert-box { height: 400px; width: 240px; margin-left: auto; margin-right: auto; float: none; } /* files box */ .start-page #files-box h2 .time { display: block; float: left; font-size: 11px; } .start-page #files-box h2 .time { width: 50px; color: #8F8E7D; } .start-page #files-box h2 a { display: block; margin-left: 0px; } .start-page #files-box h2.highlighted { background-color: #bad8d7; margin-bottom: 15px; } .start-page #files-box h2.highlighted a { display: block; margin: 10px; } .start-page #files-box h2.highlighted img { width: 100%; display: block; margin-bottom: 15px; } .start-page #files-box h2.highlighted span.title { display: block; margin-bottom: 15px; font-weight: bold; } /* Select box popup */ .start-page .box .all { display: block; height: 15px; } .start-page .box .all .label { display: block; float: left; } .start-page .box .all .popup-holder { display: block; float: left; margin-left: 2px; height: 16px; } .start-page .box .all .select-box-contracted a { display: none; } .start-page .box .all .select-box-contracted a.selected { display: block; float: left; border-bottom: dashed 1px; } .start-page .box .all .select-box-contracted a.selected:hover { text-decoration: none; } .select-box { display: block; background-color: #fffddf; padding: 14px; border: solid 1px; z-index: 100; position: relative; top: -15px; left: -15px; width: 140px; } .select-box a { display: block; height: 15px; } .select-box a { text-decoration: none; } .select-box a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- INDEX PAGE --------------------------------------------------------------------------- */ /* layout */ #side-column { width: 300px; } #index-column { float: none; margin-left: 300px; } #side-column .box { margin-left: 45px; } #index-column .box { margin-left: 35px; margin-right: 12%; } #index-column { padding-top: 1px; } /* advert item box */ #advert-item { margin-top: 30px; padding: 0px; } #advert-item .side-bar { width: 105px; } #advert-item td { vertical-align: top; } #advert-item .description-bar h1 { font-size: 18px; margin-top: 0px; margin-bottom: 4px; } #advert-item .description-bar p { font-size: 12px; margin-top: 0px; } #advert-item .description-bar p a { color: #4d4d4d; } #advert-item .description-bar p a:hover { text-decoration: none; } #advert-item .description-bar h1 a { color: #4d4d4d; } #advert-item .description-bar h1 .source { font-size: 10px; color: #8F8E7D; } #advert-item .description-bar h1 .source a { color: #8F8E7D; } #advert-item .side-bar .date { width: 79px; height: 16px; margin-top: 5px; padding-left: 7px; background-image: url('/media/i/dateflag-news.gif'); background-repeat: no-repeat; color: #FFFDDF; } .news-category #advert-item .side-bar .date { background-image: url('/media/i/dateflag-news.gif'); } .articles-category #advert-item .side-bar .date { background-image: url('/media/i/dateflag-articles.gif'); } .blogs-category #advert-item .side-bar .date { background-image: url('/media/i/dateflag-blogs.gif'); } .market-category #advert-item .side-bar .date { background-image: url('/media/i/dateflag-market.gif'); } .press-category #advert-item .side-bar .date { background-image: url('/media/i/dateflag-press.gif'); } .files-category #advert-item .side-bar .date { background-image: url('/media/i/dateflag-files.gif'); } #advert-item .side-bar .image { margin-top: 7px; } #advert-item .side-bar .image img { border: solid #faf4dc 1px; width: 83px; height: 83px; margin: 0px; display: block; } #advert-item .advert-rules { display: block; float: left; width: 100px; height: 15px; background-image: url('/media/i/advert-rules.gif'); background-repeat: no-repeat; background-position: center left; } /* show all triangle */ #index-column .show-all { width: 95px; height: 85px; float: right; padding-top: 6px; text-align: right; font-size: 9px; line-height: 11px; background-image: url("/media/i/index-show-all-triangle.gif"); background-repeat: no-repeat; background-position: top right; margin-top: 70px; } #index-column .show-all a { color: #004775; } /* index list box */ #index-list { display: block; margin-top: 70px; } #index-list .ke-break td { height: 30px; } #index-list .date th { color: #8F8E7D; font-size: 24px; font-weight: normal; text-align: left; padding-bottom: 30px; } #index-list td { vertical-align: top; } #index-list .side-bar { width: 85px; text-align: right; padding-right: 20px; } #index-list .side-bar .time { font-size: 12px; } #index-list .entry td { padding-top: 7px; padding-bottom: 8px; } #index-list .entry .side-bar { color: #8F8E7D; } /* source after the title in the news and articles lists ("@TheNextWeb.ru") */ #index-list .item-source { color: #8F8E7D; font-size: 12px; font-weight: normal; white-space: nowrap; margin-left: 4px; } #index-list .entry h1 { font-size: 16px; line-height: 1.35; margin-top: 0px; margin-bottom: 0px; } #index-list .entry h1 a { color: #000000; } #index-list .entry h1 .source { color: #8F8E7D; font-size: 11px; } #index-list .entry h1 .source a { color: #8F8E7D; } #index-list .entry .comments-flag a { color: #fffddf; } #index-list .highlighted td { padding-top: 30px; padding-bottom: 30px; } #index-list .highlighted .time { display: block; margin-top: 5px; } #index-list .highlighted .image { margin-top: 7px; } #index-list .highlighted .image img { border: solid #faf4dc 1px; width: 83px; height: 83px; display: block; } #index-list .highlighted h1 { font-size: 20px; margin-top: 0px; } #index-list .highlighted h1 .title a { color: #4d4d4d; } #index-list .highlighted p { font-size: 15px; color: #4D4D4D; margin: 7px 0px 0px 0px; } #index-list .highlighted p a.text { color: #4d4d4d; } #index-list .highlighted p a.text:hover { text-decoration: none; } /* advert box */ #side-column #advert-box { margin-left: 30px; margin-bottom: 45px; } /* menu box */ #side-column ul#menu-box { margin-bottom: 15px; margin-left: 45px; padding-top: 40px; /* height: 250px */ } ul#menu-box { display: block; padding: 0px; list-style: none; } ul#menu-box li { margin: 0px; padding: 0px; display: block; } ul#menu-box li { font-size: 16px; margin-top: 5px; margin-bottom: 5px; } ul#menu-box li.selected { margin-bottom: 23px; } #menu-box .selected .item-title { font-size: 36px; } #menu-box .archive .item-title a { color: #4d4d4d; text-decoration: none; } #menu-box .news .item-title a { color: #F15A24; } #menu-box .blogs .item-title a { color: #9E005D; } #menu-box .articles .item-title a { color: #FBB03B; } #menu-box .market .item-title a { color: #00A99D; } #menu-box .press .item-title a { color: #662D91; } #menu-box .files .item-title a { color: #29ABE2; } #menu-box .select-options { display: block; margin-top: 10px; margin-left: 5px; } #menu-box .select-options a { display: block; padding-left: 20px; height: 17px; font-size: 12px; color: #4d4d4d; } #menu-box .select-options .selected { background-repeat: no-repeat; color: #004775; font-weight: bold; background-image: url('/media/i/mark-news.gif'); } #menu-box .select-options a.selected { text-decoration: none; } #menu-box .news .select-options .selected { background-image: url('/media/i/mark-news.gif'); } #menu-box .blogs .select-options .selected { background-image: url('/media/i/mark-blogs.gif'); } #menu-box .articles .select-options .selected { background-image: url('/media/i/mark-articles.gif'); } #menu-box .market .select-options .selected { background-image: url('/media/i/mark-market.gif'); } #menu-box .press .select-options .selected { background-image: url('/media/i/mark-press.gif'); } #menu-box .files .select-options .selected { background-image: url('/media/i/mark-files.gif'); } /* sources box */ #side-column #sources-box { margin-left: 45px; } #sources-box h1 { font-size: 16px; color: #004775; } #sources-box a.item { display: block; height: 18px; padding-left: 20px; color: #8F8E7D; } #sources-box a.selected { color: #004775; background-image: url('/media/i/mark-blue.gif'); background-repeat: no-repeat; background-position: top left; } /* Comments flag */ .comments-flag { font-size: 11px; color: #fffddf; padding-bottom: 4px; margin-left: 5px; border: solid black 0px; background-image: url('/media/i/comments-flag-2.gif'); background-position: center bottom; background-repeat: no-repeat; } .comments-flag a { color: #fffddf; background-image: url('/media/i/comments-flag-1.gif'); background-repeat: repeat-x; background-position: left top; padding-left: 4px; padding-right: 4px;} .comments-flag a:hover { text-decoration: none; } /* info-box */ #index-column .info-box-holder { margin-right: 0px; margin-top: -1px } #index-column #info-box { margin-left: 105px; } .info-box-holder { padding-top: 0px; } .info-box-holder { height: 30px; } .info-box-holder-index{padding-left:440px} #info-box { height: 21px; float: left; padding-top: 5px; padding-left: 10px; display: none; background-image: url("/media/i/info-box-bar.gif"); background-position: bottom left; background-repeat: no-repeat; } #info-box .text { margin-right: 10px; float: left; color: #FFFDDF; } #info-box .text a { color: #FFFDDF; } #info-box .ctrl { width: 40px; height: 21px; float: left; background-image: url("/media/i/info-box-bar.gif"); background-position: bottom right; background-repeat: no-repeat; } #info-box .ctrl a { display: block; margin: -1px auto 0px auto; width: 18px; height: 18px; background-image: url("/media/i/info-box-close-but.gif"); background-position: center; background-repeat: no-repeat; } /* paginator */ #index-column #paginator { margin-top: 45px; margin-left: 100px; } #paginator ul { display: block; margin: 0px; padding: 0px; list-style: none; height: 20px; } #paginator ul li { display: block; float: left; height: 20px; margin: 0px 15px 0px 0px; padding: 0px 5px; list-style: none; color: #4d4d4d; font-size: 12px; line-height: 20px; } #paginator ul li.selected { background-color: #8F8E7D; } #paginator ul li.selected a { text-decoration: none; color: #fffddf; } #paginator ul li a { color: #4d4d4d; line-height: 20px; display: block; float: left; } #paginator ul li.prev { margin-right: 15px; padding: 0px; } #paginator ul li.prev a { padding-left: 40px; height: 20px; background-image:url('/media/i/arrow-left.gif'); background-position: left center; background-repeat: no-repeat; } #paginator ul li.next { padding: 0px; } #paginator ul li.next a { padding-right: 40px; height: 20px; background-image:url('/media/i/arrow-right.gif'); background-position: right center; background-repeat: no-repeat; } /* --------------------------------------------------------------------------- ARTICLE PAGE --------------------------------------------------------------------------- */ #navigation-list-column { width: 120px; padding-top: 130px; } #date-box { padding-top: 23px; } #date-box .date { width: 79px; height: 16px; padding-left: 7px; margin-left: auto; margin-right: auto; background-image: url('/media/i/dateflag-news.gif'); background-repeat: no-repeat; color: #FFFDDF; } .news-category #date-box .date { background-image: url('/media/i/dateflag-news.gif'); } .articles-category #date-box .date { background-image: url('/media/i/dateflag-articles.gif'); } .blogs-category #date-box .date { background-image: url('/media/i/dateflag-blogs.gif'); } .market-category #date-box .date { background-image: url('/media/i/dateflag-market.gif'); } .press-category #date-box .date { background-image: url('/media/i/dateflag-press.gif'); } .files-category #date-box .date { background-image: url('/media/i/dateflag-files.gif'); } #navigation-list-box .up { height: 34px; width: 20px; padding: 20px 50px 10px 50px; background-image: url('/media/i/nav-list-arrow-up-back.gif'); background-repeat: no-repeat; background-position: left bottom; } #navigation-list-box .up a { width: 100%; height: 100%; display: block; background-image: url('/media/i/arrow-up.gif'); background-position: center center; background-repeat: no-repeat; } #navigation-list-box .down { height: 34px; width: 20px; padding: 15px 50px 35px 50px; background-image: url('/media/i/nav-list-arrow-down-back.gif'); background-repeat: no-repeat; background-position: left bottom; } #navigation-list-box .down a { width: 100%; height: 100%; display: block; background-image: url('/media/i/arrow-down.gif'); background-position: center center; background-repeat: no-repeat; } #navigation-list-box .item, #navigation-list-box .date { background-color: #F5F3D6; padding: 10px 10px 10px 15px; font-size: 9px; line-height: 12px; } #navigation-list-box .item a { color: #4d4d4d; } #navigation-list-box .date { padding-top: 20px; padding-bottom: 20px; color: #8F8E7D; } #navigation-list-box .item .time { color: #8F8E7D; } #navigation-list-box .selected { font-weight: bold; } #navigation-list-box .selected a { text-decoration: none; } .news-category #navigation-list-box .selected a { color: #F15A24; } .blogs-category #navigation-list-box .selected a { color: #9E005D; } .articles-category #navigation-list-box .selected a { color: #FBB03B; } .market-category #navigation-list-box .selected a { color: #00A99D; } .press-category #navigation-list-box .selected a { color: #662D91; } .files-category #navigation-list-box .selected a { color: #29ABE2; } .top20-category #navigation-list-box .selected a { color: #99988A; } .meta-data { font-family: Arial, Helvetica, sans-serif; color: #99988A; font-size: 11px; } #article-box h1 .meta-data {display: block; margin-top: 7px; } #article-column { padding-top: 0px; float: none; margin-left: 140px; } #article-column .box { margin-left: 20px; margin-right: 7%; } /* --------------------------------------------------------------------------- ARTICLE PAGE - neighbouring items as a right column --------------------------------------------------------------------------- Moving the section menu out from the left freed about 300px, and the reading column is deliberately capped, so widening the text would only push the line length back past what is comfortable. The space takes content instead: the list of neighbouring items, which was living in a 120px rail at 9px - narrow enough that three-word titles wrapped over five lines. At 300px it is a legible column, and the article spans the rest. The list is first in source order, which is what lets it float right past the article that follows it. On phone and tablet #content is a flex/grid container, where float and width are ignored, so those tiers keep placing it with order/grid-column exactly as before. */ /* The right column floats to the edge of #content, so with #page at 1500px the gutter between the text and that column opened to 250px. Capping the article page's content area at the width the layout actually needs - 45 + 860 text + 40 gutter + 300 column + 45 - and centring it holds the gutter at 40px instead of letting it grow with the window. */ #content.article-page { max-width: 1290px; margin-left: auto; margin-right: auto; } .article-page #navigation-list-column { float: right; width: 300px; padding-top: 0px; margin-top: 30px; margin-right: 45px; } .article-page #article-column { margin-left: 45px; margin-right: 385px; } .article-page #article-column .box { margin-left: 0px; margin-right: 0px; } /* The rail's up/down arrow graphics are 120px-wide furniture that does not survive being three times as wide. */ .article-page #navigation-list-box .up, .article-page #navigation-list-box .down { display: none; } .article-page #navigation-list-box .item, .article-page #navigation-list-box .date { font-size: 14px; line-height: 1.4; padding: 10px 12px; } .article-page #navigation-list-box .item .time { font-size: 12px; } /* The column needs saying what it is now that it is not an unlabelled rail tucked beside the text. The element is already in base_single.twig for the phone and tablet layouts. */ .article-page .m-seclabel { display: block; margin: 0px 0px 6px 0px; padding-bottom: 6px; border-bottom: solid #e0dfc7 2px; font-size: 15px; color: #8F8E7D; } #article-column #info-box { float: left; } #article-column #article-box { margin-top: 30px; } #article-box h1 { font-size: 30px; line-height: 1.2; color: #000; } #article-box h1 .comments-flag { vertical-align: text-top; } #article-box { color: #000; } /* Article body type. 12px/15px was the site's original body setting, inherited by the article text. A survey of what comparable sites set for article copy, measured at 1440px: BBC 18px/616px, RBC 17px/600px, Lenta 17px/620px, Ars Technica 16px/624px, Guardian 17px/620px, Habr 16px/740px - 16 to 18px, with the column held to 600-740px so a line runs 60-96 characters. (iXBT and OpenNet run 16px but let the line reach 1026px / ~130 characters, which is what this page did at 990px before the cap below.) 16px with a 1.6 line and a 760px column puts this at roughly 95 characters - the wide end of that range, matching Habr, which is the closest comparison: Russian-language technology news. The column cap is what does the work; raising the size without it only makes the lines longer. */ #article-box { font-size: 16px; line-height: 1.6; } #article-box p { font-size: 16px; line-height: 1.6; margin-top: 1em; margin-bottom: 1em; } #article-box p, #article-box ul, #article-box ol, #article-box blockquote { max-width: 860px; } #article-box .meta-data { font-size: 12px; } #article-box .copyrights, #article-box .copyrights a { color: #99988A; } #article-box .image { display: block; margin: 30px 0px 30px 0px; } #article-box .image img { display: block; margin: 0px auto; } /* --------------------------------------------------------------------------- ARTICLE PAGE - imported content cannot be allowed to widen the page --------------------------------------------------------------------------- Everything inside #article-box and #text-box was written for someone else's layout, so none of its dimensions are ours to trust: source images run past 3000px, tables arrive with a hard-coded width, and code samples, package names and Maven coordinates come through as single tokens with no break opportunity in them. Any one of those widens the page rather than just its own paragraph, and then the whole document scrolls sideways. None of this costs anything when the content already fits - max-width only ever shrinks something too wide, and overflow-wrap does nothing until a word cannot fit its line. Note that it is deliberately break-word and not anywhere: break-word is ignored while the browser works out intrinsic width, which is what keeps this rule from quietly resizing a column that was sized on its content. The phone and tablet tiers, where the column is narrow enough that intrinsic width is exactly the problem, upgrade it. */ #article-box img, #text-box img { max-width: 100%; height: auto; } #article-box table, #text-box table { max-width: 100%; } /* pre-wrap rather than an overflow-x scroller. A scroller looks like the tidier answer and does not work: the article column is sized from its content, so the code block's longest line still sets the column's minimum width and the page widens anyway - measured at 444px against a 390px iPhone on the Netflix post, unchanged by overflow-x. Wrapping removes the long line instead of hiding it, and it spares the reader an inner horizontal scroller, which on a touch screen fights the page's own. */ #article-box pre, #text-box pre { max-width: 100%; white-space: pre-wrap; } #article-box, #text-box { overflow-wrap: break-word; } /* "Коротко": AI summary above the text, marked as generated. */ .item-summary { max-width: 860px; margin: 6px 0 22px; padding: 12px 18px 10px; background: #fbf8e6; border-left: 3px solid #C1272D; box-sizing: border-box; } .item-summary-head { font-weight: bold; font-size: 15px; color: #4d4d4d; margin-bottom: 4px; } .item-summary-head .ai-note { font-weight: normal; font-size: 12px; color: #99988A; margin-left: 8px; } .item-summary ul { margin: 6px 0; padding-left: 20px; } .item-summary li { margin: 5px 0; font-size: 15px; line-height: 1.45; } .item-summary-why { margin: 8px 0 2px; font-size: 15px; line-height: 1.45; } /* LIVE lists everything; a repeat grouped under another source is greyed. */ #live-items-box tr.item.repeat td { opacity: .5; } #live-items-box tr.item.repeat:hover td { opacity: 1; } /* "Об этом также пишут" - the same story from other sources, under the text. */ .story-links { max-width: 860px; margin: 28px 0 8px; padding: 14px 18px; background: #fbf8e6; border-left: 3px solid #e0dfc7; box-sizing: border-box; } .story-links h3 { margin: 0 0 8px; font-size: 16px; font-weight: bold; color: #4d4d4d; } .story-links ul { margin: 0; padding: 0; list-style: none; } .story-links li { margin: 7px 0; font-size: 15px; line-height: 1.4; } .story-links .story-source { font-weight: bold; color: #8F8E7D; margin-right: 4px; } .story-links .story-date { color: #99988A; font-size: 12px; white-space: nowrap; } /* --------------------------------------------------------------------------- ARTICLE PAGE - section menu under the neighbouring items --------------------------------------------------------------------------- On an index page #side-column is a genuine left rail: the section list and that section's period filters sit beside a list they actually filter. On a single page they have nothing to do with the story, so they do not get 300px next to it. They join the right-hand column instead, below the neighbouring items - clear:right is what drops this float under the one before it. Index pages are untouched. */ .article-page #article-box h1 { max-width: 860px; } .article-page #side-column { float: right; clear: right; width: 300px; padding-top: 0px; margin-top: 26px; margin-left: 0px; margin-right: 45px; } .article-page #side-column .box { margin-left: 0px; } .article-page #side-column ul#menu-box { margin-left: 0px; margin-bottom: 0px; padding-top: 14px; border-top: solid #e0dfc7 2px; } /* 36px is a headline's worth of type for a nav item in a 300px column. */ .article-page #menu-box .selected .item-title { font-size: 20px; } .article-page #menu-box li.selected { margin-bottom: 12px; } .article-page #menu-box .select-options { margin-left: 2px; } #comments-box { margin-top: 60px; } #comments-box ul { list-style: none; display: block; } #comments-box ul li { display: block; } #comments-box li { margin-bottom: 15px; } #comments-box ul ul { margin-left: 20px; margin-top: 15px; } #comments-box li > .text { margin-left: 15px; margin-top: 5px; } #comments-box li .answer-anchor { font-size: 10px; color: #8F8E7D; } #comments-box li .header .date, #comments-box li .header .time { font-size: 9px; color: #8F8E7D; } #comments-box li .header .author { padding-left: 17px; font-weight: bold; background-image: url('/media/i/user-icon-gray.gif'); background-repeat:no-repeat; background-position: left; } #comments-box li .header .author { color: #8F8E7D; } #comments-box li .header-logged .login-logout { float: left; margin-right: 5px; } #comments-box li .header-logged .date, #comments-box li .header-logged .time { font-size: 9px; color: #83AB3A; } #comments-box .popup-logout-anchor { font-weight: bold; } .logout-box .title a.green { color: #83AB3A; } .comment-form .comment-head, .comment-form .comment-head-logged, .contracted-comment-form .comment-head, .contracted-comment-form .comment-head-logged { height: 23px; color: #8F8E7D; } .comment-form .comment-head .title, .comment-form .comment-head-logged .title, .contracted-comment-form .comment-head .title, .contracted-comment-form .comment-head-logged .title { float: left; } .comment-form .comment-head, .comment-form .comment-head-logged, .contracted-comment-form .comment-head, .contracted-comment-form .comment-head-logged { background-image: url('/media/i/textarea-arrow.gif'); background-position: -50px bottom; background-repeat: repeat-x; } .comment-form .comment-head .login-logout { float: right; } .comment-form .comment-head-logged .login-logout { float: left; margin-left: 5px; } .comment-form .comment-text { border: solid #83AB3A 1px; border-top: 0px; background-color: white;} .comment-form .comment-text textarea { height: 120px; border: 0px; display: block; overflow: auto; } .comment-form#add-comment .comment-text textarea, .comment-form#add-reply .comment-text textarea { padding: 2% 2% 0% 2%; width: 96%; } .comment-form .anonymous-authorize { margin-top: 7px; background-color: #F2F5D0; width: 100%; } .comment-form .anonymous-authorize .label { padding-left: 5px; width: 62px; } .comment-form .anonymous-authorize .username .label, .comment-form .anonymous-authorize .username .input { vertical-align: bottom; height: 30px; } .comment-form .anonymous-authorize .username .label { font-size: 12px; color: #85AC3D; padding-bottom: 2px; } .comment-form .anonymous-authorize .username .input { background-image: url('/media/i/searchbox_transp.png'); background-repeat: no-repeat; background-position: left bottom; } .comment-form .anonymous-authorize .username .input input { margin-left: 10px; width: 190px; height: 17px; background: none; border: 0px; } .comment-form .anonymous-authorize .captcha .label, .comment-form .anonymous-authorize .captcha .img, .comment-form .anonymous-authorize .captcha .input { vertical-align: top; height: 40px; } .comment-form .anonymous-authorize .captcha .label { font-size: 10px; color: #8F8E7D; padding-top: 3px; } .comment-form .anonymous-authorize .captcha .img { width: 90px; } .comment-form .anonymous-authorize .captcha .img img { margin-left: 10px;display: block; } .comment-form .anonymous-authorize .captcha .input { padding-top: 6px; background-image: url('/media/i/searchbox_transp_short.png'); background-repeat: no-repeat; background-position: left 6px; } .comment-form .anonymous-authorize .captcha .input input { margin-left: 10px; width: 90px; height: 20px; background: none; border: 0px; } .comment-form .subm { margin-top: 7px; text-align: right; } input.send-but { width: 80px; height: 24px; background-image: url('/media/i/send-button.gif'); padding: 0px; margin: 0px; border: 0px; cursor: pointer; } input.loading-but { width: 80px; height: 24px; background-image: url('/media/i/send-button-animated.gif'); padding: 0px; margin: 0px; border: 0px; cursor: pointer; } .contracted-comment-form .comment-head .login-logout, .contracted-comment-form .comment-head-logged .login-logout, .contracted-comment-form .anonymous-authorize, .contracted-comment-form .subm { display: none; } .contracted-comment-form .comment-text { border: solid #83AB3A 1px; border-top: 0px; } .contracted-comment-form .comment-text textarea { height: 30px; width: 100%; border: 0px; display: block; overflow: auto; } .contracted-comment-form { margin-bottom: 20px; } #add-reply { margin: 7px 0px 0px 45px; } #add-reply { display: none; } .comment-error { background-color: #C33; color: white; padding: 5px; margin-top: 5px; } /* --------------------------------------------------------------------------- ARCHIVE INDEX PAGE --------------------------------------------------------------------------- */ #index-column #archive-header-box { margin-left: 140px; margin-right: 0px; margin-bottom: 40px; } #archive-header-box { margin-top: 15px; } #archive-header-box .archive-title { height: 50px; margin-bottom: 25px; } #archive-header-box .archive-title ul { list-style: none; margin-top: 0px; } #archive-header-box .archive-title ul li { display: block; float: left; margin-left: 0px; } #archive-header-box .archive-title ul li.title { font-size: 36px; margin-top: 15px; margin-right: 10px; padding-left: 0px; color: #000; } #archive-header-box .archive-title ul li.period { margin-top: 25px; margin-right: 0px; } #archive-header-box .archive-title ul li.arrow { margin-top: 25px; margin-right: 5px; } #archive-header-box .archive-title ul li.enter-button { margin-top: 25px; margin-left: -5px; margin-right: 5px; } #archive-header-box .archive-title ul li.enter-button a { height: 19px; width: 24px; display: block; float: left; background-image: url('/media/i/enter-icon-2.gif'); background-position: center 2px; background-repeat: no-repeat; font-size: 1px; text-decoration: none; } #archive-header-box .select-box-contracted a { display: none; } #archive-header-box .select-box-contracted a.selected { display: block; float: left; color: #004775; font-size: 14px; font-weight: bold; } #archive-header-box .select-box-contracted a.selected:hover { text-decoration: none; } #archive-day-pholder { width: 60px; height: 10px; display: block; } #archive-month-pholder { width: 90px; height: 10px; display: block; } #archive-year-pholder { width: 60px; height: 10px; display: block; } .select-box#archive-day-select-box, .select-box#archive-month-select-box, .select-box#archive-year-select-box{ border-color: #004775; font-size: 14px; } .select-box#archive-day-select-box { width: 40px; } .select-box#archive-month-select-box { width: 90px; } .select-box#archive-year-select-box { width: 35px; } .select-box#archive-day-select-box a, .select-box#archive-month-select-box a, .select-box#archive-year-select-box a { color: #004775; font-weight: bold; } .select-box-contracted#archive-day-select-box a.selected .title, .select-box-contracted#archive-month-select-box a.selected .title, .select-box-contracted#archive-year-select-box a.selected .title { border-bottom: dashed 1px; } .select-box#archive-day-select-box .arrow, .select-box#archive-month-select-box .arrow, .select-box#archive-year-select-box .arrow { display: none; } .select-box-contracted#archive-day-select-box a, .select-box-contracted#archive-month-select-box a, .select-box-contracted#archive-year-select-box a { width: 90%; } .select-box-contracted#archive-day-select-box .arrow, .select-box-contracted#archive-month-select-box .arrow, .select-box-contracted#archive-year-select-box .arrow { float: right; cursor: pointer; } .select-box-contracted#archive-day-select-box .title, .select-box-contracted#archive-month-select-box .title, .select-box-contracted#archive-year-select-box .title { float: left; cursor: pointer; } #archive-header-box #categories ul { display: block; height: 20px; margin-left: 0px; list-style: none; } #archive-header-box #categories ul li { display: block; float: left; height: 20px; margin-left: 0px; padding-left: 0px; } #archive-header-box #categories ul li a { display: block; padding-left: 5px; padding-right: 5px; color: #8F8E7D; line-height: 20px; } #archive-header-box #categories ul li.special { float: right; margin-right: 6%; } #archive-header-box #categories .selected a { color: #fff; } #archive-header-box #categories .selected a.news { background-color: #F15A24; } #archive-header-box #categories .selected a.blogs { background-color: #9E005D; } #archive-header-box #categories .selected a.articles { background-color: #FBB03B; } #archive-header-box #categories .selected a.market { background-color: #00A99D; } #archive-header-box #categories .selected a.press { background-color: #662D91; } #archive-header-box #categories .selected a.files { background-color: #29ABE2; } /* --------------------------------------------------------------------------- TOP20 INDEX PAGE --------------------------------------------------------------------------- */ #index-column #top20-header-box { margin-left: 0px; margin-right: 0px; margin-bottom: 40px; } #top20-header-box { margin-top: 15px; } #top20-header-box .top20-title { height: 50px; margin-bottom: 25px; padding-left: 140px; background-image: url('/media/i/top20-title.png'); background-repeat: no-repeat; background-position: left bottom; } #top20-header-box .top20-title ul { list-style: none; margin-top: 0px; } #top20-header-box .top20-title ul li { display: block; float: left; margin-left: 0px; } #top20-header-box .top20-title ul li.title { font-size: 36px; margin-top: 15px; margin-right: 10px; padding-left: 0px; } #top20-header-box .top20-title ul li.period, #top20-header-box .top20-title ul li.arrow { margin-top: 25px; margin-right: 5px; } #top20-header-box .select-box-contracted a { display: none; } #top20-header-box .select-box-contracted a.selected { display: block; float: left; color: #004775; font-size: 14px; font-weight: bold; } #top20-header-box .select-box-contracted a.selected:hover { text-decoration: none; } .select-box#top20-title-select-box { border-color: #004775; font-size: 14px; width: 180px; } .select-box#top20-title-select-box a { color: #004775; font-weight: bold; } .select-box-contracted#top20-title-select-box a.selected .title { border-bottom: dashed 1px; } .select-box#top20-title-select-box .arrow { display: none; } #top20-header-box #categories ul { display: block; height: 20px; margin-left: 140px; list-style: none; } #top20-header-box #categories ul li { display: block; float: left; height: 20px; margin-left: 0px; padding-left: 0px; } #top20-header-box #categories ul li a { display: block; padding-left: 5px; padding-right: 5px; color: #8F8E7D; line-height: 20px; } #top20-header-box #categories ul li.special { float: right; margin-right: 6%; } #top20-header-box #categories .selected a { color: #fff; } #top20-header-box #categories .selected a.news { background-color: #F15A24; } #top20-header-box #categories .selected a.blogs { background-color: #9E005D; } #top20-header-box #categories .selected a.articles { background-color: #FBB03B; } #top20-header-box #categories .selected a.market { background-color: #00A99D; } #top20-header-box #categories .selected a.press { background-color: #662D91; } #top20-header-box #categories .selected a.files { background-color: #29ABE2; } #top20-header-box #categories .selected a.brand { background-color: #C1272D; } #index-list .entry .side-bar .top20number { font-size: 16px; font-weight: bold; color: #C1272D; } table.top20brands#index-list { width: 500px; margin-top: 30px; } table.top20brands#index-list tr.entry td { vertical-align: middle; height: 96px; } table.top20brands#index-list .entry .logo-bar { padding: 0px; text-align: center; width: 100%; } table.top20brands#index-list .entry .title-bar { width: 100px; color: #999774; font-size: 11px; text-align: right; } table.top20brands#index-list .entry .title-bar a { color: #999774; } /* --------------------------------------------------------------------------- TOP20 ARTICLE PAGE --------------------------------------------------------------------------- */ .top20-category #article-column #top20-header-box .top20-title { background: none; padding-left: 0px; } .top20-category #article-column #top20-header-box #categories ul { margin-left: 0px; } .top20-category #article-column #top20-header-box #categories ul li.special { margin-right: 0px; } .top20-category #navigation-list-column { padding-top: 58px; } .top20-category.article-page #navigation-list-column { padding-top: 0px; } #top20-pic-box { margin-bottom: 40px; } .top20-category #article-box .copyrights { height: 1em; } .top20-category #article-box .copyrights .source { float: left; } .top20-category #article-box .copyrights .readBy { float: right; margin-top: -4px; } .top20-number { font-size: 16px; font-weight: bold; color: #C1272D; } /* --------------------------------------------------------------------------- TEXT PAGE --------------------------------------------------------------------------- */ #text-column { float: none; padding-left: 300px; } #text-box { padding-left: 140px; padding-top: 25px; padding-right: 12%; } #text-box h1 { margin-top: 60px; margin-bottom: 30px; font-size: 36px; color: #000; } #text-box h1.first { display: block; margin-top: 0px; margin-bottom: 50px; line-height: 36px; } #text-box h1.subheader { display: block; margin-top: -50px; margin-bottom: 50px; font-size: 18px; color: #8F8E7D; } #text-box h2 { margin-top: 60px; margin-bottom: 30px; font-size: 22px; color: #4d4d4d; } #text-box { font-size: 14px; color: #4d4d4d; } #text-box p { font-size: 14px; color: #4d4d4d; margin: 2em 0em; } #text-box .notes { font-size: 10px; } /*#text-box a:link { color: #004775; } #text-box a:visited { color: #8F8E7D; } */ #text-box .emphazed { color: #C1272D } #text-box .image-with-horz-text { } #text-box .image-with-horz-text .image { width: 120px; } #text-box .image-with-horz-text .text { font-style: italic; } #text-box .wide-image-with-center-text img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; } #text-box .wide-image-with-center-text .center-text { text-align: center; font-style: italic; } #text-box span.g-outed{margin-left:-18px} .box ul, .box ol { list-style-position: outside; margin: 1em 0em; } .box li { margin-left: 20px; padding-left: 5px; } .box ul { list-style: square; } .box ul.mdash-list { list-style-image:url('/media/i/mdash-list-bullet.jpg'); } .box-reklama p { margin: 0 !important } .text-box-l{margin-left:0 !important;padding-left:25px} .feed-box{width:770px; padding-left:0 !important;} .feed-box{font-size:14px} .feed-box table{width:525px;font-size:12px} .feed-box table td{padding:5px 0;vertical-align:top} .feed-box table td.td-title{width:205px;padding:7px 0 0} .feed-box table input.i-text{width:225px} .feed-box table select{width:225px} .feed-box table textarea{width:320px;height:170px} .feed-box div.b-contacts{float:right;margin:-30px 0 0 0} .feed-box div.b-contacts a{color:#669900} .press-box{font-size:14px} .press-box h1.press{color:#639} .press-box a{color:#639;font-size:16px} .press-box input.i-text{width:600px} .press-box textarea{width:600px} .press-box dl{width:605px} .press-box dt{padding:10px 0 5px} .press-box dd{padding:0 0 5px} .press-box dd.dd-submit{text-align:right;padding-top:25px} .profile-box{font-size:14px} .profile-box h1{margin-bottom:0px !important} .profile-box div.b-right{float:right} .profile-box p.p-big{font-size:16px !important;margin:15px 0 !important} .profile-box p.p-small{font-size:13px !important;color:#666 !important;margin:15px 0 !important} .profile-box a{color:#690} .profile-box a.a-press{color:#639} .profile-box table.t-login{margin:25px 0} .profile-box table.t-login td{padding:5px 0;vertical-align:top} .profile-box table.t-login td.td-submit{padding-top:15px} .profile-box table.t-login td.td-title{width:65px} .profile-box table.t-login td.td-error{color:#c00;font-style:italic;font-size:12px;padding-left:10px;padding-top:7px} .profile-box table.t-login input.i-text{width:225px} .profile-box div.b-getpass input.i-text{width:220px} .profile-box table.t-registration{margin-top:25px} .profile-box table.t-registration td{padding:5px 0;vertical-align:top} .profile-box table.t-registration td.td-title{width:150px} .profile-box table.t-registration input.i-text{width:220px} .profile-box table.t-registration input.i-text-code{width:200px} .profile-box table.t-registration td.td-error{color:#c00;font-style:italic;font-size:12px;padding-left:10px} .profile-box table.t-settings{margin-top:25px} .profile-box table.t-settings td{padding:5px 0;vertical-align:top} .profile-box table.t-settings td span.s-descr{color:#999;font-style:italic;font-size:11px;display:block;margin:3px 0 5px} .profile-box table.t-settings td.td-title{width:160px} .profile-box table.t-settings input.i-text{width:220px} .profile-box table.t-settings td.td-error{color:#c00;font-style:italic;font-size:12px;padding-left:10px;padding-top:7px} #promo-item { margin-left: 100px; width: 550px; position: relative; } #promo-item .shadow-wrapper { position: relative; padding-bottom: 10px; padding-right: 10px; background-image: url('/media/i/promo-item-shadow.png'); background-repeat: no-repeat; background-position: 10px 10px; } #promo-item .content { position: relative; padding: 36px; background-color: #fff; border: solid #f9f0d0 2px; } #robot-image { position: absolute; width: 182px; height: 290px; margin-top: -120px; margin-left: -175px; /*background-image: url('/media/i/robot-img.png'); background-repeat: no-repeat;*/ z-index: 1000; } .text-category #footer .additional-menu { margin-left: 320px; } #text-column #advert-item { margin-top: 0px; padding: 0px; } #advert-item .side-bar .news-date { background-image: url('/media/i/dateflag-news.gif'); } #advert-item .side-bar .articles-date { background-image: url('/media/i/dateflag-articles.gif'); } #advert-item .side-bar .blogs-date { background-image: url('/media/i/dateflag-blogs.gif'); } #advert-item .side-bar .market-date { background-image: url('/media/i/dateflag-market.gif'); } #advert-item .side-bar .press-date { background-image: url('/media/i/dateflag-press.gif'); } #advert-item .side-bar .files-date { background-image: url('/media/i/dateflag-files.gif'); } /* --------------------------------------------------------------------------- LIVE PAGE --------------------------------------------------------------------------- */ #index-column #live-items-box { margin-top: 35px; margin-left: 0px; margin-right: 12%; } #live-items-box .items-list td { margin: 0px; padding: 0px; font-size: 14px; } #live-items-box .items-list .item .sidebar { width: 120px; height: 30px; line-height: 30px; text-align: right; padding-right: 20px } #live-items-box .items-list .item .main { height: 30px; line-height: 30px; overflow: hidden; } #live-items-box .items-list .item .main .title { float: left; overflow: hidden; height: 30px; z-index: 2; } #live-items-box .items-list .item .main .title a { color: #000; } #live-items-box .sidebar .type { padding: 0px 5px; background-repeat: repeat-x; background-position: left 2px; font-size: 10px; color: white; } #live-items-box .sidebar .news-type { background-image: url('/media/i/live-news-mark.png'); } #live-items-box .sidebar .article-type { background-image: url('/media/i/live-article-mark.png'); } #live-items-box .sidebar .blog-type { background-image: url('/media/i/live-blog-mark.png'); } #live-items-box .sidebar .press-type { background-image: url('/media/i/live-press-mark.png'); } #live-items-box .sidebar .file-type { background-image: url('/media/i/live-file-mark.png'); } #live-items-box .sidebar .time { margin-left: 5px; font-size: 11px; color: #8F8E7D; } #live-items-box .gradient-hide { float: right; margin-left: -71px; width: 70px; background-image: url('/media/i/gradient-hide.png'); background-repeat: repeat-y; z-index: 3; } #live-items-box h1 { margin-top: 4px; } #live-items-box h1 a { text-decoration: underline; cursor:default; } #live-items-box h1, #live-items-box h2 { margin-left: 140px; display: block; } #live-items-box h1 { font-size: 36px; font-style: italic; } #live-items-box h1 .l-letter { color: #F15A24; } #live-items-box h1 .i-letter { color: #FBB03B; } #live-items-box h1 .v-letter { color: #9E005D; } #live-items-box h1 .e-letter { color: #29ABE2; } #live-items-box h1 .exl { color: #662D91; } #live-items-box h2 { margin-bottom: 40px; font-size: 14px; color: #8F8E7D; } /* --------------------------------------------------------------------------- SEARCH RESULTS PAGE --------------------------------------------------------------------------- */ .found { background-color: #ffff00; } #search-results .side-bar { width: 90px; padding-top: 6px; padding-right: 15px; vertical-align: top; font-size: 11px; color: #8F8E7D; text-align: right; } #search-results h1 { font-size: 20px; color: #000; margin: 0px;} #search-results h1 a { color: #000; } #search-results h1 .source { font-size: 10px; color: #8F8E7D; } #search-results h1 .source a { color: #8F8E7D; } #search-results p a { color: #000; } #search-results p a:hover { text-decoration: none; } #search-results p .comments-flag a { color: #fff; } #search-results p .type { margin-right: 2px; padding: 0px 5px; background-repeat: repeat-x; background-position: left 2px; font-size: 10px; } #search-results p a .type { color: #fff; } #search-results .news-type { background-image: url('/media/i/live-news-mark.png'); } #search-results .article-type { background-image: url('/media/i/live-article-mark.png'); } #search-results .blog-type { background-image: url('/media/i/live-blog-mark.png'); } #search-results .press-type { background-image: url('/media/i/live-press-mark.png'); } #search-results .file-type { background-image: url('/media/i/live-file-mark.png'); } #search-resuls-header { margin-top: 30px; padding-left: 105px; margin-bottom: 60px; } #search-resuls-header .title h1 { font-size: 20px; color: #000; } #search-resuls-header #categories ul { display: block; height: 20px; list-style: none; } #search-resuls-header #categories ul li { display: block; float: left; height: 20px; } #search-resuls-header #categories ul li a { display: block; padding-left: 5px; padding-right: 5px; color: #8F8E7D; line-height: 20px; } #search-resuls-header #categories .selected a { color: #fff; } #search-resuls-header #categories .selected a.news { background-color: #F15A24; } #search-resuls-header #categories .selected a.blogs { background-color: #9E005D; } #search-resuls-header #categories .selected a.articles { background-color: #FBB03B; } #search-resuls-header #categories .selected a.market { background-color: #00A99D; } #search-resuls-header #categories .selected a.press { background-color: #662D91; } #search-resuls-header #categories .selected a.files { background-color: #29ABE2; } /* --------------------------------------------------------------------------- ARCHIVE PAGE --------------------------------------------------------------------------- */ #archive-column { } #archive-box { } #year-box { margin-top: 5px; } ul#year-list { list-style: none; } ul#year-list li { display: block; height: 24px; margin-left: 30px; font-size: 18px; line-height: 24px; color: #8F8E7D; } ul#year-list li a { padding-left: 10px; color: #8F8E7D; } ul#year-list li.selected a { text-decoration: none; color: white; } .news-category ul#year-list li.selected { background-image: url('/media/i/yearflag-news.png'); background-repeat: no-repeat; } .blogs-category ul#year-list li.selected { background-image: url('/media/i/yearflag-blogs.png'); background-repeat: no-repeat; } .articles-category ul#year-list li.selected { background-image: url('/media/i/yearflag-articles.png'); background-repeat: no-repeat; } .market-category ul#year-list li.selected { background-image: url('/media/i/yearflag-market.png'); background-repeat: no-repeat; } .press-category ul#year-list li.selected { background-image: url('/media/i/yearflag-press.png'); background-repeat: no-repeat; } .files-category ul#year-list li.selected { background-image: url('/media/i/yearflag-files.png'); background-repeat: no-repeat; } .top20-category ul#year-list li.selected { background-image: url('/media/i/yearflag-top20.png'); background-repeat: no-repeat; } #archive-box h1 { margin-top: 0px; margin-bottom: 35px; font-size: 36px; color: black; } #archive-box { margin-left: 20px; padding-top: 44px; } #archive-box .month-calendar { float: left; margin-bottom: 30px; width: 250px; } #archive-box .month-calendar table { width: 200px; } #archive-box .month-calendar table th { height: 45px; font-size: 22px; font-weight: normal; text-align: left; vertical-align: top; } #archive-box .month-calendar table td { height: 30px; width: 14%; font-size: 14px; color: #4D4D4D; vertical-align: top; } #archive-box .month-calendar table td.live-link { width: 14%; font-style: italic; font-size: 11px; text-align: left; } #archive-box .month-calendar table td.live-link a { text-decoration: underline; } #archive-box .month-calendar table td.live-link .l-letter { color: #F15A24; } #archive-box .month-calendar table td.live-link .i-letter { color: #FBB03B; } #archive-box .month-calendar table td.live-link .v-letter { color: #9E005D; } #archive-box .month-calendar table td.live-link .e-letter { color: #29ABE2; } #archive-box .month-calendar table td.live-link .exl { color: #662D91; } #archive-box .month-calendar table td a { color: #4d4d4d; } .postentry table {border-width: 0 1px 1px 0;border-style: solid;border-color: #ccc;font-size: 0.9em;} tbody {display: table-row-group;vertical-align: middle;border-color: inherit;} tr {display: table-row;vertical-align: inherit;border-color: inherit;} .postentry table tr td {padding: 5px 10px;border-width: 1px 0 0 1px;border-style: solid;border-color: #ccc;}