/* Body and main original theme */
body {
	background-color: #030607;
	color: white;
	margin: auto;
	width: 900px;
	margin-top: 30px;
	margin-bottom: 30px;
	box-shadow:	1px 1px 25px 1px rgba(45,0,0,1), 
            	1px 1px 25px 1px rgb(121, 9, 9),
             	1px 1px 25px 1px rgb(255, 0, 0);
}

* {
	font-family:sans-serif;
	transition: background-color 0.4s;
}

a:visited { 
 	text-decoration: none; 
}

header {
	padding-left:15px;
	background: linear-gradient(90deg, rgba(45,0,0,1) 0%, rgba(121,9,9,1) 60%, rgba(255,0,0,1) 100%);
	color:white;
	font-family:sans-serif;
	text-align: center;	
}

header img {
	height:80px;
	margin: 10px 0 10px 0;
}

nav {
	width:100px;
	line-height:20px;
	float:left;
	padding-left:10px;
	padding-right:10px;
	padding-top:20px;
}

/* All buttons have ui-button selector so nav is somewhat redundant.. */
nav a {
	display: block;
	width: 80px;
	text-align: center;
	background-color: rgba(74, 74, 74, 0.75);
	padding: 10px 10px;
	border-radius: 10px;
	transition: background 0.3s ease, transform 0.3s ease;
}

/* ..except these ones. */
nav a {
	text-decoration:none;
	font-size:16px;
	color:#ff0000;
}

nav a:hover {
    cursor: pointer;
    background-color: #8a0000;
    color: rgb(255, 255, 255);
    transform: scaleY(1.1);
    transform-origin: bottom;
    transition: 2000ms;
    font-weight: lighter;
}

section {
	float:left;
	border-left:1px gray solid;
	padding-left:20px;
	padding-right:25px;
	padding-top:10px;
	padding-bottom:50px;
	width:725px;	
}

footer {
	clear:both;
	border: 1px solid rgb(61, 3, 3);
	padding-left:15px;
	background: linear-gradient(90deg, rgba(45,0,0,1) 0%, rgba(121,9,9,1) 60%, rgba(255,0,0,1) 100%);
	color:white;
	font-family:sans-serif;
	text-align:center;
}

footer a {
	color: #4ca9ff;
	text-decoration: none;
}

section h3 {
	color:#ff0000;
}

.versionnumber {
	font-weight:bold;
	margin-top: 12px;
}

/* Required for most of the links */
.link1  {
	color:#4ca9ff;
}

/* Class selector for all buttons. */
.ui-button {
    background-color: rgba(74, 74, 74, 0.75);
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #ff0000;
    display: block;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease;
}

.ui-button:hover {
    background-color: #8a0000;
    color: white;
    transform: scaleY(1.1);
}

/* Animation for the show/hide button on about page. */
#planlog, #changelog {
    list-style-type: none;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
	transform-origin: top;
    transform: scaleY(0);
    margin: 0;
    padding-left: 20px;
    transition:
		transform 0.35s ease, 
		opacity 0.25s ease;
}

#planlog.open, #changelog.open {
    max-height: 1000px;
    opacity: 1;
	transform: scaleY(1);
}

#planlog {
	padding-top: 10px;
}

/* Select menu styling. */
.hcselect {
	margin-bottom: 5px;
	appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(74, 74, 74, 0.75);
    color: #ff0000;
    padding: 10px 40px 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 0, 0, 0.4);
    font-size: 16px;
    cursor: pointer;
    background-image: url("../img/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 10px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.hc:hover {
    background-color: rgba(90, 90, 90, 0.85);
}

.hcselect:focus {
    outline: none;
    border-color: #ff0000;
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3);
	background-image: url("../img/arrow-up.svg");
}

.hcselect option {
    background-color: #030607;
    color: #ff0000;
}