/* Mountain Lodge Shepherd's Hut Holidays main CSS Document */
/* Designed by Web Intrigue, December 2010 */
/* Last Modified by Web Intrigue, October 2015 */

/* Main page styling */

body {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: small;
	font-style: normal;
	font-weight: normal;
	color: #333333;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #FF9E5E;
	/*background-image: url(../images/mlsh-body-backgrd.jpg);
	background-position: left top;
	background-repeat: repeat-x;*/
	background-color:#EFEFE5;
	background-image: url(../images/body-bg-2.jpg);
	background-repeat: repeat;	
}

td img {
	display: block;
}

h1 {
	font-family: "Great Vibes", "Times New Roman";
	font-size: 30px;
	text-align: left;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 6px;
}

h2 {
	font-family: "Great Vibes", "Times New Roman";
	font-size: 30px;
	font-weight: normal;
	margin: 0px;
}	

h3 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	margin: 0px;
}

h4 {
	font-size:18px;
	margin:0;
	padding:0;
}

p {
	color: #1E1E1E;
	font-size:16px;
}

p.red, .red, #midcol p.red, #rightcol p.red {
	color: red;
}

p.small {
	font-size: x-small;
}

p.floatright {
	float: right;
	padding-right: 0px;
	font-size: 10px;
}	

p.quote {
}			
	
img {
	border: 0px;
}

img.right {
	float: right;
}

img.left {
	float: left;
}

a:link {
	text-decoration: none;
	color: #FFD047;
	font-style: italic;
}

a:active {
	text-decoration: none;
	color: #FFD047;
	font-style: italic;
}

a:visited {
	text-decoration: none;
	color: #FFD047;
	font-style: italic;
}

a:hover {
	text-decoration: underline;
	color: #FFD047;
	font-style: italic;
}	


/* Layer Definitions */

/* This wrapper centres the page content */
/* It is important to set the margins, page width and position to relative */
#centralposition {
	position: relative;
	width: 1102px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border: none;
}	

#pagebanner {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1102px;
	height: 256px;
	margin: 0px;
	border: none;
	padding: 0px;
	/*z-index: 1;*/
}

#pagebanner p {
	margin-left: 1px;
	margin-right: 1px;
	margin-top: 10px;
	font-size: 15px;
	color: white;
	font-weight: bold;
}

#pagebanner img.right {
	position: absolute;
	top: 0px;
	left: 1102px;
	margin: 0px;
	padding: 0px;
	float: right;
}
	

#pagemain {
	position: absolute;
	top: 256px;
	left: 0px;
	width: 1102px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/mlsh-page-backgrd.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	border: none;
	background-color:#a8451e;
	background-color:#634f50;
	background-color:#6FA3D2;
	background-color:#9CB4BE;
}

#pagemain p {
	margin-left: 1px;
	margin-right: 1px;
}

#pagemain h2.large {
	margin-top: 30px;
}	
	

/* sub-layers of the pagemain */	
#maincontent {
	position: relative;
	top: 0px;
	width: 1102px;
	padding-top: 11px;
	padding-left: 78px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border: none;
	z-index: 3;
	min-height:600px;
}	

#maincontent a {
	text-decoration: none;
	color:#9F6;
	color:#006;
	font-weight:normal;
	font-style: italic;
}

#maincontent a:hover {
	text-decoration: underline;
	color: #FFF;
} 

#pagefooter {
	width: 1103px;
	height: 140px;
	margin: 60px 0px 0px 0px;
	padding: 0px;
	z-index: 1;
	background-color: #675343;
	border-top-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color:#FFD047;
	float: left;
}

#pagefooter img {
	position: relative;
	top: -202px;
	left: 57px;
	margin: 0px;
	padding: 0px;
	float: right;
}

#pagefooter img.left {
	position: relative;
	top: -196px;
	left: -58px;
	margin: 0px;
	padding: 0px;
	float: left;
}

#pagefooter p {
	font-family: "Great Vibes", "Times New Roman";
	color: white;
	font-size: 32px;
	padding: 0px;
	margin: 30px 0px 0px 0px;
}

#pagefooter p.design {
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-align: right;
	margin: 0px;	
}

/* sub-layers of the maincontent */
#topbar {
	width: 959px;
	border: none;
}

#topbar img {
	float: right;
	margin: 0px;
	padding:0px;
	border: 1px solid #FFF;
}	

#topbarleftpic {
	position: absolute;
	top: -100px;
	left: 78px;
	width: 329px;
	height: 248px;
	z-index:10;
}

#topbarleftpic img {
	margin: 0px;
	padding: 0px;
	border: 1px solid #FFF;
}			

