@charset "utf-8";
/* CSS Document */
/* 960px wide, left float divs, horizontal navigation with hover and right border */
* {margin: 0;
padding: 0;}
body {background-image: url('../images/background_DG.jpg');
background-repeat: no-repeat;
background-size: 100% 500px;

margin-top: 0px;/*this is unsolved - why did I subsequently have to cancel out 17px of greyspace at the top of container using a 17px negative margin? - note subsequently solved - it was the google remarketing code that inserts whitespace so as to display cookies message. See the code as to how we got rid of this - i.e. hidden div*/
padding-top: 0px;
/*this margin of 0px is for some reason essential so as to eradicate a small section of unwanted space at the top and bottom of the container div.  The container had 0px margin so I am not sure why margin on the body makes a difference but it seems to! See http://stackoverflow.com/questions/17257719/small-unwanted-space-on-top-and-bottom-of-page.  Nothing else need be done to the container div in order to achieve this zero top and bottom space result i.e. no height: 100% is necessary but obviously a zero margin is necessary */
}

.alerttext {
font-family: "museo-sans", "Palatino Linotype";
text-align: center;
font-weight: bold;

font-size: 24px;

}

.alerttext a {
color: #ffffff !important; text-decoration: underline;
}



h1 {font-family: "museo-sans", "Palatino Linotype";/*this is an adobe typekit font*/
font-size: 24px;
color: #A40F65;
text-align: center;
font-weight: bold;
margin: 0px;
padding: 0px;
}

h1 img {max-width: 45px;}

h2 {font-family: "museo-sans", "Palatino Linotype";
font-size: 22px;
color: #A40F65;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
h2 img {max-width: 50px;}

h3 {font-family: "museo-sans", "Palatino Linotype";
font-size: 22px;
color: #A40F65;
text-align: center;
font-weight: bold;
margin: 0px;
padding: 0px}

p {font-family:"museo-sans", Arial;
font-size: 16px;
font-style: normal;
text-align: justify;}

img {max-width:100%;
max-height:100%}
#wrapper {
	width: 960px;
	/*height: 100%;*/
	background-color: white;
	margin: 0px auto 0px auto;
	box-shadow: 0px 10px 10px #A40F65;
	-webkit-box-shadow: 0px 10px 10px #A40F65;
	-moz-box-shadow: 0px 10px 10px #A40F65;
	overflow:hidden;
	}
#lefttop {
	box-sizing: border-box;
	max-width: 940px;
	margin: 10px 10px 10px 10px;
	float: left;
	overflow:hidden;
}

.rightcolumn {
	width: 220px;
	margin: 10px;
	float: left;
	box-sizing:border-box;
	border: 1px solid #D4D4D4;
	overflow: hidden;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin: 10px 10px 10px 10px;
	
	padding: 10px;
	text-align: center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	
}

.rightcolumn img { max-width: 142px;
	
	display: block;
	margin: 0px auto 20px auto;
}
.rightcolumn>p {text-align: center;
margin-bottom: 20px;}




.navigation {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 14px;  I have now put this into the <a> styling as, ultimately, it obviously controls the font size within those tags*/
	margin: 0px 0px 10px 0px;
	background-color: #A40F65;
	width: 700px;
	height: 40px;
	/*border-radius:8px;*/
	text-align: center; /*note this would be inherited by its children and so within the <a> element but I have disabled this one just to avoid duplication */
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
	/*line-height: 1.2em; as with font-size, I have shunted this to <a> as it is this which this styling is ultimately controlling.-- /*this appears to be the default/standard and is why a 14px font requires less padding on the a element in order to fill the whole vertical space i.e. there is space already added on*/
	clear: left;
	/*margin-right: 10px;*/
	float: left ;/* if a previous item within the same container has been floated you must do the same with a following one or it will jump the queue.  This navigation div was jumping to the top of the container div because leftop (containing header and form) was floated and this next div wasn't.  The answer was to float this as well or cancel the float on the leftop as it was unnecessary.  So I did the former and it worked. The latter was tested and it also worked. Actually it is now housed within navigationholder and if you float it left then it doesn't fill the containing div to this div's max-width but if it isn't floated then it does. div*/
	}
	
	
.navigationlogin {height: 37px;
padding: none;
width: 150px;
background-image: url('../images/landlord-login-button.png');
background-size: 100%;
float: right;
background-repeat: no-repeat;
margin-top: none;
}

