/* RESET

------------------------------------------------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; border: 0; outline: 0; }

html, body	{ height:100%; vertical-align: baseline; }

a img,:link img,:visited img { border:none }

:focus { outline: 0; }

a { outline: none; text-decoration:none; border: none; }

table { border-collapse: collapse; border-spacing: 0; }

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

*, *:before, *:after {  -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }



/* PALETTE  #cee5ed  #7db1ad  #616a6d

------------------------------------------------------------------------------------

aae6dd for paler blue for about page

9ad1c9; for darker mainheader Containers

92c7bf for darker headers (was 7db1ad originally for all this)

*/

/*body { background: #92c7bf;color: #555; background-image: url('images/design/transp/white80pc.png');} */

body	{background: #EEFAF8; color: #555;} /* very pale version of blue-green color */

h1.siteName, a { color: #555; }

.mainContent a,

.page-short-writings div.column2 a {color:#000; border-bottom: 1px dotted #999;}

#credit a	{ color: #ccc; }

a:hover, .accent1	{ color: #000; } 

section.mainContent a:hover	{}

.accent2	{color: #616a6d;}	/* 616a6d 666-ish grey */

.accent3	{color: #92c7bf; }	/* HEADER dark green-blue */

h3	{color: #333;}









/* HTML / FONTS

------------------------------------------------------------------------------------*/

body {

	font-family: 'Times New Roman', 'Open Sans', Arial, Verdana, Helvetica, "Lucida Grande", Tahoma, sans-serif;   

    font-size: 100%; font-weight: 400;

}



h1 {

    font-family: 'Playfair Display', serif;

    font-family: 'EB Garamond', serif;

    font-family: 'Open Sans', Arial, Verdana, Helvetica, "Lucida Grande", Tahoma, sans-serif;  

    font-variant: small-caps;

    font-size: 2em;

    font-weight: normal;

}



h2	{

    font-weight: normal;

    font-size: 3em;

    color: #fff;

    margin: -8px 0 20px 0;

    text-transform: lowercase;

    text-align: right;

    opacity: 0.5;

}



@media only screen and (min-device-width: 600px)	{

    h2	{font-size: 5em;margin: -14px 0 20px 0;}

}





h3	{

    font-size: 1.2em;

    font-weight: normal;

    margin-bottom: 0px;

    /*text-transform: uppercase;*/

}

h3.interviews	{
 font-size: 2em;
 margin-bottom: 20px;
 color: #92c7bf;
}

h3.single	{

    font-size: 1.5em;

    color: #444;

    text-transform: none;

}



h4	{

    font-size: 1.1em; 

    font-weight: normal;

    text-transform: uppercase;

}



p.readMore	{

 	text-align: left;

    font-style: italic;

    padding: 10px 0 0 0;

}



p.readMore a	{

 	border-bottom: 0px;   

}



.page-default p.readMore	{

    margin-bottom: 30px;

}



p.readMore.left	{

 	text-align: left;

}



a.readMore	{

	border: 1px solid #ccc;

    padding: 3px 4px;

    background-color: #EFEFEF; 

}



a.readMore:hover	{

 	color: #000; 

    text-shadow: 1px 1px #ccc;

    border: 1px solid #ccc;

}

section.mainContent a.button	{
	background: #92c7bf;
	color: white;
	padding: 10px 16px;
	border-bottom: 0px;
	border-radius: 6px;
}

section.mainContent a.button:hover	{
	color: black;
}

p::-moz-selection { color: white; background: #888;}

p::selection { color: white; background: #888; }



/* MISCELLANEOUS LAYOUT

------------------------------------------------------------------------------------*/

.container, iframe { max-width: 100%;}



.clearFloat::before, .clearFloat::after {

    display:table;

    content:"";

}



.clearFloat::after	{

	clear:both;

}



div.amazonLink	{

 	width: 100px;

    margin-top: 20px;

    text-align:center;

    font-size: 1em;

    font-style: italic;

    border: 2px solid #92c7bf;

    border: 2px solid #d8e6e4;

    border-radius: 6px;

}



div.amazonLink:hover	{background-color: #000; border: 2px solid #febc76;}



div.amazonLink a	{color: #7db1ad;border-bottom:0px;}

div.amazonLink a:hover	{background-color: #000;color: #fff;}







/* UBER CONTAINER, COLUMNS & FOOTER CONTAINER with .push for sticky footer if need.

------------------------------------------------------------------------------------*/

#red	{

 	position: absolute;

    left:0;

    top: 80%;

    width: 2px;

    height: 40px;

    background-color: red;

    z-index: 999;

}



section	{

 	padding-bottom: 20px;

    border-bottom: 1px solid #ccc;

    margin-bottom: 30px;   

}

.events section	{
	margin-bottom: 0px;  
}



.page-default section	{

    padding-bottom: 0px;

    border-bottom: 0px solid #ccc;

    margin-bottom: 0px;  

}



section.mainContentHeader	{

    border-bottom: 0px solid #eee;

}



#uberContainer	{

    overflow: hidden;

    position: relative;

    width: 100%;

    min-width: 320px;

    min-height: calc(100% - 0px);

	height: auto !important;

	/*height: 100%;*/

	margin: 0 auto; /* for sticky footer, bottom margin must be exact same (neg) as height of footer */

    /* padding-bottom: 20px; */

}



@media only screen and (min-width: 600px)	{

 	#uberContainer	{top: 0px; margin: 0 auto;}

}



.innerContainer	{  
    width: 92vw;
    max-width: 1100px;    
	margin:auto;
}



@media only screen and (min-device-width: 960px)	{

    .innerContainer	{/*display: table;*/ min-width: 950px; }

}



#footerContainer, .push	{

    width: 100%;

    height: 60px; /* this must match (negatively) bottom margin in uberContainer for sticky footer */

    bottom: 0px; 

   background-color: #eefaf8;

}



#footerContainer {

 	/* margin-top: -50px; */ 

    padding-top: 16px;

    padding-bottom: 16px;

}



.home #mainContentContainer section.mainContent{

	margin-bottom: 0px;

}

#mainContentContainer section.mainContent:nth-last-child(1), #mainContentContainer .mainContent:nth-last-child(1) {

  margin-bottom: 0px;

  overflow: hidden;

} 

#mainContentContainer section.mainContent.hundred_years .innerContainer, #mainContentContainer .mainContent.hundred_years .innerContainer {

  overflow: visible;

} 




/*#footerContainer	{

 	background-color: #ddd;

    background-image: url('http://www.janemushabac.com/images/design/transp/white60pc.png');

    border-top: 1px solid #eee;   

}*/







/* MAIN HEADER CONTAINER

------------------------------------------------------------------------------------*/   



#mainHeaderContainer	{

	display: block;

    position: fixed;

    width: 100%;

	height: auto;

	background-image: url('images/design/transp/white80pc.png');

}



#mainHeaderContainer	{

	background-image: none;

    background-color: #92c7bf;

}



@media only screen and (min-device-width : 900px) { 

    #mainHeaderContainer	{height: 50px;}

}



#mainHeaderContainer .innerContainer	{

 	min-height: 50px;

	width: 100%;

}



@media only screen and (min-width : 600px) { 

    #mainHeaderContainer	{position: relative;}

	#mainHeaderContainer .innerContainer	{width: 96%;}

}



/* MAIN HEADER

------------------------------------------------------------------------------------*/   



#mainHeaderContainer .innerContainer #mainHeader	{

    width: auto;

    margin-left: 2%;

}



@media only screen and (min-width : 600px) { 

 #mainHeaderContainer .innerContainer #mainHeader	{ margin-left: 0; width: 250px; float: left; }   

}     


/* MAIN NAVIGATION

------------------------------------------------------------------------------------*/

ul#mainNavigation {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: auto;
    height: auto;
	display: block;
    background-color: transparent;
    left: 0;
    z-index: 1000;
    position: relative;
    text-align: center;
    
}

