/*
Theme Name: Salted Stone Scratch Theme
Theme URI: http://saltedstone.com
Author: the Saltedstone team
Author URI: http://saltedstone.com
Description: Scratch theme to start developing from.
Version: 1.0
*/


/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

.asset-comment:empty, .asset-comment:blank {
	margin-bottom:27px;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img{
	max-width:100%;
	height:auto;
}
.wp-caption {
	max-width: 100%; /* Keep wide captions from overflowing their container. */
	padding: 4px;
}
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
}
embed,
iframe,
object,
video {
	max-width: 100%;
}

/* reset screen-reader-text */
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; }
/* must have higher specificity than alternative color schemes inline styles */
.site .skip-link { background-color: #f1f1f1; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2); color: #21759b; display: block; font: bold 14px/normal "Noto Sans", sans-serif; left: -9999em; outline: none; padding: 15px 23px 14px; text-decoration: none; text-transform: none; top: -9999em;}
.logged-in .site .skip-link { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); font: bold 14px/normal "source-sans-pro", sans-serif;}
.site .skip-link:focus { clip: auto; height: auto; left: 6px; top: 7px; width: auto; z-index: 100000; }

/*--------------------
  Fonts
--------------------*/
@font-face {
    font-family: 'modern_pictograms_proregular';
    src: url('fonts/modernpictogramspro_2.34-webfont.eot');
    src: url('fonts/modernpictogramspro_2.34-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpictogramspro_2.34-webfont.woff2') format('woff2'),
         url('fonts/modernpictogramspro_2.34-webfont.woff') format('woff'),
         url('fonts/modernpictogramspro_2.34-webfont.ttf') format('truetype'),
         url('fonts/modernpictogramspro_2.34-webfont.svg#modern_pictograms_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.symbol { font-family: 'modern_pictograms_proregular'; }

/*--------------------
  General
--------------------*/
html{ height:100%; -webkit-text-size-adjust: 100%; }
body{ height:100%; font-weight:300; color:#4A4A4A; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:grayscale; background:#f5f5f5; font-family:"freight-sans-pro"; }

/* Sticky Footer Resets */
.site{ min-height:100%;}
.site-content{ padding-bottom:50px; } /* Make sure to change these to proper values */
#colophon{ margin-top:-50px; height:50px; clear:both;} /* Make sure to change these to proper values */
body:before {/* Opera bug fix for sticky footer - thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* Thank you Erik J - negate effect of float*/
}

a{ text-decoration:none; outline:none; }
p{ font-size:18px; line-height:1.5em; font-weight:300; margin-bottom:1.8em; }
strong { font-weight:bold; }
em { font-style:italic; }

.page-center{ max-width:1170px; position:relative; margin:0 auto; padding-left:15px; padding-right:15px; box-sizing:border-box; }
.footer-back-link { display:inline; }

/* Section & Section Headers */
.section {
	padding-top:40px;
	padding-bottom:40px;
}
.sub-section {
	padding:25px 30px;
}
.section-content {
	padding:30px;
	background:#FFF;
}
.section-header {
	font-weight:700;
	font-size:36px;
	line-height:1.3em;
	padding-bottom:15px;
}
.medium-header, .widget-title {
	font-weight:700;
	font-size:28px;
	line-height:1.3em;
}
.small-header, .widget_recent_entries a, .widget_tag_cloud a {
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
	color:#4A4A4A;
}

hr {
	border:none;
	height:1px;
	background:#eeeeee;
	margin:0;
}

/* Colors & BG Colors */
.c-white {
	color:#FFFFFF;
}
.c-grey {
	color:#999;
}
.c-black {
	color:#222;
}

.bg-white {
	background-color:#FFFFFF;
}
.bg-grey {
	background-color:#999;
}
.bg-black {
	background-color:#222;
}

/* Buttons */
.btn{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	padding:10px 30px;
	border-radius:0;
	display:inline-block;
	text-align:center;
	box-sizing:border-box;
}

/* Bootstrap 2.X  Basic Layout Engine */
.columns .column-item {
	float:left;
	box-sizing:border-box;
	position:relative;
	min-height:1px;
	margin-left:2.564102564102564%;
	*margin-left:2.5109110747408616%;
}
.columns .column-item:first-child {
	margin-left:0;
}
.columns:after {
	display:table;
	content:"";
	height:0;
	width:100%;
	clear:both;
}
.column-span-1 {
	width:5.982905982905983%;
	*width:5.929714493544281%;
}
.column-span-2 {
	width:14.52991452991453%;
	*width:14.476723040552828%;
}
.column-span-3 {
	width:23.076923076923077%;
	*width:23.023731587561375%;
}
.column-span-4 {
	width:31.623931623931625%;
	*width:31.570740134569924%;
}
.column-span-5 {
	width:40.17094017094017%;
	*width:40.11774868157847%;
}
.column-span-6 {
	width:48.717948717948715%;
	*width:48.664757228587014%;
}
.column-span-7 {
	width:57.26495726495726%;
	*width:57.21176577559556%;
}
.column-span-8 {
	width:65.81196581196582%;
	*width:65.75877432260411%;
}
.column-span-9 {
	width:74.35897435897436%;
	*width:74.30578286961266%;
}
.column-span-10 {
	width:82.90598290598291%;
	*width:82.8527914166212%;
}
.column-span-11 {
	width:91.45299145299145%;
	*width:91.39979996362975%;
}
.column-span-12 {
	width:100%;
	*width:99.94680851063829%;
}

/*--------------------
  Header
--------------------*/
.header-logo, .page-title {
	color:#4A4A4A;
	font-size:18px;
	font-weight:600;
	vertical-align:middle;
	display:inline-block;
	transition:0.2s;
	zoom:1;
	*display:inline;
}
.header-logo:hover {
	color:#007297;
}
.header-logo .symbol {
	font-size:1.2em;
	margin-right:5px;
}
.page-title {
	margin-left:20px;
	padding-left:20px;
	border-left:1px solid;
}
.title-query, .page-title a {
	color:#7f7f73;
}
.page-title a {
	margin-left:4px;
	transition:0.2s;
	position:relative;
	top:1px;
}
.page-title a:hover {
	color:#e24301;
}

#masthead{ padding-top:16px; padding-bottom:16px; background:#D8D8D8; }
.nav-menu li{ padding:15px; border-bottom:1px solid #CCCCCC; }
.nav-menu li a:hover{ opacity:0.9; }
.nav-menu li a { color:#FFFFFF; font-size:12px; font-family: "brandon-grotesque",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:2px; }


/*--------------------
  Page Content
--------------------*/
.styleguide-list article + article {
	margin-top:10px;
}
#section-sidebar {
	position:absolute;
}
#section-sidebar a {
	display:block;
	color:#4A4A4A;
	font-size:18px;
	transform-origin:left center;
	transition:0.2s;
}
#section-sidebar a:hover {
	-webkit-transform:scale(1.1);
	-ms-transform:scale(1.1);
	transform:scale(1.1);
	font-weight:700;
}
#section-sidebar a + a {
	margin-top:18px;
}
.top-link {
	margin-top:40px!important;
	font-weight:700;
	opacity:0.3;
}
.top-link:hover {
	opacity:0.6;
}

.color-swatch {
	height:80px;
}
.color-swatch-comments {
	padding:20px;
	border:1px solid #D8D8D8;
	border-top:none;
}

.sub-section {
	border-bottom:1px solid #D8D8D8;
	font-size:14px;
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:700;
	color:#4A4A4A;
}

#section-type .columns + .columns {
	margin-top:35px;
}
.asset-wrapper {
	position:relative;
}
.asset-image {
	padding:20px;
	box-sizing:border-box;
	height:150px;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	border:1px solid #D8D8D8;
}
.asset-image img {
	-webkit-transform:translateY(-20px);
	-ms-transform:translateY(-20px);
	transform:translateY(-20px);
	max-height:60%;
}
.asset-link {
	position:absolute;
	bottom:20px;
	left:20px;
	color:#007297;
}
.asset-comments h3 {
	padding-top:20px;
	padding-bottom:5px;
}


