body { 
	background-color:#191919;
	margin:0; padding:0;
	overflow-x:hidden;
	 }

/* BOX SIZE EVERYTHING */

#main-wrap,	
.exhibit-space, .exhibit-board,
.poem-board, .poemboard, 
.program-box, .directory,
.left-panel, .center-panel,
.right-panel, .back-panel,
.installation1, .installation2, .installation3,
#side-wrap,
#sidebar {
	position:relative; height:auto;
	webkit-box-sizing: border-box;    
	-moz-box-sizing: border-box;    
	box-sizing: border-box;
	background-color:transparent;
	}
		
		
#main-wrap {
	position:relative;
	top:2.2rem; clear:both;
	width:100%; height:auto;    
	margin:0; padding:0;
	background:#191919;
	z-index:3;	
	}
	

.program-box {
	position:relative;
	clear:both;
	width:75%; height:auto;
    margin:0 0 3rem 0; padding:1rem;        /* for border seperation */
	border:1px solid #ad2222;
	z-index:5;                    /* must be > 0 or box gets buried */
	}
	
.program-box ul {
	display:block;
    list-style: none inside square;
    margin: 0px; padding:0;
	}
	


	
#wrapper {
	position:relative;
	width:100%; height:auto;    
	margin:0; padding:0;
	z-index:1;
	}
	
/* GENERAL PURPOSE INSERTS */
/* inline size to suit prn */
.insert-box-l {                          /* COLUMN & ARTICLE INSERT BOXES */
	position:relative;
	width:92%; height:auto;
	margin:2rem auto; 
	padding:0.5rem;
	overflow:hidden;
	border:2px solid #000080;
	}
	
.insert-box-l2 {                          
	position:relative;
	width:88%; height:auto;
	margin:2rem auto; 
	padding:0.2rem;
	overflow:hidden;
	border:2px solid #000080;
	}	
	
.insert-box-r {
	position:relative;
	width:98%; height:auto;
	margin:2rem auto; 
	padding:0.2rem;
	overflow:hidden;
	border:2px solid #000080;
	}
/* DIRECTORIES - VERTICAL & HORIZONTAL */
		
.directory {                        /* adjust width inline prn with program-box */
	position:relative;
	width:21%; height:auto;
	border:0;
	margin:0; padding:0;     /* move away from left m, pad for border if used */
	z-index:3;
	}

/* ================================= */
/* imports from old za_layout.css */

/* EXHIBIT/PRESENTATION WRAPPERS */



.directory li{margin-top:0.4rem;}

.exhibit-space {
	position:relative;
	width:90%; height:auto;
	margin:0rem auto; padding:4rem 0 2rem 0;

	z-index:4;
	}
	
.exhibit-frame {
	position:relative;
	width:80%; height:auto;
	margin:0 auto; padding:4em 0 2em 0;
	background:#191919;
	z-index:5;
	}

/* PHOTOGRAPHY LAYOUTS */

#photo-box {
	position:relative;
	width:99%; height:auto;
	margin-left:auto; margin-right:auto;
	padding-bottom:8rem;
	top:0.8rem;
	background-color:#191919;
	z-index:10;
	}

img.img-center {				/* center images prn */
	display:block; 
	margin-left:auto; 
	margin-right:auto;}

img.img-left {
	float:left;
	display:block;
	margin-right:1rem;
	margin-bottom:1rem;
	}
	
img.img-right {
	float:right;
	display:block;
	margin-left:1rem;
	margin-bottom:1rem;
	}
	
	
/*  ADDITIONAL CONTAINER WRAP IF NEEDED */

div.exhibit-board {                   
	position:relative;
	clear:none;
	 top:0em;                      
	 width:100%; height:auto;				
	 margin:0 auto; padding:4em;
	 border:8px ridge #E2E2E2;        
	}


/*  POETRY SETUPS  */


.poem-board {
	position:relative;
	width:80%; height:auto;
	top:2rem; 
	margin:0 auto; padding:2rem;
	letter-spacing:0.5px;
	border: 8px ridge #e2e2e2;
	}
	
.pre-poem {
	position:relative; display:block;
	width:100%; height:auto;
	margin:0; padding:0;
	}
	
