@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Tutorial Case
   
   Reset Style Sheet for Tree and Book

   
   Filename: portfolio.css

*/

h1#main {
	margin-left: 45%;
	font-family: courier, monospace;
	font-size: 20pt;
}

nav.horizontal {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 0;
	
}

nav.horizontal > h4 {
	font-family: courier, monospace;
	letter-spacing: 2px;
	font-size: 12pt;
}

nav.horizontal ul {
	display: block;
	list-style-type: none;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%
	
}

nav.horizontal li {
	float: left;
	width: 20%;
	padding: 2.5%;
}

nav.horizontal a {
	display: block;
	text-align: center;
	border: 1px solid CornflowerBlue;
}

body {
	margin: 10px 5px 10px 5px;
	border: 5px solid CornflowerBlue;
	border-radius: 1px;
	background-color: #f1f1f1;
	padding: 5px 5px 5px 5px;
	font-family: arial;
	font-size: 12pt;
}

body header {
	border: 5px solid CornflowerBlue;
}

body footer {
	width: 100%;
	border: 5px solid CornflowerBlue;
	margin: 0 5px 5px 5px;
	clear: both;
	text-align: center;
}

body article {
	display: block;
	float: right;
	width: 75%;
	padding: 5px 5px 5px 5px;
}

article.normal {
	border: 5px solid CornflowerBlue;
}

article figure {
	clear: right;
	float: right;
}

nav.vertical#sidebar {
	display: block;
	float: left;
	width: 20%;
	border: 5px solid CornflowerBlue;
	padding-left: 1px;
}

figure img {
	display: block;
}

article.chapter {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	width: 90%;
	margin-top: 2px;
	font-size: 15pt;
	line-height: 50pt;
	grid-column: 1 / span 2;
}
.chapter > h2 {
	text-align: center;
}
article.chapter img {
	scale: 0.9;
	filter: grayscale(40%) contrast(1.01);
	margin: 0;
}
article.chapter > nav {
	width: 25%;
}

article.chapter section {
	width: 50%;
}

#red {
	border: 5px solid red;
}
#ora {
	border: 5px solid orange;
}
#yel {
	border: 5px solid yellow;
}
#gre {
	border: 5px solid lime;
}
#blu {
	border: 5px solid blue;
}

li > ul {
	list-style-type: none;
}