/* sleet 66 css: the first html5 version */

/* contents
   -------- 
	global tags
    body tags
	header tags
    a tags
    nav tags
    p - general
    p - contents authors titles and bars
    p - sleet mastheads
    div for floating masthead
    biography styles
    backfoot - internal footer links
    footer tags

    specialty styles
    --------------
    archive divs
    main page divs
    about us divs
    submissions divs
    author-specific divs
*/  
/*  colors 
    ------
    #FEFEFF background white and inverted text color
    #92929F grey bar color 
	#BBCFBB; lighter gray text background color
    #442233 dark text color
    #335540 standard link color
    #339988 greenish link hover color   
    #22BBBB greenish link hover used with white-on-gray "backtoe" divs
    #336644 greenish link hover used with 442233-on-gray divs
	#553540 visited link color

*/   

/* Global tags */
html{
  width : 100%;
  margin : 0;
  padding : 0;
  background : #FEFEFF url(../images/ice_crystal_rain_4f.gif) left top repeat;
}

  /*HTML 5 specific*/
header,section,article,aside,nav,footer{
	display: block;	
	}
	body :{
	line-height:1;
	}
	ol,ul :{
	list-style:none;
	}
	
/* body tags */
   
body{
  border : solid 0px #FE9911;
  width : 100%;
  overflow : visible;
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-size : .8em;
  color : #442233;
  font-weight : bold;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
  
  }
  
    /* iPhone */
  @media screen and (max-device-width: 480px){
body{
  -webkit-text-size-adjust:none;
  font-family:Helvetica, Arial, Verdana, sans-serif;
  /*font-size : 1.2em; */
  font-size : 2em;
  padding:3px;
  }
}
  
  article {
  width : 96%
  }

/* header tags */
/* root header used on all pages, others differentiated */
div.header {
  border : solid 0px #DD2299;
  overflow : hidden;
  width : 100%;
  margin : 0 0;
  padding : 0;
  display : block;
  text-align : center;
}

div.header h1.main {
  position : static;
  overflow : hidden;
  width : 96%;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px; /* for opera */
  background : #228866;
  margin : 24px 2% 0 2%;
  border-top : solid 0px #229999;
  border-left : solid 0px #229999;
  padding : 0 1px 0 4px;
  text-align : left;
  vertical-align : baseline;
  text-indent : none;
  line-height : 1.5em;
  font-size : 1.35em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bold;
  font-style : normal;
  font-variant : normal;
  color : #442233;
  letter-spacing : normal;
  word-spacing : normal;
}

div.header span.main-name{
  /*i.e. Sleetmagazine.com */
  line-height : 1.5em;
  font-size : 1.5em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  font-style : normal;
  letter-spacing : .8px;
  color : #442233;
  text-align : baseline;
}

/* where the cartoons go */
div.main-panels {
  border : solid 0px #22DD99;
  overflow : hidden;
  height : 40%;
  margin : 0;
  padding : 0;
  display : block; 
  vertical-align : bottom;
  text-align : center;
}

div.main-panels img.left{
  position : static;
  border : solid 0px #DD2299;
  margin : 0;
  padding : 0 ;
  width : 20%;
  display : inline; /* for ie6 */
  vertical-align : bottom
}
div.main-panels img.right{
  position : static;
  border : solid 0px #DD2299;
  margin : 0;
  padding : 0 ;
  width : 30%;
  display : inline; /* for ie6 */
  vertical-align : bottom
}
div.header h2.main {
/* volume and issue number, fka "main-edition" */
  position : static;
  overflow : visible;
  
  width : 76%;
  margin : 12px 12% 6px 12%;
  border : solid 0px #228866;
  padding : 0px 18px 0 18px;
  line-height : 1.5em;
  font-size : 1.35em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  font-style : italic;
  text-align : center;
  text-indent : 0;
  color : #442233;
}

/* headers for _blank template pages, including selected pages */
div.header h1.blank {
  position : static;
  overflow : hidden;
  width : 96%;
  -moz-border-top-left-radius:3px 2px;
  -webkit-border-top-left-radius:3px 2px;
  border-top-left-radius:3px 2px; /* for opera */
  -moz-border-top-right-radius:3px 2px;
  -webkit-border-top-right-radius:3px 2px;
  border-top-right-radius:3px 2px; /* for opera */
  background : #92929F;
  margin : 24px 2% 0 2%;
  border-top : solid 0px #229999;
  border-left : solid 0px #229999;
  padding : 0 1px 0 4px;
  text-align : left;
  vertical-align : top;
  text-indent : none;
  line-height : 1.35em;
  font-size : 1.3em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bold;
  font-style : normal;
  font-variant : normal;
  color : #442233;
  letter-spacing : normal;
  word-spacing : normal;
}

