/* TOP NAVIGATION */
nav.top {
  color: white;
  margin: 0;
  padding: 1px 10px 2px 10px;
  text-align: right;
  vertical-align: baseline;
}
nav.top a {
  font-size: 12px;
  color: white;
  text-transform: uppercase;
}
nav.top li, nav.top a {
  padding: 0 16px 0 12px;
  border-right: 1px solid gray;
}
nav.top li:first-child, nav.top a:first-child {
  border-right: none;
  float: left;
}
nav.top li:last-child, nav.top a:last-child {
  border-right: none;
}


/* RELATED SITES NAVIGATION */
nav.related {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-left: 4px;
  padding: 0 2px;
}
nav.related a {
  font-size: 13px;
  text-transform: uppercase;
  line-height: 17px;
  color: #535353;
  padding: 0 0 0 12px;
  white-space: nowrap;
}
nav.related a::before {
  padding: 7px;
  content: "■";
  color: rgb(163,149,118);;
}


/* TABLE OF CONTENTS NAVIGATION */
body.static nav.toc {
  display: none;
}
nav.toc {
  border: 1px solid #ccc;
}
nav.toc .toc-image-title {
  vertical-align: middle;
  padding-bottom: 0;
  padding-top: 0;
  line-height: 1em;
  margin: 0;
}
nav.toc .toc-image-title img {
  padding-right: 10px;
}
nav.toc a {
  font-family: Georgia, serif;
}
nav.toc b {
  vertical-align: middle;
}
nav.toc b, #side b {
  font-size: 1.3em;
  line-height: 1em;
}
nav.toc .content {
  border-top: 1px solid #ccc;
  padding: 12px 12px 0px 24px;
}
nav.toc ul {
  padding-left: 0;
}
nav.toc ul>li {
  display: block;
  position: relative;
}
nav.toc ul>li:first-child {
  margin-top: 0;
}
nav.toc ul>li>a::before {
  position: absolute;
  top: 0em;
  left: -1em;
  content: "■";
  color: rgb(163,149,118);;
}
/* .section - nested menu */
nav.toc ul>li.section {
  margin-top: 1.5em;
}
/*nav.toc ul>li.section>a, nav.toc b {
  font-weight: normal;
}
nav.toc ul>li.section {
  margin-top: 12px;
}
nav.toc ul>li.section {
  text-transform: uppercase;
  margin-left: -14px;
  margin-bottom: 0;
}
nav.toc .section a {
  color: rgb(163,149,118);;
}
nav.toc ul>li.section>a::before {
  content: "";
}
*/
/* li.page - page of the article */
nav.toc ul ul>li.page {
  padding-left: 1em;
}
nav.toc ul ul>li>a::before {
  position: absolute;
  top: 0em;
  left: 0em;
  content: "»";
  color: rgb(163,149,118);;
}


/* 3 FEATURED STORIES ON TOP NEXT TO LOGO */
header.featured {
  margin: 0;
  font-size: 11px;
  color: black;
  text-align: left;
}
header.featured a#logo {
  height: 76px;
}
header.featured section {
  float: right;
  padding: 8px 0 4px 20px;
  vertical-align: top;
}
header.featured article {
  float: right;
  display: inline-block;
}
header.featured article b {
  font-weight: bold;
  text-transform: uppercase;
  color: black;
  font-size: 1em;
}
header.featured article img {
  width: 100px;
  height: 60px;
  margin: 4px 8px 4px 0px;
  float: left;
}


/* COVER PAGE */
p.dive a {
  color: rgb(163,149,118);;
  font-family: Georgia, serif;
  font-size: 1.2em;
  font-style: normal;
  font-weight: normal;
  text-transform: uppercase;
}


/* QUOTES AND PULLQUOTES */
q, p.quote {
  font-size: 1.1em;
  line-height: 20px;
  text-transform: uppercase;
  display: block;
  width: 85%;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}
