/*Colours. The marine blue is #000fff 
The grey font colour is #665544  The maroon is #800000 

Note that large images will be elongated at mobile widths unless the height listed on the image file embedded is removed. 
Note also that the mobile width h1,h2, h3, heights etc are directly below. The other screen sizes are adjusted from the media only screen sections at end of this code*/



body  {
	 background: #ffffff;
	font-family: Helvetica, Arial, sans-serif;
	margin-bottom: 0;
	color: #000000;

}

a {
	color: #004080;
}

h1 {
	font-size: 1.8em;
	color: #800000;
}

h2 {
	font-size: 1.2em;
	color: #800000;
}

h2, {
	margin-top: 0;
	margin-left: 1.2em;
}

h3, h4 {
	font-size: 1.0em;
	margin-top: 0;
	margin-bottom: 0.8em;
	color: #696969;
}

H5 {
     color: 000fff0; 
  margin-top: 0;
   margin-bottom: 0;
}


p, dl {
	font-size: 0.8125em;
	line-height: 1.5;
	margin: 0 0 1.5em;
}

code {
	font-size: 1.2727em;
	color: #777;
}

iframe {
	border: 0;
	overflow: hidden;
}

.container {
	margin: 0 auto;
	max-width: 90em;
	padding: 1em 0;	
}

.footer {
	padding-top: 1.5em;
	
}


.desc {
	color: #696969;
}

.intro {
	border-bottom: 1px dotted #bbb;
	padding-bottom: 1.5em;
}

.social {
	border-top: 1px dotted #bbb;
	padding-top: 1.5em;
}




/* minor responsive adjustments */

.footer {
	border-top: 1px dotted #aaa;
	
}






.content {
	border-bottom: 1px dotted #aaa;
	margin-bottom: 1.5em;
}

/* I added this. But auto does not work on book images. Why? */

img {
    max-width: 100%; 
    height:auto;
}


img.float {
   float: none;
   margin-right: 0px;
}

  
img {   
   float: left; 
   margin-right: 5px;
   margin-top:5px;
}

/* I added this */

a {     }

a:hover {color:#FF0000; font-weight:bold;}




@media only screen and (min-width: 34em) {
	p, dl {
		font-size: 0.875em;
	}
	.feature:first-child,
	.info:first-child {
		border-right: 1px dotted #aaa;
		margin-bottom: 0;
	}
	.container {
		padding: 1em;
	}
	h1 {
		font-size: 1.8em;
	}
	h2 {
		font-size: 1.2em;
	}
	
	h3 {
		font-size: 1.0em;
		
}

	


@media only screen and (min-width: 54em) {
	.content {
		border: none;
		border-right: 1px dotted #aaa;

	}
	.info:first-child {
		border: none;
	
	}
	h1 {
		font-size: 1.8em;

	}
	h2 {
		font-size: 1.2em;
	}
	
	h3 {
		font-size: 1.0em;
	
}




@media only screen and (min-width: 76em) {
	.info:first-child {
		border-right: 1px dotted #aaa;
	
	}
	h1 {
		font-size: 1.8em;
	}
	h2 {
		font-size: 1.2em;
	}
	
	h3 {
		font-size: 1.0em;

}