/* * ------------------------------------------

Base stylesheet for Nellor Law Office 

Re-written August 14, 2014; Modified 1/6/2016, 1/19/2017, 1/22/2017, 1/28/2022, 5/30/2024

Colors: 

    Indigo: 51, 0, 153

--------------------------------------------* */

/* FONT CALLS */

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd.otf) format("opentype");
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd-Bold.otf) format("opentype");
        font-weight: bold;
        font-style: normal;
    }

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd-Oblique.otf) format("opentype");
        font-weight: normal;
        font-style: oblique;
    }

    @font-face {
        font-family: "News Gothic";
        src: url(../fonts/NewsGothicStd-BoldOblique.otf) format("opentype");
        font-weight: bold;
        font-style: oblique;
    }


/* BASIC PAGE SETUP */

    html {
        box-sizing: border-box;
        font-size: 16px; /* to set base for global control of scaling */
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    body { 
        font-family: "News Gothic", Helvetica, Arial, Verdana, sans-serif;
        font-size: 100%;
        color: #000;
        margin: 0 auto;
        padding: 1.5em 2em 2em 2em;
        width:  80em; /* set to % to make fluid */ /* added this when page wrapper eliminated */
    }

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


/* CONTAINERS */

    header {
        position: relative; /* So I can position elements in and relative to the header */
        overflow: hidden; /* Makes the header fill to the elements it contains */
    }

    #masthead {
        position: relative;
    }

    .top-centered {
        position: absolute;
        top: 24px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 97%;
        z-index: 999;
    }

    .top-left {
        position: absolute;
        top: 13%;
        left: 18px;
        width: 33%;
        padding: 24px;
        z-index: 998;        
    }

    .top-right {
        position: absolute;
        top: 10%;
        right: 18px;
        width: 25%;
        padding: 24px;
        z-index: 997;
    }

    .bottom-centered {
        position: absolute;
        bottom: 4%;
        left: 50%;
        transform: translate(-50%, -4%);
        width: 100%;
        z-index: 996;
    }

    .bottom-left {
        position: absolute;
        bottom: 27%; /* 47% for rocky shore, 37% for birds on sea posts, 27% for thcherry blossoms video */
        left: 3%;
        width: 40%;
        z-index: 995;
    }

    .bottom-right {
        position: absolute;
        bottom: 32px;
        right: 3%;
        width: 56%;
        z-index: 994;
    }

    blockquote {
        margin:  10px 0 0 0;
        padding: 20px;
        border: 2px rgba(153, 204, 0, 1) solid;
        border-radius: 4px;
     }

    .sidebar {
        margin: 32px auto;
        padding-bottom: 1rem;
        border: 1px solid rgba(0, 51, 141, 1);
        border-radius: 4px;
        font-size: .8rem;
        color: rgba(0, 51, 141, 1);
    }

    .box {
        width: 100%;
        padding: 16px;        
        background-color: rgba(0, 0, 0, .1);
        border: 1px solid rgba(222, 226, 207, .3); /* Set to same as background color. Adds a crisp edge */
        }

    .box h5 {
        font-size: 1.4em;
        line-height: 1.4em;
        font-weight: 600;
        color: rgba(33, 31, 29, .5);
        font-style: italic;
        text-align: left;
        text-indent: 16px;
        border-bottom: 8px solid rgba(33, 31, 29, .5);
        display: inline-block; /* Forces bottom border to with of the paragraph */
        margin: 16px 0 0 -16px;
    }

    .box:first-of-type {
        margin-top: 4.8em;
    }

    .box + .box {
        margin-top: 1em;
    }

    footer {
        text-align: center;
        margin: 30px 0;
        border: 1px solid rgba(222, 226, 207, 1.0);
        padding: 18px 0;
        font-size: 1em;
        background-color:rgba(229, 229, 247, .1);
        background-size: 10px 10px;
        background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 1px,
         rgba(229, 229, 247, .1) 0, rgba(229, 229, 247, .1) 50%); /* A diagonal background pattern */

    }

    figure {
        margin: 0;
        padding: 16px;
        border: 1px solid rgba(0, 0, 0, .1);
/*        background-color: rgba(0, 0, 0, .1);*/
        background-color:rgba(229, 229, 247, .1);
        background-size: 10px 10px;
        background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .1) 1px,
         rgba(229, 229, 247, .1) 0, rgba(229, 229, 247, .1) 50%); /* A diagonal background pattern */
    }

    figure img {
        width: 100%;
        border: 1px solid rgba(222, 226, 207, 1.0);
    }

    figcaption {
        text-align: center;
        text-transform: uppercase;
        color: rgba(0, 0, 0, .6);
        font-weight: 600;
        margin-top: 16px;
    }

    #home figure:hover {
        border: 3px solid rgba(0, 0, 0, 1);
        /*border: 3px solid rgba(0, 255, 64, 1);*/
    }



    #masthead-video {
        width: 100%; /* width of body minus body padding ?? seems to be same as 100% */
        height: auto;
        object-fit: contain;
        background-color: rgba(225, 225, 225, 1);
    }


