/* There is a large amount of redundancy here to increase configurability */

/* GENERAL */

    body {margin: auto; max-width: 800px; text-align: center; font-family: 'EB Garamond'; line-height: 150%; padding-top: 10px}

    a {text-decoration: none}
    a:visited {text-decoration: none; color:#0000BB}

    hr {max-width: 800px}

    .hrarea {color: #FDFDFD; border-color: #FDFDFD; background-color: #FDFDFD;}

    .banner {line-height: 1.5; max-width: 800px; margin: auto}


/* (TOP) BANNER of VALUES */
/* Health | Truth | Love | Beauty | Peace */

    #the {font-size: 105%; color: grey; line-height:140%}
    #garden {font-size: 180%; line-height:120%}

    .topmenu {display: inline-block; width: 19%; text-align: center}

    .health {color: #ee1d24}
    .truth {color: #009000}
    .love {color: #000000}
    .beauty {color: #900090}
    .peace {color: #0038b8}

    .source {color: #bf9000}
    .gray {color: #808080;}
    
    .diamond {font-size: 80%; position: relative; top: -1px;}


/* (TOP) BANNER of LOCATION */
/* Example: */
/* (God) > (Hth)     (Hth) < (God) */

    .location {
        display: inline-block;
        width: 45%;
        font-family: 'Roboto Mono';
        font-size: 65%;
        color: grey;
        top: -100px;
    }

    .locationdiv {
        line-height: 70%;
    }

    .left {text-align: left}
    .right {text-align: right}


/* (TOP) BANNER of DEED */

    .deedlocation {
        display: inline-block;
        width: 32%;
        font-family: 'Roboto Mono';
        font-size: 65%;
        color: grey;
        top: -100px;
    }

    .center {text-align: center}

/* MIDDLE STUFF */

    button {
      font-family: 'EB Garamond';
      background-color: #FFFFFF; /* Green */
      border-top: 1px solid #C0C0C0;
      border-bottom: 1px solid #C0C0C0;
      border-left: 0px solid #C0C0C0;
      border-right: 0px solid #C0C0C0;
      color: #0000EE;
      padding: 4px 1px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }

/* DIFFERENT TABS */

    .whathowwho {
        /* height: 10%;
        max-height: 3px; */
        line-height: 70%;
    }

    #Resources {
        display:none;
    }

    #People {
        display:none;
    }


    .roundaydiamond {font-size: 50%}

    .whylabel {font-family: 'Roboto Mono'; font-size: 90%; color: grey; line-height:50%}
    .whydiamond {font-size: 60%; position: relative; top: -2px}
    .whyheader {font-size: 250%; line-height: 110%}

    .godwayheader {font-size: 250%; line-height: 70%}

    .whatwholabel {font-family: 'Roboto Mono'; font-size: 80%; color: grey}
    .whatwhoheader {font-size: 130%}

  /* REDUNDANT PRIME CSS */

    .primelabel {font-family: 'Roboto Mono'; font-size: 75%; color: grey; line-height:50%}
    .primediamond {font-size: 60%; position: relative; top: -2px}
    .primepreheadersmaller {font-size: 110%; line-height: 110%}
    .primepreheader {font-size: 130%; line-height: 110%}
    .primeheader {font-size: 180%; line-height: 110%}

    .subprimelabel {font-family: 'Roboto Mono'; font-size: 75%; color: grey; line-height:50%}
    .subprimediamond {font-size: 50%; position: relative; top: -2px}
    .subprimepreheader {font-size: 100%; line-height: 110%}
    .subprimeheader {font-size: 130%; line-height: 110%}

    .arealabel {font-family: 'Roboto Mono'; font-size: 80%; color: grey;}
    .arealabelsmall {font-family: 'Roboto Mono'; font-size: 70%; color: grey;}

  /* END OF REDUNDANT PRIME CSS */

    .intropic {width: 55%; height: 55%; max-width: 400px; max-height: 450px; border: 5px solid #555;}

    .srvpic {width: 85%; height: 85%; border: 5px solid #555;}

  /* TRUTH & BEAUTY SUBVALUES */

    .subject {font-size: 85%}
    .tbleft {display: inline-block; width: 29%; text-align: center}
    .tbmiddle {display: inline-block; width: 37%; text-align: center} 
    .tbright {display: inline-block; width: 29%; text-align: center} 

  /* END OF TRUTH & BEAUTY SUBVALUES */


    .howto {line-height: 175%; width: 90%}
    .howtoreason {color: grey}

    .valuedefinition {color: grey}
    .valuereason {font-weight: bold;}
    .valueorder {font-size: 135%;}

    .centernameline {color: #696969;}

    .beforeaftermodule {color: grey;}
    .divisionlabel {font-family: 'Roboto Mono'; font-size: 70%; color: grey}

    .book {line-height: 175%; max-width: 100px; padding-left: 20px}

    .primestitle {font-size: 140%}
    .primeslist {font-size: 120%}

    .practicetitle {font-size: 160%}

    .howintro {line-height: 175%}
    .how {line-height: 175%}

    .resourcetitle {font-size: 150%}
    .resourcelevel{font-size: 120%; color: #333333; line-height: 80%}
    .resourcelist {
        text-align: left; 
        padding: 10px
    }
    .resourcetype {font-family: 'Roboto Mono'; font-size: 80%; color: grey}
    .resource {padding-left: 10px}
    .dot {font-size: 80%; color: #222222;}

    .level{font-size: 120%}

    .inpcetime{font-size: 125%}
    .inpcelabel{font-family: 'Roboto Mono'; font-size: 80%; color: grey}
    .inpcesmall{font-size: 85%; color: grey}

    .storytitle{font-size: 140%}
    .story{text-align: left; line-height: 160%; padding-left: 10px; padding-right: 10px;}

/* SCHEDULE TABLE */

    .scheduleleft {display: inline-block; width: 20%; text-align: top center; vertical-align: top}
    .value {font-family: 'Roboto Mono'; color: grey; font-size: 70%;}
    .valdiamond {font-size: 80%;}

    .scheduleright {display: inline-block; width: 74%; text-align: left}
    .conjunction {color: #696969;}

/* COMMEASURE TABLE = COMMITMENT + MEASUREMENT TABLES */

    .commeasureheaderleft {display: inline-block; width: 8%; text-align: right}
    .commeasureheaderright {display: inline-block; width: 8%; text-align: left}
    .commeasureheadercenter {display: inline-block; width: 78%; text-align: center}

    .commeasureleft {display: inline-block; width: 8%; text-align: right}
    .commeasureright {display: inline-block; width: 8%; text-align: left}
    .commeasurecenter {display: inline-block; width: 78%; text-align: center}

    .commeasuremodule {font-family: 'Roboto Mono'; color: grey; font-size: 75%}

/* SPECIAL RELIGION TABLE */

    .religionmenu {display: inline-block; width: 19%; text-align: center; line-height: 120%}

/* BOTTOM BANNER */

    .waymenu {display: inline-block; width: 13%; text-align: center; line-height: 120%}
    .waymenusmall {font-size: 70%}
    .waymenucenter {line-height: 60%}
    .bottommenu {display: inline-block; width: 32%; text-align: center}
    .downloadmenu {display: inline-block; width: 45%; text-align: center}
    .bottomdownload {font-family: 'Roboto Mono'; line-height: 0.5; font-size: 75%; font-weight: 540; color: #666666}
    .icons {height: 22px; width: 22px}

    .vertical-center {
      vertical-align: top;
    }

/* WEB RESPONSIVE */

    @media (orientation: landscape) {
        .portrait {display: none}
    }

    @media (orientation: portrait) {
        .landscape {display: none}

        .diamond {display: none}
        .whydiamond {display: none}
        .primediamond {display: none}
        .subprimediamond {display: none}

        .commeasureheaderleft {display: none}
        .commeasureheaderright {display: none}

        .commeasureleft {display: none}
        .commeasureright {display: none}
    }