/*! Compass | MIT Licence | https://github.com/excentris/compass */

body { font-family: 'Vollkorn', serif; color: #46433A; background-color: #F1EED9; }

header, main { padding: 0 20px; }

/*** wrapper div for both header and main ***/
.wrapper { margin-top: 10%; }

/*** anchor tags ***/
a:link, a:visited, a:hover, a:active { color: #CE534D; text-decoration: none; }

a:hover { text-decoration: underline; }

/*** main content list ***/
.main-list-item { font-weight: bold; font-size: 1.2em; margin: 0.8em 0; }

/* override the left margin added by font awesome for the main content list,
since it must be aligned with the content */
.fa-ul.main-list { margin-left: 0; }

/* list icons */
.main-list-item-icon { width: 36px; color: #46433A; }

/*** logo ***/
.logo-container { text-align: center; }

.logo { width: 115px; height: 96px; display: inline-block; background-size: cover; }

/*** author ***/
.author-container h1 { font-size: 2.8em; margin-top: 0; margin-bottom: 0; text-align: center; }

/*** tagline ***/
.tagline-container p { font-size: 1.3em; text-align: center; margin-bottom: 2em; }

/*** definition ***/
dt { font-weight: bold; }

/******/
hr { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, transparent, #46433A, transparent); background-image: -moz-linear-gradient(left, transparent, #46433A, transparent); background-image: -ms-linear-gradient(left, transparent, #46433A, transparent); background-image: -o-linear-gradient(left, transparent, #46433A, transparent); }

/*** footer ***/
footer { position: fixed; bottom: 0; right: 0; height: 20px; }

.poweredby { font-family: "Arial Narrow", Arial; font-size: 0.6em; line-height: 0.6em; padding: 0 5px; }

/*** media queries ***/
/* X-Small devices (phones, 480px and up) */
@media (min-width: 480px) { /* wrapper stays 480px wide past 480px wide and is kept centered */
  .wrapper { width: 480px; margin: 10% auto 0 auto; } }
/* All other devices (768px and up) */
@media (min-width: 800px) { /* past 768px the layout is changed and the wrapper has a fixed width of 680px to accomodate both the header column and the content column */
  .wrapper { width: 780px; }
  /* the header column stays left and has a dynamic width with all contents aligned right */
  header { float: left; width: 46%; text-align: right; }
  .author-container h1, .logo-container, .tagline-container p { text-align: right; }
  main { width: 46%; margin-left: 54%; padding: 0; } }