/*   - - - - - - - - - - - - - - - - - 
	overhang.css
     - - - - - - - - - - - - - - - - -  */

/* ---------------------------------------------
   body
   --------------------------------------------- */
  			
	html {

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
			   box-sizing: border-box;
	}

	*, *:before, *:after {

		-webkit-box-sizing: inherit;
		   -moz-box-sizing: inherit;
			   box-sizing: inherit;
	}
	
	#main_content {
	
		position: relative;
	}
	
/* ---------------------------------------------
   canvas
   --------------------------------------------- */
  			
	#canvas {

		width: 640px;
		height: 776px;
	}

/* ---------------------------------------------
   help
   --------------------------------------------- */
  			
	#help {

		display: none;
		position: absolute;
		top: 50px;
		left: 10px;
		width: 620px;
		background-color: #EFE;
		border: 2px solid #686;
		border-radius: 15px;
		padding: 20px;
		-webkit-box-shadow: 3px 3px 6px 6px rgba(0, 0, 0, 0.2);
		-moz-box-shadow:    3px 3px 6px 6px rgba(0, 0, 0, 0.2);
		box-shadow:         3px 3px 6px 6px rgba(0, 0, 0, 0.2);
  	}
  	
  	.help_close {
  	
  		float: right;
  	}
  	
  	.help_close_button {
  	
  		font-size: 120%;
  		margin: 0 10px;
  	}
  	
  	.help_title {
  	
  		font-size: 150%;
  		font-weight: 600;
  		margin-bottom: 15px;
  	}
  	
  	.help_header {
  	
  		font-size: 120%;
  		font-weight: 600;
  		color: #686;
  		margin-bottom: 15px;
  	}
  	
  	.help_body {
  	
  		margin-left: 20px;
  		margin-bottom: 15px;
  	}

/* - - - - - - - - - - - - - - - - - -
   horizontal overhang elements
   - - - - - - - - - - - - - - - - - - */

	#horizontal_overhang_graphic {

		position: absolute;
	}

	#horizontal_overhang_depth_input {

		position: absolute;
		top: 41px;
		left: 44px;
	}

	#horizontal_overhang_height_input {

		position: absolute;
		top: 114px;
		left: 44px;
	}

	#horizontal_overhang_window_height_input {

		position: absolute;
		top: 210px;
		left: 44px;
	}

/* - - - - - - - - - - - - - - - - - -
   pitched overhang elements
   - - - - - - - - - - - - - - - - - - */

	#pitched_overhang {

		display: none;
	}

	#pitched_overhang_graphic {

		position: absolute;
	}

	#pitched_overhang_length_input {

		position: absolute;
		top: 45px;
		left: 80px;
	}

	#pitched_overhang_pitch_input {

		position: absolute;
		top: 120px;
		left: 68px;
	}

	#pitched_overhang_height_input {

		position: absolute;
		top: 153px;
		left: 68px;
	}

	#pitched_overhang_window_height_input {

		position: absolute;
		top: 210px;
		left: 44px;
	}

/* - - - - - - - - - - - - - - - - - -
   inputs
   - - - - - - - - - - - - - - - - - - */

	.input_label_div {

		float: left;
		text-align: right;
		width: 100px;
	}

	.input_field_div {

		padding-left: 10px;
		float: right;
		width: 190px;
	}

	#inputs_general {

		position: relative;
		float: left;
		width: 300px;
		height: 330px;
	}

	#inputs_overhang {

		position: relative;
		float: right;
		width: 300px;
		height: 330px;
	}

/* - - - - - - - - - - - - - - - - - -
   header
   - - - - - - - - - - - - - - - - - - */

	#logo {

		float: left;
		text-align: right;
		width: 100px;
	}

	#intro {

		float: right;
		width: 525px;
	}

/* - - - - - - - - - - - - - - - - - -
   table elements
   - - - - - - - - - - - - - - - - - - */
   
	.table_input, a.table_input {

		font-size: 9pt;
	}

	.table_cell {

		font-size: 8pt;
		color: #ACA;
		background-color: #008800;
		text-align: center;
	}

	.morning_afternoon {

		text-align: center;
	}

	.month_label {

		text-align: center;
	}

	.sun_x { text-align: center; font-size: 8pt; color: #FFF; background-color: #8DC63F; }

	.sun_z { text-align: center; font-size: 8pt; color: #FFF; background-color: #2d577a; }

	.sun_0 { text-align: center; font-size: 8pt; color: #FFF; background-color: #000; }

	.sun_1 { text-align: center; font-size: 8pt; color: #FFF; background-color: #1A1A1A; }

	.sun_2 { text-align: center; font-size: 8pt; color: #FFF; background-color: #333; }

	.sun_3 { text-align: center; font-size: 8pt; color: #FFF; background-color: #4D4D4D; }

	.sun_4 { text-align: center; font-size: 8pt; color: #FFF; background-color: #666; }

	.sun_5 { text-align: center; font-size: 8pt; color: #FFF; background-color: #808080; }

	.sun_6 { text-align: center; font-size: 8pt; color: #000; background-color: #999; }

	.sun_7 { text-align: center; font-size: 8pt; color: #000; background-color: #B3B3B3; }

	.sun_8 { text-align: center; font-size: 8pt; color: #000; background-color: #CCC; }

	.sun_9 { text-align: center; font-size: 8pt; color: #000; background-color: #E5E5E5; }

	.sun_10 { text-align: center; font-size: 8pt; color: #000; background-color: #FFF; }


/* - - - - - - - - - - - - - - - - - -
   misc
   - - - - - - - - - - - - - - - - - - */

	.green_button {
	
		background-color: #686;
		color: white;
		border: 1px solid black;
		border-radius: 8px;
	}