h1{font-family: verdana}
p{font-family: verdana}

#brokers {
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	color: #333333;
	border-width: 1px;
	border-color: #3A3A3A;
	border-collapse: collapse;
	width: 90%;
}

#brokers th{
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #6e84c5;
	background-color: #4669d0;
	color: #ffffff;
	text-align: right;
	vertical-align: top;
}		


#brokers  tr:nth-child(even) td{
	background-color: #cad8ff;
    }
 
#brokers  td:nth-last-child(-n+3) {
	text-align: right }

#brokers td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #9699a0;
	background-color: #ffffff;
	vertical-align: top;	
	}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media (max-width: 760px)  {
	#brokers {
		width: 100%;
	}

	table { 
	  	width: 100%; 
	}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee !important; 
		position: relative;
		padding-left: 25% !important; 
	}

	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 6%; 
		padding-right: 10px; 
		text-align: left;
		white-space: nowrap;
		/* Label the data */
		content: attr(data-column);

		color: #000;
		font-weight: bold;
	}

}