body {
    z-index: 1;
    background-color: hsla(0,0%,100%,0.00);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}

#mainBlog {  
}

#controls {
    float:left;
    width:20%;
    height:100%;
}

#main {
    float:right;
    width:80%;
    height:100%;
}

#mainInner {
    margin-left:20px;
}

.header {
    background-color:orange;
}

.headerList {
    background-color:#fad78c;
}

#subheader {
    font-size:18px;
    color: #000000; font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    top: 10%;
    transform: translateY(10%);
}

.button1 {
    display:block;
    margin-top:30px;
    margin-bottom:20px;
}

. imageDisplay {
    opacity:1.0;
    filter: alpha(opacity=100);
}

.description {
    display:block;
    margin-left:20px;
    margin-right:20px;
    margin-top:20px;
    margin-bottom:20px;
    font-size:18px;
    border-bottom:solid;
    padding-bottom:20px;
}

#whiteText {
    color:white;
}

#theDescription {
    margin-left:50px;
    width:700px;
}

.row {
    margin-left:auto;
    margin-right:auto;
    margin:auto;
    width: 80%;
    height:100%;
    max-height:100%;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

#blogList {
    width:99%;
    height:25%;
    overflow: -moz-scrollbars-vertical;
    overflow: scroll;
    overflow-y:visible;
    border-style:solid;
    border-width:1px;
    text-align:center;
}

#separator {
    height:1%;
}

hr.style1 {
	height: 1px;
        width:80%;
	border: 0;
        background-color: black;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

#header {
    text-align:center;
    min-height:50px;
    height:20%;
}

.header2 {
    text-align:center;
    min-height:20px;
    height:20px;
    width:70%;
    background-color:lightgray;
    border-bottom:solid;
    border-width:2px;
}

#headerText {
    font-size:62px;
    color: #000000; font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    top: 10%;
    transform: translateY(10%);
}

#headerLeft {
    font-size:18px;
    text-align:center;
    min-height:50px;
    height:5%;
    width:99%;
    border-style:solid;
    border-width:1px;
}

#headerLeftText {
    font-size:14px;
    width:100%;
    top: 50%;
    margin-bottom:10px;
    //border-bottom:solid;
    //border-width:1px;
    transform: translateY(50%);
}

#leftCol {
    float:left;
    width:15%;
    background-color:white;
    margin:auto;
    min-height: 100%;
    height:100%;
    max-height:100%;
    text-align:center;
}


.middleCol {
    float:right;
    margin:auto;
    width:84%;
    background-color:white;
    opacity:1.0;
    filter: alpha(opacity=100);
    height:100%;
    overflow:scroll;
    border-style:solid;
    border-width:1px;
}

.leftThird {
    float:left;
    width:99%;
    background-color:white;
    min-height: 77%;
    max-height:77%;
    text-align:center;
    overflow: scroll;
    border-style:solid;
    border-width:1px;
}

.leftThirdInner {
    float:left;
    background-color:white;
    opacity:0.9;
    max-height:100%;
}

.spacer1 {
    float:left;
    background-color:black;
    width:2%;
    opacity:0.1;
    filter: alpha(opacity=10);
}

#spacerHeader {
    min-height:50px;
    height:50px;
    width:100%;
}

.rightThird {
    float:left;
    width:0%;
    background-color:white;
    opacity:0.9;
}

#picture {
    margin-left:auto;
    margin-top:auto;
    margin-right:auto;
    margin-bottom:auto;
}

.dateListing {
    margin-bottom:10px;
    width:160px;
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.blogListing {
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:10px;
    margin-top:5px;
    margin-left:5px;
    //height:40px;
    position: relative;
}

.selectedBlog {
    background-color:orange;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:5px;
    margin-top:5px;
    margin-left:5px;
    width:160px;
    height:40px;
    position: relative;
}

.overDate {
    background-color:green;
}

.selectedDate {
    background-color:green;
    margin-bottom:10px;
    width:160px;
    position: relative;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.overBlog {
    background-color:orange;
}


#outer-div {
    position:relative;
    margin:auto;
    //min-height:20%;
    //height:20%;
    background-image: url("footprints");
    background-size:100%;
}

#inner-div {
    position:absolute;
    left:0;
    right:0;
    width:300px;;
    height: 30px;
    background-color:clear;
    margin-left:auto;
    margin-right:auto;
    bottom: 5%;
    transform: translateY(-5%);
}

#innerBottom-div {
    position:absolute;
    left:0;
    right:0;
    width:300px;;
    height: 30px;
    background-color:clear;
    margin-left:auto;
    margin-right:auto;
    bottom: 20%;
    transform: translateY(-20%);
}

.leftButton {
    display:inline-block; 
    position:absolute;
    vertical-align: middle; 
    float:left;      
    width:100px;
    //margin-top:3px;
    margin-right:5px;
}

