@import url("https://fonts.googleapis.com/css?family=Prosto+One");

body {
	background:            linear-gradient(to bottom right, yellow, #772222);
	background-attachment: fixed;
	font-family:           'Prosto One', cursive;
}

header {
	position: fixed;
	left:     0;
	top:      0;
	width:    100%;
	height:   64px;
}

nav {
	height:     44px;
	padding-top: 20px;
	text-align: center;
}

main {
	position: fixed;
	left:     0;
	top:      64px;
	bottom:   20px;
	right:    0;
}

section {
	position:   fixed;
	left:       0;
	top:        130px;
	bottom:     20px;
	right:      0px;
	overflow-y: auto;
	margin:     0;
}

footer {
	position:   fixed;
	left:       0;
	bottom:     0;
	width:      100%;
	text-align: center;
	font-size:  0.8em;
}

#logo {
	float:              left;
	transition:         transform 1s;
	-webkit-transition: -webkit-transform 1s;
}

#logo:hover {
	transform:         rotate(45deg);
	-webkit-transform: rotate(45deg); /* Safari, Chrome, mobile Safari, and Android */
}

ul {
	margin:  0;
	padding: 0;
}

li {
	display: inline;
}

#articleList > li {
	display: block;
}

article {
	background: lightgray; /*linear-gradient(to bottom right, lightgray, darkslategray);*/
	padding:    5px;
	margin:     0 10px 20px;
	box-shadow: 10px 10px 10px black;
	transition: 5s;
}

article:hover {
	background: darkslategray; /*linear-gradient(to bottom right, darkslategray, lightgray);*/
}

h1 {
	text-shadow: 2px 2px 2px white;
	text-align:  center;
}

h2 {
	margin-top:  0;
	text-shadow: 1px 1px 1px white;
}

time {
	border:  1px outset gold;
	padding: 1px 3px;
}

a {
	text-decoration: none;
}

#navList > li {
	margin:  0;
	padding: 0;
}

#navList > li > a {
	padding:          10px;
	border:           outset yellow;
	background-color: yellow;
	vertical-align:   middle;
}

#navList > li > a:hover {
	background: linear-gradient(to bottom right, yellow, red);
}

#navList > li > #selectedPage {
	background-color: red;
}

#navList > li > #selectedPage:hover {
	background: red;
}

table {
	overflow-y: auto;
}

table, th, td {
	border: 2px outset yellow;
}

table a {
	padding:          0 5px;
	background-color: yellow;
	vertical-align:   middle;
	position:         relative;
	display: block;
}

table a:hover {
	background: linear-gradient(to bottom right, yellow, red);
}