@import "trench-slab.css";
@import "bespoke-sans.css";

:root
{
	--ColorMastheadBG: LightSlateGray;
	--ColorMastheadButtonBG: #181863;
	/*--ColorMastheadBG: rgba(100, 100, 150, 0.96);*/
	--NoteHeadingColor: var(--ColorMastheadButtonBG);
	--NoteTextColor: black;
	--BorderRadiusButton: 10px;
	--LinkColorBG: var(--ColorMastheadBG);
	--LinkColorHighlightBG: var(--ColorMastheadButtonBG);
	--LinkColorText: rgb(230, 230, 230);
	--NoteColorBG: white;
	--NoteColor: black;
	--Margin: 20px;
	--BorderRadius: 5px;
	--BorderRadiusSmall: 4px;
	--Padding: 20px;
}

.body 
{ 
	display: block;
	position: relative;
	width: 100%;
	margin: 0px;
	padding: 0px;
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	/*background-image: url("../images/background1.jpg");*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 1.0;
}

.masthead
{
	display: block;
	background-color: var(--ColorMastheadBG);	
	padding: var(--Padding);
	height: 170px;
	margin: 0px;
	opacity: 0.98;
}

.logo
{
	display: inline-block;
	position: relative;
	top: -25px;
}

.title_container
{
	display: inline-block;
	position: relative;
	margin-left: 20px;
	padding: 0px;
	width: 600px;
	height: 120px;
	border-style: none;
	border-width: thin;
	border-color: red;
}

.text_outline
{
	-webkit-text-stroke-width: 1px;
 	-webkit-text-stroke-color: black;
}

.title
{
	display: block;
	position: relative;
	top: 0px;
	font-size: 6em;
	font-weight: bold;
	/*font-family: 'TrenchSlab-Bold';*/
	font-family: 'BespokeSans-Bold';
	color: white;
	text-shadow: 2px 2px black;
/*
	background-image: url('/images/rock_texture4.jpg');
	background-repeat: repeat;
	background-position: center center;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip:text;
	background-clip:text; 	
	background-size: contain;
*/
}

.tag
{
	display: block;
	position: relative;
	top: -30px;
	/*font-family: 'TrenchSlab-Bold';*/
	font-family: 'BespokeSans-Bold';
	font-size: xx-large;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
	color: var(--ColorMastheadButtonBG);
	text-shadow: 2px 2px black;
/*	
	background-image: url('/images/rock_texture5.jpg');
	background-repeat: repeat;
	background-position: center center;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-moz-background-clip:text;
	background-clip:text; 	
	background-size: contain;
*/
}

.masthead_button
{
	display: inline-block;
	position: relative;
	cursor: pointer;
	float: right;
	margin-top: 35px;
	margin-right: 30px;
	opacity: 1.0;
	background-color: var(--ColorMastheadButtonBG);
	color: var(--LinkColorText);
	font-size: small;
	font-weight: bold;
	font-family: 'BespokeSans-Bold';
	border-radius: var(--BorderRadiusButton);
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: 2px 2px black;
	text-decoration: none;
}

a.masthead_button:hover
{
	background-color: white;
	color: black;
}

.navigation_list
{
	display: flex;
	list-style-type: square;
}

.navigation_list_item
{
	position: relative;
	top: -8px;
	margin-right: 60px;
	list-style-position: outside;
	color: var(--LinkColorText);
	background-color: var(--LinkColorBG);
	font-size: x-large;
	border-style: none;
	border-width: thin;
}

.navigation
{
	display: block;
	position: relative;
	top: -25px;
	margin-left: 0px;
	width: 100%;
	height: 50px;
	border-style: none;
	border-style: none;
	border-width: thin;
}

.navigation_link
{
	color: var(--LinkColorText);
	var(--LinkColorBG);
	font-size: large;
	font-weight: bold;
	font-family: 'TrenchSlab-Bold';
	text-decoration: none;
	padding: 10px;
	text-shadow: 2px 2px black;
	width: 100%;
}

.navigation_link:hover
{
	background-color: var(--LinkColorHighlightBG);
	padding: 10px;
	border-radius: var(--BorderRadiusButton);
}

