/* Theme Name: bluebiz Theme URI: http://underscores.me/ Author: Frank Petser Author URI: http://ynef.net/work Description: Description Version: 1.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: bluebiz Tags: blue, gray, right-sidebar, responsive-layout, fluid-layout, sticky-post This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. bluebiz is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Elements # Forms # Navigation ## Links ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Asides ## Comments # Infinite scroll # Media ## Captions ## Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ input {max-width:100%} @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important;} p, h2, h3 { orphans: 3; /* http://css-tricks.com/almanac/properties/o/orphans/ */ widows: 3; /* http://css-tricks.com/almanac/properties/w/widows/ */} h2, h3 {page-break-after: avoid;} } html { font-family: sans-serif; font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; text-rendering: optimizeLegibility; } article, aside, details, figcaption, figure, footer, header, 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; /* 2*16 = 32 */ } h2 { font-size: 1.5em; /* 1.5*16 = 24 */ } h3 { font-size: 1.17em; /* 1.17*16 = 18.72 */ } h4 { font-size: 1em; /* 1*16 = 16 */ } h5 { font-size: 0.83em; /* 0.83*16 = 13.28 */ } h6 { font-size: 0.75em; /* 0.75*16 = 12 */ } 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 { 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; 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; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, textarea { color: #404040; font-family: 'Roboto Slab', serif; font-size: 16px; font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { clear: both; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; font-style: italic; } address { margin: 0 0 1.5em; } pre { background: #ecf0f1; /* Clouds */ font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; border: 0; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { box-sizing: border-box; } *, *: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; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote { background: #ecf0f1; /* Clouds */ border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; } blockquote p { display: inline; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 0; } ul { list-style: square; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } 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. */ } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border: 1px solid; border-bottom:3px solid; border-color: #ccc #ccc #bbb; border-radius: 0; background: #e6e6e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, .8); font-size: 1em; line-height: 1; padding: .6em 1em .4em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { border-color: #ccc #bbb #aaa; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02); } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { border-color: #aaa #bbb #bbb; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15); } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { padding-left: 3px; width: 100%; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { color: #2c3e50; /* Midnight Blue */ } a:visited { color: #2c3e50; /* Midnight Blue */ } a:hover, a:focus, a:active { color: #0C2032; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .main-navigation { clear: both; display: block; width: auto; margin: 0 auto; text-transform: uppercase; font-weight: normal; font-size: 0.9em; padding: 1.1em 0 0 0; } .main-navigation ul { display: none; list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; position: relative; padding: 5px 15px 5px 15px; border-right: 2px dotted rgba(236, 240, 241,0.35); /* Clouds */ } .main-navigation li:last-child { border-right: none; } .main-navigation li:hover { background: rgba(52, 73, 94,1.0); /* Wet Asphalt */ } .main-navigation a { display: block; text-decoration: none; } .main-navigation ul ul { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); float: left; position: absolute; top: 2.1em; left: -999em; z-index: 99999; margin-left: -15px; } .main-navigation ul ul ul { left: -999em; top: 0; } .main-navigation ul ul a { width: 200px; padding: .4em .2em .3em .2em; } .main-navigation ul ul li { } .main-navigation li:hover > a, .main-navigation li:focus > a { } .main-navigation ul ul :hover > a, .main-navigation ul ul :focus > a { } .main-navigation ul ul a:hover, .main-navigation ul ul a:focus { } .main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul { left: auto; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li:focus > ul { left: 100%; } .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a, .main-navigation .current_page_ancestor > a { } .children { background: rgba(44, 62, 80,1.0); } .children li { border-right: none; } /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } @media screen and (min-width: 37.5em) { .menu-toggle { display: none; } .main-navigation ul { display: block; } } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- # 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; } .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. */ } /*-------------------------------------------------------------- # 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; } .alignnone { max-width: 100%; margin: 0 auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; padding: 0.8em; width: 50%; float: left; line-height: 1.6em; min-height: 120px; } /* Make sure select elements fit in widgets. */ .widget select { font-family: 'Roboto', sans-serif; background: #ecf0f1; /* Clouds */ padding: 0.1em; margin-right: 5px; font-size: 1em; line-height: 1; border: 2px dotted #ccc; border-radius: 0; -webkit-appearance: none; width: 100%; height: 35px; overflow: hidden; } /* Search widget. */ .widget_search .search-submit { display: none; } .header_widget { width: 40%; float: right; font-size: 0.8em; padding: 0.5em 1em 0.5em 1em; text-align: justify; } .sidebar_top_widget { width: 100%; margin: 0 auto; padding: 1em; font-size: 1.08em; letter-spacing: 0.005em; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; background: #ecf0f1; /* Clouds */ border-left: 10px solid #ccc; margin: 1.5em 10px; padding: 0.5em 10px; } .hentry { margin: 0.8em 0 5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .page-links { clear: both; margin: 0 0 1.5em; } /*-------------------------------------------------------------- ## Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /*-------------------------------------------------------------- # 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; } /*-------------------------------------------------------------- # 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: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- ## 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; } /*-------------------------------------------------------------- ## Ynef --------------------------------------------------------------*/ .fixed{position:fixed;top:0;left:0;width:100%;z-index:999} h1 a, h2 a, h3 a, h4 a, h5 a { text-decoration: none; } .site { width: 100%; } .site-header { width: 100%; margin: 0 auto; padding: 3em 5em 2em 5em; background: rgba(44, 62, 80,1.0); /* Midnight Blue */ color: rgba(236, 240, 241,1.0); /* Clouds */ } .site-header a { text-decoration: none; color: rgba(236, 240, 241,1.0); /* Clouds */ } .site-header a:hover { color: #fff; } .site-branding { width: 60%; float: left; } .site-title { font-family: 'Lobster', sans-serif; margin: 0; font-size: 3em; letter-spacing: 0.1em; text-shadow: 2px 2px rgba(0,0,0,0.5); } .site-description { margin: 0 0 1.5em 0; font-size: 0.9em; padding: 0 0 0 1em; } .site-content { width: 90%; margin: 0 auto; padding: 0 1em 0 0; } .content-area { width: 60%; float: left; padding: 1em; word-spacing: 0.18em; } /* Entries */ .entry-title { margin: 0; padding: 0; font-size: 2.2em; letter-spacing: 0.005em; font-family: 'Oswald', sans-serif; } .entry-meta, .entry-footer { font-size: 0.8em; letter-spacing: 0.1em; } .entry-content { font-family: 'Roboto', sans-serif; line-height: 1.6em; word-spacing: 0.16em; } .entry-content a { text-decoration: none; border-bottom: 2px solid #2c3e50; /* Midnight Blue */ padding: 0.1em; } .entry-content a:hover, .entry-content a:active { color: #0C2032; } .entry-meta a { text-decoration: none; } /* Widgets */ .widget-area { width: 40%; float: right; padding: 1em 0 0 1em; } .widget-title { margin: 0; padding: 0; font-family: 'Oswald', sans-serif; font-size: 1.2em; letter-spacing: 0.1em; padding-bottom: 0.8em; margin-bottom: 1em; border-bottom: 2px dashed #2c3e50; /* Midnight Blue */ } .tagcloud { /* The tag cloud just looks weird otherwise */ text-align: justify; } .site-footer { width: 100%; text-align: right; font-size: 0.8em; padding: 1em; } /* Custom previous next */ .previous-next-wrapper {width: 100%; border-top: 2px solid #2c3e50; padding-top: 1em;} .previous-next-wrapper:after {clear:both;} .previous-box {float: left; width: 40%;} .next-box {float: right; width: 40%;} .thumbnail-container {width: 50%; float: left;} .title-container { width: 50%; float: left; font-size: 1em; font-family: "Oswald",sans-serif; vertical-align: middle; padding: 0.5em; } /* Comments area */ .comments-icon, .comments-title {vertical-align: middle;} .comments-icon {padding: 0 0.5em 0 0;} .comments-area {background: rgba(240,240,240,0.75); /* test */ padding: 1em;} ol.comment-list { list-style:none; margin:0 0 1em; padding:0; text-indent:0; } ol.comment-list li { } ol.comment-list li.alt { } ol.comment-list li.bypostauthor {} ol.comment-list li.byuser {} ol.comment-list li.comment-author-admin {} ol.comment-list li.comment { border-bottom:1px dotted #42586E; padding:1em; } ol.comment-list li.comment div.comment-author {font-size:1em;} ol.comment-list li.comment div.vcard { } ol.comment-list li.comment div.vcard cite.fn { font-style:normal; } ol.comment-list li.comment div.vcard cite.fn a.url {} ol.comment-list li.comment div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; } ol.comment-list li.comment div.vcard img.avatar-32 {} ol.comment-list li.comment div.vcard img.photo {} ol.comment-list li.comment div.vcard span.says {} ol.comment-list li.comment div.comment-metadata {font-size: 0.8em; letter-spacing: 0.1em; font-family: 'Roboto Slab', serif; } ol.comment-list li.comment div.comment-meta {} ol.comment-list li.comment div.comment-metadata a {text-decoration:none;} ol.comment-list li.comment p { font-size:1em; margin:1em 0 1em; } ol.comment-list li.comment ul { font-size:11px; list-style:square; margin:0 0 1em 2em; } ol.comment-list li.comment div.reply { font-size: 0.8em; letter-spacing: 0.1em; font-family: 'Roboto Slab', serif;margin-bottom:0.9em;} ol.comment-list li.comment div.reply a { font-weight:bold; } ol.comment-list li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; } ol.comment-list li.comment ul.children li {} ol.comment-list li.comment ul.children li.alt {} ol.comment-list li.comment ul.children li.bypostauthor {} ol.comment-list li.comment ul.children li.byuser {} ol.comment-list li.comment ul.children li.comment {} ol.comment-list li.comment ul.children li.comment-author-admin {} ol.comment-list li.comment ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; } ol.comment-list li.comment ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; } ol.comment-list li.comment ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; } ol.comment-list li.comment ul.children li.depth-5 {} ol.comment-list li.comment ul.children li.odd {} ol.comment-list li.even { background:rgba(245,245,245,1); } ol.comment-list li.odd { background:rgba(242,242,242,1); /* Clouds */ } ol.comment-list li.parent { border-left:5px solid #111; } ol.comment-list li.thread-alt { } ol.comment-list li.thread-even {} ol.comment-list li.thread-odd {} /* Responsive */ @media all and (max-width: 1020px) { .site-branding, .header_widget, .main-navigation, .content-area, .widget-area {width:100%;float:left} .site-branding {text-align:center} .site-title {font-size:2em} } @media all and (max-width: 597px) { .menu-toggle {position:fixed; top:0; right:0; z-index:999; margin:0.5em} .main-navigation {position:fixed; top:0; left:0; width:75%; z-index:998; text-align:left; background:rgba(44, 62, 80,1.0); /* Midnight Blue */ padding:0} .main-navigation li{border-right:0; border-bottom:2px dotted rgba(236, 240, 241,0.35); /* Clouds */ width:100%; float:left} } @media all and (max-width: 520px) { .site-header {padding: 1em 0.75em 0.75em 0.75em} .entry-title{font-size:1.3em} h1 { font-size: 1em} h2 { font-size: 0.85em} h3 { font-size: 0.75em} h4 { font-size: 0.65em} h5 { font-size: 0.65em} h6 { font-size: 0.65em} .page-content, .entry-content, .entry-summary { margin:0; } .hentry { margin: 0.3em 0 1em; } .widget { margin: 0 0 0.8em; padding: 0.4em; width: 100%; float: left; line-height: 1.6em; min-height: 120px; } .site-footer{text-align:center} }