/* sleet_0180.css */
/* 
  colors (10/1/17)
	text color = 464658
	link color = 576b6d
	link hover = 7e7b7e
	page background=f7fdfd

*/

/* Working Sequence : */
/*
Base

B01. meyer style reset : most tags
	- Enhancements and Exceptions to style reset :

B02. Site Defaults : Background and Text
   -  B02.01  html, body and basic form defaults
	- background color and image
	- base font family, color, text shadow
	- base margin, padding, indent
   -  B02.02  lists and list elements
	- list types, bullet style
   -  B02.03  heading and paragraph styles (note : p uses body defaults as of v8)
	- font and color overrides, font size and weight, line height, margin, padding, indent

B03. HTML5-specific tags to display :block

B04. Anchor tags
	- font family, color, size, weight, hover/visited

B05. Form-specific hacks and cheats
	- included for reset; future development only

Metro Disruptors

Standard

S01. body classes (.main, etc)
S02. content header (header, h1, h2 classes)
   - header 

S03. non-header h3-6 tags and classes
   - h3-6
   - main
   - blank

S04. standard features of main
  - main-panels 
  - main-announcements (container)


S05. navs of different types
   - nav
   - small format (iPhone)
   - vertical format (phone, tablet) 
   - nav anchors
     - padding
     - font

S06. article and genre class

S07. page-specific styles
   - archive styles 
   - about us styles 
   - submission styles 

S08. <p> styles
S09. bio styles 

(custom styles go here)

S20. footer (last element in css, following custom)


Custom
C01. 

*** ( No custom styles yet )  ***

*/

/* B01 - meyer reset style */
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin : 0;
  padding : 0;
  border : 0;
  font-size : 100%;
  letter-spacing : .18px;
  vertical-align : baseline;
  text-decoration : none;
}

/* Exceptions and enhancements to above */

	/* 1) Always force a scrollbar in non-IE
	2) Remove iOS text size adjust without disabling user zoom : www.456bereastreet.com/archive/201012/		
	controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
	/* fails validation at w3.org */
html { overflow-y : scroll; 
	-webkit-text-size-adjust :100%; 
	-ms-text-size-adjust :100%; 
}

/* B02 - Background and Text 
   B02.01 :  Body Defaults */
body, select, input, textarea {
   color : #464658; 
   text-shadow : none;
   
  /* Set your base font here, to apply evenly */
   font-family : Arial, Helvetica, sans-serif;
   font-weight : normal;
   font-style : normal;
   font-variant : normal;
}

/* now we're sleet-specific */
body {
  background : url('../images/ice_crystal_rain_v9n2.png') repeat left top #f7fdfd; 
/*   background-color : #f7fdfd;*/
}

/* Small Format */
  @media screen and (max-device-width : 320px){
  body{
	-webkit-text-size-adjust :none; /*does not exist per w3c validator*/
	font-family : pt-sans-narrow, Helvetica, Arial, Verdana, sans-serif;
	font-size : 1.2em;

    }
}
/* Android */
  @media screen and (min-device-width : 321px) and (max-device-width : 800px){
  body{
	-webkit-text-size-adjust :none; /*does not exist per w3c validator*/
	font-family : pt-sans-narrow, Helvetica, Arial, Verdana, sans-serif;
	font-size : 1.3em;
    }
}

/* Vertical format */
  @media screen and (max-device-width : 1024px) /*and (min-device-width : 768px)*/ and (orientation : portrait){
  body{ 
	letter-spacing : -.1px;
	word-spacing : -.1px;
	}
}

/* body classes (e.g. .main) are in S01.*/

/* B02.02  Lists : also see navs */
ol,ul,li { list-style :none; list-style-image : none; }
ul, ol { margin-left : 1em; margin-right : 1em;}
ol { list-style-type : decimal; }

/* Small Vertical format */
  @media screen and (max-device-width : 1024px) /*and (min-device-width : 768px)*/ and (orientation : portrait){
    ul, ol { font-size : 1.8em; line-height : 2em;}
}
  @media screen and (max-device-width : 320px) and (orientation : portrait){
   li {font-size : 1em;}
}
/* Android */
  @media screen and (min-device-width : 321px) 
	and (max-device-width : 800px) 
	and (orientation : portrait){
   ul,ol,li {font-size : .9em;}
}

/* B02.03  Selection is a CSS3 selector */
/* These selection declarations have to be separate
No text-shadow : twitter.com/miketaylr/status/12228805301 */
  /* fails validation at w3.org : "Unknown pseudo-element.." */
 : :-moz-selection { background : #f7fdfd; color :#464658; text-shadow : none; }
 : :selection { background :#f7fdfd; color :#464658; text-shadow : none; }


/* B02.04  heading and paragraph styles */
h1, h2, h3, h4, h5, h6 { font-weight : bold; margin : .2% .5%; text-align : center;}
h1,h2,h3,h4 {}
h1 { font-size : 2.3em; margin : .5% .5%; letter-spacing : .1em; word-spacing : .03em;}
h2 {font-size : 1.2em; border-bottom : solid .7em #245677; padding-bottom : .3em;}
/*h2,h3 {. : #d11309;}*/
h3 { }
h4 { font-size : 1.2em; }
h5 {font-size : 1.2em; padding : .4% .4%;}
h6 {font-size : .9em; }
p { margin : .5em 1.8em; padding : 0 0 1em 0 ; text-indent : 0; font-size : 1em; font-weight : normal; }

td { vertical-align : top; }
small { font-size : 85%; }
b, strong, th { font-weight : bold; }
/* Set sub, sup without affecting line-height : gist.github.com/413930 */
sub, sup { font-size : 75%; line-height : 0; position : relative; }
sup { top : -0.5em; }
sub { bottom : -0.25em; }




/* Small Vertical Format */
  @media screen and (max-device-width : 320px) and (orientation : portrait){
  h1, h2, h3, h4, h5, h6{
	-webkit-text-size-adjust :none; /*does not exist per w3c validator*/
	font-family : pt-sans-narrow, Helvetica, Arial, Verdana, sans-serif;
	}
  h1 {
	font-size : 3.2em;

	}
  h2 {  border-bottom : solid .4em #245677; 
	padding-bottom : .3em;
	font-size : 2.1em;
    }
  h3 {
	font-size : 2.2em;
    }
  h4, h5, h6{
	font-size : 1.8em;
	letter-spacing : -.03em;
	word-spacing : -.03em;
	line-height : 1em;
     }
  h4{	font-size : 2.2em;
    }
  h6{
	  font-size : 1.8em;
     }

  h5 a { /* added to fix over-wide line spacing */
	/*font-size : 24px; */
	line-height : 1em; 
	padding : .3em 0 0 0; 
	text-indent : -8px; 
     }

  p { letter-spacing : -.3px;
	font-size : 2em;
	line-height : 2em;
    }

}
/* Android */
@media screen and (min-device-width : 321px) 
	and (max-device-width : 800px) 
	and (orientation : portrait){
   h1, h2, h3, h4, h5, h6{
	-webkit-text-size-adjust :none; /*does not exist per w3c validator*/
	padding :3px; 
	font-family : pt-sans-narrow, Helvetica, Arial, Verdana, sans-serif;
	}
   h1{
	font-size : 2em;
	margin-bottom : 0;
	}  
   h2{	
	font-size : 1.7em;
	border-bottom : solid .3em #245677;
     }
   h3{
	/*border : solid 1px #dd2222;*/
	letter-spacing : -.02em;
	word-spacing : -.02em;
	font-size : 1.5em;
	}
  h4, h5, h6{
	padding : 3px;
	font-size : 1.3em;
	letter-spacing : -.03em;
	word-spacing : -.03em;
	line-height : 1.2em;
    }
  h4{	font-size : 2.2em;
    }
  h5{	font-size : 1.7em;
    }

 p, a{
	font-size : 1.6em;
	line-height : 1.6em;
    }
  li{ font-size : 1.6em;
    }
}


/* Vertical format */
  @media screen and (max-device-width : 1024px) /*and (min-device-width : 768px)*/ and (orientation : portrait){
  h1, h2, h3, h4, h5, h6{ 
	/*background : url('../images/whatever.jpg') repeat left top #f7fdfd; */
	letter-spacing : -.2px;
	word-spacing : -.2px;
	}
}
 @media screen and (max-device-width : 320px) 
	and (orientation : portrait){
   h3{
	font-size : 2.1em;
    }
}
 @media screen and (min-device-width : 321px) 
	and (max-device-width : 800px) 
	and (orientation : portrait){
   h3{
	font-size : 2.3em;
    }
}

/* iPhone 5 etc landscape */
@media only screen 
   and (max-device-width : 374px)
   and (orientation : landscape) {
 h3{
	font-size : 1.5em;
	}
  
}
/* iPhone 6 / Android in landscape */
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) {
  h1{
	font-size : 2em;
	margin-bottom : .2em;
	}  
   h2{	
	font-size : 1.3em;
	border-bottom : solid .3em #245677;
     }
   h3{
	font-size : 1.6em;
     }
}

/* B02.05  some IE dot hacks */
.ie6 legend, .ie7 legend { margin-left : -7px; }
/* Bicubic resizing for non-native sized IMG :
code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
  /* fails validation at w3.org */
.ie7 img { -ms-interpolation-mode : bicubic; }



/* B02.06  Normalize monospace sizing :
en.wikipedia.org/wiki/MediaWiki_talk :Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family : monospace, sans-serif; }
pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  /* fails validation at w3.org */
	white-space :pre; 
	white-space :pre-wrap; 
	word-wrap :break-word; 
	padding :15px;
}

/* B03 - HTML5-specific */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display : block;
}
footer,#footer {margin-top : 1em;}


