/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html {
  font-size: 100%;
  overflow-y: scroll;
  /*-webkit-text-size-adjust: 100%;*/
  /*-ms-text-size-adjust: 100%;*/
}

body {
  margin: 0;
  font-size: 16px;
}

body, button, input, select, textarea {
  font-family: verdana, geneva, sans-serif;
}

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #447bd3; color: #fff; text-shadow: none; }
::selection { background: #447bd3; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #310E40; }
a:visited { color: #310E40; }
a:hover { color: #731115; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 20px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #999; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: Monaco, Consolas, "Lucida Console", monospace; _font-family: 'courier new', monospace; font-size: 0.75em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; font-size: 1em; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 0.5em 0; padding: 0 0 0 20px; }
dd { margin: 0 0 0 20px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */

legend { border: 0; margin-left: -7px; padding: 0; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */

button, input { line-height: normal; overflow: visible; }

/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */

table button, table input { overflow: auto; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* 
 * Remove inner padding and border in FF3/4: h5bp.com/l 
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/* 
 * 1. Remove default vertical scrollbar in IE6/7/8/9 
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* ==|== primary styles =====================================================
   Author: Rafael de Oleza
   ========================================================================== */

/* Base palette made using Paletton */
/* Palette URL: http://paletton.com/#uid=11g0u0k6Zv716S53-FMbcq-g8mc */
.color-primary-0 { color: #F8ECC2 } /* page background */
.color-primary-1 { color: #FFFDF6 } /* background / lightest */
.color-primary-2 { color: #FFF9E3 } /* background / light */
.color-primary-3 { color: #D4C38A } /* headers / darker */
.color-primary-4 { color: #B19D58 } /* headers / darkest */



/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */


#header {
  max-width: 1240px;
  margin: auto;
  text-align: center;
}

#logo, #logo-2 {
  height: 64px;
  width: 64px;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

#logo a, #logo-2 a {
  background-repeat: no-repeat;
  background-size: 72px 64px;
  height: 64px;
  width: 64px;
  position: absolute;
}

#logo a {
  background-image: url(../gfx/site/2012-06-header-gato_hi.png);
}

#logo-2 a {
  background-image: url(../gfx/site/2012-06-header-monkey_hi.png);
}

#logo a:hover, #logo-2 a:hover {
  opacity: 1;
}


#header .textlogo {
  display: inline-block;
  vertical-align: middle;
}

#header .title {
  font-family: Sunshiney, helvetica, arial, clean, sans-serif;
  font-size: 3.2em;
  margin-left: 0px;
}

#header .subtitle {
  padding-bottom: 8px;
  margin-top: -16px;
  font-size: 0.8em;
}

#header .mainlinks {
  display: inline-block;
  vertical-align: middle;
}

#header .mainlinks a {
  text-decoration: none;
}

#header .mainlinks ul {
  font-family: Gochi Hand;
  font-size: 1.4em;
  list-style-type: none;
  text-align: left;
}

#header .mainlinks li {
  margin: 6px 0;
}

/** blog header overlaps previous div */
#blog_header {
  background-image: url(../gfx/site/gatillo-con-linea.png);
  background-repeat: no-repeat;
  height: 168px;
  max-width: 1200px;
  margin: -36px auto;
  position: relative;
  pointer-events: none;
}

/** align header text at the bottom, with the cat image */
#blog_header h2 {
  position: absolute;
  bottom: 0px;
  font-size: 3em;
  left: 0;
}

.twitter-like {
  display: inline;
}

.fb-like_wrapper {
  position: absolute;
  display: inline;
}

.navigation {
  font-family: Gochi Hand;
  font-size: 40px;
  height: 40px;
  text-align: center;
}
.navigation a.previous {
  padding-left: 24px;
}
.navigation a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.3;
}

.navigation_below {
  text-align: center;
  padding-bottom: 16px;
}

.pagination {
    font-size: 2.6em;
    font-family: Gochi Hand;
    font-weight: bold;
    margin-top: 16px;
    text-align: center;
}

.pagination .page,
.pagination .next,
.pagination .prev {
    padding-right: 24px;
}

.pagination .page a,
.pagination .next a,
.pagination .prev a {
    text-decoration: none;
}

.pagination .current {
  color: #447BD3;
}

