/* ===================================================== * * * Theme Name: Alku * Theme URI: http://demo.dronix.me/alku * Description: A simple theme built with Hybrid Core. It supports all of the post-formats, includes icon fonts and a gallery slider. The layout is responsive and supports up to two columns. * Version: 0.1.0 * Author: Danny Ramirez * Author URI: http://dronix.me * Tags: white, one-column, two-columns, fixed-width, threaded-comments, sticky-post, translation-ready, rtl-language-support, editor-style, post-formats * License: WTFPL * License URI: http://www.wtfpl.net/ * * Copyright (c) 2013 dronix. All rights reserved. * http://dronix.me * * ====================================================== */ /* ====================================================== * TABLE OF CONTENTS :D $Reset........................[DR01] $Global.......................[DR02] $Typography...................[DR03] $Helpers......................[DR04] $Floats...................[DR04.1] $Buttons..................[DR04.2] $Structure....................[DR05] $Default 2c-l.............[DR05.1] $Two Columns 2c-r.........[DR05.2] $One Column 1c............[DR05.3] $Header.......................[DR06] $Main Navigation..............[DR07] $Main Content.................[DR08] $Image Alignments.........[DR08.1] $Post Formats.............[DR08.2] $Pagination...................[DR09] $Comments.....................[DR10] $Comment Form.............[DR10.1] $Sidebar......................[DR11] $Search Widget............[DR11.1] $Gallery Widget...........[DR11.2] $About Widget.............[DR11.3] $Calender Widget..........[DR11.4] $Page Footer..................[DR12] $Media Queries................[DR13] $Drop-down Menu...........[DR13.1] * ======================================================= */ /* ==================================== */ /* $Reset [DR01] */ /* ==================================== */ body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote { margin: 0; padding: 0; border: 0; } header, hgroup, footer, section, article, aside { display: block; } a { text-decoration: none; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* ==================================== */ /* $Global [DR02] */ /* ==================================== */ html { font-size: 62.5%; } body { background: #fff; color: #555; font-weight: 300; font-size: 15px; font-size: 1.5rem; font-family: "Helvetica Nue", Helvetica, Arial, sans-serif; line-height: 24px; line-height: 2.4rem; } body.custom-font-enabled { font-weight: 400; font-family: "Open Sans", "Helvetica Nue", Helvetica, Arial, sans-serif; } ::selection { background: #feffda; color: #555; } ::-moz-selection { background: #feffda; color: #555; } p { margin-bottom: 20px; margin-bottom: 2rem; } a { color: #39f; } a:hover { color: #2b2e31; -webkit-transition: color 200ms linear, background 200ms linear; -moz-transition: color 200ms linear, background 200ms linear; -ms-transition: color 200ms linear, background 200ms linear; -o-transition: color 200ms linear, background 200ms linear; transition: color 200ms linear, background 200ms linear; } img { max-width: 100%; height: auto; border-radius: 5px; } iframe { max-width: 100%; } .post-edit-link { color: #aaa; } .post-edit-link:hover { color: #39f; } input, textarea { padding: 10px; padding: 1rem; border: 1px solid #f8f8f8; border-radius: 5px; background-color: #f8f8f8; color: #999; } input:hover, input:focus, textarea:hover, textarea:focus { outline: 0; border: 1px solid #e8e8e8; } input[type="submit"] { padding: 10px 22px; padding: 1rem 2.2rem; border: none; background-color: #2b2e31; color: #fff; font-size: 15px; font-size: 1.5rem; cursor: pointer; -webkit-appearance: none; } input[type="submit"]:hover { background-color: #39f; -webkit-transition: color 200ms linear, background 200ms linear; -moz-transition: color 200ms linear, background 200ms linear; -ms-transition: color 200ms linear, background 200ms linear; -o-transition: color 200ms linear, background 200ms linear; transition: color 200ms linear, background 200ms linear; } /* ==================================== */ /* Typography [DR03] */ /* ==================================== */ h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; margin-bottom: 2rem; color: #2b2e31; line-height: 30px; line-height: 3rem; } h1 { font-size: 28px; font-size: 2.8rem; } h2 { font-size: 20px; font-size: 2rem; } h3 { font-size: 15px; font-size: 1.5rem; } h4 { font-size: 13px; font-size: 1.3rem; } h5 { font-size: 11px; font-size: 1.1rem; } h6 { font-weight: normal; font-size: 11px; font-size: 1.1rem; } strong, th, dt { color: #2b2e31; } ins { background-color: #feffda; text-decoration: none; } code, pre { padding: 0 5px; border: 1px solid #E8E8E8; border-radius: 5px; background-color: #F8F8F8; } pre { padding: 20px; padding: 2rem; font-size: 12px; font-size: 1.2rem; font-family: "Monaco", monospace; } address { margin-bottom: 20px; margin-bottom: 2rem; } table { margin-bottom: 20px; margin-bottom: 2rem; width: 100%; border-spacing: 0; border-collapse: collapse; } th { border-bottom: 2px solid #e8e8e8; } th, td { padding: 5px 20px; padding: 0.5rem 2rem; text-align: left; } td { border-bottom: 1px solid #e8e8e8; font-size: 14px; font-size: 1.4rem; } table .alternate { background-color: #f8f8f8; } .entry-content ul, .entry-content ol, .comment-content ul, .comment-content ol { margin: 0 20px 20px; margin: 0 2rem 2rem; padding-left: 10px; padding-left: 1rem; } .entry-content blockquote, .comment-content blockquote { padding: 20px; font-style: italic; } .entry-content dl, .entry-comment dl { margin: 0 20px; margin: 0 2rem; } .entry-content dt, .comment-content dt { font-weight: 700; } .entry-content dd, .comment-content dd { margin-bottom: 20px; margin-bottom: 2rem; } .avatar { width: 48px; height: 48px; } /* ==================================== */ /* $Helpers [DR04] */ /* ==================================== */ .hidden-text { position: absolute; top: -9999px; left: -9999px; } /* ======== $Floats [DR04.1] ========= */ .aligncenter { display: block; margin: auto; } .fl, .alignleft { float: left; } .fr, .alignright { float: right; } .clearfix { display: block; clear: both; content: ""; } /* ======= $Buttons [DR04.2] ======= */ button { padding: 10px 22px; padding: 1rem 2.2rem; border: none; border-radius: 5px; background-color: #2b2e31; color: #fff; font-size: 15px; font-size: 1.5rem; cursor: pointer; -webkit-appearance: none; } button:hover { } button:hover { background-color: #39f; -webkit-transition: color 200ms linear, background 200ms linear; -moz-transition: color 200ms linear, background 200ms linear; -ms-transition: color 200ms linear, background 200ms linear; -o-transition: color 200ms linear, background 200ms linear; transition: color 200ms linear, background 200ms linear; } button.red, [type="submit"].red { background-color: #f33737; } button.red:hover, [type="submit"].red:hover { background-color: #b40b0b; } button.green, [type="submit"].green { background-color: #9bd845; } button.green:hover, [type="submit"].green:hover { background-color: #78ac07; } button.blue, [type="submit"].blue { background-color: #39f; } button.blue:hover, [type="submit"].blue:hover { background-color: #0762bd; } button.orange, [type="submit"].orange { background-color: #f37937; } button.orange:hover, [type="submit"].orange:hover { background-color: #c43d08; } button.yellow, [type="submit"].yellow { background-color: #f3bf37; } button.yellow:hover, [type="submit"].yellow:hover { background-color: #d98610; } button.download, [type="submit"].download { background-color: #6333ff; } button.download:before { padding-right: 7px; padding-right: 0.7rem; content: "\e0c3"; font-family: "Elusive-Icons"; line-height: 7px; } button.download:hover, [type="submit"].download:hover { background-color: #4613ea; } /* ==================================== */ /* $Structure [DR05] */ /* ==================================== */ /* ===== $Default 2c-l [DR05.1] ======= */ #page-container { margin: 0 auto; padding: 0 20px; max-width: 1000px; max-width: 100rem; } #page-header { margin-bottom: 100px; margin-bottom: 10rem; padding: 40px 0 100px; padding: 4rem 0 10rem; } #content { clear: both; overflow: hidden; margin-bottom: 80px; margin-bottom: 8rem; } #main { float: left; width: 62.5%; } #sidebar { float: right; width: 27.08%; } /* === $Two Columns 2c-r [DR05.2] ==== */ .layout-2c-r #main { float: right; } .layout-2c-r #sidebar { float: left; } /* ===== $One Column 1c [DR05.3] ====== */ .layout-1c #main { float: none; width: 100%; } .layout-1c .entry-header { text-align: center; } .layout-1c .entry-header i { top: 0; float: none; } .layout-1c .wp-post-image { display: block; margin: 0 auto; margin-bottom: 30px; margin-bottom: 3rem; } .layout-1c .more-link { float: right; } /* ==================================== */ /* $Header [DR06] */ /* ==================================== */ #branding { float: left; } #branding a { color: #2b2e31; } #branding a:hover { color: #39f; } .site-title { margin-bottom: 0; padding-bottom: 20px; padding-bottom: 2rem; font-size: 48px; font-size: 4.8rem; line-height: 50px; line-height: 5rem; } .site-description { margin-bottom: 0; color: #999; font-weight: 300; } /* ==================================== */ /* $Main Navigation [DR07] */ /* ==================================== */ #page-nav { float: right; } #page-nav a { color: #999; } #page-nav a:hover { color: #2b2e31; } #menu-main:after { display: block; clear: both; content: ""; } #menu-main li { position: relative; display: inline; padding-bottom: 10px; padding-left: 20px; padding-left: 2rem; } #menu-main .current-menu-item a { color: #2b2e31; } .menu-item-home a { display: inline-block; } .menu-item-home i { padding-right: 5px; } .mobile-menu-toggle { clear: both; padding: 10px 22px; padding: 1rem 2.2rem; background-color: #2b2e31; color: #fff; } .mobile-menu-toggle:hover { color: #fff; } .mobile-menu-toggle .icon-menu { float: right; font-size: 23px; font-family: "Helvetica Nue", Helvetica, Arial, sans-serif; } .mobile-menu-container #menu-main { border-radius: 5px; background-color: #2b2e31; color: #fff; } .mobile-menu-container #menu-main li { display: block; padding: 0; } .mobile-menu-container #menu-main li ul { margin-left: 10px; margin-left: 1rem; } .mobile-menu-container #menu-main a { display: block; padding: 10px 22px; padding: 1rem 2.2rem; width: 100%; background-color: #2b2e31; color: #fff; } .mobile-menu-container #menu-main a:hover { background-color: #39f; } .mobile-menu-toggle, .mobile-menu-container { display: none; } /* ==================================== */ /* $Main Content [DR08] */ /* ==================================== */ .hentry { overflow: hidden; margin-bottom: 80px; margin-bottom: 8rem; border-bottom: 1px solid #e8e8e8; word-wrap: break-word; } #post-0 { border: none; } .post:last-child { margin-bottom: 0; } .loop-meta { margin-bottom: 40px; margin-bottom: 4rem; border-bottom: 1px solid #e8e8e8; } .loop-title { text-align: center; } .loop-meta-term { background-color: #feffda; } .entry-header { margin-bottom: 20px; margin-bottom: 2rem; } .wp-post-image { margin-bottom: 30px; margin-bottom: 3rem; max-width: 100%; height: auto; } .entry-title { margin-bottom: 5px; margin-bottom: 0.5rem; font-weight: 800; font-size: 28px; font-size: 2.8rem; line-height: 33px; line-height: 3.3rem; } .entry-header-meta { color: #999; font-weight: 1.3rem; font-size: 13px; } .comments-link, .entry-title a:hover, .author a:hover { color: #39f; } .entry-content { margin-bottom: 40px; margin-bottom: 4rem; } .singular-post .entry-content p:first-child { color: #2b2e31; font-weight: 600; font-size: 16px; font-size: 1.6rem; } .singular-post .entry-content blockquote p:first-child { color: #555; font-weight: 400; font-size: 14px; font-size: 1.4rem; } .more-link { display: inline-block; margin-bottom: 50px; margin-bottom: 5rem; padding: 10px 22px; padding: 1rem 2.2rem; border-radius: 5px; background-color: #2b2e31; color: #fff; } .more-link:hover { background-color: #39f; color: #fff; } .post_tag { display: block; clear: both; padding-bottom: 20px; padding-bottom: 2rem; color: #999; font-size: 13px; font-size: 1.3rem; } .category a, .author a, .post_tag a { color: #999; } .entry-title a, .author a, .category a:hover, .post_tag a:hover { color: #2b2e31; } .entry-footer { clear: both; } .author-info { padding-bottom: 20px; padding-bottom: 2rem; } .author-info-header { margin-bottom: 0; padding: 20px 0 5px 0; padding: 2rem 0 0.5rem 0; border-top: 1px solid #e8e8e8; color: #999; text-align: center; line-height: 20px; line-height: 2rem; } .author-info h2 { margin-bottom: 0; font-size: 24px; font-size: 2.4rem; } .author-info .avatar { float: left; margin: 0 20px 10px 0; margin: 0 2rem 1rem 0; width: 48px; height: 48px; } .author-info p { clear: both; line-height: 21px; line-height: 2.1rem; } .error .search-text { margin-bottom: 20px; margin-bottom: 2rem; width: 50%; font-size: 12px; font-size: 1.2rem; } .error-image { margin: 20px 0; margin: 2rem 0; } .error-term { background-color: #feffda; } /* ==== $Image Alignments [DR08.1] === */ img.aligncenter { margin-top: 10px; margin-top: 1rem; margin-bottom: 10px; margin-bottom: 1rem; } img.alignleft { margin: 0 20px 10px 0; margin: 0 2rem 1rem 0; } img.alignright { margin: 0 0 10px 20px; margin: 0 0 1rem 2rem; } /* ===== $Post Formats [DR08.2] ====== */ .entry-header i { position: relative; top: 2px; float: left; margin-right: 10px; margin-right: 1rem; color: #2b2e31; font-size: 20px; font-size: 2rem; line-height: 33px; line-height: 3.3rem; } .format-aside .entry-content p:first-child, .format-chat .entry-content p:first-child, .format-gallery .entry-content p:first-child, .format-status .entry-content p:first-child { color: #555; font-weight: normal; font-size: 15px; font-size: 1.5rem; line-height: 24px; line-height: 2.4rem; } .chat-transcript { border-top: 1px solid #e8e8e8; } .chat-row { padding: 5px 10px; padding: 0.5rem 1rem; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; } .chat-author { float: left; margin-right: 10px; margin-right: 1rem; font-weight: 700; } .chat-row:nth-child(even) { background-color: #f8f8f8; } .chat-text p { margin-bottom: 0; } .format-aside .post-edit-link { display: block; margin-bottom: 10px; } .format-aside .entry-content, .format-link .entry-content { text-align: center; } .aside-permalink { font-size: 28px; font-size: 2.8rem; } .format-gallery .entry-content:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; line-height: 0; } .format-gallery ul { list-style: none; } .gallery-slider-container { overflow: hidden; margin-bottom: 20px; margin-bottom: 2rem; } .format-gallery p { clear: both; } .flexslider .slides li { display: none; -webkit-backface-visibility: hidden; } .gallery { margin-bottom: 20px; margin-bottom: 2rem; } .format-link .entry-content a { font-size: 20px; font-size: 2rem; } .format-status .published { float: right; color: #999; font-size: 13px; font-size: 1.3rem; } .status-avatar { float: left; margin-right: 10px; margin-right: 1rem; } .status-author { color: #2b2e31; font-weight: 800; } .format-status .entry-content { margin-bottom: 20px; margin-bottom: 2rem; margin-left: 58px; margin-left: 5.8rem; } .format-status p { margin-bottom: 10px; margin-bottom: 1rem; } .status-reply, .format-status .post-edit-link { color: #39f; font-size: 13px; font-size: 1.3rem; } .status-reply:hover, .format-status .post-edit-link:hover { color: #2b2e31; } .status-reply i { position: relative; top: 2px; margin-right: 5px; margin-right: 0.5rem; } .format-quote .entry-content { margin-bottom: 10px; margin-bottom: 1rem; } /* ==================================== */ /* $Pagination [DR09] */ /* ==================================== */ .page-numbers, .loop-navigation a, .comment-navigation a { display: inline-block; margin-right: 10px; margin-right: 1rem; padding: 12px; padding: 1.2rem; border-radius: 5px; background-color: #eee; color: #aaa; line-height: 7px; line-height: 0.7rem; } .loop-pagination a:hover, .loop-pagination .current, .loop-navigation a:hover, .comment-navigation a:hover { background-color: #2b2e31; color: #fff; } .loop-pagination, .loop-navigation, .comment-navigation { text-align: center; } .loop-navigation, .comment-navigation { margin: 0 auto 80px; margin: 0 auto 8rem; } .loop-pagination .prev, .loop-pagination .next, .loop-navigation a[rel="prev"], .loop-navigation a[rel="next"] { font-size: 14px; font-size: 1.4rem; } .loop-pagination i:before, .loop-navigation i:before, .comment-navigation i:before { line-height: 7px !important; line-height: 0.7rem !important; } .loop-pagination i, .loop-pagination i:before, .loop-navigation i, .loop-navigation i:before, .comment-navigation i, .comment-navigation i:before { display: inline !important; } /* ==================================== */ /* $Comments [DR10] */ /* ==================================== */ .comments-area { clear: both; } .comment-list { margin-bottom: 60px; margin-bottom: 6rem; list-style: none; } .comment { margin-bottom: 40px; margin-bottom: 4rem; } .comments-title, #reply-title { margin-bottom: 40px; margin-bottom: 4rem; color: #2b2e31; font-size: 22px; font-size: 2.2rem; } .comment .avatar { float: left; margin-right: 10px; margin-right: 1rem; } .comment-author cite { display: block; padding-top: 5px; padding-top: 0.5rem; color: #2b2e31; font-weight: 800; font-style: normal; font-size: 14px; font-size: 1.4rem; line-height: 10px; line-height: 1rem; } .comment-author a { color: #2b2e31; } .comment-author a:hover { color: #39f; } .published a, .comment-edit-link, .comment-reply-link { margin-bottom: 14px; margin-bottom: 1.4rem; color: #999; font-size: 13px; font-size: 1.3rem; } .published a:hover { color: #2b2e31; } .comment-edit-link:hover, .comment-reply-link:hover { color: #39f; } .comment-reply-link { float: right; } .depth-1 .comment-content { margin-left: 58px; margin-left: 5.8rem; } .comment-list .children { margin-left: 58px; margin-left: 5.8rem; list-style: none; } .children .avatar { width: 28px; height: 28px; } .ping { margin-bottom: 5px; margin-bottom: 0.5rem; padding-top: 5px; padding-top: 0.5rem; border-top: 1px solid #e8e8e8; } .ping .comment-author a { line-height: 20px; line-height: 2rem; } .comments-closed { color: #999; font-style: italic; } /* ====== $Comment Form [DR10.1] ====== */ #commentform label { display: block; } .required { color: #39f; } #commentform input[type="text"] { width: 40%; } #commentform textarea { width: 100%; } /* ==================================== */ /* $Sidebar [DR11] */ /* ==================================== */ .widget { clear: both; margin-bottom: 35px; margin-bottom: 3.5rem; } .widget li { list-style: none; } .widget a { color: #999; text-decoration: underline; font-size: 14px; font-size: 1.4rem; } .widget a:hover { color: #2b2e31; } .widget-title { color: #2b2e31; font-size: 15px; font-size: 1.5rem; } .widget .sub-menu { margin-left: 10px; margin-left: 1rem; } /* ===== $Search Widget [DR11.1] ===== */ .widget-search { margin-bottom: 5px; margin-bottom: 0.5rem; } .widget-search .search-text { margin-bottom: 30px; margin-bottom: 3rem; padding: 12px 16px; padding: 1.2rem 1.6rem; width: 100%; border: none; border-radius: 5px; background-color: #f8f8f8; color: #999; font-weight: 300; font-size: 13px; font-size: 1.3rem; } .search-text:focus { outline: 0; } /* ===== $Gallery Widget [DR11.2] ===== */ .widget-gallery { overflow: hidden; } .flex-control-thumbs { margin-top: 10px; margin-top: 1rem; margin-left: 15px; margin-left: 1.5rem; width: 100%; } .flex-control-thumbs li { float: left; margin-right: 10px; margin-right: 1rem; margin-bottom: 10px; margin-bottom: 1rem; cursor: pointer; } .flex-control-thumbs img { opacity: .9; } .flex-control-thumbs img:hover { opacity: 1; } .flexslider img { display: block; } /* ====== $About Widget [DR11.3] ====== */ .widget-about .avatar { float: left; margin-right: 20px; margin-right: 2rem; margin-bottom: 20px; margin-bottom: 2rem; } .widget .username a { display: block; margin-bottom: 12px; margin-bottom: 1.2rem; color: #2b2e31; text-decoration: none; font-weight: 700; font-size: 14px; line-height: 12px; line-height: 1.2rem; } .widget-about p { clear: both; } .social-icons a { color: #d1d1d1; text-decoration: none; font-size: 17px; font-size: 1.7rem; } .social-icons .github:hover { color: #2b2e31; } .social-icons .twitter:hover { color: #39f; } .social-icons .dribble:hover { color: #f999bc; } /* ==== $Calendar Widget [DR11.4] ==== */ #wp-calendar { margin: 0; width: 100%; border-collapse: collapse; font-size: 14px; font-size: 1.4rem; } #wp-calendar th, #wp-calendar td { padding: 0; text-align: left; } #wp-calendar caption { line-height: 30px; line-height: 3rem; } #wp-calendar th, #wp-calendar #prev, #wp-calendar #next { border: none; } #wp-calendar #next { text-align: right; } #wp-calendar tfoot .pad { border: none; } /* ==================================== */ /* $Page Footer [DR12] */ /* ==================================== */ #page-footer { clear: both; margin-bottom: 20px; margin-bottom: 2rem; color: #999; font-size: 13px; font-size: 1.3rem; } #page-footer a { color: #999; text-decoration: underline; } #page-footer a:hover { color: #2b2e31; } .credit, .license, .fonts { float: right; clear: both; } .license, .fonts, .copyright, .credit { margin-bottom: 0; } /* ==================================== */ /* $Media Queries [DR13] */ /* ==================================== */ @media screen and (max-width: 959px) { #page-container { width: 90%; } } @media screen and (max-width: 768px) { .flex-control-thumbs { margin: 0; } } @media screen and (min-width: 480px) { /* ====== $Drop-down Menu [DR13.1] ====== */ #menu-main ul { position: absolute; left: -9999px; padding-top: 10px; border-bottom: 1px solid #e8e8e8; opacity: 0; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; -o-transition: opacity 200ms linear; } #menu-main > li:hover > ul { top: 30px; left: 0; opacity: 1; } #menu-main ul li:hover > ul { top: -11px; left: 148px; padding-left: 12px; border-bottom: 0; opacity: 1; } #menu-main ul ul li:last-child { border-bottom: 1px solid #e8e8e8; } #menu-main ul li { position: relative; z-index: 9; display: block; padding-top: 5px; width: 150px; border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; background-color: #fff; text-align: left; -webkit-transition: background 200ms linear; -moz-transition: background 200ms linear; -ms-transition: background 200ms linear; -o-transition: background 200ms linear; } #menu-main ul li:hover { background-color: #f8f8f8; } #menu-main ul li a { display: block; } #menu-main ul:after, #menu-main ul:before { position: absolute; z-index: 1; display: block; width: 9px; height: 9px; content: ""; } #menu-main > li > ul:after { top: 5px; left: 25px; border: 1px solid #e8e8e8; border-right: 0; border-bottom: 0; background-color: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } #menu-main > li > ul:before { top: 10px; left: 24px; z-index: 99; width: 12px; height: 1px; border-right: 0; border-bottom: 0; background-color: #fff; } #menu-main ul ul:after { position: absolute; top: 20px; left: 8px; border: 1px solid #e8e8e8; border-right: 0; border-bottom: 0; background-color: #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } #menu-main ul ul:before { top: 20px; left: 12px; z-index: 99; width: 1px; height: 10px; background-color: #fff; } } @media screen and (max-width: 480px) { #main, #sidebar { float: none; width: 100%; } #page-header { padding-bottom: 20px; padding-bottom: 2rem; } #branding { padding-bottom: 40px; padding-bottom: 4rem; width: 100%; text-align: center; } #page-nav { display: none; float: none; clear: both; } .mobile-menu-toggle { display: block; border-bottom: 1px solid #444; } .flex-control-thumbs { margin-left: 10px; margin-left: 1rem; } .flex-control-thumbs { width: 60%; } .layout-1c .more-link, .credit, .license, .fonts { float: none; } #main, .hentry { margin-bottom: 40px; margin-bottom: 4rem; } } @media screen and (max-width: 320px) { .flex-control-thumbs { width: 90%; } .comment-list .children { margin: 0; } }