Reflections on the Holy Scripture

/** Heavenly
 *  CSS Theme for Life's Handbook
 *  Author: Timothy Foster
 *  Version: 1.00.140530
 *  The Heavenly CSS Theme and HTML layout is licensed under CC BY-SA 4.0
 *
 *  This site uses elements of Twitter Bootstrap
 *  Twitter Bootstrap licensed under MIT and Copyright 2014 by Twitter
 *  See getbootstrap.com
 *  
 ** TOC:
 *      IMPT: Imports
 *      GLOB: Global
 *      CONT: Containers
 *      HEAD: Header
 *      TOPB: Top Bar
 *      MAIN: Main Content
 *      ACTA: Action Area
 *      FOOT: Footer
 *      CODE: Code Blocks
 *      BSFM: Bootstrap Formatting
 *      BSCL: Bootstrap Colors
 *      SUBM: Submissions Page
 *      AUXC: Auxiliary Classes
 *      CVBS: Convert to Bootstrap
 *      TBPH: Tablets and Phones
 *  **********************************************************/

/*  Imports  (!IMPT)
=============================================================*/
@import url('/local--files/css:heavenly/css_calligraffiti.css');

/*  Global  (!GLOB)
=============================================================*/
a{
    color: #459AC4;
    text-decoration: none;
    background: none;
}
a:hover,
a:focus{
    color: #3F94BE;
    text-decoration: underline;
    background: none;
}
a.newpage{    color: #900; }
a.newpage:hover,
a.newpage:focus{    color: #800; }

.printuser,
.printuser *,
#history-form-1,
#history-form-1 *{
    display: none !important;
    visibility: hidden !important;
}

/*  Containers  (!CONT)
=============================================================*/
html{  background-color: #FBFBFB; }
body{
    background-color: #BCD4EE;
    background-image: linear-gradient(to bottom, #BCD4EE 170px, #E1EEF7 230px, #BCD4EE 500px);
    background-repeat: no-repeat;
}

/*  Header  (!HEAD)
=============================================================*/
header{
    background: #FFF;
    background: linear-gradient(to bottom, #FBFBFB 70px, #FFFFFF);
    background-repeat: no-repeat;
    border-bottom: 4px solid #B2B2B9;
}
header .container{
    background-image: url('/local--files/css:heavenly/logo-top.png');
    background-repeat: no-repeat;
}
header .siteHead{
    height: 120px;
    text-align: center;
    font-family: 'Calligraffiti', cursive;
}

header .siteTitle{
    font-size: 49px;
    margin: 12px 0;
}
header .siteTitle a{  transition: color 500ms; }
header .siteTitle a:hover{
    text-decoration: none;
    color: #1F749E;
}
header .siteTitle a:focus{  text-decoration: none; }
header .siteSubtitle{
    font-size: 18px;
}

/*  Top Bar  (!TOPB)
=============================================================*/
.topbar{
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 2px;
    min-height: 0;
}
.topbar-hr{
    border-top: 1px solid #BBB;
    margin: 0 24px;
}
.topbar ul.navbar-nav{
    float: left;
    position: relative;
    left: 50%;
}
.topbar ul.navbar-nav li{
    position: relative;
    right: 50%;
    margin: 0 14px -6px 14px;
    font-weight: bold;
    font-size: 14px;
    font-color: #777;
    text-shadow: 0 1px 2px #FFF;
}
.topbar ul.navbar-nav li a{
    padding-bottom: 2px;
    border-bottom: 4px solid rgba(128, 128, 128, 0);
    transition: all 250ms;
    padding-bottom: 2px;
}
.topbar ul.navbar-nav li a:hover{
    border-bottom: 4px solid rgba(128, 128, 128, 1);
}

/* * Tablet/Small Screen * */
.topbar .navbar-toggle{
    box-shadow: 0 0 2px rgba(0,0,0,.08) inset;
    border-radius: 8px;
    transition: border-color 250ms;
}
.topbar .navbar-toggle:hover,
.topbar .navbar-toggle:focus{
    background: rgba(0,0,0,0);
    border-color: #ADADAD;
}
.topbar .navbar-toggle:active{
    box-shadow: 0 3px 5px rgba(0,0,0,.125) inset;
}
.topbar .navbar-toggle .icon-bar{
    transition: background-color 250ms;
}
.topbar .navbar-toggle:hover .icon-bar,
.topbar .navbar-toggle:focus .icon-bar{
    background-color: #ADADAD;
}

.topbar .navbar-collapse.collapsing,
.topbar .navbar-collapse.in{
    text-align: right;
}
.topbar .navbar-collapse.collapsing ul.navbar-nav,
.topbar .navbar-collapse.in ul.navbar-nav{
    left: 0;
    float: none;
}
.topbar .navbar-collapse.collapsing ul.navbar-nav li,
.topbar .navbar-collapse.in ul.navbar-nav li{
    right: 0;
}
.topbar .navbar-collapse{  border: none; }
.topbar .navbar-collapse.collapsing ul.navbar-nav li a:hover,
.topbar .navbar-collapse.collapsing ul.navbar-nav li a:focus,
.topbar .navbar-collapse.in ul.navbar-nav li a:hover,
.topbar .navbar-collapse.in ul.navbar-nav li a:focus{
    border-color: rgba(0,0,0,0);
    padding-right: 2em;
}

/*  Main Content  (!MAIN)
=============================================================*/
.contentWrap .pageTitle{
    font-family: 'Calligraffiti', cursive;
    text-align: center;
    border: none;
    color: #3F94BE;
    font-size: 36px;
    text-shadow: 0 2px 1px rgba(0, 0, 0, .1);
}
    
.contentWrap .contentBubble,
#action-area{
    background: #FFF;
    border: 1px solid #BBB;
    padding: 2em;
    border-radius: 2em;
    box-shadow: 0 4px 6px -2px rgba(0,0,77,.12),
                0 0 8px rgba(0,0,0,.2) inset;
    margin-bottom: 21px;
}
.contentWrap .contentBubble p:last-child{
    margin-bottom: 0;
}
.contentWrap .contentBubble h1{
    margin-top: 0;
    border-bottom: 1px solid #CCC;
    font-size: 32px;
}
.contentWrap .contentBubble h1 a{
    color: #2F84AE;
    transition: color 250ms;
}
.contentWrap .contentBubble h1 a:hover,
.contentWrap .contentBubble h1 a:focus{  text-decoration: none; }
    
.contentWrap .pageOptions{
    text-align: center;
}
.contentWrap .pageOptions .page-watch-options,
#page-info{
    display: none;
}

.quote, blockquote{
    border-left: 2px solid #CCC;
    border-right: 2px solid #CCC;
    padding: 4px 1em;
    margin: 1em;
    color: #777;
}
blockquote p{  font-size: 14px; }
.quote.verse{
    font-style: italic;
}
.quote .cite{
    display: block;
    text-align: right;
    padding-top: 6px;
}
.quote.verse .cite{
/*  font-family: 'Calligraffiti', cursive;  */
    font-style: normal;
}
.quote .cite:before{
    content: '- ';
}
.quote.verse .cite:before{
    content: '~ ';
}
.quote.verse .cite .version{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    vertical-align: middle;
    font-size: 80%;
    display: inline-block;
    margin-left: 5px;
}
.quote.verse .cite .version:before{
    content: '[';
}
.quote.verse .cite .version:after{
    content: ']';
}

/*  Action Area  (!ACTA)
=============================================================*/
#action-area h1{  display: none; }
#action-area .form-group:nth-child(7){  display: none; }
#action-area .do-not-notify{  display: none; }
#action-area .form-group .col-sm-5{  width: 75%; }
#action-area .form-group:last-child{
    text-align: center;
}
#action-area .form-group:last-child > div{
    margin-left: 0;
    width: 100%;
}
#action-area .form-group:last-child a{
    margin: 4px 12px;
    font-size: 120%;
}

