/* SS main CSS file */

/* colours:

#404F24  	dark green  
#BDD09F     green
#E8F0D8     pale green
  
#8F3B1B     reddish brown
#B99C6B     tan
#FFF8DC     cornsilk

#4E6172     steel
#A3ADB8     silver 
#FCFCFC     pale grey 
*/

/* font ------------------------------------------------------- */ 
/* sans-serif */
h1, h2, h3, h4, .breadcrumb, .quotation-mini, .quotation-text, .banner-sub-play, .banner-box, .banner-boxr
{ font-family: "Candara","Lucida Sans Unicode",Helvetica,sans-serif; }

/* serif */
body, p, dd, ul, ol, td .index
{ font-family: Georgia,"Garamond","Palatino","Times New Roman",times,serif; }

/* background-colour ----------------------------------------- */ 
.ho-work, .ho-play, .ho-ext
{ background-color: #BDD09F; } /* green */

.banner-work, .banner-sub-work, .banner-main-play, .banner-sub-play, .banner-box, .banner-boxr, .display-quot
{ background-color: #E8F0D8; } /* pale green */

.breadcrumb, .quotation, .quotation-box, .quotation-attrib, .quotation-translation, .quotation-margin, .quotation-leftcol, .quotation-rightcol
{ background-color: #FFF8DC; } /* cornsilk */

a:hover, pre
{ background-color: #FCFCFC; } /* pale grey */

/* (font) colour -------------------------------------------- */
body, pre, a[name]
{ color: black; } 

.breadcrumb, .quotation-mini, .banner-work, .banner-sub-work, .banner-main-play, .banner-sub-play, .banner-box, .banner-boxr, .display-quot
{ color: #404F24; } /* dark green */

.ho-work, .ho-play, .ho-ext
{ color: #404F24; } /* reddish brown */

a
{ color: #8F3B1B; } /* reddish brown */

a:hover, a:active
{ color: #404F24; } /* dark green */

/* box-shadow ----------------------------------------------- */
.banner-main-play, .banner-sub-play, .banner-box, .banner-boxr
{ box-shadow: 3px 3px 3px #BDD09F; } /* green */

.quotation, .quotation-box, .quotation-attrib, .quotation-translation, .quotation-margin, .quotation-leftcol, .quotation-rightcol
{ box-shadow: 3px 3px 3px #B99C6B; } /* tan */

.banner 
{ box-shadow: 4px 4px 4px #404F24; } /* dark green */

.ho-work, .ho-play, .ho-ext
{ box-shadow: 3px 3px 3px #404F24; } /* dark green */

.breadcrumb, .ho-work, .ho-play, .ho-ext, .banner-main-play, .banner-sub-play
{ margin-left: -32px;
  margin-right: -32px;
  } 

/* box borders ---------------------------------------------- */
.quotation-sep, .quotation-translation
{ border-top: 1px #B99C6B dashed; }  /* tan */

.quotation, .quotation-box, .quotation-margin, .quotation-leftcol, .quotation-rightcol
{ border-top: 1px #B99C6B solid; }  /* tan */

.ho-work, .ho-play, .ho-ext
{ border-top: 1px #404F24 solid; } /* dark green */

/* text-align ---------------------------------------------- */

body, blockquote
{ text-align: justify; }  

h1, h2, h3, h4, td 
{ text-align: left; }

/* max width ----------------------------------------------- */
p , .quotation
{ max-width: 40em; }  /* about "2 alphabets" wide, for ease of reading */

blockquote, dd, dt, ul, ol 
{ max-width: 36em; }  /* 4em less than P, for indenting */

.breadcrumb, .banner-sub-play, .index
{ max-width: 100%; }  
/* ============================================================= */
body {  
  background: white;
  margin: 2em 2em 3em 2em;
  padding: 1em 3em 3em 3em;
  max-width: 65em; 
  min-width: 46em; 
  font-size: 100%;   
  line-height: 1.6em;

  /*border: 1px #E8F0D8 solid; 
  border-radius: 6px;
  box-shadow: 0em 0em 4em 1em #E8F0D8;*/
  }


h1, h2, h3, h4 {
  font-weight: normal;
}

h1 {
  font-size: 2.1em;
  line-height: 1em;
}

h2 {
  font-size: 1.8em;
  line-height: 1.3em;
}

h3 {
  font-size: 1.4em;
  line-height: 1.3em;
}

h4 {
  font-size: 1.1em;
  line-height: 1.25em;
}

ul,ol {
  line-height: 1.6em;
}

dt {
  line-height: 1.8em;
}

pre {  /* same as Ephemeral site */
  font-size: 0.8em;
  display: block;
  font-family: "Courier New";
  white-space: pre;
  overflow: auto;
  line-height: 1.4;
  border: 1px solid #A3ADB8;
  padding: 1em 1em 1em 30px;
}

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

DIV.clear {
  clear: both;
}

.breadcrumb {
  padding: 0px 40px 0px 30px;
  font-size: 80%; 
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 8px;
}

.display-left {
  margin: 5px 8em 5px 0;
}

.display-right {
  margin: 5px 0 5px 8em;
}

.display-centre {
  margin: 5px 6em 5px 5em;
}

.display-quot {		/* internal quotation, use with quotation-mini */
  margin: 0 3em 0 2em; 
  border-left: 5px #BDD09F solid; 
  padding: 1em 2em 1em 2em;
  line-height: 1.4em;
}


.quotation-mini {
  font-size: 0.85em;
  line-height: 1.5em;
}

.mini {
  font-weight: normal; 
  font-size: 0.85em;
}


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

.link-ext {
  font-style: normal;
  font-variant: small-caps;
}

a {
    text-decoration:none
}

a:hover{
    text-decoration: underline;
}

a:active{
    background-color: #FFF;
}

a[href^="http"] {
  font-family: Helvetica,sans-serif;
  font-style: italic;
}


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

.pic-left {	
  border-top: 4px white solid;
  border-right: 0.5em white solid;
  border-bottom: 2px white solid;
  margin-right: 1em;
}

.pic-right {	
  border-top: 4px white solid;
  border-bottom: 2px white solid;
  border-left: 0.5em white solid;
  margin-left: 1em;
}

/*----------------------------------*/
/* quotation page */

.quotation-box, .quotation-attrib, .quotation-translation
{		
  padding: 1em 2em 1em 2em;
  border-radius: 10px;
}

/*----------------------------------*/
/* external quotation */

.quotation, .quotation-margin, .quotation-leftcol, .quotation-rightcol
{		
  font-size: 0.91em;
  line-height: 1.4em;
  border-radius: 8px;
}

.quotation, .quotation-leftcol, .quotation-rightcol {		
  padding: 0.5em 1.5em 0.3em 1.5em;
  text-align: justify;
 }

.quotation-margin {		/* narrow quotation -- smaller margins, not justified */		
  padding: 0.3em 0.7em 0.2em 0.8em;
}

.quotation-leftcol {
  float: left;
  width: 44%;
}

.quotation-rightcol {
  float: right;
  width: 44%;
}

.quotation-text {
  text-align: left;
}

.quotation-trans {	/* translation of foreign quotation */
  font-style: italic;
  padding-left: 2em;
}

.quotation-source {
  margin-top: 2px;
  text-align: right;
}

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

.ho-work, .ho-play, .ho-ext {	
  padding: 2px 0 2px 30px;
  margin-bottom: 2em;  
  border-radius: 16px;
}

.banner-work {	
  margin-top: 0;
  border-top: 1px #BDD09F solid;
  padding: 15px 30px 15px 30px;
}

.banner-sub-work {	
  padding: 10px 0 10px 30px;
}

.banner-main-play {	
  margin-top: 0;
  border-top: 1px #BDD09F solid;
  padding: 15px 30px 15px 30px;
  border-radius: 8px;
}

.banner-sub-play {	
  border-top: 1px #BDD09F ;
  border-bottom: 1px #BDD09F ;
  padding: 10px 30px 10px 30px;
  font-size: 1.3em;
  line-height: 1.4em;
  font-weight: normal;
  border-radius: 8px;
}

.banner-box, .banner-boxr {
  width: 40%;  
  padding: 16px 30px 16px 30px;
  font-size: 1.3em;
  line-height: 1.4em;
  font-weight: normal;
  border-radius: 8px;
}
.banner-box {
  float: left;
}

.banner-boxr {
  float: right;
}