/*############################################################################################*/
/*ATTENTION! ATTENTION! ATTENTION! ATTENTION!
/*Do NOT alter this file in order to style the PRIVATE Staff section.
Because this will screw up the PUBLIC section for which this CSS file is 
exclusively meant. For additional styling of the private Staff section use 
a separate CSS file - or in head section of individual files*/
/*============================================================================================*/

* {box-sizing: border-box;}
html, body {
height: 100%;
font-size:16px;
font-family: Arial, Times New Roman, Verdana, Helvetica, Arial Black;/*NOTE: The FIRST in the list will be the DEFAULT FOR THE PAGE*/
}
h1 {font-size:; font-weight:; line-height:;}
h2 {font-size:; font-weight:; }
h3 {font-size:; font-weight:; color:;}/*1.125rem*/
h4 {font-size:; font-weight:; color:;}
h5 {font-size:; font-weight:; color:;}

header, section, footer, aside, main, article, figure {
    display: block;
	padding: 0px;
	}                                                                               
.header {
    padding: 1px;
	}
/*Pseudo Table. CSS for equal height subdivisions, ie of header, using display:table, etc*/
.tabl {
	border:1px solid lightgray;
    display: table;
	background-color: white;	
	Width: 100%;
	float:left;
	overflow:hidden;
	margin-top:-12px;
	/*position:absolute;
	top:0px;
	left:0px;	
	height:px; 
	overflow:hidden;*/
}
.tabltr {
outline:1px solid lightgray;	
display: table-row;
	width: 100%;
	}
.tabltd {
border:1px solid lightgray;
display: table-cell;
width: 20%;	
/*word-break: break-all;*/
word-wrap: break-word;
}
.subheadforstyle1 /*LHS header, ie Prop Foy*/
{	
	border:0px solid white;/*Making it 1px instead of 0px increases the filled colored area!!!! Why? Because it defines the space, otherwise space appears to be defined by the content. Also, cannot have hidden or none*/
	background-color: white;
	color: blue;
	font-family:Arial Black;
	font-size:1.5em;
	font-weight:900;
	font-style:italic;	
    padding-left: 1px;
	padding-bottom: 1px;
}
.subheadforstyle2 /*RHS header, ie No clutter, no frills*/
{	
	border: 0px solid white;
	background-color: white;
	color: #daa520;
	font-family:Verdana;
	font-size:0.9em;
	font-weight:900;
	font-style:italic;	
	padding:2px; 
	display: table-cell;/*Need this for the vertical-align to work*/
	vertical-align: middle;
}

.row::after /*Aparently the syntax requires all responsive columns to be contained in a row div. This also provides the clear attribute*/
{
    content: "";
    clear: both;
    display: block;
}
[class*="col"]/*NOTE: The syntax of [attribute~=value] given in W3Schools is INCORRECT! The purpose of this code is to obviate having to put float:left in each individual "col" class. Its usefulness will be demonstrated in grids/  */
{
	float:left;	
}
.leftcol {border:1px solid black;
	width:100%; 
	float:left; 	
	/*border:0px solid lightgray;
    color: black;
	padding: 8px;
	margin: auto;*/
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
}
@media screen and (min-width: 600px) {
  .leftcol {
    width: 15%;
    margin-left: %;
  }
}
.centrecol {border:1px solid black;
	width:100%; 
	float:left;
	overflow:hidden;
/*background-color: ;
    color: black;
	padding: 8px;
	margin: auto;*/
    /*width: 60%;*/ /*Comment out for use with 'col-6'*/
	/*clear:both;*/ /*No, puts it below leftcol*/	
}
@media screen and (min-width: 600px) {
  .centrecol {
    width: 68%;
    margin-left: %;
  }
}
.rightcol {border:1px solid black;
	width:100%; 
	float:left; 
  }
@media screen and (min-width: 600px) {
  .rightcol {
    width: 15%;
    margin-left: %;
  }
}   
  
.right1 {
	border:1px solid lightgray;
	border-radius: 5px;
    padding: 10px;
	text-align: center;
    font-size: 1em;
 }
 .right2
{border:1px solid lightgray;
	border-radius: 10px;
    padding: 10px;
	margin-top: 10px;
	text-align: center;
    font-size: 1.5em;
 }
footer {
	border:0px solid lightgray;  
    clear:both;
	width:100%;
	background-color: #0099cc;
	color: #ffffff;
	overflow:auto; /*IMPORTANT to prevent footer parent element COLLAPSING*/
	/*Adding more styling seems to remove a lot of content!!!*/
}
.footer {border:1px solid lightgray;    
	clear:both; 	
}
.foot1 {
border:1px solid light gray;
width: 100%;
float:left;	    
    text-align: center;
    font-size: 12px;
    padding: 15px;	
}
.foot2 {
border:1px solid lightgray;
width: 100%;
background-color: WhiteSmoke;
padding: px;	
float: left;
}

