@charset "UTF-8";
@import url(fontawesome-all.css);
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,700');
/* import url('https://fonts.googleapis.com/css?family=Rubik'); */

@import url('https://fonts.googleapis.com/css?family=Audiowide|Finger+Paint|Mouse+Memoirs|Holtwood+One+SC|Rye|Sancreek|Lovers+Quarrel|Gloria+Hallelujah|Trade+Winds|Indie+Flower|Creepster|Nosifer|Shadows+Into+Light|Rubik|Advent+Pro|Merienda|Chelsea+Market|Pirata+One|Uncial+Antiqua|Patrick+Hand+SC|Chicle|Barriecito|Mountains+of+Christmas|Permanent+Marker|Condiment|IM+Fell+English+SC|Fontdiner+Swanky|Shadows+Into+Light+Two|Stint+Ultra+Condensed|Caveat+Brush|Coustard|Racing+Sans+One|Freckle+Face|Play|Ewert|Bangers|Shojumaru|IM+Fell+Double+Pica|Anton|Barlow+Condensed|Bitter|Emilys+Candy|Tangerine|Sacramento|Satisfy&display=swap');

html {
	/* background: url(../images/background.png); */
	background-image: linear-gradient(40deg, #202020, #141414);
	background-size: cover;
	background-attachment: fixed;
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	box-sizing: border-box; 
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 400; 
	font-size: 16px; 
}

body {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 400; 
	font-size: 16px; 
	color: white; 
	padding: 0;
	margin: 0;
	background-image: url(../images/wallpaper.png);
}

.menuicon{
	width: 2em; 
	text-align: center;	
}

input, select, textarea {
	font-family: 'Raleway', Helvetica, sans-serif;
	font-weight: 400; 
	font-size: 16px; 
}

select:invalid,
input:invalid,
textarea:invalid
{
	border-color: #ff7f7f!important;
	color: red;
}

.vertcenter {
	display: inline-block; 
	height: 100%; 
	vertical-align: middle; 
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
	background: #111;
}

::-webkit-scrollbar-thumb {
	background: #555;
}

::-webkit-scrollbar-thumb:hover {
	background: #999;
}

.header {
	padding: 0.25em;
	margin: 0.5em 0 0 0;
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-size: 135%;
	font-weight: 500;
	/* background-color: #555; */
	/* background-image: linear-gradient(to right, #555, #333); */
	background-image: url(images/wallpaper.png);
	background-size: cover;
	color: d7d7d7;
}

h1, h2, h3, h4, h5 {
	margin-top: 0.5em;
	margin-bottom: 0.25em;
	padding-top: 0.5em;
	font-weight: 700;
}

h1 { font-size: 1.5em;}

h2 { font-size: 1.25em; }

h3 { font-size: 1.12em; }

a,a:link,a:visited { color: white; }

.homestorysection {
	width: 90%;
	background-color: black;
	margin: 1em auto; 
}

.content {
	padding: 0.75em;
	line-height: 1.3; 
	margin: 0 0 1em 0;
}

p {
	margin: 0 0 1em 0;
}

div p:last-child {
	margin-bottom: 0;
}

.horizscroll {
	display: block; 
	overflow-x: auto; 
	overflow-y: hidden;
	padding: 0.5em 1em;
	margin: 0 0 1em 0;
	height: 10em;
	white-space: nowrap; 
	text-align: center;
}

.storythumb {
	display: inline-block;
	padding: 0; 
	width: 10em;
	height: 10.5em; 
	text-align: center;
	vertical-align: middle;
	box-sizing: border-box;
}

.storyimagethumb {
	max-width: 12em;
	height: 7em;
	text-align: center;
	vertical-align: bottom;
	padding: 0.25em;
	position: relative;
}

.storyimage {
	max-width: 12em;
	max-height: 7em; 
	box-sizing: border-box;
}

.storyimagesmall {
	width: 4.875em;
	height: 6.5em; 
	box-sizing: border-box;
	background-position: center;
	background-size: cover;
	margin: auto;
}

.storytitle {
	width: 12em;
	text-align: center;
	vertical-align: middle;
	height: 1.25em; 
	font-size: 90%;
	margin: 0 auto;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

.left { 
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.middle {
	vertical-align: middle;
}

.top {
	vertical-align: text-top;
}

.bottom {
	vertical-align: text-bottom;
}

.inputlabel {
	font-size: 100%;
}

.inputline {
	display: block;
}

.covertext {
	display: table-cell;
	color: #efefe7;
	text-shadow: 
		-3px -3px 1px black, 
		-1px -3px 1px black, 
		 1px -3px 1px black, 
		 3px -3px 1px black, 
		-3px -1px 1px black, 
		 3px -1px 1px black, 
		-3px  1px 1px black, 
		 3px  1px 1px black, 
		-3px 3px 1px black, 
		-1px 3px 1px black, 
		 1px 3px 1px black, 
		 3px 3px 1px black, 
		-0px -0px 10px black;
	text-align: center;
	vertical-align: middle;
	font-weight: bold; 
	/* text-transform: uppercase; */
	line-height: 1.3;
	box-sizing: border-box;
}

.covertext2 {
	display: table-cell;
	color: #efefe7;
	text-shadow: 
		-2px -2px 1px black, 
		-1px -2px 1px black, 
		 1px -2px 1px black, 
		 2px -2px 1px black, 
		-2px -1px 1px black, 
		 2px -1px 1px black, 
		-2px  1px 1px black, 
		 2px  1px 1px black, 
		-2px 2px 1px black, 
		-1px 2px 1px black, 
		 1px 2px 1px black, 
		 2px 2px 1px black, 
		-0px -0px 10px black;
	text-align: center;
	vertical-align: middle;
	font-weight: bold; 
	/* text-transform: uppercase; */
	line-height: 1.3;
	box-sizing: border-box;
}

.coverimage {
	border: 0.2em solid #efefe7; 
	border-radius: 0.25em; 
	background-position: center;
	background-size: cover;
	box-sizing: border-box;
}

input,
select,
textarea {
	border-radius: 0.5em; 
	padding: 0.5em; 
	border: 1px solid #777;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	background-color: #222;
	color: #f7f7f7;
	padding: 0.75em; 
	border: 2px solid gray;
	border-radius: 9px; 
}

.button {
	background-color: #222;
	color: #f7f7f7;
	padding: 0.75em; 
	border: 2px solid gray;
	border-radius: 9px; 
	display: inline-block;
	margin: 0 0.5em;
}

/* a:link {
	color: #ddd;
}

a:visited {
	color: #ddc;
} */

.alerttype0 {
	border: 1px solid #330000;
	background-color: #eee;
}

.alerttype1 {
	border: 1px solid gray;
	border-radius: 9px; 
	background-color: #EEEEEE;
	color: black;
	margin-bottom: 4px;
	padding: 4px;
	margin: 1em;
}

.alerttype2 {
	border: 2px solid #7F7F00;
	border-radius: 9px; 
	background-color: #FFFFCC;
	color: black;
	margin-bottom: 4px;
	padding: 4px;
	margin: 1em;
}
.alerttype3 {
	border: 2px solid #FF0000;
	border-radius: 9px; 
	background-color: #FFAAAA;
	color: black;
	margin-bottom: 4px;
	padding: 4px;
	margin: 1em;
}
.alerttype4 {
	border: 2px solid #FF0000;
	border-radius: 9px; 
	background-color: #FFAAAA;
	color: black;
	margin-bottom: 4px;
	padding: 4px;
	margin: 1em;
}

.alerttype0form {
	border: 1px solid #330000;
	background-color: #eee;
	color: black;
	margin-top: 2px;
}
.alerttype1form{
	border: 1px solid gray;
	background-color: #EEEEEE;
	color: black;
	padding: 1px;
	margin-top: 2px;
}
.alerttype2form {
	border: 1px solid #7F7F00;
	background-color: #FFFFCC;
	color: black;
	padding: 1px;
	margin-top: 2px;
}
.alerttype3form {
	font-weight: 500;
	background-color: white;
	color: black;
	padding: 3px;
	border: 1px solid red;
	margin: 2px;
	color: red;
}
.alerttype4form {
	border: 1px solid #FF0000;
	background-color: #FFAAAA;
	color: black;
	padding: 1px;
	margin-top: 2px;
}

.rederror {
	border: 1px solid red;
	background-color: #fee;
	color: black;
	margin: 0.25em;
	padding: 0.25em;
}

.warning {
	margin: 1em auto;
	border: 2px solid white;
	border-radius: 9px; 
	background-color: #222;
	color: red;
	padding: 1em; 
	text-align: center;
	max-width: 40em;
	font-weight: 500; 
}

.info {
	margin: 1em auto;
	border: 2px solid white;
	border-radius: 9px; 
	background-color: #222;
	color: #057caa;
	padding: 1em; 
	text-align: center;
	max-width: 40em;
	font-weight: 500; 
}

.announcement {
	margin: 1em 1em;
	border: 2px solid white;
	border-radius: 9px; 
	background-color: #057caa;
	color: #ddd;
	padding: 1em; 
	text-align: center;
	font-weight: 500; 
}

.announcementcontent {
	margin: 0.25em;
	padding: 0.25em;
	text-align: left;
}

.highlightcolor {
	color: #057caa;
}

select:required, 
input:required {
	border-width: 3px;
}

table.grid {
	margin: 1em auto;
	width: auto;
	border: 1px solid #333;
	border-collapse: collapse;
	text-align: left;
	line-height: 1.3;
}

table.grid thead tr th {
	padding: 0.75em 1em;
}

table.grid tr td {
	padding: 0.5em 1em;
	border: 1px solid #333;
	margin: 0;
}

.tabpagediv {
	font-weight: 100;
	background-color: black;
	color: silver;
	font-size: 14pt;
	display: inline-block;
	cursor: pointer;
	padding: 0.5em;
	margin: 0.5em;
	border: 1px solid silver;
	border-radius: 6px;
}

.formlabelcell {
	text-align: right;
	min-width: 12em;
}

.tabpagedivselected {
	font-weight: 500;
	background-color: silver;
	color: black;
	font-size: 14pt;
	display: inline-block;
	cursor: pointer;
	padding: 0.5em;
	margin: 0.5em;
	cursor: pointer;
	border: 1px solid silver;
	border-radius: 6px;
}

.tablediv { overflow-x: auto; }

.mrg25 {	margin: 0.25em;}
.mrg30 {	margin: 0.30em;}
.mrg50 {	margin: 0.50em;}
.mrg75 {	margin: 0.75em;}
.mrg100 { margin: 1em; }
.mrg125 { margin: 1.25em; }
.mrg150 { margin: 1.5em; }
.mrg175 { margin: 1.75em; }
.mrg200 { margin: 2em; }

.bold {
	font-weight: bold;
}

.boldnormal {
	font-weight: 400;
}

.semibold {
	font-weight: 500;
}

.italic {
	font-style: italic;
}

.text150 { font-size: 150%; }
.text140 { font-size: 140%; }
.text130 { font-size: 130%; }
.text125 { font-size: 125%; }
.text120 { font-size: 120%; }
.text110 { font-size: 110%; }
.text105 { font-size: 105%; }
.text100 { font-size: 100%; }
.text95 { font-size: 95%; }
.text90 { font-size: 90%; }
.text85 { font-size: 85%; }
.text80 { font-size: 80%; }
.text75 { font-size: 75%; }
.text70 { font-size: 70%; }

.padding20 { padding: 0.20em; }
.padding25 { padding: 0.25em; }
.padding30 { padding: 0.30em; }
.padding50 { padding: 0.50em; }
.padding75 { padding: 0.75em; }
.padding100 { padding: 1.0em; }
.padding125 { padding: 1.25em; }
.padding150 { padding: 1.5em; }
.padding175 { padding: 1.75em; }
.padding200 { padding: 2.0em; }

.black { color: black; }

.white { color: white; }

.silver { color: silver; }

.gray { color: gray; }

.whitebg { background-color: white; }

.blackbg { background-color: black; }

.silverbg { background-color: silver; }

.graybg { background-color: gray; }

.lightrdbg { background-color: #fee; }

.lightyelbg { background-color: #ffe; }

.lightgrbg { background-color: #efe; }

.lightblbg { background-color: #eef; }

.shadedbg { background-color: rgba(192,192,192,0.3); }

.noborder { border: none; }

.notbborder { border-top: none;
	border-bottom: none; }

.silverborder { border: 1px solid silver; }

.roundborder{ border-radius: 6px; }

.lrauto {
	margin-left: auto;
	margin-right: auto;
}

.boxshadow {
	box-shadow: 8px 8px 8px #bfbfbf;
}

.todaycell {
	color: red; 
	font-size: 125%; 
	border-width: 3px; 
}

.noteopt {
	position: relative; 
	top: 50%; 
	transform: translateY(-34%); 
}

.noteright {
	float: right; 
	width: 1em; 
	height: 3em; 
	text-align: right;
}

.checkrow {
	padding: 0.2em;
	color: black;
	font-size: 90%;
}

.checkcell {
	text-align: center; 
	vertical-align: middle; 
	padding: 0.125em; 
	width: 5em; 
	white-space: nowrap;
}

#recipemailaddr { 
	display: none; 
}

#comments {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

#commentpanel {
	position: absolute; 
	left: 0em;
	top: 0em; 
	right: 0em; 
	bottom: 0em; 
	display: none;
	border: 1px solid rgba(0,0,0,0.25); 
	background-color: rgba(0,0,0,0.70); 
	border-radius: 0.75em; 
	overflow: hidden;
}

#priorcomments {
	flex: 1 1;
	overflow-y: scroll;
	margin: 0.5em;
}

#newcomment {
	flex: 0 0;
	height: 4em;
	padding: 0.5em 0.5em 1em 0.5em;;
}

#newcommenttext {
	width: 100%;
	height: 100%;
	background-color: black;
	color: rgba(192, 192, 192, 1);
	resize: none;
}

.commentaction {
	flex: 0 0;
	height: 2em;
	display: none;
	padding: 0.5em;
	margin: 0;
}

.toplevelcomment {
	background-color: rgba(192,192,192,0.10);
	padding: 0.3em;
	margin: 0.5em;
}

.highlighted {
	background-color: rgb(0,0,64);
}

.selectedcomment {
	background-color: rgb(160,80,0);
}

.comment {
	/* background-color: rgba(192,192,192,0.10);*/
	/*background-color: rgba(32, 32, 32, 0.5); */
	border-left: 1px solid rgba(255,255,255,0.15);
	padding: 0.3em 0 0.25em 0.3em;
	text-align: left;
	margin: 0.2em 0 0.2em 0.5em;
}

.commenttextframe {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.commentauthor {
	opacity: 50%;
	font-size: 80%;
	font-style: italic;
}

.commenttext {
	/* background-color: rgba(32,32,32,0.5); */
	/*border: 1px solid rgba(255,255,255,0.05);*/
	margin: 0.5em;
	padding: 0.5em;
	flex: 1 1;
}

.commentbuttons {
	width: 2em;
	text-align: right;
	vertical-align: middle;
	font-size: 90%;
}

.commentbutton {
	display: inline-block;
	padding: 0.4em;
	margin: 0.15em;
	text-align: center;
	width: 1.25em;
	opacity: 25%;
}

.commentbutton:hover {
	opacity: 75%;
}

#navbox {
	position: absolute; 
	right: 1em; 
	bottom: 7em; 
	width: 6em;
	height: 6em; 
	border: 2px solid silver; 
	border-radius: 2.5em; 
	background-color: gray; 
	padding: 0em; 
	color: white; 
	opacity: 0.3; 
	text-shadow: 2px 2px 2px #222; 
	box-shadow: 2px 2px 2px #222; 	
}

#votelist {
	position: absolute; 
	left: 1em; 
	bottom: 9.5em; 
	width: 10em; 
	height: 30%; 
	border: 2px solid silver; 
	border-radius: 0.4em; 
	background-color: black; 
	padding: 0.75em; 
	color: silver; 
	text-shadow: 2px 2px 2px #222; 
	box-shadow: 2px 2px 2px #222; 
	display: none; 
	line-height: 1.4; 
	overflow-y: scroll; 
	overflow-x: hidden;	
}

.votesection {
	position: absolute; 
	font-size: 100%;
	left: 1em; 
	bottom: 7em; 
	border: 2px solid silver; 
	border-radius: 0.65em; 
	background-color: gray; 
	padding: 0.25em; 
	color: white; 
	opacity: 0.4; 
	text-shadow: none; 
	box-shadow: 2px 2px 2px #222; 	
}

.votebox {
	display: block; 
	padding: 0.25em 0.25em;
	text-shadow: none;
}

#imagepane {
	position: absolute; 
	left: 0.5em; 
	right: 0.5em; 
	top: 4em; 
	bottom: 5.5em; 
	padding: 2em; 
	white-space: nowrap; 	
}