p.poem-title {
	display:block;
	width:100%; height:auto;
	font-size:1.4rem;
	font-weight:700;
	}
	
.poem-sig {
		display:block;
		font-size:0.9;
		font-weight:500;
		font-family:"Copperplate Light", Calibri, Verdana, Tahoma, Geneva, 
				 Lucida Sans, Arial, sans-serif;	
		  }
		  
.poem-sig:before {
	content:"\00a9";
	margin:2rem 0; padding:0;
	}
	
.epigram  {display:block;
		   font-size:10rem;
		   padding:1.2rem;
		  }
		  
		  
/* SIDE ORNAMENTS FOR POEM BOARDS */

.ornament-l,
.ornament-r img{
	position:relative;
	display:block;
	clear:none;

	width:auto; Height:auto;   /* width of content must be < width of pageskin to margin of exhibit */
	margin:0; padding:0;
	border:0;
	background:transparent;    /* adjust to suit */
	}

/* POSITION ORNAMENTS ON PAGE */

.ornament-l img{top:0; left:0;}
.ornament-r img{top:0; right:0;}	

	
/* CONCEALED BACKGROUND ELEMENTS - use prn */	

/* pushes content below earth background for scrolling/reveal effect - style intro text */
/* adjust height to conceal opening page for scroll, or auto for static presentation */



div#pushboard  {						
	position:relative;	
	float:left; clear:both;
	width:100%; min_width:100%;
	margin-left:0; margin-right:0;
	height:auto;						
	margin:0; padding:0;
	background-color:black !important;
	font-family:"Lucida Bright", georgia, garamond, serif;
		font-size:1em; font-weight:600;
		line-height:1.2em;
		color:#99ccff;
	}
	
 /*	background:black url("images/backgrounds/whole_earth2.jpg")
	no-repeat  8em -5em;            center earth in viewport      USE AS NEEDED    */


					 
div#pushbox  {						/* pushes content below earth background for scrolling/reveal effect - style intro text */

	position:relative;	
	float:left; clear:both;
	width:100%; min_width:100%;
	margin-left:0; margin-right:0;
	height:42em;						/^ adjust to conceal opening page */
	margin:0; padding:0;
	background-color:black !important;
	font-family:"Lucida Bright", georgia, garamond, serif;
		font-size:1em; font-weight:600;
		line-height:1.2em;
		color:#99ccff;
	}
	

	
div#pushintro {
	position:relative;	
	width:100%; min_width:100%;
	height:auto;						/* adjust to conceal opening page */
	margin-left:0%; margin-right:0%;
	padding:0;
	background-color:black;
	}
	
p.pushtitle {
	font-size:1.3em; 
	line-height:1.4em;
	text-decoration:italic;
	text-align:center;
	color:#b0c4de;
	}
	
	
.poem {position:relative;
	   display:block;
	   width:100%; height:auto;
	   margin:0; padding:0 1rem 0 1rem;
	   white-space:pre;
	   }


.zatitle {
	font-family:georgia,"New Times Roman",serif;
	font-size:1.6em; 
	line-height:1.8em;
	text-decoration:italic;
	text-align:center;
	color:#ffff99;	
	}
	
.zanchor {color:#fff99;}
	
div.button-block {
	margin:1em 2em 0em 1em;
	display:inline;
	position:relative;
	float:left; clear:none;
	
	}
	
div.button-block p {
	display:inline;
	text-align:center;
	clear:none;
	}

div#pushintro hr{
	width:98%; height:4px;
/*	border-top:1px solid #B22222 ; */
	border-style:double;
	margin-top:2em;
	}
	
div#pageskin {
	position:relative;
	top:0; left:0;
	float:left; clear:both;
	width:98%; height:110em;
	margin:0; padding:0;
	border:0px hidden;
	background:black url("../images/backgrounds/whole_earth2.jpg")
	no-repeat fixed 8em -5em;           /* center earth in viewport */
	z-index:100;
	}
					
.poemboard {
	position:relative;
	 top:15rem; left:20%;
	 width:50%; height:auto;
	 margin:0; padding:4rem;
	 background-color:transparent;  
/*	 border:8px ridge #E2E2E2;         Uh, no. Not for this presentation */
					 }
					 
					 
