@charset "UTF-8";

/*

Whakatane Hotel

*/

html	{
}

body	{
background:#28394a;
}


/* */


.button	{
display: inline-block;
color:#fff;
font-family: 'FuturaStd_Book', Arial, sans-serif;
font-size: 17px;
line-height:17px;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:#b99d3a;
border:0;
border-radius:2px;
padding:10px 13px 8px 13px;
margin:0;
-webkit-transition:0.15s;
transition:0.15s;
}

input.button	{
font-weight:normal;
}

.button.blue	{
background:#28394a;
}
.button.white	{
color:#000;
background:#fff;
}

.button.arrow	{
padding-right:26px;
}
.button.arrow::after	{
content:'';
width:0;
height:0;
position:absolute;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-left:6px solid #fff;
margin:1px 0 0 7px;
}

.button.arrowLeft	{
padding-left:26px;
}
.button.arrowLeft::before	{
content:'';
width:0;
height:0;
position:absolute;
border-top:6px solid transparent;
border-bottom:6px solid transparent;
border-right:6px solid #fff;
margin:1px 0 0 -13px;
}

.button.white.arrow::after	{
border-left:6px solid #000;
}
.button.white.arrowLeft::before	{
border-right:6px solid #000;
}		

.button:hover	{
color:#fff;
text-decoration:none;
background-color:#eac50c;
-webkit-box-shadow:1px 1px 4px 0px rgba(0,0,0,0.6);
box-shadow:1px 1px 4px 0px rgba(0,0,0,0.6);
cursor:pointer;
}

.button.blue:hover	{
background-color:#4a657f;
}

.button.white:hover	{
color:#000;
background-color:#f7f0c2;
border-color:#fff;
}


.button:active	{
border-color:transparent;
-webkit-box-shadow:
0 0 0 2px #fff,
0 0 10px 0px #000;
box-shadow:
0 0 0 2px #fff,
0 0 10px 0px #000;
}




form  {
margin:0;
padding:0;
}
textarea, select   {
font-family:Arial, Helvetica, sans-serif;
}

.inputText::-webkit-input-placeholder {
color: #000;
font-family:Arial, sans-serif;
font-size:15px;
font-size: 1.5rem;
font-style:italic;
opacity:0.6;
}
.inputText:-moz-placeholder {
color: #000;
font-family:Arial, sans-serif;
font-size:15px;
font-size: 1.5rem;
font-style:italic;
opacity:0.6;
}
.inputText::-moz-placeholder {
color: #000;
font-family:Arial, sans-serif;
font-size:15px;
font-size: 1.5rem;
font-style:italic;
opacity:0.6;
}
.inputText:-ms-input-placeholder {  
color: #000;
font-family:Arial, sans-serif;
font-size:15px;
font-size: 1.5rem;
font-style:italic;
opacity:0.6;
}
.inputText	{
color:#000;
font-family:Arial, sans-serif;
font-size:15px;
font-size: 1.5rem;
background:rgba(255,255,255,0.8);
border:1px solid rgba(72,72,72,0.6);
border-radius:4px;
outline:none;
padding:6px;
margin:0 0 3px 0;
opacity:1;
-webkit-transition:0.1s;
transition:0.1s;
}
.inputText:focus	{
background:rgba(255,255,255,1);
border:1px solid #fff;
-webkit-box-shadow:
0 0 8px 0 #eac50c, inset 1px 1px 3px 0 rgba(0,0,0,0.5);
box-shadow: 
0 0 8px 0 #eac50c, inset 1px 1px 3px 0 rgba(0,0,0,0.5);
opacity:1;
}



.pageWrap	{
position:relative;
max-width:1260px;
margin:0 auto;
}
body.home .pageWrap	{
}
.pageWrap.nonRelative	{
position:inherit;
}

	
section.content	{
padding:60px 0 50px 0;
}
body.home section.content	{
}
section.content img	{
max-width:100%;
}
section.content img[style]	{
max-width:100% !important;
height:auto !important;
}