div.header h2.blank{
position : static;
  overflow : hidden;
  width : 96%;
  background : #92929F;
  margin : 0 2% 4px 2%;
  border-bottom : solid 0px #229999;
  border-right : solid 0px #229999;
  -moz-border-bottom-left-radius:3px 2px;
  -webkit-border-bottom-left-radius:3px 2px;
  border-bottom-left-radius:3px 2px; /* for opera */
  -moz-border-bottom-right-radius:3px 2px;
  -webkit-border-bottom-right-radius:3px 2px;
  border-bottom-right-radius:3px 2px; /* for opera */
  padding : 0px 1px 4px 4px;
  text-align : left;
  vertical-align : top;
  text-indent : none;
  line-height : 1em;
  font-size : .8em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  font-style : normal;
  font-variant : normal;
  color : #442233;
  letter-spacing : normal;
  word-spacing : normal;
}

/* a tags */

a:link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #335540;
	text-decoration: none;
}
a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color : #553540;
	text-decoration: none;
}

a:hover{
  color: #339988;
}
a#page-head:hover{
  color : #ccff66;
}
a#poetry-head:hover{
  color : #442233;
}
a#fiction-head:hover{
  color : #442233;
}
a#flash-head:hover{
  color : #442233;
}
a#irregulars-head:hover{
  color : #442233;
}
a#interview-head:hover{
  color : #442233;
}

a#Author1:hover{
  color : #442233;  
}
a#Title1:hover{
  color : #442233;
}
a#Title2:hover{
  color : #442233;  
}
a#Title3:hover{
  color : #442233;  
}
a#Title4:hover{
  color : #442233;  
}

/* nav divs */

/* Nav divs are different for the current issue page (below) */
/* Widths and margins are specific to nav content length */
/* All Widths + Margins + borders must add up to 100% */

/* new navs */

div.nav { 
	position : static;
	overflow : visible;
	background-color: #92929F;
	border : solid 0px #999922;
	width : 96%;
	height : 1.25em;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px; /* for opera */
	margin : 0 2% 0 2%;
	display : block;
}

div.nav ul {
	width : 100%;
	padding : 0 1px 0 1px;
	list-style : none;
	overflow : hidden;
}

div.nav ul li{
	float : left;
	background-color: #92929F;
	border : solid 0px #992266;
	padding-left : 1%;
	padding-right : 1%;
	min-width : 14.4%;
	vertical-align : top;
    line-height : 1.25em;
    font-size : .9em;
    /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
    font-weight : bold;
    font-style : normal; 
    font-variant : normal;
    text-align : center;
  /*for ie6 display : inline; */
}

div.nav ul li.blank{
	min-width : 14.4%;
}

div.nav ul li.selected{
	min-width : 6.1%;
}

div.nav ul li.supplement{
	border : solid 0px #EE3388;
	min-width : 11.8%;
}

div.nav ul li a{
  max-height : 1.25em;
  border : solid 0px #448838;
}

/* Main Page Navs */

div.nav-main { 
	position : static;
	overflow : visible;
	background-color: #448838;
	border : solid 1px #448838;
	border-top : solid 1px #99ccFF;
	width : 96%;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px; /* for opera */
	margin : 0 2% 0 2%;
	display : block;
}

div.nav-main ul {
	width : 100%;
	border :0;
	margin :0;
	padding : 0 1px 0 1px;
	list-style : none;
	overflow : hidden;
}

div.nav-main ul li{
	float : left;
	/*background-color: #448838;*/
	border : solid 0px #992266;
	padding-left : 1.5%;
	padding-right : 2%;
	min-width : 10%;
	max-width : 13.5%;
	vertical-align : top;
    line-height : 1.25em;
    font-size : .9em;
    /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
    font-weight : bold;
    font-style : normal; 
    font-variant : normal;
    text-align : center;
  /*for ie6 display : inline; */
}
@media screen and (max-device-width: 480px){
  div.nav-main ul li{
  -webkit-text-size-adjust:60%; 
  height : 2em; margin: 1px;  padding: 0;  
  overflow : visible; border: 0; height : 2em; 
  min-width : 12%; max-width : 14%; vertical-align: top;}
}

