root { 
    display: block;
}

/* GENERAL CONTROLS */

html, body {
    height: auto;
    
}

body{
    width: 100%;
    margin: 0px;
    border-collapse: collapse;
    
    font-family: 'Open Sans', sans-serif;
    font-size: 75%;
    color: white;
    
    background: url('../img/cretebg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;


}

.content-center{
    position: relative;
    margin: 0 auto;
    width: 960px;
}

.container{
    position: relative;
    margin: 0 auto;
    left: 50%;
    width: 960px;
    margin-left: -480px;
    height: auto;
}

.wrapper{
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -3em;
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.page-container {
height:40px;
}

.holder{
    height: auto;
    min-height: 300px;
    overflow: hidden;
    margin-top: 20px;
}

.clear{
    clear: both;
}



.lc{
    float: left;
    display: block;
    width:50%;
    height: 100%;
    margin-left: 0;
}

    .lc-padding{
        margin-left: 2em;
        margin-top: 5%;
        margin-right: 2.5%;
        margin-bottom: 5%;
        text-align: left;
    }
    
    .lc-lesspadding{
        padding-left: 2em;
        margin-top: 5%;
        margin-right: 2.5%;
        margin-bottom: 1%;
        text-align: left;
    }
    
    .lc-60{
        display: block;
        float: left;
        width: 60%;
        height: 100%;
        margin-left: 0;
    }
    
    .lc-100{
        display: block;
        float: left;
        width: 100%;
        height: 100%;
        margin-left: 0; 
    }
    
    .lc-nopadding{
        padding-left: 2em;
        margin-top: 0;
        margin-right: 2.5%;
        margin-bottom: 4%;
        text-align: left;
    }

.rc{
    float: left;
    width:50%;
    height: 100%;
}

    .rc-padding{
        margin-left:7em;
        margin-top: 5%;
        margin-right: 2em;
        margin-bottom: 5%;
        text-align: left;
    }
    
    .rc-lesspadding{
        position: relative;
        padding-left: 8%;
        margin-top: 5%;
        margin-right: 4em;
        margin-bottom: 4em;
        text-align: left;
    }
    
    .rc-40{
        display: block;
        float: left;
        width:40%;
        height: 100%;
    }
    
    .rc-nopadding{
        margin-top: 0;
        margin-right: 2em;
        margin-left: 2em;
        margin-bottom: 4%;
        text-align: left; 
    }
 
/* VERTICAL MARGINS */

div.header {
    margin-bottom: 2em;
}

div.home, 
div.picture {
    margin-bottom: 6em; 
}

/* BACKGROUND CONTROLS */


.full-screen-background-image{
    z-index: -999;
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

/* FONT CONTROLS */

a:link, a:visited{
    text-decoration: none;
    color: white;
}

.holder a, .holder a:visited, .holder a:hover, .holder a:active {
    border-bottom: 1px white dotted;
}


a:hover{
    text-decoration: none;
    color: #1075c2;
    transition: all 500ms ease-in-out 0.2s;
}

a:active{
    text-decoration: none;
}

h1,
h2,
h3,
h4 {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

h1{
    font-size: 1.75em;
    weight: 400;
}

h2{
    font-size: 1.6em;
    color: #0b4888;
}

h3{
    font-size: 1.3em;
}

h4{
    font-size: 1.75em;
    weight: 300;
}


p{
    font-size: 1.1em;
    weight: 400;
    margin: 10px 0;
}
span{
    text-decoration: none;
}

hr {
    height: 0.5px;
    background-color: white;
}


/* NAVIGATION */

.navigation{
    position: fixed;
    top: 0;
    background-color: #57a6ff;
    width: 100%;
    z-index: 100;
}

.nav-color{
    display: block;
    position: absolute;
    width: 100%;
    height: 35px;
    background-color: #57a6ff;
}

.nav-bar {
    position: absolute;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    background-color: #57a6ff;
    width: 960px;
    text-align: center;          
}

.nav-bar li a {
	display: block;
        width: 160px;
	padding: 9px 0px;
}

.nav-bar li a:hover {
	background-color: #0f74cc;
        color: white;
}

.nav-bar li {
	float: left;	
}


/* HEADER CONTROLS */

.header{
    margin-top: 5em;
    display: table;
}

div.header-lc{
    display:table-cell;
}


div.header-rc{
    display: table-cell;
    text-align: right;
    bottom: 0;
    right:0;
}

/* IMAGE CONTROLS */

.picture-inset{
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -4em;
    margin-right: 4em;
}


/* HOME CONTROLS */

.home {
    overflow: hidden;
}

div.lc-home {
    width: 444px;
}

div.rc-home{
    float: right;
    margin: 6em 4em 3em 3em;
}

div.availability{
    background: url('../img/bvc-sprite.png') no-repeat -670px 0;
    width: 176px;
    height: 176px;
}

div.availability:hover{
    background: url('../img/bvc-sprite.png') no-repeat -863px 0;
}



/* CONNECT CONTROLS */

.connect-bar{
    width: 100%;
    height: auto;
    overflow: visible;
    margin-top: 6em;
    margin-bottom: 10em;
   
}

.connect-blue{
    width: 100%;
    height: 63px;
    zoom: 1;
    background-color: #57a6ff;
    filter: alpha(opacity=80);
    opacity: 0.8;

}

.connect-content{  
    position: relative;
    margin-top: -6.3em;
}

.connect-naviation{
    width: 100%;
    margin: 0 0 0 0;
    padding: 0;
    list-style: none;
}

.connect-navigation li {
    display: block;
    width: auto;
    text-align: center;
    padding: 0px 0px;
}

.connect-naviation li{
    float:left;
}

.enquire{
    width: 444px;
    
    position: relative;
}

    .left{
        width:80%;
        position: absolute;
        left: 0;    
    }

    .right{
        width: 20%;
        height: 100%;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -21.5px; 
    }

.connect-buttons{ 
    position: relative;
}

.enquire:hover .connect-arrow{
    background: url('../img/bvc-sprite.png') no-repeat -594px 0;
}

a.enquire-bar{
    display: block;
    width: 100%;
    float: left;
    height: 90px;
    
    line-height: 90px;
    text-align: left;
    font-size: 1.5em;
    text-align: center;
    background-color: #0082d1;
}

a.enquire-bar:hover{
    background-color: #00428a;
    transition: all 500ms ease-in-out 0.2s;
    color: white;
}

.connect-arrow, .connect-arrow:hover{
    display: block;
    width: 44px;
    height: 43px;
}

.connect-arrow{
    background: url('../img/bvc-sprite.png') no-repeat -594px -58px;
}

.connect-arrow:hover{
    background: url('../img/bvc-sprite.png') no-repeat -594px 0;
}

.enquire-row{
    display: table;
    height: 100%;
    width: 100%;
}

li.spacing{
    width: auto;
}

.spacing {
    margin-left: 73px;
}

.getting-here { 
    left: 0px;
    background: url('../img/bvc-sprite.png') no-repeat -277px -96px; 
    width: 87px; 
    height: 87px;
}

.getting-here:hover{
    background: url('../img/bvc-sprite.png') no-repeat -279px 0; 
}

.email-us {
    left: 200px;
    background: url('../img/bvc-sprite.png') no-repeat -470px -96px;
    width: 87px; 
    height: 87px; 
}

.email-us:hover{
    background: url('../img/bvc-sprite.png') no-repeat -472px 0;
}

.location {
    left: 400px;
    background: url('../img/bvc-sprite.png') no-repeat -372px -96px;
    width: 87px; 
    height: 87px; 
}

.location:hover{
    background: url('../img/bvc-sprite.png') no-repeat -374px 0;
}

.li-text{
    position: absolute;
    display: block;
    
    /* margin-drop size of icon */
    padding: 0.5em 0;
    margin-top: 95px;
    width: 87px;
    text-align: center;
    background-color: #57a6ff;
}


div.center1{
    margin: 0 auto;
    text-align: center;
}

.lc-padding {
    margin-top: 3.75em;
}

/* IMAGE SCROLL */

.image-scroll{
    /* margin-top: 3.75em; */
    list-style: none;
    position: relative;
    float: right;
    margin-top: 1em;
    margin-right: 1em;
}

ul.image-scroll{
    padding:0;
    margin-bottom: 60px;
}


.image-scroll li{
    padding-bottom: 34px;
}


/* ORDERED LIST */

ol.ordered-list{
    padding-left: 30px;
}

ol.ordered-list li{
    padding-bottom: 0.5em;
}

/* MAP */

#map-canvas { 
    height: 350px;
    width: 100%;
}


/* CONTENT TABLE */

.availablity-table{
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

.availablity-table th{
    padding: 10px 0;
}

.availablity-table td{
    padding: 8px;
}

.tr-mid1:hover,
.tr-mid2:hover,
.tr-high:hover,
.tr-low:hover{
    background-color: yellow;
}


.td-price{
    text-align: right;
}

.availablity-table thead{
    background-color: #0082d1;
    color: #ffffff;
}

.tr-mid{
    background-color: #57a6ff;
}

.td-hover:hover{
    background-color: yellow;
}

.td-center{
    text-align: center;
}



/* FOOTER CONTROLS */



.footer-bar, .push{
    height: 3em;
    
}

.footer-bar{
    position: absolute;
    margin-top: 30px;
    bottom: 0;
    background-color: #57a6ff;
    width: 100%;    
    margin-left: 0;
    z-index: 100;  
}

.footer-contain{
    position: absolute;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
}

.footer-contain li {
    display: block;
    width: 320px;
    padding: 8px 0px;
    
}

.footer-left, .footer-legal{
    text-align: left;
}

.footer-right{
    text-align: right;
}

.footer-contain li{
    float: left;
}

/* FORM CONTROLS */

.form {
    width: 100%;
    height: auto;
    padding: 0;
    overflow: hidden;
    display: none;
    padding-bottom: 1em;

}

.contact-form input, textarea {
    padding: 1em 10px;
    width: 420px;
    border: 0 transparent;
}

textarea {
    height: 7.5em;
    max-height: 7.5em;
    min-height: 7.5em;
    
    max-width: 420px;
    mix-width: 420px;
}


#submit {
    background-color: #00428a;
    margin-top: 1.9em;
    color: white;
    padding: 1em 10px;
    border: solid 1px transparent;
    width: auto;
}

#submit:hover{
    background-color: #57a6ff;
    transition: all 500ms ease-in-out 0.2s;
}

#result-bar{
    text-align: center;
    height: 8em;
}

#loading, 
#fail, 
#success,
#result-bar{
    display:none;
}

#result{
    display: none;
    color: white;
    padding: 1em;
    margin: 0 auto;
    width: 80%;
}

/* FONTS */