body {

	margin: 0px;

	padding: 0px;
	
	background:#eda63e;

	background-image:url(images/bgTile.jpg);
	
	background-position:top center;
	
	background-repeat:repeat-y;

	text-align: center;

	/* font-size: 62.5%;  Resets 1em to 10px */

	}


#page {

	margin: 0px auto 0px auto; 

	padding: 0px 0px 0 0px;

	width: 936px;

	height:auto;
	
	background-color: #ffeab7;

	background: url('https://www.sparkjoy.org/wp-content/themes/gaato/images/background4.jpg') repeat-y;
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	
	font-size: 15px;
	


	}
	

#page_home {

	margin: 0px auto 0px auto; 

	padding: 0px 0px 0 0px;

	width: 936px;

	height:auto;

	background: url('https://www.sparkjoy.org/wp-content/themes/gaato/images/background4.jpg') repeat-y;

	}


#header {

	margin:0px;

	border:0px;

	padding:0px;

	width:936px;

	height:136px;
	
	float:left;

}
#header img { 
	width:100%;
	height:auto;
}
#header .page-title { position:relative; top:-90px; float:left; text-align:left; width:77.5%; margin-left:22.5%; padding:0px;}
#header h3 { color:#fff; float:left; width:77.5%; margin-left:22.5%; text-align:left; position:relative; top:-128px;}

#content {

	float:left;

	border:solid;

	border-width:1px;

	border-color:#000000;

	margin-left:45px;

	margin-bottom:0px;

	margin-top:20px;

	margin-bottom:20px;

	padding:20px;

	width:610px;

	height:auto;

	background-color:#ffcc66;

}

h1.page-title {
	font-family: "caflisch-script-pro";
font-size:36px;
padding:5px 40px;
}

#content_blog {

	float:left;

	border:solid;

	border-width:1px;

	border-color:#000000;

	margin-left:45px;

	margin-bottom:0px;

	margin-top:20px;

	margin-bottom:20px;

	padding:20px;

	max-width:610px;

	width:610px;

	height:auto;

	background-color:#ffcc66;

	}



#content_home {

	background-color:#fff6d7;
	border:1px solid #000000;
	float:right;
	height:auto;
	 margin: 21px 80px 30px 39px;
	 padding:20px 50px 0 60px;
	width:500px;
	}

hr {
	margin:30px 0 10px 0;
	
}

#tagline {
	color:#FFFFFF;
	margin: 0px auto 0px;
	/*margin: 20px auto -40px;*/
	text-align:center;
	width:300px;
}

#office_photo {

	float:right;

	height:300px;

	width:220px;


}

#lamp_photo {

	float:right;

	height:264px;

	width:300px;

	margin-left:10px;

	margin-top:0px;
	
	margin-right:-30px;

}


	
	

.sidebar {

	float:left;

	border:0px; 

	margin-left:50px;

	margin-top:20px;

	width:155px;

	text-align:center;

}


#menu_page_border {

	width:151px;
	
	/*border:solid;

	border-color:#FFFFFF;

	border-width:1px;*/
	
	background:#ffeab7;

	padding-bottom:18px;

	
	float:left;

}

#menu_link_border {

	width:151px;
	
	/*border:solid;

	border-color:#FFFFFF;

	border-width:1px;*/
	
	background:#ffeab7;

	float:left;

	padding-bottom:18px;

}
	

#blog_posts {

	float:right;

	width:650px;

	height:auto;

}




	
.sidebar ul, .sidebar li {

	

	padding: 0px;
	margin:0px;

	list-style-type: none;

	list-style-image: none;
	
	list-style-position:outside;
	
	}

.sidebar li a { padding:18px 5%; float:left; text-align:center; width:90%;}
.sidebar li a:hover { background:#e3d1a9; text-decoration:none; color:#fff; }



.entry p {

	font-size: 15px;
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

	margin:20px 0 0 0;
	
	color:#302722;

	}

.entry a:link {
	text-decoration:underline;
		
}

.entry a:visited {
	text-decoration:underline;
		
}

.narrowcolumn .entry, .widecolumn .entry {

	line-height: 1.4em;

	}



.widecolumn {

	font-size: 14px;

	line-height: 1.3em;

	}



.narrowcolumn .postmetadata {

	text-align: center;

	}



.alt {

	background-color: #f8f8f8;

	border-top: 1px solid #ddd;

	border-bottom: 1px solid #ddd;

	}

#biography{
	background-color: #fff6d7;
	border: 1px solid #000000;
	float: right;
	height: auto;
	margin: 0px 80px 30px 39px;
	padding: 20px 50px 20px 50px;
	width: 510px;	
	display:flex;
	align-items:center;
	
	text-align:left;
}

