/* TOC
  ---------------------------------------------------------

  Typography
    General
    Links
    Headings
    Lists
    Paragraphs/Text
    Inline Icons

  Buttons
    Plain Button
    Right Arrow Button
    Left Arrow Button
    Disabled Button (span tag)
    Special Buttons (w/Icons)

  Basic Structure
    Body/Container

  Header
    Utility Bar
    Brand (Logo)

  Navigation
    Links
    Dropdowns

  Footer
    Footer Contents
    Bottom Contents

  Heroes
    Banners
    Figures
    Messages
    Landing Page Headings

  Content Structure
    Main Column
    Sidebar

  Sidebar Contents
    Liturgical Resources
    Highlights
    Subnavigation

  Articles
    Typography
    Header
    Breadcrumbs
    Pagination
    Date Browser (Date Pagination)
    Article Footer
    Figures (Images)

  Re-usables
    Floating
    Local Search Box
    Calendar Table (not used)

  Landing Pages
    Intro Typography

  Galleries
    Figures

  News
    Featured Stories

  Helper Classes

  Special Layouts (Responsive Design)
    Media Queries

  */

* { box-sizing: border-box; }

/* Wrapping file in media selector to keep it from print */
/* @media screen and print {*/
  /* BEGIN: reset.css */
  html, body, div, span, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  main, article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }

  blockquote, q {
    quotes: none;
  }

  blockquote:before, blockquote:after,
  q:before, q:after {
    content: "";
    content: none;
  }

  ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
  }

  mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
  }

  del {
    text-decoration: line-through;
  }

  abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
  }

  input, select {
    vertical-align: middle;
  }

  /* END: reset.css */


input {padding: .4em;}

select {
    vertical-align: middle;
    border-radius: 4px;
    box-shadow: 1px 1px 3px #ddd;
    border:none;
    background: #efefef;
    /* background: rgba(112, 144, 179, .18);*/
    padding:.6em;
    cursor: pointer;
  }

/* } */

