﻿
/* 
Basic elements ---------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'helveticaneuelight';
    src: url('./fonts/helveticaneue_lt-webfont.eot');
    src: url('./fonts/helveticaneue_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('./fonts/helveticaneue_lt-webfont.woff2') format('woff2'),
         url('./fonts/helveticaneue_lt-webfont.woff') format('woff'),
         url('./fonts/helveticaneue_lt-webfont.ttf') format('truetype'),
         url('./fonts/helveticaneue_lt-webfont.svg#helveticaneuelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    color: #525252;
    font-family: helveticaneuelight, Arial, Verdana, Trebuchet MS, Sans-Serif;
    font-size: 14px;
    line-height: 16px;
    width: 100%;
    height: 100%;
}

a{color: #525252}
a:hover{color: #fdaf17}

h1{font-size: 28px;}

h2{font-size: 14px;}

strong{font-weight: bold}
em{font-style: italic}
a{text-decoration: underline}

hr{border: 0;border-bottom: 1px dashed #ccc;background: #d5d5d5;}
    
ul { 
   list-style-type: disc; 
   list-style-position: inside;
    margin: 15px;
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
    margin: 15px;
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside;
}

.clear{clear: both}

/* 
Header elements --------------------------------------------------------------------------------------- */



div.header{
    position: absolute;
    width: 100%;
    background: url("../gfx/bluebg.png");
    z-index: 5;
}

    .header_inner{
        position: relative;
        margin: 30px auto;
        width: 83%;
        border: solid 0px #FFF
    }

    div.pagename{
        float: left;
    }
        
        div.pagename a{
            font-size: 46px;
            text-transform: uppercase;
            text-decoration: none;
            color: #FFF
        }
        
    div.logobox{
        float: right;
        height: 60px;
        margin: 15px 0px 0px 0px;
    }
    
    div.logobox img{
        height: 60px;
    }

    .logosmall{display: none}
    
    
    div.facebookbox img{
        height: 30px;
    }
    
     div.menubox{
        position: absolute;
        right: 0px;
        bottom: -5px;
    }
    
        div.menubox ul{
            list-style-type:none;
        }
        
        div.menubox ul li{
            display:inline;
            margin-right:10px;
        }
        
        div.menubox ul li a{
            text-transform: uppercase;
            font-size: 14px;
            
            letter-spacing: 1px;
            text-decoration: none;
            color: #FFF
        }
        
        div.menubox ul li a:hover{
            color: #fdaf17
        }
        
        div.menubox ul li a.hps{
            color: #fdaf17
        }
       

@media only screen and (max-width: 768px) {
    div.header{
        height: 160px;
    }
    
     div.menubox{
        left: 0px;
        bottom: -35px;
    }

      div.menubox ul{
         margin: 0px;
    }
}

@media only screen and (max-width: 736px) {
    div.header{
        height: 250px;
    }

    div.pagename img{
        width: 100%
    }

    .header_inner{
        height: 200px;
        border: solid 0px #F00
    }

    .logo{display: none}
    .logosmall{display: block}

     div.menubox{
        position: absolute;
        left: 0px;
        bottom: 0px;
        border: solid 0px #F00
    }
     div.menubox ul{
         margin: 0px;
         border: solid 0px #FF0
    }

     div.menubox ul li{
        display:block;
    }

     div.menubox ul li a{
        font-size: 16px;
        line-height: 25px;
    }
}


    
/* 
Info element --------------------------------------------------------------------------------------- */

div.infobox-wrap{
    position: absolute;
    bottom: 100px;
    background: url("../gfx/yellow_bg.png");
    width: 400px;
}

div.infobox{
    float: right;
    margin: 20px;
}

    div.infobox h1{
        text-transform: uppercase;
        color: #FFF;
        font-size: 28px;
        margin-bottom: 5px
    }
    
    div.infobox div{
        color: #FFF;
    }
        
div.bigimg-wrap{
    margin-top: 0px;
    width: 100%;
    height: 700px;
    background: #000;    
}

div.boligmap-wrap{
    width: 100%;
    height: 820px;
    background: #000;
}

div.boligmap{
    position: relative;
    margin: 0px auto 0px auto;
    width: 920px;
    height: 820px;
    background: #ccc;
}   


div.splashbox{
    position: relative;
    width: 200px;
    height: 100px;
}

div.splash{
    position: absolute;
    bottom: 0px;
    width: 200px;
    height: 200px;
}

div.splash img{
    width: 200px;
    height: 200px;
}

.splashboxsmall{display: none}
@media only screen and (max-width: 736px) {
    .splashboxsmall{display: block;position: static;margin: auto;margin-bottom: 30px;}
}
/* 
Page element --------------------------------------------------------------------------------------- */
   
