/*
Description: CSS for digitaalwerkboek companion site
Author: Dirk De Bosschere
*/
/* https://www.w3schools.com/colors/colors_picker.asp

digitaalwerkboek light blue (=logo-image, top-left)		#4eb7d2 = rgb(78, 183, 210) = hsl(192, 59%, 56%)
digitaalwerkboek dark blue (=logo-text, bottom-right)	#1a63ac = rgb(26, 99, 172) = hsl(210, 74%, 39%)
digitaalwerkboek dark blue (accent: em, hn)				#1a63ac
digitaalwerkboek dark blue (links: a)					#1a63ac

thelanguagefocus light brown (top-left)			#cf9417 = rgb(207, 148, 23) = hsl(41, 80%, 45%)
thelanguagefocus dark brown (bottom-right)		#976802 = rgb(151, 104, 2) = hsl(41, 97%, 30%)
thelanguagefocus dark brown (accent: em, hn)	#976802
thelanguagefocus dark brown (links: a)			#976802

*/

body { color: #555555; }

#page {
	border-width: 3px;
	border-style: solid;
	border-top-color: #4eb7d2; border-bottom-color: #1a63ac;
	border-left-color: #4eb7d2; border-right-color: #1a63ac;
	padding: 3px;
	background-color: #ffffff;
}

div#header-logo-image img {
	max-width: unset;
}
div#header-logo-image .crop {
	display:inline-block;
	width: 182px;
	height: 110px;
	padding-top:10px;
	overflow:hidden;
}
@media screen and (min-width: 668px) {
	div#header-logo-image .crop { width: 580px; }
}
@media screen and (min-width: 768.02px) { /* spacious menu-toggle at 768px */
	div#header-logo-image .crop { width: 182px; }
}
@media screen and (min-width: 1308.02px) {
	div#header-logo-image .crop { width: 580px; }
}

#header-text-nav-container {
    border-bottom: 2px solid #4eb7d2;
}
.header-post-title-container {
	border-bottom: 2px solid #4eb7d2;
	padding: 20px 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: rgba(78, 183, 210, 0.05);
	color: #1a63ac;
}
.footer-socket-wrapper {
    padding: 10px 0px;
    background-color: rgba(26, 99, 172, 0.05);
    border-top: 2px solid #1a63ac;
}
.footer-socket-wrapper .copyright {
    max-width:unset;
}
.footer-socket-wrapper .copyright,
.footer-socket-wrapper .copyright a,
.footer-socket-wrapper .copyright a:hover {
    color: #1a63ac;
}

.main-navigation ul li:first-child { margin-left: 0px; }
.main-navigation ul li a {
	font-size: 22px;
	color: #1a63ac;
	text-decoration:underline;
}
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current-page-ancestor a {
	text-decoration:none;
}

#main { padding-top:25px; }
#content .page { padding-bottom: 25px; }
@media screen and (min-width: 768.02px) { /* spacious menu-toggle at 768px */
	body:not(.no-sidebar) #content { border-right: 1px solid #eaeaea; padding-right:15px; }
}
#secondary .widget { margin-bottom: 20px; }
#secondary .widget:last-child { margin-bottom: 20px; }

#main a, footer a { color:#1a63ac; }
#main a:hover, footer a:hover { text-decoration:underline; }

#content a { text-decoration:underline; }

#main .link-icon.fa { padding-left: 3px; }

#main ul li ul li.page_item { padding:0; }
#main ul li ul > li.page_item:first-child { padding-top:5px; }
#main ul li ul > li.page_item:last-child { padding-bottom:5px; }

#main li.page_item.current_page_item > a { font-weight:bold; }
#main li.page_item.empty_page_item > a { color:#666666; }
#main li.page_item.empty_page_item > a:after { content:"\00a0(\2205)"; } /*  (∅) */
#main li.page_item.hidden_page_item > a { color:green;  }
#main li.page_item.hidden_page_item > a:before { content:"(";  }
#main li.page_item.hidden_page_item > a:after { content:")";  }
#main li.page_item.hidden_page_item { display:none; }
div#wpadminbar + div#page #main li.page_item.hidden_page_item { display: list-item; }