.rightButton {
    display:inline-block;   
    vertical-align: middle;  
    float:right;   
    width:100px;
    margin-top:3px;
    margin-left:5px;
}

.textSizeLarger {
    position:absolute;
    width:10%;
    top: 50%;
    transform: translateY(-50%);
    left: 2%;
    transform: translateX(2%);
    font-size:18px;
    vertical-align: middle;
    margin-bottom:auto;
    margin-top:auto;
}

.textSizeSmaller {
    position:absolute;
    width:10%;
    top: 50%;
    transform: translateY(-50%);
    left: 12%;
    transform: translateX(12%);
    font-size:18px;
    vertical-align: middle;
    margin-bottom:auto;
    margin-top:auto;
}

.clear {
}

.green {
    //background-color:green;
}


#headerRight {
    font-size:36px;
    text-align:left;
   // background-color:yellow;
}

.blogEntry {
    border-bottom: 2px  solid;
    margin-left:20px;
    margin-right:20px;
    margin-top:0px;
    margin-bottom:20px;
    text-align:justify;
    font-size:16px;
}

.blogEntry2 {
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
    text-align:justify;
    font-size:16px;
}

.blogText {
    text-align:justify;
}

div.main {
    width: 600px;
    margin: auto;
 }

div.itemLeft {
    float: left;
    display:inline;
    vertical-align: top;
    text-align: center;
    margin: 0px 10px 0px 0px;
    border-style: none;
    //border-width:2px;
    padding: 5px;
    //width: 130px;
}

div.smallItemLeft {
    float: left;
    display:inline;
    vertical-align: top;
    text-align: center;
    border-style: none;
    padding: 5px;
    //width: 100px;
}

div.itemRight {
    float: right;
    display:inline;
    vertical-align: top;
    text-align: center;
    margin: 0px 0px 0px 10px;
    //border-width: 2px;
    border-style: none;
    padding: 5px;
    //width: 100px;
}

img.left {
    float:left;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    margin: 10px 10px 10px 10px;
}

img.right {
    float:right;
    vertical-align: top;
    display: inline-block;
    text-align: center;
    margin: 10px 10px 10px 10px;
}

.caption {
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    font-size: smaller;
}

.caption2 {
    display:block;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    font-size: 9px;
}

.blogListing {
    clear:both;
}

.blogEntry {
   margin-bottom:20px;
}

.imageEditControls {
    float:left;
}

div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
  }

.header {
    width:100%;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size:32pt;
}

.leftPane {
    float:left;
    height:100%;
    width:30%;
}

.middlePane {
    float:left;
    height:100%;
    width:10%;
}

.rightPane {
    float:left;
    height:100%;
    width:100px;
}

textarea {
  width: 1200px;
  height: 250px;
}

#note_display {
    display:none;
    border: solid;
    border-width:2px;
    width:300px;
    height:350px;
    padding:30px;
    position: absolute;
    top: 100px;
    left: 400px;
}

#photo_display {
    display:none;
    position: absolute;
    top: 10px;
    left: 200px;
}

#audio_player {
    display:none;
    position: absolute;
    top: 100px;
    left: 400px;
}

#video_player {
    display:none;
    position: absolute;
    top: 100px;
    left: 400px;
}

.hiddenImage {
    display:none;
    background-color:green;    
}

.inset1 {
  margin-left:20px;
}

.inset2 {
  margin-left:40px;
}

.inset3 {
  margin-left:40px;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    #main {
        float:right;
        width:95%;
        height:100%;
    }

    .row {
        margin-left:auto;
        margin-right:auto;
        margin:auto;
        width: 95%;
        height:100%;
        max-height:100%;
    }

    #leftCol {
        float:left;
        width:25%;
        background-color:white;
        margin:auto;
        min-height: 100%;
        height:100%;
        max-height:100%;
        text-align:center;
    }

    .middleCol {
        float:right;
        margin:auto;
        width:74%;
        background-color:white;
        opacity:1.0;
        filter: alpha(opacity=100);
        height:100%;
        overflow:scroll;
        border-style:solid;
    }  

    #outer-div {
        position:relative;
        margin:auto;
        //min-height:20%;
        //background-image: url("footprints");
        background-repeat: no-repeat;
    }

    .blogListing {
        margin-bottom:25px;
        margin-top:5px;
        margin-left:5px;
        font-size: 24pt;
    }

    .blogEntry {
        border-bottom: 2px  solid;
        margin-left:20px;
        margin-right:20px;
        margin-top:0px;
        margin-bottom:20px;
        text-align:justify;
        font-size:32px;
    }

    .dateListing {
        font-size:28px;
    }

    #header {
        height:30%;
    }

    #headerLeft {
        height:10%;
        font-size:38px;
    }

    #headerLeftText {
        font-size:30px;
    }

    optgroup { font-size:24px; };
}