@hue: 150;

body
{
	background-color: hsl(@hue, 0%, 6.125%);
	color: hsl(@hue, 0%, 93.75%);
	
	font-family: monospace;
	font-size: 1.25em;
}

input,textarea,button
{
	font-size: 1.25em;
}

button,input[type="submit"]
{
	background-color: hsl(@hue, 37.5%, 37.5%);
	color: hsl(@hue, 0%, 100%);
	
	font-size: 1.00em;
	
	border: none;
	border-radius: 2px;
	
	padding: 8px;
	
	cursor: pointer;
}

label
{
	display: block;
	font-size: 1.0em;
	font-weight: bold;
	// text-transform: capitalize;
}

.field
{
	display: block;
	margin: 16px 0;
}

.entry > *
{
	display: inline-block;
}

.entry_time
{
	margin: 0 4px;
	
	color: hsl(@hue, 0%, 75%);
	
	&:before {content: "<";}
	&:after {content: ">";}
}

.entry_sender
{
	margin: 0 4px;
	
	// font-weight: bold;
	
	&:before {content: "[";}
	&:after {content: "]";}
}

.spot
{
	cursor: pointer;
	
	margin: 0 4px;
	
	&.spot_active
	{
		font-weight: bold;
	}
}

.spot_kind
{
	display: none;
	
	padding: 4px;
	
	&:before {content: "[";}
	&:after {content: "]";}
}

.user
{
	cursor: pointer;
}

.pane
{
	background-color: hsl(@hue, 0%, 12.5%);
	
	height: 93.75%;
	overflow-y: auto;
	
	list-style-type: none;
	
	border: 1px solid hsl(@hue, 0%, 50%);
	margin: 4px;
	padding: 8px;
	
	& > li
	{
		margin: 4px 0;
	}
}

body
{
	&
	{
		& #connect {display: none;}
		& #wait {display: none;}
		& #main {display: none;}
	}
	
	&.offline
	{
		& #connect {display: initial !important;}
	}
	
	&.connecting
	{
		& #wait {display: initial !important;}
	}
	
	&.online
	{
		& #main {display: initial !important;}
	}
}

#head
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	& > #head_left
	{
		flex: 1;
		text-align: left;
	}
	
	& > #head_right
	{
		flex: 1;
		text-align: right;
	}
}


#middle
{
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	
	& #spots
	{
		flex-grow: 1;
		flex-shrink: 1;
		
		min-width: 240px;
		height: 75vh;
	}
	
	& #entries
	{
		flex-grow: 4;
		flex-shrink: 4;
		
		min-width: 480px;
		height: 75vh;
	}
	
	& #users
	{
		flex-grow: 1;
		flex-shrink: 1;
		
		min-width: 240px;
		height: 75vh;
	}
}

#content
{
	border: none;
	
	background-color: hsl(@hue, 0%, 25%);
	color: hsl(@hue, 0%, 100%);
	
	padding: 8px;
	margin: 4px;
}

#main > form
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	& > #container_content {flex: 7;}
	& > #container_send {flex: 1;}
}

#content
{
	width: 93.75%;
}