ul {
  list-style-type: none;
}

.category-blog ul {
  list-style-type: disc;
}

.category-blog blockquote {
  border-left: solid 2px darkkhaki;
  padding-left: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: antiquewhite;
  font-style: italic;
}

.category-blog table {
  border: solid 2px gray;
  padding: 8px;
  border-collapse: unset;
}

.category-blog td {
  padding-left: 16px;
  padding-right: 16px;
}



body {
/*  background: #351f3e url(../gfx/site/gatillos_bg_stars.png) repeat;
  background-position: -535px -60px;
*/
  /*background-color: #F8ECC2;*/
  background-color: #f0f0f0;
}

#container {
  position: relative;
  max-width: 1200px;
  margin: 0px auto;
  padding: 0px 2px;
/*  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 4px 4px #351f3e;
*/  margin-bottom: 10px;
  padding-top: 8px;
  padding-bottom: 40px;
}

#container header {
  text-align: center;
}

footer {
  max-width: 1220px;
  margin: 0px auto;
  /*background-color: #F8ECC2;*/
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  /*box-shadow: 0px 0px 4px 4px #351f3e;*/
  border-top: 1px solid #999;
  margin-top: 30px;
  padding: 10px 20px;
  color: #666;
  font-family: helvetica, arial, clean, sans-serif;
  font-size: 2em;
  font-style: italic;
}

footer .boilerplate {
  font-size: 0.5em;
}

@font-face {
  font-family: ArtistsAlleyBB_bold;
  src: url('../gfx/site/ArtistsAlleyBB_bold.otf');
}


h1, h2, h3 {
  font-family: Gochi Hand, Sunshiney, helvetica, arial, clean, sans-serif;
  color: #2D1A21;
  margin-bottom: 0px;
  margin-top: 0px;
}

h1 {
  font-weight: 200;
  font-size: 4em;
}

/* for date */
small {
  font-size: 0.6em;
  color: #808080;
  margin-left: 8px;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.7em;
}

/* Make headings inside post content smaller than post titles */
.post .main h2 {
  font-size: 1.5em;
}

.post .main h3 {
  font-size: 1.25em;
}

h1 a, h2 a, h3 a,
h1 a:visited, h2 a:visited, h3 a:visited {
  text-decoration: none;
  color: #2D1A35;
}

h1 small a, h2 small a, h3 small a,
h1 small a:visited, h2 small a:visited, h3 small a:visited {
  text-decoration: none;
  color: #808080;
}

h1 img, h2 img, h3 img {
  vertical-align: bottom;
}

/* Post styles */

.post .comments_link {
  text-align: center;
}

.post.category-blog .comments_link {
  text-align: left;
}

.post_title {
  padding-top: 16px;
  padding-bottom: 16px;
  text-align: center
}

.post_title small {
  margin-left: 12px;
  opacity: 0.6;
}

.category-blog .post_title {
  font-family: palatino;
  text-align: left;
}

.category-blog h1, .category-blog h2, .category-blog h3 {
  padding-top: 24px;
  font-family: palatino;
  text-align: left;
}

.category-blog h4 {
  padding-top: 6px;
  font-family: palatino;
  text-align: left;
}


.category-blog ul, .category-blog ol {
  text-align: left;
  margin-left: 48px;
}


.archive .post .post_title {
  text-align: center;
  font-size: 0.5em;
}

.category-blog .post {
  background-color: #FFF9E3;
  font-family: palatino;
  border-color: #e6d8aa;
}

.category-blog .post .post_title {
  font-size: 1em;
  text-align: left;
}

.category-blog .post .post_title h2 {
  text-align: left;
  font-family: palatino;
}

.category-blog .archive .post .post_title h2 {
  font-size: 2em;
}

.post {
  clear: left;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 20px;
  margin-top: 20px;
  padding-bottom: 12px;
  padding-top: 12px;
  background-color: #fffdf6;
  border: 1px solid #eee5c9;
  border-radius: 6px;
}

.post img,
.post .generated_img_div {
  margin: 10px auto 20px auto;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  padding: 8px;
  width: 90%;
  height: auto;
}

.post .generated_img_div {
  /* in generated divs, comic image is in the background instead of in an img tag */
  background-position: 8px 8px;
}