/* menu layer styling */
#menu {
	position: absolute;
	top: 100px;
	margin: 0px;
	left: 78px;
	min-width: 960px;
	text-align: center;
	padding: 0px;
	vertical-align: middle;
	z-index: 4;
	background-color: #D9CFC6;
	border: 1px solid #614E3F;
}

#woodmanshutmenulayer {
	position:absolute;
	left:140px;
	top:123px;
	width:250px;
	/*height:100px;*/
	visibility:hidden;
	font-size: medium;
	text-align: center;
	padding:0;
	vertical-align: middle;
	z-index:50;
	background-color: #D9CFC6;
	border: 1px solid #614E3F;
}

#toilethutsmenulayer {
	position:absolute;
	left:300px;
	top:123px; 
	width:250px;
	/*height:100px;*/
	visibility:hidden;
	font-size: medium;
	text-align: center;
	padding:0;
	vertical-align: middle;
	z-index:50;
	background-color: #D9CFC6;
	border: 1px solid #614E3F;		
}

#menu div, #woodmanshutmenulayer div, #toilethutsmenulayer div {
	color: black;
	font-family:"Sofia", Arial;
	font-size: 16px;
	top: 0px;
	margin-top: 0px;
	padding-top: 2px;
	padding-bottom: 2px;
	/*padding-left: 16px;
	padding-right: 16px;*/
	padding-left: 24px;
	padding-right: 24px;
	margin: 0px;
	float: left;
}

#woodmanshutmenulayer div, #toilethutsmenulayer div {
	padding-left:0;
	padding-right:0;
	width:100%;
}


#menu a, #woodmanshutmenulayer a, #toilethutsmenulayer a {
	text-decoration: none;
	color: black;
	font-weight:normal;
	font-style: normal;
}

#menu a.selected, #woodmanshutmenulayer.selected, #toilethutsmenulayer.selected {
	font-weight:normal;
	text-decoration: underline;
}	

#menu a:hover, #woodmanshutmenulayer a:hover, #toilethutsmenulayer a:hover {
	text-decoration: underline;
	color: black;
	font-weight: normal;
	font-style: normal;
} 

#woodmanshutbtn {
}

#toilethutsbtn {
}


/*leftcol styling */
#leftcol {
	position: relative;
	z-index: 3;
	top: 144px;
	left: 0px;
	width: 202px;
	padding: 0px;
	border: none;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 100px;
	float: left;
	border: none;
}

#leftcol p {
	font-size: 16px;
	margin: 0px;
	color:#fff;
}

#leftcol p.telephone {
	font-size: 29px;
	margin: 0px 0px 8px 0px;
	color: #333333;
}

#leftcol p.co-details {
	font-size:x-small;
}

#leftcol img {
	margin:0;
	padding:0;
	display: inline;
	border: 1px solid #FFF;
}

#leftcol img.nobg {
	background: none;
}		

/* midcol styling */
#midcol {
	position: relative;
	z-index: 3;
	top: 2px;
	left: 18px;
	width: 404px;
	padding: 0px 0px 0px 0px;
	border: none;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 80px;
	float: left;
	border: none;
	padding-top: 6px;
}

#midcol p {
	margin: 6px 0px 6px 0px;
	font-size: 16px;
}

#midcol p.intro {
	font-size:17px;
	margin-top:0;
}

#midcol p.promote {
	font-size:25px;
	color:red;
	text-align:center;
}

#midcol .highlight {
	width:100%;
	border-radius:3px;
	padding:0 0 20px 0;
	margin:90px 0 0 0;
	background-image: url(../images/paper-backgrd.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	-moz-box-shadow: 3px 3px 5px #000;
	-webkit-box-shadow: 3px 3px 5px #000;
	box-shadow: 3px 3px 3px #000;
	transform:rotate(-2deg);
	-ms-transform:rotate(-2deg); /* IE 9 */
	-webkit-transform:rotate(-2deg); /* Safari and Chrome */
}

#midcol .highlight p {
	padding:5px 10px 5px 10px	
}

#midcol .highlight h4 {
	padding:10px 10px 0 10px;
}

#midcol .highlight .pin {
	position:relative;
	top:-5px;
	left:188px;
	width:36px;
	height:53px;
	background-image: url(../images/pin-2.png);
	background-repeat: no-repeat;
	background-position: left top;			
}

#midcol img {
	margin:0;
	padding:0;
	display: inline;
	border: 1px solid #FFF;	
	margin-top:20px;
}

/* rightcol styling */
#rightcol {
	position: relative;
	z-index: 3;
	top: 0px;
	left: 35px;
	width: 318px;
	padding: 0px;
	border: none;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 80px;
	float: left;
	padding-left: 0px;
	padding-top: 15px;
	color:#fff;
}

#rightcol p {
	font-size: 16px;
	margin-bottom: 9px;
	margin-top: 2px;
	color: #fff;
}