/* BEGIN: base.css */
/* @media screen {*/

  /* Typography
  --------------------------------------------------------- */

  body {
    font: 13px/1.231 sans-serif;
  }

  pre, code, kbd, samp {
    font-family: monospace, sans-serif;
  }

  html {
    overflow-y: scroll;
  }

  a:hover, a:active {
    outline: none;
  }

  ul, ol {
    margin-left: 2em;
  }

  nav ul, nav li {
    margin: 0;
    list-style: none;
    list-style-image: none;
  }

  small {
    font-size: 85%;
  }

  strong, th {
    font-weight: bold;
  }

  td {
    vertical-align: top;
  }

  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 15px;
  }

  textarea {
    overflow: auto;
  }

  input[type="radio"] {
    vertical-align: text-bottom;
  }

  input[type="checkbox"] {
    vertical-align: bottom;
  }

  label, input[type="button"], input[type="submit"], input[type="image"], button {
    cursor: pointer;
  }

  button, input, select, textarea {
    margin: 0;
  }

  input:invalid, textarea:invalid {
    border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
    -webkit-box-shadow: 0px 0px 5px red;
    box-shadow: 0px 0px 5px red;
  }

  .no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
    background-color: #f0dddd;
  }

  ::-moz-selection {
    background: #6495b5;
    color: #FFF;
    text-shadow: none;
  }

  ::selection {
    background: #6495b5;
    color: #FFF;
    text-shadow: none;
  }

  a:link {
    -webkit-tap-highlight-color: #6495b5;
  }

  button {
    width: auto;
    overflow: visible;
  }

  body, select, input, textarea {
    color: #555;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
  }

  hr {
    border-color: #DFE1E1;
    margin: 0 0 1em;
  }

  /* General Stuff */
  body {
    font-family: "Lucida Fax",Georgia,serif;
  }

  em {
    font-style: italic;
  }

  strong {
    font-style: bold;
  }

  /* Links */
  a {
    color: #6092b6;
    text-decoration: none;
    overflow-wrap: break-word;
  }

  a:hover {
    color: #333;
  }

  a:active {
    position: relative;
    top: 1px;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1em;
  }

  h1 {
    font-size: 3em;
    color: #333;
    font-family: "chaparral-pro", "Lucida Fax", serif;
    margin-bottom: 0.25em;
  }

  /* while TypeKit is loading let's not render the type */
  .wf-loading h1 {
    visibility: hidden;
  }

  h2 {
    font-size: 1.5em;
    margin-bottom: 0.75em;
  }

  h3 {
    font-size: 1em;
    margin-bottom: 0.5em;
  }

  h4 {
    font-size: 0.875em;
  }

  h5 {
    font-size: 0.75em;
  }

  h6 {
    font-size: 0.6875em;
  }

  /* Lists */
  ul, ol, dl {
    margin-bottom: 1.5em;
  }

  ul li,
  ol li {
    margin-bottom: .5em;
  }

  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin-bottom: 0;
    margin-top: .5em;
  }

  .unstyled {
    margin-left: 0;
  }

  .unstyled li {
    list-style: none;
  }

  dl {
    margin-bottom: 2em;
  }

  dl dt {
    font-weight: bold;
    color: #666;
  }

  dl dd {
    margin-bottom: 0.5em;
    color: #999;
  }

  /* Paragraphs and other text blocks */
  p {
    margin-bottom: 1.5em;
    line-height: 1.5em;
  }

  blockquote, q {
    font-style: italic;
  }

  .pullquote {
    font-size: 115%;
    font-style: italic;
    padding-left: 1em;
    border-left: 0.25em solid #CCC;
    color: #999;
  }

  .alignleft .pullquote {
    padding-left: 0;
    padding-right: 1em;
    border-left: none;
    border-right: 0.25em solid #CCC;
  }

  pre {
    margin-bottom: 1em;
    background-color: #777;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ddd;
  }

  [class^="icon-"],
  [class*=" icon-"] {
    display: inline-block;
    width: 8px;
    height: 11px;
    line-height: 1em;
    vertical-align: middle;
    position: relative;
    top: -1px;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
   	transition: all .25s ease-out;
  }

  /* Buttons
  --------------------------------------------------------- */
  /* Plain Button */
  .button,
  a span.button {
    border: 1px solid #DDD;
    display: inline-block;
    text-decoration: none;
  }

  .button span,
  a span.button span {
    display: inline-block;
    border: 1px solid #FFF;
    padding: 5px 15px 3px 15px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f6));
    background-image: -webkit-linear-gradient(#ffffff, #f5f5f6);
    background-image: -moz-linear-gradient(#ffffff, #f5f5f6);
    background-image: -o-linear-gradient(#ffffff, #f5f5f6);
    background-image: linear-gradient(#ffffff, #f5f5f6);
    text-shadow: 0px 1px 0px #FFF;
    font-family: "chaparral-pro", "Lucida Fax", serif;
    text-decoration: none;
    color: #6092b6;
    vertical-align: middle;
    line-height: 1.5em;
  }

  /* while TypeKit is loading let's not render the type */
  .wf-loading .button span,
  .wf-loading a span.button span {
    visibility: hidden;
  }

  /* This isn't fully tested... */
  .button span img {
    vertical-align: middle;
    position: relative;
    top: -0.125em;
  }

  /* Hover */
  .button:hover,
  a span.button:hover {
    border-color: #74a4c6;
  }

  .button:hover span,
  a span.button:hover span {
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ebebec));
    background-image: -webkit-linear-gradient(#ffffff, #ebebec);
    background-image: -moz-linear-gradient(#ffffff, #ebebec);
    background-image: -o-linear-gradient(#ffffff, #ebebec);
    background-image: linear-gradient(#ffffff, #ebebec);
    color: #5484A6;
  }

  /* Active */
  .button:active,
  a span.button:active {
    position: static;
    border-color: #333;
  }

  .button:active span,
  a span.button:active span {
    color: #333;
  }

  /* Right Arrow Button */
  .next-button span,
  a span.next-button span {
    padding-right: 6.1em;
    padding-left: .8em !important;
    background: #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
    background-image: url(i/blue-right-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f6));
    background-image: url(i/blue-right-arrow.png), -webkit-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(i/blue-right-arrow.png), -moz-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(i/blue-right-arrow.png), -o-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(i/blue-right-arrow.png), linear-gradient(#ffffff, #f5f5f6);
  }

  /* Hover */
  .next-button span:hover,
  a span.next-button:hover span {
    background: #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
    background-image: url(i/blue-right-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ebebec));
    background-image: url(i/blue-right-arrow.png), -webkit-linear-gradient(#ffffff, #ebebec);
    background-image: url(i/blue-right-arrow.png), -moz-linear-gradient(#ffffff, #ebebec);
    background-image: url(i/blue-right-arrow.png), -o-linear-gradient(#ffffff, #ebebec);
    background-image: url(i/blue-right-arrow.png), linear-gradient(#ffffff, #ebebec);
  }

  /* Active */
  /* Left Arrow Button */
  .previous-button span,
  a span.previous-button span {
    padding-left: 2.6em;
    background: #f5f5f5;
    background-repeat: no-repeat;
    background-position: left 50%;
    background-image: url(i/blue-left-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f6));
    background-image: url(i/blue-left-arrow.png), -webkit-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(i/blue-left-arrow.png), -moz-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(i/blue-left-arrow.png), -o-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(i/blue-left-arrow.png), linear-gradient(#ffffff, #f5f5f6);
  }

  /* Hover */
  .previous-button span:hover,
  a span.previous-button:hover span {
    background: #f5f5f5;
    background-repeat: no-repeat;
    background-position: left 50%;
    background-image: url(i/blue-left-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ebebec));
    background-image: url(i/blue-left-arrow.png), -webkit-linear-gradient(#ffffff, #ebebec);
    background-image: url(i/blue-left-arrow.png), -moz-linear-gradient(#ffffff, #ebebec);
    background-image: url(i/blue-left-arrow.png), -o-linear-gradient(#ffffff, #ebebec);
    background-image: url(i/blue-left-arrow.png), linear-gradient(#ffffff, #ebebec);
  }

  /* Active */
  /* Disabled Button */
  span.button,
  span.button:hover,
  span.button:active {
    border-color: #DDD;
    color: #CCC;
  }

  span.button span,
  span.button:hover span,
  span.button:active span {
    color: #CCC;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f6));
    background-image: -webkit-linear-gradient(#ffffff, #f5f5f6);
    background-image: -moz-linear-gradient(#ffffff, #f5f5f6);
    background-image: -o-linear-gradient(#ffffff, #f5f5f6);
    background-image: linear-gradient(#ffffff, #f5f5f6);
  }

  /* Buttons with images (icons) are slightly larger. */
  .image-button,
  a span.image-button {
    font-size: 1.2em;
  }

  .image-button .icon,
  a span.image-button .icon {
    padding-right: 10px;
  }

  /* Big button with red type */
  .big-button:active {
    position: relative;
    top: 1px;
  }

  .big-button span {
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px 1px;
    position: relative;
    font-family: "Lucida Fax",Georgia,serif;
  }

  .big-button.red span {
    color: #9F4138;
    font-weight: normal;
  }

  .big-button span img {
    margin-right: 2px;
    position: relative;
    vertical-align: middle;
    left: -4px;
    top: -1px;
  }

  .big-button span img.thumb {
    border: 1px solid #DDD;
  }

  .big-button.red:hover {
    border-color: #9F4138;
  }

  .big-button.red:hover span {
    color: #9F4138;
  }

  .big-button.with-arrow span {
    padding-right: 24px;
  }

  .big-button.with-arrow span:after {
    content: "";
    width: 8px;
    height: 11px;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    background: url(i/blue-right-arrow2.png);
  }

  /* Full-width varient for buttons */
  .button.full-width {
    display: block;
    margin-bottom: 0.5em;
  }

  .button.full-width span {
    display: block;
  }

  /* Basic Structure
  --------------------------------------------------------- */
  body {
    background: #efefef url(i/bg.png) center top;
  }

  #container {
    background: transparent url(i/bg-top-fade.png) repeat-x scroll center top;
  }

  #container-inner {
    background: #fcfcfc url(i/bg-lighter2.png) repeat-y scroll center top;
    margin: 0 auto;
    max-width: 1000px;
  }

  #main {
    z-index: 1;
  }

  /* Header
  --------------------------------------------------------- */
  #header {
    background: transparent url(i/bg-top-fade2.png) no-repeat scroll center top;
    position: relative;
    z-index: 2;
  }

  /* Utility Bar */
  #utility {
    background-color: #E1E2E3;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-size: 11px;
    padding: 5px;
    float: right;
    margin-right: 30px;
    margin-bottom: 17px;
  }
  #utility ul {
    float: left;
    list-style: none;
    margin: 0;
  }

  #utility li {
    float: left;
    margin: 0;
    margin-left: 10px;
  }

  #utility li a {
    display: block;
    line-height: 19px;
    color: #7d7d7d;
  }

  #utility li a:hover {
    color: #555;
  }

  #utility form {
    float: right;
    margin-left: 10px;
  }

  #utility form label {
    display: none;
  }

  #utility #search {
    display: block;
    border: 1px solid #8d8d8d;
    padding: 3px 3px 3px 20px;
    background: white url(i/mag-glass.png) no-repeat scroll 1px 1px;
  }

  #utility #search:focus {
    background-position: 1px -18px;
    border-color: #74a4c6;
    color: #5d8faf;
  }

  /* Brand */
  #header .brand {
    position: absolute;
    left: 37px;
    margin-top: 20px;
  }
  #header .brand a:active {
    top: auto;
  }

  /* Navigation
  --------------------------------------------------------- */
  #navigation {
    margin-left: 153px;
    margin-right: 20px;
    margin-bottom: 17px;
    clear: right;
    position: relative;
    z-index: 500;
  }
  #navigation ul li {
    width: 80%;
    float: left;
    position: relative;
    margin: 0;
  }
  #navigation ul li > a {
    display: block;
    /*border-right: 1px solid #DFE1E1;*/
    padding: 0.5em 17px 0.6em;
    /* min-height: 4.2em;*/
  }
  #navigation ul li:first-child a {
    padding-left: 0;
  }
  #navigation ul li:nth-child(5) a {
    border-right: none;
    padding-right: 0;
  }
  #navigation li a {
    text-decoration: none;
    color: #9F4138;
    font-family: "chaparral-pro", "Lucida Fax", serif;
  }

  /* while TypeKit is loading let's not render the type */
  .wf-loading #navigation li a {
    visibility: hidden;
  }

  #navigation li a strong {
    display: block;
    font-weight: normal;
    font-size: 36px;
    /*margin-bottom: 2px;*/
  }
  #navigation li a small {
    color: #534D4B;
    font-size: 13px;
    display: block;
    height: 2.5em;
    line-height: 1.25em;
    overflow: hidden;
    text-overflow: ellipsis;
  }


@media screen and (min-width: 410px) {
  #navigation {
    margin-top: 72px;
    margin-bottom: 25px;
  }
  #navigation li a strong {
    font-size: 17.5px;
  }
  #navigation ul li {
      width: 20%;
  }
  /*
  #navigation ul li.about {
    width: 18%;
  }
  
  #navigation ul li.news-media {
    width: 18%;
  }

  #navigation ul li.orthodoxy {
    width: 23%;
  }

  #navigation ul li.directories {
    width: 17%;
  }

  #navigation ul li.work {
    width: 24%;
  }*/
  #navigation ul li {
    width:auto;
    padding-right: 4.4%;
}


}

@media screen and (min-width: 769px) {
    
    #navigation ul li {
    padding-right: 1% !important;
        margin-bottom: 1em;
}
}
@media screen and (min-width: 978px) {
    
    #navigation ul li {
    padding-right: 4.4% !important;
        margin-bottom:0;
}
}

#navigation ul li>a {
    margin-right: 10px;
    padding: 0;
}
#navigation ul li>a strong {
    border-bottom: 2px solid #ccc;display:inline-block;
padding-bottom:4px;

}