.w {
border:1px solid black;
padding:2px;
margin:2px;
}
._100 {
width:99%;	
clear:left;	
}
._80 {
width:70%;	
clear:left;	
}
._50 {
width:390px;	
float: left;	
padding:10px;
}
._25 {
width:198px; /*24% - Fixing width in pixels IS WHAT CAUSES RESPONSIVE WEB DESIGN, ie images to retain full width & drop below preceding img */
float: left;
border:1px solid lightgray;	
}
._20 {
width:158px; /*19%*/
float: left;	
border:1px solid lightgray;	
}
._15 {
width:14%;	
float: left;	
}

/*#################################################################################################################################*/
/*ERRORS & NAVIGATING BACK BUTTONS*/ 
/*================================================================================================================================*/
/*Do NOT have .displaycontainer1, .returnprevcontain, .returnprevleft, 
.returnprevmiddle, .returnprevright, etc, in this file CSSindexPF.css. These 
have come from ME whereas MCT is a copy of PF and are nav buttons for 
navigating back in Staff directories. Should be used only in those directories, 
either on each page in head section or a dedicated CSS file for that directory. 
Otherwise screws up the top menus on the public site*/

.error140 {border:4px solid red;
	margin:140px 0px 0px 0px;	
	width:100%;
	float:left;	
	box-sizing: border-box;
	}	
	
.error100 {border:4px solid red;
	margin:100px 0px 0px 0px;	
	width:100%;
	float:left;	
	box-sizing: border-box;
	}	

.error30 {border:4px solid red;
	margin:30px 0px 0px 0px;	
	width:100%;
	float:left;	
	box-sizing: border-box;
	}	

/*
.displaycontainer1 {border:4px solid blue;
	margin:5px;	
	width:100%;
	float:left;	
	overflow:hidden;
	box-sizing: border-box;
	}		
	
.returnprevcontain {border:1px solid black;
	padding:px;
	position:absolute;
	top:71px;
	width:100%;//33%
	box-sizing: border-box;
	}
	
.returnprevleft {border:1px solid black;
	background-color:white;
    padding:5px;
	float:left;	//left:0px;
	text-align:center;
	height:25px;
	width:%;//33%
	box-sizing: border-box;
	}
.returnprevmiddle {border:1px solid black;
	background-color:white;
    padding:5px;
	float:left;	//left:34%;
	text-align:center;
	height:25px;
	width:%;//30%
	box-sizing: border-box;
	}	
.returnprevright {border:1px solid black;
	background-color:white;
    padding:5px;
	float:left;	//left:68%;
	text-align:center;
	height:25px;
	width:%;
	box-sizing: border-box;
	}	
*/

