/* added 6/29/26 */

@font-face {
    font-family: 'nicefont';
    src: url('../webfonts/nicefont.woff2') format('woff2'),
         url('../webfonts/nicefont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
    font-family: nicefont,  Lucida Sans Unicode, sans-serif; 
	color: #000; */#663366*/
    }

/* links: */
a:link {color: #000099;}
a:visited {color: #936;}
a:active {color: #FF0000;}
a:hover {color: #FF0000;}  

p {padding: 5px 5% 5px 5%}

h1 {color: #FFCCCC; 
	font-size: 36pt; 
	font-weight:bold;}
	
h1.right-align {text-align: right;
				margin-right: 20%}
				
h2 {margin-left: 5%;
	color: #930;
	font-size: 24pt; 
	font-weight:bold;}
				
.pullout {font-size: 24px; 
	color: #000066}

.pullout_violet {font-size: 24px; 
	color: #993366}
	
.pullout_orange {font-size: 24px; 
	color: #CC6600}
	
.pullout_red {font-size: 24px; 
	color: #CC0000}
	
.larger {font-size: larger;}
	

/* LEFT FROM PREVIOUS VERSION */

/* bordered box for label with background: */
div.label {
    border: 16px outset #ccc; /* silver */
/*    margin: 18px 0px 36px 0px;  */
    margin: 0px 0px 36px 0px;  
    padding: 18px 18px 0px 18px; 
    }

body.verse-comments {
    background: #fff;        /* white */
    background-image: url(../graphics/polygons.gif);
    color: #000;             /* black */
    font-family: Lucida Sans Unicode, sans-serif;
    margin: 0px 18px;
    }
	
h1.verse-label {
    background-color: #ccc; /* silver, just in case */
    background-image: url(../graphics/marblefleursmall.jpg);
    color: #fff;             /* white */
    font-size: 32px;
    font-weight: normal;
    margin: 0px;
    padding-top: 83px; 
    text-align: center;
    text-transform: uppercase;
    width: 200%;
        /* For the others, this will be width=auto.
           Why 200% rather than 100%  Who knows?     */
    /* added by GAT on 11 Dec 2004 to deal with Urdu spacing problem */
    /* which appears on IExplorer but not on Mozilla */
    height: 40px;
    }


/* bordered box with verse text and translation: */
div.verse {
    border: 16px outset #ccc;  /* silver */
    margin: -48px 0px 24px 0px;  /* reduce top margin by 72px */
    width: 200%;
        /* For the others, this will be width=auto.
           Why 200% rather than 100%  Who knows?     */
    }

div.verse div.boxer {
    /* border: 1px solid black; */
    display: block;
    margin: 0px 16px 16px 16px;
    padding: 1px 1px 1px 4px;
    }

h2.verse-number {
    font-size: 32px;
    font-weight: normal;
    margin: 0px;
    }

p.text {
    font-size: 24px;
    }

p.text strong {
    font-weight: normal;
    }

p.translation {
    font-size: 16px;
    }

span.divan {
    font-weight: normal;
    }

/*  notes section: */
h3.notes-label {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 0px;
    margin-top: 32px;
    }

p.note {
    font-size: 16px;
    margin: 0px;
    text-indent: 1em;
    }

p.platts-link {
    font-size: 16px;
    margin-top: 18px;
    text-indent: 1em;
    text-transform: uppercase;
    }

/* commentary section: */
div.commentary {
    }

h3.commentator {
    font-size: 24px;
    font-variant: small-caps;
    font-weight: normal;
    margin-bottom: 0px;
    margin-top: 32px;
    }

p.comment {
    font-size: 16px;
    margin-top: 0px;
    }

p.indent {
    font-size: 16px;
    margin-top: 0px;
    text-indent: 1em;
    }

/* bottom navigation bar (to make this less than full width it would
   have to be inline within a block element, or placed in a table): */
div.navbar {
    border: 8px outset #ccc; /* silver */
    font-size: 16px;
    margin: 24px 5%;
    text-align: center;
    }

div.navbar div.boxer {
    border-left: thin solid black;
    border-top: thin solid black;
    padding-bottom: 2px;
    }

em.urdu {
    font-style: italic;
    }