div.nav-main a{
}

div.nav-main a:hover{
  color: #EEFFEE;
  }

div.nav ul li.blank{
	min-width : 14.4%;
}

div.nav ul li.selected{
	min-width : 6.1%;
}

div.nav ul li.supplement{
	border : solid 0px #EE3388;
	min-width : 11.8%;
}

div.nav ul li a{
  max-height : 1.25em;
  border : solid 0px #448838;
}



/* Internal Footer tags for 'back to..' links. */

/* NOTES to 'backtoe' navs
  The formula is:
   (100% / #toes) - (margin-left+margin-right)
  The 3-toed variant uses 
    width : 31%;
    margin : 2px 1% 2px 1%;
   The 4-toed 
    width : 23%;
    margin : 2px 1% 2px 1%;
	
   This nav is contained in other sections (eg "blank").
   Local overrides may be needed if other <ul><li> are present
*/

div.nav-backfoot{
  position : static;
  overflow : visible;
  min-height : 1.75em;
  border : solid 0px #922222;
  	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px; /* for opera */
  width : 96%;
  background : #92929F;
  margin : 16px 2% 2px 2%;
  text-align : center;
}

div.nav-backfoot ul{
	overflow : hidden;
    width : 100%;
	padding : 0 4px 0 4px;
	list-style : none;
}

div.nav-backfoot ul li{
float : left;
  width : 15%;
  max-width : 17%;
  margin : 2px 0 2px 0;
  border : solid 0px #922222;
  padding : 0 .5% 6px .5%;
  vertical-align : text-bottom;
  overflow : hidden;
  text-align : center;
  text-indent : 0;
  line-height : .8em;
  font-size : .7em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bold;
  font-style : normal; 
  font-variant : normal;
  /*for ie6*/ display : inline;
}
@media screen and (max-device-width: 480px){
  div.nav-backfoot ul li{margin: 1px;  padding: 0;  border: 0;  font-size: 70%;  
  min-width : 12%; max-width : 22%; vertical-align: top;}
}

div.nav-backfoot ul li a{

}


/* main page announcement section */
/*  for announcements, blurbs, ads, accolades, other objects of attachment and desire */
div.main-announcements {
  width : 60%;
  -moz-border-radius:2px; /* mozilla */
  -webkit-border-radius:2px; /* safari */
  border-radius:2px; /* for opera */
  margin : 0 20% 0 20%;
  background : #228866;
  border : solid 0px #992222;
}

div.main-announcements p {
  clear : left;
  position : static;
  overflow : visible;
  width : 60%;
  margin : 0 20% 0 20%;
  background : #228866;
  border-top : solid 3px #228866;
  border-bottom : solid 2px #228866;
  padding : 3px 0px 3px 0px;
  line-height : 1.3em;
  font-size : 1.3em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  font-style : italic;
  text-align : center;
  text-indent : 0;
  color : #442233;
}

div.main-announcements a{
  color : #442233;
  line-height : 1.15em;
  font-size : 1em;
  font-style : italic;  
}

div.main-announcements a:hover{
  color : #FFE966;
  font-style : italic;
}

div.main-announcements a.loud{
  color : #EECC44; /*  dijon */
  /* color : #BBDD22;  spring */
  /* color : #66E9FD; /* mentos */
  line-height : 1.35em;
  font-size : 1.2em;
  font-style : italic;  
  float : left;
  width : 100%;
}

div.main-announcements a.loud:hover{
  color : #EEFFEE;
  font-style : italic;
}

/*
div.main-announcements a.loud img{
  float : left;
  overflow :  visible;
  width : 18%;
  /* float needs to be worked out */
}*/

/* main page attachments */
/* these are for badges and other 
   link-y things above the 
   main page footer */

div.main-attachments{
  border : solid 0px #EE2222;
  position : static;
  overflow : visible;
  width : 96%;
  margin : 3% 2% 0 2%;
  }

div.main-attachments ul {
  width : 60%;
  border : solid 0px #E060F0;
  margin : 0 18% 0 20%;
  padding : 0 2% 0 2%;
  text-align : center;
  list-style : none;
}