.navigation a.login {border: none;
padding: none;
float: none;

margin: 0px;} /*here we tried all sorts - to cancel out the effect of .navigation a  - The first attempt was to simply create a .login a but this did not override the specificity of .navigation a, rather you have to have the complete chain of specificity starting with the class that would usually apply and then re-applying a new class to the specific element.  Accordingly, what you must do is make sure that, in this case, .navigation a is included but then made even more specific as above */
		
.navigation a.login:hover {background-color: none;}

.navigation ul {  list-style-type: none;
width: 600px;
padding: 0px;
margin: 0px auto; /*this auto would only center the ul block element if it had a fixed width*/
	/*this simply removes all of the auto styling of an unordered list i.e. removes bullet points etc*/
	
}

.navigation li {
	
	display: inline-block;
	float: left;
	
	/*this simply overrides/changes the list from being a block level item to an inline item so that it flows horizontally*/
		
}

.navigation a/* targets all <a> i.e. link tags that are descendent (not just children) of an element that has the class 'navigation'   */{ 
text-decoration: none;/*gets rid of the automatic underlining*/
float: left;
color: white;
padding: 11px;
font-size: 16px;
line-height: 1.2em;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #C30;


/*this is where it really happens - the padding positions the text vertically in the centre and provides the area that is filled by the hover pseudo-element*/
}

.navigation li a:hover { background-color: #AFA46B}/* This means: any a element which is a descendant of a listelement which itself is a descendant of an element with class navigation will be affected by this styling. Accordingly, the client login is not so affected because the a element is not a descendant of a list item (it is outside of that unordered list.                         */

.on a{background-color: #AFA46B}

#header {
	
	width: 700px;
	min-height: 90px;
	box-sizing: border-box;
	margin-right: 10px;
	border-width: ;
	float:left;
	overflow: auto;
	text-align: center;

	/*background-image: url('../images/headerbackground.jpg');
	background-repeat: no-repeat;
	background-size: 700px 137px;
	background-position: top center;*/
	

	
}


#fixedposition {overflow: auto;
	width: 100%;
	position: fixed;
text-align: center;
background-color: white;

}





/*see https//medium com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c-->*/



.nav-up {
    top: -174px;
}

.headerimagediv {

	left-margin: auto;
	right-margin: auto;
	min-width: 400;
	width: 900;
	overflow: auto;
	
	
	
}



.mobilenavigation {
float: right;

overflow: auto;
min-width:  1px;
min-height: 1px;

}


