/*
 Theme Name:   Twenty Twelve Child
 Theme URI:    https://www.greenevelien.com/blog
 Description:  Twenty Twelve Child Theme
 Author:       Evelien Matthijssen
 Author URI:   https://www.greenevelien.com
 Template:     twentytwelve
 Version:      1.0.0
 Text Domain:  twenty-twelve-child
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

html, body {
color: #8B4513;
font-size: 90%;

/* opmerking in header.php zorgt ervoor dat ze niet rechtermuisklik kunnen doen en dan melding "copyright" te zien krijgen. Deze opmerking zorgt voor dat er ook niet geselecteerd kan worden, dus laten staan, anders kan er wél geselecteerd worden en met simpel "ctrl+c" alsnog gekopieerd worden */
-webkit-user-select: none;  /* Chrome, Safari, Opera */
-webkit-user-drag: none;
-moz-user-select: none;     /* Firefox */
-moz-user-drag: none;
-ms-user-select: none;      /* IE 10+ */
-ms-user-drag: none;
user-select: none;
user-drag: none; 
}


/**
 * @license
 * MyFonts Webfont Build ID 3540228, 2018-03-12T08:05:42-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: PhotoWall-Medium by DearType
 * URL: https://www.myfonts.com/fonts/deartype/photowall/medium/
 * Copyright: Copyright (c) 2016 by DearType, Veneta Rangelova. All rights reserved.
 * Licensed pageviews: 10,000
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3540228
 * 
 * © 2018 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("/count/360504");

@font-face {
font-family: 'PhotoWall-Medium';
src: url('../../../../webfonts/PhotoWall/360504_0_0.eot');
src: url('../../../../webfonts/PhotoWall/360504_0_0.eot?#iefix') format('embedded-opentype'),
     url('../../../../webfonts/PhotoWall/360504_0_0.woff2') format('woff2'),
     url('../../../../webfonts/PhotoWall/360504_0_0.woff') format('woff'),
     url('../../../../webfonts/PhotoWall/360504_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
} 

/**
 * @license
 * MyFonts Webfont Build ID 3905964, 2020-05-22T08:37:36-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Verdana by Ascender
 * URL: https://www.myfonts.com/fonts/ascender/verdana/regular/
 * Copyright: Typeface and data © 1996 Microsoft Corporation. All Rights Reserved
 * 
 * © 2020 MyFonts Inc
*/

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3b99ac");
  
@font-face {
font-family: 'Verdana';
src: 	url('../../../../webfonts/Verdana/font.woff2') format('woff2'),
	url('../../../../webfonts/Verdana/font.woff') format('woff');
}


/* Container */
body .site {
max-width: 100%; /* rectificatie twentytwelve = 960px */
padding: 0px; /* noodzakelijk anders veel wit aan zijkant bij advertenties */
margin: 0px auto; /* noodzakelijk anders veel wit ruimte onder&boven */
font-family: Verdana;
}

/* Gebied header & nav */
.site-header {
padding: 0px; /* rectificatie twentytwelve = 24px 0px */
}

/* Header */
hgroup {
height: 100px;
margin: auto;
text-align: center;
font-size: 200%;
letter-spacing: 5px;  
overflow: hidden;
display: table;
}
hgroup a { 
color: #228B22; 
text-decoration: none; 
}
hgroup a:hover { 
color: #228B22; 
text-decoration: none; 
}
.site-header h1 { 
font-size: 200%;
letter-spacing: 2px;
font-weight: normal; /* rectificatie twentytwelve = bold */
line-height: normal; /* rectificatie twentytwelve = 1.28  */
text-align: center; /* rectificatie twentytwelve */
}
.banner { 
width: 480px;
margin-left: 30px; /* gereserveerd voor taal */
display: table-cell;
float: left;
font-family: PhotoWall-Medium; 
}
.search-function { 
width: 120px;
display: table-cell;
float: right;
line-height: 1.5; /* voor ruimte tussen zoekbalk en button */
padding-top: 10px;
}

/* Menu-balk */
.main-navigation { 
background-color: #EEE8AA; 
height: 50px; 
position: absolute;
margin-top: 0px; /* rectificatie 2012 = 24px */
box-shadow: 0 0px 5px #777;
}
.main-navigation.fixed { 
position: fixed;
top: 0;
-webkit-backface-visibility: hidden; /* code oplossing voor niet-zijwaarts-scrollen in android 2.2 en 2.3, werkt niet voor galaxy SII en 2.3.6. */
}

