/*
Theme Name: snarfed-ryu
Template: ryu
Description: The snarfed.org Ryu child theme.
Author: Ryan Barrett <wordpress-theme@ryanb.org>
License: Public domain
*/

@import url("../ryu/style.css");


/* snarfed.org custom CSS for the WordPress Ryu theme.
 */

body,
button,
input,
select,
textarea {
  font-size: 20px;
  line-height: 1.4;
}

.toppanel {
	display: block;
}

#search-wrapper.toppanel.hide {
	display: none;
}

.page-header {
	padding: 0;
	border: 0;
}

.entry-content, .entry-summary, .entry-meta {
    margin-top: .5em;
}

/*
 * For /category/... and /tag/..., but not front page or individual posts.
 */
body.archive .entry-content,
body.category .entry-content,
body.tag .entry-content,
body.archive .page-header,
body.category .page-header,
body.tag .page-header {
	display: none;
}

body.archive .entry-meta,
body.tag .entry-meta,
body.category .entry-meta {
	float: right;
	width: auto;
	margin-bottom: 0;
	margin-top: 0;
}

body.archive .entry-date,
body.tag .entry-date,
body.category .entry-date {
	border: 0;
}

.entry-date, .entry-modified-date, .comment-meta, .comment-author cite {
    font-size: 12px;
    font-variant: small-caps;
}

body.archive .entry-header,
body.tag .entry-header,
body.category .entry-header {
	display: inline-block;
}

.archive-page {
	display: inline-block;
}

.archive-page.left,
.archive-page.right {
	margin: 0;
}

.archive-page ul {
	list-style: none;
}

/* These are the archive pages on localhost and snarfed */
#post-8833 .entry-meta,
#post-6936 .entry-meta,
#post-9160 .entry-meta {
  display: none;
}

.categories-links,
.comment-edit-link,
#comments-title,
.comments-title,
.comment-notes,
.comment-form-email,
.comment-author .says,
.comment-form-cookies-consent,
.entry-format-badge,
.entry-meta .author,
.entry-meta .p-author,
.entry-meta .comments-link,
.entry-meta .edit-link,
.entry-meta .entry-format,
.entry-meta .tags-links,
img.avatar-default:not(.avatar-semantic-linkbacks),
#infinite-footer,
.logged-in-as,
.ngg-album-compact > p,
.ngg-breadcrumbs,
body.home #nav-below,
body.single #nav-below,
body.page #nav-below,
.no-comments,
#reply-title,
.site-footer,
.site-info,
#triggers-wrapper,
#webmention-form,
.wp-post-image {
	display: none;
}

body,
button,
input,
select,
textarea,
blockquote p,
h1,h2,h3,h4,h5,h6,
.site-description,
.site-info,
.entry-title,
.page-title,
.comments-title,
.comments-area #respond h3,
.comment-status,
.widget-area .widget {
	font-family: Lato, Helvetica, sans-serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	clear: none;
}

body.infinity-end .navigation-paging {
	display: block;
}

blockquote p {
	font-size: 100%;
    margin-bottom: auto;
}

code {
    font-size: 18px;
}

blockquote {
	padding-left: 1em;
	margin-bottom: 1em;
}

.widget-area .widget,
.entry-title,
.page-title,
.comments-title {
	font-size: 24px;
}

.comment-meta,
.comments-title,
.page-title,
.entry-title,
#search-wrapper input[type="search"] {
	font-style: normal;
}

input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea {
	font-size: 100%;
}

.page-title,
.entry-title {
	font-weight: bold;
}

article.error404 .widget_calendar #wp-calendar tbody a,
#infinite-handle span,
mark, ins,
.navigation-main ul ul,
.page-links a,
#search-wrapper input[type="search"],
.toppanel,
.triggers a,
#my-header,
#my-header a {
	background-color: white;
	color: black;
}

#comments,
.hentry,
#masthead,
#page {
	border: 0;
	padding: 0;
	clear: both;
}

#masthead > .wrap {
	padding-top: .5em;
}

#masthead > .wrap,
.header-image {
	max-width: none;
}

.site-logo {
	display: block;
	box-shadow: inset 0 0 1em black;
	-webkit-box-shadow: inset 0 0 1em black;
	-moz-box-shadow: inset 0 0 1em black;
    max-height: 100px;
    overflow: hidden;
    background-image: url(/w/wp-content/uploads/2013/06/copy-cropped-iraq_bar.jpg);
    background-repeat: repeat-x;
}

