/* Theme Name: et4 Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0 License: GNU General Public License License URI: license.txt Text Domain: et4 Domain Path: /languages/ Tags: This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. et4 is based on Underscores http://underscores.me/, (C) 2012-2013 Automattic, Inc. Resetting and rebuilding styles have been helped along thanks to the fine work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ and Blueprint http://www.blueprintcss.org/ */ /* =Reset -------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } body { background: #fff; /* #eee;*/ } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a:focus { outline: thin dotted; } a:hover, a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */ outline: 0; } a img { border: 0; } /* =Global ----------------------------------------------- */ body, button, input, select, textarea { color: #333333; font-family: sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5; } /* Headings */ h1, h2, h3, h4, h5, h6 { clear: both; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } /* Text elements */ p { margin-bottom: 0.3em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-bottom: 1.6em; padding: 1.6em; overflow: auto; max-width: 100%; } code, kbd, tt, var { font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { /*background: #fff9c0;adsense*/ text-decoration: none; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ } button, input { line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */ } button, html input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid #ccc; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; background: #e6e6e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, .8); cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ font-size: 12px; font-size: 1.2rem; line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa #bbb; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); } button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */ padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 98%; } /* Links */ a { color: royalblue; } a:visited { color: purple; } a:hover, a:focus, a:active { color: midnightblue; } /* Alignment */ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin: 0 auto; } /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /* Clearing */ .clear:before, .clear:after, [class*="content"]:before, [class*="content"]:after, [class*="site"]:before, [class*="site"]:after { content: ''; /*плывут ссылки в РСЯ*/ display: table; } .clear:after, [class*="content"]:after, [class*="site"]:after { clear: both; } /* =Menu ----------------------------------------------- */ .main-navigation { clear: both; display: block; float: left; width: 100%; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; } .main-navigation a { display: block; text-decoration: none; } .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); display: none; float: left; position: absolute; top: 1.5em; left: 0; z-index: 99999; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { } .main-navigation li:hover > a { } .main-navigation ul ul :hover > a { } .main-navigation ul ul a:hover { } .main-navigation ul li:hover > ul { display: block; } .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a { } /* Small menu */ .menu-toggle { display: none; cursor: pointer; } @media screen and (max-width: 600px) { .menu-toggle, .main-navigation.toggled .nav-menu { display: block; } .main-navigation ul { display: none; } } /* =Content ----------------------------------------------- */ .sticky { } .hentry { margin: 0 0 1.5em; } .byline, .updated { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 0.5rem 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /* =Asides ----------------------------------------------- */ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /* =Media ----------------------------------------------- */ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption { border: 1px solid #ccc; margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 1.2% auto 0; max-width: 98%; } .wp-caption-text { text-align: center; } .wp-caption .wp-caption-text { padding: 0.8075em 0; } .site-main .gallery { margin-bottom: 1.5em; } .gallery-caption { } .site-main .gallery a img { border: none; height: auto; max-width: 90%; } .site-main .gallery dd { margin: 0; } .site-main .gallery-columns-4 .gallery-item { } .site-main .gallery-columns-4 .gallery-item img { } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /* =Navigation ----------------------------------------------- */ .site-main [class*="navigation"] { margin: 0 0 1.5em; overflow: hidden; } [class*="navigation"] .nav-previous { float: left; width: 50%; } [class*="navigation"] .nav-next { float: right; text-align: right; width: 50%; } /* =Comments ----------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { } /* =Widgets ----------------------------------------------- */ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit { display: none; } /* =Infinite Scroll ----------------------------------------------- */ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ .infinity-end.neverending .site-footer { display: block; } /***************** мое проверенное **************************************************************/ /************************************************************************************************/ /************************************************************************************************/ /************************************************************************************************/ body { /*Шрифт от Гугла*/ font-family: /*'Open Sans',*/ Verdana, Helvetica, Sans-Serif; padding-left: 2px; padding-right: 2px; } .site { max-width: 960px; min-width: 320px; /*padding: 0 10px; background: #FFF;*/ margin: auto; } /************ Заголовок *********************/ #site-title a, #site-title { color:#2153AA;/*#ffffff;*/ font-size: 24px; font-weight: bold; clear: none; line-height: 1; text-decoration: none; } @media (min-width: 600px) { #site-title a, #site-title { font-size: 1.4em; } } #site-title a:hover { text-decoration: underline; } /*отступы в шапке*/ .site-branding { padding: 4px 4px 0 4px; } @media (min-width: 600px) { .site-branding { padding: 10px 10px 0 10px; } } /*картинка*/ #site-logo{ float: right; max-width: 30%; } @media (min-width: 600px) { #site-logo{ max-width: 100%; } } .site-branding a { color: #2153AA;/*#FFFFFF;*/ font-size: 12px; } /*навигация сверху*/ .navlist { background: #4E7DD1; list-style-type: none; text-align:center; padding: 0; margin: 0; font: bold 14px Verdana, sans-serif; line-height: 15px; } @media (min-width: 600px) { .navlist { line-height: 20px; } } .navlist li { float: left; } .navlist li a { display: block; color: #F1F6FE; padding: 5px 15px; border: 1px solid #0F3974; border-bottom: none; background: #2153AA; text-decoration: none; } .navlist li a:link { color: #F1F6FE; } .navlist li a:visited { color: #F1F6FE; } .navlist li a:hover { color: #FFFFFF; background: #3364BB; border-color: #0F3974; } .navlist li a#current { color: #000; background: #FFFFFF; border-bottom: 1px solid #FFFFFF; } .entry-title{ font-size: 1.6rem; font-weight: bold; color: #2153AA; margin: 5px auto auto auto; } @media (min-width: 600px) { .entry-title{ font-size: 2rem; } } .page-title{ font-size: 2rem; font-weight: bold; color: #2153AA; } .entry-header .entry-meta{ font-size: 1rem; color: #666; } @media (min-width: 600px) { .entry-header .entry-meta{ font-size: 1.3rem; } } .my-entry-header{ float:left; margin: 10px 20px; max-width: 560px; } footer.entry-meta{ font-size: 1.3rem; } div .fb-like { margin-right: 40px; } .in_entry { margin-bottom: 10px; } /* футер */ .site-footer { background-color: #4E7DD1; padding: 12px 20px 12px 20px; color: #FFFFFF; font-size: 11px; line-height: 18px; } .site-footer a { color: #FFFFFF; } h2 { font-size: 2rem; color: #193e7f; } h3 { font-size: 1.8rem; color: #193e7f; } h4 { font-size: 1.6rem; color: #193e7f; } h5 { font-size: 1.4rem; color: #193e7f; } h6 { font-size: 1.2rem; color: #193e7f; } /*Комментарии http://www.fuelyourcreativity.com/6-characteristics-of-great-logo-design/#comments http://www.wpbeginner.com/wp-themes/how-to-style-your-wordpress-comments-layout/ */ .comment-meta { margin-bottom: 5px; /*border-bottom: 1px dotted #CCCCCC;*/ /*clear: both;*/ } .comment-meta img { border: 1px solid #AAB59A; float: left; margin-right: 9px; padding: 1px; } .comment-meta a { color: #777777; font-size: 1.2rem; } .reply { text-align: right; margin: 0 30px 1px 0; } .comments-area ol, .comments-area ul { list-style: none; } .comment-author { color: #193E7F; } .comment-author, .comment-metadata { line-height: 1.5rem; } .comment-content p { margin-bottom: 1rem; } .comment-list .even{background:#fff;} .comment-list .odd{background:#f8f8f8;} ol.comment-list li { border-bottom: 1px solid #DDDDDD; min-height: 50px; padding: 5px; } ol.comment-list li.bypostauthor{ background:#e8e8e8; border-top-style:solid; border-top-width:5px; } ol.comment-list li.bypostauthor .comment-meta a{color:#777;} li.comment .comment-reply-link{background-color:#2153AA; color:#fff;padding:4px 6px;font-size:0.8em; text-decoration: none;} li.comment .comment-reply-link:hover{background-color:#3364BB;color:#fff;} .sidebar_block { float: left; margin: 10px ; } /*Кнопка Наверх*/ #back-top { margin: auto ; text-align: center; } #back-top a { text-decoration: none; } /* Images из темы hybrid */ .hentry img { max-width: 610px; height: auto; padding: 4px; /*border: 1px solid #ccc;*/ } .no-widgets .hentry img { max-width: 950px; } img.alignleft, img.alignright { margin-bottom: 10px; } .thumbnail { float: left; width: 150px; height: 150px; margin: 5px 15px 10px 0; } .wp-caption img { max-width: 604px; margin: 0 auto; padding: 0; border: 1px solid #666; } /*img.noborder { border: none; }*/ ol, ul { list-style-position: inside; } /*красивые таблицы*/ table { border-collapse: collapse; } table td { border-width: 1px; padding: 3px; border-style: inset; border-color: #808080; } table.partxt td { width: 50%; } table.partxt *.comment { background-color:#EFF7FF; width: 100%; } table.no_border td { border-color: #fff; } table.parvideo > tbody > tr > td{ border-width: 0; padding: 0; } blockquote{ padding: 1em 0; background-color:#EFF7FF; margin-bottom: 1em; } blockquote p{ margin-bottom: 0; } p.wp-caption-text{ background-color:#EFF7FF; margin-bottom: 0; } table.no_wide{ width:auto; } #et_text2{ overflow:auto; border: #4E7DD1 1px solid; } .en { background-color:#f7ffef; padding: 8px 0; } .ru { background-color:#ffeff7; padding: 8px 0; } .desc { background-color:#EFF7FF; padding: 8px 0; } /***********мое не проверенное***********************/ /* видео и текст */ #et_movie{ float: left;/*right;*/ margin-top: 20px; margin-bottom: 20px; } /*видео сбоку делаем поменьше*/ div#et_movie iframe{ max-width: 440px; } #et_text{ /*float: right;*/ /*width: 49%;*/ /*max-width: 500px;*/ overflow:auto; margin: 20px 0; border: #4E7DD1 1px solid; padding-left: 10px; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; } #et_video { /*margin-left: -100px;*/ margin-left: auto; margin-right: auto; } /*http://shpargalkablog.ru/2013/09/scroll-block.html плавающий блок*/ .prilip { position: fixed; z-index: 51; } .stop { position: relative; } #et_text_fl { float: right; width: 535px; } #et_movie_fl { float: left; margin-top: 50px; } /*информация об авторе*/ .media, .bd { _overflow: visible; overflow: hidden; } .media img, .media .img { float: left; margin-right: 10px; } .media img { display: block; } .media .imgExt { float: right; margin-left: 10px; } .profile { border: solid thin #c6c6c6; box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); margin-top: 10px; padding: 10px 10px 10px 10px; } .profile-links { /*margin: 0 0 0 20px;*/ } .profile-links .social-links { list-style: none outside none; margin: 0; } .profile-links .social-links img{ width: 28px; height: 28px; } /************ сайдбары ********************/ /*#bottom_sidebar_wrapper { clear: both; }*/ #bottom_sidebar, #topad_sidebar { background-color: #F1F6FE; overflow: hidden; margin-left: auto ; margin-right: auto ; } #topad_sidebar { margin-bottom: 10px ; } .ya_block { float: left; width: 310px; } .sidebar_header { margin-top:5px; margin-bottom:10px; margin-left:5px; margin-right:5px; padding:4px; font-family: verdana, arial, sans-serif; font-size: 14px; font-weight: bold; line-height: 14px; color: navy; } .sidebar_block p{ margin-top: 1px; margin-bottom: 1px; } .caption { font-size: 90%; } table.greeting { /*приветствие на первой странице */ border-width: 0px; border-spacing: 2px; border-style: outset; border-color: #808080; border-collapse: collapse; background-color: #F1F6FE; margin-top: 10px; margin-bottom: 10px; } .ownercomment { background-color: #EAEAEA; } .dict { /*комментарии вне таблицы*/ width: 500px; margin-left: 50px; /* Отступ слева от края до текста */ border-left: solid 2px black; /* Линия слева от текста */ padding-left: 7px; /* Расстояние от линии до текста */ background-color: #F1F6FE; } /*Если текст показывается рядом с фильмом - таблица должна влезть в окошко*/ #content_wide #et_text .dict, #content_wide #et_text table.partxt, #content_wide #et_text p{ width: auto; } .alignleft { float: left; } .alignright { float: right; } #ban { float: right; padding: 15px 25px 0px 0px; } #righttext { margin-right: 10px; text-align:right; } #lefttext { margin-left: 10px; text-align:left; } .transcript { width:580px; height: expression( this.scrollHeight > 399 ? "400px" : "auto" ); /* sets max-height for IE */ max-height: 400px; /* sets max-height value for all standards-compliant browsers */ overflow:auto; border: #4E7DD1 1px solid; padding-left: 10px; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; } /*narrow*/ .transcript_n { width:340px; height: expression( this.scrollHeight > 299 ? "300px" : "auto" ); /* sets max-height for IE */ max-height: 300px; /* sets max-height value for all standards-compliant browsers */ overflow:auto; border: #4E7DD1 1px solid; padding-left: 10px; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; } .transcript_down { width:600px; height: expression( this.scrollHeight > 159 ? "160px" : "auto" ); /* sets max-height for IE */ max-height: 160px; /* sets max-height value for all standards-compliant browsers */ overflow:auto; border: #4E7DD1 1px solid; margin-top: -10px; padding-left: 10px; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; } span.GapSpan{ font-weight: bold; color:#008000; } /**/ span.AnswerSpan{ font-weight: bold; color:#CC0000; } /*inline comments*/ span.icomm{ color:#999999; } span.unicode{ font-family: "Lucida Grande", "Arial Unicode MS", "Microsoft Sans Serif", "Lucida Sans Unicode"; } .href{ cursor: pointer; } .my_before_ad_10_1 { background-color: white; height: 100px; } .my_before_ad_10_2 { background-color: white; } /*две колонки*/ .column { float: left; position: relative; width: 48%; border-top: dashed 1px #ccc; } .one { clear: both; margin-right: 3.6%; } .first { border-top: none; } .mybutton { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } /*buddypress*/ #buddypress button, #buddypress a.button, #buddypress input[type="submit"], #buddypress input[type="button"], #buddypress input[type="reset"], #buddypress ul.button-nav li a, #buddypress div.generic-button a, #buddypress .comment-reply-link, a.bp-title-button { font-size: medium ; } /*связанные записи*/ .yarpp-related{ float:left; margin-bottom: 10px; } .yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title { display: inline-block; *display: inline; } .yarpp-thumbnails-horizontal .yarpp-thumbnail { border: 1px solid rgba(127,127,127,0.1); width: 130px; height: 170px; margin: 5px; margin-left: 0px; vertical-align: top; } .yarpp-thumbnail > img, .yarpp-thumbnail-default { max-width: 120px; max-height: 120px; margin: 5px; } .yarpp-thumbnails-horizontal .yarpp-thumbnail > img, .yarpp-thumbnails-horizontal .yarpp-thumbnail-default { display: block; } .yarpp-thumbnails-horizontal .yarpp-thumbnail-title { font-size: 1em; max-height: 2.8em; line-height: 1.4em; margin: 7px; margin-top: 0px; width: 120px; text-decoration: inherit; overflow: hidden; } .yarpp-thumbnail-default { overflow: hidden; } .yarpp-thumbnail-default > img { min-height: 120px; min-width: 120px; } .contents{ float:right; border: 1px solid black; padding: 5px; max-width: 350px; background-color: #EFF7FF; } .contents ol{ margin: 0 0 0 1em; } .abc_card { float: left; width: 150px; height: 220px; padding: 5px; } .abc_card_long { height: 280px; } @media (max-width: 800px) { .adslot_970 { display: none !important; } } @media (min-width: 801px) { .adslot_336 { display: none !important; } }