﻿@font-face {
    font-family: 'din_alternatemedium';
    src: url('/Areas/KlaartjeLambrechts/Content/font/din_alternate_medium-webfont.woff2') format('woff2'),
         url('/Areas/KlaartjeLambrechts/Content/font/din_alternate_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
    font-family:"Courier New";
    font-size:11px;
    color:#333;
}
a {
    text-decoration:none;
    color:#999;
}
a:hover, li.current a{
    text-decoration:line-through;
}
#logo a, #logo a:hover {
    text-decoration:none;
}
.title {
    font-size:12px;
    text-transform:uppercase;
    font-weight:bold;
}

.nolist {
    list-style:none;
}
#logo {
    background-image:url('/Areas/KlaartjeLambrechts/Content/img/point.jpg');
    background-repeat:no-repeat;
    padding-left:10px;
    background-position:0 18px;
}
#logo a{
    font-family:din_alternatemedium,'Courier New',sans-serif;
    font-size:24px;
    color:#333;
    letter-spacing:3px;
}

li.level_1 {
    font-size:14px;
    font-family:"Courier New";
    text-transform:uppercase;
}
li.level_1.selected {
    margin-bottom:10px;
}
li.level_2 a {
    font-size:11px;
    text-transform:capitalize;
}
li.level_2 {
    margin-bottom:3px;
}
li.level_2.lastchild {
    margin-bottom:20px;
}
#menu li a {
    color:#333;
}
#portfolioitems {
    margin:0;
    padding:0;
}
.portfolioitem a {
    text-decoration:none;
    color:black;
}
.portfolioitem a:hover {
    text-decoration:none;
}
#copyright {
    color:#999;
}
@media only screen and (max-width:706px) {
    aside {
        margin:15px;
    }
    #logo {
        margin-bottom:10px;
    }
    #menu {
        margin:0;
        padding:0;

    }
    #menu li {
        text-align:center;
    }
    li.level_1 {
        font-size:18px;
        margin-bottom:10px;
        clear:left;
    }
    li.level_2 {
        font-size:13px;
        float:left;
        margin-right:30px;
    }
    #canvas {
        margin-left:10px;
        margin-right:10px;
        margin-bottom:30px;
    }
    #portfolioImages img {
        width:100%;
        margin-bottom:5px;
    }
    .portfolioitem {
        margin-bottom:20px;
    }
    #slideshow img, .portfolioitem img {
        width:100%;
    }
    #slideshow {
        margin-bottom:10px;
    }
    #copyright {
        margin-left:10px;
        margin-bottom:10px;
    }
}

@media only screen and (min-width:706px) {
    aside {
        top: 35px;
        left: 30px;
        position: fixed;
    }
    #logo {
        margin-left:10px;
    }
    #menu {
        margin-top:80px;
    }
    li.level_1 {
        font-size:11px;
        margin-bottom:35px;
    }
    #bd_home #slideshow {
        margin-right:20px;
    }
    #canvas {
        margin-left:270px;
        margin-top:100px;
    }
    #portfolioImagesWrapper {
        width:100%;
        height:510px;
    }
    #portfolioImages {
        height: 100%;
        white-space: nowrap;
    }
    #portfolioImages img {
        max-height:500px;
    }
    #bd_press #portfolioImages img {
        max-height:800px;
    }    
    .portfolioitem {
        float:left;
        margin-right:30px;
        margin-bottom:60px;
        max-width:360px;
    }
    #bd_portrait .portfolioitem {
        max-width:393px;
    }
    .portfolioitem img {
        width:100%;
        height:262px;
    }
    #bd_portrait .portfolioitem img{
        height:500px;
    }
    .withportfolio {
        max-width:1600px;
    }
    #slideshow {
        float:left;
    }
    #bd_personal #textbox {
        max-width:690px;
    }
    .withslideshow #textbox {
        margin-left:330px;
    }
    #contactinfo {
        margin-top:220px;
        margin-left:150px;
    }
    #copyright {
        position:fixed;
        bottom:5px;
        left:30px;
    }
}