/* Stylesheet belonging to www.fridoverweij.nl. 
(C) Copyright 2010, Frido Verweij. 
Design & build by Frido Verweij

CSS Responsive update 2022 
Niels - Webdiensten ZZP 
https://webdienstenzzp.nl
*/

html{
background: url(../files/bg2.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #252525;
}

body{
font-family: arial, Times New Roman, sans-serif; 
font-size: 62.5%; /* = 10px */
margin: 0;
padding:0;
}

div.mid{                      
margin: 0 auto 0 auto;
padding: 0px;
width: 960px; 
height: 100%;
text-align: left;
}

div.box{
float: left;
width: 288px;
text-align: left;
padding: 10px ;
margin: 5px;
border: 1px solid #050505;
background-color: #050505;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
}

div.boxLarge{
width: 918px;
text-align: left;
padding: 20px ;
margin: 15px auto;
border: 1px solid #050505;
background-color: #050505;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
}

div.begin1{
float: left;
width: 298px;
height:137px;
text-align: left;
padding: 55px 0 0 10px ;
margin: 5px;
border: 1px solid #000000;
background-color: #000000;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
}

div.begin2{
float: left;
width: 608px;
height:172px;
text-align: left;
padding: 10px 7px 10px 13px;
margin: 5px;
border: 1px solid #050505;
background-color: #050505;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
}

div.colomn{
float: left;
width: 320px;
text-align: left;
padding: 0px ;
margin: 0px;
}

div.mid_top{                      
margin: 20px auto 0px auto;
padding: 0px;
width: 950px;
height:60px;
text-align: left;
}

div.end{                      
margin: 0px;
padding: 0px;
width: 950px;
height: 20px;
text-align: left;
}

div.bottom{
width: 960px;
height: 100%;
text-align: center;
padding: 10px 0 20px 0 ;
margin: 10px auto;
border-top: 25px solid #BDBDBD;
}

div.begin_top{
float: left;
width: 330px;
text-align: left;
padding: 0 5px 5px 5px ;
margin: 0px;
}

div.agenda{
margin: 0 auto 0 auto;
padding: 0px 0 20px 0;
width: 950px;
text-align: center;
background-color: #000000;
}

div.album{
float: left;
width: 413px;
text-align: center;
padding: 10px ;
margin: 0px 10px 20px 10px;
background: url(../files/bg_trans.png) no-repeat 0px 0px;
border: 1px solid #0a0a0a;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */ 
}

div.album2{
float: left;
width: 420px;
text-align: left;
padding: 0px ;
margin: 5px 0px 0px 0;
}

div.top100_list{
float: left;
width: 450px;
text-align: left;
padding: 10px 0px 0px 10px ;
margin: 0px 0 10px 10px;
border: 2px dotted #BDBDBD;
}

div.top100{ 
float: left;            
text-align: left;
padding: 0px ;
margin:  0px 25px 0 0;
}

div.links{                      
margin: 0px auto 0 auto;
padding: 0px;
width: 550px;
height: 100%;
text-align: center;
}

div.links2{                      
float: left;
width: 100%;
height: 720px;
text-align: left;
margin: 20px 0 0 0;
padding: 100px 0 0 90px;
background: url(../files/links.gif) no-repeat 0px 0px;
}

div.uc{             /* under construction */     
float: left;
width: 100%;
text-align: center;
padding: 0 ;
margin:  0 0 30px 0;
}

div.clear {
clear: both;
width: 100%;
height: 1px;
}

div.podcast {
float: left;
margin: 4px 20px 0 0;
padding: 0;
font:13px arial, Times New Roman;
}

div.podcastwrap{
float: left;
width: 620px;
margin: 5px 0px 5px 0;
padding: 5px;
border: 1px solid #050505;
background-color: #050505;
border-radius:10px;
-moz-border-radius:10px; /* Firefox 3.6 and earlier */
}

/* ********************************************************************************    */

div.right_nav{                    
float: right;
text-align: right;
padding: 0px;
margin: 0px;
}

div.nav{
float: left;
text-align: center;
padding: 0px 0px 5px 0px ;
margin: 10px 0px 0 20px ;
}

div.nav:hover{
border-bottom: 5px solid #a4a4a4;
}

div.nav2{
float: left;
text-align: center;
padding: 0px 0px 5px 0px ;
margin: 10px 0px 0 20px ;
border-bottom: 5px solid #DF7401;   /*  #FF8000  */
}

/* ********************************************************************************    */

img.e-mail{
vertical-align:middle;
margin: 0 ;
padding:3px 2px 0 3px ;
border: none;
}

img.pic{
float: left;
padding: 0px;
margin: 0;
border: none;
}

img.pic2{          
float: left;
padding: 5px;
margin:  0px 0 10px 0;
border: none;
}

img.pic3{          
float: left;
padding: 1px;
margin:  0px 20px 10px 0;
border: 1px solid #999;
}

img.pic4{
float: left;        
padding: 1px;
margin:  1px;
border: 1px solid #999;
}

img.pic5{          
padding: 0px;
margin:  0px 0 0 10px;
vertical-align:middle;
border: none;
}

img.pic6{          
padding: 0px;
margin:  10px 0px;
vertical-align:middle;
border: none;
}

.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4; 
-khtml-opacity: 0.4;
opacity: 0.4;
}

/* ********************************************************************************    */

p.small{font-size: 1.3em;
padding: 0;
margin: 0 0 10px 0 ;
color: #e2e2e2;
}

