/*
Theme Name: Grokking Android
Theme URI: http://www.grokkingandroid.org/themes/grokkingandroid
Author: Wolfram Rittmeyer
Author URI: http://www.grokkingandroid.com/
Description: The theme for Grokking Android
Version: 1.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.txt
Tags: white, single-column, responsive, threaded-comments
Text Domain: grokkingandroid
Alternative license: GNU Affero General Public License v3 or later
Alternative license URI: https://www.gnu.org/licenses/agpl-3.0.html
*/
html {
   font-size: 100%;
}
body {
   font-size: 1.25em;
   line-height: 1.5em;
   margin: auto;
   font-family: "Open Sans", sans-serif;
   font-weight: 300;
   font-style: normal;
   text-rendering: optimizeLegibility;
}
/* lato-300 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'),
       url('/fonts/Lato-Light.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* lato-300italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local('Lato Light Italic'), local('Lato-LightItalic'),
       url('/fonts/Lato-LightItalic.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('/fonts/Lato-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'),
       url('/fonts/Lato-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* ubuntu-mono-regular - latin */
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
       url('/fonts/UbuntuMono-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('/fonts/OpenSans-Light.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/fonts/OpenSans-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* roboto-slab-300 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'),
       url('/fonts/RobotoSlab-Light.ttf') format('truetype'), /* Safari, Android, iOS */
}