#biography .bio-image {
	width:20%;
	padding-left:15px;
}

#biography .bio-text p{
	font-size:13px;
	margin-top: 0px;
}

#biography h1, #biography h2,  #biography h3,  #biography h4 {
	font-family: "caflisch-script-pro";
	margin:0px;
}
#biography h1 {
	font-size:2.5rem;
}
#biography h2 {
	font-size:2rem;	
}
#biography h3 {
	font-size:1.5rem;
}
#biography h4 {
	font-size:1.25rem;
}
#footer {

	background-image:url('images/footer_background.png');

	background-repeat:no-repeat;

	background-position:top;

	width:936px;

	height:75px;

	clear:both;

	margin: 0 auto 0px auto;

}

#tag_line {

	margin-left:16px;

	margin-top:7px;

	border:solid;

	border-width:0px;

	border-color:#000000;

	padding-left:200px;

	clear:left;

	float:left;

	width:675px;

	height:60px;	

}


#footer a {

	color: #AB7A66;

	text-decoration:none;

}

#footer .email a {
	color:#ab7a66;
}



#footer p {

	margin: 0;

	padding: 5px 0px 0 0;

	text-align: center;

	}



small {

	font-family: Arial, Helvetica, Sans-Serif;

	font-size: 0.9em;

	line-height: 1.5em;

	}



h1, h2, h3 {

	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;

	font-weight: bold;

	}



h1 {

	font-size: 1.2em;

	text-align: center;

	}





h2 {

	font-size: 1.2em;
	

	}



h2.pagetitle {

	font-size: 1.2em;

	}







h3 {

	font-size: 1.15em;

	}



h1, h1 a, h1 a:hover, h1 a:visited, {

	text-decoration: none;

	color: #302722;

	}



h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {

	color: #302722;

	}



h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, .sidebar h2, #wp-calendar caption, cite {

	text-decoration: none;

	}



.entry p a:visited {

	color: #b85b5a;

	}



.commentlist li, #commentform input, #commentform textarea {

	font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;

	}



.commentlist li {

	font-weight: bold;

	}



.commentlist li .avatar { 

	float: right;

	border: 1px solid #eee;

	padding: 2px;

	background: #fff;

	}



.commentlist cite, .commentlist cite a {

	font-weight: bold;

	font-style: normal;

	font-size: 1.1em;

	}



.commentlist p {

	font-weight: normal;

	line-height: 1.5em;

	text-transform: none;

	}



#commentform p {

	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;

	}



.commentmetadata {

	font-weight: normal;

	}



.sidebar {

	font: .9em Arial, Helvetica, sans-serif;

	}



small, .sidebar ul ul li, .sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {

	color: #302722;

	}



code {

	font: 1.1em 'Courier New', Courier, Fixed;

	}



acronym, abbr, span.caps

{

	font-size: 0.9em;

	letter-spacing: .07em;

	}



h2 a:hover, h3 a:hover {

	color: #44372F;

	text-decoration: none;

	}




a:link {

	color: #44372F;

	text-decoration: none;

}

a:visited {

	text-decoration: none;

	color: #44372F;

}

a:hover {

	text-decoration: underline;

	color: #796751;

}

a:active {

	text-decoration: none;

	color: #796751;

}	





/* End Typography & Colors */



.style2 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 14px;

	color: #302722;

}

.style3 {

	font-size: 16px;

	font-style: italic;

	color: #ffffff

}

.style8 {font-family: "Trebuchet MS";

	font-size: 16px; 

	color: #302722; 

	font-weight: bold; 

}

.style11 {font-size: 24px}