#navigation ul li>a strong:hover {
    border-color: #6091b5;}


  /* Hovers */
  #navigation li a:hover,
  #navigation li.hover > a {
    color: #730C05;
  }

  #navigation li a:hover small,
  #navigation li.hover > a small {
    color: #635D6C;
  }

  /* On */
  .about #navigation li.about > a,
  .orthodoxy #navigation li.orthodoxy > a,
  .directories #navigation li.directories > a,
  .work #navigation li.work > a {
    color: #222;
  }

  .about #navigation li.about > a strong,
  .orthodoxy #navigation li.orthodoxy > a strong,
  .directories #navigation li.directories > a strong,
  .work #navigation li.work > a strong {
    color: #111;
  }

  #navigation ul li ul {
    border: 1px solid #DFE1E1;
    position: absolute;
    left: -8%;
    background-color: #FDFDFD;
    width: 98%;
    margin: 0;
    padding: 15px 9% 5px;
    display: none;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
    /*z-index:498;*/
    z-index: 999;
    left: -2%;
    width: 85%;
  }

  #navigation ul li .dropdown:before {
    content: url(i/dropdown-triangle.png);
    position: absolute;
    top: -0.95em;
    left: 10%;
    z-index: 999;
    width: 20px;
    height: 8px;
  }

  #navigation ul li.orthodoxy .dropdown:before {
    left: 12%;
  }

  #navigation ul li.directories .dropdown:before {
    left: 12%;
  }

  #navigation ul li.work .dropdown:before {
    left: 13%;
  }

  #navigation ul li.about ul {
    left: -10%;
    width: 93.25%;
  }

  #navigation ul li.work ul {
    width: 85%;
  }

  #navigation ul ul li {
    float: none;
    border: none;
    width: auto;
    padding: 0;
    margin: 0;
    clear: both;
    margin-bottom: 5px;
  }

  #navigation ul ul li a {
    float: none;
    border: none;
    width: auto;
    padding: 0;
    color: #555;
    font-weight: normal;
    min-height: inherit;
  }

  #navigation ul ul li a:hover {
    color: #333;
    text-decoration: underline;
  }

  #navigation ul ul ul {
    position: static;
    border: none;
    width: auto;
    background: none;
    padding: 0;
    margin-bottom: 1em;
  }

  #navigation ul ul ul li {
    float: left;
    clear: none;
    width: 50%;
    margin: 0;
  }

  #navigation ul ul ul li a {
    border-bottom: 0;
    font-weight: normal;
    color: #666;
  }

  #navigation ul ul ul li a {
    color: #555;
  }

  #navigation ul li.about ul {width: 150%;}
  #navigation ul li.news-media ul {}
  #navigation ul li.orthodoxy ul {width: 100%;}
  #navigation ul li.directories ul {width: 130%;}
  #navigation ul li.work ul {width: 100%;}

  /* Footer
  --------------------------------------------------------- */
  #footer-border {
    height: 2px;
    margin: 0;
    background-color: #e4e4e4;
    border: none;
  }

  .done-loading #footer-border {
    background: #e4e4e4 url(i/bg-footer-hr.png) repeat-x scroll center 0px;
  }

  #footer {
    background-color: #d4d4d4;
    text-shadow: 0px 1px 0px #FFF;
  }

  .done-loading #footer {
    background: #d4d4d4 url(i/bg-footer.png) repeat scroll center top;
  }

  #footer-inner {
    background-color: #e3e3e3;
    margin: 0 auto;
    max-width: 1000px;
  }
  .done-loading #footer-inner {
    background: #e3e3e3 url(i/bg-footer-sides.png) repeat-y scroll center top;
  }
  #footer-contents {
    background-color: #e3e3e3;
    margin: 0 10px;
    padding: 4em;
    position: relative;
  }
  .done-loading #footer-contents {
    background: #e3e3e3 url(i/bg-footer-lighter.png) center top;
  }

  #footer-contents h1 {
    font-size: 2.25em;
    margin-bottom: 0.5em;
    max-width: 60%;
    position: relative;
    z-index: 2;
  }
  #footer-contents p {
    max-width: 54%;
    font-style: italic;
    position: relative;
    z-index: 2;
  }

  #footer-contents .button {
    font-size: 140%;
    position: relative;
    z-index: 2;
  }

  #footer-contents .domes {
    position: absolute;
    bottom: 0px;
    right: 4.5%;
  }

  .done-loading #footer-contents .domes {
    background: url(i/domes_4522ed59660028314bf10722b01db4ce.png) no-repeat;
    width: 257px;
    height: 351px;
  }

  #bottom {
    background-color: #b3b3b3;
  }

  .done-loading #bottom {
    background: #b3b3b3 url(i/bg-footer-darker.png) repeat scroll center top;
  }

  #bottom-inner {
    padding: 1em 0 1.25em;
    margin: 0 auto;
    max-width: 980px;
    color: #fff;
    text-shadow: 0px -1px 0px #9c9c9c;
  }
  #bottom hr {
    margin: 1em 0;
  }

  #bottom p {
    margin: 0;
  }

  #bottom a {
    color: #fff;
  }

  #bottom .tag {
    font-style: italic;
    font-size: 125%;
  }

  #bottom .copyright {
    float: left;
  }

  #bottom .utility {
    float: right;
  }

  /* Heroes & Banners
  --------------------------------------------------------- */
  #hero,
  #banner {
    margin-bottom: 27px;
    border: 1px solid #DFE1E1;
    background-color: #FFF;
    font-family: "chaparral-pro", "Lucida Fax", serif;
    font-weight: normal;
    font-size: 14px;
  }

  #hero-contents,
  #banner-contents {
    background: #b44030 url(i/bg-red-texture-tile.jpeg) scroll repeat right top;
  }

  #hero {
    padding: 4px;
  }
  #hero figure {
    float: left;
    width: 62.57%;
    overflow: hidden;
    height: auto;
    position: relative;
  }
  #hero figure img {
    height: auto;
    width: 100%;
  }
  #hero .message {
    float: right;
    width: 37.43%;
  }
  #hero .message h1 {
    padding: 1.25em 25px .5em;
    font-weight: normal;
    font-size: 23px;
    line-height: 1.25em;
    margin: 0;
  }
  #hero .message h1.section-title {
    font-size: 2.5em;
    padding-top: .7em;
  }
  #hero .message h2 {
    font-weight: normal;
    font-size: 1.2em;
  }
  #hero .message h2, #hero .message h3, #hero .message h4, #hero .message h5, #hero .message h6 {
    padding: 0 25px;
  }
  #hero .message p {
    padding: 0 25px 1.5em;
    margin: 0;
  }
  #hero .message .answer {
    font-style: italic;
  }
  #hero .message .quote {
    font-style: italic;
    font-weight: normal;
  }
  #hero .message .source {
    text-transform: uppercase;
  }

  /* Landing Page Heading */
  #hero-contents #content-header {
    padding: 1.4em 25px 1em;
    margin: 0;
  }

  #hero-contents > img {
    width: 100%;
    max-width: 100%;
    display: block;
  }

  #banner a.text-link, #hero a.text-link {
    text-decoration: none;
    padding: 0.31em 0.5em 0.2em;
    border-radius: 0.4em;
  }
  #banner .feature {
    float: left;
    width: 62.57%;
    position: relative;
  }
  #banner .feature a.text-link {
    display: inline-block;
    margin-right: 8px;
  }
  #banner .feature .links {
    margin: 6px 0px 6px 10px;
  }
  #banner .today {
    float: right;
    width: 37.43%;
    padding: 15px 0;
  }
  #banner .today h3 {
    display: none;
    margin-left: 10px;
  }
  #banner .today a.text-link {
    font-size: 16px;
  }
  #banner ul {
    margin: 0 0 0 28px;
    padding: 0;
  }
  #banner li, #hero li {
    margin: 5px 0;
    list-style: none;
    display: inline-block;
    margin-right: 2em;
  }
  #banner h1, #banner h2 {
    font-size: 16px;
    position: relative;
    left: 4px;
    font-weight: normal;
  }
  #banner h1 {
    font-size: 1.35em;
    margin: 0 10px 2px;
    padding-top: 16px;
  }
  #banner h2 {
    margin: 2px 10px 6px;
  }
  #banner figure {
    float: left;
    margin: 10px;
  }
  #banner figure a {
    border: 1px solid #fff;
    float: left;
  }