/* B04 - Anchor styles, hacks, cheats */ 
  
/* j.mp/webkit-tap-highlight-color */
/* fails vaildation at w3.org */
a :link { -webkit-tap-highlight-color : #2e3042; }

/* Accessible focus treatment : people.opera.com/patrickl/experiments/keyboard/test */
/* warning at csslint : outlines should only be modified using :focus */
a :hover, a :active { outline : none; -moz-outline-style :none;}
a, a :active, a :visited { color : #576b6d; text-decoration : none; }
a :hover { color : #7e7b7e; }

/* add no-hover variations for phone and tablet?  */

/* iPhone 6 / Android in landscape */
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) {
    font-size : 1em;
}

#page-head { color : #464658; }

/* B05 - form-specific styles, hacks, cheats */

/* ** see above input and textarea style definitions ** */

/* 1) Make inputs and buttons play nice in IE : www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
2) WebKit browsers add a 2px margin outside the chrome of form elements.
Firefox adds a 1px margin above and below textareas
3) Set font-size to match <body>'s, and font-family to sans-serif
4) Align to baseline */
button, input, select, textarea { 
	width : auto; 
	overflow : visible; 
	font-size : 100%; font-family : sans-serif; vertical-align : baseline; }

/* 1) Remove default scrollbar in IE : www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/
2) Align to text-top */
textarea { overflow : auto; vertical-align :text-top; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor : pointer; }

/* Remove extra padding and inner border in Firefox */
  /* fails validation at w3.org */
input : :-moz-focus-inner,
button : :-moz-focus-inner { border : 0; padding : 0; }

/* Colors for form validity */
  /* fails validation at w3.org, csslint.net */
input :valid, textarea :valid { }
input :invalid, textarea :invalid { border-radius : 1px; -moz-box-shadow : 0 0 5px; -webkit-box-shadow : 0 0 5px; box-shadow : 0 0 5px; }
.no-boxshadow input :invalid, .no-boxshadow textarea :invalid { background-color : #f7fdfd; }



/* Metro style elements */ 


.metro{
/* container div for boxes */
   width : 98%;
   margin : 0 1%;
   overflow : auto;
   background-color : #f7fdfd;
}

.box, .box-right{
	float : left;
	margin : 0 1%;
	width : 98%;
	min-height : 1.5em;
	overflow : visible;
}
.box-right{
	float : right;
	text-align : right;
}
/* Small Format */
@media screen and (max-device-width : 320px) {
  .box, .box-right{
	min-width : 90%;
	max-width : 98%;
	min-height : 1.5em;
	overflow : visible;
	}
  }


/* Small Vertical Format */
@media screen and (max-device-width : 320px) and (orientation : portrait){
  .box, .box-right{
	min-width : 90%;
	max-width : 98%;
	min-height : 120px;
	overflow : visible;	
	}
  .box-right{
	max-width : 98%;
	min-height : 0;
	}
  }

.box-stop{
	clear : left;
}
.box-stop-right{ clear : right;}

.box-header{
	/*background : url('../images/ice_crystal_rain_v9n2.png') repeat left top #f7fdfd; */
	/*position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	overflow : visible;*/
	margin-left : 0;
	margin-bottom : 2px;
}

.box h1 {
	margin : 0;

}
.box h2 {margin-left : 0;}


/*.box001, .box001 a, .box001 h4, .box001 h4 a, .box001 h5, .box001 h5 a, .box001 h6 a, .box001 p a*/
.box001, .box001 h4, .box001 h5, .box001 h6, .box001 p {
	background-color : #f7fdfd;
	color : #464658;
	
}
.box001 {padding-bottom : .3em;}
.box001 a{color : #576b6d; }
.box001 h6 a {padding-left : 1em;}
.box001 a :link { -webkit-tap-highlight-color : #7e7b7e; }

.box001 a :active { color : #576b6d; ; outline : none; -moz-outline-style :none;}
.box001 a :hover { color : #7e7b7e; }

.box001 a :visited { color : #576b6d;  text-decoration : none; }


/*.box002, .box002 h1 a, .box002 h4, .box002 h4 a, .box002 h5, .box002 h5 a, .box002 h6 a, .box002 p a*/
.box002, .box002 h4, .box002 h5, .box002 h6, .box002 p {
	background-color : #f7fdfd; 
	color : #464658;
	
}
.box002 {padding-bottom : .3em;}
.box002 a{ color : #576b6d; }
.box002 h6 a {padding-left : 1em;}
.box002 a :link { -webkit-tap-highlight-color : #7e7b7e; }

.box002 a :active { color : #576b6d;   outline : none; -moz-outline-style :none;}
.box002 a :hover { color : #7e7b7e; }

.box002 a :visited { color : #576b6d;   text-decoration : none;}


.box003, .box003 h4, .box003 h5,.box003 h6, .box003 p{
	background-color : #f7fdfd;
	color : #464658;
}
.box003 {padding-bottom : .3em;}
.box003 a{margin : 0; color : #576b6d; }
.box003 h6 a {padding-left : 1em;}
.box003 a :link { -webkit-tap-highlight-color : #7e7b7e; }

.box003 a :active {color : #576b6d;  outline : none; -moz-outline-style :none;}
.box003 a :hover { color : #7e7b7e; }

.box003 a :visited { color : #576b6d;  text-decoration : none;}


.box004, .box004 h4, .box004 h5, .box004 h6, .box004 p{
	background-color : #f7fdfd;
	color : #464658;
}
.box004 {padding-bottom : .3em;}
.box004 a{color : #576b6d; }
.box004 h6 a {padding-left : 1em;}
.box004 a :link { -webkit-tap-highlight-color : #7e7b7e; }

.box004 a :active { color : #576b6d;   outline : none; -moz-outline-style :none;}
.box004 a :hover { color : #7e7b7e;}

.box004 a :visited { color : #576b6d;  text-decoration : none;}



.box005, .box005 h4, .box005 h5, .box005 h6, .box005 p{
	background-color : #f7fdfd;
	color : #464658;
}
.box005 {padding-bottom : .3em;}
.box005 a{color : #576b6d;}
.box005 h6 a {padding-left : 1em;}
.box005 a :link { -webkit-tap-highlight-color : #7e7b7e; }

.box005 a :hover { color : #7e7b7e; }

.box005 a :active { color : #576b6d;  outline : none; -moz-outline-style :none;}
.box005 a :visited { color : #576b6d;  text-decoration : none;}


/* Small Format */
@media screen and (max-device-width : 320px) {
 .box001 h3, .box002 h3, .box003 h3, .box004, .box005 h3 {
	padding-bottom : .2em;
	/*border : solid 1px #245677;*/
  }
  .box001 h4, .box002 h4, .box003 h4, .box004, .box005 h4  {
	font-size : 1.6em;
	line-height : 1.1em;
	/*border : solid 1px #245677;*/
  }
   .box001 h5, .box002 h5, .box003 h5, .box004, .box005 h5 { 
	font-size : 1.1em;
	line-height : .9em;
	text-indent : -.8em;
  }
  .box001 h6, .box002 h6, .box003 h6, .box004, .box005 h6 {
	font-size : 1em;
	line-height : 1.4em;
  }
}

/* Small Vertical Format */
@media screen and (max-device-width : 320px) and (orientation : portrait){
  .box001 h4, .box002 h4, .box003 h4, .box004 h4{
	font-size : 2.5em;
	line-height : 2em;
  }
  .box001 h5, .box002 h5, .box003 h5, .box004 h5{ 
	font-size : 1.6em;
	line-height : 1em;
	
    /*border : solid 1px #245677;*/
  }
  .box001 h6, .box002 h6, .box003 h6, .box004 h6{
	font-size : 1.9em;
	line-height : 1.3em;
  }
  .box005 h3, .box005 h4, .box005 h5, .box005 h6{
	font-size : 1.3em; 
	line-height : .7em;
	}
}


/*  Standard Section -- styles that make basic Sleet*/

/* S04. standard features of main */


 .author-main {
	margin-top : .7em;
	line-height : .9em;
}
 .title-main {
	margin-top : .1em;
	margin-bottom : .2em;
	line-height : .9em;
}
.cartoon-main {
   margin : 2em 6% 0;
   width : auto;
   text-align : center;
 
}

@media screen and (max-device-width : 320px) and (orientation : portrait){
  .cartoon-main {
   width : 94%;
   margin : 2em 3% 0;
   padding : 0;
  }
}
/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait){
  .cartoon-main {
  width : 92%;
  margin : 3em 4% 0;
  }
}
 .main-announcements {
	position : static;
	width : 72%;
	margin : 0 14%;
  
}
 .main-announcements h3, .main-announcements h4 {
	font-weight : bold; 
	margin : .2% .5%; 
	text-align : center;
	font-size : 1.5em;
	line-height : 1.1em;
}
 .main-announcements h3 {
	margin-top: -5em;
}	
 .main-announcements h4 {
	 font-size : 1.1em;
	 letter-spacing : .03em;
 }
 .main-anouncements h4 .genre{
	font-style : italic;
}
 .main-announcements h4 a:hover {
	 color : #343499;
 }

 .main-announcements-side-cartoon {
	position : relative;
	text-align:left;
	width : 15%;
	left : -2%;
	bottom : -2.5em;

	
}
/* iPhone5 */
@media screen and (max-device-width : 320px) and (orientation : portrait){
    .main-announcements h3 {
   font-size: 1.8em; padding : .6em 0;
  }.main-announcements h4 {
   font-size: 1.7em;
   margin-bottom : .7em;
  }
 .main-announcements-side-cartoon {
 left : -8%;
 
  }
}

/* iPhone5 */
@media screen and (max-device-width : 320px) and (orientation : landscape){
    .main-announcements h3 {
   font-size: 1.8em; padding : .6em 0;
  }
.main-announcements h4 {
   font-size: 1.5em;
   margin-bottom : .7em;
   line-height : 1.6em;
  }
}

/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait){
    .main-announcements h3 {  font-size: 1.7em; padding : .6em 0;  }
    .main-announcements h4 {   font-size: 1.1em; }
    .main-anouncements h4 .genre { font-size : 1.7em;}
    .main-announcements-side-cartoon {left : -8%;}
 
}
/* android landscape */

@media screen and (min-device-width : 321px) and (max-device-width : 1024px) and (orientation : landscape){
 	.main-announcements h4 { line-height : 1.8em;}
}
/* S05. Navigation tags */

  /* generic nav and ul tags; 
     li widths differentiated based 
     on the number of tags per page
*/
/* S05.01 - nav, > ul, li */
nav, #nav, .nav{
	color : #576b6d;
    font-weight : bold;
	text-align : center;
}
.nav-holder-main {
	margin-top : .3em;
	margin-bottom : 2em;
	text-align : center;
}

/* Small Format -- validated with iPhone5 4/16/14*/
  @media screen and (max-device-width : 320px){
    nav, #nav, .nav, .nav a :active, .nav a :visited, .nav a :link {
	letter-spacing : -.02em;
	word-spacing : -.02em;
	line-height : .9em;
    }
}
  @media screen and (max-device-width : 320px) and (orientation : portrait){
    nav, #nav, .nav, .nav a :active, .nav a :visited, .nav a :link {
	word-spacing : -.03em;
	font-size : 1.9em;
	line-height : .8em;
	}
	.nav-holder-main {
	/* small portrait format only */
		margin-bottom : .3em;
	}
}

.backnav, .nav-main, .backnav-main{
	color : #576b6d;
	font-weight : bold;
	text-align : center;
	line-height : 1.8em;
}
.backnav-main{
	margin-top : 1.7em;
	
}
.backnav{
	margin-top : 1.2em;
}

@media screen and (max-device-width : 320px) and (orientation : portrait){
  .backnav {
	font-size : 2em;
	line-height : 1.2em;
	letter-spacing : -.02em;
    	word-spacing : .01em;
	margin-top : .8em;
	margin-bottom : .5em;
	
    }
  .nav-main, .backnav-main {
    padding : 0 .3em;
    word-spacing : -.03em;
    font-size : 1em;
    line-height : 1em; 
    }
  .backnav-main {
   padding-top : 2em;
   }
}

/* Android */
@media screen and (min-device-width : 321px) 
	and (max-device-width : 800px)
	and (orientation : portrait){
  .backnav {
	font-size : 1.6em;
	line-height : 1em;
	letter-spacing : -.02em;
	word-spacing : .01em;
	margin-top : .5em;
	margin-bottom : .5em;
    }
 .nav-main, .backnav-main
    { 
    padding : 0 .3em;
    word-spacing : -.03em;
    letter-spacing : -.03em;	
    font-size : 1.6em;
    line-height : 1em; 
    }
  .backnav-main {
   font-size : 1.1em;
   margin-bottom : 1.7em;
   }

}

/* S06. Genre and article styles */
.genre h3, h4, h5{
}
.genre h3{ 
	margin-top : .5em;
	margin-bottom : .3em;
	font-size : 2.3em;
	font-style : italic;
}
.genre h4{
	margin-top : .5em;
	margin-bottom : .1em;
	font-size : 1.4em;
}
.genre h5{
	margin-top : 0;	
	margin-bottom : 0;
	line-height : 1em;
}

@media screen and (max-device-width : 320px) and (orientation : portrait){
  .genre h3,h4,h5{
	text-indent : 0;
	}
  .genre h3 { font-size : 3em; padding-top : .5em;}	
  .genre h4 { font-size : 2.1em;}
  .genre h5 { font-size : 1.6em;}
}
/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait){
  .genre h3,h4,h5{
	text-indent : 0;
	line-height : 1.8em;
	}
  .genre h3 { font-size : 4em; padding-top : .5em;}	
  .genre h4 { font-size : 1.8em;}
  .genre h5 { font-size : 1.3em; line-height : 1.1em;}
}
/* iPhone5 landscape */
@media screen 
	and (min-device-width : 320px) 
	and (max-device-width : 374px) 
	and (orientation : landscape){
  .genre h3,h4,h5{
	text-indent : 0;
	line-height : 1.2em;
	}
  .genre h3 { font-size : 2.5em; padding-top : .5em;}	
  .genre h4 { font-size : 2em;}
  .genre h5 { font-size : 1.2em; line-height : 1.1em;}
}
/* iPhone 6 / Android in landscape */
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) {
  .genre h3,h4,h5{
	text-indent : 0;
	line-height : 1.2em;
	}
  .genre h3 { font-size : 1.8em; padding-top : .5em;}	
  .genre h4 { font-size : 1.3em;}
  .genre h5 { font-size : 1em; line-height : .9em;}
}

/*article { */
/* follow box-header *//*
	position : absolute;
	top : 8em;
	width : 100%;
	overflow : hidden;
*/	
}

/* S07.  Page-specific styles */

/* S07.1  archive style */

p.archive{
	position : fixed;
	top : 0%;
	left : 12px;
	width : 100%;
	padding : 0 6px;
	font-size : 1.17em;
	font-style : oblique;
	line-height : normal;
	font-variant : normal;
	text-transform : none;
}
.arch-link{
	font-weight : bold;
	font-style : oblique;	
}

/* Small Format */
@media screen and (max-device-width : 480px){
	p.archive {font-size : 2em; line-height : 2.1em; letter-spacing : -.02em;}
}

.a-z-list {  
	width : 62%;
   padding : 0 8% ;
}
.a-z-list h4{
   padding-top : 1%;
   padding-left : .5em;
   text-indent : -1em;
   font-size : 2.5em;
}

.a-z-list h5{
	text-indent : -1em;
	font-size : .9em;


}
/* S07.2  used on "about us" page */
.aboutus{
/* outer container for staff bios */
	clear : left;
	display : block;
	overflow : visible;
	padding-top : .5em;
	padding-left : 1.5em;
}	

.aboutus > h4, .aboutus h5{
	position : static;
	/*top : -36px;
	text-indent : -32px;*/
	font-size : .9em;
	line-height : 1em;
	font-weight : normal;
}
.aboutus h4{
	font-size : 1.2em;
	padding-top : 2em;
		
}
.aboutus h5{
	font-size : 1em;
	font-weight : bold;
}

.aboutus img{
	position : relative;
	left : 2.5%;
	top : -72px;
	font-size : .9em;
	line-height : 1em;
	font-weight : normal;
	text-indent : 1em;
	min-height : 2em;
	margin-bottom : -5em;
	text-align : center;
}

.aboutus p{
position : static;
left : 20%;
width : 78%;
top : -4em;
	font-size : .9em;
	line-height : 1em;
	font-weight : normal;
	text-indent : 1em;
}


/* Small Format */

@media screen and (max-device-width : 480px) and (orientation : portrait){
  .aboutus img{
	max-width : 20%;
	margin-bottom : .5em;
	}
  .aboutus p{
	font-size : 1.8em;
	}
  .aboutus p a{
	font-size: 1em;
	}
  .aboutus h5{
	font-size : 2em;
	line-height : 2.3em;
	}
  .aboutus h4{
	font-size : 2.3em;
	line-height : 2.5em;
	}
}
/* iPhone5 landscape */
@media screen
	and (min-device-width : 320px)
	and (max-device-width : 374px)
	and (orientation:landscape){
   .aboutus img{
	margin-bottom : .5em;
	}
   .aboutus p{
	left : 16%;
	width : 82%;
	top : -5em;
	}
}
/* Android landscape */
@media screen 
	and (min-device-width : 375px) 
	and (max-device-width : 667px) 
	and (orientation : landscape){
   .aboutus img{
	margin-bottom : .5em;
	}
   .aboutus p{
	left : 16%;
	width : 82%;
	top : -5em;
	}
}

/* S07.3  used on submissions page */
h4.submissions{
	font-size : 1.5em;	
}

ul.submissions{ 
   list-style-image : url("../images/woman_sm.gif");
	list-style-type : disc;
	list-style-position : outside;
}

h6.submissions{

}
 .emphatic{
/* used on submissions page to emphasize "we are closed" */
   font-size : 1.2em;
   font-weight :bolder;
}

/* S07.4  used on selected pages */

#content-header{
   /* container for author and title info 
	at top of selected page */
   padding-top : .5em;
   padding-bottom : 1em;
   /*border-bottom : solid .8em #245677;*/
}

#content-header h5{
   margin-top : 0;
   margin-bottom : 0;
   padding-top : 0;
   padding-bottom : 0;
}


h4.author{
   display : block;
   font-size : 1.8em;
   text-indent : .5em;
   line-height : 1.5em;
}
h4.author-interview{
   /*font-size : 1.3em;*/
   line-height : 1.5em;
}

/* Small Format */
@media screen and (max-device-width : 480px){
  h4.author, h4.author-interview {
 font-size : 1.2em;
  }
}
/* Small Format :  iPhone with portrait orientation */
@media screen and (max-device-width : 320px) and (orientation : portrait){
  h4.author, h4.author-interview {
  font-size : 2.6em;
  }
 #content-header{padding-bottom : .7em;}
 #content-header h5{padding-bottom : 0;}
}

/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait){
  h4.author, h4.author-interview {
  font-size : 2.8em;
  clear :left;
  padding-top : 1.2em;
  padding-bottom : .5em;
  }
}
/* landscape small */
@media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 375px) 
	and (orientation : landscape){
   h4.author {
	font-size : 2.2em;
	letter-spacing : .01em;
	line-height : 1.6em;
   }
}

/* landscape big */
@media only screen 
	and (min-device-width : 375px) 
	and (max-device-width : 667px) 
	and (orientation : landscape){
   h4.author {
	font-size : 1.8em;
	letter-spacing : .01em;
	line-height : 1.6em;
   }
}


/*a*/
.piece-title{
	display : block;
	text-align : center;
	margin : .3em 0 .7em 0;
	text-decoration : none;
	color : #464658;
	font-size : 1.2em;
	line-height : 1.2em;
}

.piece{
  display : block;
  margin : 0 18%;
  padding : 1% 3% 3% 3%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 58%;
}

.piece-mid-wide{
  display : block;
  margin : 0 16%;
  padding : 1% 3% 3% 3%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 62%;
}
.piece-wide{
  display : block;
  margin : 0 12%;
  padding : 1% 5% 3% 5%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 66%;
}
.piece-wider{
  display : block;
  margin : 0 12%;
  padding : 1% 5% 3% 5%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 68%;
}
.piece-much-wider{
  display : block;
  margin : 0 12%;
  padding : 1% 5% 3% 5%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 68%;
}

.piece-mid-narrow{
  display : block;
  margin : 0 32%;
  padding : 1% 2% 3% 2%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 32%;
}
.piece-narrow{
  display : block;
  margin : 0 29%;
  padding : 1% 4% 3% 4%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 34%;
}

.piece-narrower{
  display : block;
  margin : 0 32%;
  padding : 1% 2% 3% 2%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 32%;
}
.piece-much-narrower{
  display : block;
  margin : 0 41%;
  padding : 1% 2% 3% 2%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 14%;
}


.piece h5, .piece-wider h5{
  margin-top : 1%; margin-bottom : 3%;
}

.piece a :hover { color : #2e3042;}


/* Small Formats */
@media screen and (min-width : 801px) and (max-width : 1024px){
  #content-header .piece-title	{ margin-left : 0; margin-right : 0;  font-size : 1.6em;}
  .piece-wider {width : 76%; margin : 0 12%; padding: 0;}
  .piece, .piece-mid-wide {width : 70%; margin : 0 10%; padding: 0 5%;}
  .piece-narrow {width : 54%; margin : 0 23%; padding :0; }
  .piece-narrower {width : 50%; margin : 0 25%; padding: 0;}
  .piece-much-narrower {width : 20%; margin : 0 40%; padding: 0;}
}


@media screen and (min-width : 321px) and (max-width : 800px){
  #content-header .piece-title	{ margin-left : 0; margin-right : 0; font-size : 1.6em;}
  .piece-wider{width : 84%; margin : 0 8%; padding :0;}
  .piece-wide { width : 80%; margin : 0 10%; padding: 0;}
  .piece-mid-wide { width : 76%; margin : 0 12%; padding: 0;}
  .piece, .piece-mid-narrow { width : 70%; margin : 0 10%; padding : 0 5%;}
  .piece-narrow { width : 40%; margin : 0 30%; padding : 0;}
  .piece-narrower{width : 32%; margin : 0 34%; padding : 0;}
  .piece-much-narrower{width : 20%; margin : 0 40%; padding : 0;}
}

@media screen and (min-width : 321px) and (max-width : 479px){
  #content-header .piece-title	{ margin-left : 0; margin-right : 0;}
  .piece-wider { width : 96%; margin : 0 2%; padding: 0;}
  .piece-wide { width : 90%; margin : 0 10%; padding: 0;}
  .piece-mid-wide { width : 86%; margin : 0 7%; padding: 0;}
  .piece, .piece-mid-narrow { width : 80%; margin : 0 10%; padding: 0;}
  .piece-narrow {width : 68%; margin : 0 16%; padding: 0;}
  .piece-narrower { width : 50%; margin : 0 25%; padding :0;}
  .piece-much-narrower{width : 20%; margin : 0 40%; padding : 0;}
}

/* Small Format :  iPhone with portrait orientation */
@media screen and (max-device-width : 320px) and (orientation : portrait), (max-width : 320px) {
  #content-header .piece-title { margin-left : 0; margin-right : 0;}
  .piece-wider{ width : 90%; margin : 0 5%; padding :0;}
  .piece-wide { width : 84%; margin : 0 8%; padding: 0;}
  .piece-mid-wide{  width : 68%; margin : 0 16%; padding :0;}
  .piece, .piece-mid-narrow {  width : 80%; margin : 0 10%; padding :0;}
  .piece-narrow {width : 78% ; margin : 0 11%; padding :0;}
  .piece-narrower {width : 32%; margin : 0 34%; padding : 0;}
  .piece-much-narrower{width : 40%; margin : 0 28%; padding : 0 2%;}
}

@media screen and (min-device-width: 321px) and (max-device-width : 800px) and (orientation : portrait){
	 .piece-mid-narrow { width : 82%; margin : 0 9%; padding :0; }
	 .piece-narrow { width : 80%; margin : 0 10%; padding : 0;}
	 .piece-much-narrower{width : 42%; margin : 0 27%; padding : 0 2%;}
}

/* Small Format :  iPhone with landscape orientation */
@media screen and (min-device-width : 320px) 
	and (max-device-width : 375px) and (orientation : landscape){
  .piece-wider{width : 76%; margin : 0 12%; padding :0;}
  .piece-wide { width : 72%; margin : 0 19%; padding: 0;}
  .piece-mid-wide {width : 38%; margin : 0 31%; padding : 0;}
  .piece {width : 56%; margin : 0 22%; padding : 0;}
  .piece-mid-narrow { width : 48%; margin : 0 26%; padding : 0;}
  .piece-narrow { width : 52%; margin : 0 24%; padding : 0;}
  .piece-narrower{width : 32%; margin : 0 34%; padding : 0;}
  .piece-much-narrower{width : 32%; margin : 0 34%; padding : 0;}
}
@media screen and (min-device-width : 376px) 
	and (max-device-width : 667px) and (orientation : landscape){
  .piece-wider{width : 76%; margin : 0 12%; padding :0;}
  .piece-mid-wide {width : 48%; margin : 0 21%; padding : 0 5%;}
  .piece {width : 70%; margin : 0 10%; padding : 0 5%;}
  .piece-mid-narrow  {width : 52%; margin : 0 19%; padding : 0 5%;}
  .piece-narrow { width : 58%; margin : 0 21%; padding : 0;}
  .piece-narrower{width : 32%; margin : 0 34%; padding : 0;}
  .piece-much-narrower{ width : 32%; margin : 0 34%; padding : 0;}
}


/* S08. <p> styles */

p.flush-left {
   text-align : left;
   letter-spacing : .02em;
   line-height : 1.6em;
}

p.poetry-flush-left, p.poetry-flush-left-5, p.poetry-flush-left-8, p.poetry-flush-left-12, p.poetry-flush-left-20, p.poetry-flush-left-32 {	/* wider between lines, less between stanzas */
   text-align : left;
   letter-spacing : .02em;
   margin-bottom : 1em;
   text-indent : 0;
   line-height : 1.6em;
}
p.poetry-free-spaced{	/* based on poetry-flush-left */
   letter-spacing : .02em;
   text-indent : 0; 
   line-height : 1.6em;
   white-space : pre;
}

.poetry-flush-left-indented-wrap{
/* use divs without br tags for single indented-wrapping lines */
       text-align : left;
	margin-left : 2em;
	margin-bottom : 1em;
	padding-bottom :0;
	text-indent : -2em;
	line-height : 1.6em;
}
.poetry-flush-left-flush-wrap{
/* use divs without br tags for single indented-wrapping lines */
        text-align : left;
	margin-left : 0;
	margin-bottom : 1em;
	padding-bottom :0;
	text-indent : 0;
	line-height : 1.6em;
}
.poetry-flush-left-indented-20-wrap{
/* used for whitaker poem 'face paint' in v9n2 only. huge hanging indent */
        text-align : left;
	margin-left : 13em;
	margin-bottom : 1em;
	padding-bottom :0;
	padding-left : 0;
	text-indent : -13em;
	line-height : 1.6em;
}

p.hanging-left {
   text-align : left;
   letter-spacing : .02em;
   margin-left : 2em;
   text-indent : -2em;
   line-height : 1.6em;
}
 .centered {
   letter-spacing : .02em;
   text-align : center;
   line-height : 1.6em;
}

.right-aligned {
   letter-spacing : .02em;
   text-align : right;
   line-height : 1.6em;
}
.6m-indent{
   text-indent : 6em;
}

/* as of v9n2 these indented styles are changing from percentage indents to the applicable number of N spaces */
p.indented, p.indented-5,p.indented-8,p.indented-10, p.indented-12, p.indented-15, p.indented-20, p.indented-32 {
    text-align : left;
    letter-spacing : .02em;
    text-indent : 3em;
    line-height : 1.6em;
    margin-bottom : 1em;
}
/*p.indented-10{margin-left : 3em; text-indent : 4em;}
p.indented-12{margin-left: 4em; text-indent : 5em;}
p.indented-15{margin-left : 5em; text-indent : 6em;}
p.indented-20{margin-left : 6em; text-indent : 7em;}*/

/* for future editions (after v7n2) the default poetry style should use a negative margin and hanging indent to wrap second lines with a 1em indent.  */

/* for indenting poetry on large screens only */
@media screen and (min-device-width : 1024px){
.indented-5, .poetry-flush-left-5 {padding : 0 0 0 2em;}
.indented-8, .poetry-flush-left-8 {padding : 0 0 0 3em;}
.indented-10 {padding : 0 0 0 5em;}
.indented-12, .poetry-flush-left-12 {padding : 0 0 0 6em;}
.indented-15, .poetry-flush-left-15 {padding : 0 0 0 7em;}
.poetry-flush-left-indented-20-wrap {padding : 0 ; margin-left : 13em; text-indent : -13em;}
.indented-20, .poetry-flush-left-20  {padding : 0 0 0 12em;}
.indented-32, .poetry-flush-left-32  {padding : 0 0 0 18em;}
.poetry-flush-left-12, .poetry-flush-left-15, .poetry-flush-left-20, .poetry-flush-left-32 {letter-spacing : .01em; text-indent : 0; line-height : 1.6em;}
}

@media screen and (min-device-width : 800px) and (max-device-width : 1024px) {
.indented-5, .poetry-flush-left-5 {padding : 0 0 0 1.5em;}
.indented-8, .poetry-flush-left-8 {padding : 0 0 0 2em;}
.indented-10 {padding : 0 0 0 3em;}
.indented-12, .poetry-flush-left-12 {padding : 0 0 0 4em;}
.indented-15, .poetry-flush-left-15 {padding : 0 0 0 5em;}
.poetry-flush-left-indented-20-wrap {padding : 0; margin-left: 12em; text-indent : -12em;}
.indented-20, .poetry-flush-left-20  {padding : 0 0 0 6em;}
.indented-32, .poetry-flush-left-32  {padding : 0 0 0 8em;}
.poetry-flush-left-12, .poetry-flush-left-15, .poetry-flush-left-20, .poetry-flush-left-32 {letter-spacing : .01em; text-indent : 0; line-height : 1.6em;}
}

/* Small Format: Android */
@media screen and (min-device-width : 321px) 
	and (max-device-width : 800px)
	and (orientation : portrait){
p.flush-left, p.poetry-flush-left, p.poetry-flush-left-8, p.poetry-flush-left-10, 
p.poetry-flush-left-12, p.poetry-flush-left-15, p.poetry-flush-left-20, p.poetry-flush-left-32, 
.poetry-flush-left-indented-wrap, p.centered, p.right-aligned, p.interview-intro,
p.indented, p.indented-8, p.indented-10, p.indented-12,p.indented-15, p.indented-20, p.indented-32 { 
		font-size : 1.8em;
		line-height : 1.8em;
		letter-spacing : -.03em;
		word-spacing : -.02em;
		margin-right : 0;
	}
	p.indented {text-indent : 1em;}
	p.indented-5, .poetry-flush-left-5 {margin-left : .8em; text-indent : -.8em; }
	p.indented-8, .poetry-flush-left-8 {margin-left : 4em; text-indent : -4em; }
	p.indented-10 {margin-left : 5em; text-indent : -5em; padding : 0 ;}
	p.indented-12, .poetry-flush-left-12 {margin-left : 6em; text-indent : -6em; padding : 0;}
	p.indented-15, .poetry-flush-left-15 {margin-left : 7em; text-indent : -7em; padding : 0;}
	p.indented-20, .poetry-flush-left-20, .poetry-flush-left-indented-20-wrap {padding : 0; margin-left: 9em; text-indent : -9em;}
	p.indented-32, .poetry-flush-left-32  {margin-left : 12em; text-indent : -12em; padding : 0;}
	p.indented-5, p.indented-8, p.indented-10, p.indented-12, p.indented-15, p.indented-20, p.indented-32 {
		text-indent:0;
	}
}

/* Small Format :  iPhone with portrait orientation */
@media screen and (max-device-width : 320px) and (orientation : portrait){
	p.flush-left, p.poetry-flush-left, p.poetry-flush-left-8, 
p.poetry-flush-left-10, p.poetry-flush-left-12, p.poetry-flush-left-15, 
p.poetry-flush-left-20, p.poetry-flush-left-32, .poetry-flush-left-indented-wrap, 
p.centered, p.indented, p.right-aligned, p.interview-intro{ 
		margin-left : 1.2em; margin-right : 1.2em;
		font-size : 1.8em;
		line-height : 1.8em;
		letter-spacing : -.03em;
	}
	p.indented {text-indent : 1em;}
	p.indented-5 .poetry-flush-left-5 { margin-left : .8em; text-indent : .8em; }
	p.indented-8, .poetry-flush-left-8 {margin-left : 4em; text-indent : -4em; }
	p.indented-10 {margin-left : 5em; text-indent : -5em; padding : 0 ;}
	p.indented-12, .poetry-flush-left-12 {margin-left : 6em; text-indent : -6em; padding : 0;}
	p.indented-15, .poetry-flush-left-15 {margin-left : 7em; text-indent : -7em; padding : 0;}
	p.indented-20, .poetry-flush-left-20, .poetry-flush-left-indented-20-wrap {padding : 0; margin-left: 12em; text-indent : -12em;}
	p.indented-32, .poetry-flush-left-32  {margin-left : 12em; text-indent : -12em; padding : 0;}
	p.indented-5, p.indented-8, p.indented-10, p.indented-12, p.indented-15, p.indented-20, p.indented-32 {
		text-indent:0;
	}
}


p.epigram{
   line-height : 1.1em;
   font-size : .9em;
   font-style : italic;
   text-indent : 3em;
   padding : 0 1.5em .5em 1.5em;
   margin-bottom : 2.3em;
}
p.epigram-author{
  font-size : .75em;
  line-height : 1em;
  font-weight : normal;
  text-indent : 7em;
}

/* Small Format :  iPhone with portrait orientation */
@media screen and (max-device-width : 320px) and (orientation : portrait){
  p.epigram{
    line-height : 1.6em;
    font-size: 2em;
    margin : 0 10%;
    margin-bottom : 3.8em;
  }
  p.epigram-author{
    font-size : 2em;
    line-height : 1.4em;
  }
}
/* Android */
@media screen and (min-device-width : 321px) 
	and (max-device-width : 800px)
	and (orientation : portrait){
  p.epigram{
    line-height : 1.6em;
    font-size: 2.1em;
    margin : 0 10%;
    margin-bottom : 3.8em;
  }
  p.epigram-author{
    font-size : 2em;
    line-height : 1.4em;
  }
}
@media screen only 
	and (min-device-width : 320px) 
	and (max-device-width : 374px) and 
	(orientation : landscape){
  p.epigram{
    line-height : 1.6em;
    font-size: 2em;
    margin : 0 10%;
    margin-bottom : 3.8em;
  }
  p.epigram-author{
    font-size : 2em;
    line-height : 1.4em;
  }
}
@media screen only 
	and (min-device-width : 375px) 
	and (max-device-width : 667px) and 
	(orientation : landscape){
  p.epigram{
    line-height : 1.6em;
    font-size: 2em;
    margin : 0 10%;
    margin-bottom : 3.8em;
  }
  p.epigram-author{
    font-size : 2em;
    line-height : 1.4em;
  }
}


p.interview-intro{	
	font-size : .92em;
	line-height : 1.1em;
	letter-spacing : -.01em;
	
}

p.ed-note{	
	font-size : .9em;
	font-style: italic; 
	line-height : 1.1em;
	letter-spacing : -.01em;
}

p.end-note{	
	width : 90%;
	font-size : .9em;
	line-height : 1.1em;
	letter-spacing : -.01em;
}
p.end-note a{
	text-decoration : none;}
p.end-note a :hover{}

/* Small Format :  iPhone with portrait orientation */
@media screen and (max-device-width : 320px) and (orientation : portrait){
	p.interview-intro , p.end-note{ 
	font-size : 1.7em;
	line-height : 1.5em;
	}
	p.ed-note{font-size : 1.3em; width : 72%; margin : 0; line-height : 1.8em; letter-spacing : -.03em;}
}
/* Android */
@media screen and (min-device-width : 321px) 
	and (max-device-width : 800px)
	and (orientation : portrait){
	p.interview-intro, p.end-note{ 
	font-size : 1.6em;
	line-height : 1.6em;
	}
	p.end-note a{ font-size : 1em;
	}
	p.ed-note { font-size : 1.6em; font-style: italic; width : 50%; margin : 0 25%;  line-height : 1.8em; 
	}
	.piece-much-narrower .ed-note{ width : 90%; margin : 0 3%; padding : 0 2%;
	}
	
}
/* android landscape */
@media screen only and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape){
	.piece-much-narrower .ed-note{ width : 42%; margin : 0 27%; padding : 0 2%;}
}

p.embedded-poem{
/* for, e.g., poems stuck in interviews */
   font-weight : normal;
   font-style : italic;
   line-height : 1.2em;
   font-size : 1em;
   letter-spacing : -.03em;
   text-indent : 2em;
}

p.embedded-poem-flush-left-3m-indent{
/* for, e.g., poems stuck in interviews */
   font-weight : normal;
   font-style : italic;
   padding-left : 3em;
   line-height : 1.2em;
   font-size : 1em;
   letter-spacing : -.03em;
   text-indent : none;
}

p.embedded-poem-3m-indent{
/* for, e.g., poems stuck in interviews */
	font-weight : normal;
	font-style : italic;
   line-height : 1em;
   font-size : 1em;
   letter-spacing : -.03em;
	text-indent : 5em;
}

p.extra-space{line-height : 1.15em;}
p.extra-half-space{line-height : .6em;}

.art-credit{margin :0; padding : 0; font-style : italic; font-size : .6em; line-height : .6em;}

caption{
	background : url('') repeat left top #f7fdfd; 
   	background-color : #f7fdfd;
	font-size : .9em;
	line-height : .9em;
	text-align : center;
}

blockquote{
	margin-left : 3%;
	font-size : .9em;
	letter-spacing : -.02em;
	word-spacing : -.02em;
}

@media screen and (max-device-width : 320px) and (orientation : portrait){
  blockquote{
	font-size : 1.8em;
	line-height : 1.4em;
  }
}
/* Android */
@media screen 
   and (min-device-width : 321px) 
   and (max-device-width : 800px)
   and (orientation : portrait){
blockquote{
	font-size : 1.8em;
	line-height : 1.4em;
  }
}

/* S09.  bio */

#bio{
	margin : 1.7em 0 .3em 0;
	padding-bottom: .3em;
   	border-bottom : solid .8em #245677;
}
#bio.box { 
/* metro */
	border :none;
}

#bio > p{
	font-size : .9em;
	line-height : 1.1em;
	text-indent : .9em;
}
#bio a{ text-decoration : none; }
#bio a :hover{}

@media screen and (max-device-width : 320px) 
	and (orientation : portrait){
  #bio, #bio > p {
	padding-top : .2em;
	font-size : 1.3em;
	line-height : 1em;
	letter-spacing : .02em;
  }
  #bio a, #bio a:active, #bio a:hover, #bio a:visited{
	font-size : 1em;
	line-height : 1em;
  }
}

/* Android */
@media screen and (min-device-width : 321px) 
	and (max-device-width : 800px)
	and (orientation : portrait){
#bio, #bio > p {
	padding-top : .2em;
	font-size :  1.3em;
	line-height : 1em;
	letter-spacing : .02em;
  }
#bio a, #bio a:active, #bio a:hover, 
  #bio a:visited{
	font-size : 1em;
	line-height : 1em;
  }
}

/* landscape */
@media screen and (min-device-width : 200px) 
	and (max-device-width : 800px)
	and (orientation : landscape){
#bio, #bio > p {
	padding-top : .2em;
	font-size :  .9em;
	line-height : 1em;
	letter-spacing : .02em;
  }
#bio a, #bio a:active, #bio a:hover, 
  #bio a:visited{
/*	font-size : 1em;*/
	line-height : 1em;
  }
}

/* S20.  footer tags */


footer, #footer {
  position : static;
  min-height : 2em;
  text-align : center;  
  vertical-align : middle;
  line-height : .9em;
  font-size : .8em;
  }


@media screen and (max-device-width : 320px) and (orientation : portrait) {
    footer, #footer {
        width : 100%;
	font-size : 1.4em;
	letter-spacing : -.03em;
	word-spacing : -.02em;
	min-height : 3.2em;
	}
    }

/* Android */
@media screen 
   and (min-device-width : 321px) 
   and (max-device-width : 800px)
   and (orientation : portrait){
    footer, #footer {
	width : 100%;
	font-size : 1.4em;
	letter-spacing : -.03em;
	word-spacing : -.02em;
	min-height : 3.2em;
	}
}

/*Custom
C01.   */

/* Google Search and fb/twitter boxes */
.gcse {
	background-color : #f7fdfd;
	position : absolute;
	top : 6.3em;
	width : 30%;
	margin-left : 67.5%;
}
.facebooktwitter {
	background-color : #f7fdfd;
	position : static;
	bottom : 2px;
	right : 1em;
	/*width : 25%;
	margin-left : 50%;*/
	text-align : right;
}
.facebooktwitter h6, .facebooktwitter a {
	font-size : .8em;
}

@media screen and (max-device-width : 320px) {
	.facebooktwitter {
	margin-bottom : 2em;
	}	
       .facebooktwitter h6, .facebooktwitter h6 a {
	font-size : 1.2em;
	margin-bottom : .5em;
	}
	img.f {
	width : 4%;
	}
	.gcse {
	top : 6em;
	}
}
@media screen and (max-device-width : 320px) and (orientation : portrait) {
	.gcse {
	top : 8.2em;
	}
}
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait) {
	.facebooktwitter {
	margin-bottom : 2em;
	}	
	.facebooktwitter h6, .facebooktwitter h6 a {
	font-size : 1.2em;
	margin-bottom : .5em;
	}
	img.f {
	width : 4%;
	}
	.gcse {
	top : 9em;
	}
}

.floater-main {
   position : fixed;
   top : 2em; 
   left : 12%;
   width : 100%;
}
.floater-main-right {
   position : fixed;
   top : 1em; 
   left : 72%;
   width : 100%;
}
.banner-main {
  margin : -3em 26% 0;
  
}

@media screen and (max-device-width : 320px) and (orientation : portrait) {
	.floater-main {top : 14%;}
	.floater-main-right {top : 12%;}
	.banner-main {margin : -1em 6% 0;}
}
/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait) {
	.floater-main {top : 14%;}
	.banner-main {margin : -1em 6% 0;}
}
/* landscape, smaller and larger */
@media screen 
	and (min-device-width : 320px) 
	and (max-device-width : 375px) and (orientation : landscape){
	.floater-main {top : 8%; width : auto;}
	.banner-main {margin : -2em 12% 0;}
}
@media screen 
	and (min-device-width : 375px) 
	and (max-device-width : 667px) and (orientation : landscape){
	.floater-main {top : 10%; width : auto;}
	.banner-main {margin-top : -3em;}
}

.poetry-flush-left-22mwide {
/* based on poetry-flush-left */
   letter-spacing : .02em;
   margin-bottom : 1em;
   margin-left : 2em;
   line-height : 1.8em;	
}

.poetry-flush-left-25mwide {
/* based on poetry-flush-left */
   letter-spacing : .02em;
   margin-bottom : 1em;
   margin-left : 2em;
   line-height : 1.8em;	
}
.poetry-flush-left-35mwide {
/* based on poetry-flush-left */
   letter-spacing : .02em;
   margin-bottom : 1em;
   margin-left : 2em;
   line-height : 1.8em;	
}
.poetry-flush-left-55mwide {
/* based on poetry-flush-left */
   letter-spacing : .02em;
   margin-bottom : 1em;
   margin-left : 2em;
   line-height : 1.8em;	
}



@media screen and (min-width : 32em) {
	.poetry-flush-left-25mwide {
	padding-left : 0;
	padding-right : 0;
	}
}
@media screen and (min-width : 38em) {
	.poetry-flush-left-22mwide {
	padding-left : 0;
	padding-right : 0;
	}
}
@media screen and (min-width : 46em) {
	.poetry-flush-left-22mwide {
	padding-left : 3em;
	padding-right : 1em;
	}
	.poetry-flush-left-25mwide  {
	padding-left : 3em;
	padding-right : 1em;
	}
}
@media screen and (min-width : 50em) {
	.poetry-flush-left-22mwide {
	padding-left : 5em;
	padding-right : 3em;
	}	
	.poetry-flush-left-35mwide {
	padding-left : 0;
	padding-right : 0;
	}
}
@media screen and (min-width : 62em) {
	.poetry-flush-left-22mwide {
	padding-left : 7em;
	padding-right : 6em;
	}
	.poetry-flush-left-25mwide, .perry-epigram  {
	padding-left : 6em;
	padding-right : 3em;
	}
	.poetry-flush-left-35mwide {
	padding-left : 5em;
	padding-right : 3em;
	}
}
@media screen and (min-width : 75em) {
	.poetry-flush-left-22mwide {
	padding-left : 12em;
	padding-right : 8em;
	}
	.poetry-flush-left-25mwide {
	padding-left : 10em;
	padding-right : 5em;
	}	
	.poetry-flush-left-35mwide {
	padding-left : 7em;
	padding-right : 5em;
	}
	.moore-hanging-indent-45mwide {
	padding-left : 5em;
	padding-right : 3em;
	}
	.poetry-flush-left-55mwide {
	padding-left : 1.3em;
	padding-right : 1.3em;
	}
}
@media screen and (min-width : 80em) {
	.poetry-flush-left-55mwide {
	padding-left : 3em;
	padding-right : 1.6em;
	}
}
@media screen and (min-width : 90em) {
	.poetry-flush-left-22mwide {
	padding-left : 18em;
	padding-right : 10em;
	}
	.poetry-flush-left-25mwide  {
	padding-left : 14em;
	padding-right : 10em;
	}
	.poetry-flush-left-35mwide {
	padding-left : 11em;
	padding-right : 8em;
	}
	.poetry-flush-left-55mwide {
	padding-left : 8em;
	padding-right : 4em;
	}
}
@media screen and (min-width : 100em) {
	.poetry-flush-left-35mwide {
	padding-left : 14em;
	padding-right : 10em;
	}
	.poetry-flush-left-55mwide {
	padding-left : 10em;
	padding-right : 8em;
	}
}
@media screen and (min-width : 110em) {
	.poetry-flush-left-22mwide {
	padding-left : 25em;
	padding-right : 16em;
	}
	.poetry-flush-left-25mwide  {
	padding-left : 21em;
	padding-right : 18em;
	}
	.poetry-flush-left-35mwide {
	padding-left : 17em;
	padding-right : 15em;
	}
	.poetry-flush-left-55mwide {
	padding-left : 12em;
	padding-right : 10em;
	}
}

/* iphone */
@media screen and (max-device-width : 320px) and (orientation : portrait) {
    .poetry-flush-left-22mwide {
	margin-left : 2.5em;
	margin-right : 2.3em;
	padding-left : 1.5em;
	padding-right : 1.5em;
	font-size : 2em;
	}
    .poetry-flush-left-25mwide {
	padding-left : .04em;
	padding-right : .04em;
	font-size : 1.8em;
	letter-spacing : -.01em;
	}
    .poetry-flush-left-35mwide {
	margin-left : .7em;
	margin-right : .3em;
	padding-left : 0;
	padding-right : 0;
	font-size : 1.5em;
	letter-spacing : -.03em;
	}
}


/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px)
   and (orientation : portrait){
    .poetry-flush-left-22mwide {
	margin-left : 2.5em;
	margin-right : 2.3em;
	padding-left : 1.5em;
	padding-right : 1.5em;
	font-size : 2em;
	}
    .poetry-flush-left-25mwide {
	padding-left : .1em;
	padding-right : .1em;
	font-size : 1.7em;
	letter-spacing : -.02em;
	}
    .poetry-flush-left-35mwide {
	margin-left : .7em;
	margin-right : .3em;
	padding-left : 0;
	padding-right : 0;
	font-size : 1.5em;
	letter-spacing : -.03em;
	}
}


/* landscape, smaller ("iPhone5") and larger ("Android") */
/* iPhone 5 in landscape */
@media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 375px) 
	and (orientation : landscape){
   .poetry-flush-left-22mwide {
	margin-left : 16em;
	margin-right : 2.3em;
	padding-left : 1.5em;
	padding-right : 1.5em;
	font-size : 1em;
	}
    .poetry-flush-left-25mwide {
	margin-left : 14em;
	padding-left : .1em;
	padding-right : .1em;
	font-size : 1em;
	letter-spacing : -.01em;
	}    
    .poetry-flush-left-35mwide {
	margin-left : 7em;
	margin-right : 2em;
	padding-left : 0;
	padding-right : 0;
	font-size : 1.1em;
	letter-spacing : .01em;
	}
  .poetry-flush-left-55mwide {
	margin-left :2%;
	margin-right :2%;
	width : auto;
	letter-spacing : -.02em;
	padding-left : 0;
	padding-right : 0;
	}
}

