@charset "utf-8";
body {
    font: 98%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background:#FFF;
	margin: 0;
	padding: 0;
	color: #000;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	max-width: 1000px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect     this declaration. */
	min-width: 480px;/* a min-width may be desirable to keeps this layout from getting too narrow while keeping lines to 3 words . IE6 does not respect this declaration. */
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}


#juicebox-container{
	float:right;
    padding-bottom:60px;}


.contenthome { /* ~~ HOMEPAGE ONLY - FOR BACKGROUND IMAGE the content between header and footer ~~ */
    width: 602px;   /* ~~ originally 900 x 870 ~~ */
    height:650px;
    padding: 0px 0;
	background-image:url(images/logo-home-2.jpg);
	background-repeat:no-repeat;
	background-position:top;
	margin: 0 auto;
}


.linkhome1 { /* writing */  /* ~~ 4 stacked up links on home page image ~~ */
	text-decoration:none;
	width:300px;
	height:300px;
	/* give it a background color to see visually */
    position:absolute;
	
}
.linkhome2 { /* theatre */
	text-decoration:none;
	width:300px;
	height:300px;
	/* give it a background color to see visually */
    margin-left:300px;
	position:absolute;

}

.linkhome3 { /* music */
	text-decoration:none;
	width:300px;
	height:300px;
    /* give it a background color to see visually */
	margin-top:300px;
	position:absolute;
	
}

.linkhome4 { /* visual art */
	text-decoration:none;
	width:300px;
	height:300px;
	/* give it a background color to see visually */
    margin-top:300px;
	margin-left:300px;
	position:absolute;
	
}


.listen{/* icons on plays_musicals */
    cursor: default;
    font-weight: bold;
	color:#FF0000;
    text-decoration: none;}
.listen:hover{/* * icons on plays_musicals */
    color:#660000;
}



.link{/* all internal links throughout pages */
    cursor: default;
    font-weight: bold;
	color:#000;
    text-decoration: none;}
.link:hover{/* all internal links throughout pages */
    color:#666;
}


.link2{ /* more info links on visual art pages */
    cursor: default;
	font-size:20px;
    font-weight: bold;
	color:#000;
    text-decoration: none;
	padding-left: 120px;}
.link2:hover{ /* more info links on visual art pages */
   color:#666;
}


- See more at: http://www.cmsproducer.com/analysis/css-rollover-without-javascript-accessible#sthash.uaEZjoh9.dpuf


a img { /* removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}


.swash{ /* swash logo upper left */
	padding-left: 0px;}


.social{ /*facebook and twitter logos upper right */
float:right;
margin-right: 20px;
	}
.social img{
padding-top: 8px;
padding-left:12px;
	}
 
 
/* ~~ This is the layout information. ~~ */

.content { /* ~~ the content following pages between header and footer ~~ */
padding-top: 0px;
width:auto;
}

#div1{ /* ~~ TEXT ~~ */
font: 96%/1.2 Verdana, Arial, Helvetica, sans-serif;
padding-bottom: 20px;
}

#div1 p{ 
padding-left: 225px; /* ~~ to cleanly clear the left float ~~ */
}

.title{ /* ~~ SUB CATEGORIES IN RED ON PAGES ~~ */
    font-weight:bold;
	font-size:21px;
	padding-top:0px;
    color:#790303;
  }

.title a{
	font-weight:bold;
	font-size:21px;
	padding-top:10px;
    color:#790303;
    text-decoration:none;}
.title a:hover{
    color:#BE0505;
}




.title2{ /* ~~  TOP titles in red on VISUAL ART PAGES ~~ */
    font-weight:bold;
	font-size:28px;
	padding-top:10px;
    color:#790303;
	text-align:center;
	padding-top:10px;
 }
.title3{ /* ~~  second layer titles in red on VISUAL ART PAGES ~~ */
    font-weight:bold;
	font-size:21px;
    color:#790303;
	text-align:center;
  }