#banner .feature figure a {
  border:  none;
  box-shadow: none;
}
  #hero .button,
  #banner .button {
    background-image: none;
  }
  #hero .button span,
  #banner .button span {
    border: none;
    background-image: none;
    background-color: transparent;
  }

  /* Text & Colors	*/
  /* Default - Red */
  #hero-contents,
  #banner-contents {
    background: #b44030 url(i/bg-red-texture.jpg) scroll repeat right top;
    box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.2);
  }

  #hero h1, #hero h2, #hero h3, #hero h4, #hero h5, #hero h6, #hero p, #hero a,
  #banner h1,
  #banner h2,
  #banner h3,
  #banner h4,
  #banner h5,
  #banner h6,
  #banner p,
  #banner a {
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
  }
  #hero .button,
  #banner .button {
    border-color: #63231b;
  }
  #hero .button span,
  #banner .button span {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(184, 65, 49, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(rgba(184, 65, 49, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(rgba(184, 65, 49, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(rgba(184, 65, 49, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(rgba(184, 65, 49, 0.1), rgba(0, 0, 0, 0.2));
    border-top: 1px solid #cf5d4d;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  #hero .button:hover,
  #banner .button:hover {
    border-color: #130705;
  }
  #hero .button:hover span,
  #banner .button:hover span {
    color: #fff;
  }

  #banner figure a {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
  }

  #banner .today {
    box-shadow: inset 30px 20px 50px rgba(0, 0, 0, 0.1);
  }

  #banner a.text-link:hover, #hero a.text-link:hover {
    background: rgba(0, 0, 0, 0.25);
  }

  /* Purple */
  .purple #hero-contents,
  .purple #banner-contents {
    background: #5b406e url(i/bg-purple-texture.jpg) scroll repeat center top;
  }

  #hero.purple .button,
  #banner.purple .button {
    border-color: #261a2e;
  }
  #hero.purple .button span,
  #banner.purple .button span {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(94, 66, 113, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(rgba(94, 66, 113, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(rgba(94, 66, 113, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(rgba(94, 66, 113, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(rgba(94, 66, 113, 0.1), rgba(0, 0, 0, 0.2));
    border-top: 1px solid #785591;
  }
  #hero.purple .button:hover,
  #banner.purple .button:hover {
    border-color: black;
  }

  /* Blue */
  .blue #hero-contents,
  .blue #banner-contents {
    background: #3477bb url(i/bg-blue-texture.jpg) scroll repeat center top;
  }

  #hero.blue .button,
  #banner.blue .button {
    border-color: #1e446b;
  }
  #hero.blue .button span,
  #banner.blue .button span {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(53, 122, 191, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(rgba(53, 122, 191, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(rgba(53, 122, 191, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(rgba(53, 122, 191, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(rgba(53, 122, 191, 0.1), rgba(0, 0, 0, 0.2));
    border-top: 1px solid #5793d0;
  }
  #hero.blue .button:hover,
  #banner.blue .button:hover {
    border-color: #08111b;
  }

  /* Gold */
  .gold #hero-contents,
  .gold #banner-contents {
    background: #edd668 url(i/bg-gold-texture.jpg) scroll repeat left 50%;
    box-shadow: inset 0px 0px 50px rgba(226, 191, 58, 0.2);
  }

  #hero.gold h1, #hero.gold h2, #hero.gold h3, #hero.gold h4, #hero.gold h5, #hero.gold h6, #hero.gold p, #hero.gold a,
  #banner.gold h1,
  #banner.gold h2,
  #banner.gold h3,
  #banner.gold h4,
  #banner.gold h5,
  #banner.gold h6,
  #banner.gold p,
  #banner.gold a {
    color: #5b3721;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
  }
  #hero.gold .button,
  #banner.gold .button {
    border-color: #a88e14;
  }
  #hero.gold .button span,
  #banner.gold .button span {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(238, 215, 109, 0.1)), color-stop(100%, rgba(113, 95, 29, 0.2)));
    background: -webkit-linear-gradient(rgba(238, 215, 109, 0.1), rgba(113, 95, 29, 0.2));
    background: -moz-linear-gradient(rgba(238, 215, 109, 0.1), rgba(113, 95, 29, 0.2));
    background: -o-linear-gradient(rgba(238, 215, 109, 0.1), rgba(113, 95, 29, 0.2));
    background: linear-gradient(rgba(238, 215, 109, 0.1), rgba(113, 95, 29, 0.2));
    border-top: 1px solid #f3e49a;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.25);
    color: #5b3721;
  }
  #hero.gold .button:hover,
  #banner.gold .button:hover {
    border-color: #7a680f;
  }
  #hero.gold .button:hover span,
  #banner.gold .button:hover span {
    color: #5b3721;
  }
  #hero.gold .icon-right-arrow,
  #banner.gold .icon-right-arrow {
    background-image: url(i/darkgold-right-arrow.png);
  }

  #banner.gold figure a {
    box-shadow: 0px 0px 8px rgba(91, 55, 33, 0.5);
  }

  #banner.gold .today {
    box-shadow: inset 30px 20px 50px rgba(226, 191, 58, 0.4);
  }

  #banner.gold a.text-link:hover {
    background: rgba(250, 228, 158, 0.9);
  }

  /* Green */
  .green #hero-contents,
  .green #banner-contents {
    background: #4e7e41 url(i/bg-green-texture.jpg) scroll repeat center top;
  }

  #hero.green .button,
  #banner.green .button {
    border-color: #243b1e;
  }
  #hero.green .button span,
  #banner.green .button span {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(80, 129, 67, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(rgba(80, 129, 67, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(rgba(80, 129, 67, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(rgba(80, 129, 67, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(rgba(80, 129, 67, 0.1), rgba(0, 0, 0, 0.2));
    border-top: 1px solid #65a354;
  }
  #hero.green .button:hover,
  #banner.green .button:hover {
    border-color: black;
  }

  /* Black */
  .black #hero-contents,
  .black #banner-contents {
    background: #414342 url(i/bg-black-texture.jpg) scroll repeat center top;
  }

  #hero.black .button,
  #banner.black .button {
    border-color: #0f0f0f;
  }
  #hero.black .button span,
  #banner.black .button span {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(68, 70, 69, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(rgba(68, 70, 69, 0.1), rgba(0, 0, 0, 0.2));
    background: -moz-linear-gradient(rgba(68, 70, 69, 0.1), rgba(0, 0, 0, 0.2));
    background: -o-linear-gradient(rgba(68, 70, 69, 0.1), rgba(0, 0, 0, 0.2));
    background: linear-gradient(rgba(68, 70, 69, 0.1), rgba(0, 0, 0, 0.2));
    border-top: 1px solid #5d5f5e;
  }
  #hero.black .button:hover,
  #banner.black .button:hover {
    border-color: black;
  }

  /* Big Version */
  #banner.big .feature {
    padding: 10px 0;
  }
  #banner.big h1 {
    font-size: 23px;
    line-height: 25px;
    margin-bottom: 0.3em;
    padding-top: 0;
  }
  #banner.big h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 0.5em;
  }
  #banner.big figure {
    float: right;
    margin: -20px -60px -20px 20px;
  }
  #banner.big .today h3 {
    margin-left: 84px;
    display: block;
    font-weight: normal;
    padding: 10px 20px 0 0;
  }
  #banner.big .today ul {
    margin-left: 80px;
  }
  #banner.big figure a {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
  }

  .icon-right-arrow {
    background: url(i/white-right-arrow.png) no-repeat scroll 0px 0px transparent;
  }

  .blue.icon-right-arrow {
    background: url(i/blue-right-arrow2.png) no-repeat scroll 0px 0px transparent;
  }

  /* Content Structure
  --------------------------------------------------------- */
  #content {
    margin-left: 153px;
    margin-right: 30px;
    padding-bottom: 4em;
  }
  .body-w-sidebar {
    background: transparent url(i/bg-rule-pixel.png) repeat-y scroll 62.45% top;
  }
  /* Main Column */
  #main-col {
    float: left;
    width: 62.3%;
  }
  #main-col-contents {
    margin-right: 25px;
  }
  /* Sidebar */
  #sidebar {
    float: right;
    width: 37.45%;
  }
  #sidebar-contents {
    margin-left: 25px;
  }
  #sidebar .promos {
    margin-bottom: 2em;
  }

  /* Sidebar Contents
  --------------------------------------------------------- */
  #sidebar .buttons {
    border-bottom: 1px solid #DFE1E1;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
  }

  /* Highlights */
  #sidebar .highlights {
    margin-bottom: 2em;
    border-bottom: 1px solid #DFE1E1;
    font-family: "Lucida Fax", Georgia, serif;
  }

  #sidebar .highlights:last-child {
    border-bottom: none;
  }

  .highlights article {
    margin-top: .5em;
    margin-bottom: 1em;
  }

  #sidebar .highlights article {
    margin-bottom: 1.5em;
  }

  .highlights .alignleft {
    margin: .4em .75em 1em 0;
  }

  .highlights h2 {
    margin-bottom: 0.25em;
    font-size: 1.0725em;
  }

  .highlights p {
    margin-bottom: .75em;
    font-size: 12px;
    color: #676767;
  }

  .section {
    font-size: 11px;
    text-transform: uppercase;
    font-family: "Lucida Grande", Verdana, sans-serif;
    font-weight: bold;
  }

  .highlights .section {
    color: #6092b6;
    display: block;
    margin-bottom: 0.5em;
  }

  .highlights a {
    text-decoration: none;
    cursor: pointer;
  }

  .highlights a p {
    color: #666;
  }

  .highlights a h2 {
    text-decoration: none;
    color: #444;
  }

  .highlights a figure + * {
    padding-top: 0.25em;
  }

  /* Hovering */
  .highlights a:hover p {
    color: #000;
  }

  .highlights a:hover h2,
  .highlights a:hover h3,
  .highlights a:hover h4 {
    text-decoration: underline;
  }

  .highlights a:hover h2 {
    color: #9F4138;
  }

  .highlights a:hover figure span,
  .highlights a:hover .button {
    border-color: #74A4C6;
  }

  .highlights a:hover .section {
    color: #407296;
  }

  /* Sub Navigation */
  #sub-navigation a {
    text-decoration: none;
    color: #9F4138;
  }

  #sub-navigation a:hover {
    text-decoration: underline;
  }

  #sub-navigation a + .byline {
    margin-bottom: 0;
  }

  #sub-navigation h2 {
    font-family: "chaparral-pro", "Lucida Fax", serif;
    font-weight: normal;
    margin-bottom: .5em;
    font-size: 1.5em;
  }

  /* while TypeKit is loading let's not render the type */
  .wf-loading #sub-navigation h2 {
    visibility: hidden;
  }

  #sub-navigation h2 a {
    color: #888;
  }

  #sub-navigation ul li a.on {
    font-weight: bold;
    color: #333;
  }

  #sub-navigation ul {
    border-bottom: 1px solid #DFE1E1;
    margin-bottom: 2em;
  }

  #sub-navigation ul li {
    border-top: 1px solid #DFE1E1;
    padding: .75em 0;
    margin: 0;
  }

  #sub-navigation ul li a {
    display: block;
  }

  #sub-navigation ul ul {
    border: none;
    margin: 0 0 0 1.25em;
    font-size: 96%;
  }

  #sub-navigation ul ul li {
    border: none;
    padding: 0;
    margin: 0.5em 0 0;
  }

  #sub-navigation ul ul li a {
    color: inherit;
  }

  #sub-navigation ul ul li a.on {
    color: #444;
  }

  #sub-navigation ul ul ul li a.on {
    color: #555;
    padding-left: 10px;
    background: transparent url(i/bullet_arrow-black.png) no-repeat scroll 0px 0.15em;
  }

  #sub-navigation h3 {
    font-weight: normal;
  }

  #sub-navigation .quicklink {
    display: inline;
    color: #9F4138;
    text-decoration: underline;
    font-weight: normal;
    padding-left: 0.5em;
  }

  #sub-navigation .local-search {
    margin: 0.5em 0 0 0;
  }

  /* Articles
  --------------------------------------------------------- */
  /* Typography */
  article header h1 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    font-size: 2.5em;
    line-height: 1.125em;
  }
  article header h1 a {
    text-decoration: none;
    color: #333;
  }

  article header h1 a:hover {
    color: #9F4138;
    text-decoration: underline;
  }

  /* Header */
  #content-header {
    margin-bottom: 1.5em;
  }

  #content-header h1 {
    margin: 0;
    font-size: 3em;
    font-weight: normal;
  }

  /* Breadcrumbs */
  .breadcrumbs {
    font-size: 11.5px;
    margin: 0 0 1.6em;
    color: #DDD;
    font-family: "Lucida Grande",Verdana,sans-serif;
  }

  .breadcrumbs a {
    text-decoration: none;
    color: #777;
  }

  .breadcrumbs a:hover {
    text-decoration: underline;
  }

  /* Date Browser (Date Pagination) */
  .datebrowser {
    margin: 2em 0;
    padding: 1em 0;
    border-top: 1px solid #DFE1E1;
    border-bottom: 1px solid #DFE1E1;
  }

  .datebrowser h2 {
    text-align: center;
    margin: 0;
    line-height: 1.5em;
  }

  .datebrowser .previous-button {
    float: left;
  }

  .datebrowser .next-button {
    float: right;
  }

  .arrow-only span {
    text-indent: -999em;
    width: 1px;
    padding-left: 1.3em;
    padding-right: 1.3em;
  }

  /* Pagination */
  .pagination {
    clear: both;
    border-top: 1px solid #DFE1E1;
    margin-top: 2em;
    padding-top: 1.5em;
    text-align: center;
  }

  .pagination .current-page {
    float: left;
    width: 49%;
    padding-top: 0.25em;
  }

  .pagination .buttons {
    float: right;
    width: 49%;
    text-align: right;
  }

  .pagination .previous-button {
    margin-right: 2em;
  }

  .pagination .previous-button span {
    width: 1px;
    text-indent: 101%;
    overflow: hidden;
    padding-right: 0;
    white-space: nowrap;
  }

  .pagination .next-button {
    margin-left: 2em;
  }

  .pagination .next-button span {
    width: 1px;
    text-indent: 101%;
    overflow: hidden;
    padding-left: 0;
    white-space: nowrap;
  }

  /* Categories */
  .categories .category {
    margin-bottom: 2em;
  }

  .categories .category .name {
    margin-bottom: 0.5em;
    font-size: 1.25em;
  }

  .categories .category p {
    margin-bottom: .75em;
    line-height: 1.25em;
  }

  .categories .category time {
    display: block;
    margin-bottom: 0.5em;
    color: #999;
  }

  .categories a {
    text-decoration: none;
  }

  .categories a p {
    color: #444;
  }

  .categories a h2 {
    text-decoration: none;
    color: #9F4138;
  }

  .posts a h2 {
    font-size: 2em;
    margin-bottom: 0.33em;
  }

  /* with Thumbnails */
  .categories .w-thumbnail time,
  .categories .w-thumbnail .name,
  .categories .w-thumbnail p,
  .categories .w-thumbnail .content {
    margin-left: 105px;
  }

  .categories .category .content p {
    margin-left: 0;
  }

  .categories .category .thumbnail {
    margin-bottom: 0;
    margin-right: 0;
  }

  .categories .category ul {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  /* Hovering */
  .categories a:hover p {
    color: #000;
  }

  .categories a:hover h2,
  .categories a:hover h3,
  .categories a:hover h4 {
    text-decoration: underline;
  }

  .categories a:hover time {
    color: #777;
  }

  .categories a:hover figure span,
  .categories a:hover .button {
    border-color: #74A4C6;
  }

  .category .content h1,
  .category .content h2,
  .category .content h3 {
    font-size: 1em;
  }

  /* Saints (Same as Categories, just different sized thumbnail */
  .saints .saint {
    margin-bottom: 2em;
  }

  .saints .saint .name {
    margin-bottom: 0.5em;
    font-size: 1.25em;
  }

  .saints .saint p {
    margin-bottom: .75em;
    line-height: 1.25em;
  }

  .saints a {
    text-decoration: none;
  }

  .saints a p {
    color: #444;
  }

  .saints a h2,
  .saints a h3 {
    text-decoration: none;
    color: #9F4138;
  }

  /* with Thumbnails */
  .saints .w-thumbnail .name,
  .saints .w-thumbnail p,
  .saints .w-thumbnail .content {
    margin-left: 150px;
  }

  .saints .saint .content p {
    margin-left: 0;
  }

  .saints .saint .thumbnail {
    margin-bottom: 0;
    margin-right: 0;
  }

  /* Hovering */
  .saints a:hover p {
    color: #000;
  }

  .saints a:hover h2,
  .saints a:hover h3,
  .saints a:hover h4 {
    text-decoration: underline;
  }

  .saints a:hover h2 {
    text-decoration: underline;
  }

  .saints a:hover figure span,
  .saints a:hover .button {
    border-color: #74A4C6;
  }

  /* Footer */
  .article-footer {
    clear: both;
    border-top: 1px solid #DFE1E1;
    margin-top: 2em;
    padding-top: 1em;
    margin-bottom: 2em;
  }

  .article-footer .next {
    float: right;
    width: 40%;
    text-align: right;
  }

  .article-footer .next a {
    display: block;
    text-decoration: none;
    color: #333;
  }

  .article-footer .next a h2 {
    padding-right: 20px;
    background: transparent url(i/big-right-arrow.png) no-repeat scroll right 0.25em;
  }

  .article-footer .previous {
    float: left;
    width: 40%;
  }

  .article-footer .previous a {
    display: block;
    text-decoration: none;
    color: #333;
  }

  .article-footer .previous a h2 {
    padding-left: 20px;
    background: transparent url(i/big-left-arrow.png) no-repeat scroll left 0.22em;
  }

  .article-footer h2 {
    margin-bottom: 0.5em;
    color: #9F4138;
  }

  .article-footer h3 {
    margin-bottom: .125em;
  }

  .article-footer p {
    line-height: 1.25em;
    margin-bottom: 5px;
  }

  .article-footer time {
    padding-top: 0.5em;
  }

  .article-footer a:hover h2 {
    text-decoration: underline;
  }

  .article-footer a:hover {
    color: #000;
  }

  /* General Images */
  figure span {
    width: 100%;
  }
  figure img {
    max-width: 100%;
    display: block;
    width: 100%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
    border-radius: 3px;
    margin: .6em auto 1em;
  }
  figure.thumbnail {padding-right:1em;}
  figure.thumbnail img {width:auto;box-shadow:none;border-radius:0;}
  figure.nowidth img {width:auto;}
  figure.legacy img {
        box-shadow: none;
        border-radius: 0;
  }
  #hero figure img {margin:0;box-shadow: none;border-radius: 0;}
  .holy-synod figure img {margin-right:0;}
  #sidebar figure img {width:80px;height:auto;margin:0;}
 .highlights figure {width:80px;height:80px;box-shadow:none;}
 .highlights figure img {padding:3px;border:1px solid #efefef;box-shadow:none;}

  article figure {
    margin-bottom: 1em;
  }

  /* Add Border around Images */
  article figure span,
  #sidebar .liturgical-resources figure span,
  header figure span {
    /* background-color: #fff;
    border: 1px solid #DDD;
    padding: 4px;
    max-width: 95%; */
    display: inline-block;
  }

  article figure a:hover span,
  #sidebar .liturgical-resources figure a:hover span,
  header figure a:hover span {
    border-color: #74a4c6;
  }

  /* Float Sizes */
  .onefifth {
    max-width: 20%;
  }

  .onefourth {
    max-width: 25%;
  }

  .onethird {
    max-width: 33%;
  }

  .onehalf {
    max-width: 50%;
  }

  /* Figcaptions */
  article figure figcaption {
    font-size: 11px;
    color: #666;
    font-family: "Lucida Grande",Verdana,sans-serif;
  }

  figure span figcaption {
    padding-top: 5px;
  }

  figure span {
    position: relative;
  }

  figure span figcaption.source {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 4px 2px 2px 4px;
    background: white;
  }

  figure span figcaption.fancy {
    left: 4px;
    padding: 4px;
    text-align: right;
    color: white;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
  }

  /* Re-usables
  --------------------------------------------------------- */
  /* Floating */
  .alignright {
    float: right;
    margin-left: 1em;
    clear: right;
  }

  .alignleft {
    float: left;
    margin-right: 1em;
    clear: left;
  }

  /* Local Search (Gray Box) */
  .local-search,
  .module {
    margin: 0 0 2em;
    padding: 1em 1em 0.9em;
    background-color: #F3F3F3;
    border: 1px solid #DDD;
    border-bottom-color: #CCC;
    border-top-color: #DADADA;
  }

  .local-search hr,
  .module hr {
    margin: 0.75em 0;
    border-top: 1px solid #DFDFDF;
    border-bottom: 1px solid #FBFBFB;
    height: 0;
  }

  .module > *:last-child {
    margin-bottom: 0;
  }

  .zoom {
    font-size: 120%;
  }

  /* Basic Table */
  table {
    margin-bottom: 2em;
    width: 100%;
  }

  td, th {
    text-align: left;
    padding: 5px;
  }

  th {
    border-bottom: 1px solid #AAA;
  }

  .table {
    border: 1px solid #AAA;
  }

  article th {
    border: none;
    padding-bottom: 1em;
    padding-top: 1em;
    background-color: #efefef;
  }

  table.striped tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  /* Calendar Table */
  .calendar-table {
    width: 100%;
    border: 1px solid #EEE;
    margin: 0.5em 0;
  }

  .calendar-table caption {
    border: 1px solid #EEE;
    border-bottom: none;
  }

  .calendar-table .prev-month {
    float: left;
  }

  .calendar-table .next-month {
    float: right;
  }

  .calendar-table .heading {
    text-align: center;
    padding: 5px;
    display: block;
  }

  .calendar-table th,
  .calendar-table td {
    text-align: center;
    border-right: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
  }

  .calendar-table th {
    background-color: #F6F6F6;
    padding: 5px;
  }

  .calendar-table a {
    padding: 5px;
  }

  .calendar-table #today a {
    background-color: #9F4138;
    color: #FFF;
  }

  /* Landing Pages
  --------------------------------------------------------- */
  /* Special Typography */
  .landing-intro {
    margin-bottom: 2em;
    border-bottom: 1px solid #DFE1E1;
    padding-bottom: 1em;
  }

  .landing-intro h1 {
    font-style: italic;
    font-size: 1.75em;
    font-weight: normal;
  }

  /* Galleries
  --------------------------------------------------------- */
  /* Figures */
  .gallery figure {
    float: left;
    width: 30%;
    margin: 0 3% 3% 0;
  }

  /* News
  --------------------------------------------------------- */
  /* Featured Stories */
  .featured-story {
    border-bottom: 1px solid #DFE1E1;
    margin-bottom: 0.25em;
    padding-bottom: 0.5em;
  }

  .featured-story p {
    margin-bottom: 1em;
  }

  time { display: block; }

  article time,
  .category time,
  .news-items time,
  .highlights time,
  .article-footer time,
  .byline,
  .module .attachments p {
    color: #999 !important;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: 80%;
    margin-bottom: 0.5em;
  }

  .byline {
    letter-spacing: 1px;
  }

  h1 + .byline,
  h2 + .byline {
    margin-top: -0.5em;
    margin-bottom: .75em;
  }

  #sidebar h2 a {
    text-decoration: none;
  }

  #sidebar .featured-story h1 {
    font-size: 1.5em;
  }

  .news-items {
    list-style: none;
    margin: 0 0 0;
  }

  .news-items li {
    margin-bottom: 0;
    padding-top: 0.5em;
  }

  .news-items li:first-child {
    border-top: none;
  }

  .news-items li:before,
  .news-items li:after {
    content: " ";
    display: table;
  }

  .news-items li:after {
    clear: both;
  }

  .news-items h2 {
    font-size: 1em;
    float: left;
    margin-bottom: 0.5em;
  }

  .news-items a {
    text-decoration: none;
    color: #333;
  }

  .news-items a:hover {
    text-decoration: underline;
    color: #000;
  }

  .news-buttons {
    margin-top: 1em;
    margin-bottom: 1.5em;
  }

  .news-highlights article {
    float: left;
    width: 30%;
    margin-right: 3%;
    font-size: 90%;
  }
  .news-highlights .main {
    float: none;
    width: auto;
    font-size: 100%;
  }

  .print-bug {
    float: right;
    margin: 0 0 1em 1em;
  }

  /* Helpers
  --------------------------------------------------------- */
  .ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
  }

  .hidden {
    display: none;
    visibility: hidden;
  }

  .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .visuallyhidden.focusable:active,
  .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }

  .invisible {
    visibility: hidden;
  }

  .clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }

  .clearfix:after {
    clear: both;
  }

  .clearfix {
    zoom: 1;
  }