ul#mainNavigation li a {
    display: inline-block;
    border: 0px;
    padding: 11px;
    margin: 0px;
    color: #666;
    text-transform: uppercase;
    /*padding: 12px 20px;*/
    text-align: center; 
}

a#menu {
    display: none; 
    margin: 0px auto;
    cursor: pointer;
    padding: 0 16px 0;
    font-size: 2.4em;
    height: 48px;
    color: black;
    background-color: transparent; 
    position: fixed; 
    top: 0; right: 0;
    z-index: 1001;
}


/* Responsive Adjustments for WIDE SCREENS*/
@media (min-width: 1051px) {
    ul#mainNavigation {
        background-color: transparent; 
        display: block;
        height: 20px;
        margin: 6px 0 0;
        float: right;
    }

    #mainNavigation li {
        display: inline-block;
        font-size: 1em;
    }
}

/* Responsive Adjustments for NARROW SCREENS*/
@media (max-width: 1050px) {
    a#menu {
        display: block;
    }
    ul#mainNavigation {
    	display: none;
    	width: 100%;
    	position: fixed;  /* Changed from relative to fixed for consistency in dropdown behavior */ 
    	z-index: 999999; 
    }
    
    ul#mainNavigation.showMenu {
        display: block !important;
        top: 50px;

        
    }
    ul#mainNavigation li {
        display: block; 
        width: 100%; 
        margin-left: 0;
        background-color: white !important;
        text-align: center !important;
        padding: 20px 0 !important;
        z-index: 9999;
		border-bottom:1px solid #92c7bf;
    }    
}



