@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic,600italic);

/* general */
html											{ -webkit-text-size-adjust: none; }
body											{ background: #FFF; font: 15px/1.6 'Source Sans Pro', Arial, serif; }
#container										{ width: 55.952381%; min-width:940px; padding: 140px 80px 0px 80px; }
#header											{ position: fixed; top: 0; left: 0; background: #FFF; width: 60.714286%; min-width: 1020px; padding-left: 80px; height: 100px; border-bottom: 1px solid #ccc; z-index: 2; }
#content										{ padding-bottom:20px; }
a img											{ border: none; }
img.right										{ margin-left:20px; margin-bottom:20px; float: right; }
img.left										{ margin-right:20px; margin-bottom:20px; float: left; }
#direct-links 									{ margin: 0; list-style-type: none; }
#direct-links li 								{ margin: 0; }
#direct-links li a 								{ position: absolute; left: -9999px; color: #000; background-color: #FFFFFF; z-index: 12; }
#direct-links li a:focus 						{ left: 0; right: 0; top: 0; width: 100%; text-align: center; padding: 4px 0px; }

#digid-logout									{ position: absolute; width: 60.714286%; min-width: 1020px; text-align: right; z-index: 3; top: 110px; }

/* visual */
#visual											{ position: fixed; right: 0; top: 0; bottom: 0;  width: 38.095238%; max-width: 640px; background-color: #FFF; background-size: cover; background-position: right top; z-index: 1; overflow: hidden; }
#mask											{ width: 550px; height: 2100px; position: absolute; left: -275px; top: 0; bottom: 0; background-image:url('/data/images/4/mask.png'); background-size:100%; background-size:cover; }
#logo											{ position: absolute; left: 15px; top: 193px; }

/* menu */
#menu											{ margin: 0; padding: 0; font-weight: 600; font-size: 1.46666667em; float: left; }
#menu li										{ list-style-type: none; margin: 0 30px 0 0; padding: 0; float: left; background: none; }
#menu li a										{ display: block; height: 100px; line-height: 100px; color: #767676; text-decoration: none; }
#menu li a.active,
#menu li a:hover, #menu li a:focus				{ color: #222; border-bottom: 4px solid #44BB20; background-image: url('/data/images/7/menu-active.png'); background-position: center bottom; background-size: 16px 8px; background-repeat: no-repeat; }

/* header icons */
#social											{ margin-top: 30px; float: right; margin-right: 10px; }
#social	a										{ display: inline-block; margin-right: 4px; padding: 0; background-image: none; }
#social	a img									{ transition:all 250ms ease; }
#social	a:hover img,
#social a:focus img								{ transform:scale(1.1); }
#social .toggleSearch, .toggleNav				{ display: none; }
#header .toggleNav								{ cursor: pointer; float: left; }
#header .toggleMobileSearch						{ display: none; }
#logoMobile										{ display: none; }

/* search */
#search											{ float: right; position: relative; width: 240px; margin-top: 30px; }
#search label									{ position: absolute; left: -9999px; }
#q												{ height: 40px; background: #EEE; width: 100%; border-radius: 20px; border: none; padding: 0 30px 0 16px; font: 13px/1.6 'Source Sans Pro', Arial, serif; color: #333; }
#search #submit									{ position: absolute; right: 12px; top: 12px; }
#mobileSearch									{ display: none; }

/* type */
p												{ font-size: 1em; color: #4D4D4D; margin-bottom: 20px; margin-bottom: 1rem; }
p.note											{ font-weight: 600; }
p.notice, p.error								{ padding: 5px 10px 5px 31px; background-repeat: no-repeat; background-position: 6px 8px; }
p.notice										{ background-color: #FBF2C3; background-image:url('/data/images/3/9/notice.png'); }
p.payment										{ background-image:url('/data/images/1/5/5/ideal_icon.png'); }
p.error											{ background-color: #FEE7E7; background-image:url('/data/images/3/8/error.png'); }
a												{ color: #0076D2; }
a:hover											{ color: #004D89; }
h1, h2, h3, h4									{ color: #222; }
h1												{ font-size: 2.53333333em; margin-bottom:1rem; }
h2												{ margin-bottom: 6px;  }
.blink											{ background:yellow; }
h3												{ font-size: 1rem; }
h4												{  }
ul, ol											{ color: #4D4D4D; margin-bottom: 1.5em; }
ul li											{ padding-left:16px; margin-bottom: 2px; list-style-type: none; background-image: url('/data/images/6/list-dot.png'); background-position: 0px 9px; background-size: 6px 6px; background-repeat: no-repeat; }
ul li.no-dot									{ margin-bottom: 5px; list-style-type: none; background: none; padding-left: 0; }
ol												{ list-style-position: inside; }
ol li											{ margin-bottom: 2px; }
ul li ol										{ margin-bottom: 0; }
ul li ol li										{ padding-left: 0; background-image: none; list-style-type: decimal;  }
a.external										{ background-image: url('/data/images/9/1/icon-external.png'); padding-right: 16px; background-repeat: no-repeat; background-position: right center; margin-right:0; }

/* buttons */
.button											{ background-color: #0076D2; display: inline-block; padding: 14px 24px; font-weight: 600; font-size: 16px; line-height: normal; border-radius: 50px; color: #FFF; cursor: pointer; margin-right: 10px; margin-bottom:0.5em; text-decoration: none; }
.button:hover, .button:focus					{ background-color: #004D89; color: #FFF; }
.button.inverted								{ background-color: #FFFFFF; border: 2px solid #0076D2; color: #0076D2; }
.button.inverted:hover,
.button.inverted:focus							{ background-color: #EEE; }
p.hasButtons									{ margin-bottom:1em; }

/* tables */
table											{ border-collapse: collapse; margin-bottom: 1rem; border: none; min-width: 450px; }
table caption									{ text-align: left; margin-bottom: 6px; font-weight: 700; }
table.openingstijden_week caption				{ background: #FFF; color: #208900; text-align: center; margin: 0; font-weight: 700; padding: 4px 0; }
table.topSpace									{ margin: 22px 0px !important; }
table th, table td								{ text-align: left; padding: 4px 8px; border: 1px solid #CCC; vertical-align: top; }
table th										{ background: #F6F6F6; }
table.openingstijden_week thead th				{ background: #DEDEDE; }
table th.day_width								{ width: 178px; }
table td.number table th.number					{ text-align: right; }
table td.availability							{ text-align: center; }
table td.availability img						{ vertical-align: middle; }
table td.times select							{ margin: 0; vertical-align: middle; }
table ul:last-child								{ margin-bottom: 0; }
.table-container								{ max-width:100%; overflow-y:hidden; overflow-x:auto; margin-bottom: 1em; }
.table-container table							{ margin-bottom:0; }

table.openingstijden_week thead th				{ background: #DEDEDE; }

/* openingstijden table */
table.openingstijden_week tbody th				{ width: 240px; }
table.openingstijden_week tr.today th,
table.openingstijden_week tr.today td			{ font-weight: bold; }
table.openingstijden_week tr.exception td		{ color: #E15A37; }

/* breadcrumb */
#breadcrumb										{ font-size: 1.2em; padding: 4px 0; margin-bottom: 10px; margin-bottom: 0.5rem; font-weight: 600; color:#767676; }
#breadcrumb a									{ text-decoration: none; color: #000; }
#breadcrumb a:hover								{ text-decoration: underline; color:#4D4D4D; }
#breadcrumb span								{ margin: 0 6px; }

/* taken */
ul.taken										{ margin:0; overflow: auto; column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; margin-bottom: 1em; }
ul.taken li										{ padding-left: 16px; padding-right:16px; padding-bottom: 16px; margin:0; background-image: url('/data/images/1/3/arrow-right.png'); background-position: 0px 7px; background-size: 9px 14px; display: block; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; column-rule-width: 1px; column-rule-style: solid; column-rule-color: #000; }
ul.taken h2										{ line-height: 1.4; font-size: 20px; font-size: 1.25rem; }
ul.taken h2 a									{ text-decoration: none; outline: none; }
ul.taken h2 a:hover,
ul.taken h2 a:focus								{ text-decoration: underline; color: #004D89; outline: none; }
ul.taken li p									{ display: block; margin: 0; }

/* pagination */
ul.pagination li 								{ list-style-type: none; margin-left: 0; display: inline-block; background-image: none; }

/* openingstijden */
#openingstijden-en-contact						{ clear: left; padding-left: 80px; margin-left: -80px; padding-top: 20px; }
#openingstijden-en-contact h1					{ position: absolute; left: -9999px; }
#openingstijden-en-contact h2					{ font-size: 1.25rem; margin-bottom:0.5rem; }
.openingstijden									{ margin: 0 -10px; }
.panel											{ padding: 10px; border: 1px solid #CCCCCC; border-top: 4px solid #44BB20; margin-bottom: 20px; min-height: 185px; }
.panel p										{ margin-bottom: 0; }
.panel p .button								{ padding:8px 12px; font-size: 14px; margin-top: 10px; margin-bottom: 0; }
.openingstijden .panel h2						{ padding-left: 32px; background-size: 24px 24px; background-position: left center; background-repeat: no-repeat; }
.panel.gemeentehuis h2							{ background-image: url('/data/images/2/3/icon-clock.png'); }
.panel.telefoon h2								{ background-image: url('/data/images/2/5/icon-phone.png'); }
.panel.milieustraat h2							{ background-image: url('/data/images/2/6/icon-recycle.png'); }
.panel.groendepots h2							{ background-image: url('/data/images/2/4/icon-leaf.png'); }

/* searchoverlay */
.searchResponsive								{ position: absolute; top: 100px; right: 0; left: 0; z-index: 2; display: none; text-align:center; height: auto; }
#searchResponsive								{ width: auto; position: relative; }
#searchResponsive label							{ position: absolute; left: -9999px; }
#qResponsive									{ height: 40px; background: #EEE; width: 100%; border: none; padding: 0 30px 0 16px; font-size: 12px; }
#submitResponsive								{ position: absolute; right: 12px; top: 12px; }
.searching .searchResponsive					{ display: block; }
.searching #container							{ padding-top: 160px; }

/* ankers */
#ankers li										{ background-image: url('/data/images/3/6/arrow-right-ie.png'); background-position: 6px 13px; border-bottom: 1px solid #EEE; margin-bottom: 0;}
#ankers li a									{ text-decoration: none; padding: 5px 0; display: block; }
#ankers li:first-child							{ border-top: 1px solid #EEE; }
#ankers li:hover, #ankers li:focus				{ background-color: #F6F6F6; }

/* nieuws */
.news											{ padding-bottom: 16px; border-bottom: 1px dotted #CCC; margin-bottom: 8px; }
.news *:last-child								{ margin-bottom: 0; }
.news:last-child								{ border-bottom: none; }
.news h2										{ margin-bottom: 0; }
.news h2 a										{ text-decoration: none; }
.news h2 a:hover, .news h2 a:focus				{ text-decoration: underline; }
h1 + .date										{ margin-top: -1.5rem; }

/* notification */
#notification									{ padding: 5px 10px 5px 31px; background-repeat: no-repeat; background-position: 6px 8px; background-color: #FBF2C3; background-image:url('/data/images/3/9/notice.png'); margin-bottom:1rem; }
#notification p									{ margin-bottom: 0; }
#notification h1, #notification .date			{ display:none; }

/* accordion */
ul.accordion									{ margin-left:0; border-top:1px solid #DDD; }
.accordion .content								{ display:none; overflow:auto; }
.no-js .accordion .content						{ display: block; }
.accordion .expanded .content					{ display:block; }
.accordion-slide								{ list-style-type:none; background-image: none; border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD; padding-left:0; margin-top:0; margin-bottom:0; }
.accordion-slide ul:last-child					{ margin-bottom: 0; }
.accordion-slide p								{ font-size:18px; font-weight:600; margin:0; padding:8px 8px 8px 12px; font-weight:600; cursor:pointer; }
.accordion-slide p:hover,
.accordion-slide p:focus,
.accordion-slide.expanded p						{ background:#F4F4F4; }
.accordion-slide p a							{ text-decoration:none; }
.accordion .content								{ background:#FFF; padding:10px; border-top:1px solid #DDD; margin-bottom:0; }
.accordion .content p							{ font-size:1em; cursor:default; padding:0 0 10px 0; background:none; margin:0 0 0.5em 0; }
.accordion .content p a							{ color:#008284; }
.accordion .content p img						{ float:right; }
.accordion .content h1							{ margin:20px 0; }
.accordion li p a								{ color:inherit; }
.accordion li li								{ list-style-type:none; }
.accordion p.email								{ margin-bottom:0; }

/* raadsvergaderingen */
.points span.number								{ font-weight: normal; margin-right: 2px; background: #44BB20; color: #FFF; border-radius: 16px; width: 24px; height: 24px; text-align: center; line-height: 24px; display: inline-block;  }
.points h3.point								{ margin-bottom: 0.25em; }
.points .documents								{ padding-left: 30px; }
.points .documents h4							{ font-weight: 400; }

/* footer */
#footer											{ clear: both; border-top: 1px solid #CCC; padding-left: 80px; margin-left: -80px; }
#footer-menu									{ margin: 0; padding: 0; font-size: 0.86666667em; overflow: auto; }
#footer-menu li									{ padding: 0; margin-bottom: 0; background: none; float: left; }
#footer-menu li a								{ display: block; color: #4D4D4D; font-weight: 600; padding: 10px; cursor: pointer; }
#footer-menu li a:hover,
#footer-menu li a:focus							{ background: #EEE; color: #222; }

/* off canvas menu */
#wrapper 										{ overflow: hidden; width:100%; }
#site-canvas 									{ width: 100%; height: 100%; position: relative;  -webkit-transition : -webkit-transform 500ms ease; transition : transform 500ms ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.show-nav #site-canvas 							{ -webkit-transform: translate3d(280px, 0, 0);  transform: translate3d(280px, 0, 0); }
#site-menu 										{ width: 280px; height: 100%; position: absolute; left: -280px; display: none; }
#site-menu .actions								{ height: 40px; width: 100%; background: #FFF; }
#site-menu .actions	a							{ display: inline-block; border-right: 1px solid #EEE; cursor: pointer; }
#site-menu .actions	a.social					{ float: right; padding-right: 0; background-image: none; }

#mobile-menu									{ margin: 0; padding: 0; font-size: 1.2em; }
#mobile-menu li									{ margin: 0; padding: 0; background: none; }
#mobile-menu li a								{ height: 40px; display: block; line-height: 40px; padding-left: 10px; text-decoration: none; color: #222; font-weight: 600; }
#mobile-menu li a.active						{ background: #44BB20; color: #000; }

/* responsive */
@media screen and (max-width:1660px) {
}

@media screen and (max-width:1400px) {
	#header										{ width: 940px; min-width: 0; padding-left: 40px; padding-right: 0; }
	#container									{ position: relative; background: #FFF; z-index: 2; padding-left: 40px; padding-right: 40px; }
	#logo										{ top: 100px; left: 0; }
	#header										{ min-width: 0; }
	#visual										{ left: 940px; width: auto; right: 0; }
	#mask										{ }
	#caption									{ display: none; }
	#footer										{ padding:0 40px; margin-left: -40px; margin-right: -40px; }
}

@media screen and (max-width:1240px) {
	#header										{ padding-right:40px; }
	#digid-logout								{ padding: 0 40px; width: 940px; min-width: 0; }
	#logo, #mask								{ display: none; }
	#social										{ margin-top: 34px; }
	#social	a									{ width: 32px; height: 32px; margin-right: 1px; }
	#social	a img								{ max-width: 100%; height: auto; }
}

@media screen and (max-width:1090px) {
	#visual										{ display: none; }
	#header, #container							{ width: auto; }
	#header										{ right: 0; }
	#digid-logout								{ width: 100%; }
}

@media screen and (max-width:940px) {
	#visual, #search							{ display: none; }
	#social										{ margin-right: 0; }
	#social .toggleSearch						{ display: inline-block; cursor: pointer; }
	#header, #container							{ width: 100%; min-width: 0; }
	.searching #search							{ display: block; width: auto; position: absolute; left: 0; right: 0; top: 100px; margin: 0; }
	.searching #search #q						{ border-radius: 0; }
}

@media screen and (max-width:724px) {
	h1											{ margin-bottom: 1rem; line-height: 1.2; font-size:2em; }
	#header										{ padding: 0; height: 41px; border-color: #EEE; text-align: center; }
	#container									{ padding: 60px 20px 0px 20px; }
	#site-menu									{ background: #EEE; display: block; }
	#site-menu .actions							{ overflow: hidden; }
	#menu, #social								{ display: none; }
	.toggleNav									{ display: inline-block; border-right: 1px solid #EEE; width: 41px; height: 41px; }
	#header #mobileSearch						{ display: inline-block; float: right; border-left: 1px solid #EEE; width: 41px; height: 41px; }
	ul.taken 									{ column-count: 1; -webkit-column-count: 1; -moz-column-count: 1; }
	ul.taken li									{ width: auto; float: none; padding-right: 0; }
	#logoMobile									{ display: inline-block; margin-top: 9px; }
	.searching .searchResponsive				{ top: 40px; }
	.searching #search							{ top: 40px; }
	#searchResponsive label						{ position: absolute; left: -9999px; }
	.searching #container						{ padding-top: 100px; }
	.panel										{ min-height: 0; }
	#footer										{ padding:0 20px; margin-left: -20px; margin-right: -20px; }
	
	/* Special display for DigiD logout link on mobile devices */
	#header										{ position: absolute; }
	#digid-logout								{ position: static; background:#333; padding: 4px 0; text-align: center; top: 0; left: 0; right: 0; width: auto; color: #FFF; }
	#digid-logout p 							{ color: #FFF; margin: 0; }
	#digid-logout p a 							{ color: #FFF; }
}