/* }*/


/* Media Queries with max-width */
@media screen and (max-width: 1000px) {
  #footer-inner {
    margin: 0 20px;
  }
  .done-loading #footer-inner {
    background: none;
  }
  #footer-contents {
    margin: 0;
  }

  #bottom-inner {
    max-width: none;
    margin: 0 20px;
  }
}

@media screen and (max-width: 900px) {
  #banner .feature {
    float: none;
    width: auto;
  }
  #banner .today {
    float: none;
    width: auto;
  }

  #banner ul {
    margin-left: 6px;
  }
  #banner.big figure {
    margin: 0px 10px -20px 10px;
  }
  #banner.big .today h3 {
    margin-left: 20px;
  }
  #banner.big .today ul {
    margin-left: 16px;
  }
}

@media screen and (max-width: 800px) {
  #bottom .copyright,
  #bottom .utility {
    float: none;
  }

  #footer-contents .domes {
    right: 5px;
  }
}

@media screen and (max-width: 768px) {
  #utility {
    margin-right: 25px;
  }
  #header .brand {
    position: static;
    margin-left: 25px;
    float: left;
    margin-bottom: 1em;
  }
  #header .brand img {
    width: 59px;
    height: 144px;
  }
  #header .brand a {
    position: static;
  }
  #navigation {
    padding-top: 1em;
    margin-left: 104px;
  }

  #navigation ul li {
    width: auto;
    float: none;
  }

  #navigation ul li > a {
    min-height: 100px;
  }

  #navigation ul li > a {
    min-height: 0;
    border-right: none;
    border-left: 1px solid #DFE1E1;
    padding: .4em 17px;
  }

  #navigation ul li:first-child a {
    padding-left: 17px;
  }

  #navigation ul li:nth-child(4) a {
    padding-right: 17px;
  }

  #navigation li a strong {
    padding-right: .25em;
    font-size: 15px;
    display: inline;
  }

  #navigation li a small {
    height: auto;
    display: inline;
  }

  #navigation ul li.about,
  #navigation ul li.orthodoxy,
  #navigation ul li.directories,
  #navigation ul li.work {
    width: auto;
  }
  #content {
    margin-right: 25px;
    margin-left: 25px;
    padding-bottom: 1em;
  }
  .body-w-sidebar {
    background: none;
  }
  #main-col {
    float: none;
    width: auto;
  }
  #main-col-contents {
    margin-right: 0;
  }
  #sidebar {
    float: none;
    width: auto;
    border: none;
    border-top: 1px solid #DFE1E1;
    margin-top: 2em;
    padding-top: 1em;
  }
  #sidebar-contents {
    margin: 0;
  }
  .news-items h2 {
    float: none;
    width: auto;
  }

  .news-items time {
    float: none;
    width: auto;
    text-align: left;
  }
  .news-highlights article {
    float: none;
    width: auto;
    margin-right: 0;
  }
}

