/* 
 * Copyight 2015 Darren Croft
 */

/*Vertical (mobile) layout first*/
.book {
    background-color: lightyellow;
    border: darkgray solid .1em;
    width: 98%;
    max-width: 62vh;
    padding :0;
    margin: .7vw auto;
}
.titleTextGroup {
    position:relative;
    left:5%;
    width: 90%;
    height: 12vh;
}

.titleText {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    padding: 0;
    font-size: 2vw;
    margin:.1em;
    
}

.coverPicture {
    position:relative;
    margin-top:1vh;
    left:10%;
    height:65vh;
    width:80%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor:pointer;
}
.socialPicture {
    display: none;
}

.authorTextGroup {
    position:relative;
    margin-top: 1vh;
    left: 10%;
    width: 80%;
    height: 5vh;
}

.authorText {
    position: relative;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1vw;
    margin:.1em;
}



.hints {
    text-align: center;
    font-style: italic;
    font-size: 1.4em;
    position:relative;
    left: 2%;
    width: 96%;
    margin:2vh auto;
}

p {
    margin: 0em;
}

.readTogether h3 {
    font-style: normal;
}

.readTogether {
    width: 96%;
    font-style: italic;
    position:relative;
    margin: 5vw 2vw 2vw 2vw;
}


body {
    margin:0;
    padding:0;
    background-color:lightgray;
    opacity: 0.0;
}

h3 {
    margin:0;
}

#nameField {
    width: 60%;
    max-width: 20em;
    display:block;
    margin: 0 auto 1vh auto;
}


.togetherButtonClass {
    display:block;
    margin: .5em auto;
}


/* Change to vertical two column layout for moderately skinny screens */
@media (min-aspect-ratio: 3/4) and (min-width: 38em) {
    .titleTextGroup {
        
    }
    .book {
        width: 80%;
        max-width: 65vh;
        margin: 1vh auto;
    }
    .coverPicture {
    }

    .authorTextGroup {
    }
    
    .hints {
        display: inline-block;
        vertical-align: text-top;
        margin: 2vw;
        width: 44vw;
    }
    
    p {
        margin: .1em .1em 1em .1em;
    }

    
    .readTogether {
        display: inline-block;
        vertical-align: text-top;
        margin: 2vw;
        width: 44vw;
        max-width: 20em;
    }

}

/*wide layout*/
@media (min-aspect-ratio: 10/8) and (min-width: 38em)  {
    .titleText {
        
    }

    .titleTextGroup {
        
    }

    .book {
        width: 50vw;
        max-width: 75vh;
        margin: 1vh auto;
    }
    .coverPicture {
        height:77vh;
        width:80%;
    }
    
    .authorText {
    }

    .authorTextGroup {
    }

    .readTogether {
        position:absolute;
        width: 20vw;
        right: .2vw;
        top: 40vh;
    }

    .hints {
        font-style: italic;
        font-size: 1.5em;
        position:absolute;
        left: .2vw;
        top: 40vh;
        width: 20vw;
    }

   

    h3 {
    }

    #nameField {
    }


    .togetherButtonClass {
    }
}