Leaderboard

Это вольный перевод замечательной статьи молодого американского дизайнера Кендры Гейнс, в которой кроме общих понятий о том, что такое минимализм, приведен список примеров сайтов с отличными комментариями к ним. Возможно статья поможет начинающим дизайнерам и просто веб-мастерам, которые вынуждены делать сайты под ключ в одиночку (их на этом форуме большинство) ощутить эту тонкую грань между красивым минимализмом и просто унылым пустым нечто. Существует много разговоров о том, что техника дизайна, которую большинство называют "Минимализм", умирает или уже умерла. Я вынуждена не согласиться с ними. Минимализм не умер. Так говорят в основном потому, что люди не совсем понимают, что это такое. К сожалению, кажется, люди считают его каким-нибудь определенным стилем или направлением. Хотя я считаю минимализм скорее техникой или, в меньшей степени, общими правилами. Техника может соответствовать различным ситуациям - если мы говорим о веб-дизайне, вы можете использовать минимализм и в портфолио, и в веб-магазинах, и вообще во всем, что вы разрабатываете. Что такое Минимализм? Что такое Дизайн? Книжное определение "минимализма" звучит как "дизайн или стиль, в котором минимально простыми элементами достигается максимальный эффект". А понятие "минималистичное искусство " (minimal art) - "абстрактная живопись или скульптура, в которой выразительность и иллюзия сведены к минимуму за счет использования простых геометрических форм и объектов, а так же ровных, плоских цветов". Последнее определение больше подходит для описания специфики этого направления в искусстве, но если мы говорим о дизайне, который является больше наукой, нежели искусством, то оба эти определения на самом деле идут рука об руку. Дизайн - это то, что вы используете для упорядочения информации таким образом, чтобы это было эстетически приятно. Лучшие дизайны - это дизайны без излишеств и банальностей. Вот что такое минимализм. Если вы дизайните "для того, чтобы было красиво", то вы не разрабатываете дизайн, вы просто декорируете. Одной из самых крутых вещей, которую я слышала о типографике (которая тесно связана с графическим дизайном), является фраза: "Если вы не можете прочитать это - значит вы не поняли сути". А о графическом дизайне - "Когда дизайн готов, не задавайтесь вопросом чего не хватает, задайтесь вопросом - что можно убрать?" Примеры минимализма Люди должны понять, что есть различные уровни минимализма. Есть, конечно, люди, которые стараются придерживаться "голого" дизайна насколько это возможно - только текст и несколько картинок. В то время как другие просто хотят быть уверены в том, что они делают действительно чистый дизайн. В любом случае минимализм должен быть использован (и будет) в качестве основы для дизайна. Если у вас есть сайт, посвященный вашим мыслям, вашей работе или вашему продукту - минимализм будет работать и там. Ниже приведены несколько различных сайтов, которые используют минималистичный подход. 8faces.com Как видите, господа, здесь много внимания уделяется типографике чтобы убедиться, что текст легко читаем. Картинки не разбросаны повсюду, а находятся в аккуратно созданных для них пространствах. bestawards.co.nz Этот сайт использует ровный, плоский цвет с вкраплениями фиолетового и хороший макет для того, чтобы привлекать ваше внимание к наиболее значимым частям веб-сайта. Я бы сказала, что это сайт, который не уходит слишком далеко от корней минимализма, и в то же время добавляет некоторые более красивые дизайнерские элементы. collectedhere.com Вы наверное заметите, что в большинстве минималистичных сайтов используется сетка(grid). В этой сетке нет расстояний между элементами, что заставляет их заполнять собой все пространство. Тем не менее - это прекрасный, чистый сайт. createdm.com Это пример другого, очень чистого и очень сфокусированного сайта. Здесь не может быть даже малейшего непонимания того, чем эта компания занимается. eighthourday.com Этот сайт немножко сложнее. Здесь намного больше картинок и дизайнерских приемов, но они все-равно не отклоняются от принципа фокусирования и отсутствия лишних деталей. hatbox.co Без использования плоских цветов этот сайт является действительно чистым и сфокусированным. Создается ощущение, как будто дизайнер наибольшее внимание уделял точному расположению каждого элемента дизайна, а не сайту целиком. inmotionmassage.co.uk Этот сайт подошел довольно близко к основным ценностям минимализма, хотя в нем и используется больше цветов, чем в традиционных минималистичных сайтах. Разметка работает очень хорошо и опять же, ничего лишнего. kin-design.com Я бы сказала, этот веб-сайт действительно напоминает идею "минималистичное искусство". Хотя здесь и есть сетка, но сайт абстрактен и очень геометричен. Такое чувство, как будто этот дизайнер смешал идею минимализма в дизайне с такой же идеей в изобразительном искусстве. kristaduran.com Этот сайт сосредотачивается больше на дизайне и на красоте вещей, но так же можно сказать, что это не единственная цель дизайна сайта. А еще здесь превосходная компоновка. lamoulade.com La Moulade является одним из тех супер аккуратных одно страничных сайтов. Он использует много различных трюков и артистизма на вершине минимализма. Невозможно не знать, что здесь находится в центре внимания. learncss.tutsplus.com У многих брендов популярным становится создание мини-сайтов, которые продвигают один товар или услугу. Этот сайт мог бы быть очень грязным из-за обилии информации, которую он дает. Однако здесь дизайнеры проделали огромную работу по созданию сайта без излишков, что позволяет ему предоставлять всю информацию эстетически красиво. luanfreirekondo.com Еще один веб-сайт, который имитирует свойства минимализма как искусства. Плоские цвета, абстрактные интерпретации и геометрические формы. Это очень простое и правильное портфолио. mensdept.com Этот сайт использует минимализм больше, чем просто тенденцию. Если вы скролите вниз, то видите хорошую сетку с чрезвычайно богатым содержанием. Однако, я думаю, это очень хороший пример того, что минимализм бывает разным. modulab.co.uk Modulab имеют очень чистый и супер минималистичный веб-сайт. Здесь нету кучи цветов (только когда это необходимо) и абсолютно никаких излишеств. Отличная работа. pigbimpin.com Еще один сайт, в котором смешение обоих идей минимализма (искусства и техники) доведено до совершенства. Есть утверждение, что минималистичные сайты не могут иметь дополнительные функции типа социальных медиа, но здесь они определенно нашли хороший чистый способ сделать это. pillowcompany.com Когда речь идет о e-commerce сайтах, там действительно очень чего происходит и там расположено множество вещей, что порождает куча излишеств. На этом сайте много контента, но дизайнер постарался сделать дизайн чистым и сосредоточить внимание на вещах, которые действительно являются важными. sheltonfleming.co.uk Вот еще один сайт, где нет перебора с цветами. Здесь много интерактивности и он представлен в манере, которая интуитивно понятна для пользователя. thrivesolo.com А вот еще один очень простой сайт. Но его красота кроется в форме сложных элементов дизайна. Везде просматривается одна основная тема оформления, поэтому все вместе это работает эффективно и осмысленно. weltunit.com Этот сайт не сразу говорит сам за себя, его дизайн становится более ясным после некоторых поисков того, чем компания занимается. Использование серого и расположение элементов делают очень многое для этого минималистичного дизайна. wk.com Что мне нравится в этом сайте, так это использование графики и картинок таким образом, каким типичные минималисты не использовали бы никогда. Это определенно приятно для глаза, всего как-будто бы много, но разметка и дизайн расставляют все на свои места. yoshiharuota.com Этот веб-дизайн, наверное, представляет собой то, о чем народ говорит, обсуждая минимализм. Это "голый" дизайн, у которого нет абсолютно ничего лишнего. p.s. к сожалению форум не разрешает мне прикрепить все требуемые картинки, поэтому часть ссылок будет без превьюшек.

