@import url("css3menu1/style.css"); ._css3m{display:none}
.cf:before, .cf:after {
content : "";
display : table;
}
.cf:after {
clear : both;
}   
      
 body {background-color :#003737; text-align : center; padding :5px;}
p {font-family :  Verdena, Ariel, helvetica ;}

#smoothcontainer { position: fixed;top: 0; right :5%; left :5%;
z-index: 50;} 
h1{  background-image :url(https://www.eskdale.info/images/h1w.png);background-repeat :no-repeat ;background-position:  center;
margin:20px; width :auto;padding :5px;text-align :center ;font-size :1.8em ;color:#005B5B; font-family :  Verdena, Ariel, helvetica ;-moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;}

@media only screen and (max-width: 600px) {

h1{  background-image :url(https://www.eskdale.info/images/h1w.png);background-repeat :no-repeat ;background-position:  center;
margin:5px auto; width :auto;padding :5px;text-align :center ;font-size :1em ;color:#005B5B; font-family :  Verdena, Ariel, helvetica ;-moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;}

}


/*  SECTIONS responsive design */
.section {
	clear: both;
	padding: 10px;
	margin: 0px;
background-color: #EDFCF8;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;color :black; background-color: #EDFCF8;   text-align :left; 
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GO FULL WIDTH AT LESS THAN 600 PIXELS */

@media only screen and (max-width: 600px) {
	.col { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

#contents { text-align :left;  color: #C0C0C0; background-color :#003737;border-top :solid 10px #005B5B; margin:10px auto; padding :20px  ;height :auto;}



#contentsbrag { color: #C0C0C0; background-color :#003737;border-top :solid 10px #005B5B; margin:0px auto; padding :10px  ;height :auto;}





#contents2 { color: #C0C0C0; background-color :#003737;border-top :solid 10px #005B5B; margin:0px auto; padding :10px  ;height :auto;}




 
-moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;}

.clearcream {background-color:#EDFCF8 ;
display :block; clear :both;
-moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;margin :10px;}



#contents2 a {color:#FFFF00;}

#contents2 a :hover {color:#FF8040;}
#contents2 a :visited {color:#FE3410;}

#header { 
position : relative ;top : 0px ;
margin :0px; 
background-image : url(https://www.eskdale.info/images/wintertitlepic2.jpg); 
background-repeat :no-repeat ;
background-position:  top center;
border : solid 10px #003737 ;
text-align: center ;  width: auto; 
height: 130px;  
background-color : #003737 ; 
-moz-border-radius: 10px;  
 -webkit-border-radius: 10px;  
border-radius: 10px;margin :10px; }

#leftcontent {
color :black;
position: relative; 
float :left ;
width :45%;
background-color:#EDFCF8 ;
padding :1em 2% 1em 2% ;
text-align: left;
-moz-border-radius: 10px;  
    -webkit-border-radius: 10px;  
    border-radius: 10px;
margin :10px;}

#rightcontent {color :black;
position: relative;
float :left ;
width :45%; 
padding :1em 2% 1em 2% ;
background-color:#EDFCF8;
text-align: left;

}
.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

#contentcentre {color :#003737 ;background-color: #EDFCF8; text-align :justify ;height :100%; width:auto; padding :10px; margin :10px auto ;font-family: Verdena, Ariel, helvetica ;}
#contentcentre img {border: groove thin #003737;padding :5px; margin :5px 5px 20px 5px;}
.imgright {float :right ;}
.imgright img {border: groove thin #003737;padding :5px; margin :5px auto;}
.imgcentre {text-align: center; clear:both; margin :5px;}
.imgcentre img {border: groove thin #003737;padding :5px; margin :5px ;}
.imgleftauto {float :left}
.imgleftauto img {border: groove thin #003737;padding :5px; margin :5px auto;}

h2 { color: #245064; font-size: 1.3em; font-family:Verdena, Ariel, helvetica ; text-align: center }
h3    { color:#245064; font-size: 1.3em; font-family: Verdena, Ariel, helvetica ; text-align: left; margin: 10px }
h4    { margin :0 ;padding :0;color:#003737; font-size: 1.2em; font-family:  Verdena, Ariel, helvetica ; text-align: center; }

#pictures  { background-color: #000;  margin: 0px 0px 10px 0px; padding: 10px; width: auto; height :auto; }
#pictures a { background-color: black; float: left; margin: 10px; padding: 10px; border: ridge 3px #fc3; }
.gallery    { float :left;background-color: #000; text-align: center;  margin: 10px 0px 10px 8%; border: groove thin #030; position: relative; width: 350px; height: auto }
.gallery p  { color: #FCBE03; font-size: 0.9em; margin: 2px; padding: 2px; font-family: Verdena, Ariel, helvetica ;  }



.gallery1 {float :left ;text-align :left; position: relative; }
.gallery1 p     { color: black; font-size: 0.8em; text-align: justify; font-family: Verdena, Ariel, helvetica ;  }
.thumbnail img{margin :5px; padding: 5px; border: groove thin #003737;width :200px; height :auto ;}


.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img {border: groove thin #003737; }

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #EDFCF8;

left: -1000px;
border:1px ;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border: groove thin #003737;

}

.thumbnail:hover span { z-index: 50; top:0px; left: 15px; width: 200px; visibility: visible }






.box1 {color :black; background-color: #EDFCF8; text-align: center; padding: 10px ; margin: 10px auto; border: groove thin #030; width: 350px; height: auto ;}

.box2 {color :black; background-color: #EDFCF8; text-align: center; padding: 10px ; margin: 10px ; border: groove thin #030; float :left ;width :45%; height: auto ;}

/*main box for adverts*/
.box3 {color :black; background-color: #EDFCF8; text-align: left; padding:5px ; margin: 5px auto; border: groove thin #030; width: 90%; height: auto ;}
.box3 p {padding:5px ; margin: 5px;text-align : left;color :#003737;}

.box3 a { color :#000080 ;background : url(https://www.eskdale.info/images/button1.png) no-repeat  50%;  text-decoration: none; margin :5px ; padding :10px; display: inline; width: auto;}
.box3 a:hover { color :#E19D0F ;background : url(https://www.eskdale.info/images/button2.png) no-repeat center ;  text-decoration: none; margin :5px ;padding :10px; display: inline; width: auto;}


#box4 {color :black; background-color: #EDFCF8;  padding:5px ; margin: 5px ;  }
#box4 p {padding:5px ; margin: 5px;text-align : center;color :#003737;}
#box4 img {width :auto;border :0px ;text-align : center ;display:block;
margin-left:auto;
margin-right:auto; padding :5px;}
#box4 a { color :#000080 ;background : url(https://www.eskdale.info/images/button1.png) no-repeat  50%;  text-decoration: none; margin :5px ; padding :10px; display: inline; width: auto;}
#box4 a:hover { color :#E19D0F ;background : url(https://www.eskdale.info/images/button2.png) no-repeat center ;  text-decoration: none; margin :5px ;padding :10px; display: inline; width: auto;}

.imgleft {margin: 5px;float :left ;text-align :left;padding :5px;}
.imgleft img {border: groove thin #003737;padding :5px; margin :5px;width :200px; height :auto ;}
.address {list-style-type: none; margin: 5px; padding: 5px; float:left;}
.booking {float :right ; padding :-10px; margin :-15px;}

.box5 {display: inline-block;
		color :black;  
		background-color: #EDFCF8; 
		padding: 2% ; margin :2%  ; 
		border: groove thin #030;
		max-width :900px; 
		min-height: 200px ;}

.box5 img {border: groove thin #003737;
		padding :5px; 
		margin :5px;max-width :400px; 
		height :auto ;
		float :left;
	}


.box5 h2 {text-align :left;}
.box6 { display: inline-block;
		color :black;  	
		background-color: #EDFCF8; 
		text-align: left; padding: 2% ; 
		margin: 2%  ; 
		border: groove thin #030 ;
		width :600px; 
		min-height: 400px;}

/*for Brag footer*/

.box7 {	display: inline-block;
		color :black;  
		background-color: #EDFCF8; 
		padding: 2% ; margin :2%  ; 
		border: groove thin #030;
		max-width :900px; 
		min-height: 100px ;}

.box7 img {border: groove thin #003737;
		padding :5px; 
		margin :5px;max-width :100px; 
		height :max-height :50px;
		float :left;
	}

/* Buttons */
		
		.button
		{
			position: relative;
			display: inline-block;
			margin-top: 2em;
			padding: 0.90em 1.5em;
			background: #008080;
			border-radius: 40px;
			text-decoration: none;
			text-transform: uppercase;
			font-size: 1.1em;
			color: #FFF;
			-moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			-ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
			cursor: pointer;
		}

			.button:hover
			{
				background: #008040;
				color: #FFF !important;
			}

#footer { margin :10px;padding :10px;text-align: center; clear: both;   width: auto ;}

ul#navlist { list-style-type: none; margin: 0px 0pt 0pt; padding: 0pt; width: auto ;border : ridge 3px #fc3;}
ul#navlist li { display: inline ;}
ul#navlist li a { color: rgb(255,255,255); text-decoration: none; background-color:#005B5B; padding: 0.2em 1em; border-right: 1px solid rgb(255,255,255); width: 6em; }
ul#navlist li a:hover { color: rgb(255,255,255); background-color: #400; }

#content    { background-color: #ffc; padding: 10px 10px 48px; position: absolute; top: 160px; left: 35%; width: 60% ;}



ul#nav  { float :left; padding-left: 0px; margin-left: 0px;text-align: center; list-style-type: none;  width: 100%; }
ul#nav li { display: inline; }  

ul#nav a { color: #EDFCF8; font-size: 0.8em; font-family:Verdena, Ariel, helvetica ; text-decoration: none; background-color: #005B5B; display: inline; padding: 0.2em 1em; border-top: #000; border-right: #000; border-bottom: 1px solid #000; border-left: #000; width: 12em ;}
ul#nav a:hover { color: rgb(255,255,255); background-color: #000 ;}


.navlet  { float :left; padding-left: 0px; margin-left: 0px;text-align: center; list-style-type: none;  width: 100%;  }
.navlet li { display: inline; }  
.navlet a { color: #EDFCF8; font-size: 1em; font-family: Verdena, Ariel, helvetica ; text-decoration: none; background-color: #005B5B; display: inline; padding: 0.2em 1em; border-top: #000; border-right: #000; border-bottom: 1px solid #000; border-left:1px #000; width: 12em ;}
.navlet a:hover { color: rgb(255,255,255); background-color: #000 ;}
.navlet li a:active {color:#FFFF00; background-color: #008040 ;}
.gallerystyle {float :right;}

.gallerystyle img { background-color :white; 
padding :.5em ; 
margin :3px; 
border : 1px solid grey;}