@charset "utf-8";
/* CSS Document */

.webmaster
{
	font-family:Tahoma, Geneva, sans-serif;
	font-size: 0.75em;
	text-align:center;	
}

.webmaster a
{
	color: #000000;	
}

body {
    margin:0;
	font-size: 100%;
}


#header
{
	width: 100%;
	height: 350px;
	overflow:hidden;
	background-image:url(../images/purple-tulips3.jpg);
	background-repeat: none;
	
}

#header img
{
	max-width: 100%;
    height: auto;	
}

#ettaPortrait
{
	width: 200px;
	height:256px;
	position:absolute;
	top: 35px;
	right: 100px;	
}

.EttaKaner
{
	font-family: 'Arimo', sans-serif;
	font-weight: bold;
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */
	font-size: 3.8em;
	position:absolute;
	/* text-shadow: 3px 3px #000000; */
	-ms-text-shadow: 3px 3px #000;
	-webkit-text-shadow: 3px 3px #000;
	text-shadow: 3px 3px rgb(0,0,0, 0.4);
	z-index: 200;
	top: 10%;
	left: 3%;
	/* font-family: 'Baloo Tammudu', cursive; */
	/* font-family: 'Lilita One', cursive; */
	
	-ms-text-stroke: 1px #EEE;
	-webkit-text-stroke: 1px #EEE;
	text-stroke: 1px #EEE;
}

.EttaKaner a
{
	text-decoration: none;
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */	
}

.EttaKaner a:visited
{
	color:#881bad;	
}

.EttaHeader
{
	font-family: 'Baloo Tammudu', cursive;
	/* font-family: 'Lilita One', cursive; */
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */
	font-size: 3em;
	margin:0;
	line-height:100%;
	
}

.EttaHeaderWhite
{
	font-family: 'Baloo Tammudu', cursive;
	color:#FFFFFF;
	font-size: 3em;
	margin:0;
	line-height:100%;
	
}

.purple
{
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */
}

.black
{
	color:#000000;	
}

#menuBackground {
    background-color:#881bad;
	background-color:rgb(136, 27, 173, 0.8); /* Purple */
    width:100%;
    height:auto;
    text-align: center;
	z-index:300;
	margin-top: -72px;
	

	
}
#menuContainer {
    text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    padding:0;
	
	
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    vertical-align: middle;
    margin-right:1px;	
}

/*Style for menu links*/
li a {
    display:block;
    min-width:155px;
    height:auto;
    text-align:center;
    line-height:1.75;
    font-family: 'Oswald', sans-serif;
    color:#fff;
 /*   background-color:rgb(136, 27, 173, 1); /* Purple ----put back in*/
    text-decoration:none;
    font-size: 1.3em;
	padding: 10px 0;
    
}

/*Hover state for top level links*/
li:hover a {
	background-color:rgb(45, 24, 81); /*DARK PURPLE */
}

/*Style for dropdown links*/
li:hover ul a {
    background:#f3f3f3; /* Light Grey */
    color:#2f3036; /* Dark Grey */
    height:40px;
    line-height:40px
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
  	background-color:#2d1851;
	background-color:rgb(45, 24, 81); /*Dark Purple*/
    color:#fff;
}

/*Hide dropdown links until they are needed*/
li ul {
    position: absolute;
    display:none;
	z-index:9999;
}

/*Make dropdown links vertical*/
li ul li {
    display:block;
}

/*Prevent text wrapping*/
li ul li a {
    width:auto;
    min-width:150px;
    padding:0 20px;
	text-align:left;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden,.hidden:hover {
    display:block
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: 'Oswald', sans-serif;
	font-size: 1.5em;
    text-decoration:none;
    color:#fff;
	background:#609; /* Purple */
    text-align:center;
    padding:16px 0;
    display:none;
	line-height:160%;
    width:100%!important
}

 
 input[type=checkbox]
 {
	 display:none;
 }
 
 /*Show menu when invisible checkbox is checked*/
 input[type=checkbox]:checked ~ #menu {
	 
	display:block;
	margin: 0 auto;
 }
 
 #slider
 {
	width: 100%;
	height: 380px;
	background-color:#6633CC;
	display:block; 
 }
 
 #story
 {
	padding: 5% 5%;
	margin: 0 10% 0 0;
	width: 75%;
	 
 }
 
 
 #story p
 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	text-align: left; 
 }
 
 #story a
 {
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */ 
 }
 
 #story a:hover
 {
	color:#2d1851;
	color:rgb(45, 24, 81); 
 }
 
 #story2
 {
	padding: 5% 5%;
	width: 100%;
	background-image: url(../images/test2.png);
	background-repeat: repeat-y;
	
	background-position:right top;
}
 
