/************************
Common Content Elements shared across many pages
************************/
div.headline, h1.headline {
    font-weight: bold;
    font-size: 150%;
    margin: 5px 0px 0px 0px;
}
div.subhead, h2.subhead {
    font-weight: bold;
    font-size: 125%;
    margin: 5px 0px 0px 0px;
}
div.kicker, h2.kicker {
    font-weight: bold;
    font-size: 125%;
    margin: 5px 0px 0px 0px;
    color: dimgrey;
}
div.body, p.body, span.story_wrapper div p { /* story_wrapper around outside content */
    text-indent: 1.5em;
    margin-bottom: 0.5em;
    margin-top: 0em;
    font-size: 15px;
    line-height: 1.3em;
}
div.caption {
    /* used in many context - pictures, video, albums, world/community picts, so limit to text styling not sizeing and positioning */
    
}
p.caption {
    /* paragraph captions applied by common fn */
    margin: 0.25em 0px 0.25em 0px;
}
div.pict_in_story_full p.caption {
    text-indent: 0em; /* span.story_wrapper puts one on */
}
div.section {
    color: dimgrey;
    margin: 8px 0px 5px 0px;
    border-width: 0px 0px 3px 0px;
    border-color: darkgrey;
    border-style: solid;
}
div.archive_date {
    text-align: center;
    color: dimgrey;
}
div.archive_date a {
    text-decoration: none;
    color: dimgrey;
}
img.pict_nav_other_link { /* used in both pict and story display */
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
    padding: 2px;
}
div.error_message { /* used on day, story, obit. pict */
    text-align: center;
    font-size: 200%;
    font-weight: bold;
    margin: 30px;
    min-height: 750px;
}
div.no_col_break { /* for day display so obits and print story headlines dont split cols */
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    break-inside: avoid;
}

/* need some more headers for richer style 
the standalone pict header could use one of these headers of have adouble selector with it */
h3.sidebar, div.sidebar_header {
    font-weight: bold;
    font-size: 125%;
    text-align: center;
    line-height: normal;
    margin-top: 0px;
}
h3 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 2em;
    line-height: normal;
}
h4 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 2em;
    line-height: normal;
}
h5 {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 1.25em;
    line-height: normal;
}
h5.left {
    text-align: left;

}
div.center_bold, p.center_bold { /* use with class="body" for section divisions or questions in interview, transition to class="body center bold" */
    text-indent: 0em;
    font-weight: bold;
    text-align: center;
}
div.center, p.center, h5.center {
    text-indent: 0em;
    text-align: center;
}
div.bold, p.bold {
    font-weight: bold;
}
div.no_indent, p.no_indent {
    text-indent: 0em;
}

div.sidebar {
    float: right;
    clear: right;
    width: 40%;
    background-color: lightblue;
    margin: 10px 0px 10px 10px;
    padding: 10px;
    font-size: 15px; /* from class="body" */
    line-height: 1.3em; /* from class="body" */
}
@media screen and (max-width: 300px) {
div.sidebar {
    float: none;
    width: 80%;
    margin: 0px auto 10px auto;
}
}
div.sidebar img {
    display: block;
    margin: auto;
    width: 80%;
}

/* blockquote might not be the intended element for a pull quote */
blockquote.pull_quote {
    font-family: "Times", "Times New Roman", serif;
    font-size: 150%;
    line-height: normal;
    text-align: center;
    border-top: 2px solid #777;
    border-bottom: 2px solid #777;
    padding: 10px;
}
div.pull_quote_quotee {
    text-align: right;
}
.floated_right { /* lifted from sidebar for pull-quotes, but could be useful elsewhere too */
    float: right;
    clear: right;
    width: 40%;
    margin: 10px 0px 10px 10px;
    padding: 10px;
}
@media screen and (max-width: 300px) {
div.sidebar {
    float: none;
    width: 80%;
    margin: 0px auto 10px auto;
}
}

p.dropcap, div.dropcap {
    text-indent: 0em;
}
p.dropcap:first-letter, div.dropcap:first-letter {
    color: #286f8a;
    font-weight: bold;
    initial-letter: 2;
    -webkit-initial-letter: 2;
}

/* shared by archive pictures and breaking news pictures */
img.pict {
    max-width: 100%;
    display: block;
    margin: 0px auto 0px auto;
}
div.photographer {
    text-align: center;
    color: dimgrey;
}
div.resale {
    text-align: center;
}

