@CHARSET "UTF-8";

/* External resources */

@import url(http://fonts.googleapis.com/css?family=Arimo|Lato:700);

/* Stop the editor from having a background */

html {
  height:100%;
}

body#page {
  font-family: Arimo, Arial, Helvetica, sans-serif;
  font-size: 11pt;
  padding: 0;
  margin: 0;
  background: #e0e0e0;
  color: #606060;
  min-height:100%;
  position:relative;
  width:100%;
}

a img {
  border: none;
}

div.clearfix {
  clear: both;
}

/* Wrapper */

body>.wrapper {
	padding-bottom:145px;
}

.wrapper {
  width: 975px;
  margin: 0 auto;
}


/* Header */

.header {
  background:#272727;
  border-bottom:3px solid #80b24f;
}

.header-logo {
  height:0;
  position:relative;
  z-index:20;
  background-color: #cccccc; /* Old browsers */
  background-image: url(../img/holiday-inn-express-colchester-r.png), -moz-linear-gradient(-45deg,  #cccccc 20%, #ffffff 42%, #f5f5f5 54%, #d9d9d9 75%, #cccccc 82%);
  background-image: url(../img/holiday-inn-express-colchester-r.png), -webkit-gradient(linear, left top, right bottom, color-stop(20%,#cccccc), color-stop(42%,#ffffff), color-stop(54%,#f5f5f5), color-stop(75%,#d9d9d9), color-stop(82%,#cccccc));
  background-image: url(../img/holiday-inn-express-colchester-r.png), -webkit-linear-gradient(-45deg,  #cccccc 20%,#ffffff 42%,#f5f5f5 54%,#d9d9d9 75%,#cccccc 82%);
  background-image: url(../img/holiday-inn-express-colchester-r.png), -o-linear-gradient(-45deg,  #cccccc 20%,#ffffff 42%,#f5f5f5 54%,#d9d9d9 75%,#cccccc 82%);
  background-image: url(../img/holiday-inn-express-colchester-r.png), -ms-linear-gradient(-45deg,  #cccccc 20%,#ffffff 42%,#f5f5f5 54%,#d9d9d9 75%,#cccccc 82%);
  background-image: url(../img/holiday-inn-express-colchester-r.png), linear-gradient(135deg,  #cccccc 20%,#ffffff 42%,#f5f5f5 54%,#d9d9d9 75%,#cccccc 82%); /* W3C */
  background-position:center center, center top;
  background-repeat:no-repeat, no-repeat;
  background-size: auto auto, 70% 100%;
}

.header-logo img {
  left:25px;
  position:absolute;
  top:0;
}

div.admin-button {
  position:absolute;
  
}
div.admin-button a {}

.header-contact {
  background:#353d40;
  border-bottom:1px solid #686868;
  padding:4px 0;
  color:#cbcbcb;
  text-align:right;
  font-size:9pt;
}

.header-contact .wrapper {
	position:relative;
}

.header-contact .wrapper > div {
	padding-left:40px;
}

.header-contact .wrapper > div > * {
  vertical-align:middle;
  display:inline-block;
}

.header-contact .wrapper > div > a {
  border:1px solid #686868;
  border-radius:5px;
  color:inherit;
  text-decoration:none;
  padding:3px 5px;
  margin:0 5px;
  transition:color 0.3s, border 0.3s;
  -o-transition:color 0.3s, border 0.3s;
  -ms-transition:color 0.3s, border 0.3s;
  -moz-transition:color 0.3s, border 0.3s;
  -webkit-transition:color 0.3s, border 0.3s;
}

.header-contact .wrapper > div > a:hover {
  color:#fff;
  border-color:#999;
}

.header-contact .wrapper > div > a > * {
  vertical-align:middle;
}

.header-contact .wrapper > div > a > img {
  margin-left:3px;
}

.header-contact .wrapper div.header-social {
  margin-right:25px;
  font-size:0;
}

.header-contact .wrapper div.header-social a {
  display:inline-block;
  text-decoration:none;
  position:relative;
  border-radius:3px;
  overflow:hidden;
  margin-right:3px;
}

.header-contact .wrapper div.header-social a:after {
  content:'';
  height:100%;
  width:100%;
  top:0;
  left:0;
  position:absolute;
  background:#fff;
  opacity:0;
  transition:opacity 0.3s;
  -o-transition:opacity 0.3s;
  -ms-transition:opacity 0.3s;
  -moz-transition:opacity 0.3s;
  -webkit-transition:opacity 0.3s;
}

.header-contact .wrapper div.header-social a:hover:after {
  opacity:0.3;
}

.header #menu-btn {
	border-radius: 5px;
	cursor: pointer;
	display: none;
	font-size: 0;
	padding: 3px;
	transition: background 0.3s ease 0s;
  -o-transition: background 0.3s ease 0s;
  -ms-transition: background 0.3s ease 0s;
  -moz-transition: background 0.3s ease 0s;
  -webkit-transition: background 0.3s ease 0s;
}

.header #menu-btn:hover {
  background:#999;
}


/* Menu bar */

.navbar {
  margin-top:45px;
  text-align:right;
  font-size:0;
  font-family:lato;
}

.navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width:675px;
  display:block;
  float:right;
}

.navbar li {
  display: inline-block;
  position:relative;
  font-size:0;
  margin-left:7px;
}

.navbar ul li a {
  text-transform:uppercase;
  text-decoration:none;
  color:#fff;
  padding:10px 17px 25px;
  position:relative; 
  display:inline-block;
  font-size:9pt;
  transition:color 0.3s;
  -o-transition:color 0.3s;
  -ms-transition:color 0.3s;
  -moz-transition:color 0.3s;
  -webkit-transition:color 0.3s;
  z-index:2;
  overflow:hidden;
}

.navbar ul li > a:after {
  position:absolute;
  content:'';
  height:16px;
  background:#80b24f;
  border-radius:50%;
  width:16px;
  bottom:-7px;
  transition:opacity 0.3s;
  -o-transition:opacity 0.3s;
  -ms-transition:opacity 0.3s;
  -moz-transition:opacity 0.3s;
  -webkit-transition:opacity 0.3s;
  opacity:0;
  left:calc(50% - 8px);
  left:-moz-calc(50% - 8px);
  left:-webkit-calc(50% - 8px);
}

.navbar ul li:hover > a:after {
  opacity:1;
}

.navbar ul li>a:before {
  position:absolute;
  content:'';
  border:3px solid #80b24f;
  height:10px;
  border-radius:50%;
  width:10px;
  bottom:-7px;
  left:calc(50% - 8px);
  left:-moz-calc(50% - 8px);
  left:-webkit-calc(50% - 8px);
  animation-duration:1.2s;
  animation-timing-function:ease-out;
  animation-iteration-count:infinite;
  animation-delay:0.3s;
  opacity:0;
}

.navbar ul li:hover>a:before {
  animation-name:ping;
}

@keyframes ping {
  0% {left:calc(50% - 8px); bottom:-7px; height:10px; width:10px; opacity:1;}
  100% {left:calc(50% - 16px); bottom:-15px; height:28px; width:28px; opacity:0;}
}

@-webkit-keyframes ping {
  0% {left:-webkit-calc(50% - 8px); bottom:-7px; height:10px; width:10px; opacity:1;}
  100% {left:-webkit-calc(50% - 16px); bottom:-15px; height:28px; width:28px; opacity:0;}
}

@-moz-keyframes ping {
  0% {left:-moz-calc(50% - 8px); bottom:-7px; height:10px; width:10px; opacity:1;}
  100% {left:-moz-calc(50% - 16px); bottom:-15px; height:28px; width:28px; opacity:0;}
}

.navbar ul li:hover > a{
  color:#80b24f
}

.selectedanchor:after {
  
}

.navbar ul li a.current {
  color:#80b24f;
}

/** Drop down menus */

li.has-dropdown {
  cursor:pointer;
}

li.has-dropdown span {
  position:absolute;
  top:53px;
  left:0;
  display:none;
  text-align:left;
  width:auto;
}

li.has-dropdown span a {
  white-space:nowrap;
  padding:2px 10px;
  display:block;
  background:#272727;
}

li.has-dropdown span a:hover {
  color:#80b24f
}


/* Banner */

.banner {
  font-size:0;
  position:relative;
}

.banner:after {
  content:'';
  display:block;
  height:5px;
  background: #0672b9;
  background: -moz-linear-gradient(left,  #0672b9 0%, #1b3f8f 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0672b9), color-stop(100%,#1b3f8f));
  background: -webkit-linear-gradient(left,  #0672b9 0%,#1b3f8f 100%);
  background: -o-linear-gradient(left,  #0672b9 0%,#1b3f8f 100%);
  background: -ms-linear-gradient(left,  #0672b9 0%,#1b3f8f 100%);
  background: linear-gradient(to right,  #0672b9 0%,#1b3f8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0672b9', endColorstr='#1b3f8f',GradientType=1 );
  
}

.banner > * {
  display:inline-block;
  vertical-align:top;
}

.banner .slide-container {
	text-align:center;
	background:#272727;
	height:auto;
	position:relative;
	z-index:0;
}

.banner .slideshow#head-gallery {
	text-align:center;
	background:#272727;
	height:100% !important;
}

.banner .slideshow#head-gallery .slide {
  height:auto !important;
}

.banner .banner-right {
  width:285px;
}

.banner .green-engage {
  background:#80b24f;
  text-align:center;
  width:100%;
  padding:12px 0 10px;
}

.banner .book-online {
  font-size:13pt;
  color:#fff;
  background:#0055a5 url(../img/room-tag-background.png) left top no-repeat;
  text-align:center;
  padding:20px 0 10px;
  text-transform:uppercase;
  font-family:lato;
  height:165px;
}

.banner .book-online span {
  text-align:left;
  display:block;
  padding-left:10px;
  letter-spacing:-0.5px;
}

a.button {
  color:#fff !important;
  text-decoration:none;
  background: #8cbf2f;
  background-image: -moz-linear-gradient(top,  #8cbf2f 0%, #209a38 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cbf2f), color-stop(100%,#209a38));
  background-image: -webkit-linear-gradient(top,  #8cbf2f 0%,#209a38 100%);
  background-image: -o-linear-gradient(top,  #8cbf2f 0%,#209a38 100%);
  background-image: -ms-linear-gradient(top,  #8cbf2f 0%,#209a38 100%);
  background-image: linear-gradient(to bottom,  #8cbf2f 0%,#209a38 100%);
  background-position:0 0;
  background-repeat:repeat-x;
  background-size:10px 100%;
  padding:8px 15px 10px 25px;
  display:inline-block;
  width:auto !important;
  border-radius:5px;
  margin:4px 0;
  position:relative;
  transition:background 0.3s;
  -o-transition:background 0.3s;
  -ms-transition:background 0.3s;
  -moz-transition:background 0.3s;
  font-weight:bold;
  font-family:lato;
  -webkit-transition:background 0.3s;
}

a.button:after {
  position:absolute;
  content:url(../img/booking-arrow.png);
  left:9px;
  top:7px;
}

a.button:hover {
  background-position:0 10px;
  text-decoration:none !important;
}


/* Main */

div.main {
  background:#fff;
  box-shadow:0 0 10px -1px #666;
  margin-bottom:5px;
}


/* Content */

div.content {
  padding:30px 38px;
}

div.content script+link+h1 {
  display:none;
}

div.content * {
  max-width:100% !important;
}

div.content > p {
  text-align:justify;
}

div.content p {
  font-size:10pt;
  line-height:1.5em;
}
div.content ul.carousel li.slide,.slideshow#image-gallery {
  height:auto !important;
}

div.content>*:first-child,div.gallery-header>*:first-child {
  margin-top: 0;
}

div.content td>*:first-child {
  margin-top: 0;
}

div.content td>*:last-child {
  margin-bottom: 0;
}

div.content>h1:first-child {
  padding-left:36px;
  position:relative;
}

div.content>h1:first-child:after {
  content:url(../img/header-prefix.png);
  position:absolute;
  left:0;
  top:2px;
}

div.content h1,div.content h2 {
  color:#122f51;
  font-family:Lato;
  margin-bottom:0;
}

div.content h3,div.content h4,div.content h5,div.content h6 {
  color:#80b24f;
  font-family:Lato;
}

div.content h1 + h3 {
  margin-top:0;
}


/* Side bar */

div.sidebar {
  padding:0 28px 60px
}

div.sidebar>ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-spacing:10px;
}

div.sidebar>ul>li {
  display:inline-block;
  margin-left:10px;
  background:#d0e1f3;
  width:295px;
  height:250px;
  vertical-align:top;
}

div.sidebar ul li:first-child {
  margin-left:0;
}

div.sidebar>ul>li>h3:first-child {
  color:#122f51;
  font-family:lato;
  padding-left:25px;
  font-size:1.2em;
}

div.sidebar>ul>li>div {
  padding:0 15px 15px 35px;
  color:#0066cc;
  font-size:0.85em;
  position:relative;
  height:170px;
  line-height:1.5em;
}

div.sidebar>ul>li>div a {
  text-decoration:none;
  color:inherit;
}

div.sidebar>ul>li>div a:hover {
  text-decoration:underline;
}

div.button-container {
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  text-align:center;
}

div.sidebar a.button {
  text-transform:uppercase;
  font-size:0.9em;
  padding:6px 15px 6px 25px;
}

div.sidebar a.button:after {
  top:6px;
}

/** Footer */

div.footer {
  background:#272727;
  padding:15px 0;
  color:#fff;
  font-size:9pt;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
}

div.footer a {
  color:#ddd;
  transition:color 0.3s;
  -o-transition:color 0.3s;
  -ms-transition:color 0.3s;
  -moz-transition:color 0.3s;
  -webkit-transition:color 0.3s;
  text-decoration:none;
}

div.footer a:hover {
	color:#fff;
}

div.footer-upper {
	position:relative;
}

div.footer-logos > a {
	display:inline-block;
	vertical-align:middle;
	margin-left:10px;
}

div.footer-upper:after {
	clear:both;
	content:'';
	display:block;
	height:0;
}

div.footer .footer-logos {
	float:right;
}

div.footer-lower {
	margin-top:10px;
}

div.footer-lower div {
	display:inline-block;
	margin-left:20px;
}


/** gallery styles */

div.slideshow#image-gallery {
  
}

div#image-gallery a.slides-next, div#image-gallery a.slides-prev {
  background:#333;
  background: rgba(51,51,51,0.6);
  text-decoration: none;
  transition:padding 0.2s, background 0.2s;
  -o-transition:padding 0.2s, background 0.2s;
  -ms-transition:padding 0.2s, background 0.2s;
  -moz-transition:padding 0.2s, background 0.2s;
  -webkit-transition:padding 0.2s, background 0.2s;
  padding:0 5px;
}

div#image-gallery a.slides-next:hover, div#image-gallery a.slides-prev:hover {
  background: #333;
  padding:0 10px;
}

div#image-gallery * {
	padding:0;
	list-style:0;
}

div#image-gallery *:after, div#image-gallery *:before {
	display:none;
}

/** Datepicker stuff */

form.booking-form {
  text-align:center;
  margin-top:15px;
}

form.booking-form > div {
  display:inline-block;
  min-width:49%;
  position: relative;
}

form.booking-form > div > input {
  width:50px;
  margin-left:10px
}

form.booking-form > div > div {
  display:inline-block;
}

.formandu-datepicker {
  display: inline-block;
  position:relative;
  padding:5px;
}

.formandu-datepicker>button.formandu-button {
  vertical-align: bottom;
  margin: 0;
  border-radius:0;
  padding:3px 3px 2px;
  cursor:pointer;
  position:absolute;
  right:6px;
  bottom:6px;
}

div.content .formandu-datepicker-button {
  background:#53595C;
}

div.content .formandu-datepicker-display {
  display: inline-block;
  background: #fff;
  width:264px;
  max-width:calc(100% - 36px) !important;
  border: 1px solid #111;
  padding: 4px 32px 4px 4px;
}

.formandu-datepicker-calendar {
  display: none;
  position: absolute;
  top:100%;
  right:5px;
  background: #d0e1f3;
  box-shadow: 0 0 10px #444;
  width: calc(100% - 10px);
  border-radius: 3px;
  z-index: 1500;
  min-width:280px !important;
}

.formandu-datepicker-controls {
  border-bottom: 1px solid #444;
  text-align: center;
  padding: 5px;
  height: 27px;
  background: #353d40;
  color:#fff;
  font-weight:bold;
  font-family:lato;
}

.formandu-datepicker-left {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.formandu-datepicker-right {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}

.formandu-datepicker-controls .formandu-button {
  background:rgba(255,255,255,0.15);
  border-radius:0;
  cursor:pointer;
  transition:background 0.3s;
  color:#fff;
  font-weight:bold;
  font-family:lato;
}

.formandu-datepicker-controls .formandu-button:hover {
  background:rgba(255,255,255,0.3);
}

.formandu-datepicker-month {
  position: absolute;
  top: 8px;
  left: 0;
  width: 100%;
}

.formandu-datepicker-calendar table {
  border-top: 1px solid #111;
  border-left: 1px solid #111;
  border-spacing: 0;
  padding: 0;
  width: 270px;
  margin: 5px;
  width: calc(100% - 10px);
}

.formandu-datepicker-calendar td {
	width: 14.28%;
	text-align: center;
	padding: 3px;
	border-bottom: 1px solid #111;
	border-right: 1px solid #111;
	cursor: pointer;
}

.formandu-datepicker-calendar td:hover {
  background: #eeeeff; /* Old browsers */
}

.formandu-datepicker-calendar td:empty:hover {
	background: none !important;
	cursor: default !important;
}

.formandu-datepicker-calendar td.today {
	font-weight: bold;
}

.formandu-datepicker-calendar td.selected {
	background: #888;
	color: #fff;
}

.formandu-datepicker-calendar tr:first-child td,.formandu-datepicker-calendar tr:first-child td:hover {
  background: # !important;
  color: #333;
  cursor: default;
}



/**

 Media Rules (screen-sizing stuff)
 
  */

@media all and (min-width:976px){
	.navbar#nav-bar {display:block !important;}
}

@media all and (max-width:975px) and (min-width:450px) {
  body>.wrapper {padding-bottom:160px;}
  .wrapper {width:100%; min-width:450px;}
  .header-logo {height:76px;}
  .header-logo img {display:none;}
  .header-contact .wrapper > div > div:first-child {display:block;padding:5px 25px 5px 0;}
  
  .navbar {margin:0;text-align:center;display:none;}
  .navbar ul {float:none; width:auto; display:block;max-width:100%;}
  .navbar ul li {display:block;padding:0;margin:0;}
  .navbar ul li.has-dropdown {background:#353d40;}
  .navbar ul li a.shown { color:#80b24f; }
  .navbar ul li a {display:block;padding:5px 20px;margin:0;font-size:15pt;}
  .navbar ul li a:after,.navbar ul li a:before {display:none;}
  .navbar span {display:block;}
  .navbar span a {background:none !important;}
  .navbar ul li span.css-menu-panel {background:none;text-align:center;position:relative;display:none;top:0;}
  .header #menu-btn {bottom: 15%;display: block;height: auto;left: 0.5%;position: absolute;}
  
  .banner .slide-container {padding:5px 0;}
  .banner .slide-container * {max-width:100%;height:auto;}
  .banner > * {width:100% !important;display:block;}
  .banner .banner-right > * {width:50%;display:inline-block;vertical-align:top;}
  .banner .banner-right .green-engage {height:149px;padding:46px 0 0}
  .banner .slideshow#head-gallery,.banner .slideshow#head-gallery .slide {width:100% !important;}
  
  div.sidebar>ul>li {width:100%;margin:10px 0 0; height:auto;cursor:pointer;}
  div.sidebar>ul>li>div {width:auto !important;}
  div.sidebar>ul>li>div>p:first-child {margin-top:0;}
  div.sidebar>ul>li>div>p:last-child {margin-bottom:0;}
  div.sidebar>ul>li.bound {cursor:default;}
  div.sidebar li>div {display:none;}
  
  .content {padding-bottom:0 !important;}
  
  .footer {text-align:center;}
  .footer-logos {display:none;}
  div.footer-lower div {margin:0;display:block;}
}

@media all and (max-width:450px) {
  body>.wrapper {padding-bottom:160px;}
  .wrapper {width:100%; min-width:320px;}
  .header-logo {height:76px;background-size:300px auto, 100% 100%;}
  .header-logo img {display:none;}
  .header-contact .wrapper > div > div:first-child {display:block;padding:5px 25px 5px 0;}
  
  .navbar {margin:0;text-align:center;display:none;}
  .navbar ul {float:none; width:auto; display:block;max-width:100%;}
  .navbar ul li {display:block;padding:0;margin:0;}
  .navbar ul li.has-dropdown {background:#353d40;}
  .navbar ul li a.shown { color:#80b24f; }
  .navbar ul li a {display:block;padding:5px 20px;margin:0;font-size:15pt;}
  .navbar ul li a:after,.navbar ul li a:before {display:none;}
  .navbar span {display:block;}
  .navbar span a {background:none !important;}
  .navbar ul li span.css-menu-panel {background:none;text-align:center;position:relative;display:none;top:0;}
  .header #menu-btn {bottom: 15%;display: block;height: auto;left: 0.5%;position: absolute;}
  
  .banner {max-width:100%;}
  .banner .slide-container {padding:5px 0;}
  .banner .slide-container * {max-width:100%;height:auto;}
  .banner > * {width:100% !important;display:block;font-size:0;}
  .banner .banner-right { width:100% !important;}
  .banner .banner-right > * {display:inline-block;vertical-align:top;}
  .banner .banner-right .green-engage {width:50%;height:150px;padding:45px 0 0}
  .banner .banner-right .book-online {height:165px;width:50%; font-size:9pt;}
  .banner .banner-right > *
  .banner .banner-right * {max-width:100%;height:auto; font-size:10pt;}
  .banner .banner-right * img {max-width:100% !important;}
  .banner .slideshow#head-gallery,.banner .slideshow#head-gallery .slide {width:100% !important;}
  
  div.sidebar>ul>li {width:100%;margin:10px 0 0; height:auto;cursor:pointer;}
  div.sidebar>ul>li>div {width:auto !important;}
  div.sidebar>ul>li>div>p:first-child {margin-top:0;}
  div.sidebar>ul>li>div>p:last-child {margin-bottom:0;}
  div.sidebar>ul>li.bound {cursor:default;}
  div.sidebar li>div {display:none;}
  
  .content {padding-bottom:0 !important;}
  
  .footer {text-align:center;}
  .footer-logos {display:none;}
  div.footer-lower div {margin:0;display:block;}
  
}