/* @import url(http://fonts.googleapis.com/css?family=Crimson+Text:400,600);
@import url(http://fonts.googleapis.com/css?family=Rosario);
*/

@font-face {
  font-family: Rosario;
  font-style: normal;
  src: url(../fonts/Rosario-Regular.ttf);
}

@font-face {
  font-family: Rosario;
  font-style: italic; 
  src: url(../fonts/Rosario-Italic.ttf);
}

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/CrimsonText-Roman.ttf);
}

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: normal;
  src: url(../fonts/CrimsonText-Italic.ttf);
}

@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: bold;
  src: url(../fonts/CrimsonText-Bold.ttf);
}

@font-face {
  font-family: "Crimson Text";
  font-style: italic;
  font-weight: bold;
  src: url(../fonts/CrimsonText-BoldItalic.ttf);
}

@-o-navigation {
  nav-up: -o-link-rel(index);
  nav-right: -o-link-rel(next);
  nav-down: -o-link-rel(index);
  nav-left: -o-link-rel(previous);
}

html, body { margin: 0; padding: 0; }

html {
  font: 16px/1.4 Crimson Text;
  height: 100%;
}

#paged {
  overflow: -o-paged-x;
  position: absolute; 
  left: 0px; right: 0px; bottom: 0px; top: 40px; 
}

#header {
  position: absolute; 
  left: 0px; right: 0px; top: 0px; height: 40px;
  background: #047;
}  

#header h1 {
  margin:0; padding: 10px;
  font: bold 20px Rosario;
  color: white;
}

#header .date {
  position: absolute;
  top: 16px;
  right: 12px;
  color: white;
  font: bold 12px sans-serif;
}

#footer {
  position: absolute;  
  left: 0px; right: 0px; bottom: 0px; height: 30px;
  text-align: center;
  z-index: 2;
  background: #ddd;
}  


.article .body { columns: 10em; column-fill: auto; }

.article .byline {
  color: red;
  font-size: 0.7em; 
  font-style: normal;
}

.article h1 {
  margin: 0 0 1em;
  font: bold 1.5em Rosario;
}

.article .place {
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 70%;
}

.article .lead {
  font-weight: bold;
  margin: 0 0 1em 0;
}

p {
  margin: 0; 
  widows: 1;
  orphans: 1;
}

p + p {
  text-indent: 1.5em; 
}

.ingress, .ingress + p {
  text-indent: 0em; 
}

.article .head, .article .body { margin: 0 10px }

.article .head { padding-top: 20px }

.article .fig { 
  float: -o-top; 
  background: #eee;
}

.article .fig img { width: 100%; }
.article .fig .legend { padding: 0 1em 0.3em }
.article .second.fig { float: -o-top-next-page; }

.ad {
  float: -o-top-next-page;
  column-span: -o-integer(2);
  height: 100%;
}

.ad img {
  width: 100%; 
}

.ad.portrait { display: block }
.ad.landscape { display: none }


@media (orientation: landscape) {
  .article { columns: 3; column-fill: auto; padding: 0 10px;  }
  .article .body { columns: auto }
  .article .head, .article .body { margin: 0 }
  .article .fig { float: -o-top-corner; column-span: -o-integer(2) }
  .article .second.fig { float: -o-top-corner-next-page; }

  .ad.portrait { display: none }
  .ad.landscape { display: block }
}

@media not -o-paged {
  .ad.portrait { display: none }
  .ad.landscape { display: none }
  .second.fig { display: none }
}