/* HEADER */



#headerLeft a:hover, #headerLeft a:visited, #headerLeft a:active {
    text-decoration:none;
    color:#f2f2f2;
}

#headerRight {
    height:100%;
    background:#333333;
}

#banner {
    font-size:18px;
    font-size:1.8rem;
    color:#f2f2f2;
    background:inherit;
    height:40%;
    text-align:center;
    border-bottom:solid 1px gray;
}

#banner a, #banner a:hover, #banner a:visited, #banner a:active {
    text-decoration:none;
    color:#f2f2f2;
}


#menuNarrow {
    background:#333333;
    border-bottom:solid 1px gray;
}

#menuNarrow div.col {
    display:inherit;
    background:#333333;
    padding-left:0;
}

.contentBody
{   
    text-align:left;
    font-size:100%;
    color:#f2f2f2;
}

 /* specific items */

.group-item .btn:hover {
    background-color: transparent;
}

.group-item .photo img {
    max-height: 10rem;
}

.group-item .photo-medium img {
    max-height: 8rem;
}

.group-item .photo-small img {
    max-height: 6rem;
}


.music-item .btn:hover {
    background-color:transparent;
}

.mejs__controls:not([style*="display: none"]) {
    background-color:#303030;
    background:#303030;
}


.mejs-controls div.mejs-horizontal-volume-slider {
    width: 30px;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    width: 30px;
}

.playNarrative {
    background-color:#303030;
    font-size:80%;
}

.embedItem {
    width:80%;
    max-width:80%;
    max-width:24rem;
}



    .wrap-50 {
        min-height: 100%;
        height: 100%;
    }

    .nonfooter-50 {
        overflow: auto;
        min-height: 100%;
        padding-bottom: 50px;
        margin-bottom: -50px;
    }

.footer-50 {
    position: relative;
    height: 50px;
    margin-top: -50px;
}

    .wrap-40 {
        min-height: 100%;
        height: 100%;
    }

    .nonfooter-40 {
        overflow: auto;
        min-height: 100%;
        padding-bottom: 40px;
        margin-bottom: -40px;
    }

    .footer-40 {
        position: relative;
        height: 40px;
        margin-top: -40px;
    }

    .wrap-0 {
        min-height: 100%;
        height: 100%;
    }

    .nonfooter-0 {
        overflow: auto;
        min-height: 100%;
        padding-bottom: 0px;
        margin-bottom: -0px;
    }

    .footer-0 {
        position: relative;
        height: 0px;
        margin-top: -0px;
    }

    .wrap-diary {
        min-height: 100%;
        height: 100%;
    }

    .nonfooter-diary {
        overflow: auto;
        min-height: 100%;
        padding-bottom: 135px;
        margin-bottom: -135px;
    }

    .footer-diary {
        position: relative;
        min-height:135px;
        margin-top: -135px;
    }



#contactArea {
    max-width: 360px;
    max-height: 60px;
    width:100%;
}

#contactArea img {
    width:100%;
    height:100%;
}


#infobarLinks {
    font-size: 90%;
}

    #infobarLinks a {
        text-decoration: underline;
        cursor: pointer;
    }

 /* Extra small devices (portrait phones, less than 576px)
    No media query since this is the default in Bootstrap */



/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

    #banner {
        height:90px;
    }

    #infoBarCol .row {
        padding-left: 0.5rem;
    }

    #headerLeft {
        height:inherit;
        padding-left:10px;
    }
   
    #headerTitle {
         font-size:10px;
         font-size:1rem;
         background:inherit;
    }

}

/* intermediate for 600px devices */
@media (min-width: 600px) {


}

/* intermediate to adjust header size*/
@media (min-width: 648px) {

    #headerTitle {
         font-size:10px;
         font-size:1rem;
         background:inherit;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #headerTitle {
         font-size:10px;
         font-size:1rem;
         background:inherit;
    }
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {  }




/******************/
/*      BODY      */
/******************/



#contentContainer
{
    font-family: 'Source Sans Pro', sans-serif;
    color:#e0dbdb;
    min-height:100%;
    height:100%;
}

#contentContainer .headerText {
    font-size:160%;
}

#contentContainer .midText {
    font-size:140%;
}

#contentContainer .bodyText {
    font-size:120%;
}

#contentContainer a.inlineLink {
    color:#fef9f9;
    text-decoration:underline;
}

#contentContainer a.inlineLink:hover {
    color:rgba(240, 80, 40, 1);
}




#infobarSoc .socialButton {
    float:left;
    margin-right:0em;
}

#infobarSoc .socialButton.last {
   margin-right:0;
}


/* Reduced monitor width or */
/* 768 x 1024 (iPad - Portrait) */

@media (max-width: 842px) {

    #contentContainer .headerText {
        font-size:160%;
    }

    #contentContainer .midText {
        font-size:140%;
    }

}

/* 768 x 1024 (iPad - Portrait)  reduced beyond 730 */

@media (max-width: 635px) {  

   #contentContainer .midText {
        font-size:140%;
    }


    #contentContainer .bodyText {
        font-size:120%;
    }

}

/* 480 width iPhone landscape */

@media (max-width: 480px) {

    #contentContainer .headerText {
        font-size:160%;
    }

    #contentContainer .midText {
        font-size:140%;
    }


     #contentContainer .bodyText {
        font-size:120%;
    }
}

/* 360 width (some phones) iPhone 320w */

@media (max-width: 320px) {
    
    #contentContainer .headerText {
        font-size:160%;
    }

    #contentContainer .midText {
        font-size:140%;
    }

     #contentContainer .bodyText {
        font-size:120%;
    }

}



/*******************/
/*     FOOTER      */
/*******************/



footer {
    clear:both;
    background:#333333;
    border-bottom:solid 1px gray;
    border-top:solid 1px gray;
}


.footerText {  
    padding-right:0;
    font-size:8px;
    font-size:0.8rem;
}


.topButton {
    display: block;
    float:left;
    min-height:36px;
    padding-top:2px;
}

.topButton a {
    display: block;
    height: 36px;
    background: url('../content/images/topsprite.png');
    background-size: 36px;
    background-position: 0px -36px;    
    width: 36px;  
    color:#ddbc18;
    font-size:15px;
    font-size:1.5rem;
}

.topButton a:hover {
    background-position: 0px 0px; 
    width: 36px;  
    text-decoration:none;
    color:#7E4C7B;
}

.topButton a span {
    position: relative;    
    left:64px; 
    top:-2px;
}

@media (max-width: 635px) {

}

@media (max-width: 520px) {

}

@media (max-width: 320px) {

.topButton a {
    display: block;
    height: 36px;
    background: url('../content/images/topsprite.png');
    background-size: 36px ;
    background-position: 0px 0;    
    width: 36px;  
    color:#f2f2f2;
    font-size:16px;
    font-size:1.6rem;
}

    .footertext {
        font-size:8px;
        font-size:0.8rem;
        overflow-wrap:break-word;
    }
}