/* Smartphones (portrait and landscape) ———– */

@media only screen 

and (min-device-width : 320px) 

and (max-device-width : 480px) {

/* Styles */

}

 /* Smartphones (landscape) ———– */

@media only screen 

and (min-width : 321px) {

/* Styles */

}

 /* Smartphones (portrait) ———– */

@media only screen 

and (max-width : 320px) {

/* Styles */

}

 /* iPads (portrait and landscape) ———– */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) {

/* Styles */

} 

/* iPads (landscape) ———– */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : landscape) {

/* Styles */

} 

/* iPads (portrait) ———– */

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px) 

and (orientation : portrait) {

/* Styles */

}

 /* Desktops and laptops ———– */

@media only screen 

and (min-width : 1224px) {

/* Styles */

}

 /* Large screens ———– */

@media only screen 

and (min-width : 1824px) {

/* Styles */

}

 /* iPhone 4 ———– */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}
/* Background odd rows */
tr.odd {
	background: #EFEFEF;
	padding: 5px;

}
/* Background even rows */
tr.even {
	background: #F7F7F7;
	padding: 5px;

}
/* Column headings */
thead td {
	font-weight: bold;
	background: #FC0;
	padding: 5px;
}
/* Footer */
tfoot td {
	border-bottom: none; /* avoids double bottom border as already set in table */
	padding: 5px;
	font-weight: bold;
	background: #f0f0f0;
	text-align: center;
}
/* Navigation links */
#navlinks a {
	padding: 5px;
	text-decoration: none;
}
/* Used by example2.php */
ul.odd {
	color: green;
}