#story2 p
 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;
	text-align: left; 
	width: 70%;
 }
 
 #story2 a
 {
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */ 
 }
 
 #story2 a:hover
 {
	color:#2d1851;
	color:rgb(45, 24, 81); 
 } 
 
 
 
 
 #bookCovers
 {
	width: 100%;
	padding: 5% 5%;
	margin: 0 10% 0 0; 
 }
 
 #bookCovers img
 {
	float:left;
	padding: 2px 5px; 
 }
 
 #bookCovers p
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.25em;
	
}

#bookCovers h3
{
	font-size: 1.75em;
	color: #5B097B;
	line-height:80%;
	margin-bottom: -10px;
	
}

#bookCovers img
{
	max-width: 100%;
    height: auto;
	padding: 1% 3% 3% 0;		
}

.didYouKnow
{
	font-style:italic;	
}

#leftSide
{
	width: 47%;
	float:left;	
}

#rightSide
{
	width:50%;
	float:right;	
}

#leftSide2
{
	width: 38%;
	float:left;	
}

#rightSide2
{
	width:58%;
	float:right;	
}
 
 * {
    box-sizing: border-box;
	}
	
 .row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.column img
	{
    margin-top: 8px;
    vertical-align: middle;
	}
	
.column2 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;
}

.column2 img
	{
    margin-top: 8px;
    vertical-align: middle;
	}

.column3 {
    -ms-flex: 20%; /* IE10 */
    flex: 20%;
    max-width: 20%;
    padding: 0 4px;
}

.column3 img
	{
    margin-top: 8px;
    vertical-align: middle;
	}


.multiBookBlurb
{
	width: 90%; padding: 0 10px; color:#069; font-family: Arial, Helvetica, sans-serif;	
}
 
 #footer
 {
	width:100%;
	background-color:#881bad;
	background-color:rgb(136, 27, 173, 1); /* Purple */
	clear:both;
	height: 24px;
 }
 
  
 
 #footer p
 {
	font-family: 'Baloo Tammudu', cursive;
	color: #FFFFFF;
	font-size: 1em;
	text-align:center;
 }
 
 #purpleFlowers
 {
		right: 0;
		background-image:url(../images/test.png);
		background-repeat:no-repeat;
		width:400px;
		float:right; 
		height: 1100px;
		
 }
 
 
 .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.video2 iframe {
	position: relative;
	top: 0;
	left: 0;
	max-width: 100%;
	height: auto;
}

figure { display: block; margin: 2em auto; }

#videoWrap3
{
	width: 70%;
	margin: 0 auto 0 0;	
}

#formBox

{
	background-color:#f0d7f2;
	background-color:rgba(151, 52, 52, .2);
	font-family: Arial, Helvetica, sans-serif;
	padding: 15px 0;
	
}

input[type=text] {
    width: 60%;
    padding: 12px 10px;
    margin: 8px 0;
    box-sizing: border-box;
}

textarea
{
	width: 60%;
    padding: 12px 10px;
    margin: 8px 0;
    box-sizing: border-box;
}

#formBox p, h2
{
	margin-left: 30px;
	
}

.smallRed
{
	font-size:14px;
	text-align:left;
	color:#900;	
}

.red
{
	color:#900;	
}

 
 .purpleHeaders
 {
	font-family: 'Baloo Tammudu', cursive;
	color:#881bad;
	color:rgb(136, 27, 173, 1); /* Purple */ 
	font-size: 2.2em;
	margin-bottom: 6px;
	line-height:100%; 
	background-color: #eee;
	padding: 15px 10px 6px 20px;
	margin:2px 0 0 0;
	
 }
 
 .reviewBlurb
 {
		padding-left:20px; 
 }
 
 .accordion {
    background-color: #eee;
    cursor: pointer;
    padding: 15px 10px 6px 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	font-family: 'Baloo Tammudu', cursive;
	color:#881bad;
	font-size: 2.2em;
	margin-bottom: 6px;
	line-height:100%;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}


