, en een
blokelement daarbinnen sluit die alinea vroegtijdig. Een kon niet, want
".content_main_box_rightside span" hierboven geeft élke span in dat blok float en
100% breedte mee — dezelfde reden waarom /mijn-reacties en /fotograaf ook em's
gebruiken. display: block maakt er hier alsnog blokken van. */
.reactie_foto {
display: block;
margin: 14px 0;
font-style: normal;
text-align: center;
}
/* De link om de foto heen staat er alleen als er iets te vergroten valt. inline-block,
zodat een klik naast een kleine foto niet ook de lightbox opent. */
.reactie_foto a {
display: inline-block;
max-width: 100%;
line-height: 0;
}
/* width: auto en niet 100%: een foto van 150 pixels blijft 150 pixels staan. Opschalen
maakt hem alleen maar waziger. max-width houdt een grote foto binnen de reactie en
height: auto bewaart daarbij de verhouding — zonder die regel trekt de hoogte uit de
width/height-attributen de foto scheef zodra max-width toeslaat. */
.reactie_foto img {
display: block;
margin: 0 auto;
width: auto;
max-width: 100%;
height: auto;
border-radius: 4px;
}
/* De opnamegegevens uit de EXIF; zelfde opmaak als het bijschrift onder een
artikelfoto (.beeld_bijschrift), zodat de site zichzelf niet tegenspreekt. */
.reactie_foto_exif {
display: block;
margin-top: 6px;
font-size: 12px;
font-style: italic;
line-height: 1.4;
color: #7b8794;
text-align: center;
}
/* --- een foto in het reactieveld laten vallen (reactiefoto.js) --- */
/* Het omhulsel is dezelfde .textarea-met-emoji als bij de emoji-kiezer; alleen tijdens
het slepen is er iets te zien, zodat het veld er verder gewoon uitziet als een veld. */
.fotodrop--over .textarea_box {
border: 2px dashed #446da3 !important;
background: #eef3fa;
}
.fotodrop_melding {
clear: both;
float: left;
width: 100%;
margin: 6px 0 0;
font-size: 13px;
color: #6b7a8d;
}
.fotodrop_fout {
color: #b02a2a;
}
/* De strook met de foto's die op dit moment in de tekst staan. Wordt na elke wijziging
opnieuw uit het tekstveld afgeleid, dus wie de opmaakcode met de hand weghaalt ziet
de foto hier ook verdwijnen. */
.fotodrop_strook {
clear: both;
float: left;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.fotodrop_kaartje {
position: relative;
width: 80px;
height: 80px;
}
/* contain en niet cover: de strook laat zien wát je geplaatst hebt, en dan hoort een
staande of vierkante foto er niet als een bijgesneden reepje uit te zien. */
.fotodrop_kaartje img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 4px;
background: #f4f5f6;
}
.fotodrop_weg {
position: absolute;
top: -6px;
right: -6px;
width: 20px;
height: 20px;
padding: 0;
line-height: 18px;
text-align: center;
font-size: 15px;
color: #fff;
background: #b02a2a;
border: none;
border-radius: 50%;
cursor: pointer;
}
.fotodrop_weg:hover,
.fotodrop_weg:focus {
background: #8a1f1f;
}
.box_reactiesecond {
background: #fefefe;
border-bottom: 2px solid #F4F5F6;
float: left;
padding: 12px 0 20px;
position: relative;
width: 100%;
}
.box_reactieblogger {
background: #f5fcf4;
border-bottom: 2px solid #F4F5F6;
float: left;
padding: 12px 0 20px;
position: relative;
width: 100%;
}
.profile_pics_box {
margin: 0;
padding: 0px 0px 0px 20px;
float: left;
width: 110px;
}
.profile_pics_box p {
margin: 10px 0px;
padding: 0;
float: left;
width: 100%;
text-align: center;
color: #6f6f6f;
}
.content_main_box_rightside {
margin: 0px 190px 10px 0px;
padding: 0;
float: right;
width: 600px;
line-height: 1.8;
}
.content_main_box_rightside h1 {
margin: 10px 0px 0px 0px!important;
padding: 0 !important;
float: left !important;
width: 100% !important;
font-family: 'Open Sans', Verdana !important;
}
.content_main_box_rightside span {
margin: 5px 0px !important;
padding: 0 !important;
float: left !important;
width: 100% !important;
color: #6f6f6f !important;
line-height: 1.8;
}
.content_main_box_rightside span a {
color: #446da3 !important;
text-decoration: underline !important;
}
.content_main_box_rightside span a:hover {
text-decoration: none !important;
}
.content_main_box_rightside p {
margin: 0px 0px 0px 0px !important;
padding: 0 !important;
float: left !important;
width: 100% !important;
}
.content_main_box_rightside p a {
color: #446da3 !important;
text-decoration: underline !important;
}
.content_main_box_rightside p a:hover {
text-decoration: none !important;
}
.artinfo {font-size: 13px;}
.content_main_box_topad {
margin: 0px auto;
padding: 0;
width: 970px;
overflow: hidden;
text-align: center;
}
.content_main_box_images {
margin: 0px auto;
padding: 0;
width: 960px;
overflow: hidden;
text-align: center;
}
.content_main_box_topad img {
max-width: 100%;
}
.content_main_box_images img {
max-width: 100%;
}
/* Het bijschrift onder een [imgbox]/[whitebox]-foto; zelfde opmaak als het
bijschriftveld in de editor van het beheer (.wys-blok__bijschrift). */
.content_main_box_images .beeld_bijschrift {
margin: 10px auto 0 auto;
padding: 0 10px;
max-width: 700px;
width: auto;
float: none;
font-size: 13px;
font-style: italic;
line-height: 1.4;
color: #7b8794;
text-align: center;
}
.content_main_box_images div.responsive_youtube{
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
}
.content_main_box_images div.responsive_youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.ontvage_inbox p a img {
margin: -4px 4px;
}
.gratis_inbox p a img {
margin: -4px 4px;
}
.add_imgg {
margin: 0 auto;
padding: 0;
width: 750px;
overflow: hidden;
}
.add_imgg img {
margin: 0px 20px 0px 50px;
padding: 0px;
float: left;
}
.delen_social_likes {
margin:52px 0px 16px;
padding: 0;
float: left;
width: 100%;
}
.delen_social_likes h3 {
margin: 0;
padding: 10px 25px;
float: left;
font-size: 30px;
color: #cccccc;
}
.delen_social_likes ul {
margin: 0;
padding: 0;
float: left;
}
.delen_social_likes ul li {
margin: 0;
padding: 0px 25px;
float: left;
}
.gratis_inbox {
margin: 25px -10px;
padding: 10px;
float: left;
width: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #eef6fe;
box-shadow: 0 0 2px 1px #E4E4E4;
}
.gratis_inbox_form {
margin: 20px 0 0 0;
padding: 0;
float: left;
}
.form_naam {
margin: 0 10px 5px 0;
padding: 8px 5px 7px 40px;
float: left;
background: #fff url("/images/persoon-icon.png") left 6px center no-repeat;
color: #696972;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #E4E4E4;
font-size: 18px;
width: 105px;
}
.form_email {
margin: 0 10px 5px 0;
padding: 8px 5px 7px 40px;
float: left;
background: #fff url("/images/msg-icon.png") left 6px center no-repeat;
color: #696972;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #E4E4E4;
font-size: 18px;
width: 155px;
}
.form_blue_button {
margin: 0;
padding: 9px;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 18px;
color: #fff;
cursor: pointer;
background: #446da3;
width: 367px;
}
.form_blue_button:hover {
background: #83C129;
}
.form_blue_button_slidein {
margin: 0;
padding: 9px;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 18px;
color: #fff;
cursor: pointer;
background: #446da3;
width: 120px;
}
.form_blue_button_slidein:hover {
background: #83C129;
}
.gratis_inbox_form_input {
margin: 0 10px 5px 0;
padding: 8px 5px 7px 40px;
float: left;
background: #fff url("/images/msg-icon.png") left 6px center no-repeat;
color: #696972;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #E4E4E4;
font-size: 18px;
width: 220px;
}
.slidein_inbox_form_input {
margin: 0 10px 5px 0;
padding: 8px 5px 7px 40px;
background: #fff url("/images/msg-icon.png") left 6px center no-repeat;
color: #696972;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #E4E4E4;
font-size: 18px;
width: 120px;
}
.slidein_inbox_form_naam {
margin: 0 10px 5px 0;
padding: 8px 5px 7px 40px;
background: #fff url("/images/persoon-icon.png") left 6px center no-repeat;
color: #696972;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px solid #E4E4E4;
font-size: 18px;
width: 110px;
}
.gratis_inbox_form_submit {
margin: 0;
padding: 9px;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 18px;
color: #fff;
cursor: pointer;
background: #446da3;
width: 120px;
}
.gratis_inbox_form_submit:hover {
background: #83C129;
}
.gratis_inbox_form img {
margin: 0 0 0 30px;
padding: 0;
float: right;
}
.gratis_inbox_form p {
margin: 40px 0px 0px;
padding: 0;
color: #464646;
line-height: 22px;
width: 70%;
float: left;
}
.toon_meer:hover {
background: #5883bb;
}
.toon_meer {
margin: 0px auto 20px;
padding: 12px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #446da3;
width: 60%;
text-align: center;
color: #fff;
font-size: 18px;
}
.toon_meer:hover {
background: #83c129;
}
.deel_jouw_formbox {
margin: -10px 0px 20px 0px;
padding: 0;
float: left;
width: 100%;
}
.reacties_box{
margin:0;
padding:0;
float:left;
width:100%;
}
.reacties_box ol{
margin:0;
padding:0;
float:left;
width:100%;
list-style-type: none;
}
.reacties_box ol li{
margin:0;
padding:0;
float:left;
width:100%;
list-style-type: none;
}
.ookinteressant_mainbox{
margin:0;
padding:0px;
float:left;
width:100%;
}
.ookinteressant_mainbox ul{
margin:0;
padding:0;
float:left;
width:100%;
}
.ookinteressant_mainbox ul li{
margin:0;
padding:10px 0px 0px 0px;
float:left;
width:100%;
list-style-type: none;
}
.textarea_box {
margin: 15px 0px;
padding: 10px;
float: left;
width: 95%;
height: 100px;
box-shadow: 0 0 2px 1px #E4E4E4;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #696972;
font-size: 18px;
font-family: Verdana, Geneva, sans-serif;
}
/* Omhulsel om een .textarea_box heen, alleen om de emoji-knop in de hoek te kunnen
plaatsen (zie _EmojiKiezer.cshtml); de textarea zelf houdt zijn eigen opmaak. */
.textarea-met-emoji {
position: relative;
float: left;
width: 100%;
}
/* Het emoji-paneel: een details/summary, net als het accountmenu in de sitebalk
(.sitebar_menu), zodat het ook zonder JavaScript open- en dichtklapt.
De knop hangt in de rechterbovenhoek ván het veld, 9px binnen de rand — net zoveel
als hij van boven inspringt. De afstand wordt vanaf het omhulsel gerekend en niet met
een vast getal, want dan schoof hij op een smal scherm het tekstgebied in.
Reken die afstand mee met de doos van .textarea_box: het veld is 5% smaller dan zijn
omhulsel, maar heeft geen border-box, dus die 10px padding aan elke kant komen er nog
bij en het gat rechts is 5% - 20px. Vandaar de -11px (= -20 + 9) en niet +9; met dat
plusteken stond de knop 29px naar binnen en dus zichtbaar los van de hoek. */
.emoji-picker {
position: absolute;
top: 24px;
right: calc(5% - 11px);
/* Deze duur geldt bij het terugkomen (dan is .emoji-picker--weg net weg) en die
hieronder bij het wegfaden: weggaan mag rustig, terugkomen hoort meteen te zijn. */
transition: opacity .2s;
}
/* Daar staat hij wel voor de tekst zodra de eerste regel vol raakt, dus dan gaat hij
opzij: site.js hangt deze klasse eraan zodra er tekst onder komt en haalt hem er weer
af zodra je stopt met typen. pointer-events erbij, want anders vangt een onzichtbare
knop de klik waarmee je de cursor in je tekst zet. */
.emoji-picker--weg {
opacity: 0;
pointer-events: none;
transition: opacity .4s;
}
.emoji-picker > summary {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
font-size: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 2px 1px #E4E4E4;
cursor: pointer;
}
.emoji-picker > summary::-webkit-details-marker {
display: none;
}
.emoji-picker__paneel {
display: none;
position: absolute;
top: 100%;
right: 0;
margin-top: 6px;
width: 232px;
max-height: 190px;
overflow-y: auto;
padding: 8px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
z-index: 200;
}
.emoji-picker[open] .emoji-picker__paneel {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
.emoji-picker__optie {
display: block;
text-align: center;
font-size: 20px;
line-height: 28px;
border-radius: 4px;
cursor: pointer;
}
.emoji-picker__optie:hover,
.emoji-picker__optie:focus {
background: #eee;
outline: none;
}
.deel_submitbox:hover {
background: #9ddf3d;
}
.deel_submitbox {
margin: 0;
padding: 5px 10px;
background: #83c129;
color: #fff;
font-size: 14px;
border: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
float: left;
}
.chekbox_tic {
margin: 7px 0px 0px 65px;
padding: 0;
float: left;
}
.deel_jouw_formbox p {
color: #6f6f6f !important;
float: left !important;
font-size: 14px !important;
margin: 1px 0 0 10px !important;
padding: 0 !important;
width: 65% !important;
}
.ook_intterset_box {
margin:0px;
padding: 0;
float: left;
width: 100%;
}
.ook_intterset_box img {
margin: 0;
padding: 0;
float: left;
width: 77px;
height: 77px;
border: 3px solid #ebf2fb;
}
.ook_text_box {
margin: 14px 0px 0px 25px;
padding: 0;
float: left;
width: 80%;
}
.ook_text_box a {
margin: 0;
padding: 0;
float: left;
width: 100%;
color: #446da3;
text-decoration: underline;
}
.ook_text_box p {
margin: 2px 0px !important;
padding: 0 !important;
float: left !important;
color: #6f6f6f !important;
font-size: 14px !important;
width: 100% !important;
}
.ontvage_inbox_main {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 960px;
position: relative;
}
.ontvage_inbox {
margin: 0;
padding: 0;
float: left;
width: 50%;
}
.ontvage_inbox p {
margin: 0px 0px 30px 0px;
padding: 0;
float: left;
width: 100%;
}
.ontvage_inbox p a {
color: #446da3;
text-decoration: underline;
}
.ontvage_inbox p a:hover {
text-decoration: none;
}
.ontvage_inbox_form {
margin: 110px 0px 0px 0px;
padding: 0;
float: right;
width: 48%;
}
.form_nieuwsbrief {
margin: 110px 0px 0px 50px;
padding: 0;
float: left;
/* width: 48%; */
}
/* article close here */
footer {
margin: 0px;
padding: 0;
width: 100%;
}
#footer_top {
margin: 0;
padding: 25px 0px;
width: 100%;
background: #6c6c6c;
}
#footer_middle {
width: 100%;
margin: 0px auto;
padding: 0px;
background: #545454;
}
.bluebar-section {
background: #eef6fe;
width: 100%;
padding: 0;
}
.bluebar {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 960px;
position: relative;
padding: 15px 0px 15px 0px;
display: flex;
}
.bluebarbox {
flex: 1 0 auto;
width: auto;
cursor: pointer;
}
.bluebarbox2 {
flex: 1 0 auto;
width: auto;
cursor: pointer;
padding-left: 20px;
}
.bluebarimage {
float: left;
padding-right: 10px;
/* De hoogte staat inline op de tag en wint van de img{height:auto} hierboven, dus
hier moet de breedte los. Anders zou het width-attribuut de volle 149px pakken
naast een hoogte van 40 en staat het logo uitgerekt. */
width: auto;
}
.bluebarlink {
font-weight: bold;
color: #446DA3;
}
.bluebarlink:visited {
color: #446DA3;
}
.cats
{
width: 100%;
}
.categorieen
{
width: 960px;
margin: 0px auto;
padding: 25px 0px 25px 25px;
background: #545454;
}
.categorieen h2
{
color: #fff;
font-weight: bold;
font-size: 22px;
padding-bottom: 20px;
}
.categorieen h3
{
color: #b9d532;
font-weight: bold;
font-size: 18px;
padding-bottom: 5px;
}
.categorieen ul li
{
display: inline-block;
width: 300px;
padding-right: 30px;
vertical-align: top;
}
.categorieen ul li ul, .categorieen ul li ul li
{
list-style: outside none;
display: list-item;
}
.categorieen ul > li > ul
{
padding-bottom: 20px;
}
.categorieen a
{
color: #fff;
text-decoration: none;
}
.categorieen a:hover
{
color: #b9d532;
text-decoration: underline;
}
.categorieen-h3 a:hover
{
color: #fff;
text-decoration: underline;
}
.categorieen ul li ul li ::before {
content: "\276F";
font-size: 14px;
color: #b9d532;
font-weight: bold;
display: inline-block;
width: 1em;
margin-left: -1em;
}
.footer_top_main {
margin: 0px auto;
padding: 0;
width: 620px;
overflow: hidden;
}
#footer_bottom {
margin: 0;
padding: 25px 0px;
float: left;
width: 100%;
background: #444444;
}
.footer_bottom_main {
margin: 0px auto;
padding: 0;
width: 960px;
overflow: hidden;
}
.footer_topmenu {
margin: 0px 8px 0px 0px;
padding: 0;
float: left;
width: 24%;
}
.footer_topmenu h3 {
margin: 0;
padding: 0;
float: left;
width: 100%;
color: #fff;
font-size: 24px;
font-weight: bold;
}
.footer_topmenu ul {
margin: 0;
padding: 0;
float: left;
width: 100%;
}
.footer_topmenu ul li {
margin: 0;
padding: 15px 0px 0px 0px;
float: left;
width: 100%;
}
.footer_topmenu ul li span {
margin: 6px;
padding: 0;
background: url("/images/dropdwon-icon.png") no-repeat;
width: 10px;
height: 9px;
float: left;
}
.footer_topmenu ul li a {
margin: 0;
padding: 0;
float: left;
font-size: 15px;
color: #fff;
text-decoration: underline;
}
.footer_topmenu ul li a:hover {
text-decoration: none;
}
.footer_topmenu h3 a {
color: #fff;
text-decoration: underline;
}
.footer_topmenu h3 a:hover {
text-decoration: none;
}
.footer_social_nav {
margin: 0;
padding: 0;
width: 100%;
float: left;
text-align: center;
}
.footer_social_nav ul {
margin: 0px auto;
padding: 0;
width: 60%;
text-align: center;
}
.footer_social_nav ul li {
margin: 0;
padding: 0px 8px;
float: left;
border-right: 1px solid #fff;
}
.footer_social_nav ul li:last-child {
border: none;
}
.footer_social_nav ul li a {
margin: 0;
padding: 0;
float: left;
font-size: 15px;
color: #fff;
text-decoration: underline;
}
.footer_social_nav ul li a:hover {
text-decoration: none;
}
.copyright_content {
margin: 20px 0px 0px;
padding: 0;
float: left;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
}
.copyright_content a {
font-size: 15px;
color: #fff;
border-left: 1px solid #fff;
padding: 0px 0px 0px 4px;
text-decoration: underline;
}
.copyright_content a:hover {
text-decoration: none;
}
.content_main_box h1{
color: #446DA3;
float: left;
font-family: 'Open Sans', Verdana;
font-size: 24px;
margin: 10px 0 0;
padding: 0;
width: 100%;
}
.content_main_box h3 {
color: #446da3;
float: left;
font-family: 'Open Sans', Verdana;
font-size: 24px;
margin: 10px 0 0;
padding: 0;
width: 100%;
}
.content_main_box h4{
color: #446DA3;
float: left;
font-family: 'Open Sans', Verdana;
font-size: 28px;
margin: 10px 0 0;
padding: 0;
width: 100%;
}
.ontvage_inbox h2 {
color: #446DA3;
float: left;
font-family: 'Open Sans Semibold', Verdana;
font-size: 22px;
margin: 10px 0 0;
padding: 0;
width: 100%;
}
.content_main_box h2 {
color: #446DA3;
float: left;
font-family: 'Open Sans', Verdana;
font-size: 26px;
margin: 10px 0 0;
padding: 0;
width: 100%;
}
/* footer close here */
/* ===================================================== home page css start here */
.add_imggsec {
margin: 0 auto;
padding: 25px 0px 40px 0px;
width: 960px;
overflow: hidden;
}
.add_imggsec img {
margin: 0px 20px 0px 0px;
padding: 0px;
float: left;
}
.add_imggsec img:hover {
opacity: 0.8;
}
.content_main_box h2 {
margin: 10px 0px 0px;
padding: 0;
float: left;
width: 100%;
font-family: 'Open Sans', Verdana;
font-size: 26px;
color: #446da3;
}
.footerhead {font-size: 22px !important;}
.content_main_box span {
margin: 5px 0px;
padding: 0;
float: left;
width: 100%;
}
.content_main_box span a {
color: #446da3;
text-decoration: underline;
}
.content_main_box span a:hover {
text-decoration: none;
}
.content_main_box p {
margin:0px 0px;
padding: 0;
float: left;
width: 100%;
}
.topright_arrow {
margin: 30px 0px;
padding: 0;
position: absolute;
right: 200px;
height: 70px;
width: 25px;
}
.meer_boxsec {
margin: 0;
padding: 0;
float: left;
}
.meer_boxsec p {
margin: 0;
padding: 0px 5px;
float: left;
color: #464646;
font-size: 14px;
width: auto;
}
.meer_boxsec a span {
margin: 8px;
padding: 0;
float: none;
}
.thum_rightcontent {
margin: 10px 0px 0px 80px;
padding: 0;
float: left;
width: 100%;
}
.thum_rightcontent_imgbox {
margin: 20px 0px;
padding: 0;
float: left;
width: 150px;
height: 150px;
overflow: hidden;
}
.thum_rightcontent_imgbox img {
width: 100%;
}
.thum_rightcontent_imgbox img:hover {
opacity: 0.8;
}
.toon_meersecond:hover {
background: #5883bb;
}
.toon_meersecond {
margin: 0;
padding: 12px 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #446da3;
width: 30%;
text-align: center;
float: left;
}
.toon_meersecond a {
font-size: 18px;
color: #fff;
}
.meer_boxsec_box {
margin: 0 0 0 60px;
padding: 8px;
float: left;
}
.meer_boxsec_box a {
margin: 3px 5px 0px;
padding: 0 5px;
float: left;
color: #446DA3;
font-size: 14px;
text-decoration: underline;
width: auto;
}
.meer_boxsec_box a:hover {
text-decoration: none;
}
.meer_boxsec_box a span {
margin: 8px;
padding: 0;
float: none;
}
@media screen and (max-width: 3000px) {
.content_main_box p {padding: 0 0 5px !important;}
.gratis_inbox_form_submit {width: 125px;}
.chekbox_tic {margin: 7px 0 0 20px!important; padding: 0;}
.add_imgg img {margin: 0 20px 0 46px;}
.profile_pics_box {padding: 16px 0 0 26px !important;}
.ontvage_inbox_form {margin: 50px 0 0;}
.form_nieuwsbrief {margin: 40px 0 0 50px;}
.gratis_inbox .gratis_inbox_form > p {width: 410px !important; margin-top: 20px !important;}
.delen_heading.delen_social_likes > h3 {width: 23%;}
.links_bar {margin: 0px;}
}
.pfabox {margin-bottom: 15px; position: relative;}
.pfabox p {margin: 0;}
.pfabox h2 {margin: 0 0 0px;}
.close {color: #ddd; display: inline; cursor: pointer; position: absolute; top: 0; right: 0;}
.close:hover {color: #aaa;}
#cookiewet {display: block; bottom: 0!important; background-color: #222; background-color: rgba(29, 29, 29, 0.90); color: #fff; position: fixed; padding: 15px; width: 100%; text-align: center;}
#cookiewet a {color: #fff; text-decoration: underline;}
#cookiewet a:hover {color: #c0e32d; text-decoration: none;}
#cookiewet a.button {background-color: #c0e32d; border-radius: 5px; color: #111111; font-size: 11pt; font-weight: 300; margin-top: 2px; margin-left: 30px; padding: 6px 12px; text-decoration: none; width: 60px; display: inline-block;}
#cookiewet a.button:hover {background-color: #fff; cursor: pointer;}
.populairste {margin: 0px 220px 30px 0px;padding: 0;float: right;width: 600px;line-height: 1.8;}
/* nieuwsbrief slide in */
#newsletter-slidein {position: fixed; bottom: 200px; right: 0px; display: none; z-index: 1000;}
#newsletter-slidein div {background-color: #edf5e1; border-left: 6px solid #83c129; border-top: 6px solid #83c129; border-bottom: 6px solid #83c129; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; padding: 20px; width: 600px;}
#newsletter-slidein-close {position: absolute; margin-top: -37px; margin-left: -37px; display: none; cursor: pointer;}
#newsletter-slidein h2 {color: #446DA3;float: left; font-family: 'Open Sans', Verdana; font-size: 26px; margin: 0; padding: 0; width: 100%;}
#emailformfield {display: inline; float: none;}
.drop-icon {width: 10px;}
.twitter-icon {width: 27px;}
.facebook-icon {width: 23px;}
/* home page css close here ============================================================================== */
/* CSS voor ebook give-away - START */
.book-offer-article__section-container {
overflow: hidden;
margin: 0 auto 0;
background: aliceblue;
width: 960px;
}
@media screen and (max-width: 1024px) {
.book-offer-article__section-container {
overflow: hidden;
width: 90%;
}
}
@media screen and (max-width: 480px) {
.book-offer-article__main-content {
padding: 0!important;
width: 100% !important;
}
.book-offer-pop-up-box_book-img {
display: none;
}
.form_nieuwsbrief { margin: 0px; }
}
.book-offer-pop-up-box {
width: 60%;
max-width: 960px;
height: 550px;
position: fixed;
z-index: 1001;
margin: auto;
top: 0;
background: #5ab735;
right: 0;
left: 0;
bottom: 0;
display: none;
}
h4.book-offer-pop-up-box-title--top {
color: #446DA3;
float: left;
color: white;
font-family: 'Open Sans', Verdana;
font-size: 28px;
padding: 0;
width: 100%;
}
.book-offer-article__description--text {
display: block !important;
}
.book-offer-article__article {
background: aliceblue;
}
.book-offer-article__content {
float: left;
width: 72%;
}
h4.book-offer-article__title--top {
float: left;
font-family: 'Open Sans', Verdana;
font-size: 24px;
margin: 10px 0 0;
padding: 0;
width: 100%;
}
h3.book-offer-article__title--bottom {
color: #446DA3;
float: left;
font-family: 'Open Sans', Verdana;
font-size: 28px;
padding: 0;
width: 100%;
margin-top: -5px;
}
.book-offer-article__description--text {
margin: 0px 0px 5px 0px
}
.book-offer-article__description--text .book-offer-article__description--text-icon {
float: none !important;
color: #9abe29 !important;
}
.book-offer-article__book-img {
float: right;
width: 27%;
margin-top: 7%;
}
.book-offer-pop-up-box_content {
padding: 30px 50px;
}
.book-offer-article__open-pop-up-btn {
margin-top: 25px;
width: 280px;
border-radius: 13px;
}
.book-offer-pop-up-box_form * {
box-sizing: border-box;
width: 70%;
}
.book-offer-pop-up-box_form {
margin-top: 0;
}
.book-offer-pop-up-box_close-btn {
top: -10px;
right: -10px;
position: absolute;
cursor: pointer;
color: grey;
border: 1px solid #AEAEAE;
border-radius: 30px;
background: white;
font-size: 16px;
font-weight: bold;
display: inline-block;
line-height: 0px;
padding: 10px 3px 10px 3px;
}
.book-offer-pop-up-box_close-btn:before {
content: "\2715";
}
.book-offer-article__container {
padding-top: 0 !important;
}
.book-offer-article__content .book-offer-article__description {
margin-bottom: 10px !important;
}
.book-offer-pop-up-box-title--bottom {
float: left;
color: white;
font-family: 'Open Sans', Verdana;
font-size: 24px;
padding: 0;
margin-bottom: 20px;
width: 100%;
}
.book-offer-pop-up-box_form-image-container {
display: flex;
margin-top: 30px
}
.book-offer-pop-up-box_book-img {
width: auto;
height: 100%;
margin-left: -20px;
}
.book-offer-pop-up-box_form {
display: flex;
flex-direction: column;
width: 100%;
}
.book-offer-pop-up-box_form--name {
border-radius: 0;
}
.book-offer-pop-up-box_form--email {
border-radius: 0;
}
.book-offer-pop-up-box_form--submit {
margin-top: 20px;
border: 1px solid white;
border-radius: 10px;
}
.book-offer-pop-up-box_description {
color: white
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
display: none;
}
@media screen and (max-width: 849px) {
.book-offer-pop-up-box {
width: 80%;
}
}
@media screen and (max-width: 624px) {
.book-offer-pop-up-box {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 849px) {
.book-offer-pop-up-box_form * {
width: 80%;
}
}
@media screen and (max-width: 624px) {
.book-offer-pop-up-box_form * {
width: 100%;
}
}
@media screen and (max-width: 624px) {
.book-offer-pop-up-box_close-btn {
top: 0px;
right: 0px;
}
}
@media screen and (max-width: 775px) {
h4.book-offer-pop-up-box-title--top {
font-size: 24px
}
}
/* CSS voor ebook give-away - END */
/* -------------- Responsive css------------------ */
@media screen and (max-width: 1500px) {
.content_main_box p {padding: 0 0 5px !important;}
.gratis_inbox_form_submit {width: 125px;}
.chekbox_tic {margin: 7px 0 0 20px!important; padding: 0;}
.add_imgg img {margin: 0 20px 0 46px;}
.profile_pics_box {padding: 16px 0 0 26px !important;}
.ontvage_inbox_form {margin: 50px 0 0;}
.form_nieuwsbrief {margin: 40px 0 0 50px;}
.gratis_inbox .gratis_inbox_form > p {width: 410px !important; margin-top: 20px;}
.topright_arrow {margin: -17px -126px 0 0;}
.links_bar {float: none;}
/* #box_fullwidth {padding: 0;margin:0;} */
#box_fullwidth .content_main_box .toon_meersecond {margin: 0 0 0 145px;width: 25%;}
.content_main_box {margin: 0 auto 0;}
.delen_heading.delen_social_likes > h3 {width: 23%;}
.links_bar {margin: 0px 0px 30px 0px;}
.cameranu-logo {padding-bottom: 10px;}
}
@media screen and (max-width: 1024px) {
#header_main_box {width: 72%;}
.logo img {width: 100%;}
.footer_top_main {width: 85%;}
.footer_bottom_main {width: 72%;}
.content_main_box_images {width: 91%; height: auto;}
.content_main_box_topad {width: 91%; height: auto;}
.gratis_inbox_form {margin: 31px 0 0;}
.content_main_box_rightside {float: none;}
.toon_meer {float: left;}
.cameranu-logo {padding-bottom: 10px;}
}
@media screen and (max-width: 1024px) {
#header_main_box {width: 90%;}
.content_main_box {overflow: hidden; width: 90%;}
.ontvage_inbox_main {width: 90%;}
.pfabox h2 {font-size: 20px !important;}
.footer_top_main {width: 95%;}
.footer_bottom_main {width: 90%;}
.footer_topmenu {text-align: center;}
.footer_topmenu ul li a {float: none;}
/*#box_fullwidththird .ontvage_inbox_form {margin: 28px 0 0;}*/
.ontvage_inbox {width: 100%;}
.ontvage_inbox_form {float: none; width: 100%; margin-bottom: 20px;}
.form_nieuwsbrief {float: none; width: 100%; margin-bottom: 20px;}
.content_main_box_rightside {width: 100%;float: left;}
.thum_rightcontent_imgbox {margin: 0 0 0 75px;}
.delen_heading.delen_social_likes > h3 {width: 23%;}
.add_imgg {float: right; margin: auto;width: 84%;}
.ook_intterset_box {text-align: center;}
.ook_intterset_box img {float:none;}
.profile_pics_box {float: left;padding: 0;text-align: center;width:14%;}
/* .profile_pics_box > img {width: 100%;} */
.profile_pics_box > img {width: 75%;}
.content_main_box h1 {text-align: center;}
.content_main_box span {text-align: center;}
.toon_meersecond {width: 86%;}
#box_fullwidththird {margin: 0 0 40px;width: 100%;float: right;}
.gratis_inbox .gratis_inbox_form > p {width: 55% !important;}
.top_cont.content_main_box > h1 {text-align: left; font-size: 20px;}
.top_cont.content_main_box > span {text-align: left;}
.ontvage_inbox h2 {font-size: 20px !important;}
.thum_rightcontent_imgbox {margin: 12px 0 0;width: 12%;}
.thum_rightcontent_imgbox {margin: 0;}
.tab_box.content_main_box_rightside {margin: 0;padding: 0 0 0 23px;width: 73%;}
.tab_box.content_main_box_rightside > h1 {text-align: left;}
.content_main_box span {text-align: left;}
.tab_box.content_main_box_rightside > p {margin: 0 !important;padding: 0 !important;}
.thum_rightcontent_imgbox {margin: 12px 0 0;}
.thum_rightcontent {margin: -6px 0 0; padding: 22px 0 32px;}
#box_fullwidth .content_main_box .toon_meersecond {margin: 0 0 0 188px;}
.toon_meersecond a {font-size: 15px;}
.meer_boxsec_box {margin: 0 0 0 136px;}
.ook_intterset_box img {float: left;}
.ook_text_box {width: 65%;}
.lastpicdiv.profile_pics_box {float: left;padding: 0;width: 20%;}
.add_imgg img {width: 31%;}
.links_bar {float: left;}
.mobile_content.content_main_box_rightside {float: right;margin: 0 !important;padding: 0;width: 86%;}
.articletab2 .content_main_box {margin: 0 auto;}
.articletab3 .profile_pics_box {float: left !important;margin: 0 !important;padding: 0 !important;width: 14%;}
.mobile_content h1 {font-size: 22px !important;text-align: left;}
.mobile_content.content_main_box_rightside > h2 {font-size: 22px;}
.article_box.gratis_inbox > h2 {font-size: 19px;}
/*.gratis_inbox_form > p {font-size: 13px !important;}*/
.tab_box.content_main_box_rightside > h2 {font-size: 20px;}
.ook_text_box a {text-align: left;}
.ook_text_box > p {text-align: left;}
.top_cont.arrwdiv.content_main_box {float: right; margin: 0;padding: 0;width: 95%;}
.profile_pics_box { margin: 3px 0 0;padding: 0 !important;}
.topright_arrow {margin: 19px -87px 5px 23px !important;}
.footer_topmenu {width: 22%;margin: 0;}
.footer_topmenu h3 {font-size: 20px;}
.content_main_box h3 {width: 73%;}
/* Een tussenkopje in de artikeltekst hoort de hele kolom te vullen; de regel
hierboven is van de blokken eromheen. Zonder dit blijft een om de artikeltekst
heen wordt door de browser al bij de eerste uit een artikel
op 73% steken en breekt hij midden in de kop af. */
.mobile_content.content_main_box_rightside > h3 {width: 100%; font-size: 20px;}
.delen_social_likes ul li {padding: 0 5px;}
.articletab2 .mobile_content.content_main_box_rightside {float: left;margin: 0 !important; padding: 0 0 0 74px;width: 83%;}
.populairste {margin: 0 auto 0;overflow: hidden; width: 100%;}
.reactie_indent1 { padding-left: 50px; }
.reactie_indent2 { padding-left: 50px; }
.reactie_indent3 { padding-left: 50px; }
.reactie_indent4 { padding-left: 50px; }
.reactie_indent5 { padding-left: 50px; }
.reactie_indent6 { padding-left: 50px; }
.reactie_indent7 { padding-left: 50px; }
.reactie_indent8 { padding-left: 50px; }
.reactie_indent9 { padding-left: 50px; }
.reactie_indent6 { padding-left: 50px; }
}
@media screen and (max-width: 850px) {
.topright_arrow img {display: none;}
.profile_pics_box {display: none;}
.mobile_content.content_main_box_rightside {width: 100%;}
.gratis_inbox_form img {display: none;}
div.add_imgg.responsivead > div {margin-left:0 !important; margin-right: 0 !important}
div.add_imgg.responsivead > div:first-child {margin-bottom:20px;}
.cameranu-logo {padding-bottom: 10px;}
.reactie_indent1 { padding-left: 0px; }
.reactie_indent2 { padding-left: 0px; }
.reactie_indent3 { padding-left: 0px; }
.reactie_indent4 { padding-left: 0px; }
.reactie_indent5 { padding-left: 0px; }
.reactie_indent6 { padding-left: 0px; }
.reactie_indent7 { padding-left: 0px; }
.reactie_indent8 { padding-left: 0px; }
.reactie_indent9 { padding-left: 0px; }
.reactie_indent6 { padding-left: 0px; }
}
@media screen and (max-width: 600px) {
.topright_arrow img {display: none;}
.profile_pics_box {display: none;}
.mobile_content.content_main_box_rightside {width: 100%;}
.gratis_inbox_form img {display: none;}
#newsletter-slidein div {width: 375px;}
.728banner {width: 100%;}
.cameranu-logo {padding-bottom: 10px;}
.reactie_indent1 { padding-left: 0px; }
.reactie_indent2 { padding-left: 0px; }
.reactie_indent3 { padding-left: 0px; }
.reactie_indent4 { padding-left: 0px; }
.reactie_indent5 { padding-left: 0px; }
.reactie_indent6 { padding-left: 0px; }
.reactie_indent7 { padding-left: 0px; }
.reactie_indent8 { padding-left: 0px; }
.reactie_indent9 { padding-left: 0px; }
.reactie_indent6 { padding-left: 0px; }
}
@media screen and (max-width: 480px) {
.728banner {width: 100%;}
.image {width: 100%;}
article img {width: 100%;}
article iframe {width: 100%;}
.25tips {display: none;}
.footer_topmenu {height: 206px;text-align: center;width: 46%;}
.topright_arrow img {display: none;}
.content_main_box p {font-size: 14px !important;}
.ontvage_inbox p {font-size: 14px;}
.meer_box ul li {border: medium none;width: 187px;}
.rubrieklist {display: none; font-size: 14px; position: relative; width: 100%; max-width: 960px; overflow: hidden; background: #fff; border-bottom: #f4f5f6 2px solid; padding-bottom: 20px;}
.ontvage_inbox h2 {font-size: 20px !important;}
.thum_rightcontent_imgbox {/* border: 1px solid; */float: left;height: auto; margin: 13px 0 0;width: 49px;}
.content_main_box_rightside {float: left;width: 234px;margin:0;}
.content_main_box_rightside > h1 {font-size: 20px !important; line-height: 24px;}
.content_main_box_rightside p {display: none;font-size: 14px !important;}
.content_main_box h3 {font-size: 16px; width: 100%;}
.meer_boxsec_box > a {margin: 10px 0 0;text-align: center !important;}
.tab_box.content_main_box_rightside {padding: 0 0 0 10px;}
.cameranu-logo {padding-bottom: 10px;}
.ook_intterset_box img {float: left;height: auto;width: 18%;}
.content_main_box_rightside span {text-align: left;}
.ook_text_box {float: left;margin: 0 0 0 10px;width: 76%;}
#box_fullwidth .content_main_box .toon_meersecond {margin:0; width: 87%;}
.footer_topmenu {width: 100%;}
.logo {width: 50%;}
.lastpic.content_main_box_rightside > span {display: block;}
.profile_pics_box > img {display: none;}
.content_main_box p {display: block;font-size: 14px !important;padding: 0 !important;width: 100%;}
.lastpic.content_main_box_rightside {float: left;margin: 0 0 0 -7px;/* width: 203px; */ width: 69%;}
.profile_pics_box {float: left;width: 36px;}
.lastpicdiv p {font-size: 13px !important;line-height: 15px;margin: 0;}
.footer_social_nav {display: none;}
.lastpic.content_main_box_rightside > h1 {text-align: start;}
.lastpic.content_main_box_rightside > span {text-align: left;}
.mobile_content.content_main_box_rightside > p {display: block;padding:0 !important;}
.mobile_content.content_main_box_rightside > h2 { margin: 18px 0 0 0;font-size: 20px!important;}
.delen_social_likes {display: none;}
.gratis_inbox {width: 96%;margin: 0;padding: 0;}
.content_main_box h2 {font-size: 20px;}
.top_cont.content_main_box > h1 {font-size: 20px;}
.ontvage_inbox {width: 100%;}
/* #box_fullwidththird {margin: 0 0 40px;width: 95%;float: right;} */
#box_fullwidththird {float: right;margin: 0 0 6px;padding: 3.5%;width: 93%;}
#box_fullwidththird .ontvage_inbox_form {margin: 0;width: 100%;}
#box_fullwidththird .form_nieuwsbrief {margin: 0;width: 100%;}
.meer_boxsec_box {margin:0 0 0 50px;}
.mobile_content.content_main_box_rightside {width: 72%;}
.mobile_content.content_main_box_rightside > h3 {font-size:19px;}
.toon_meer a {color: #FFFFFF;font-size: 15px;}
.toon_meer {width: 99%;}
.mobile_content.content_main_box_rightside > h4 {font-size: 17px;}
.articletab3 .mobile_content.content_main_box_rightside > span {display: block;}
.articletab3 .profile_pics_box {width: 51px;}
.articletab3 .mobile_content.content_main_box_rightside > span {display: block;text-align: left;}
.add_imgg img {width: 75%;}
/* .gratis_inbox_form_input {width: 74px;} */
.gratis_inbox_form img {display: none;}
.add_imgg { margin: 0; width: 100%;}
.articletab .profile_pics_box {display: none;}
.articletab .mobile_content.content_main_box_rightside {float: right;width: 100%;}
.articletab .mobile_content.content_main_box_rightside { padding: 0!important;width: 100%;}
.content_main_box p {font-size: 14px !important;padding: 0 !important;width: 100%;}
.lastpic.content_main_box_rightside {float: left;margin: 0 0 0 -7px;width: 92%;}
.articletab3 .mobile_content.content_main_box_rightside {width: 94%; margin: 0;padding: 0;}
.content_main_box {overflow: hidden;width: 93%;}
.articletab3 .profile_pics_box {width: 112px;}
.articletab3 .profile_pics_box > img {display: none;}
.articletab2 .mobile_content.content_main_box_rightside {width: 94%;padding:0;}
.ontvage_inbox_main {margin: 0;}
.gratis_inbox .gratis_inbox_form > p {width: 100% !important;}
.reacties_box li {margin: 0 0 27px !important;}
.lastpicdiv.profile_pics_box {display: block;width: 27%;}
/*.meer_boxsec > p {font-size: 12px !important;width: 47% !important;}*/
/* Hier stond het oude mobiele zoekveld (.demo-b): een absoluut geplaatst vakje zonder
geplaatste ouder, dat daardoor los van de kop in de rechterbovenhoek van het scherm
belandde. Vervangen door .zoek_knop bij .form_box bovenaan dit bestand. */
.toon_meersecond a {font-size: 17px;}
.thum_rightcontent {margin: -6px 0 0;padding: 13px 0 10px;}
#box_fullwidth {margin: 0;padding:30px 0px;}
.tab_box > span {display: none !important;}
.tab_box > p {display: none !important;}
.top_cont.content_main_box > span {display: none;}
.lastpic.content_main_box_rightside > span {display: block !important;}
.top_cont.content_main_box > p {display: none;}
.populairste h2 {font-size: 18px;}
#owner {display: none;}
.links_bar {margin: 0px;}
.subscribe-header {display: none;}
.pfabox {display: none;}
#newsletter-slidein div {width: 250px;}
#newsletter-slidein {bottom: 30px;}
#newsletter-slidein h2 {font-size: 16px;}
div.add_imgg.responsivead > div {margin-left:20px !important;}
.reactie_indent1 { padding-left: 0px; }
.reactie_indent2 { padding-left: 0px; }
.reactie_indent3 { padding-left: 0px; }
.reactie_indent4 { padding-left: 0px; }
.reactie_indent5 { padding-left: 0px; }
.reactie_indent6 { padding-left: 0px; }
.reactie_indent7 { padding-left: 0px; }
.reactie_indent8 { padding-left: 0px; }
.reactie_indent9 { padding-left: 0px; }
.reactie_indent6 { padding-left: 0px; }
}
@media (max-width: 728px) {
section#box_fullwidth.responsivead {position: relative; height: 30px;}
section#box_fullwidth.responsivead #ad728 {-ms-transform: scale(0.5,0.5);-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);overflow: visible;float: left;left: -75px;position: absolute;top: 0;}
section#box_fullwidth.responsivead #ad728 iframe {width:728px;}
}
@media (max-width: 1020px) {
.responsivead.ad970 {width: 970px !important;position: relative;}
.responsivead.ad970 > div {height: 177px !important;width: 485px !important;}
.responsivead.ad970 > div > div {transform: scale(0.7,0.7);position: absolute;top: -38px;left: 64px;}
.bluebar {
padding: 15px 0px 15px 40px;
display: block;
}
.bluebarbox2 {
padding-left: 0px;
padding-top: 10px;
}
}
@media (max-width: 850px) {
.responsivead.ad970 {width: 970px !important;position: relative;}
.responsivead.ad970 > div {height: 149px !important;width: 485px !important;}
.responsivead.ad970 > div > div {transform: scale(0.6,0.6);position: absolute;top: -41px;left: 123px;}
}
@media (max-width: 728px) {
.responsivead.ad970 {width: 970px !important;position: relative;}
.responsivead.ad970 > div {height: 125px !important;width: 485px !important;}
.responsivead.ad970 > div > div {transform: scale(0.5,0.5);position: absolute;top: -63px;left: 190px;}
.bluebar {
padding: 15px 0px 15px 10px;
display: block;
width: 100%;
box-sizing: border-box;
}
.bluebar p {
font-size: 14px;
}
}
@media (max-width: 620px) {
.responsivead.ad970 {width: 970px;position: relative;}
.responsivead.ad970 > div {height: 105px !important;width: 320px !important;}
.responsivead.ad970 > div > div {transform: scale(0.4,0.4);position: absolute;top: -63px;left: 220px;}
}
@media (max-width: 520px) {
.responsivead.ad970 {width: 970px;position: relative;}
.responsivead.ad970 > div {height: 105px !important;width: 320px !important;}
.responsivead.ad970 > div > div {transform: scale(0.3,0.3);position: absolute;top: -63px;left: 270px;}
}
@media (max-width: 420px) {
.responsivead.ad970 {width: 970px;position: relative;}
.responsivead.ad970 > div {height: 105px !important;width: 320px !important;}
.responsivead.ad970 > div > div {transform: scale(0.3,0.3);position: absolute;top: -63px;left: 305px;}
}
@media (max-width: 374px) {
.responsivead.ad970 {width: 970px;position: relative;}
.responsivead.ad970 > div {height: 105px !important;width: 320px !important;}
.responsivead.ad970 > div > div {transform: scale(0.3,0.3);position: absolute;top: -63px;left: 338px;}
}
@media (max-width: 767px) {
.categorieen ul li {width:100%; text-align:left; padding-right: 0px;}
.categorieen {width:90%;}
.categorieen ul li ul li {padding: 0;}
}
@media (min-width: 768px) and (max-width: 979px) {
.categorieen ul li {width:46%;}
.categorieen ul li ul li {width:100%;}
.categorieen {width:90%;}
}
@media (min-width: 980px){
.categorieen ul li {width:29%;}
.categorieen ul li ul li {width:100%;}
}
/* Workshop styling voor Photofacts Academy workshops */
.workshops-container {
max-width: 960px;
margin: 20px auto;
padding: 20px;
}
.workshop-subtitle {
color: #666;
font-size: 14px;
margin-bottom: 20px;
text-align: center;
}
.workshops-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.workshop-item {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.workshop-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.workshop-image {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.workshop-info {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.workshop-rating {
margin-bottom: 10px;
}
.workshop-title {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.workshop-title a {
color: #446da3;
text-decoration: none;
}
.workshop-title a:hover {
color: #314e73;
text-decoration: underline;
}
.workshop-title a:focus {
color: white;
text-decoration: none;
}
.workshop-title a:visited {
color: #446da3;
text-decoration: none;
}
.workshop-session-info {
margin: 10px 0;
text-align: center;
}
.workshop-date {
color: #333;
font-size: 14px;
margin: 0 0 8px 0;
line-height: 1.4;
text-align: center;
}
.workshop-location {
color: #666;
font-size: 13px;
margin: 0 0 8px 0;
font-style: italic;
text-align: center;
}
.workshop-availability {
margin: 0 0 15px 0;
font-size: 13px;
text-align: center;
}
.workshop-button {
text-align: center;
margin-top: auto;
}
.btn-workshop {
background-color: #446da3;
color: white;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
font-size: 13px;
font-weight: bold;
display: inline-block;
transition: background-color 0.3s ease;
}
.btn-workshop:visited {
background-color: #446da3;
color: white;
text-decoration: none;
}
.btn-workshop:focus {
background-color: #314e73;
color: white;
text-decoration: none;
}
.btn-workshop:hover {
background-color: #314e73;
color: white;
text-decoration: none;
}
.workshops-footer {
text-align: center;
margin-top: 40px;
}
.btn-all-workshops {
background-color: #83c129;
color: #fff;
padding: 12px 24px;
margin-top: 10px;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
transition: background-color 0.3s ease;
}
.btn-all-workshops:hover {
background-color: #96db33;
color: #fff;
text-decoration: none;
}
.btn-all-workshops:visited {
background-color: #83c129;
color: #fff;
text-decoration: none;
}
/* Responsive design voor workshops */
@media (max-width: 768px) {
.workshops-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.workshop-info {
padding: 12px;
}
.workshop-image {
height: 160px;
}
}
@media (max-width: 480px) {
.workshops-container {
padding: 15px;
margin: 15px 0;
}
.workshop-image {
height: 140px;
}
.workshop-title {
font-size: 15px;
}
}
/* Contactformulier op /over-ons.
De omliggende .content_main_box_rightside floot alles wat p of span is; deze box
staat daarom in de flow mee als volle breedte en vangt zelf zijn floats op. */
.contactformulier {
display: flow-root; /* vangt de floats van binnenuit op, blijft zelf in de flow */
clear: both;
margin: 10px 0 25px 0;
padding: 20px;
width: 100%;
box-sizing: border-box;
border-radius: 10px;
background: #eef6fe;
box-shadow: 0 0 2px 1px #E4E4E4;
}
/* Vangnet: laat de opmaak van de omliggende pagina hierbinnen los */
.contactformulier p,
.contactformulier span {
display: block !important;
float: none !important;
width: auto !important;
}
.contactformulier .contact_kop {
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.contactformulier label {
display: block;
margin: 12px 0 4px 0;
color: #696972;
font-size: 14px;
line-height: 1.4;
}
.contactformulier label i {
color: #6f6f6f;
font-style: normal;
}
.contactformulier input[type="text"],
.contactformulier input[type="email"],
.contactformulier textarea {
display: block;
padding: 10px;
max-width: 100%;
border: none;
border-radius: 5px;
box-shadow: 0 0 2px 1px #E4E4E4;
color: #696972;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
box-sizing: border-box;
}
.contactformulier input[type="text"],
.contactformulier input[type="email"] {
width: 320px;
}
.contactformulier textarea {
width: 100%;
height: 120px;
}
.contactformulier .deel_submitbox {
margin-top: 15px;
padding: 10px 20px;
font-size: 16px;
}
.contact_gelukt {
color: #4a7a12;
}
.contact_gelukt strong {
font-size: 18px;
}
.contact_fout {
margin-top: 10px;
color: #880000;
}
/* Honeypot: alleen bots vullen dit veld in. .contact_hp hoort bij het
contactformulier, .form_hp bij elk ander formulier dat er een heeft
(/wachtwoord-vergeten). */
.contact_hp,
.form_hp {
position: absolute;
left: -5000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ------------------------------------------------------------------ */
/* De balk bovenaan: links naar de andere sites, rechts het account. */
/* Donkergrijs (#444), net als de balk bovenaan Photofacts Academy. */
/* De balk zelf loopt over de volle breedte, de inhoud staat in dezelfde */
/* kolom als de rest van de site (#header_main_box, 960). */
/* ------------------------------------------------------------------ */
#sitebar {
float: left;
width: 100%;
background: #444;
font-size: 13px;
line-height: 1;
/* Het accountmenu klapt over de header heen uit en moet daar dus boven staan */
position: relative;
z-index: 100;
}
/* Even breed als #header_main_box eronder, zodat de sitenamen op één lijn staan
met het logo en de rest van de pagina. */
.sitebar_box {
margin: 0 auto;
width: 96%;
max-width: 960px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
min-height: 34px;
}
.sitebar_sites {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
/* min-width: 0 hoort bij overflow-x in een flexrij: zonder die regel houdt
dit vak zich zo breed als zijn inhoud en wordt de héle pagina breder dan
het scherm in plaats van dat de rij zelf meeschuift. */
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
}
.sitebar_sites::-webkit-scrollbar {
display: none;
}
#sitebar a {
color: #d8d8d8;
text-decoration: none;
padding: 10px 0;
}
#sitebar a:hover {
color: #fff;
text-decoration: underline;
}
#sitebar a:visited {
color: #d8d8d8;
text-decoration: none;
}
.sitebar_sep {
color: #777;
}
.sitebar_account {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
/* .sitebar_sites is de kant die inschikt (min-width: 0 + overflow-x: auto);
dit vak hoort altijd op zijn volledige breedte te blijven staan. Zonder
flex-shrink: 0 is dat afhankelijk van de automatische minimumbreedte die
de browser er zelf bij verzint, en dat gaat niet overal hetzelfde. */
flex-shrink: 0;
/* Op photofacts.com staat .sitebar_sites er niet (het zijn Nederlandstalige
sites), en dan heeft space-between niets meer te verdelen: dit vak zou
links komen te staan. De auto-marge duwt het in beide gevallen naar rechts
— met de sitenamen ernaast verandert er niets, want auto-marges slurpen de
vrije ruimte op vóórdat justify-content aan de beurt is. */
margin-left: auto;
}
.sitebar_ik {
display: flex;
align-items: center;
gap: 7px;
}
.sitebar_naam {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Het accountmenu: een details/summary, zodat klikken ook zonder JavaScript werkt.
Het driehoekje van de browser gaat eruit; het pijltje hieronder komt ervoor terug. */
.sitebar_menu {
position: relative;
}
.sitebar_menu > summary {
list-style: none;
cursor: pointer;
padding: 10px 0;
/* Was een link en kreeg zijn kleur van #sitebar a; een summary is dat niet */
color: #d8d8d8;
}
.sitebar_menu > summary::-webkit-details-marker {
display: none;
}
.sitebar_menu > summary::after {
content: "";
border: 4px solid transparent;
border-top-color: #d8d8d8;
margin-top: 3px;
flex: none;
}
.sitebar_menu > summary:hover {
color: #fff;
}
.sitebar_menu > summary:hover::after {
border-top-color: #fff;
}
.sitebar_menulijst {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 170px;
padding: 4px 0;
background: #444;
border-radius: 0 0 3px 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
z-index: 200;
}
/* Open bij een klik (details krijgt dan [open]) én zodra de muis erop staat */
.sitebar_menu[open] .sitebar_menulijst,
.sitebar_menu:hover .sitebar_menulijst {
display: block;
}
#sitebar .sitebar_menulijst a {
display: block;
padding: 8px 14px;
white-space: nowrap;
}
#sitebar .sitebar_menulijst a:hover {
background: #555;
text-decoration: none;
}
.sitebar_avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: #666;
object-fit: cover;
display: block;
}
/* Het belletje; de teller hangt er rechtsboven aan */
.sitebar_meldingen {
position: relative;
display: flex;
align-items: center;
padding: 8px 4px;
}
.sitebar_meldingen svg {
width: 17px;
height: 17px;
fill: #d8d8d8;
display: block;
}
.sitebar_meldingen:hover svg {
fill: #fff;
}
.sitebar_teller {
position: absolute;
top: 1px;
right: -5px;
min-width: 15px;
padding: 0 3px;
background: #c4342b;
border-radius: 8px;
color: #fff;
font-size: 10px;
line-height: 15px;
text-align: center;
box-sizing: border-box;
}
/* Afmelden is een post (een link van elders mag je niet uitloggen), maar hoort
er in de balk uit te zien als de rest van de links. */
.sitebar_uitform {
margin: 0;
padding: 0;
display: flex;
}
.sitebar_uit {
margin: 0;
padding: 10px 0;
background: none;
border: none;
color: #d8d8d8;
font-family: inherit;
font-size: 13px;
cursor: pointer;
display: flex;
align-items: center;
gap: 7px;
}
.sitebar_uit:hover {
color: #fff;
text-decoration: underline;
}
/* In- en uitloggen staan er als woord én als pictogram; welke van de twee je
ziet hangt af van de ruimte (zie de mediaregels onderaan dit blok). */
.sitebar_icoon {
display: none;
width: 16px;
height: 16px;
fill: #d8d8d8;
flex: none;
}
.sitebar_ik:hover .sitebar_icoon,
.sitebar_uit:hover .sitebar_icoon {
fill: #fff;
}
/* Alleen voor schermlezers: het belletje heeft verder geen tekst */
.sitebar_verborgen {
position: absolute;
left: -5000px;
width: 1px;
height: 1px;
overflow: hidden;
}
@media screen and (max-width: 1024px) {
/* Meebewegen met #header_main_box, dat hier ook op 90% overgaat */
.sitebar_box {width: 90%;}
#sitebar {font-size: 12px;}
}
@media screen and (max-width: 900px) {
/* Eerste besparing: de naam verdwijnt, het portretje blijft de ingang
naar het profiel. */
.sitebar_naam {display: none;}
}
@media screen and (max-width: 700px) {
.sitebar_box {gap: 10px;}
/* Op een telefoon passen vijf sitenamen niet naast het account; de rij
schuift mee met een veeg, het account blijft staan. */
.sitebar_sites {gap: 6px;}
.sitebar_uit {font-size: 12px;}
/* Tweede besparing: in- en uitloggen worden een pictogram. Het streepje
ervoor scheidt dan niets meer. */
.sitebar_woord {display: none;}
.sitebar_icoon {display: block;}
.sitebar_account .sitebar_sep {display: none;}
}
/* ------------------------------------------------------------------ */
/* /profiel: de instellingenpagina, opgebouwd uit losse kaarten */
/* ------------------------------------------------------------------ */
/* De pagina staat rechtstreeks in .content_main_box en niet in de kolom
.content_main_box_rightside; die globale opmaak geeft koppen, alinea's en
spans een float en 100% breedte mee, en daar is hier niets aan gelegen. */
.instellingen {
padding: 30px 0 50px;
color: #4a4a55;
line-height: 1.6;
}
.instellingen h1,
.instellingen h2,
.instellingen p,
.instellingen span {
float: none;
width: auto;
margin: 0;
padding: 0;
}
.inst_kop {
/* .inst_kop is een
van het artikel gesloten. Het
promoblok dat daarna komt begint zelf ook met een h2, en ".content_main_box h2"
geeft die float: left en 100% breedte mee. Een float breekt de regelloop niet, dus
de kop werd naar beneden geduwd terwijl de eerste woorden eronder gewoon aanschoven
achter de laatste zin van het artikel — vandaar dat losse "Op" aan het eind van de
alinea ervoor.
clear zet de promo onder alles wat het artikel aan zwevende blokken achterlaat,
flow-root maakt er een eigen formatteringscontext van (zoals display: flex dat bij
.deelrij doet) zodat de kop en de tekst van de promo bij elkaar horen en de zwevende
kop niet in de rest van de pagina lekt. */
.artikelpromo {
clear: both;
display: flow-root;
width: 100%;
}
/* ===== Deelknoppen ================================================================
De artikelpagina had geen enkele deelmogelijkheid, terwijl de Open Graph-tags netjes
ingevuld zijn: de site is goed deelbaar, er werd alleen nooit om gevraagd. Zie `C3` in
docs/ux-ui-analyse.md. Twee rijen per artikel — onder de metaregel voor wie meteen
doorstuurt, onder het artikel voor wie eerst leest.
.delen en .delen_social_likes bestonden al en zijn van het oude thema (die laatste
staat onder de 480 px zelfs op display:none); vandaar een eigen naam.
Flex met clear en volle breedte, om dezelfde reden als bij .zoek_opnieuw: alles in
.content_main_box_rightside krijgt van de site float: left en 100% breedte mee, en een
flexcontainer maakt een eigen formatteringscontext die daarvoor wijkt. */
.deelrij {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
clear: both;
width: 100%;
}
.deelrij--boven {
margin: 10px 0 18px;
}
/* De rij rechtsboven, in .meer_box onder "Meer: [rubriek]". Vier knoppen mét woord
stonden daarvoor onder de metaregel, pal boven de eerste zin — hier zijn het
icoontjes, want in de kop is geen ruimte voor tekst. clear zet ze onder de
rubriekregel (die floats bevat), flex-end lijnt ze uit met de rechterrand van het
blok, dat zelf naar rechts zweeft. */
.deelrij--kop {
/* Uit de tekststroom, en niet onder in .meer_box mee zwellen: in de stroom maakte
deze rij de .links_bar 34 px hoger en schoof het hele artikel evenveel omlaag.
Absoluut, met .links_bar als houvast, valt hij in de 30 px marge die daar toch al
onder zat — dus staat de titel weer waar hij stond. Vandaar ook knoppen van 28 px:
groter dan de marge zou weer tegen de titel aan lopen.
Het houvast is .meer_box, dus top: 100% is "onder de rubriekregel". Dat blok zweeft
naar rechts en is dus zo breed als "Meer: [rubriek]" — bij een korte rubrieknaam
smaller dan de vier knoppen. Vandaar max-content: de rij houdt haar eigen breedte
en groeit vanaf de rechterrand naar links, in plaats van af te breken. */
position: absolute;
top: 100%;
right: 0;
width: max-content;
margin: 0;
flex-wrap: nowrap;
gap: 5px;
justify-content: flex-end;
}
/* Een vierkantje om het icoontje; de knoppen van de onderste rij houden hun tekst. */
.deelrij--kop .deelrij_knop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
}
/* De naam blijft in de html staan: hij is de toegankelijke naam van de knop en site.js
schrijft er "gekopieerd" in. Niet display:none — dan leest een schermlezer hem niet
meer. De reset van breedte en float is nodig omdat ".content_main_box_rightside span"
élke span in dat blok 100% breed maakt; deze rij staat er weliswaar buiten, maar de
knoppen worden gedeeld met de rij die er wél in staat. */
.deelrij .deelrij_knoptekst {
position: absolute;
width: 1px !important;
height: 1px;
float: none !important;
margin: -1px;
padding: 0 !important;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.deelrij--kop .deelrij_icoon {
display: block;
}
/* Zonder zichtbare tekst is een groene rand een magere bevestiging, dus wordt het
icoontje twee tellen een vinkje. */
.deelrij--kop .deelrij_knop--gelukt .deelrij_icoon {
display: none;
}
.deelrij--kop .deelrij_knop--gelukt::after {
content: '\2713';
font-size: 17px;
line-height: 1;
}
/* Onder de 1024 px is er geen marge meer naast de tekstkolom: die loopt over de volle
breedte en de icoontjes zouden over de titel vallen. Daar gaan ze terug in de
tekststroom — en verliest de balk zijn ondermarge, want die 30 px is precies wat de
rij inneemt. Netto blijft de titel dus staan waar hij stond, net als hierboven. */
@media screen and (max-width: 1024px) {
.deelrij--kop {
position: static;
width: auto;
/* Lucht onder de rubriekregel. De clearance van .deelrij slokt deze marge op, dus
de rij neemt hier 26 px in waar 30 px marge wegvalt: de titel komt vier pixels
hoger uit dan voorheen, en dat is de goede kant op. */
margin: 6px 0 0;
}
.links_bar--delen {
margin-bottom: 0;
}
}
.deelrij--onder {
margin: 28px 0 6px;
}
/* Twee klassen diep, en dat is nodig: tussen twee !important-declaraties wint de
specificiteit, en (0,2,0) verslaat de (0,1,1) van ".content_main_box_rightside span". */
.deelrij .deelrij_label {
/* ".content_main_box_rightside span" geeft élke span in dit blok float: left en
width: 100% !important mee — dezelfde valkuil als bij de reactiefoto's. Binnen een
flexcontainer telt float niet mee, maar die 100% breedte wel: zonder deze reset
duwt het label de knoppen naar de volgende regel. */
width: auto !important;
float: none !important;
font-size: 14px;
color: #6f6f6f;
}
.deelrij_knop {
display: inline-block;
padding: 7px 14px;
border: 1px solid #d8dde5;
border-radius: 3px;
background: #fff;
font-family: 'Open Sans', Verdana, sans-serif;
font-size: 14px;
line-height: 1.2;
color: #446da3;
text-decoration: none;
cursor: pointer;
}
.deelrij_knop:hover {
background: #f4f5f6;
text-decoration: none;
}
/* De twee kanalen houden hun eigen kleur; die herken je sneller dan een woord. */
.deelrij_whatsapp {
border-color: #25d366;
color: #128c4a;
}
.deelrij_whatsapp:hover {
background: #eafaf0;
}
.deelrij_facebook {
border-color: #4267b2;
color: #3b5998;
}
.deelrij_facebook:hover {
background: #eef2fa;
}
.deelrij_knop--gelukt {
border-color: #25d366;
color: #128c4a;
}
@media screen and (max-width: 480px) {
.deelrij {
gap: 7px;
}
.deelrij_knop {
padding: 8px 12px;
}
}