style.css

/*
Theme Name: Clean Blog
Theme URI: http://www.robertdevore.com/clean-blog-free-wordpress-theme/
Author: Robert DeVore
Author URI: http://www.robertdevore.com
Description: Personal blogging theme, free of clutter, with a focus on the writers words while not sacrificing visual quality.
Version: 1.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cleanblog
Tags: Blog, Underscores, One Column, Clean, Minimalist, Bootstrap, HTML5, Custom Menu, Editor Style, Featured Images, Fluid Layout, Full Width Template, Light, Responsive Layout, Threaded Comments, Translation Ready, Black, Blue, White
GitHub Theme URI: https://github.com/deviodigital/cleanblog/
GitHub Branch:    master

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.

Clean Blog is based on Underscores http://underscores.me/ (C) 2012-2015 Automattic, Inc. and Clean Blog http://www.startbootstrap.com
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
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
}

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;
	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 {
	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;
}

select {
	padding: 9px;
}

select:focus {
	outline: 0;
}

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 {
    border: 1px solid #f2f2f2;
    font-size: 15px;
	padding: 5px !important;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

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;
}

blockquote p {
	margin: 0 0 15px !important;
}

blockquote p:last-child {
	margin: 0 !important;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	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;
}

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,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

div.col-lg-8 ul,
div.col-lg-8 ol {
	margin: 0 0 30px 30px !important;
}

/* Override main ul styling for page builder */

.sow-slider-base ul.sow-slider-images {
    margin: 0 !important;
	padding: 0 !important;
}

div.col-lg-8 ol.sow-slider-presentation {
    margin: 0 !important;
    padding: 0 !important;
}

.sow-slider-base .sow-slider-pagination {
	left: auto;
	right: 0;
}

/* Override styling for footer social links */

ul.list-inline.text-center {
    margin: 0 0 30px 0 !important;
}

ul {
	list-style: disc;
}

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"] {
	background: #FFF;
    border-radius: 0;
	border: 1px solid #ddd;
    font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 15px 25px;
    text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #0085a1;
	border-color: #0085a1;
	color: #FFF;
}

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 {
	background: #0085a1;
	border-color: #0085a1;
	color: #FFF;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 0px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
	border: 1px solid #0085a1;
	outline: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 9px 9px 12px 9px;
}

textarea {
	padding-left: 3px;
	width: 100%;
}

#commentform label {
	display: block !important;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #404040;
}

a:visited {
	color: #404040;
}

a:hover,
a:focus,
a:active {
	color: #0085a1;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

.post-meta a {
	text-decoration: none;
}

.post-title {
	font-size: 36px;
}

.post-title a:hover,
.post-title a:focus {
	text-decoration: none !important;
}

.post-title span.entry-title-primary {
	display: block;
	margin-bottom: 5px;
}

.post-title span.entry-subtitle {
	font-size: 24px !important;
	font-weight: 300;
    margin-bottom: 15px;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.5em;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 200px;
}

.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 {
}

.navbar-custom .nav ul { /* this targets all sub menus */
    display: none; /* hide all sub menus from view */
    position: absolute;
    top: 60px; /* this should be the same height as the top level menu -- height + padding + borders */
	left: 10px;
	margin: 0;
	padding: 0;
	border: 1px solid #f2f2f2;
}

.navbar-custom .nav ul li { /* this targets all submenu items */
	display: block;
    float: left; /* overwriting our float up above */
	list-style-type: none;
	background: rgba(255,255,255,0.9);
	padding: 0;
	position: relative;
    width: 220px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}

.navbar-custom .nav ul li a { /* target all sub menu item links */
    padding: 10px; /* give our sub menu links a nice button feel */
	color: #404040;
	float: left; /* this sets the link to fit directly within the li */
	font-weight: 400;
	width: 100%;
}

.navbar-custom .nav ul li a:hover,
.navbar-custom .nav ul li a:focus {
	color: #404040;
	text-decoration: underline;
}

.navbar-custom .nav li:hover > ul {
    display: block; /* show sub menus when hovering over a parent */
}

.navbar-custom .nav ul li ul {
    left: 220px; /* this needs to match the sub menu width set above -- width + padding + borders */
    top: 0; /* this ensures the sub menu starts in line with its parent item */
}

.navbar-custom .nav ul li ul li {
	background: rgba(255,255,255,0.8);
}

/* 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%;
}


@media screen and (max-width: 767px) {
	.navbar-custom .nav li {
		float: left;
		width: 100%;
	}
	.navbar-custom .nav li:hover > ul {
		display: block;
		position: relative;
		float: left;
		width: 100%;
		top: 0;
		left: 0;
		margin: 0 0 7.5px 0;
	}
	.navbar-custom .nav ul li {
		width: 100%;
	}
	.navbar-custom .nav ul a {
		padding: 10px 15px;
	}

	.navbar-custom .nav ul li ul {
		left: 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;
}

.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;
}

/*--------------------------------------------------------------
# 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;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.sticky:before {
    position: absolute;
    top: 26px;
    left: -29px;
    display: inline-block;
    width: 58px;
    height: 45px;
    background: transparent url(img/sticky.png) no-repeat;
    content: "";
}

.sticky .post-title {
	margin-left: 20px;
}

.hentry {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

p.excerpt {
	font-size: 16px;
}

.postfooter {
    border-top: 1px solid #eee;
	color: #777;
    float: left;
	font-size: 16px;
    padding: 10px 0;
	position: relative;
    width: 100%;
}

.postfooter span {

}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

ol.comment-list,
ol.children {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ol.comment-list li {
	padding: 0 0 30px 0;
	border-bottom: 1px solid #eee;
}

footer.comment-meta {
	padding: 30px 0 0 0;
}

.comments-area {
	float: left;
	position: relative;
	width: 100%;
}

.comment-metadata {
	font-color: gray;
	font-size: 0.8em;
	font-style: italic;
}

.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.comment-metadata a,
.comment-metadata a:visited {
	text-decoration: none;
	color: #aaa;
}

.comment-metadata a:hover {
	color: #0085a1;
}

.comment-reply-link {
	background: #eee;
	font-size: 0.8em;
	padding: 10px;
	text-decoration: none;
}

.comment-reply-link:hover {
	text-decoration: none;
}

img.avatar {
	border-radius: 16px;
}

label#subscribe-label,
label#subscribe-blog-label {
	display: inline-block !important;
}

/*--------------------------------------------------------------
# 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: 0 auto;
}

.wp-caption-text {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
	color: #777;
    display: block;
    font-size: 14px;
    font-style: italic;
    margin: 0;
    padding: 10px;
	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;
}

/*--------------------------------------------------------------
## Post Navigation Links
--------------------------------------------------------------*/
.navigation.post-navigation {

}
.nav-links {
	background: #F8F8F8;
    float: left;
	margin: 20px 0;
	padding: 20px;
	position: relative;
    width: 100%;
}