﻿/*
Description: This design was custom made by Carol of Sin21 Designs.
This theme is not to be used or redistributed without the explicit permission of Carol L.
Version: 1.0
Author: Carol L. (admin@sin21.org)
Author URI: http://sin21.org

--------------------------
	Design Colors
--------------------------

b55545 - blue
474747 - dark grey
F2F2F2 - light grey
fff - white

Note: Be sure to check the menu.css for any additional color codes 
featured above to assure that all colors are changed.

*/

body, html {-webkit-font-smoothing: antialiased!important; -webkit-text-size-adjust: none;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body {margin:0; background: #F2F2F2; font:400 13px/24px Lato, sans serif; line-height:170%; word-wrap: break-word;}

/* -----------------------------------------------------------
	Global Styling
-------------------------------------------------------------- */
body,
.post,.page,.comments-area,.side,
blockquote,
.ext-links a, 
.ext-links a:visited,
input,
input[type="text"],
textarea,
select {color:#797979;}

h1,h2,h3,h4,h5,h6,.first-area .site-name .tag-line {font-family: 'Oswald', sans-serif; font-weight:300;}
h1,h2,h3,h4,h5,h6 {color: #474747;}
h1,h2,h3,h4,h5,h6,p,blockquote,form {margin: 14px 0;}
h1 {font-size:2.6em;}
h2 {font-size:2.3em;}
h3 {font-size:2.1em;}
h4 {font-size:1.8em;}
h5 {font-size:1.5em;}
h6 {font-size:1em;}

.mobile-name h1,
.mobile-name span {color:#ffffff;}

img, a,button,
input[type='reset'],
input[type='submit'],
input[type='button'] {
	-webkit-transition: all .1s ease-in-out;
	-moz-transition: all .1s ease-in-out;
	-o-transition: all .1s ease-in-out;
	transition: all .1s ease-in-out;
}

.spec, .first-area,.second-area, 
.third-area, .footer, .post, .side,.wp-caption-text
.comment-form textarea,
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
input,input[type="text"],
textarea, select {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

nav ul,nav ul ul {margin:0; padding:0; border:0; list-style:none; font-size: 100%; font: inherit;vertical-align: baseline;}
.post,.page,.comments-area,.side,.second-area,.third-area {background:#fff; box-shadow: 0 0 5px rgba(0,0,0,0.060);}

/* -- Alignments / WP Classes -- */
embed,iframe,
object,video {max-width: 100%;vertical-align: middle;}
.clear {clear: both; display:block;}
.clearR {clear: right;}
.clearL {clear: left;}
.text-center {text-align: center!important;}
.text-left {text-align: left!important;}
.text-right {text-align: right!important;}
.pull-left {float: left!important;}
.pull-right {float: right!important;}
.align-center {margin-left: auto!important; margin-right: auto!important; text-align: center!important;}
.alignleft {margin: 0 10px 0 0!important;float:left;}
.alignright {margin: 0 0 0 10px!important;float:right;}
.aligncenter {margin: 0 auto 10px auto!important;display: block;}

.wp-caption {max-width: 98%; padding: 10px; margin-bottom: 24px!important;}
.wp-caption img[class*="wp-image-"],.wp-caption img {display: block; margin:0 auto; padding:0!important; width:100%; border:0!important; border-radius:0;}
.wp-caption-text {margin: 9px 0; padding:5px 10px 0; font-size: 13px; font-style: italic; line-height: 1.5;}

.wp-caption,.ext-links,
input,
input[type="text"],
textarea,#comment,
select {background:#F9F9F9; border: 1px solid #E1E1E1;}

/* -- Links -- */
a {color:#b55545; text-decoration: none;}
a:hover,a:focus {color:#474747; text-decoration: none;}

/* -- Image Borders -- */
img {margin:0; padding:2px; background:#FBFBFB; border:1px solid #DDDDDD;}
img:hover,.third-area img:hover {opacity:0.9;}

/* -- Font Styling, No Border, WP Smiley -- */
strong {font-weight:700;} em {font-style:italic; color: #5A5A5A;} small {font-size:0.9em;}
.wp-smiley {margin:0; vertical-align: middle; display:inline; padding:0!important; border:0!important; background:none; outline:0; box-shadow:0 0 0;-moz-box-shadow:0 0 0;-webkit-box-shadow:0 0 0;-ms-box-shadow:0 0 0;-o-box-shadow:0 0 0;} 
#noborder img, #content #noborder, #sidebar #noborder {padding:0; border:0; background:none; outline:0; box-shadow:0 0 0;-moz-box-shadow:0 0 0;-webkit-box-shadow:0 0 0;-ms-box-shadow:0 0 0;-o-box-shadow:0 0 0;} 

.spec,.spec-alt {margin:0 auto; position:relative; max-width:1100px;}
.second-area,.third-area,.footer .pad {max-width:1100px;}

.footer {margin:0 auto; padding:0; width:100%; background:#474747; color:rgba(255,255,255,0.4); font-size:13px; font-weight:400; text-align:justify; overflow:hidden;}
.footer .pad {margin:0 auto; padding:15px; overflow:hidden;}
.footer .pull-left, .footer .pull-right {font-size:11px; font-weight:700; text-transform:uppercase;}
.footer a, .footer a:visited {color:rgba(255,255,255,0.5); font-weight:700;}
.footer a:hover {color:#fff; text-decoration: none;}

/* -----------------------------------------------------------
	Full Site (967px Resoultion and Higher)
-------------------------------------------------------------- */

@media only screen and (min-width:967px), only screen and (min-width:967px) {

/* -- HIDE -- */
.mobile-name {display:none!important; visibility:hidden!important; padding:0!important; margin:0!important; height:0!important;}

.spec {}

.first-area {margin:40px auto; padding:0; display:block;  text-align:center;}
.first-area .site-name {margin:0 auto; text-align:center;}
.first-area .site-name h1 {margin:0 0 -13px; font-size:34px; font-weight:300; color:#4e4e4e; letter-spacing:0; text-transform:uppercase;}
.first-area .tag-line {display:inline-block; padding:4px 6px; background:#b55545; font:italic 400 10px Lato!important; color:#fff; letter-spacing:1px; text-transform:uppercase;}

.second-area {margin:20px auto 0; padding:0 15px; background:#fff; height:50px; display:block; overflow:show; text-align:center;}
.second-area .nav {margin-top:1.35em; position:relative; z-index:999; display:inline-block; float:left;}
.second-area .nav-center {margin:1.35em auto 0; position:relative; z-index:999; display:inline-block; float:none;}
.second-area .social {margin-top:15px; display:inline-block; font:400 10px Lato, sans-serif; color:#8b8b8b; text-transform:uppercase;}
.second-area .social a {margin:0 2px 0 0; padding:5px 10px; display:block; float:left; color:#8b8b8b;}
.second-area .social a:hover {color:#b55545;}
.second-area .social .fa {margin-right:5px; font-size:11px;}
.second-area .social a:last-child {padding-right:0;}

.third-area {margin:20px auto!important; padding:0 25px 25px; background:#fff; display:block; overflow:hidden;}
.third-area img {margin:0; background:#FBFBFB; border:1px solid #E0E0E0;}
.third-area h1 {margin:0 auto 20px; padding:6px 6px; display:inline-block; background:#b55545; font:italic 400 10px Lato; color:#fff; letter-spacing:1px; text-transform:uppercase;}
.third-area .pull-right {width:52%; display:block;}
.third-area .pull-left {width:45%;}

.mast-head {margin:10px auto; position:relative; display:block; height:360px; }
.header {margin:0 auto; position:relative; display:block; width:100%; height:360px; background:url('../images/header.jpg') center top no-repeat;}

#content,#sidebar {margin:0 0 0;}
#content .post,#sidebar .side {width:100%;}
.post-feat {margin-bottom:5px!important;}
#content {float:left; width:66.2%; max-width:66.2%;}
#sidebar {float:right; width:31.8%; max-width:31.8%;}

}

/* -----------------------------------------------------------
	Responsive (966px Resoultion and Lower)
-------------------------------------------------------------- */

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {

/* -- HIDE -- */
.mobile, .author {display:none!important; visibility:hidden!important; padding:0!important; margin:0!important; height:0!important;}

body {background-color:#fff!important; overflow-x:hidden;}
.spec,.spec-alt {width:100%; max-width:none!important}

.mobile-name {margin:0 auto 0px!important; padding:4vw 0!important; display:block; background:#b55545;}
.mobile-name h1 {margin:0; padding:0; font:400 30px Oswald!important; color:#fff; letter-spacing:-1px; text-transform:uppercase;}
.mobile-name .tag-line {margin:0; display:block; padding:0; color:#fff; font:400 12px Lato!important; text-transform:lowercase;}

.post,.page,.comments-area,.side {box-shadow: 0 0 0;}
#content,#sidebar {margin:30px auto 0!important; float:none!important; display:block; width:90vw!important;}
#content .entry {margin-top:2em!important; padding:0!important;}
#content .post,#sidebar .side {padding:0;}
.post-head,.post-foot {margin-left:0!important;}

#content img, #content a img, #content a:visited img,#sidebar img, #sidebar a img, #sidebar a:visited img{}
#content .aligncenter {max-width: 80vw; height: auto; width: auto\9; /* ie8 */}
#content .alignleft, #content .alignright {max-width: 40vw; height: auto; width: auto\9; /* ie8 */}

.footer .pull-left, .footer .pull-right {display:block!important; float:none!important; text-align:center;}
}

@media only screen and (max-width: 481px), only screen and (max-width: 481px) {

.pagination .pull-left, .pagination .pull-right {float:none!important; width:100%!important; display:block; min-height:100px; padding: 6px 5px; text-align:left!important; border:0;}

}

/* -----------------------------------------------------------
	Posts / Pages
-------------------------------------------------------------- */

.post,.page,.comments-area {margin:0 0 55px; padding:0; overflow:hidden;}
.post-head,.post-foot {padding:20px 20px 0; text-align:center;}
.comments-area,.pagination {padding:20px 20px;overflow:hidden;}
.entry {padding:0 20px 0; overflow:hidden;}

/* -- Heading -- */
.post-title {margin:0; padding:0; font-size:30px; font-weight:300; color: #474747; line-height:130%; letter-spacing:-1px;}
.post-title a {color:#474747;}
.post-title a:hover {color:#b55545;}
.search-title {margin:0 auto 20px; padding:0; color:#474747; text-align:center;}
.post .border {margin:15px auto 0; background:#E8E8E8; height:1px; width:100px;}

/* -- Post Meta -- */
.post-meta-1 {margin:15px 0; padding:0; font:400 10px Lato; color: #868686; text-transform:uppercase; clear:both!important; overflow:hidden; border:0;}
.post-meta-2 {margin:0; padding:15px 0 15px; display:block; background:#fff; font:400 10px Lato; color: #b4b4b4; text-transform:uppercase; line-height:180%; border-top:1px solid #E8E8E8;}
.post-meta-1 .meta {margin:0 2px 0 0; padding:7px 5px 7px; display:inline;}
.post-meta-1 .date:before {margin-right:8px; content:"\f017"; font-family:fontawesome; font-weight:400;}
.post-meta-1 .author:before {margin-right:8px; content:"\f040"; font-family:fontawesome; font-weight:400;}
.post-meta-1 .cmnt:before {margin-right:8px; content:"\f27a"; font-family:fontawesome; font-weight:400;}
.post-meta-1 a, .post-meta-1 a {color:inherit;}
.post-meta-1 a:hover, .post-meta-1 a:focus,
.post-meta-2 a:hover, .post-meta-2 a:focus {color:#b55545;}
.tags a:before {margin-right:4px; content:"\f02b"; font-family:fontawesome; font-weight:400;}
.tags a, .tags a:visited {margin-right:13px; padding:0; display:inline-block; color:#A8A8A8;}

/* -- Featured Image -- */
.post-feat {position:relative; display:block; margin:0 auto; padding:0; width:100%!important; overflow:hidden; border:0;}
.post-feat img {padding:0; border:0; width:100%!important; height:auto; -webkit-box-shadow:none;-moz-box-shadow:none; box-shadow:none; border-radius:0;}

/* -- Blockquote -- */
blockquote {margin:10px 10px; padding:5px 15px 5px 15px!important; background:#F5F5F5; color: #797979; box-sizing: border-box; border-left:5px solid #797979;}

/* -- Read More Link -- */
.more-link {display: table; margin: 24px 0; padding:5px 10px; background:#474747; color:#fff; text-align:center;}
.more-link:hover, .more-link:focus {background:#b55545; color:#fff;}
.more-link:after {margin: 0 0 0 7px; content: '\f105'; font-family: FontAwesome; font-size: 14px; font-weight: 400;}

/* -- External Post Links -- */
.ext-links {margin:10px auto; padding:15px; vertical-align:middle; background:#FBFBFB; color:#6C6C6C; text-align:left; border:1px solid #E3E3E3;}
.ext-links a {color:#6C6C6C; text-decoration:underline;}
.ext-links a:hover {color:#b55545; text-decoration: none;}

/* -- Single Post Pagination -- */
.pagination h1 {margin:0 0 2px; padding:0 0 10px; letter-spacing:-1px; border:0;}
.pagination .pull-left, .pagination .pull-right {display:block; min-height:100px; width:47%; padding: 6px 5px; color:#5A5A5A; border:0;}

/* -- Post Comments -- */
.commentlist {margin: 0; padding: 0; list-style: none;}
.comment {margin: 24px 0;}
.comment:last-child {margin-bottom: 48px;}
.comment-body {border-bottom: 1px dotted #dedede;}
.comment-author .avatar {
	float: left; margin: 0 20px 0 0; padding: 0; width: 40px; height: 40px;
	border: 0; border-radius: 100%; box-shadow: none;
}
.bypostauthor .comment-author .fn:after {margin: 3px 0 0 4px; padding: 2px 3px; display: inline-block; background:#F2F2F2; color: #626262; font-size: 10px; line-height: 12px; content: 'Post Author'; vertical-align: top;}
.comment-metadata {font-size: 12px; color: #ababab; line-height: 18px; letter-spacing: 1px; text-transform: uppercase;}

.commentlist .reply {font-size: 12px; letter-spacing: 1px; text-transform: uppercase;}
.commentlist .reply a {padding: 0 0 5px 0;}
.commentlist .reply a:before {
	font-family: FontAwesome;
	font-size: 10px;
	font-weight: 400;
	margin: 0 4px 0 0;
	content: '\f112';
}
.commentlist li ol.children {margin: 0; padding: 18px 0 0 0; list-style:none;}
.commentlist li ol.children li { padding-left:  3% ; padding-top: 17px; border-left: 1px dotted #dedede;}
.no-comments {margin-top: -24px;}
.comment-navigation {margin: 24px 0;}
.comment-navigation .nav-previous a:before {margin: 0 4px 0 0; content: '\2190';}
.comment-navigation .nav-next a:after {margin: 0 0 0 4px; content: '\2192';}

/* -----------------------------------------------------------
	Sidebar
-------------------------------------------------------------- */

.side {margin:0 0 35px; padding:20px; overflow:hidden;}

/* -- Heading -- */
.side-title {margin:0 0 20px; padding:0; font: 700 14px Lato; letter-spacing:1px; text-transform:uppercase; text-align:center;}
.side .border {margin:5px auto 0; background:#b55545; height:2px; width:50px;}

/* -- Widget Search Box -- */
.side input[type='search'] {width: 100%;}
.side input[type='submit'],.screen-reader-text {display:none!important;}

/* -- Widget Post Tag Cloud -- */
.side .tagcloud {padding-top:5px; overflow:hidden; text-align:left;}
.side .tagcloud ul li {margin:0 -1px 0 0; padding:0 0 3px!important; background:none!important; display:inline-block; border:0!important;}
.side .tagcloud a {padding:2px;}

/* -----------------------------------------------------------
	Lists
-------------------------------------------------------------- */

ul {list-style:disc inside none; margin:0 3%; padding:0;}
ul ul {list-style:circle inside none; padding:0 3%;}
#sidebar ul {list-style:none inside none; margin:0; padding:0; text-align:left;}
#sidebar ul li {padding: 7px 0; border-bottom:1px solid #F0F0F0;}

/* -----------------------------------------------------------
	Forms
-------------------------------------------------------------- */
input,
textarea, #comment,
select {width:80%; max-width: 100%; padding: 10px; font-weight:400;}
input[type='text'],input[type='email'] {width:80%; max-width: 100%;}

button,
input[type='reset'],
input[type='submit'],
input[type='button'] {margin:3px 0; padding: 10px 20px; width:auto!important; background-color:#474747; color: #fff; font-size: 13px; line-height: 20px; border:0;}

button:hover,
input[type='reset']:hover,
input[type='submit']:hover,
input[type='button']:hover,
button:focus,
input[type='reset']:focus,
input[type='submit']:focus,
input[type='button']:focus {background: #b55545; color: #fff; border:0;}
.not-found input[type='search'] {width: 50%;}
label {display: block; padding:0 0 10px; font-weight:700; sans-serif; text-transform:uppercase;}
.required {color: red;}

.comment-respond {margin: 48px 0 24px 0;}
.comment-reply-title {margin: 48px 0 24px 0; padding: 0 0 10px 0; color: #212121; font-size: 21px; border-bottom: 1px solid #dedede;}
.comment-form label {display: block; padding: 0 0 5px 0; line-height: 1;}
.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'] {width: 50%;}
.comment-form textarea {width: 80%;}
.posted-on:before,
.byline:before,
.cat-links:before,
.comments-link:before,
.edit-link:before {font-family: FontAwesome; font-size: 10px; margin: 0 4px 0 0;}

.byline:before,
.cat-links:before,
.comments-link:before,
.edit-link:before {margin: 0 4px 0 8px;}

/* -----------------------------------------------------------
	Additional Bits
-------------------------------------------------------------- */

/* -- Tooltip ( title="hey there!" class="tooltip" )-- */
#tooltip {margin-left:-10px; padding:3px 6px; position:absolute; z-index:999; display:none; border:0; background:rgba(0,0,0,0.7); font-size:13px; font-weight:400; color: #fff;}

/* -- Page-Navi Styling -- */
.nav-links:before,
.nav-links:after {display: table; content: '';}
.site-content:after, .nav-links:after {clear: both;}
.posts-pagination .next:after {content: '\003e';}
.posts-pagination .prev:before {content: '\003c';}

.nav-next {display: inline-block; float: right; width: 49.5%; text-align: right; vertical-align: top;}
.nav-previous {display: inline-block; float: left; width: 49.5%; vertical-align: top;}
.posts-pagination {margin: 24px 0;}
.page-numbers {float: left; margin: 0 5px 5px 0; padding: 7px 15px; background:#FBFBFB; color: #595959; border:1px solid #E3E3E3;}

.posts-pagination a:hover,
.posts-pagination a:focus,
a.page-numbers:hover {color:#fff; background:#b55545; border-color:#b55545;}

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

/* --  Button Style -- */
.button a, .button a:visited {
	padding:5px 7px; color:#626262;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f4f4f4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f4f4f4 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f4f4f4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
	border: 1px solid #E0E0E0;
}
.button a:hover {background:#fff; color:#4C4C4C; text-decoration: none;}