.style13 {color: #ab7a66}




/* Begin Structure */





.post {

	margin: 0 0 40px;

	text-align: left;

	}



.post hr {

	display: block;

	}



.widecolumn .post {

	margin: 0;

	}



.narrowcolumn .postmetadata {

	padding-top: 5px;

	}



.widecolumn .postmetadata {

	margin: 30px 0;

	}



.widecolumn .smallattachment {

	text-align: center;

	float: left;

	width: 128px;

	margin: 5px 5px 5px 0px;

}



.widecolumn .attachment {

	text-align: center;

	margin: 5px 0px;

}



.postmetadata {

	clear: both;

}



.clear {

	clear: both;

}



/* End Structure */







/*	Begin Headers */

h1 {

	padding-top: 0px;

	margin:10px 0 10px 0;

	}



h2 {
	font-family:georgia;
	margin:5px 0 15px;
	}



h2.pagetitle {

	margin-top: 30px;

	text-align: center;

	margin:20px 0 20px 0;

}



#sidebar h2 {

	margin: 5px 0 0;

	padding: 0;

	}



h3 {

	padding: 0;

	margin:20px 0 15px 0;
	
	font-weight:bold;

	}



h3.comments {

	padding: 0;

	margin: 40px auto 20px ;

	}

/* End Headers */







/* Begin Images */

p img {

	padding: 0;

	max-width: 100%;

	}




img.centered {

	display: block;

	margin-left: auto;

	margin-right: auto;

	}



img.alignright {

	padding: 4px;

	margin: 0 0 2px 7px;

	display: inline;

	}



img.alignleft {

	padding: 4px;

	margin: 0 7px 2px 0;

	display: inline;

	}



.alignright {

	float: right;

	}



.alignleft {

	float: left

	}

/* End Images */







/* Begin Lists



	Special stylized non-IE bullets

	Do not work in Internet Explorer, which merely default to normal bullets. */



html>body .entry ul {

	margin-left: 0px;

	padding: 0 0 0 30px;

	list-style: none;

	list-style-type: disc;

	}



html>body .entry li {

	margin: 7px 0 8px 10px;

	}



.entry ul li:before, .sidebar ul ul li:before {

	

	}



.entry ol {

	padding: 0 0 0 35px;

	margin: 0;

	}



.entry ol li {

	margin: 0;

	padding: 0;

	}



.postmetadata ul, .postmetadata li {

	display: inline;

	list-style-type: none;

	list-style-image: none;

	}




/* End Entry Lists */




.entry form { /* This is mainly for password protected posts, makes them look better. */

	text-align:center;

	}



select {

	width: 130px;

	}



#commentform input {

	width: 170px;

	padding: 2px;

	margin: 5px 5px 1px 0;

	}



#commentform textarea {

	width: 100%;

	padding: 2px;

	}



#commentform #submit {

	margin: 0;

	float: right;

	}

/* End Form Elements */







/* Begin Comments*/

.alt {

	margin: 0;

	padding: 10px;

	}



.commentlist {

	padding: 0;

	text-align: justify;

	}



.commentlist li {

	margin: 15px 0 3px;

	padding: 5px 10px 3px;

	list-style: none;

	}



.commentlist p {

	margin: 10px 5px 10px 0;

	}



#commentform p {

	margin: 5px 0;

	}



.nocomments {

	text-align: center;

	margin: 0;

	padding: 0;

	}



.commentmetadata {

	margin: 0;

	display: block;

	}

/* End Comments */















/* Begin Various Tags & Classes */

acronym, abbr, span.caps {

	cursor: help;

	}



acronym, abbr {

	border-bottom: 1px dashed #999;

	}



blockquote {

	margin: 15px 30px 0 10px;

	padding-left: 20px;

	}



blockquote cite {

	margin: 5px 0 0;

	display: block;

	}



.center {

	text-align: center;

	}



.hidden {

	display: none;

	}



hr {

	display: none;

	color: #036; 

	height:1px;

	}



a img {

	border: none;

	}





/* End Various Tags & Classes*/







/* Captions */

.aligncenter,

div.aligncenter {

	display: block;

	margin-left: auto;

	margin-right: auto;

}



.wp-caption {



	text-align: center;

	padding-top: 4px;

	margin: 10px;

	-moz-border-radius: 3px;

	-khtml-border-radius: 3px;

	-webkit-border-radius: 3px;

	border-radius: 3px;

}



.wp-caption img {

	margin: 0;

	padding: 0;

	border: 0 none;

}