/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'),
       url('/fonts/RobotoSlab-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

figure.aligncenter {
   margin: auto;
}

img {
   max-width:80%;
   height: auto;
}
code {
   font-family: 'Ubuntu Mono', monospace;
}
.copy {
   margin-left: 3em;
   margin-righ: 3em;
   font-size: 0.75em;
   line-height: 1.5;
}  
.wp-caption {
   min-width: 300px;
   font-size: 0.85em;
   font-style: italic;
   line-height: 1.35;
}
h1 {
   font-size: 1.8em;
   font-family: 'Lato', sans-serif;
   font-weight: 400;
   line-height: 1.3;
}
h1 a {
   text-decoration: none;
   color: black;
}
h1.title-link {
   margin-top: 1.5em;
}
h4, h5 {
   margin-top: 1.5em;
   margin-bottom: 0.5em;
}
h3 {
   font-family: 'Lato', sans-serif;
   font-weight: 400;
   font-size: 1.6em;
   margin: 1.5em 0 0.5em 0;
}
h3 > h4, h4 > h5 {
   margin: 0;
}
h4 {
   font-size: 1.1em;
}
h5 {
   font-size: 0.9em;
}
p {
   margin-bottom: 0.8em;
}
header {
   font-family: 'Roboto Slab', serif;
   padding-top: 1em;
   padding-bottom: 1em;
   margin-top: 0;
   background-color: black;
   color: white;
   /* 

   I made the gradient in the following lines with the help of CSSmatic's generator:

   http://www.cssmatic.com/gradient-generator

   */
   background: rgba(61,61,61,1);
   background: -moz-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
   background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(61,61,61,1)), color-stop(100%, rgba(0,0,0,1)));
   background: -webkit-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
   background: -o-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
   background: -ms-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
   background: linear-gradient(top, rgba(61,61,61,1) 0%, rgba(0,0,0,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#000000', GradientType=0 );
}
.centered-content {
   padding: 0em 2em 0em 2em;
   max-width: 800px;
   margin: auto;
}
header h2 {
   font-size: 1.6em;
   margin: 0;
   padding-bottom: 0;
   font-weight: 700;
}
header h2 a {
   color: white;
   text-decoration: none;
}
header h3 {
   font-size: 0.8em;
   margin: 0em;
   padding-top: 0.1em;
   color: #cccccc;
   font-weight: 700;
}
small {
   font-size: 0.75em;
}
#content {
   margin-bottom: 2em;
}
#content ul {
   margin-bottom: 0.8em;
}
#content li {
   list-style-position: inside;
   padding-left: 1.5em;
}
h1.posttype-header {
   margin-bottom: 1em;
}
footer .clear {
   margin-bottom: 3em;
}
#sidebar {
   margin: auto;
   font-size: 1.2em;
   line-height: 1.5em;
}
#sidebar a:link, #sidebar a:visited {
   text-decoration: none;
   color: white;
   border-bottom: 0;
}
#sidebar li {
   margin: 0;
   padding: 0;
   list-style: none;
}
#sidebar > div {
   float: left;
   width: 33.33333%;
   box-sizing: border-box;
   text-align: left;
   display: inline;
}
.footer-footer {
   margin: 2em 10em 0 10em;
   padding: 2em 0;
   border-top: 1px solid #d1d1d1;
}
#menu-main {
   padding-right: 0.2em;
}
#menu-main li {
   display: inline;
   float: right;
   margin-left: 1em;
   list-style: none;
   font-family: Lato, sans-serif;
   font-weight: 400;
   font-size: 1.2em;
}
#menu-main a {
   color: white;
}
#menu-main li a:link, #search li a:visited {
   color: white;
   text-decoration: none;
}
.page-title {
   font-size: 1.2em;
   margin-bottom: 0.5em;
}
div.excerpt-content {
   padding-bottom: 0.6em;
   border-bottom: 1px dotted #d6d6d6;
}
#blog-meta {
   margin-bottom: 1em;
   font-size: 0.85em;
}
#blog-meta span {
   margin-right: 0.7em;
}
#sidebar div {
   padding: 0 2em 0 0;
}
#sidebar div:nth-child(3n) {
   padding: 0;
}  
footer {
   font-family: 'Lato', sans-serif;
   background: #171717;
   font-size: 0.75em;
   line-height: 1.6em;
   padding: 2em 0 0 0;
   color: white;
}
footer div {
   text-align: center;
   margin: auto;
}
footer a {
   color: white;
   text-decoration: none;
   border-bottom: 1px dotted;
}
footer a:visited {
   color: white;
   text-decoration: none;
   border-bottom: 1px dotted;
}
footer a:link {
   color: white;
   text-decoration: none;
   border-bottom: 1px dotted;
}
#sidebar .widget li {
   line-height: 1.2em;
   margin-bottom: 0.5em;
}
blockquote {
   font-family: 'Lato', sans-serif;
   font-style: italic;
   padding-left: 0.5em;
   border-left: 2px solid #999999;
}
.footer-credits {
   padding-top: 0.5em;
   color: #999;
}
.posttype-header {
   font-size: 1.7em;
   margin-bottom: 2em;
}
.nav-links {
   margin: 2em 0;
   font-size: 1em;
}
.postmeta {
   margin: 2em 0;
}
.paging-previous {
   width: 100%;
   text-align: left;
}
.paging-next {
   width: 100%;
   text-align: right;
}
.nav-links a:link, .nav-links a:visited {
   color: black;
   text-decoration: none;
}
#content .comments {
   font-size: 0.9em;
   line-height: 1.25em;
   margin-top: 3em;
   margin-bottom: 2em;
}
.comment-meta {
   position: relative;
   height: 56px; /* since avatar is 56px */
   margin-bottom: 1em;
}
.comment-author {
   width: 100%;
   height: 50%;
}
.comment-author img {
   float:left;
   border-radius: 50%;
}
.comment-author b {
   position: absolute;
   bottom: 50%;
   left: 70px; /* px since avatar's size is px as well by wordpress default */
}
.comment-intro {
   position: absolute;
   left: 70px;
}
#comments h2 {
   font-size: 1.4em;
}
#comments li {
   margin: 2em 2.4em 0 0;
   padding: 0;
   list-style: none;
}
#comments .children li {
   margin-left: 2em;
}
#content .comments ol {
   list-style: none;
   padding: 0;
}
#content .comments ul {
   list-style: none;
   padding: 0;
}
#content .comments p {
   margin: 0.35em 0;
}
#content .comments h3 {
   font-size: 1.2em;
}
#content .comments .comment-notes {
   margin-bottom: 1.5em;
}
#commentform .form-submit {
   text-align: center;
}
#commentform label {
   font-size: 1.1em;
}
#commentform input, textarea {
   width: 100%;
   padding: 0.5em;
   font-size: 1.3em;
   color: #333;
   border: 1px solid #b0b0b0;
   margin-bottom: 0.7em;
   background-color: #f0f0f0;
}
#commentform input:focus, textarea:focus { 
    background-color: white;
}
#commentform #subscribe-reloaded {
   padding: 0;
   border: 0;
   background-color: white;
}
#commentform #submit {
   background-color: #333;
   padding: 0 1em;
   color: white;
   border: 0;
   font-size: 1.2em;
   padding: 0.5em;
   margin: 1em 0;
   width: 80%;
}
#commentform #submit:hover {
   background-color: #707070;
}
.reply{
   margin: 1.2em 0 3em 0;
}
.reply a {
   border: 1px solid #808080;
   color: black;
   text-decoration: none;
   padding: 0.2em 1em;
}
.clear {
   clear: both;
}
.sourcecode {
   font-size: 0.8em;
}
.line-highlight::before, .line-highlight[data-end]::after {
   display: none;
}

