/* Large Devices, Wide Screens */
    @media only screen and (min-width : 769px) {
    @import url(https://fonts.googleapis.com/css?family=Noto+Sans);
        body{
         font-family: Helvetica, Sans-Serif;
	 font-size: 12pt;
        }
        .jcountTimer{
          font-weight: 100;
          font-size: 2em;
        }
        .jcountTimer span{
          display: block;
          min-width: 80px;
          float: left;
          margin-right: 10px;
          background: #ddd;
          padding: 4px;
          text-align: center;
          border-radius: 3px;
        }
        .jcountTimer small{
          display: block;
          font-size: .5em;
        }
        .jcountTimer .years{
		color: #da6665;
        }
        .jcountTimer .days{
          color: #6699CC;
        }
        .jcountTimer .hours{
          color: #65ada2;
        }
        .jcountTimer .minutes{
          color: #916c80;
        }
        .jcountTimer .seconds{
          color: #adb87a;
          animation: removeText 1s forwards;
        }

	table.unstyledTable {
	}
	table.unstyledTable td, table.unstyledTable th {
	  padding: 5px 2px;
	  font-size: 0.9em;
	}
	table.unstyledTable thead {
	  background: #DDDDDD;
	}
	table.unstyledTable thead th {
	  font-weight: normal;
	}
	table.unstyledTable tr:nth-child(even) {
	  background: #EDF1F1;
	}
	table.unstyledTable tfoot {
	  font-weight: bold;
	}

	.title {
	font-weight:    bold;
       }

	  #see-quote {display: none; }
          #quote {display: block; }
}
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
	/* Custom, iPhone Retina */
	@media only screen and (min-width : 320px) and (max-width:768px) {

	/* 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; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Clock"; }
	td:nth-of-type(2):before { content: "Date & Source"; }
	td:nth-of-type(3):before { content: "Claim"; }
	td:nth-of-type(4):before { content: "Doomsday Date"; }
	td:nth-of-type(5):before { content: "Successful Prediction"; }
	td:nth-of-type(6):before { content: "Share / Vote Up"; }

	table.unstyledTable tr:nth-child(even) {
	  background: #EDF1F1;
	}

	/*
	Clean Up
	*/
	     .jcountTimer{
        }
        .jcountTimer span{
	  padding: 3px;
	  font-size: large;
          display: block;
        }
        .jcountTimer small{
	  padding: 3px;
        }
        .jcountTimer .years{
	  color: #da6665;
        }
        .jcountTimer .days{
          color: #6699CC;
        }
        .jcountTimer .hours{
          color: #65ada2;
        }
        .jcountTimer .minutes{
          color: #916c80;
// 	  visibility: hidden;
        }
        .jcountTimer .seconds{
// 	  visibility: hidden;
          animation: removeText 1s forwards;
        }

	.title {
	font-weight:    bold;
       }

          #quote {display: none; }
          .show:focus + #quote {display: block;}
}

	/* Custom, iPhone Retina - landscape */
	@media only screen and (min-width : 320px) and (max-width:768px) and (orientation : landscape) {

	/* 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; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Clock"; }
	td:nth-of-type(2):before { content: "Date & Source"; }
	td:nth-of-type(3):before { content: "Claim"; }
	td:nth-of-type(4):before { content: "Doomsday Date"; }
	td:nth-of-type(5):before { content: "Successful Prediction"; }
	td:nth-of-type(6):before { content: "Share / Vote Up"; }


	table.unstyledTable tr:nth-child(even) {
	  background: #EDF1F1;
	}

	/*
	Clean Up
	*/
	     .jcountTimer{
        }
        .jcountTimer span{
	  padding: 3px;
	  font-size: large;
        }
        .jcountTimer small{
	  padding: 3px;
        }
        .jcountTimer .years{
	  color: #da6665;
        }
        .jcountTimer .days{
          color: #6699CC;
        }
        .jcountTimer .hours{
          color: #65ada2;
        }
        .jcountTimer .minutes{
          color: #916c80;
        }
        .jcountTimer .seconds{
          animation: removeText 1s forwards;
        }

	.title {
	font-weight:    bold;
       }

          #quote {display: none; }
          .show:focus + #quote {display: block;}
}
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->