В HTML5 <a> больше не строчный, а... похож на <ins> и <del> прежде (если сам внутри строчного, то допускает только строчное содержимое — точнее, "phrasing content" по-новому, если среди блоков, то может содержать блоки и внутри). Это по факту работает во всех браузерах вплоть до IE6. Прочитать можно, например, у HTML5-докторов. А учили правильно. Более того, именно в CSS это правило особенно важно, т.к. там за правильной иерархией боксов (блочные только в блочных, рядом с блочными только блочные и т.п.) следить некому, кроме автора страницы (рендерер, конечно, выкрутится добавлением анонимных блочных боксов где надо, но не факт, что результат автору понравится. Вот только роли HTML-элементов CSS менять не может (CSS применяется к элементам уже отпарсенной DOM, и если парсер не допускает, к примеру, существования блочных элементов внутри <p>, то никакой CSS не поможет их туда затолкать — он приходит, когда их судьба уже решена). Ну и про HTML5 troll всё верно написал...

Здравствуйте. Хочу поставить лого в заголовок H1. При этом написать в него текстовую версию логотипа. Встал вопрос как лучше скрыть этот текст, я думал visibility:hidden, но не знаю будут ли его индексировать поисковики и как они вообще относятся к данному правилу?

Извините, что не по теме критика: звездное небо сразу в глаза бросается, что дублировано.

рамка элементарно убирается overflow: hidden; И как скажешь поступить если картинка png полупрозрачная?

Хром плохо переносит background-attachment: fixed

Мне не нравится, что комментарии растянуты на 95%. У меня всего 1366 по горизонтали, а читать уже неудобно. Что говорить о 1600 или 1900? С типографикой все нормально, кроме того, что Ариал уже набил оскомину. Но это лично мое дело. В профиле картинку надо оптимизировать. 1,19 Мб - нехорошо.

Именно так. Элементы парсятся с учетом их content model, а только потом к ним применяются стили. А валидаторы про стили вообще ничего не знают.

При каждом обновлении странички? Т.е. 100 раз обновил страничку в процессе разработки — незаметно для себя потратил 100 * вес странички исходящего трафика? Нет, я всё понимаю, "в цивилизованном мире" давно такими мелочами не заморачиваются... но есть же и те, у кого небезлимитный инет через мобильник... Но тут, конечно, да, вопрос вкуса и привычки (мне удобнее, когда действия браузера происходят под моим контролем и по моему желанию, кому-то удобнее, когда браузер делает всё сам и дает готовый результат). Я бы выделил не "сразу", а "вдумчиво" . А слепое валидаторопоклонство именно для новичков этой вдумчивости анализа ошибок скорее мешает (вместо того, чтобы разобраться с неверной логикой верстки, приведшей к ошибке — часто возникает стремление "заткнуть" или "обмануть" валидатор, замаскировав ошибку костылем, нередко скриптовым). Валидность — всего лишь аналог орфографии, не допускать орфографических ошибок в словах, конечно, важно, но куда важнее при изучении языка научиться правильно строить фразы, адекватно выражающие мысли. А этому валидатор, к сожалению, помочь не может. Поэтому я и советую обращаться к валидатору лишь под конец работы (когда автор вдумчиво разобрался с логикой верстки, как мог), а не держаться всё время за его ручку. На самом деле у него есть два режима проверки, второй — вполне совпадает с официальным. Но само наличие путаницы огорчает. Плюс была (как сейчас не знаю, давно не юзал) проблема с HTML5 (он же "ЖHTML" ). ОК, Validity для Chrome — хороший плагин для валидации, разобрались . Но речь-то была не тупо о проверке "валидно/не валидно", а об использовании дополнительных опций официального валидатора. Плагин умеет работать с ними? P.S. Спор о важности валидатора, имхо, интересен, но в этой теме явно махровый оффтоп. Может быть, модераторы отделят его и перенесут, скажем, во Флейм?..

В чем проблема написать? Не так уж и много вариантов на мой взгляд... <input name="str" type="checkbox" <?php if(isset($_GET['str'])) { echo 'checked="checked"'; } ?> value="1" /> <input name="str" type="radio" <?php if(isset($_GET['str']) && $_GET['str']==1) { echo 'checked="checked"'; } ?> value="1" /> <input name="str" type="radio" <?php if(isset($_GET['str']) && $_GET['str']==2) { echo 'checked="checked"'; } ?> value="2" /> <input name="str[]" type="checkbox" <?php if(isset($_GET['str']]) && in_array (1, $_GET['str']])) { echo 'checked="checked"'; } ?> value="1" /> <input name="str[]" type="checkbox" <?php if(isset($_GET['str']]) && in_array (2, $_GET['str']])) { echo 'checked="checked"'; } ?> value="2" /> Функцию для проверки сделать не сложно...

