/* Layout */
body
{
  padding: 1em;
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}

header, section, aside, footer { display: block; }

h1, h2, h3 { line-height: 1; }
h1, h2 { font-weight: normal; }
h3 { font-weight: bold; }

h1 { font-size: 3.2em; margin: 0; }
h2 { font-size: 2em; margin: 0.4em 0 0 0; }
h3 { font-size: 1em; margin: 0.4em 0 0 0; }

p { margin: 0 0 0.8em 0; }
a { text-decoration: underline; }

address { font-style: normal; }
#footer p { font-size: 1.4em; line-height: 1.2; margin: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; }

/* Colors */
::selection
{
  background: #ae8bb3;
  text-shadow: none;
}

html { color: #222; }

h1, h2, h3, a, #footer { color: #591341; }

a:hover { color: #222; }
a:focus { outline: 1px dotted; }
a:hover, a:outline { outline: 0; }

/* Fonts */
@font-face
{
  font-family: 'Abadi MT Condensed Light';
  font-style: normal;
  font-weight: 400;
  src: local('Abadi MT Condensed Light'), url(abadi_mt_condensed_light.woff) format('woff');
}

@font-face
{
  font-family: 'A Font with Serifs';
  font-style: normal;
  font-weight: 400;
  src: local('A Font with Serifs'), url(a_font_with_serifs.woff) format('woff');
}

html { font-family: 'Abadi MT Condensed Light', Sans-Serif; }
h1, h2, #footer { font-family: 'A Font with Serifs', Serif; }

#venue h3 { text-transform: uppercase; }

/* Screen */
@media only screen
{
  body { margin: 0 auto; width: 500px; }

  #header
  {
    background: url(Wedding-Website_Title_Eastham-Doucette-Wedding.png);
    color: transparent !important;
    text-indent: -64000px;
    height: 89px;
    width: 449px;
  }

  #footer { text-align: center; }
}

/* Wide Screen */
@media only screen and (min-width: 35em)
{
  html { background: #adcc9b; }

  body
  {
    background: #fff url(Wedding-Website_Graphic_Heart-Strings-Top.png) no-repeat;
    border-bottom: 32px solid #591341;
    margin-bottom: 32px;
    position: relative;
    height: 1476px;
    width: 910px;
    font-size: 0.9em;
  }

  section h2 { padding: 0 0.3em; }

  section > div
  {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    top: 40px;
  }

  section > div, #didyouknow
  {
    padding: 5px 10px;
    border: 2px solid #591341;
  }

  #reception
  {
    color: transparent !important;
    text-indent: -64000px;
  }

  #header,
  #venue,
  #spendtheday,
  #reception,
  #registry,
  #prerequestasong,
  #hotel,
  #didyouknow,
  #footer
  {
    position: absolute;
  }

  #hotel, #spendtheday, #registry { left: 24px; }
  #header, #venue, #didyouknow { right: 24px; }

  #header { top: 72px; }

  #hotel
  {
    height: 396px;
    width: 210px;
    top: 284px;
  }

  #venue
  {
    height: 340px;
    left: 256px;
    top: 340px;
  }

  #spendtheday, #reception, #didyouknow { top: 700px; }

  #spendtheday
  {
    height: 320px;
    width: 430px;
  }

  #fortedlinkimg
  {
    position: absolute;
    bottom: 0px;
    left: 5px;
  }

  #fortedlinktxt
  {
    font-family: 'A Font with Serifs', Serif;
    font-size: 1.9em;
    position: absolute;
    bottom: 0px;
    right: 10px;
  }

  #fortedlinktxt a { text-decoration: none; color: #222; }

  #reception
  {
    background: url(Wedding-Website_Graphic_Reception-Text-Block.png);
    margin-top: 47px;
    height: 245px;
    width: 222px;
    right: 244px;
  }

  #didyouknow
  {
    background: #ae8bb3;
    height: 510px;
    width: 178px;
  }

  #didyouknow h2 { margin-bottom: 0.5em; }

  #didyouknow p
  {
    font-family: 'A Font with Serifs', Serif;
    font-size: 1.7em;
    line-height: 1.2;
  }

  #registry, #prerequestasong { top: 1036px; }

  #registry
  {
    height: 260px;
    width: 254px;
  }

  #prerequestasong
  {
    height: 260px;
    right: 249px;
    left: 300px;
  }

  #prerequestasong h2
  {
    text-align: right;
  }

  #heartstring
  {
    background: url(Wedding-Website_Graphic_Single-Heart-String.png);
    position: absolute;
    height: 86px;
    width: 249px;
    right: 0px;
    top: 1234px;
  }

  #footer
  {
    left: 385px;
    top: 1312px;
  }

  #picture1,
  #picture2
  {
    position: absolute;
    height: 160px;
    top: 180px;
  }

  #picture1
  {
    width: 200px;
    right: 316px;
  }

  #picture2
  {
    width: 280px;
    right: 24px;
  }
}

/* Print */
@media print
{
  *
  {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a[href]:after { content: " (" attr(href) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }

  img { page-break-inside: avoid; max-width: 100% !important; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

  #footer p { display: none; }
}