div.page-wrap{

    width: 100%;
    border: solid 0px #F00
}

div.page-wrap table{

}

div.page-wrap table td{
    border: solid 0px #FFF;
    border-collapse: collapse;
    vertical-align: top
}

div.page{
    float: left;
    width: 100%;
    min-height: 300px;
    background: #fff;
    color: #000;
    border: solid 0px #F00
}

    

    div.page h1, div.gal_wrap h1, div.pagegallery h1{
        margin: 0px;
        margin-bottom: 0px;
        text-transform: uppercase;
    }
    
.page_inner{
    border: solid 0px #F00;
    margin: 60px auto;
    width: 83%;
    border: solid 0px #F00
}

    .page_inner h1{
        padding-bottom: 30px;
        font-size: 40px;
        color: #808186;
        line-height: 40px
    }
    
   .page_inner p strong{
        font-size: 16px
    }

    
    .page_inner p{
        line-height: 18px;
    }

    .contacts_logo{
        width: 150px;
        float: left;
        margin-right: 15px;
    }
    
    .contacts_logo img{width: inherit}
     
    .contacts_text{
       width: 405px;
       float: left;
    }
    
    .contacts_text a{
       color: #FFF;
       text-decoration: underline;
    }
    
    .contacts_text a:hover{
       color: #000;
    }
    

    .page_inner table{width: 100%;margin-top: 30px;}
    .page_inner table.downloads{width: 500px;}
    .page_inner table td{padding: 10px 0px;}
    .page_inner table td.color{border: solid 0px #7c7d81;border-collapse: collapse;border-bottom-width: 1px}
    .page_inner table td.color a{color: #7c7d81}
    .page_inner table td.color a:hover{color: #fdaf17}
        
        
    div.pagegallery{
        float: right;
        width: 380px;
    }

    .pgsmall{display: none}
    
       
        .pg_gallery{
            float: left;
            margin: 15px;
            width: 307px;
            min-height: 305px;
        }
        
         .pg_galleryinner{
            float: right;
            
            width: 320px;
            min-height: 305px;
        }
        
         .pg_gbox{
            float: left;
            width: 100px;
            height: 100px;
            margin: 0px 0px 10px 10px;
            background: #000
        }
        
        .pg_gbox img{width: inherit;}
        
        .txtfelt{
            width: 290px;
            padding: 5px;
            background: #7c7d81;
            border: solid 0px #FFF
        }
    
  @media only screen and (max-width: 768px) {
      .page_inner table{margin-top: 0px;}  
      .page_inner table td{padding: 0px;}
      .page_inner table td:nth-child(2){display: none}
      .page_inner table td.color{border-bottom-width: 0px}

      .page_inner table.downloads{width: 100%;}

      .page_inner table.downloads tr{border: solid 0px #7c7d81;border-bottom-width: 0px}
      .page_inner table.downloads td{padding: 10px 0px;}

      .page_inner table.downloads td:nth-child(2){display: block}

      .txtfelt{width: 225px;}

      .pgsmall{display: block}

       div.pagegallery{width: 100%;}

       .pg_gbox{
            float: left;
            width: 100px;
        }

       .pg_gbox img{
           width: inherit;

        }

  }


  
 /*    
Download element --------------------------------------------------------------------------------------- */

.pagegallery table{
  margin: 15px 15px 0px 15px;
}

.pagegallery table tr td{
    border: solid 1px #666;
    border-collapse: collapse;
    width: 205px;
     vertical-align: middle
}




.pagegallery table tr td.d{
    width: 100px;
    text-align: right;
}

.pagegallery table tr td.d a{
    color: #FFF;
    
}

.pagegallery table tr td.d a:hover{
    color: #fdaf17;
}

.pagegallery table tr td p, .pagegallery table tr td a{
    padding: 5px;
   
}



    
/* 
Bolig element --------------------------------------------------------------------------------------- */
  
div.bolig-wrap{
    float: left;
    margin: 15px;
    margin-top: 75px;
    margin-left: 0px;
    width: 950px;
}

div.bolig{
    float: left;
    position: relative;
    width: 950px;
    background: url("../gfx/black_bg.png");
}

    .backbox{
        position: absolute;
        top: 15px;
        right: 16px;
        width: 150px;
        }
        
        #back{float: left;margin-right: 5px}
    #backtext{float: right;margin-top: 0}

    div.bolig h1{
        margin: 15px;
        margin-bottom: 0px;
        text-transform: uppercase;
        color: #FFF
    }
    
    
    div.bolig_inner{
        border: solid 0px #F00;
        margin: 15px;
         color: #FFF
    }
    
         
    
    div.bolig_inner p{
        width: 600px
    }
    
    div.map-wrap{
        position: relative;
        width: 920px;
        height: 606px;
        background: #000;
    }
    
    div.map{position: absolute;}
    
    .pkt{
        position: absolute;
        display: inline-block;
        cursor: pointer;
        width: 30px;
        height: 30px;
        border: solid 0px #fdaf17
    }
    
    .pkt img{
        width: 30px;
        height: 30px;
    }

    .pkt span{font-size: 14px;}
    .pkt span.red{color: #c52424;}
    .pkt span.yellow{color: #fdaf17;}
    .pkt span.green{color: #7ebb2e;}
    .pkt span.white{color: #fff;}

    /*a*/
    #pkt1{top: 365px;left: 45px;}
    #pkt2{top: 360px;left: 83px;}
    #pkt3{top: 355px;left: 117px;}
    #pkt4{top: 350px;left: 149px;}

    #pkt5{top: 345px;left: 200px;}
    #pkt6{top: 340px;left: 235px;}
    #pkt7{top: 335px;left: 270px;}
    #pkt8{top: 333px;left: 305px;}
    #pkt9{top: 329px;left: 338px;}
    #pkt10{top: 325px;left: 370px;}

    #pkt11{top: 370px;left: 533px;}
    #pkt12{top: 367px;left: 569px;}
    #pkt13{top: 365px;left: 607px;}
    #pkt14{top: 363px;left: 645px;}
    #pkt15{top: 361px;left: 683px;}
    #pkt16{top: 362px;left: 725px;}

    #pkt17{top: 510px;left: 457px;}
    #pkt18{top: 500px;left: 488px;}
    #pkt19{top: 492px;left: 520px;}

    #pkt20{top: 480px;left: 560px;}
    #pkt21{top: 475px;left: 593px;}
    #pkt22{top: 471px;left: 625px;}

    #pkt23{top: 453px;left: 670px;}
    #pkt24{top: 445px;left: 703px;}
    #pkt25{top: 435px;left: 736px;}

    /*b*/
    #pkt26{top: 440px;left: 243px;}
    #pkt27{top: 430px;left: 280px;}
    #pkt28{top: 420px;left: 320px;}

    #pkt29{top: 407px;left: 360px;}
    #pkt30{top: 400px;left: 400px;}
    #pkt31{top: 393px;left: 435px;}
    #pkt32{top: 390px;left: 468px;}

    
        div.bolig_plan{
            margin: 15px;
            margin-right: 0px;
            float: left;
            width: 600px;
            min-height: 600px;
        }
        
            div.bolig_plan img{
                max-width: 600px
            }
        
        div.bolig_info{
            margin: 15px;
            margin-left: 0px;
            float: right;
            width: 305px;
            min-height: 600px;
            
        }
        
        div.bolig_info table{
            width: 307px;
        }
        
        div.bolig_info table td{
           background: #73c6e9;
           border-collapse: collapse;
           color: #FFF
        }
        
        div.bolig_info table td p{
           padding: 10px;

        }
        
        div.bolig_info table td a{
           padding: 10px;
            color: #FFF;
            text-decoration: underline
        }
        
        div.bolig_info table td a:hover{
           
            color: #000;
        }
        
        .gallery2{
            position: relative;
            width: 337px;
            min-height: 305px;
            background: #fff
        }
        
        
        
        
        
        .gallery{
            float: left;
            margin-top: 15px;
            width: 307px;
            min-height: 305px;
        }
        
         .galleryinner{
            float: right;
            width: 320px;
            min-height: 305px;
        }
        
         .gbox{
            float: right;
            width: 99px;
            height: 99px;
            margin: 0px 0px 5px 5px;
            background: #000
        }
        
      
      
      
 /* 
Footer element --------------------------------------------------------------------------------------- */     

.footer{
    float: left;
    width: 100%;
    min-height: 80px;
    background: #56575a;
} 

.footer_inner{
    border: solid 0px #F00;
    margin: 40px auto;
    width: 83%;
    color: #FFF;
}

.footer_inner table{
    width: 100%;
}

.footer_inner table td{
    vertical-align: top;
    border: solid 0px #FF0;
}

.footer_inner h1{
    color: #FFF
}

.contact {
    float: left;
    margin-right: 30px
}

    div.facebookbox{
        float: right;
        height: 30px;
        margin: 0px 0px 0px 0px;
    }

    .contact_logo{width: 100px;margin-right: 10px}

    .contact a{color: #FFF}
    .contact a:hover{color: #fdaf17}

@media only screen and (max-width: 736px) {
.contact {
    float: none;
    margin-right: 0px;
}

.contact p{
  line-height: 20px
}

.contact:last-child {
    margin-top: 30px;
}
}