/*android landscape */
@media only screen 
	and (min-device-width : 375px) 
	and (max-device-width : 800px) 
	and (orientation : landscape){
   .poetry-flush-left-22mwide {
	margin-left : 14em;
	margin-right : 2.3em;
	padding-left : 1.5em;
	padding-right : 1.5em;
	font-size : 1em;
	}
    .poetry-flush-left-25mwide {
	margin-left : 11em;	
	padding-left : .1em;
	padding-right : .1em;
	font-size : 1em;
	letter-spacing : -.01em;
	}
    .poetry-flush-left-35mwide {
	margin-left : 6em;
	margin-right : 2em;
	padding-left : 0;
	padding-right : 0;
	font-size : 1.1em;
	letter-spacing : .01em;
	}	
    .poetry-flush-left-55mwide {
	margin-left :2%;
	margin-right :2%;
	width : auto;
	padding-left : 0;
	padding-right : 0;
	}
}

.piece-whiddon{
  display : block;
  margin : 0 12%;
  padding : 1% 8% 3% 8%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 60%;
}
.piece-whiddon p.fl-0, p.il-15, p.il-10, p.il-20, p.il-8{
        text-align : left;
	line-height : 1.8em;
	margin-bottom : 1em;
	padding-bottom :0;}

.piece-whiddon p.fl-0{/* use divs without br tags for single indented-wrapping lines */
	margin-left : 0;
	text-indent : 0;
	}
