style.scss

@import 'variables';

@import 'set_defaults';
@import 'adjust_bootstrap';
@import 'utility_classes';

@import 'layout';
@import 'overall_styling';

// Page specific elements
@import 'start';


#thermal_image {
	text-align: center;
	margin: 10px;
	& > * {
		width: 100%;
		border: 3px solid;
	}
}



#details {
	display: table;
	width: 100%;

	span {
		display: table-cell;
		text-align: center;
	}
}



#microwave_container #extras {
	padding: 10px 0;
	background-color: $primary_color;
	margin: 0;
	.btn-round {
		color: $emphasis_color;
	}
}

.btn-container .glyphicon, .fa {
	font-size: 40px;
}

#stop {
	border: 3px solid #800;
	border-radius: 10px;
	background-color: #E00;

	span {
		/* Outline the stop character to highlight it.
		* We do this by putting a shadow on it, no offset and a small radius.
		* One shadow isn't visible enough, counter this by doing a few of them.
		* The black tints it black, doesn't apply a hard black colour.
		*/
		text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
		color: darken(#E00, 8%);
	}

	// Position stop near bottom of the page
	&.footer { // Override #three_column_layout .footer
		width: $width - 40px;
		line-height: $footer_height;
		padding: 10px 0;
		margin: 20px;

		// Position inner button in center of stop button
		display: flex;
		justify-content: center;
		align-content: center;
	}

	// Position stop icon inside center of inner button
	span {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

}


.btn {
	font-size: 24px;
}

.btn-mw {
	color: $text_color;
	border: thin solid $text_color;
	border-radius: 10px;
}

.btn-round {
	border-radius: 50%;
	background: white;
	border-color: $emphasis_color;
	// Padding is adjusted by utilities.js:square_element() to ensure a perfect circle
}


#time_dial {
	cursor: pointer;
}

#power_wrapper {
	display: block;
	margin: 0 auto;
	text-align: center;

	position: relative;

	#power_triangle {
		position: relative;
		cursor: pointer;
	}

	#power_marker {
		position: absolute;
		top: -5px;
		cursor: move;
	}

}