/* Theme Name: activetab Theme URI: http://web-profile.com.ua/wordpress/themes/activetab/ Description: Responsive light theme. More info at http://web-profile.com.ua/wordpress/themes/activetab/ Version: 0.4.3 Author: webvitaly Author URI: http://web-profile.com.ua/wordpress/ Tags: gray, white, light, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* do not use reset.css, use normalize.css http://necolas.github.com/normalize.css/ */ body { padding: 0 0 20px 0; background-color: #fbfbfb; color: #222; } body { /* break long url and lines without spaces */ /*-ms-word-break: break-all; word-break: break-all; */ /* Non standard for webkit*/ /*word-break: break-word;*/ -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; /*word-break: break-all; word-break: keep-all; word-wrap: break-word;*/ } /* ========== main classes ========== */ .site-wrapper { max-width: 1000px; /* site width */ margin-top: 20px; margin-left: auto; margin-right: auto; padding: 20px 20px; background: #fff; /* #fbfbfb */ border: 1px solid #e6e6e6; /*box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);*/ } .navbar .container-fluid { max-width: 1040px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; } /* ========== helper classes ========== */ .box-shadow { box-shadow: #ccc 0 0 8px; } .border-radius { border-radius: 2px; } .bg-lite-blue { background-color: #E0EDFE; /* F3F9FE */ border: 1px solid #ccc; } .bg-lite-white { background: #fbfbfb; border: 1px solid #ccc; } .smaller-text { font-size: 12px; } .nowrap { white-space: nowrap; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* ========== text ========== */ body, html { font-size: 16px; /* 16px = 100% */ line-height: 1.6em; } p, li { font-size: 16px; line-height: 1.6em; } p, ol, ul { margin-bottom: 25px; } ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; } /*h1, h2, h3, h4, h5, h6 { text-transform: none; font-weight: bold; margin: 30px 0; } h1 { font-size: 30px; line-height: 2.25em; clear: both; } h2 { font-size: 26px; line-height: 2.25em; clear: both; } h3 { font-size: 22px; line-height: 1.75em; } h4 { font-size: 20px; line-height: 1.5em; } h5 { font-size: 18px; line-height: 1.5em; } h6 { font-size: 16px; line-height: 1.8em; }*/ /* ========== table ========== */ table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: 20px; } caption, th, td { font-weight: normal; text-align: left; vertical-align: top; } table th, table td { padding: 8px; text-align: left; vertical-align: top; border-top: 1px solid #dddddd; } table th { font-weight: bold; } table thead th { vertical-align: bottom; } table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td { border-top: 0; } table tbody + tbody { border-top: 2px solid #dddddd; } table table { background-color: #ffffff; } table td.label { /* WordPress sample data fix */ background-color: transparent; display: table-cell; padding: 8px; text-shadow: none; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } /* ========== links ========== */ a:link { text-decoration: underline; /*color: #00e;*/ } a:visited { color: #333; /*color: #551A8B;*/ } a:hover { /*color: #06e;*/ } a:active { color: #900; } a img { border: 0; } /* micro clearfix for modern browsers: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix { /* For IE 6/7 (trigger hasLayout) */ *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /* ========== pointer cursor for clickable elements ========== */ a[href], input[type='submit'], input[type='image'], input[type='button'], input[type='reset'], label[for], select, button, .pointer { cursor: pointer; } /* ========== selection colors ========== */ ::selection {background: #3297fd; color:#fff; text-shadow: none;} ::-moz-selection {background: #3297fd; color:#fff; text-shadow: none;} img::selection {background: #3297fd;} img::-moz-selection {background: #3297fd;} body {-webkit-tap-highlight-color: #3297fd;} /* images */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } img.alignnone { margin: 10px 20px 10px 0; } img.alignleft{ margin-right: 20px; margin-bottom: 20px; float: left; clear: left; } img.alignright{ margin-left: 20px; margin-bottom: 20px; float: right; clear: right; } img.aligncenter{ display: block; clear: both; margin: 0 auto; margin-bottom: 20px; } img[class*="wp-image-"] { height: auto; max-width: 97.5%; } img.size-full { width: auto; /* prevent stretching of full-size images in IE8 */ } img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .entry-content img, .comment-content img, .widget img { max-width: 97.5%; /* fluid images for posts, comments, and widgets */ } img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; /* make sure images with WordPress-added height and width attributes are scaled correctly */ } img.size-full, img.size-large { max-width: 97.5%; width: auto; /* prevent stretching of full-size and large-size images with height and width attributes in IE8 */ height: auto; /* make sure images with WordPress-added height and width attributes are scaled correctly */ } .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } p img, .wp-caption { margin-top: 0.4em; } .wp-caption { background: #f5f5f5; margin-bottom: 10px; max-width: 100%; padding: 5px; border-radius: 2px; } .wp-caption img { display: block; margin: 0 auto; max-width: 100%; } .wp-caption .wp-caption-text { font-size: 12px; line-height: 15px; font-style: italic; text-align: center; padding: 8px 10px 8px 10px; margin: 0; position: relative; } .wp-caption.alignright { margin-left: 15px; margin-bottom: 10px; } .wp-caption.alignleft { margin-right: 15px; margin-bottom: 10px; } .wp-caption.alignnone { clear: both; } .gallery-caption { padding: 6px 6px; font-size: 12px; line-height: 15px; font-style: italic; } #content .gallery { margin: 0 auto 15px auto; clear: both; } #content .gallery a img { /*border: none;*/ } img#wpstats { display: block; margin: 0 auto 1.625em; } #content .gallery-columns-4 .gallery-item { width: 23%; padding-right: 2%; } #content .gallery-columns-4 .gallery-item img { width: 100%; height: auto; } /* ========== images ========== */ .wrap-thumbnail { float: left; margin: 0 15px 10px 0; } .site-main img { max-width: 100%; box-sizing: border-box; /* for images fit max-width with padding and border */ } .site-main .wrap-thumbnail img { box-sizing: content-box; } .site-main a img, #content .gallery a img { padding: 4px; border: 1px solid #ccc; transition: all 0.3s ease; } .site-main a:hover img, #content .gallery a:hover img { border-color: #08c; } /* ========== image borders ========== */ img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ /*border: 2px solid #eee; padding: 0;*/ } a img[class*="align"], a img[class*="wp-image-"], #content .gallery .gallery-icon a img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */ /*border: 2px solid #ccc; padding: 2px;*/ } .wp-caption.aligncenter { clear: both; } .wp-caption img { border-color: #eee; } a:focus img[class*="align"], a:hover img[class*="align"], a:active img[class*="align"], a:focus img[class*="wp-image-"], a:hover img[class*="wp-image-"], a:active img[class*="wp-image-"], #content .gallery .gallery-icon a:focus img, #content .gallery .gallery-icon a:hover img, #content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */ /*background: #eee; border-color: #bbb;*/ } .wp-caption a:focus img, .wp-caption a:active img, .wp-caption a:hover img {/* ... including captioned images! */ /*background: #fff; border-color: #ddd;*/ } /* ========== make sure embeds and iframes fit their containers ========== */ embed, iframe, object { max-width: 100%; } iframe { border: 0; } div[id*='attachment_']{ max-width: 100%; height: 100%; box-sizing: border-box; } video { max-width: 100%; height: auto; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-wrapper { width: 630px; max-width: 100%; margin-bottom: 18px; } /* ========== comments form ========== */ #comment-form-title{ padding-left: 20px; } #comments{ line-height: 24px; margin-bottom: 18px; } #commentform { margin-bottom: 0; } #commentform .form-submit { margin-bottom: 0; } #respond #reply-title { margin-top: 0; } /* ========== comments ========== */ .comment-meta { color: #343434; font-size: 14px; /* 14px is the font size where FontAwesome is pixel perfect */ opacity: 0.7; transition: all .3s ease; } .comment-meta:hover { opacity: 1; } .comment-meta .comment-meta-item { margin-right: 20px; } .comment-meta a { color: #343434; } .comment-content a { word-wrap: break-word; } .commentlist .comment-author { position: relative; } #comment-form-elements { list-style-type: none; margin: 0; } .commentlist li.comment { position: relative; background: #fff; border-top: 1px solid #ddd; border-left: 1px solid #ddd; padding: 19px 0 0 19px; margin-bottom: 20px; } .commentlist li.bypostauthor { background-color: #f2f7fc; } .comment-reply-link { color: #808080; opacity: 0.6; transition: all 0.3s ease; } .commentlist li.comment:hover .comment-reply-link { opacity: 1; } .comment-reply-link i { /* icon */ margin-top: 4px; margin-right: 4px; } #cancel-comment-reply i { /* icon */ margin-top: 2px; margin-right: 4px; } .commentlist .comment-avatar { float: left; margin: 0 10px 0 0; } .commentlist .comment-avatar img { border: 0; padding: 0; } .commentlist .comment-avatar img:hover { border: 0; padding: 0; } .commentlist { list-style-type: none; margin-left: 0; } .commentlist .children {margin: 0 0 0 20px; list-style-type: none;} .wp_link_pages { clear: both; } .wp_link_pages .wp_link_pages-item-empty { display: inline-block; padding: 5px 0 5px 0; } .wp_link_pages .wp_link_pages-item { padding: 5px; font-weight: bold; } .wp_link_pages a .wp_link_pages-item { font-weight: normal; } .wp_link_pages a:hover { background-color: #eee; } /* ========== .entry-meta ========== */ .page-header { padding-bottom: 0; border-bottom: 0; margin-bottom: 20px; } #content .entry-meta { /*color: #808080;*/ color: #343434; margin: 5px 0; font-size: 14px; /* 14px is the font size where FontAwesome is pixel perfect */ opacity: 0.6; transition: all .3s ease; } #content .entry-meta:hover { opacity: 1; } #content .entry-meta:not(:hover) a { /* show same color for links if .entry-meta is not hovered */ color: #343434; transition: all .3s ease; } #content .entry-meta .entry-meta-item { margin-right: 20px; } #content .entry-meta .entry-meta-categories, #content .entry-meta .entry-meta-tags { margin-right: 0; } article.hentry { border-bottom: 1px solid #aaa; margin-right: 0; padding-bottom: 20px; margin-bottom: 20px; } article.sticky { background: #f2f7fc; border: 0; margin-left: -10px; padding-left: 10px; margin-right: -10px; padding-right: 10px; border-radius: 2px; } /* ========== responsive ========== */ @media (max-width: 979px) { .site-content-pusher { /* push content because of fixed menu */ height: 0px; } } @media (max-width: 767px) { .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-right: 0; margin-left: 0; } } /* ========== menu ========== */ .site-content-pusher { /* push content because of fixed menu */ height: 44px; } .navbar {} .navbar-inner { min-height: inherit; } .navbar-static-top {} body.admin-bar .navbar-fixed-top { /* move menu below admin-bar */ top: 28px; } .navbar-inverse .nav > li > a { color: #ccc; } .navbar-inverse .nav > li > a:focus, .navbar-inverse .nav > li > a:hover { color: #fff; background-color: #333; } .nav-menu { clear: both; display: block; float: left; margin: 0; width: 100%; } .nav-menu ul { list-style: none; margin: 0; padding-left: 0; } .site-navigation .nav-menu li a { padding: 12px 12px; line-height: 1.2em; transition: all 0.3s ease; } .site-navigation .nav-menu li li a { padding: 8px 12px; } .nav-menu > ul > li.has-subpages > a { position: relative; } .nav-menu > ul > li.has-subpages > a:after { /* adding "to-bottom" arrow */ content: ""; position: absolute; display: block; /*right: 3px; top: 50%; margin-top: -2px;*/ left: 50%; bottom: 3px; margin-left: -2px; opacity: 0.8; width: 0; height: 0; border-left: 4px solid transparent; /* magic arrow */ border-right: 4px solid transparent; border-top: 4px solid #999; } .nav-menu > ul li.has-subpages li.has-subpages > a { position: relative; } .nav-menu > ul li.has-subpages li.has-subpages > a:after { /* adding "to-right" arrow */ content: ""; position: absolute; display: block; right: 3px; top: 50%; margin-top: -2px; opacity: 0.5; width: 0; height: 0; border-top: 4px solid transparent; /* magic arrow */ border-bottom: 4px solid transparent; border-left: 4px solid #999; } .nav-menu > ul.pull-right li.has-subpages li.has-subpages > a:after, .nav-menu > ul.pull-right li.has-subpages li.has-subpages > .menu-item:after { /* adding "to-left" arrow */ right: auto; left: 2px; border-top: 4px solid transparent; /* magic arrow */ border-bottom: 4px solid transparent; border-right: 4px solid #999; border-left: 0; } .nav-menu > ul { margin-left: 2px; } .nav-menu > ul > li { border-right: 1px solid #555; } .nav-menu > ul > li:last-child { border-right: 0; } .nav-menu li { float: left; position: relative; } .nav-menu a { display: block; padding: 0 1.0em; text-decoration: none; /*line-height: 2.333em; font-size: 16px;*/ } .nav-menu ul ul { /* submenu styles */ border-left: 1px solid #555; display: none; float: left; margin: 0; position: absolute; top: 2.23em; /* 2.33em */ left: -1px; width: 260px; z-index: 99999; } .nav-menu ul ul ul { /* submenu styles level-2 */ left: 100%; top: 0; } .nav-menu ul ul a { background-color: #1B1B1B; border-bottom: 1px solid #555; color: #999; height: auto; /*line-height: 1.4em; */ padding: 6px 15px; width: 240px; } .nav-menu li.current_page_item > a, .nav-menu li.current-page-item > a, .nav-menu li.current_menu_item > a, .nav-menu li.current-menu-item > a { background-color: #333; color: #fff; } .nav-menu li.current_page_ancestor > a, .nav-menu li.current-page-ancestor > a, .nav-menu li.current_menu_ancestor > a, .nav-menu li.current-menu-ancestor > a { background-color: #333; color: #fff; } .nav-menu li:hover > a, /*.nav-menu ul ul :hover > a,*/ .nav-menu a:focus { background: #444; color: #eee; } /*.nav-menu li:hover > a, .nav-menu a:focus { background-color: #e5e5e5; color: #373737; }*/ .nav-menu ul li:hover > ul { display: block; } .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a, .nav-menu .current_page_item > a, .nav-menu .current-page-item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-page-ancestor > a { /*font-weight: bold;*/ /* removed bold because menu with active items has different width */ } /* ========== site-header ========== */ .site-sidebar-header { margin: 0 0 30px 0; } .site-logo-title { border-bottom: 1px solid #aaa; padding-bottom: 20px; margin-bottom: 20px; } .site-logo { float: left; margin: 0 30px 0 0; } .site-logo img { max-width: 250px; max-height: 200px; } .site-logo a img { padding: 0; border: 0; } .site-title {} .site-title h3 {} /* ========== sidebar ========== */ .widget-area .widget { margin: 0 0 40px 0; } .widget-area .widget .widget-title { font-size: 18px; color: #555; margin-bottom: 5px; } .widget-area .current_page_item > a, .widget-area .current-cat > a { /* emphasize current item for easier navigation */ font-weight: bold; } /* ========== calendar widget ========== */ .widget-area .widget_calendar table td#today { background: #f2f7fc; font-weight: bold; } .widget-area .widget_calendar table td#prev { text-align: left; } .widget-area .widget_calendar table td#next { text-align: right; } #wp-calendar #next { text-align: right; } table#wp-calendar td, table#wp-calendar th { text-align: center; } .more-link{ white-space: nowrap; } /* ========== print ========== */ @media print { * { /* make everything without fancy features */ box-shadow: none !important; text-shadow: none !important; } .site-navigation, .widget-area, .site-footer, .respond-form, .comment-reply-link { /* hide main menu, sidebar and footer for print */ display: none; } .site-wrapper { margin-top: 10px; } .page-header { margin: 0 0 10px 0; } .page-header h1 { margin: 0; } a:after{ /* print URL after links */ content: " (" attr(href) ") "; } /*a[href$=".jpg"]:after { content: ""; } a[href$=".jpeg"]:after { content: ""; } a[href$=".png"]:after { content: ""; } a[href$=".gif"]:after { content: ""; } a[href$=".tiff"]:after { content: ""; } a[href$=".tif"]:after { content: ""; }*/ } /* ========== link extended ========== */ /* Add " (pdf)" or other text after links that go to files, commented because it could looks bad if link to file is wrapping the image */ /*a[href$=".pdf"]:after { content: " [pdf document]"; } a[href$=".doc"]:after { content: " [doc document]"; } a[href$=".docx"]:after { content: " [docx document]"; } a[href$=".ppt"]:after { content: " [ppt PowerPoint presentation]"; } a[href$=".pps"]:after { content: " [pps PowerPoint show]"; } a[href$=".xls"]:after { content: " [xls excel spreadsheet]"; } a[href$=".rtf"]:after { content: " [rtf rich text format]"; } a[href$=".txt"]:after { content: " [txt text]"; } a[href$=".zip"]:after { content: " [zip archive]"; } a[href$=".rar"]:after { content: " [rar archive]"; } a[href$=".7z"]:after { content: " [7z archive]"; } a[href$=".gz"]:after { content: " [gz archive]"; } a[href$=".tgz"]:after { content: " [tgz archive]"; } a[href$=".mp3"]:after { content: " [mp3 audio]"; } a[href$=".ogg"]:after { content: " [ogg audio]"; } a[href$=".wav"]:after { content: " [wav audio]"; } a[href$=".avi"]:after { content: " [avi video]"; } a[href$=".mpg"]:after { content: " [mpg video]"; } a[href$=".mpeg"]:after { content: " [mpeg video]"; } a[href$=".mp4"]:after { content: " [mp4 video]"; } a[href$=".wmv"]:after { content: " [wmv video]"; } a[href$=".wov"]:after { content: " [wov video]"; } a[href$=".exe"]:after { content: " [exe executable]"; }*/ /* link on images should be without extension a[href$=".jpg"]:after { content: " [jpg image]"; } a[href$=".jpeg"]:after { content: " [jpeg image]"; } a[href$=".png"]:after { content: " [png image]"; } a[href$=".gif"]:after { content: " [gif image]"; } a[href$=".tiff"]:after { content: " [tiff image]"; } a[href$=".tif"]:after { content: " [tif image]"; }*/ /* If file size specified as data attribute, use that too (does not work) */ /*a[href$=".pdf"][data-size]:after { content: " (pdf, " attr(data-size) ")"; }*/ /*a[href^="mailto:"]:after { content: " [email]"; }*/ .search-submit-button { cursor: pointer; } /* ========== placeholder text ========== */ ::-webkit-input-placeholder { color: #bbb; } :-moz-placeholder { color: #bbb; } /* ========== pager ========== */ .pager li > a { text-decoration: none; } /* ========== rss feed ========== */ .rss-feed-link { background: transparent url("img/rss-feed-icon.png") left top no-repeat; /* http://www.feedicons.com/ */ background-size: cover; display: inline-block; width: 16px; height: 16px; margin-left: 10px; opacity: 0.7; transition: all .3s ease; } .rss-feed-link:hover { opacity: 1; } /* ========== footer ========== */ .site-footer { font-size: 12px; line-height: 16px; color: #555; padding: 20px 0 0 0; /*margin: 0 20px -20px 20px;*/ border-top: 1px solid #EDEDED; } .site-footer p, .site-footer li { font-size: 12px; line-height: 16px; color: #555; } .site-footer .site-footer-left {} .site-footer .site-footer-right { opacity: 0.8; transition: all 0.3s ease; } .site-footer .site-footer-right:hover { opacity: 1; }