/* Colours

 	transparent
 		header ul li a - background-color
 		section#sub_navigation_bar ul li a - background-color
 		
 		and main tags at the top.

	#ddd - Light Grey
		button - background-color
		input - background-color

	#888 - Mid Grey
		table button - border
		current_page - Border

	#414141 - Dark Grey
 		box-shadow - hover
		button - border
		current_page - box-shadow
 		header ul li a - border
		input - border
		input - hover
		table - border
		table.edit - border
 		table button - text color
		td - border
 		text - colour
 		th (table header) background-color
		th - border
 		section#sub_navigation_bar ul li a - border
 	red
	 	#err_msg, .error
	 	error_border
	 	td.missing_data_critical - background-color
 	white
 		table data (td) background color

 */
/* main tags */
	a,
	body,
	button,
	div,
	form,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	img,
	input,
	li,
	ol,
	p,
	select,
	span,
	textarea,
	ul
		{
		background-color:transparent;
		border:0px;
		color: #414141;
		font-family: 'Roboto', sans-serif;
		font-style: normal;
		font-weight: normal;
		line-height: 1.6;
		list-style-type:none;
		margin:0px;
		padding:0px;
		text-align: left;
		}
	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		}
	#chamber_wings {
		background-image: url("../images/angel-wings.png") ;
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		}
	h1, h2, h3, p { 
		padding-bottom: .5em;
		}
	h1, h2, h3, h4 { 
		font-family: Garamond, serif;
		}
	h1 {
		font-size: 2em;
		font-weight: 300;
		letter-spacing: 10px;
		text-transform: uppercase;
		}
	h2 {
		font-size: 1.5em;
		}
	header {
		backgr ound-image: url("../images/angel-sky.jpg") !important;
		background-position: top center;
		background-repeat: no-repeat;
		background-size: cover;
		height: auto;
		margin-bottom: 1em;
		}
	input, button {
	    background-color: #ddd;
	    border:solid 1px #414141;
	    border-radius: 2em;
	    font-size: 12px;
	    padding: 0.25em 1.5em;;
		}
	input:hover, button:hover {
		box-shadow: 2px 2px 4px #414141;
		}
	p {
		font-size:12px;
		}
	section {
		max-width: 976px;
		margin: 0 auto;
		padding: 12px;
		width: auto;
		}
	strong {
		font-weight:900 ;
		}
	table {
		border-collapse: collapse;
		margin-bottom:1em;
		max-width: 100%;
		}
	table, td, th {
		border: 1px solid #414141;
		text-align: left;
		}
	table button {
	    border: solid 3px #888;
	    border-radius: 2em;
	    color: #414141;
	    font-size:1em;
	    margin:0;
	    padding: .25em 1em!important
		}
	textarea {
		width:85%;
		}

	th, td {
		font-size: .75em;
		padding: .75em;
		}
	td {
		background-color: white;
		
		}
	th {
		background-color: #414141!important;
		color: white!important;
		}
/* Theme Colours */

	.contact_theme_colour {
		background: linear-gradient(-45deg, #dddddd, #bbbbbb, #dddddd, #eeeeee);
		background-size: 400% 400%;
		animation: colour_movement 15s ease infinite;
		background-repeat: no-repeat;
		}
	.address_theme_colour {
		background: linear-gradient(-45deg, #c49d9d, #c3a7a7, #c49d9d, #bb6767);
		background-size: 400% 400%;
		animation: colour_movement 15s ease infinite;
		background-repeat: no-repeat;
		}
	.business_theme_colour {
		background: linear-gradient(-45deg, #9cd4fa, #b8daf0, #9cd4fa, #5baee6);
		background-size: 400% 400%;
		animation: colour_movement 15s ease infinite;
		background-repeat: no-repeat;
		}
	.client_theme_colour {
		background: linear-gradient(-45deg, #5face0, #7fbee9, #5face0, #2493dd);
		background-size: 400% 400%;
		animation: colour_movement 15s ease infinite;
		background-repeat: no-repeat;
		}
	.dashboard_theme_colour {
		background: linear-gradient(90deg, #dddddd, #c49d9d, #9cd4fa, #5face0);
		background-size: 400% 400%;
		animation: colour_movement 30s ease infinite;
		background-repeat: no-repeat;
		}
	

		@keyframes colour_movement {
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position: 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}
		}


/* general */
	body form label {
		display: inline-block;
		padding-right: 1em;
		text-align: right;
		width: 130px;
		}
	body form table label {
		text-align: left;
		}
	body form input {
		display: inline-block;
		padding-right: 1em;
		text-align: left;
		width: 250px;
		}
	input.click_button {
		margin-top: 3em;
		padding: .5em 1.5em!important;
		width: auto!important;
		}
	input.click_button:hover {
		box-shadow: 2px 2px 4px #414141;
		}
	#err_msg, .error {
		color: red;
		}
	.error_border {
		border: 1px solid red;
		}
	.current_page {
		box-shadow: 2px 2px 4px #414141;
    	border: solid 3px #888!important;
    	padding:.5em 2em;
		}
	section#page_title_display {
		padding-bottom:0;
		padding-top:0;
		}
	section#page_title_display h1 {
		margin:1em 0 0 0;
		padding:0;
		}
	.table_edit {
		border: solid 1px #414141;
		border-style: solid;
		box-shadow: 15px 15px 20px #888;
		}
	button.table_edit {
		margin-top:2em;
	}
	table.table_edit td {
		b ox-shadow:0px 0px 3px 3px #ddd inset;
		}
	
	table.table_edit input {
	    background-color: transparent;
	    border: 0;
	    border-radius: 0;
	    box-shadow: none;
	    padding: 0;
		}
	table.table_sub_menu form button {
		font-size:.7em;
		border:0
		}
	table.table_sub_menu form {
		display:inline-block;
		float:right;
		}
	.telephone {
		font-family: Garamond, serif;
		font-weight: 900;
    	text-decoration: none
		}
	td:hover {
		background-color: #ddd;
		}
	textarea:focus, input:focus, select:focus {
    	outline: none;
		}
	select {
		border:0;
		}

    /*	Missing Data Flags */
    td.missing_data_critical {
    	background-color:red;
    	color:white;
    	}
	.overview_wording {
		max-width: 750px;
		width:auto;
		}
	.radio_buttons input, .radio_buttons label {
		width:auto!important;
		}
	.lower_navigation_bar {
		clear:both;
		}
	.lower_navigation_bar form {
		margin-bottom: 1em;
		}
	.lower_navigation_bar .delete_button {
		background-color:red;
		color:white
		}
	.left_hand_column {
		float:left;
		margin-right:2em;
		}
	.add_returns_to_textarea {
		white-space: break-spaces;
	}

/* Login Status Bar */

	#login_status_bar {
		background-color:#414141;
		padding:.5em 1em 0 0;
		text-align:right;
		width:auto;'
		}
	#login_status_bar p {
		color:#ddd;
		text-align:right;
		}
	#login_status_bar a {
		color:#ddd;
		}