@media screen and (max-width: 640px) {
  #utility {
    margin-right: 10px;
  }

  #navigation {
    padding-top: 0;
  }

  #navigation li a small {
    display: inline-block;
  }
  #footer-inner {
    background: none;
    margin: 0;
  }

  #footer-contents {
    margin: 0;
    padding: 10px 10px 20px;
  }
  #footer-contents h1 {
    font-size: 1.5em;
  }
  #bottom-inner {
    margin: 0 10px;
  }
  #footer-contents h1,
  #footer-contents p {
    max-width: none;
  }

  .done-loading #footer-contents .domes {
    right: 0;
    width: 68px;
    height: 92px;
  }
  #hero figure {
    float: none;
    width: auto;
  }
  #hero .message {
    float: none;
    width: auto;
  }
  #content {
    margin-right: 10px;
    margin-left: 10px;
    padding-bottom: 1px;
  }
  article header h1 {
    font-size: 1.5em;
  }
  .onefifth,
  .onefourth,
  .onethird,
  .onehalf {
    max-width: 100%;
  }
  .alignright,
  .floatleft {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 480px) {
  #utility {
    float: none;
    margin: 0 0 17px;
  }
  #header .brand {
    margin-top: 0;
    margin-bottom: 0;
  }
  #header .brand img {
    width: 47px;
    height: 115px;
  }

  #navigation li a small {
    display: none;
  }
}