.example-image-wrap {
	float:left;
}
.example-image {
	width:50%;
}
.example-image-support {
	padding-right:35px;
	padding-top:15px;
	clear:both;
	position:relative;
}
.example-image-support-item {
	display:inline-block;
	line-height:1.3em;
}
.example-image-support-item + .example-image-support-item {
	border-left:1px solid #aaa;
	padding-left:5px;
	margin-left:5px;
}

.underlined-item + .underlined-item {
	margin-top:20px;
	padding-top:30px;
	border-top:1px solid #D8D8D8;
}

.copy-button {
	position:absolute;
	top:0;
	right:-10px;
	font-size:26px;
	cursor:pointer;
	color:#999;
	transition:0.2s;
}
.copy-button:hover {
	color:#4a4a4a;
}

.edit-link {
	font-size:16px;
	font-weight:300;
	color:#007297;
	float:right;
}

.hidden {
	display:none;
}

/*--------------------
  Blog Posts
--------------------*/
.search-field {
	border:none;
	padding:10px;
	font-size:16px;
	font-family:"freight-sans-pro";
	font-weight:600;
	color:#000;
	width:100%;
}
.sidebar aside + aside {
	margin-top:34px;
}
.widget-title {
	margin-bottom:5px;
}
.widget_recent_entries a {
	font-size:14px;
	color:#d68231;
	transition:0.2s;
}
.widget_recent_entries a:hover {
	color:#eca55d;
}
.widget_recent_entries li + li {
	margin-top:4px;
}
.widget_tag_cloud a {
	color:#007297;
	font-size:14px!important;
	display: inline-block;
	width:48%;
	vertical-align:top;
	margin-bottom:10px;
	transition:0.2s;
}
.widget_tag_cloud a:hover {
	color:#263746;
}