.piece-whiddon p.il-15{text-indent:5em; padding-left:6em; }
.piece-whiddon p.il-10{text-indent:5em; padding-left:3em; }
.piece-whiddon p.il-20{text-indent:3em; padding-left:14.5em; }
.piece-whiddon p.il-8{text-indent:5em; padding-left:1em; }

.piece-whiddon-2{
  display : block;
  margin : 0 25%;
  padding : 1% 5% 3% 5%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 40%;
}

@media only screen and (min-device-width : 320px)  and (max-device-width : 375px) and (orientation : portrait){
	.piece-whiddon{
	  width : 96%;
	  margin : 0 2%;
	  padding : 1% 0 1% 0;
	  font-size :.6em;
	  line-height : .8em;
	  letter-spacing : -.02em;
	}
	.piece-whiddon h5{font-size : 3em; line-height : 3.2em;}
	.piece-whiddon-2 {
	   width : 80%;
	   margin : 8%;
	   padding : 0 1%;
	   font-size : .9em;
	   line-height : 1.3em;
	}
}
@media only screen 
	and (min-device-width : 320px) and (max-device-width : 375px) 
	and (orientation : landscape){
	.piece-whiddon {
	  width : 86%;
	  margin : 0 7%;
	  padding : 1% 0 1% 0;
	letter-spacing : 0;
	}
	.piece-whiddon-2{
	   width : 50%; 
	   margin : 0 25%; 
	   padding : 0;
	}
}
/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px)
   and (orientation : portrait) {
	.piece-whiddon {
	 width : 96%;
	  margin : 0 2%;
	  font-size :.62em;
	  line-height : 1.1em;
	  letter-spacing : -.2em;
	}
}
/*android landscape */
@media screen and (min-device-width : 375px) and (max-device-width : 800px) 
	and (orientation : landscape){
	.piece-whiddon {
	  width : 90%;
	  margin : 0 5%;
	  padding : 1% 0;
	  font-size : .96em;
	  line-height : 1.2em;
	  letter-spacing : -.1em;
	}
.piece-whiddon-2 {
	   width : 50%;
	   margin : 23%;
	   padding : 0 2%;
	   font-size : .9em;
	   line-height : 1.3em;
	}
}

