{
  width: device-width ;
  zoom: 1.0 ;
}
div.fullWidth {
  width: 100%;
}
h1 {

	font-size: 100%;
	font-weight: bold;
	font-family: Verdana, arial, helvetica;
	color: #A3C8DA;
}
h2 {
	font-size: 120%;
	font-weight: bold;
	font-family: Verdana, arial, helvetica;
	color: #A3C8DA;
	
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	font-weight: normal;
	color: #333333;
	text-decoration: none;

}
h4 {

	font-size: 120%;
	font-weight: bold;
	font-family: Verdana, arial, helvetica;
	color: #A3C8DA;
}


body, td, p, tr, table {
	color: #333333;
	font-size: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0px;
	background-position: center;
	list-style-type: lower-alpha;
	position: static;

   }

#sidebar {
	border-collapse:collapse;
	box-shadow:0px 0px 10px 0px;
	position:absolute;
	top:140px;
	width:20%;
	padding:1px;
	border:1px solid silver;
	border-radius:5px;
	background-color: #FFFFFF;



    -moz-border-radius:5px; /* Firefox 3.6 and earlier */
	
	/*Comment: Above is the CSS for the sidebar image*/

	
	}
	
	
#familybox {
	border-collapse:collapse;
	left:90px;
	position:absolute;
	width:70%;
	background-color:#ffffff;
	padding:1px;
	border:#EFEFEF;
	border:1px solid silver;
	border-radius:5px;
	top:685px;

	-moz-border-radius:5px; /* Firefox 3.6 and earlier */
	
	/*Comment: Above is the CSS for the back to family box underneath the species mini factsheet table and the credit for the image*/
	
	
}

#speciestable {
	border-collapse:collapse;
	box-shadow:0px 0px 10px 0px;
	left:80px;
	position:absolute;
	top:140px;
	width:70%;
	background-color:#ffffff;
    padding:1px;
	border:1px solid silver;
    border-radius:5px;
    -moz-border-radius:5px; /* Firefox 3.6 and earlier */
	
	
	/*Comment: Above is the CSS for the mini factsheet table*/


}

#speciesimage {
    border-collapse:collapse;
	box-shadow:0px 0px 10px 0px;
	left:90px;
	position:absolute;
	top:130px;
	width:70%;
	background-color:#ffffff;
    padding:1px;
	border:1px solid silver;
    border-radius:5px;
    -moz-border-radius:5px; /* Firefox 3.6 and earlier */
	
	/*Comment: Above is the CSS for the image for the mini factsheet*/

}

#pgback {
    border-collapse:collapse;
	box-shadow:0px 0px 10px 0px;
	position:absolute;
	top:130px;
	width:18%;
	background-color:#ffffff;
    padding:1px;
	border-radius:5px;
    -moz-border-radius:5px; /* Firefox 3.6 and earlier */
	
	/*Comment: For right of the family pages*/
	
	}
#speciesinfo {
	border-collapse:collapse;
	box-shadow:0px 0px 10px 0px;
	left:90px;
	position:absolute;
	top:130px;
	width:70%;
	background-color:#ffffff;
    padding:1px;
	border:1px solid silver;
    border-radius:5px;
    -moz-border-radius:5px; /* Firefox 3.6 and earlier */
	
	
	/*Comment: Above is the CSS for the family section*/
	
	}


A {
	color: #333333;
	font-size: 100%;
	font-family: Verdana, arial, helvetica;
	font-weight: bold;
	text-decoration: none;
          

}        

A:link {
  color: #000066;
  font-size: 100%; 
  font-family: Verdana, arial, helvetica;
  font-weight: bold;
  text-decoration: none;
  
}        

a:visited {
  color: #3F6A8B;
  font-size: 100%; 
  font-family: Verdana, arial, helvetica;
  font-weight: bold;
  text-decoration: none;
  
}

a:hover {
  color: #666666;
  font-size: 100%; 
  font-family: Verdana, arial, helvetica;
  font-weight: bold;
  background-color:#A3C8DA
}
table, th, td
{

border: 0px grey;
}


/*BEGIN MEDIA QUERIES*/
 
@media screen and (max-width: 768px) {
    .sidebar{
    margin: 0 0 20px 1%;
    clear:both;
    width:98%;
    }
}
@media screen and (max-width: 480px) {
    body{
        font-size: 120%;
 
 
}


@media only screen and (min-
width: 1024px) { 
body { 
font-size: 100%; 
} 
}
@media only screen and (min-
width: 480px) { 
body { 
font-size: 80%; 
} 
}
@media only screen and (max-device-width: 
480px) and
(orientation:
landscape) { 
body { 
font-size: 90%; 
} 
}
@media only screen and (min-
width: 560px) and 
(max-device-width: 
1136px)
} 
}
@media only screen and (device-aspect-ratio:
40/71)
}
}
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>