body,h1,h2,h3,h4,h5,h6,table,div,a{   margin:0;   padding:0; } 

#vue-table
{
  border:          1px solid;
  border-collapse: collapse;
}

#vue-table td#youarehere
{
  border: 2px dashed red !important;
}

/* headers */
tr.vue-header td
{
  font-size:        0.6em;
  text-align:       center;
  height:           10px !important;
  background-color: #333333;
  color:            #FFFFFF;
}

td.vue-header
{
  font-size:        0.6em;
  text-align:       center;
  width:            10px !important;
  background-color: #333333;
  color:            #FFFFFF;
}


/* case standard */
#vue-table td
{
  vertical-align: top;
  border:         1px solid;
  width:          100px;
  height:         80px;
}


/* Mini-cases*/
table.vue-content
{
  text-align: center;
  width:      100%;
  height:     100%;
}

table.vue-content tr
{
  vertical-align: top;
}

table.vue-content td.level1
{
  border:     0px !important;
  width:      40px !important;
}

table.vue-content td.level2
{
  border:     0px !important;
  width:      20px !important;
}



/* Cases  */
/* -----  */

div.l1
{
  float:  left;
  width:  50px;
  height: 50px;
/*  border: 1px solid black;*/
  background-color:  #FFFFFF;
}

div.l2
{
  float:  left;
  width:  25px;
  height: 30px;
/*  border: 1px solid black; */
  background-color:  #EEEEEE;
}

/* LEVEL 1 */
img.tr1, img.tr1d, img.mo1, img.mo1d, img.tre1, img.tre1d, img.li1, img.li1d {
  float:  left;
  width:  30px;
  height: 30px;
}

img.tr1d, img.mo1d, img.tre1d, img.li1d {
  background-color: #FFAA66;
}

div.info_right {
  float:        left;
}

div.info_bas {
  clear:        left;
  float:        left;
  position:     relative;
  top:          -5px;
  font-size:    0.6em;
}

div.tr1_same, div.mo1_same, div.tre1_same, div.li1_same {
  float:        left;
  clear:        left;
  color:        black;
  font-weight:  bold;
  font-size:    0.6em;
}

div.tr1_up, div.mo1_up, div.tre1_up, div.li1_up {
  float:        left;
  clear:        left;
  color:        #333333;
  font-weight:  normal;
  font-size:    0.6em;
}

div.tr1_down, div.mo1_down, div.tre1_down, div.li1_down {
  float:        left;
  clear:        left;
  color:        #333333;
  font-weight:  normal;
  font-size:    0.6em;
}

div.tr1_total, div.mo1_total, div.tre1_total, div.li1_total {
  float:        left;
  color:        black;
  font-weight:  bold;
  font-size:    0.6em;
}

div.tr1_detail, div.mo1_detail, div.tre1_detail, div.li1_detail {
  float:        left;
  font-size:    0.8em;
}

.tr1_pp, .mo1_pp, .tre1_pp, .li1_pp {
  color:        green;
}

.tr1_pg, .mo1_pg, .tre1_pg, .li1_pg {
  color:        red;
}

/* LEVEL 2 */

img.tr2, img.tr2d, img.mo2, img.mo2d, img.tre2, img.tre2d, img.li2, img.li2d {
  float:  left;
  width:  15px;
  height: 15px;
}

img.tr2d, img.mo2d, img.tre2d, img.li2d {
  background-color: #FFAA66;
}

div.tr2_total, div.mo2_total, div.tre2_total, div.li2_total {
  float:        left;
  clear:        left;
  color:        black;
  font-weight:  bold;
  font-size:    0.6em;
}