.pageWhite	{
background:#fff;
}



nav.social	{
}
nav.social a	{
float:left;
display:block;
width:37px;
height:36px;
background:url(../images/social.png);
background-size:auto 100%;
border-radius:0;
margin-left:4px;
-webkit-transition:0.15s;
transition:0.15s;
}
nav.social a.facebook	{
background-position:0 0;
}
nav.social a.googleplus	{
background-position:-37px 0;
}
nav.social a.linkedin	{
background-position:-74px 0;
}
nav.social a.tripadvisor	{
background-position:-111px 0;
}
nav.social a:hover	{
-webkit-box-shadow:
0 0 0 1px #fff;
box-shadow:
0 0 0 1px #fff;
}
nav.social a:active	{
-webkit-box-shadow:
0 0 0 1px #000, 0 0 8px 6px #fff;
box-shadow: 
0 0 0 1px #000, 0 0 8px 6px #fff;
}



header	{
background:#28394a url(../images/header.jpg) center -60px no-repeat;
}
body.home header	{
background-position:center;
}

header .hero	{
max-width:1260px;
height:300px;
overflow:hidden;
margin:0 auto;
}
body.home header .hero	{
height:auto;
}
header .hero img	{
display:block;
max-width:100%;
margin-top:-60px;
}
body.home header .hero img	{
margin-top:0;
}

header .blackStrip	{
position:absolute;
width:100%;
background:rgba(0,0,0,0.65);
}
header .blackStrip .pageWrap	{
height:54px;
}
header .social	{
float:right;
margin-top:9px;
}


header .whiteStrip	{
position:absolute;
top:54px;
width:100%;
background:#fff;
}
header .whiteStrip .pageWrap	{
height:130px;
}
header .whiteStrip .logo	{
position:absolute;
top:-34px;
width:205px;
}



/* Main nav */

.navWrap	{
float:right;
}

.navWrap a.bookNow	{
float:left;
display:block;
width:160px;
height:130px;
color:#fff;
font-size:16px;
font-family: 'FuturaStd_Bold', Arial, sans-serif;
line-height:134px;
text-transform:uppercase;
text-decoration:none;
text-align:center;
text-shadow:0 0 1px #b99d3a;
background:#b99d3a;
-webkit-transition:0.15s;
transition:0.15s;
}
.navWrap a.bookNow:hover	{
background:#eac50c;
}
.navWrap a.bookNow:active	{
-webkit-box-shadow:
0 0 0 1px #fff, 0 0 5px 2px #000;
box-shadow: 
0 0 0 1px #fff, 0 0 5px 2px #000;
}

.navTop	{
position:relative;
float:left;
margin:36px 23px 0 0;
z-index:400;
}
.navTop .mobileNav	{
}
.navTop ul	{
list-style:none;
padding:0;
margin:0;
}
.navTop ul li {
float:left;
position:relative;
border-bottom:2px solid rgba(185,157,58,0);
padding:0;
margin:0;
}

.navTop ul li.current {
}

.navTop ul li:hover {
position:relative;
border-bottom:2px solid rgba(185,157,58,1);
}

.navTop ul li.current > a {
color:#fffcb2;
}

.navTop ul li a {
position:relative;
display:block;
height:66px;
color:#060a09;
font-family: 'FuturaStd_Medium', Arial, sans-serif;
font-size:16px;
line-height:66px;
text-transform:uppercase;
text-decoration:none;
padding:0 23px;
margin:0;
}

.navTop ul li:hover a,
.navTop ul li:hover.current > a {
color:#25362c;
text-shadow:none;
background:;
z-index:9;
}

