.formBox{
float:left;position:relative;height:185px;width:200px;cursor:pointer;
}
.canvas-holder{
position:absolute;width:100%;height:160px;left:0;
}
.canvas-holder span{
position:absolute;text-align:center;width:62px;color:#333;z-index:2;
}
.canvas-holder span.l{
top:90px;left:18px;
}
.canvas-holder span.r{
top:90px;right:18px;
}
.canvas-holder span.l.t{
top:83px;
}
.canvas-holder span.r.t{
top:83px;
}
.canvas-holder span.title{
background:#616161;color:#fff;padding:10px;left:0;right:0;width:auto;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;
}

.chart-pie{
position:absolute;bottom:0px;
}
.chart-pie.l{
left:-25%;*/
}
.chart-pie.r{
right:-25%;
}
.formTable{
display:none;display:none;float:left;width:100%;
}
#homef.formTable,#homef.formBox{
background:#dae3e1;
}
#awayf.formTable,#awayf.formBox{
background:#f7e2d9;
}
#h2hf.formTable,#h2hf.formBox{
background:#f2f2f2;
}
#homef.formBox:hover,#awayf.formBox:hover,#h2hf.formBox:hover{
background:#fcfcfc;
}

.formDataLine{
float:left;border-bottom:1px solid #d6d6d6;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
.formList{
padding:5px;float:left;
}
.formList.d{
width:75px;
}
.formList.r{
width:20px;
}
.formList.t{
padding:2px;margin:3px;
}
.formList.s{
border:1px solid #ccc;padding:1px;margin:3px;background:#fcfcfc;
}
@media only screen and (max-width: 650px){
.formBox{
width:33%;
}
#h2hf.formBox{
width:34%;
}
.canvas-holder span.l,.canvas-holder span.r{
top:30px;width:auto;font-size:.9em;
}
.canvas-holder span.l{
left:5%;
}
.canvas-holder span.r{
right:5%;
}
.canvas-holder span.title{
padding:5px; 
}

}
@media only screen and (max-width: 500px){
.formDataLine{
border-bottom:5px solid #fff;padding:10px;
}
.canvas-holder span.l,.canvas-holder span.r{
font-size:.9em;
}
.formList.t{
clear:both;
}
}