/*  Footer  (!FOOT)
=============================================================*/
footer{
    background: #FFF;
    background: linear-gradient(to top, #FBFBFB 70px, #FFFFFF);
    background-repeat: no-repeat;
    border-top: 4px solid #B2B2B9;
    margin-top: 12px;
    padding: 14px 0 0 0;
}
footer .footerColMid{
    text-align: center;
}
footer .footerColMid img{
    margin-top: -8px;
}
footer .footerColRight{
    text-align: right;
}
footer .licenseArea{
    text-align: center;
}

/*  Code Blocks  (!CODE)
=============================================================*/
.code{
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    background: #FFF;
    border: none;
}
 
div.code{
    background-image: url('http://newprogrammer.wdfiles.com/local--files/css:new-css/code_generic.png');
    background-repeat: no-repeat;
    background-position: top right;
    border: 1px solid #C5E3EC;
    border-radius: 5px;
    margin: 10px 1px;
    padding: .5em 1em;
    box-shadow: 2px 2px 4px -4px rgba(0,0,0,.25) inset;
    overflow: auto;
    position: relative;
 
    counter-reset: linenumber;
}
div.code p,
div.code pre{
    margin: 0;
    padding: 0;
}
div.code span.line{
    counter-increment: linenumber;
    display: inline-block;
    min-width: 100%;
    padding-left: 32px;
}
div.code span.line:hover{  background-color: rgba(197,227,236,.18); }
div.code span.line::before{
    content: counter(linenumber);
    position: absolute;
    left: 10px;
    width: 2.25em;
    text-align: right;
    border-right: 2px solid #C5E3EC;
    padding-right: 3px;
    margin-right: 6px;
}
 
span.code{
    border: 1px solid #EEE;
    border-radius: 2em;
    background: none;
    padding: 0 .4em;
    font-size: 85%;
}
 
.code span.hl-reserved{  color: #1518FF; }
.code span.hl-number{  color: #000099; }
.code span.hl-special{  color: #0060FF; }
.code span.hl-string{  color: #A31515; }
.code span.hl-var{  color: #1518FF; }
.code span.hl-types{  color: #0080AA; }
 
.code span.comment{  color: #008000; }
.code span.doccomment{  color: #008060; }
.code span.value,
.code span.literal,
.code span.digit{  color: #000099; }
.code span.invalid{
    color: #F00;
    font-weight: bold;
}
.code span.attribute{  color: #0060FF; }
.code span.definition,
.code span.statement{  color: #1518FF; }
.code span.type{  color: #0080AA; }
.code span.string,
.code span.char{  color: #A31515; }
.code span.directive{  color: #02B902; }
 
.code.css span.idSelector{  color: #996300; }
.code.css span.browserDefinition{  color: #2528FF; }
 
.code pre{
    border: none;
    background: none;
}
.code a{
    color: inherit;
    border-bottom: 1px dotted;
    display: inline-block;
    height: 1.28em;
}
.code a:hover{
    text-decoration: none;
    color: inherit;
    border-bottom: none;
}
.code a.newpage,
.code a.newpage:hover{  color: #F00; }

/*  Bootstrap Formating  (!BSFM)
=============================================================*/
.btn{
    box-shadow: 0 0 2px rgba(0,0,0,.08) inset;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1.5px;
    padding: 2px 12px;
    border-radius: 8px;
    transition: color 250ms,
                border-color 250ms;
}
.alert{  border-radius: 8px; }
.panel{
    border-radius: 24px;
    border: 1px solid #BBB;
    box-shadow: 0 4px 6px -2px rgba(0,0,77,.12);
}
.panel-heading{
    border-radius: 24px 24px 0 0;
    border-top: 1px solid #BBB;
    border-right: 1px solid #BBB;
    border-left: 1px solid #BBB;
}
.panel-title p{  margin: 0; }
.panel-body p:last-child{  margin-bottom: 0; }


/*  Bootstrap Colors  (!BSCL)
=============================================================*/
.btn-default{
    background: #FFF;
    color: #707070;
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus{
    background: #FFF;
    color: #333;
}
.btn-primary,
.label-primary{
    background: #BCD4EE;
    border-color: #9CB4CE;
    color: #446A91;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus{
    background: #BCD4EE;
    border-color: #6C849E;
    color: #1F3850;
}
.btn-success,
.label-success{
    background: #B4DD85;
    border-color: #9BC76E;
    color: #5C7F36;
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus{
    background: #B4DD85;
    border-color: #6B973E;
    color: #3D5125;
}
.btn-danger,
.label-danger{
    background: #E59C9C;
    border-color: #C57C7C;
    color: #963434;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus{
    background: #E59C9C;
    border-color: #954C4C;
    color: #661414;
}

/*  Submissions Page  (!SUBM)
=============================================================*/
.submissionPage{  text-align: center; }
.submissionPage .onSubmissionBox{  font-size: 32px; }
.submissionPage .removalRequestBox{  font-size: 18px; }
.submissionPage .publishedBox{  font-size: 24px; }
.submissionPage .onSubmissionCode{
    font-size: 28px;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.submissionPage .onSubmissionButtons,
.submissionPage .removalRequestButtons,
.submissionPage .publishedButtons,
.submissionPage .deletedButtons{
    margin-top: 12px;
}
.submissionPage .onSubmissionButtons .btn,
.submissionPage .removalRequestButtons .btn,
.submissionPage .publishedButtons .btn,
.submissionPage .deletedButtons .btn{
    font-size: 16px;
    margin: 0 12px;
}

.submissionPage .adminBox{
    margin: 16px 0 0 0;
}
.submissionPage .adminPublishButton{
    margin: 12px 0;
}
.submissionPage .adminPublishButton .btn{
    font-size: 18px;
    padding-left: 16px;
    padding-right: 16px;
}
.submissionPage .adminDeleteButtons{
    margin-top: 12px;
    margin-bottom: 12px;
}
.submissionPage .adminDeleteButtons .btn{
    margin-top: 8px;
    width: 400px;
}
.submissionPage .adminContentTitle{
    border-top: 1px solid #FBEED5;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
.submissionPage .adminContent{
    color: #444;
}

/*  Auxiliary Classes  (!AUXC)
=============================================================*/
.titleText{
    text-align: center;
    font-size: 18px;
    margin-bottom: 16px;
    margin-top: 24px;
}
.doesNotExistBox{
    text-align: center;
    font-size: 16px;
}
.table .heading{  font-weight: bold; }

/*  Convert To Bootstrap  (!CVBS)
=============================================================*/
input[type=button]:not(.btn){
    display: inline-block;
    line-height: 1.42857;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 8px;
    box-shadow: 0 0 2px rgba(0,0,0,.08) inset;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 2px 12px;
    transition: color 250ms, border-color 250ms;
}
input[type=button]:not(.btn){
    color: #707070;
    background: #FFF;
    border: 1px solid #CCC;
}
input[type=button]:not(.btn):hover,
input[type=button]:not(.btn):focus{
    color: #333;
    border-color: #ADADAD;
}
input[type=button]:not(.btn):active{
    box-shadow: 0 3px 5px rgba(0,0,0,.125) inset;
    outline: 0 none;
}
 
input[type=text]:not(.form-control), textarea:not(.form-control){
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}
textarea:not(.form-control){  height: auto; }
input[type=text]:not(.form-control):focus, textarea:not(.form-control):focus{
    border-color: #66AFE9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}

/*  Tablets/Phones  (!TBPH)
=============================================================*/
@media (max-width: 768px){
    body{  background-color: #BCD4EE; }
    header .container{
        background-image: url('/local--files/css:heavenly/logo-top-mobile.png');
        background-position: -49px 0;
    }
    header .siteHead{
        text-align: left;
        float: left;
        height: auto;
    }
    header .siteTitle{
        font-size: 24px;
        margin: 12px 0 1px 0;
    }
    header .siteSubtitle{  display: none; }
    header .topbar{  margin-left: 200px; }
    
    .contentWrap .container{  padding: 0; }
    .contentWrap .pageTitle{
        font-size: 28px;
        margin: 15px 0 0;
    }
    .contentWrap .contentBubble{
        border: none;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
        padding: 16px;
        border-bottom: 2px solid #B2B2B9;
        border-top: 2px solid #B2B2B9;
    }
    .contentWrap .contentBubble h1{
        background: #BCD4EE;
        margin: -18px -16px 12px -16px;
        padding: 12px 0 2px 16px;
        border-bottom: 2px solid #B2B2B9;
        box-shadow: 0 0 4px -1px rgba(0, 0, 0, .1) inset;
    }
    .contentWrap .contentBubble h1 a{
        color: #556D87;
    }
    .contentWrap .contentBubble h1 a:hover,
    .contentWrap .contentBubble h1 a:focus{
        color: #222;
    }
/* .contentWrap .contentBubble p{  text-align: justify; } */
    #action-area .form-group .col-sm-5{  width: 100%; }

    .pageOptions{  display: none; }
    
    footer{  margin-top: 40px; }
    footer .footerColLeft,
    footer .footerColRight{  text-align: center; }
    footer .footerColMid{  margin: 16px 0; }
    footer .footerColRight p{  display: inline; }
    footer .footerColRight p:first-child::after{
        content: ' | ';
    }
    footer .licenseArea{  margin-top: 20px; }
    footer .footerColMid img{  margin-top: 0; }
}