/*

Theme Name: Rijpers

Theme URI: http://www.rijpers.nl

Description: Rijpers Wordpress theme door Bob de webbouwer

Author: Bob de webbouwer

Author URI: http://www.bobdewebbouwer.com

License: All rights reserved

License URI: http://www.bobdewebbouwer.com



Version: 15032016



LET OP : DIT IS DE STYLESHEET VAN DE TEMPLATE, HIER GEEN WIJZIGINGEN IN AANBRENGEN!



KLEUREN EN DERGELIJKE KUN JE AANPASSEN IN CUSTOM.CSS.



*/





@import url(https://fonts.googleapis.com/css?family=Allura);





/* Algemene instellingen */



html, body {margin:0 0 0 0px; padding:0 0 0px 0; font-family: Verdana, Geneva, sans-serif; font-size: 1em; color: #666;}

ul {width: 100%; max-width: 1200px; margin: 0 auto;}

li {}

.clear {clear:both;}

iframe {max-width: 100%;}







/* Headings */



h1 {font-size:1.5em; padding: 15px 0 5px 0; margin:0 auto; font-weight: normal; width: 100%; max-width: 1200px;}

h2 {font-size:1.3em; padding: 40px 0 0 0; margin:0 auto; font-weight: normal; max-width: 1200px;}

h2.prijs {padding: 0px; font-size: 1.1em;}

h3 {font-size:1.1em; padding: 20px 0 10px 0; margin:0 auto; font-weight: bold; max-width: 1200px}

h4 {padding:0; margin:0;}









/* Volledige website m.u.v. achtergrond */



#totaal {float: left; width: 100%; height:auto;}







/* Index keuzepagina */



.indexpagina {text-align: center;}

.indexpagina h1 {color: #333;}

.indexpagina #logowrapper {width: 100%; max-width: 720px; margin: 40px auto;}

.indexpagina .logo {float: left; display: inline; max-width: 320px; margin: 0 20px;}

.indexpagina .logo img {display: block; margin: 20px 4%; max-width: 92%;}

.indexpagina .logo a {font-weight: bold; text-decoration: none;} 

.indexpagina .logo a.fotografie {color: #A53585;}

.indexpagina .logo a.fotografie:hover {border-bottom: 1px dotted #A53585;}

.indexpagina .logo a.smederij {color: #36a3aa;}

.indexpagina .logo a.smederij:hover {border-bottom: 1px dotted #36a3aa;}







/* Header */ 





#header {position: fixed; float: left; z-index: 200; width:100%; height: 100px; background: #fff; background: rgba(255, 255, 255, 0.98); border-bottom: 2px solid #f1f1f1;}

#header #container {position: relative; max-width: 1200px; max-height: 100px; margin: 0 auto; padding: 0 2% 0 2%;}

		

		

			/* Logo */ 

		

		    #logo {float: left; margin: 4px 30px 0 0px; max-height: 100px; width: auto; padding: 5px 0;}

			#logo img {border: 0px; width: auto; height: 90px;}

			

			

			

			/* Site title zoals opgegeven in de wordpress instellingen */ 

			

			#branding {position: absolute; right: 25px; top: 10px; display: inline-block; margin: 0 auto; max-width: 1200px; font-size: 80%;} 

			#site-title {margin:0; padding:0; font-size:0.8em; display: none;}

			#site-description {font-size:1.1em; margin: 7px 0 10px 0px; font-style: italic;}



			

																				 

			

/* Menu */



#menuboven {float: right; position: relative; top: 55px; text-align: center; font-size: 0.7em; font-weight: bold;}

#menuboven a {text-decoration: none;}

#menuboven ul {float: left; position: relative; right: 25px; padding: 0 0 0 0px; z-index: 100!important; margin: 0 auto; text-align: left;}

#menuboven li {position: relative; float: left; top: 0px; margin: 0px 0px 0px 0px; padding-top: 15px; list-style-type:none; display:inline; min-height: 20px;}

#menuboven li a {margin: 0px; padding: 5px 10px 5px 10px;}

#menuboven li:hover {}

#menuboven img {position: absolute; top: 15px; right: 0px;}



#menuboven #search-icon {position: absolute; left: 0px; top: 14px; display: inline-block; background: url(/fotografie/wp-content/themes/rijpers/foto/zoeken.png); background-repeat: no-repeat; height: 20px; width: 20px;} /* toon menu button */



		

		

		

			

			/* Submenu */

				

			#menuboven li ul {display: none; width: 200%;}

			

			

			@media screen and (min-width: 1235px)



			{

				

			#menuboven li:hover ul {display: inline-block; position: absolute; left: 0px; top: 35px; border: 0px; padding: 5px 0px 10px 0; 

			margin: 0px 0 0px 0px; box-shadow: 0px 10px 15px 1px #666;}

			#menuboven li:hover li {display: block; float: none; border: 0px; margin: 0px 0px 0px 0; padding-top: 0px; border-radius:0px;}

			#menuboven li:hover li a {display: block; padding: 10px 5px 7px 5px;}



			} /* Hover effect alleen op schermen groter dan 1020 px */







			/* Styling geselecteerde pagina in menu */

			

			.current-menu-item > a,

			.current-menu-ancestor > a,

			.current_page_item > a,

			.current_page_ancestor > a {padding: 17px 16px 16px 16px;}

			

			

			

			/* Styling geselecteerde parent pagina in menu (bijvoorbeeld "blog" of  "nieuws" bij individuele berichten) */

			

			.current_page_parent a {padding: 10px 10px 11px 10px; margin: -10px; text-decoration:none;}

			.current-page-ancestor a {padding: 10px 10px 11px 10px; margin: -10px;text-decoration:none;}

			

						

			

			/* Responsive menu - button verbergen bij desktop weergave */

			

			#menuboven #menu-icon {display: none;}

			

			

			

			/* Search */ 

			

			#search {position: absolute; right: 0px; float: right; display: inline-block; width: auto; margin: 0px 10px 0 0;}

			#search form {position: absolute; top: 35px; right: 35px; z-index: 200; display: none;}

			#search label {display: none;}

			#search input[type=text] {width: 240px; height: 25px; padding: 0 0px 0 5px; background: #fff;}

			#search input[type=submit] {position: absolute; top: 8px; right: -60px; height: 29px;}









/* Slider */



#slider {position: relative; float:left; margin: 100px 0 0px 0; padding: 0px; width:100%; height: auto; max-height: 750px; clear:both;}

#meteor-slideshow {float: none; width: 100%; max-width:1200px; height: auto; max-height: 400px!important; margin: 0 auto!important;}









/* Wrapper voor contentgedeelte (#inhoud + sitebars) */



#wrapper {width: 100%; max-width: 1200px; background-color: #fff; margin: 40px auto 40px auto;} 

#wrappernoslider {float: left; width: 100%; background-color: #fff; margin: 120px auto 40px auto;} 











/* Contentvak */



#inhoud {float:left; position: relative; padding: 2% 0%; width: 80%; display:inline-block; min-height: 400px; font-size: 0.8em; line-height: 20px; color:#666;}

#inhoud p {max-width: 1200px; margin: 0 auto; padding: 20px 0 0px 0; }

#inhoud img {margin: 0 20px 20px 0px;}

#inhoud ul {margin-top: 20px; width: 90%;}

#inhoud a.fancybox {border-bottom: none!important; text-decoration: none;}

.content {float: none; max-width: 1200px; margin: 0 auto; padding: 10px 2% 30px 2%;}







				/* Rijen */



				.rij, .rijdonker, .rijkleur, .rijgrijs {float: left; width: 100%; padding-bottom: 20px;}

				.rijwit {float: left; width: 100%; background: #fff;}

				

				

				

				

				/* Kolommen */

				

				.kolom2 {float: left; width: 44%; margin: 0 4% 20px 0; padding: 1%;}	

				.kolom3 {float: left; width: 27.3%; margin: 0 4% 20px 0; padding: 1%;}

				.kolom2 img, .kolom3 img {max-width: 95%;}

				

			

				 

				 /* Breadcrumbs */

				 

				 #linkpad {margin: 0 auto!important; width: 98%!important; max-width: 1200px; padding: 0px 2% 10px 0%; color: #999; font-size: 0.8em;}

				 #linkpad li {display:inline; padding: 0 10px 0 0;}

				 #linkpad a {color: #999;}

				 #social {clear: both; padding: 20px 0 0 0;}

				 

				 

				 

				 /* Fotogallerij op pagina */

				 

				 /* #inhoud .ngg-galleryoverview {position: absolute; width: 33%; top: 65px; right: -70%;} */

				 #inhoud .ngg-gallery-thumbnail img {padding: 0px; max-width: 98%!important}

				 

				 

				 /* Paginanummering */

				 

				 .pagina {padding-left: 0px;

		 				  padding-top: 10px;

		 				  padding-bottom: 30px;

		 				  margin-top: 30px;

						  border-top: #000 solid 1px;} 

						  

						  

				 

				 /* Styling index.php */ 

				 

				 #list h2 {padding: 40px 0 15px 0;}

				 #list .post-meta {padding: 15px 0 0 0;}

				 #list p {padding: 0 0 0 0px;}

				 

				 .listpost {clear: both; padding: 0 0 30px 0; border-bottom: #999 dotted 1px; min-height: 160px;}

				 .listpost h2 {padding: 40px 0 10px 0;}

				 .listpost h2 a {border: none!important;}

				 .listpost h2 a:hover {text-decoration: underline!important;}

				 .listpost p {margin-top: -5px;}

				 

				 .cat {font-size: 70%;}

				

				.more-link {border-bottom-color: #999!important;}

				

				.home #inhoud {width: 100%;}

				.cathome {float: left; display: inline; width: 23%; margin: 20px 2% 40px 0; font-family: 'Allura', cursive; font-size: 30px; text-align: center; }

				.cathome img {width: 100%; height: auto;}

				.cathome p {padding: 0px!important;}

				.cathome a {border-bottom: none!important;}

				

				

				

				

				 /* Styling single.php */ 

				 

				 .single #inhoud {width: 96%;}

				 .single #inhoud .ngg-galleryoverview {position: relative; width: 100%; top: 20px; right: 0%;}





				 

				 #post ul#linkpad {padding: 10px 2% 10px 0%;}

				 #post form#commentform {width: 100%; margin: 0%!important;}



				 #post .rij .content, #post .rijdonker .content, #post .rijkleur .content, #post .rijgrijs .content {padding: 10px 0% 30px 0%;}



				

				

				/* Styling voorwaarden */

				

				ul.voorwaarden li {margin: 0 0 10px 0;}

				ul.voorwaarden li ul {margin-top: 10px!important;}

				

				

								

				/* CTA button #inhoud */

			

				#inhoud .cta {clear: both; margin: 30px auto 30px auto; max-width: 1200px; font-size: 100%; font-weight: 700;}

				#inhoud .cta a {padding: 10px; border-bottom: none!important; line-height: 30px;}

				#inhoud .cta a:hover {text-decoration: none!important; }

				

				



				/* Styling reacties */



				h3#hulp {padding: 80px 0 0 0; margin:0 0 -10px 0;}

				

				form#commentform {width: 96%; margin: 0 2% 0 2%;}

				

				label {display: block;}

				

				.comment {padding-bottom: 20px;

						  padding-top: 20px;

		  				  border-bottom: 1px solid #999;}

				.commentmetadata {color: #999;}

				.commentmetadata a:link {color: #666;

										 text-decoration: none;

										 font-style: italic;

										 font-size: 90%;

										 border: none;}

				.commentmetadata a:visited {color: #666;

											text-decoration: none;

						 					font-style: italic;

											 font-size: 90%;

										 border: none;}

				.nocomments {display: none;}

				ol.commentlist {padding: 0 0 30px 30px;}

				.commentlist li {list-style-image: none;

				 				 list-style-type: none;}

				h3#comments-title {clear: both; padding: 80px 0 0 0!important;}

				

				

				

				

									/* Paginanummers */



									#paginanummers {margin-top: 10px; padding-top: 15px;}

									#paginanummers a {padding: 5px 10px; background: #ececec!important; text-decoration: none!important;}

									#paginanummers .current {padding: 5px 10px; background: #999!important;}

									

								

									/* Contactbuttons in widgetarea */

									

									#widgetarea .button {float: left; display: inline; margin: 10px 10px 0 0;}

									#widgetarea .button img {height: 30px; width: 30px; padding: 10px; margin: 0px;}

									#widgetarea .button a {border-bottom: none!important;}

									

									

									/* Google maps kaartje widgetarea */

									

									#widgetarea ul .pgm {float: left; display: inline; margin: 0 2.5% 40px 2.5%; width: 28%;}		

			





/* Contactformulier */



.page-id-47 #inhoud {width: 96%;}



#contactlinks {float: left; max-width: 100%; width: 400px; margin: 0 150px 30px 0;}

#contactrechts {float: left; max-width: 95%;}



#wpgmza_map {margin: 30px 0 0 0;}



input[type=text] {margin: 10px 0 0px 0; max-width: 95%;}

input[type=email] {margin: 10px 0 0px 0; max-width: 95%;}

input[type=date] {margin: 10px 0 0px 0;}

input[type=submit] {border: none; padding: 5px;}

textarea {margin: 10px 0 0px 0; max-width: 98%;}

label {margin: -10px 0 0 0;}

p.opmerking {margin: 30px 0 0px 0;}



									



/* Footer */



#footer-wrapper {float: left; width:100%; margin-top:0px; font-size: 0.8em;}

#footer-wrapper ul {margin: 0px; padding: 0px;}

#footer-wrapper li {list-style-type: none; margin: 0 0 10px 0;}



#footer-wrapper a {text-decoration: none;}

#footer-wrapper a:hover {text-decoration: underline;}



#footer-wrapper h2 {font-size:1.3em; padding: 20px 0 20px 0; margin:0 0 0px 0;}

#footer-wrapper h3 {margin: 0px 0 10px 0;}



#footer-wrapper .button {float: left; display: inline; margin: 10px 10px 0 0;}

#footer-wrapper .button img {height: 30px; width: 30px; padding: 10px;}

#footer-wrapper img {width: 20px; padding: 5px;}



.buttonfooter {float: left; display: block; clear: left; height: 40px; margin: 5px 0 0 0;}

.buttonfooter a {padding:10px; text-decoration: none;}			





				/* Widgetarea */

				

				#widgetarea {position: relative; width: 100%; max-width: 1200px; margin: 0px auto;}

				#widgetarea ul {float: left; margin: 20px 0 20px 0px;}

				#widgetarea h2 {padding: 0px 0 20px 0;}

				#widgetarea ul li {float: left; display: inline; margin: 0 15px 0px 15px;}

				#widgetarea ul li ul {margin: 0 0 0 0px;}

				#widgetarea ul li ul li {float: left; display: inline; line-height: 30px;}

				#widgetarea .clear {margin: 0 0 35px 0;}

				#widgetarea ul li:first-child {margin: 0 15px 0 0px;}

			







/* Afbeeldingen */



.size-thumbnail {} /* AFMETINGEN VOOR FOTO KLEIN */

.size-medium {clear: both; float: left;} /* FOTO MEDIUM (Afmetingen en kleur in custom.css) */

.size-large {clear: both; float: left;width: 100%; height: auto;} /* AFMETINGEN VOOR FOTO GROOT */

.size-full {float: left; width: auto; height: auto; max-width: 100%;}

.alignright {float: right; margin: 0 0 20px 20px;} /* Opmaak voor rechts uitgelijnde foto */

.alignleft {float: left;} /* Opmaak voor links uitgelijnde foto */

.aligncenter {text-align: center; margin: 0 auto;} /*Opmaak voor gecentreerde foto */

.alignnone {} /*Opmaak voor niet uitgelijnde foto */

.wp-caption {} /* Onderschrift bij foto's achtergrond, rand etc */

.wp-caption-text {clear: left; text-align: left; font-size: 80%; margin: 0 0 20px 0;} /* Onderschrift bij foto's tekst */

.gallery-caption {} /* Onderschrift bij de standaard Wordpress gallery (shorttag [gallery] */

.attachment-post-thumbnail {float: left;}/* Styling uitgelichte afbeelding op berichtenpagina */







/* Overig */



.sticky {} /* Stijl voor sticky posts */

.bypostauthor {} 



.post-meta {font-size: 90%; color:#666; font-style:italic; padding: 5px 0 0 0; width: 100%; max-width: 1200px; margin: 0 auto;} /* styling post meta zoals datum, auteur enzovoorts */

.post-meta a:link {font-size: 100%!important; color:#666!important; border: none!important;}

.post-meta a:visited {font-size: 100%!important; color:#666!important; border: none!important;}

.post-meta a:hover {font-size: 100%!important; color:#5d14f2;}



li.widget {list-style-type:none;}



.form-allowed-tags {display: none;}





ul.overzicht {margin: 30px auto 0 auto;}

ul.overzicht li {padding: 0px 0 15px 0;}



ul.vinkje {margin: 30px auto 30px auto; width: auto;}

ul.vinkje li {list-style-image:url(/wp-content/themes/bobshop/foto/vinkje.png); margin: 0 0 25px 0;}











/* ------ RESPONSIVE WEERGAVE ------- */







@media screen and (max-width: 1235px)



{

	

#header {height: 90px;}





#logo {padding: 5px 0 5px 0;}

#logo img {height: 70px; margin: 10px 0 0 0px; } 





#menuboven {position: absolute; top: 45px; right: 15px; float: none;}

#menuboven ul {float: left; display: none; top: 45px; right: -15px; padding: 0 10px 10px 10px; background: #fff; box-shadow:  0px  10px  15px  1px  #666;}

#menuboven li {display: block; background: none; border: none; background: #fff; clear: left;}

#menuboven li a {border-right: none!important;}



#menuboven #menu-icon {position: absolute; top: 10px; right: 20px; display: inline-block; background: url(/fotografie/wp-content/themes/rijpers/foto/menu.png); background-repeat: no-repeat; height: 50px; width: 100px;} /* toon menu button */



#menuboven ul.sub-menu {float: left; position: relative; left: 10%; top: 5px; background: none; box-shadow: none; width: 90%; border-top: none;}



.current-menu-item ul.sub-menu,

.current-menu-ancestor ul.sub-menu,

.current_page_item ul.sub-menu,

.current_page_ancestor ul.sub-menu,

.current-page-ancestor ul.sub-menu {

	display: block!important;

	position: relative;

	left: 20px;

} /* Sub menu zichtbaar bij geselecteerd menu item, stukje inspringen */





#menuboven #search-icon {top: 16px;}

#search {position: absolute; right: 0px; top: -1px;}

#search form {top: 50px;}





#branding {position: relative; left: -70px; top: 19px;}





#slider {margin: 90px 0 0px 0;}





h2 {padding: 40px 0% 0 0%;}

h3 {padding: 20px 0% 10px 0%;}



#wrapper img {max-width: 95%!important; height: auto;}

#wrapper .wp-caption {max-width: 95%!important;}



#inhoud {padding: 2%;}

.home #inhoud {width: 96%;}



#inhoud .ngg-galleryoverview {right: -55%;}



#post h1 {width: 100%; padding: 15px 0% 20px 0%;}

#post .post-meta {width: 100%; padding: 15px 0% 20px 0%;}



#widgetarea h2 {width: 100%;}

#widgetarea {width: 96%; padding: 0 2% 0 2%;}

#widgetarea ul li:first-child {margin: 0 16px 0 16px;}





a.leesmeer {margin: 0 2% 0 2%;}



.post-meta {padding: 5px 2% 0 2%; width: 96%;}



}











@media screen and (max-width: 1020px)



{

	

#header {width: 100%;}

#inhoud {width: 96%;}

#inhoud .ngg-galleryoverview {position: relative; width: 100%; top: 20px; right: 0%;}



}





@media screen and (max-width: 795px)



{



.indexpagina #logowrapper {width: 100%; max-width: 340px;}

.indexpagina .logo {margin: 20px 10px;}



.cathome {width: 30%; margin: 20px 3% 40px 0;}

	

.kolom3 {width: 96%;}



}









@media screen and (max-width: 650px)



{

	

#branding {display: none;}

.kolom2 {width: 96%;}



#contactlinks {margin: 0 0px 30px 0;}



}







@media screen and (max-width: 595px)



{



.cathome {width: 47%; margin: 20px 3% 40px 0;}



}







@media screen and (max-width: 500px)



{

	

#widgetarea ul li ul li {display: block; width: 100%; margin: 0px;}

#widgetarea ul li ul li:first-child {margin: 0px;}





}



	

	

@media screen and (max-width: 460px)



{

	

html, body {width: 100%;}

#totaal {width: 100%; min-height: 370px;}

#header {width: 100%;}



#menuboven {min-height: 100px;}

#menuboven ul {margin: 0px 0 0 0;}



#inhoud ul {margin-top: 20px; width: 80%;}



.cathome {width: 70%; margin: 20px 15% 40px 15%;}





	

}