body {
    font-family: 'Verdana', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#overlay, #dialog, #demo, #title2, #explanation {
    margin: 10px;
}

#overlay, #dialog {
    width: auto;
}

#demo {
    margin-top: 20px;
}

table {
    width: 100%;
}

input[type="text"], input[type="button"], button {
    width: 100%;
    box-sizing: border-box;
}

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .flex-container {
        flex-direction: row;
        justify-content: space-between;
    }

    #title2 {
        position: static;
        margin-left: 15px;
    }

    #explanation {
        width: 50%;
    }
}

@media (min-width: 1024px) {
    #overlay, #dialog, #demo, #title2, #explanation {
        margin: 20px;
    }
}

/* docs */
.code {
    background-color: #e4e5ef;
    border: 1px solid black;
    margin: 1em;
    padding: 0.8em;
    overflow: auto;
    font-family: courier;
    font-size: 8pt;
}

.section {
    border-bottom: 1px dotted black;
    padding: 1em;
    font-family: helvetica;
    background-color: white;
    color: #333;
}

.menu,
.renderMode {
    border-radius: 0.5em;
    position: fixed;
    right: 1em;
    top: 1em;
    background-color: #fff;
    padding: 0.3em;
    opacity: 0.8;
    z-index: 5000;
    filter: alpha(opacity=80);
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;

}

.renderMode {
    left: 1em;
    top: 1em;
    width: 13em;
    padding-top: 0.1em;
    padding-bottom: 0.5em;

}

.renderMode ul {
    padding-left: 1em;
}

.renderMode ul li {
    list-style-type: none;
}

.renderMode h5 {
    margin-top: 1em;
    margin-bottom: 0.7em;
}

a {
    text-decoration: none;
    color: #01a3c6;
    font-weight: bold;
    font-family: helvetica;
    padding: 0.3em;
    border-radius: 0.2em;

}

a:hover {
    color: #1b911b;
    background-color: #f0f0f0;
}

#explanation a {
    background-color: transparent;
}

#explanation a:hover {
    text-decoration: underline;
}

.window,
.label {
    cursor: pointer;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
}

#explanation {
    cursor: drag;
    background-color: white;
    color: black;
    border: 0.25em solid #ddd;
    /* position: absolute;
    top: 100px;
    width: 336px; */
    font-size: 90%;
    -moz-border-radius: 1em;
    border-radius: 1em;
    padding: 1em;
    z-index: 1000;
    opacity: 0.9;
    filter: alpha(opacity=90);
    font-family: helvetica;
    box-shadow: 2px 2px 19px #aaa;
    -o-box-shadow: 2px 2px 19px #aaa;
    -webkit-box-shadow: 2px 2px 19px #aaa;
    -moz-box-shadow: 2px 2px 19px #aaa;
    text-align: left;
    height: 30px;

}

.selected {
    color: rgb(189, 11, 11);
}


/*  these styles are what jsPlumb attaches to the various elements it creates.
._jsPlumb_connector {
border:1px solid blue;
}
._jsPlumb_endpoint {
border:1px solid green;
}
._jsPlumb_overlay {
border:1px solid yellow;
}
*/


.section li {
    list-style-type: none;
}

li.bullet {
    list-style-type: circle;
}


.section {
    padding-left: 2em;
    font-size: 10pt;
}

.index.section {
    padding-left: 0;
}

.index {
    width: 20em;
    font-size: 9pt;
    float: left;
    background-color: #e4eeee;
    overflow: auto;
    padding-left: 0.5em;
}

.index li {
    list-style-type: none;
}

.index ul,
.index h3 {
    padding-left: 1.5em;

}

#demo {
    width: 80%;
    height: 50em;
    margin-left: 3em;
    margin-top: 3em;
    position: relative;
}

.sub {
    margin-left: 1em;
}

.table td {
    text-align: center;
}

path,
._jsPlumb_endpoint {
    cursor: pointer;
}

.hover {
    box-shadow: 2px 2px 19px red;
    -o-box-shadow: 2px 2px 19px red;
    -webkit-box-shadow: 2px 2px 19px red;
    -moz-box-shadow: 2px 2px 19px red;
}


#demo {
    /* margin-top: 120px; */
}

.w {
    /* width: 131px; */
    padding: 1em;
    position: absolute;
    border: 1px solid black;
    z-index: 4;
    border-radius: 1em;
    border: 1px solid #346789;
    box-shadow: 2px 2px 19px #e0e0e0;
    -o-box-shadow: 2px 2px 19px #e0e0e0;
    -webkit-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-box-shadow: 2px 2px 19px #e0e0e0;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    opacity: 0.8;
    filter: alpha(opacity=80);
    cursor: move;
    height: 35px;
}

.aLabel {
    background-color: white;
    opacity: 0.8;
    padding: 0.3em;
}

.ep {
    float: right;
    width: 1em;
    height: 1em;
    background-color: #2ccc00;
    cursor: pointer;
}

._jsPlumb_endpoint {
    z-index: 3;
}

/*	._jsPlumb_connector { border:1px solid red; }*/


#hy {
    left: 264px;
    top: 5px;
}

#monitor {
    left: 34px;
    top: 90px;
}

#keyboard {
    left: 54px;
    top: 170px;
}

#mouse {
    left: 154px;
    top: 250px;
}

#software {
    left: 27em;
    top: 22em;
}

#hardware {
    left: 472px;
    top: 404px;
}

#printer {
    left: 194px;
    top: 330px;
}

#win7 {
    left: 254px;
    top: 170px;
}

#macos {
    left: 364px;
    top: 115px;
}

#paint {
    left: 477px;
    top: 86px;
}

#macos {
    left: 76px;
    top: 427px;
}

#writer {
    left: 464px;
    top: 185px;
}

#word {
    left: 24px;
    top: 330px;
}

#system_software {
    left: 264px;
    top: 85px;
}


#application_software {
    left: 275px;
    top: 424px;
}



.dragHover {
    border: 1px dotted red;
}

path {
    cursor: pointer;
}

.web_dialog_overlay {
    /* position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .45;
    filter: alpha(opacity=15);
    -moz-opacity: .15;
    z-index: 101;
    display: none; */
}

.web_dialog {
    display: none;
    position: fixed;
    width: 400px;
    height: 100px;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -100px;
    background-color: #ffffff;
    border: 2px solid #336699;
    padding: 0px;
    z-index: 102;
    font-family: Verdana;
    font-size: 10pt;
}

.web_dialog_title {
    border-bottom: solid 2px #336699;
    background-color: #336699;
    padding: 4px;
    color: White;
    font-weight: bold;
}

.web_dialog_title a {
    color: White;
    text-decoration: none;
}

.align_right {
    text-align: right;
}