/* 2015-11-21 ebb: A CSS to control positioning of SVG with HTML table elements, 
balanced on left and right of a screen, to be used with JavaScript 
to show/hide particular rows of a table. */
body {background-color: #B4D6B4; color: #031B3F; font-family: arial, helvetica, sans-serif; 
padding:15px; line-height:1.4em; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column}
div#flexContainer{display:flex; justify-content:space-between; align-items:center; flex-direction:row; flex:2}
div#svg {flex:2}
div#Tables {flex:1; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column; }
div#otherTables {flex:1}

th, td {text-align:center; font-size:smaller;}
td.table1Question {text-align:left;}
td.question {text-align:left;}
td.Blank {background-color:#33C2CC;}
td.No {background-color:#FF99A3;}
td.Yes_but_fined {background-color:#FFFB81;}
td.Yes_but_fined:empty {visibility:hidden;}
td.Yes {background-color:#59FFAD;}

table#graphData {flex:2}
table#graphData tr[id] {display: none; height:100px; width:300px;}
table#graphData tr[id="QA1"] {display: table-row;}

span.instructions {font-style:italic; color:#cc0000; flex:1}
.id {width:20px;}
.table1Question {width:800px; height:50px;}
.Yes {width:20px;}
.Yes_but_fined {width:20px;}
.No {width:20px;}
.Blank {width:20px;}
.Total {width:20px;}

img {flex:1}