@font-face{
    font-family:trade-winds;
    src:url("/s/core/pics/TradeWinds-Regular.ttf");
}

@font-face{
    font-family:chancery;
    src:url("/s/core/pics/blackchancery/BLKCHCRY.TTF");
}

@font-face{
    font-family:hornswaggled;
    src:url("/s/core/pics/HORNSWOG.ttf");
}

:root{
    --seablue:#eeffc8;
    --lightsand:#d3835f;
    --palesand:#e3b293;
}

body {
    background:#62997a;
    background-size:100% auto;
    font-family:Arial;
}


.banner {
    position:relative;
    font-family:chancery;
    text-shadow:-3px 0 var(--seablue),
                3px 0 var(--seablue),
                0 -3px var(--seablue),
                0 3px var(--seablue)
                ;
    font-size:5vw;
    text-align:left;
    margin:auto;
    background:url("/s/pics/bubbles/IanHead.png") ;
    background-size:30% auto ;
    background-repeat:no-repeat;
    background-position:25vw 3vw ;
    width:80%;
    height:20vw;
    
    line-height:0;
    //padding-right:11%;

    padding-bottom:9%;
}

.bubble {
    position:absolute;
}
.bubble div{
    background:url("/s/pics/bubbles/cloud.svg");
    background-size: 100% 100%;
    background-repeat:no-repeat; 
    width:max-content;
    height:max-content;
}

.bubble img{
    margin-left:10vw ;
    margin-right:10vw;
    margin-top:3vw;
    margin-bottom:3vw;
    width:10vw;
    height:auto;
}

.bub1 {
    left:-1vw;
    top:1vw;
}

.bub2 {
    left:50vw;
    top:-1vw;
}
.bub3 {
    left:2vw;
    top:15vw;
}
.bub4 {
    left:47vw;
    top:13vw;
}
#contents{
    margin: 0px auto 10px auto;
    background-color:rgba(255,255,255,0.7);
    padding:10px 20px 40px 20px;
        
    display:block;
}

.main-wide{
}

.main-wide #contents{
    width:80%;
}

#ribbon_loc {
    padding:8px 0px;
    //border:2px solid var(--seablue);
    width:100%;

    background:#72243c;
    
    margin: 0px auto 0px auto;
}

#ribbon_loc button{
    border:none;
    background:#72243c;
    font-family:trade-winds;
    font-size:110%;
    //background:url("/s/core/pics/chest-closed.svg");
    background-size:25% auto;
    background-repeat:no-repeat;
    color:#f0fec9;

    cursor:pointer;
    text-align:left;
    min-width:100px;
    margin:0px 2% 4px 2%;
}

#ribbon_loc button{
    padding-bottom:5px;
}
#ribbon_loc button img{
    float:left;
    margin-right:4px;
    height:30px;
}

#ribbon_loc button:hover img:nth-child(1){
    display:none;
}

#ribbon_loc button:not(:hover) img:nth-child(2){
    display:none;
}

.main-tall{
}

.main-tall #contents{
    width:93%;
}

.bookcover {
    float:right;
    width:150px;
    margin:10px;
}

.mini-cover {
    float:left;
    height:100px;
    width:auto;
    margin:10px 0px ;
    border: 1px solid white;

}


/*TabBox*/
#tabbox >div:nth-child(1) img{
    display:block;
    margin:auto;
}

#tabby #tabbox button{ 
    width:25%;
    border:none;
    background:none;
}
#tabby #tabbox button:hover{ 
    background:var(--seablue);

}
#tabby #tabbox button.tabselect {
    border:1px solid black;
}


blockquote{
    font-weight:bold;
    font-size:large;
    font-style:italic;
}

#tabbox .vidbox {
    display:block;
    margin:auto;
    position:relative;
    width:80%;
    padding-bottom:45%;
    padding-top:30px;
    overflow:hidden;
}

#tabbox iframe {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left :0;
}

.picinline {
    max-width:80vw;
    width:350px;
    margin:10px;
}

.picright{
    float:right; 
    max-width:250px;
    margin:10px;
}

.picleft{
    float:left;
    max-width:250px;
    margin:10px;
}

th {
    text-align:center;
}