@charset "utf-8";
/* CSS Document */

			* {
				font-family: Georgia, Times, serif;
				color: black; 
				text-align: center;}
				
/* STRUCTURE */

			body {
				width: 100%;
				background-color: #0a1034;
				margin: 0 auto;}
				
						header {
			background-color: #070091;
			margin: 0 auto; 
			color: white; 
			border: white solid 7px;
		/*	position: static; */ /* could change to absolute if I want it to stay while scrolling up and down */ 
		/*	z-index: 15; */
			width: 90%;
			height: 300px; /* Is actually now visible */
			 }
			/* width: 1800px; /* need to change to relative measurements. Height was 220px same as the img element. */
		/*	height: 300px; } *//
			
			
			footer {
			background-color: #070091;
			margin: 0 auto; 
			padding: auto;
			color: white; 
		/*	position: static; */
		/*	z-index: 2; */
			width: 90%;
		/*	height: 300px; */} 
		
		.footerbreak { /* May edit this to use, doesn't look good at the moment */
				border-right: 1px solid #DEE1FE; 
				float: clear;
				 } 
			
				nav, footer {
				float: clear;
				color: white; 
				padding: 0.5em 0;}
				
				
			#footerrepeat {
			background-color: #070091;
			width: 90%;
			height: 100%;
			margin: 0 auto; 
			font-size: 0.8em;
			padding: auto; }
			
			#footerrepeat .min {
			font-size: 0.8em;
			line-height: 1px;
			padding: 5px;
		/*	float: right; */}
		


			#login { } 

			
			nav
			{ 
			background-color: #020108;
			width: 90%; 
		/*	top-margin: 20px; */
			position: static; 
			height: 20%;
			z-index: 9;
			margin: 0 auto;
			line-height: 100%;
			float: none;  }
		
			ul { 
			color: white;
			list-style-type:none;
			height: 100%;
			line-height: 100%; 
			text-align: justify;
			} 
			
			nav ul li a { /* This makes the clickable area much bigger. If we set text-decoration to none and enough padding, setting display to block doesn't force them onto different lines */ 
			    display: block; 
 			 	padding: 10px 20px; 
  				text-decoration: none; }

			
			
			#asmall {
			text-decoration: none; 
			background-color: #39C;
			border: white solid 1px;
			font-size: 1em; }
			
				li {
				color: white !important; /*use !important if having issues */
				/* Previously had white borders around each */ 
				display: inline-block;
				width: 15%;
				height: 100%;
				line-height: 100%;
				font-size:  1.5em; 
				padding: 0.3em; /* Changed from 0.5, fixed up to 150% zoom. Still not perfect though*/
				margin-right: 3%;}
				
				.separator {
				border-right: 1px solid #313132; 
				float: clear;
				 } /* It's not quite what I want but it will do for now. Since it's a border, it's matching the line-height so terms of engagement, since
				 it takes up two lines, has a larger border separator than the others. Still doesn't look good enough. Is breaking at zoom 110/120,*/ 
				
				.separator2 {
				border-right: 1px solid #313132; 
				border-left: 1px solid #313132; 
				float: clear;

				 }
				


			#content {
				 overflow: auto; 
				margin: 0 auto;  
				float: none;
				width: 90%;
				background-color: white; 
				vertical-align: middle;
				height: 100%;}
				

			.leftservices	{
			 max-width: 40%;
			 padding: 20px; 
			 float: left;
		/*	 margin-right: 20px; */
		/*	 margin-left: 10px; */
			margin-right: 10px; 
			margin-left: 20px;
			 margin-top: 20px; 
			 margin-bottom: 20px;
			/* margin-bottom: 100px; */ /* Have got <br> tags in the html because the white background doesn't extend otherwise. When this is fixed we will have to add a margin--bottom tag */ 
			/* max-height: 10%; */
			 height: 8%; 
			 clear: left;
			}	
			
			.rightservices { 
			margin-left: 20px; 
			margin-right: 10px; 
			margin-top: 20px;
			margin-bottom: 20px; 
			float: right;
			 max-width: 40%;
			 padding: 20px; 
			/* margin-bottom: 100px; */
		/* max-height: 10%; */
			 height: 8%; 
			 clear: right;
			}	
			

			

			h4 {
			color: white; 
			/* background-color: #070091; */ /* Should add a gradient */ 
		background-color: #070091; /* Old browsers */ 
			 background: linear-gradient(30deg, #070091, #2072f2);
			  background: webkit-linear-gradient(30deg, #070091, #2072f2);
			  background: moz-linear-gradient(30deg, #070091, #2072f2);
			   background: ms-linear-gradient(30deg, #070091, #2072f2);
			/* margin: 0 auto; */
			/* margin: 5px; */
			text-align: center;
			/*  width: 15em; */
		display: block; 
			 height: 3em; /* Having height + line height the same keeps the text on the same line */
			 line-height: 3em; 
			 /* Line height same as height means text is centered */ 
			 width: 16em;
			 padding: auto; 
			margin: 0 auto; 
			 border: black solid 2px; /* Ads a box shadow effect, can change this. Should note that when there was a bracket here overriding the styles below it,
			 the headings all fitted within the white centre space */
	-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	-ms-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
				font-size: 32px;  

			/* font-style: oblique; */
			 }
	
			
			
			
			.fit 
			{			
			 line-height: 1.3em !important; }

			
			h4 a {
 			 	padding: 10px 20px; 
  				text-decoration: none; } /* Padding and text-decoration none makes it like a button */

					
			
			h4.headingleft {
			float: right; 
			clear: right;
			position: static;
			/* margin-left: 20px; */
		/*	margin-left: 10px; */
			z-index: 4; }
			
			h4.headingright {
			/* position: static;
			z-index: 3; */ 
			float: left;
			margin-right: 20px; /* Don't know why this isn't working */ 
			clear: left; }


			.iconleft {
			margin-right: 1px;
			/* margin: 0 auto; */
			float: left;
			clear: right;
			position: static; 
			z-index: 5;
			/* margin-left: 1px; */
			/* margin-right: 10px; */
			overflow: auto;
		/*	margin-left: -50%; */
			/* margin-right: auto; */
			/* overflow: auto; */
			padding: auto; 
				-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	-ms-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
}
			

			.iconright{
			/* margin: 0 auto; */
			float: left;
			clear: right;
			position: static; 
			z-index: 5;
			margin-right: 5px;
		/*	margin-left: -50%; */
			/* margin-right: auto; */
			overflow: auto;
			padding: auto;
				-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px#888;
	-ms-box-shadow: 0 0 5px 5px#888;
	box-shadow: 0 0 5px 5px #888;
 }
			





			/* INNLINE TAGES */
			
			
			/* Float */
.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

			
			
			
			#services {
				width: 100%;
			/*	height: auto; */
				overflow: hidden; /* was auto */
				/* added */}
			/* vertical-align: middle; */ 
			/* Currently an empty element, don't need to do anything with it */}
			
			
			
			nav {
				text-align: justify;
				min-width: 500px;
			}
			nav:after {
				content: '';
				display: inline-block;
				width: 100%;
			}
			nav li {
				display: inline-block;
			}

			footer {
				text-align: justify;
			/*	min-width: 500px; */
			}
			footer:after {
				content: '';
				display: inline-block;
				width: 100%;
			}
			
			footer ul li a {
				display: inline-block;
				text-decoration: none !important;
			 }
			
			
			footer li {
			}
			
			
			#headertext {
			width: 50% !important;
			 height: 100%;
			 display: inline;
			 padding: auto;
			 margin: 0 auto;
			 position: relative;
			 z-index: 12;
			 float: clear !important; /*Changed from float right to solve border issues */

			}
			
			#headertext p	{
			font-size: 1.3em; } /* Reducing the text size is only a temporary solution */


				/* GRAPHICS */
				
				.logo {
			width: 50% !important;
			 height: 100%;
			 padding: auto;
			  border-right: white solid 2px; /* Causing issues */
			 display: inline-block;
			 position: relative;
			 z-index: 13;
			 margin: 0 auto;
			 float: left !important;
			} 			
			
			.logo2 {
			display: none; 
			} 
			
			/* .textheadingleft {
			background-color: #070091; 
			width: 234px; 
			padding: 40px 20px 20px 20px; 
			margin: 0 auto; 
			position: static;  
			float: left;
			width: 64px; 
			}
			*/
			
