/***********
 Diagram CSS
************/

section#diagram {
    width: auto;
    max-width: 1110px;
    height: auto;
    position: relative;
    z-index: 5; /* to hide the share icons */
    padding: 15px;
    background: #fff;
    clear: both; /* once the header etc are static */
}

div#diagram-inner {
    /* position relatively so inner content is positioned relative
     * to this container. A set height must be specified as each inspect
     * element should inherit its height for correct positioning */
    position: relative;
}

div#diagram-inner img#diagram-background {
    width: 100%;
    height: auto;
}

ul.diagram-links {
    list-style: none outside none;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
}

ul.diagram-links li {
    position: absolute;
    z-index: 6;
}

ul.diagram-links li a {
    display: block;
    background-color: #8cc63e;
    padding: 4px 9px 4px 9px;
    font-weight: bold;
    color: white;
    border: 3px solid white;
    text-decoration: none;
    font-size: 12px;
    border-radius: 10px;
    -webkit-box-shadow: 3px 3px 8px #000;
    -moz-box-shadow: 3px 3px 8px #000;
    box-shadow: 3px 3px 8px #000;
}

/* positions for each link */

ul.diagram-links li.shading {
    left: 23.5%;
    top: 52%;
}

ul.diagram-links li.ventilation {
    top: 26.5%;
    left: 53.5%;
    z-index: 5;
}

ul.diagram-links li.heating {
    top: 57.5%;
    left: 41%;
    z-index: 8;
}

ul.diagram-links li.appliance {
    top: 69.5%;
    left: 65.5%;
}

ul.diagram-links li.site {
    top: 54.5%;
    left: 85%;
}

/* specific positions for each explanation */

div.diagram-explanations div#shading-explanation {
    bottom: 44%;
    left: 24.5%;
}

div.diagram-explanations div#ventilation-explanation {
    top: 28.5%;
    left: 54.5%;
    z-index: 7;
}

div.diagram-explanations div#heating-explanation {
    top: 59.5%;
    left: 42.5%;
    z-index: 7;
}

div.diagram-explanations div#appliance-explanation {
    top: 71.5%;
    right: 33%;
}

div.diagram-explanations div#site-explanation {
    bottom: 42.5%;
    right: 13.5%;
}

div.diagram-overlays img.overlay {
    width: 100%;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

/* generic explanation styles */

/*
div.diagram-explanations div.explanation {
    position: absolute;
    z-index: 5;
    background: #fff;
    padding: 15px;
    width: 32.5%;
    margin: 0px;
    font-weight: bold;
    border: none;
    text-decoration: none;
    color: black;
    border-radius: 10px;
    -webkit-box-shadow: 3px 3px 8px #000;
    -moz-box-shadow: 3px 3px 8px #000;
    box-shadow: 3px 3px 8px #000;
}
*/

/**************
 default styles
****************/

div.inspect h3 {
    margin: 10px 0px;
}

div.explanation .icon-doc,
div.explanation .icon-print,
div.explanation .learn-more {
    position: absolute;
}