.main-navigation ul { height: 50px;
display: -webkit-inline-flex;  /* oude versies - Chrome, Safari, Opera */
display: inline-flex;  /* all */
justify-content: space-between; /* horizontale uitlijning voor android die space-around negeert, android kijkt enkel naar 1e regel */
justify-content: space-around; /* horizontale uitlijning, moderne browsers overschrijven 1e regel door 2e */
align-items: center;  
} 

.main-navigation ul li { font-size: 15px; margin: 0px 7px; } /* margin-top rect. 2012 voor kleinere schermen noodzakelijk - margin left-right voorkomt overlap */
.main-navigation ul li.menubalk:hover, nav ul li.menubalk:active { border: 1px dotted #8B4513; border-radius: 4px; } /* door class .menubalk enkel in menubalk dotted border en niet in onderliggende li-items */

.main-navigation ul li:hover ul, .main-navigation ul li:active ul { display: block; position: absolute; overflow: visible; width: auto; height: auto; background-color: #EEE8AA; box-shadow: 5px 5px 5px -5px #777, -5px 5px 5px -5px #777; margin-left: -5px; margin-top: -2px; padding-top: 5px; text-align: left; clip: auto; } /* margin-top hoogte schaduw instellen - padding-top zodat lijst lager begint / clip=rectificatie 2012 */

.main-navigation ul li:hover ul.inspiratie, .main-navigation ul li:active ul.inspiratie, 
.main-navigation ul li:hover ul.aanbod, .main-navigation ul li:active ul.aanbod,
.main-navigation ul li:hover ul.winkel, .main-navigation ul li:active ul.winkel 
{ display: inline-flex; align-items: flex-start; } /* verticale uitlijning bovenkant */

.main-navigation ul li ul li a { background: #EEE8AA; border-bottom: 0px; width: auto; padding: 0px; text-transform: none; line-height: 1.6;} /* background, border-bottom, width padding, text-transform = rectificatie 2012 */
.main-navigation ul li ul li a:hover { background: #EEE8AA; color: #228B22; }
.main-navigation ul li ul li.kopje, nav ul li ul li.kopje a { font-size: 13px; text-decoration: underline; }

.main-navigation ul li ul li ul { left: 0; } /* rectificatie 2012 */
.main-navigation ul li:hover ul li ul { box-shadow: none; } /* undo box-shadow ul li ul */

.main-navigation a { color: #8B4513; text-decoration: none; }
.main-navigation a:link { color: #8B4513; text-decoration: none; }
.main-navigation a:visited { color: #8B4513; text-decoration: none; }
.main-navigation a:hover { color: #228B22; text-decoration: underline; }
.main-navigation a:active { color: #8B4513; text-decoration: none; }

/* Tekst */
.site-content {
width: 100%; /* moet 100% (geen 640px) voor middenuitlijning - rectificatie 2012 = 65% */
padding: 50px 0px 25px 0px; /* geen 10px padding-links-rechts anders wordt 660px */
}
.site-content a { color: #228B22; }
.site-content a:link { color: #228B22; }
.site-content a:visited { color: #228B22; }
.site-content a:active { color: #228B22; }
.site-content a:hover { color: #228B22; font-weight: bold; }
.site-content hr { color: #EEE8AA; height: 5px; background-color: #EEE8AA; border: solid #EEE8AA 0px; } 
.site-content blockquote { background-color: #EEE8AA; padding: 10px; }

.site-content h1 { text-align: center; font-weight: normal; font-size: 2.5em; }  
.site-content h1 a { color: #228B22; text-decoration: none; }    

.site-content article {
width: 620px; /* 640-2x10px padding */
margin: auto; /* voor uitlijning center */
text-align: left; 
border-bottom: 5px solid #EEE8AA;
margin-bottom: 25px;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
}

/* Titel blogpost */
.entry-header .entry-title {
font-size: 30px;
margin-bottom: 30px;
}

/* Sidebar */
sidebar.widget-area {
width: 100%;
margin: 0px; /* noodzakelijk anders veel wit ruimte onder&boven */
text-align: center;
line-height: 2.5;
}
sidebar.widget-area a { color: #228B22; }

sidebar ul {
display: -webkit-inline-flex;   /* oude versies - Chrome, Safari, Opera */
display: inline-flex;  /* all */
width: 640px;
flex-direction: row;
justify-content: space-between; /* horizontale uitlijning voor android die space-around negeert, android kijkt enkel naar 1e regel */
justify-content: space-around; /* horizontale uitlijning, moderne browsers overschrijven 1e regel door 2e */
align-items: center; /* verticale uitlijning */
}

sidebar table {
margin: 0 auto;
}
sidebar td {
border: 1px solid #8B4513;
text-align: center;
vertical-align: middle; 
padding: 5px;
line-height: 150%;
}

/* Button mailchimp */
.button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
.button:hover {background-color:#777;}

/* Images */
img.alignleft,
.wp-caption.alignleft {
margin: 0px 5px 0px 0px;
}
img.alignright,
.wp-caption.alignright {
margin: 0px 0px 0px 5px;
}
img.aligncenter,
.wp-caption.aligncenter {
margin-bottom: 0px;
padding-bottom: 0px;
}
.entry-content img,
.comment-content img,
.widget img,
img.header-image,
.author-avatar img,
img.wp-post-image { 
box-shadow: none; /* rectificatie 2012 */
}

/* Footer*/
.footerge {
font-family: Verdana;
padding: 7px 0px 16px 0px;
text-align: center;
background-color: #EEE8AA;
box-shadow: 0px 0 7px #777;
}

.footerge a {
color: #228B22; 
}

/* Volgend/vorig bericht*/
.site-content nav {
	width: 615px;
	margin: auto;
}

.nav-single {
	width: 640px;
	margin: auto;
}

/* =Comments
-------------------------------------------------------------- */

.nav-single + .comments-area, #comment-nav-above {
	width: 640px; 
	margin: 48px auto;
}

.comments-area article { 
	width: auto; /* zorgt dat comments op comments aan rechterkant binnen de ruimte blijven! */
	padding-right: 10px; /* zorgt dat reacties van anderen rechts ruimte hebben */
}

.comments-area article header { /* ruimte tussen titel en tekst comments verkleinen rectificatie 2012 = 0 0 48px */
	margin: 0 0 24px; 
}

.comments-area article header cite, 
.comments-area article header time { /* header links uitlijnen en in het bruin */
	margin-left: 0px;
	color: #8B4513;
}
.comments-area article header cite a { /* link schrijver in groen */
	color: #228B22; 
}
.comments-area article header cite a:hover { /* link schrijver in groen */
	color: #228B22; 
	text-decoration: underline;
}
.comments-area .bypostauthor cite span { /* "bericht auteur" */
	border: none;
	background-color: #eee8aa;
	color: #8B4513;
	font-size: 12px;
	padding: 2px 10px;
}
.comments-area .bypostauthor cite b { /* header GE en childs niet bold */
	font-weight: normal;
}
.commentlist li.bypostauthor > .comment {
	background-color: #EEE8AA; 
	padding: 10px; /* zorgt dat mijn reacties ruimte hebben in beige vlak */
}
a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #228B22;
}

.commentlist .children {
	margin-left: 40px; /* tussenoplossing omdat ik width niet op 615px kan stellen */
	}
}

/* =Media queries
-------------------------------------------------------------- */
@-ms-viewport {
	width: 640; /* geen "px" vermelden, dan scrollbalken zichtbaar */
}
@viewport {
	width: 640;
}

/* Minimum width of 320 pixels, bij "min-width:320px" moet "px" wel vermeld worden. */
@media screen and (min-width: 320px) {
	.socialmedia { 
	margin: 10px 5px -10px 0px;
	}

	.main-navigation { 
	width: 640px;
	}

	.main-navigation ul { 
	width: 640px; /* geen 100%, want dan enkel breedte (px) device */
	}

	.main-navigation ul li:hover ul.inspiratie { height: 585px; /* 5px meer dan site = noodzakelijk */}
	.main-navigation ul li:hover ul.aanbod { height: 240px; /* 5px meer dan site = noodzakelijk */}
	.main-navigation ul li:hover ul.winkel { height: 210px; }

	.main-navigation ul li ul li { 
	margin: 15px 5px 2px 5px; 
	max-width: 95px; 
	} 

	.main-navigation ul li ul li a { 
	font-size: 12px;
	}

	.footerge {
	font-size: 10px;
	}
}

/* Minimum width of 800 pixels. */
@media screen and (min-width: 800px) {
	.socialmedia { 
	margin: 10px 10px -10px 0px;
	}

	.main-navigation { 
	width: 100%;
	}

	.main-navigation ul { 
	width: 800px;
	}

	.main-navigation ul li:hover ul.inspiratie { height: 480px; }
	.main-navigation ul li:hover ul.aanbod { height: 200px; }
	.main-navigation ul li:hover ul.winkel { height: 175px; }

	.main-navigation ul li ul li { 
	margin: 9px 5px 2px 5px;  
	max-width: 95px; 
	} /* width=breedte tekst */

	.main-navigation ul li ul li a { 
	font-size: 11px;
	}	

	.footerge {
	font-size: 12px;
	}
}