#rightcol p.email {
	font-size: 20px;
	margin: 0px;
}

/*#leftcol p.piclabel, #rightcol p.piclabel {
	margin: 0px 0px 5px 0px;
	font-weight:normal;
	font-size: 14px;
	padding-bottom:4px;
}*/

#leftcol .pic, #rightcol .pic, .lowerpage .pic, #midcol .pic  {
	position: relative; 
	width: 100%; /* for IE 6 */
}

.lowerpage .pic {
	float:left;
	width:25%;
	margin-bottom:20px;	
}

#topbarleftpic  span.piclabel, #leftcol .pic span.piclabel, #rightcol .pic span.piclabel, div.lowerpage span.piclabel, #midcolpic .pic span.piclabel {
	position: absolute; 
	bottom:0; 
	left: 0; 
	width: 100%; 
	margin: 0;
	font-weight:normal;
	font-size: 14px;
	padding:0;
	opacity:0.6;
	filter:alpha(opacity=60); /* For IE8 and earlier */
}

#topbarleftpic span.piclabel img, #leftcol .pic span.piclabel img, #rightcol .pic span.piclabel img, div.lowerpage span.piclabel img, #midcol .pic span.piclabel img {
	padding:0;
	margin:0;	
}

#rightcol h2, h2.white {
	color:#fff;	
	font-size:36px;
	margin-top:15px;
}

#rightcol .pic h2 {
	font-family: "Great Vibes", "Times New Roman";
	font-size: 28px;
	font-weight: normal;
	margin: 0px;
	padding-bottom:5px;
}

#rightcol img {
	margin:0;
	padding:0;
	display:inline;
	border:1px solid #FFF;		
}

		
/* contact form styling */
#midcol table.contactform {
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-top:10px;
	background-color: #D0C79F;
	width: 100%;
	border: none;
	font-size: small;
	padding-top: 0px;
	padding-bottom: 20px;
	color: black;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#midcol table.contactform td {
	text-align: left;
	vertical-align: top;
	margin: 2px;
	padding: 2px 5px 2px 5px;
	font-size: 13px;
}

#midcol table.contactform p {
	font-size: 12px;
	color: black;
	margin: 0px;
}

#midcol table.contactform input {
	font-size: 13px;
	color: black;
}

#midcol table.contactform select {
	font-size: 12px;
	color: black;
}	


#socialmedia {
	/*float:left;*/
	width:100%;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:10px;
	margin-top:10px;
	background-color:#fff;
	border-radius:5px;
} 	

#socialmedia img {
	margin:0;
	padding:0;
}

#socialmedia p {
	margin:10px;
	color: #1E1E1E;
}

#socialmedia a{
	color:white;
	font-style:none;
}

#socialmedia a:hover {
	color:white;
	font-style:none;
		
}

/* Style all font awesome icons */
#socialmedia .fa {
  margin:10px;	
  padding: 10px;
  font-size: 30px;
  width: 40px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

/* Add a hover effect if you want */
#socialmedia .fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
#socialmedia .fa-facebook {
  background: #3B5998;
  color: white;
}

/* Instagram */
#socialmedia .fa-instagram {
  background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
  color: white;
} 

div.xlhutdesc, div.xlhutlist {
	width:50%;	
}

div.xlhutdesc p, div.xlhutlist li {
	color:#fff;	
}

div.xlhutlist ul {
	padding-left:15px;	
}

div.xlhutlist li {
	font-size: 16px;
}

div.lowerpage, div.slidecontainer {
	width:942px;
	min-height:200px;
	background-color:#7294A3;
	z-index: 1;
	float:left;
	margin-top:20px;
	padding-left:80px;
	padding-right:80px;
	padding-top:20px;
	padding-bottom:20px;
}

div.slidecontainer {
	width:940px;
	background-color:transparent;	
}

div.lowerpage h2 {
	color:#fff;	
	padding-bottom:10px;
}

div.lowerpage img {
	width:98%;
	height:auto;
	border: 1px solid #FFF;
}

div.lowerpage .piclabel img {
	width:15px;	
}

/* Browser Resets */
.flex-container a:active,
.flexslider a:active {outline: none;}
.slides,
.flex-control-nav {margin: 0; padding: 0; list-style: none;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

.flexslider {
	padding-bottom:40px;	
}

.flex-control-nav {
	bottom:10px;	
}

.slides p {
	font-size:20px;	
}

.slides p.small {
	font-size:15px;	
}

.slides img {
	width:25%;
	max-width:316px;
	height:auto;
	margin-left:10px;
}

.slidepic {
	position:relative;
	width:40%;
	float:right;
	max-width:316px;
	height:237px;
	background-color:#F8F8F8;
	margin-left:10px;
}

.slides img.flright {
	float:right;	
}