.box {
   margin: 2em;
   padding: 1em;
   background-color: #f7f2f5;
   border: 1px dotted black;
}

.box > br {
   margin: 0;
   height: 0;
   line-height: 0;
   content: " ";
}
div pre .line-highlight {
   background: linear-gradient(left, hsla(24, 0%, 50%, 0.3) 70%, hsla(24, 20%, 50%, 0));
   background: -webkit-linear-gradient(left, hsla(24, 0%, 50%, 0.3) 70%, hsla(24, 20%, 50%, 0));
   background: -moz-linear-gradient(left, hsla(24, 0%, 50%, 0.3) 70%, hsla(24, 20%, 50%, 0));
   background: -ms-linear-gradient(left, hsla(24, 0%, 50%, 0.3) 70%, hsla(24, 20%, 50%, 0));
   background: -o-linear-gradient(left, hsla(24, 0%, 50%, 0.3) 70%, hsla(24, 20%, 50%, 0));
}
.alignleft {
   float: left;
}
.alignleft + br {
   display: none;
}
.wp-caption {
   text-align: center;
   margin: 1em;
   padding: 0.2em;
}
.wp-caption a img {
   padding: 0.4em 0.1em;
}
.wp-caption p {
   margin: 0;
   padding: 0.25em 1em;
   font-size: 0.7em;
   line-height: 1.3em;
}
.syntaxhighlighter code {
   font-size: 0.87em !important; 
}
.sherlock_warning {
   background: #ffff33;
   padding: 1em;
   border: 1px solid black;
   font-size: 0.9em;
   line-height: 1.4em;
   margin-bottom: 2em;
}
.sherlock_warning h3 {
   margin: 0 0 1em 0;
   padding: 0;
}
.author-info {
   padding: 0.7em;
   border-top: 1px dotted #d1d1d1;
   border-bottom: 1px dotted #d1d1d1;
   margin: 2em 0;
   font-size: 0.87em;
   line-height: 1.2em;
   vertical-align: middle;
   min-height: 120px;
   position: relative;
}
.author-avatar {
   float: left;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}
.author-avatar img {
   border-radius: 50%;
}
.author-description {
   margin-left: 100px;
   padding-left: 1.5em;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}