/* from archive stories */
div.writer {
    color: dimgrey;
    margin-bottom: 6px;
}
div.pict_in_story {
    float: right;
    clear: right;
    max-width: 280px;
    margin: 0px 0px 10px 10px;
    color: dimgrey;
    font-weight: bold;
    text-align: justify;
}
div.pict_in_story_left {
    float: left;
}
div.pict_in_story img {
    width: 100%;
}
div.pict_in_story_full {
    max-width: 100%;
    margin: 10px 0px 10px 0px;
    color: dimgrey;
    font-weight: bold;
    text-align: justify;
    /* font-size: 15px; these would be applied to picts inside p.body, reset?
    line-height: 1.3em;*/
}
div.pict_in_story_full img {
    /* was just width: 100%;*/
    max-width: 100%;
    max-height: 600px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* shared between archive nav > day and home page */
div.day_display_container {
    margin-top: 4px;
}
div.story_preview {
    display: inline-block;
    width: 49.5%;
    vertical-align: top;
    text-align: left; /* resetting from outer container */
}
div.story_preview_inner {
    padding: 4px;
}
div.story_preview_col {
    clear: both;
}
div.story_preview img, div.story_preview_col img {
    float: right;
    max-width: 40%;
    max-height: 200px;
    margin: 0px 0px 10px 10px;
}
div.two_col { /* used for obits and non-stories */
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
div.one_col_center { /* used as above but when only one item */
    max-width: 400px;
    margin: 0px auto;
}
div.referal_link {
    text-align: center;
    font-weight: bold;
    font-size: 125%;
    margin-top: 10px;
}
@media screen and (max-width: 800px) {
div.story_preview {
    display: block;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
div.two_col { /* used for obits and non-stories */
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
}

/* these were orig in page headers, moved here for better reuse eventhough pretty specific */
/* For Stories */
div.story_wrapper {
    margin-top: 8px;
}
div.story_display_container {
    max-width: 600px;
    margin: 0px auto 0px auto;
}
div.story_nav_wrapper {
    max-width: 600px;
    margin: 0px auto 0px auto;
    background-color: lightgrey;
    padding: 4px;
}
@media screen and (max-width: 700px) {
div.pict_in_story {
    max-width: 50%;
    /*float: none;
    clear:both;
    margin: 0px auto 10px auto;*/
}
}
/* not moving in Goal Line Preview specific styles just yet */

/* For Obits */
div.obit_wrapper {
    float: right;
    width: 67%;
    margin-top: 8px;
}
div.obit_nav_wrapper {
    float: left;
    width: 30%;
    margin-top: 50px;
    background-color: lightgrey;
    padding: 4px;
}
div.obit_display_container {
    max-width: 400px;
    margin: 0px auto 0px auto;
}
div.obit_pict_in_story {
    float: right;
    clear: right;
    max-width: 50%;
    margin: 0px 0px 10px 10px;
}
div.obit_pict_in_story img {
    width: 100%;
}
div.obit_pict_in_preview {
    float: right;
    clear: right;
    max-width: 30%;
    margin: 0px 0px 10px 10px;
}
div.obit_pict_in_preview img {
    width: 100%;
}
@media screen and (max-width: 800px) {
div.obit_wrapper {
    float: none;
    width: auto;   
}
div.obit_nav_wrapper {
    float: none;
    width: auto;
    max-width: 400px;
    margin: 20px auto 0px auto;
}
}

/* For Picts */
div.pict_wrapper {
    margin-top: 8px;
}
div.pict_display_container {
    max-width: 600px;
    margin: 0px auto 0px auto;
}
div.pict_nav_wrapper {
    background-color: lightgrey;
    padding: 4px;
    margin-top: 8px;
}

/* Generic Styles */
.center_by_margin {
    margin-left: auto;
    margin-right: auto;
}
.bottom_line {
    border-width: 0px 0px 1px 0px;
    border-color: black;
    border-style: solid;
}

/* Table Styles */
table.color_rows_odd tr:nth-child(odd) {
    background-color: #E0F0FF;
}
table.color_rows_even tr:nth-child(even) {
    background-color: #E0F0FF;
}
table.no_borders {
    
}
table.no_borders td, table.no_borders th {
    padding: 2px;
}
table.col_2_right td:first-child + td {
    text-align: right;
}
table.col_3_right td:first-child + td + td {
    text-align: right;
}
table.col_4_right td:first-child + td + td + td {
    text-align: right;
}
table.col_5_right td:first-child + td + td + td + td {
    text-align: right;
}