body {
	margin: 0;
	padding: 20px 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	}

#homegrid {display: grid;
	grid-template-columns: 15% 15% 15% 15% 15% 15% ;
	grid-gap: 2%;
	grid-row-gap: 2em;
	margin-top: 18px;
}

.float{text-align: center;}
.float img {margin-bottom: 12px;overflow: hidden;max-width: 100%;height:auto;}
.float a {text-decoration: none;color:#353848;font-size:110%}

@media only screen and (max-width : 700px) {#homegrid {grid-template-columns: 23.5% 23.5% 23.5% 23.5%;font-size:90%}}
@media only screen and (max-width: 400px) {body{padding: 20px;}#homegrid {grid-template-columns: 48.5% 48.5%;font-size:80%}}

ul{
	text-align: left;
	list-style: none;
 	margin: 0;
	padding: 0;
	}

li{
	margin: 0;
	padding: 0;
	}
	
li a {
	display: block;
	border-left: 5px solid #999;
	padding: 2px 0 2px 4px;
	width: 11em;
	text-decoration:none;
	}

li a:hover {
	border-left: 5px solid red;
	color: red;
	text-decoration:none;
	}

li a.first {
	font-weight: bold;
	}

div#table {
	margin: 0 20px 5px 20px;
	}
	
p, h1, h2, h3, h4, h5, table {
	margin: 0 0 15px 0;
	}
	
p.caption {
	margin-left: 5px;
	text-align: left
	}
 
A {
	color:#000099;
	}

A:hover {
	color:red;
	}

IMG {
	border: 0px;
	}

table {
	text-align: center;
	border: none;
	margin: auto;
	}
  
td.image {
	width: 10%;
	border: none;
	vertical-align: top;
	}
 
td.caption {
	width: 90%;
	border: none;
	vertical-align: top;
	}
  
td {
	width: 100px;
	border: 1px solid #999;
	text-align: left;
	}
  
h1 {
	font: italic bold 160% verdana, sans-serif;
	text-align: center;
	color: #339;
	padding: 0 2px 6px 2px;
	margin: 0 20px 15px 20px;
	}
	  
h2 {
	font-size: 130%;
	color: #36F;
	text-align: left;
	margin: 20px 0;
	}
	
h3 {
	font-size: 120%;
	color: #333;
	text-align: left;
	margin-top: 15px;
	}
	
h4 {
	margin: 12px 0 20px 0;
	line-height: 280%;
}

h4 a {
	text-decoration:none;
	padding:7px 12px 7px 12px;
	margin: 0;
	white-space: nowrap;
	background: #404040;
	color: #FFF;
	}

h4 a:hover {
	background: rgb(26, 130, 199);
	color:#FFF;
	}
	
h5 {
	font-size: 110%;
	color: #669;
	text-align: left;
	padding: 0;
	}
	
h6 {
	font-size: 130%;
	color: #333;
  	text-align: left;
   	padding: 0;
	margin: 0;
	}

code {
	color: #C00;
	font-size: 1.2em;
	padding-left: 1em;
	}
#yah {color: #8B0000;}

p.annotation {display:none;font-size:14px;margin-left: 20px;color:#343848;padding-left: 4px; border-left: 1px solid #f2f2f2}

.image {text-align: center; margin: 0 20px 5px 20px;}
.chapters {text-align: center; line-height: 30px;}
.textindents{margin: 0 0 0 40px;  padding: 0 0 4px 0}
.glossary {font-weight: bold; text-align: left;}
.rowclear {clear: left;}
.jc {float: left; margin: 0 4px 2px 0}
.marker {float: left; margin: 0 6px 0 0}
#links {
	text-align: center;
	font-size: 90%;
	border-top: 1px solid #999;
	margin: 15px 20px 10px 20px;
	}
#links a{
	text-decoration:none;
	}
	
#links a:hover{
	text-decoration:underline;
	}
	
p#slideshow {margin: 5px 20px 5px 20px; text-align: center; font: bold 120% Arial, Helvetica, sans-serif; padding: 5px 0;}
p#slideshow a {text-align: center; color:#666; text-decoration: none;}
p#slideshow a:hover {color:#00FF00; text-decoration:none;}
#walkthrough {display:none;}

.design {color: #69F; padding: 2px 0 10px 0; text-align: center; font-size: 80%}
.design a {color: #69F;}