p.small2{font-size: 1.1em;
padding: 0;
margin: 0px 0 0px 0 ;
color: #A8A8A8;
}

p.note{font-size: 1em;
font-style: italic; 
padding: 0;
margin: 0 0 0px 0 ;
color: #A8A8A8;
}

p.date{font-size: 1.3em;
font-style: italic; 
padding: 0;
margin: 0px 0 2px 0 ;
color:#555555;
}

p.vol{font-size: 1.5em;
font-style: italic; 
padding: 0;
margin: 0 0 0px 0 ;
color: #A8A8A8;
}

span.bold{
font-weight: bold;
margin: 0;
padding: 0;
color: #424242;
}

span.color{
color: :#A4A4A4;
}

h1{font-size: 3.0em; 
font-weight: bold;
color: #FFFFFF;
padding:0px ;
margin: 0 0 15px 0 ;
}

h2{
font-size: 1.5em;
color: #FFFFFF;
padding:0px ;
margin: 0 0 5px 0 ;
}

h3{
font-family: Impact, Charcoal, sans-serif; 
font-size: 2em; 
color: #A8A8A8;
padding:0px 0 10px 0px ;
margin: 0 ;
}

h4{font-size: 2.0em; 
font-weight: bold;
color: #A8A8A8;
padding:0px 0 20px 0px ;
margin: 0 ;
}

hr{
padding: 0px;
margin: 0 0 10px 0 ;
border: 1px solid #444444; 
}

/* ********************************************************************************    */

a{text-decoration: none;}

a:link, a:visited{
color: #8A4B08;   /* #FE9A2E */
}

a:hover, a:active{
color: #BDBDBD;
} 

a.nav{                              
font-size: 2em;
padding: 0 ;
}

a.nav:link, a.nav:visited{
color: #FFFFFF;
}

a.nav:hover, a.nav:active{
color: #FFFFFF;
}

a.white{                              
padding: 0 ;
}

a.white:link, a.white:visited{
color: #FFFFFF;
}

a.white:hover, a.white:active{
color: #BDBDBD;
}

a.mark{
font-size: 1.3em;
padding: 0px 0 5px 10px;
}

a.mark:link, a.mark:visited{
color: #8A4B08;
background: url(../files/arrow-gray2.gif) no-repeat 0px 2px;
}

a.mark:hover, a.mark:active{
color: #BDBDBD;
background: url(../files/go.gif) no-repeat -5px 2px;
}

a.mark2{
padding: 0px 0 5px 10px;
}

a.mark2:link, a.mark2:visited{
color: #BDBDBD;
}

a.mark2:hover, a.mark2:active{
color: #ffffff;
}

ul{
margin: 0px 0 8px 0;
padding: 0;
list-style: none;
}

li{
font-size: 1.3em;
margin: 5px 0 0 0;
padding: 0 0 0 0px;
} 

/* ********************************************************************************    */
/* BEGIN UPDATE 2022 Webdiensten ZZP    */
/* ********************************************************************************    */
div.inhuren300{
    float:left;
    width:300px;
    margin:35px 20px 10px 0;
}
div.inhuren300 img{
    margin:0px 0px 10px 0;
}
div.inhuren580{
    float:left;
    width:580px;
}
div.inhurenfloat{
    float:left;
    margin:35px 20px 10px 0;
}
div.albumswrapper{
    margin:0 auto;
    width:910px;
}
div.floatright{
    float:right;
}
div.top100form{
    float:left;
    display:none;
    margin:0;
    width:525px;
    border-right:1px solid #393939;
}
@media screen and (max-width: 900px) {
    body{
        margin:0 10px;
        padding:0;
        font-size:75%;
    }
    div.mid,
    div.box,
    div.boxLarge,
    div.begin1,
    div.begin2,
    div.mid_top,
    div.end,
    div.bottom,
    div.begin_top,
    div.agenda,
    div.album,
    div.album2,
    div.top100_list,
    div.links,
    div.podcastwrap,
    div.colomn,
    div.inhuren300,
    div.inhuren580,
    div.albumswrapper
    { 
        width:100%;
        margin-left:auto;
        margin-right:auto;
        float:none;
        min-width:unset;
        max-width:unset;
        min-height:unset;
        display:inline-block;
        padding-left:0;
        padding-right:0;
    }
    div.inhuren300 img,
    div.inhuren580 img,
    div.inhurenfloat img{
        width:100%!important;
        padding:0!important;
        border:0!important;
        margin:5px 0!important;
        float:none!important;
        
    }
    div.albumswrapper img{
        width:48%;
        float:none;
    }
    div.mid_top,
    div.begin2{
        height:unset;
    }
    div.begin1,
    div.begin2{
        text-align:center;
    }
    div.mid_top{
        text-align:center;
        font-size:85%;    
    }
    div.floatright,
    div.begin1 img.pic,
    div.mid_top img.pic,
    div.begin2 img.pic4{
        float:none;
    }
    div.right_nav {
    float: none; 
    text-align: left;
    }
    div.album2 p,
    div.boxLarge h3,
    div.boxLarge p,
    div.box h3,
    div.box p,
    div.box a.mark{
        margin: 0 10px;
    }
    div.podcastwrap p span{
        margin-right:10px;
    }
    div.podcastwrap p,
    div.podcastwrap div{
        margin-left: 10px;
    }
    div.top100form{
        width:100%;
        border-right:0;
        overflow:hidden;
    }
}
/* ********************************************************************************    */
/* END UPDATE 2022 Webdiensten ZZP    */
/* ********************************************************************************    */