/*======================= RESET STYLES =============================================*/
/*==================================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*======================= UNIVERSAL =============================================*/
/*================================================================================*/

html{
    background:url('images/generic/sandstoneBG.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.ie6, .ie7, .ie8 {background:url('images/generic/sandstoneBG_repeat.jpg') repeat center center fixed;}

img:hover{
    cursor:pointer;
}

.sound{
    height:16px;
    width:16px;
    background-image:url('images/generic/SoundIcon.png');
    margin: 10px 0 0;
}

.swirls, .contentSwirls {
    /*width:100%;*/
    /*height:824px;*/
    /*position: relative;*/
    /*z-index: 999;*/
}
.swirls {
    /*background-image:url('images/generic/HomepageColouredSwirls.png');*/
    /*background-repeat:repeat-x;*/

}
.contentSwirls{
    width:100%;
    height: 100%;
    background-image:url('images/generic/ContentColouredSwirls.png');
    background-repeat: none;
    background-position: center top;
    position: absolute;
    top: 0;
    left: 0;
}

.ie .contentSwirls {display: none;}
/* hide site on entry
.main, .menu, #home, #philosophy, #contact, #portfolio {
    display:none;
}

 */

/* layer stuff so it can be clicked without errors */
.menu, .splash img, .sections, .contact_details {z-index: 99999;}
.swirls, .imageWrapper {z-index: -10}

.splash img {margin-left:5px}

/*======================= TYPOGRAPHY =============================================*/
/*================================================================================*/

@font-face {
    font-family: 'webfontbold';
    src: url('font/nevis-webfont.eot');
    src: url('font/nevis-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/nevis-webfont.woff') format('woff'),
         url('font/nevis-webfont.ttf') format('truetype'),
         url('font/nevis-webfont.svg#webfontbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


p, h1, h2, h3, h4, h5, h6, ul, li, a {font-family: webfontbold, verdana, sans-serif; color:#42210B;}
ul {line-height: 1.5; padding: 0}
p {line-height: 1.5; font-size: 14px}
a {text-decoration: none;}
a:hover {text-decoration: none;}

.homeText {width: 250px}

/*-- Philosophy --*/

.right p {color: #fff; text-shadow: 0 0 5px #512901;}
.right {
    position: absolute;
    right: 25px;
    top: 169px;
    width: 550px;
}
.block1 {margin: 0 0 0 65px}
.block2 {margin: 0 0 0 30px}
.block3 {margin: 0 0 0 40px}
.line1 {font-size:1.3em; margin: 0 0 0 -41px;}
.line2 {margin: 0 20px;font-size: 1.1em;}
.line3 {font-size: 1.8em;margin: -4px 0 0 -10px;}
.line4 {margin: -4px 0 0 120px;font-size: 1.1em;}
.line5 {margin: 30px 0 0 175px;font-size: 1.1em;}
.line6 {font-size: 2em;margin: -10px 0 0 20px;}
.line7 {margin: -6px 0 0 -6px;font-size: 1.1em;}
.line8 {font-size: 1.6em;margin: 30px 0 0 10px;}
.line9 {font-size: 1.8em; margin: -11px 0 0 100px;}
.line10 {font-size: 2em; margin: 30px 0 0}
.line11 {font-size: 2.2em; margin: -23px 0 0 57px}

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

ul{
    list-style:none;     
}
.menu .active, .active a, .active li .active a {
 color:#A58E76
}
.active li a {color: #42210B }

.menu li{
color:#42210B; 
}
.menu li:hover{
    cursor:pointer;
}

li ul{
    display:none;
}

.menu {
    width: 245px;
}
.menu #logo {width: 200px}
.menu ul {
    font-size: 16px;
    margin: 20px 0 0 -20px;
    padding: 3px 0 10px 26px;
}
.menu ul li ul {margin: 0px 0;}

/* ==== audio slider ====*/

.ui-widget-content {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #AAAAAA;
    color: #222222;
    height: 5px;
    margin: 10px 0;
    width: 177px;
}

ui-slider-handle {
    background: none repeat scroll 0 0 #A58E76 !important;
    width: 10px !important;
   /* margin: 5px 0;*/
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none repeat scroll 0 0 #A58E76;
    border: 1px solid #D3D3D3;
    color: #555555;
    font-weight: normal;
    width: 10px;
}

.ui-slider-handle {margin: -3px 0}
.ui-slider-range {background: #42210B}
.volume ui-slider {float: left}

/*======================= IMAGE SLIDER =============================================*/

.next{
    cursor:pointer;
}
.prev{
    cursor:pointer;
}


.image {
    background-size: cover;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background-repeat: no-repeat;
}

.oldie .image{
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */
}

.control {
    color: #FFFFFF;
    font-family: arial;
    font-size: 60px;
    position: absolute;
    width: 200px;
    z-index: 200;
    text-shadow: 0 0 5px #512901; 
}

.control {
    left: 328px;
     top: 610px;
} 
    
.imageWrapper {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -10;
}
/*======================= CONTACT DETAILS =============================================*/

.contact_details{
    position:absolute;
    top:160px;
    width: 600px;
}

.contact_details li {
    margin-bottom:15px;
    padding-left:40px;
    background-repeat:no-repeat;
    background-position: 0px 5px;
    height:40px;
    vertical-align:middle
}
.contact_details .single {padding-top: 11px}

#phone{background-image: url('images/generic/iconPhone.png');}
#email{background-image: url('images/generic/iconEmail.png');}
#address{background-image: url('images/generic/iconPlace.png');}
#video_start{background-image: url('images/generic/iconVideo.png');}
#video_thanks{display:none;background-image: url('images/generic/iconVideo.png');}

#video_start:hover{cursor:pointer;}

#video_details{
    display:none;
    background-image: url('images/generic/iconVideo.png');
    height:50px;
    width:300px;
}

input{
    width:290px;
}
button{
    float:right;
}

.control {
    cursor:pointer;
}


.contact_details p {font-size: 16px}



/*======================= DEVICE CUSTOMISATIONS ==================================*/
/*================================================================================*/

/* ------ universal */

.splash .wrapper {text-align: center;}

/* ========================================================================= */
/*                                                                           */
/* Responsive changes to styling for standard/small screen                   */
/*                                                                           */
/* ========================================================================= */


/*---- layout-*/
.wrapper {width: 989px; position: relative; margin: 0 auto 0; }
.sections .wrapper {width: 989px;}
.splash h1 {margin: 200px 0 10px;} 

.imageWrapper/*, .image*/ {height: 539px; width: 744px;  /*background-size:744px 539px;*/ -ms-interpolation-mode: bicubic;}
.control {left: 294px;top: 436px;}
.main {margin: 2% auto}


/*---pages---*/
.right {top:44px}
.contact_details {left: 300px;}

/*----typography-*/
.homeText {font-size: 13px;line-height: 1.1;}



/* ========================================================================= */
/*                                                                           */
/* Responsive changes to styling for widescreen (@widescreen) and above.     */
/*                                                                           */
/* ========================================================================= */
@media (min-width: 1240px) {

/*---- layout-*/
.wrapper {width: 1240px; min-height: 600px}
.sections .wrapper {width: 1240px;}
.main {margin: 4% auto}

/*-- splash --*/
.swirls {margin: -543px -36%;}

/*-- pages --*/
.imageWrapper {
    height: 706px;
    width: 971px;
}

.control {left: 328px;top: 610px;}


/*--pages--*/
.right {top:120px}
.contact_details {left: 350px;}

/*----typography-*/
.homeText {font-size: 14px;line-height: 1.5;}}


/*----IE fallback to standard size-*/
.oldie .homeText {font-size: 13px;line-height: 1.1;}
.oldie .wrapper {width: 989px; position: relative; margin: 0 auto 0;}
.oldie .sections .wrapper {width: 989px;}
.oldie .imageWrapper {height: 539px; width: 744px;}
.oldie .swirls { margin: -543px -59%;}
.oldie .contentSwirls {left: -44%;}
.oldie .control {left: 294px;top: 436px;}


/* ========================================================================= */
/*                                                                           */
/* Responsive changes to styling for portrait tablet (@tablet) to default    */
/* desktop (@default).                                                       */
/*                                                                           */
/* ========================================================================= */



@media (min-width: 768px) and (max-width: 989px) {
.wrapper {width: 767px;}
.swirls { margin: -544px -89%;}

/* standardise main area until responsive is agreed - further dev work not in scope */
.sections .wrapper {width: 989px;}
}
/* ========================================================================= */
/*                                                                           */
/* Responsive changes to styling up to portrait tablets (@tablet)            */
/*                                                                           */
/* ========================================================================= */
@media (max-width: 767px) {
.wrapper {width: 479px; margin: 0 0 0 2%}
.swirls {margin: -544px -170%;}
/*.contentSwirls {left: -85%;}*/
 .splash {margin: -116px 10px;}

/* standardise main area until responsive is agreed - further dev work not in scope */
.sections .wrapper {width: 989px;}
}
/* ========================================================================= */
/*                                                                           */
/* Responsive changes to styling up to landscape phones (@mobileLandscape)   */
/*                                                                           */
/* ========================================================================= */
@media (max-width: 479px) {
 .wrapper {width:320px; min-height: 400px;}
 .splash h1 {margin: 20px 0 30px;} 
 .splash img {width: 80%}
 .swirls {display: none}
 .splash {margin: 0}


/* standardise main area until responsive is agreed - further dev work not in scope */
.sections .wrapper {width: 989px;}

}


/* ========================================================================= */
/*                                                                           */
/* Responsive changes to styling for Retina Displays                         */
/*                                                                           */
/* ========================================================================= */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  
}


/*======================= PRINT CSS =============================================*/
/*================================================================================*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  
  a, a:visited { 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; } /* h5bp.com/t */
  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; }
}