#menu-icon {

    display: none;  
    width: 40px;
    height: 40px;
    background: #070091 url(images/menu-icon.png) center; /* was center */
}


			
			/* MAY HAVE TO CREATE ICON LEFT AND ICON RIGHT CLASSES TO FLOAT THEM TO LEFT AND RIGHT. */
			
			.photos {
			alignment-adjust:central; 
			padding: 40px 20px 20px 20px; } /* May try re-fixing this up, not an issue at the moment. With the padding can't do a box shadow that looks good though */
			
			.photos2 {
			alignment-adjust:central; 
			/* padding: 40px 20px 20px 20px; */
			overflow: auto;
			margin-top: 5%;
			margin-bottom: 2%;
		/*	margin-left: 0; */
		/*	margin-right: 0; */
				-moz-box-shadow: 0 0 1px 1px #888;
	-webkit-box-shadow: 0 0 1px 1px #888;
	-ms-box-shadow: 0 0 1px 1px #888;
	box-shadow: 0 0 1px 1px #888;
			clear: both; } 
			
			.photos3 { /* For the Power Of Attorney Page */
			float: right; 
			clear: both;
			alignment-adjust: central;
		-moz-box-shadow: 0 0 1px 1px #888;
	-webkit-box-shadow: 0 0 1px 1px #888;
	-ms-box-shadow: 0 0 1px 1px #888;
	box-shadow: 0 0 1px 1px #888;
			margin-right: 12%;
			margin-bottom: 5%; 
			margin-top: 5%;
			margin-left: 2%;}

			
			.icon {
			display: block; } /* Needed to remove white descenders border at bottom, a img is inline element */ 

				
				/* TEXT DECORATION */
				
				p {
				font-size: 1.4em; /* 1 em Was 0.75 THEN WAS 1.5 but not so good on desktop */
				line-height: 1.4em;
				text-decoration: none; 
				} 
				
				
			p.servicesleft { /* Check the margin bottom on this, May be a reason why the wills heading doesn't float correctly */
				float: left; /* idk.  */
				max-width: 500px;
				clear: right;
				margin-top: 30px; 
				margin-bottom: 15%;
				text-align: left;
				}
				
				p.servicesright {
				float: right; /* idk */
				clear: left;
				margin-top: 30px; 
				margin-bottom: 15%;
				max-width: 500px;
				text-align: left;}

				
				.white {
				color: white; }
				
				.ipsum {
				width: 80%;
				margin: 0 auto;
				text-align: left; /* Maybe will allign center*/ } 
				
				
				.ipsumcentral {
				width: 80%;
				margin: 0 auto;
				text-align: center; }

				
				ipsumcenter {
				width: 80%;
				margin: 0 auto;
				text-align: left;  } 

							
			h1 {
			/*	color: #031024; */
			color: #000;
			   font-wieght: bold; 
			   font-size: 48px; 
			   font-family: Georgia, "Times New Roman", Times, serif; 
			text-shadow: 2px 0px 4px #000000; /* This is good, only adjust third value/4px one though */ 
			text-align: center; 
			} 
			
			h3 {
		/* color: #000; */ /* Not sure if we want this black too */
			   font-wieght: bold; 
			   font-size: 24px; 
			   font-family: Georgia, "Times New Roman", Times, serif;
			   	color: #031024;  
			text-shadow: 2px 0px 2px #000000;  /* Altered to 2 px for h3 This is good, only adjust third value/4px one though */ 
			text-align: center; 
			} 
			
			
			figcaption {
			font-style: italic; 
			font-size: 0.8em;}
			
			a {
			color: white; } 
			
			ul li a  {
			color: white; 
			} 
			
			 nav ul li a:hover { 
			  background: #D5D7F7; 
			} /* Not the issue, doesn't seem to work though  */ 
							

				
			#trust {
				margin-bottom:  50px; }

			.linebreaks {
			margin-bottom: 5%; }
			
			.crazybreaks {
			margin-bottom: 30%; } /* Don't use this */

			/* ABOUT US PAGE */ 

				

				
				#juenith {
				width: 100%;
				margin: 0 auto; 
				padding: 1%;/*?*/
			/*	height: 400px;  */
			overflow: hidden; 
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;

				}
		/* Have copied more or less the same css from the header class for the juenith section. 
		  There are some differences in the padding to separate the image and the text. The image 
		 goes out of the container when zoomed out but stays in when zoomed in, so should be fine for mobile */
				
				
							.juenithtext { 
						width: 70% !important;
			 height: 100%;
			 display: inline; 
			 padding: auto;
			 padding-right: 2%;
			 text-align: left !important;
			 text-justify: auto;
			 position: relative;
			 clear: left;
			} 
				
				
				
				.juenithpic {
				width: 20% !important;
			 height: 100%;
			 margin-bottom: 2%;
			 margin-right: 2%;
			 margin-left: 1%;
			 padding: auto;
			 display: inline;
			 position: relative;
			 float: left !important;

				}
	 
	 			#otherstaff {
				margin-top: 5%; 
				margin-bottom: 5%;
				padding: 2%;}
				
				
				
		/* AREAS OF PRACTICE PAGE */ 
		
		.areafloat {
			/* margin: 0 auto; */
			margin-bottom: 2%;
			margin-left: 1%;
			margin-top: 1%;
			margin-right: 1%;
			width: 60%;
			text-align: left;
			float: right;
			position: static;
			/* z-index: 4; */
			/* clear: both; */  }
			
			
			.sidebarcontainer {
				margin: 15px; 
				position: relative; 
				float: left;
				clear: both;
				/* width: 25% !important; */
				/* width: 300px; */
				width: 25%;
				height: auto;
			} 
			
			.sidebar { 
				 position: relative; /* was fixed */
				 /* z-index: 5; */
				width: 100%; /* was 25 */
				float: left; /* Have repeated these here. I think repeating the float could cause issues */
				clear: both;
				border: black solid 4px;
				background-color: #3a4d6b; 
				height: auto; } 
				
			.sidebar ul {
			color: black; 
			height: auto;
			float: left;
			 clear: right; 
			padding: 5%;
			position: static;
			line-height: auto;  
			}
				
			.sidebar ul li {
			padding: 10px;  
			color: black;
			display: inline;
			height: 15%;
			line-height: 100%; 
			text-align: justify; }
			
			.sidebar ul li a {
			text-decoration: none;
			display: block;
			border-top: #313132 solid 3px; /* BORDER IS BREAKING AT 150%. MAY BE THE PADDING THAT'S DOING IT? */
			padding: 30px 30px; 
			display: block;
			}
			
		 .sidebar ul li a:focus, .sidebar ul li a:active  {
				background-color:#E6E2FE;
				color: black;
			/* border-bottom-width:0px; */}
			
			.bottom {
			border-bottom: #313132 solid 3px; }

.glow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.glow:hover, .glow:focus, .glow:active {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}		

/* TERMS OF ENGAGEMENT CSS */

.termlink {
text-decoration: underline;
font-size: 1.5em;
color: #35ADE8;

}

.reglink {
text-decoration: underline;
color: #35ADE8; }


/* NEWS CSS */

.newssection {
width: 80%; 
margin: 0 auto; 
padding: 1%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
overflow: hidden; 
 }

.newssection h3 {
	font-style: normal; 
	text-decoration: none;
	margin-top: 2%;
	margin-bottom: 5%;
}

.newssection p {
width: 50%;
height: 100%;
display: inline;  
position: relative;
font-size: 1.3em; 
text-justify: auto;
clear: left;
/* clear: both; */
} 

.newsimg {
float: left;
position: relative;
margin-right: 2%;
display: inline;
margin-bottom: 2%; 
height: 100%;
/* margin: 2%; */
width: 35%; }

 
 .newsbrake {
background-color: #E4E4E4;
width: 80%;
/* height: auto; */
overflow: hidden;
margin: 0 auto; 
margin-top: 1%;
margin-bottom: 10%;
border: black solid 1px; /* Maybe only top border */
padding: 2%; 
 }
 
 
 
 
 .newsbrake  ul li  {
	color: #383A3A !important;
	 margin-right: 1%;
	/* text-align: justify ; */
	display: inline;
	font-size: 1.3em; 
		height: 100%;
 } 
 
 .date
 {float: left; /* First object floated left, the others all floated right to equally space them */
 width: 30%;}
 
 .newsbrake ul li a {
  color: #070091;
  float: right;
  width: 30%;
  text-decoration: none;
 /* 	padding: 0.5em 0; */
  display: inline;
   } 
   
   
   
#pagenums {
width: 80%; 
height: auto; 
margin: 0 auto;
margin-bottom: 2%;
margin-top: 1%;
border: black solid 1px; 
		/background-color: #070091; /* Old browsers */ 
			 background: linear-gradient(30deg, #070091, #2072f2);
			  background: webkit-linear-gradient(30deg, #070091, #2072f2);
			  background: moz-linear-gradient(30deg, #070091, #2072f2);
			   background: ms-linear-gradient(30deg, #070091, #2072f2);
} 

#pagenums ul {
text-align: center;  }

#pagenums ul li a {
color: white; 
text-decoration: underline; 
margin-right: 5px;
font-size: 1.8em; }


/* CONTACT US PAGE */ 





#leftcont {
width: 70%; 
=border: black solid 1px;
margin: 0 auto; 
margin-right: 1%;
margin-left: 1%;
padding: auto;
float: left;
overflow: auto;  } 


.contsect { 
width: 100%;
float: left; 
margin-top: 4%;
margin-bottom: 4%;
clear: left; }


#leftcont .heading {
			   font-wieght: bold; 
			 /*  display:  block; */
			/* clear: both; */
			position: relative;  
			   font-size: 24px; 
			   margin: 0 auto;
			   position: relative;
			   font-family: Georgia, "Times New Roman", Times, serif;
			   	color: #031024;  
			text-shadow: 2px 0px 2px #000000;  /* Altered to 2 px for h3 This is good, only adjust third value/4px one though */ 
			text-align: left; 
			max-width: 45%;
			/* margin-left:  2%; */
			 }


#leftcont p, #leftcont a {
border: 1px solid black; 
position: relative;
/* display: block; */
/* position: static; */
margin: 0 auto; 
/* margin-top: 4%; */
max-width: 45% !Important;
height: auto; 
font-size: 1.3em; 
color: black; 
}




#rightiframe  {
margin: 0 auto; 
margin-right: 2%;
margin-left: 1%;
margin-bottom: 10%;
display: inline; 
/*float: right;  */ /* Just because it's no longer in the left cont section at the moment */
clear: left; 
padding: auto; 
position: relative;

}

#emailhead {
margin-top: 20%; 
margin: 0 auto; 
margin-bottom: 2%;}



form {
margin: 0 auto; 
width: 100%;
overflow: auto;
margin-bottom: 3%;
font-family: Georgia, Times, serif;
font-size: 1em; 
}

form input { 
margin: 0 auto; 
margin-left: 1%;
width: auto;
text-align: left;
width: 200px;
clear: left; }

label {
	float: left;
	/* text-align: left; */
	background-color: #CCC;
	border: black solid 1px;
	margin-left: 5%;
	margin-right: 5%;
	color: #031024;
	display: block;  
	position: relative;
	width: 200px; 
	font-weight: bold; 
	
}

#largelabel {
width: 200px; }




form textarea {
text-align: left;
min-width: 50%;
}

submit {
text-align: center;
margin: 0 auto; 
padding: auto;
font-size: 12px;}

form input.submit-button {
	width: 100px;
}