@import url('./raleway.css');

#locationlist {
	padding: 1em;
    font-size: 1.3em;
	-webkit-column-count: 2;  /* Chrome/Opera, Safari */
	-moz-column-count: 2; /* Mozilla Firefox */
	column-count: 2;
}
html, body {
	margin: 0;
	width: 100%;
	height: auto;
	background: linear-gradient(#380036 0%, #02a2c8 125%);
	color: white;
	transition: background-color 0.2s linear;
	background-repeat: no-repeat;
	background-attachment: fixed;
	padding: 1em;
}

body {
    font-size: 15px;
}


h1, h3 {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	color: #3ba0ca;
}
h1 {
	border-bottom: 1px solid #cbd1df;
	margin-top: 35px;
}

h1:first-child { margin-top: 0 }
h3 {
	font-weight: 300;
	margin-top: 2em;
	line-height: 2em;
}

h2 {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	color: #63cec9;;
}

.input-group span, .role, .btn-info span {
	height: 1.25em;
	line-height: 1.25em;
}
.rolecount {
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: 120%;
}
.btn-info { float: left }
.role {
	float: left;
	padding: 6px 0;
	margin-left: 10px;
	font-family: 'Raleway', sans-serif;
	font-size: 125%;
	font-weight: 300;
}

#roles-overlay a.list-group-item {
	font-family: 'Raleway', sans-serif;
	font-size: 125%;
	font-weight: 300;
}
#roles-overlay p.list-group-item { border-bottom-width: 0 }
#roles-overlay h1, #rules-overlay h1 { border-bottom-color: #cacacf; }

.main-title {
	padding: 10px;
	margin-bottom: 10px;
}
.main-title h1 {
	border: none;
	color: #3ba0ca;
	font-size: 2.5em;
}
.main-title h3 {
	color: #888;
	font-size: 18px;
	margin: 10px 0 0;
}

#main {
	width: 100%;
	height: 100%;
}

#controls {
	padding: 5px;
	max-width: 370px;
}
#controls .input-group {
	width: 130px;
	float: left;
	clear: left;
	margin-left: 50px;
}

#controls-container, #help-container, #help-overlay, #game, #rules-overlay, #roles-overlay {
	position: relative;
	height: 100%;
	width: 100%;
	overflow-y: hidden;
}
#help-overlay, #rules-overlay, #roles-overlay {
	position: absolute;
	top: 0;
	left: 0;
}
#help-overlay img {
	display: block;
	margin: 0 auto;
	max-width: 350px;
}

#rules-overlay, #roles-overlay {
	background: #ddd;
	z-index: 40;
	padding: 10px;
}
.rules-title h3 { margin: 0 }
.rules-title {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	background: white;
	z-index: 100;
}
.rules-title button { float: right }
.rules {
	padding-top: 50px;
	z-index: 1;
}

#roles-overlay .list-group p {
	margin: 0;
	padding: 12px;
}


#samplecode { display: none }

.rolerow {
	clear: both;
	margin-bottom: 10px;
}
.rolerow:after {
	content: '';
	display: block;
	clear: both;
}



.help { padding: 10px }
.help h3 { margin-top: 0 }
.help img {
	width: 100%;
	margin-bottom: 10px;
}

#total-td {
	height: 65px;
	position: relative;
}
#total-td .btn {
	float: right;
	margin: -6px 0 0 6px;
    font-size: 130%;
}
#btn-newgame, #btn-roles { display: none }
#total {
	padding: 18px;
	border-top: 1px solid #ddd;
	width: 100%;
    height: 100%;
	background: white;
}

#total h3 {
	margin: 0;
	position: absolute;
}

#help-overlay, #game, #rules-overlay, #roles-overlay { display: none }
#help-overlay {
	z-index: 30;
	background: rgba(255, 255, 255, 0.9);
}
#help-overlay .btn-danger {
	position: absolute;
	top: 10px;
	right: 10px;
}

#game-tr { display: none }

#showrole {
	text-align: center;
	padding: 10px;
	width: 100%;
}
#showrole input[type="text"], #nightlist select {
	display: inline;
	width: auto;
}
#nightlist select {
	margin: 2px 0 5px;
}
#showrole img {
	display: block;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

#playerlist, #nightlist {
	min-width: 250px;
	width: 100%;
	padding: 10px;

}
#playerlist { margin-bottom: 40px }
#playerlist .role {
	margin: -1px 0 15px 0;
	float: none;
	padding-left: 10px;
	height: auto;
	border-color: #ccc;
	border-radius: 0 0 4px 4px;
	font-size: 15px;
}
.disabled { opacity: 0.3 }

#playerlist input {
	border-bottom-left-radius: 0;
}

#nightlist .role {
	margin-left: 0;
	font-size: 100%;
	height: auto;
	line-height: auto;
}
#nightlist .rolerow { padding-left: 15px }
#nightlist .rolerow .role > b { margin-left: -15px }

.btn-hypno, .btn-cult, .btn-lover { display: none }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
}

option[disabled] {
	color: #d5d5d5;
}

.target-label {
	color: black;
	border-radius: 4px;
	padding: 4px 6px;
	font-size: 90%;
	display: inline-block;
}
.bg-primary { background: #428bca }
.bg-success { background: #5cb85c }
.bg-info { background: #5bc0de }
.bg-warning { background: #f0ad4e }
.bg-danger { background: #d9534f }

@media only screen and (min-width: 390px) {

	#controls .input-group {
		clear: none;
		margin-left: auto;
		float: right;
	}
	#controls-container {
		min-width: 380px;
	}
}

@media only screen and (min-width: 450px) {
	#help-overlay img {
		float: right;
		width: 50%;
		max-width: none;
		margin-left: 10px;
	}
}

@media only screen and (min-width: 630px) {

	#controls-container {
		width: auto;
		max-width: 380px;
	}
	#controls { margin-bottom: 0 }

	#main {
		position: absolute;
		z-index: 20;
	}

	#help-overlay {
		z-index: 10;
		pointer-events: none;
		background: none;
	}
	#help-overlay * { display: none }

	#help-container { display: block }
	#help-container .help { max-width: 340px }

	#showrole img {
		width: 50%;
		float: right;
		margin: 0 0 0 10px;
	}
}

@media only screen and (min-width: 750px) {
	#playerlist {
		float: left;
		margin-bottom: 0;
		width: 50%;
	}
	#nightlist {
		float: right;
		max-width: 350px
	}
}

@media only screen and (min-width: 950px) {
	#help-container .help { max-width: none }
	#help-container img {
		display: block;
		float: right;
		width: 50%;
		margin-left: 10px;
		margin-top: -35px;
	}
}