*{
    font-family:"Museo W01 500",Arial,Helvetica Neue,Helvetica,sans-serif;
    
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;


}
body {
    font-family:sans-serif;
    background:#000;
    color:#777777;
    width: auto;
    margin: 0 auto;
}

header, footer, aside, nav {
    display: block;
}

a:link {color:#777777;}
a:visited {color:#777777;}
a:hover {color:#999999;}
a:active {color:#ffffff;}

#copyright {
    font-size:8pt;
    text-align:center;
    margin-top:10px;
}

.remark {
    color: #ffffff;
}

.unsafe {
    color : #c86464;
}

ul li {
	font-size: 12pt;
}
#simulation {
    display:table;
    margin: 0 auto;
    border:0px solid;
}

    #simulation .viewer {
        display:table-cell;
    }
    
    #simulation .panel {
        display:table-cell;
        vertical-align:top;
        width: 200px;
        padding: 0px 5px 0px 5px;
        font-size: 9pt;
        background:#151515;
    }
        #simulation .panel header {
            color: #ffffff;
        }
        
    	#simulation .panel .slider {
    		margin: 7px 10px 10px 10px;
    	}
        #simulation .panel section {
            margin-bottom: 15px;
            border-bottom: 1px dotted;
        }
        #simulation .panel section:last-child {
            margin-bottom: 0px;
            border-bottom: 0px;
        }


#myCanvas {
    display:block;
    vertical-align:bottom;
    background-color:#000000;
}

#simulation{
    margin-top: 5%;
}
.over_graph{
    position:absolute;
    height: 768px;
    overflow: auto;
    top:0;
    width: 400px;
    scrollbar-width: none;

}
.over_graph::-webkit-scrollbar {
    display: none;
}
#content{
    left:0;
}
#format {
    right: 0px;
}
.over_graph p, .over_graph h1, .over_graph ul, .over_graph ul.patchwork li {
    background:rgba(0,0,0,0.9);
    display: inline-block;
    color:yellow;
    padding: 10px;
    margin: 10px 0px;
}
.over_graph ul.patchwork li {
    padding: 10px;
    margin: 2px 0px;
}
.over_graph ul ul {
    background: transparent;
    padding-left: 40px;
}
.over_graph a {
    color:#0085db;
}
ul.patchwork {
    background: transparent;
    padding: 0px;
    margin: 0px;
}
.close{
    position:absolute; 
    right:0px; 
    background:transparent; 
    color:yellow;
    padding:5px; 
    margin:10px 0;
    font-size:8pt;
    cursor: pointer;

}
.over_graph a.close{
  color: #F0F000;
 }
p{
        font-size:16pt;

}
@media only screen and (max-width: 1024px) {


    #simulation{
        margin: 0px;
        width: 100%;
    }
    .over_graph{
        background:rgba(0,0,0,0.9);
        position:relative;
        height: auto;
        overflow: auto;
        width: auto;
    }
    .over_graph p, .over_graph h1, .over_graph ul, .over_graph ul.patchwork li {
        background:transparent;
    }
    #content{
        left:auto;
    }
    #format {
        right: auto;
        display: block !important;
    }
    #visual{
        position: fixed;
        top: 0px;
        left: 0px;
        z-index: -1;
    }
    .over_graph p, .over_graph h1, .over_graph ul, .over_graph ul.patchwork li {
        display: block;
        color:yellow;
    }
    .over_graph ul.patchwork li {
        display: inline-block;
    }
    footer{
        position: fixed;
        bottom: 0px;
    }
}