По-моему, там отошли от понятий "блочный" и "строчный". Элементы теперь относят к определенным категориям, и у каждого элемента есть content model, определяющая, что может быть у него внутри.

Всегда будут находиться люди, которым что-то не нравится) А мне вот все нравится, что касается дизайна. Развивайте проект дальше. Единственное, чего бы хотелось - больше динамики, меньше переходов по страницам. Ах да, еще не нравятся кнопки Нравится-Не нравится и число лайков (соррри за каламбур) Кнопку Сообщить о нарушении лучше сделать меньше и выровнять по центру.

Двойное почёркивание - это ненормальное явление! Если вы не копипастите названия классов, а набираете их вручную - скорее всего вы долго будете разбираться - почему же не работают стилевые правила. Все равно не понял... Чем хуже конеткстные селекторы без всяких плясок с бубном? Нужно получить доступ к отдельному блоку? Записываем "лестницу" селекторов уникальную для данного блока. Нужно получить доступ к группе однотипных блоков? Берём общий класс. Нужно получить доступ к избранной группе блоков? общий класс, скорректированный контекстом... Пример Яндексовской цсс-ки: .b-icon{position:absolute;overflow:hidden;width:16px;height:16px;margin-left:-19px}.b-icon i{position:absolute}.b-corners{position:relative;display:block;background:#fff;border:1px solid #fff}.b-corners-rt,.b-corners-rb,.b-corners-lb,.b-corners-lt{position:absolute;overflow:hidden}.b-corners-rt,.b-corners-rb{right:-1px}.b-corners-lb,.b-corners-lt{left:-1px}.b-corners-lt,.b-corners-rt{top:-1px}.b-corners-rb,.b-corners-lb{bottom:-1px}.b-corners-rt i,.b-corners-rb i,.b-corners-lb i,.b-corners-lt i{position:absolute;width:50px;height:50px;background-repeat:no-repeat}.b-corners .b-corners-rt i{top:0}.b-corners .b-corners-lb i{left:0}.b-corners .b-corners-lt i{top:0;left:0}.b-corners-body{display:block}.b-corners-gray5{background:#fff;border:1px solid #bfbfbf}.b-corners-gray5 .b-corners-body{padding:6px 12px 0 6px;color:#666}.b-corners-gray5 .b-corners-rt,.b-corners-gray5 .b-corners-rb,.b-corners-gray5 .b-corners-lb,.b-corners-gray5 .b-corners-lt{width:5px;height:5px}.b-corners-gray5 .b-corners-rt i,.b-corners-gray5 .b-corners-rb i,.b-corners-gray5 .b-corners-lb i,.b-corners-gray5 .b-corners-lt i{background:url(http://img.yandex.net/i/corners/corners-gray5.png)}.b-corners-gray5 .b-corners-rt i{left:-5px}.b-corners-gray5 .b-corners-rb i{top:-5px;left:-5px}.b-corners-gray5 .b-corners-lb i{top:-5px}.l-menu{width:100%;margin:.8em 0 1.5em 0}.l-menu-item{padding:5px 4px;text-align:center;border:1px solid #B2B2B2;border-width:1px 0}.l-menu-gap{width:2%;padding:0}.l-menu-gap i{display:block;width:20px}.l-menu a,.l-menu b{font-size:.85em;white-space:nowrap}.l-page-short{width:100%}.l-page-short-l{width:75%}.l-page-short-r{width:21%}.l-page-short-g{width:2%}.l-page-short-g i{display:block;width:20px}.l-story{width:100%;margin-top:.4em}.l-story-c .gap{font-size:0;display:block;width:400px}.l-story-r{width:20px}.l-story-l{width:120px}.l-story-r i{font-size:0;display:block;width:20px}.b-subscribe{margin-top:3em}.b-subscribe .caption{margin-bottom:.5em}.b-subscribe .calendar{display:block;margin-bottom:.8em}.b-subscribe .subscribe li{margin-bottom:5px}.b-subscribe .subscribe i{display:-moz-inline-box;display:inline-block;width:18px;height:17px;margin-right:5px;vertical-align:bottom;text-decoration:none}.b-subscribe .subscribe .news i{background:url(http://img.yandex.net/i/icon-news.png) left center no-repeat}.b-subscribe .subscribe .rss i{background:url(http://img.yandex.net/i/icon-rss.png) left center no-repeat}.b-subscribe .subscribe .smi i{background:url(http://img.yandex.net/i/i16-news_new-v8.gif) left center no-repeat}.b-subscribe .subscribe .lenta i{background:url(http://yandex.st/news/1.30/i/rss_ya.png) left center no-repeat}.b-subscribe .subscribe .bannerline i{padding-left:2px;padding-right:2px;background:transparent url(http://img.yandex.net/i/news/icon16x16-red.png) no-repeat scroll left center}.b-story-sources,.b-story-sources a{color:#ff5223}.b-story-list{font-size:100%;width:120px}.b-story-list .title{font-weight:bold;margin:.8em 0 .2em 0}.b-story-list .title .total{font-weight:400}.b-story-list .photo,.b-story-list .video{margin:.3em 0 0 0}.b-story-list .photo a,.b-story-list .video a{float:left}.b-story-list .link{font-size:88%}.b-story-list .link a{color:#000}.b-story-list .video .b-icon{margin:.5em 0 0 .7em;cursor:hand}.b-story-list .video .b-icon i{width:16px;height:16px;background:url(http://img.yandex.net/i/play.png) no-repeat}.b-story-list-concern{margin-bottom:.3em}.b-story-list-concern .rubric,.b-story-list-concern .region{font-weight:bold;display:inline;margin-right:.2em}.b-story{margin:.8em 0 0 12px}.b-story .b-story-list-concern,.b-story .text,.b-story .all-news{margin-left:8px}.b-story .caption{font-size:1.4em;margin:.4em 0 .7em 8px;color:#000}.b-story .text{margin-top:.6em}.b-story .text span{padding-right:.6em}.b-story .text .source{font-size:90%;margin-right:.5em;color:#066f2c}.b-story .text .time{font-size:90%}.b-story .all-news{display:block;margin-top:1em}.b-story .b-textcom .source{color:#066F2C;font-size:90%;margin-right:0}.b-story .b-textcom .desc{margin-left:.5em}.b-story-quote{margin-top:.6em}.b-story-quote .quote-owner{font-size:90%;position:relative;top:-1px;margin-left:20px;padding:7px 0 0 25px;background:url(http://img.yandex.net/i/tail.png) no-repeat}.b-story-quote .quote-link{margin-left:.9em}.b-story-quote .h-corners{overflow:hidden}.b-story-quote .b-corners-body{padding:6px 7px 7px;color:#000}.b-story-add{position:relative;float:right;width:200px;margin-top:-10px;margin-bottom:.4em}.b-story-add .b-story-map,.b-story-add .b-story-more{margin-left:15px}.b-story-map{font-size:90%;margin-top:5px;padding:8px 10px;background:#eedcb6}.b-story-map .map{position:relative;width:160px;height:120px;margin-bottom:.3em}.b-story-map .info .adress a{color:#3d4c87}.b-story-map .info .source a{color:#066f2c}.b-story-map .info .adress,.b-story-map .info .source{margin-right:.3em}.b-story-map-info{font-size:90%;position:absolute;left:55px;bottom:70px}.b-story-map-info .addr{overflow:hidden;max-width:100px;background:#FFC;color:#000;border:1px solid #000}.b-story-map-info .addr p{min-width:40px;padding:0 .4em .1em .4em}.b-story-map .tail{position:absolute;z-index:98;left:80px;bottom:60px;width:15px;height:11px;background:url(http://img.yandex.net/maps/i/i-legend_point.gif) no-repeat}.b-story-more{padding:10px 10px 12px 10px;background:#fbf7ee;width:170px}.b-story-more .title{font-weight:bold;margin-bottom:-0.2em}.b-story-more .object margin-top:1em}.b-story-more ul{margin-bottom:2em}.b-story-more .link{margin:.6em 0 .1em}.b-story-more .date,.b-story-more .time{font-size:90%;display:inline}.b-story-more .date{margin-right:.6em}.b-story-more .opinions{margin-left:19px;margin-top:1em}.b-story-more .objects{padding-top:5px;border-color:#DCD2BA;border-top:1px solid #DCD2BA;margin-top:1.5em}.b-story-more .objects .b-dropdown li{padding-bottom:10px}.b-story-more .objects .b-dropdown li,.b-story-more .objects .b-dropdown li .b-pseudo-link{white-space:normal}.b-story-more .opinions .b-icon i{width:16px;height:16px;background:url(http://img.yandex.net/i/blogi.gif) no-repeat}.b-news-story{margin-top:1.5em}.b-news-story-rubric{margin-bottom:2.5em;margin-top:0}.b-news-story .caption{margin:.2em 0 .5em;font-weight:bold;font-size:1em}.b-news-story .caption a{font-weight:bold;vertical-align:bottom;color:#000}.b-news-story .b-news-item .head,.b-news-story .b-news-item .link{display:inline}.b-news-story .b-news-item{margin:.5em .8em .25em 0}.b-news-story .story{margin-top:1.25em}.b-news-story .story .story{font-size:.85em;margin-bottom:.75em;margin-top:0}.b-story-title-list .in-story{display:block;overflow:hidden;margin-bottom:.6em;padding:8px;background:#c3deb1}.b-story-title-list{margin-top:1em}.b-story-title-list dd{padding:0 8px 0 8px}.b-story-title-list dd{margin-top:.6em}.b-story-title-list .link{padding:0;margin-right:.5em}.b-story-title-list .current .link{background-color:#FFF68D}.b-story-title-list .source{font-size:90%;margin-right:.4em;color:#066f2c}.b-story-title-list .time{font-size:90%}.b-story-title-list .storytitle .link{font-style:italic}.b-story-title-list .mostcited .link{font-weight:bold}a .dups_ct{font-size:smaller}.b-story-title-list-articles{margin-left:-8px;padding:.8em 0 0 0}.b-story-title-list-articles dt{padding-left:8px}.b-story-title-list-articles .interview{margin-top:1.2em}.h-story-title-list{overflow:hidden;padding-left:8px}.b-news-paint{float:left;width:100%;margin-bottom:1.8em}.b-news-paint .title{font-size:110%;color:#f30}.b-news-paint .title a{color:#f30}.b-news-paint .link{float:left;margin-top:.6em;line-height:1.44em;text-decoration:none}.b-news-paint .link:hover span{text-decoration:underline;color:#002455}.b-news-paint .link .dot{display:-moz-inline-box;display:inline-block;width:5px;height:5px;margin:0 .5em 0 .5em;vertical-align:middle;background:url(/i/red-dot.png) no-repeat}.b-story-informers{margin:.6em 0 0 .5em}.b-story-informers li{float:left;margin:.2em .2em 0 .2em;padding:.5em .8em}.b-story-informers a{outline:none}.b-story-informers i{margin-left:.4em;color:#565656}.b-story-title-list .informers{padding:.5em 8px}.b-story-title-list .informers span{margin-right:1em;white-space:nowrap}.l-page-short-r .h-page-short-r{padding-left:5px}.ad{margin-top:2em;position:relative}.ad .ad-link{margin-bottom:.2em;margin-top:.5em}.ad .ad-link,.ad div,.ad .url{padding-left:5px}.ad .ad-link a{font-weight:bold}.ad .url{color:#060;margin-bottom:1em}.ad .url a{background:transparent url(http://img.yandex.net/i/ico-phone.gif) no-repeat scroll 0 0;color:#060;padding-left:16px;text-decoration:underline}.ad .direct{padding:2px 5px;background-color:#FEEAC7;z-index:5}.somebanner .y5_f{border-style:solid!important;border-color:#ccc!important;border-width:1px!important}.b-widget{margin-top:1.25em}.b-widget dt{margin-bottom:5px}.b-widget i{display:-moz-inline-box;display:block;float:left;width:18px;height:17px;margin-right:5px;vertical-align:bottom;text-decoration:none}.b-widget .widget i{background:url(http://img.yandex.net/i/i16-news_new-v8.gif) left center no-repeat}.b-trough-medals{font-size:13px;margin:0;padding:0;margin-bottom:1em}.b-trough-medals__line{margin-bottom:.75em}.b-trough-medals__favicon{width:16px;height:16px;margin-right:5px;background:url(//img.yandex.net/i/olymp2010/favicon.png) no-repeat;vertical-align:middle}.b-trough-medals__title,.b-trough-medals__title:link{color:#000;vertical-align:middle}.b-trough-medals__sports{white-space:nowrap}.b-trough-medals__sports__link,.b-trough-medals__sports__link:link{margin-right:.5em;vertical-align:middle;color:#1a3dc1}.b-trough-medals__country{margin-right:1em;vertical-align:middle}.b-trough-medals__num_gold{margin-right:1em;vertical-align:middle;color:#f29401}.b-trough-medals__num_silver{margin-right:1em;vertical-align:middle;color:#3b6b75}.b-trough-medals__num_bronze{margin-right:1em;vertical-align:middle;color:#851f00}.b-trough-medals__i{position:relative;width:17px;height:17px;margin-top:-2px;vertical-align:middle;background:url(//img.yandex.net/i/olymp2010/medals.png) no-repeat}.b-trough-medals__i_silver{background-position:-17px 0}.b-trough-medals__i_bronze{background-position:-34px 0}.b-trough-medals__winners__line,.b-trough-medals__score__line{margin-bottom:.5em;padding-left:22px;color:#666}.b-trough-medals__score__line .b-trough-medals__country{margin-right:0}.b-trough-medals__score__line strong{margin:0 .25em 0 .5em;color:#000}.b-trough-medals__winners__line .b-trough-medals__i{position:absolute;margin-left:-22px}.b-trough-medals__winners__link{margin-right:.3em;color:#34476f}.b-trough-medals__category{margin-bottom:.5em;margin-top:.75em}.b-trough-medals__category__link,.b-trough-medals__category__link:link{color:#4b6185;margin-left:22px}.b-trough-medals_hor .b-trough-medals__title,.b-trough-medals_hor .b-trough-medals__sports,.b-trough-medals_hor .b-trough-medals__num{display:inline;margin-right:.3em;vertical-align:middle}.b-trough-medals .single{margin-left:22px}.b-trough-medals_hor .b-trough-medals__winners__line{float:left;margin-right:1.5em}.b-trough-medals_hor .b-trough-medals__winners__line__i{width:200px}.b-trough-medals_hor .b-trough-medals__winners{margin-top:1em}.b-trough-medals_hor .b-trough-medals__winners__name{display:block;margin-top:.1em}.b-trough-medals__clear{clear:both}.ext-links{margin-left:-8px;background:#f2f2f2 none repeat scroll 0 0;padding:8px;margin-top:1.2em}.ext-links dd,.ext-links dt{padding:0 8px}.ext-links dd{margin-top:.75em}.ext-links .source{color:#066F2C;font-size:90%;margin-right:.4em}.ext-links dd .link{margin-right:.5em}.w-sport{width:170px;padding:10px 10px 0;margin-left:15px;margin-bottom:10px;background:#eee}.w-sport__head{margin-bottom:5px;text-align:center}.w-sport__body-team,.w-sport__body-event,.w-sport__body-score{margin-bottom:1px;padding:2px 5px;background:#fff}.w-sport__body-team{text-align:center}.w-sport__body{padding-bottom:15px}.w-sport__body-team-link{color:#000}.w-sport__addon{padding-bottom:8px}.w-sport__addon-stat-link,.w-sport__addon-stat-link:link{color:#30762B}.w-sport__card{display:-moz-inline-box;display:inline-block;width:15px;height:8px}.w-sport__card-red{background:#F61A17}.w-sport__card-yellow{background:#FED52B}.w-sport__match{width:100%}.w-sport__match-left,.w-sport__match-center,.w-sport__match-right{text-align:center;vertical-align:middle}.w-sport__time{display:block}.w-sport__score{font-size:300%}.w-sport__match-text{font-size:85%}.w-sport__subtitle{text-align:center;font-size:.85em;margin-bottom:.5em}.w-sport__addon-item,.w-sport__addon .b-dropdown__visible{padding:5px 9px 0 0}.w-sport__addon .b-dropdown__popup .b-dropdown__visible{padding:1px 9px 4px 7px}.w-sport__addon-stat-source{color:#066F2C;margin-right:.4em}.w-sport__video{font-size:90%;color:%666666}.w-sport__match-hint{font-size:85%}.b-match__tabs{border-bottom:1px solid #aaa}.b-match__tabs{margin-bottom:1em;overflow:hidden}.b-match__tabs-item{display:-moz-inline-box;display:inline-block;padding:5px}.b-match__tabs-item-active{background:#D7D7D7}.b-match__tabs-update{color:#666}.b-match__tabs-item-active .b-pseudo-link,#js .b-match__tabs-item-active .b-pseudo-link:hover{font-weight:bold;color:#000!important;border:0!important;cursor:text}.b-match__lenta{overflow:hidden}.b-match__time{width:20px;padding:2px 5px;text-align:right;vertical-align:top}.b-match__event{width:30px;vertical-align:top;text-align:center}.b-match__text{padding-bottom:5px}.b-match__translation{margin-top:.5em;overflow:hidden}.b-match__translation-head{margin-left:8px;margin-bottom:1em}.b-match__translation-head-link{color:#000}.b-match__translation-link,.b-match__translation-link:link{color:#007406}.b-match__translation-items{margin-bottom:.75em;margin-left:9px}.b-match__translation-source{color:#066F2C;margin-right:.4em}.b-match__translation-time{font-size:90%}.b-reverse-clock__delim_hidden{visibility:hidden}.b-reverse-clock b,.b-clock b{font-size:140%}a{color:#002455}a:hover{color:#ff5223}.b-story .text i{font-style:italic} Большего говнокода трудно себе представить!

rus, Вы очень много пишите, и представляете ценность для форума, несомненно. Я не могу вам запретить, но хочу попросить впредь, не отвечать на мои вопросы на форуме.