/*  HEADINGS */

    h1 {
        font-weight: 600;
    }

    h2,
    h3,
    h4 {
        font-weight: 600;
        margin: 0;
    }

    h2 {
        font-size: 2em;
        margin-top: 12px;
    }

    h3 {
        font-size: 1.6em;
    }

    h4 {
        font-size: 1.2em;
    }

    h5,
    h6 {
        margin: 1em 0;
    }

    h5 {
        font-size: 1.2em;
        color: rgba(51, 0, 153, .7);
        margin: 20px 0;
        border-bottom: solid 1px rgba(51, 0, 153, .3);
        padding: 0;
    }

    #links h5 {
        margin: 0;
        padding: 0;
        font-size: 4em;
        line-height: .8em;
        color: rgba(51, 0, 153, .1);
        background-color: #fff;
    }

    h6 {
        font-size: 100%;
    }


/* BASIC TYPOGRAPHY */

    p,
    li, 
    td,
    dl {
        font-size: 1.2em;
        font-weight: 300;
        line-height: 1.6em;
        hyphens: auto;  
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto; /* Automatic hyphens not supported in Chrome */        
    }

    p {
        margin: 1em 0;
    }

    .bottom-left p {
        font-size: 2em;
        font-weight: 600;
        line-height: 1.25em;
        margin: 0;
        color:  rgba(255, 255, 255, 1.0);
        text-shadow: 0 0 2px black;
    }

    .bottom-right p {
        font-size: 4em;
        font-weight: 600;
        line-height: 1.2em;
        margin: 0;
        color:  rgba(255, 255, 255, 1.0);
        text-align: right;
        text-transform: uppercase;
        text-shadow: 0 0 2px rgba(0, 0, 0, .4);
    }

    blockquote p {
        font-family: "Times New Roman", Times, Georgia, serif;
        font-size: 1rem;
        font-style: italic;
        line-height: 1.7rem;
     }

    #map p {
        text-align: center;
    }

    li, td {
        margin: 1em 0;
    }

    sup,
    sub {
        font-size: .6em;
        line-height: 0;
        position: relative;
    }

    sup {
        vertical-align: super;
    }

    sub {
        vertical-align: baseline;
    }


/* TABLES */

    table{
        border-collapse: collapse;
        border-spacing: 0;
        margin-left: 10%;
        width: 75%;
    }


/* LISTS */

    ol,
    ul {
        margin: 0;
        font-size: 1rem;
    }

   ul li {
        list-style-type: none;
    }

    ol ol {
        list-style-type: lower-alpha;
        }

    #bankruptcy ul li,
    #eleven ul li,
    #thirteen ul li,
    #seven ul li,
    #reorganization main ul li,
    #general-counsel ul li,
    #wills ul li,
    #mediation ul li,
    #disclaimer ul li {
        list-style-type: square;
    }

    footer li {
        font-size: 100%;
        color: #ccc;
    }

    #fees .col li,
    #about .col li {
        list-style-type: square;
    }


/* LINKS */

    a {
        /*color: rgba(51, 0, 153, 1);*/
        text-decoration: none;
    }

    a:hover {
        color: red;
    }

    a:active {
        text-decoration: underline;
    }


