/*
''template details start''
'name:Page
'primary:true
'serial:1000
'cssFile:template_page.css
'aspFile:template_page.asp
''template details end''
*/

/* defaults - copied from CMS2016.css so documents will inherit these styles in editing mode 
	* { vertical-align:baseline; font-weight:inherit; font-family:inherit; font-style:inherit; font-size:100%; border:0 none; outline:0; padding:0; margin:0; }*/
	html, body { margin:0; padding:0; font-family:'Open Sans', sans-serif; font-weight:400; color:#555; }
	a { color:#07C; text-decoration:none; }
	a:hover { opacity:0.9; }
	p { margin:1em 0; }
	hr { height:0; border:none; border-top:#eee solid 1px; margin:1.5em 0; }
	hr.noLine { border:1px solid #fff; }
	ul, ol { margin:1em 0; }
	ul li, ol li { margin:0 0 0 30px; }
	b, strong { font-weight:bold; font-weight:600; }
	.clear { clear:both; }
	iframe { width:100% !important; display:block; }
	.box { padding:30px; border:1px solid #e6e6e6; box-sizing:border-box; }
	.note { padding:20px; background:#fffacd; font-style:italic; font-size:90%; }
/* defaults - copied from CMS2016.css so documents will inherit these styles in editing mode */

.row { max-width:1100px; } /* set the max width of the website row */

/* colours - first is for CMS editor, second is to overide CMS2016.css */
.btn, .row .btn { background:#0078d4; color:#fff; }
.bodyStyle .btn:hover { opacity:0.9; }
.box, .row .box { border:1px solid #e6e6e6; }

/* logo */
.logo { font-family:'Roboto Slab'; font-weight:400; color:#fff; font-size:100%; text-transform:uppercase; text-align:center; line-height:100%; background:#0078d4; }
.logo span { font-family:'Open Sans'; font-weight:300; font-size:50%; line-height:150%; display:block; }

/* header */
#headerBlock { padding:30px 0 0; }
.pageHeader #headerBlock { background:url(/~images/template/background_header.jpg) top center no-repeat; box-sizing:border-box; }
.pageHeader .headerLogo { font-size:350%; }
.pageHeader .headerLogo .logo { padding:60px; }

/* datepicker */
.headerBook {text-align:center;margin-top: 50px;}
.headerBook .datepicker-button{background: #0078d4;}
.headerBook .datepicker-button:hover {background: #0078d4;}

/* footer */
.cMap { margin-top:20px; }
#footerBlock { height:700px; box-sizing:border-box; background:url(/~images/template/background_footer.jpg) top center no-repeat; }
.footerCopy { text-align:center; color:#ccc; font-size:80%; }
.footerCopy a { color:inherit; }
.footerLogo { padding:150px 0; text-align:center; font-size:300%; }
.footerLogo .logo { padding:60px 45px; display:inline-block; max-width:350px; box-sizing:border-box; box-shadow:0 5px 15px rgba(0,0,0,0.3); }

/* opening */
.opening { font-family:'Open Sans Condensed'; font-weight:600; color:#fff; text-transform:uppercase; text-align:center; line-height:100%; padding:15px 0;
	 box-shadow:0 1px 3px rgba(0,0,0,0.4); position:relative; }
.opening {
background: #c20000; /* Old browsers */
background: -moz-linear-gradient(left,  #c20000 0%, #d82727 50%, #c20000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #c20000 0%,#d82727 50%,#c20000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #c20000 0%,#d82727 50%,#c20000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c20000', endColorstr='#c20000',GradientType=1 ); /* IE6-9 */ }
.pageHeader .opening { font-size:90%; transform:rotate(20deg); overflow:hidden; position:fixed; top:25px; right:-130px; width:500px; z-index:9999; }

/* page */
.bodyStyle { font-size:100%; }
.intro { text-align:center; font-size:115%; padding:50px; padding-top:0; font-family:'Roboto Slab'; color:#777; }
.row h1, .row h2, .row h3 { font-family:'Roboto Slab'; font-weight:400; color:#0078d4; }
.row h1.pageTitle { font-size:175%; text-transform:uppercase; text-align:center; line-height:100%; border:none; margin:50px 0; padding:0; }
.row h2 { font-size:150%; }
.row h3 { font-size:110%; color:#333; }
.mapDiv { border:20px solid #fff; }

/* article */
.row .box,
.row .article { background:#f1fdff; padding:80px 80px 90px; border:none; margin:0 0 30px 0; }
.article .fa-ul { margin:0; line-height:150%; }
.article .fa-ul a { color:inherit; }
.article .fa-ul a:hover { color:#0078d4; opacity:0.9; }
.article .fa { color:#0078d4; }
.cMap .article { background:url(/~images/template/background_map.jpg) center center no-repeat; max-width:1100px; max-height:399px; }
.row .article h4.subtitle { font-weight:300; color:#aaa; }
.row .roomtype h3.subtitle { display:none; }
.full-article .teaser { margin:1em 0; font-weight:600; }
.articles-teaser h4.subtitle { margin:0 0 0.5em 0; }

/* roomtype no photos */
.row .roomtype h2.maintitle, 
.row .roomtype h3.subtitle, 
.row .roomtype h4.subtitle, 
.row .roomtype .teaser, 
.row .roomtype .description, 
.row .roomtype .features, 
.row .roomtype .availability { width:100%; padding-right:0; }



/*=======================================================*/
/*======================= MOBILE ========================*/
/*=======================================================*/

@media only screen and (max-width: 1200px) 
{
#pageOuter { padding:0 1em; }
.cMap { margin:1em; }
}

@media only screen and (max-width: 960px) 
{
.bodyStyle { font-size:95%; }
#headerBlock { padding:0; }
.pageHeader .headerLogo,
.pageHeader .opening { display:none; }
.row .box, .row .article { padding:2.5em; margin:0 0 2.5em 0; }
.row h1.pageTitle { font-size:150%; margin:1.5em 0; }
.row h2 { font-size:130%; }
.intro { padding:1em; padding-top:0; }
#footerBlock { height:auto; }
.footerLogo { padding:1em; }
.footerCopy { padding-bottom:2em; }
}

@media only screen and (max-width:600px)
{
.row .box, .row .article { padding:1.5em; margin:0 0 1.5em 0; }
.mapDiv { border:5px solid #fff; }
.cMap { display:none; }
.footerLogo .logo { font-size:70%; }	
}

@media only screen and (max-width:400px)
{
.footerLogo { padding:0 0.5em 0.5em; }
}


/*=======================================================*/
/*====================== NAVIGATION =====================*/
/*=======================================================*/

.headerNav ul li a { font-family:'Roboto Slab'; font-weight:400; }

/* screen */
@media all and (min-width:960px) {
.headerNav.scroll-to-fixed { background:#0078d4; }	
.headerNav .flexnav > li > a { padding:0 15px; line-height:70px; font-size:120%; }
.headerNav .flexnav > li > a:hover { background:#f1fdff; color:#0078d4; }
.headerNav .flexnav li ul li a { font-size:90%; }
}

/* mobile */
@media only screen and (max-width:960px) {
#headerBlock .headerNav { background:#0078d4; }
#headerBlock .mobile { font-family: 'Roboto Slab'; }
}