/****************************************************************************** 
 * RohitNafday.net
 * Copyright 2007-2018, Rohit Nafday. All rights reserved.
 *
 * This is free software, distributed under the terms of a BSD-style license.
 * For details, see http://rohitnafday.net/terms/#software
 * 
 * $Id: global.css 104 2018-12-31 23:28:55Z rohit $ 
 *****************************************************************************/

/***************************************************************************** 
 * Desktop / Default
 *****************************************************************************/

html {  
  background-color: #ccc;
  background-image: url('/images/background.png');
  background-repeat: repeat;
  color: #4b4b4b;
  letter-spacing: normal;
  line-height: 1.375em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  word-spacing: normal;
  font-family: 'Cormorant Garamond', serif;
  font-size: 100%;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin: 0;
}

body { 
  background-color: #fff;
  width: 75%;
  max-width: 60em; /* = 960px */
  margin: 1em auto;
  padding: 2em 0em 0em 0em;
  border: thin solid #000;
}

header { 
  background-color: #fff;
  width: 100%;
  height: 9.375em; /* = 150px */
  border-bottom: thin dotted #5d5d5d;
}

#banner-image {
  position: absolute;
  width: 26.041667%; /* = 250 / 960 */
  max-width: 15.625em; /* = 250px */
  top: 3em;
  margin: 0 1.666667%; /* = 16 / 960 */
}

nav { 
  width: 67.291667%; /* = 646 / 250 */
  max-width: 40.375em; /* = 646px */
  text-align: right;
  display: block;
  margin: 0 1.666667%;
  padding: 1em 0;
  font-variant: small-caps;
  float: right;
}

nav ul { 
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li { 
  text-indent: 0em;
  text-align: center;
  margin: 0;
  padding: 0em 0.625em;
  display: inline;
}
 
nav a:link { 
  color: #2f8cba;
  text-decoration: underline;
}

nav a:visited,
nav a:active,
nav a:hover { 
  color: #2f8cba;
  text-decor4ation: none;
}

#breadcrumbs { /* 1em = 12px */ 
  width: 97.5%;
  text-align: right;
  font-size: 0.75em;
  margin-right: 2.5%;
  padding: 0;
}

#breadcrumbs a:link,
#breadcrumbs a:visited {  
  background: transparent;
  color: #2f8cba;
  text-decoration: underline;
}

#breadcrumbs a:active,
#breadcrumbs a:hover { 
  background: transparent;
  color: #2f8cba;
  text-decoration: none;
}

main { 
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: thin dotted #5d5d5d;
  border-bottom: thin dotted #5d5d5d;
}

main a:link,
main a:active { 
  color: #2f8cba;
  text-decoration: underline;
}

main a:visited,
main a:hover { 
  color: #2f8cba;
  text-decoration: none;
}

main aside { 
  width: 25%;
  margin: 0;
  padding: 0;
  float: right;
}

div.small-box { /* 1em = 16px */
  width: 83.333333%; /* = 200 / 240 */
  margin: 2em auto;
  padding: 0;
}

div.small-box p {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

div.small-box img {
  max-width: 100%;
  border: none;
}

div.photo-bar {
  max-width: 100%;
  text-align: center;
  margin: 0;
  padding: 3em 0 0 0;
}

div.photo-bar img {
  max-width: 95%;
  margin: 2.5%;
  padding: 0;
  border: thin solid #5d5d5d;
}

div.photo-bar p { /* 1em = 12px */
  text-align: center;
  font-size: 0.75em;
  margin: 1em;
}

main section { 
  width: 65%; 
  margin: 0 5% 0 5%;
  padding: 0;
}

main section h1 { /* 1em = 48px */
  color: #238866;
  text-align: left;
  line-height: 1.05em;
  font-family: 'Princess Sofia', cursive;
  font-size: 3em;
}

main section h2 { /* 1em = 36px */
  color: #ba516a;
  text-align: left;
  line-height: 1.25em;
  font-family: 'Princess Sofia', cursive;
  font-size: 2.25em;
}

main section h3 { /* 1em = 28px */
  color: #5d5d5d;
  text-align: left;
  line-height: 1.25em;
  font-family: 'Princess Sofia', cursive;
  font-size: 1.75em;
}

main section p { /* 1em = 16px */
  width: 100%;
  text-align: left;
  line-height: 1.375em;
  font-size: 1em;
}

main section ul {
  width: 90%;
}

main section ul li { /* 1em = 16px */
  text-align: left;
  line-height: 1.375em;
  font-size: 1em;
  margin: 1em 0;
}

main section ol li {  /* 1em = 16px */
  text-align: left;
  line-height: 1.375em;
  font-size: 1em;
  margin: 1em 0;
}

main section blockquote { 
  width: 90%;
  margin: 0 auto;
}

main section footer { /* 1em = 16px */
  width: 100%;
  text-align: left;
  color: #4b4b4b;
  font-size: 1em;
  font-style: normal;
  line-height: 1.375em;
  margin: 0;
  padding: 0;
  border-top: thin dotted #5d5d5d;
}

main section footer p { 
  width: 100%;
  margin: 0;
  padding: 1em 0;
}

main footer { /* 1em = 16px */
  width: 100%;
  text-align: left;
  min-height: 3em;
  color: #4b4b4b;
  font-size: 1em;
  font-style: italic;
  margin: 0;
  padding: 0;
  border-top: thin dotted #5d5d5d;
}

main footer p { /* 1em = 14px */
  width: 95%
  text-align: left;
  line-height: 1.5em;
  font-size: 0.875em;
  margin: 0 2.5%;
  padding: 1em 0;
}

aside.portrait {
  width: 32.05%;
  max-width: 50%;
  float: right;
}

aside.portrait img {
  max-width: 100%;
}

aside.portrait p { /* 1em = 12px */
  text-align: center;
  font-size: 0.75em;
  margin: 1em;
}

footer { /* 1em = 14px */
  width: 100%;
  text-align: center;
  line-height: 1.5em;
  font-size: 0.875em;
}

footer a:link,
footer a:visited {
  background: transparent;
  color: #4b4b4b;
  text-decoration: underline;
}

footer a:active, 
footer a:hover { 
  background: transparent;
  color: #4b4b4b;
  text-decoration: none;
}

/******************************************************************************
 * Style
 *****************************************************************************/

pre { /* 1em = 16px */
  font-size: 1em;
  font-style: 'Inconsolata', monospace;
}

code { /* 1em = 16px */
  font-size: 1em;
  font-style: 'Inconsolata', monospace;
}

.strike { 
  text-decoration: line-through;
}

.small-caps { 
  font-variant: small-caps;
}

.underline { 
  text-decoration: underline;
}

span.caption-title { 
  font-weight: bold;
}

.divider {
  text-align: center;
}

/*
 * Mobile Devices
 */

@media screen and (max-width: 640px) {
  body {
    width: 95%;
  }

  aside {
    display: none;
  }
}

@media screen and (min-width: 641px) and (max-width: 800px) {
  body {
    width: 95%;
  }
}