.title4 a{ /* ~~  third layer "read about" in black on VISUAL ART PAGES ~~ */
    text-decoration: none;
    font-weight:bold;
	font-size:13px;
    color:#000;
	text-align:left;

  }
  
.title4 a:hover{ /* ~~  third layer "read about" in black on VISUAL ART PAGES ~~ */
  color:#666;
}



.title5{ /* ~~ annotations page ~~ */
padding-top: 10px;
    font-weight:bold;
	font-size:18px;
    color:#000;
  }

.about{
    font-weight:bold;
	}
.detail{ /*~~ description under plays ~~ */
  font-style:italic;
  font-size:14px;}



.more{ /*~~ links to Amazon etc Slight indent ~~ */
color:#666;
    font-weight:bold;
	font-style:italic;
	margin-bottom: 50px;
	margin-left:20px;}
.more a{
	color:#666;
    text-decoration:none;}
.more a:hover{
    color:#999;}

.toggle{
	text-align:center;
	font-style: italic;
	font-weight:bold;
	font-size: 12px;
	color:#790303;}


#div2{	/*~~ WRITING BOOK IMAGE ~~ */
    float:left;
    width: 180px;
}

#div3{	/*~~ annotations IMAGE ~~ */
    float:left;
    width: 200px;
	padding-right: 15px;
}

#div4{/*~~ space between listings-annotations IMAGE ~~ */
padding-bottom: 35px;
border-bottom:#000;
border-bottom-width:thin;
border-bottom-style:groove;}

.element{/*~~ Graphic element on theatre/visual art/writing "landing" page ~~ */
float:left;
padding-right: 15px;
padding-left: 15px;
}
		

#div1b{ /* ~~ MUSICALS TEXT NO IMAGE, curriculum vitae page ~~ */
font: 96%/1.2 Verdana, Arial, Helvetica, sans-serif;
padding-bottom: 20px;
}
#div1b p{ /* ~~ Musicals TEXT ~~ */
padding-left: 20px; 
}
 
 
 
.indent{ /* ~~ curriulum vitae, exhibits text after date to indent ~~ */
padding-left: 20px;

}
.indent2{ /* ~~exhibits subtext  to indent ~~ */
padding-left: 40px;
padding-bottom: 40px;}
 


.words1 /*~~ headings of the lyrics to songs pages ~~ */
 {text-align:center;
 font-weight:bold;}
 
.words2 /*~~ indented lyrics to songs pages ~~ */
{ color:#790303;
  line-height:180%;
  margin-left:150px;
}
.words3 /*~~ indented lyrics to songs pages ~~ */
 { color:#790303;
   line-height:180%;
   margin-left:20px;}
   
.content li{
	   color:#790303;
   line-height:180%;
   margin-left:20px;}
   


.words4 /*~~ indented lyrics to songs pages ~~ */
 { font-size:13px;
   padding-left:20px;
   font-style:italic;
}

/*~~ NAVBAR LEFT PAGES ~~ */
#navleft{/*~~ WRITING LEFT NAVBAR~~ */
    float:left;
    margin-top:0px;
    background-color:#E7E7E7;
	border-style:solid;
	border-width:thin;
	border-color:#000;
	width: 203px;
	margin-right: 18px;
    margin-bottom:750px;
    cursor: default;
}
#navleft .top a{/*~~ TOP NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:#790303;
    padding-left: 5px;
	text-decoration: none;
	}

#navleft .top{
	 font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:#790303;
    padding-left: 5px;
	text-decoration: none;
	}



#navleft .top2 a{/*~~ TOP NAV NAVLEFT EXHIBIT and CURRICULUM ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:#000;
    padding-left: 5px;
	text-decoration: none;
	}

#navleft .top2{/*~~ TOP NAV NAVLEFT EXHIBIT and CURRICULUM ~~ */
	 font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:#000;
    padding-left: 5px;
	text-decoration: none;
	}



#navleft a:hover{/*~~ TOP NAVLEFT LIST WRITING GREY HOVER ~~ */
   color:#666;
}	