/*#################################################################################################################################*/
/*DROPDOWN BUTTON HOVER FOR NAV & CONTINENTS*/ 
/*================================================================================================================================*/
nav {border:4px solid red;
	background-color: #ffffff;
	padding: 1px;	
	margin:30px;/*Orig -12px. Doesn't seem to do anything*/
	float:left:;/*New 27/5/25. IMPORTANT!*/
	width:100%;/*New 27/5/25. IMPORTANT!*/
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
nav > ul li /*This is to differentiate this li from normal li used in other parts of the page*/
{
    float: left;
}
li a {
    display: block;
    color: darkblue;
	font-size:0.9em;
	font-weight:900;
    text-align: center;
    padding: 4px 6px;
    text-decoration: none;
	border-right: 1px solid gray;/*From SE: #bbb*/
	/*background-color: #333;Used in SE*/
	background-color: whitesmoke;/*Best. Ghostwhite & snow also not bad*/
}
/* Change the link color to #111 (black) on hover */
li a:hover {
    /*background-color: #111;Used in SE*/
	background-color: gray;/*beige, ivory good*/
}

/*Code for Dropdown button below from w3schools.com: https://www.w3schools.com/howto/howto_css_dropdown.asp*/


/*Code for Dropdown NAVBAR below from w3schools.com: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar*/
/*Also, parent with explanation: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp*/

/*#################################################################################################################################*/
/*NOW MEDIA QUERIES*/ 
/*================================================================================================================================*/
/* For mobile phones, ie when width >768px EACH col occupies 100%. This is 'MOBILE FIRST' design: */
    [class*="col-"] {
        width: 100%;
		overflow: ;
    }
@media only screen and (min-width: 600px) 
OR @media only screen and (orientation: landscape) 
{  
    /* For tablets: */
    .col-m-1 {width: 5%;}
    .col-m-2 {width: 10%;}
    .col-m-3 {width: 15%;}
    .col-m-4 {width: 20%;}
    .col-m-5 {width: 25%;}
    .col-m-6 {width: 30%;}
    .col-m-7 {width: 35%;}
    .col-m-8 {width: 40%;}
    .col-m-9 {width: 45%;}
    .col-m-10 {width: 50%;}
    .col-m-11 {width: 55%;}
    .col-m-12 {width: 60%;}
	.col-m-13 {width: 65%;}
    .col-m-14 {width: 70%;}
    .col-m-15 {width: 75%;}
    .col-m-16 {width: 80%;}
    .col-m-17 {width: 85%;}
    .col-m-18 {width: 90%;}
    .col-m-19 {width: 95%;}
    .col-m-20 {width: 100%;}
}
@media only screen and (min-width: 768px) 
{
/* For desktop: */
.col-1 {width: 5%;}
.col-2 {width: 10%;}
.col-3 {width: 15%;}
.col-4 {width: 20%;}
.col-5 {width: 25%;}
.col-6 {width: 30%;}
.col-7 {width: 35%;}
.col-8 {width: 40%;}
.col-9 {width: 45%;}
.col-10 {width: 50%;}
.col-11 {width: 55%;}
.col-12 {width: 60%;}
.col-13 {width: 65%;}
.col-14 {width: 70%;}
.col-15 {width: 75%;}
.col-16 {width: 80%;}
.col-17 {width: 85%;}
.col-18 {width: 90%;}
.col-19 {width: 95%;}
.col-20 {width: 100%;}
}
/*Now Media Queries for smaller screens for old, ie existing PF table forms*/
/*
@media only screen and (min-width:180px) and (max-width:679px)
{    
.tabltd {
 display:block;
 width: 100%;	
}
td
{
 display:block;
 width: 100%;	
 }
input[type="text"]
{
 margin-bottom:10%;
}
}
*/

/*#################################################################################################################################*/
/*ANIMATION CODE FOR FRONT INDEX PAGE*/ 
/*================================================================================================================================*/
/* The animation code */
@keyframes example {
    from {font-size: 0vw;}
    to {font-size: 1.vw;}
}

/*[class*="bannerimage"]*/
.bannerimage
{
border:1px solid lightgray;
    color: white;
	display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
    /*margin: 0px 0px 5px 0px;*/
    padding: 0px 0px 0px 0px;
	position:relative; 
	width: 100%;
	/*height: 20%*/;
} 
.hustle1 {
	position:absolute;
	border: 0px solid white;
	font-family:Arial Black;
	font-size: 1.6vw;/*Above this size it wraps on reduced screen for IE & FF. Equivalent if I put it in h1 in css file is 2.7vw! Max value before it word wraps*/	
	top: 0%;
    left: 50%;    
	-ms-transform: translate(-50%, -0%); /*IE9. One of these also does my mobile*/
    -webkit-transform: translate(-50%, -0%); /*Safari. One of these also does my mobile*/
    transform: translate(-50%, -0%);/*This is for my desktop. Does not work on my mobile*/			
}
/* The element to apply the animation to */
.hustle2 {
	position:absolute;
	border: 0px solid white;
    font-family:Arial Black;
    font-size: 1.0vw;/*Equivalent to 1.7vw here if I put it in h1 in css file is 2.5vw! Max value before it word wraps*/	
	top: 25%;
    left: 50%; 
	-ms-transform: translate(-50%, -20%); /*IE9. One of these also does my mobile*/
    -webkit-transform: translate(-50%, -20%); /*Safari. One of these also does my mobile*/
    transform: translate(-50%, -20%);/*This is for my desktop. Does not work on my mobile*/	
	animation-name: example;
    animation-duration: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;	
}
.hustle3 {
	position:absolute;
	border: 0px solid white;
    font-family:Arial Black;
    font-size: 1.6vw;/*Equivalent to 1.6vw here if I put it in h1 in css file is ca 2.5vw! Max value before it word wraps*/		
	top: 45%;
    left: 50%; 
	-ms-transform: translate(-50%, -40%); /*IE9. One of these also does my mobile*/
    -webkit-transform: translate(-50%, -40%); /*Safari. One of these also does my mobile*/
    transform: translate(-50%, -40%);/*This is for my desktop. Does not work on my mobile*/	
	animation-name: example;
    animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

/*#################################################################################################################################*/
/*CSS FOR 4TsaleSE & 4TrentSE*/ 
/*NOTE: 22/10/17 - I have tried just about every possible combination I can think of for toppaging, 
belowtoppaging & bottompaging to try to force toppaging to the top for the OLD 4TsaleSE.php, to no avail.
Have to solve via rearranging coding of latter. Yes, had to recode!*/
/*================================================================================================================================*/
/*Identifier for all 4Ts using CSS Combinators. Note that class names cannot start with a digit, or a hyphen followed by a digit*/
._4T {
/*Used only as ancestor selector in a CSS combinator*/
color:;
}
.toppaging {
	border:1px solid darkgray;
	border-radius: 1px;
	background-color:white;
	margin:5px;
    padding:5px;
	/*position:relative;*/ /*position:absolute sends it to top of Viewport if top:0px. position: relative has no effect on normal position below belowtoppaging*/
	float:left;
	font-family:arial-black, arial, courier, sans-serif, verdana;
	width:100%;}		
/*Relocated from 4T*/
._4T img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: ;
}
._4T img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
._4T h1 {
  font-size: 1.5em;	
}
._4T h2 {
margin-top: -0.9em;	
margin-bottom: -0.7em;
font-size: 1.1em;
font-weight: bold;
}
._4T h3 {
margin-bottom: -0.7em;
font-size: 1.0em;
font-weight: bold;
}
._4T h4 {
font-size: 0.85em;
font-weight: normal;
word-spacing:0.01em;
line-height:1.4;
font-family:verdana;
}
h2 a {
text-decoration: none;	
color: darkblue;
}
h3 a {
text-decoration: none;	
color: darkgreen;	
}
._4T .span1 {
font-size:0.8rem;
}
._4T .span2 {
font-size:0.8rem;
font-weight:bold;
color:black;
}
.span2 .span3 {
color:brown;
}
/*Style table for displaying property listing*/
/*table
{
 border-bottom:0px solid darkgray;
 border-radius: 1px;
 width:100%;
 margin:0px;	
 padding:0px;
}
tr
{
 border:;//Has NO effect here
}
td
{
border:0px solid lightgray;
border-radius: 1px; 
margin:;//Has NO effect here. Use border-spacing in Table element instead
padding:25px 10px 5px 10px;
}
*/

/*FOR PAGING IN 4T*/ 
/* unvisited link */
a.page:link {
    color: darkgray;/*Yes this works, tested with red*/
	opacity:1;
	text-decoration:none;
}
/* visited link */
a.page:visited {
	color: blue;    
}
/* mouse over link */
a.page:hover {
	font-weight:bold;
    opacity:1.0;
}
/* selected link */
a.page:active {
    color: red;
}
/*
.imcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
NOT USED*/

/*#################################################################################################################################*/
/*CSS FOR 5DsaleSE.php*/ 
/*================================================================================================================================*/
._5D {
/*Used only as ancestor selector in a CSS combinator*/
color:;
}
._5D h1 {
  font-size: 1.4em;	
  font-weight: 600;
}
._5D h2 {
font-size: 1.25em;
font-weight: 500;
text-decoration: none;
}
._5D img {
/*Don't have any styling here as it screws up the pagecaption, etc*/    
}
._5D img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.ueberbildbehaelter {border:1px solid lightgrey;
	background-color:ghostwhite;
	padding:4px;
	float:left;
	width:80%;}
.rent {border:0px solid lightgrey;
	color:black;
	padding:4px;
	float:left;
	width:auto;
	text-align:left;}
.tenure{border:0px solid lightgrey;
	padding:4px;
	float:left;
	text-align:center;}
.map{border:0px solid lightgrey;
	float:left;
	text-align:center;}
.streetmap{border:0px solid lightgrey;
	float:left;
	text-align:center;}
.avail{border:0px solid lightgrey;
	padding:4px;
	float:left;
	font-size: 1.25rem;
	color:red; 
	font-weight:bold;	
	text-align:center;}
.fullpic {border:1px 1px 0px 1px solid lightgrey;
	background-color:white;
    padding:5px;
	margin: auto;
	float:left;
	width:80%;
	height: ;
	text-align:center;
	vertical-align:middle}
.capt {
	float:left; 
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: white; /*#f1f1f1 = Grey text */
    width: 68%; 
	height: 1.6em; 
    padding-top: 4px; 
	margin-left: 5.8%;
	margin-top: -4%;
	font-size: 1.0vw;
	font-weight: bold;
	text-align:center;
	vertical-align:middle;		
	}	
.tnbehaelter {border:1px solid lightgrey;
	background-color:white;
    clear:left;
	width:80%;
	}		
[class*="thmbnail"]
{
border:0px solid black;
	background-color:white;
    padding:2px;
	float:left;
	width:84px;
	height:auto;
	/*width:84px;
	height:64px;*/
	text-align:center;
	vertical-align:middle
	} 
.bigdescrip{border:1px solid lightgrey;
	background-color:white;
    padding:5px;
	clear:left;
	width:80%;
	text-align:left;
    }/*	NOTE: To make format changes to bigdescrip do this in .Fullpic above, NOT here, since container is the fullpic div*/
/* SET STYLE FOR emailadvertiser BUTTON in Rightcol. This is required, no button without it */
input[type=submit] 
{
    background-color: darkgray;
	border-radius: 10px;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
	text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    /*width: 100%;*/
	opacity: 1;
	font-size: 13px;
}
input[type=submit]:hover {
    opacity: 0.7;
}

/*#################################################################################################################################*/
/*CSS FOR EMAIL FORMS*/ 
/*================================================================================================================================*/
.EmlForms {
/*Used only as ancestor selector in a CSS combinator*/
color:;
}
/*Style table for displaying Form*/
.EmlForms table
{
 border-bottom:0px solid darkgray;/*2px*/
 border-radius: 1px;
 width:100%;
 margin:0px;	
 padding:0px;
}
.EmlForms tr
{
 border:;/*Has NO effect here*/
}
.EmlForms td
{
border:0px solid lightgray;
border-radius: 1px;
font-size: 0.8rem;
margin:;/*Has NO effect here. Use border-spacing in Table element instead*/
padding:5px;
/*padding:25px 10px 5px 10px;*/
/*padding-bottom:25px;*/
}	

*#################################################################################################################################*/
/*CSS FOR Countries*/ 
/*================================================================================================================================*/
.cont {
/*Used only as ancestor selector in a CSS combinator*/	
}
.cont a {
text-decoration: none;/*none*/	
}
.ukcountries {
border:1px solid lightgray;
float:left;	
font-size: 0.8rem;
width:19%;
}
.ukcountries a {
text-decoration: none;/*none*/	
}

*#################################################################################################################################*/
/*CSS FOR LocationFiles*/ 
/*================================================================================================================================*/
.locfl {
/*Used only as ancestor selector in a CSS combinator*/	
}
.locfl h1 {
font-size: 1.2rem;	
}
.locfl h2 {
font-size: 1.0rem;	
font-weight: bold;
padding: 5px;
margin:0px;
}
.locfl h3, h3 a {
font-size: 1.0rem;	
font-weight: bold;
font-family:Arial Black;
color:darkblue;
padding: 0px;
margin:0px;
}
.locfl ul{
font-size: 1.0rem;	
padding:0px;
}
.locfl a {
font-size: 1.0rem;	
padding:5px;
}
.towngroups {
border:1px solid black;
margin-bottom:20px;
}
.towns {
border:0px solid black;
font-size: /*Get s font-size from 'a' above*/;/*Orig 0.8rem*/	
padding:5px;
float:left;
width:25%;
}
.fc_container {
clear:left;
border:1px solid lightgray;
margin:5px;	
}
.fc_left {
float:left;	
width:20%;
border:0px solid black;
padding:10px;
font-size:0.9rem;
line-height:1.6;
}
.fc_right {
float:left;
width:75%;
border:0px solid black;
padding:10px;
font-size:0.9rem;
line-height:1.6;	
}

/*#################################################################################################################################*/
/*CSS FOR SEPO Controlpanel*/ 
/*================================================================================================================================*/
.sepoProp{
border:1px solid red;
float: left;
}
.returnprev {
float:left;	
margin:1px;	
padding:1px;
}
/*For Forms*/
#poforms table
{
 margin:5px;	
 padding:5px;
}
#poforms tr
{
 border:;/*Has NO effect here*/
}
#poforms td
{
margin:;/*Has NO effect here. Use border-spacing in Table element instead*/
padding:15px;
}	

/*#################################################################################################################################*/
/*CSS FOR Admin forms etc*/ 
/*================================================================================================================================*/
/*Identifier for all 4Ts using CSS Combinators. Note that class names cannot start with a digit, or a hyphen followed by a digit*/
.Admin {
/*Used only as ancestor selector in a CSS combinator*/
color:;
}
.Admin table {
font-size: ;	
font-weight: normal;
padding: 0px;
margin:0px;
}
.Admin td {border:0px solid lightgray; /*1px*/
font-size: 1.1em;	
font-weight: bold;
padding: 5px;
margin:0px;
}

/*#################################################################################################################################*/
/*CSS FOR uploadimgs_saleSE.php*/ 
/*================================================================================================================================*/