.author-description p {
   margin: 0;
   padding-bottom: 0.5em;
}
#content .related-posts h3 {
   padding: 0;
   margin: 1em 0 0.4em 0;
}
#content .related-posts ul {
   padding: 0;
   margin: 0;
}
#content .related-posts li {
   list-style: none;
   font-size: 0.9em;
   line-height: 1.7em;
   padding-left: 0;
}
.related-posts a {
   color: black;
}
.related-posts a:link {
   text-decoration: none;
   border-bottom: 1px dotted;
}
#search {
   margin-bottom: 4.5em;
   position: relative;
}
#search ul {
   display: inline;
}
#search li {
   display: inline;
   margin-right: 1em;
}
#search input {
   margin-top: 0.5em;
   border: 0;
   border-bottom: 1px solid #d1d1d1;
   padding: 0.2em 0.7em;
   width: 13em;
   font-size: 0.9em;
   font-weight: 300;
   color: black;
   font-family: Lato, sans-serif;
}
div[id^=collapsArch] {
   padding: 0;
   text-align: left;
}
#sidebar ul.collapsing ul {
   padding-left: 1em;
}
#sidebar li.item {
   margin: 0.4em 0;
   line-height: 1.2em;
}
#search button {
   background: white;
   background-image: url('img/ic_search_48px.svg'); 
   background-size: 100% auto;
   border: 0;
   width: 2em;
   height: 2em;
   text-indent: -99999px;
}
#search fieldset {
   position: absolute;
   right: 2em;
   top: 0.5em;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
   margin-bottom: 0.8em; 
}
td, th {
   border: 1px solid black;
   padding: 0.3em;
   font-family: Lato, sans-serif;   
}
td {
   font-weight: 300;
}
th {
   font-weight: 400;
   background-color: #e1e1e1;
}
tr:nth-child(even) {
   background: #f7f7f7;
}
table caption {
   font-weight: bold;
   margin: 0;
   padding: 0.3em;
}
code br {
	display: block; /* makes it have a width */
	content: ""; /* clears default height */
	margin-top: 0; /* change this to whatever height you want it */
}
.textbox {
	margin: 0 1em 1em 1em;
	padding: 1em; 
	color: #333333; 
	background-color: #dddddd; 
}

@media (max-width: 800px) {
   #search {
      margin-bottom: 3.5em;
   }
   #blog-meta {
      margin-bottom: 1em;
   }
   footer .centered-content {
      padding: 0 2em 0 2em;
   }
   .footer-footer {
      margin: 2em 4em 0 4em;
   }
   #sidebar div {
      padding: 0 1em 0 0;
   }
   .author-info {
      position: inherit;
   }
   .author-info .author-avatar {
      float: left;
      position: inherit;
      top: auto;
      -webkit-transform: translateY(0%);
      transform: translateY(0%);
   }
   .author-info .author-description {
      position: inherit;
      top: auto;
      -webkit-transform: translateY(0%);
      transform: translateY(0%);
      margin-left: 0;
      padding-left: 0;
   }
}
@media (max-width: 600px) {
   #blog-meta {
      margin-top: 1em;
      margin-bottom: 1em;
   }
   #blog-meta span {
      display: block;
   }
   #search {
      margin: 0.2em 0 2em 0;
      height: 1em;
   }
   .footer-footer {
      margin: 2em 3em 0 3em;
      padding: 2em 0;
      border-top: 1px solid #d1d1d1;
   }
   footer div {
      padding: 0;
   }
   #sidebar > div {
      float: none;
      box-sizing: border-box;
      text-align: left;
      display: block;
      padding: 0;
      margin: 0 0 1em 0;
      width: 100%;
   }
   #commentform #submit {
      width: 100%;
   }
}
@media (max-width: 400px) {
   .centered-content {
      padding: 0em 1em;
      margin: auto;
   }
   h1 {
      font-size: 1.25em;
   }
   header h3 {
      font-size: 0.7em;
      line-height: 1.4em;
   }
   #blog-meta .meta-comments {
      display: none;
   }
   #blog-meta {
      margin-bottom: 1em;
   }
   #search {
      position: inherit;
   }
   #search fieldset {
      right: auto;
      position: inherit;
   }
   .footer-footer {
      margin: 2em 1em 0 1em;
   }
}
@media print {
   
   body {
      font-size: 0.9em;
   }
   
   pre {
      white-space: pre-wrap !important;
   }
   
   pre[class*="language-"]
   code[class*="language-"] {
      white-space: pre-wrap;
   }
   
   div pre .line-highlight {
      background: none;
   }

   #search {
      display: none;
   }
   header {
      background: none;
      color: black;
   }
   header h3 {
      color: black;
   }
   #blog-meta .meta-comments {
      display: none;
   }
   .centered-content {
      padding: 0 1.5em;
      max-width: auto;
   }
   footer {
      color: black;
   }
   footer a {
      color: black;
   }
   footer a:link {
      color: black;
   }
   .footer-credits {
      color: black;
   }
   .footer-credits a:link {
      color: black;
   }
   #respond {
      display: none;
   }
   #sidebar .widget:nth-child(2n), #sidebar .widget:nth-child(3n) {
      display: none;
   }
   #footnote_references_container td {
   	border: none;
   }
}