div.main-attachments ul li {
	float : left;
	margin : 3% 3% 3% 3%;
	border : solid 0px #DE9922;
	padding : 0 6% 0 6%;
	min-width : 28%;
	max-width : 30%; /* adjust widths if more elements are added */
	vertical-align : top;
    line-height : 1em;
    font-size : .9em;
    /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
    font-weight : bold;
    font-style : normal; 
    font-variant : normal;
    text-align : center;
}

@media screen and (max-device-width: 480px){
  div.main-attachments ul li{ float : left;
  margin : 3%; border : solid 0px #DE9922;
  width : 45%; }
}

div.main-attachments img {
	max-width : 60%;
	margin : 0;
}

div.main-attachments a img.f {
/* for facebook "f" image */
	width : 2.5em;
	margin : 0;
	height : 2.5em;
}
@media screen and (max-device-width: 480px){
  div.main-attachments img.f{ line-height : 2em; 
  width : 1.8em; height : 1.8em;}
}


div.main-attachments h1 {
	/* trick to clear float */
	clear : left;
	line-height: 1px;
}


/* blank template tags for regular content */
div.blank{
/* fka 'text-background' */
  position : static;
  overflow : hidden;
  width : 72%;
  background-color: #BBCFBB;
  border-top : solid 0px #cccfcf;
  margin: 0 14% 0 14%;
}

div.blank h1{
  position : static;
  overflow : hidden;
  height : 60px;
  width : 72%;
  margin : 32px 14% 6px 14%;
/*  border-bottom : solid 16px #995522;*/
  padding : 32px 0px 5px 4px;
  line-height : 60px;
  font-size : 1.67em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  text-indent : 2.18em;
  /*color : #442233;*/
}

div.blank h2{
  position : static;
  overflow : visible;
  height : 1.8em;
  width : 92%;
  margin : 1em 0 0 3em;
/*  border : solid 1px #995522;*/
  padding : .5em 0 2px 0;
  line-height : 1.3em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  text-indent : 0;
}

div.blank h3{
/* eg submissions page "Sleet is now closed/open for ..." */
  position : static;
  overflow : visible;
  height : 1.8em;
  margin : 1em 0 0 0;
  border-top : solid 1.1em #92929F;
  border-bottom : solid 1.1em #92929F;
  padding : .5em 0 2px 0;
  line-height : 1.3em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  text-align : center;
  font-weight : boldest;
  text-indent : 0;
}

div.blank p{
  width : 96%;
  margin : 0px 2% 9px 2%;
  padding : 0;
  text-indent : 2em;
  line-height : 1.8em;
  font-weight : normal;
}

div.blank p#epigram{
/*  background-color: #ccff66;*/
  width : 96%;
  /*border : solid 2px #FF9999;*/
  margin : 0px 2% 6px 2%;
  padding : 0 0 2px 0;
  text-indent : 3em;
  font-size : .75em;
  line-height : .90em;
  font-weight : normal;
  font-style : italic;
}
div.blank p#epigram-author{
/*  background-color: #ccff66;*/
  width : 96%;
  /*border : solid 2px #FF9999;*/
  margin : 0px 2% 16px 2%;
  padding : 0 0 2px 0;
  text-indent : 7em;
  font-size : .75em;
  line-height : 1em;
  font-weight : normal;
  font-style : normal;
}

div.blank ul{
}

div.blank ul li{
	line-height : 2em;
	margin-left : 1em;
	text-indent : 2em;
}

div.blank nav.backfoot ul li{
/* this is needed to override the ul li style above */
	line-height : 1.1em;
	margin-left : 0;
	text-indent : 2em;
}


/* for now this is a test for the figure tag. 
It could be a prototype for the category with image tags 
on the selected pages */
div.blank figure{
  position : static;
  overflow : hidden;
  height : 120px;
  width : 96%;
  margin : 0 2% 6px 2%; 
  border-left : solid 0px #929200;
  padding : 8px 0px 5px 4px;
  line-height : 120px;
  font-size : 1.67em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  text-indent : 2.18em;
/*  color : #442233;*/
  vertical-align : bottom;
}

div.blank figure img{
  float : right;
  height : 120px;
  margin : 6px 23% 0 0;
  border : solid 1px #ccff66;
  vertical-align : bottom;
  border-style: none;
  /*for ie6*/ display : inline; 
}