#navleft .sub{/*~~ sub NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 6px;
	text-decoration: none;
	}
#navleft .sub a{/*~~ sub NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 6px;
	text-decoration: none;
	}
#navleft .sub a:hover{/*~~ TOP NAVLEFT LIST WRITING gray HOVER ~~ */
   color:#666;
}


#navleft .subsub a, #navleft .subsub{/*~~ SUB 3 down NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 18px;
	text-decoration:none;
	}



/*~~ NAVBAR LEFT PAGES NO MARGIN~~ */
  /*~~ LEFT NAVBAR 20px  MARGIN BOTTOM~~ */
 
 

#navleftnm{/*~~ WRITING LEFT NAVBAR~~ */
    float:left;
    margin-top:0px;
    background-color:#E7E7E7;
	border-style:solid;
	border-width:thin;
	border-color:#000;
	width: 280px;
	margin-right: 15px;
    margin-bottom:20px;

    cursor: default;
}
#navleftnm .top a{/*~~ TOP NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:#790303;
    padding-left: 5px;
	
	text-decoration: none;
	}

#navleftnm .top{
	 font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight: bold;
	color:#790303;
    padding-left: 7px;
	text-decoration: none;
	}

#navleftnm .top2 a{/*~~ TOP NAV NAVLEFT EXHIBIT & CURRICULUM PG~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 5px;
	text-decoration: none;
	}

#navleftnm .top2{
	 font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#790303;
    padding-left: 5px;
	text-decoration: none;
	}


#navleftnm .top3 a{/*~~ TOP NAV NAVLEFT ANNLOTATIONS PG~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	
	color:#000;
    padding-left: 2px;
	text-decoration: none;
	}

#navleftnm .top3{
	 font-family:Arial, Helvetica, sans-serif;
	font-size:12px;

	color:#000;
    padding-left: 2px;
	text-decoration: none;
	}








#navleftnm a:hover{/*~~ TOP NAVLEFT LIST WRITING GREY HOVER ~~ */
   color:#666;
}	


#navleftnm .sub a{/*~~ sub NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 9px;
	text-decoration: none;
	}
	
#navleftnm .sub{/*~~ sub NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 10px;
	padding-right: 1px;
	text-decoration: none;
	}
#navleftnm .sub a:hover{/*~~ TOP NAVLEFT LIST WRITING gray HOVER ~~ */
   color:#666;
}




#navleftnm .subsub a, #navleft .subsub{/*~~ SUB 3 down NAV NAVLEFT ~~ */
    font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 18px;
	text-decoration:none;
	}

#navleftnm .subsub a:hover, #navleft .subsub hover{/*~~ TOP NAVLEFT LIST WRITING gray HOVER ~~ */
   color:#666;
   text-decoration:none;
}


#navleftnm .subsubsub
   {font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#000;
    padding-left: 28px;
	text-decoration: none;
	}
#navleftnm .subsubsub a{/*~~ THE ORPHAN ~~ */
   font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight: bold;
	color:#666;
    padding-left: 28px;
	text-decoration: none;
	}

#navleftnm .subsubsub a:hover{/*~~ TOP NAVLEFT LIST WRITING gray HOVER ~~ */
   color:#666;
   text-decoration: none;
}



.bumpin{
padding-left: 20px;

}

.bumpin2{
padding-left: 33px;}

.bumpin3{
padding-left: 6px;

}

/* ~~ miscellaneous float/clear classes ~~ */

.judy{
	padding-left: 50px;}

.fltrt {  /* ~~ jl photo on curr page ~~ */
    float: right;
	padding-top: 35px;
	padding-right: 20px;
	padding-left: 10px;
	margin-left: 8px;
}

.fltrt2 {  /* ~~ jl photo on curr page ~~ */
    float: right;

}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.center{
text-align: center;}

.center2{ /* ~~ jl photo on exhibits page ~~ */
text-align: center;
margin-right: 290px;}

.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	
}

/* ~~ The footer ~~ */
#footer {
    text-align: center;
	padding: 10px 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	color:#000;

}