.post-image {
  overflow-x: auto;
}

.post img.side-image-right {
  width: 20%;
  height: auto;
  display: inline;
  float: right;
}

.post-image img {
  display: block;
}
  
.post .comic_image {
  text-align: center;
  overflow-x: auto;
}

.post .comments_link {
  display: block;
  padding-bottom: 16px;
}

.archive .post .comments_link {
  display: inherit;
}

.post .date {
  float: left;
  padding-right: 8px;
  color: #9a8fb4;
}

.post .post-image-caption {
  text-align: center;
  margin-top: -22px;
  margin-bottom: 12px;
  font-size: 0.9em;
  opacity: 0.6;
}

.post .main {
  margin-bottom: 24px;
  margin-top: 16px;
  line-height: 1.5;
}

#older_posts a {
  text-decoration: none;
}

/* since there is no content under the image, push the next element a bit up
(for the fb, twitter like buttons and comments) */
.archive .comic_image {
  margin-bottom: -16px;
}

/* Post preview styles (list of posts on home page) */
.post_preview {
  clear: left;
}

.post_preview h1 {
  font-size: 1.5em;
  text-indent: 0;
  padding-left: 0;
}

.post_preview h2 {
  font-size: 1.125em;
  font-weight: bold;
}

.post_preview h3 {
  font-size: 1em;
}

.post_preview img {
  margin: 30px auto;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  padding: 8px;
}


/** Code styles **/
code {
  background-color: #F5F5FF;
  padding: 0 2px;
  border: 1px solid #d0d0ee;
}

pre code {
  background-color: transparent;
  border: none;
  padding: 3px 0 3px 15px;
  border-left: 5px solid #d0d0ee;
  color: #444466;
  display: block;
}

/* terminal colors **/
code.bash {
  background-color: #073642;
  color: #839496;
  padding: 8px 15px;
  margin: 20px auto;
  border: 0;
  width: 690px;
  border: 8px solid #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Helper classes */
.fadedlink {
  opacity: 0.4;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.fadedlink:hover {
  opacity: 1;
}

/** Tags in post page **/
nav.post_tags {
  display: inline-block;
}

nav.post_tags li {
  margin-right: 5px;
  margin-top: 20px;
}

nav.post_tags li a {
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  background: #999;
  border-radius: 3px;
  padding: 3px 8px;
}

nav.post_tags li a:visited, nav li a:active {
  color: #fff;
}

nav.post_tags li a:hover {
  background: #666;
  color: #fff;
}

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }



@media only screen and (min-width: 1200px) {
  body {
    font-size: 22px;
  }

  #logo, #logo-2 {
    height: 144px;
    width: 144px;
  }
  
  #logo a, #logo-2 a {
    background-size: 160px 144px;
    height: 144px;
    width: 144px;
  }

  #header .title {
    font-size: 6em;
  }

  #header div {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: -32px;
  }

}

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  h2, h3 { page-break-after: avoid; }
}

/* ********************************************************************** */
/* Basic multi-language support. */
/* ********************************************************************** */

/* By default hide all languages other than english */
.multilingual .es {
  display: none;
}
.multilingual .ca {
  display: none;
}

/* enable english as fallback */
.multilingual .en { 
  display: inline;
}

/* Now, for every language two rules, one to disabled default, one to enable language */
.lang_es .multilingual .es {
  display: inline;
}
.lang_es .multilingual .en {
  display: none
}

.lang_ca .multilingual .ca {
  display: inline;
}
.lang_ca .multilingual .en {
  display: none
}


/* Buttons under the comic */
.language_toolbar {
  display: block;
  text-align: center;
}
.language_toolbar a {
  color: #b19d58;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 1.1em;
  text-decoration: none;

  padding-right: 8px;
  padding-left: 8px;
  padding-top: 2px;
  padding-bottom: 2px;

  border: solid 1px #d6c08b;
  border-radius: 4px;
  display: inline-block;
}
.lang_es .language_toolbar .select_es {
  font-weight: bold;
  background-color: #b19d58;
  color: white;
}
.lang_ca .language_toolbar .select_ca {
  font-weight: bold;
  background-color: #b19d58;
  color: white;
}
.lang_en .language_toolbar .select_en {
  font-weight: bold;
  background-color: #b19d58;
  color: white;
}