﻿/*
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
--------------------------

BDAD9F - tan
9d7913 - blue
323232 - dark grey
3D3D3D - lighter 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: #3d3d3d; font:400 13px Open Sans, Arial; color: #696969; line-height:165%; text-align:justify;}

/* -----------------------------------------------------------
	Global Styling
-------------------------------------------------------------- */

.clear {clear: both; display:block;}
.clearR {clear: right;}
.clearL {clear: left;}

/* Make sure videos and embeds fit their containers */
embed,iframe,object,video {max-width: 100%;}
#content img, h1 img {max-width: 100%; height: auto; width: auto\9; /* ie8 */}

/* -- Alignment Classes -- */
.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;}

/* -- Webkit Scrollbar -- */
::-webkit-scrollbar-thumb {height: 100px;background: #BDAD9F;}
::-webkit-scrollbar {width: 10px;height: 10px; background: #fff;}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {background-color:#BDAD9F;}

/* -- Links -- */
a, a:visited, a img, a:visited img, a:hover img {color:#20394f; text-decoration: none;}
a:hover{color:#BDAD9F; text-decoration: none;}
#post a:hover,#side a:hover{text-decoration: underline;}

/* -- Bold / Italic -- */
strong {font-weight:700;} em {font-style:italic; color:#BDAD9F;} small {font-size:0.9em;}

/* -- Image Borders -- */
img, a img, a:visited img, embed {margin:0; padding:7px; background:#fff; border:1px solid #E0E0E0;}
a:hover img,img:hover {background:#BDAD9F; border-color:#BDAD9F;}

/* -- WP Smiley Alignment/Border Fix -- */
.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;} 

/* -- No Image Border ( id="noborder" ) -- */
#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;} 

/* --  Button Style -- */
.button-2 {background: #F4F4F4; border: 1px solid #E0E0E0;}
.button a, .button a:visited {padding:5px 7px; color:#626262; background: #F4F4F4; border: 1px solid #E0E0E0;}
.button a:hover {background:#fff; color:#4C4C4C; text-decoration: none;}

/* -- Global Wrappers -- */
.spec, .spec-alt, .wrapper {margin:0 auto!important; position:relative; max-width:1100px;}
.spec,.first-bar,.second-bar,.header,.footer {max-width:1100px;}
.wrapper {display:block; overflow:hidden;}

/* -- Global Heading -- */
h1 {font-size:22px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4,h5 {font-size:16px;}

/* -- Global Footer -- */
.footer {margin:0 auto; padding:0; width:100%; background:#323232; color:rgba(255,255,255,0.3); font-size:12px; font-weight:400; text-align:justify; overflow:hidden;}
.footer .pad {margin:0 auto; padding:20px 0; 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.3); font-weight:700;}
.footer a:hover {color:#9d7913; 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, .mobile-search {display:none!important; visibility:hidden!important; padding:0!important; margin:0!important; height:0!important;}

/* -- Wrap -- */
.spec {margin: 0 auto!important; background:#fff url('../images/spec-bg.jpg') top center repeat-y; overflow:hidden;}
.first-bar,.second-bar,.footer {-webkit-box-sizing: border-box; box-sizing: border-box;}

/* -- First Bar ( Site Name / Navigation ) -- */
.first-bar {margin:30px auto 0!important; padding:10px 20px 15px; height:80px; background:#323232; display:block; position: relative;}
.first-bar h1 {display:inline-block; margin:0 0 -5px; padding:0; font: 300 32px Open Sans; color:#fff; letter-spacing:-2px; text-transform:uppercase;}
.first-bar b {font-weight:700;}
.first-bar div.descript {margin:-3px 0 0!important; font-size:12px; color:#7E7E7E; letter-spacing:0px;}
.first-bar .nav {float:right; position:relative; z-index:999; margin-top:17px; margin-left:0; display:inline-block; overflow:show;}

/* -- First Bar: Search -- */
.first-bar #searchform {display: block; margin:0; position: relative; top:12px;}
.first-bar #searchform label {display: none;}
.first-bar #searchform #s {padding: 10px 40px 8px 10px; position: relative; width:200px; background-color:#fff; font:400 13px Open Sans, sans-serif; color:#626262; outline: none; border:0;}
.first-bar #searchform #searchsubmit {position: absolute; top:-2px; right: -5px; background: url('../images/search.png') center 40% no-repeat; text-indent: -9999px; border: none; outline: none; width:45px; height:46px;}

/* -- Second Bar ( Social Icons / Search Box ) -- */
.second-bar {margin:0 auto!important; padding:10px 20px; background:#9d7913; display:block; overflow:hidden; text-align:left; position: relative;}

/* -- Second Bar: Social Icons -- */
.second-bar .social {position: relative; top:1px; text-align:center; display:inline-block;}
.second-bar .social a, .social a:visited {margin:0 2px 0 0; padding:8px 10px 10px; display:block; width:10px; height:10px; float:left; color:#fff; font-size: 13px; text-align:center;}
.second-bar .social a:hover {color:#fff;}
.second-bar .social a.twitter:hover {background:#00ACED; color:#fff;}
.second-bar .social a.facebook:hover {background:#3B5998; color:#fff;}
.second-bar .social a.instagram:hover {background:#517FA4; color:#fff;}
.second-bar .social a.tumblr:hover {background:#32506D; color:#fff;}
.second-bar .social a.feed:hover {background:#F09C00; color:#fff;}
.second-bar .social .fa {}

/* -- Second Bar: Search -- */
.second-bar #searchform {display: block; position: relative; top:1px;}
.second-bar #searchform label {display: none;}
.second-bar #searchform #s {padding: 7px 35px 7px 10px; position: relative; width:200px; background: #fff url('../images/search.png') 95% 48% no-repeat; font:400 13px Open Sans, sans-serif; color:#626262; outline: none; border:0;}
.second-bar #searchform #searchsubmit {display:none;}

/* -- Header -- */
.header {margin:0 auto; position:relative; display:block; height:400px; background:url('../images/header.jpg') center top no-repeat;}

/* -- Content / Sidebar -- */
#content {margin:0; float:right; width:65.5%; max-width:65.5%;}
#post .post-feat {margin:0 0 20px 0!important; width:97%!important; max-height:300px; float:right;}

#sidebar {margin:0; float:left; width:34%; max-width:34%;}

/* -- Footer -- */
.footer {margin:0 auto 20px;}
.footer .pad {padding:25px; overflow:hidden;}
}

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

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

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

/* -- Headings -- */
#side h1 {font-size:115%!important;}
h1 {font-size:2em!important;}
h2 {font-size:1.8em!important;}
h3 {font-size:1.6em!important;}
h4,h5 {font-size:1.5em!important;}

/* -- Body / Wraps -- */
body {margin:0!important; padding:0!important; background:#3D3D3D; overflow-x:hidden; line-height:160%;}
.spec {display:block; margin:0 auto; padding:0; width:92vw; max-width:none!important}
.spec-alt {margin:0 auto; width:100%!important;}

/* -- Site Name -- */
.mobile-name h1 {margin:0 auto 0px!important; padding:15px 0!important; width:92vw; display:block; background:#9d7913; font:400 38px Oswald!important; color:#fff!important; text-align:center; letter-spacing:0; line-height:105%;}
.mobile-name span {display:block; font-size:12px; font-weight:400; font-family:Roboto Condensed; color:#3D3D3D; text-transform:lowercase;}

/* -- Content -- */
#content {margin:0 auto!important; display:block; width:92vw!important; float:none!important;}
#content .entry {margin-top:0!important; padding:0em 1.5em 2em!important;}
#content .pad {margin-top:0!important; padding:1.5em 1.5em 2em!important;}
#content #post {margin:0 auto 15px auto; overflow:hidden;}

#sidebar {margin:0 auto!important; display:block; width:92vw!important; background:#F4F4F4; overflow:hidden;}
#sidebar #side {padding:1.5em 1.5em 2em!important;overflow:hidden;}

/* -- Image / Thumbnails Size Adjustment (For Photo Posts) -- */
#content img, #content a img, #content a:visited img, #content embed, #content-full img, #content-full a img, #content-full a:visited img {padding:3px;}
#content center img {max-width: 17vw; height: auto; width: auto\9; /* ie8 */}
#content .aligncenter {max-width: 80vw; height: auto; width: auto\9; /* ie8 */}
#content .alignleft, #content .alignright {max-width: 40vw; height: auto; width: auto\9; /* ie8 */}

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


/* -- Footer -- */
.footer {margin:0 auto!important; text-align:jusitify!important; width:92vw;}
.footer .pad {margin:0 auto; padding:15px; overflow:hidden; width:90vw;}
.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) {

/* -- Single Post Pagination -- */
#post .pagination .left, #post .pagination .right {float:none!important; width:100%!important; display:block; min-height:100px; padding: 6px 5px; color:#5A5A5A; text-align:left!important; border:0;}

}

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

#post {margin:0 auto 45px auto; padding:0; background:#fff; overflow:hidden;}
#post .entry {padding:10px 25px;}
#post .pad {padding:25px 25px 0;}

/* -- Heading -- */
#post h1.post-title, #respond h3#reply-title {margin:0; padding:0; font:700 22px Oswald; color: #323232; text-align:left; line-height:110%; letter-spacing:0; text-transform:uppercase; border-bottom:0;}
#post h1 a, #post h1 a:visited {color:#323232;}
#post h1 a:hover {color:#BDAD9F; text-decoration:none!important;}

#post h1, #post h2, #post h3, #post h4, #post h5 {padding:5px 0; font-weight:400; font-family:Oswald; color: #323232; line-height:120%;}
#post h4, #post h5 {padding:10px; background:#9d7913; color:#fff;}
#post h5 {background:#E5E5E5!important; color:#909090;}

/* -- Post Details -- */
#post .post-details {margin:0 0 10px; display:block; font:700 10px Roboto Condensed; color: #848484; text-align: left; text-transform:uppercase;}
#post .post-details .meta {margin:0; padding:0; display:inline-block;}
#post .post-details .date,#post .post-details .author {margin-right:1px; padding:5px 7px;}
#post .tags {margin:10px 0; font:400 9px Roboto Condensed; color: #848484; text-transform:uppercase; letter-spacing:1px;}
#post .tags a, #post .tags a:visited {padding:1px 3px; background:#9d7913; color:#fff;}
#post .tags a:hover {background:#BDAD9F; color:#fff;}
#post .cmnt {margin-top:5px;}
#post .cmnt a:hover {text-decoration:none;}

/* -- Featured Image -- */
#post .post-feat {position:relative; display:block; margin:15px auto; padding:0; overflow:hidden;  border:0!important;}
#post .post-feat img {padding:0; border:0; background:0; -webkit-box-shadow:none;-moz-box-shadow:none; box-shadow:none; border-radius:0;}
#post .post-feat img:hover {opacity:0.9;}

/* -- Blockquote -- */
blockquote {margin:10px 20px; padding:0 0 0 20px; text-align:justify; background:#fff; color:#696969; border-left:5px solid #BDAD9F;}
blockquote blockquote {background:#fff; border-color:#323232;}

/* -- Read More Link -- */
#post .entry a.more-link, #post .entry a.more-link:visited {margin-bottom:20px; padding:8px 10px; background:#323232; color:#fff; font-size:13px; font-weight:400; text-align:center;}
#post .entry a.more-link:hover {background:#BDAD9F; color:#fff; text-decoration: none;}
#post .entry a.more-link:after {margin-left:5px; content:"\f138"; font-family:fontawesome; font-size:12px;}

/* --  External Post Links -- */
#post .ext-links {margin:10px auto; padding:10px 10px 10px 75px; vertical-align:middle; background:#F3F3F3 url('../images/links.jpg') left center no-repeat; font:400 14px Roboto, sans-serif; color:#6C6C6C; line-height:140%; font-style:italic; border:1px solid #E8E8E8;}
#post .ext-links a, #post .ext-links a:visited {color:#3F3F3F; text-decoration: none; font-weight:700; }
#post .ext-links a:hover {color:#eea42b; text-decoration: underline;}

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

/* -- Post Comments -- */
ol.commentlist {margin: 29px 0 0 0;  margin-left: 18%; padding: 0;}
.commentlist li:nth-child(even) {background:#fff!important;}
.commentlist > li {margin: 0; padding: 18px 0 17px 0; position: relative; list-style: none; border-bottom: 1px dotted #D9DEDB;}
.commentlist li .avatar {display: block; position: absolute; left: -18%; width: 60px; height: 60px;}
.commentlist li .avatar img {margin-top: 6px; width: 60px; height: 60px; border:0!important; padding:0!important; border-radius: 100% 100% 100% 100%;}
.commentlist li .comment-info cite {font: 700 16px/30px Roboto, sans-serif; color: #0F0F0F;}
.commentlist li .comment-info .fa {color: #F2C100;}
.commentlist li .comment-info .comment-meta {display: block; font-size: 13px; line-height: 24px;}
.commentlist li .comment-info .comment-meta .reply {font-family: notosans-bold, sans-serif;}
.commentlist li .comment-info .comment-meta .sep {margin: 0 5px; color: #AEB6B7;}
.commentlist li .comment-text {clear: both; margin: 24px 0 0 0; padding: 0; line-height: 24px;}

/* -- Post Comments: Children -- */
.commentlist li ol.children {margin: 0; padding: 18px 0 0 0;}
.commentlist li ol.children li { padding-left:  5% ; padding-top: 17px; border-top: 1px dotted #D9DEDB;}

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

#sidebar, #sidebar .pad, #sidebar .textwidget {margin:0 auto;padding:0;} 
#sidebar #side {margin:0 auto 20px; padding:25px; color:#696969;}

#sidebar .welcome {margin:0; padding:25px; background:#1E1E1E; color:#696969; position:relative; z-index:100;}

/* -- Heading -- */
#sidebar h1.side-title {margin:0 0 20px; padding:0; background:#F4F4F4; font: 600 14px Open Sans; color: #3D3D3D; text-align:left; line-height:24px; letter-spacing:0; border-bottom:0; text-transforxm:uppercase;}
#sidebar h1.side-title:before {padding:0 10px 0 0; background:#F4F4F4; content:'\f15b'; font: 400 14px fontawesome; color:#9d7913;}
#sidebar h1.side-title span {padding:0 10px 0 0; background:#F4F4F4;}
#sidebar h1.side-title .border {margin-top: -16px; border-bottom: 10px solid #E2E2E2}
#sidebar h1.side-title a, #sidebar h1.side-title a:hover {color:#9d7913;}

/* -- Search Box -- */
#sidebar #searchform {display: block; margin:0; position: relative;}
#sidebar #searchform label {display: none;}
#sidebar #searchform input[type="text"] {margin:0; padding: 13px 15px 17px 38px!important; position:absolute; left:0; width:100%!important; background: #fff url('../images/search.png') 14px 15px no-repeat; font: 13px Roboto; color: #B9B9B9; text-align: left; outline: none; border:1px solid rgba(0,0,0,0.1);}
#sidebar #searchform input[type="submit"] {display:none;}

/* -- Post Tags Cloud -- */
#sidebar .tagcloud {padding-top:5px; overflow:hidden; text-align:left;}
#sidebar .tagcloud ul li {margin:0 -1px 8px 0; padding:0 0 3px!important; background:none!important; display:inline-block; border:0!important;}
#sidebar .tagcloud a {padding:5px 7px; background:#fff; color:#707070; border:1px solid rgba(0,0,0,0.1);}
#sidebar .tagcloud ul li:hover {background:none!important;}
#sidebar .tagcloud ul li a:hover {background-color:#9d7913; color:rgba(255,255,255,0.7)!important; text-decoration:none!important;}

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

#content ul, #sidebar ul li {list-style:none; margin:0; text-align:left;}
#content ul li {padding: 10px; color:#5A5A5A; border-bottom:1px solid #E1E1E1;}
#sidebar ul li {margin-bottom:2px; padding: 5px; background:#F7F7F7x; color:#5A5A5A; border-bottom:1px solid #E1E1E1;}
#content ul li:hover {background:#f7f7f7;}
#sidebar ul li:hover {background:#fff;}

/* -----------------------------------------------------------
	Forms
-------------------------------------------------------------- */
form input[type="text"],
form input,
form textarea {
	margin:0; padding: 15px; width:100%; background-color: #F7F7F7; font-size:13px; font-weight:300; color: #5a5a5a; 
	text-align: left; outline: none; border:1px solid #E1E1E1; box-sizing: border-box; 
}
form input[type="image"] {padding:0!important; width:inherit!important; background:none!important; border:0!important;}
.commentlist li.bypostauthor #respond form input[type="text"],
.commentlist li.bypostauthor #respond form #author, 
.commentlist li.bypostauthor #respond form #email, 
.commentlist li.bypostauthor #respond form #url, 
.commentlist li.bypostauthor #respond form textarea, 
.commentlist li.bypostauthor #respond form #comment {background-color: #fff;}
.commentlist ul.children li #respond form input[type="text"],
.commentlist ul.children li #respond form #author, 
.commentlist ul.children li #respond form #email, 
.commentlist ul.children li #respond form #url, 
.commentlist ul.children li #respond form textarea, 
.commentlist ul.children li #respond form #comment {width:100%;}
#respond h3#reply-title #cancel-comment-reply-link {margin-left: 10px; font-size: 11px; font-weight:400; text-transform:none; letter-spacing:0;}
#respond form p {margin: 11px 0; margin: 0.785714286rem 0;}
#respond form p.logged-in-as {margin-bottom: 24px; margin-bottom: 1.714285714rem;}
form label {display: block; padding:0 0 10px; font:700 13px Open Sans, sans-serif; text-align:left; color:#323232; text-transform:uppercase;}
form #submit {
	margin:0 3px 0 0; padding:10px; display:block; clear:both; width:auto; background-color:#323232; 
	font-size:13px; font-weight:700; color:#ffffff; text-align:center; outline: none; border:0; 
}
.required {color: red;}
option {padding: 5px; width:100%; background-color:#F8F8F8; color: #5a5a5a; text-align: left;}
select {
	margin-bottom: 5px; padding: 5px; width:100%; background-color:#F8F8F8;
	font-size:13px; font-weight:300; color: #5a5a5a; text-align: left;
	outline: none; border:1px solid #EDEDED;
}

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

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


.aff img, .aff a img{
border-radius:4px;  
background-color: #dedede!important;
border: 0px!important;
margin: 2px;
padding:0px!important;
-moz-box-shadow: 0px 0px 0px #19191d!important;
-webkit-box-shadow: 0px 0px 0px #19191d!important;
box-shadow: 2px 2px  #383838!important; 
-webkit-transition: none;}

#sidebar #project-img {margin:0; padding:2; border:0;}
#project img:hover {
	border:0px;
}
#sidebar #side .project {margin:0 auto 15px; padding:0; width:auto;}
#sidebar #side .project h1 {margin:0; padding:3px 5px; display:inline-block; background:#454545; font:600 10px Source Sans Pro; color: #fff; text-align: left; text-transform:uppercase; letter-spacing:0; overflow:hidden; border-bottom:2px solid #454545;}
#sidebar #side .project .project-links {margin:5px 0 15px; padding:0; font-size:10px; font-weight:700; color:#fff; text-align:center; text-transform:uppercase; width:auto;}
#sidebar #side .project .project-links .fa {margin-right:4px; font-size:11px;}
#sidebar #side .project .project-links a, #sidebar #side .project .project-links a:visited{display: inline-block; margin:0; padding:3px 0; width:32.5%;background:#fff; color:#707070;}
#sidebar #side .project .project-links a:last-child {border:0;}
#sidebar #side .project .project-links a:hover {background:#CDA898; color:#fff;}
.quote {margin:10px 0; padding:10px 20px; text-align:justify; background:#fff; color: #797979; border:1px solid #E1E1E1;}
.project{
	font-size:11px;
}
