body{
	background-color:#272c30;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;	
	overflow:hidden;

  -webkit-touch-callout: none; 
    -webkit-user-select: none;
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
                                  
}
#content{
	width:1326px;
	height:728px;
	/*border:2px solid #aeaeae;*/
	position:relative;
	padding:20px;
	overflow:hidden;
}
.pick{
	position:relative;
	left:-10px;
}
.pick img{
	height:20px;
}

.framework{
	color:#f5deac;
	font-size:20pt;
	width:100%;
	text-align:center;
	position:relative;
	top:-50px;
}

.HalfButton{
	background-color:#272c30;
	border: 2px outset #f5deac;
	padding-top:10px;
	padding-bottom:10px;
	width:76px;
	text-align:center;
	cursor:pointer;
	color:#ad9c77;
	margin:10px;
	margin-right:-8px;
	margin-bottom:10px;
	display:inline-block;
}
.green:hover{color:#0f0;}
.blue:hover{color:#00bfff;}

.BigButton{
	background-color:#272c30;
	border: 2px outset #f5deac;
	padding:10px;
	width:142px;
	text-align:center;
	cursor:pointer;
	color:#ad9c77;
	margin:10px;
	margin-bottom:10px;
}
.BigButton:hover{color:#f5deac;}

.deleteIcon{
	cursor:pointer;
	margin-left:20px;
}
input[type=number]::-webkit-inner-spin-button {
	opacity: 1;
}

#twirl{
	position:absolute;
	display:none;
	top:170px;left:480px;
	width:400px;
	height:400px;
	text-align:center;
	background-color:#272c30;
	color:#f5deac;
	transition: all 1s;	
	z-index:300;
	border: 3px solid #f5deac;
}

#scenario-text{
	position:absolute;
	top:10px;left:480px;
	width:380px;
	height:110px;
	/*border: 3px solid #f5deac;*/
	color:#f5deac;
	padding:10px;
	font-variant: small-caps;
	padding-top:20px;
	font-size:36pt;	
	text-align:center;
	display:table-cell;
	vertical-align: middle;
}

#timer{
	position:absolute;
	top:180px;left:574px;
	width:218px;
	height:253px;
	text-align:center;
	color:#f5deac;
	transition: all 1s;

}
#timeleft{
position:absolute;
top:-30px;
color:#f5deac;
font-size:24pt;
text-align:center;
width:100%;
}
#seconds{
	font-size:24pt;
	background-color:#272c30;
	color:#f5deac;
	text-align:center;
	position:relative;
	top:5px;
	margin-bottom:10px;
}
.SandButton{
	background-color:#272c30;
	color:#f5deac;
	font-size:24pt;
	position:relative;
	top:-30px;
	height:45px;
	width:60px;
}

#hourglass{
	z-index:2;
	position:absolute;
	left:0;top:0;
}

.sand{
	z-index:-1;
	transition: all 0.1s;
}

#hourglass-mask{
	z-index:3;
	position:relative;
	left:0;top:0;
	opacity:1;
	transition: all 0.5s;
}

#uppersand{
	position:absolute;
	left:51px;
	bottom:0px;
	transform-origin: center center;
	transform: scale(0);
	
}
#lowersand{
	position:absolute;
	left:47px;
	bottom:0px;
	transform-origin: bottom center;
	transform: scale(1.5); //go up to 1.5
}

#AddNamesDiv{
	display:none;
	position:absolute;
	width:355px;
	height:500px;
	left:505px;top:150px;
	z-index:20;
	background-color:#272c30;
}
#AddNamesDivButton{position:absolute;top:0px;right:0px;}
#AddNamesButton{position:absolute;top:430px;left:16px;}
#DoneAddingButton{position:absolute;top:430px;left:196px;}
#ActorList td{
	color:#f5deac;
}
#ActorList {
	position:absolute;
	top:70px;right:20px;
	width:300px;	
}
#ActorList table{
	max-width:290px;
	float:right;
}
.ActorNames{
	position:absolute;
	top:30px;
	font-size:24pt;
	width:360px;
	text-align:center;
}	
#GreenActor{
	color:#0f0;
	left:210px;
	text-align:center;
}
#BlueActor{
	color:#00bfff;
	left:810px;
	text-align:center;
}
.actorTraits{z-index:100;}

.remove{
	position:absolute;
	right:20px;
	border: 2px solid #f5deac;
	background-color:#272c30272c30;
	transition: all 2s;
	font-size:12pt;
	padding:5px;
	color:#f5deac;
	cursor:pointer;
	display:none;
	z-index:100;
	display:table;
	visibility:hidden;
	opacity:0;
}
.actorTraits table{
	width:100%;
	position:relative;
	top:-30px;
	cursor:pointer;
}

