* {
	margin: 0;
	padding: 0;
}

html {
	background: black url('Images/background1.jpg') repeat-y center -200px;
	background-size: 120%;
	font-family: "Muli", sans-serif;
}

a {
	text-decoration: none;
}

li a {
	text-decoration: none;
	color: black;
	transition: all 0.1s;
}
a:hover {
	text-decoration: underline;
	color: #7c2d23;
	transition: all 0.1s;
}

.verytopbar {
	background: rgba(50,50,50,0.5);
	width: 100%;
	min-height: 2.5em;
	color: white;
	font-size: 20px;
}
.verytopbar ul {
	float: right;
	list-style-type: none;
	margin: 10px 0;
}
.verytopbar li {
	float: left;
	margin: 0 15px;
}
.verytopbar li a {
	color: white;
	text-shadow: black 1px 1px 1px;
	font-weight: bold;
	font-family: "Poppins", sans-serif;
}
.verytopbar img {
	max-height: 30px;
	vertical-align: middle;
}

.pageheading {
	clear: both;
	width: 100%;
	text-align: center;
	color: white;
	font-size: 30px;
	text-shadow: 1px 1px 1px black,2px 2px 2px black,3px 3px 3px black,-1px -1px 2px black;
	padding: 0px 0;
	margin: 20px 0;
	background-color: rgba(50,50,50,0.1);
}

.final {
	font-family: "Sansita", sans-serif;
	color: black;
	font-style: italic;
	background: rgba(250,250,245,0.9);
	padding: 15px 0;
}

.menuandcontent{
	clear: both;
	width: 70%;
	margin: 0 auto;
}

.menuarea {
	width: 100%;
	height: 194px;
	background: rgba(125,200,235,0.9);
	font-size: 25px;
	border-radius: 0 50px 0 0;
}

.menuphotoarea {
	float: left;
	height: 100%;
	width: 15%;
}
.menuphotoarea img {
	position: relative;
	outline: 1px dotted white;
	outline-offset: -5px;
}

.menutextarea {
	float: left;
	width: 85%;
	border-radius: 0 50px 0 0;
}

.menutitle {
	margin-left: 120px;
	font-family: "Poppins", sans-serif;
}
.menutitle p {
	padding: 30px;
}

.mainmenu {
	margin-left: 140px;
	background: rgba(150,100,50,0.5);
}
.mainmenu ul {
	list-style-type: none;
}
.mainmenu li {
	float: left;
	margin: 0 10px;
	padding: 5px;
	outline: 1px dashed white;
}
.mainmenu li:hover {
	outline: 3px dashed white;
	transition: all 0.05s;
}
.mainmenu li:first-child {
	margin-left: 0;
}
.mainmenu li:last-child {
	margin-right: 0;
}
.mainmenu li a {
	background: rgba(255,255,255,0);
	padding: 3px;
	border-radius: 10px;
}
.mainmenu li a:hover {
	background: rgba(255,255,255,0.9);
	transition: all 0.5s;
}

.contentandfeature {
	clear: both;
	width: 100%;
}

.maincontent {
	float: left;
	width: 70%;
	color: #444;
	font-size: 15px;
	margin-bottom: 50px;
	padding-bottom: 100px;
	background: rgba(245,245,245,0.9);
	border-radius: 0 0 0 50px;
}
.maincontent p {
	margin: 10px 30px;
	text-indent: 8px;
}
.maincontent h4 {
	text-align: center;
	margin: 15px 0;
	font-size: 20px;
}
.maincontent h4 a {
	text-decoration: none;
	color: black;
	transition: all 0.1s;
}
.maincontent h5 {
	margin: 15px 5px;
	font-size: 16px;
}
.maincontent ul {
	list-style-type: none;
	width: 97%;
	margin: 0 auto;
	font-size: 15px;
}
.maincontent ul ul {
	list-style-type: initial;
	width: 90%;
	font-size: 13px;
	margin: 5px auto;
}
.maincontent ul li {
	margin: 8px auto;
}
.maincontent ul li:hover {
	background: rgba(245,245,245,0.5);
	border-radius: 5px;
}
.maincontent ul li b {
	xxxfont-size: 15px;
}
.maincontent ol li b {
	font-size: 15px;
}
.maincontent img {
	vertical-align: middle;
}

.yearlist {
	padding: 5px;
}
.yearlist ul {
	list-style-type: none;
	margin-bottom: 10px;
}
.yearlist ul li {
	float: left;
	margin: 0 4px;
}
.yearlist a {
	color: blue;
	text-decoration: none;
}
.yearlist a:hover {
	text-decoration: underline;
}

.talklist {
	width: 90%;
	margin: 10px 50px;
}

.breadcrumbs {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	padding: 5px;
	padding-bottom: 0;
}
.breadcrumbs a {
	color: blue;
	text-decoration: none;
}
.breadcrumbs a:hover {
	text-decoration: underline;
}

.featurescolumn {
	float: left;
	width: 30%;
	color: #222;
	padding-bottom: 100px;
	background: linear-gradient(to bottom right,rgba(45,145,45,0.8),rgba(245,245,245,0.8));
}
.featurescolumn h4 {
	text-align: center;
	margin: 15px 0;
	font-size: 20px;
}
.featurescolumn img {
	max-width: 90%;
}
.featurescolumn ul {
	list-style-type: none;
	width: 97%;
	margin: 0 auto;
	margin-bottom: 40px;
	font-size: 12px;
}
.featurescolumn .bookcovers {
	text-align: center;
}
.featurescolumn ul li b {
	font-size: 15px;
}
.featurestitle h4 {
	font-size: 15px;
}
.buttons {
	margin: 0 auto;
	margin-bottom: 15px;
}
.buttons ul {
	text-align: center;
}
.buttons ul li {
	margin: 15px;
}
.buttons ul a {
	background: #7ec0ee;;
	background: rgba(125,200,235,0.9);
	border-radius: 5px;
	padding: 5px;
	border-right: 2px solid black;
	border-bottom: 2px solid black;
}
.reviseddate {
	margin-top: 40px;
	margin-left: 30px;
}
.blanklist {
	list-style-type: none;
}
.bloglist {
	margin-top: 30px;
}
.bloglist ol {
	width: 85%;
	margin: 0 40px;
	font-size: 12px;
}
.bloglist ol {
	font-size: 20px;
}
.bloglist ol > li {
	margin-bottom: 15px;
}
.bloglist ul li b {
	font-size: 15px;
}
.bloglist hr {
	margin: 40px auto;
}

/* when the screen gets smaller, reduce the margin between the menu items so that they look okay when they are spread over more 
than one line.
 Also alter the background image width to look a little better */ @media only screen and ( max-width: 1170px ){
	html {
		background: black url('Images/background1.jpg') repeat-y center -200px;
		background-size: 80%;
	}
	.menuandcontent{
		width: 90%;
	}
	.menuarea {
		font-size: 20px;
	}
	.menutitle p {
		padding-bottom: 10px;
	}
	.mainmenu li {
		margin-left: 0;
		margin-right: 3px;
		background: rgba(125,200,235,0.8);
	}
	.pageheading {
		font-size: 20px;
	}
}


@media only screen and ( max-width: 720px ){
	.menuarea {
		font-size: 15px;
	}
}