* { margin: 0; padding: 0; }
html {
    height: 100%;
    background-image: url(../images/bg_tile.png);
    font-family: 'Averia Serif Libre', cursive;
}

/* dark bg: #2a283d */
/* light bg: #26647d */
/* mid tone: #8d8e92 (grey) */
/* neutral #cfd9a4 */
/* light bg: #f5e9b5 */

a { color: #2a283d; }
a:visited { color: #2a283d; }

#nav {
    height: 6.5em; /* affects a:after margin-left */
    cursor: default;
}

#nav a {
    color: #cfd9a4;
    text-decoration: none;
    display: inline-block;
    font-size: 2.5em;
    margin: 0.25em 0 0 0.25em;
    opacity: 0.35;
    outline: 0;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

#nav a:before {
    font-size: 0.8em;
}

#nav a:after {
    content: '';
    display: block;
    bottom: -0.75em;
    margin-right: 0.15em; /* affects #nav height */
    border-bottom: solid 0em #ffffff;
    border-left: solid 0.5em transparent;
    border-right: solid 0.5em transparent;
    -moz-transition: border-bottom-width .25s ease-in-out;
    -webkit-transition: border-bottom-width .25s ease-in-out;
    -ms-transition: border-bottom-width .25s ease-in-out;
    transition: border-bottom-width .25s ease-in-out;
}
#nav a:hover {
    opacity: 1.0;
}

#nav a:hover span.label {
    opacity: 1.0;
}

#nav a:hover span.label:after {
    opacity: 1.0;
}

#nav a.active {
    opacity: 1.0;
}

#nav a.active:after {
    border-bottom-width: 0.5em;
}

#nav a span.label {
    text-align: center;
    display: block;
    background: #222222;
    color: #ffffff;
    top: -2.75em;
    font-size: 0.3em;
    height: 2.25em;
    line-height: 2.25em;
    opacity: 0;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
    max-width: 4em;
    margin-left: -1em;
    padding: 0.1em 0.5em;
    overflow: hidden;
}

#nav a span.label:after {
    content: '';
    display: block;
    bottom: -0.4em;
    margin-left: -0.6em;
    border-top: solid 0.6em #222222;
    border-left: solid 0.6em transparent;
    border-right: solid 0.6em transparent;
}

/* TODO: hanging indents are a bit off (probbaly due to adding margins to li:before */
/* TODO: put authors on new line but respect hanging indent (lol) */
#acclamation ul { list-style: none; margin-bottom: 10px;}
#acclamation ul li { margin-left: 10px; padding-left: 20px; text-indent: -20px; }
#acclamation .pad { display: inline-block; width: 20px; }
#acclamation ul li:before {font:normal normal normal 16px/1 octicons;content:'\f009'; margin-right: 3px;}
#acclamation .octicon { margin-right: 3px; }
#acclamation a { text-decoration: none; }

img { border: 0; max-width: 100%; }

#wrapper { margin-left: auto; margin-right: auto; }

nav {
  margin: 0px 50px;
  padding: 0px 40px;
}

#footer {
    color: #cfd9a4;
    margin: 10px 50px;
    padding: 0px 40px;
}

.content {
    margin: 0px 50px;
    padding: 20px 40px;
    padding-top: 35px;
    background: #fff;
    border-radius: 8px;
}

.content .fa { padding-right: 5px; }

.entry-content p {
    margin-top: 1em;
}

.panel { width: 100%; }

#footer a, #footer a:visited { color: #cfd9a4; }

/** @group personal settings **/
.responsive_body { margin-bottom: 12px; float: left; width: 50%; }
.responsive_float { float: right; width: 50%; margin-top: -30px;}
/* fancy box around images
.responsive_float_second img {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
}
*/

/* When screen is too thin for both text and image */
@media only screen and (max-width: 740px) {
  .responsive_body { float: none; display: block; width: auto; }
  .responsive_float {
    float: none;
    display: block;
    width: auto;
    margin-top: 0px;
  }
  #wrapper { width: auto; }
  .content { padding: 20px 10px; margin: 0px 5px 0px 5px; }
  p { padding: 0; }
  #nav { padding: 0px; margin: 0px 5px; }
  #footer { padding: 0px; margin: 0px; text-align: center; }
  #post-list { margin-left: 10px; }
  .entry-content { text-align: justify; }
  #nav a span.label { opacity: 1.0; }
}

@media only screen and (min-width: 1600px) {
  html { font-size: 2em; }
  .octicon { font-size: 32px; }
  #acclamation ul li:before { font-size: 32px; }
}

/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }