/*
    global.css serves a normalizer and a default.
    The elements of global.css are intended to serve as a baseline CSS upon which
    all succeeding stylesheets will use.
    Note that global.css will [try] not contain any IDs or classes

    1. Global Resets
    2. Default Fonts
*/
/* ------------------------------------------------------------------------- */
/* Begin Global Resets ----------------------------------------------------- */
html {
  overflow-y: scroll;
}
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
p,
a,
fieldset,
form,
label,
legend,
abbr,
address,
summary,
img,
sub,
dl,
dt,
dd,
ol,
ul,
li,
button,
input,
select,
textarea,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  border: 0 none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body,
div,
fieldset,
form,
label,
legend,
summary,
img,
dl,
dt,
dd,
ol,
ul,
li,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
a {
  -webkit-transition: color 0.25s;
  -moz-transition: color 0.25s;
  -ms-transition: color 0.25s;
  -o-transition: color 0.25s;
  transition: color 0.25s;
}
a:hover,
a:active {
  outline: 0;
}
a:focus {
  outline: thin dotted;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table > caption {
  left: -9999em;
  position: absolute;
}
fieldset {
  border: 0 none;
}
form ol > li {
  display: block;
  margin-left: 0;
}
label {
  cursor: pointer;
}
button,
input,
select,
textarea {
  vertical-align: baseline;
}
input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  -moz-appearance: none;
}
button[disabled],
input[disabled] {
  color: #eee;
  cursor: default;
  pointer-events: none;
}
iframe {
  border: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
a > img,
figure img,
figure > div,
figure > video,
figure > object,
figure > div > video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
figure > figcaption {
  padding: 0.5em 0 0;
}
figure > figcaption h2 {
  font-weight: 400;
}
figure > figcaption img {
  margin: 0;
}
figure > figcaption footer {
  font-size: 0.9em;
}
img {
  max-width: 100%;
}
/* End Global Reset -------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Begin Default Fonts ----------------------------------------------------- */
/* Sets the default font-size to use the device supplied text size as 1em */
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  line-height: 1.6;
}
body {
  font-family: Helvetica, Arial, sans-serif;
}
body > header {
  color: #fff;
}
body > header h2 {
  font-weight: 400;
}
h1 {
  font-size: 2em;
  margin: 0 0 0.67em;
}
h2 {
  font-size: 1.5em;
  margin: 0 0 0.83em;
}
h3 {
  font-size: 1.25em;
  margin: 0 0 1em;
}
h4 {
  font-size: 1.1em;
  margin: 0 0 0.75em;
}
h5 {
  font-size: 0.83em;
  margin: 0 0 1em;
}
h6 {
  font-size: 0.75em;
  margin: 0 0 1em;
}
h1 > a:link,
h2 > a:link,
h3 > a:link,
h4 > a:link,
h5 > a:link,
h1 > a:visited,
h2 > a:visited,
h3 > a:visited,
h4 > a:visited,
h5 > a:visited {
  color: #333;
}
h1,
h2,
h3,
h4,
h5,
p,
li,
p > span {
  color: #333;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover {
  color: #044e8e;
  text-decoration: underline;
}
/* Sets the color of a small span element in any of our paragraph tags.  Current example of such style can be see on
   publication dates on most content objects.  */
/* Sets the link color and behavior */
a:link,
a:link p,
a:hover,
a:hover p,
a:visited,
a:visited p {
  color: #044e8e;
  text-decoration: none;
}
a:hover,
a:hover p {
  text-decoration: underline;
}
p {
  margin-bottom: 1.25em;
}
small {
  color: #999;
  font-size: 0.85em;
}
sub,
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Sets the highlight colors */
::selection,
::-moz-selection {
  background: #ffd800;
  color: #666;
  text-shadow: 0 1px 0 #fff;
}
/* Sets the default font sizes and line heights as its presented as the body of our content types.  The rule of thumb
   is that any block level element should have the same bottom margin as you scan down the page.
   A quick browser relation to these calculations are 14px font, 20px lineheight, with 20px bottom margin */
article p,
article blockquote,
article figure,
article form,
article table,
article pre,
article ul,
article .interactive,
article dl {
  margin-bottom: 1.5em;
}
article ul:last-child,
article ol:last-child,
article dl:last-child,
article p:last-child,
article figcaption > p,
article ul > li p,
article ol > li p,
article dl > dt p,
article ul > li li,
article ol > li li,
article dl > dt li {
  margin-bottom: 0;
}
/* Since we globally set all block levels to operate as blocks and killed these stylings,
   we now need to reset them as its presented as the body of content types.  */
article ul > li,
article ol > li {
  display: list-item;
  list-style-position: outside;
  margin-bottom: 0.5rem;
  margin-left: 2em;
}
/* Header links need to mainter the color of their header, ie dark gray */
/* Resets the subtitle of our articles to using a serif font */
article hgroup > h2 {
  color: #666;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 400;
}
/* End Default Fonts ------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

@font-face {
    font-family: 'NGCDINOnAir-Medium';
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.eot?c1159dca89ad');
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.eot?#iefix') format('embedded-opentype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.woff?c1159dca89ad') format('woff'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.ttf?7b48af962849') format('truetype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.svg#ngconair-reg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NGCDINOnAir-Bold';
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.eot?7b48af962849');
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.eot?#iefix') format('embedded-opentype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.woff?7b48af962849') format('woff'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.ttf?7b48af962849') format('truetype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.svg#ngconair-bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
  font-family: 'Din';
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb.woff?7b48af962849') format('woff');
}
@font-face {
  font-family: 'Din';
  font-weight: bold;
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Bold.woff?7b48af962849') format('woff');
}
@font-face {
  font-family: 'Din';
  font-style: italic;
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Ita.woff?c1159dca89ad') format('woff');
}
@font-face {
  font-family: 'Din';
  font-style: italic;
  font-weight: bold;
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-BoldIta.woff?c1159dca89ad') format('woff');
}

@font-face {
  font-family: 'Din-Light';
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Light.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Light.woff?7b48af962849') format('woff');
}

@font-face {
  font-family: 'Din-Light';
  font-style: italic;
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-LightIta.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-LightIta.woff?c1159dca89ad') format('woff');
}

@font-face {
  font-family: 'Din-Medium';
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Medium.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Medium.woff?c1159dca89ad') format('woff');
}

@font-face {
  font-family: 'Din-Medium';
  font-style: italic;
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-MediumIta.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-MediumIta.woff?7b48af962849') format('woff');
}

@font-face {
  font-family: 'Din-Black';
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Black.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-Black.woff?7b48af962849') format('woff');
}

@font-face {
  font-family: 'Din-Black';
  font-style: italic;
  src: url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-BlackIta.eot?#iefix') format('embedded-opentype'),
       url('//media-channel.nationalgeographic.com/static-media/fonts/DINWeb-BlackIta.woff?c1159dca89ad') format('woff');
}


/*  Font Awesome
    -------------------------------------------------------
    The full suite of pictographic icons, examples, and documentation
    can be found at: http://fortawesome.github.com/Font-Awesome/

    License
    -------------------------------------------------------
    The Font Awesome webfont, CSS, and LESS files are licensed under CC BY 3.0:
    http://creativecommons.org/licenses/by/3.0/ A mention of
    'Font Awesome - http://fortawesome.github.com/Font-Awesome' in human-readable
    source code is considered acceptable attribution (most common on the web).
    If human readable source code is not available to the end user, a mention in
    an 'About' or 'Credits' screen is considered acceptable (most common in desktop
    or mobile software).

*/
@font-face {
    font-family: 'FontAwesome';
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.eot?7b48af962849');
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
         url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.woff?7b48af962849') format('woff'), 
         url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.ttf?c1159dca89ad') format('truetype'), 
         url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*  Font Awesome styles
    ------------------------------------------------------- */
[class^='icon-']:before, [class*=' icon-']:before {
  font-family: "FontAwesome";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}
a [class^="icon-"], a [class*=" icon-"] {
  display: inline-block;
  text-decoration: inherit;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.3333333333333333em;
}
.btn [class^='icon-'], .btn [class*=" icon-"] {
  /* keeps button heights with and without icons the same */

  line-height: .9em;
}
li [class^="icon-"], li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li .icon-large[class^="icon-"], li .icon-large[class*=" icon-"] {
  /* 1.5 increased font size for icon-large * 1.25 width */

  width: 1.875em;
}
li[class^="icon-"], li[class*=" icon-"] {
  margin-left: 0;
  list-style-type: none;
}
li[class^="icon-"]:before, li[class*=" icon-"]:before {
  text-indent: -2em;
  text-align: center;
}
li[class^="icon-"].icon-large:before, li[class*=" icon-"].icon-large:before {
  text-indent: -1.3333333333333333em;
}
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }
.icon-search:before               { content: "\f002"; }
.icon-envelope:before             { content: "\f003"; }
.icon-heart:before                { content: "\f004"; }
.icon-star:before                 { content: "\f005"; }
.icon-star-empty:before           { content: "\f006"; }
.icon-user:before                 { content: "\f007"; }
.icon-film:before                 { content: "\f008"; }
.icon-th-large:before             { content: "\f009"; }
.icon-th:before                   { content: "\f00a"; }
.icon-th-list:before              { content: "\f00b"; }
.icon-ok:before                   { content: "\f00c"; }
.icon-remove:before               { content: "\f00d"; }
.icon-zoom-in:before              { content: "\f00e"; }

.icon-zoom-out:before             { content: "\f010"; }
.icon-off:before                  { content: "\f011"; }
.icon-signal:before               { content: "\f012"; }
.icon-cog:before                  { content: "\f013"; }
.icon-trash:before                { content: "\f014"; }
.icon-home:before                 { content: "\f015"; }
.icon-file:before                 { content: "\f016"; }
.icon-time:before                 { content: "\f017"; }
.icon-road:before                 { content: "\f018"; }
.icon-download-alt:before         { content: "\f019"; }
.icon-download:before             { content: "\f01a"; }
.icon-upload:before               { content: "\f01b"; }
.icon-inbox:before                { content: "\f01c"; }
.icon-play-circle:before          { content: "\f01d"; }
.icon-repeat:before               { content: "\f01e"; }

/* \f020 doesn't work in Safari. all shifted one down */
.icon-refresh:before              { content: "\f021"; }
.icon-list-alt:before             { content: "\f022"; }
.icon-lock:before                 { content: "\f023"; }
.icon-flag:before                 { content: "\f024"; }
.icon-headphones:before           { content: "\f025"; }
.icon-volume-off:before           { content: "\f026"; }
.icon-volume-down:before          { content: "\f027"; }
.icon-volume-up:before            { content: "\f028"; }
.icon-qrcode:before               { content: "\f029"; }
.icon-barcode:before              { content: "\f02a"; }
.icon-tag:before                  { content: "\f02b"; }
.icon-tags:before                 { content: "\f02c"; }
.icon-book:before                 { content: "\f02d"; }
.icon-bookmark:before             { content: "\f02e"; }
.icon-print:before                { content: "\f02f"; }

.icon-camera:before               { content: "\f030"; }
.icon-font:before                 { content: "\f031"; }
.icon-bold:before                 { content: "\f032"; }
.icon-italic:before               { content: "\f033"; }
.icon-text-height:before          { content: "\f034"; }
.icon-text-width:before           { content: "\f035"; }
.icon-align-left:before           { content: "\f036"; }
.icon-align-center:before         { content: "\f037"; }
.icon-align-right:before          { content: "\f038"; }
.icon-align-justify:before        { content: "\f039"; }
.icon-list:before                 { content: "\f03a"; }
.icon-indent-left:before          { content: "\f03b"; }
.icon-indent-right:before         { content: "\f03c"; }
.icon-facetime-video:before       { content: "\f03d"; }
.icon-picture:before              { content: "\f03e"; }

.icon-pencil:before               { content: "\f040"; }
.icon-map-marker:before           { content: "\f041"; }
.icon-adjust:before               { content: "\f042"; }
.icon-tint:before                 { content: "\f043"; }
.icon-edit:before                 { content: "\f044"; }
.icon-share:before                { content: "\f045"; }
.icon-check:before                { content: "\f046"; }
.icon-move:before                 { content: "\f047"; }
.icon-step-backward:before        { content: "\f048"; }
.icon-fast-backward:before        { content: "\f049"; }
.icon-backward:before             { content: "\f04a"; }
.icon-play:before                 { content: "\f04b"; }
.icon-pause:before                { content: "\f04c"; }
.icon-stop:before                 { content: "\f04d"; }
.icon-forward:before              { content: "\f04e"; }

.icon-fast-forward:before         { content: "\f050"; }
.icon-step-forward:before         { content: "\f051"; }
.icon-eject:before                { content: "\f052"; }
.icon-chevron-left:before         { content: "\f053"; }
.icon-chevron-right:before        { content: "\f054"; }
.icon-plus-sign:before            { content: "\f055"; }
.icon-minus-sign:before           { content: "\f056"; }
.icon-remove-sign:before          { content: "\f057"; }
.icon-ok-sign:before              { content: "\f058"; }
.icon-question-sign:before        { content: "\f059"; }
.icon-info-sign:before            { content: "\f05a"; }
.icon-screenshot:before           { content: "\f05b"; }
.icon-remove-circle:before        { content: "\f05c"; }
.icon-ok-circle:before            { content: "\f05d"; }
.icon-ban-circle:before           { content: "\f05e"; }

.icon-arrow-left:before           { content: "\f060"; }
.icon-arrow-right:before          { content: "\f061"; }
.icon-arrow-up:before             { content: "\f062"; }
.icon-arrow-down:before           { content: "\f063"; }
.icon-share-alt:before            { content: "\f064"; }
.icon-resize-full:before          { content: "\f065"; }
.icon-resize-small:before         { content: "\f066"; }
.icon-plus:before                 { content: "\f067"; }
.icon-minus:before                { content: "\f068"; }
.icon-asterisk:before             { content: "\f069"; }
.icon-exclamation-sign:before     { content: "\f06a"; }
.icon-gift:before                 { content: "\f06b"; }
.icon-leaf:before                 { content: "\f06c"; }
.icon-fire:before                 { content: "\f06d"; }
.icon-eye-open:before             { content: "\f06e"; }

.icon-eye-close:before            { content: "\f070"; }
.icon-warning-sign:before         { content: "\f071"; }
.icon-plane:before                { content: "\f072"; }
.icon-calendar:before             { content: "\f073"; }
.icon-random:before               { content: "\f074"; }
.icon-comment:before              { content: "\f075"; }
.icon-magnet:before               { content: "\f076"; }
.icon-chevron-up:before           { content: "\f077"; }
.icon-chevron-down:before         { content: "\f078"; }
.icon-retweet:before              { content: "\f079"; }
.icon-shopping-cart:before        { content: "\f07a"; }
.icon-folder-close:before         { content: "\f07b"; }
.icon-folder-open:before          { content: "\f07c"; }
.icon-resize-vertical:before      { content: "\f07d"; }
.icon-resize-horizontal:before    { content: "\f07e"; }

.icon-bar-chart:before            { content: "\f080"; }
.icon-twitter-sign:before         { content: "\f081"; }
.icon-facebook-sign:before        { content: "\f082"; }
.icon-camera-retro:before         { content: "\f083"; }
.icon-key:before                  { content: "\f084"; }
.icon-cogs:before                 { content: "\f085"; }
.icon-comments:before             { content: "\f086"; }
.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-down:before          { content: "\f088"; }
.icon-star-half:before            { content: "\f089"; }
.icon-heart-empty:before          { content: "\f08a"; }
.icon-signout:before              { content: "\f08b"; }
.icon-linkedin-sign:before        { content: "\f08c"; }
.icon-pushpin:before              { content: "\f08d"; }
.icon-external-link:before        { content: "\f08e"; }

.icon-signin:before               { content: "\f090"; }
.icon-trophy:before               { content: "\f091"; }
.icon-github-sign:before          { content: "\f092"; }
.icon-upload-alt:before           { content: "\f093"; }
.icon-lemon:before                { content: "\f094"; }
.icon-phone:before                { content: "\f095"; }
.icon-check-empty:before          { content: "\f096"; }
.icon-bookmark-empty:before       { content: "\f097"; }
.icon-phone-sign:before           { content: "\f098"; }
.icon-twitter:before              { content: "\f099"; }
.icon-facebook:before             { content: "\f09a"; }
.icon-github:before               { content: "\f09b"; }
.icon-unlock:before               { content: "\f09c"; }
.icon-credit-card:before          { content: "\f09d"; }
.icon-rss:before                  { content: "\f09e"; }

.icon-hdd:before                  { content: "\f0a0"; }
.icon-bullhorn:before             { content: "\f0a1"; }
.icon-bell:before                 { content: "\f0a2"; }
.icon-certificate:before          { content: "\f0a3"; }
.icon-hand-right:before           { content: "\f0a4"; }
.icon-hand-left:before            { content: "\f0a5"; }
.icon-hand-up:before              { content: "\f0a6"; }
.icon-hand-down:before            { content: "\f0a7"; }
.icon-circle-arrow-left:before    { content: "\f0a8"; }
.icon-circle-arrow-right:before   { content: "\f0a9"; }
.icon-circle-arrow-up:before      { content: "\f0aa"; }
.icon-circle-arrow-down:before    { content: "\f0ab"; }
.icon-globe:before                { content: "\f0ac"; }
.icon-wrench:before               { content: "\f0ad"; }
.icon-tasks:before                { content: "\f0ae"; }

.icon-filter:before               { content: "\f0b0"; }
.icon-briefcase:before            { content: "\f0b1"; }
.icon-fullscreen:before           { content: "\f0b2"; }

.icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

.icon-magic:before                { content: "\f0d0"; }
.icon-truck:before                { content: "\f0d1"; }
.icon-pinterest:before            { content: "\f0d2"; }
.icon-pinterest-sign:before       { content: "\f0d3"; }
.icon-google-plus-sign:before     { content: "\f0d4"; }
.icon-google-plus:before          { content: "\f0d5"; }
.icon-money:before                { content: "\f0d6"; }
.icon-caret-down:before           { content: "\f0d7"; }
.icon-caret-up:before             { content: "\f0d8"; }
.icon-caret-left:before           { content: "\f0d9"; }
.icon-caret-right:before          { content: "\f0da"; }
.icon-columns:before              { content: "\f0db"; }
.icon-sort:before                 { content: "\f0dc"; }
.icon-sort-down:before            { content: "\f0dd"; }
.icon-sort-up:before              { content: "\f0de"; }

.icon-envelope-alt:before         { content: "\f0e0"; }
.icon-linkedin:before             { content: "\f0e1"; }
.icon-undo:before                 { content: "\f0e2"; }
.icon-legal:before                { content: "\f0e3"; }
.icon-dashboard:before            { content: "\f0e4"; }
.icon-comment-alt:before          { content: "\f0e5"; }
.icon-comments-alt:before         { content: "\f0e6"; }
.icon-bolt:before                 { content: "\f0e7"; }
.icon-sitemap:before              { content: "\f0e8"; }
.icon-umbrella:before             { content: "\f0e9"; }
.icon-paste:before                { content: "\f0ea"; }

.icon-user-md:before              { content: "\f200"; }


@font-face {
    font-family: 'FontAwesome';
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.eot?7b48af962849');
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
         url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.woff?7b48af962849') format('woff'), 
         url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.ttf?c1159dca89ad') format('truetype'), 
         url('//media-channel.nationalgeographic.com/static-media/fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NGCDINOnAir-Medium';
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.eot?c1159dca89ad');
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.eot?#iefix') format('embedded-opentype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.woff?c1159dca89ad') format('woff'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.ttf?7b48af962849') format('truetype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-reg.svg#ngconair-reg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NGCDINOnAir-Bold';
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.eot?7b48af962849');
    src: url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.eot?#iefix') format('embedded-opentype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.woff?7b48af962849') format('woff'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.ttf?7b48af962849') format('truetype'),
         url('//media-channel.nationalgeographic.com/static-media/fonts/ngconair-bold.svg#ngconair-bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* 
    page_base.css defines basic styles used on the page structure level.
    The elements of page_base.css will appear on every page as part of the wrapper, and will include the header and 
    footer.  It is the first CSS to come after - and build upon - the global.css reset.  

    The point to this sheet is to keep layout-oriented styles out of this.  Or a different way to think of it, are
    styles that are married to an experience, ie Web, Mobile, and Tablet.  With the next stylesheet, 
    layout_(device).css, it could be thought of that global + page_base.css puts us in good shape for a mobile-first
    approach, relying on good semantic markup.

    1. Header Styles
    2. Section Header Styles
    3. Body Content Styles
    4. Footer Styles
    5. Navigation Styles
*/



/* ------------------------------------------------------------------------- */
/* Begin Header Styles ----------------------------------------------------- */

body > header { 
    background-color: #222;
    min-width: 99em; 
    position: relative;
}

#masthead h1 > a {
    background: transparent url('//media-channel.nationalgeographic.com/static-media/images/css_images/ng_logo_hp_125.png?c1159dca89ad') no-repeat 0 0;
    float: left;
    height: 53px;
    text-indent: -9999em;
    width: 270px;
}

#masthead h1 > a:after { content: " \00BB"; }   /* '\00BB' = End Double Guillemet (») */

/* Other Font Sizes used in the header */
#shared-header, #ngs_search, #social { font-size: 1.3em; }                 /* NGS Account Action Links */

/* Social links */
#social { 
    display: inline-block;
    float: right; 
}

#social > li { 
    color: #999;
    float: left;
}

#social > li > a {
    background: url('//media-channel.nationalgeographic.com/static-media/images/css_images/social-sprite.png?c1159dca89ad') no-repeat;
    height: 1.9em;
    line-height: 2em;
    margin-top: 0.18em;
    width: 1.85em;
} 

/* End Header Styles ------------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Section Header Styles --------------------------------------------- */

#section_header {
    font-size: 1.4em;
    line-height: 1.5;
}
#section_header > hgroup {
    margin-bottom: 1em;
}
#section_header > hgroup > h1,
#section_header > hgroup > h2 { margin-bottom: 0; }

#section_header > nav { background-color: #4B4B4B; }
#section_header > nav > h4 { 
    left: -9999em;
    position: absolute;
}
#section_header > nav > ul > li { 
    display: inline; 
    line-height: 2.5;
}
#section_header > nav > ul > li > a {
    border-left: 1px dotted #FFF;
    padding: 0 0.6em 0 0.85em;
}
#section_header > nav > ul > li:first-child > a { border-left: 0 none; }
#section_header > nav > ul > li > a:link,
#section_header > nav > ul > li > a:visited { color: #FFF; }

#section_header > .eps_paginator { background-color: #FFF; }
#section_header > .eps_paginator > h1 { 
    font-size: 1.75em;
    font-weight: 400;
}

/* End Section Header Styles ----------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Body Content Styles ----------------------------------------------- */

/* hides all navigation titles, 
   which are position instead of hidden to be usable by screen readers */
nav > h2,
aside > h2 {
    left: -9999em;
    position: absolute;
}

/* Reduces the default font-size for the main article of the page */
#main_wrapper > article { 
    font-size: 1.4em;
    line-height: 1.5;
}
/* Reduces the font-size for all supplemental information to the article.  Because this is in direct relation to the 
   article, its calculated off of the current #main_wrapper > article's font-size. This is intended. */
#detail_wrapper > .supplemental,
#main_wrapper > article aside,
#main_wrapper > article > section,
#detail_wrapper > section {
    font-size: 0.9em;
}

article hgroup,
article footer { 
    margin-bottom: 1.5em;
}
article hgroup > h1,
article footer > p {
    margin-bottom: 0;
}

#detail_wrapper > .supplemental ol > li, 
#detail_wrapper > .supplemental ul > li,
article aside ol > li, 
article aside ul > li {
    margin-left: 1.25em;
}
#detail_wrapper > .supplemental > figure + figure {
    border-top: 1px solid #D5D5D5;
    margin-top: 2rem;
    padding-top: 2rem;
}
#detail_wrapper > .supplemental > figure figcaption p {
    color: #999;
}
#rail_wrapper > .tabbed_content > ul {
    font-size: 0.8em;
    text-transform: uppercase;
}

article > section {
    border-bottom: 1px solid #D5D5D5;
}
article > aside + aside,
#hub_wrapper > aside + aside {
    border-top: 1px solid #D5D5D5;
    padding: 2rem 0;
}

#detail_wrapper > section {
    margin-bottom: 0;
}
#detail_wrapper > section + aside {
    margin-top: 2rem;
}

#detail_wrapper > aside {
    border-top: 1px solid #D5D5D5;
    padding-top: 2rem;
}
#detail_wrapper > aside:first-child { 
    border-top: 0 none;
    padding-top: 0;
}

/* End Body Content Styles ------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Footer Styles ----------------------------------------------------- */

#main_wrapper > footer > ul { 
    background-color: #4B4B4B;
}
#main_wrapper > footer > ul:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}

#main_wrapper > footer > ul a:link,
#main_wrapper > footer > ul a:visited {
    color: #FFF;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-decoration: none;
}
#main_wrapper > footer > ul a:hover { text-decoration: underline; }

#main_wrapper > footer > ul > li {
    display: block;
    float: left;
    padding: 0 0.25em;
}
#main_wrapper > footer > ul > li + li:before {
    color: #FFF;
    content: "\00BB";   /* '\00BB' = End Double Guillemet (») */
    display: block;
    float: left;
    padding-right: 0.5em;
}

#footer_nav { line-height: 1.3; }
#footer_nav > ul > li { display: inline; }

#footer_nav li.selected a:link,
#footer_nav li.selected a:visited {
    color: #333;
    font-weight: 800;
}
#footer_nav a {
    font-weight: 400;
    padding: 0 1em;
    text-transform: uppercase;
}
#footer_nav a:link,
#footer_nav a:visited {
    color: #666;
    text-decoration: none;
}
#footer_nav a:hover,
#footer_nav li.selected a:hover { color: #000 }

#hot_links_footer { line-height: 1.45; }
#hot_links_footer > ul > li { display: inline; }

#hot_links_footer a {
    border-left: 1px dotted #000;
    padding: 0 0.75em 0 1em;
}
#hot_links_footer li:first-child a { border-left: 0 none; }

footer figure {
    font-size: 1.1em;
    line-height: 1.45;
}

/* Other Font Sizes used in the footer */
#main_wrapper > footer > ul { font-size: 1.2em; }   /* Footer Breadcrumb Bar */
#footer_nav { font-size: 1.3em; }                   /* Footer Primary Nav Links */
#hot_links_footer { font-size: 1.1em; }             /* Footer "Hot Links" Well */

/* End Footer Styles ------------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Navigation Styles ------------------------------------------------- */

#site_nav { font-size: 1.4em; }                     /* Sets the Primary Navigation Menu Items */
#site_nav > ul > li > ul > li { font-size: 0.93em; } /* Sets the Secondary Navigation Menu Items.  Because this is
                                                       considered supplementary information to the Primary Items, it is
                                                       calculated off of their font-size. This is intended. */

.inline-list > li {
    float: left;
}
.inline_list li:first-child {margin-top: 2px; margin-right: 3px;}

/* Hover States and Color Schemes */
#site_nav .sub_nav a { 
    display: block;
}
#site_nav .spotlight_left_menu a {
    display: inline-block;
}
#site_nav .sub_nav a:hover { text-decoration: none; }

/* Shop */
#site_nav > ul > .nav11 > a{ color: #FC0; }
#site_nav > ul > .nav11:hover,
#site_nav > ul > .nav11:hover > a { 
    background-color: #FC0;
    color: #000;
}

/* Subscribe */
#site_nav > ul > .nav10 > a{ color: #FC0; }
#site_nav > ul > .nav10:hover,
#site_nav > ul > .nav10:hover > a { 
    background-color: #3A3A3A;
    color: #DDD;
}

/* Kids */
#site_nav > ul > .nav09:hover,
#site_nav > ul > .nav09:hover > a { 
    background-color: #FFD25D;
    color: #333;
}


/* Television */
#site_nav > ul > .nav08.selected,
#site_nav > ul > .nav08.selected > a,
#site_nav > ul > .nav08:hover,
#site_nav > ul > .nav08:hover > a,
#site_nav > ul > .nav08 > ul { background-color: #06395F; }

#site_nav > ul > .nav08.selected > a,
#site_nav > ul > .nav08:hover > a,
#site_nav > ul > .nav08 > ul > li > a,
#site_nav > ul > .nav08 > ul > li > a:hover { color: #FFF; }
#site_nav > ul > .nav08.selected > ul > li > a:hover { color: #FC0;}

#site_nav > ul > .nav08:hover,
#site_nav > ul > .nav08:hover > a { 
    background-color: #06395F;
    color: #FFF;
}


/* Adventure */
#site_nav > ul > .nav07:hover,
#site_nav > ul > .nav07:hover > a { 
    background-color: #881F00;
    color: #FFF;
}

/* Travel */
#site_nav > ul > .nav06:hover,
#site_nav > ul > .nav06:hover > a { 
    background-color: #82B4D2;
    color: #000;
}

/* Environment */
#site_nav > ul > .nav05:hover,
#site_nav > ul > .nav05:hover > a { 
    background-color: #39433A;
    color: #FFF;
}

/* Animals */
#site_nav > ul > .nav04:hover,
#site_nav > ul > .nav04:hover > a { 
    background-color: #FF9414;
    color: #000;
}

/* Photography */
#site_nav > ul > .nav03:hover,
#site_nav > ul > .nav03:hover > a { 
    background-color: #313B47;
    color: #FFF;
}

/* Video */
#site_nav > ul > .nav02:hover,
#site_nav > ul > .nav02:hover > a { 
    background-color: #3C5D89;
    color: #FFF;
}

/* Home */
#site_nav > ul > .nav01:hover,
#site_nav > ul > .nav01:hover > a { 
    background-color: #FC0;
    color: #000;
}

#site_nav > ul > li > a {
    color: #DDD;
    font-size: 1.17em;
    text-decoration: none; 
}


/* Sub Nav */
.sub_nav {
    background-color: #fff;
    -moz-box-shadow: 0 2px 10px #666;
    -webkit-box-shadow: 0 2px 10px #666;
    box-shadow: 0 2px 10px #666;
    display: none;
    margin-left: -1em;
    position: absolute;
    z-index: 50;
}

.sub_nav:before { /* Controls triangles */
    content: '';
    border: 7px solid transparent;
    border-bottom-color: #fff;
    left: 2em;
    position: absolute;
    top: -14px;
}

.sub_nav > li {
    position: relative; 
    z-index: 200;
}

li:hover .sub_nav {  /* Display subnav/spotlight when main item is hovered */ 
    display: block;
}

li > ul:hover ~ .sub_nav {
    display: none;
}

.secondary_nav { 
    border: 0 solid #eee; /* makes managing border switching below eaiser. */
    float: left;
    border-right-width: 1px;
    min-width: 8em;
}
.sub_nav > .spotlight a,
.sub_nav > .spotlight_left_menu a,
.sub_nav > .spotlight a:link,
.sub_nav > .spotlight_left_menu a:link {
    color: #000;
}
.nav10 .secondary_nav {
    width: 16em;
}
.secondary_nav > li { 
    border-bottom: 1px solid #eee;
    padding-right: 0.8em; 
}
.nav08 .secondary_nav > li {
    padding-right: 0;
}
.secondary_nav > li > a {
    color: #333;
    font-size: 1em;
    padding: .5em .5em .5em 1em;
    white-space: normal;
}
.secondary_nav li:hover,
.spotlight_left_menu li:hover { background-color: #eee; }

.spotlight {
    border-left: 1px solid #EEE;
    border-right: 0 solid #EEE;
    clear:  none;
    display: inline-block;
    float: left;
    margin: 1px 0 0 -1px;
    max-width: 18.4em;
    padding: .7em .5em .5em 1.5em; 
    width: auto;
}
.spotlight h2 {
    color: #000;
    font-size: 1.18em;
    font-weight: 400;
    line-height: 1.3em;
    max-width: 200px;
}
.spotlight h3 { font-size: 1em; }
.spotlight img { 
    border: 1px solid #ccc;
    display: block;
    margin: 0 auto; 
    max-width: 200px;
}

.spotlight figcaption {
    float: left;
    margin-top: 0.7em;
    max-width: 200px;
    padding-bottom: .5em;
}

/* Switiches the direction in which the dropdown extends from the parent nav */
.left.sub_nav { right: 0; }
.left.sub_nav:before {
    left: auto;
    right: 2em;
}

.left .secondary_nav { float: right; }

.left > .spotlight {
    border-left: 0 solid #EEE;
    border-right: 1px solid #EEE;
    float: right;
    margin: 1px -1px 0 0;
    padding-right: 1.3em;
}

.left .secondary_nav { 
    border-left-width: 1px;
    border-right-width: 0;
    margin-right: 1px; 
}

#site_nav > ul > li.nav09:hover, 
#site_nav > ul > li.nav10:hover, 
#site_nav > ul > li.nav11:hover {
    position: relative;
}

/* -------  Sub nav for active nav item */

.nav08 .secondary_nav {
    width: 100%;
    border: none;
}

.nav08 .secondary_nav > li {
    float: left;
    border: none;
}

.nav08 .secondary_nav li > a {
    border-right: 1px solid #ccc;
    line-height: 1.3;
    margin: 9px 0;
    padding: 0 13px;
    white-space: nowrap;
}

.nav08 .featured_shows li > a:hover { 
    background-color: transparent;
    color: #fc0; 
}

.active:hover > .sub_nav,
.active:hover > .secondary_nav {
    display: block;
}
/* -------  End sub nav for active nav item */

/* End Navigation Styles --------------------------------------------------- */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* DMG login override ------------------------------------------------------ */
#shared_header {
    font-size: 16px;
    float: right;
    padding: 0.8em 0 0 0;
}

/* 
    layout.css defines the structure of the page.
    The elements of layout.css will appear on every page as part of the wrapper
    It will also appear as part of the includes for the header and footer
    Layout contains:

    1. Pixel Reliance
    2. Header Layout
    3. Section Header Layout
    4. Body Content Layout
    5. Intra Componenet Layout
    6. Footer Layout
    7. Web Layout-Dependent Styles
    8. Navigation Layout 
*/



/* ------------------------------------------------------------------------- */
/* Begin Pixel Reliance ---------------------------------------------------- */

#leaderboard, 
#masthead,
#section_header,
#main_wrapper > header, 
#main_wrapper > article,
#main_wrapper > footer,
#site_nav > ul,
#site_nav > ul > li > ul {
    width: 990px;
    margin: 0 auto;
}

/* Set's the min-width of the browser, since adds are reliant on having enough space without getting cut off.
   320 comes from the unfortunate 300 pixel side, plus 20 pixels (calculated) of padding on its side. */
#rail_wrapper {
    min-width: 318px;
}
#detail_wrapper > .supplemental {
    min-width: 222px;
}


/* End Pixel Reliance ------------------------------------------------------ */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Header Layout ----------------------------------------------------- */

body > header { padding-top: 0.6em; }

/* Defines the area where the ads should be presented.  They need to be both floated and cleared */
.advertisement {
    overflow: hidden;
}

#leaderboard > .advertisement { 
    height: 90px; 
    float: left;
}
#leaderboard > .advertisement.primary { width: 728px; }
#leaderboard > .advertisement.secondary {
    float: right;
    width: 257px;
}
#leaderboard > .advertisement.interstitial {
    position:fixed;
    top:0;
    left:0;
    width:1px;
    height:1px;
}
#leaderboard > .advertisement.pushdown {
    height: auto; 
    float: none;
}
#leaderboard:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}

/* Sets the masthead logo and missing statement to float to the left */
#masthead > hgroup {
    float: left;
    padding: 1.1em 0 .7em 0;
}
#masthead h1 {
    float: left;
    margin-bottom: 0;
}

/* Clears the above floats */
#masthead:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}

/* Sets the Register/Sign In links to the right of the Search bar  */

#shared-header {  
    font-size: 16px;
    float: right;
    padding: 0.8em 0 0 0;
}

/* Search Box*/
#ngs_search {
    display: inline-block; 
    float: right;
    margin: 0;
    padding: 1.83em 2.3em 0 0;
}

#header_search_input {
    -webkit-appearance: none;
       -moz-appearance: none;
    background: url('//media-channel.nationalgeographic.com/static-media/images/css_images/search-white.png?c1159dca89ad') no-repeat 8px 8px #444;
    border: 0 none;
    border-radius: .3em;
    color: #999;
    font-family: arial,sans-serif;
    font-size: inherit;
    max-width: 10em;
    padding: 0.46em 0.938em 0.375em 2em;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    width: 20em;
    height: 2.2em;

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
       -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
        -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
         -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -webkit-transition: all 0.7s ease 0s;
       -moz-transition: all 0.7s ease 0s;
        -ms-transition: all 0.7s ease 0s;
         -o-transition: all 0.7s ease 0s;
            transition: all 0.7s ease 0s;
}
#header_search_input .placeholder {
    /* Used for browsers who don't support HTML5 Placeholder tag */
    color: #999;
}
#header_search_input:focus {
    background: url('//media-channel.nationalgeographic.com/static-media/images/css_images/search-dark.png?c1159dca89ad') no-repeat 8px 6px #fcfcfc;
    color: #333;
    max-width: 30em;
    outline: none;
    padding: 0.46em 0 0.375em 2em;
}

/* Social Links */
#social { 
    padding: 1.83em 2.3em 0 0; 
}

#social li:first-child {
    margin-top: 4px; 
    margin-right: 10px;
}

#social > li > a {
    display: block;
    -o-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -webkit-transition: all 200ms ease-out;
} 
#social > li > a.facebook {
    background-position: -87px -24px;
    margin-right: 5px;
}
#social > li > a.facebook:hover {
    background-position: -87px 0px;
}
#social > li > a.twitter {
    background-position: -58px -24px;
}
#social > li > a.twitter:hover {
    background-position: -58px 0px;
}

/* Correct font size for Membership Header Alerts */
.banner-wrap {
    font-size: 16px;
}

/* End Header Layout ------------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Section Header Styles --------------------------------------------- */

#section_header {}
#section_header:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}
#section_header > h1,
#section_header > hgroup {
    float: left;
    padding-top: 2rem;
    padding-left: 1.5rem;
    width: 72%;
}
#section_header > .supplemental {
    float: right;
    padding-bottom: 0.5rem;
    text-align: right;
    width: 28%;
}
#section_header > .supplemental > a {
    float: right;
}
#section_header > nav { 
    clear: both; 
    height: 2.5em;
    overflow: hidden;
    margin-top: 0.5rem;
}
#section_header > nav > ul { margin-right: 31rem; }

#section_header > .addthis_toolbox {
    bottom: 0;
    margin-right: 1rem;
    margin-bottom: 0.8rem;
    position: absolute;
    right: 0;
}

#section_header > .eps_paginator {
    padding: 1rem 2rem 0;
    position: relative;
}
#section_header > .eps_paginator:after {
    border-bottom: 1px solid #D5D5D5;
    content: "";
    display: block;
}
#section_header > .eps_paginator nav { 
    display: inline-block;
    margin-right: 1em;
    margin-top: 6px;
    vertical-align: top;
}
#section_header > .eps_paginator > h1 { 
    margin-bottom: 1rem; 
    display: inline-block;
    max-width: 500px;
}
#section_header > .eps_paginator > .addthis_toolbox {
    margin-top: 1rem;
    margin-right: 1rem;
    position: absolute;
    right: 0;
    top: 0.5em;
}

/* End Section Header Styles ----------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Body Content Layout ----------------------------------------------- */

/*      All direct descendents of #main_wrapper are either an aside, or an article at this time.  This pads out and
        clears all them as they are stacked on each other. */
#main_wrapper > article {
    clear: both;
    padding: 2rem 2rem 0;
}

/*      The article as a direct descent of #main_wrapper can contain full width asides, or a floated left 
        #detail_wrapper, paired with a floated right #rail_wrapper (also as an aside). */
#detail_wrapper {
    border-right: 1px solid #D5D5D5;
    clear: both;
    float: left;
    margin-bottom: 2rem;
    padding: 0 2rem 0 0;
    width: 66.45%;
}
#rail_wrapper {
    float: right;
    margin-bottom: 2rem;
    padding: 0 0 0 1.8rem;
    width: 33.55%;
}
#rail_wrapper > h2 + .addthis_toolbox { 
    margin-top: -1rem; 
    margin-right: -1rem;
}

#main_wrapper > article:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}
#hub_wrapper { padding-top: 2rem; }

#hub_wrapper:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}

article > aside + aside,
#hub_wrapper > aside + aside { clear: both; }

/* HGROUP for full width section after article */
.heading_top_full {
    line-height: 1;
    margin-bottom: 0;
    overflow: hidden;
}
.heading_top_full > h3 {
    float: left;
    margin: 0;
    padding: 0 0 0.5em;
}
.heading_top_full > h3:after {
    color: #999;
    content: '|';
    font-weight: lighter;
    margin: 0 0.5em;
}

/*  The first image within the #detail_wrapper should flow out from the padding to increase the display of the figure 
    its nested in. */
#detail_wrapper > figure { margin-top: 1em; }
#detail_wrapper > .gallery figure { margin-bottom: 0; }


/*  The supplemental information of the article is directly from the content object, and not consider related content.
    Therefor, as it exists within said article, it should be styled as supplemental information.  */
#detail_wrapper > .supplemental {
    border-top: 1px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
    border-left: 1px solid #D5D5D5;
    float: right;
    margin: -1rem -2rem 1rem 1rem;
    padding: 2rem;
    width: 36%;
}

/* Livefyre Trending Conversations */
#trending_conversations .livefyre-trending-collection {
    padding: 0 10px;
}

/* End Body Content Layout ------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Intra Component Layout -------------------------------------------- */

.component_part {}
.component_part:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}

.component_part > section { 
    clear: none; 
    padding-top: 0;
    padding-bottom: 0;
}

.component_part_primary {
    border-right: 1px solid #D5D5D5;  
    float: left;
    padding-right: 2rem; 
    width: 75%;
}
.component_part_secondary {
    float: right;
    padding-left: 2rem;
    width: 25%;    
}
.component_part_secondary tbody {
    display: block;
    max-height: 20rem;
    overflow: auto;
}

.dueling_collections > .collection_one,
.dueling_collections > .collection_two {
    float: left;
}

.dueling_collections > .collection_one {
    padding-right: 3%;
}

.dueling_collections.fs > .collection_one,
.dueling_collections.sf > .collection_two,
#detail_wrapper .component_part > .component_part_primary { width: 67.1%; }

.dueling_collections.sf > .collection_one,
.dueling_collections.fs > .collection_two,
#detail_wrapper .component_part > .component_part_secondary { width: 32.9%; }

.dueling_collections.ff > .collection_one,
.dueling_collections.ff > .collection_two,
.component_part_half {
    border-right: 1px solid #D5D5D5;  
    float: left;
    margin-top: -2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    width: 50%;
}

.dueling_collections.ff > .collection_two,
.component_part_half + .component_part_half {
    border-right: 0 none;
    float: right;
    padding-right: 0;
    padding-left: 2rem;
    width: 50%;    
}

.dueling_collections.fs > .collection_two > .thumbs_grid > figure,
.dueling_collections.sf > .collection_one > .thumbs_grid > figure {
    width: 50%;
}


.dueling_collections.fs > .collection_one > .thumbs_grid > figure,
.dueling_collections.sf > .collection_two > .thumbs_grid > figure {
    float: left;
    margin: 0 3% 3% 0;
    width: 31.3%;
}

.dueling_collections.fs > .collection_one .thumbs_grid > figure:nth-of-type(3n+1),
.dueling_collections.sf > .collection_two .thumbs_grid > figure:nth-of-type(3n+1) { clear: both; }

.dueling_collections.fs > .collection_one .thumbs_grid > figure:nth-of-type(3n),
.dueling_collections.sf > .collection_two .thumbs_grid > figure:nth-of-type(3n) { margin-right: 0; }

.dueling_collections.sf > .collection_one > .thumbs_grid > figure,
.dueling_collections.fs > .collection_two > .thumbs_grid > figure,
.dueling_collections.ff > .collection_one > .thumbs_grid > figure,
.dueling_collections.ff > .collection_two > .thumbs_grid > figure {
    float: none;
    width: auto;
}

.dueling_collections.fs > .collection_two > .thumbs_grid > figure.tease_item {
    margin-left: 0;
}

/* End Intra Component Layout ---------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Footer Layout ----------------------------------------------------- */

#main_wrapper > footer { padding: 0 2rem 2rem; }
#main_wrapper > footer:before {
    border-top: 1px solid #D5D5D5;
    clear: both;
    content: "";
    display: block;
}

#main_wrapper > footer > ul {
    height: 3em;
    line-height: 3.1em;
    margin: 1.66em 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#footer_nav,
#hot_links_footer,
#main_wrapper > footer figure {
    border-top: 1px solid #D5D5D5;
    clear: both;
    text-align: center;
}

#footer_nav { padding: 1.5em 0 1.4em; }

#hot_links_footer { padding: 0.7em 0; }
#hot_links_footer > ul { padding: 0.7em 0; }

#main_wrapper > footer figure { padding-top: 1.8em; }
#main_wrapper > footer figure img { margin: 0 auto; }
#main_wrapper > footer figcaption { padding-top: 1em; }
#main_wrapper > footer figcaption > p { margin-bottom: 0; }

/* End Footer Layout ------------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Begin Web Layout-Dependent Styles --------------------------------------- */

body > header {
    background: #222;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222), color-stop(70%, #111), color-stop(100%, #000)); 
    background: -webkit-linear-gradient(top, #222 0%, #111 70%, #000 100%); 
    background:    -moz-linear-gradient(top, #222 0%, #111 70%, #000 100%);
    background:     -ms-linear-gradient(top, #222 0%, #111 70%, #000 100%); 
    background:      -o-linear-gradient(top, #222 0%, #111 70%, #000 100%); 
    background:         linear-gradient(top, #222 0%, #111 70%, #000 100%);
        -webkit-box-shadow: 0 0 5px #222;
           -moz-box-shadow: 0 0 5px #222;
                box-shadow: 0 0 5px #222;

}

/* #main_wrapper is the ID that on the div that contains everything between the header and footer on the root 
   level of <body> on the DOM tree     */
#main_wrapper {
    background: #DDD;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #DDD), color-stop(100%, #FAFAFA));
    background: -webkit-linear-gradient(top, #DDD 0%, #FAFAFA 100%);
    background:    -moz-linear-gradient(top, #DDD 0%, #FAFAFA 100%);
    background:     -ms-linear-gradient(top, #DDD 0%, #FAFAFA 100%);
    background:      -o-linear-gradient(top, #DDD 0%, #FAFAFA 100%);
    background:         linear-gradient(top, #DDD 0%, #FAFAFA 100%);
}

/* All direct descendents of #main_wrapper are only a header, article, or footer at this time. */
#main_wrapper > article,
#main_wrapper > footer {
    background-color: #FFF;
}

#main_wrapper > footer > ul:before {
    border: 2px solid #FFD800;
    content: "";
    display: block;
    float: left;
    height: 1.33em;
    margin: 0.66em 0.35em 0 0.7em;
    width: 0.833em;
}

/* End Web Layout-Dependent Styles ----------------------------------------- */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* Begin Navigation Layout ------------------------------------------------- */

/* Sets up the base styles for the site navigation. */
/* Current set for a max height of 5.4em.  Top Nav = 2.9em, Sec Nav = 2.5em   */
#site_nav ul li ul li * { 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all 0.3s ease 0s;
       -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
         -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}

#site_nav {
    border-top: 1px solid #222;
    clear: both;
}
#site_nav:before {
    border-top: 1px solid #222;
    bottom: 0;
    content: "";
    display: block;
    font-size: inherit;
    height: 2.5em;
    position: absolute;
    width: 100%;
}
#site_nav > ul li {
    list-style: none;
    list-style-type: none;
}
#site_nav > ul {
    height: 5.4em;
    position: relative;
    white-space: normal;
}
#site_nav > ul > li {
    float: left;
    height: 2.9em;
    padding: 0 0.97em;
}

#site_nav > ul > li > a {
    display: block;
    line-height: 2.45em;
    text-align: center;
}
#site_nav > ul > li > ul {
    background-color: #282828;
    height: 2.5em;
    left: 0;
    line-height: 2.5em;
    position: absolute;
    top: 2.9em;
    z-index: 1;
}
#site_nav > ul > .selected > ul {
    display: block;
    z-index: 2;
}

#site_nav > ul > li > ul > li {
    float: left;
}
#site_nav > ul > li > ul > li > a {
    padding: 0 0.92em;
}
#site_nav > ul > li > ul > li > a:hover { text-decoration: none; }
#site_nav > ul > li > ul > li:after {
    border-right: 1px solid #FFF;
    content:"";
}
#site_nav > ul > li > ul > li:last-child:after { display: none; }

/* Sets the width of each navigation item / based on a percentage for hitting 990 wide */
/*#site_nav > ul > .nav01 { width:  7.68%; }
#site_nav > ul > .nav02 { width:  7.88%; }
#site_nav > ul > .nav03 { width: 14.34%; }
#site_nav > ul > .nav04 { width:  9.70%; }
#site_nav > ul > .nav05 { width: 13.74%; }
#site_nav > ul > .nav06 { width:  9.09%; }
#site_nav > ul > .nav07 { width: 12.12%; }
#site_nav > ul > .nav08 { width: 11.11%; }
#site_nav > ul > .nav09 { width:  6.87%; }
#site_nav > ul > .nav10 { width:  7.47%; }*/

#site_nav .nav_panel {
    background-color: #023154;
    background-color: rgba(2, 49, 84, 1);
    -webkit-box-shadow: 0 1px 1em #000;
       -moz-box-shadow: 0 1px 1em #000;
            box-shadow: 0 1px 1em #000;
    color: #FFF;
    left: 0;
    opacity: 0;
    padding: 1rem;
    position: absolute;
    right: 0;
    -webkit-transition: all .25s;
       -moz-transition: all .25s;
        -ms-transition: all .25s;
         -o-transition: all .25s;
            transition: all .25s;
    top: 5.4em; /* offset same as height of #site_nav > ul */
    white-space: normal;
    z-index: -1;
}
#site_nav li:hover .nav_panel {
    display: block;
    opacity: 1;
    z-index: 1000;
}
#site_nav .nav_panel h2 {
    color: #FFF;
    margin-bottom: 0;
}
#site_nav .nav_panel h1 {
    font-size: 2rem;
    font-weight: normal;
    color: #FFF;
}
#site_nav .nav_panel h1 object,
#site_nav .nav_panel h1 img {
    display: block;
    height: 4rem;
}
#site_nav .nav_panel > nav {
    background-color: #012b4b;
    background-color: rgba(0, 0, 0, .1);
}
#site_nav .nav_panel > nav > ul {
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    font-size: 0.9em;
    margin-bottom: 0.5em;
    padding: 0.75em 0;
}
#site_nav .nav_panel a { color: #FFF; }

#site_nav .nav_panel > nav {
    float: left;
    margin-left: 1%;
    padding: 1.5rem;
    width: 32.1%;
}

/* Center triangles within the different sections */
nav .nav02 .sub_nav:before { left: 2em; }
nav .nav03 .sub_nav:before,
nav .nav05 .sub_nav:before { left: 3.7em; }
nav .nav04 .sub_nav:before { left: 2.6em; }
nav .nav06 .sub_nav:before { left: 2.2em; }
nav .nav07 .sub_nav:before { left: 3em; }
nav .nav08 .sub_nav:before { left: 48.1em; }
.nav09 > .left.sub_nav:before { right: 1.7em; }
.nav10 > .left.sub_nav:before { right: 4.2em; }
.nav11 > .left.sub_nav:before { right: 1.85em; }

/* Spotlights */
.sub_nav {
    float: right;
    min-height: 18em;
    z-index: 200;
}

/* Subnav width adjustments - make more dynamic in future updates */
nav .nav02 .sub_nav { width: 25.6em; }
nav .nav03 .sub_nav { width: 28.5em; }
nav .nav04 .sub_nav { width: 29em; }
nav .nav05 .sub_nav { width: 28.4em; }
nav .nav06 .sub_nav { width: 28.2em; }
nav .nav07 .sub_nav { width: 29.3em; }
nav .nav08 .sub_nav { width: 52.3em; }
.nav09 > .left.sub_nav { width: 26.3em; }
.nav10 > .left.sub_nav { width: 34em; }
.nav11 > .left.sub_nav { width: 62.8em; }

.spotlight .caption_overlay > figcaption {
    background-color: transparent;
    bottom: -2em;
    padding: 0;
}

/* Television-specific CSS */
.nav08 .sub_nav { 
    left: auto;
    right: 18.35em; 
    z-index: 5000;
}
.nav08 .secondary_nav {
    bottom: 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    position: absolute;
    right: 0;
    width: 55.2%;
}

.nav08 .featured_shows_channel,
.nav08 .featured_shows_wild { 
    float: left; 
    padding: 1em 0 0 2em;
}

.nav08 .featured_shows img {
    margin: 0;
    max-width: 120px;
}
.nav08 .featured_shows {
    clear: none;
    float: right;
    width: 55%;
}
.nav08 .featured_shows h2 {
    color: #000;
    font-size: 1.18em;
    font-weight: 400;
}
.nav08 .featured_shows ul a {
    line-height: 1.3em;
    padding: .17em 0;
}

.nav08 .featured_shows ul li {
    padding-left: 1em;
    text-indent: -1em;
}
.nav08 .featured_shows ul li {
    line-height: 1.4em;
}
.nav08 .spotlight { 
    border-right: 1px solid #ddd;
    float: left;
    max-width: 23.8em;
    padding: 0 2em 1em 1.5em;
    width: 45%; 
}

.nav08 .spotlight h1 { 
    font-size: 1.18em;
    font-weight: normal;
}

.nav08 .spotlight h2 {
    margin: .6em 0;
}

.nav08 .spotlight img { 
    float: none;
    max-width: 100%;
}

.nav08 .spotlight .caption_overlay > figcaption {
    background-color: transparent;
    bottom: -3.5em;
}

.nav08 .featured_shows a {
    color: #044e8e;
}

.nav08 .featured_shows h2 {
    margin: .6em 0 0 1.4em;
}

.nav08 .featured_shows_channel,
.nav08 .featured_shows_wild { 
    width: 49%; 
}

.nav08 .secondary_nav li { 
    float: left; 
}

#site_nav .nav08 .secondary_nav li:first-child a,
#site_nav .nav08 .secondary_nav li:first-child + li a {
    display: none;
}

/* Animals-specific CSS */
.nav09 .secondary_nav {
    margin-right: 0;
}

/* Subscriptions-specific CSS */
.nav10 .sub_nav {
    min-height: 12em;
}

.nav10 .secondary_nav {
    margin-right: 0.1em;
}

.nav10 .spotlight {
    padding-right: 2em;
}

.nav10 .spotlight img {
    border: 0 solid #CCC;
}

/* Shop-specific CSS */
.spotlight_left_menu {
    border-right: 1px solid #EEE;
    display: inline-block;
    float: left;
    padding: .7em 1em .5em;
}

.spotlight_left_menu h2 {
    font-size: 1.18em;
    font-weight: 400;
    margin: 0;
}

.spotlight_left_menu li ul {
    float: right;
    width: 17em;
}

.spotlight_left_menu li ul li {
    font-size: 0.96em;
}

.spotlight_left_menu li ul li:first-child {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3em;
}

.spotlight_left_menu figure {
    float: left;
    padding-right: 1.2em;
}

.spotlight_left_menu li a {
     border-bottom: 1px solid #EEE;
     padding: 0.5em 0;
}

.spotlight_left_menu li:last-child a {
    border-bottom: 0 solid #EEE;
}

.spotlight_left_menu description {
    display: block;
    font-size: 0.9em;
    line-height: 1.5em;
    padding-top: 0.2em;
}

.nav11 .sub_nav {
    z-index: 600;
}

.nav11 .spotlight {
    margin-left: -1em;
    max-width: 25em;
}

.nav11 .spotlight img {
    border-width: 0;
    max-width: 300px;
}

.nav11 .spotlight figcaption {
    max-width: 300px;
}

/* End Navigation Layout --------------------------------------------------- */
/* ------------------------------------------------------------------------- */

/*
    blocks.css defines components in a page, regardless of location.
    Also defined here are the full-width containers above and below the main content
    Content detail types are not included here.

    1.  Generic "Section" Blocks
    2.  Global, Non-Section Dependent Classes
    3.  Tooltip
    4.  Video
    5.  AddThis

Components:
    6.  Carousel
    7.  Content Listing
    8.  E Commerce
    9.  Gallery
    10. Link List
    11. Pagination
    12. Social Components
    13. Tabbed Content
    14. Text Entry
    15. Thumbs Grid

Schedules:
    16. Kalendae (datepicker) Skin
    17. Channel Switcher/Nav
    18. Primetime Showcase (used in full width)
    19. Alphabet Navigation
*/
/* ------------------------------------------------------------------------- */
/* Generic "Section" Blocks ------------------------------------------------ */
section,
aside > section,
aside > figure,
aside > article {
  clear: both;
  margin-bottom: 0;
}
aside > section + section,
#detail_wrapper > section + section,
#detail_wrapper > figure + section {
  border-top: 1px solid #d5d5d5;
  margin-top: 2rem;
  padding-top: 2rem;
}
section > h3 {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1;
}
section > h3:before {
  background: #ffd800;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fbca00), color-stop(0.8, #ffd800));
  background: -webkit-linear-gradient(top, #fbca00 0%, #ffd800 80%);
  background: -moz-linear-gradient(top, #fbca00 0%, #ffd800 80%);
  background: -o-linear-gradient(top, #fbca00 0%, #ffd800 80%);
  background: -ms-linear-gradient(top, #fbca00 0%, #ffd800 80%);
  background: linear-gradient(top, #fbca00 0%, #ffd800 80%);
  content: "\00A0";
/* '\00A0' = Non-Breaking Space ( ) */
  display: inline-block;
  font-size: 1.1em;
  margin: 0 0.4em 0 0;
  width: 0.5em;
}
section > .view_more_top,
section > .view_more_bottom {
  float: right;
  line-height: 2;
  padding-top: 0.4em;
}
/* End Generic "Section" Blocks -------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Global, Non-Section Dependent Classes ----------------------------------- */
/*  Text Sizing and Decoration Classes */
.text_small {
  font-size: 0.9em;
}
.text_large {
  font-size: 1.1em;
}
.text_xlarge {
  font-size: 1.2em;
}
.text_raquo:after {
  content: "\00BB";
/* '\00BB' = End Double Guillemet (») */
  display: inline;
  padding-left: 0.25em;
}
.top_offset {
  border-top: 1px solid #d5d5d5;
  margin-top: 1em;
  padding-top: 1em;
}
.bottom_offset {
  border-bottom: 1px solid #d5d5d5;
  margin-bottom: 1em;
  padding-bottom: 1em;
}
.social_identifier {
  background-color: #d5d5d5;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 2px solid #eee;
  display: inline-block;
  padding: 0.2em 0.5em;
}
/* Figure Styles
    1. caption_hide
    2. caption_overlay
    3. caption_dark
*/
.caption_hide > figcaption {
  display: none;
}
.caption_overlay {
  margin-bottom: 0;
  position: relative;
}
.caption_overlay > figcaption {
  background-color: #333;
  background-color: rgba(0,0,0,0.4);
  bottom: 0;
  padding: 0.5em;
  position: absolute;
  left: 0;
  width: 100%;
}
.caption_overlay > figcaption h4 {
  color: #cecece;
}
.caption_overlay > figcaption p,
.caption_overlay > figcaption li {
  color: #fff;
  font-weight: 800;
}
ol.markers ~ .slides .caption_overlay > figcaption p,
ol.markers ~ .slides .caption_overlay > figcaption li {
  width: 70%;
}
.caption_dark > figcaption {
  background-color: #111;
  padding: 0.5em;
}
.caption_dark > figcaption p,
.caption_dark > figcaption li {
  color: #fff;
  font-size: 0.85em;
  font-weight: 800;
  line-height: 1.2;
}
.caption_dark > figcaption a {
  color: #63ccfc;
}
/* Object Item Classes */
figure.video_item > a,
article.video_item > a,
li.video_item > a,
li.video_item > figure > a {
  display: block;
  position: relative;
  z-index: 1;
}
figure.video_item > a:after,
article.video_item > a:after,
li.video_item > a.video-image-link:before,
li.video_item > figure > a:after {
  pointer-events: none;
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.8)), color-stop(0.95, rgba(255,255,255,0.2)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 95%);
  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 95%);
  background-image: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 95%);
  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 95%);
  background-image: linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 95%);
  border: 3px solid #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  content: '\f04b';
  font-family: 'FontAwesome';
  font-size: 15px;
  font-size: 1.5rem;
  height: 2.7rem;
  left: 50%;
  line-height: 2;
  margin-left: -1.35rem;
  margin-top: 1.5rem;
  position: absolute;
  top: 0;
  ((null)): 0;
  text-align: center;
  text-shadow: 0 1px 0 #999;
  width: 2.7rem;
  z-index: 2;
}
figure.video_item.large-thumb > a:after {
  top: 38px;
}
li.video_item > a.video-image-link.video-image-wide:before {
  left: 4.5rem;
  top: 0.4rem;
  margin-left: 0;
}
.list_no_thumbs > li.video_item > a:before {
  display: none;
}
#detail_wrapper > .footnote {
  border-style: dotted;
  clear: both;
  margin: 0 1em;
  padding: 2rem;
}
#detail_wrapper > .related_content {
  clear: both;
}
#detail_wrapper > .related_content > p {
  color: #888;
  font-family: 'Georgia', 'Times New Roman', 'Times', serif;
}
/* End Global, Non-Section Dependent Classes ------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Tooltip Content --------------------------------------------------------- */
.tooltip {
  background: #fcefb0;
  -webkit-border-radius: 0.4em;
  border-radius: 0.4em;
  border: 3px solid #fff;
  -webkit-box-shadow: 0 0 0 1px #fcefb0, 3px 6px 8px rgba(111,110,109,0.71);
  box-shadow: 0 0 0 1px #fcefb0, 3px 6px 8px rgba(111,110,109,0.71);
  color: #333;
  font-size: 12px;
  font-size: 1.2rem;
  margin-top: -1em;
  max-width: 30em;
  padding: 1em;
  position: absolute;
  z-index: 100;
}
.tooltip:after,
.tooltip:before {
  border-color: #fcefb0 transparent transparent;
  margin-top: 0;
  border-style: solid;
  border-width: 0.6em 0.6em 0;
  content: '';
  left: 50%;
  margin-left: -0.6em;
  position: absolute;
  top: 100%;
}
.tooltip:after {
  margin-top: 1px;
}
/* End Tooltip ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Video ------------------------------------------------------------------- */
/* click-to-play ID is from Acudeo and can't be altered at this time */
.ngs_video,
#click-to-play {
  position: relative;
}
.ngv_noflash {
  background-color: #555;
  background-color: rgba(0,0,0,0.6);
  display: none;
  float: left;
  margin: 0.5em;
  padding: 2em;
  position: absolute;
  top: 10em;
  ((null)): 0;
}
.ngv_noflash p {
  color: #fff;
}
.ngv_noflash a > img {
  float: right;
}
/* End Video --------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* AddThis ----------------------------------------------------------------- */
.addthis_toolbox {
  height: 2rem;
  margin-bottom: 1em;
  width: 31rem;
}
.addthis_toolbox > li {
  list-style-type: none;
  margin-left: 0;
}
.addthis_toolbox a {
  float: left;
  height: 2rem;
  margin-right: 0.5em;
}
.addthis_toolbox li:last-child > a {
  margin-right: 0;
}
.addthis_toolbox .addthis_button_facebook_like {
  width: 8.5rem;
}
.addthis_toolbox .addthis_button_tweet {
  width: 10.5rem;
}
.addthis_toolbox .addthis_button_google_plusone {
  width: 6.5rem;
}
.addthis_toolbox .addthis_button_compact {
  color: #ff5d30;
  line-height: 1.3;
}
.addthis_toolbox .addthis_button_compact span:before {
  font-size: 1.5em;
}
.addthis_toolbox .addthis_button_compact span:hover {
  color: #f6987e;
  text-decoration: none;
}
/* End AddThis ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Carousel ---------------------------------------------------------------- */
.carousel {
  position: relative;
}
.carousel > .markers {
  background: #fcfcfc;
  border: 1px solid #f5f5f5;
  overflow: hidden;
  position: relative;
}
.carousel > .markers img {
  max-width: 100%;
}
.carousel > .markers > li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.carousel > .markers > li > a {
  margin: 0 auto;
  display: block;
}
.carouselJS.vertical > .markers {
  margin: 0;
}
.carousel.horizontal > .markers {
  margin: 0 2rem;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.carousel.horizontal > .markers > li > a {
  border: 4px solid rgba(255,255,255,0.4);
}
.carousel.horizontal > .markers > li {
  text-align: center;
}
.carousel.horizontal > .markers > li:hover > a {
  border-color: #ccc;
}
.carousel.media_carousel > .markers {
  padding: 1rem 0;
}
.carousel.media_carousel > .markers > li > figure {
  margin-bottom: 0;
  text-align: center;
}
.carousel.media_carousel > .markers > li > figure > figcaption {
  direction: ltr;
  text-align: left;
}
.carousel.media_carousel > .markers > li > figure > a {
  display: inline-block;
}
.carousel.horizontal > .markers > li.current > a,
.carousel.horizontal > .markers > li:target > a {
  border-color: #ffd800;
}
.carousel.horizontal > .markers > li {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
  white-space: normal;
  -webkit-transition: border-color 0.2s linear;
  -moz-transition: border-color 0.2s linear;
  -ms-transition: border-color 0.2s linear;
  -o-transition: border-color 0.2s linear;
  -webkit-transition: border-color 0.2s linear;
  -moz-transition: border-color 0.2s linear;
  -o-transition: border-color 0.2s linear;
  -ms-transition: border-color 0.2s linear;
  transition: border-color 0.2s linear;
}
.carousel.media_carousel > .markers > li > figure {
  margin-bottom: none;
}
.carousel.media_carousel > .markers > li > figure > a {
  display: block;
}
.carousel.media_carousel > .markers > li > a {
  border: none;
}
/* End Carousel ------------------------------------------------------------ */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Content Listing --------------------------------------------------------- */
.content_listing > div,
.content_listing article {
  clear: left;
  padding-bottom: 1.4em;
}
.content_listing article:last-child > p:last-of-type {
  margin-bottom: 0;
}
.content_listing article > footer {
  color: #999;
  font-size: 0.9em;
  margin-bottom: 0.8em;
}
.content_listing > div:last-child > p:last-of-type,
.content_listing > div:after,
.content_listing article:after {
  clear: both;
  content: "";
  display: block;
  width: auto;
}
.content_listing > div h4,
.content_listing article h4 {
  margin-bottom: 0;
}
.content_listing > div > img,
.content_listing > div > a,
.content_listing article > img,
.content_listing article > a {
  display: block;
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 100%;
}
.content_listing .tease_item > footer,
#rail_wrapper > .content_listing > article > footer {
  left: -9999em;
  position: absolute;
}
.content_listing > nav {
  margin-top: -0.5em;
}
.content_listing > nav > h4 {
  font-size: 1em;
  margin-bottom: 0;
}
.content_listing > nav > ul > li {
  display: inline;
  margin: 0;
}
.content_listing > nav > ul > li:first-child > a {
  border-left: 0 none;
  padding-left: 0;
}
.content_listing > nav > ul > li:last-child > a {
  padding-right: 0;
}
.content_listing > nav > ul > li > a {
  border-left: 1px dotted #000;
  padding: 0 0.25em 0 0.5em;
}
#rail_wrapper > .content_listing > .component_part_primary,
#rail_wrapper > .content_listing > .component_part_secondary {
  float: none;
  width: 100%;
}
.content_listing > .component_part_primary {
  border-right: 0 none;
  padding-right: 0;
}
.content_listing > .component_part_secondary {
  clear: none;
}
#rail_wrapper > .content_listing > .component_part_secondary {
  padding-left: 0;
}
#rail_wrapper > .content_listing > .component_part_secondary > h4 {
  font-weight: normal;
}
/* End Content Listing ----------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* E Commerce -------------------------------------------------------------- */
.e_commerce > article > h4 {
  font-weight: 400;
}
.e_commerce > article > p > span,
.e_commerce ul > li span {
  color: #888;
  padding-right: 1.4em;
  text-decoration: line-through;
  font-weight: 800;
}
.e_commerce > article > p > span:last-child,
.e_commerce ul > li span:last-child {
  color: #900;
  padding-right: 0;
  text-decoration: none;
}
.e_commerce > article > p > span:only-of-type,
.e_commerce ul > li span:only-of-type {
  color: #333;
  padding-right: 0;
  text-decoration: none;
}
.e_commerce .carousel li {
  border-left: 1px solid #eee;
}
.e_commerce .carousel li:first-child {
  border-left-width: 0;
}
.e_commerce .carousel > .markers > li {
  margin: 0 auto;
  padding: 1em;
}
.e_commerce .carousel > .markers > li.featured:hover {
  background-color: transparent;
}
.e_commerce .featured img {
  max-width: 100%;
}
.store_fallback {
  background-color: #ffd800;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd900), color-stop(0.95, #ffe866));
  background-image: -webkit-linear-gradient(top, #ffd900 0%, #ffe866 95%);
  background-image: -moz-linear-gradient(top, #ffd900 0%, #ffe866 95%);
  background-image: -o-linear-gradient(top, #ffd900 0%, #ffe866 95%);
  background-image: -ms-linear-gradient(top, #ffd900 0%, #ffe866 95%);
  background-image: linear-gradient(top, #ffd900 0%, #ffe866 95%);
  padding: 2rem;
}
/* End E Commerce ---------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Gallery ----------------------------------------------------------------- */
/*  1. gallery
    2. gallery markers
    3. gallery slides
    4. gallery controls */
.gallery {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.gallery > .markers {
  background: #333;
  background: rgba(0,0,0,0.4);
  counter-reset: marker;
  display: inline-block;
  margin: 0;
  position: absolute;
  right: 0;
  ((null)): 0;
  padding: 0.25em 0.15em;
  z-index: 500;
}
.gallery > .markers > li {
  border-style: solid;
  border-color: rgba(255,255,255,0.4);
  border-width: 2px;
  color: #eee;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.15;
  list-style: none;
  margin: 0 0.1em;
  padding: 0.15em 0.25em 0;
  position: relative;
  vertical-align: top;
}
.gallery > .markers > li:hover {
  background: rgba(0,0,0,0.4);
  border-color: transparent;
}
.gallery > .markers > li:before {
  content: counter(marker);
  counter-increment: marker;
}
.gallery > ol.markers {
  background-color: transparent;
  bottom: 0;
  padding-right: 0.4rem;
}
.gallery > ol.markers > li {
  background: #333;
  background: rgba(0,0,0,0.4);
  border-color: transparent;
}
.gallery > ol.markers .play {
  margin-right: 0;
}
.gallery > .markers > li.current,
.gallery > .markers > li:target {
  border-color: #ffd800;
}
/* gallery slides */
.gallery > .slides {
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.gallery > .slides > li {
  height: 100%;
  list-style: none;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
.gallery > .slides figcaption {
  white-space: normal;
}
.gallery > .slides img.lzy {
  min-width: 100%;
}
.gallery > .slides > li:target,
.gallery > .slides > li.current {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  position: relative;
  z-index: 100;
}
/* gallery controls */
.gallery > .control {
  background-color: #939393;
  background-color: rgba(255,255,255,0.5);
  border: 1px solid #0c0c0a;
  border: 1px solid rgba(0,0,0,0.2);
  -webkit-border-radius: 100%;
  border-radius: 100%;
  color: #424242;
  color: #333;
  font-size: 10px;
  font-size: 1rem;
  height: 12rem;
  line-height: 1.2;
  position: absolute;
  top: 15rem;
  ((null)): 0;
  text-shadow: #ccc;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  width: 12rem;
  z-index: 1000;
}
.gallery > .control:before {
  font-size: 50px;
  font-size: 5rem;
  position: absolute;
  top: 30%;
  ((null)): 0;
}
.gallery .markers > li.play {
  font-family: "FontAwesome";
}
.gallery .markers > li.play:before {
  content: '\f04b';
  counter-increment: none;
  display: block;
  position: relative;
  text-align: center;
  width: 1rem;
}
.gallery .markers > li.pause:before {
  content: '\f04c';
  font-weight: bold;
}
.gallery > .prev {
  left: -13rem;
}
.gallery > .prev:before {
  right: 10%;
}
.gallery > .next {
  right: -13rem;
}
.gallery > .next:before {
  left: 10%;
}
.gallery:hover > .prev {
  left: -6rem;
}
.gallery:hover > .next {
  right: -6rem;
}
/* End Gallery ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Control Elements -------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
.control {
  background-color: #eee;
  height: 100%;
  top: 0;
  width: 2rem;
  padding: 1rem;
  display: inline-block;
}
.control:before {
  color: #044e8e;
  font-size: 20px;
  font-size: 2rem;
}
.vertical .control {
  display: block;
  width: 100%;
  height: 1rem;
  margin: 0.1rem 0;
  padding: 1.5rem;
  position: relative;
}
.horizontal .control {
  position: absolute;
}
.control.disabled {
  color: #ccc;
  border-color: #ccc;
  cursor: default;
}
.control.disabled:before {
  color: #ccc;
}
.horizontal .control:before,
.vertical .control:before {
  position: absolute;
  top: 40%;
  left: 0;
}
.vertical .control:before {
  left: 50%;
  margin-top: -1rem;
  margin-left: -1rem;
  text-align: center;
  top: 50%;
  width: 2rem;
}
.horizontal .control.prev {
  left: 0;
}
.horizontal .control.prev:before {
  margin-left: 0.5rem;
}
.horizontal .control.next {
  right: 0;
}
.horizontal .control.next:before {
  left: 25%;
}
.gallery > .prev {
  left: -13rem;
}
.gallery > .prev:before {
  right: 10%;
}
.gallery > .next {
  right: -13rem;
}
.gallery > .next:before {
  left: 10%;
}
.gallery:hover > .prev {
  left: -6rem;
}
.gallery:hover > .next {
  right: -6rem;
}
.eps_paginator .control {
  background-color: transparent;
  height: 1.4em;
  padding: 0 0.8em;
  position: relative;
  text-decoration: none;
  width: auto;
}
.eps_paginator .control:before {
  position: absolute;
  top: -0.15em;
  right: 0;
}
.eps_paginator .control.icon-chevron-left {
  border-right: 1px solid #ccc;
  padding-left: 1.2em;
}
.eps_paginator .control.icon-chevron-left:before {
  left: 0;
}
.eps_paginator .control.icon-chevron-right {
  padding-right: 1.2em;
}
/* End Control ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Link List --------------------------------------------------------------- */
/*  1. list_no_thumbs
    2. list_with_thumbs
    3. scrolling
    4. featured items */
.list_no_thumbs,
.list_with_thumbs {
  border: 1px solid #f4f4f4;
  line-height: 1.5;
}
.list_no_thumbs > li,
.list_with_thumbs > li {
  clear: both;
  list-style-type: none;
  margin: 0;
}
.list_no_thumbs > li:hover,
.list_with_thumbs > li:hover {
  background-color: #f1f1f1;
}
.list_no_thumbs > li > a,
.list_no_thumbs > li > p,
display block {
  padding: 0.5em 1em;
}
.list_no_thumbs > li > a,
.list_with_thumbs > li > a {
  display: block;
  text-decoration: none;
}
.list_no_thumbs > li > a:hover > p,
.list_with_thumbs > li > a:hover > p {
  text-decoration: underline;
}
.list_no_thumbs > li + li:before {
  border-top: 1px dotted #d5d5d5;
  content: "";
  display: block;
  height: 0;
  margin: -1px 1em 0 1em;
  width: auto;
}
.list_with_thumbs > li + li:before {
  border-top: 1px solid #f4f4f4;
  content: "";
  display: block;
  height: 0;
  width: auto;
}
.list_with_thumbs > li > a > img {
  display: block;
  float: left;
  margin: 0 0.5em 0 0;
}
.list_with_thumbs > li > a:after {
  clear: both;
  content: "";
  display: block;
}
ul.scrolling,
ol.scrolling {
  overflow-x: hidden;
  overflow-y: auto;
}
.list_no_thumbs.window_1 {
  height: 2.5em;
}
.list_no_thumbs.window_2 {
  height: 5em;
}
.list_no_thumbs.window_3 {
  height: 7.5em;
}
.list_no_thumbs.window_4 {
  height: 10em;
}
.list_no_thumbs.window_5 {
  height: 12.5em;
}
.list_no_thumbs.window_6 {
  height: 15em;
}
.list_no_thumbs.window_7 {
  height: 17.5em;
}
.list_no_thumbs.window_8 {
  height: 20em;
}
.list_no_thumbs.window_9 {
  height: 22.5em;
}
.list_no_thumbs.window_10 {
  height: 25em;
}
.list_with_thumbs.window_1 {
  height: 45px;
}
.list_with_thumbs.window_2 {
  height: 90px;
}
.list_with_thumbs.window_3 {
  height: 135px;
}
.list_with_thumbs.window_4 {
  height: 180px;
}
.list_with_thumbs.window_5 {
  height: 225px;
}
.list_with_thumbs.window_6 {
  height: 270px;
}
.list_with_thumbs.window_7 {
  height: 315px;
}
.list_with_thumbs.window_8 {
  height: 360px;
}
.list_with_thumbs.window_9 {
  height: 405px;
}
.list_with_thumbs.window_10 {
  height: 450px;
}
ul > li.featured,
ol > li.featured {
  list-style-type: none;
  margin-left: 0;
  margin-bottom: 1.25em;
}
ul > li.featured:last-child,
ol > li.featured:last-child {
  margin-bottom: 0;
}
ul > li.featured > a,
ol > li.featured > a,
ul > li.featured > figure,
ol > li.featured > figure {
  display: inline-block;
  margin: 0 auto;
}
ul > .current_item,
ul > .current_item:hover,
ol > .current_item,
ol > .current_item:hover {
  background-color: #feffc2;
}
#rail_wrapper ul > li.featured > figure {
  display: block;
  overflow: hidden;
  margin: 1em;
}
.list_search {
  margin-bottom: 0;
}
.list_search > label {
  margin-top: 0.5em;
}
.list_search > .quick_search {
  border: 1px solid #ccc;
  margin-left: 1%;
  padding: 0.5em;
  width: 74%;
}
/* End Link List ----------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------*/
/* Stacking Graphics --------------------------------------------------------*/
.stacked_graphics > ul > li {
  margin-bottom: 1px;
}
.stackinggraphics li.featured {
  margin-bottom: 1px;
}
/* end Stacking Graphics -----------------------------------------------------*/
/* --------------------------------------------------------------------------*/
/* --------------------------------------------------------------------------*/
/* Pagination ---------------------------------------------------------------*/
.pagination {
  border-bottom: 1px solid #d6d6d6;
  clear: both;
  font-size: 12px;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding: 1em 0;
  text-align: right;
  text-transform: uppercase;
}
.pagination a {
  padding: 0 0.5em;
}
.pagination .page_prev {
  border-right: 1px solid #dedede;
}
.pagination .page_next {
  border-left: 1px solid #dedede;
}
.pagination .page_current {
  font-weight: bold;
}
.pagination.page_bottom {
  border-top: 1px solid #d6d6d6;
  border-bottom-width: 0;
}
/* End Pagination ---------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Social Components ------------------------------------------------------- */
.rail_social > h3:before {
  width: 2rem;
}
.rail_social_facebook > h3:before {
  background: transparent url('//media-channel.nationalgeographic.com/static-media/images/facebook_logo_17x17.png?c1159dca89ad') scroll no-repeat 2px 0;
}
.rail_social_twitter {
  font-size: 0.95em;
}
.rail_social_twitter > h3:before {
  background: transparent url('//media-channel.nationalgeographic.com/static-media/images/twitter_logo_17x17.png?c1159dca89ad') scroll no-repeat 2px 0;
}
/* End Social Components --------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Tabbed Content ---------------------------------------------------------- */
/*  1. tabbed_content
    2. tabbed_content_padded
    3. tabbed_content_plain
*/
.tabbed_content > .tabbed_content-inactive {
  display: none;
}
.tabbed_content > ul {
  border-bottom: 1px solid #d5d5d5;
  margin-bottom: 0.5em;
  position: relative;
  z-index: 2;
}
.tabbed_content > ul:after {
  clear: both;
  content: "";
  display: block;
}
.tabbed_content > ul > li {
  background-color: #f4f4f4;
  border-color: #e7e7e7 #e7e7e7 #d5d5d5;
  border-style: solid;
  border-width: 1px;
  display: block;
  float: left;
  margin: 0 0 -1px 0.25em;
}
.tabbed_content > ul > .tabbed_content-active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}
.tabbed_content > ul > .tabbed_content-active > a {
  display: inline-block;
  padding: 0.25em 0.5em;
  white-space: nowrap;
}
.tabbed_content > ul > .tabbed_content-active > a:hover {
  text-decoration: none;
}
.tabbed_content > ul .tabbed_content-inactive:hover {
  background-color: #e7e7e7;
  border-color: #d5d5d5;
}
.tabbed_content.tabbed_content_padded > div {
  border: 1em solid #e7e7e7;
  margin: 1px;
  outline: 1px solid #d5d5d5;
  padding: 1em;
}
.tabbed_content.tabbed_content_padded > ul {
  border-bottom: 0 none;
  margin-bottom: -1px;
}
.tabbed_content.tabbed_content_padded > ul > li {
  background-color: #fff;
  border-color: #d5d5d5;
  margin: 0 0.5em 0.5em 0;
}
.tabbed_content.tabbed_content_padded > ul > li:last-child {
  margin-right: 0;
}
.tabbed_content.tabbed_content_padded > ul > li > a {
  display: inline-block;
  padding: 0.25em 1em;
}
.tabbed_content.tabbed_content_padded > ul > .tabbed_content-active {
  background-color: #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 0;
}
.tabbed_content.tabbed_content_padded > ul > .tabbed_content-active > a {
  padding-bottom: 0.75em;
}
.tabbed_content.tabbed_content_plain > ul {
  border-bottom: 0 none;
}
.tabbed_content.tabbed_content_plain > ul > li {
  background: transparent none;
  border-color: #d5d5d5;
  border-width: 0 1px 0 0;
  margin: 0 0.8em 0 0;
}
.tabbed_content.tabbed_content_plain > ul > li:last-child {
  border-right: 0 none;
  margin-right: 0;
}
.tabbed_content.tabbed_content_plain > ul > li:last-child > a {
  padding-right: 0;
}
.tabbed_content.tabbed_content_plain > ul > li > a {
  padding: 0 0.8em 0 0;
}
.tabbed_content.tabbed_content_plain > ul > li > a:hover {
  text-decoration: underline;
}
.tabbed_content.tabbed_content_plain > ul > .tabs_header {
  border-right: 0 none;
}
.tabbed_content.tabbed_content_plain > ul > .tabbed_content-active {
  background: transparent none;
  border-bottom: 0 none;
  font-weight: 800;
}
.tabbed_content.tabbed_content_plain > ul > .tabbed_content-inactive:hover {
  background: 0 none;
}
/* End Tabbed Content ------------------------------------------------------ */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Text Entry -------------------------------------------------------------- */
.text_entry > .pull_quote {
  padding-left: 4rem;
  padding-right: 4rem;
}
.text_entry > .pull_quote > span {
  color: #999;
  float: left;
  font-family: 'Georgia', 'Times New Roman', 'Times', serif;
  font-size: 110px;
  font-size: 11rem;
  line-height: 0.7;
  height: 0.4em;
  margin-left: -4.5rem;
  width: -margin-left;
}
.text_entry > .pull_quote > span:last-of-type {
  float: right;
  margin: -0.4em -4.5rem 0 0;
}
/* End Text Entry ---------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Thumbs Grid ------------------------------------------------------------- */
/* Grid of three */
.thumbs_grid {
  padding-bottom: 0;
}
.thumbs_grid:after {
  clear: both;
  content: "";
  display: block;
  width: auto;
}
.thumbs_grid > figure {
  float: left;
  margin-bottom: 1.5em;
  margin-left: 5%;
  width: 30%;
}
.thumbs_grid > figure img {
  margin: 0;
  max-width: 100%;
}
.thumbs_grid > figure > a,
.thumbs_grid > figure > img,
.thumbs_grid > figure > figcaption {
  margin-right: auto;
  margin-left: auto;
}
.thumbs_grid > figure.primary_thumb > a {
  border: 2px solid #ffd800;
  margin-top: -2px;
  margin-bottom: -2px;
}
.thumbs_grid > figure:nth-of-type(3n) {
  margin-right: 0;
}
.thumbs_grid > figure:nth-of-type(3n) > a,
.thumbs_grid > figure:nth-of-type(3n) > img,
.thumbs_grid > figure:nth-of-type(3n) > figcaption {
  margin-left: 0;
}
.thumbs_grid > figure:nth-of-type(4n+1),
.thumbs_grid > figure:nth-of-type(5n+1) {
  clear: none;
  margin-left: 5%;
}
.thumbs_grid > figure:nth-of-type(3n+1) {
  clear: left;
  margin-left: 0;
}
.thumbs_grid > figure > a {
  display: block;
}
/*
@media screen and (min-width: 1000px)
    .thumbs_grid > figure
        width 22.5%
        margin-left 3.33%
        /* Reset earlier last-in-row's
        &:nth-of-type(3n+1),
        &:nth-of-type(5n+1)
            clear none
            margin-left 3.33%
        &:nth-of-type(4n+1)
            clear both
            margin-left 0

// Grid of 5
@media screen and (min-width: 1234px)   
    .thumbs_grid > figure
        width 18%
        margin-left 2%
        // Reset earlier last-in-row's
        &:nth-of-type(3n+1),
        &:nth-of-type(4n+1) 
            clear none
            margin-left 2%
        &:nth-of-type(5n+1)
            clear both 
            margin-left 0
*/
/* End Thumbs Grid --------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Kalendae Skin ----------------------------------------------------------- */
.kalendae {
  background-color: #fff;
  -webkit-box-shadow: 0.1em 0.1em 0.5em #ccc;
  -moz-box-shadow: 0.1em 0.1em 0.5em #ccc;
  -ms-box-shadow: 0.1em 0.1em 0.5em #ccc;
  -o-box-shadow: 0.1em 0.1em 0.5em #ccc;
  -webkit-box-shadow: 0.1em 0.1em 0.5em #ccc;
  box-shadow: 0.1em 0.1em 0.5em #ccc;
  padding: 0.5em;
}
.kalendae .k-header {
  background-color: #ebebeb;
  background-image: -webkit-gradient(linear, bottom top, top bottom, color-stop(0, #ebebeb), color-stop(1, #f4f4f4));
  background-image: -webkit-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: -moz-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: -o-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: -ms-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  border-bottom: 1px solid #d5d5d5;
}
.kalendae a[class*="k-btn"] {
  cursor: pointer;
  position: absolute;
  text-decoration: none;
}
.kalendae .k-btn-previous-month {
  left: 5%;
}
.kalendae .k-btn-next-month {
  right: 5%;
}
.kalendae .k-btn-previous-year,
.kalendae .k-btn-next-year {
  text-align: left;
}
.kalendae .k-first-month .k-btn-next-month,
.kalendae .k-middle-month .k-btn-next-month,
.kalendae .k-middle-month .k-btn-previous-month,
.kalendae .k-last-month .k-btn-previous-month,
.kalendae .k-first-month .k-btn-next-year,
.kalendae .k-middle-month .k-btn-next-year,
.kalendae .k-middle-month .k-btn-previous-year,
.kalendae .k-last-month .k-btn-previous-year {
  display: none;
}
.kalendae .k-title,
.kalendae .k-header,
.kalendae .k-days {
  display: block;
  overflow: hidden;
  width: 15.4rem;
}
.kalendae .k-title {
  background-color: #eebd03;
  border-bottom: 1px solid #bd8e00;
  color: #555;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 800;
  padding: 0.7em 0;
  text-align: center;
  text-shadow: 0 1px 0 #ccc;
}
.kalendae .k-header span,
.kalendae .k-days span {
  float: left;
  margin: 0.1em;
  text-align: center;
  width: 2rem;
}
.kalendae .k-header span {
  color: #666;
  font-weight: 800;
  padding: 0.1em 0.3em;
}
.kalendae .k-days span {
  border: 1px solid transparent;
  color: #999;
  cursor: pointer;
  height: 2rem;
  line-height: 1em;
  padding: 0.3em 0.2em;
}
.kalendae .k-days span.k-selected {
  border-color: #1072a5;
  color: #1072a5;
}
.kalendae .k-days span.k-selected.k-active {
  background: #7ea0e2;
  color: #fff;
}
.kalendae .k-days span.k-range {
  background: none;
  border-color: #6dd4fe;
}
.kalendae .k-days span.k-range.k-active {
  background: #c4d4f1;
  border-color: #19aefe;
  color: #333;
}
.kalendae .k-days span.k-active {
  border-color: #ddd;
  color: #333;
  cursor: pointer;
}
.kalendae .k-days span.k-active:hover {
  background-color: #f5e297;
  border-color: #cebc79;
}
.kalendae .k-days span.k-out-of-month {
  color: #ddd;
}
.kalendae.k-disable-next-month-btn .k-btn-next-month,
.kalendae.k-disable-previous-month-btn .k-btn-previous-month,
.kalendae.k-disable-next-year-btn .k-btn-next-year,
.kalendae.k-disable-previous-year-btn .k-btn-previous-year,
.kalendae .k-btn-previous-year,
.kalendae .k-btn-next-year {
  display: none;
}
/* ------------------------------------------
    IE8 FIXES
    *do not remove until it can be tested*
   ------------------------------------------ */
.kalendae.ie8 .k-btn-next-month,
.kalendae.ie8 .k-btn-next-year {
  background-position: center right;
}
.kalendae.ie8 .k-btn-previous-month:hover,
.kalendae.ie8 .k-btn-next-month:hover {
  background-color: #7ea0e2;
}
.kalendae.ie8 .k-btn-previous-year,
.kalendae.ie8 .k-btn-next-year {
  background-color: #333;
}
.kalendae.ie8 .k-btn-previous-year:hover,
.kalendae.ie8 .k-btn-next-year:hover {
  background-color: #6fdf81;
}
.kalendae.ie8 .k-btn-previous-month:after,
.kalendae.ie8 .k-btn-next-month:after,
.kalendae.ie8 .k-btn-previous-year:after,
.kalendae.ie8 .k-btn-next-year:after {
  display: none;
}
/* End Kalendae Skin ------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* Alphabet Navigation ----------------------------------------------------- */
.alpha_nav {
  background-color: #fff;
  background-image: -webkit-gradient(linear, bottom top, top bottom, color-stop(0, #ebebeb), color-stop(1, #f4f4f4));
  background-image: -webkit-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: -moz-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: -o-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: -ms-linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  background-image: linear-gradient(top bottom, #ebebeb 0%, #f4f4f4 100%);
  border-top: 1px solid #dadada;
  clear: both;
  padding: 0.5em 0.6em;
}
.alpha_nav a,
.alpha_nav span.disabled {
  letter-spacing: 3px;
  padding: 3px;
}
.alpha_nav span.disabled {
  color: #ccc;
  cursor: default;
}
.alpha_nav.list_all,
.alpha_nav.list_specials {
  display: none;
}
/* End Alphabet Nav -------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

/* 
    view_defined_content.css serves to define more finite styles to components or content
    based on state. (e.g., hidden/active) The view differences of a component should be reflected 
    here are well. 

    View Defined Content contains:

    1. Article Detail Pages
    2. Collection/Dynamic Collection/Tease Detail Pages
    3. Episode Detail Pages
    4. Gallery Detail Pages
    5. Hub Detail Pages
    6. Series Detail Pages
    7. TV Schedule Pages
    8. Video Detail Pages
    9. 404 Error Page
*/



/* ------------------------------------------------------------------------- */
/* Article Detail Pages ---------------------------------------------------- */

.content_detail_article {}
.content_detail_article > #detail_wrapper > figure,
.content_detail_article > #detail_wrapper > .gallery { 
    border-bottom: 1px solid #D5D5D5;
    font-size: 0.85em;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
}
.content_detail_article > #detail_wrapper > .gallery > .tray { margin-right: 0.5rem; }

.content_detail_article > #detail_wrapper > figure > figcaption > p, 
.content_detail_article > #detail_wrapper > .gallery figure > figcaption > p { font-weight: 800; }

.content_detail_article > #detail_wrapper > figure > figcaption > footer,
.content_detail_article > #detail_wrapper > .gallery figure > figcaption > footer, 
.content_detail_photo > #detail_wrapper > footer p  {
    font-size: 1em;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 0;
    text-align: right;
}

.content_detail_article .gallery > ol.markers { top: 0; }

.content_detail_article > #detail_wrapper > figure.inline { border:none; }
.content_detail_article > #detail_wrapper > figure.inline > figcaption h1 {
    font-size: 1.2em;
    margin-bottom: .05em;
}

/* End Article Detail Pages ------------------------------------------------ */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Collection/Dynamic Collection/Tease Detail Pages ------------------------ */

.content_detail_collection, 
.content_detail_dynamiccollection,
.content_detail_tease {}
.content_detail_collection > footer,
.content_detail_collection > #detail_wrapper > footer,
.content_detail_dynamiccollection > footer,
.content_detail_dynamiccollection > #detail_wrapper > footer,
.content_detail_tease > footer,
.content_detail_tease > #detail_wrapper > footer,
.content_detail_tease > footer,
.content_detail_tease > #detail_wrapper > footer {
    left: -9999em;
    position: absolute;
}
.content_detail_collection > #detail_wrapper > div.content_listing, 
.content_detail_dynamiccollection > #detail_wrapper > div.content_listing,
.content_detail_tease > #detail_wrapper > div.content_listing { padding-bottom: 2rem; }

/* End Collection/Dynamic Collection/Tease Detail Pages -------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Gallery Detail Pages ---------------------------------------------------- */

.content_detail_gallery {}
.content_detail_gallery > footer,
.content_detail_gallery > #detail_wrapper > footer {
    left: -9999em;
    position: absolute;
}

/* End Gallery Detail Pages ------------------------------------------------ */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Hub Detail Pages -------------------------------------------------------- */

.content_detail_hub {}
.content_detail_hub > footer,
.content_detail_hub > h1 {
    left: -9999em;
    position: absolute;
}
.content_detail_hub .addthis_toolbox {
    height: 100%;
    width: 100%;
}
.content_detail_hub .addthis_toolbox li { height: 3.4rem; }
.content_detail_hub .addthis_toolbox a {
    float: none;
    margin: 0;
}

.content_detail_video .addthis_toolbox {
    float: right;
    margin: 0 0 -100% 0;
    position: relative;
    z-index: 20;
}

.content_detail_video .addthis_toolbox .addthis_button_facebook_like { margin-top: 0.5rem; }

/* End Hub Detail Pages ---------------------------------------------------- */
/* ------------------------------------------------------------------------- */



/* ------------------------------------------------------------------------- */
/* Video Detail Pages ------------------------------------------------------ */

.content_detail_video {}
.content_detail_video h1 {
    color: #666;
    font-size: 1.5em;
    font-weight: 400;
}
.content_detail_video header { margin-bottom: 1em; }
.content_detail_video header > p { margin-bottom: 0; }
.content_detail_video header > hgroup {
    line-height: 1;
    margin-bottom: 0;
    overflow: hidden; 
}
.content_detail_video header > hgroup > h1 { float: left; }
.content_detail_video header > hgroup > h1:after {
    content: ': ';
    margin-right: 0.5rem;
}
.content_detail_video header > hgroup > h2 { 
    font-family: inherit;
    margin-bottom: 0; 
}
.content_detail_video header > .link_overview {
    float: right;
    font-size: 0.9em;
    margin-left: 0.5em;
}
.content_detail_video header > a { display: inline-block; }
.content_detail_video header > a + hgroup {
    position: absolute;
    text-indent: -9999em;
}
.content_detail_video header:after {
    clear: both;
    content: "";
    display: block;
    width: auto;
}
.content_detail_video div.ngs_video { margin-left: 0.4em; }
.content_detail_video object#ngs_video { height: 374px; } /* hack fix as bottom of video not showing */
.content_detail_video > #detail_wrapper > .tabbed_content { 
    border-top: 0 none;
    padding-top: 0;
}
.content_detail_video > #detail_wrapper > .tabbed_content footer {
    left: -9999em;
    position: absolute;
}
.content_detail_video #embed_share { margin-bottom: 0; }
.content_detail_video #embed_share > fieldset {
    border-bottom: 1px solid #CCC;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.content_detail_video #embed_share > fieldset:last-child {
    border-bottom: 0 none; 
    margin-bottom: 0;
    padding: 0;
}
.content_detail_video #embed_share ol > li {
    list-style-type: none;
    margin-left: 0;
}
.content_detail_video #embed_share > fieldset label {
    color: #333;
    cursor: default;
    line-height: 1.5;
}
.content_detail_video #embed_share > fieldset input, 
.content_detail_video #embed_share > fieldset textarea {
    background-color: #FCFCFC;
    border: 1px solid #B9B9B9;
    border-top-color: #A4A4A4;
    border-radius: 3px;
        -webkit-box-shadow: 0 1px 0 #FFF, inset 0 1px 1px rgba(0,0,0,.17);
           -moz-box-shadow: 0 1px 0 #FFF, inset 0 1px 1px rgba(0,0,0,.17);
                box-shadow: 0 1px 0 #FFF, inset 0 1px 1px rgba(0,0,0,.17);
    color: #666;
    font-size: 1.3rem;
    padding: 0.5em;
}
.content_detail_video #embed_share > fieldset textarea {
    display: block;
    height: 10em;
    margin-top: .8em;   
    width: 100%;
} 
.content_detail_video #embed_share > fieldset input { width: 80%; }
.content_detail_video #embed_share > fieldset label[for*=embed-] {
    display: block;
    float: left;
    margin: 1em;
}
.content_detail_video #embed_share > fieldset label[for*=embed-] input { width: 5em; }

.content_detail_video .carousel > .markers img { min-width: 0; }

/* End Video Detail Pages -------------------------------------------------- */
/* ------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* 404 Page ------------------------------------------------------ */

.error_404 .network_grid {
    background-color: #CCC;
    padding: 2em;
}
.error_404 #ngs_search {
    margin-top: 0.5em;
    width: 55%;
}

/* End 404 Page -------------------------------------------------- */
/* ------------------------------------------------------------------------- */

@charset "UTF-8";
.mem_modals {
    font-size: 16px;
}
/*----------------------HEADER----------------------*/
.identity_bar {
    height: 100%;
    margin: 0 auto;
    max-width: 990px;
}
.identity_bar a.logo_link {
    border: none;
    float: left;
    margin: .5em 0 0 .9375em;
    outline: none;
}
.identity_bar a.logo_link img {
    border: none;
    float: left;
}
.mem_menu {
    border: none;
    float: right;
    outline: none;
    position: relative;
    z-index: 1000;
}
.mem_menu.logged_in {
    cursor: pointer;
    padding-top: .625em;
}/*
.mem_menu.logged_in:hover {
    background-color: #FFF;
    box-shadow: 0 0 5px #555;
}*/
.mem_menu.logged_in ul {
    background-color: #FFF;
    box-shadow: 0 0 5px #555;
    color: #FFF;
    display: none;
    list-style: none;
    margin: 0;
    padding: 3.125em 0 .6875em;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.mem_menu.logged_in:hover ul {
    display: block;
}
.mem_menu.logged_in li {
    border-bottom: 1px solid #EEE;
}
.mem_menu.logged_in li a {
    color: #000;
    display: block;
    float: none;
    font: .875em/1 "Helvetica", "Arial", sans-serif;
    padding: .571em 0 .751em 1.286em;
    text-decoration: none;
}
.mem_menu.logged_in li a:hover {
    background-color: #EEE;
}
.mem_menu_img_link{
    border: none;
    float: left;
    font: inherit;
    margin: 0 0 .625em 1.125em;
    padding: 0;
    outline: none;
}
#header_avatar {
    border: none;
    float: left;
    height: 1.875em;
    overflow: hidden;
    width: auto;
}
.mem_menu #header_display_name {
    color: #999;
    display: block;
    float: left;
    font-size: .8125em;
    margin: .769em 1.08em 0;
    padding: 0;
    text-decoration: none;
}
.mem_menu a.badge {
    background-color: #D65F35;
    border-radius: .308em;
    color: #FFF;
    display: block;
    float: left;
    font-size: .8125em;
    height: 1.538em;
    line-height: 1.538em;
    margin: .5385em 2.154em 0 0;
    text-align: center;
    padding: 0 .462em;
    position: relative;
    text-decoration: none;
    width: auto;
}
.mem_menu .menu_arrow{
    background: none;
    border-bottom: none;
    border-left: .385em solid transparent;
    border-right: .385em solid transparent;
    border-top: .385em solid #999;
    cursor: pointer;
    height: 0;
    margin-top: -.154em;
    position: absolute;
    right: .5em;
    top: 50%;
    width: 0;
}
.mem_menu.logged_out a {
    border: 1px solid #333;
    border-radius: 4px 0 0 4px;
    color: #999;
    float: left;
    font: .8125em/1 "Helvetica", "Arial", sans-serif;
    margin-top: .846em;
    padding: .5385em .923em .462em;
    text-decoration: none
}
.mem_menu.logged_out a:last-of-type {
    border-left: none;
    border-radius: 0 4px 4px 0;
}
.mem_menu.logged_out a:hover {
    background-color: #333;
    color: #FFF;
}
/*----------------------MODALS----------------------*/
#spawn {
    background: url('//media-channel.nationalgeographic.com/static-media/images/nationalGeographic_spawn_bg.png?d94a2c39a993');
    background: rgba(0,0,0,.4);
    height: 100%;
    position: fixed;
    opacity: 1;
    top: 0;
    width: 100%;
    z-index: 1000000;

-webkit-transition: opacity .4s ease;
   -moz-transition: opacity .4s ease;
    -ms-transition: opacity .4s ease;
     -o-transition: opacity .4s ease;
        transition: opacity .4s ease;
}

.overlay_hidden {
    display: none\9;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/*----------------------MODAL MEDIA QUERIES----------------------*/
.scrollable {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.scrollable * {
    -webkit-transform: translate3d(0,0,0);
}

#memmodal-block {
    background-color: #fff;
    float: left;
    font-size: 16px;
    left: 50%;
    line-height: 1.5;
    margin: -10em 0 0 -21.875em;
    overflow: visible;
    position: absolute;
    top: 50%;
    width: 43.7em;
    z-index: 1000001;

    box-shadow: 0 0 1em rgba(0,0,0,.8);
    -moz-box-shadow: 0 0 1em rgba(0,0,0,.8);
    -webkit-box-shadow: 0 0 1em rgba(0,0,0,.8);
    
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.regwrap {
    float: left;
    overflow: visible;
    width: 100%;
}

#login-facebook-button {
    position: absolute;
}

/* Landscape phones and down */
@media (max-width: 480px) {
    div#memmodal-block {
        margin: -10.75em 0 0 -10.75em;
        width: 21.5em;
    }

    .regwrap {
        float: left;
        overflow: visible;
    }

    div.max_50 {
        float: none;
    }

    div.max_50 p.welcome {
        float: none;
        padding-top: 0.3em;
        width: 20em;
    }

    /* Sign In Form */
    form.login {
        padding-left: -2.1em;
    }

    .mem_modals .password_wrap {
        width: 100%;
    }

    #login-facebook-button {
        position: relative;
    }

    /* Join Now Initial Page */
    #RFBH110 .content_50,
    #APP200 .content_50 {
        width: 100%;
    }

    #RFBH110 .title_333,
    #RFBH110 .blurbs,
    #RFBH110 hr.dotted,
    #RFBH110 .fb-facepile {
        display: none;
    }

    #RFBH110 #gigya_login {
        margin-top: 0.6em;
    }

    #RFBH110 .white_bg {
        height: 12em;
    }

    #RFBH110 .white_bg div.bottom {
        margin: 0;
        position: absolute;
    }

    /* Native Reg Page 1 */
    #native-reg-start-form input[name='middleName'] {
        display: none;
    }

    #native-reg-start-form span.datePicker {
        margin-bottom: 0.5em;
    }

    #native-reg-start-form .whats-this .tooltip_wrap .tool_tip {
        right: -0.55em;
        top: -6em;
    }

    #native-reg-start-form .tooltip_wrap .tool_tip ul {
        left: -6px;
    }

    .mem_modals .tooltip_wrap .tool_tip .arrow {
        display: none;
    }

    /* Complete Your Account */
    #native-reg-final-form {
        margin-top: 4em;
    }

    #native-reg-final-form .whats-this .tooltip_wrap .tool_tip {
        left: -18.8em;
        margin-top: -10.1em;
    }
}

/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
    div#memmodal-block {
        margin: -12em 0 0 -12em;
        width: 24em;
    }

    .regwrap {
        float: left;
        overflow: visible;
    }

    div.max_50 {
        float: none;
    }

    /* Sign In Form */
    form.login {
        padding-left: -2.1em;
    }

    .mem_modals .password_wrap {
        width: 100%;
    }

    #login-facebook-button {
        position: relative;
    }

    /* Join Now Initial Page */
    #RFBH110 .content_50,
    #APP200 .content_50 {
        width: 100%;
    }

    #RFBH110 .blurbs,
    #RFBH110 hr.dotted,
    #RFBH110 .fb-facepile {
        display: none;
    }

    #RFBH110 .white_bg {
        height: 17em;
    }

    #RFBH110 .white_bg div.bottom {
        margin: 0;
        position: absolute;
    }

    /* Native Reg Page 1 */
    #native-reg-start-form input[name='middleName'] {
        display: none;
    }

    #native-reg-start-form .whats-this .tooltip_wrap .tool_tip {
        right: -0.55em;
        top: -6em;
    }

    #native-reg-start-form .tooltip_wrap .tool_tip ul {
        left: -6px;
    }

    .mem_modals .tooltip_wrap .tool_tip .arrow {
        display: none;
    }

    /* Complete Your Account */
    #native-reg-final-form {
        margin-top: 4em;
    }

    #native-reg-final-form .whats-this .tooltip_wrap .tool_tip {
        left: -18.8em;
        margin-top: -10.1em;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) {
    /* Native Reg Page 1 */
    #native-reg-start-form div:first-child {
        z-index: 1;
    }

    /* Native Reg Page 2 */
    div#RNVH120 .max_50 {
        /* Have to set the index to the same base number as the location
        autocomplete, otherwise it won't display on the modal as you type. */
        z-index: 1000000;
    }
}

/*----------------------HEADER (CONT.)----------------------*/

#RFBH110.regwrap,
#APP200.regwrap {
    background-color: #000;
    height: auto;
}
#APP200 .regwrap {
    background-color: #000;
}
#RNVH110 .regwrap, #RFBH150 .regwrap {
    min-height: 22.75em;
}
#APP160 .regwrap, #RNVH120 .regwrap {
    min-height: 19.0625em;
}
h1.title_333, h1.title_gold, h1.title_FFF {
    color: #333;
    font: 1.5em/1 "Din", "Helvetica", "Arial", sans-serif;
    font-weight: bold;
    letter-spacing: -.01em;
    margin: 0;
    padding-top:.25em;
}
h1.title_gold {
    color: #FC0;
}
h1.title_FFF {
    color: #FFF;
    font-weight: normal;
}
.top_bar_gold + h1, .errorTop + h1 {
    margin:.542em 0 .542em 1.25em;
}
.text_555, .text_555_bold, .text_999, .text_blue, .text_FFF, .text_orange, .mem_modals span.error, .mem_modals div.errorTop, .mem_modals div.noticeTop {
    color: #555;
    font: .8125em/1.62 "Helvetica", "Arial", sans-serif;
    letter-spacing: .025em;
    vertical-align: -.3em;
}
.text_555_bold {
    font: .8125em/1.62 "Din", "Helvetica", "Arial", sans-serif;
    font-weight: bold;
}
.text_999 {
    color: #999;
}
.text_blue , a.text_blue, .text_blue a {
    color: #00AEEF;
}
.text_FFF {
    color: #FFF;
}
.text_orange {
    color: #FF4921;
}
.mem_modals span.error, .mem_modals div.errorTop {
    clear: left;
    color: #FF4921;
    float: left;
    line-height: 1;
    margin: .538em 0 0 2.308em;
}
.mem_modals div.errorTop {
    background-color: #FFE4DE;
    border: 1px solid #FFD1C7;
    float: none;
    margin: .385em;
    padding: .692em 1.846em;
}
.mem_modals div.noticeTop {
    background-color: #E3F0E6;
    border: 0px solid #CBE6D1;
    color: #309A46;
    float: none;
    margin: .385em;
    padding: .692em 1.846em;
}
.text_555_small, .text_blue_small, .text_FFF_small, .text_fb {
    color: #555;
    font: .625em/1.3 "Helvetica", "Arial", sans-serif;
    letter-spacing: .025em;
}
.text_blue_small , a.text_blue_small, .text_blue_small a {
    color: #00AEEF;
}
.text_blue_small.why {
    clear: left;
    float: left;
    margin: .3em 0 .7em 3em;
}
.text_FFF_small {
    color: #FFF;
}
.text_fb {
    background-color: #3B76B8;
    color: #FFF;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}
.text_999_small {
    color: #999;
    font: .53125em/1.17647 "Helvetica", "Arial", sans-serif;
    letter-spacing: .025em;
}
.text_999_small a {
    border-bottom: 1px #999 dotted;
    color: #999;
    text-decoration: none;
}
.text_999_small a:hover {
    text-decoration: underline;
}
.margin_30 {
    margin-left:30px;
}
div.top_bar_gold {
    background-color: #FC0;
    display: block;
    height: 2em;
    padding-left:1.875em;
}
div.top_bar_gold .text_555 {
    display: inline-block;
    margin-top: .462em;
    vertical-align: baseline;
}
hr.dotted {
    border:none;
    border-bottom: 1px dotted #999;
    clear: left;
    margin: 0 1.875em .625em 1.875em;
}
#memmodal-block form {
    float: left;
}
.mem_modals input[type="text"],
.mem_modals input[type="input"],
.mem_modals input[type="email"],
.mem_modals input[type="password"],
.mem_modals select, .mem_modals textarea {
    background-color: #EEE;
    border:1px solid #CDCCCC;
    border-radius: 4px;
    clear: left;
    float: left;
    height: auto;
    line-height:1;
    margin: .769em .769em 0 2.308em;
    padding: .462em .769em .231em;
    width: 21.54em;
}

#change-password-form input[type="password"] {
    float: none\9 !important;
}

.mem_modals.APP200 input {
    width: 20.77em;
}
.mem_modals input[type="text"]:focus,
.mem_modals input[type="input"]:focus,
.mem_modals input[type="email"]:focus,
.mem_modals input[type="password"]:focus, .mem_modals textarea:focus {
    border-color: #989898;
    color: #555;
}
.mem_modals .password_wrap {
    clear: both;
    float: left;
    position: relative;
}
.mem_modals input[type="button"] {
    float:left;
    margin-top: 10px;
    padding: 2px;
}
.mem_modals .radio input[type="radio"] {
   margin: 0.769em 0.769em 0 2.308em;
}
.mem_modals input.error, .mem_modals select.error {
    border-color: #F00;
}
#change-password-inner {
    height:100px;
}
.form-information-text {
    color:#000;
}
.mem_modals select {
    clear: none;
    height: 2.3em;
    margin-left: .769em;
    margin-right: 0;
    width: 7.15em;
}
.mem_modals input[type="file"]{
    display: none;
}
#RNVH110 select:first-child {
    clear: left;
    margin-left: 2.308em;
}
#memmodal-block form span {
    float: left;
}
span.datePicker {
    margin-bottom: 1.875em;
}
.text_with_input {
    clear: left;
    float: left;
    line-height: 1;
    margin: .692em 2.308em 0 2.308em;
}
.mem_modals .tooltip_wrap {
    position: relative;
}
.mem_modals .tooltip_wrap input:focus,
.mem_modals .tooltip_wrap input.focus {
    color: #555;
    border-color: #999;
}
.mem_modals .tooltip_wrap input:focus + .tool_tip,
.mem_modals .tooltip_wrap input.focus + .tool_tip,
.mem_modals .whats-this .tooltip_wrap:hover .tool_tip {
    display: block\9;
    margin-top: 1.5625em;
    opacity: 1;
    pointer-events: auto;
}
.mem_modals .tooltip_wrap .tool_tip {
    display: none\9;
    left: 1.875em;
    margin-left: 2px;
    margin-top: -1.5625em;
    opacity: 0;
    pointer-events:none;
    position: absolute;
    top: 1.25em;
    width: 300px;
    z-index: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.mem_modals .tooltip_wrap .tool_tip.tool_tip_bottom {
    bottom: 9.5em;
    top: auto;
}
.mem_modals .whats-this .tooltip_wrap {
    float: left;
    left: 100%;
    position: absolute;
}
.mem_modals .whats-this .tooltip_wrap > span {
    cursor: pointer;
    margin: 1em 0 0;
}
.mem_modals .whats-this.text_with_input .tooltip_wrap > span {
    margin: 0 0 0 18em;
}
.mem_modals .whats-this .tooltip_wrap .tool_tip {
    bottom: 5.625em;
    left: -146px;
}
.mem_modals .whats-this.text_with_input .tooltip_wrap .tool_tip {
    left: auto;
    right: -146px;
}
.mem_modals .whats-this.text_with_input .tooltip_wrap:hover .tool_tip {
    margin-top: 0.6875em;
}
.mem_modals .tooltip_wrap .tool_tip ul {
    background-color: #F7F7F7;
    border: 1px solid #DCDCDC;
    cursor: pointer;
    left: -2px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
}
.mem_modals .tooltip_wrap .tool_tip .arrow {
    border: none;
    border-bottom: .625rem solid #DCDCDC;
    border-left: .3125rem solid transparent;
    border-right: .3125rem solid transparent;
    content: '';
    left: 50%;
    margin-left: -.3125rem;
    position: absolute;
    top: -.625rem;
}
.mem_modals .tooltip_wrap .tool_tip.tool_tip_bottom .arrow {
    top: auto;
    bottom: -.625rem;
    border-bottom: none;
    border-top: .625rem solid #DCDCDC;
}
#RNVH110 .tooltip_wrap .pass_length .arrow {
    bottom: -5.5rem;
}
.mem_modals .tooltip_wrap .tool_tip .arrow::before {
    border: none;
    border-bottom: .5rem solid #F7F7F7;
    border-left: .25rem solid transparent;
    border-right: .25rem solid transparent;
    content: '';
    left: -4px;
    position: absolute;
    top: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.mem_modals .tooltip_wrap .tool_tip.tool_tip_bottom .arrow::before {
    border-bottom: none;
    border-top: .5rem solid #F7F7F7;
    bottom: 3px;
    top: auto;
}
.mem_modals .tooltip_wrap .tool_tip li.check .arrow::before {
    border-bottom-color: #E3F0E6;
}
.mem_modals .tooltip_wrap .tool_tip li {
    border-top: 1px dotted #DCDCDC;
    box-shadow: inset 0 1px #FFF;
    color: #1F7098;
    font: .8125em/1.62 "Helvetica", "Arial", sans-serif;
    letter-spacing: .025em;
    padding: .625em;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.mem_modals .tooltip_wrap .tool_tip li.check {
    background-color: #E3F0E6;
    box-shadow: inset 0 1px #F5FAF6;
}
.mem_modals .tooltip_wrap .tool_tip li:before{
    content: "\00D7";
    margin-right: 5px;
}
.mem_modals .tooltip_wrap .tool_tip li.check:before {
    content: '√';
}
.mem_modals .tooltip_wrap .tool_tip li.pass_strength:before,
.mem_modals .tooltip_wrap .tool_tip li.whats-this:before {
    content: '';
}
.mem_modals .tooltip_wrap .tool_tip li:first-child {
    border-top: none;
    box-shadow: none;
}
span.text_555 + .required {
    clear: left;
}
.mem_modals .required {
    float: left;
    position: relative;
}
.mem_modals .required:after {
    color: #999;
    content: '*';
    left: 1.0625em;
    position: absolute;
    top: 1em;
}
span.text_555 + span.optional {
    clear: left;
}
.mem_modals span.optional {
    float: left;
    position: relative;
}
.mem_modals span.optional::after {
    color: #999;
    content: ' ';
    left: 1.0625em;
    position: absolute;
    top: 1em;
}
a.fb, a.submit, a.big_blue_button {
    background-color: #3B76B8;
    border: none;
    border-radius: 4px;
    color: #FFF;
    cursor: pointer;
    float: left;
    font: .625em/1 "Helvetica", "Arial", sans-serif;
    font-weight: bold;
    height: auto;
    letter-spacing: .025em;
    margin: 1em 0 0 3em;
    padding: .8em 0 .7em;
    position: relative;
    text-align: center;
    text-decoration:none;
    text-transform: uppercase;
    width: 20em;
}
a.submit {
    width: 10em;
}
a.fb:hover, a.submit:hover, a.big_blue_button:hover {
    background-color: #0C4F81;
}
#cancel-button {
        background-color: #999;
        clear: none;
}
#cancel-button:hover {
    background-color: #CDCCCC;
}
a.fb::after{
    background-image: url('//media-channel.nationalgeographic.com/static-media/images/f_logo.png?cea3eb818590');
    content: "";
    height: 20px;
    left: .4em;
    position: absolute;
    top: .2em;
    width: 20px;
}
#login-native-button {
    clear: left;
    float: left;
    margin-left: 3em;
    margin-top: 2em;
}
.regwrap .submit {
    clear: none;
    margin: 0 3em 0 1em;
    float: right;
}
.regwrap .submit-cancel  {
    margin: 0 0 3em 0;
}
a.forgot, div.bottom {
    clear: left;
    float: left;
    margin: 1.154em 0 0 2.308em;
}
div.bottom {
    margin: 0 0 1.25em 1.875em;
}
.max_50 {
    float: left;
    position: relative;
}
.max_50 .required{
    clear: left;
}
.content_50 {
    float:left;
    height: 100%;
    position: relative;
    width: 50%;
}
.black_bg {
    background-color: #000;
}
.content_50 h1 {
    line-height: 1.25;
    margin: .833em 1.25em;
}
.black_bg h1 {
    margin-top: 0;
}
.black_bg h1:first-child{
    margin-bottom: 0;
    margin-top: .833em;
}
.content_50 #social-reg-button + span {
    clear: left;
    display: inline;
    float: left;
    line-height: 1;
    margin-left: 2.308em;
    margin-top: .769em;
}
#native-reg-button {
    clear: left;
}
.fb-facepile {
    clear: left;
    float: left;
    height: 1.875em;
    margin: 0.3em 0 0 1.875em;
    max-width: 10.625em;
    width: 10.625em;
}
body.mem_modals .fb-facepile {
    margin-top: -1em;
}
.white_bg {
    background-color: #FFF;
}
#RFBH110 .white_bg .bottom {
    bottom: 0;
    margin: 2.75em 0 0 0;
    position: relative;
    width: 100%;
}
#RFBH110 .white_bg .bottom > a{
    float: left;
}
#RFBH110 .white_bg .bottom .already{
    float: left;
    margin-left: 3em;
}
#RFBH110 .white_bg .bottom > a:nth-of-type(2) {
    clear: left;
    margin: .3em 0 .7em 3em;
}
#RFBH110 .white_bg .bottom hr, form + hr {
    clear: left;
}
.text_999_small.tos a{
    float: none;
}
.text_999_small.tos {
    float: left;
    margin: 0 1.76em 1.76em 3.33em;
}
.blurbs {
    margin: 1.6em 0 0 1.875em;
}
.blurbs img {
    float: left;
    margin-bottom: 1.25em;
    vertical-align: text-top;
    width: 1.5625em;
}
.blurbs .clear{
    clear: left;
    height: auto;
    font-size: inherit;
}
.blurbs span {
    float: left;
    margin-left: 1em;
    margin-right: 0;
    width: 11em;
}
.blurbs img:first-child + span, .blurbs .clear + span {
    margin-right: 2.2em;
    width: 10em;
}
.max_50 .already, .max_50 a {
    clear: left;
    float: left;
    margin: 1.308em 0 0 2.308em;
}
.max_50 a.reg_previous_user {
    clear: none;
    margin: 0;
}
.max_50 .already + a {
    clear: none;
    margin: 1.308em 0 0 0;
}
.max_50 .already + a + a {
    margin-top: 0;
}

#resend-activation-link {
    margin-top: 10px;
}

#resend-activation-link-button {
    background-color: #3B76B8;
    border: none;
    border-radius: 4px;
    color: #FFF;
    font: .625em/1 "Helvetica", "Arial", sans-serif;
    font-weight: bold;
    height: auto;
    letter-spacing: .025em;
    padding: 0.6em 1em 0.4em;
    text-align: center;
    text-decoration:none;
    font-size:1em;
    cursor: pointer;
}
#resend-activation-link-button:hover {
    background-color: #0C4F81;
}
#resend-activation-email {
    float: none;
    width: 15em;
    clear:none;
    font: 10.5667px "Helvetica", "Arial", sans-serif; 
}

/*
#resend-activation-link-button {
    text-transform: none;
    font-size: 1em;
    padding: 0.4em 1em;
    margin: 1em 0 0 0.5em;
}
#resend-activation-link-button-deactivated {
    text-transform: none;
    font-size: 1em;
    padding: 0.4em 1em;
    margin: 1em 0 0 0.5em;
    background-color:#999999;
}
*/
/*----------------------RNVH120----------------------*/
#reg-avatar-container {
    float: left;
}
#reg-avatar-container .profile-image-container {
    float: left;
    min-height: 70px;
    min-width: 100px;
    position: relative;
}
#reg-avatar-container .profile-image-container form {
    display: block;
    height: 27px;
    left: 30px;
    opacity: 0;
    position: absolute;
    top: 77px;
    width: 107px;
    z-index: 2;
}
#RFBH150 #reg-avatar-container .profile-image-container form {
    top: 92px;
}
#reg-avatar-container .profile-image-container form:hover {
    cursor: pointer;
}
#reg-avatar-container input {
    cursor: pointer;
    display: block;
    filter: alpha(opacity=0);
    height: 27px;
    width: 107px;
}
#reg-avatar-container input:hover {
    cursor: pointer;
}
#reg-avatar-container form:hover + a {
    background-color: #CDCCCC;
}
#RNVH120 #avatar-file-name,
#RFBH150 #avatar-file-name {
    display: none;
}
.max_50 a.choose_file {
    background-color: #EEEDEE;
    border: 1px solid #9A9B9B;
    border-radius: 4px;
    bottom: -3.7em;
    color: #5685BD;
    cursor: pointer;
    display: inline-block;
    float: left;
    font: .625em/1 "Helvetica", "Arial", sans-serif;
    font-weight: bold;
    height: auto;
    left: 0;
    letter-spacing: .025em;
    margin: 0 0 0 3em;
    padding: .8em 0 .7em;
    position: absolute;
    text-align: center;
    text-decoration:none;
    text-transform: uppercase;
    vertical-align: -.1em;
    width: 10.5em;
}
.choose_file.error, .max_50 a.choose_file.error {
    border-color: #F00;
}
#RFBH150 #reg-avatar-container a.choose_file {
    height: 1em;
    top: 9.2em;

    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
#RNVH120 .profile-image-container span.error,
#RFBH150 .profile-image-container span.error {
    left: 0;
    margin-top: 8.77em;
    position: absolute;
    width: 280px;
}
#RFBH150 .profile-image-container span.error {
    margin-top: 9.77em;
}
#reg-avatar-container a.choose_file:hover {
    background-color: #CDCCCC;
}
img.avatar {
    float: left;
    height: auto;
    margin: .625em .625em 0 1.875em;
    max-width: 3.75em;
    max-height: 3.75em;
    width: auto;
}
.mem_modals .size_limit {
    display: inline-block;
    font-size: 13px;
    margin: 0 0 0px 10px;
    vertical-align: -1px;
}
#reg-avatar-container .size_limit {
    bottom: -34px;
    left: 136px;
    position: absolute;
    width: 100px;
}
#RFBH150 #reg-avatar-container .size_limit{
    bottom: -3.54em;
}
p.welcome {
    float: left;
    line-height: 1;
    margin: .3125em 0 0 0;
    width: 15em;
}
p.welcome span {
    line-height: 1;
}
p.welcome br {
    line-height: 1;
}
p.welcome + a {
    margin-top: 0;
}
#native-reg-final-form > span:first-child, #social-reg-form > span:first-child {
    line-height: 1;
    margin-left: 2.308em;
}
.text_555.required {
    margin-top: 1em;
    padding: 1em 0 0 2.308em;
}
.text_555.required::after {
    left: 1.308em;
}
#native-reg-final-form .text_555.required, #social-reg-form .text_555.required {
    margin: 4.154em 0 .769em;
}
div.whats-this {
    position: relative;
}
div.whats-this.text_with_input {
    margin-left: 1.875em;
}
span.forgot_text {
    float: left;
    line-height: 1.308;
    margin: .769em 0 0 2.308em;
    padding-bottom: 2em;
}
div.forgot_text {
    float: left;
}
a.submit.retrieve {
    clear: left;
    float: left;
    margin-bottom: 7.5em;
    margin-left: 3em;
    margin-top: 2em;
    width: 15em;
}
div.alert {
    position: relative;
    text-align: left;
}
div.banner {
    background-color: #EEE;
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 6000;
}
.alert.banner {
    position: relative;
    z-index: auto;
    color: #333;
}
div.banner-wrap {
    width: 100%;
    max-width: 990px;
    padding: 1.875em .625em;
    position: relative;
    margin: 0 auto;
}
.banner-wrap > * {
    max-width: 940px;
}
div.banner a, div.banner input {
    float: none;
}
div.banner a.submit {
    padding: .8em 4em .7em 4em;
}
#closereg, #close-banner {
    color: #333;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    margin: .3em .573em;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: 0;
    z-index: 2;
-webkit-transition: opacity .2s ease;
   -moz-transition: opacity .2s ease;
    -ms-transition: opacity .2s ease;
     -o-transition: opacity .2s ease;
        transition: opacity .2s ease;
}
#closereg:hover, #close-banner:hover{
    color: #999;
}

/*----------------------LOADER----------------------*/
.reg_loading {
    background: url('//media-channel.nationalgeographic.com/static-media/images/nationalGeographic_loader_bg.png?c936a83646ca')\9;
    background: rgba(255, 255, 255, .5);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 2;
}
.reg_loading_spinner {
    display: block;
    left: 50%;
    margin: -1em 0 0 -1em;
    position: relative;
    top: 50%;
}
.reg_loading_text {
    display: block;
    margin-top: 1em;
    position: relative;
    top: 50%;
}

/*----------------------LIVEFYRE----------------------*/

.lf_listener_count {
    background: url('//media-channel.nationalgeographic.com/static-media/images/nationalGeographic_followers.png') right no-repeat !important;
    color: #A6A6A6 !important;
    float: right !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 3px 25px 0 0 !important;
}
div.fyre-listener-avatars a {
    width/*\**/: 25px\9;
}
.lf_action_bar {
    background: #ECECEC !important;
    background-image: -webkit-gradient(linear, left top, left-bottom, color-stop(0%,#F7F7F7), color-stop(100%,#E2E2E2));
    background-image: -webkit-linear-gradient(top, #F7F7F7 0%,#E2E2E2 100%)!important;
    background-image:    -moz-linear-gradient(top, #F7F7F7 0%,#E2E2E2 100%)!important;
    background-image:     -ms-linear-gradient(top, #F7F7F7 0%,#E2E2E2 100%)!important;
    background-image:         linear-gradient(top, #F7F7F7 0%,#E2E2E2 100%)!important;
    border: 1px solid #A1A1A1 !important;
    border-top: 1px solid #CCC !important;
    height: 29px !important;
    margin: -1px 0 0 !important;
}
.lf_post {
    background: #034E8F !important;
    border: none !important;
    border-left: 1px solid #A1A1A1 !important;
    border-radius: 0 !important;
    color: #FFF !important;
    margin: 0 !important;
    padding: 3px 20px 2px!important;
    text-shadow: none !important;
    text-transform: uppercase !important;
}
.lf_share_post {
    margin: 0 !important;
    padding: 6px !important;
}
.lf_follow_link {
    margin: 0 !important;
    padding: 9px 6px !important;
}
.fyre {
    color: #000;
    font-family: "Helvetica", "Arial", sans-serif;
    margin: 0 auto !important;
    position: relative;
    width: 100% !important;
}
.fyre-widget {
    padding-bottom: 30px !important;
}
.fyre-widget .fyre-logo-drop, .fyre-widget .fyre-logo-help, .fyre-widget .fyre-help {
    display: none !important;
}
.powered_by_livefyre a {
    background: url('http://zor.livefyre.com/wjs/v1.0/images/icons/poweredbylivefyre.png') no-repeat left top !important;
    bottom: 10px;
    clear: both;
    color: #404040 !important;
    display: block;
    font: 13px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    height: 24px;
    padding-left: 28px;
    padding-top: 6px;
    right: 0;
    text-decoration: none;
}
.powered_by_livefyre a:hover {
    text-decoration: underline;
}
.fyre-comment-count span {
    border-left: 8px solid #FC0;
    color: #2F3437 !important;
    margin-left: -2px !important;
    padding-left: 10px !important;
}
.fyre-login-bar a {
    color: #256995 !important;
}
.fyre-editor-container, .fyre-editor-editable, .goog-inline-block {
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}
.fyre-editor-editable {
    background: #fff !important;
    background: hsal(0, 100%, 100%, .2) !important;
    border-color: #CCC !important;
}
.fyre-post-button {
    background: #024E8F !important;
}
div.fyre-editor-toolbar div.goog-toolbar > div.fyre-post-button,
div.fyre-editor-toolbar div.goog-toolbar > div.fyre-post-button-enabled:active { 
    filter: none;
}
.goog-inline-block .fyre-button-right-inner-box {
    color: #FFF !important;
    text-shadow: none !important;
}
.goog-tooltip .tooltip {
    bottom: 1.5em;
    display: inline-block;
    left: 0;
    margin-left: -175px;
    position: relative;
}
body .goog-tooltip {
    background: none;
    min-width: 0;
    padding: 0;
    width: 200px;
}
body .goog-tooltip .arrow-down {
    display: none;
}
.fyre .fyre-comment-stream .fyre-stream-sort {
    color: #333 !important;
    font-weight: bold !important;
    margin-bottom: 24px;
    padding-bottom: 14px;
    text-transform: uppercase;
}
.fyre .fyre-comment-stream .fyre-stream-sort a {
    color: #999 !important;
}
.fyre .fyre-comment-stream .fyre-stream-sort a:first-child {
    color: #256995 !important;
}
.fyre-comment-head {
    background: transparent;
    height: auto;
}
.fyre-comment-body {
    margin: 50px 0 0 !important;
}
.fyre-comment-divider {
    margin-bottom: 26px !important;
}
.fyre-comment-divider > .fyre-comment-divider {
    background: transparent !important;
    border-top: 1px dotted #9D9D9D;
    margin: 0 !important;
}
/* Hide the @ and +Follow buttons in the comment stream input box */
.fyre-mention-button {
display: none !important;
}

.fyre-follow-button {
display: none !important;
}

.fyre-mention-menu.fyre-mention-menu-vertical {
display: none !important;
}

/* Hide the dropdown menu above the comment input box; display name to right of avatar */
.fyre .fyre-login-bar .fyre-box-wrapper {
    max-width: 100% !important;
}

.fyre .fyre-box-wrapper:hover .fyre-box-list{
    display: none !important;
}

.fyre .fyre-box-wrapper:hover {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
}

.fyre .fyre-box-wrapper span.fyre-user-drop {
    background: none !important;
}

.fyre .fyre-login-bar img {
    display: inline-block !important;
}

.fyre-user-drop {
    padding-left: 0.5em;
}
.fyre .fyre-comment-author-tag-expert .fyre-comment-author {
    border-left: 14px solid #FC0;
    margin-left: -14px;
}
.fyre .fyre-comment-author img.fyre-user-avatar {
    border: none !important;
    border-radius: 0;
}
.fyre-modal {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 62.5%;
    line-height: 1.6;
}
body .fyre-modal .fyre-modal-buttons > button {
    background-color: #15518a;
    background-image: none;
    color: white;
    font: .9em/1 "Din", "Helvetica", "Arial";
    padding-top: 5px;
    text-transform: uppercase;
}
body .fyre-modal .fyre-modal-buttons > button[name=cancel],
body .fyre-modal .fyre-modal-buttons > button[name=ok] {
    font: 1.8em/1 "Din", "Helvetica", "Arial";    
}
body .fyre-modal .fyre-modal-header, body .fyre-modal .fyre-modal-title {
    background-color: #f9c933;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    text-align: left;
    padding-left: 10px;    
}
body .fyre-modal .fyre-modal-title .fyre-modal-title-text {
    color: black;
    font: .9em/1 "Helvetica", "Arial", sans-serif;
}
body .fyre-modal .fyre-modal-close, body .fyre-modal .fyre-modal-title-close {
    right: 5px;
    left: auto;
    background: none;
}
body .fyre-modal .fyre-modal-close:active, body .fyre-modal .fyre-modal-title-close:active {
    background: none;
}
body .fyre-modal .fyre-modal-close:after, body .fyre-modal .fyre-modal-title-close:after {
    content: "X";
    color: black;
    position: relative;
    top: -1px;
    font-size: 12px;
}

/**
 * @workaround: livefyre css override for WPF and Vii
 */
 body .fyre-modal .fyre-modal-flag-form .fyre-modal-textfield {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 2px;
 }

/* captcha */
#login-form #recaptcha-container {
    position: absolute;
    right: 15px;
    bottom: 15px;
}