.feed-link {
	color:#4a4a4a;
	transition:0.2s;
	display:inline-block;
}
.feed-link > * {
	display:inline-block;
}
.feed-link:hover {
	color:#007297;
}

.entry-title {
	font-size:50px;
}
.entry-content {
	padding-top:50px;
}
.entry-content p {
	margin-bottom:0;
}
.entry-content ul {
	padding-left:20px;
	list-style-position:outside;
	list-style-type:disc;
}
.entry-content ol {
	padding-left:20px;
	list-style-position:outside;
	list-style-type:decimal;
}
.entry-content ul li + li, .entry-content ol li + li {
	margin-top:18px;
}
.entry-content a {
	color:#00589F;
}

.entry-content h2 {
	font-size: 28px;
	color: #262626;
	margin-bottom:0.8em;
}
.entry-content h3 {
	font-size: 22px;
	color: #262626;
}
.entry-content h4 {
	font-size: 18px;
	color: #262626;
	font-weight:700;
}

.entry-content * + * {
	margin-top:1.3em;
}
.entry-content span.align-left + p {
	margin-top:0;
}

/*--------------------
  Footer
--------------------*/


@media only screen and (min-width:320px) and (max-width:767px) {

	/*--------------------
	  General
	--------------------*/
	.columns .column-item {
		width:auto;
		float:none;
		margin-left:0;
	}
	.columns .column-item + .column-item {
		margin-top:30px;
	}

}


@media only screen and (min-width:1024px) {
	/*--------------------
	  Header
	--------------------*/
	#mobile-nav{ display:none; }
	.header-logo, #site-navigation, .nav-menu, .nav-menu li, .nav-subscribe, .nav-social, .menu-nav-menu-container{ display:inline-block; vertical-align:middle; }
	#site-navigation{ float:right; max-width:82%; position:relative; top:0; background:none; text-align:right; }
	.home #site-navigation{ padding-top:4px;}
	.nav-menu li, .nav-subscribe{ border-bottom:none; }

}