/*
* Adapted from HTML5 Boilerplate by Pulse8
*/
@import 'grid.less';
@import 'helper.less';
/* =============================================================================
HTML5 element display
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* =============================================================================
Base
========================================================================== */
html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.5; width: 100%; .clearfix }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection { background: #bf1e2e; color: #f5f2eb; text-shadow: none; }
::selection { background: #bf1e2e; color: #f5f2eb; text-shadow: none; }
/* =============================================================================
Grid
========================================================================== */
// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 20;
/* =============================================================================
Links
========================================================================== */
a { color: @red; text-decoration: none; outline: 0; }
a:visited { color: #bf1e2e; }
a:hover, a:active { text-decoration: underline; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 0; padding: 15px 40px; quotes: "\201C" "\201D"; position: relative; .museo; font-size: 18px; line-height: 1.1;}
blockquote:before { content: open-quote; font-weight: bold; font-size: 64px; position: absolute; top: 0; left: 0; .defaultfont; color: @red; }
blockquote:after { content: close-quote; font-weight: bold; font-size: 64px; position: absolute; bottom: -32px; right: 0; .defaultfont; color: @red; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
img { border: 0; -ms-interpolation-mode: bicubic; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; *margin-left: -7px; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; display:block; font-weight: bold; }
button, input, select, textarea { font-size: 100%; margin: 0 0 10px 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="text"], textarea { width: 98%; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea { overflow: auto; vertical-align: top; }
/* =============================================================================
Tables
========================================================================== */
table.prices {
border-collapse: collapse;
border-spacing: 0;
font-size: 11px;
margin-bottom: 14px;
padding: 0;
width: 100%;
}
table.prices th, table.prices td {
line-height: 14px;
padding: 5px 10px 4px;
text-align: left;
}
table.prices th {
font-weight: bold;
padding-top: 4px;
vertical-align: middle;
background: @grey;
text-align: center;
}
table.prices td {
border-top: 1px solid @brown;
vertical-align: top;
}
table.prices tbody th {
border-top: 1px solid @brown;
vertical-align: top;
}
table.prices tbody td {
text-align: right;
}
table.prices td.empty {
.transbg;
}
table.prices td.date {
background: @greybrown;
text-align: left;
}
.bordered-table {
border: 1px solid @brown;
border-collapse: separate;
border-radius: 4px 4px 4px 4px;
}
.bordered-table th + th, .bordered-table td + td, .bordered-table th + td {
border-left: 1px solid @brown;
}
.bordered-table thead tr:first-child th:first-child, .bordered-table tbody tr:first-child td:first-child {
border-radius: 4px 0 0 0;
}
.bordered-table thead tr:first-child th:last-child, .bordered-table tbody tr:first-child td:last-child {
border-radius: 0 4px 0 0;
}
.bordered-table tbody tr:last-child td:first-child {
border-radius: 0 0 0 4px;
}
.bordered-table tbody tr:last-child td:last-child {
border-radius: 0 0 4px 0;
}
/* =============================================================================
ACTUAL STYLES
========================================================================== */
body {
background: url(/img/background.gif) #e7e4d7;
color: @brown;
.defaultfont;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 { .museo; line-height: 1.25; margin: 0 0 15px 0; }
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
.contact {
.museo300;
span {
padding-left: 30px;
}
.email {
background: url(/img/email.png) no-repeat left center;
}
.telephone {
background: url(/img/telephone.png) no-repeat left center;
margin-right: 15px;
}
}
header {
.col(12);
.museo;
position: relative;
z-index: 999;
#logo {
float: left;
background-image:url(/img/red-doors-logo.png);
width:180px;
height:132px;
}
.contact {
float: right;
text-align: right;
width: 400px;
margin-top: 50px;
}
#secondary {
float: right;
clear: right;
margin-top: 20px;
a {
color: @brown;
margin-left: 15px;
}
a:hover, a.hover {
color: @red;
text-decoration: none;
}
}
#primary {
.row(12);
margin-top: 20px;
margin-bottom: 10px;
position: relative;
> a, #our-cottages > a {
.col(4,12);
padding: 10px 0;
text-align: center;
color: @offwhite;
background: @red;
font-weight: 700;
}
> a:hover, a.hover,
#our-cottages > a:hover, #our-cottages > a.hover, #our-cottages.hover > a, {
background: @brown;
text-decoration: none;
}
#cottages {
display: none;
position: absolute;
z-index: 100;
top: 44px;
left: 10px;
background: url(/img/misc/dropdown-top.png) top left no-repeat @greybrown;
color: @offwhite;
width: 800px;
padding: 20px 0 10px 20px;
.cottage {
float: left;
display: block;
padding: 0;
margin: 0 20px 5px 0;
color: @offwhite;
h4 {
.museo700;
font-size: 16px;
margin-bottom: 5px;
small {
.defaultfont;
font-size: 14px;
}
}
img {
border: 5px solid @offwhite;
}
}
.cottage:hover {
text-decoration: none;
img {
border-color: @grey;
}
}
}
}
}
#content {
min-height: 400px;
clear: both;
.full {
.col(12);
}
.main {
.col(8);
}
#index {
h2 {
padding: 10px 20px;
font-size: 26px;
.transbg;
}
}
#facilities-cycle-container {
.transbg;
padding: 5px;
margin-bottom: 20px;
position: relative;
#facilities-cycle {
.transbg;
.facility-slide {
img {
float: left;
}
.facility-slide-content {
float: right;
width: 255px;
margin: 20px;
font-size: 14px;
h3 {
font-size: 38px;
}
}
}
}
#facilities-prev, #facilities-next {
cursor: pointer;
height: 434px;
position: absolute;
top: 0;
width: 40%;
z-index: 1003;
span {
background-image: url("/js/libs/fancybox_sprite.png");
cursor: pointer;
height: 88px;
left: -9999px;
margin-top: -44px;
position: absolute;
top: 50%;
width: 88px;
z-index: 1003;
}
}
#facilities-prev:hover, #facilities-next:hover {
visibility: visible;
}
#facilities-prev {
left: 0;
span {
background-position: 0 0;
}
}
#facilities-prev:hover span {
left: 5px;
}
#facilities-next {
right: 0;
span {
background-position: 88px 0;
}
}
#facilities-next:hover span {
left: auto;
right: 5px;
}
#facilities-nav {
list-style: none;
margin: 20px 20px 0px 20px;
padding: 0;
li {
margin: 0 26px 10px 0;
float: left;
img {
.glow;
}
}
.activeSlide {
img {
.glow(@red);
}
}
}
}
ul.tabs {
margin:0;
padding:0;
border-bottom: 1px solid @red;
li {
display:block;
float:left;
margin-right: 1px;
a {
.museo700;
font-size: 17px;
display: block;
float: left;
.transbg;
color: @brown;
text-decoration: none;
padding: 5px 15px;
width: 124px;
text-align: center;
}
a.selected, a:hover {
background-color: @red;
color: @offwhite;
}
}
}
.tab-content {
clear:both;
padding: 15px 0;
li {
margin-bottom: 5px;
}
}
#gallery {
.categoryBlock {
width:155px;
height:177px;
background:url('/img/gallery/block-brown.png');
margin:0 26px 26px 0;
float:left;
&.lightbrown {
background-image:url('/img/gallery/block-lightbrown.png');
}
&.white {
background-image:url('/img/gallery/block-white.png');
span {
color:#462f1f;
}
}
span {
padding:20px;
display:block;
width:1px;
.museo;
color:white;
}
}
.end {
margin-right:0;
}
.imageBlock {
&.end { a { margin-right:0; } }
a {
display:block;
width:155px;
height:155px;
float:left;
margin:0 26px 26px 0;
padding-bottom:22px;
background:url('/img/gallery/magnify.png') no-repeat bottom left;
&:hover {
background-image:url('/img/gallery/magnify-dark.png');
}
}
}
}
#cottage {
#cottage-info {
padding: 5px;
hgroup {
margin: 15px;
float: left;
}
h1, h2 {
margin: 0;
}
h2 {
font-family: 'Trebuchet MS', sans-serif;
font-size: 17px;
font-weight: bold;
color: @greybrown;
}
#sleeps {
float: right;
width: 70px;
height: 92px;
margin-bottom: 5px;
background: @grey;
color: #fff;
text-align: center;
text-transform: uppercase;
.museo700;
small {
background: @brown;
border-bottom: 1px solid #fff;
font-family: 'Trebuchet MS', sans-serif;
font-size: 11px;
font-weight: bold;
display: block;
padding: 5px 0;
margin: 0 0 5px 0;
}
#number {
font-size: 28px;
line-height: 1;
}
#cot {
font-size: 11px;
}
}
#cottage-cycle {
clear: both;
}
}
#cottage-cycle-controls {
margin: 15px 5px 30px 5px;
#pager {
float: left;
a {
.ir;
float: left;
width: 11px;
height: 11px;
padding: 4px;
background: url(/img/misc/blob.png) center center no-repeat;
}
a.activeSlide {
background: url(/img/misc/blob-active.png) center center no-repeat;
}
}
#slideshow {
.ir;
float: right;
width: 103px;
height: 20px;
background: url(/img/misc/slideshow.png) center center no-repeat;
}
}
}
aside {
.col(4);
#testimonial {
.transbg;
text-align: center;
figcaption {
padding-bottom: 15px;
}
}
.box {
.imgborder;
position: relative;
line-height: 0;
a {
.museo700;
font-size: 16px;
text-align: right;
height: 50px;
line-height: 44px;
padding-right: 30px;
display: block;
position: absolute;
right: -19px;
bottom: 20px;
color: @offwhite;
z-index: 100;
}
a:hover {
text-decoration: none;
}
}
#calendar {
a {
background: url(/img/aside/calendar-label.png) no-repeat;
width: 227px;
}
a:hover {
background: url(/img/aside/calendar-label-h.png) no-repeat;
}
}
#facilities {
a {
background: url(/img/aside/facilities-label.png) no-repeat;
width: 181px;
}
a:hover {
background: url(/img/aside/facilities-label-h.png) no-repeat;
}
}
#floorplan {
a {
background: url(/img/aside/floorplan-label.png) no-repeat;
width: 124px;
}
a:hover {
background: url(/img/aside/floorplan-label-h.png) no-repeat;
}
}
#gallery {
a {
background: url(/img/aside/gallery-label.png) no-repeat;
width: 181px;
}
a:hover {
background: url(/img/aside/gallery-label-h.png) no-repeat;
}
}
}
}
footer {
.col(12);
.museo;
border-top: 1px solid rgb(202, 194, 173);
border-top: 1px solid rgba(138, 122, 103, .25);
padding-top: 15px;
margin-top: 15px;
#logos {
float: right;
div {
float: right;
margin-left: 15px;
}
}
#tertiary {
font-size: 13px;
a {
color: @brown;
margin-right: 10px;
}
a:hover, a.hover {
color: @red;
text-decoration: none;
}
}
.contact {
margin: 15px 0;
}
#extras {
font-size: 12px;
a {
margin-right: 10px;
}
}
}
.jcarousel-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #F0F6F9;
border: 1px solid #346F97;
}
.jcarousel-direction-rtl {
direction: rtl;
}
.jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}
.jcarousel-container-vertical {
width: 75px;
height: 245px;
padding: 40px 20px;
}
.jcarousel-clip {
overflow: hidden;
}
.jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
.jcarousel-clip-vertical {
width: 75px;
height: 245px;
}
.jcarousel-item {
width: 75px;
height: 75px;
}
.jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}
.jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
margin-right: 0;
}
.jcarousel-item-vertical {
margin-bottom: 10px;
}
.jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
.jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.png) no-repeat 0 0;
}
.jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background-image: url(prev-horizontal.png);
}
.jcarousel-next-horizontal:hover,
.jcarousel-next-horizontal:focus {
background-position: -32px 0;
}
.jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:focus,
.jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 5px;
background-image: url(next-horizontal.png);
}
.jcarousel-prev-horizontal:hover,
.jcarousel-prev-horizontal:focus {
background-position: -32px 0;
}
.jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:focus,
.jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
/**
* Vertical Buttons
*/
.jcarousel-next-vertical {
position: absolute;
bottom: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-vertical.png) no-repeat 0 0;
}
.jcarousel-next-vertical:hover,
.jcarousel-next-vertical:focus {
background-position: 0 -32px;
}
.jcarousel-next-vertical:active {
background-position: 0 -64px;
}
.jcarousel-next-disabled-vertical,
.jcarousel-next-disabled-vertical:hover,
.jcarousel-next-disabled-vertical:focus,
.jcarousel-next-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
.jcarousel-prev-vertical {
position: absolute;
top: 5px;
left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-vertical.png) no-repeat 0 0;
}
.jcarousel-prev-vertical:hover,
.jcarousel-prev-vertical:focus {
background-position: 0 -32px;
}
.jcarousel-prev-vertical:active {
background-position: 0 -64px;
}
.jcarousel-prev-disabled-vertical,
.jcarousel-prev-disabled-vertical:hover,
.jcarousel-prev-disabled-vertical:focus,
.jcarousel-prev-disabled-vertical:active {
cursor: default;
background-position: 0 -96px;
}
/* =============================================================================
Non-semantic helper classes
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide for both screenreaders and browsers:
css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* =============================================================================
PLACEHOLDER Media Queries for Responsive Design.
These override the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
/* =============================================================================
Print styles.
Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
.cycle-control {
position: relative;
margin-top: -60px;
height: 60px;
width: 100%;
text-align: center;
z-index: 100;
.cycle-control-item {
display: inline-block;
width: 25px;
height: 25px;
background: rgb(211, 204, 191);
border-radius: 25px;
font-weight: 600;
color: #ffffff;
font-size: 17px;
cursor: pointer;
}
}
#reviews {
.review-name {
float:right;
}
.review-date {
float:left;
margin-bottom:30px;
}
h3 {
clear:both;
}
}
div#canWeHelp {
font-family: museo, serif;
font-weight: 700;
font-size: 16px;
line-height: 44px;
display: inline-block;
position: relative;
color: #f5f2eb;
cursor: pointer;
span.bg {
background: url(/img/aside/gallery-label.png) no-repeat;
z-index: 100;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: "FlipH";
filter: FlipH;
width: 181px;
height: 48px;
display: block;
}
span.text {
position: absolute;
top: 0;
padding-left: 20px;
z-index: 101;
}
}
div#helperDialog {
background: url(/img/background.gif) #e7e4d7;
color: #462f1f;
font-family: 'Trebuchet MS', sans-serif;
font-weight: normal;
font-size: 16px;
.contact a {
padding-left: 30px;
}
}
.ui-dialog.helperDialog {
border: 1px solid #ababab;
outline: none;
padding: 0;
border-radius: 3px;
.ui-dialog-titlebar {
background: #bf1e2e;
border: 0;
color: #fff;
font-family: museo, serif;
font-weight: 700;
border-radius: 0;
}
}