/** * WordPress visual editor styles * * @package Auberge * @copyright 2014 WebMan - Oliver Juhas * @version 1.0 */ /** * CONTENT: * * 0. CSS reset * 1. Font icons basics * 2. Core styles * 3. Typography * 4. WordPress styles * 5. Headings * 6. Site content * 100. Visual Editor specific styles */ /** * 0. CSS reset */ /** * ! normalize.css v3.0.2 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} /** * WebMan CSS reset modifications */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } menu, ol, ul { padding: 0; margin: 0; } ul { list-style: disc; } figure { margin: 0; } ::-webkit-input-placeholder { line-height: normal; } /** * 1. Font icons basics */ pre:before { font-family: 'Genericons'; font-style: normal; font-weight: normal; font-variant: normal; text-decoration: inherit; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; speak: none; } .genericon.vertical-align-middle:before { vertical-align: middle; } .genericon.vertical-align-baseline:before { vertical-align: baseline; } .genericon.vertical-align-bottom:before { vertical-align: bottom; } /** * 2. Core styles */ /** * Main layout */ body { background-color: #fff; color: #6a6c6e; } /** * Global elements and classes */ a { text-decoration: none; -ms-word-wrap: break-word; word-wrap: break-word; } a, .accent-color { color: #0aac8e; } a:hover { text-decoration: underline; } a:active {} a:visited {} a:focus { outline: 0; } hr { clear: both; height: 2px; margin: 3.62em 0; background-color: #eaecee; border: 0; } abbr[title], acronym[title] { cursor: help; } blockquote { clear: both; position: relative; padding: 1em 0; margin: 1.62em 0; text-align: center; } blockquote:before, blockquote:after { content: ''; display: block; position: absolute; width: 38%; height: 100%; left: 31%; top: 0; pointer-events: none; border-top: 1px solid #eaecee; border-bottom: 1px solid #eaecee; } blockquote:after { width: 2%; left: 49%; border-top: .19em solid #eaecee; border-bottom: .19em solid #eaecee; } blockquote p { margin: 1em 0 0; } blockquote p:first-child { margin: 0; } cite { border: 0; } cite:before { content: '\2014\2002'; } blockquote cite { display: block; margin-top: .62em; } q:before { content: '\201C'; } q:after { content: '\201D'; } mark, ins, .highlight { padding: .19em 0; margin: 0 .38em; background-color: #0aac8e; color: #fafcfe; -webkit-box-decoration-break: clone; -ms-box-decoration-break: clone; box-decoration-break: clone; -webkit-box-shadow: .38em 0 0 #0aac8e, -.38em 0 0 #0aac8e; box-shadow: .38em 0 0 #0aac8e, -.38em 0 0 #0aac8e; } del, strike { text-decoration: line-through; color: inherit; opacity: .5; } img, iframe { vertical-align: middle; } img[width], img[height] { height: auto; } iframe { border: 0; outline: 0; } code { position: relative; display: inline-block; padding: 0 .62em; margin: 0 .19em; background-color: #eaecee; color: #6a6e6c; } mark code, ins code, .form-allowed-tags code, .taxonomy-description code { display: inline; padding: 0 .38em; background: transparent; color: inherit; } pre { position: relative; max-width: 100%; padding: 4% 8% 4% 4%; margin-bottom: 1.62em; background: #eaecee; border-radius: .38em; overflow: auto; -moz-tab-size: 2; tab-size: 2; } pre:before { content: '\f462'; position: absolute; height: 100%; right: 0; top: 0; padding: 0 3px; font-size: 1.38em; line-height: 1.62; background: #0aac8e; color: #fff; z-index: 5; } ul, ol { margin: 0 1.62em 1em 1.38em; } ol ol { list-style upper-alpha; } ol ol ol { list-style: lower-roman; } ol ol ol ol { list-style: lower-alpha; } li > ul, li > ol { margin-bottom: 0; } dl { margin-bottom: 1.62em; } dd { margin-left: 1.62em; } ::selection { background: #fafcbe; color: #6a6c2e; text-shadow: none; } ::-moz-selection { background: #fafcbe; color: #6a6c2e; text-shadow: none; } /** * Tables */ table { width: 100%; margin: 0 0 1.62em; border: 1px solid #eaecee; border-collapse: separate; border-radius: .38em; } caption { padding: 1em 0; text-align: left; } td, th { padding: .62em 1em; border-bottom: 1px solid #eaecee; border-left: 1px solid #eaecee; } th:first-child, td:first-child { border-left: 0; } th, tfoot td { text-align: left; } caption + thead tr:first-child th, caption + thead tr:first-child td, colgroup + thead tr:first-child th, colgroup + thead tr:first-child td, thead:first-child tr:first-child th, thead:first-child tr:first-child td { border-top: 0; } thead + tbody tr:first-child td, thead + tbody tr:first-child th { border-top-width: .19em; } tbody tr:hover td, tbody tr:hover th { background-color: #fafcfe; } /** * Classes */ .text-center { text-align: center; } /** * Clearing */ .clear:before, .clear:after, .clearfix:before, .clearfix:after, .gallery:before, .gallery:after { content: ' '; display: table; } .clear, .clear:after, .clearfix:after, .gallery:after { clear: both; } /** * MediaElement player custom styles */ /* Player */ body .mejs-container { min-height: 50px; margin: 1.62em 0; } body .mejs-video { width: 100% !important; } body .mejs-overlay-button { margin: -50px 0 0 -50px !important; } body .mejs-container .mejs-controls { height: 50px; padding: 0 20px; background: #2a2c2e; } body .mejs-container .mejs-controls div { margin-top: 10px; } body .mejs-container .mejs-controls button { -webkit-box-shadow: none; box-shadow: none; } body .mejs-container .mejs-controls .mejs-time-rail .mejs-time-total { background: #1a1c1e; } body .mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded { height: 6px; margin-top: 2px; background: #3a3c3e; border-radius: 0; } body .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current { background: #6a6c6e; } /* Playlist */ body .wp-playlist { padding: 1.62em; margin: 1.62em 0; background-color: #eaecee; border: 0; } body .wp-playlist-current-item { margin-bottom: 1em; } body .wp-playlist .mejs-container { width: 100% !important; } body .wp-playlist-tracks { margin-top: 1em; } body .wp-playlist-item { padding: .62em 0; border-color: #caccce; } body .wp-playlist .wp-playlist-playing { background: transparent; } body .wp-playlist-item-length { margin-top: .62em; } /* WP Audio modifications */ body .wp-audio-playlist .mejs-container { height: 50px !important; } /* WP Video modifications */ .mejs-container video { height: auto; } .entry-media .mejs-container, .entry-media .wp-playlist { margin: 0; } .wp-video .mejs-controls, .wp-video-playlist .mejs-controls { visibility: hidden; } .wp-video:hover .mejs-controls, .wp-video-playlist:hover .mejs-controls { visibility: visible; } .wp-video .mejs-layer, .wp-video-playlist .mejs-layer { width: 100% !important; height: 100% !important; } /** * 3. Typography * * Tips from: * @link http://goo.gl/Hhb0jD * @link http://typeplate.com * @link http://www.pearsonified.com/typography/ */ /** * Base */ body { font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.62; } pre, code, kbd, tt, var { font-family: 'Lucida Console', Monaco, 'Courier New', monospace; font-size: 1em; font-style: normal; font-weight: 400; text-transform: none; } pre, pre code { white-space: -moz-pre-wrap; white-space: pre-wrap; /* http://css-tricks.com/almanac/properties/w/whitespace */ -ms-word-wrap: normal; word-wrap: normal; } p, address { padding: 0; margin: 0 0 1.62em; -ms-word-wrap: break-word; word-wrap: break-word; } sup, sub { position: relative; height: 0; line-height: 0; font-size: .81em; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } .uppercase { text-transform: uppercase; } /** * Font sizes */ /** * Basic font size setup */ html { font-size: 16px; } /** * Relative font sizes: */ /* Relative to root */ /* basic: */ input, select, textarea, blockquote blockquote { font-size: 1rem; } /* Relative to container */ /* basic: */ small, /* custom: */ pre, code, blockquote cite, .small, .gallery-caption, .wp-caption .wp-caption-text { font-size: .81em; } h4, h5, h6, .h4, .h5, .h6 { font-size: 1.15em; } h3, .h3 { font-size: 1.24em; } h2, .h2, blockquote { font-size: 1.38em; } h1, .h1 { font-size: 1.62em; } /** * Font weights */ body, blockquote { font-weight: 300; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, blockquote cite { font-weight: 400; } abbr { font-weight: 600; } /* basic: */ b, strong, /* custom: */ dt, th, tfoot td { font-weight: 700; } /** * Font styles */ /* basic: */ cite, dfn, em, i, /* custom: */ blockquote, .gallery-caption { font-style: italic; } cite { font-style: normal; } /** * Line heights */ body { line-height: 1.62; } pre { line-height: 1.5; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, blockquote, table, .gallery-caption, .wp-caption .wp-caption-text { line-height: 1.38; } /** * 4. WordPress styles */ /** * Make WordPress embeds responsive */ .twitter-tweet-rendered { width: 100% !important; margin: 1.62em 0 !important; } /** * Alignment */ .alignleft, .wp-caption.alignleft, img.alignleft { float: left; margin-right: 1.62em; margin-bottom: 1.62em; } .alignright, .wp-caption.alignright, img.alignright { float: right; margin-left: 1.62em; margin-bottom: 1.62em; } .aligncenter, .wp-caption.aligncenter, img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignnone, img.alignnone { margin: 0; } /** * Pullquotes */ blockquote.alignleft, blockquote.alignright { clear: none; width: 38%; padding: 0 6%; margin-top: 0; margin-left: 6%; margin-right: 6%; text-align: left; } blockquote.alignleft { padding-left: 0; margin-left: -19%; text-align: right; } blockquote.alignright { padding-right: 0; margin-right: -19%; } blockquote.alignleft:before, blockquote.alignleft:after, blockquote.alignright:before, blockquote.alignright:after { width: 1px; height: 62%; left: 0; top: 19%; border: 0; border-left: 1px solid #eaecee; } blockquote.alignleft:after, blockquote.alignright:after { width: 1px; height: 6%; left: 0; top: 47%; border: 0; border-left: .19em solid #eaecee; } blockquote.alignleft:before, blockquote.alignleft:after { left: auto; right: 0; border: 0; border-right: 1px solid #eaecee; } blockquote.alignleft:after { left: auto; right: 0; border: 0; border-right: .19em solid #eaecee; } /** * Image captions */ .wp-caption { position: relative; display: inline-block; max-width: 100%; padding: 0; margin: 0 auto 1.62em; text-align: center; text-transform: uppercase; background: transparent; color: #9a9c9e; overflow: hidden; } .wp-caption .wp-caption-text { padding: 1em 0 0; overflow: hidden; } /** * Gallery */ .gallery { clear: both; margin: 0 0 1.62em; overflow: hidden; } .gallery a { display: block; } .gallery img { width: 100%; } .gallery-item { float: left; position: relative; padding: 0; margin: 0 1% 2%; } .gallery-columns-1 .gallery-item { float: none; width: 100%; } .gallery-columns-2 .gallery-item { width: 48%; } .gallery-columns-3 .gallery-item { width: 31.333%; } .gallery-columns-4 .gallery-item { width: 23%; } .gallery-columns-5 .gallery-item { width: 18%; } .gallery-columns-6 .gallery-item { width: 14.666%; } .gallery-columns-7 .gallery-item { width: 12.285%; } .gallery-columns-8 .gallery-item { width: 10.5%; } .gallery-columns-9 .gallery-item { width: 9.111%; } .gallery-icon { display: block; } .gallery-item, .tiled-gallery-item, .gallery-icon, .gallery-caption { overflow: hidden; } .gallery-caption { display: block; position: absolute; width: 100%; max-height: 50%; left: 0; bottom: 0; padding: .62em 1em; background: #2a2c2e; background: rgba(0,0,0, .8); color: #ccc; opacity: 0; -webkit-transition: all .3s; transition: all .3s; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /** * Smilies */ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { display: inline; width: auto; max-height: 1em; margin: 0; border: 0; } /** * 5. Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { clear: both; padding: 0; margin: 6% 0 4%; text-transform: uppercase; -ms-word-wrap: break-word; word-wrap: break-word; color: #1a1c1e; text-rendering: optimizeLegibility; /* https://developer.mozilla.org/en-US/docs/CSS/text-rendering */ } h1, h2, h3, .h1, .h2, .h3 { letter-spacing: .1em; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, .h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child { margin-top: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a { text-decoration: none; color: inherit; } /** * 6. Site content */ /** * Main content area */ /** * Media */ /* Images */ a img { -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } a img:hover { -webkit-box-shadow: 0 1rem .62rem -.62rem rgba(0,0,0, .25); box-shadow: 0 1rem .62rem -.62rem rgba(0,0,0, .25); } /* Videos */ .video-container, .wp-video .mejs-container, .wp-video-playlist .mejs-container { position: relative; max-width: 100%; height: 0 !important; padding: 0 0 56.25%; /* 16:9 ratio only */ } .video-container iframe, .video-container object, .video-container embed, .wp-video .mejs-container .mejs-inner, .wp-video-playlist .mejs-container .mejs-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .wp-video { width: 100% !important; height: auto !important; } /** * Content columns */ .column { float: left; margin: 0 6% 0 0; } .column.last { margin-right: 0; } .column-12 { width: 47%; } .column-13 { width: 29.33%; } .column-23 { width: 64.66%; } .column-14 { width: 21%; } .column-34 { width: 73%; } /** * 100. Visual Editor specific styles */ body { width: 100%; max-width: 1020px !important; padding: 20px; border-right: 2px dashed #eaecee; } body.wp-autoresize { padding: 20px !important; } body.wp-autoresize iframe body { padding: 0 !important; border: 0; } /** * WP Captions */ .wp-caption-dd { margin-top: 1em; } /** * Tables */ .mce-item-table, .mce-item-table td, .mce-item-table th, .mce-item-table caption, thead + tbody tr:first-child td, thead + tbody tr:first-child th { border-width: 1px; border-style: solid; border-color: #eaecee; } /** * Buttons */ .button, button { padding: 1em; background-color: #0aac8e; color: #fff; border: 0; cursor: pointer; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0, .2); box-shadow: inset 0 0 0 rgba(0,0,0, .2); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .button:hover, button:hover { text-decoration: none; opacity: .75; } .button:hover, button:hover, .button:focus, button:focus, .button:active, button:active { text-decoration: none; opacity: .75; } .button:active, button:active { opacity: .9; -webkit-box-shadow: inset 0 100px 0 rgba(0,0,0, .2); box-shadow: inset 0 100px 0 rgba(0,0,0, .2); } /** * Pullquotes */ blockquote.alignleft { margin-left: 0; } blockquote.alignright { margin-right: 0; } /** * Responsive media */ img, embed, iframe, object, video { max-width: 100%; /*height: auto;*/ } embed, iframe, object, video { width: 100% !important; } /* End of file */