.actorTraits td{
color:#f5deac;
font-size:20pt;
text-align:center;
padding-top:20px;
height:120px;
}


#Character-text-Green{color:#0f0;}
#Character-text-Green:hover .remove{visibility:visible;opacity:1;}
#Emotion-text-Green{color:#0f0;}
#Emotion-text-Green:hover .remove{visibility:visible;opacity:1;}
#Accent-text-Green{color:#0f0;}
#Accent-text-Green:hover .remove{visibility:visible;opacity:1;}
#Character-text-Blue{color:#00bfff;}
#Character-text-Blue:hover .remove{visibility:visible;opacity:1;}
#Emotion-text-Blue{color:#00bfff;}
#Emotion-text-Blue:hover .remove{visibility:visible;opacity:1;}
#Accent-text-Blue{color:#00bfff;}
#Accent-text-Blue:hover .remove{visibility:visible;opacity:1;}

#GreenTraits{
	position:absolute;
	left:230px;
	top:100px;
	color:#f5deac;
	width:318px;
	height:460px;
	/*border: 2px solid green;*/
	text-align:center;
}

#BlueTraits{
	position:absolute;
	left:825px;
	top:100px;
	color:#f5deac;
	width:318px;
	height:460px;
	/*border: 2px solid blue;*/
	text-align:center;
} 


#conditions{
	position:relative;
	top:-20px;
}

#NewNames{
	position:absolute;
	top:0px;
	left:0px;
	border: 3px solid #000; 
	-webkit-box-shadow: 11px 14px 15px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 11px 14px 15px -4px rgba(0,0,0,0.75);
	box-shadow: 11px 14px 15px -4px rgba(0,0,0,0.75);
	padding:10px;
	font-size:130%;
}
#sentence-green{
	position:absolute;
	bottom:-50px;
	color:#0f0;
	font-size:18pt;
	width:270px;
	height:400px;
	text-align:center;	
	display:table;
	left:230px;
	top:460px;
	font-style:italic;
}
#sentence-blue{
	position:absolute;
	bottom:-50px;
	color:#00bfff;
	font-size:18pt;
	width:260px;
	height:400px;
	text-align:center;	
	display:table;
	left:825px;
	top:470px;
	font-style:italic;
}
.sentence::before{content:"\201C"}
.sentence::after{content:"\201D"}
.sentence:empty{display:none !important;}
.sentence{z-index:100;}
#sentence-green:hover .remove{visibility:visible;opacity:1;}
#sentence-blue:hover .remove{visibility:visible;opacity:1;}

#rules{
	position:absolute;
	right:10px;bottom:10px;
	cursor:pointer;
	height:45px;width:45px;
	z-index:99;
	opacity:0.7;
}
#rules:hover{opacity:1;}
#rules:hover .Memo{display:table;}
.Memo{
	position:absolute;
	text-align:center;
	top:-36px;left:-64px;
	border: 2px solid #f5deac;
	background-color:#272c30;
	font-size:10pt;
	width:70px;
	padding:5px;
	color:#f5deac;
	cursor:pointer;
	display:none;
	z-index:100;
}
#ImprovRules{
	position:absolute;
	display:none;
	font-size:14pt;
	top:20px;left:220px;
	background-color:#f5deac;
	color:#272c30;
	width:800px;
	padding:50px;
	padding-top:10px;
	padding-bottom:30px;
	background-image: url("../images/parchment.jpg");
	z-index:300;
}
#ImprovRules h2{margin-bottom:10px;}
#ImprovRules li{margin-bottom:15px;}
#CloseHelp,#CloseRules{font-size:36pt;cursor:pointer;float:right;}
#help{
	position:absolute;
	right:90px;bottom:10px;
	cursor:pointer;
	height:45px;width:45px;
	z-index:99;
	opacity:0.7;
}
#HelpContent h2{margin-bottom:10px;}
#HelpContent li{margin-bottom:15px;}
#help:hover{opacity:1;}
#help:hover .Memo{display:table;}
#HelpContent{
	position:absolute;
	display:none;
	font-size:14pt;
	top:20px;left:220px;
	background-color:#f5deac;
	color:#272c30;
	width:800px;
	padding:50px;
	padding-top:10px;
	padding-bottom:30px;
	background-image: url("../images/parchment.jpg");
	z-index:300;
}