div.straightDemo td
{
border:1px solid black;
width:15px;
height:17px;
text-align:center;

}

div.straightDemo table
{
border-collapse:separate;
}

.imgRow {
display: block;
clear: both;
width: 785px;
text-align: justify;
}


img.card
{
width:45px;
height:65px;
display: inline-block;
margin: 5px;
}

/*

img.card:nth-of-type(2)
{
position:relative;
left:-22.5px;
}

img.card:nth-of-type(3)
{
position:relative;
left:-45px;
}

img.card:nth-of-type(4)
{
position:relative;
left:-67.5px;
}

img.card:nth-of-type(5)
{
position:relative;
left:-90px;
}

img.card:nth-of-type(6)
{
position:relative;
left:-112.5px;
}

img.card:nth-of-type(7)
{
position:relative;
left:-135px;
}
*/





canvas
{
padding:0px;
width:500px;
}

canvas#aboveBinary
{
height:50px;
}

canvas#belowBinary
{
height:40px;
}

div.straightDemo th
{
width:70px;
border:none;
text-align:right;
padding-right:15px;
color: #763d00;
}


div#inputCards
{
margin-left:45px;
}

div#demoOutput
{
position:relative;

}

div#demoOutput span
{
position:relative;
vertical-align:middle;
text-align:center;
color: #763d00;
}


div.straightDemo td.one
{
background-color: black;
color: #404040;
}

div.straightDemo td.zero
{
background-color: white;
color: #ffffff;
}