/*
Theme Name: Structure
Theme URI: http://wordpress.org/
Description: Custom theme.
Version: 1.0
Author: Avishkar Autar
Author URI: http://semisignal.com/
Tags: blue, custom header, fixed width, two columns
*/

@font-face { font-family: 'Gudea'; src: url('fonts/gudea-bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Gudea'; src: url('fonts/gudea-italic-webfont.woff') format('woff'); font-weight: normal; font-style: italic; }
@font-face { font-family: 'Gudea'; src: url('fonts/gudea-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bebas Neue'; src: url('fonts/bebas-neue-regular-webfont.woff') format('woff'), url('fonts/bebas-neue-regular-webfont.svg#BebasNeue') format('svg'); font-weight: normal; font-style: normal; }

* {	margin:0; padding:0; outline:none; }
ul, li { list-style-type: none;	list-style-image: none; }
html, body, p, div, input, textarea { font-family: Gudea, Verdana, Arial, Sans-Serif; }
html, body { text-align:center; }
body { font-size: 62.5%; font-family: Gudea, Verdana, Arial, Sans-Serif; background: #fff; color: #000; text-align: center; margin: 0; padding: 0; width:100%; }

::placeholder {
    color: #8C99A2;
}

code { 
    font: 12px Consolas, Monaco, Courier, Fixed; 
    line-height: 16px;
    display: block; 
    padding: 5px; 
    border: 1px solid #ddd; 
    background: #eee; 
    overflow: auto; 
}

code.inline { 
    font: 14px Consolas, Monaco, Courier, Fixed; 
    display:inline; 
    padding:2px 3px; 
    border:0; 
    background:rgb(240, 240, 240); 
    overflow:auto; 
}

input[type="submit"] { cursor:pointer; width:auto; display:inline-block; padding:10px; border:1px solid #418AB8; background:#4498CD; color:#fff; font-weight:bold; font-size:14px; border-radius:0; -webkit-appearance:none; }
input[type="submit"]:hover { background:#2B7BAD; }

label { color:#B3C2CC; }
textarea, input[type='text'] { border: 2px solid #B3C2CC; border-radius:0; -webkit-appearance:none; }
textarea.active, textarea:focus, input[type='text'].active, input[type='text']:focus { border: 2px solid #175EB5; }

acronym, abbr, span.caps { cursor: help; }
acronym, abbr { border-bottom: 1px dashed #999;	}

blockquote { 
    margin: 0; 
    padding:6px 18px 6px 18px; 
    background:#e9f2ff; 
    border-left:4px solid #c4dcff; 
}
@media only screen and (max-width: 640px) {
    blockquote { 
        margin:0; 
    }
}

.center { text-align: center; }
.hidden { display: none; }

hr { display: none; }

.navigation { margin:25px 0; }
.navigation a { width:auto; display:inline-block; padding:10px; border:1px solid #418AB8; background:#4498CD; color:#fff; font-weight:bold; font-size:14px; text-decoration:none; }
.navigation a:hover { background:#2B7BAD; color:#fff; text-decoration:none; }

#content { font-size: 14px; max-width:1000px; }
#content h2, #content h2 a, #content h3 a { color: #175EB5;}

.widecolumn .entry p { font-size: 1.05em; }
.narrowcolumn .entry, .widecolumn .entry { line-height: 1.55em; }
.widecolumn { line-height: 1.6em; }

.alt { background-color: #f8f8f8; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
small {	font-family: Gudea, Sans-Serif; font-size: 0.9em; line-height: 1.5em; }

h1, h2, h3 { font-family: Gudea, Sans-Serif; font-weight: normal; }
h1 { font-size: 4em; text-align: center; }
#headerimg .description { font-size: 1.2em; text-align: center; display: none; }

h2 { font-size: 1.8em; }
h2.pagetitle { font-size: 1.8em; }

h3 { font-size: 1.3em; }

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description { text-decoration: none; color: white; }
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited { color: #333; }
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite { text-decoration: none; }
.entry p a:visited { color: #6B5BC9; }

.commentlist li { }
.commentlist li .avatar { float: right; border: 1px solid #eee;	padding: 2px; background: #fff; box-shadow: none; }
.commentlist cite, .commentlist cite a { font-style: normal; font-size: 1.1em; }
.commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; }

.commentmetadata { font-weight: normal; }

#sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, strike { color: #666; }

acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; }
a, h2 a:hover, h3 a:hover { color: #4498CD; text-decoration: none; }
a:hover { color: #4498CD; text-decoration: underline; }

/* End Typography & Colors */

#page { background: #fff; margin:0 auto; padding:0;	width: 100%; position:relative;	}

#header { margin: 0 auto; padding: 0; width: 100%; }
#headerimg { position:relative; margin:1.5% 15% 0 15%; padding-bottom:1.5%; border-bottom:5px solid #175EB5;}
@media only screen and (max-width: 1350px) {
    #headerimg { margin: 1.5% 2% 0 2%; }
}

#headerimg h1 { text-align: left; font-size: 3.3em; float:left; width:200px; }
#headerimg h1 a { display: block; width:200px; background: transparent url(images/ss-logo.png) 0 0 no-repeat; background-size:200px 49px; -webkit-background-size:200px 49px; text-indent: -99999px; height: 49px; }

@media only screen and (max-width: 640px) {
    #headerimg h1 { float:none; width:100%; }
    #headerimg h1 a { margin:0 auto;  }
}



.bar-breaks { height:5px; width:56px; position:absolute; bottom:-5px; left:0; background:url(images/bar-breaks.gif) 0 0 no-repeat; }

.narrowcolumn { float: left; padding: 0 0 20px 0; margin:0 5% 0 15%; width:50%; }
@media only screen and (max-width: 1350px) {
    .narrowcolumn { margin:0 2% 0 2%; width:65%; }
}

@media only screen and (max-width: 640px) {
    .narrowcolumn { margin:0 2% 0 2%; width:96%; }
}

/* unused */
.widecolumn { padding: 10px 40px 0; margin: 5px 0; width: 650px; }
   
.post { padding:25px 0; text-align:left; border-bottom: 1px solid #ddd; overflow:hidden; }
.post .posttitle { margin-bottom: 8px; }
.post .postdate { }
.post .entry { margin-top:8px; }

.post .entry code, .post .entry p { margin:12px 0; }    
.post .entry h3 { margin:24px 0; font-weight:bold; }

.post hr { display: block; }

.post .entry .content-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.post .entry .labelled-content-wrap {
    position: relative;
    margin-left: 10px;
}

.post .entry .labelled-content-wrap .label {
    position: absolute;
    padding: 3px 12px;
    background-color: #175EB5;
    color: #fff; 
    top:0; 
    left:0; 
    margin:0;
}

@media only screen and (max-width: 1600px) {
    .post .entry .content-row {
        flex-direction: column;
    }

    .post .entry .content-row .labelled-content-wrap:not(:first-child) {
        margin-top:10px;
    }
}

.widecolumn .post { margin: 0; }

.narrowcolumn .postmetadata { padding-top: 5px; }
.narrowcolumn .postmetadata.alt { padding:10px; }
.narrowcolumn .postmetadata p { margin:0; }
.widecolumn .postmetadata { margin: 55px 0 0 0; }
.widecolumn .smallattachment { text-align: center; float: left; width: 128px; margin: 5px 5px 5px 0px; }
.widecolumn .attachment { text-align: center; margin: 5px 0px; }
.postmetadata { clear: both; }

.clear { clear: both; }

#footer { background: #f00 url(images/structure_footer.png) 0 0 repeat-x; color:#333; font-size:11px; padding:6px 0 0 0; margin:0; clear: both; height:44px; width:100%	}
#footer p { text-align:left; margin:0 15% 0 15%; }
@media only screen and (max-width: 1350px) {
    #footer p { margin:0 2% 0 2%; }
}

@media only screen and (max-width: 640px) {
    #footer p { margin:0 2% 0 2%; }
}

#footer .copyright { line-height:18px; }
#footer .attribution, #footer .attribution small { font-size:6px; line-height:10px; }
#footer p a { color:#333; }


/*	Begin Headers */
h1 { margin: 0; }
h2 { margin: 0; }

h2.pagetitle { margin-top: 30px; text-align: center; }

h3 { padding: 0; margin: 0; }
h3#comments { padding: 0; margin: 25px auto; }

h4 { margin:18px 0; }

#respond h3 { padding: 0; margin: 25px auto; }
/* End Headers */

/* iframes */
.post .entry iframe { 
    box-shadow: 0 0 6px #bebebe; 
    border-radius: 5px;
    border:none; 
    max-width:calc(100% - 12px); 
}

/* Images */
img { padding: 4px; border: 1px solid #ccc; }

.post .entry img {
    box-shadow: 0 0 6px #bebebe;
    border-radius: 5px;
    padding:0; 
    border:none; 
    max-width:calc(100% - 12px); 
    vertical-align:middle;
}

.post .entry img.no-border-no-shadow { box-shadow:none; }
.post .entry .extra-margins { 
    margin:18px 6px; /* 6px for the box-shadow */
}

.post .entry p.imgbox { margin-right:6px; margin-left:6px; /* to match box-shadow of img */ }

.alignright { float: right; }
.alignleft { float: left }

/* Videos */
.post .entry video.half-width { width:50%; }
.post .entry video.three-quarter-width { width:75%; }

@media only screen and (max-width: 640px) {
    .post .entry video.half-width, .post .entry video.three-quarter-width { width: 100%; }
}

/* Lists */
html>body .entry ul { 	margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; }
html>body .entry li { margin: 7px 0 8px 10px; }
.entry ul li  { background: transparent url(images/bullet4.svg) 0 7px no-repeat; padding: 0 0 0 17px; }
.entry ul li li { background: transparent url(images/bullet4.svg) 0 7px no-repeat; padding: 0 0 0 17px; }

.entry ol {	padding: 0 0 0 35px; margin: 0;	}
.entry ol li { margin: 0; padding: 0; }

.postmetadata ul, .postmetadata li { display: inline; list-style-type: none; list-style-image: none; }

/* Form Elements */
#searchform { float: right; margin:6.5px 4px 0 15%; width: 200px; position: relative; }

@media only screen and (max-width: 640px) {
    #searchform { float:none; margin:1.5% auto; }
}

#searchform > div { margin-right: 8%; position: relative; }
#searchform ::placeholder { font-size:16px; }
#searchform #s { width: 100%; padding: 8px; }
#searchsubmit { display:none; }

.entry form { text-align:center; } /* This is mainly for password protected posts, makes them look better. */

select { width: 130px; }
#commentform p { position:relative; margin:16px 0px; }
#commentform ::placeholder { }
#commentform input:not([type='submit']) { width:50%; padding:8px; box-sizing:border-box; -moz-box-sizing:border-box; }

@media only screen and (max-width: 640px) {
    #commentform input:not([type='submit']) { width:100%; padding:8px; }
}

#commentform textarea { width: 100%; padding:8px; box-sizing:border-box; -moz-box-sizing:border-box; }

#commentform #submit { float: right; }

/* Comments*/
.alt { margin: 0; padding: 10px; }

.commentlist { padding: 0; text-align: left; }
.commentlist li { margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none; }
.commentlist p { margin: 10px 5px 10px 0; }
.nocomments { text-align: center; margin: 0; padding: 0; }
.comment-author { margin:5px 0px; font-weight:bold; color:#175EB5; }
.comment-author a { font-weight:bold; color:#175EB5; }
.comment-author a:hover { text-decoration:none; }
.commentmetadata { margin:5px 0px; display: block; font-size:11px; }

/* Sidebar */
#sidebar { font-family:Gudea, Sans-Serif; font-size:13px; background:#fff; padding:0; margin: 0 15% 0 0; width:15%; float: right; text-align:right; }
@media only screen and (max-width: 1350px) {
    #sidebar { margin:0 2% 0 0; width:25%; }
}

@media only screen and (max-width: 640px) {
    #sidebar { display:none; }
}

#sidebar h2 { margin: 5px 0 0; padding: 0; font-family: 'Lucida Grande', Verdana, Sans-Serif; font-size: 1.2em; }
#sidebar a { text-decoration:none; }
#sidebar img { border-radius:0px; border:none; vertical-align: middle; box-shadow:none; }

#sidebar li.section { margin-top:25px; }

#sidebar ul.shards li { display:block; width:100%; height:28px; line-height:28px; margin-bottom:3px; }
#sidebar ul.shards li a { text-decoration:none; display:block; width:100%; height:100%; border-right:3px solid #ccc; padding-right:5px; margin-left: -8px; }
#sidebar ul.shards li .section-header { color:#175EB5; text-decoration:none; display:block; width:100%; height:100%; padding-right:5px; margin-left: -1px; }
#sidebar ul.shards li a:hover { border-right:3px solid #000; }
#sidebar ul.shards li a .txt { vertical-align:middle; }
#sidebar ul.shards li img { margin-left:4px; }

#sidebar ul.shards li .num { display:inline-block; vertical-align:middle; width:24px; height:16px; font-size:10px; margin-left:4px; background:#D7E9FF; line-height:16px; text-align:center; }

/* Captions */
.aligncenter, div.aligncenter {	display: block; margin-left: auto; margin-right: auto; }

.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px;	margin: 0; }
/* End captions */

/* TODO: re-style */
.download_box {
        position: relative;
        border: 1px solid #ccc;
        width: 200px;
        height: 24px;
        padding: 5px 0px;
        margin: 0 auto;
        text-align: left;
        }

.download_box img {
        border: none;
        padding: 0px;
        }

.download_box a {
        display: block;
        }

.download_box img {
        display: block;
        padding-left: 20px;
        text-align: left;
        }

.download_box .link {
        position: absolute;
        top: 9px;
        right: 28px;
        }

.wp-smiley { border: none; }

.postmetadata-comments { text-align:right; float:right; margin:12px 0; line-height:26px; }
.postmetadata-comments a { background:transparent url(images/comment-bubble.gif) 0 6px no-repeat; display:block; width:18px; height:32px; text-align:center; font-size:10px; text-decoration:none; }

.postmetadata-tags { text-align:left; float:left; width:75%; margin:12px 0 12px -12px; /* -12 left margin to offset text-indent on tags... need to text-indent all tags b/c can't specify text-indent only for ones not on newline' */ line-height:22px; }
.postmetadata-tags .tag { white-space:pre; float:left; }
.postmetadata-tags .tag { text-indent:12px;  }

#respond { text-align:left; }
 
/* 2 column post layout */
.post .entry .two-column { width:100%; }
.post .entry .two-column > :nth-child(1) { width:41%; margin:0 0 0 6%; float:left; box-sizing:border-box; -moz-box-sizing:border-box; }
.post .entry .two-column > :nth-child(2) { width:41%; margin:0 6% 0 6%; float:left; box-sizing:border-box; -moz-box-sizing:border-box; }
.post .entry .two-column > :last-child { clear:both; }

@media only screen and (max-width: 640px) {
    .post .entry .two-column > :nth-child(1) { width:100%; margin:0 2% 0 2%; }
    .post .entry .two-column > :nth-child(2) { width:100%; margin:2% 2% 0 2%; }
}

p.alertbox { background:#eee; padding:5px 18px; margin:12px 50px; border:1px solid #ddd; }

.twitter-share-button { 
    display: inline-block;
    background-image:url('images/tweet.svg');
    background-size: 14px;
    background-repeat: no-repeat;
    background-color: #d7e9ff;
    background-position: 6px center;
    text-indent: 17px;
    font-size: 12px;
    padding: 6px 6px;
    border-radius: 4px;    
    line-height: 12px;
}

.twitter-share-button:hover {
    text-decoration: none;
}