/* SECTION HEADER

------------------------------------------------------------------------------------*/



body.level-1 #mainContent h2,

body.article-list  #mainContent h2,

body.level-3 #mainContent h2,

#mainHeaderContainer p.section-header {}



body.level-1 #mainContent h2,

body.article-list  #mainContent h2,

body.level-3 #mainContent h2	{}



#mainHeaderContainer p.section-header {}



#mainHeaderContainer p.section-header a {}





/* MAIN CONTENT

------------------------------------------------------------------------------------*/

#mainContentContainer {

    width:100%;   

    margin-top: 50px;


}



@media only screen and (min-width : 600px) {                

    #mainContentContainer{ margin-top: 0px; }

}



div.columns	{max-width: 900px;margin:auto;}

div.column	{}



div.column1,

div.column2,

div.column3 {

 	/*float: left;*/

    max-width: 100%;

    /*background-image: url('http://www.janemushabac.com/images/design/transp/white50pc.png'); */

}



@media only screen and (min-width: 900px)	{

    div.column {max-width: 300px; border-radius: 6px;}

    div.column1, div.column2	{}

    div.column2	{max-width: 800px;margin: auto;}

	.events div.column2 {

		margin: initial;

	}

}



.column2 .textBlock {

 	display:table-cell;

}



#mainContent {

    margin-bottom: 50px;

}



.mainContent p	{

	line-height: 20px; 

}




span.openingLine	{

 	font-size: 1.5em;  

}



div.testimonial	{

    color: #666;

}



span.testimonial	{

    font-size: 1em;

    /*font-style: italic;*/



}





/*

@media only screen and (min-width : 481px) {

    #mainContent .image img { padding: 5px; border: 1px solid #DDD; }   

    #mainContent .article .image img { padding: 4px; border: 1px solid #DDD; }

}

*/



div.pdf	{

    margin-bottom: 20px;    

}



div.pdf	a {

 	font-size: 13px;  

}





/* FOOTER 

------------------------------------------------------------------------------------*/



#footer	{ 

    /*display: table;*/

    width: auto;

    margin: auto;

    /*padding-bottom: 24px;*/

    font-size: .9em; 

}



@media only screen and (min-width: 540px)	{

    #footer	{  font-size: .8em;}

}



/* FOOTER CONTACT INFO

------------------------------------------------------------------------------------*/