#content { line-height:24px; }
#content em { color: #1a63ac; font-size: 100%; font-weight: normal; font-style: normal; }

h1, h2, h3, h4, h5, h6 { color: #1a63ac; }

h1 {
	font-size: 26px;
	line-height: 32px;
}
h1.header-post-title-class {
	font-size: 24px;
	line-height: 24px;
}
h2 {
	font-size: 24px;
	line-height: 30px;
	margin-top: 24px;
	padding-bottom: 16px;
}
h3 {
	font-size: 22px;
	line-height: 32px;
}
h4 {
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	padding-bottom: 0px;
}


input.wpcf7-form-control, textarea.wpcf7-textarea { width:100%; margin-bottom: 0px; }
textarea.wpcf7-textarea { line-height:24px; }
input.wpcf7-number { width:50px;}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item.first { margin-left: 0px; }

.wpcf7-form th { border:0; vertical-align:bottom; }
.wpcf7-form tbody tr:not(:first-child) th { padding-top:20px; }

.wpcf7-form span.asterisk-right { float:right; font-weight:normal; font-style:italic; }
.wpcf7-form span.asterisk-left { margin-left:-15px; font-weight:normal; font-style:italic; }

.wpcf7-form p.privacy-consent { margin-top: 20px; border: 1px solid red; padding:6px 10px; text-align:center; }
.wpcf7-form p.privacy-consent .wpcf7-list-item { margin-left: 0px; }


table.table_blue { margin-bottom:8px; border:1px solid #4f7ba8; border-collapse:collapse; background-color:white; }
table.table_blue th { border-style:none; padding: 5px; background-color:#4f7ba8; color:#ffffff; font-weight:bold;  text-align:left; }
table.table_blue td { border:1px dotted #4f7ba8; padding: 5px; }
table.table_blue td p { margin-bottom: 0px; }
table.table_blue td p + p { margin-top: 5px; }
table.table_blue td ul { margin: 0px; padding: 0px; }
table.table_blue td li { list-style: none; margin: 0px; border: none; padding: 0px; }
table.table_blue td li + li { margin-top: 2px; border-top: 1px dotted; }

.btn-dwb {
    color: #FFFFFF !important;
    background-color: #1a63ac;
    border-radius: 8px;
    /* border-color: #FFF; */
}
.btn-dwb:hover, 
.btn-dwb:focus, 
.btn-dwb:active, 
.btn-dwb.active, 
.open .dropdown-toggle.btn-dwb { 
  color: #FFFFFF; 
  background-color: #003366; 
  border-color: ; 
} 
 
.btn-dwb:active, 
.btn-dwb.active, 
.open .dropdown-toggle.btn-dwb { 
  background-image: none; 
} 
 
.btn-dwb.disabled, 
.btn-dwb[disabled], 
fieldset[disabled] .btn-dwb, 
.btn-dwb.disabled:hover, 
.btn-dwb[disabled]:hover, 
fieldset[disabled] .btn-dwb:hover, 
.btn-dwb.disabled:focus, 
.btn-dwb[disabled]:focus, 
fieldset[disabled] .btn-dwb:focus, 
.btn-dwb.disabled:active, 
.btn-dwb[disabled]:active, 
fieldset[disabled] .btn-dwb:active, 
.btn-dwb.disabled.active, 
.btn-dwb[disabled].active, 
fieldset[disabled] .btn-dwb.active { 
  background-color: #1A63AC; 
  border-color: ; 
} 
 
.btn-dwb .badge { 
  color: #1A63AC; 
  background-color: #FFFFFF; 
}
.btn {
    display: inline-block;
    padding: 6px 2em;
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.42857143;
    text-align: center;
	text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}