/*
*/
#diagramContainer {
    padding: 21px;
    width:95%; height: 999px;
    border: 1px solid gray;
    background-color: #99ccff;
}

#keyContainer {
    background-color: #99ccff;
}
        
#figSlide {
    position: absolute;
    top: 20px;
    left: 600px;
}

#slideImage {
    border-style: solid;
    border-width: 05px;
    border-color: white;
}

#caption {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:8pt;
}

#watermark {
    position:fixed;
    top:200px;
    left:300px;
    opacity:0.9;
    z-index:0;
    color:black;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:40pt;
    text-align:center;
}

/* Dropdown Button */
.dropbutton {
    position: relative;
    background-color: green;
    color: white;
    padding: 10px;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size: 16px;
    border: 4px solid darkgreen;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbutton:hover, .dropbtn:focus {
    background-color: darkgreen;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 400px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    opacity:1.0;
    z-index:99;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: green;
    padding: 02px 14px;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color: lightgrey
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { display:block;
}

div[title]:hover:after {
    content: attr(alt);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    left: 50%;
    top: 50%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background: -moz-linear-gradient(red, white, blue);
    background: -webkit-linear-gradient(red, white, blue);
    background: -ms-linear-gradient(red, white, blue);
    background: -o-linear-gradient(red, white, blue); 
    background: linear-gradient(red, white, blue);
}

div.holder {
    position: absolute;
    height:1px; width: 1px;
    border: 4px solid green;
    float: left;
    box-sizing: border-box;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:14pt;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
} 
/*
Merlin
*/
.itemM, .Merlin {
    position: absolute;
    height:30px; width: 110px;
    border: 4px solid darkgreen;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    float: left;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:14pt;
    text-align:center;
    background-color: #eeeeee;
}

/*
Griffon
*/
.itemG, .Griffon {
    position: absolute;
    height:30px; width: 110px;
    border: 4px solid darkgreen;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    float: left;
    box-sizing: border-box;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:14pt;
    text-align:center;
    background-color: #aaaaaa;
}

.key {
    font-size:8pt;
}

div.info {
    position: absolute;
    height:30px; width: 90px;
    border: 4px solid blue;
    float: left;
    box-sizing: border-box;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
    text-align:center;
    background-color: orange;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
div.menu {
    position: absolute;
    height:30px; width: 90px;
    border: 4px solid blue;
    float: left;
    box-sizing: border-box;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
    text-align:center;
    background-color: lightgreen;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
h1 {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:18pt;
}
p.about {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
}
p.section {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:14pt;
}
p.book {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
}
a.site {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
}
p.close {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:14pt;
}
p.contact {
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:14pt;
}
p.menuSeparator {
    color: darkgreen;
    padding-top: 01px;
    padding-right: 01px;
    padding-bottom: 01px;
    padding-left: 01px;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:12pt;
}
p.menuText {
    color: darkgreen;
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
}   
    
/*
Popup
*/
.mark{
    font-family:arial,geneva,helvetica,sans-serif;
    font-size:10pt;
    background-color: #ffccff;
}

p.variant {
    font-size:14pt;
}

sup {
    vertical-align: super;
    font-size: smaller;
}