.app_button
{
	display: inline-block;
	position: relative;
	float: right;
	top: -70px;
	margin-right: 10px;
}

.app_button:hover
{
	border-style: solid;
	border-width: 1px;
	border-color: var(--ColorMastheadButtonBG);
	border-radius: 5px;
}

.social_media
{
	display: inline-block;
	position: relative;
	float: right;
	top: -58px;
}

.social_media:hover
{
	border-style: solid;
	border-width: 1px;
	border-color: var(--ColorMastheadButtonBG);
	border-radius: 5px;
}

.page_heading
{
	display: inline-block;
	position: relative;
	background-color: var(--ColorMastheadBG);
	padding: 10px;
	border-radius: var(--BorderRadiusButton);
	margin-left: var(--Margin);
	margin-top: var(--Margin);
	margin-bottom: 0px;
	color: var(--LinkColorText);
	font-family: 'BespokeSans-Bold';
	font-size: xx-large;
	text-decoration: underline;
	text-decoration-color: var(--LinkColorText);
	text-shadow: 2px 2px black;
}

.page_content
{
	display: block;
	position: relative;
	overflow: auto;
	padding: var(--Padding);
	width: 1308px;
	margin: 0px;
}

.note
{
	display: block;
	position: relative;
	background-color: var(--NoteColorBG);
	border-radius: 20px;
	padding: var(--Padding);
	margin: var(--Margin);
	box-shadow: 10px 10px rgb(0, 0, 0);
	border-style: solid;
	border-width: thick;
	border-color: var(--LinkColorBG);
	overflow: auto;
}

.advert_marquee
{
	display: block;
	background-color: #171763;
	margin: 20px;
	overflow: hidden;
	width: 1260px;
	height: 132px;
	border-style: solid;
	border-width: thick;
	border-color: var(--LinkColorBG); 
	border-radius: 20px;
	box-shadow: 10px 10px rgb(0, 0, 0);
}

.advert_row
{
	background-color: white;
}

.advert_button
{
	cursor: pointer;
	width: 200px;
	height: 100px;
	margin: 5px;
}

.advert_logo
{
	cursor: pointer;
	height: 120px;
	margin: 5px;
	border-style: solid;
	border-width: medium;
	border-radius: 2px;
	border-left-color:#C0C0C0;
	border-top-color: #C0C0C0;
	border-right-color: #808080;
	border-bottom-color: #808080;
	background-color:#DBDBDB
}

.advert_text
{
	display: table-cell;
	vertical-align: middle;
	font-size: medium;
	font-weight: bold;
	color: black;
	/*background-color: lime;*/
	width: 200px;
	height: 100%;
	padding: 5px;	
	vertical-align: middle;
}

.advert_expires
{
	display: block;
	font-size: x-small;
	font-weight: bold;
	padding: 5px;
	width: 100%;
	color: white;
}

.tradie_details
{
	display: block;
	font-size: small;
	border-style: solid;
	border-width: thin;
	border-color: black;
	padding: 10px;
	margin: 10px;
	overflow: auto;
	font-size: medium;
	background-color: #778899;
}