p.quote {
  font-family: "jost", Arial, sans-serif;
}
p.quote .first-letter {
  color: rgb(163,149,118);;
  float: left;
  font-size: 5.5em;
  line-height: 70px;
  padding-right: 8px;
  padding-left: 3px;
}
p.pullquote, aside.pullquote, div.pullquote {
  color: rgb(163,149,118);;
  font-family: "jost", Arial, sans-serif;
  font-size: 1.3em;
  line-height: 1.35em;
  width: 45%;
  padding: 1em 1.1em;
  margin-top: 0.25em;
  /*margin-bottom: 0.6em;*/
  margin-bottom: 1.2em;
  border-top: 5px solid rgb(163,149,118);;
  border-bottom: 5px solid rgb(163,149,118);;
}
.pullquote ul li {
  display: block;
}
#content aside.pullquote.small, #content p.pullquote.small {
  font-size: 14px;
}
#content div.pullquote.wide, #content aside.pullquote.wide {
  width: 100%;
  text-align: center;
}
.pullquote ul {
  padding-top: 0.5em;
}
.pullquote, .pullquote.left {
  float: left;
  margin-right: 1em;
}
.pullquote.right {
  float: right;
  margin-left: 1em;
}
.photoquotewrap {
  display: table;
  width: 100%;
  vertical-align: middle;
}
.photoquotewrap .quotewrap {
  width: 70%;
  display: table-cell;
  margin: 12px;
  vertical-align: middle;
}
.photoquotewrap .quotewrap .pullquote {
  width: 100%;
  padding: 10px;
}
.photoquotewrap figure {
  width: 100%;
  padding: 0 16px 16px 16px;
}
.photoquotewrap figure>img {
  width: 100%;
  max-width: 180px;
}
.pullquote span.author, figcaption span.author, .quote span.author {
  display: block;
  padding-top: 0.6em;
  padding-left: 0.6em;
}


/* SLIDESHOW CONTROL */
#museum-slideshow img {
  cursor: pointer;
}


/* IMAGE STYLES */
figure.panorama {
  padding: 1.2em 0.8em 0.8em 0.8em;
}
figure {
  margin-top: 5px;
  margin-bottom: 10px;
}
figure, figure.wide, figure img {
  width: 100%;
}
#content article figure figcaption {
  margin-top: 1em;
  font-style: italic;
}
#content article figure.left {
  width: 40%;
  float: left;
  padding-right: 1em;
}
#content article figure.left.half {
  width: 50%;
}
#content article figure.left figcaption, #content .caption {
  border-right: 1px solid #ccc;
  padding-right: 1em;
}
#content article figure.right {
  width: 40%;
  float: right;
  padding-left: 1em;
}
#content article figure.right.half {
  width: 50%;
}
#content article figure.right figcaption {
  border-left: 1px solid #ccc;
  padding-left: 1em;
}



/* STORY SPECIFIC STYLES */
.flag-building figure.section, p.section {
  margin-top: 4em;
}


/* FLAG BUILDING - ELEMENTS OF DESIGN */
table.bridgetable td, table.dissemcentertable td, table.tiles td {
  padding: 0.5em;
  vertical-align: top;
  text-align: center;
}
.statline1 {
  display: block;
  font-size: 2em;
  line-height: 1.4em;
  text-transform: uppercase;
}
.statline2 {
  display: block;
  font-size: 1.5em;
  line-height: 1.2em;
  text-transform: uppercase;
}
.statline3 {
  display: block;
  font-size: 1.1em;
  text-transform: uppercase;
}
table.tiles {
  margin-top: 2em;
}

#elements-of-design {
  margin-top: 1.5em;
  position: relative;
}
#bronze {
  position: absolute;
  text-align: right;
  bottom: -8px;
  right: 0px;
}
#mosaic-tiles {
  padding-top: 0.7em;
  padding-bottom: 2.2em;
  position: relative;
}
#chapel-tiles {
  width: 65%;
  margin: auto;
  padding-top: 1em;
}
#hack { /* text in the corner */
  background-color: white;
  position: absolute;
  width: 45%;
  text-transform: uppercase;
  font-size: 17px;
  padding-left: 0.8em;
  bottom: 32px;
  line-height: 1.3em;
}


/* FLAG BUILDING - IDEAL ORGS */
#us-ideal-orgs {
  font-size: 0.9em;
  line-height: 1.6em;
  display: block;
  float: right;
  background: url(/images/201407-flag/obrace.jpg) left no-repeat;
  background-size: contain;
  padding-left: 10px;
  padding-top: 16px;
  padding-bottom: 16px;
  width: 240px;
  height: 450px;
}
#us-ideal-orgs ul {
  padding-right: 0;
  padding-left: 64px;
}
#us-ideal-orgs li {
  display: block;
}
#non-us-ideal-orgs {
  font-size: 0.9em;
  line-height: 1.6em;
  display: block;
  float: left;
  background: url(/images/201407-flag/cbrace.jpg) right no-repeat;
  background-size: contain;
  padding-right: 54px;
  margin-right: 8px;
  padding-top: 16px;
  padding-bottom: 16px;
  width: 232px;
  height: 370px;
  vertical-align: middle;
}
#non-us-ideal-orgs ul {
  padding-left: 0;
}
#non-us-ideal-orgs li {
  display: block;
}


