/*Theme Name: Jopie Spanjer
Theme URI: www.jopiespanjer.nl
Description: Het thema van Jopie Spanjer
Version: 0.3
Author: Trial and Success
Author URI: http://van-der-noord.nl/
Tags: -
*/
body {
	background-color: #ffad68;
}
body, span {
	font-family: Comic Sans SF, Arial, Helvetica !important;
	font-size: 20px !important;
}

h1 {
	font-family: Papyrus, fantasy;
	font-size: 75px;
}
h2 {
	font-family: Papyrus, fantasy;
	padding-top: -100px;

}
button {
	background-color: #ffad68 !important;
}
span {
	background-color: none !important;
}
.button-reset {
	display: none !important;
}
footer {
	text-align: right;
}
html,
body {
	margin:0;
	padding:0;
	height:100%;
}
#wrapper {
	min-height:100%;
	position:relative;
}
#header {
	background-color:#ffad68;
	padding:10px;
	text-align: center;
	height: 23%;
	min-height: 150px;
	line-height: 200%;
}
#body {
	min-height:60%; /* footer hight */
}
#content {
	padding-bottom:5px;
}
#footer {
padding-left: 1%;
padding-right: 1%;
}

.post {
	background-color: white;
	/*width: 90%;*/
	margin-left: 5%;
	margin-right: 5%;
	border-radius: 20px;
}
.post p, .post h3, .post label {
	margin: 1%;
}

h3 {padding-top: 1%;}
/*
ul {
	  display: table;
  width: 100%
}
li {
text-transform: capitalize;
float: left;
list-style: none;
display: table-cell;
  width:33%;
}
#navmenu ul {margin: 0; padding: 0; 
	list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
	padding: 5px 20px 5px 20px; color: black;
	background: white;
border-radius: 32px;}
#navmenu ul li a:hover {color: white;
	background: none; }
*/

/*navigation menu */
#nav {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background-color:#60625C;
bottom:0;
left:0;
margin:0;
padding:0;
padding-left: 25%;
width:100%;
//position:absolute;
z-index:1;
}
#nav, #nav ul {
line-height:40px;
list-style-image:none;
/*list-style-position:outside;*/
list-style-type:none;
width:100%;
}
#nav a, #nav a:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
border:medium none;
display:block;
text-decoration:none;
}
#nav li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
border-right:1px solid #6E7073;
}
#nav a, #nav a:visited {
color:#FFFFFF;
display:block;
padding:0 20px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration:none;
}
#nav li ul {
border-bottom:1px solid #6E7073;
height:auto;
left:-999em;
line-height:30px;
margin:0;
padding:0;
position:absolute;
width:222px;
}
#nav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
border-left:1px solid #6E7073;
border-right:1px solid #6E7073;
border-top:1px solid #6E7073;
width:220px;
}
#nav li li a, #nav li li a:visited {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#1E1F21 none repeat scroll 0 0;
color:#FFFFFF;
font-size:0.9em;
font-weight:normal;
}
#nav li li a:hover, #nav li li a:active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#60625C none repeat scroll 0 0;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
/*navigation menu */

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


/* thumbnail foto */
.attachment-post-thumbnail {
	/*width: 100%;
	height: auto;*/
	width: 50%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display:block;
}


/* menu en content naast elkaar */
#body {
    width: 100%;
    overflow: auto;
}
#menu-nombre-1 {
    float: left;
    width: 15%;
    margin-left: 4%;
}
#post-main {
    margin: 0 0 0 250px;
    width: 70%;
}

/* menu */
.menu-item > a {
	text-decoration: none;
	color: black;
	font-size: 25px;
}

.alignright {
	float:right;
}
.alignleft {
	float:left;
	margin: 1%;
}
.aligncenter {
	display: block;
    margin-left: auto;
    margin-right: auto
}

/* nieuwe poging voor menu */

/* define a fixed width for the entire menu 
#menu-nombre-1 {
  width: 300px;
}
*/
/* reset our lists to remove bullet points and padding */
#menu-main, .sub-menu {
  /*list-style: none;*/
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
#menu-main a {
  display: block;
  background-color: none;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

/* add hover behaviour */
#menu-main a:hover {
    /*background-color: white;*/
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

#menu-main li:hover .sub-menu {
  display: block;
  max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.sub-menu a {
  background-color: none;
}

/* hover behaviour for links inside .submenu */
.sub-menu a:hover {
  /*background-color: white;*/
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

/* mobile site */
#myTopnav{
		display:none;
	}

@media(max-width:850px){
	#post-main{
		width: 100%;
		margin: 0;
	}
	#menu-nombre-1{
		display:none;
	}
	#myTopnav{
		display:block;
	}
	#menu-main a{
		color:white;
	}
}

@media(max-width:484px){
	#header h1{
		line-height: 75px;
	}
	#header {
		min-height:300px;
	}
}



/* mobile menu */
li .icon{
	color:white;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

}
/* menu  circle bug */
  .topnav .menu-main-container ul {
  	list-style-type: none !important;}

  	ul {
  		list-style-type: disc;
  		list-style: disc;
  	}