/*Fonts*/
@font-face {
	font-family: "Lora Regular";
	src: url("font/Lora-Regular.ttf");
}
@font-face {
	font-family: "Lora Bold";
	src: url("font/Lora-Bold.ttf");
}

html, body {
	font-family: "Lora Regular",sans-serif,"Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","Apple Color Emoji";
	height: 100%;
	margin: 0;
}

/*Colourschemes*/
.cs_default .great {background-color: #3dd;}
.cs_default .good {background-color: #3c3;}
.cs_default .ok {background-color: #ea3;}
.cs_default .bad {background-color: #b23;}

.cs_rg .great {background-color: #69e;}
.cs_rg .good {background-color: #33a; color: white;}
.cs_rg .ok {background-color: #da3;}
.cs_rg .bad {background-color: #750;}

.cs_by .great {background-color: #29b;}
.cs_by .good {background-color: #36a;}
.cs_by .ok {background-color: #f44;}
.cs_by .bad {background-color: #a55;}

/*Layout*/
#app {
	display: grid;
	grid-template-columns: 1fr 3.5fr;
	grid-template-rows: 1fr;
	height: 100%;
}

#teamlist {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	background-color: #225;
}

/*Generic Elements*/
.bar {
	font-family: "Lora Bold";
	padding: 0.1em 0.3em;
	background-color: #113;
	color: white;
}

.notice {
	border: 1px solid black;
	background-color: #eeaa33;
	border-radius: 5px;
	margin: 0.4em;
	padding: 0.1em 0.3em;
}

a {color: #99f;}
a:visited {color: #55f;}

/*Teams*/
.team { padding: 0.2em 0.5em; }

.team:hover { margin: 0 0 0 0.5em; }
.team.selected { margin: 0 0 0 0.7em; }

/*Players*/
.player { grid-template-rows: 1fr; }
.playerhead { grid-template-rows: 1fr 1fr; }
.player, .playerhead {
	display: grid;
	grid-template-columns: 14% repeat(31, 1fr);
	
	border-bottom: 2px solid #113;
}

.player>* {
	padding: 0.1em 0;
}
/*Properties*/
.name {
	grid-column: 1 / span 1;
	grid-row: 1 / span 2;
}
.longboys .propname, .longboys .prop { width: 120px; }
.propname, .prop {font-size: 8pt; text-align: center; border-left: 1px solid #eee;}
.propcat {text-align: center; border-left: 2px solid black;}
.propborderhere {border-left: 2px solid black;}

.propname { /*stolen from stackoverflow. i hate this as much as you do.*/
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


/*Dictionary + Palette*/
#dictionary, #palettepicker {
	padding: 0.2em;
	margin: 0.3em 0.5em;
	background-color: #225;
	border-radius: 5px;
	display: flex;
	flex-wrap: wrap;
}

.dictionary, .palette {
	padding: 0.2em 0.4em;
	margin: 0.1em;
	background-color: #336;
	color: white;
	border-radius: 5px;
	border: 1px solid #001;
}

.palette {cursor: pointer;}

.palette.selected {background-color: #44a;}

.palette>span {
	color: black;
	border-radius: 5px;
	padding: 0.2em;
}