playstyle.css

html,body
{
	margin:0;
	padding:0;
	background-color: #3B4545;
	height:100%;
	width:100%;
	overflow:hidden;
}
header
{
	height:2em;
	width:100%;
	background:#265B5F;
	border-bottom:1px solid black;
}
#main
{
	height:90%;
	width:69.5%;
	/*background-image: url('Snowback1.png');
	background-size: 100% 100%;*/
	padding:0;
	margin:0;
	float:left;
	list-style:none;
	overflow-y:auto;
	overflow-x:hidden;
	color:#FFFFFF;
	font-family: 'SuperRareFont', Whitney, sans-serif;
	line-height: 1.25em;
	background-color:#36393f;
}
.moonimg
{
	background:url('moon.png');
	height:15px;
	width:15px;
	float:left;
	background-size:cover;
}
header .moonimg
{
	display:none;
}
.investresultcontainer
{
	float:left;
}
.investresult, .sheriffresult
{
	position:relative;
	width:20em;
	font-size:0.9em;
	padding:0.5em;
	padding-left:1em;
	border-radius:1em;
	padding-right:50px;
	font-family:'Open Sans', Helvetica, sans-serif;
	background:#CFD7D7;
	margin:0.5em;
	text-align:center;
}
.investresult:after
{
	position:absolute;
	display:block;
	content:'';
	background:url(invest.png);
	height:50px;
	width:50px;
	right:-10px;
	top:0px;
}
.sheriffresult:after
{
	position: absolute;
	display: block;
	content:'';
	background:url(sheriff.png);
	height: 50px;
	width: 50px;
	right: -10px;
	top: -10px;
}
#main>li
{
	width:100%;
	padding-left:5px;
}
.playernum
{
	display:inline-block;
	width:1.25em;
	text-align:center;
	background:rgba(127, 255, 0, 0.66);
	color:white;
	border:1px solid #1f1f1f;
	border-radius:1em;
}
.playernum.modnum
{
	background:rgba(255, 128, 199, 0.87);
	color:white;
}
.mafia .playernum
{
	background:#dd0000;
	color:white;
}
.coven .playernum
{
	background:#bf5fff;
	color:white;
}
.vamp .playernum
{
	background:#7b8968;
	color:white;
}
.klepto .playernum
{
	background:#ff00ff;
	color:white;
}
.rolecardcontainer
{
	overflow:auto;
}
#automodsettings
{
	position:absolute;
	top:5%;
	right:21%;
	left:50%;
	bottom:5%;
	margin:0;
	padding:0;
	list-style:none;
}
#rolelist
{
	position:absolute;
	top:5%;
	right:21%;
	left:50%;
	bottom:5%;
	margin:0;
	padding:0;
	list-style:none;
	color:white;
	overflow:auto;
}
#automodsettings
{
	border: 1px solid black;
	z-index:10;
	background:white;
}
#automodsettings li
{
	height:25%;
	width:100%;
	position:relative;
	background:white;
	
}
#automodsettings li div
{
	position:absolute;
	top: 6%;
	left:6%;
	right:6%;
	bottom:6%;
	padding:1em;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor:default;
}
#automodsettings li div:hover
{
	border:1px solid #D0CCCC;
}
#automodsettings li div:active
{
	background:#929292;
}
#rolelist li
{
	height:6%;
	width:100%;
	padding:0;
	margin:0;
	background:white;
	border:1px solid black;
}
#rolelist li .top, #rolelist li .bottom
{
	width:100%;
	height:50%;
	display:flex;
}
#rolelist li .top
{
	text-align:center;
	background:grey;
}
#rolelist li .bottom
{
	display:flex
}
#rolelist li .bottom .myrole,#rolelist li .bottom .person
{
	width:50%;
	text-align:center;
	background:black;
}
#rolelist li .bottom .myrole
{
	border-left:1px solid grey;
}
.automodcontainer
{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	min-height:100px;
	border:2px solid #265B5F;
	font-family:'Open Sans', Arial, sans-serif;
}
.automodcontainer header
{
	height:30px;
	width:100%;
	background: #3b5b5f;
	position:relative;
	font-family:'Denk One', Arial, sans-serif;
	color:white;
}
.automodcontainer header p
{
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	margin:0;
	padding:0;
	position:absolute;
	font-weight:bold;
	font-size: 18px;
}
.automodcontainer h2
{
	text-align:center;
	font-family:'Open Sans', Arial, sans-serif;
	font-size:20px;
}
.automodcontainer table
{
	border: 1px solid #265B5F;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
.unauto
{
	background:pink;
}
.transport
{
	background: #49D9F8;
}
.witched
{
	border:3px solid #B133E0;
}
.actiontable, .messagetable
{
	width: 80%;
}
.automodcontainer table tr:first-child
{
	border-bottom:1px solid #265B5F;
}
.automodcontainer table tr td
{
	padding-left:5px;
	padding-right:5px;
	border-bottom:1px solid #265B5F;
}
.automodcontainer table tr:last-child td
{
	border-bottom:none;
}
.automodcontainer table tr td:first-child
{
	border-right: 1px solid #265B5F;
}
.automodcontainer table tr td:last-child
{
	border-right:none;
	overflow:auto;
	border-left: 1px solid #265B5F;
}
.automodbutton
{
	height:20px;
	width:60px;
	background:blue;
	text-align:center;
	line-height:20px;
	border: 1px solid #00043D;
	background: #4B72C4;
	cursor: pointer;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size:15px;
	color:#0D1771;
}
.automodbutton:hover
{
	 background: #8DA9E3;
}
.automodbutton:active
{
	background:#16387E;
	color: #8DA9E3
}
.actiontable tr td
{
	width:30%;
	height:22px;
	line-height:22px;
	color:#FFFFFF;
}
.automodcontainer h2
{
	color:white;
}
.messagetable tr td:first-child
{
	width: 15%;
}
.messagetable tr td
{
	width:70%;
	/*color:white;*/
}
.messagetable tr
{
	line-height:22px;
	overflow:hidden;
}
.tooltip
{
	position: absolute;
	color:black;
	background: #FFC0CB;
	border: 1px solid black;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	border-radius: 6px;
	overflow:auto;
	transform: translate(0, -100%);
}
.tooltip p
{
	margin:0;
	padding:0;
}
header ul
{
	list-style:none;
	margin:0;
	padding:0;
	height:100%;
	width:72%;
	float:left;
}
header ul li
{
	cursor:pointer;
	float:left;
	margin:0;
	margin-left:-1px;
	padding:0;
	text-align: center;
	display: block;
	color: white;
	height:100%;
	border-left:1px solid black;
	position:relative;
	width:10%;
	font-family: 'Denk One', Arial, sans-serif;
	font-size:0.9em;
}
header ul li:last-child
{
	border-right:1px solid black;
	margin-right:-1px;
}
.current
{
	color:floralwhite;
	background:#003030;
}
header ul li span
{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:100%;
}
.highlight
{
	background:#265B5F;
	color:white;
}
.modchat
{
	background:#3d0029;
}
.suicide
{
	background:#cccccc;
	color:black;
	font-weight: bold;
}
.heart
{
	background:#bf0039;
	color:black;
	font-weight: bold;
}
.townkill
{
	background:#7fff00;
	color:black;
	font-weight:bold;
}
.mafiakill
{
	background:#dd0000;
	color:white;
	font-weight:bold;
}
.covenkill
{
	background:#bf5fff;
	color:white;
	font-weight:bold;
}
.skkill
{
	background:#336eff;
	color:white;
	font-weight:bold;
}
.wwkill
{
	background:#9f703a;
	color:white;
	font-weight:bold;
}
.arsokill
{
	background:#ee7600;
	color:black;
	font-weight:bold;
}
.juggkill
{
	background:#a12b56;
	color:white;
	font-weight:bold;
}
.survwin
{
	background:#dddd00;
	color:white;
	font-weight:bold;
}
.jestkill
{
	background:#f7b3da;
	color:white;
	font-weight:bold;
}
.vampkill
{
	background:#7b8968;
	color:black;
	font-weight:bold;
}
.piratekill
{
	background:#edc240;
	color:black;
	font-weight:bold;
}
.pbwin
{
	background:#cfff63;
	color:black;
	font-weight:bold;
}
.pestkill
{
	background:#424242;
	color:black;
	text-shadow:0px 0px 5px #cfff63;
	font-weight:bold;
}
.conqkill
{
	background:#274ba3;
	color:white;
	font-weight:bold;
}
.huntsmankill
{
	background:#521421;
	color:white;
	font-weight:bold;
}
.patientkill
{
	background:#808000;
	color:white;
	font-weight:bold;
}
.naiadkill
{
	background:#008080;
	color:white;
	font-weight:bold;
}
.floraekill
{
	background:#228f41;
	color:floralwhite;
	font-weight:bold;
}
.positivekill
{
	background:#FFFF0A;
	color:black;
	font-weight:bold;
}
.negativekill
{
	background:#0A0AFF;
	color:white;
	font-weight:bold;
}
.phasechange
{
	background:#000000;
	height:2.9%;
	font-size:107%;
	color:ghostwhite;
}
.msgsystem
{
	color:tan;
	font-weight:bold;
}
.mayor_reveal
{
	background:transparent;
	color:#ff5349;
}
.gardenia_reveal
{
	background:transparent;
	color:#ffb95a;
}
.guardian_angel
{
	background:#ffffff;
	color:#000000;
}
.phlox_li
{
	background:#df00ff;
	color:#ffffff;
}
.rolecard
{
	background:#1f1f1f;
	background-size:100% 100%;
	height:450px;
	width:300px;
	text-shadow: 0px 4px 6px black;
	color:white;
	position:relative;
	padding:20px;
	border:5px solid #A78A52;
	padding-top:10px;
	float:left;
}
.rolecard h2
{
	text-align:center;
}
.rolecard .aligntext
{
	float:unset;
}
.rolecard .abilities
{
	float:left;
	width:100%;
}
.goal
{
	display:block;
	color:white;
	position:absolute;
	left:auto;
	bottom:15px;
}
#adjustabledivider
{
	position:absolute;
	width:2px;
	height:100%;
	border-left:2px transparent;
	border-right:2px transparent;
	background:black;
	height:90%;
	left:69.5%;
	top:2em;
	cursor:ew-resize;
}
#userlist
{
	list-style:none;
	display:block;
	/*background-image: url('Snowback1.png');
	background-size: 500% 100%;*/
	height:90%;
	padding:0;
	margin:0;
	margin-left:-2px;
	overflow:auto;
	background-color:#2f3136;
}
#userlist>li
{
	height:3em;
	width:100%;
	border-bottom:2px solid black;
}
#userlist>li:first-child
{
	border-bottom:4px solid black;
}
.num
{
	float:left;
	font-weight:bold;
	max-width:15%;
	padding-left:5px;
	color:tan;
}
.name
{
	float:left;
	font-weight:bold;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	padding-left:5px;
	margin-right:-5px;
	color:#FFFFFF;
}
.dev
{
	font-weight:bold;
	color:#00a6a6;
}
#inputarea
{
	clear:both;
	width:100%;
	height:8%;
	border-top:1px solid black;
	background-color:#265B5F;
}
#c
{
	float:left;
	height:40%;
	width:80%;
	background:#1e2124;
	color:antiquewhite;
	font-size:15px;
	text-shadow:0px 1px 10px black;
}
.votinginterface
{
	float:right;
	height:100%;
	width:100px;
	text-align:right;
}
.nightinterface
{
	float:right;
	height:100%;
	width:100px;
}
.votebutton
{
	width:70%;
	height:110%;
	display:inline-block;
	background: linear-gradient(teal, mediumaquamarine);
	border-radius:8px;
	font-family:'Slabo 27px', serif;
	cursor:default;
	color:#383300;
	text-align:center;
	border:1px solid black;
	margin:-1px;
}
.nightbutton
{
	width:70%;
	height:100%;
	float:left;
	background: linear-gradient(teal, mediumaquamarine);
	border-radius:8px;
	font-family: 'Slabo 27px', serif;
	cursor:default;
	color:#383300;
	text-align:center;
	border:1px solid black;
	margin:-1px;
}
.nightbutton.pressed {
	background:linear-gradient(#252729, #103d36);
}
.rolealignment
{
	margin-left:auto;
	height:100%;
}
.rolealignmentedit
{
	height:100%;
	box-sizing:border-box;  
	margin:0;
	padding:0;
	text-align:center;
}
.votebutton:hover
{
	background:cornflowerblue;
}
.nightbutton:hover
{
	background:cornflowerblue;
}
.votecount
{
	width:30%;
	height:110%;
	border:1px solid black;
	margin:-1px;
	border-radius:8px;
	display:inline-block;
	text-align:center;
	background:tan;
}
.modcontrols, .info
{
	display:block;
	width:100%;
	height:50%;
}
.controlbutton, .role
{
	height:100%;
}
a
{
	color:cadetblue;
}
a:hover
{
	color:midnightblue;
}
a:visited
{
	color:cadetblue;
	text-shadow: 1px 1px 10px black;
}
#clock
{
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50%,0);
	border:2px solid black;
	border-top:1px solid black;
	width:3.6em;
	height:1.4em;
	border-bottom-left-radius:200px;
	border-bottom-right-radius:200px;
	font-size:1.5em;
	background:indianred;
	z-index:100;
	cursor: default;
}
.pausebutton, .playbutton
{
	position:absolute;
	top:180%;
	left:50%;
	transform:translate(-50%,0);
	height:1em;
	width:1em;
	border-radius:100%;
	z-index:101;
	background:black;
}
.pausebutton:after
{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	content:'';
	height:70%;
	width:15%;
	border-right: 3px solid darkolivegreen;
	border-left: 3px solid darkolivegreen;
}
.pausebutton:hover:after
{
	border-right: 3px solid mediumseagreen;
	border-left: 3px solid mediumseagreen;
}
.playbutton:after
{
	display:block;
	position:absolute;
	left:60%;
	top:50%;
	transform:translate(-50%,-50%);
	content:'';
	height:0;
	width:0;
	border-left:8px solid darkred;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
}
.playbutton:hover:after
{
	border-left:8px solid red;
}
#clock span
{
	position:absolute;
	top:40%;
	left:50%;
	transform:translate(-50%,-50%);
}
.role
{
	box-sizing:border-box;
	float:left;
	width:40%;
}
#modnumbering
{
	float:left;
	height:100%;
	width:13%;
	position:relative;
}	
#modnumbering input
{
	position:absolute;
	top:50%;
	left:40%;
	transform:translate(0,-50%);
	text-align:center;
	width:2.4em;
	background: #3B4545;
	color: white;
}
#modnumbering span
{
	position:absolute;
	top:50%;
	right:65%;
	transform:translate(0,-50%);
	font-size:0.82em;
	font-family: 'Open Sans', Arial, sans-serif;
	color:white;
}
.notesbutton {
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float: right;
	background:#3B4545;
	color:white;
	font-size:10px;
	padding-top: 2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.notesbutton:hover {
	background:#97b0b0;
	color:black;
}
.willbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background: #3B4545;
	color: white;
	font-size:10px;
	padding-top:2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.willbutton:hover
{
	background:#97b0b0;
	color:black;
}
.musicbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background: #3B4545;
	color: white;
	font-size:10px;
	padding-top:2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.musicbutton:hover
{
	background:#97b0b0;
	color:black;
}
#rolelistbutton
{
	background-image:url('list.png');
	background-size:100% 100%;
	height:35px;
	width:32px;
	float:left;
}
#rolelistbutton:hover, #automodsettingsbutton:hover
{
	background-color:#D8D8D8;
}
#rolelistbutton:active, #automodsettingsbutton:active
{
	background-color:#828282;
}
#automodsettingsbutton
{
	background-image:url('settings.png');
	background-size:100% 100%;
	height:35px;
	width:32px;
	float:left;
}
.editbutton
{
	height:17px;
	width:17px;
	margin-top:auto;
	margin-bottom:auto;
	background:url('edit.png');
	background-size:100% 100%;
	margin-right:auto;
	cursor:pointer;
}
.will
{
	margin-left:auto;
	margin-right:auto;
	width:50%;
	height:450px;
	border:3px solid black;
	background:#1f1f1f;
	color:white;
	padding-left:10px;
	padding-top:10px;
	overflow:hidden;
}
#will, #modwill
{
	background:url(will.png);
	background-size:100% 100%;
	display:none;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:68vh;
	height:87vh;
}
#will textarea, #modwill textarea
{
	background-color:transparent;
	border-style:none;
	border-color:Transparent;
	font-size:17.5px;
	font-family:Helvetica;
	outline:none;
	overflow:auto;
	height:70%;
	width:85%;
	margin:7%;
	margin-top:24%;
	resize:none;
}
#closewill
{
	display:block;
	position:absolute;
	right:6%;
	top:4.5%;
	left:86%;
	bottom:89.5%;
	background:url(button.png);
	background-size:cover;
	border:black 1px solid;
}
#postwill
{
	display:block;
	position:absolute;
	right:6%;
	top:88%;
	left:86%;
	bottom:6%;
	background:url(paste.png);
	background-size:cover;
	border:solid 1px black;
}
#will div:hover, #modwill div:hover
{
	box-shadow:0 0 2px yellow;
}
.notes 
{
	margin-left:auto;
	margin-right:auto;
	width:40%;
	height:400px;
	border:2px solid black;
	background:#D8DE73;
	padding-left:10px;
	padding-top:10px;
	overflow:hidden;
}
#notes, #modnotes 
{
	background:url("notes.png");
	background-size:100% 100%;
	display:none;
	position:absolute;
	left:42%;
	top:10%;
	right:25%;
	bottom:10%;
}
#notes textarea, #modnotes textarea 
{
	background-color:transparent;
	border-style:none;
	border-color:transparent;
	font-size:18px;
	font-family:Helvetica;
	outline:none;
	overflow:hidden;
	height:80%;
	width:80%;
	margin:8%;
	margin-top:15%;
	resize:none;
}
#closenotes
{
	display:block;
	position:absolute;
	right:6%;
	top:4.5%;
	height:50px;
	width:48px;
	background:url("notesclose.png");
	background-size:100%,100%;
}
#postnotes
{
	display:block;
	position:absolute;
	right:6%;
	top:88%;
	left:86%;
	bottom:6%;
	background:url(paste.png);
	background-size:cover;
	border:solid 1px black;
}
#notes div:hover, #modnotes div:hover 
{
	-webkit-filter:drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
	filter:drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.deadplayer
{
	background:#400000;
	font-weight:bold;
	color: floralwhite;
	text-shadow:3px 3px 3px black;
	opacity:0.77;
	
}
.deadplayer > div
{
	width:100%;
	height:50%;
}
.spectator
{
	background:slategray;
}
.spectator .name
{
	font-weight:bold;
	color:tan;
}
.spectator .name.dev
{
	font-weight:bold;
	color:silver;
}
.blocker
{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(160,160,160,0.9);
	z-index:1000;
}
.downarrow
{
	width:0; 
	height:0; 
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-top:6px solid black;
	top:80%;
}
.alert
{
	text-align:center;
	position:absolute;
	top:20%;
	left:40%;
	right:40%;
	bottom:20%;
	font-family:'Open Sans', Arial, sans-serif;
}
.alert img
{
	height:250px;
	width:250px;
}
.controlbutton
{
	width:10%;
	float:left;
	font-family:'Open Sans', Arial, sans-serif;
	box-shadow:rgba(0,0,0,1) 0 1px 0;
	text-shadow:rgba(0,0,0,.4) 0 1px 0;
	text-decoration: none;
	background: white;
	position:relative;
}
.controlbutton span
{
	text-align:center;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/*----Buttons----*/
.attributebutton
{
	background: linear-gradient(#497cef, #4a6efb);
	width: 20%;
	float:right;
	text-align:center;
	cursor:default;
	color: floralwhite;
}
.attributebutton:hover
{
	background:#2a4edb;
	color:floralwhite;
}
#attributelist
{
	position:absolute;
	right:0;
	background:#364040;
	color:white;
	border:1px solid white;
	list-style:none;
	padding:0;
	z-index: 10;
	margin:0;
	padding:0;
}
.attributelistheading
{
	width:100%;
	background:#1f1f1f;
}
.attributelistitem:hover
{
	background:#8a8a8a;
}
.mafiabutton {
   background:#364040;
   background-size:100% 100%
}
.mafiabutton:hover {
   background: #b51a1a;
   background-size:100% 100%;
}
.mafiabuttondown .mafiabutton {
	background: red;
	background-size:100% 100%;
}
.covenbutton {
	background: #364040;
	background-size: 100% 100%;
}
.covenbutton:hover {
	background: #651FFF;
	background-size: 100% 100%;
}
.covenbuttondown .covenbutton {
	background: mediumpurple;
	background-size: 100% 100%;
}
.vampbutton {
	background: #364040;
	background-size: 100% 100%;
}
.vampbutton:hover {
	background: #505050;
	background-size: 100% 100%;
}
.vampbuttondown .vampbutton {
	background: #6c7d47;
	background-size: 100% 100%;
}
.linkedbutton {
	background: #364040;
	background-size: 100% 100%;
}
.linkedbutton:hover {
	background: #505050;
	background-size: 100% 100%;
}
.linkedbuttondown .linkedbutton {
	background: lawngreen;
	background-size: 100% 100%;
}
.jailorbutton {
   background: #364040;
   background-size:100% 100%;
 }
.jailorbutton:hover {
   background: #505050;
   background-size:100% 100%;
 }
.jailorbuttondown .jailorbutton {
   background: lightgray;
   background-size:100% 100%;
   color: black;
}
.blackmailerbutton {
   background: #364040;
   background-size:100% 100%;
  }
.blackmailerbutton:hover {
   background:#A48111;
   background-size:100% 100%;
}
.blackmailerbuttondown .blackmailerbutton {
   background: goldenrod;
   background-size:100% 100%;
}
.blackmailbutton {
   background: #364040;
   background-size:100% 100%;
  }
.blackmailbutton:hover {
   background:#A48111;
   background-size:100% 100%;
}
.blackmailbuttondown .blackmailbutton {
   background: goldenrod;
   background-size:100% 100%;
}
.mayorbutton {
   background: #364040;
   background-size:100% 100%;
 }
.mayorbutton:hover {
   background: #1B693A;
   background-size:100% 100%;
}
.mayorbuttondown .mayorbutton {
   background: lime;
   background-size:100% 100%;
   color:black;
}
.mediumbutton {
   background: #364040;
   background-size:100% 100%;
}
.mediumbutton:hover {
   background:#274C66;
   background-size:100% 100%;
}
.mediumbuttondown .mediumbutton {
   background:cyan;
   background-size:100% 100%;
   color:black;
}
.kleptobuttondown .kleptobutton {
   background:#FF00FF;
}
.wisteriabutton {
   background:#364040;
   background-size:100% 100%;
 }
.wisteriabutton:hover {
   background:#505050;
   background-size:100% 100%;
 }
.wisteriabuttondown .wisteriabutton {
   background:#e9aff0;
   background-size:100% 100%;
   color: black;
}
.gardeniabutton
{
	background:#364040;
	background-size:100% 100%;
 }
.gardeniabutton:hover
{
	background:#1B693A;
	background-size:100% 100%;
}
.gardeniabuttondown .gardeniabutton
{
	background:#9D373C;
	background-size:100% 100%;
	color:black;
}
.positivebutton
{
	background:#364040;
	background-size:100% 100%;
}
.positivebutton:hover
{
	background:#364040;
	background-size:100% 100%;
}
.positivebuttondown .positivebutton
{
	background:#FFFF0A;
	color:black;
	background-size:100% 100%;
}
.negativebutton
{
	background:#364040;
	background-size:100% 100%;
}
.negativebutton:hover
{
	background:#364040;
	background-size:100% 100%;
}
.negativebuttondown .negativebutton
{
	background:#0A0AFF;
	color:white;
	background-size:100% 100%;
}
.killbutton
{
	background: linear-gradient(#c40e0e, #d66565);
	width: 20%;
	float:right;
	text-align:center;
	cursor:default;
}
.killbutton:hover
{
	background: #b51a1a;
}
.revivebutton
{
	background: linear-gradient(#55BF0A, #0E7800);
	width: 20%;
	float:right;
	text-align:center;
	cursor:default;
}
.revivebutton:hover
{
	background: #55BF0A;
}
.jailbutton
{
	background: linear-gradient(navy, darkslategray);
	width: 20%;
	float:right;
	text-align:center;
	cursor:default;
	color:#CCCCCC;
}
.jailbutton:hover
{
	background: #021E3E;
}
.releasebutton
{
	background: linear-gradient(#CACACA, #B5B5B5);
	width: 20%;
	float:right;
	text-align:center;
	cursor:default;
	color:navy;
}
.releasebutton:hover
{
	background:#CACACA;
}
.entanglebutton
{
	background: linear-gradient(#93E9BE, #20b2aa);
	width: 20%;
	float:right;
	float:left;
	text-align:center;
	cursor:default;
	color:#CCCCCC;
	color:black;
}
.entanglebutton:hover
{
	background: #0B504F;
}
.disentanglebutton
{
	background: linear-gradient(#3EB489, #00FFCD);
	width: 20%;
	float:right;
	float:left;
	text-align:center;
	cursor:default;
	color:navy;
	color:midnightblue;
}
.disentanglebutton:hover
{
	background:#77DD77;
}
.more
{
	width: 10%;
	float:right;
	text-align:center;
	cursor:default;
	color:black;
}
.more:hover
{
	background:#B8B8B8;
}
#morelist
{
	position:absolute;
	right:0;
	background:#364040;
	color: white;
	border:1px solid white;
	list-style:none;
	padding:0;
	z-index: 10;
	margin:0;
	padding:0;
}
.morelistheading
{
	width:100%;
	background:#1f1f1f;
}
.morelistitem:hover
{
	background:#8a8a8a;
}
.modwillbutton
{
	width: 10%;
	float:right;
	text-align:center;
	cursor:default;
	color:white;
	background:#996829;	
	font-size:10px;
}
.modwillbutton:hover
{
	background:#E1D45B;
	color:black;
}
.shorten
{
	max-width: 80px;
}
.setroles
{
	background: url('accept.png'), linear-gradient(#364040, #3B4545);
	background-size: 100% 100%;
	height:100%;
	flex-grow:1;
	cursor:pointer;
}
.roll
{
	background: url('roll.png'), linear-gradient(#364040, #3B4545);
	background-size: 100% 100%;
	height:100%;
	flex-grow:1;
	cursor:pointer;
}
.roll:hover
{
	background: url('roll.png'), linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	background-size: 100% 100%;
}
.setroles:hover
{
	-moz-filter: brightness(1.5);
	-webkit-filter: brightness(1.5);
	-o-filter: brightness(1.5);
	-ms-filter: brightness(1.5);
	filter: brightness(1.5);
}
.showroles, .showlist
{
	height: 80%;
	flex-grow: 2;
	text-align: center;
	background: linear-gradient(#364040, #3B4545);
	box-shadow: inset 0px 1px 0px 0px black;
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
	cursor: pointer;
	font-weight: bold;
	color: #F5F5F5;
	font-family: Arial;
	font-size: 15px;
	border: 1px solid black;
	padding-top: 6px;
}
.showroles:hover, .showlist:hover
{
	background:black;
}
.showroles:active, .showlist:active
{
	background:#e9e9e9;
}
.rolelistcontrols
{
	display:flex;
}
.extracontrols
{
	width:100%;
	height:50px;
	border: 1px solid black;
	border-top: none;
	background: linear-gradient(#364040, #3B4545);
}
.extracontrols .options
{
	height:100%;
	float:left;
	width:50%;
	padding: 0px;
	color: white;
	background: linear-gradient(#364040, #3B4545);
}
.extracontrols .options .checkbox
{
	float:left;
}
.extracontrols .options p
{
	float:left;
	margin:0;
}
#autoRolesButton
{
	float: left;
	height: 1.5em;
	width: 6em;
	background: black;
	margin-top: 5px;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	color: white;
	font-family: Arial;
	font-size: 16px;
	position:relative;
}
#autoRolesButton:hover
{
	background:#f9f9f9;
}
#autoRolesButton:active
{
	background:#e9e9e9;
}
#autoRolesButton p
{
	position:absolute;
	margin:0;
	padding:0;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/*--Verdicts--*/
.verdictinterface
{
	position: fixed;
	text-align: right;
	width: inherit;
	top: 2em;
	height: 0;
}
.verdictbutton
{
	height:5vw;
	width:12.5vw;
	display:inline-block;
	text-align:center;
	font-size:20px;
	cursor:pointer;
}
.guiltybutton
{
	background: url('Unity_Guilty.png');
	background-size: 100% 100%;
	margin-left: 1px;
	margin-right:-1px;
}
.guiltybutton:hover
{
	opacity: 0.8;
}
.innobutton
{
	background:url('Unity_Innocent.png');
	background-size: 100% 100%;
}
.innobutton:hover
{
	opacity: 0.8;
}
/*----Announcement tags----*/
maf
{
	color:#dd0000;
}
cov 
{
	color:#bf5fff;
}
arso
{
	color:#ee7600;
}
ww
{
	color:#9f703a;
}
jester
{
	color:#f7b3da;
}
town
{
	color:#7fff00;
}
sk
{
	color:#336eff;
}
neut
{
	color:#cccccc;
}
/*----Chat messages----*/
.mafia
{
	color:#ff4747;
	text-shadow: 0px 0px 10px black;
}
.coven 
{
	color:#bf5fff;
	text-shadow: 0px 0px 10px black;
}
.vamp
{
	color:#c1d9a0;
	text-shadow: 0px 0px 10px black;
}
.positive
{
	color:#FFFF0A;
	text-shadow: 0px 0px 10px black;
}
.negative
{
	color:#4d6dff;
	text-shadow: 0px 0px 10px black;
}
.linked
{
	color:lawngreen;
}
.dead
{
	color:#c7c7c7;
	text-shadow: 0px 0px 10px #4b7c80;
}
.medium
{
	color:#00A5FF;
}
.klepto
{
	color:#ff00ff;
}
.spectate
{
	color:mediumaquamarine;
}
.jailed
{
	color:antiquewhite;
	text-shadow: 0px 0px 10px #c78800;
}
.jailor
{
	color:#ffcd00;
	text-shadow: 0px 0px 10px black;
}
.jailing
{
	background:#BDBDBD;
}
.hauled
{
	background:#db0d0d;
	color:yellow;
}
.entangled
{
	color:antiquewhite;
	text-shadow:0px 0px 10px forestgreen;
}
.wisteria
{
	color:#eba8ff;
	text-shadow:0px 0px 10px #6e225c;
}
.entangling
{
	background:#ba99ba;
}
.captured
{
	background:#db0d0d;
	color:springgreen;
}
.moon
{
	background:#34adc6;
	color:white;
}
.mod
{
	color:#ff80c7;
}
.targeting
{
	color:limegreen;
}
.dying
{
	background:#db0d0d;
	color:white;
}
.reviving
{
	background:#00c900;
	color:white;
}
.fullmoon
{
	background:#8aacb8;
	color:white;
}
.information
{
	background:#50514e;
	color:lime;
}
.vote
{
	color:lime;
}
.whisper
{
	color:#8080ff;
	text-shadow: 2px 2px 10px black;
}
.whispermessage
{
	color:#e600e6;
	text-shadow: 2px 2px 4px black;
}
.guilty
{
	color:#FF0000;
}
.inno
{
	color:#66FF66;
}
.abstain
{
	color:#03A9F4;
}
/*Rolelist*/
.displaylist
{	
	width:150px;
	border: 2px solid black;
	list-style:none;
	background:#252729;
	padding:0;
	margin:0;
}
.displaylistitem
{
	padding:0;
	margin:0;
	width:100%;
	height:20px;
	border-bottom:1px solid #252729;
	text-align:center;
}
.displaylistitem:last-child
{
	border:none;
}
.allroles
{
	display:flex;
}
.allroleslist
{	
	width:300px;
	border: 2px solid black;
	list-style:none;
	background: #252729;
	padding:0;
	margin:0;
}
.innerlistitem
{
	display:inline-block;
	width:50%;
	height:100%;
	border-right: 1px solid #252729;
	float:left;
}
.editableMessage
{
	border-radius: 8px;
	padding: 5px;
	padding-top:2px;
	padding-bottom:2px;
}
.editableMessage:hover
{
	background: #CBCBFF;
}
.editingMessage
{
	border-radius: 8px;
	width: 100%;
	height:100%;
	resize:none;
}
.grow
{
	height: initial;
	overflow: auto;
}
.shrink
{
	height:0px;
	overflow:hidden;
	display:none;
	visibility:hidden;
}
.helppanel
{
	width:97%;
	margin-left:5px;
}
.commandheader
{
	margin-top:1em;
}
.aChanges
{
	margin-left:10px;
	margin-bottom:5px;
}
.backline
{
	margin-left:0.5em;
}
.helpPanel>li:first-child
{
	float:left;
}
.helpPanel
{
	overflow:hiddenp;
}
.icon
{
	height:1em;
}

.emoji {
	margin-left: 5px;
}

.emoji:hover {
	cursor:pointer;
}
#themeselector {
    float: right;
}
@media only screen and (max-device-width: 900px)
{
  #main {
    width: 50%;
  }
}

.lighttheme #main
{
	background:#E3E3E3;
	color:#000000;
}
.lighttheme #c
{
	float:left;
	height:40%;
	width:80%;
	background:white;
	color:black;
	text-shadow:0px 0px 0px black;
	font-size:15px;
}
.lighttheme .notesbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background:white;
	color:white;
	font-size:10px;
	padding-top: 2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.lighttheme .notesbutton:hover
{
	background:#bfbfbf;
	color:black;
}
.lighttheme .willbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background:white;
	color:white;
	font-size:10px;
	padding-top:2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.lighttheme .willbutton:hover
{
	background:#bfbfbf;
	color:black;
}
.lighttheme .musicbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background:white;
	color:white;
	font-size:10px;
	padding-top:2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.lighttheme .musicbutton:hover
{
	background:#bfbfbf;
	color:black;
}
.lighttheme #modnumbering input
{
	position:absolute;
	top:50%;
	left:40%;
	transform:translate(0,-50%);
	text-align:center;
	width:2.4em;
	background:white;
	color:black;
}
.lighttheme .information
{
	background:#8f918c;
	color:lime;
}
.lighttheme #userlist
{
	list-style:none;
	display:block;
	/*background-image: url('Snowback1.png');
	background-size: 500% 100%;*/
	height:90%;
	padding:0;
	margin:0;
	margin-left:-2px;
	overflow:auto;
	background-color:#d1d5d9;
}
.lighttheme .rolecard
{
	background:#686868;
	background-size:100% 100%;
	height:450px;
	width:300px;
	text-shadow:0px 3px 22px black
	color:black;
	position:relative;
	padding:20px;
	border:5px solid #403113;
	padding-top:10px;
	float:left;
}
.lighttheme .goal
{
	display:block;
	color:white;
	position:absolute;
	left:auto;
	bottom:15px;
}
.lighttheme .actiontable tr td
{
	width:30%;
	height:22px;
	line-height:22px;
	color:black;
}
.lighttheme .name
{
	color:black;
}
.lighttheme .num
{
	color:#A78A52;
}
.lighttheme .playernum
{
	display:inline-block;
	width:1.25em;
	text-align:center;
	background:#7FFF00;
	color:black;
	border:1px solid #1f1f1f;
	border-radius:1em;
}
.playernum.modnum
{
	background:rgba(255, 128, 199, 0.87);
	color:black;
}
.lighttheme .dev
{
	font-weight:bold;
	color:#00a6a6;
}
.lighttheme .will
{
	margin-left:auto;
	margin-right:auto;
	width:50%;
	height:450px;
	border:3px solid black;
	background:#7A7A7A;
	color:black;
	padding-left:10px;
	padding-top:10px;
	overflow:hidden;
}
.lighttheme .phasechange
{
	background:black;
	color:white;
}
.lighttheme .msgsystem
{
	color:#bd00bd;
}
.lighttheme .modchat
{
	background:#ff80c7;
}
.lighttheme .mod
{
	color:darkviolet;
}
.lighttheme .targeting
{
	color:darkgreen;
}
.lighttheme .mafia
{
	color:#dd0000;
}
.lighttheme .coven
{
	color:#8000FF;
}
.lighttheme .vamp
{
	color:#7b8968;
}
.lighttheme .linked
{
	color:limegreen;
}
.lighttheme .dead
{
	text-shadow:0px 0px 7px #000000;
	color:#4E4E4E;
}
.lighttheme .jailor
{
	color:#8a5900;
}
.lighttheme .jailed
{
	color:#ffff81;
	text-shadow:0px 0px 7px black;
}
.lighttheme .wisteria
{
	color:#96357c;
}
.lighttheme .entangled
{
	color:forestgreen;
	text-shadow:0px 0px 10px magenta;
}
.lighttheme .spectate
{
	color:darkcyan;
}
.lighttheme .deadplayer
{
	background:#6a2a2a;
	color:white;
	font-weight:bold;
}

.tostheme #main
{
	color:white;
	background:#452c1b;
}
.tostheme #c
{
	float:left;
	height:40%;
	width:80%;
	background:#1c110a;
	color:gold;
	text-shadow:0px 0px 0px black;
	font-size:15px;
}
.tostheme .notesbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background:#784d30;
	color:white;
	font-size:10px;
	padding-top: 2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.tostheme .notesbutton:hover
{
	background:#3d2e23;
	color:black;
}
.tostheme .willbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background:#784d30;
	color:white;
	font-size:10px;
	padding-top:2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.tostheme .willbutton:hover
{
	background:#3d2e23;
	color:black;
}
.tostheme .musicbutton
{
	height:2.38em;
	width:1.5em;
	text-align:center;
	border:1px solid black;
	float:right;
	background:#784d30;
	color:white;
	font-size:10px;
	padding-top:2px;
	padding-right:6px;
	padding-left:6px;
	padding-bottom:2px;
	margin-left:5px;
	cursor:default;
}
.tostheme .musicbutton:hover
{
	background:#3d2e23;
	color:black;
}
.tostheme #userlist
{
	list-style:none;
	display:block;
	/*background-image: url('Snowback1.png');
	background-size: 500% 100%;*/
	height:90%;
	padding:0;
	margin:0;
	margin-left:-2px;
	overflow:auto;
	background-color:#332820;
}
.tostheme #modnumbering input
{
	position:absolute;
	top:50%;
	left:40%;
	transform:translate(0,-50%);
	text-align:center;
	width:2.4em;
	background:#1c110a;
	color:gold;
}
.tostheme .rolecard
{
	background:#2b251f;
	background-size:100% 100%;
	height:450px;
	width:300px;
	text-shadow: 0px 4px 6px black;
	color:#fffff5;
	position:relative;
	padding:20px;
	border:5px solid #6a4c24;
	padding-top:10px;
	float:left;
}
.tostheme .goal
{
	display:block;
	color:#fffff5;
	position:absolute;
	left:auto;
	bottom:15px;
}
.tostheme .will
{
	margin-left:auto;
	margin-right:auto;
	width:50%;
	height:450px;
	border:3px solid black;
	background:#996829;
	color:black;
	padding-left:10px;
	padding-top:10px;
	overflow:hidden;
}
.tostheme .highlight
{
	background:#996829;
	color:white;
}
.tostheme .phasechange
{
	background:#c4c4c4;
	color:black;
}
.tostheme .modchat
{
	color:#ffcd00;
	background:#2b2b2b;
}
.tostheme .mod
{
	color:#ffcd00;
}
.tostheme .targeting
{
	color:lime;
}
.tostheme .playernum
{
	display:inline-block;
	width:1.25em;
	text-align:center;
	font-weight:bold;
	background:#c99f3c;
	color:#7fff00;
	border:1px solid #1f1f1f;
	border-radius:1em;
}
.tostheme .playernum.modnum
{
	background:#c4c4c4;
	color:white;
}
.tostheme header
{
	height:2em;
	width:100%;
	background:#3e1d00;
	border-bottom:1px solid black;
}
.tostheme .current
{
	background:black;
	color:#fffff5;
}
.tostheme .vamp
{
	color:#a5a8a2;
}
.tostheme .jailor
{
	color:#ffcd00;
}
.tostheme .jailed
{
	color:#ffff81;
	background:rgba(255, 205, 0, 0.6);
}
.tostheme .wisteria
{
	color:#eba8ff;
	text-shadow:0px 0px 10px black;
}
.tostheme .entangled
{
	color:floralwhite;
	background:rgba(34, 139, 34, 0.6);
}
.tostheme .spectate
{
	color:turquoise;
}
.tostheme #inputarea
{
	clear:both;
	width:100%;
	height:8%;
	border-top:1px solid black;
	background-color:#3e1d00;
}