/*
 * Verrückte Turing-Maschinen — A turing complete game
 * Copyright (C) 2016-2018 Christian Fraß <vidofnir@folksprak.org>
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

html
	{
		margin: 0;
		/*
		height: 100%;
		 */
		
		background-color: hsl(120, 0%, 0%);
		color: hsl(120, 0%, 100%);
		
		font-family: monospace;
		line-height: 200%;
	}

body
	{
		margin: 0;
		padding: 8px;
		height: 100%;
		
		background-color: hsl(120, 0%, 6.125%);
		color: hsl(120, 0%, 93.75%);
	}

a
	{
		text-decoration: none;
		cursor: pointer;
		
		&:not(:hover)
			{
				color: hsl(120, 50%, 50%);
			}
		
		&:hover
			{
				color: hsl(120, 50%, 75%);
			}
	}

li
	{
		list-style-type: "» ";
	}

input,select,textarea,button
	{
		margin: 4px;
		border: none;
		padding: 8px;
		
		// border-radius: 2px;
		// box-shadow: 1px 1px 1px black;
		
		cursor: pointer;
		
		font-family: monospace;
		// font-weight: bold;
		
		&:not(:hover)
			{
				background-color: hsl(120, 0%, 25%);
				color: hsl(120, 0%, 100%);
			}
		
		&:hover
			{
				background-color: hsl(120, 50%, 25%);
				color: hsl(120, 0%, 100%);
				
				transition: 0.25s ease;
			}
	}

body > header
	{
		font-size: 200%;
		margin: 8px;
	}

#radio_help,
#radio_game
	{
		display: none;
	}

#radio_help:checked
	{
		& ~ #help {}
		& ~ #game {display: none !important;}
	}

#radio_game:checked
	{
		& ~ #help {display: none !important;}
		& ~ #game {}
	}

#game
	{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

.section
	{
		margin: 8px;
		padding: 8px;
		
		background-color: hsl(120, 0%, 12.5%);
		color: hsl(120, 0%, 87.5%);
	}

#section_left
	{
		flex-basis: 19%;
		flex-grow: 1;
		flex-shrink: 1;
	}

#section_mid
	{
		flex-basis: 62%;
		flex-grow: 1;
		flex-shrink: 0;
		
		min-width: 800px;
		
		text-align: center;
	}

#section_right
	{
		flex-basis: 19%;
		flex-grow: 1;
		flex-shrink: 1;
	}

#help section > header
	{
		font-size: 150%;
	}

#buttons
	{
		& > *
			{
				margin: 4px;
				display: block;
				text-transform: capitalize;
			}
		
		&.initial
			{
				& > #button_step {}
				& > #button_run {}
				& > #button_stop {display: none !important;}
				& > #button_edit {display: none !important;}
				& > #button_clear {}
			}
		
		&.uncertain_running
			{
				& > #button_step {display: none !important;}
				& > #button_run {display: none !important;}
				& > #button_stop {}
				& > #button_edit {display: none !important;}
				& > #button_clear {display: none !important;}
			}
		
		&.uncertain_standing
			{
				& > #button_step {}
				& > #button_run {}
				& > #button_stop {display: none !important;}
				& > #button_edit {}
				& > #button_clear {display: none !important;}
			}
		
		&.done
			{
				& > #button_step {display: none !important;}
				& > #button_run {display: none !important;}
				& > #button_stop {display: none !important;}
				& > #button_edit {}
				& > #button_clear {display: none !important;}
			}
	}

#task_status
	{
		margin-bottom: 8px;
	}

.help_actuators_actuator
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		margin-bottom: 16px;

		& > .help_actuators_actuator_name
			{
				flex-basis: 100%;
				flex-shrink: 0;
				flex-grow: 1;
				
				text-transform: capitalize;
				font-weight: bold;
			}
		
		& > .help_actuators_actuator_image
			{
				flex-basis: 10%;
				flex-shrink: 1;
				flex-grow: 0;
			}
		
		& > .help_actuators_actuator_text
			{
				flex-basis: 90%;
				flex-shrink: 1;
				flex-grow: 1;
			}
	}