/* end general "@media screen" */
/* Special Layouts
--------------------------------------------------------- */
@media screen {
  /* Added jas - mod. 8/19/11 */
  #footer,
  #bottom,
  #bottom *,
  #codeigniter_profiler {
    z-index: 2;
    position: relative;
  }
}
/* END: base.css */
/* wrap this file in a media selector to keep it from print */
@media screen {
  /* BEGIN: added.css */
  /* Added - jas */
  #sidebar .second-story h1 {
    font-size: 1.5em;
  }

  /* Legacy Bulbous Header Images */
  .legacy {
    text-align: center;
    background: #fff;
    border: 1px solid #DFE1E1;
    padding: 1em;
    margin-bottom: 2em;
  }

  .legacy span {
    border: 0;
    text-align: center;
  }

  .legacy img {
    margin: 0px auto;
  }

  .fresh {
    padding-right: 38px;
    background: url(/assets/img/new.png) 3px right top no-repeat;
  }

  .datestamp {
    color: #777;
    font-style: italic;
    font-size: 10px;
    font-weight: normal;
  }

  .editlink {
    margin: 5px 0 10px;
  }

  div.contact {
    margin-bottom: 15px;
    margin-left: 25px;
  }

  .contact .name {
    font-weight: bold;
  }

  .contact .description {
    font-style: italic;
  }

  .contact span {
    font-weight: bold;
  }

  .socialmedia {
    margin-right: 10px;
  }

  .socialmedia a img {
    margin: 2px 5px;
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
  }

  .socialmedia a:hover img {
    filter: alpha(opacity=100);
    opacity: 1.0;
    -moz-opacity: 1.0;
  }

  #sitemap h2 {
    margin-bottom: 5px;
  }

  #sitemap h3 {
    font-style: italic;
    margin: 0 0px 10px;
    font-weight: normal;
  }

  #sitemap a {
    text-decoration: none;
  }

  #sitemap a:after {
    content: " (" attr(href) ") ";
    color: #777;
    font-size: x-small;
    font-weight: normal;
  }

  #sitemap ul {
    list-style: square;
  }

  #sitemap ul li {
    font-weight: bold;
  }

  #sitemap ul li ul li {
    font-weight: normal;
  }

  .aligncenter, .center {
    margin-left: auto;
    margin-right: auto;
  }

  .border {
    padding: 4px;
    border: 1px solid #ccc;
    background-color: white;
  }

  section.attachments h3 {
    margin-top: 15px;
  }

  section.attachments p {
    margin: 7px 10px;
    overflow-wrap: break-word;
  }

  /* categories with larger 125px-wide thumbnails */
  /* normally 80px wide and 105px margin-left */
  .categories.thumb125 .w-thumbnail .name,
  .categories.thumb125 .w-thumbnail p,
  .categories.thumb125 .w-thumbnail .content {
    margin-left: 150px;
  }


  /* categories with larger 125px-wide thumbnails */
  /* normally 80px wide and 105px margin-left */
  .categories.thumb160 .w-thumbnail .name,
  .categories.thumb160 .w-thumbnail p,
  .categories.thumb160 .w-thumbnail .content {
    margin-left: 182px;
  }