/* section I mean div on "current" or "supplement" (toc) pages where list of pieces is.*/
div.current{
/* fka 'text-background' */
  position : static;
  overflow : hidden;
  width : 72%;
  background-color: #BBCFBB;
  border-top : solid 0px #cccfcf;
  margin: 0 14% 0 14%;
  padding : 0 2px 0 2px;
}

div.current h1{
  position : static;
  overflow : visible;
  /*height : 60px; */
  width : 96%;
  margin : 1.3em 2% 6px 2%;
/*  border-bottom : solid 16px #995522;*/
  padding : 18px 0px 5px 4px;
  line-height : 1.62em;
  font-size : 1.62em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  text-indent : 2.18em;
  /*color : #442233;*/
}

div.current h2{
/* designed to contain fig-right div and fig-right#img */
  position : static;
  overflow : hidden;
  width : 92%;
  margin : 1em 4% 1em 4%;
/*  background : #92929F;*/
/*  border : solid 1px #995522;*/
  padding : .3em 3px .3em 3px;
  line-height : 1.3em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  text-indent : 0;
}

h2 div.fig-right{
  float : left;
  overflow : hidden;
  width : 65%;
  margin : .5em 0 1em 0;
  background : #92929F;
/*  border : solid 1px #995522;*/
  padding : .3em 3px .3em 3px;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : boldest;
  text-indent : 0;
}

@media screen and (max-device-width: 480px){
 h2 div.fig-right{width : 100%; margin : 2% 0 1em 0; border : solid 0px #22cc33;
   }
}