.piece-whitaker{
  display : block;
  text-align : center;
  width : 40%;
  margin : 0 0 0 28%;
  padding : 1% 2% 3% 2%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;

}
.piece-whitaker p.fl-0, p.i-12, p.i-20, p.fl-20, p.fl-8, p.fl-5, p.fl-f {
    	text-align : left;
	line-height : 1.8em;
	margin-bottom : 1em;
	padding-bottom :0; 	
}
.piece-whitaker p.fl-0 {margin-left : 0; text-indent : 0;}
.piece-whitaker p.i-12 {margin : 0 ;text-indent : 5em; padding-left:6em; }
.piece-whitaker p.i-20 {margin : 0 ;text-indent : -14.5em; padding-left:14.5em; }
.piece-whitaker p.fl-20 {margin : 0 ; text-indent : -14.5em; padding-left:14.5em; }
.piece-whitaker p.fl-8 {margin : 0 ; text-indent : 0; padding-left:7em; }
.piece-whitaker p.fl-5 {margin : 0 ; text-indent : 0; padding-left:3em;}
.piece-whitaker p.fl-f {margin : 0 ; text-indent : 0;}

/* iPhone 5 */
@media screen and (min-device-width : 320px) and (max-device-width : 375px) and (orientation : portrait){
		.piece-whitaker {width : 92%; margin : 0 4%; padding : 0; 
			font-size : .8em; line-height : 1em;}
}
@media screen and (min-device-width : 320px) and (max-device-width : 375px) and (orientation : landscape){
		.piece-whitaker {
			width : 60%; margin : 0 20%; padding : 0;
			font-size : 1em; line-height : 1.1em;}
}
/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px) and (orientation : portrait) {
		.piece-whitaker { 
			width : 92%; margin : 0 4%; padding : 0; 
			font-size : .9em; line-height : 1.1em; letter-spacing : -.2em;}
}
@media screen and (min-device-width : 375px) and (max-device-width : 800px) and (orientation : landscape){
		.piece-whitaker {width : 64%; margin : 0 18%; padding : 0;
		font-size : 1em; line-height : 1.2em;}
}