.poemboard  p,
.poemboard  a {
	font-size:1.2rem;
	font-family:"comic sans",cambria,serif;
	line-height:1.1rem;
	font-weight:600;
	color:#E2E2E2;
	}
			 
					 
/* p.title	{font-size:1.6em; font-weight:600; line-height:1.4em} */


div#pushbox p.text{
		font-size:1em;  
		font-weight:500; 
		line-height:1.2em;
		color:#f5f5f5;
		}


p.sig	{font-size:1em; font-weight:700; line-height:1em
					 color:#FFFF99;}

/* AUDIO DISPLAY */

	
.audio-panel {
	width:33%; height:2.2em;
	margin-left:28%; 
	margin-right:auto;
	background-color:#8b0000;
	clear:both;
	}

.audio-shelf {
	position:relative;
	width:auto; height:auto;
	padding:2rem 2rem;
	margin-left:auto;
	margin-right:auto;
	border:4px ridge #8b0000;
	background:#191919;
	}

.audio-deck {
	position:relative;
	width:100%; height:auto;
	margin-left:auto;
	margin-right:auto;
	padding:1rem;
	)

	
/* UTILITIES */

li {margin-top:0.6rem;}

.clearfix:before,
.clearfix:after {
  content: "&nbsp;";
  display: table;
  }
.clearfix:after { clear: both;}
.clearfix {zoom: 1; }               /* ie 6/7 */

/* floats */

.float-l {float:left;}
.float-r {float:right;}


/* Floated Images */

.img-fl1 {float:left; margin:0.2rem 2rem 1rem 0.2rem;}	
.img-fl2 {float:left; margin:0.2rem;}		  
.img-fr1 {float:right; margin:0.2rem 0.2rem 0.6rem 0.8rem;}
.img-fr2 {float:right; margin:0.2rem}

/* List Images */

ul .dsc {list-style:disc inside;}
ul .sqr {list-style:square inside;}
ul .cir {list-style:circle inside;}
ul.none  {list-style:none;}


ul.list-img {
	list-style-type:none;
	margin:0; padding:0;
	}
	


li.li1,
li.li2,
li.li3,
li.li4 {
	background-repeat: no-repeat;
	background-position: 0px center;
	padding-left:2rem;               /* distance text from image */
	}
	
li.li1  {background-image: url("../za_images/za_setup/red-button_20x20.gif");}
li.li2  {background-image: url("../za_images/za_setup/red-button_20x20.gif");}
li.li3  {background-image: url("../za_images/za_setup/red-button_20x20.gif");}
li.li4  {background-image: url("../za_images/za_setup/red-button_20x20.gif");}

ul.pre  {word-break:normal; white-space:pre;}



/* BACKGROUNDS */

.bggray1  {background-color:#e2e2e2;}
.bggray2  {background-color:#e0e0e0;}
.bggray3  {background-color:#d3d3d3;}
.bggray4  {background-color:#d0d0d0;}
.bggray5  {background-color:cccccc;}
.bggray6  {background-color:ccccff;}
.bggray7  {background-color:#c0c0c0;}        /* silver */
.bggray8  {background-color:#b0b0b0;}
.bggray9  {background-color:#a0a0a0;}
.bggray10 {background-color:#808080;}
.bggray11 {background-color:#646464;}
.bggray12 {background-color:#505050;}
.bggray13 {background-color:#404040;}
.bggray14 {background-color:#333333;}
.bggray15 {background-color:#262626;}
.bggray16 {background-color:#222222;}
.bggray17 {background-color:#191919;}
.bggray18 {background-color:#151515;}
.bggray19 {background-color:#121212;}
.bggray20 {background-color:#0e0e0e;}
.black  {background-color:000;}



		
/* ARTICLE AND COLUMN LAYOUTS */
/*
div.col-l,     
div.col-r {                                
	position:relative; left:3em;
	width:70%; height:auto;
	margin:0.5em 1em 1em 0.5em;
	padding:0.8rem;
	color:black; background:#e2e2e2e2;
	border:1px solid black;
	}
*/

/* UTILITIES */

center-box, c-box {margin-left:auto; margin-right:auto}

* ul/li list formats */

	
/* ul/li list formats */

ul.std {
	list-style-type:disc;
	list-style-image:none;
	list-style-position:inside;
	margin:0; padding:0.1rem 0;
	font-size:0.9rem;
	font-weight:500;
	}
ul.std > li {
	margin:0; padding:0.1rem 0;
	}
.
/* BOX HEIGHT OVERRIDES */
.ht0 {height:0rem;}
.ht1 {height:1rem;}
.ht2 {height:2rem;}
.ht3 {height:3rem;}
.ht4 {height:4rem;}
.ht5 {height:5rem;}
.ht6 {height:6rem;}
.ht7 {height:7rem;}
.ht8 {height:8rem;}
.ht9 {height:9rem;}
.ht10 {height:10rem;}
.ht12 {height:12rem;}
.ht13 {height:13rem;}
.ht14 {height:14rem;}
.ht15 {height:15rem;}
.ht16 {height:16rem;}
.ht17 {height:17rem;}
.ht18 {height:18rem;}
.ht19 {height:19rem;}
.ht20 {height:20rem;}
.ht22 {height:22rem;}
.ht25 {height:25rem;}
.ht27 {height:27rem;}
.ht30 {height:30rem;}
.ht32 {height:32rem;}
.ht35 {height:35rem;}
.ht37 {height:37rem;}
.ht40 {height:40rem;}
.ht45 {height:40rem;}
.ht50 {height:50rem;}
.ht100 {height:100rem;}
.ht200 {height:200rem;}
.ht300 {height:300rem;}
.ht400 {height:400rem;}
.ht500 {height:500rem;}
.ht600 {height:600rem;}
.ht700 {height:700rem;}
.ht800 {height:800rem;}
.ht900 {height:900rem;}

.bdr-red1 {border-color: #dc143c; }
.bdr-red2 {border-color: #cd5c5c; }
.bdr-red3 {border-color: #b22222; }
.bdr-red4 {border-color: #8b0000; }
.bdr-red5 {border-color: #800000; }
.bdr-blu1 {border-color: #6495ed; }
.bdr-blu2 {border-color: #1e90ff; }
.bdr-blu3 {border-color: #4169e1; }
.bdr-blu4 {border-color: #483d8b; }
.bdr-blu5 {border-color: #000080; }
.bdr-grn1 {border-color: #90ee90; }
.bdr-grn2 {border-color: #7cfc00; }
.bdr-grn3 {border-color: #008000; }
.bdr-grn4 {border-color: #006400; }
.bdr-grn5 {border-color: #6b8e23; }
.bdr-ong1 {border-color: #fa8072; }
.bdr-ong2 {border-color: #ff6347; }
.bdr-ong3 {border-color: #ffa500; }
.bdr-ong4 {border-color: #ff4500; }
.bdr-ong5 {border-color: #ff3300; }
.bdr-y1w1 {border-color: #ffff99; }
.bdr-ylw2 {border-color: #ffff66; }
.bdr-ylw3 {border-color: #ffff33; }
.bdr-ylw4 {border-color: #ffd700; }
.bdr-ylw5 {border-color: #ffff00; }
.bdr-brn1 {border-color: #d2b48c; }
.bdr-brn2 {border-color: #f4a460; }
.bdr-brn3 {border-color: #cd853f; }
.bdr-brn4 {border-color: #d2691e; }
.bdr-brn5 {border-color: #a52a2a; }
.bdr-ppl1 {border-color: #ee82ee; }
.bdr-ppl2 {border-color: #dda0dd; }
.bdr-ppl3 {border-color: #9370db; }
.bdr-ppl4 {border-color: #800080; }
.bdr-ppl5 {border-color: #4b0082; }
.bdr-slt1 {border-color: #778899; }
.bdr-slt2 {border-color: #708090; }
.bdr-slt3 {border-color: #2f4f4f; }
.bdr-slt4 {border-color: #2f4f4f; }
.bdr-slt5 {border-color: #003333; }
.bdr-gry1 {border-color: #dcdcdc; }
.bdr-gry2 {border-color: #e2e2e2; }
.bdr-gry3 {border-color: #c0c0c0; }
.bdr-gry4 {border-color: #808080; }
.bdr-gry5 {border-color: #696969; }
.bdr-wht1 {border-color: #f0ffff; }
.bdr-wht2 {border-color: #f5f5dc; }
.bdr-wht3 {border-color: #f8f8ff; }
.bdr-wht4 {border-color: #fffff0; }
.bdr-wht5 {border-color: #f5f5f5; }
.bdr-black {border-color: #000000; }


.bdr-b {border-bottom:2px solid #000; padding:2rem 0 2rem 0;}
.bdr-b2 {border-bottom:4px double #000; padding:2rem 0 2rem 0;}
.bdr-t {border-top:2px solid #000;}
.bdr-l {border-left:2px solid #000;}
.bdr-r {border-right:2px solid #000;}
.bdr-none {border:none;}

.bdr-blk {border:2px solid #000;}
.bdr-red {border:2px solid #b22222;}
.bdr-ong {border:2px solid #ff8c00;}
.bdr-grn {border:2px solid #006400;}
.bdr-blu {border:2px solid #483d8b;}
.bdr-ylw {border:2px solid #ffd700;}
.bdr-ppl {border:2px solid #800080;}
.bdr-gry {border:2px solid #a9a9a9;}

.bdr-blkdbl {border:4px double #000;}
.bdr-reddbl {border:4px double #b22222;}
.bdr-ongdbl {border:4px double #ff8c00;}
.bdr-grndbl {border:4px double #006400;}
.bdr-bludbl {border:4px double #483d8b;}
.bdr-ylwdbl {border:4px double #ffd700;}
.bdr-ppldbl {border:4px double #800080;}

.bgnone   {background-color:transparent;}
.bgred    {background:#ff0000;}
.bgblue   {background:#0000ff;}
.bgorange {background:orange;}
.bggreen  {background:green;}
.bgyellow {background:yellow;}
.bgpurple {background:purple;}
.bgwhite  {background:white;}
.bgblack  {background:black;}
.bgnone   {background:transparent;}

	

/* SPECIAL LAYOUT ELEMENTS */

/* FLOATED IMAGES */	
	

.img-fl1 {float:left; margin:0.2rem 2rem 1rem 0.2rem;}	
.img-fl2 {float:left; margin:0.2rem;}		  
.img-fr1 {float:right; margin:0.2rem 0.2rem 0.6rem 0.8rem;}
.img-fr2 {float:right; margin:0.2rem}

/* BOTTOM BORDER and other SEPERATORS */

.sep0 {border:0px;}		 
.sep1 {border-bottom:1px solid black;  margin:0.5rem 0;}
.sep2 {border-bottom:4px double black; margin:0.5rem 0;}
.sep3 {border-bottom:1px dotted black; margin:0.5rem 0;}
.sep4 {border-bottom:1px dashed black; margin:0.5rem 0;}

.sep2x {border-bottom:2px solid black; margin:0.2rem 0;}
.sep2xx {border-bottom:4px double black; margin:1rem 0 0.4rem 0;}

.clearsep  {width:100%; height:1px;
			clear:both;
			 visibility:hidden;
			 }

hr.sep {
	width:100%; height:1px;
	visibility:hidden;
	}
			 
hr.notesep {
		 width:45%; height:auto; 
		 margin:1.5rem 0 0 0; padding:0;
		 text-align:left;
		 }
		 
/* PARAGRAPH SPACE SEPARATORS */

p + p {margin:.2rem 0;     /* Inter-paragraph spacing = 2(.2rem) */
	   text-indent:1rem;
	   }   

p.spc0 {width:100%; height:0rem; margin:0 0;}
p.spc1 {width:100%; height:0rem; margin:0.1rem 0;}
p.spc2 {width:100%; height:0rem; margin:0.2rem 0;}
p.spc3 {width:100%; height:0rem; margin:0.3rem 0;}
p.spc4 {width:100%; height:0rem; margin:0.4rem 0;}
p.spc5 {width:100%; height:0rem; margin:0.5rem 0;}
p.spc15{width:100%; height:0rem; margin:1.5rem 0;}
p.spc20{width:100%; height:0rem; margin:2rem 0;}
p.spc30{width:100%; height:0rem; margin:3rem 0;}
p.spc50{width:100%; height:0rem; margin:5rem 0; background-color:green;}