.wp-caption p.wp-caption-text {

	font-size: 11px;

	line-height: 17px;

	padding: 0 4px 5px;

	margin: 0;

}
.post audio {
	margin-top:20px;	
}
#nav-toggle{
	display:none;
}
/* End captions */
.mobile {display:none;}
/* Responsive Styling Start */
@media only screen and (max-width: 800px) {
	/* insert styles here */
	#page { width:100%; float:left; margin:0px; background: url('https://www.sparkjoy.org/wp-content/themes/gaato/images/background5.jpg') repeat-y;
}
	#content_home{ width:85%; float:left; margin:15px 5%; padding:0px 2.5%;}
	#biography { width:85%; float:left; margin:15px 5%; padding:20px 2.5%;}
	.sidebar  { width:95%; float:left; margin:15px 2.5%; padding:0px 0%;}
	#header, #footer, #tag_line { float:left; width:100%;}
	#tag_line { padding:0px; margin:0px;}

	#menu_page_border, #menu_link_border { width:96%; float:left; padding:0px 0% 0px 0%; margin-left:2%;}
	#menu_page_border ul#menu-main-nav {
		display:flex;align-items:center;justify-content:center;
	}
	.sidebar #menu_link_border li { float:left; width:33.33%;}
	.sidebar #menu_page_border li { float:left; width: 14.28%;}
	.sidebar { margin-top: 0px;}
	#menu-main-nav { margin:0px;}
	.style13{ padding-top:8px;}
	#menu_page_border ul#menu-main-nav li{
		border-left:1px solid #800000;
		border-bottom:0px;
	}
	#menu_page_border ul#menu-main-nav li:first-child{
		border-left:0px;
	}
	#menu_page_border, #menu_link_border { border:1px solid #800000;}
}
@media only screen and (max-width:767px){
	.sidebar li a { font-size:18px; }
	#menu_page_border ul#menu-main-nav {
		flex-wrap:wrap;
	}
	#menu_page_border ul#menu-main-nav li{
		border-bottom:1px solid #800000;
		border-left:0;
		float:left; 
		width:100%;
	}
	#menu_page_border ul#menu-main-nav li:first-child{
		border-top:1px solid #800000;
	}
	#menu_page_border {display:none;}
	#menu_page_border.active{display:flex; align-items:center; flex-wrap:wrap; position:fixed; width:100vw; height:100vh;top:0;left:0; margin:0;}
	#nav-toggle{
		display:flex;
		position:fixed;
		bottom:20px;
		right:20px;
		align-items:center;
		flex-wrap:wrap;
		border:2px solid #800000;
		background:rgba(255,255,255,.3);
		width:50px;
		height:50px;
		border-radius:50%;
		cursor:pointer;
		box-shadow: 0 0.125em 0.5em -0.125em rgba(51, 51, 51, 0.75);
		z-index:10;
	}
	#nav-toggle span{
		width:75%;
		height:4px;
		position:relative;
		left:12.5%;
		background:#800000;
		transition:all ease-in-out 0.3s;
	}
	#nav-toggle::before,#nav-toggle::after{
		content: '';
		width:75%;
		height:4px;
		background:#800000;
		position:relative;
		left:12.5%;
		transition:all ease-in-out 0.3s;
	}
	#nav-toggle::before{
		top:5px;
	}
	#nav-toggle::after{
		bottom:5px;
	}
	#nav-toggle.active span{
		transform:rotate(135deg);
	}
	#nav-toggle.active::before{
		transform:rotate(-135deg);
		top:16px;
	}
	#nav-toggle.active::after{
		transform:rotate(135deg);
		opacity:0;
	}
}
@media only screen and (max-width: 650px) {
	#header .page-title{ top:-80px;}
	#header h3 { top:-117px;}
}
@media only screen and (max-width: 500px) {
	#biography{
		flex-wrap:wrap;
	}
	#biography .bio-text, #biography .bio-image{
		width:100%;
	}
	#biography .bio-image {
		text-align:center;
	}
/* insert styles here */

	#office_photo { width:100%;}
	#header .page-title { top:-93px; margin-left:38%; width:62%; }
	#header h3 { top:-133px; font-size:15px; margin-left:41%; width:59%;}
	.mobile {display:block;}
	.style13 { height:31px; overflow:hidden;}
	.desktop {display:none;}
	
	#lamp_photo img {max-width:100%; height:auto;}
	#lamp_photo {margin:0px; max-width:100%;}
}
@media only screen and (max-width: 400x) {
	#header .page-title { margin-left:35%; top:-87px; }
}
@media only screen and (min-width: 992px) {
/* insert styles here */
}

@media only screen and (min-width: 1382px) {
/* insert styles here */
}