#contactInfo	{

 	width: 100%;

    display: block;

    margin-bottom: 20px; 

    text-align: center;

}



@media only screen and (min-width: 500px)	{

    #contactInfo	{width: 48%; float: left; margin: 0 1%;text-align: right;}

}



@media only screen and (min-width: 900px)	{

    #contactInfo	{width: 30%;}

}



#footer ul	{padding: 0;}



#footer ul.contact li	{

    list-style: none;

    width: 85%;

}



@media only screen and (min-width: 600px)	{ 

	#footer ul.contact li	{display: none; width: 100%; height: 20px; text-align:right;}

}



/*@media only screen and (min-width : 600px) { 

    #footer ul.contact	{ min-width: 590px; }    

	#footer ul.contact li	{ list-style: none; display: inline-block; float: left; width: 32%; height: 20px; text-align:center;}

	#footer ul.contact li.item1	{text-align: right; padding-right: 0;}

	#footer ul.contact li.item3	{text-align: left; padding-left: 0;}

}*/



/* CREDIT

------------------------------------------------------------------------------------*/



#credit	{

    display: inline-block;

    width: 100%;

    margin-top: 0px;

    font-size: .9em;



}



p.credit {

     text-align: center;

    color: #ccc;

}



p.credit a:hover {

 	color: #999 !important;   

}







/* IMAGES

------------------------------------------------------------------------------------*/

img	{

 	max-width: 100%;

    height: auto;

    width: auto9; /* ie8 */

}



div.images,

div.image {

	max-width: 100%;

    min-height: 100px;

} 



div.image.left {

   	float: left;

    margin-right: 10px;

    margin-bottom: 10px;

}



div.image.right {

    float: right;

    margin-left: 10px;

   margin-bottom: 10px;

}



div.image.center {

    margin-bottom: 20px;

    width: 100%;

}



div.caption	{

 	font-size: .8em;

    color: #444;

    font-weight: 300;

}



a.magnify-image {

    cursor:url('http://www.janemushabac.com/images/design/magnify.png'), pointer; /* a.magnify-image turns browser cursor into magnifying glass */

}



div.pdf a	{

 	border-bottom: 0px;   

}



/* COMMENTS & CONTACT FORM

------------------------------------------------------------------------------------*/



.comments_error {

	color: #000;

	background-color: #fff4f4;

}



ul.comments_error {

	padding : 0.3em;

	list-style-type: circle;

	list-style-position: inside;

	border: 2px solid #fdd;

}



div#cpreview {

	color: #000;

	background-color: #f1f1f1;

	border: 2px solid #ddd;

}



form#txpCommentInputForm td {

	vertical-align: top;

}



#comments-help {

	margin: 2px 0 15px 0;

	font-size: 0.7em;

}



div.comments-wrapper table	{

 	width: 100%;

    max-width: 400px;   

}



.error div {

	color: red;    

}



p.success {

    width: 300px;

    padding: 4px 2px 4px 4px;

    border: 1px solid #ccc;

}



#txpCommentInputForm input,

#txpCommentInputForm textarea {

    width: 100%;

    max-width: 300px;

    height: 30px;

    border: 1px solid #aaa;

    margin-bottom: 10px;

    	font-size: 1.1em;

    border-radius: 6px;

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

    color: #555;

}

#txpCommentInputForm input	{

	font-size: 1em;

    border-radius: 6px;

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

    color: #555;

}



#txpCommentInputForm textarea {

    height: 120px;  

}



td.submit	{

	padding-right: 0;

    padding-top: 20px;

}



#txpCommentInputForm input.button {

    width: 100px;

}



/* ERROR PAGE

------------------------------------------------------------------------------------*/



.error-status {

	font: 1.3em Georgia, Times, serif;

}



/* EDIT LINK

------------------------------------------------------------------------------------*/



div.edit	{

    display: inline;    

    background-color: yellow;

}



div.container 	{border: 0px dotted red;}

div.container > div {border: 0px dotted green;}