/* FLAG BUILDING - BUILDING FOR THE FUTURE */
#future {
  width: 100%;
  padding: 0 1em;
  vertical-align: top;
}
#future p {
  font-size: 13px;
}
#future img {
  padding: 1em 1em;
}
#future td.left {
  text-align: right;
}
#future td.lb {
  width: 4px;
  border-bottom: 1px solid rgb(163,149,118);;
  border-top: 1px solid rgb(163,149,118);;
}
#future td.rb {
  border-left: 1px solid rgb(163,149,118);;
  border-top: 1px solid rgb(163,149,118);;
  border-bottom: 1px solid rgb(163,149,118);;
  width: 4px;
}
#future .year {
  text-align: center;
  color: rgb(163,149,118);;
  border-bottom: 1px solid rgb(163,149,118);;
  font-size: 30px;
  padding: 0 0 0 0em;
}
#future .medium {
  text-align: center;
  color: rgb(163,149,118);;
  font-size: 30px;
  padding: 0 0em 0 0em;
}
#future .large {
  text-align: center;
  font-size: 36px;
  color: rgb(163,149,118);;
  padding: 0 0em 0 0em;
}
#future .xlarge {
  text-align: center;
  font-size: 48px;
  color: rgb(163,149,118);;
  padding: 0 0em 0 0em;
}
#future div.shadowed {
  padding: 5% 7%;
  margin: 5% 10%;
  // box-shadow: 10px 10px 5px #888888;
  border-right: 2px solid rgb(163,149,118);;
  border-bottom: 2px solid rgb(163,149,118);;
  background-color: #f8f8f8;
}
#future div.left { padding-left: 1em; margin-left: 1em; margin-right: 1em; }
#future div.right { padding-right: 1em; margin-right: 1em; margin-left: 1em; }
#future td { padding-bottom: 1em; }


/* BOTTOM NAVIGATION */
nav.bottom {
  margin: 0;
  // background-color: #275A99;
  background-color: black;
  padding: 6px 3px 3px 3px;
}
nav.bottom ul {
  padding: 6px;
}
nav.bottom li a {
  font-size: 9pt;
  color: white;
  text-transform: uppercase;
}
nav.bottom li {
  text-align: center;
}
nav.bottom li:first-child {
}

p.about {
  color: #888;
}
p.about.title {
  text-transform: uppercase;
}
p.about a {
  color: #44b;
}


/* SUBSCRIBE */
#subscribe {
  font-family: Georgia, serif;
  font-size: 0.8em;
}
#subscribe .subscribe-link b {
  font-size: 1.2em;
}
#subscribe .subscribe-link img {
  padding-right: 6px;
  padding-bottom: 3px;
}
#subscribe b {
  color: rgb(163,149,118);;
  font-weight: normal;
  text-transform: uppercase;
}
#subscribe div {
  padding-top: 1em;
}


/* COVER */
img.cover {
  width: 100%;
  padding-bottom: 1em;
}


/* SEARCH FORM */
#search form input.submit {
  height: 20px;
  width: 20px;
  cursor: pointer;
  text-indent: -9999px;
  border: none;
  background: url(/css/magglass.png) no-repeat left top;
}


/* SIDEBAR */
#side section {
  width: 100%;
}
#side section img {
  width: 100%;
}
#side article {
  padding-top: 0.5em;
}
#side article b {
  color: rgb(163,149,118);;
  font-size: 1.2em;
  font-weight: normal;
}
#side article h1 {
  font-size: 1.6em;
}


/* CONTROLS - PREV/NEXT */
#content .controls {
  width: 100%;
  min-height: 80px;
  display: table;
  margin-top: 24px;
}
#content .controls div {
  width: 30%;
  display: table-cell;
  margin-top: 4px;
  clear: both;
  font-size: 13px;
}
#content .controls div.prev div {
  display: block;
  text-align: left;
  width: 100%;
}
#content .controls div.next div {
  display: block;
  text-align: right;
  width: 100%;
}
.controls .top {
  padding-bottom: 0.25em;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
  color: rgb(163,149,118);;
}
.controls .bottom {
  color: #777;
}
.controls .prev .top::before {
  position: absolute;
  content: "«";
  left: 4px;
}
.controls .next .top::after {
  position: absolute;
  content: "»";
  right: 4px;
}

/* FORMS */
.forms {
  width: 75%;
  margin: 0 auto;
}
.forms label {
  display: block;
  width: 100%;
  min-width: 400px;
}
.forms input {
  display: block;
  width: 100%;
  min-width: 400px;
  margin-bottom: 1em;
}
.forms textarea {
  width: 100%;
  min-width: 400px;
}


/* FOOTER */
.copyright {
  font-family: "jost", Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  padding: 0 4px 2px 4px;
}

/* DEBUG */
.debug {
  position: absolute;
  top: -50px;
  right: 300px;
  width: 400px;
  height: 200px;
  background-color: #e5d2a5;
  color: #a30d10;
  border-radius: 16px;
  padding: 20px;
}

.sharing {
  float: right;
}