.thumb160 .thumbnail img {
  border-radius: 5px;
  margin-top: -1px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
}

  ul.alphabet {
    width: 400px;
  }

  ul.alphabet li {
    display: block;
    float: left;
    margin: 35px 20px;
  }

  ul.alphabet h2 a span {
    color: #bbb;
    font-weight: normal;
    font-size: 16px;
  }

  /* Resource Handbook */
  footer.bio {
    color: #777;
    border: 1px dotted #ddd;
    padding: 10px;
    margin: 20px 15px 10px;
    clear: both;
    background-color: #f1f1f1;
  }

  blockquote span {
    font-style: normal;
    display: block;
    font-size: 13px;
    color: #555;
  }

  blockquote.indent {
    font-style: normal;
    font-size: 14px;
    margin: 5px 20px;
    border-left: 0;
  }

  #admin-debug {
    clear: both;
    margin-top: 25px;
    padding-top: 10px;
  }

  /* Feasts and Saints (legacy) */
  .bold {
    font-weight: bold;
  }

  .italic {
    font-style: italic;
  }

  td.fsCalHeader {
    border-bottom: 2px solid #6092b6;
    border-top: 2px solid #6092b6;
    padding: 3px 0 1px;
    margin: 1em;
  }

  /* Hero */
  #hero .message h1 em {
    font-style: normal;
  }

  /* END: added.css */
}
/* end general "@media screen" */
/* wrap this file in a media selector to keep it from print */
@media screen {
  /* BEGIN: filetypes.css */
  /* --------------------------------------------------------------

     link-icons.css
     * Icons for links based on protocol or file type.

     See the Readme file in this folder for additional instructions.

  -------------------------------------------------------------- */
  /* Make sure the icons are not cut */
  .filetypes a[href^="http"], .filetypes a[href^="mailto:"], .filetypes a[href^="http:"]:visited,
  .filetypes a[href$=".pdf"], .filetypes a[href$=".doc"], .filetypes a[href$=".xls"], .filetypes a[href$=".rss"], .filetypes a[href$=".ppt"], .filetypes a[href$=".rdf"], .filetypes a[href^="aim:"], .filetypes a[href$=".zip"], .filetypes a[href$=".rtf"], .filetypes a[href$=".mp3"] {
    padding: 2px 22px 2px 0;
    margin: -2px 0;
    background-repeat: no-repeat;
    background-position: right center;
  }

  /* External links */
  .filetypes a[href^="http"] {
    background-image: url(/assets/img/filetypes/external-alt.png);
    padding: 2px 14px 2px 0;
  }

  .filetypes a[href^="mailto:"] {
    background-image: url(/assets/img/filetypes/email.png);
  }

  .filetypes a[href^="http"]:visited {
    background-image: url(/assets/img/filetypes/visited.png);
  }

  /* Files */
  .filetypes a[href$=".pdf"] {
    background-image: url(/assets/img/filetypes/pdf.png);
    padding: 2px 22px 2px 0;
  }

  .filetypes a[href$=".doc"] {
    background-image: url(/assets/img/filetypes/doc.png);
    padding: 2px 22px 2px 0;
  }

  .filetypes a[href$=".xls"] {
    background-image: url(/assets/img/filetypes/xls.png);
    padding: 2px 22px 2px 0;
  }

  .filetypes a[href$=".ppt"] {
    background-image: url(/assets/img/filetypes/ppt.png);
    padding: 2px 22px 2px 0;
  }

  .filetypes a[href$=".zip"] {
    background-image: url(/assets/img/filetypes/zip.png);
    padding: 2px 22px 2px 0;
  }

  .filetypes a[href$=".rtf"] {
    background-image: url(/assets/img/filetypes/rtf.png);
    padding: 2px 22px 2px 0;
  }

  .filetypes a[href$=".mp3"] {
    background-image: url(/assets/img/filetypes/audio16.gif);
    padding: 2px 22px 2px 0;
  }

  /* Misc */
  .filetypes a[href$=".rss"],
  .filetypes a[href$=".rdf"] {
    background-image: url(/assets/img/filetypes/feed.png);
  }

  .filetypes a[href^="aim:"] {
    background-image: url(/assets/img/filetypes/im.png);
  }

  /* Style Buttons with PDF icons */
  .filetypes a[href$=".pdf"].button {
    border-radius: 3px;
    background: rgb(247,247,248);
    background: linear-gradient(0deg, rgba(247,247,248,1) 12%, rgba(239,239,239,1) 100%);
    padding: 2px 7px;
  }
  .filetypes a[href$=".pdf"].button span {
    background-position: right 45%;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    background-image: url(/assets/img/filetypes/pdf.png);
    padding: 2px 20px 2px 0;
  }

  /* Use this class if a link gets an icon when it shouldn't. */
  body a.noicon, div.socialmedia a, footer > p > a, .gallery a {
    background: none;
    padding: 0;
    margin: 0;
  }

  /* Override for Buttons */
  /* a.button[href$=".pdf"] span  {background-image: url(/assets/img/filetypes/pdf.png);
    background-repeat: no-repeat;
    background-position: 10px .5em;
    padding-left:36px;} */
  /* It would be better to accomplish this with inline images. Using <i> tag or pseudo-element */
  /* END: filetypes.css */
}
/* end general "@media screen" */
/* wrap the IE-specific files in a media selector to keep them from print */
@media screen {
  /* BEGIN: ie6.css */
  /* DIFFERENT FROM FILE: Translating conditional-comment-based ie6.css call into star-selector hack
   * to allow us to inline it. */
  /* From HTML5 Boilerplate typography reset css */
  * html legend {
    margin-left: -7px;
  }

  * html input {
    vertical-align: text-bottom;
  }

  * html #container-inner {
    zoom: 1;
    width: 1000px;
  }

  /* Header / Floats
  --------------------------------------------------------- */
  * html #utility,
  * html #utility ul,
  * html #utility form,
  * html .alignleft,
  * html .alignright {
    display: inline;
  }

  /* END: ie6.css */
  /* BEGIN: ie7.css */
  /* DIFFERENT FROM FILE: Translating conditional-comment-based ie7.css call into html.ie7 selectors
   * to allow us to inline it. */
  /* From HTML5 Boilerplate typography reset css */
  html.ie7 legend {
    margin-left: -7px;
  }

  html.ie7 input[type="checkbox"] {
    vertical-align: baseline;
  }

  html.ie7 img {
    -ms-interpolation-mode: bicubic;
  }

  html.ie7 #container-inner {
    zoom: 1;
  }

  /* Navigation
  --------------------------------------------------------- */
  html.ie7 #navigation ul ul li a {
    display: inline;
  }

  /* Header
  --------------------------------------------------------- */
  /* Utility Bar */
  html.ie7 #utility {
    width: 42%;
  }

  /* END: ie7.css */
  /* BEGIN: ie8.css */
  /* ie8.css is presently empty. */
  /* END: ie8.css */
}
/* end general "@media screen" */

/* SVG icons */
[class^="i-"] {
  width:32px;
  opacity: .7;
}
[class^="i-"]:hover {opacity:1;}

.i-rss {
  margin-bottom: -10px;
  margin-right: .6em;
}

/* Increase font size */
p, #navigation li li, #main li {
    font-size: 14px;
    line-height: 1.4em;
}
.categories .category p {
    line-height: 1.4em;
}

#main-col p, #main-col li, #main-col h3 {line-height:1.45em;font-size:15px;}
#main-col p.breadcrumbs {font-size:12px;}
#sidebar p {font-size: 13px;}
#sidebar li {line-height:1.1em;}
.i {width:15px;vertical-align:top;margin-top:3px;opacity:.7;}
.i:hover{opacity:1}
iframe {margin: 1em auto;width:100%;}

.donate {border:none;}
.donate span {background-color:#107C3B;background-image:none;color: white;text-shadow:none;}
.donate span:hover {background-color:#0b6d32;background-image:none;color:white;}

.flexvideo {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  /* falls back to 16/9, but otherwise uses ratio from HTML */
  Qpadding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
  margin-bottom: 1em;
}
.flexvideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 96%;
  height: 96%;
  margin: 0 4% 0 0;
}
.feed img {height:24px;}

.ico {width:12px;opacity:.5;margin-right:6px;}
.wonder-blog img, .goodnews img {max-width: 100%;height: auto;}
ul.wonder-list {list-style: none;margin:0;}
ul.wonder-list li {clear:both;margin-bottom:20px;}
ul.wonder-list li img {display:block; width:250px;}
.wonder-blog p img {float:right;margin:1em 0 1em 1.4em;}

[id^=map] { max-width:100%; }

#banner .button span {
    background: #be9652;
}

#nav_cat_archive {margin-left:0;}
#nav_cat_archive>li {list-style: none;}
#nav_cat_archive>li li {list-style: none;}
#nav_cat_archive ul {margin-bottom:2em;}

.about figure img {box-shadow: none;}