.centralphoto {

float: left;
min-width: 100%;
max-width: 100%;
overflow: auto;
text-align: center;
background-image: url("../images/motorwaytraffic.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: left;
height: 250px;
margin-bottom: 4px;

}


.centralphotoban {

float: left;
min-width: 100%;
max-width: 100%;
overflow: auto;
text-align: center;
background-image: url("../images/speedcamera.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 250px;
margin-bottom: 4px;

}

.centralphotoinsurance {

float: left;
min-width: 100%;
max-width: 100%;
overflow: auto;
text-align: center;
background-image: url("../images/noinsurance.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 250px;
margin-bottom: 4px;

}

.centralphotodrink {

float: left;
min-width: 100%;
max-width: 100%;
overflow: auto;
text-align: center;
background-image: url("../images/drinkdrive.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: right;
height: 250px;
margin-bottom: 4px;

}



.centralphoto12points {

float: left;
min-width: 100%;
max-width: 100%;
overflow: auto;
text-align: center;
background-image: url("../images/12points.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: right;
height: 250px;
margin-bottom: 4px;

}




.centralphotolongkbw {

float: left;
min-width: 100%;
max-width: 100%;
overflow: auto;
text-align: center;
background-image: url("../images/longkbw.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 250px;
margin-bottom: 4px;

}





/*.headerimage {
	
	display: block;
	margin: 5px auto 6px auto;
	
}*/


.leftmiddleandrightcolumncontainer {
	
max-width:  960px;
margin-left:  auto;
margin-right:  auto;


}
.leftmiddle {width: 700px;
float: left;
clear: left;
box-sizing: border-box;
overflow: hidden;
margin: 10px 10px 10px 10px;
background-color: white;}

.mainphotodiv {width: 700px;
height: 308px; /* if there is only a background image then there must be a size set for the div because it will not expand to take the background image.               */
float: left;
clear: left;
border-width: 1px;
margin: 10px 0px 0px 0px;
border-style: solid;
border-color: #D4D4D4;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
box-sizing: border-box;
overflow: hidden;
background-image: url("../images/houses-terraced-3.gif");		
	
	
}
.fiftypercent {box-sizing:border-box; 
float: left;
width:349px;
height: 307px;
border-right-width: 3px;
border-right-style:dashed;
border-right-color: #C0C0C0;
/* This image has a background opacity of 40% which is how the fade out is created. Not a div opacity. */
background-image: url('../images/50percentlandlords2.png');
	
}

.onyourside {box-sizing: border-box;
	float: left;
width: 348px;
height: 307px;
background-image: url('../images/onyourside.png');
}
div.contactform {
	box-sizing:border-box;
	/*border-radius: 4px;*/
	width: 220px;
	text-decoration: none;
	padding: 14px;
	font-size: 16px;
	text-transform: uppercase;
	color: white;
	text-align: center;
	background-color: #000;
	margin-left: 10px;
	font-family:"museo-sans", "Palatino Linotype";
	box-shadow: 0px 0px 10px #666666;
	-moz-box-shadow: 0px 0px 10px #666666;
	-webkit-box-shadow: 0px 0px 10px #666666;
	float:left;
	overflow:hidden;
}

div.contactform input {
	width: 160px;
	height: 30px;
	border-radius: 2px;
	border-color: silver;
	border-style: solid;
	border-width: 2px;
	font-size:14px;
	font: "museo-sans";
	color: #000;
	background-color: #CCC;
	margin: 10px auto 10px auto;
	text-align: left;
	/*border-radius: 2px;*/
	
	
}
::-webkit-input-placeholder {
   color: #A40F65;
   font-weight: bold;
}

:-moz-placeholder { /* Firefox 18- */
   color:#A40F65;
   font-weight: bold;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #A40F65;  
   font-weight: bold;
}

:-ms-input-placeholder {  
   color: #A40F65;  
   font-weight: bold;
}


div.contactform input:focus, div.contactform input:hover,  div.contactform input:active {
	background-color: #DAC87E;	
	border-color:#B80A35;
}

div.contactform input.submitter {
	height: 49px;
	/*border-radius: 8px;*/
	border-color: #A40F65;
	text-transform: uppercase ;
	text-align: center;
	color: white;
	font-size: 14px;
	font: Arial, Helvetica, sans-serif;
	background-color: #A40F65;
	cursor: pointer;
	text-shadow: 0px 0px 4px  #CC6870;
	margin: ;
	margin-bottom: 10px;
	margin-top: 25px;
	min-width: 180px !important;
	
	
}

div.contactform input.submitter:hover {
	background-color: #000;
	color: white;
	cursor: pointer;}
	
.error {
	font-size: 10px;
	color: white;
	font-weight: bold;
	text-align: center;}
	
	.appleLinksWhite a {color: #ffffff !important; text-decoration: underline;} /*this code removes the blue from the telephone link created by apple iphone and ipad and replaces the underline with a white underline    */
	
	#appleLinksWhite a {color: #ffffff !important; text-decoration: underline;} 

.wrappertest {/*to show max-width vs min-width vs width and which wins! */
  min-width: 100%; /* Overrides max-width if max-width is lower than this. Overrides width. */
  width:100px;
  float: left;
  max-width: 90%; /* Overrides width if width tries to be higher. Will be AT MOST 100% wide because max-width is lower than min-width so  min-width overrides it */
  background-color:#AFA46B;
  min-height: 6px;
  margin: 0px 0px 0px 0px;
}
.wrappertest2 {/*to show max-width vs min-width vs width and which wins! */
  min-width: 100%; /* Overrides max-width if max-width is lower than this. Overrides width. */
  width:100px;
  float: left;
  text-align: center;
  color: white;
  max-width: 90%; /* Overrides width if width tries to be higher. Will be AT MOST 100% wide because max-width is lower than min-width so  min-width overrides it */
  background-color:#A40F65;
  min-height: 30px;
  margin: 0px 0px 0px 0px;
}

.wrappertest3  {width: 100%;
height: 5px;
background-color: #D4C781;
float: left;
margin: 0px 0px 4px 0px;

}

.videoand123 {width:700px;
float:left;
overflow: hidden;
margin-bottom: ;

}

.video {max-width: 340px;
		max-height: 192px;
		float: left;
		margin-right: 10px}
.video iframe {width: 340px;
			height:192px}

.threesteps {width: 340px;
box-sizing:border-box;
height: 192px;
float: left;
margin-left: 10px;

background-image: url('../images/mccarthyking123.jpg');
padding: 0px;
background-repeat:no-repeat;
}

.maintext {width: 700px;
			box-sizing: border-box;
			padding: 10px 10px 10px 10px;
			margin-top: ;
			float: left;
}

.maintext p>img {float: left;
	margin: 0px 10px 5px 0px;
	
}

.footer {background-color: #000;
padding-top: 30px;
padding-bottom: 30px;
color: white;
max-width: 100%;
overflow: hidden;
margin: 0px;

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.footercontainer {width: 960px;
				margin: 0px auto 0px auto;
				
				overflow: hidden;
				/*border-bottom: 1px solid #D4D4D4; used hr with class horizontalrule instead - see below.*/ 
}

.footercontainerdivs {/*width: 237px;*/width: 240px;
height: 100%;/*this actually makes no difference because the containing div would need to have a fixed height so it knows what 100% actually is. Otherwise, i.e. where div expands to fill its contents, a min-height or height expressed in percentage is ineffective*/

						/*display: inline-block;/* note that creating inline elements has its problems in that it naturally puts spaces between those elements meaning that a container div split equally into 4 will not hold all 4 because the cumulative effect of the spaces will leave no room for the last one.  Here we are not so concerned actually so instead of 240px I have set to 237px meaning that there is room for the spaces.  I wanted inline-block because these will center vs floating left which obviously will not unless I put them within a containing div which would then have to be re-sized anyway.  IF WE WANTED TO ERADICATE THE SPACES, ONE WAY WOULD BE TO USE A NEGATIVE MARGIN OF 3 PX (the width of the space created, at least in chrome!) - SEE NOTE BELOW. IN THE END in-line blocks didn't work because in-line elements SIT on the line and so the shortest in height ended up being lower down and I want the first lines to all line up... there is probably a way to align to the top rather than bottom line?*/
						min-height: 100px;
						float: left;/*this is the solution for the inline-block spacing problem - no such spaces appear with float */
						background-color: #000;
						box-sizing: border-box;
						padding-left: 0px ;
						text-align: left;
						font-size: ;
						
						
						/*margin-right: -3px;*/ }
						
						.footercontainerdivsclear {width: 240px;
						float: left;
					    background-color: #000;
						box-sizing: border-box;
						text-align: left;
						font-size: ;
						min-height: 10px;}
						
						.footercontainerdivslong {width: 100%;
						font-size: 10px;
						color: white;
						text-align: left;} /*for the company information at the bottom of the page!*/
.footercontainer a {text-decoration: none;
						color: white;
						font-size: 12px;}
.footercontainer p {font-size: 12px;
						color: white;}/* this is to ensure that the final text in footer is 12 px and not defaulting to a larger font*/
	
.footercontainer ul {list-style-type: none;
						 padding-left: 0px;
						 margin-left: 0px;
						 /*these two are important because a list naturally moves to the right! We don't want that here as want the left hand side to line up with the left of the div*/
						 padding-top: 0px;
						 margin-top: 0px;}

.footercontainer li {padding-bottom: 1em;}

.horizontalrule {width: 100%;	
				
				
				clear: both;

}

#pull {display: none}






@media (max-width: 1960px) {

	.mobilenavigation {visibility: hidden;}

	.videoand123 {float: none;
		margin-left: auto;
		margin-right: auto;
		display: inline-block;



	}

	.threesteps {background-image: url('../images/mccarthyking123downarrow.png');margin-bottom: 6px;}



body {background-image: none;}

	.footercontainerdivsclear {clear: left;}/*so this div does not actually 'clear' until the screen is reduced to 960 width.  This is because the email address is long and the div has to be slotted underneath the other three quite early on so as not to look too untidy          */


	#wrapper {width: 100%;
		max-width:100%;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background-image: none;
	margin: 0px, 0px, 0px, 0px;
	}
	#header {max-width: 100%;
	width: 100%;
	margin-right: 0px;
	}
	
	#lefttop{max-width: 100%;
	width: 100%;
	margin: 0px 0px 0px 0px;
	}
	
	.navigation {max-width: 100%;
	width: 100%}
	
	
	
	div.contactform {width: 100%;/*need to leave room for the drop shadow at the sides*/
	float: none; /* float left overrides margin auto so need to clear the float from earlier or it won't center!*/
	display: block;
	
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3px;
	
	}
	div.contactform input {display: inline-block;
	
	}
	

					
						
						
						
					}
					
		
@media(max-width:  960px) {

	.leftmiddle {float: clear;
	min-width: 100%;
margin-right:  auto;
margin-left:  auto;}

	.maintext {float: clear;
min-width: 100%;
margin-right:  auto;
margin-left:  auto;
	}

	.threesteps {background-image: url('../images/mccarthyking123downarrow.png');
	margin-left: 10px;
	margin-right: 0px;
	
	
	}
	
	
	.videoand123 {margin: 0px auto 20px auto;
					float: none;/*need to clear the float so that the auto margin/centering can work!*/
					}
					





 .footercontainer {max-width: 100%;
					width: 100%;
					font-size: 12px;
					}
					
					.footercontainerdivs {max-width: 25%;
						width: 25%;}

div.rightcolumn {
	
	/*to turn a float item into a block item you must cancel the float
	no need to declare as a block item though because it obviously already is! i.e. we need to cancel the float so that at this break point it goes from the right of the screen (where there is no screen left for it) to the bottom*/
	float: none;
	
	max-width: 520px;
	width: 520px;
	margin: 0px auto 0px auto;
	border: none;
	
	}
.rightcolumn img {display: inline;
margin: 10px;
	/*note that the three images here are aligned centrally without any additional code.  The margins of 20px either side are maintained exactly.  This is simply achieved by lining the images up and the text-align:center earlier cascades down to this column and together with the fact that these are now inline elements, centres them.*/
	
}



	
}			
				
	
	@media screen and (max-width: 730px)  {

.navigation {visibility: hidden;
height: 0px;}
.mobilenavigation {visibility: visible; }



		#header {background-image: none;
				}
		.videoand123 {margin-right: auto;
		margin-left: auto;
		float: none;
		max-width: 340px;
		width: 340px
	}
	.video {display: block;
	margin-right: 0px}
	.threesteps {display: block;
	margin-left: 0px;
	}
	.leftmiddle {max-width: 100%;
	
	}
	.maintext p>img {float: left;
	margin: 0px 10px 10px 0px;
	max-width: 140px;
}
	.maintext {max-width: 100%;
		width: 100%}
	.navigation {width:100%}
	
	.mainphotodiv {background-image: none;
	width: 0px;
	height: 0px;
	}
	
	.fiftypercent {background-image:none;
	width: 0px;
	height: 0px;
		
	} /*This doesn't appear to be necessary.  .mainphotodiv contains .fiftypercent and .onyourside and once mainphotodiv has insufficient height and width then the div and therefore their background images no longer appear.  It is crtical that there is enough room within a containing div to hold a contained div (i.e. if the latter has a fixed size) or else the contained div will simply NOT APPEAR AT ALL.*/
	
	.onyourside {background-image: none;
	max-width: 0px;
	max-height: 0px;
	} /*ditto*/
	div.contactform input {width: 60%;
	height: 30px;
	font-size: 14px
		}



	
	}




	
	@media (max-width: 700px) {
	.centralphoto {height: 200px;}


.centralphotoban {height: 200px;}


.centralphotoinsurance {height: 200px;}

.centralphotodrink {height: 200px;}



.centralphoto12points {height: 200px;}




.centralphotolongkbw {height: 200px;}

				 
	}
	
	
	@media (max-width: 580px) {
		
.centralphoto {height: 150px;}


.centralphotoban {height: 150px;}


.centralphotoinsurance {height: 150px;}

.centralphotodrink {height: 150px;}



.centralphoto12points {height: 150px;}

.centralphoto12points {height: 150px;}


.centralphotolongkbw {height: 150px;}
		div.contactform input {display: block;
		
			
		} /*if this omitted the 'div' aspect then the inline-block of previous media query would override because that applies to all sizes below it and had the div specifier making it more specific.  CSS sheets cascade so as to give priority to the more specifically identified style element. Best just to keep the descriptions the same through all the media queries...!*/
		div.rightcolumn {max-width: 100%;
						width: 100%;
						border: 1px solid black;
						padding: 5px;
		}
		
		div.rightcolumn img {max-width: 27%;
							
						  margin: 2%;
		
		
	}
	}


	
	@media (max-width: 480px)
	{
		.videoand123 {max-width: 300px;
			width: 300px}
			
			.video {max-width: 300px;}
			
			.video iframe {width: 300px;
							height: 169px;}
			.threesteps {background-image: url('../images/mccarthyking123downarrow.png');
			background-size: 100%;
			width: 300px;
			height: 169px;
			border: none;
		}
	div.contactform input {width: 80% ;
	
			
	}