@import url(http://fonts.googleapis.com/css?family=Aladin);
body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  line-height: 1.375;
  text-rendering: optimizelegibility;
  color: #0c1a56; }

a {
  color: #003399; }
  a:visited {
    color: #003399; }
  a:hover {
    color: #ff0099; }
  a:active {
    color: #0033cc; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #3366cc;
  clear: left; }

h1 {
  font-size: 2.4em;
  font-family: "Aladin", "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }

h2 {
  font-size: 1.4em;
  color: #ff0099; }

h3 {
  font-size: 1.2em;
  color: #66cc33; }

nav {
  font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-shadow: 4px 4px 3px rgba(60, 60, 60, 0.4);
  color: white; }
  nav a {
    color: white;
    text-decoration: none; }
    nav a:visited {
      color: white; }
    nav a:hover, nav a:active {
      color: #ffcc00; }

footer, .skipnav, section.photos p, .quote-source {
  font-size: 0.8em; }

dl.interview dt, .item-title, .quote-source, .intro {
  font-style: italic; }

dl.booklist dt {
  font-weight: bold; }
  dl.booklist dt a {
    font-weight: normal; }

img, picture {
  max-width: 100%;
  display: block;
  border: 0;
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
  _width: 100%;
  border: 0; }
  img .img-ie, picture .img-ie {
    width: auto; }

body {
  background: #d6deee url(/MargaretMahy/Assets/images/background.jpg) repeat-x scroll top;
  quotes: "\201c" "\201d" "\2018" "\2019"; }

div#wrapper {
  max-width: 100%;
  margin: 0 auto;
  overflow: auto; }

header {
  width: 100%; }

header img {
  display: block; }

nav {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 0;
  float: right; }
  nav ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0; }
  nav li a {
    background: transparent url(/MargaretMahy/Assets/images/nav-bullet-white.png) no-repeat left top;
    padding-left: 30px; }
    nav li a:hover {
      background-image: url(/MargaretMahy/Assets/images/nav-bullet-pink.png); }

main, #main {
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2em 2em 58px;
  background: white url(/MargaretMahy/Assets/images/grass.jpg) repeat-x bottom;
  border-radius: 10px;
  box-shadow: 4px 4px 3px rgba(60, 60, 60, 0.4); }

footer {
  float: left;
  zoom: 1;
  width: 100%;
  margin-top: 2em; }
  footer:before, footer:after {
    content: "";
    display: table; }
  footer:after {
    clear: both; }

/* media queries for BIGGER viewports here so they overwrite those above */
@media (min-width: 600px) {
  main, #main {
    width: 75%; }

  nav {
    width: 20%;
    float: right;
    margin-right: 2%; } }
@media (min-width: 800px) {
  nav {
    font-size: 1.2em; } }
@media (min-width: 1201px) {
  div#wrapper {
    width: 2000px; } }
p.skipnav {
  position: absolute;
  left: -500px; }

blockquote {
  margin: 0 1.375em; }
  blockquote p::before {
    content: open-quote; }
  blockquote p::after {
    content: close-quote; }
  blockquote p:last-of-type::after {
    content: close-quote; }

a img {
  border: none; }

.clear {
  clear: both; }

dd {
  margin-bottom: 1.375em; }

.left {
  float: left;
  clear: left;
  margin: 2px 15px 10px 0;
  box-shadow: 4px 4px 3px rgba(60, 60, 60, 0.4); }

.right {
  float: right;
  clear: right;
  margin: 2px 0 10px 15px;
  box-shadow: 4px 4px 3px rgba(60, 60, 60, 0.4); }

p.quote-source {
  margin: 1.71875em;
    margin-top: -1em; }

section.photos p {
  float: left;
  margin-right: 1.375em;
  width: 46%;
  overflow: hidden; }
  section.photos p:nth-child(odd) {
    clear: left; }
  section.photos p img {
    max-width: 290px;
    max-height: 290px;
    display: block; }

.list-columns-2 {
  width: 100%;
  overflow: auto;
  margin: 0;
  padding: 0 0 0 5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .list-columns-2 li {
    float: left;
    width: 40%;
    margin: 0 5% 0 0;
    padding: 0 0 0 0; }

@media (max-width: 600px) {
  .list-columns-2 li {
    float: none;
    width: auto;
    margin: 0 0 0 5%; } }