.piece-henderson01{
  display : block;
  text-align : center;
  margin : 0 25%;
  padding : 1% 2% 3% 2%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 46%;
}
.piece-henderson02{
  display : block;
  margin : 0 25%;
  padding : 1% 4% 3% 6%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 40%;
}
.piece-henderson03{
  display : block;
  margin : 0 29%;
  padding : 1% 4% 3% 6%;
  border : solid 1px #f7fdfd;
  background-color :#f7fdfd;
  width : 32%;
}
/* iPhone 5 */
@media screen and (min-device-width : 320px) and (max-device-width : 375px) and (orientation : portrait){
		.piece-henderson01 {width : 92%; margin : 0 4%; padding : 0; 
			font-size : .8em; line-height : 1em;}
		.piece-henderson02 {width : 82%; margin : 0 9%; padding : 0; 
			font-size : .9em; line-height : 1em; letter-spacing : .02em;}
		.piece-henderson03 {width : 62%; margin : 0 19%; padding : 0; 
			font-size : .9em; line-height : 1em; letter-spacing : .02em;}
		.piece-henderson01  .piece-title, .piece-henderson02  .piece-title, .piece-henderson03  .piece-title { font-size : 1.4em; line-height : 1.6em;}
}
/* iPhone 5 in landscape */
@media screen 
	and (min-device-width : 320px) and (max-device-width : 375px) 
	and (orientation : landscape){
		.piece-henderson01 {width : 90%; margin : 0 5%; padding : 0;
		font-size : 1.2em; line-height : 1.3em;}
		.piece-henderson02 {width : 68%; margin : 0 16%; padding : 0; 
			font-size : 1.2em; line-height : 1em;}
		.piece-henderson03 {width : 52%; margin : 0 24%; padding : 0; 
			font-size : 1.2em; line-height : 1em;}
		.piece-henderson01  .piece-title, .piece-henderson02  .piece-title, .piece-henderson03  .piece-title { font-size : 1em;}
}
/* tablet */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait){
		.piece-henderson03 {
			width : 70%; margin : 0 15%; padding : 0; 
			font-size : 1em; line-height : 1em;}
		.piece-henderson01  .piece-title, .piece-henderson02  .piece-title, .piece-henderson03  .piece-title { font-size : 1em;}		
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape){
		.piece-henderson03 {
			width : 82%; margin : 0 9%; padding : 0; 
			font-size : .96em; line-height : 1em;
		}
		.piece-henderson01  .piece-title, .piece-henderson02  .piece-title, .piece-henderson03  .piece-title { font-size : 1em;
		}		
}


/* Android */
@media screen and (min-device-width : 321px) and (max-device-width : 800px)
   and (orientation : portrait) {
		.piece-henderson01 { width : 94%; margin : 0 3%; padding : 0; 
			font-size : .8em; line-height : 1em;}
		.piece-henderson02 {width : 86%; margin : 0 7%; padding : 0; 
			font-size : .9em; line-height : 1em; letter-spacing : .02em;}
		.piece-henderson01  .piece-title, .piece-henderson02  .piece-title, .piece-henderson03  .piece-title { font-size : 1.4em; line-height: 1.8em;}
}
/*android landscape */
@media screen and (min-device-width : 375px) and (max-device-width : 800px) 
	and (orientation : landscape){
		.piece-henderson01 {width : 82%; margin : 0 9%; padding : 0;
		font-size : 1em; line-height : 1.2em;}
		.piece-henderson02 {width : 60%; margin : 0 20%; padding : 0; 
			font-size : 1em; line-height : 1em;}
		.piece-henderson03 { width : 46%; margin : 0 27%; padding : 0; 
			font-size : 1em; line-height : 1em;}
		.piece-henderson01 .piece-title, .piece-henderson02 .piece-title, .piece-henderson03 .piece-title { font-size : 1.4em;}
}