body {margin:0px auto;font-family:Arial, Helvetica, sans-serif}

#base-container {margin: 0px auto; border:0px black solid; max-width: 1024px; min-width:320px;}

h1 {font-family:"Times New Roman", Times, serif}
h2 {text-decoration:underline}

/* HEADER */
.blackbar {color:#ffffff;background:#202020;line-height:2em;font-weight:bold;display:block}
.blackbarmob {color:#ffffff;background:#000000;line-height:2em;font-weight:bold;display:none}
#header {border: 0px lime solid;}
.size15 {font-size:1.2em}
.bordertanmob {border:2px #cca776 solid;display:none}
.vertmid {vertical-align:middle}
.padleft5 {padding-left:.5em;}
.mgtop15 {margin-top:1.5em;text-align:center}
.menucont {float:right}
/*.clock {color:#cca776;font-weight:bold;display:inline-block}
.clocktext {vertical-align:top;padding:.5em 0em 0em .5em;font-size:.9em;text-align:left}*/
.white {color:#ffffff}
.right {text-align:right}
.booktan {margin-top:.5em;margin-bottom:.5em;;display:inline-block;border:2px #ffffff solid;color:#ffffff;background:#4ba32f/*#2787c3*/;padding:.5em;border-radius: 10px;}
a:hover .booktan {margin-top:.5em;;display:inline-block;border:2px #4ba32f solid;color:#000000;background:#ffffff;padding:.5em}
.phone-top {margin-top:.5em;display:inline-block;}
.contact-top {margin-top:.5em;display:inline-block;margin:0em 2em;}
.lh2 {line-height:2em}
.lh15 {line-height:1.5em}

/* SKIP TO CONTENT */
    .skip {
        position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    
    a.skip:active, 
    a.skip:focus, 
    a.skip:hover {
        left: 0; 
        top: 0;
        width: auto; 
        height: auto; 
        overflow: visible;
        background:#ffffff;
        color:#000000; 
        line-height:3em
    }

	
/* CONTENT */
#content {}
#widgetContainerBox {margin-left: 10px}

#photobkg {background: #fff url('../uploads/HP-Building-1-071426.jpg') no-repeat;background-size:cover;background-position:center center;height:625px}
#photobkgin {background: #fff url('../uploads/hd-pillow.jpg') no-repeat;background-size:cover;background-position:center center;height:300px}

.linespace1 {line-height:2em}
.bluebar {background:#3279b5;color:#ffffff;display:block;margin-bottom:1em;line-height:2em;text-align:center;font-weight:bold;}
.bluebar a:link,.bluebar a:visited {color:#ffffff;text-decoration:none}

#specials {}
.no-decoration {text-decoration:none}
.colorblk {color:#000000}
.moreinf {text-align:center;margin:1em;padding:.5em;background:#948567;font-weight:bold;color:#ffffff;border-radius: 25px;}
.moreinf:hover {text-align:center;margin:1em;padding:.5em;background:#aeaeae;font-weight:bold;color:#000000;border-radius: 25px;}


#testimonials {}
.testbar {text-align:center}
.testbottom {}
.testcont {margin:1em}

/* IMAGES */
img {
    max-width: 100%;
    height: auto;
    /* width: 100%;        to make the image responsive */
}
/* ==== PHONE ==== */
.phone1 {display:inline-block}
.phone2{display:none}

/* ====== ROOMS & SUITES PAGE ====== */
.bookres {margin-top:.5em;;display:inline-block;border:2px #3279b5 solid;color:#ffffff;background:#3279b5;border-radius: 10px;}
.bookres>a:link,.bookres>a:visited  {color:#ffffff;display:block;padding:1.5em;}
.bookres:hover {margin-top:.5em;;display:inline-block;border:2px #3279b5 solid;color:#705742;background:#000000;}
.bookres:hover>a:link {/*color:#000000*/}

/* Employment Page */
.empapp {text-align:center;margin:1em;padding:1em;background:#aeaeae;font-weight:bold;color:#000000;border-radius: 10px;width:50%;float:right}
.empapp:hover {text-align:center;margin:1em;padding:1em;background:#40a295;font-weight:bold;color:#ffffff;border-radius: 10px;width:50%}


/* HOR FORM */
.res-container {background:#3279b5;color:#ffffff;margin:0 auto;max-width:960px;z-index:100000;top:100px;position:relative;padding:.5em 0em;border:2px #202020 solid;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px;}
.res-containerhp {background:#4ba32f/*#2787c3*/;color:#ffffff;margin:0 auto;/*max-width:960px;z-index:100000;top:-120px;position:relative;*/padding:.5em 0em;/*border:2px #ffffff solid;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px;*/}
.res-containerhp2 {display:none;}
.res-fields {margin-bottom:0px;border:0px #000000 solid;text-align:center;padding:10px 0px 10px 20px;background-color:#4ba32f/*#2787c3*/;}


.res-fields label {color: #ffffff; font-weight: bold;}
.res-fields label:after { content: ": " }
input, select { margin-right: 5px; }
#resbw label {color: #000000; font-weight: bold;display: block; padding: 3px 5px 0px 0px; }
#resbw label:after { content: ": " }
#resbw input, select { margin-right: 5px;padding-bottom:5px; }
.searchbutbw {padding: 5px 0px 5px 0px}

.arrivedate {display:inline-block;margin-right:1em}
.deptdate {display:inline-block;margin-right:1em}
.numadults {display:inline-block;margin-right:1em}
.numchildren {display:inline-block;margin-right:1em}
.roomtype {display:inline-block;margin-right:1em}
.searchbut {display:inline-block;margin-right:1em}


/* FOOTER */

#footer {border:0px #c0c0c0 solid;background:transparent;}
.rgtbdr {border-right:1px #ffffff dashed}
.scmedia {display:block}
.blackbarft {background: #4ba32f url('../images/diagonales-decalees.png') repeat;/*background:#4ba32f #2787c3*/;display:block;border-top:22px #202020 solid;margin-bottom:1em;color:#ffffff;padding:1em}
.blackbarft a:link {color:#ffffff}
.ftlogo {max-width:270px}
.ftassoc {max-width:120px}
.ftlink {font-size:1.3em;font-weight:bold;padding-left:5px;padding-bottom:.5em;}
.ftlink a:link  {color:#ffffff;display:block;text-decoration:underline}
.ftlink a:visited {color:#000000;display:block;text-decoration:underline}
.martop {margin-top:17px}
.marbtm {margin-bottom:.7em}

/* COPYRIGHT TAG */
.ct {font-size: .8em; text-align: center;}

/* PPP DESGIN TAG */
.pdt {color:#000000;font: 8pt "Times New Roman", Times, serif; text-align: right;padding:7px;border-top:0px #b71f24 solid;background:#ffffff}
.pdt a:link {color:#000000}
/* BACK TO TOP */
.bttbutton {
    background-color: #000000; /* Green */
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 50px;
}

.bttbutton1 {
    background-color: #ee970f; 
    color: white; 
    border: 2px solid #ee970f;
}

.bttbutton1:hover {
    background-color: #000000;
    color: white;
}

.bttbutton1 a:hover {
 	display:block;
    color: white;
}

/*triangle*/
#tri {
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 25px 15px;
border-color: transparent transparent white transparent;
}

#tri:hover {
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 25px 15px;
border-color: transparent transparent #FFFFFF transparent;
}
/*=== padding for bottom of div - empty db mostly ======*/
.div50bot {padding-bottom:50px;	}

/*=== padding for bottom of div - resources etc. ======*/
.div15bot {line-height:2em;margin:10px 0px;}

/*=== padding for bottom of div - employment etc. ======*/
.div25bot {line-height:2em;padding-bottom:25px;}


/*=== Empty DB Message layout ======*/	
.empdb {margin-left:2em;}

/*=== Dashed border - specials ======*/	
.dashborder {border:1px silver dashed;padding:10px;}

/*=========================*/

/*=== Div surrounding the Inline Gallery ======*/	
.inlinegallery {/*text-align:center*/}

/*=== Inline Gallery ======*/	
.zoom {
  padding: 5px;
  /*background-color: pink;*/
  transition: transform .2s;
  width: 190px;
  height: 166px;
  margin: 0 auto;
  display:inline-block;
}

.zoom img {width:190px;height:130px;border: 1px solid #dddddd;padding: 5px;background-color: #eeeeee;}
.zoom:hover {
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari 3-8 */
  transform: scale(2); 
  top:50%;
  left:50%;
}

@media screen and (min-width: 1281px) {
	/*=== Div surrounding the Inline Gallery ======*/	
.inlinegallery {margin-left:0}
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
	/*=== Div surrounding the Inline Gallery ======*/	
.inlinegallery {margin-left:2.5em}
}


@media screen and (min-width: 0px) and (max-width: 767px){
	/*=== Div surrounding the Inline Gallery ======*/	
.inlinegallery {text-align:center}
	
	.zoom img {width:200px;height:150px;border: 1px solid #dddddd;padding: 5px;background-color: red;}
	.zoom:hover {
 	 -ms-transform: scale(1.5); /* IE 9 */
 	 -webkit-transform: scale(1.5); /* Safari 3-8 */
 	 transform: scale(1.5); 
}
}


/*================ MENU ==================*/
/*========================================*/

/*Strip the ul of padding and list styling*/
#nav ul {
	list-style-type:none;
	margin:auto;
	/*padding:1em;
	position: absolute;*/
	width:auto;
	text-align:center;
	font-weight:bold;
}

/*Create a horizontal list with spacing*/
#nav li {
	display:inline-block;
	float: left;
	margin-right: 1px;
}

/*Style for menu links*/
#nav li a {
	display:block;
	/*min-width:80px;*/
	/*height: 50px;*/
	text-align: center;
	/*line-height: 50px;*/
	color: #000000 /*#b8986c*/;
	background: #ffffff;
	text-decoration: none;
	padding-right:10px;
	padding-left:.5em;
	line-height:3em;
}

/*Hover state for top level links*/
#nav li:hover a {
	background: #000000 /*#cca776*/;
	padding-right:10px;
	color:#ffffff;
}

/*Style for dropdown links*/
#nav li:hover ul a {
	background: #000000 /*#cca776*/;
	color: #ffffff;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
#nav li:hover ul a:hover {
	background: #19c589;
	color: #b8986c;
}

/*Hide dropdown links until they are needed*/
#nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
#nav li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#nav li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
#nav ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
#nav .show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #ffffff;
	background: #000000;
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox*/
#nav input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 768px){
	/*Make dropdown links appear inline*/

#nav ul {
		position: static;
		display: none;
		list-style-type:none;
		margin:auto;
		padding:1em;
		width:auto;
		text-align:center;
		font-weight:bold;
	}
	/*Create vertical spacing*/
#nav li {
		/*margin-bottom: 1px;*/
		border-bottom: 1px solid #000000 /*#b8986c*/
	}
	/*Make all menu links full width*/
#nav ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
#nav .show-menu {
		display:block;
	}
	
	#nav li a {
	/*height: 1.5em;*/
	padding-top:1em;
	display:block;
	text-align: center;
	color: #000000 /*#b8986c*/;
	background: #ffffff;
	text-decoration: none;
	padding-right:0px;
	padding-left:0em;
	line-height:3em;
}

/*Hover state for top level links*/
#nav li:hover a {
	background: #000000;
	padding-right:0px;
	color:#ffffff;
}
.menucont {float:none}
	
}

.clr {clear:both}
#hdtop {background:#ffffff;color:#fff;border-bottom:0px #ffffff solid;height:2.5em}
.hdtopc {margin:auto;max-width:960px;}




/*=============START AT MEDIA ============*/
/*=======================================*/

/* mobile portrait */

@media screen and (min-width: 0px) and (max-width: 479px) {
	.hide {display:none}
}

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

	
	/* ==== PHONE ==== */
	.phone1{display:none}
	.phone2 {display:block}
	
	/*====== Head ===== */
	.bordertanmob {border:0px #cca776 solid;display: block;text-align:center}
	.blackbar {color:#ffffff;background:#000000;line-height:2em;font-weight:bold;display:none}
	.blackbarmob {color:#ffffff;background:#000000;line-height:2em;font-weight:bold;text-align:center;padding-top:.5em;display:block}
	
	#photobkg {background: #fff url('../uploads/hp-building-3-112123.jpg') no-repeat;background-size:cover;background-position:center center;height:200px}

	/*========= RESERVATION WIDGET ======== */
	.res-containerhp {display:none;background:#3279b5;color:#ffffff;margin:0 auto;max-width:960px;z-index:100000;top:-160px;position:relative;padding:.5em 0em;border:2px #202020 solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px;}
	.res-containerhp2 {display:inline-block;background:transparent;color:#ffffff;margin:0 auto;max-width:960px;padding:.5em 0em;width:100%}
	.booknowm {margin-top: .5em;display: inline-block;border: 2px #ffffff solid;color: #ffffff;background: #4ba32f;padding: .5em;border-radius: 10px;width: 80%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}
	.res-fields2 {color: #ffffff;text-align: center;line-height: 2em;} 
}

 /* mobile landscape */
@media screen and (min-width: 601px) and (max-width: 768px){

	/* ==== PHONE ==== */
	.phone1{display:none}
	.phone2 {display:block}
	
	/*====== Head ===== */
	.bordertanmob {border:0px #cca776 solid;display: block;text-align:center}
	.blackbar {color:#ffffff;background:#000000;line-height:2em;font-weight:bold;display:none}
	.blackbarmob {color:#ffffff;background:#000000;line-height:2em;font-weight:bold;text-align:center;padding-top:.5em;display:block}

	#photobkg {background: #fff url('../uploads/hp-building-3-112123.jpg') no-repeat;background-size:cover;background-position:center center;height:300px}
	
	/*========= RESERVATION WIDGET ======== */
	.res-containerhp {display:none;background:#3279b5;color:#ffffff;margin:0 auto;max-width:960px;z-index:100000;top:-160px;position:relative;padding:.5em 0em;border:2px #202020 solid;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius: 10px;}
	.res-containerhp2 {display:inline-block;background:transparent;color:#ffffff;margin:0 auto;max-width:960px;padding:.5em 0em;width:100%}
	.booknowm {margin-top: .5em;display: inline-block;border: 2px #ffffff solid;color: #ffffff;background: #4ba32f;padding: .5em;border-radius: 10px;width: 80%;	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
	.res-fields2 {color: #ffffff;text-align: center;line-height: 2em;}
}


/* ipad portrait */
@media screen and (min-width: 769px) and (max-width: 1024px){

	
	#photobkg {background: #fff url('../uploads/hp-building-3-112123.jpg') no-repeat;background-size:cover;background-position:center center;;height:400px}

} 

@media screen and (min-width: 1025px){



}