/* CSS Document */

html {
	font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.clear {
	clear: both;
}

div.header {
	margin: 0;
	padding: 0;
	text-align: center;
}

p, ol {
	font-size: 0.83em;
}

a {
	color: #652d8e;
	text-decoration: none;
}

a:hover {
	color: #321647;
	text-decoration: underline;
}

.libraryitem, .cen {
	text-align: center;
}

p.widget {
	text-align: center;
}

p.twitchinfo {
	padding-left: 75px;
}

.contentpadding {
	padding: 5px 10px;
}

p.footer {
	background-color: #652d8e;
	border-style: solid;
	border-width: 5px 0px;
	border-color: #000000;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0;
	overflow: hidden;
	padding: 10px;
	text-align: center;
}

p.blog {
	background-color: #d8cae3;
	border-radius: 5px;
	border-style: solid;
	border-width: 5px;
	border-color: #000000;
	color: #000000;
	margin: 0;
	overflow: hidden;
	padding: 10px;
}

.blogheader {
	font-size: 1.17em;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

.blogdate {
	font-style: italic;
	margin: 0px;
	padding: 0px;
}

.blogmore {
	font-weight: bold;
	text-align: right;
}

.catheader {
	font-size: 1.17em;
	font-weight: bold;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.catdate {
	font-style: italic;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.catmore {
	font-weight: bold;
	text-align: center;
}

p.button {
	background-color: #652d8e;
	border-radius: 5px;
	border-style: solid;
	border-width: 5px;
	border-color: #000000;
	color: #FFFFFF;
	font-weight: bold;
	margin: 0;
	overflow: hidden;
	padding: 10px;
	text-align: center;
}

p.button a {
	color: #FFFFFF;
	font-weight: bold;
}

p.button:hover {
	background-color: #321647;
}

.contentborder {
	border-style: solid;
	border-width: 5px 5px 5px 5px;
	border-color: #000000;
}

/* Blog Posts */

.newsheader {
	margin-bottom: 5px;
}

.commentheader {
	margin-bottom: 0px;
}

div.newspost, div.comment {
	border-style: solid;
	border-width: 5px 0px;
	border-color: #000000;
	text-align: justify;	
}

.newsdate {
	color: #000000;	
	font-style: italic;
	text-align: right;
}

/* Navigation Bar */
/* Grey - #6a7285 */
/* Purple - #652d8e */
/* Dark Purple - #321647 */

.navborder {
	border-style: solid;
	border-width: 5px 0px;
	border-color: #000000;
}

ul.nav {
	background-color: #652d8e;
	font-size: 0.83em;
	font-weight: bold;
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

ul.nav li {
	float: left;
}

li a, .dropbtn {
	color: white;
	display: inline-block;
	padding: 10px 16px;
	text-align: center;
	text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
	background-color: #321647;
	color: #FFFFFF;
	text-decoration: none;
}

li.dropdown {
	display: inline-block;
}

.dropdown-content {
	background-color: #f9f9f9;
	border-top: 5px solid #000000;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	display: none;
	min-width: 160px;
	position: absolute;
	z-index: 1;
}

.dropdown-content a {
	color: #000000;
	display: block;
	padding: 10px 16px;
	text-align: left;
	text-decoration: none;
}

.dropdown-content a:hover {
	/* background-color: #f1f1f1;*/
	/* color: #000000;*/
	background-color: #321647;
	color: #ffffff;
}

.dropdown:hover .dropdown-content {
	display: block;
}

/* Search Box */

#searchbox {
	display: block;
	margin: auto;
	flex-grow: 1;
	padding: 0.75em;
	margin: 1.5em 0.7em;
	font-size: 11pt;
	font-weight: bold;
	width: 100%;
	background: #321647;
    border: 1px solid #777;
    border-bottom: 3px solid #555;
    color: #fcfcfc;
}

.calign {
	margin: auto;
	align-content: center;
}

/* Back to Top Button */

#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 20px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border-style: solid;
	border-width: 5px 5px 5px 5px;
	border-color: #000000;
	outline: none; /* Remove outline */
	background-color: #652d8e; /* Set a background color */
	color: white; /* Text color */
	cursor: pointer; /* Add a mouse pointer on hover */
	padding: 15px; /* Some padding */
	border-radius: 10px; /* Rounded corners */
	font-size: 0.83em;
	font-weight: bold;
}

#myBtn:hover {
	background-color: #321647; /* Add a background on hover */
}