#panelimg {
	max-width: 100%; 
	max-height: 100%; 
	vertical-align: middle; 
	display: inline-block; 
	border-radius: 0.5em; 
	box-shadow: 0.5em 0.5em 1em #222222; 	
}

#textpane {
	position: absolute; 
	left: 0; 
	right: 0; 
	bottom: 0; 
	height: 5em; 
	padding: 0.4em; 
}

#textpaneframe {
	display: table; 
	width: 100%; 
	height: 100%; 
	box-sizing: border-box; 
	border: 2px solid #1c2128; 
	border-radius: 8px; 
	vertical-align: middle; 
	padding: 0.25em; 
	overflow-y: auto; 
	box-shadow: 0.5em 0.5em 1em #222222; 	
}

#textpaneframe2 {
	display: table-cell; 
	vertical-align: middle; 
	padding: 0.5em;	
}

#storytext {
	vertical-align: middle; 
	font-size: 100%; 
	line-height: 1.3; 
	text-shadow: 0px 0px 2px #000; 
	height: 100%; 
	overflow-y: scroll;
}

@media screen and (max-height: 400px) 
{
	#imagepane {
		bottom: 4em;
	}
	#textpane {
		height: 3.5em;
	}

	.votesection {
		bottom: 5em;
	}

	#navbox {
		bottom: 5em;
	}

	#storytext {
		line-height: 1.15;
		font-size: 85%;
	}
}

@media screen and (min-width: 400px)
{
	.votebox {
		display: inline-block;
	}
}