.tradie_about
{
	display:block;
	font-size:small;
	border-style:solid;
	border-width:thin;
	border-color:black;
	padding:10px;
	margin:10px;
	overflow:auto;
	font-size:medium;
	background-color: #778899;}

.tradie_feedback
{
	display:block;
	font-size:small;
	border-style:solid;
	border-width:thin;
	border-color:black;
	padding:10px;
	margin:10px;
	overflow:auto;
	font-size:medium;
	background-color: #778899;
}

.feedback_row
{
	border-bottom-style: solid;
	border-bottom-width: thin;
	border-bottom-color: black;
	font-size: small;
}

.form
{
	display: block;
	position: relative;
	border-style: none;
	border-color: red;
	/*
	margin-right: var(--Margin);
	margin-top: var(--Margin);
	margin-bottom: var(--Margin);
	*/
	padding: 10px;
	background-color: var(--ColorMastheadBG);
	border-radius: var(--BorderRadius);
}

form.form fieldset
{
	border-style: solid;
	border-width: medium;
	border-color: var(--NoteHeadingColor);
	background-color: var(--ColorMastheadBG);
	border-radius: var(--BorderRadius);
}

form.form fieldset legend
{
	color: var(--NoteHeadingColor);
	font-size: x-large;
	font-weight: bold;
}

form.form input[type=button], form.form input[type=submit], form.form input[type=reset], form.form button, .button
{
	padding: 8px;
	border-radius: var(--BorderRadius);
	border-style: outset;
	border-width: thin;
	font-size: small;
	font-weight: bold;
	color: black;
	margin: 10px;
	background-color: silver;
}

form.form input[type=file]
{
	font-size: small;
	font-weight: bold;
	color: black;
}

form.form input[type=text], form.form input[type=password], form.form input[type=checkbox], form.form input[type=radio], form.form select, form.form textarea
{
	border-radius: var(--BorderRadiusSmall);
	border-style: inset;
	border-width: thin;
}

div.note p
{
	color:  var(--NoteTextColor);
	font-size: medium;
}

div.note h1
{
	color:  var(--NoteHeadingColor);
}

div.note h2
{
	color: var(--NoteHeadingColor);
}

div.note h3
{
	color: var(--NoteHeadingColor);
}

div.note h4
{
	color: var(--NoteHeadingColor);
}

div.note h5
{
;
	color: var(--NoteHeadingColor);
}

div.note h6
{
	color: var(--NoteHeadingColor);
}

.link_request
{
	font-size: large;
	font-weight: bold;
	font-color: black;
}

.table_borders
{
	table-layout: fixed;
	border-collapse: collapse;
	margin: 10px;
	border-style: solid;
	border-color: var(--NoteHeadingColor);
	border-width: medium;
	width: 100%;
}

.cell_borders
{
	padding: 5px;
	font-size: large;
	color: black;
	width: 50%;
	border-bottom-style: solid;
	border-color: var(--NoteHeadingColor);
	border-width: thin;
	border-left-style: none;
	border-right-style: none;
	border-top-style: none;
	padding: 10px;
}

.table_no_borders
{
	table-layout: fixed;
	border-collapse: collapse;
	margin: 10px;
	border-style: none;
	/*width: 400px;*/
}

.cell_no_borders
{
	padding: 5px;
	font-size: large;
	color: black;
	/*width: 50%;*/
	border-style: none;
	padding: 10px;
}

.search_form
{
	background-color: var(--ColorInactiveBG);
	border-style: solid;
	border-width: thin;
	border-radius: var(--BorderRadius);
	border-color: var(--TextColor);
	margin-top: 0px;
	width: 96.5%;
}

.search_table
{
	width: 98%;
	background-color: white;
	border-style: inset;
	border-width: medium;
	border-color: var(--ColorInactiveBG);
	table-layout: fixed;
}

.search_cell
{
	font-size: 12.5px;
	/*color: maroon;*/
	border-bottom-style: solid;
	border-width: thin;
	border-color: black;
	padding: 5px;
	vertical-align: middle;
	text-align: left;
}

.form_table
{
	table-layout: fixed;
	width: 100%;
}

.form_table_cell
{
	font-size: small;
	padding: 5px;
	vertical-align: middle;
	text-align: left;
}

.function_button
{
	display: inline-block;
	border-style: outset;
	border-width: thin;
	border-color: silver;
}

.function_button_image
{
	width: 30px;
}

.function_button_hidden
{
	background-color: transparent;
	border-style: none;
}

.boolean_image
{
	width: 20px;
}

.function_form
{
	display: inline-block;
	border-color: red;
	border-style: none;
}

.feedback_form
{
	width: 580px;
	float: right;
	background-color: var(--ColorInactiveBG);
}

.list
{
	font-size: medium;
}

h1
{
	font-size: 4em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}

h2
{
	font-size: 3.5em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}

h3
{
	font-size: 3em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}

h4
{
	font-size: 2.5em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}

h5
{
	font-size: 2em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}

h6
{
	font-size: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	margin-top: 10px;
}

p
{
	margin-bottom: 10px;
}

li
{
	padding-bottom: 10px;
}

textarea
{
	resize: none;	
}