/*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body { -ms-word-wrap: break-word; word-wrap: break-word; } body, button, input, textarea { color: $color_body; font-family: $base-font; line-height: 1.618; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-weight: 400; } select { max-width: 100%; color: initial; border: 1px solid #eaeaea; font-family: $base-font; } h1, h2, h3, h4, h5, h6 { font-weight: 700; margin: 0 0 ms(-3); color: darken( $color_body, 20% ); a { font-weight: 700; } } h1, .alpha { font-size: ms(5); line-height: 1.214; } h2, .beta { font-size: 2em; line-height: 1.214; & + h3 { border-top: 1px solid $color_border; padding-top: ms(-3); } } h3, .gamma { font-size: ms(3); font-weight: 600; } h4, .delta { font-size: ms(2); font-weight: 700; } h5 { font-size: 1.3em; } h6 { font-size: 1.2em; } .alpha, .beta, .gamma, .delta { display: block; } p, ul, ol, table, blockquote, form { & + h2, & + header h2, & + h3, & + h4 { margin-top: ms(1); } } hr { background-color: #ccc; border: 0; height: 1px; margin: 0 0 ms(1); } p { margin: 0 0 ms(1); } ul, ol { margin: 0 0 ms(1) 3em; padding: 0; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: ms(1); } dt { font-weight: 700; } dd { margin: 0 0 ms(3); } b, strong { font-weight: 700; } dfn, i { font-style: italic; } blockquote { background: #f9f9f9; border-left: 8px solid #ccc; padding: 0.8em; quotes: "\201C""\201D""\2018""\2019"; margin: 0 0 1em 0; } blockquote p::last-child { margin-bottom: 0; } address { margin: 0 0 ms(1); } pre { background: rgba(#000,.1); font-family: "Courier 10 Pitch", Courier, monospace; margin-bottom: ms(3); padding: ms(3); overflow: auto; max-width: 100%; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; background-color: rgba(0,0,0,0.05); padding: .202em ms(-3); } abbr, acronym { border-bottom: 1px dotted #666666; cursor: help; } mark, ins { text-decoration: none; font-weight: 700; background: transparent; } 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 ms(1); width: 100%; } th { font-weight: bold; } a { color: $color_links; text-decoration: none; font-weight: normal; &:focus { outline: none; } } // Wait, what..? .basepress-cute * { font-family: "Comic Sans MS", sans-serif; } /** * Global styles */ * { box-sizing: border-box; } body { color: #333333; font-size: 16px; font-size: 1.6rem; -webkit-font-smoothing: antialiased; font-weight: 400; line-height: 1.625; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { -webkit-font-smoothing: antialiased; font-size: 62.5%; } *, *::before, *::after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { list-style: none; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; text-align: left; width: 100%; table-layout: fixed; } tbody th { font-weight: normal;; } th, td { padding: 8px 15px; text-align: left; border: 1px solid #ddd; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ form { margin-bottom: ms(3); } 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 */ *vertical-align: middle; /* Improves appearance and consistency in all browsers */ } button, input[type="button"], input[type="reset"], input[type="submit"] { border: 0; background: #fafafa; border: 1px solid #eaeaea; color: $color_body; cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ padding: ms(-2) ms(2); text-decoration: none; text-shadow: none; display: inline-block; outline: none; -webkit-appearance: none; -webkit-font-smoothing: antialiased; &.cta, &.alt { background-color: $color_links; border-color: $color_links; &:hover { background-color: $color_links; } } &.added { &::after { @include fa-icon(); content: "\f00c"; margin-left: ms(-3); } } &.loading { opacity: 0.5; } &.small { padding: ms(-3) ms(-1); font-size: ms(-1); } &.disabled, &:disabled { opacity: 0.5 !important; cursor: not-allowed; &:hover { opacity: 0.5 !important; } } } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } input[type="search"] { box-sizing: border-box; // Overrules normalize.css. } 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="number"], input[type="range"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="image"], select, textarea { width: 100%; border: 1px solid #eee; -webkit-box-shadow: 0 0 0 #fff; -moz-box-shadow: 0 0 0 #fff; box-shadow: 0 0 0 #fff; letter-spacing: 0.5px; outline: none; padding: ms(-2); color: #999; border-radius: 2px; box-sizing: border-box; font-weight: normal; &:focus { outline: none; color: darken( $color_body, 10% ); } } button, input[type="button"], input[type="reset"], input[type="submit"] { width: auto; -webkit-appearance: none; border-radius: 2px; box-sizing: border-box; font-weight: normal; &:focus { color: darken( $color_body, 20% ); } } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: ms(-1); vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; } label { padding-right: 10px; margin-bottom: 14px; } label.inline { input { width: auto; } } fieldset { padding: 0; border: 0; margin-bottom: ms(3); legend { font-weight: 700; } } [placeholder]:focus::-webkit-input-placeholder { -webkit-transition: opacity 0.5s 0.5s ease; -moz-transition: opacity 0.5s 0.5s ease; transition: opacity 0.5s 0.5s ease; opacity: 0; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .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-size: 0.875rem; 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. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clear --------------------------------------------------------------*/ .clearfix { display: block; } .clearfix::before, .clearfix::after { content: ""; display: table; table-layout: fixed; } .clearfix::after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets. */ .widget { ul { padding: 0; margin: 0; } table { display: table; } } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ article { &.page { display: block; } ul { margin: 0 0 1.5em 2.5em; list-style-type: disc; } ol { margin: 0 0 1.5em 2.5em; list-style-type: decimal; } } li > ul, li > ol { margin-bottom: 0; } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .single .byline, .group-blog .byline { display: inline; } .page-links { clear: both; margin: 0 0 1.5em; } .type-page { margin-bottom: 20px; } .post-item .entry-content { font-size: 15px; } /*-------------------------------------------------------------- ## Post List Item --------------------------------------------------------------*/ .post-item { width: 100%; background: #fff; margin: 0 0 30px 0; border: 1px solid #e0e0e0; box-sizing: border-box; padding: 32px 40px 40px; word-wrap: break-word; } .post-item .thumbnail { margin: 8px 0 15px; } .thumbnail img { width: 100%; } .page-title { font-size: 38px; } .entry-title { word-wrap: break-word; margin-bottom: 20px; line-height: 1; } .entry-title a { font-size: 32px; } .more-link { width: 100%; font-size: 16px; color: #cb2027; margin: 10px 0; float: left; } /*-------------------------------------------------------------- ## Entry-Content --------------------------------------------------------------*/ .post-item .entry-content.full-content { overflow: visible; } .entry-content h1 { font-size:32px; line-height:40px; margin-top:33px; margin-bottom:23px; } .entry-content h2 { font-size:27px; line-height:38px; margin-top:30px; margin-bottom:20px; } .entry-content h3 { font-size:22px; line-height:30px; margin-top:27px; margin-bottom:17px; } .entry-content h4 { font-size:19px; line-height:29px; margin-top:24px; margin-bottom:14px; } .entry-content h5 { font-size:17px; line-height:25px; margin-top:21px; margin-bottom:11px; } .entry-content h6 { font-size:16px; line-height:24px; margin-top:21px; margin-bottom:11px; } .entry-content p { line-height: 26px; word-wrap: break-word; margin-bottom: 26px; } .entry-content a:hover { text-decoration: underline; } .entry-content ol { margin: 15px; } .entry-content ul { margin: 15px; margin-right: 0; list-style: none; line-height: 26px; word-wrap: break-word; } .entry-content li { line-height: 26px; word-wrap: break-word; margin-left: 21px; } .entry-content ul li::before { font: normal normal normal 14px/1 FontAwesome; content: "\f105"; float: left; margin-left: -16px; line-height: 26px; font-size: 14px; } .entry-content ol > li::before { content: ""; } /*-------------------------------------------------------------- ## Entry-Header --------------------------------------------------------------*/ .entry-header > span { position: relative; display: inline-block; font-size: 15px; color: #666666; margin-right: 26px; } .entry-header > span::last-child { margin-right: 0; } .entry-header > span::after { content: '/'; font-size: 15px; position: absolute; top: 0px; right: -14px; } /*-------------------------------------------------------------- ## Entry-Footer --------------------------------------------------------------*/ .entry-footer, .entry-meta { width: 100%; font-size: 0.875em; padding-top: 30px; border-top: 1px solid #eaeaea; clear: both; } .entry-footer i { font-size: 14px; padding-right: 2px; } .entry-footer > span, .entry-meta > span { position: relative; display: inline-block; padding-right: 16px; } .entry-footer > span::last-child, .entry-meta > span::last-child { padding-right: 0; } .entry-footer > span::after, .entry-meta > span::after { content: '|'; position: absolute; right: 4px; line-height: normal; } .entry-footer > .author-by { margin-right: 16px; } .entry-footer > .author-by::after { content: ':'; right: -10px; } .entry-footer > span::last-child::after, .entry-meta > span::last-child::after { content: ''; } .entry-footer span a { color: #979797; text-decoration: underline; } .entry-footer span a:hover { text-decoration: none; } .post-edit-link { margin-top: 10px; display: inline-block; font-size: 16px; } .entry-footer .meta-author a { text-transform: capitalize; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-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; } /*-------------------------------------------------------------- # Default Pagination --------------------------------------------------------------*/ .posts-navigation { width: 100%; float: left; margin-bottom: 30px; box-sizing: border-box; } .posts-navigation .nav-links .nav-previous { float: left; } .posts-navigation .nav-links .nav-next { float: right; } .posts-navigation .nav-links a { display: block; background: #fff; padding: 16px 26px; font-size: 16px; color: #333333; border: 1px solid #e0e0e0; line-height: 1; } /*-------------------------------------------------------------- # Numberal Pagination --------------------------------------------------------------*/ .pagination { width: 100%; float: left; margin-bottom: 30px; .nav-links span, .nav-links a { float: left; width: 50px; color: #cb2027; height: 50px; text-align: center; line-height: 50px; font-size: 16px; background: #fff; margin-right: 3px; border: 1px solid #eaeaea; box-sizing: border-box; transition: all 0.25s linear; -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; } .nav-links a:hover, .nav-links span.current { color: #333; text-decoration: underline; } } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: ms(1); max-width: 100%; img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption-text { font-size: 16px; font-size: 1.6rem; margin: 10px 0 20px 0; line-height: normal; text-align: center; font-style: italic; color: #cb2027; } } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } /*-------------------------------------------------------------- # 11.0 - Header --------------------------------------------------------------*/ .site-header { position: relative; margin: 0; width: 100%; clear: both; box-sizing: border-box; background: #ffffff; } /*-------------------------------------------------------------- # 12.0 - Header-Images --------------------------------------------------------------*/ .header-image { width: 100%; margin-top: -1px; text-align: center; margin: 0; } .header-image img { max-width: 2500px; max-height: 500px; vertical-align: top; width: 100%; height: auto; } /*-------------------------------------------------------------- # Logo --------------------------------------------------------------*/ .site-branding { float: left; max-width: 100%; margin: 30px 0; } .logo { margin-bottom: 0; } .site-title { display: inline-block; font-size: 38px; margin: 0; } .site-title a { color: #333333; text-transform: uppercase; text-decoration: none; font-weight: 700; } .site-description { margin-bottom: 0; line-height: 1; } /*-------------------------------------------------------------- # Main Menu --------------------------------------------------------------*/ .mobile-only, .menu-toggle, .arrow-menu { display: none; } .arrow-main-menu { display: none; } .widget_nav_menu .arrow-menu { display: block; } .widget_nav_menu ul.sub-menu { display: none; } .widget_nav_menu .arrow-menu { width: 44px; text-align: center; cursor: pointer; position: absolute; right: 0; top: 50%; margin-top: -11px; } .wpadminbar-active .widget_nav_menu .arrow-menu { top: 0; margin-top: 11px; } .widget li.page_item_has_children .arrow-menu, .widget li.menu-item-has-children .arrow-menu { top: 0; margin-top: 0; } .main-navigation { ul { li { position: relative; float: left; &.menu-item-has-children { > a { padding-right: 20px; } } .arrow-main-menu { position: absolute; top: 31px; right: 2px; } .arrow-main-menu i { font-size: 16px; } } > li::last-child { > ul { li:hover > ul { left: -230px; } } } > li::last-child { } ul { display: none; position: absolute; margin: 0; z-index: 47; width: 230px; background-color: #ffffff; padding: 0; border-top: 1px solid #e0e0e0; li { .arrow-main-menu { top: 15px; right: 15px; } } } a { position: relative; display: block; font-size: 16px; color: #333; line-height: 1; padding: 30px 15px; } } } .main-navigation ul ul ul { left: 229px; top: -1px; } .main-navigation ul ul li a { width: 230px; padding-top: 15px; padding-bottom: 15px; background: transparent; line-height: 1.6; border-left: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; } .main-navigation-menu li:hover > a { color: #cb2027; text-decoration: underline; } .main-navigation > ul li.menu-item-has-children > a::after { content: "\f107"; font-family: FontAwesome; position: absolute; right: 7px; } .main-navigation > ul ul li.menu-item-has-children > a::after { top: 18px; right: 10px; } .secondary-menu { width: 100%; position: relative; background: #fff; border-top: 1px solid #e0e0e0; } /*-------------------------------------------------------------- # category Menu --------------------------------------------------------------*/ .category-menu { width: 100%; position: relative; background: #fff; border-top: 1px solid #e0e0e0; } /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ .site-content { width: 100%; position: relative; margin-top: 40px; } .fullwidth-content-area { width: 100%; max-width: 100%; background: #fff; margin: 0 0 30px 0; padding: 40px; border: 1px solid #e0e0e0; box-sizing: border-box; } .container { @include clearfix; @include container($container-width); } /*-------------------------------------------------------------- # Single Post --------------------------------------------------------------*/ .page-content, .single_post { width: 100%; background: #fff; margin: 0 0 30px 0; padding: 40px; float: left; border: 1px solid #e0e0e0; box-sizing: border-box; } .single_post .entry-header { margin-bottom: 25px; } .single-title { margin: 0 0 10px; font-size: 36px; line-height: 1.2; } .single_post .entry-footer { margin: 15px 0 40px; } .meta-tags a { position: relative; display: inline-block; margin-right: 10px; } /*------------------------------------------------------------ # breadcrumb -------------------------------------------------------------*/ .breadcrumb { width: 100%; font-size: 16px; padding: 0; margin-bottom: 40px; float: left; box-sizing: border-box; } #crumbs a { margin-right: 5px; margin-left: 5px; } #crumbs span { margin-left: 5px; } #crumbs a::first-child { margin-left: 0; } /*-------------------------------------------------------------- # Post Navigation --------------------------------------------------------------*/ .post-navigation { width: 100%; margin-bottom: 30px; display: inline-block; box-sizing: border-box; } .post-navigation .nav-links { width: 100%; display: inline-block; } .post-navigation { .nav-previous { width: 46%; float: left; a { text-align: left; } } .nav-next { width: 46%; float: right; a { text-align: right; } } } .post-navigation .nav-links a { position: relative; text-decoration: none; padding: 0 18px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; line-height: normal; } .post-navigation .nav-links a::before { font-family: FontAwesome; position: absolute; } .post-navigation .nav-previous a::before { content: '\f060'; left: 0; } .post-navigation .nav-next a::before { content: '\f061'; right: 0; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .fn a { color: #353535; } #comments { padding: 0; margin: 0; float: left; clear: both; width: 100%; } .comments-title { margin: 0 0 20px 0; position: relative; box-sizing: border-box; background: #f6f6f6; padding: 30px 40px; } #comments .avatar { float: left; margin-right: 20px; margin-top: 5px; } .comment-list > li { margin-bottom: 25px; box-sizing: border-box; } .comment-list > li::last-child { margin-bottom: 0; } .comments-area ol { list-style: none; } .comment-list { float: left; padding: 0; margin: 0 0 30px 0; } .comment-list .children { float: left; margin: 25px 0 0 0; padding: 0 0 0 100px; } .comment-meta { margin-bottom: 10px; } .comment-content a { word-wrap: break-word; } .comment-content { overflow: hidden; margin-bottom: 10px; } .comment-list .comment-content p { font-size: 16px; } .comment-list .comment-content p::last-of-type { margin-bottom: 0; } .comment-metadata { font-size: 14px; margin-top: 10px; line-height: 1; } .comment-metadata a { color: #a4a4a4; } .comments-area .reply { padding-left: 118px; line-height: 1; } .reply a { color: #a4a4a4; font-size: 16px; } .reply a:hover { text-decoration: none; color: #cb2027; } .comment-content a { word-wrap: break-word; } .comment { float: left; width: 100%; margin-bottom: 25px; -ms-word-wrap: break-word; word-wrap: break-word; } .comment .comment-respond { margin-top: 25px; } .comment-list .children li::last-child { margin-bottom: 0; } .comment-form-wrap { box-sizing: border-box; margin-bottom: 30px; clear: both; } .comment-reply-title { font-size: 24px; margin: 0; padding-bottom: 10px; } .comment-awaiting-moderation { margin: 10px 0; font-size: 16px; line-height: 1; } .bypostauthor { display: block; } input#author, input#email, input#url { width: 100%; max-width: 430px; font-size: 16px; border: 1px solid #dedede; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; background: #fff; color: #c0c0c0; } textarea#comment { width: 100%; font-size: 16px; border: 1px solid #dedede; padding: 1.4%; line-height: 25px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 196px; background: #fff; color: #c0c0c0; } input#author, input#email, input#url, textarea#comment { transition: all .25s ease-in-out; } .form-submit { margin-bottom: 10px; } input#submit { background: #fafafa; border: 1px solid #eaeaea; color: #777; font-size: 16px; font-weight: normal; padding: 13px 20px; text-shadow: none; box-shadow: none; border-radius: inherit; outline: none; margin: 0; transition: background 0.25s linear; } input#submit:hover { border-color: #c5c5c5; color: #666666; } .logged-in-as a { color: #a4a4a4; font-size: 16px; border-bottom: 1px dotted; } /*-------------------------------------------------------------- # Archive --------------------------------------------------------------*/ .page-header { background: #fff; border: 1px solid #eaeaea; margin-bottom: 30px; } .page-header .archive-title, .page-header .page-title { font-size: 22px; display: block; margin: 0; padding: 22px 40px; } /*-------------------------------------------------------------- # Page 404 --------------------------------------------------------------*/ .error-404 .widgettitle { margin-top: 30px; font-size: 24px; } .not-found .search-form { max-width: 100%; width: 360px; } .not-found .widget_archive select { max-width: 100%; width: 360px; padding: 8px 10px; } /*-------------------------------------------------------------- # Aside --------------------------------------------------------------*/ .sidebar .widget { width: 100%; clear: both; overflow: hidden; position: relative; margin: 0 0 30px 0; padding: 40px; background: #fff; border: 1px solid #e0e0e0; box-sizing: border-box; } .widget-title { font-size: 24px; margin-bottom: 20px; line-height: 1; } .widget-title a { color: #000000; } .widget-title a:hover { color: #cb2027; } .widget li { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #eaeaea; } .widget li::last-child { border-bottom: 0; } .widget li a:hover { text-decoration: underline; } .widget ul ul { list-style: none; padding: 0; margin: 15px 0 0 0; } .widget ul ul li { margin-left: 15px; } .widget ul ul li::last-child { margin-bottom: 0; padding-bottom: 0; } /* Facebook Like Box */ .widget.facebook_like .fb-like-box { display: block; overflow: hidden; } /* Widget Recent Comments */ .widget ul li.recentcomments a:hover { text-decoration: underline; color: #333333; } /*------------------------------------------------- # Search --------------------------------------------------*/ .search-form { position: relative; box-sizing: border-box; margin-bottom: 0; } .search-form .search-field { width: 100%; height: 46px; line-height: 46px; display: inline-block; outline: none; border: 1px solid #eaeaea; padding: 8px 15px; box-shadow: none; box-sizing: border-box; -webkit-appearance: none; } .search-form .search-submit { height: 46px; width: 46px; line-height: 46px; margin: 0; background: url(assets/images/search.png) no-repeat center; position: absolute; top: 0; right: 0; border: none; font-size: 0; box-shadow: none; } input::-webkit-input-placeholder { color: #999 } input::-moz-placeholder { color: #999 } input:-moz-placeholder { color: #999 } input:-ms-input-placeholder { color: #999 } input:input-placeholder { color: #999 } /*------------------------------------------------- # Tags Cloud --------------------------------------------------*/ .tagcloud { padding-left: 10px; } .tagcloud a { color: #333333; margin: 0 15px 5px 0; position: relative; display: inline-block; } .tagcloud a::before { content: '#'; position: absolute; top: 0; left: -10px; } .tagcloud a:hover { color: #cb2027; text-decoration: underline; } /* widget Calendar */ #wp-calendar { margin-bottom: 0; border: 0; } #wp-calendar caption { font-size: 16px; font-weight: 400; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; } #wp-calendar thead th { font-weight: 700; padding: 10px 0; text-align: center; border: 0; } #wp-calendar td { text-align: center; padding: 5px 0; border: 0; } #wp-calendar td#today { color: #cb2027; } #wp-calendar #prev { text-align: left; padding-left: 12px; } #wp-calendar #next { text-align: right; padding-right: 12px; } /*------------------------------------------------- # Text Widget --------------------------------------------------*/ .textwidget, .textwidget p { font-size: 15px; line-height: 26px; } /*------------------------------------------------- # Widget For Theme Pro --------------------------------------------------*/ .post-meta { font-size: 12px; color: #999; margin: 8px 0 4px; } .post-meta span { display: inline-block; position: relative; margin-right: 5px; } .post-meta span::last-child { margin-right: 0; } .tc-sidebar-widget li p { font-size: 13px; line-height: 1.5; margin-bottom: 0; } /*-------------------------------------------------------------- # Social --------------------------------------------------------------*/ .social-profile-icons ul { text-align: center; } .social-profile-icons ul li { width: 15%; float: none; display: inline-block; text-align: center; padding: 0; margin: 2%; border: none; } .social-profile-icons ul li a { display: block; color: #fff; line-height: 40px; text-align: center; border-radius: 2px; } .social-profile-icons .facebook a { background: #45619c; } .social-profile-icons .youtube a { background: #cd2227; } .social-profile-icons .gplus a { background: #e75c3c; } .social-profile-icons .linkedin a { background: #03496E; } .social-profile-icons .pinterest a { background: #bd2026; } .social-profile-icons .behance a { background: #1879fd; } .social-profile-icons .flickr a { background: #ff48a3; } .social-profile-icons .instagram a { background: #c13685; } .social-profile-icons .dribbble a { background: #ea4c89; } .social-profile-icons .soundcloud a { background: #ff7e30; } .social-profile-icons .twitter a { background: #0690C2; } .social-profile-icons .vimeo a { background: #35c6ea; } .social-profile-icons .stumbleupon a { background: #ff5c30; } .social-profile-icons .tumblr a { background: #36465c; } .social-profile-icons .github a { background: #b5a470; } .social-profile-icons .foursquare a { background: #0bbadf; } .social-profile-icons .reddit a { background: #ff4400; } .social-profile-icons .dropbox a { background: #3476e4; } .social-profile-icons .skype a { background: #13c1f3; } .social-profile-icons .email a { background: #1d90dd; } .social-profile-icons .rss a { background: #f26623; } /*------------------------------------------------- # Site Footer --------------------------------------------------*/ .site-footer { position: relative; width: 100%; background: #fff; } .site-info { text-align: center; font-size: 14px; color: #333; line-height: 1.6; padding: 10px 0; } /*------------------------------------------------- # Menu Footer --------------------------------------------------*/ .footer-navigation { width: 100%; text-align: center; margin: 10px 0 0 0; } .footer-navigation ul { margin: 0; } .footer-menu li { position: relative; display: inline-block; } .footer-menu li::after { content: '|'; position: absolute; top: 0px; right: -6px; font-size: 14px; } .footer-menu li::last-child::after { content: ''; } .footer-menu li a { padding: 0 8px; display: block; font-size: 14px; color: #333333; } .footer-menu li:hover a { color: #cb2027; text-decoration: underline; } .copyrights { margin: 30px 0 0 0; } .copyrights .site-info a::hover { border-bottom: dotted 1px; text-decoration: none; } /*------------------------------------------------- # Back To Top --------------------------------------------------*/ .back-to-top { width: 50px; height: 50px; color: #fff; font-size: 16px; line-height: 50px; text-align: center; position: fixed; right: 20px; bottom: 10px; z-index: 9; cursor: pointer; border-radius: 3px; transition: background 0.25s linear; background: #cb2027; } .back-to-top i { width: 50px; height: 50px; line-height: 50px; border: none; border-radius: 3px; transition: background 0.25s linear; } .back-to-top:hover i { background: rgba(0, 0, 0, 0.1); } /*-------------------------------------------------------------- # Ads Management --------------------------------------------------------------*/ .ad-center { clear: both; width: 100%; text-align: center; margin: 10px 0; } .ad-right { float: right; margin: 20px 0 20px 20px; } .ad-left { float: left; margin: 20px 20px 20px 0; } .ads-970x90, .ads-468x60 { width: 100%; text-align: center; clear: both; } .ads-468x60 { margin: 0 0 40px 0; } .ads-970x90 { margin: 0 0 30px 0; } .ads-970x90 img, .ads-468x60 img { display: block; margin: 0 auto; } @media screen and (max-width: 880px) { .content-area, .widget-area { display: inline-block; width: 100%; } } @media screen and (max-width: 480px) { .mobile-only, .menu-toggle, .arrow-menu { display: block; } .widget li.menu-item-has-children .arrow-menu { display: block; } .widget li.page_item_has_children ul.children, .widget li.menu-item-has-children ul.sub-menu { display: none; } }