/* THE MAIN NAVIGATION */ 

    nav ul {
        padding: 0;
        list-style-type: none;
        text-align: center;
        font-size: 80%;
    }

    header nav {
        overflow: auto;
    }

    header nav li {
        font-size: 1.1rem;
    }

   /* footer nav {
       font-size: 90%;
    }*/ /* Why is this here? See "THE FOOTER NAVIGATION LINKS" */

    nav li {
        display: inline;
        margin: 0;
    }

    header nav a {
        float: left;
        width: 14.2857%; /* 100/9= 11.111, 100/8= 12.5, 100/7= 14.2857, 100/6= 16.667 */
        font-weight: 500;
        text-decoration: none;
        letter-spacing: 1px;
        color:rgba(255, 255, 255, 1);
        padding: 8px 0;
        background-color: rgba(0, 0, 0, .5);
    }

    header nav a:hover {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(0, 0, 0, .8);
        font-weight: 500;
        border-left: 1px solid rgba(255, 255, 255, 1.0);
        border-right: 1px solid rgba(255, 255, 255, 1.0);
    }

    header nav a:active {
        color: rgba(0, 0, 0, 1);
        background-color: rgba(255, 255, 255, .7);
        text-decoration: none;
    }

    header nav a.current {
        color: rgba(0, 0, 0, 1);
        background-color: rgba(255, 255, 255, .7); /* Yhis works best wirh cherry tree video */
        /*background-color: rgba(0, 0, 0, .1);*/
        border: none;
        font-weight: 500;
        cursor: default;
    }


/* MENU FOR IN-PAGE LINKS ON THE REORGNIZATION PAGE */

    .span_2_of_9:first-child {
        padding-top: 60px;
    }

    .bankruptcy-menu {
        font-size: 1.2rem;
        width: 240px;
    }

    .bankruptcy-menu li {
        border-bottom: 1px solid rgba(85, 86, 90, .3);
        list-style-type: none;
        margin-left: -40px;
    }

    .bankruptcy-menu li:first-of-type {
        border-top: 1px solid rgba(85, 86, 90, .3);
    }

    .bankruptcy-menu a {
        display: block;
        color: rgba(85, 86, 90, 1);
        padding: 12px 0 12px 12px;
    }

    .bankruptcy-menu a:hover {
        color: rgba(255, 0, 0, 1);
        background-color: rgba(85, 86, 90, .1);
    }

    .bankruptcy-menu a:active {
        color: rgba(255, 255, 255, 1);
        background-color: rgba(85, 86, 90, .5);
    }

/* THE FOOTER NAVIGATION LINKS */

    footer nav {
        margin-top: 1em;
    }

    footer #copyright {
        margin-top: 1em;
    }

    footer a {
        font-size: 1rem;
        color: rgba(0, 0, 0, .8);
        font-weight: 500;
        text-decoration: none;
        padding: 8px 12px;
    }

    footer a:hover {
        /*color: rgba(51, 0, 153, 1);*/
        text-decoration: underline;
    }

    footer nav a.current {
        color: rgba(0, 0, 0, .4);
/*        background-color: rgba(255, 255, 255, 1.0);*/
        cursor: default;
        text-decoration: none;
    }


/* A VERTICAL NAVIGATION BAR */

    .vnav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .vnav li {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    .vnav li a {
        display: block;
        color: rgba(0, 0, 0, .5);
        font-weight: 500;
        font-size: 1.5em;
        padding: 8px;
    }

    .vnav a:hover {
        color: rgba(255, 255, 255, 1.0);
        background-color: rgba(0, 0, 0, .1);
    }


/* THE ALPHABETICAL NAVIGATION BARS */

    .alphabet_list {
        padding: 0;
        text-align: center;
        overflow: auto;
    }

    .alphabet_list li {
        display: inline;
    }

    .alphabet_list a {
        width: 3.84%;
        float: left;
    }

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


/* IMAGES */

    header img {
        width: 100%;
        height: auto;
    }

    img[alt="map to office"] {
        width: 32%;
        float: left;
        margin: 12px 24px 6px 0;
    }

    img[alt="Portrait of J D Nellor"] {
        width: 35%;
        float: left;
        margin: 6px 36px 18px 0;
    }

    #map img {
        margin: 20px 25%;
        width: 50%;
        height: 50%;
        border: 2px #ccc solid;
    }

    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .martindale {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    } /* This is the Martindale-Hubbell rating graphic, not scripted */

    .mh-rating {
        float: right;
        margin: 0 1em 0 8px;
    } /* This is the Martindale-Hubbell rating badge from the script */


/* PAGE SPECIFIC STYLES */

    #map {
        background: #ccc;
    }