h2 img.fig-right {
  overflow : hidden;
  float : right;
  width : 18%;
  margin-right : 8%;
  padding-top : .5em;
}
@media screen and (max-device-width: 480px){
 h2 img.fig-right{float : right; width : 33%; margin : 5px 0 2px 2px;
 border : solid 0px #cc2233;}
}

h2 div.fig-stop{
clear : right;
overflow : hidden;
}

div.current h3{
/* eg submissions page "Sleet is now closed/open for ..." */
  position : static;
  overflow : visible;
  height : 1.8em;
  margin : 1em 0 0 0;
  border-top : solid 1.1em #92929F;
  border-bottom : solid 1.1em #92929F;
  padding : .5em 0 2px 0;
  line-height : 1.3em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  text-align : center;
  font-weight : boldest;
  text-indent : 0;
}

div.current p{
  width : 96%;
  margin : 0px 2% 9px 2%;
  padding : 0;
  text-indent : 2em;
  line-height : 1.8em;
  font-weight : normal;
}

div.current ul{
}

div.current ul li{
	line-height : 2em;
	margin-left : 1em;
	text-indent : 2em;
}
/* used on "current" and "supplement" (toc) pages. */

div.current_list{
/* container for author/title info */
border : solid 0px #33dd22;
position : static;
overflow : hidden;
width : 40%;
margin : 0 25% 2em 35%;
}
@media screen and (max-device-width: 480px){
	div.current_list{
	width : 100%;
	margin : 0 0 2em 0;
	}
}

div.current_author{
  margin-top : .5em;
}
div.current_author a{
  position : static;
  overflow : visible;
  width : 34%;
  margin : 6px 0 0 0;
  padding : 4px 0 0 0;
  color : #440000;
  vertical-align : bottom;
}

div.current_title{
}
div.current_title a{
  position : static;
  width : 30%;
  margin : 6px 0 6px 2em;
  border : solid 0px #999922;
  text-indent : -2em;
  line-height : .9em;
  font-size : .8em;
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-weight : bolder;
  color : #442233;
  vertical-align : top;
}


/* authors and titles on "selected" pages
    first section "authors" is for author name
	next optional section "title-block" is for multiple titles
	"title block" goes outside "selected"
	main section "selected" is for pieces
*/
div.author{
  position : static;
  overflow : hidden;
  width : 96%;
  border-top : solid 0px #cccfcf;
  margin: 0 2% 0 2%;
}
div.author h1{
/* author-head */
  position : static;
  overflow : visible;
  width : 72%;
  height : 2.3em;
  -moz-border-radius:2px; /* mozilla */
  -webkit-border-radius:2px; /* safari */
  border-radius:2px; /* for opera */
  background : #92929F;
  margin : 2em 14% .3em 14%;
  border-bottom : solid 0px #C5DD55;
  padding : 4px 0px 4px 2px;
  text-align : left;
  vertical-align : bottom;
  text-indent : none;
  line-height : 1.5em;
  font-size : 1.3em;
  font-family : Georgia, TimesNewRoman, Times, serif;
  font-weight : bolder;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}
div.author h1 a{
line-height : 2.3em;
}


div.title-block{
/* goes before "selected" 
   when >1 piece on the page */   
   position : static;
   overflow : hidden;
   top : 24px;
   background-color: #BBCFBB;
   border : solid 0px #993333;
   margin : 1% 14% 1% 14%;
   padding : 2px 2em 2px 2em;
}

div.title-block h1{
  background : #92929F;
  border : solid 0px #339933;
  border-bottom : solid .7em #62626F;
  height : 1.4em;
  width : 96%;
  margin : 12pt 2% 12pt 2%;
  padding : 0;
  text-align : left;
  vertical-align : bottom;
  text-indent : none;
  line-height : 1em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bolder;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;

}
div.title-block h1 a{
  margin : 0;
  padding : 0;
  
}

div.recipe {
/* for winter 2012 supplement */
/* fka 'text-background' */
  position : static;
  overflow : hidden;
  width : 72%;
  background-color: #BBCFBB;
  border : solid 0px #cccfcf;
  margin: 1% 14% 1% 14%;
  }
  
    @media screen and (max-device-width: 480px){
div .recipe{overflow : visible; width : 80; margin : 1% 8% 1% 8%;}

}

div.recipe  h1{
/* for winter 2012 supplement */
  position : static;
  overflow : hidden;
  width : 92%;
  background : #92929F;
  margin : 1.2em 4% 1.5em 4%;
  padding : 0;
  border-bottom : solid .5em #62626F;
  text-align : left;
  vertical-align : bottom;
  text-indent : 2pt;
  line-height : 1.3em;
  font-size : 1.3em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bolder;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}

div.recipe h2{
  width : 90%;
  margin : .7em 5% 9px 5%;
  padding : 0;
  text-indent : 0;
  line-height : 1.8em;
  font-size : 1.2em;
  text-align : left;
  font-family : Georgia, TimesNewRoman, Times, serif;
  font-style : italic;
  font-weight : normal;
}

div.recipe p{
/* for winter 2012 supplement */
  width : 90%;
  margin : .7em 5% 9px 5%;
  padding : 0;
  text-indent : 0;
  line-height : 1.8em;
  text-align : left;
    /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-family : Georgia, TimesNewRoman, Times, serif;
  font-weight : normal;
}

/*margin-left : 1em;*/

div.recipe p#epigram{
/*  background-color: #ccff66;*/
  width : 96%;
  /*border : solid 2px #FF9999;*/
  margin : 0px 2% 6px 2%;
  padding : 0 0 2px 0;
  text-indent : 3em;
  font-size : .8em;
  line-height : .90em;
  font-weight : normal;
  font-style : italic;
}
div.recipe p#epigram-kadattir{
/*  background-color: #ccff66;*/
  width : 86%;
  /*border : solid 2px #FF9999;*/
  margin : 0px 2% 6px 12%;
  padding : 0 0 2px 0;
  text-indent : 3em;
  font-size : .8em;
  line-height : .90em;
  font-weight : normal;
  font-style : italic;
}
div.recipe p#epigram-author{
/*  background-color: #ccff66;*/
  width : 96%;
  /*border : solid 2px #FF9999;*/
  margin : 0px 2% 16px 2%;
  padding : 0 0 2px 0;
  text-indent : 7em;
  font-size : .75em;
  line-height : 1em;
  font-weight : normal;
  font-style : normal;
}
div.recipe p.indented-citation{
/* for winter 2012 supplement */
  width : 86%;
  margin : .7em 7% 9px 7%;
  padding : 0;
  text-indent : 0;
  line-height : 1.25em;
  font-size : 1.0em;
  text-align : left;
  font-family : Verdana, Arial, Helvetica, sans-serif;
  /*font-family : Georgia, TimesNewRoman, Times, serif;*/
  font-weight : normal;
}
div.recipe ul{
  width : 90%;
  margin : .7em 5% 9px 5%;
  padding : 0 .5em 0 2em;
  text-indent : 1em;
  line-height : 1.8em;
  text-align : left;
    /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-family : Georgia, TimesNewRoman, Times, serif;
  font-weight : normal;
}