/* header */
	header .header_left_box {
		float: left;
		}
	header .header_left_box img {
		max-width: 200px;
		padding-right:20px;
		width: 50vw;
		}
	header .header_right_box {
		padding-left: 25px;
		margin: 59px 0 0 0px;
		width: auto!important;
		}
	header .header_right_box p {
		font-size: 8px;
		margin: 0 0 3px 0;
		padding: 0;
		}
	header .page_title_display {
		font-family: 'Roboto', sans-serif;
		font-size: 26px!important;
		font-style: normal;
		font-weight: 400;
		}
	header ul, section#sub_navigation_bar ul {
		clear: both;
		padding-top: 10px;
		width: auto;
		}
	header ul li, section#sub_navigation_bar ul li {
		display: inline-block;
		padding-right: 5px;
		width: auto;
		}
	header ul li a, section#sub_navigation_bar ul li a {
	    background-color: transparent;
	    border:solid .5px #414141;
	    border-radius: 10px;
	    display: inline-block;
	    font-size: 8px;
	    padding: 0.5em 1.5em;
		text-decoration: none;
		}
	header ul li a:hover, section#sub_navigation_bar ul li a:hover {
	    box-shadow: 2px 2px 4px #414141;
		}

/* Homepage (index.php) */
	#home-page * {
		font-family: Garamond, serif;
		font-size: 20px;
		font-weight: 300;
		margin: 0;
		padding: 0;
		text-align: center;
		text-decoration: none;
		}
	body#home-page section {
		display: inline-block!important;
		}
	body#home-page {
		text-align: center;
		}
	#home-page a {
		font-size: 1em;
		font-weight: 100;
		}
	body#home-page {
		background-image: url("../images/angel-sky.jpg") !important;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		height: 100vh;
		width: 100vw;
		}
	#home-page h1, #homepage p {
		line-height: 1.5;
		padding-top: 5vh;
		text-align: center;
		}
	#home-page h1 {
		font-size: 1em;
		}
	#home-page main {
		background-image: url("../images/angel-wings.png");
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 100%;
		height: 100vh;
		width: 100vw;
		}
	#home-page .middle_box {
		height: 100%;
		margin: 0 auto !important;
		max-width: 500px;
		width: 100%;
		}
	#home-page .hp-angel-logo {
		margin-top: 10% !important;;
		width: 25vw;
		}
	#home-page .hp-chamber-logo {
		margin-top: 2.5vh !important;
		width: 35%;
		}
/* Register Page */
	body#register form input {
		display: inline-block;
		padding-right: 1em;
		text-align: left;
		width: 250px;
		}

/* forgotten_password page */

	#forgotten_password label {
		text-align: left;
		width: 150px;
		}

/* Footer */

	footer {
		margin-top:auto;
		padding-bottom:25px;
	}
	footer p {
		margin: 0 auto;
		max-width: 500px;
		font-size: .5em;
		width:100%;
	}
	footer .footer_top_row img {
		display: inline-block;
		max-width: 200px;
		padding: 1em;
		text-align: center;
		width: 20vw;
	}
	footer .footer_top_row {
		text-align: center;
	}
	

		/* Responsive */
			@media only screen and (max-width: 600px)
			{
				/* general */
					section {
						width: calc(100% - 24px);
						}
					input {
					    background-color: #ddd;
					    border-radius: .5em;
					    margin-right: 1em;
					    padding: 0.7em 2em;
					    text-align: left;
						}
					label {
						text-align: left!important;
						margin-bottom: 1em;
						}
					.left_hand_column {
						clear:both;
						margin-right:0;
						}


				/* Header */
					header {
						height:auto;
						}
					header .header_right_box {
						clear: both;
						padding-left: 0px;
						}
					header .header_right_box p.sub_heading {
						width: 70%;
						padding: 1em 0;
						}

				/* homepage */
				 	#home-page h1, #home-page p {
				  		}
					#home-page .hp-angel-logo {
						width: 70vw;
						}
			}