/*
*************************************************
    CBTech
    General Style Sheet

    Created by Andrew Phillips
    http://www.cbtech.co.uk
*************************************************
*/

/*-------------------------------------------    
    Reset all styles 
-------------------------------------------*/

      @import url(reset.css);
        
/*-------------------------------------------    
    Typography and Links
-------------------------------------------*/
      body {
        font-size:62.5%;
        font-family: Arial;
      }

      h1 {
        text-indent: -9999px;
      }
      
      h2 {
        font-size: 3em;
        font-weight: bold;
      }
     
      h3 {
        font-size: 1.8em;
        font-weight: normal;
        color: #fff;
      }
      
      h4 {
        font-weight: normal;
        font-size: 1em;
        color: #fff;
      }
      
      p {
        line-height: 1.3em;
        text-align: justify;
        font-size: 1.22em;
        word-spacing: -0.07em;
      }
      
      p.bold {
        font-weight: bold;
      }
      
      p.email {
        font-weight: bold;
        font-size: 1.3em;
        margin-top: 1em;
      }
           
      a {
        text-decoration: none;
        color: #fff;
        font-size: 1.2em;
      }
      
      #aboutus h2 {
        text-indent: -9999px;
        background: url("../img/headers/aboutus.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }
      
      #eat h2 {
        text-indent: -9999px;
        background: url("../img/headers/eat.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }

      #stay h2 {
        text-indent: -9999px;
        background: url("../img/headers/stay.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }
      
      #indulge h2 {
        text-indent: -9999px;
        background: url("../img/headers/indulge.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }
      
      #drive h2 {
        text-indent: -9999px;
        background: url("../img/headers/drive.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }

      #sail h2 {
        text-indent: -9999px;
        background: url("../img/headers/sail.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }

      #play h2 {
        text-indent: -9999px;
        background: url("../img/headers/play.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }
      
      #kids h2 {
        text-indent: -9999px;
        background: url("../img/headers/kids.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }

      #contact h2 {
        text-indent: -9999px;
        background: url("../img/headers/contact.png") no-repeat;
        margin-left: 0.72em;
        margin-top: 1em;
        margin-bottom: -.5em;
      }
      
      h3#privatevillas {
        color: #000;
        text-indent: -9999px;
        background: url("../img/headers/privatevillas.png") no-repeat;
        margin-left: 1.35em;
        margin-top: 20px;
        margin-bottom: 0px;
      }
      
      h3#hotels {
        color: #000;
        text-indent: -9999px;
        background: url("../img/headers/hotels.png") no-repeat;
        margin-left: 1.35em;
        margin-top: 20px;
        margin-bottom: 0px;
      }
            
/*-------------------------------------------    
    General 
-------------------------------------------*/
      body {
        background: #000;
      }

      html,body,#bg,#bg table,#bg td, #footer {
        width:100%; 
        height:100%; 
        overflow:hidden;
      }
      
      #bg div {
        position:absolute; 
        width:200%; 
        height:200%; 
        top: -50%; 
        left: -50%; 
        z-index: -5;
      }
      
      #bg td {
        vertical-align:middle; 
        text-align:center;
      }
      
      #bg img {
        min-height:50%; 
        min-width:50%; 
        margin:0 auto;
      }
      
/*-------------------------------------------    
    Header  
-------------------------------------------*/

      #header {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 4em;
        width: 100%;
        float: left;
      }
      
      h1 {
        background: rgba(0, 0, 0, 0.3) url("../img/logo.png") no-repeat;
        background-position: right;
        height: 4em;
      }
      
/*-------------------------------------------    
    Navigation and Sub-Navigation 
-------------------------------------------*/  

      li.active a{
        background: rgba(0, 0, 0, 0.4);

        font-weight: bold;
      }
      
      a.active {
        font-weight: bold;
      }
      
      #navigation {
        position: absolute;
        left: 0px;
        height: 100%;
        width: 120px;
        float:left;
        background: rgba(0, 0, 0, 0.3);
      }
      
      #navigation ul {
        margin-top: 100px;
      }
      
      #navigation a {
        padding: 12%;
        display: block;
      }
      
      #navigation li:hover {
        background: rgba(0, 0, 0, 0.4);
      }
         
      #subnavigation {
        position: absolute;
        bottom: 60px;
        height: 40px;
        width: 100%;
        float: left;
        clear: left;
        background: rgba(0, 0, 0, 0.3);
      }
      
      #subnavigation ul {
        width: 100%;
        margin: 0 auto;
        margin-left: 12%;
      }
      
      #subnavigation li {
        float: left;
        padding: 15px;
        height: 100%;
      }
      
      #subnavigation a, #subnavigation li{
        padding-top: 15px;
        padding-bottom: 10px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
      }
      
/*-------------------------------------------    
    Forms
-------------------------------------------*/

      label{
        display: block;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      
      input, textarea {
        display: block;
        margin-left: 30px;
        width: 80%;
      }
      
      textarea {
        height: 70px;
      }
      
      input#submit {
        width: 120px;
        margin-top: 10px;
        float: right;
        margin-right: 30px;
      }
/*-------------------------------------------    
    Content
-------------------------------------------*/

      .content {
        position: absolute;
        background: #fff;
        opacity: 0.8;
        filter: alpha(opacity=80);
      }
      
      #aboutus {
        top: 9%;
        left: 17%;  
        width: 49%;
        padding-bottom: 35px;
      }
      
      #links {
        top: 9%;
        left: 17%;  
        width: 45%;
        max-width: 1000px;
        max-height: 1000px;
        min-width: 470px;
        min-height: 420px;
        height: 65%;
      }
      
      #links h2 {
        margin-bottom: -20px;
      }
      
      #links a {
        color: black;
        font-size: 11px;
      }
      
      #links #right, #links #left {
        width: 49%;
        float: left;
      }
      
      #links ul li {
        padding: 2px;
        padding-bottom: 4px;
        margin-left: 30px;
        list-style-type: none;
      }

      #eat {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      .header {
        font-size: 16px;
        margin-top: 5px;
      }
      
      #stay {
        top: 9%;
        left: 17%;   
        width: 49%;
        padding-bottom: 35px;
      }

      #indulge {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      #drive {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      #sail {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      #play {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      #kids {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      #contact {
        top: 9%;
        left: 17%;
        width: 49%;
        padding-bottom: 35px;
      }
      
      .content p {
        padding-left: 2em;
        padding-right: 2em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
      }
      
      .content h2 {
        padding: 30px;
        padding-bottom: 15px;
      }
 
/*-------------------------------------------    
    Footer
-------------------------------------------*/

      #footer {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 60px;
        float: left;
        clear: both;
        background: #000;
      }
      
      #footer h3 {
        padding: 5px;
        letter-spacing: 0.3px;
        margin-top: 8px;
      }
      
      #footer h3.right {
        float: right;
      }
      
      #footer h3.left {
        float: left;
      }
      
      em.normal {
        font-weight: normal;
        font-style: normal;
      }
      
      #footer h4 {
        padding: 5px;
        margin-top: 5px;
      }
      
      #footer h4.left {
        clear: both;
        float: left;
      }
      
      #footer h4.right {
        float: right;
      }
      
      #footer a {
        font-size: 1em;
      }