div#selected{
/* fka 'text-background' */
  position : static;
  overflow : hidden;
  width : 72%;
  background-color: #BBCFBB;
  border : solid 0px #cccfcf;
  margin: 1% 14% 1% 14%;
}

div#selected h1{
/* title head */
  position : static;
  overflow : hidden;
  width : 92%;
  background : #92929F;
  margin : 1.2em 4% 1.5em 4%;
  padding : 0;
  border-bottom : solid .5em #62626F;
  text-align : left;
  vertical-align : bottom;
  text-indent : 2pt;
  line-height : 1.3em;
  font-size : 1.3em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bolder;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}
div#selected h1 a{
line-height : 2.3em;
}

/* several classes are expected here, eg indented, flush-left, and author-specific */
div#selected p.flush-left{
  width : 90%;
  margin : .7em 5% 9px 5%;
  padding : 0;
  text-indent : 0;
  line-height : 1.8em;
  text-align : left;
    /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-family : Georgia, TimesNewRoman, Times, serif;
  font-weight : normal;
}
div#selected p.indented{
  width : 72%;
  margin : 0px 14% 9px 14%;
  padding : 0;
  text-indent : 2em;
  line-height : 1.8em;
  text-align : left;
  font-weight : normal;
}


div#bio{
  position : static;
  overflow : hidden;
  /*width : 60%;
  margin : -4px 20% 12px 20%;*/
  width : 96%;
  margin : 2.3em 2% 1em 2%;
  background : #BBCFBB;
  border-top : solid 1.45em #62626F;
  padding : 2px 0px 4px 0px;
  text-align : left;
  vertical-align : top;
  text-indent : none;
  line-height : 1em;
  font-size : .8em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : normal;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}

div#bio h1{
/* name of author used in bio*/
  float : left;
  overflow : visible;
  border :0;
  margin : 0 0 0 0;
  padding : 0;
  background-color : #BBCFBB;
  line-height : 1.2em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : normal;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}

div#bio p{
/* may be same as h1 */
  float : left;
  overflow : visible;
  border :0;
  margin : 0 0 0 0;
  padding : 0;
  background-color : #BBCFBB;
  line-height : 1.2em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : normal;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}

div#bio p#wpic{
/* may be same as h1 */
  float : left;
  overflow : visible;
  width : 62%;
  border :0;
  margin : 6px 0 0 0;
  padding : 0;
  background-color : #BBCFBB;
  line-height : 1.2em;
  font-size : 1.1em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : normal;
  font-style : normal;
  font-variant : normal;
  letter-spacing : normal;
  word-spacing : normal;
}

div#bio span.pubin{
/* italic names of other publications wherein the author claims publication */
  font-style : italic;
}

div#bio a{
  color : #442233;
  font-weight : normal;
}
 
div#bio a:hover{
  color : #339988;
  font-weight : normal;
}

div#bio img{
float : right;
min-width : 22%;
max-width : 36%;
margin : 6px 0 0 6px;
}

 
  /* footer tags */
div#footer {
  position: static;
  top: 100%;
  min-height : 1.45em;
  width : 96%;
  -moz-border-radius:2px; /* mozilla */
  -webkit-border-radius:2px; /* safari */
  border-radius:2px; /* for opera */
  background : #92929F;
  margin : 6% 2% 2px 2%;
  border : solid 0px #FF2222;
  padding : 0 .1em 2px .1em;
  text-align : center;
  vertical-align : middle;
  line-height : 1em;
  font-size : .7em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bold;
  font-style : normal;
  color : #442233;
  font-variant : normal;
  }
  
  div#footer-main {
  position: static;
  top: 100%;
  min-height : 1.45em;
  width : 96%;
  -moz-border-radius:2px; /* mozilla */
  -webkit-border-radius:2px; /* safari */
  border-radius:2px; /* for opera */
  background : #228866;
  margin : 6% 2% 2px 2%;
  border : solid 0px #FF2222;
  padding : 0 .1em 2px .1em;
  text-align : center;
  vertical-align : middle;
  line-height : 1em;
  font-size : .7em;
  /*font-family : Verdana, Arial, Helvetica, sans-serif;*/
  font-weight : bold;
  font-style : normal;
  color : #442233;
  font-variant : normal;
  }