/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
		
}
 
 
 .button {
    background-color:#639;
    border: none;
    color: white;
    padding: 8px 24px;
    text-align: center;
    text-decoration: none;
	letter-spacing:1px;
    display: inline-block;
    font-size: 20px;
	font-family: 'Baloo Tammudu', cursive;
	border-radius: 10px;
	 -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.2s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
	box-shadow: 0 8px 12px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

#workshop
{
	position:relative;
	width: 30%;
	background-color:#881bad;
	padding: 5px 10px;	
}

#workshop a
{
	color: #FFFFFF;
	text-decoration:none;
	font-family: 'Oswald', sans-serif;
	font-size: 1.2em;
	
}

.workshopFriendly
{
	color:#F00;
	font-size: 3.4em;
	line-height: 40%;
	
}

.workshopFriendly a
{
	color:#F00;
	text-decoration:none;
	
}

.workshopFriendly
{
	color:#639;	
}
#bookVendors
{
	width: 100%;
	height: 145px;      /* equals max image height */
	margin-top: -30px;
    
	
}

#bookVendors img
{
	vertical-align: middle;
	max-height: 145px;
}

.awardLogo
{
	width: 110px;
	float:left;
	box-sizing:border-box;
	clear:left;
}

.awardText
{
	width: 70%;
	float:left;
	box-sizing:border-box;
	padding-bottom:1em;
	font-size: 0.8em; !important
}

button.readMore {
	background:none;
	width: auto;
    color:#039;
    cursor: pointer;
    padding-bottom: 15px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1em;
    transition: 0.4s;
	
}

button.readMore.active, button.readMore:hover {
    /* background-color:rgba(255, 255, 255,0.85); */
	background:none;
}

button.readMore:after {
    content: 'more \002B';
    color:#039;
   
    float: right;
    margin-left: 5px;
	
}

button.readMore.active:after {
    content: "less \2212";
	
}

div.panel2 {
    display: none;
    background:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight:500;
	
}


.wordCatchersSmall
{
	display:none;
}


.summer-banner
{
	font-family: 'Oswald', sans-serif;
	font-size: 1.5em;
	color: #FC0;
	background-color:#501E86;
	display:block;
	padding: 0.25em;
	text-align:center;
	line-height: 125%;	
}

 /* ===================================================================*/
 
 /*Responsive Styles*/
/* @media screen and (max-width : 860px) { */
@media screen and (max-width : 950px) {
	#story
	{
		width: 95%;
		margin-top: 30px;
		padding: 10px 5px;	
	}
	
	#story p
	{
		font-size: 100%;
	}
	
	#story2
	{
		background-image:none;	
	}
	#story2 p
	{
		width: 90%;
		
	}
	
	#ettaPortrait
	{
		display:none;
	}
	
	.EttaKaner
	{
		font-size: 2.75em;
		line-height:100%;
	}

	#purpleFlowers
	{
		display:none;	
	}
	
	.EttaHeader
	{
		font-size:2em;
		line-height:100%;	
	}
	
	
	
	#menuContainer li a
	{
		border: 1px solid #FFFFFF;
	}
	
	

 	.column
	{
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
	
	.column3
	{
	  -ms-flex: 33%; /* IE10 */
	  flex: 33%;
	  max-width: 33%;
	  
	}
	
	input[type=text] {
    width: 400px;
    padding: 6px 5px;
    margin: 8px 0;
    box-sizing: border-box;
}

	#bookCovers img
	{
		margin-right: 20%;	
	}
	
	#rightSide p
{
	font-size: 0.9em;
}

	.accordion { font-size: 1.75em;}
	.purpleHeaders {font-size: 1.75em; padding-left:9px;}

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column
   {
  	  -ms-flex: 100%;
	  flex: 100%;
	  max-width: 100%;
  }
  
  .column2 {
    -ms-flex: 100%; /* IE10 */
    flex: 100%;
    max-width: 100%;
}
  
  .accordion { font-size: 1.5em;}
  .purpleHeaders {font-size: 1.5em; padding-left:11px;}
}


.wordCatchersLarge
{
	display:none;
}

.wordCatchersSmall
{
	display:block;	
}






@media screen and (min-width: 599px) and (max-width: 3000px) {
  #mobile { display: none; }   /* hide it */
  #leftSide: {display:block;}
  #rightSide: {display:block;}
  #leftSide2: {display:block;}
  #rightSide2: {display:block;}
  
  #workshop {width: 60%;}
}



@media screen and (max-width : 598px) { /* FOR VERY SMALL SCREENS */
	#menuContainer li a
	{
		border: none;
	}	
	
	input[type=text] {
    width: 80%;
    padding: 6px 5px;
    margin: 8px 0;
    box-sizing: border-box;
}

	textarea {
	width:80%;
	padding: 6px 5px;
    margin: 8px 0;
    box-sizing: border-box;
}

	#mobile {
		display:block;
	}
	
	#mobile p {
		font-size: 0.9em;
	}
	
	#leftSide {
		display:none;
	}
	
	#rightSide {
		display:none;
	}
	
	#leftSide2 {
		display:none;
	}
	
	#rightSide2 {
		display:none;
	}
	
	.column3 {
    -ms-flex: 100%; /* IE10 */
    flex: 100%;
    max-width: 100%;
    padding: 0 4px;
}
	/* ********************************************* /*	
	
	 /*Make dropdown links appear inline*/
   		ul {
        position:static;
        display:none;
        white-space: initial;
    }
    
    /*Create vertical spacing*/
   		li {
        margin-bottom:1px;
		border-bottom: 1px dotted #666666;
    }
    
    /*Make all menu links full width*/
    /* ul li,li a {
        width:100%;
    }
	*/
	
   		ul li
	{
		width: 100%;
	}
	
   		ul ul
	{
		width: 80%;
		margin: 0 10%;	
	}
    
    /*Display 'show menu' link*/
    .show-menu {
        display:block
    }
	
	
	
	/* ********************************************* */
	
	#workshop {width: 80%;}
	
	#bookCovers
	{
		font-size: 0.9em;	
	}
	
	.clear
	{
		clear:left;	
	}
	
	.purple .clear
	{
		clear:left;	
	}
}