.header-image {
	display: block;
    margin-bottom: 0;
    /* these are needed to make the box-shadow above appear on top of the img */
	z-index: -1;
	position: relative;
}

.widget-area {
	margin: 0;
	padding: 0;
	width: auto;
	float: none;
}

.widget-area .widget {
	overflow: visible;
}

#my-icons {
    margin-bottom: 0;
    /* vertical-align: bottom; ...doesn't work on floated elements :/ */
}

#my-icons li {
	display: inline;
}

/* This fixes the tap highlight on phones. (It's too far right and wide otherwise). */
#my-icons .screen-reader-text {
	display: none;
}

.genericon,
.genericon:before,
.genericon:after {
    display: inline;
	font-size: 1em;
    vertical-align: baseline;
}

.facebook-link, .google-link, .instagram-link {
	display: none !important;
}

/* Extra icons for home, archives, search, and RSS feed. */
.home-link a:before {
	content: '\f409';
}

/* Hide titles for Aside post format and Indieweb replies, likes, etc */
.format-aside .entry-title,
.category-reply .entry-title,
.category-like .entry-title,
.category-repost .entry-title,
.category-rsvp .entry-title
{
  display: none;
}

/* Dumb reply context text for invisible in-reply-to links. */
.u-in-reply-to:empty:after {
    /* \A is line break. http://stackoverflow.com/a/11750985/186123 */
    content: '\A \A (replying to ' attr(href) ')';
    white-space: pre;
}

.archives-link a:before {
	content: '\f307';
}

.search-trigger a:before {
	content: '\f400';
	margin-top: 0;
}

.feed-link a:before {
	content: '\f413';
}

#search-wrapper input[type="search"] {
	border-color: #888;
}

/* link hover and animation */
.entry-content a,
.entry-summary a,
.comment-content a,
#my-header a {
	border-bottom: 1px solid #ccc !important;
}

.gallery-item a, .tiled-gallery-item a {
	border-bottom: none !important;
}

#my-icons a, a.syn-link {
	color: #666 !important;
	border: none;
}

a img,
a.ngg-album-desc,
.right, .left, .right a, .left a {
	border-bottom: 0 !important;
	text-decoration: underline;
}

a:hover,
.entry-content a:hover,
.entry-summary a:hover,
.entry-meta a:hover,
.entry-title a:hover,
.page-title a:hover,
.comment-content a:hover,
.comment a:hover,
#my-header a:hover,
#my-icons a:hover,
a.syn-link:hover {
	color: #06c !important;
	border-color: #06c !important;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	background-color: #666;
    font: inherit;
}

button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	background-color: #06c;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	border-color: #06c !important;
}

.entry-title,
.entry-title a,
a#my-name,
.page-title a {
	color: #06c;
	font-weight: bold;
	border-bottom: 1px solid white !important;
}

.entry-meta a,
.comment-meta a,
.archive-page a {
	border-bottom: 1px solid white !important;
	vertical-align: top;
}

.archive-page a {
	color: #06c;
}

.entry-title a:hover,
.page-title a:hover,
#my-name:hover {
	border-color: #06c !important;
}

a, a:hover, a img:hover,
#my-name:hover,
button,
input,
#infinite-handle span,
.entry-format-badge,
.entry-format-badge:before {
	-webkit-transition: all .7s ease !important;
	-moz-transition: all .7s ease !important;
	-ms-transition: all .7s ease !important;
	-o-transition: all .7s ease !important;
	transition: all .7s ease !important;
}

.more-link {
	display: block;
	float: right;
	clear: both;
}

.post,
.page {
	margin-bottom: 1em;
}

.entry-content .relsyn, .syn-text {
  display: none !important;
}


/* Comments
 */
#comments {
	padding: 0;
}

#comments h3 {
    color: #808080;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

.mention-list, .favorites h3, .likes h3, .reactions h3, .reposts h3, .rsvps h3, .mentions h3 {
    display: inline;
}

.reactions h3 {
    display: none !important;
}

.comments-area article,
.comment-list li.trackback,
.comment-list li.pingback {
	margin-bottom: 0;
	padding-top: 1em;
}

.comment-list {
	margin-bottom: 2em;
    padding-bottom: 1em;
    margin-left: 0;
}

.comment-list > li, #respond {
    clear: both;
}

.comment-content {
    max-width: 696px;
}

