*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #333333; color: #fff; font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif; } a { text-decoration: none; } a, a > span { transition: color .2s; } a:focus, a:hover, a:active { text-decoration: underline; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix { height: 1%; } *:first-child + html .clearfix { min-height: 1%; } #page a:focus, #page a:active, #page input:focus, #page input:active { outline: none !important; } #wp-admin-bar-pen-theme-menu a { font-weight: bold; } body.custom-background.pen_shards:before, body.custom-background.pen_trianglify:before { background: transparent !important; } body.pen_background_lights_dim:before, body.custom-background.pen_background_lights_dim:before, body.custom-background.pen_shards.pen_background_lights_dim:before, body.custom-background.pen_trianglify.pen_background_lights_dim:before { background: rgba(0,0,0,0.5) !important; content: ""; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: -1; } #page .sidebar a, #pen_bottom a, #pen_footer a { transition: background-color .2s, color .2s; } a#pen_back { background: #000; bottom: -0.5em; color: #fff; opacity: 0.75; padding: 0.5em 1em 1em; position: fixed; right: 1em; text-shadow: 1px 1px 2px rgba(0,0,0,0.75); transition: opacity .5s; z-index: 10000; } body.pen_round_corners a#pen_back { border-radius: 100px 100px 0 0; } a#pen_back:before { content: "\f102"; font-family: "FontAwesome"; font-weight: normal; } a#pen_back:focus, a#pen_back:hover, a#pen_back:active { opacity: 1; outline: none; text-decoration: none; } #page .pen_not_visible { visibility: hidden; /* When we cannot use pen_element_hidden nor display:none because of the jQuery plugins such as Masonry etc. */ } .pen_element_hidden { border: 0 none !important; clip: rect(1px,1px,1px,1px); clip: rect(1px 1px 1px 1px); height: 1px !important; margin: 0 !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; } .screen-reader-shortcut:focus { background: rgba(0,0,0,0.75); color: #fff; left: 0; top: 0; width: 100%; } #page .mejs-controls div.mejs-time-rail { max-width: 80%; } #page .mejs-controls a.mejs-horizontal-volume-slider { width: auto; } .pen_message { background: #fff9ce; background: -ms-linear-gradient(325deg, #fff9ce 0%, #fff5ab 100%); background: linear-gradient(155deg, #fff9ce 0%, #fff5ab 100%); border-bottom: 1px solid #e3dc90; color: #333; float: left; font-size: 0.857em; padding: 1em; position: relative; width: 100%; z-index: 50000; } .pen_message a { color: #0087cc !important; font-weight: bold; } .pen_message a:focus, .pen_message a:hover, .pen_message a:active { color: #0087aa !important; } .pen_message p { margin: 0; padding: 0; } .pen_message ol { margin: 0.5em 0 0 0.5em; } .pen_message_warning p:before { color: #ffb900; content: "\f071"; font-family: "FontAwesome"; font-weight: normal; margin: 0 1em 0 0; } #page .pen_loading { background: rgba(0,0,0,0.75); border: 0 none; color: rgba(255,255,255,0.5); font-weight: normal; font-size: 1.5em; left: 0; min-height: 100%; position: fixed; text-align: center; text-shadow: 1px 1px 10px rgba(0,0,0,0.25); top: 0; width: 100%; z-index: 100000; } #page .pen_loading ul, #page .pen_loading li { line-height: 1; list-style: none; margin: 0 !important; padding: 0 !important; } #page .pen_loading ul, #page .pen_loading .pen_wrap_icon { position: absolute; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%); } #page .pen_loading ul { list-style: none; padding: 0 0 0 30px; } #page .pen_loading .pen_icon, #page .pen_loading .pen_wrap_icon { height: 250px !important; width: 250px !important; } #page .pen_loading .pen_icon { background: transparent; border-top: 1em solid rgba(255,255,255,0.1) !important; border-right: 1em solid rgba(255,255,255,0.1) !important; border-bottom: 1em solid rgba(255,255,255,0.1) !important; border-left: 1em solid rgba(255,255,255,0.5) !important; border-radius: 50% !important; font-size: 10px !important; height: 25em !important; left: 0; margin: 0; padding: 0; position: absolute; top: 0; width: 25em !important; animation: pen_loading 0.5s infinite linear; } @keyframes pen_loading { 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); } } #page h1.page-title .pen_heading_main { display: block; font-size: 0.857em; font-weight: normal; opacity: 0.75; } body.author header .page-title, body.category header .page-title, body.date header .page-title, body.error404 header .page-title, body.search header .page-title, body.tag header .page-title { line-height: 1.1; padding-left: 105px !important; position: relative; } body.author header .page-title:before, body.category header .page-title:before, body.date header .page-title:before, body.error404 header .page-title:before, body.search header .page-title:before, body.tag header .page-title:before { background: linear-gradient(0deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.5) 100%); color: rgba(0,0,0,0.5); font-family: "FontAwesome"; font-weight: normal; height: 78px; left: 5px; line-height: 1.5; margin: 0 0.5em 0 0; padding: 15px 0; position: absolute; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.25); top: 50%; transform: translateY(-50%); width: 78px; } body.pen_drop_shadow.author header .page-title:before, body.pen_drop_shadow.category header .page-title:before, body.pen_drop_shadow.date header .page-title:before, body.pen_drop_shadow.error404 header .page-title:before, body.pen_drop_shadow.search header .page-title:before, body.pen_drop_shadow.tag header .page-title:before { box-shadow: 2px 2px 5px rgba(0,0,0,0.5); } body.pen_round_corners.author header .page-title:before, body.pen_round_corners.category header .page-title:before, body.pen_round_corners.date header .page-title:before, body.pen_round_corners.error404 header .page-title:before, body.pen_round_corners.search header .page-title:before, body.pen_round_corners.tag header .page-title:before { border-radius: 10px; } body.author header .page-title:before { content: "\f007"; } body.category header .page-title:before { content: "\f187"; } body.date header .page-title:before { content: "\f274"; } body.error404 header .page-title:before { content: "\f071"; } body.search header .page-title:before { content: "\f002"; } body.tag header .page-title:before { content: "\f02b"; } #error-404-search input { float: left; width: auto; } body.error404 #main section.error-404 .page-header, body.search #main section.no-results .page-header { margin-bottom: 2em; } body.error404 #main section.error-404 .page-content, body.search #main section.no-results .page-content { font-size: 1.5em; min-height: 500px; overflow: hidden; position: relative; } body.error404 #main section.error-404 .page-content:before, body.search #main section.no-results .page-content:before { color: rgba(170,170,170,0.25); font-family: "FontAwesome"; font-size: 18em; line-height: 1; position: absolute; right: 10px; top: 10px; z-index: 0; } body.error404 #main section.error-404 .page-content:before { content: "\f071"; } body.search #main section.no-results .page-content:before { content: "\f002"; } @media only print { body { padding-top: 0 !important; } body.author header .page-title:before, body.category header .page-title:before, body.date header .page-title:before, body.error404 header .page-title:before, body.search header .page-title:before, body.tag header .page-title:before { display: none; } }