/* Default Width: */

body {
	background: #ffffff; 
	margin: 0em;
	}
header, nav, section, article, footer, aside {
	display: block;
	padding: .5em; margin: .5em;
	background: #ffffff; /* this is for older browsers, the first one will be read by older browsers, the 2nd more modern style will be taken by the newer browsers. 1st one is i */
}

section, nav, header, footer {
	clear: both;
	width: 840px;
	margin: 20px auto;
	}

header {
	font: normal 14px Geneva, Verdana, Arial, Helvetica, sans-serif;
	}

.next-right {
	float: right;
	font: normal 14px Geneva, Verdana, Arial, Helvetica, sans-serif;
	}

.next-left {
	float: left;
	font: normal 14px Geneva, Verdana, Arial, Helvetica, sans-serif;
	}

footer img {
	display: block;
	margin-left: auto;
	margin-right: auto 
	}

div.pic {
	float: left; 
	height: 245px; 
	width: 260px;
	padding: 5px; 
	margin: 5px 5px;
	}

div.pt {

	}

.button {
	text-decoration:none;
	color: #FFF;
	background-color: #999999;
	padding:8px 12px;
	font-weight:bold;
	margin-top:10px;
	text-align:center;
	cursor:pointer;
	display: inline-block;
}

.button:hover {

	background-color: #333333;

}

div.pic img {
	border: 0px solid; border-color: #444 #AAA #AAA #444;
	}

div.ls img {
	height: 195px; 
	width: 260px; 
	margin: 16px 0 0;
	}

div.pt img {
	height: 128px;
	width: 96px; 
	margin: 0 16px;
	}

.title {
	list-style: none;
	text-align: center;
	color: #000;
	font: normal 12px Geneva, Verdana, Arial, Helvetica, sans-serif;
	margin: 2px 15px;
  	}



  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
section, nav, header, footer {
	width: 764px;
	margin: 20px auto;
	}

div.pic {
	float: left; 
	height: 330px; 
	width: 360px;
	padding: 5px; 
	margin: 5px 5px;
	}

div.pt {

	}

div.pic img {
	border: 0px solid; border-color: #444 #AAA #AAA #444;
	}

div.ls img {
	height: 270px; 
	width: 360px; 
	margin: 16px 0 0;
	}

.title {
	list-style: none;
	text-align: center;
	color: #000;
	font: normal 13px Geneva, Verdana, Arial, Helvetica, sans-serif;
	margin: 2px 15px;
  	}
 
 footer {
	clear: both;
	}
 
  }


  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
section, nav, header, footer  {
	width: 450px;
	margin: 0 auto;
	}
header {
	font: normal 16px Geneva, Verdana, Arial, Helvetica, sans-serif;
	}

div.pic {
	float: left; 
	height: 380px; 
	width: 425px;
	padding: 5px; 
	margin: 5px 5px;
	}

div.pt {

	}

div.pic img {
	border: 0px solid; border-color: #444 #AAA #AAA #444;
	}

div.ls img {
	height: 319px; 
	width: 425px; 
	margin: 16px 0 0;
	}
.title {
	list-style: none;
	text-align: center;
	color: #000;
	font: normal 14px Geneva, Verdana, Arial, Helvetica, sans-serif;
	margin: 2px 15px;
  	}
footer {
	clear: both;
	}
  }

}