/* Variable-tastic */
/* wrap this file in a media selector to keep it from print */
@media screen, projection {
  /* 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;
  }

  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 */
}
/* BEGIN: base.css */
@media screen, projection {
  /*
  
  HTML Framework 
  Version 0.1 Beta, July 14, 2009
  Author: JD Graffam, http://jdgraffam.com/
  Source: http://htmlframework.com/
  Documentation: http://htmlframework.com/documentation.html
  
  */
  /* General Table of Contents:
  --------------------------------------------------------- 
  
  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
  
  */
  /* Typography
  --------------------------------------------------------- */
  /* HTML5 Boilerplate to get started... */
  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;
  }

  /* This was causing http://oca.org/statute/article-iii section 2 items to be
   * numbered with numerals instead of lowercase letters as the markup specifies.
   */
  /* ol { list-style-type: decimal; } */
  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: #444;
  }

  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;
  }

  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-1", "chaparral-pro-2", "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-1", "chaparral-pro-2", "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: 2.6em;
    background: #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f6));
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -webkit-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -moz-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -o-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ebebec));
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -webkit-linear-gradient(#ffffff, #ebebec);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -moz-linear-gradient(#ffffff, #ebebec);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-right-arrow.png), -o-linear-gradient(#ffffff, #ebebec);
    background-image: url(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f5f5f6));
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -webkit-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -moz-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -o-linear-gradient(#ffffff, #f5f5f6);
    background-image: url(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #ebebec));
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -webkit-linear-gradient(#ffffff, #ebebec);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -moz-linear-gradient(#ffffff, #ebebec);
    background-image: url(//a.ocacdn.net/cdn/assets/css/i/blue-left-arrow.png), -o-linear-gradient(#ffffff, #ebebec);
    background-image: url(//a.ocacdn.net/cdn/assets/css/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 w/ Images (Icons) (These 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(//a.ocacdn.net/cdn/assets/css/i/bg.png) center top;
  }

  #container {
    background: transparent url(//a.ocacdn.net/cdn/assets/css/i/bg-top-fade.png) repeat-x scroll center top;
  }

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

  #main {
    z-index: 1;
  }

  /* Header
  --------------------------------------------------------- */
  #header {
    background: transparent url(//a.ocacdn.net/cdn/assets/css/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;
    /* width in ie7.css */
  }
  #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;
    /* height: 13px; */
    background: white url(//a.ocacdn.net/cdn/assets/css/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 {
    position: fixed;
  }
  #header .brand a:active {
    position: fixed;
    top: auto;
  }

  /* Navigation
  --------------------------------------------------------- */
  #navigation {
    margin-left: 153px;
    margin-right: 30px;
    margin-bottom: 17px;
    clear: right;
    position: relative;
    z-index: 500;
  }
  #navigation ul li {
    width: 25%;
    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(4) a {
    border-right: none;
    padding-right: 0;
  }
  #navigation li a {
    text-decoration: none;
    color: #9F4138;
    font-family: "chaparral-pro-1", "chaparral-pro-2", "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: 17px;
    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;
  }
  #navigation ul li.about {
    width: 23%;
  }

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

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

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

  /* 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(//a.ocacdn.net/cdn/assets/css/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;
  }

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

  .done-loading #footer-border {
    background: #e4e4e4 url(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/i/domes_4522ed59660028314bf10722b01db4ce.png) no-repeat;
    width: 257px;
    height: 351px;
  }

  #bottom {
    background-color: #b3b3b3;
  }

  .done-loading #bottom {
    background: #b3b3b3 url(//a.ocacdn.net/cdn/assets/css/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-1", "chaparral-pro-2", "Lucida Fax", serif;
    font-weight: normal;
    font-size: 14px;
  }

  #hero-contents,
  #banner-contents {
    background: #b44030 url(//a.ocacdn.net/cdn/assets/css/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;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    -o-border-radius: 0.4em;
    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;
  }

  #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(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/i/white-right-arrow.png) no-repeat scroll 0px 0px transparent;
  }

  .blue.icon-right-arrow {
    background: url(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/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-1", "chaparral-pro-2", "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(//a.ocacdn.net/cdn/assets/css/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: 10px;
    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(//a.ocacdn.net/cdn/assets/css/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(//a.ocacdn.net/cdn/assets/css/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 img {
    max-width: 100%;
    display: block;
    width: auto;
  }

  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;
    display: inline-block;
    max-width: 95%;
  }

  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;
  }

  /* 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: 0.175em;
  }

  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 - HTML5 Boilerplate
  --------------------------------------------------------- */
  .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 screen and (max-width: 768px), projection and (max-width: 768px) {
  #utility {
    margin-right: 25px;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #utility {
    margin-right: 10px;
  }
}
@media screen and (max-width: 480px), projection and (max-width: 480px) {
  #utility {
    float: none;
    margin: 0 0 17px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #header .brand {
    position: static;
    margin-left: 25px;
    float: left;
    margin-bottom: 1em;
  }
  #header .brand img {
    width: 59px;
    height: 144px;
  }
  #header .brand a {
    position: static;
  }
}
@media screen and (max-width: 480px), projection and (max-width: 480px) {
  #header .brand {
    margin-top: 0;
    margin-bottom: 0;
  }
  #header .brand img {
    width: 47px;
    height: 115px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation {
    padding-top: 1em;
    margin-left: 104px;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #navigation {
    padding-top: 0;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation ul li {
    width: auto;
    float: none;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation ul li > a {
    min-height: 100px;
  }
}
@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation ul li > a {
    min-height: 0;
    border-right: none;
    border-left: 1px solid #DFE1E1;
    padding: .4em 17px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation ul li:first-child a {
    padding-left: 17px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation ul li:nth-child(4) a {
    padding-right: 17px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation li a strong {
    padding-right: .25em;
    font-size: 15px;
    display: inline;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation li a small {
    height: auto;
    display: inline;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #navigation li a small {
    display: inline-block;
  }
}
@media screen and (max-width: 480px), projection and (max-width: 480px) {
  #navigation li a small {
    display: none;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #navigation ul li.about,
  #navigation ul li.orthodoxy,
  #navigation ul li.directories,
  #navigation ul li.work {
    width: auto;
  }
}
@media screen and (max-width: 1000px), projection and (max-width: 1000px) {
  #footer-inner {
    margin: 0 20px;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #footer-inner {
    background: none;
    margin: 0;
  }
}

@media screen and (max-width: 1000px), projection and (max-width: 1000px) {
  .done-loading #footer-inner {
    background: none;
  }
}

@media screen and (max-width: 1000px), projection and (max-width: 1000px) {
  #footer-contents {
    margin: 0;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #footer-contents {
    margin: 0;
    padding: 10px 10px 20px;
  }
}