.navTop ul li ul li,
.navTop ul li:hover ul li {
float:none;
display:block;
height:auto;
width:auto;
text-decoration:none;
border:0;
padding:3px 0 0 0;
margin:0;
}
.navTop ul li ul li:hover {
background:none;
}
.navTop ul li ul li a,
.navTop ul li:hover ul li a {
display:block;
height:auto;
color:#fff;
font-family: 'FuturaStd_Book', Arial, sans-serif;
font-size:16px;
line-height:20px;
text-decoration:none;
text-transform:none;
background:#b99d3a;
border-radius:0;
padding:14px 5px 12px 10px;
margin: 0;
}
.navTop ul li ul li:first-child:hover a {
-webkit-box-shadow:none;
box-shadow:none; 
}
.navTop ul li ul li:last-child:hover a {
-webkit-box-shadow:none;
box-shadow:none;
}

.navTop ul li:hover ul li:hover {
}
.navTop ul li ul li.current {
}
.navTop ul li ul li.current a {
}
.navTop ul li ul li a:hover	{
text-decoration:none;
background:#eac50c;
}

.navTop ul li nav.centre {
background:#ff00ff;
position:absolute;
left:50%;
display:block;
width:0;
height:0;
z-index:98;
}
.navTop ul li div {
display:none;
position:absolute;
left:0;
width:100%;
min-width:120px;
padding-top:25px;
z-index:98;
}

.navTop ul li:hover div,
.navTop ul li:focus div {
display:block;
}

.navTop ul li div ul {
height:auto;
padding:0 0 0 0;
margin:0;
z-index:99;
}

.navTop ul li:hover ul li ul li {
background:none;
background:#CCCCCC no-repeat;
}
.navTop ul li:hover ul li ul li:hover {
background-position:0 -40px;
}

.navTop ul li:hover ul li ul {
display:none;
left:165px;
top:0;
padding-left:2px;
}
.navTop ul li ul li:hover ul {
display:block;
}

/* // Main nav */



.callouts	{
padding-top:50px;
}
.callouts span	{
position:relative;
float:left;
display:block;
width:32%;
margin:0 0 0 2%;
}
.callouts span img	{
display:block;
width:100%;
}
.callouts span.whak	{
margin:0;
}
.callouts span a	{
position:absolute;
top:50%;
left:50%;
display:block;
width:140px;
height:140px;
background-color:rgba(255,255,255,0.9);
background-repeat:no-repeat;
background-position:center;
background-size:110px;
margin:-65px 0 0 -70px;
-webkit-transition:0.15s;
transition:0.15s;
}
.callouts span.cobb a	{
background-image:url(../images/home_boxes/cobb.png);
background-size:100px;
}
.callouts span.backpackers a	{
background-image:url(../images/home_boxes/backpackers.png);
}
.callouts span.craic a	{
background-image:url(../images/home_boxes/craic.png);
}
.callouts span a:hover	{
background-color:#fff;
-webkit-box-shadow:
1px 1px 4px 0 #000;
box-shadow: 
1px 1px 4px 0 #000;
}
.callouts span a:active	{
-webkit-box-shadow:
0 0 0 1px #fff, 1px 1px 6px 3px #000;
box-shadow: 
0 0 0 1px #fff, 1px 1px 6px 3px #000;
}



.goolgeMap	{
width:100%;
}


.tableForm	{
background: #28394a;
border:1px solid #fff;
border-spacing:0;
-webkit-box-shadow:2px 2px 10px 0 rgba(0,0,0,0.5);
box-shadow:2px 2px 10px 0 rgba(0,0,0,0.5);
}
.tableForm label.error {
display:block;
color:#ff0000;
font-size:16px;
font-weight:normal;
padding:3px 0 0 7px;
}
.tableForm th	{
color:#fff;
font-size:18px;
font-weight:normal;
text-align:left;
vertical-align:top;
background:rgba(0,0,0,0.0);
border-top:1px solid rgba(255,255,255,0.2);
border-bottom:1px solid rgba(0,0,0,0.3);
padding:10px 7px 7px 11px;
}
.tableForm td	{
font-size:16px;
vertical-align:top;
background:rgba(255,255,255,0.9);
border-top:1px solid rgba(255,255,255,0.9);
border-bottom:1px solid rgba(0,0,0,0.2);
padding:10px 15px 7px 11px;
}
.tableForm td.white	{
background:#fff;
}
.tableForm tr:first-child th,
.tableForm tr:first-child td	{
border-top:0;
}
.tableForm tr:last-child th,
.tableForm tr:last-child td	{
border-bottom:0;
}
.tableForm .inputText	{
width:97%;
}