.comment-meta {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 1em;
  margin-right: 1em;
}

.comment-author .fn,
.comment-date > a {
    padding-bottom: .2em;
    padding-top: .2em;
}

.comment-meta > .p-author,
.comment-date,
.comment-content {
    padding-left: 0px;
}

.comment-author .comment-author-avatar,
.comment-author .avatar {
  position: static;
}

.comment-author .avatar {
  width: 48px;
  height: 48px;
  margin-right: 12px;
}

.comment-author .comment-author-avatar {
  width: auto;
  height: auto;
  float: left;
  margin-bottom: 0;
  padding: 0;
}

.bypostauthor > article .comment-author cite:after {
	font-size: 16px;
	content: "\f408";
	position: absolute;
}

.avatar {
    border-radius: 50%;
}

.mention-ellipsis h3 {
    margin-top: 8px;
}

.mention-ellipsis a {
    color: #06c;
    text-decoration: underline;
}

.mention-ellipsis a:hover {
    color: #049;
    text-decoration: none;
}

#respond {
    clear: both;
    padding-top: 3em !important;
}


/* Syndication links plugin.
 */
ul.relsyn {
	display: inline;
	border: 0;
	margin: 0 !important;
	padding: 0 !important;
    margin-left: .3em !important;
}

ul.relsyn li {
	display: inline;
	font-family: "Genericons";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px !important;
	padding-left: .2em !important;
	padding-right: 0 !important;
}

/* Hide syndication links in comments.
 * TODO: lay them out somewhere reasonable and show them.
 */
.comment ul.relsyn {
    display: none;
}

a.syn-link {
	vertical-align: baseline;
}

a.syn-link:hover {
	border-bottom: 1px solid white !important;
}

a.syn-link svg {
    display: none;
}

/* http://genericons.com/ */
a.syn-link::before    { content: '\f475'; } /* default */
a.syn-link[href*="facebook.com"]::before    { content: "\f203"; }
a.syn-link[href*="twitter.com"]::before     { content: "\f202"; }
a.syn-link[href*="plus.google.com"]::before { content: "\f206"; }
a.syn-link[href*="instagram.com"]::before   { content: "\f215"; }


/* These two blocks try to get the margins below the last paragraph or cite
 * looking decent and similar for both comments, which don't have a trailing cite,
 * and webmentions, which do. */
.comment-content p:last-of-type {
    margin-bottom: 0px;
}

.comment-content p:last-child,
.comment-content cite:last-child {
    margin-bottom: .5em;
}

/* The "via Facebook" etc tags from bridgy. */
.comment-content cite,
.via-facebook,
.via {
	display: block;
	width: auto;
	font-size: small;
	color: gray;
}

pre, pre * {
	font-size: small;
}

/* NextGEN Gallery */
.ngg-gallery-thumbnail img,
.ngg-thumbnail img,
.ngg-imagebrowser img {
	margin-left: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.ngg-imagebrowser-nav .page-numbers,
.ngg-imagebrowser-nav .back,
.ngg-imagebrowser-nav .next,
.ngg-navigation .page-numbers,
.ngg-navigation .back,
.ngg-navigation .next {
	border: none !important;
}

.ngg-album-compact, .ngg-album-compactbox, .ngg-albumoverview {
	width: auto !important;
    clear: none !important;
}

/* Gross hack to hide the initial <p> on the /pictures page. */
.post-800 .e-content p {
    display: none;
}

.ngg-album-compact {
	max-width: 111px;
	padding-left: 5px;
	padding-bottom: 1em;
}

.ngg-galleryoverview {
	margin-bottom: 1em;
}

.type-page .ngg-galleryoverview, .tiled-gallery {
	clear: none;
}

/* WordPress Media and galleries */
.gallery, .tiled-gallery,
.gallery .gallery-row, .tiled-gallery .gallery-row,
.gallery-group,
.gallery-item, .tiled-gallery-item {
    overflow: visible;
}

/* used to be a fallback way to make youtube embedded videos kinda responsive,
 * but mainly i think that's just based on the explicit height="216" on iframes.
 * i tried to make them actually responsive * with
 * http://avexdesigns.com/responsive-youtube-embed/ , but didn't work. :/
 */
iframe {
    margin-bottom: .3em;
}


/* media queries
 */
#my-header > br:nth-of-type(2) {
	display: none;
}

#my-icons {
	margin-top: .5em;
}


