@import url("https://fonts.googleapis.com/css?family=Cardo:400,400italic,700&subset=latin");

body {
  font-family: 'Cardo', serif;
  font-size: 1.2em;
  margin-top: 3%;
  width: 90%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  text-shadow: 2px 2px 2px grey;
  font-size: 4em;
  margin-bottom: -0.2em;
  text-align: center;
}

h2, h3 {

}

h1:first-letter, h2:first-letter {
  color: #660000;
}

kbd {
  -moz-border-radius: 0.2em;
  -moz-box-shadow: 0.1em 0.2em 0.2em #ddd;
  -moz-linear-gradient(top, #eee, #f9f9f9, #eee);
  -o-linear-gradient(top, #eee, #f9f9f9, #eee);
  -webkit-border-radius: 0.2em;
  -webkit-box-shadow: 0.1em 0.2em 0.2em #ddd;
  -webkit-linear-gradient(top, #eee, #f9f9f9, #eee);
  background-color: #f9f9f9;
  background-image:
  background-image:
  background-image:
  background-image:
  border-radius: 0.2em;
  border: 1px solid #aaa;
  box-shadow: 0.1em 0.2em 0.2em #ddd;
  font-family: inherit;
  font-size: 0.85em;
  font-weight: bolder;
  linear-gradient(to bottom, #eee, #f9f9f9, #eee);
  padding: 0.1em 0.3em;
}

a, cite {
  color: #660000;
}

a {
  font-weight: bolder;
  text-decoration: none;
}

a:hover {
  color: red;
}

#article-list li:after {
  content: " ~ ";
}

blockquote {
  font-family: Georgia, serif;
  font-size: 1.3em;
  font-style: italic;
  width: 800px;
  margin: 0.25em 0;
  padding: 0.25em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
  margin-left: auto;
  margin-right: auto;
}

blockquote:before {
  display: block;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #660000;
}

blockquote cite {
  color: #660000;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:before {
  content: "\2014 \2009";
}

blockquote {
  font-style: italic;
}

img {
  border-width: 0em;
}

img.favicon {
  width: 16px;
  height: 16px;
}

img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.right {
  float: right;
}

.pictures img:after {
  content: attr(alt);
  display: block;
  color: black;
  font-size: 0.7em;
  font-family: monotype;
}

code {
  font-weight: bolder;
}

pre {
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  display: block;
  font-size: 1.2em;
  line-height: 1.3em;
  text-align: left;
  word-wrap: break-word;
  padding: 0.8em;
}

.note {
  padding-left: 2em;
  color: #718541;
}

#breadcrumb {
  position: absolute;
  right: 0;
  top: 0;
}

#article-list li, #music-list li {
  display: inline;
}

#my-tweets {
  margin-left: 2em;
  float: right;
  width: 230px;
}

.tweet ul li {
  display: block;
  padding: 0.8em;
  width: 40em;
  border: thin solid green;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -webkit-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  margin-bottom: 1em;
  background: -webkit-radial-gradient(top, grey, white);
  background: -moz-radial-gradient(top, grey, white);
  background: -o-radial-gradient(top, grey, white);
  background: -ms-radial-gradient(top, grey, white);
}

.red { color: red; }
.blue { color: blue; }
.purple { color: purple; }
.orange { color: orange; }
.grey { color: grey; }


/* ******************************************************************** */
/* Code written with http://www.zurb.com/playground/css3-polaroids as
   a basis.  */

/* By default, we tilt all our images -2 degrees */
.pictures a img {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

img:after {
  content: attr("alt");
}

/* Rotate all even images 2 degrees */
.pictures a:nth-child(even) img {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}

/* Don't rotate every third image, but offset its position */
.pictures a:nth-child(3n) img {
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  transform: none;
  position: relative;
  top: -5px;
}

/* Rotate every fifth image by 5 degrees and offset it */
.pictures a:nth-child(5n) img {
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
  position: relative;
  right: 5px;
}

/* Keep default rotate for every eighth, but offset it */
.pictures a:nth-child(8n) img {
  position: relative;
  top: 8px;
  right: 5px;
}

/* Keep default rotate for every eleventh, but offset it */
.pictures a:nth-child(11n) img {
  position: relative;
  top: 3px;
  left: -5px;
}

/* Scale the images on hover, add transitions for smoothing things
   out, and ensure the hover appears on top */
.pictures a:hover img {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25);
  position: relative;
  z-index: 5;
}

/* Add drop shadows and smooth out the transition (Safari only) */
.pictures a img {
  -webkit-transition: -webkit-transform .15s linear;
  -o-transition: -o-transform .15s linear;
  transition: transform .15s linear;

  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  -o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

/* On hover, darken the shadows a bit */
.pictures a:hover img {
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
/* ******************************************************************** */

td {
  padding: 0.5em;
}

/* ******************************************************************** */
/* Pelican tags */
/* ******************************************************************** */
.tag-0 {
  font-size: 3em;
}
.tag-1 {
  font-size: 2.5em;
}
.tag-2 {
  font-size: 2em;
}
.tag-3 {
  font-size: 1.5em;
}
.tag-4 {
  font-size: 1em;
}
.tag-5 {
  font-size: 0.9em;
}
.tag-6 {
  font-size: 0.8em;
}
.tag-7 {
  font-size: 0.7em;
}
/* ******************************************************************** */

.grid-box {
  float: right;
  width: 100px;
  border: thin solid #660000;
  text-align: center;
  font-weight: bolder;
  padding: 0.5em;
  margin-right: 0.4em;
  margin-bottom: 0.4em;
}

.e-entry-title {
  color: red;
}

#menu {

}