|
<style type="text/css"> |
|
#contents { |
|
height: 400px; |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
position: relative; |
|
} |
|
#hints { |
|
height: 400px; |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
position: relative; |
|
} |
|
|
|
#daggraph { |
|
width: 100%; |
|
height: 100%; |
|
border: 1px solid #d3d3d3; |
|
box-sizing: border-box; |
|
} |
|
|
|
#hints .invisible:link, #hints .invisible:visited { |
|
color: gray; |
|
} |
|
|
|
.container {right: 0; text-align: center;} |
|
.container .left, .container .center, .container .right { display: inline-block; padding: 5px 10px; text-align: left;} |
|
.container .left { float: left; } |
|
.container .center { margin: 0 auto; } |
|
.container .right { float: right; } |
|
.clear { clear: both; } |
|
#hintsleft td, #hintsleft th, #hintscenter td, #hintscenter th, #hintsright td, #hintsright th {padding: 3px 8px; } |
|
</style> |
|
|
|
<div id="contents"> |
|
<div id="daggraph"></div> |
|
</div> |
|
<div id="hints"> |
|
<div id="hintsupper">Use scroll to zoom in or out. Select or Hover over nodes and edges for more information ... (Try dragging nodes to replace them.)</div> |
|
<div class="container"> |
|
<div class="left" id="hintsleft"></div> |
|
<div class="center" id="hintscenter"></div> |
|
<div class="right" id="hintsright"></div> |
|
<div class="clear"></div> |
|
</div> |
|
<div id="hintsbottom"></div> |
|
</div> |
|
|