.right {
	float: right;
	margin-left: 10px;
	text-align: right;
}

.left {
	float: left;
	margin-right: 10px;
	text-align: left;
}

@media screen and (min-width: 312px) {
}

@media screen and (max-width: 455px) {
	.half, .half-sidebyside {
		width: 100%;
	}
	.third, .quarter, .sixth {
		width: 50%;
	}
}

@media screen and (min-width: 456px) {
	.half { width: 50%; }
	.half-sidebyside { width: 45%; }
	.third { width: 32%; }
	.quarter { width: 25%; }
	.sixth { width: 17%; }
}

@media screen and (min-width: 600px) {
	#my-header > br:nth-of-type(2) {
		display: inline;
	}

	.comment-meta {
		padding-left: 0;
	}
}

@media screen and (min-width: 744px) {
	#my-icons {
		margin-top: -1em;
		margin-right: -1em;
		float: right;
	}

    .comment-meta > .p-author,
    .comment-date,
    .comment-content {
      padding-left: 72px;
    }
}

@media screen and (max-width: 887px) {
    #secondary, .comment-list, .wrap, .entry-title  {
        max-width: none !important;
    }

    #secondary, #content {
        margin-left: 1em;
        margin-right: 1em;
    }
}

@media screen and (min-width: 888px) {
	#secondary, .comment-list {
		max-width: 840px !important;
	}

	.entry-content {
		float: none;
	}

	.entry-content, .comment-content, .entry-title, #my-header {
		margin-left: 144px;
	}

	.comment-meta {
		float: left;
		width: 120px;
	}

    .comment-author .comment-author-avatar {
      margin-left: -30px;
    }

    .comment-meta > .p-author,
    .comment-date,
    .comment-content {
		padding-left: 0;
	}

    .entry-meta,
    .comment-meta {
	  text-align: right;
    }
}

@media screen and (min-width: 1032px) {
	#secondary, .comment-list {
		max-width: 984px !important;
	}

	.entry-content, .comment-content, .entry-title, #my-header {
		margin-left: 216px;
	}

	.comment-meta {
		width: 168px;
    }
}

@media screen and (min-width: 1176px) {
	#secondary, .comment-list {
		max-width: 1128px !important;
	}

	.entry-content, .comment-content, .entry-title, #my-header {
		margin-left: 288px;
	}

	.comment-meta {
		width: 240px;
    }

    .comment-author .comment-author-avatar {
      margin-left: 0;
    }
}

@media screen and (min-width: 1320px) {
	#secondary, .comment-list {
		max-width: 1272px !important;
	}
}


/*  other misc
 */
p[fragmention] {
  background-color: #FFFFCC;
  transition: background-color 2s;
}

f, nf {
	font-style: italic;
}

/* Ratings icons for list pages like /beer, /movies, etc.
 * I found the unicode chars on http://panmental.de/symbols/info.htm
 */
good, ok, bad, unfinished {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

good:before {
  content:"✓";  /* stylized check mark */
  color: green;
}

ok:before {
  font-weight: bold;
  content:"~";  /* stylized tilde */
  color: orange;
}

bad:before {
  content:"✗";  /* stylized x */
  color: red;
}

unfinished:before {
  content:"∅";  /* null symbol */
  color: gray;
}

p.half, p.half-sidebyside, p.third, p.quarter, p.sixth {
	margin-bottom: 10px;
}

.shadow,
img[class*="align"], /* images posted via WP media, e.g. from the phone app */
.ngg-gallery-thumbnail img,
.ngg-thumbnail img,
.ngg-imagebrowser img,
.gallery .gallery-item img,
.tiled-gallery .tiled-gallery-item img {
	-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
/* CSS3 */
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
/* For IE 8 */
	-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#666666');
/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#666666');
}

a img.shadow:hover,
a img[class*="align"]:hover,
.ngg-gallery-thumbnail a img:hover,
.ngg-gallery-thumbnail a img:hover,
.ngg-thumbnail a img:hover,
.ngg-imagebrowser a img:hover,
.gallery .gallery-item img:hover,
.tiled-gallery .tiled-gallery-item img:hover {
	-moz-box-shadow: 3px 3px 3px #049;
	-webkit-box-shadow: 3px 3px 3px #049;
/* CSS3 */
	box-shadow: 3px 3px 3px #049;
/* For IE 8 */
	-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#222222');
/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#222222');
}