@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #footer-contents h1 {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 1000px), projection and (max-width: 1000px) {
  #bottom-inner {
    max-width: none;
    margin: 0 20px;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #bottom-inner {
    margin: 0 10px;
  }
}

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

  #footer-contents .domes {
    right: 5px;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #footer-contents h1,
  #footer-contents p {
    max-width: none;
  }

  .done-loading #footer-contents .domes {
    right: 0;
    width: 68px;
    height: 92px;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #hero figure {
    float: none;
    width: auto;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #hero .message {
    float: none;
    width: auto;
  }
}
@media screen and (max-width: 900px), projection and (max-width: 900px) {
  #banner .feature {
    float: none;
    width: auto;
  }
}
@media screen and (max-width: 900px), projection and (max-width: 900px) {
  #banner .today {
    float: none;
    width: auto;
  }
}
@media screen and (max-width: 900px), projection and (max-width: 900px) {
  #banner ul {
    margin-left: 6px;
  }
}
@media screen and (max-width: 900px), projection and (max-width: 900px) {
  #banner.big figure {
    margin: 0px 10px -20px 10px;
  }
}
@media screen and (max-width: 900px), projection and (max-width: 900px) {
  #banner.big .today h3 {
    margin-left: 20px;
  }
  #banner.big .today ul {
    margin-left: 16px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #content {
    margin-right: 25px;
    margin-left: 25px;
    padding-bottom: 1em;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  #content {
    margin-right: 10px;
    margin-left: 10px;
    padding-bottom: 1px;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  .body-w-sidebar {
    background: none;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #main-col {
    float: none;
    width: auto;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #main-col-contents {
    margin-right: 0;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #sidebar {
    float: none;
    width: auto;
    border: none;
    border-top: 1px solid #DFE1E1;
    margin-top: 2em;
    padding-top: 1em;
  }
}

@media screen and (max-width: 768px), projection and (max-width: 768px) {
  #sidebar-contents {
    margin: 0;
  }
}

@media screen and (max-width: 640px), projection and (max-width: 640px) {
  article header h1 {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 640px), projection and (max-width: 640px) {
  .onefifth,
  .onefourth,
  .onethird,
  .onehalf {
    max-width: 100%;
  }
}
@media screen and (max-width: 640px), projection and (max-width: 640px) {
  .alignright,
  .floatleft {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (max-width: 768px), projection and (max-width: 768px) {
  .news-items h2 {
    float: none;
    width: auto;
  }

  .news-items time {
    float: none;
    width: auto;
    text-align: left;
  }
}
@media screen and (max-width: 768px), projection and (max-width: 768px) {
  .news-highlights article {
    float: none;
    width: auto;
    margin-right: 0;
  }
}

/* end general "@media screen, projection" */
/* Special Layouts
--------------------------------------------------------- */
@media screen, projection {
  /* 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, projection {
  /* 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: 1em;
  }

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

  .legacy img {
    margin: 0px auto;
  }

  .fresh {
    padding-right: 38px;
    background: url(../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;
  }

  /* 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;
  }

  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;
  }

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

  #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, projection" */
/* wrap this file in a media selector to keep it from print */
@media screen, projection {
  /* 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(../img/filetypes/external-alt.png);
    padding: 2px 14px 2px 0;
  }

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

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

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

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

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

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

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

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

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

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

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

  /* 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(../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, projection" */
/* wrap the IE-specific files in a media selector to keep them from print */
@media screen, projection {
  /* 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, projection" */