/* 
Generic Styling, for Desktops/Laptops 
*/

body {
    color: #000000; 
    font-family: 'Roboto', 'Open Sans', 'Lato', Helvetica, Arial, sans-serif;
    font-size: 90%; /* with this 1em = 10px */
    text-align: center;
}
.container_belatmo {
	padding: none;
	margin: none;
}

a:link, #content a:link, dl.portlet a:link {color:#000095;}
#content a:visited, dl.portlet a:visited {color: #266DAB;}
#content a:hover, dl.portlet a:hover {color: #12304D !important;}
.container {
    width: 600px;
    text-align: center;
    margin: none;
    padding: none;
}
table {
  max-width: 600px;
  height: auto;
  font-size: 1em;
  border-spacing: 3px;
  margin: none;
  padding: none;
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #00A6E0; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 5px 3px; 
  border: 1px solid #ccc; 
  text-align: center; 
}
th a {
	color: white;
	text-decoration:none;
	}
div {
	display:inline-block;
	}
img {
	vertical-align:middle;
	padding: 0 1em;
	}


/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 340px),
(min-device-width: 340px) and (max-device-width: 400px)  {

	/* 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, th { 
  		height: 1.5em;
  		padding: 4px;
	}
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		border: 1px solid #ccc;
		font-size: 0.9em;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		display: inline;
		white-space: wrap;

	}

	td:before { content: attr(data-label); display: block;}
}
@media screen and (max-width: 768px) {
	table {
		font-size: 0.9em;
	}
	td { 


	}
}
@media screen and (max-width: 400px) {
	table {
		font-size: 0.9em;
	}
	td { 
  		height: 2.4em;

	}
}	
@media screen and (max-width: 300px) {
	table {
	font-size: 0.90em;
	}
}
@media screen and (max-width: 240px) {
	table {
	font-size: 0.85em;
	}
}