/* BREAKPOINTS

------------------------------------------------------------------------------------*/



#breakpoints:before	{

   	display: none; /* --------------------------- (   ) ---------------------------*/

    position:absolute;

    left: 1px;

    top: 52px;

    color: black;

    font-size: 10px;

    content: "screen-width < 480px";

}



@media only screen and (min-width: 480px) { #breakpoints:before	{content: "screen-width ≥ 480px";} }

@media only screen and (min-width: 600px) { #breakpoints:before	{content: "screen-width ≥ 600px";} }

@media only screen and (min-width: 900px) { #breakpoints:before	{content: "screen-width ≥ 900px";} }

@media only screen and (min-width: 950px) { #breakpoints:before	{content: "screen-width ≥ 950px";} }

@media only screen and (min-width: 1100px) { #breakpoints:before	{content: "screen-width ≥ 1100px";} }



body,

#footerContainer {

 	background-color: #ffffff;

}



.home #mainHeaderContainer	{

    background: #e9f4f2;

}



#mainContent a	{ color: #346a62;  }

#mainContent a:hover	{ color: #000;  }





/*section	{

 	border-bottom: 0px;   

}*/



div.images	{

 	display: relative;

    margin-top: 8%;

    width: 500px; 

    max-width: 100%;

    height: 500px;

    border: 0px solid grey;

    float: left; 

    margin-right:30px;

    z-index:1;

}



#img1	{position: relative;margin-top:2px;z-index:1;}

#img1 img	{z-index:1;}

#img2{display: none;}

#img3{display:none;}



@media only screen and (min-device-width:600px)	{

    #img1	{

    position:absolute;

    margin-top: 2px;

    z-index:3;

}



#img2	{

    position:absolute;

    display:block;

    margin-top: 1px;

    z-index:2;

    -moz-transform: rotate(-8deg);

    -webkit-transform: rotate(-8deg);

    -o-transform: rotate(-8deg);

    transform: rotate(-8deg);

}



#img3	{

    position:absolute;

    display:block;

    margin-top: 0;

    -moz-transform: rotate(8deg);

    -webkit-transform: rotate(8deg);

    -o-transform: rotate(8deg);

    transform: rotate(8deg);

    z-index:1;

}

}



div.rightTexts	{

    margin-top: 8%;

    float: left;

    width:400px;

    max-width:100%;

    border: 0px solid grey;

    font-size: 1.1em;

    

}



@media only screen and (min-device-width: 1024px)	{

    div.rightTexts	{ margin-left: 20px;}

}
@media (max-width: 768px) {
	div.images	{width: 100%;margin: 50px auto 20px; text-align: center;float: none;}
	
}


@media only screen and (max-device-width: 600px)	{

	div.images	{height: 300px;}

    #img1 {position:relative; width: 50%;height:300px;z-index:1;}

    ul#mainNavigation.links.dropdown li {text-align:right;font-size: 10px;border: 0px;}

}



#mainContent h1	{

 	color: red;   

}



.about div.mainContent	{

 	margin-top: 4%;   

}



.about div.image.left {

    margin-bottom: 2px;

}



.about .mainContent p	{

 	margin-left: 250px;

    max-width: 68ex;

}



.about h3.files	{

 	font-size: 1.1em;

    color: black;

    font-weight: normal;

    margin-bottom: 16px;

}



/*section	{

 border-bottom: 0px;   

}*/



body	{

	background: #92c7bf;

    background: #fff;

}







section.mainContentHeader	{

    background: #fff; 

    margin-bottom: 0;

    border-bottom: 1px solid #eee;

}

        

#mainHeaderContainer	{

	background-image: none;

	/* background-color: #7db1ad;

	background-color: #9ad1c9;

    background-color: #92c7bf; */

    background-color: #e9f4f2;

}

.events #mainHeaderContainer, .short-writings #mainHeaderContainer, .books #mainHeaderContainer{

    background-color: #92c7bf;

}



.prose-essays #mainContentContainer {

 	background: #FFF;   

}