.textCentre,
.tableForm th.textCentre	{
text-align:center;
}
.textLeft,
.tableForm th.textLeft	{
text-align:left;
}
.textRight,
.tableForm th.textRight	{
text-align:right;
}
.tableForm th img,
.tableForm td img	{
max-width:none;
}




footer	{
}
footer .colLeft	{
float:left;
width:68%;
padding:36px 0 10px 0;
}
footer .logo	{
float:left;
width:150px;
margin-right:7%;
}

footer nav.navBottom	{
float:left;
margin-top:40px;
}
footer nav.navBottom ul	{
list-style:none;
padding:0;
margin:0;
}
footer nav.navBottom ul li	{
display:inline-block;
float:left;
padding:0 4px;
}
footer nav.navBottom ul li a	{
display:inline-block;
color:#fff;
font-size:14px;
text-decoration:none;
text-transform:uppercase;
border-bottom:2px solid transparent;
padding:6px 17px;
}
footer nav.navBottom ul li a:hover	{
border-color:#b99d3a;
}
footer nav.navBottom ul li div	{
width:150px;
}
footer nav.navBottom ul li div ul	{
}
footer nav.navBottom ul li div ul li	{
display:block;
float:none;
padding:2px 0;
}
footer nav.navBottom ul li div ul li a	{
text-transform:none;
border:0;
padding:0 0 0 16px;
}
footer nav.navBottom ul li div ul li a:hover	{
text-decoration:underline;
}

footer .credits	{
clear:both;
color:#fff;
font-size:12px;
padding:50px 0 0 17px;
margin:0;
}
footer .credits a	{
color:#fff;
text-decoration:none;
}
footer .credits a:hover	{
text-decoration:underline;
}

footer .colRight	{
float:right;
border-left:2px solid #b99d3a;
padding:86px 0 60px 5%;
}
footer .colRight .logos a	{
float:left;
display:block;
width:80px;
height:80px;
background-repeat:no-repeat;
background-position:center;
background-size:100%;
margin-left:37px;
}
footer .colRight .logos a.backpackers	{
background-image:url(../images/home_boxes/backpackers.png);
margin-left:0;
}
footer .colRight .logos a.cobb	{
background-image:url(../images/home_boxes/cobb_white.png);
}
footer .colRight .logos a.craic	{
background-image:url(../images/home_boxes/craic.png);
}
footer .colRight .connect	{
clear:both;
padding-top:43px;
}
footer .colRight .connect a.bookNow	{
display:inline-block;
height:36px;
color:#fff;
font-family: 'FuturaStd_Bold', Arial, sans-serif;
font-size:14px;
text-decoration:none;
text-transform:uppercase;
text-shadow:0 0 1px #b99d3a;
line-height:37px;
background:#b99d3a;
padding:0 22px;
}
footer .colRight .connect a.bookNow:hover	{
background:#eac50c;
}
footer .colRight .connect a.bookNow:active	{
-webkit-box-shadow:
0 0 0 1px #fff, 0 0 5px 2px #000;
box-shadow: 
0 0 0 1px #fff, 0 0 5px 2px #000;
}
footer .colRight .connect nav.social	{
float:right;
}



body div.roomTypesGadget,
div.roomTypesGadget table th,
div.roomTypesGadget table td 	{
font-size:14px;
}



.printYes	{
display:none;
}



.displayNone	{
display:none;
}
.floatLeft	{
float:left;
}
.floatRight	{
float:right;
}
.clearBoth	{
clear:both;
}
.clearLeft	{
clear:left;
}
.clearRight	{
clear:right;
}