/**
* Table classes
*
* @date 	26/04/2013
* @author splitfire - http://splitfire.fr
* @version 1.0
*
*
*/ 

.table 
{
    display: table;
    width: 100%; 
    margin:20px 0 20px 0; 
}      
.th
{
	font-weight: bold;
	padding: 10px;
	text-align: left;
	vertical-align: middle;
	@include text();
	background-color: #465660;
	color:white;
	line-height: 2.5em;
	
	& a 
	{
		color: white;
	}
}
.tr 
{
	display: table-row;
	width: 100%;
}
.td
{
	border-top: 1px solid #e1e1e1;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    @include text();
	background-color:#FDFDFA;
}
.tr:nth-child(2n+1) .td
{
	background-color:darken(#F0F0F0, 5%); //#E3E3E3
}
// Archive dans les tableaux
.tr.archived .td
{
	background-color: #E15E54; 
	color: white;
	& .btn.disabled
	{
		display: none;
	}
	& .link
	{
		color: #37D0FF;
	}
}
.td, 
.th 
{
	display: table-cell;
}

.tr:last-child .td
{
	border-bottom: 1px solid #e1e1e1;
}
.thead 
{
    display: table-header-group;
    border-top: 1px solid #e1e1e1;
}
.tbody 
{
    display: table-row-group;	    
}
.tfoot 
{
    display: table-footer-group;
}
.table-fixed
{
	table-layout:fixed;
}

/* table quadrillé
__________________________*/
.table-squared
{
	& .td,
	{
		border-right: 1px solid #ccc;;
		&.td:first-child
		{
			border-left: 1px solid #ccc;;
		}

	}
	& .th
	{
		border-right: 1px solid #ccc;;
		border-top:1px solid #ccc;
		&.th:first-child
		{
			border-left: 1px solid #ccc;
		}		
	}
}

/* support des tri par colonne (datatable)
__________________________*/
.th .th--order
{
	display: inline-block;
	line-height: 2.5em;
	position: relative;
	text-decoration: none;
	white-space: nowrap;

	&.order-active
	{
	}
	& .order-icon
	{
		display: inline-block;
		@include icon-table-sprite(caret-normal);
		width: icon-table-sprite-width(caret-normal);
		height: icon-table-sprite-height(caret-normal);
		@include opacity(0.5);
		vertical-align: middle;
	}
	&.order-asc .order-icon
	{	
		@include icon-table-sprite(caret-down);
		width: icon-table-sprite-width(caret-down);
		height: icon-table-sprite-height(caret-down);
		@include opacity(1);
		margin-left: 2px;
		vertical-align: middle;
	}
	&.order-desc .order-icon
	{
		@include icon-table-sprite(caret-up);
		width: icon-table-sprite-width(caret-up);
		height: icon-table-sprite-height(caret-up);
		@include opacity(1);
		margin-left: 2px;
		vertical-align: middle;
	}
}

@include mq(phone)
{
	.table
	{
		display: block;
	}
	.tbody
	{
		display: block;
	}
	.thead 
	{
		position: absolute;
		display: block;
		top: -9999px;
		left: -9999px;	
	}
	.tbody .tr
	{
		display: block;
		margin-bottom:20px;
		& .btn-group
		{
			width: auto !important;
			text-align: center;
		}
	}
	.tbody .tr .td
	{
		display: block;
	}	
}