/*---------------------------------------------------------------------------------------------------------------------
                                                    TABLE TITLE
---------------------------------------------------------------------------------------------------------------------*/
.table-title{
    position: relative;
    color: #fff;
    width: 100%;
    font-size: 1.5em;
    text-align: left;
    margin-top: .2em;
    padding: .7em 0;
    padding-left: 2.2em;
    /******************** gradient ********************/
    background: rgb(59,59,59);
    background: -moz-linear-gradient(top, rgba(59,59,59,1) 0%, rgba(48,48,48,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,59,59,1)), color-stop(100%,rgba(48,48,48,1)));
    background: -webkit-linear-gradient(top, rgba(59,59,59,1) 0%,rgba(48,48,48,1) 100%);
    background: -o-linear-gradient(top, rgba(59,59,59,1) 0%,rgba(48,48,48,1) 100%);
    background: -ms-linear-gradient(top, rgba(59,59,59,1) 0%,rgba(48,48,48,1) 100%);
    background: linear-gradient(to bottom, rgba(59,59,59,1) 0%,rgba(48,48,48,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#303030',GradientType=0 );
    /******************** box shadow ********************/
    -moz-box-shadow: 0px -2px 5px 0px #222, 0px 2px 5px 0px #222;
    -webkit-box-shadow: 0px -2px 5px 0px #222, 0px 2px 5px 0px #222;
    -o-box-shadow: 0px -2px 5px 0px #222, 0px 2px 5px 0px #222;
    box-shadow: 0px -2px 5px 0px #222, 0px 2px 5px 0px #222;
}

.color-purple .table-title{
    background: #bf00a8;
    background: -moz-linear-gradient(top, #bf00a8 0%, #91007f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bf00a8), color-stop(100%,#91007f));
    background: -webkit-linear-gradient(top, #bf00a8 0%,#91007f 100%);
    background: -o-linear-gradient(top, #bf00a8 0%,#91007f 100%);
    background: -ms-linear-gradient(top, #bf00a8 0%,#91007f 100%);
    background: linear-gradient(to bottom, #bf00a8 0%,#91007f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf00a8', endColorstr='#91007f',GradientType=0 );
}
.color-purple .row .cpu-infos b{
    color: #FA38E7;
}

.color-blue .table-title{
    background: #34a2f3;
    background: -moz-linear-gradient(top, #34a2f3 0%, #0172c6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34a2f3), color-stop(100%,#0172c6));
    background: -webkit-linear-gradient(top, #34a2f3 0%,#0172c6 100%);
    background: -o-linear-gradient(top, #34a2f3 0%,#0172c6 100%);
    background: -ms-linear-gradient(top, #34a2f3 0%,#0172c6 100%);
    background: linear-gradient(to bottom, #34a2f3 0%,#0172c6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34a2f3', endColorstr='#0172c6',GradientType=0 );
}
.color-blue .row .cpu-infos b{
    color: #34a2f3;
}


.color-green .table-title{
    background: #009865;
    background: -moz-linear-gradient(top, #009865 0%, #006834 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009865), color-stop(100%,#006834));
    background: -webkit-linear-gradient(top, #009865 0%,#006834 100%);
    background: -o-linear-gradient(top, #009865 0%,#006834 100%);
    background: -ms-linear-gradient(top, #009865 0%,#006834 100%);
    background: linear-gradient(to bottom, #009865 0%,#006834 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009865', endColorstr='#006834',GradientType=0 );
}
.color-green .row .cpu-infos b{
    color: #009865;
}

.color-dark-purple .table-title{
    background: #8747c4;
    background: -moz-linear-gradient(top,  #8747c4 0%, #522b77 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8747c4), color-stop(100%,#522b77));
    background: -webkit-linear-gradient(top,  #8747c4 0%,#522b77 100%);
    background: -o-linear-gradient(top,  #8747c4 0%,#522b77 100%);
    background: -ms-linear-gradient(top,  #8747c4 0%,#522b77 100%);
    background: linear-gradient(to bottom,  #8747c4 0%,#522b77 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8747c4', endColorstr='#522b77',GradientType=0 );
}
.color-dark-purple .row .cpu-infos b{
    color: #B176E8;
}

.color-orange .table-title{
    background: #fe801c;
    background: -moz-linear-gradient(top, #fe801c 0%, #984401 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe801c), color-stop(100%,#984401));
    background: -webkit-linear-gradient(top, #fe801c 0%,#984401 100%);
    background: -o-linear-gradient(top, #fe801c 0%,#984401 100%);
    background: -ms-linear-gradient(top, #fe801c 0%,#984401 100%);
    background: linear-gradient(to bottom, #fe801c 0%,#984401 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe801c', endColorstr='#984401',GradientType=0 );
}
.color-orange .row .cpu-infos b{
    color: #ffa737;
}

/* arrow open / close */
.table-title:before{
    content:'';
    position: absolute;
    top : 1em;
    left : .8em;
    width:0em;
    height:0;
    border-left: .5em solid #fff; /* width of this triangle (for sure it depends of rotation) */
    border-top:.3em solid transparent; /* height of this triangle*/
    border-bottom:.3em solid transparent; /* height of this triangle*/
    -webkit-transition: -webkit-transform 200ms ease-in;
    -moz-transition: -moz-transform 200ms ease-in;
    -ms-transition: -ms-transform 200ms ease-in;
    transition: transform 200ms ease-in;
}

/******************** ACTIV TITLE CLASS ********************/
.open .table-title:before{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/*---------------------------------------------------------------------------------------------------------------------
                                                    TABLE CONTAINER
---------------------------------------------------------------------------------------------------------------------*/
.table-container{
    overflow: hidden;
    -webkit-transition: height 250ms ease-in;
    -moz-transition: height 250ms ease-in;
    -ms-transition: height 250ms ease-in;
    -o-transition: height 250ms ease-in;
    transition: height 250ms ease-in;
}


/*---------------------------------------------------------------------------------------------------------------------
                                                    TABLE
---------------------------------------------------------------------------------------------------------------------*/
.table{
    display: table;
    width: 100%;
    background-color: #252525;
}

.row{
    display: table-row;
}

.cell{
    display: table-cell;
    padding: 1em;
    font-size: 1.2em;
    font-weight: bold;
    border-top:1px dotted #3e3e3e;
    width: 20%;
    vertical-align: middle;
    text-align: center;
}

.cell + .cell{
    font-weight: inherit;
    width: 80%;
    text-align: left;
    color:#777;
    font-size: 1.1em;
}

/******************** cell size ********************/
.cell.cell1{
    width: 2%;
}

.cell.cell2{
    width: 11%;
}

.cell.cell3{
    width: 27%;
}

/******************** cell style ********************/
.cell.linecount{
    background-color: #fff;
    color:#b3009d;
}

.cell.username{
    color:#777;
    font-size: 1.4em;
}

.cell.cpu-and-mb-infos{
    font-size: 1.7em;
    color:#aaa;
}
.cell.cpu-and-mb-infos b{
    font-size: 1.1em;
}

.mb-infos{
    color:#fff;
    font-size: .7em;

}

.cell.date{
    color:#fff;
    text-align: right;
}