table.leaderboard {
	width: auto;
}

th.point-logo {
	vertical-align: middle;
	text-align: center;
}

th.point-logo img {
	width: 60px !important;
	height: auto;
}

table.leaderboard th.headers div{
	-o-transform: translate(0px, 32px) rotate(-90deg);
	-moz-transform: translate(0px, 32px)  rotate(-90deg);
	-webkit-transform: translate(0px, 32px)  rotate(-90deg);
	width: auto;
	height: auto; 
	
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	color: #303030;
	line-height: 14px;
	font-size: 12px;
}

table.leaderboard td.names div {
	font-size: 13px;
}

table.leaderboard td.points div {
	font-size: 13px;
	text-align: center;
}

table.leaderboard,
table.leaderboard thead th, 
table.leaderboard tr td {
	border: 1px solid #ccc;
}

table.leaderboard tr:hover td {
	background: #1abc9c;
}

table.leaderboard tr:hover td.names div,
table.leaderboard tr:hover td.points div {
	color: #fff ;
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)  {
	
	/* Force table.leaderboard to not be like tables anymore */
	.tab-content table.leaderboard, 
	.tab-content table.leaderboard thead, 
	.tab-content table.leaderboard tbody, 
	.tab-content table.leaderboard th, 
	.tab-content table.leaderboard td, 
	.tab-content table.leaderboard tr { 
		display: block; 
	}
 
	/* Hide table.leaderboard headers (but not display: none;, for accessibility) */
	.tab-content table.leaderboard thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.tab-content table.leaderboard tr { border: 1px solid #ccc; }
 
	.tab-content table.leaderboard td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		font-size: 15px;
	}
	
	.tab-content table.leaderboard td.names{
		padding-left: 0px;
		text-align: center;
		
	}
	
	.tab-content table.leaderboard td.names div,
	.tab-content table.leaderboard td[data-title="Total"] div,
	.tab-content table.leaderboard td.ranks div {
		font-size: 15px;
		text-align: center;
		color: #1abc9c;
		font-weight: 600;
	}

 
	.tab-content table.leaderboard td:before { 
		/* Now like a table.leaderboard header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
	
	table.leaderboard tr:hover td {
		background: transparent;
	}
	table.leaderboard tr:hover td.names div,
	table.leaderboard tr:hover td.points div {
		color: #818181;
	}
 
	/*
	Label the data
	*/
	.tab-content table.leaderboard td:before { content: attr(data-title); }
	
	td[data-title="wod"] {
		
	}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 768px) 
and (orientation : landscape)   {
	
	/* Force table.leaderboard to not be like tables anymore */
	.tab-content table.leaderboard, 
	.tab-content table.leaderboard thead, 
	.tab-content table.leaderboard tbody, 
	.tab-content table.leaderboard th, 
	.tab-content table.leaderboard td, 
	.tab-content table.leaderboard tr { 
		display: block; 
	}
 
	/* Hide table.leaderboard headers (but not display: none;, for accessibility) */
	.tab-content table.leaderboard thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	.tab-content table.leaderboard tr { border: 1px solid #ccc; }
 
	.tab-content table.leaderboard td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		font-size: 15px;
	}
	
	.tab-content table.leaderboard td.names{
		padding-left: 0px;
		text-align: center;
		
	}
	
	.tab-content table.leaderboard td.names div,
	.tab-content table.leaderboard td[data-title="Total"] div,
	.tab-content table.leaderboard td.ranks div {
		font-size: 15px;
		text-align: center;
		color: #1abc9c;
		font-weight: 600;
	}

 
	.tab-content table.leaderboard td:before { 
		/* Now like a table.leaderboard header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
	
	table.leaderboard tr:hover td {
		background: transparent;
	}
	table.leaderboard tr:hover td.names div,
	table.leaderboard tr:hover td.points div {
		color: #818181;
	}
 
	/*
	Label the data
	*/
	.tab-content table.leaderboard td:before { content: attr(data-title); }
	
	td[data-title="wod"] {
		
	}
}