@charset "utf-8";
/* CSS Document */

body {
	background-color: rgb(0, 24, 102);
}
.contentContainer {
	background-color: rgb(0, 24, 102);
}
.mainText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: large;
	font-weight: bold;
	text-align: left;
	padding: 30px 120px 30px 120px;
	max-width:550px;
    margin: auto;
	background-color: #8fa6b4;
	min-height: 500px;	
}
.bttnTxt {
    background-color: #d43ada; /* Pink */
    border: none;
    color: rgb(25, 24, 78);
    padding: 15px 32px;
    border-radius: 8px; /* rounded corners */
	border: 2px solid #0F0F0F; /* Black */
	text-align: center;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
	font-size: large;
	font-weight: bold;
	display:block; /* change this from inline-block */
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	cursor: pointer; /* should indicate link */
}
.bttnTxt:hover {
    background-color: rgb(87, 62, 126);
    color: white;
}

.piccie {
	margin: 30px; /* adding this line has made no difference to just having 'padding' (next line) */
	padding: 30px;/* only seems to work on first page */
	background-repeat: no-repeat;
	background-position: center;
	background-color: #555555;
}
.rpg-featured-image {
	float: left;
	max-width: 200px;
	margin-right: 25px;
	margin-bottom: 25px;
	box-shadow: 2px 2px 5px;
}
.decoration{
	max-width:200px!important;
	display: block;
  margin-left: auto;
  margin-right: auto;
	box-shadow: 0px 2px 5px;
}
.featured-image{
	float:left;
	margin-right:25px;
	max-width:200px;
	box-shadow: 2px 2px 5px;
}
@media (orientation: portrait) {
    .featured-image {display:none;}
}
.red-box{
	border-width: 2px;
	border-style: ridge;
	border-color: darkred;
	padding: 20px;
}
.caption{
	text-align: center;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
	font-size: small!important;
	font-weight: normal!important;
}