#red	{

 	display: none;   

}



h2.light	{

 	color: #7db1ad;  

    opacity: 1;

}



h2.accent3	{

    color: #92c7bf;

    opacity: 1;

}

.contact h2.accent3, .events h2.accent3, .his-hundred-years-a-tale h2.accent3{

	opacity: 0.5;

}

.contact .form {

    display: table;

    margin: auto;

    width: 100%;

    max-width: 400px;

}

section	{

    min-height: 60px;

}



section.mainContentHeader	{

    background: #fff; 

    margin-bottom: 0;

    border-bottom: 1px solid #eee;

}

.shalach-manot.his-hundred-years-a-tale section.mainContentHeader{

    background: transparent;

    border-bottom: 0;

}



section.featured	{

 	background: white; 

    padding-top: 30px;

}



div.item	{

 	margin-bottom: 20px;   

}



div.mainContent p	{

    margin-top: 0;   

}



.shalach-manot section {

    padding-bottom: 20px;

    border-bottom: 1px solid #eee;

}

.shalach-manot.his-hundred-years-a-tale section {

    border-bottom: 0;

}









.books section.mainContentHeader	{

    background: #fff; 

    margin-bottom: 0;

    border-bottom: 1px solid #eee!important;

}

        

/* .books #mainHeaderContainer	{

	background-image: none;

	background-color: #7db1ad;

	background-color: #9ad1c9;

    background-color: #92c7bf;

} */



.refresh-captcha{

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

    width: 32px;

    height: 32px;

    display: inline-block;

    background-size: 32px;

	margin-bottom: 6px;

    margin-left: 12px;

	cursor: pointer;

}

.error{

	color: red;

	text-align: center;

}

.suc_msg{

	color: green;

	text-align: center;

}

.books #mainContentContainer	{

     background: #eefaf8;

    /*background: #fff;*/

}



.books .prose-essays #mainContentContainer {

 	background: #FFF;   

}



.books #red	{

 	display: none;   

}



.books h2.light	{

 	color: #7db1ad;  

    opacity: 1;

}



.books h2.accent3	{

    color: #92c7bf;

    opacity: 1;

}



.books section	{

    min-height: 100px;

}



.books section.mainContentHeader	{

    background: #fff; 

    margin-bottom: 0;

    border-bottom: 1px solid #eee;

}



.books section.featured	{

 	background: white; 

    padding-top: 30px;

}



.books div.item	{

 	margin-bottom: 20px;   

}



.books div.mainContent p	{

    margin-top: 0;   

}

/* .events section {

    padding-top: 10px;

	margin-bottom: 15px;

	margin-top: 15px;

} */

.events section.mainContentHeader, .events section{

	border: 0;

}

.home section, .about section

{

	padding-bottom: 20px;

    border-bottom: 0px solid #ccc;

    margin-bottom: 30px;

}

.home #uberContainer	{

    overflow: hidden;

    position: relative;

    width: 100%;

    min-width: 320px;

    min-height: calc(100% - 50px);

	height: auto !important;

	/*height: 100%;*/

	margin: 0 auto; /* for sticky footer, bottom margin must be exact same (neg) as height of footer */

    /* padding-bottom: 20px; */

}

body.about, body.shalach-manot

{

	background: #EEFAF8!important;

    color: #555;

}

.about #mainHeaderContainer, .shalach-manot #mainHeaderContainer {

    background-color: #92c7bf!important;

}

ul#mainNavigation li.selected a {

    color: #000!important;

}

.shalach-manot section.featured {

    background: white!important;

    padding-top: 30px;

}

#shadow-host-companion	{display:none;} /* was appearing below footer...*/


@media (max-width: 499px)	{
section.hundred_years div.image.left {display: block; width: 100%;}
section.hundred_years div.textBlock {display: block; width: 100%;}
section.hundred_years img	{width: 100%;}

}

@media (min-width: 500px)	{
	section.hundred_years img	{
		margin-bottom: 30px;
		margin-right: 20px;
	}
}