/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
    margin: 0;	
    padding: 0;	
    border: 0;	
    font-size: 100%;	
    font: inherit;	
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers. >>> */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
    display: block;}       
body {	
    line-height: 1.5;
}      
ol, ul {	
    list-style: none;
}      
blockquote, q {	
    quotes: none;
}      
blockquote:before, blockquote:after,q:before, q:after {	
    content: '';	
    content: none;
}
table {	
    border-collapse: collapse;	border-spacing: 0;
}	      
/* <<< */

/* This introduces the two fonts we are using. >>> */
@font-face {
    font-family: "Mr Eaves Small Caps";
    src: url("Mr Eaves Small Caps.otf") format("opentype");
    font-weight: normal;
}
@font-face {
    font-family: "Bookinsanity";
    src: url("Bookinsanity\ \(fixed\).otf") format("opentype");
    font-weight: normal;
}
/* <<< */

/* This is a bunch of formatting for the overall page. >>> */
body {
    /*background-color: #281040;*/
    background-image: url("img/luis_del_rio\'s_background.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
#wrapper {
    text-align: justify;
    margin: 45px auto;
    padding: 5%;
    max-width: 864px;
    min-height: 959px;
    background-image: url(img/background_parchment.jpg);
}
a {
    text-decoration: none;
    color: #A61937;

}
a:hover {
    text-decoration: underline;
    color: #F21847;
}
h2 {
    font-size: x-large;
    font-family: Mr Eaves Small Caps, Helvetica;
    padding-left: 20px;
}
#story h2 {
    margin: 20px 50px;
    max-width: 700px;
}
#story p {
    font-size: large;
    font-family: Bookinsanity, Helvetica;
    margin: 20px 50px;
    max-width: 700px;
}
#story li {
    font-size: large;
    font-family: Bookinsanity, Helvetica;
    margin: 20px 50px;
    max-width: 700px;
}
footer {
    font-size: medium;
    font-family: Mr Eaves Small Caps, Helvetica;
    margin: 20px 50px;
}
hr {
    width: 80%;
}
.tokenimage {
    margin: 50px;
    padding: auto;
    max-height: 100%;
    width: 33%;
}
/* <<< */

/* This text makes up the navbar. >>> */
header {
    /*border: 1px solid purple;*/
    font-size: large;
    font-family: Mr Eaves Small Caps, Helvetica;
    display: grid;
    grid-template-columns: 225px repeat(3, auto);
    grid-template-rows: 98px 133px;

}
header img {
    height: 225px;
    width: 225px;
    grid-column: 1/2;
    grid-row: 1/2;
}
header h1 {
    text-align: left;
    font-weight: bold;
    font-size: xx-large;
    padding: 15px 15px;
    /*border: 1px solid green;*/
    grid-column: 4/5;
}
header nav {
    grid-column: 4/5;
    grid-row: 2/3;
}
nav ul {
    width: 65%;
    display: block;
    padding-left: 40px;
}
nav li {
    padding: 3px;
}
/* <<< */

/* This text declares how hidden text, and its signalling phrase/image interact and display. >>> */
.clarify {
    color: #5329A6;
    position: relative;
    cursor: pointer;
}
.hiddentext {
    font-size: medium;
    padding: 5px;
    font-family: Bookinsanity, Helvetica;
    display: none;
    position: absolute;
    left: -20px;
    top: 20px;
    /*visibility: hidden;*/
    border: 2px solid black;
    border-radius: 5px;
    background-image: url(img/background_parchment.jpg);
    width: 225px;
    z-index: 1;
}
.tokentext {
    font-size: medium;
    padding: 5px;
    font-family: Bookinsanity, Helvetica;
    display: none;
    position: absolute;
    left: 20px;
    /*visibility: hidden;*/
    border: 2px solid black;
    border-radius: 5px;
    background-image: url(img/background_parchment.jpg);
    width: 225px;
    z-index: 1;
}
/* <<< */

/* This text aligns the id's of the various vocabulary with their appropriate hidden text. >>> */
span#pops:hover .tokentext {
    display: inline;
}
span#paintbrush:hover .tokentext {
    display: inline;
}
span#angel:hover .tokentext {
    display: inline;
}
span#armor:hover .tokentext {
    display: inline;
}
span#tyrant:hover .hiddentext {
    display: inline;
}
span#peasant:hover .hiddentext {
    display: inline;
}
span#kaesandoral:hover .hiddentext {
    display: inline;
}
span#valek:hover .hiddentext {
    display: inline;
}
span#agamnes:hover .hiddentext {
    display: inline;
}
span#kobold:hover .hiddentext {
    display: inline;
}
span#originblade:hover .hiddentext {
    display: inline;
}
span#rerag:hover .hiddentext {
    display: inline;
}
span#tree:hover .hiddentext {
    display: inline;
}
span#relichoarde:hover .hiddentext {
    display: inline;
}
span#aurisma:hover .hiddentext {
    display: inline;
}
span#conprot:hover .hiddentext {
    display: inline;
}
span#vult:hover .hiddentext {
    display: inline;
}
span#behir:hover .hiddentext {
    display: inline;
}
span#aasimar:hover .hiddentext {
    display: inline;
}
span#allopent:hover .hiddentext {
    display: inline;
}
span#vyx:hover .hiddentext {
    display: inline;
}
span#inbetween:hover .hiddentext {
    display: inline;
}
span#bied:hover .hiddentext {
    display: inline;
}
span#galar:hover .hiddentext {
    display: inline;
}
/* <<< */