/*--------------- ALGEMEEN ------------------------------*/
h1{
margin: 0 0 20px 0;
border-bottom: 2px solid #E6EADB;
color: #2989CE;
font-size: 17px;
}
a:link h1, a:visited h1{
color:           #2989CE;
text-decoration: none;
}
a:hover h1{
color:           #FFA500;
text-decoration: none;
}
/* voor Google Chrome */
span#gc a:link, span#gc a:visited, span#gc a:hover{
text-decoration: none;
}
/* ------------------ */
h2{
margin: 0px;
color: #2989CE;
font-size: 10px;
}
a:link h2, a:visited h2{
color:           #2989CE;
text-decoration: none;
}
a:hover h2{
color:           #FFA500;
text-decoration: none;
}
p{
margin: 0px;
}
p a:link, p a:visited{
color: #2989CE;
text-decoration: none;
}
p a:hover{
color: #FFA500;
text-decoration: none;
}
span#orange{
color: #FFA500;
}
img{
border: 0px;
}
ul li{
padding: 2px;
}
ul a:link, ul a:visited{
color: #2989CE;
text-decoration: none;
}
ul a:hover{
color: #FFA500;
text-decoration: none;
}
caption{
padding: 2px;
font-weight: bold;
text-align: left;
font-size: 12px;
}
table#hf{
float: left;
border-collapse: collapse; /* cellspacing */
}
td#mn{
vertical-align: top;
padding: 0px; /* cellpadding */
background-color: #EEEEEE;
border-right: 1px solid #CCCCCC;
}
td#pg{
vertical-align: top;
padding: 0px; /* cellpadding */
}
/*--------------- BODY & MAIN ------------------------------------*/
body{
margin-top: 15px; /* margin-bottom is gegeven aan ft, anders pakt Firefox hem niet */
background-image: url(http://www.downen.nl/img/bg.gif);
background-repeat: repeat;
color: #777777;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
}
#main{
width: 748px;
margin: 0 auto 0 auto;
}
/*--------------- KOP ---------------------------------------------*/
#hd{
position: relative; /* om herkenbaar te zijn voor tt, ot en ad_hd met position: absolute */
width: 748px;
height: 100px;
background-image: url(../img/hd/bg.gif);
background-repeat: no-repeat;
}
#hd a:link, #hd a:visited, #hd a:hover{
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
#tt{
position: absolute;
top: 15px;
left: 160px;
width: 340px;
color: #FFFFFF; 
font-size: 36px;
font-weight: bolder;
}
#ot{
position: absolute;
top: 60px;
left: 160px;
width: 340px;
color: #2989CE; 
font-size: 12px;
font-weight: bolder;
}
#ad_hd{
position: absolute;
top: 15px;
left: 519px;
width: 180px; /* 180 + 10 (padding) = 190 (img) */
height: 60px; /*  60 + 10 (padding) =  70 (img) */
padding: 5px;
}
#tl{
float: left;
width: 748px;
height: 20px;
line-height: 20px;
background-color: #FF9900;
color: #FFFFFF;
}
#tl_l{
float: left;
width: 160px; /* (mn) */
background-image: url(../img/tl/bg_l.gif);
background-repeat: no-repeat;
text-align: center;
}
#tl_r{
float: left;
width: 548px; /* 548 + 40 (padding) = 588, 586 + 160 = 748 (tl) */
padding: 0 20px 0 20px;
background-image: url(../img/tl/bg_r.gif);
background-repeat: no-repeat;
color: #FFA500;
font-size: 8px;
text-align: right;
}
#tl_r a{
font-size: 10px;
}
#tl_r p{
float: left;
width: 274px; /* 274 + 274 = 548 (tl_r) */
color: #FFFFFF;
font-size: 10px;
text-align: center;
}
#tl a:link, #tl a:visited{
text-decoration: none;
color: #FFFFFF;
}
#tl a:hover{
text-decoration: none;
color: #FFA500;
}
/*--------------- HOOFD --------------------------------------------*/
div#hf{
float: left;
width: 746px; /* 746 + 2 (border) = 748 */
border-top:    1px solid #AAAAAA;
border-right:  1px solid #AAAAAA;
border-bottom: 1px solid #AAAAAA;
border-left:   1px solid #AAAAAA;
background-color: #FFFFFF;
}
/*--------------- MENU --------------------------------------------*/
div#mn{
width: 159px;
border-top: 1px solid #FFFFFF;
font-size: 11px;
font-weight: bold;
}
#mn #ad_mn{
margin: 20px 0 20px 0;
text-align: center;
}
#b1{
height: 20px;
line-height: 20px;
text-indent: 10px;
border-top:    0px solid #FFFFFF;
border-right:  0px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left:   0px solid #FFFFFF;
background-color: #FFA500;
color: #FFFFFF;
}
span#partners #b1{
border-top: 1px solid #FFFFFF;
}
#b1 a:link, #b1 a:visited, #b1 a:hover{
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
#b2{
height: 20px;
line-height: 20px;
text-indent: 15px;
border-top:    0px solid #FFFFFF;
border-right:  0px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left:   0px solid #FFFFFF;
background-color: #3399CC; /* origineel = #2989CE; */
}
#b2 a:link, #b2 a:visited{
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
#b2 a:hover{
background-image: url(http://www.downen.nl/img/mn/bg2_hover.gif);
background-repeat: no-repeat;
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
#b2.active a:link, #b2.active a:visited, #b2.active a:hover{
background-image: url(http://www.downen.nl/img/mn/bg2_active.gif);
background-repeat: no-repeat;
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
#b3{
height: 20px;
line-height: 20px;
text-indent: 20px;
border-top:    0px solid #FFFFFF;
border-right:  0px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left:   0px solid #FFFFFF;
background-color: #B0B0B0;
}
span#partners #b3{
text-indent: 15px;
}
#b3 a:link, #b3 a:visited{
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
#b3 a:hover{
background-color: #CCCCCC;
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
#b3.active{
background-color: #CCCCCC;
}
#b3.active a:link, #b3 a:visited.active, #b3 a:hover.active{
color: #FFFFFF;
text-decoration: none;
display: block;
zoom: 100%;
}
/*--------------- PAGINA -------------------------------------------*/
div#pg{
float: left;
width: 546px; /* 546 + 40 (padding) = 586, 586 + 160 (mn) = 746 (hoofd excl. 2 borders) */
padding: 5px 20px 10px 20px;
}
/* ----------- hr ------------- */
#hr{
width: 546px;
height: 1px;
border-top: 1px solid #E6EADB;
clear: both;
}
/* ----------- ad ------------- */
#pg #ad_t{
margin: 10px 0 20px 0; /* top bij adsense niet! */
text-align: center;
}
#pg #ad_c{
margin: 20px 0 20px 0;
text-align: center;
}
#pg #ad_b{
margin: 25px 0 5px 0;
text-align: center;
}
/* ----------- browser -------- */
#browser{
width: 480px; /* 480 + 20 (padding) = 500 (img), 500 + 46 (margin) = 546 (pg) */
height: 80px; /* 12 + 12 + 10 + 35 = 69, 69 + 11 (shadow) = 80 + 20 (padding) = 100 (img) */
margin: 0 23px 15px 23px;
padding: 10px;
background-image: url(../img/pg/browser.gif);
background-repeat: no-repeat;
}
#browser p{
margin: 0 0 10px 0;
}
#browser h1#info{
margin: 0 0 0 100px;
padding-bottom: 0px;
}
/* ----------- item ----------- */
#item{
position: relative; /* om herkenbaar te zijn voor h2 met position: absolute */
width: 546px; /* (pg) */
height: 100px;
border-top: 1px solid #E6EADB;
}
#item.last{
border-bottom: 1px solid #E6EADB;
}
#item a{
display: block;
width: 526px; /* 526 + 20 (padding) = 546 (item) */
height: 80px; /* 78 (img) + 2 (img border) = 80, 80 + 20 (padding) = 100 (item) */
padding: 10px;
cursor: pointer;
}
#item a:link, #item a:visited{
text-decoration: none;
}
#item a:hover{
background-color: #EEEEEE;
text-decoration: none;
}
#item a:link p, #item a:visited p, #item a:hover p{
color: #777777;
}
#item img{
float: left;
margin: 0 10px 0 0;
border-top:    1px solid #999999;
border-right:  1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left:   1px solid #999999;
}
#item a:hover img{
border: 1px solid #FFA500;
}
#item h1{
margin: 0px;
border-bottom: 0px;
font-size: 12px;
}
#item h2{
position: absolute;
bottom: 10px; /* absoluut gepositioneerde elementen overlappen de padding van het element waar het in staat (padding a) */
right: 10px;  /* absoluut gepositioneerde elementen overlappen de padding van het element waar het in staat (padding a) */
padding: 0 0 0 9px;
background-image: url(../img/pg/pijl.gif);
background-repeat: no-repeat;
background-position: left;
}
/* ----------- prog ----------- */
div#prog{
width: 546px; /* (pg) */
height: 100px;
border-top: 1px solid #E6EADB;
}
#prog_l{
float: left;
position: relative; /* om herkenbaar te zijn voor h2 met position: absolute */
width: 415px; /* 415 + 10 (padding) + 1 (border) = 426 */
height: 80px; /* (prog) */
padding: 0 10px 0 0;
border-right: 1px solid #E6EADB;
}
#prog_r{
float: left;
width: 90px; /* 90 + 10 (padding) = 100 */
height: 72px; /* 72 + 8 (padding) = 80 (prog) */
padding: 8px 0 0 10px;
text-align: center;
}
#prog_r img{
width: 82px; /* 82 + 8 (padding) = 90 (prog_r) */
height: 14px;
margin: 0 4px 10px 4px;
}
#prog a{
display: block;
width: 526px; /* 526 + 20 (padding) = 546 (prog) */
height: 80px; /* 78 (img) + 2 (img border) = 80, 80 + 20 (padding) = 100 (prog) */
padding: 10px;
cursor: pointer;
}
#prog a:link, #prog a:visited{
text-decoration: none;
}
#prog a:hover{
background-color: #EEEEEE;
text-decoration: none;
}
#prog a:link p, #prog a:visited p, #prog a:hover p{
color: #777777;
}
#prog h1{
margin: 0px;
border-bottom: 0px;
font-size: 12px;
}
#prog h2{
position: absolute;
bottom: 0px;
right: 10px; /* absoluut gepositioneerde elementen overlappen de padding van het element waar het in staat (padding prog_l) */
padding: 0 0 0 9px;
background-image: url(../img/pg/pijl.gif);
background-repeat: no-repeat;
background-position: left;
}
#prog a:hover #prog_l{
border-right: 1px solid #DDDDDD;
}
/* ---------- info ---------- */
h1#info{
height: 35px;
line-height: 35px;
margin: 0 0 0 10px;
padding: 0 0 8px 45px;
border-bottom: 0px;
background-image: url(http://www.downen.nl/img/pg/download.gif);
background-repeat: no-repeat;
cursor: pointer; /* om onbekende reden is de cursor bij a:hover in IE default */
}
a:hover h1#info{
background-image: url(http://www.downen.nl/img/pg/download_hover.gif);
background-repeat: no-repeat;
}
h1#info2{
margin-top: 35px;
}
table#info{
width: 546px; /* (pg) */
margin: 0 0 20px 0;
border-top: 2px solid #E6EADB;
border-collapse: collapse; /* cellspacing */
text-align: left;
}
table#info a:link, table#info a:visited{
color: #2989CE;
text-decoration: none;
}
table#info a:hover{
color: #FFA500;
text-decoration: none;
}
table#info td{
height: 25px;
padding: 0 10px 0 10px; /* cellpadding */
border-bottom: 1px solid #E6EADB;
}
table#info td#l, table#info td#r{
font-weight: bold;
}
table#info td#r{
border-left: 1px solid #E6EADB;
}
table#info td#r a:link, table#info td#r a:visited, table#info td#r a:hover{
font-weight: normal;
}
table#info img{
vertical-align: middle;
border: 0px;
}
table#info img#star{
width: 82px;
height: 14px;
}
table#info img#pop{
width: 59px;
height: 11px;
}
/* ----------- zoeken --------- */
form#zoeken{
margin: 40px 0 40px 0;
text-align: center;
}
form#zoeken input#tekst{
width: 200px;
height: 16px;
margin: 0 5px 0 0;
border: 2px solid #CCCCCC;
color: #777777;
}
form#zoeken input#button{
width: 75px;
height: 20px;
border: 1px solid #2989CE;
background-color: #FFA500;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
/* ----------- pop ------------ */
#pop{
width: 546px; /* (pg) */
height: 44px;
border-top: 1px solid #E6EADB;
}
#pop_l{
float: left;
width: 16px; /* 16 + 20 (padding) = 36 */
height: 16px; /* 16 + 10 (padding) = 26 */
padding: 5px 10px 5px 10px;
}
#pop_l.home{
width: 19px; /* 19 + 17 (padding) = 36 */
height: 19px; /* 19 + 7 (padding) = 26 */
padding: 4px 8px 3px 9px;
}
#pop_c{
float: left;
width: 360px; /* 360 + 30 (padding) = 390 */
height: 26px;
padding: 0 10px 0 20px;
}
#pop_r{
float: left;
width: 90px; /* 90 + 10 (padding) = 100 */
height: 24px; /* 24 + 2 = 26 */
padding: 2px 10px 0 0;
text-align: right;
}
#pop_r.rate{
height: 26px;
padding: 0px 10px 0 0;
}
#pop_r.rate img{
margin: 2px 0 0 0;
}
#pop a{
display: block;
width: 526px; /* 526 + 20 (padding) = 546 (pop) */
height: 26px; /* 12 + 2 + 2 = 16 (h1), 16 + 10 (p) = 26, 26 + 18 (padding) = 44 (pop) */
padding: 8px 10px 10px 10px;
cursor: pointer;
}
#pop a:link, #pop a:visited{
text-decoration: none;
}
#pop a:hover{
background-color: #EEEEEE;
text-decoration: none;
}
#pop a:link p, #pop a:visited p, #pop a:hover p{
color: #777777;
}
#pop h1{
margin: 0px;
border-bottom: 0px;
font-size: 12px;
}
/* ----------- new ------------ */
#new{
width: 546px; /* (pg) */
height: 100px;
border-top: 1px solid #E6EADB;
}
#new_l{
float: left;
width: 16px; /* 16 + 10 (padding) + 1 (border) = 27 */
height: 16px; /* 16 + 64 (padding) = 80 (prog) */
padding: 32px 10px 32px 0;
border-right: 1px solid #E6EADB;
}
#new_c{
float: left;
position: relative; /* om herkenbaar te zijn voor h2 met position: absolute */
width: 415px; /* 415 + 20 (padding) = 435 */
height: 80px;
padding: 0 10px 0 10px;
}
#new_r{
float: left;
width: 53px; /* 53 + 10 (padding) + 1 (border) = 64 */
height: 10px; /* 10 + 70 (padding) = 80 */
padding: 35px 0 35px 10px;
border-left: 1px solid #E6EADB;
text-align: center;
}
#new a{
display: block;
width: 526px; /* 526 + 20 (padding) = 546 (new) */
height: 80px; /* 78 (img) + 2 (img border) = 80, 80 + 20 (padding) = 100 (new) */
padding: 10px;
cursor: pointer;
}
#new a:link, #new a:visited{
text-decoration: none;
}
#new a:hover{
background-color: #EEEEEE;
text-decoration: none;
}
#new a:link p, #new a:visited p, #new a:hover p{
color: #777777;
}
#new h1{
margin: 0px;
border-bottom: 0px;
font-size: 12px;
}
#new h2{
position: absolute;
bottom: 0px;
right: 10px; /* absoluut gepositioneerde elementen overlappen de padding van het element waar het in staat (padding new_l) */
padding: 0 0 0 9px;
background-image: url(../img/pg/pijl.gif);
background-repeat: no-repeat;
background-position: left;
}
#new a:hover #new_l{
border-right: 1px solid #DDDDDD;
}
#new a:hover #new_r{
border-left: 1px solid #DDDDDD;
}
/* ----------- contact -------- */
form#contact{
margin: 25px 0 0 0;
}
table#contact td{
padding: 5px;
}
table#contact td#label{
text-align: right;
}
form#contact input#text, form#contact textarea#text{
width: 200px;
height: 16px;
border: 1px solid #DDDDDD;
color: #777777;
}
form#contact input#text, form#contact textarea#text{
width: auto;
height: auto;
border: 1px solid #DDDDDD;
color: #777777;
}
form#contact input#button{
width: 75px;
height: 20px;
border: 1px solid #2989CE;
background-color: #FFA500;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
/* ----------- links ---------- */
#links_l, #links_r{
float: left;
width: 273px; /* 273 + 273 = 546 (pg) */
}
table#links{
width: 200px;
margin: 0 0 20px 0;
}
#links_r table#links tr{
text-align: right;
}
table#links a:link, table#links a:visited{
color: #2989CE;
text-decoration: none;
}
table#links a:hover{
color: #FFA500;
text-decoration: none;
}
/* --------------- FOOTER ---------------------------------------------*/
#ft{
float: left;
width: 748px; /* (main) */
height: 16px;
line-height: 16px;
margin-bottom: 15px;
padding: 3px 0 3px 0;
background-image: url(../img/ft/bg.gif);
background-repeat: no-repeat;
color: #BBBBBB;
text-align: center;
}
#ft_l{
float: left;
width: 160px; /* (mn) */
height: 16px;
line-height: 16px;
}
#ft_c{
float: left;
width: 428px; /* 428 + 320 (160 + 160) = 748 (ft) */
height: 16px;
line-height: 16px;
}
#ft_c img{
vertical-align: top;
}
#ft_r{
float: left;
width: 160px; /* (mn) */
height: 16px;
line-height: 16px;
}
#ft a:link, #ft a:visited{
text-decoration: none;
color: #FFFFFF;
}
#ft a:hover{
text-decoration: none;
color: #FFA500;
}