/* ######################################################## */
/* Main WWP stylesheet                                      */
/* 2010 Brown University Women Writers Project              */
/* ######################################################## */

/* ######################################################## */
/* This is Eric Meyer's Reset CSS, used for setting         */
/* baseline values for elements that might otherwise be     */
/* rendered inconsistently by different browsers. The reset */
/* styles are overriden as needed later in the stylesheet.  */
/* Version: 1.0 | 20080212                                  */
/* http://meyerweb.com/eric/tools/css/reset/                */
/* ######################################################## */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0; /* reset later for various link states */
	font-size: 100%; /* this will default to 16px on most modern browsers */
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 150%; /* this will default to 24px in most modern browsers */
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote {
  margin: 0 2em;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* override most browsers' default italics for these elements */
/* 2025-08: Ash removed <cite> from this list. */
address {
	font-style: normal;
}


/* ######################################################## */
/* GlOBAL STYLES FOR PAGE LAYOUT                            */
/* These styles apply to ALL WWP, WWO, and Exhibits pages   */
/* and may be overriden locally as needed                   */
/* ######################################################## */
/* All WWP pages are laid out on a 950px, 12-column grid  */
/* ######################################################## */

/* Define some CSS custom properties. */
:root {
  --header-font: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
}

body {
  background: url('../gfx/header_tile.png') top left repeat-x;
}

div.frame {
	font-family: "Times New Roman", Times, serif;
  display: grid;
  grid-template: 
    "header"
    "nav-menu"
    "main"
    "footer";
  gap: 0;
}

div.header {
        line-height: 0; /* slight hack to prevent additional space after images */
  grid-area: header;
}

div.header img.banner-logo {
        float: left;
}

div.header div.banner-title {
        max-width: 58.125em; /* 930px */
        min-width: 43.75em; /* 700px */
        padding: 0 0.625em;
	margin: 0 auto; /* center on page */
}

div.header div.banner-title a:focus {
  outline: 2px dotted rgb(107,130,153);
}

div.main {
  grid-area: main;
  place-self: center;
  padding: 1.5em .625em;
  display: grid;
  grid-template: 
    "sidebar1 content sidebar2"
    "sidebar1 content2 sidebar2"
    / 20% 60% 20%;
  /*clear: both;*/ /* clear navigation menu floats */
        max-width: 60rem;
        /*min-width: 43.75em;*/ /* 700px */
        /*min-height: 420px;*/ /* set minimum height so footer doesn't appear too high on page */
	margin: 0 2rem; /* center on page */
        /*overflow: hidden; <-- removed 2017-01-11 by Ashley to solve tables 
                                getting eaten when their width was bigger than div.main */
}

div.main.homepage,
div.main.chunky {
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 650px) {
  
  /* No need to center the main page content on smaller screens. */
  div.main {
    grid-template: 
      "content"
      "content2"
      "sidebar2";
    max-width: 90vw;
    margin: 0 0.5rem;
    place-self: auto;
  }
  
  div.main.homepage,
  div.main.chunky {
    max-width: 100%;
  }
}

div.main h1, div.main h2, div.main h3,
div.main h4, div.main h5, div.main h6 {
  color: rgb(49,69,89);
  font-family: var(--header-font);
  font-weight: normal;
  text-transform: uppercase;
}

div.main h1 {
	margin-bottom: 1.2em;
	color: rgb(229,154,23);
	font-size: 125%; /* 20px equivalent */
}

div.main h2 {
        margin: 2.25em 0 0.5em 0;
        font-size: 112.5%; /* 18px equivalent */
        border-bottom: 1px solid rgb(235,235,245);
}

div.main h3 {
        margin: 1.5em 0 0.5em 0;
        font-size: 100%;
}

div.main h4 {
        font-size: 87.5%;
        font-style: italic;
}

div.main h3 + h4 {
        margin-bottom: 0.4em;
}

div.main h4 > i {
        font-style: normal;
}

div.area-navigation {
  /* 2023: Removed area-navigation because it was empty anyway. ~Ash */
  display: none;
        /*float: left;
        width: 13.9875%;
        margin: 48px 0 30px 0;
        margin-right: 3.225%;*/
}

div.area-navigation h1, div.related h1 {
        color: rgb(49,69,89);
        font-size: 100%;
        margin-bottom: 0.625em;
        border-bottom: 1px solid rgb(235,235,245);
}

div.related {
  grid-area: sidebar2;
        /*float: right;
        position: relative;
        width: 22.58%;*/
        margin-top: 48px;
        margin-left: 1em;
}

@media screen and (max-width: 650px) {
  
  div.related {
    margin-left: 0;
  }
}

div.related ul {
        line-height: 143.75%;
}

div.related li {
        border-bottom: 1px solid rgb(235,235,245);
}

div.related li a:hover {
        color: rgb(49,69,89);
        text-decoration: none;
}

/* if tools follow related links */
div.related div.tools {
        margin-top: 48px;
}

/* if tools are the only thing in right column */
div.related div.tools-only {
        margin-top: 0;
}

div.related div.gallery {
        position: relative;
}

div.related div.gallery-item {
        max-width: 13.125em;
        min-width: 9.875em;
        max-height: 13.125em;
/* small size options
        max-width: 6.5625em;
        min-width: 4.9375em;
        max-height: 6.5625em; */
        margin: .75em 0;
        padding: 0 0 0 .625em;
        background: url('../gfx/gallery_item_arrow.png') center left no-repeat;
}

div.related div.gallery-item a {
        display: block; 
        position: relative;
        padding: .25em;
        background: rgb(255,255,255);
        border: 2px solid rgb(184,200,217);
        border-left: none;
        cursor: pointer;
        text-decoration: none;
        overflow: hidden;  
}

div.related div.gallery-item span.tip {
        position: absolute;
        display: none;
        width: 100%;
        top: 0;
        left: 0;
        background: rgb(90,106,122); /* fallback for browsers without rgba support */
        background: rgba(49,69,89,.8);
        color: rgb(235,235,245);
        font-size: 75%;
        font-family: var(--header-font);
        text-align: center;
}

div.related div.gallery-item img {
        display: block; 
        width: 100%;
        max-width: 200px;
        margin-right: .25em;
}

div.area-navigation ul, div.related ul {
        list-style-type: none;
}

div.area-navigation a {
        display: block;
        width: 88%;
        padding-left: 12%;
        text-decoration: none;
}

div.area-navigation a:hover {
        color: rgb(49,69,89);
}

div.area-navigation > ul > li.file > a {
    width: 100%;
    padding-left: 0;
}

/* all items */
div.area-navigation li {
        border-bottom: 1px solid rgb(230,230,240);
}

/* second+ level items */
div.area-navigation li ul li {
        line-height: 125%;
        font-size: 87.5%;
        border-bottom: none;
        border-top: 1px solid rgb(240,240,250);
}

div.area-navigation li ul li a {
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        background-color: rgba(255,255,255,.25) !important;
}

/* third+ level items */
div.area-navigation li ul li ul li {
        font-size: 100%;
}

div.area-navigation li ul li ul li a {
        background-color: rgba(255,255,255,.5) !important;
}

div.area-navigation li.expanded {
        background: rgb(235,235,245);
}

div.area-navigation li.expanded a {
        background: url('../gfx/expanded.png') center left no-repeat;
}

div.area-navigation li.collapsed a {
        background: url('../gfx/collapsed.png') center left no-repeat;
}

div.area-navigation li.expanded.active a, div.area-navigation li.active li.expanded a {
        background: url('../gfx/expanded_active.png') center left no-repeat;
}

div.area-navigation li.active li.collapsed a {
        background: url('../gfx/collapsed_active.png') center left no-repeat;
}

div.area-navigation li.file a, div.area-navigation li.active li.file a {
        background: transparent;
}

div.area-navigation li.active, div.area-navigation li.active li, div.area-navigation li.active li li {
        background-color: rgb(255,217,92) !important;
}

div.content {
  grid-area: content;
        /*float: left;
        width: 57%;*/
}

@media screen and (min-width: 651px) {
  
  div.content {
    /*width: 65%;*/
  }
}

div.content p {
        margin-bottom: 1.5em;
}

div.content p.event span.eventhead {
        display: block;
}

/*
   div.content p:last-child:after, div.content ul:last-child li:last-child:after {
   2017-06-01: Removed selector in favor of one that will accomplish the original goal, 
     to have an icon cap off the content of each webpage.
 */
div.content::after {
        display: block;
        /*margin-top: 1em;*/
        margin: 1em 0;
        content: url('../gfx/logo_tiny.png');
        color: rgb(107,130,153);
        text-align: center;
        line-height: 0;
}

div.content blockquote {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        padding: 0.25em 0;
        border-top: 1px dotted rgb(184,200,217);
        border-bottom: 1px dotted rgb(184,200,217);
}

div.content blockquote p {
        margin: 0;
}

div.content blockquote p:last-child:after {
        content: '';
        content: none;
}

div.content ul {
        margin-bottom: 1.5em;
        list-style-type: none;
}

div.content ul ul, div.content ol ul {
        margin-bottom: 0;
}

div.content ul li {
        margin: 0.4em 0 0.4em 1em;
        padding-left: 0.75em;
        background: url('../gfx/wwp-list-bullet.png') 0 0.5625em no-repeat;
        line-height: 1.4em;
}

div.content ol li {
        margin-left: 2.5em;
        background: none;
}

div.content .checklist {
        list-style: none;
}

div.content .checklist li {
        margin-left: 1em;
        background: none;
}

div.content .checklist li input {
        width: unset;
}

div.content table {
        margin-bottom: 1.5em;
}

div.content caption {
        background: rgb(245,245,255);
        font-weight: bold;
}

div.content figure {
  align-items: center;
  border: 2px solid rgb(184,200,217);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 1.5rem;
}

div.content figure img {
  border: thin solid #ddd;
  box-shadow: 0.25rem 0.25rem 0.75rem rgb(184,200,217);
}

div.content tr.divide-after {
        border-bottom: thin solid gray;
}

div.content th {
        padding: 0.75em 0.75em 0 0;
        text-align: center;
}

div.content td {
        padding: 0.25em 0.75em 0.25em 0.5em;
}

div.content table.bordered th,
div.content table.bordered td {
        border: thin solid gray;
}

div.content table.bordered th {
        padding: 0.75rem 1rem;
}

div.content table.wwp_students td {
        width: 10.25em;
        padding: 0.25em 0.75em 0.25em 0;
}

div.content table#sort-table thead {
        border-top: 1px solid rgb(184,200,217);
        border-bottom: 1px solid rgb(184,200,217);
}

div.content table#sort-table thead th,
div.content table#sort-table td {
        padding: 0.25em 0.75em 0.25em 0.5em;
}

div.content table#sort-table th {
        /*padding: 0 0.75em 0 0;*/
        cursor: pointer;
}

div.content table#sort-table tbody td {
        padding-left: 1.45em;
        text-indent: -1em;
}

div.content td.author {
        padding-left: 2em;
        text-indent: -2em;
}

div.content div.progress-bar {
        width: 42px;
        overflow: hidden;
        background: rgb(184,200,217);
}

/* Status bars, inspired by Bootstrap's progress bars. */
div.content .status, 
div.content .status .status-bar {
        height: 24px;
        border-radius: 6px;
}
div.content .status, 
div.content .status .status-label {
        width: 100px;
        display: block;
}
div.content .status { 
        margin-left: -.65em;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        background-color: #F5F5F5;
        text-indent: initial;
}
div.content .status .status-bar {
        float: left;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
        background-image: linear-gradient(to right, #E9F6FB, #9DD0E1 50px);
        text-align: center;
}
div.content .status .status-label {
        color: black;
        font-size: 0.9em;
}
/* end status bars */

div.content address {
        margin: 0 0 1.5em 2em;
}

div.content p.byline, div.content span.byline {
        margin-bottom: 0em;
        font-style: italic;
}

div.content p.byline span.author, div.content span.byline span.author {
        font-weight: bold;
        font-style: normal;
}

div.content p.dateline {
        margin-top: 1.5em;
}

div.content p.license {
       font-size: 87.5%; 
}

div.content p.license a[rel="license"] img {
        display: block;
        float: left;
        padding: 0.5em 1em 0 0;
}

div.top {
	position: relative;
	overflow: hidden;
}

div.about {
	float: left;
	top: 0;
	left: 0;
        width: 39.785%;
/*	width: 370px; */
	margin: 1em 0 0 0;
	text-align: justify;
	font-size: 112.5%; /* 18px equivalent */
	line-height: 150%;
}

div.featured {
	float: right;
	position: relative;
        width: 57%;
/*	width: 530px; */
}

div.featured h1 {
	margin: 0;
/*	padding: 0 2px; */
	color: rgb(49,69,89);
	font-size: 75%;
	text-align: right;
}

div.featured div.scrollbox {
        overflow: hidden;
        margin: 1px;
        border: 1px solid rgb(184,200,217);
}

div.featured div.scrollable {
	position: relative;
	overflow: hidden;
        width: 100%;
	height: 360px;
/*        padding: 1px; */
/*	border: 1px solid rgb(184,200,217); */
}

div.featured div.scrollable div.items {
	position: absolute;
	width: 100%;
	height: 880px;
}

div.featured div.scrollable div.items div.item-content {
	position: relative;
}

div.featured div.scrollable div.items div.item-content p.caption {
	position: absolute;
	bottom: 6px;
        width: 100%;
	font-size: 87.5%;
        background: rgb(79,99,119); /* fallback for older browsers without rgba support */
        background: rgba(69,89,109,.9);
        color: rgb(245,245,255);
	text-align: center;
}

div.featured div.scrollnav {
	position: absolute;
	top: 2em;
	right: 0.5em;
        padding: 0.25em 0.5em;
        background: rgb(245,250,255); /* fallback for browsers without rgba support */
        background: rgba(245,250,255,.8);
        border: 1px solid rgb(225,230,235);
        -webkit-border-radius: 0.25em;
        -moz-border-radius: 0.25em;
        border-radius: 0.25em;
}

div.featured div.scrollnav div.scrollnav-item {
	width: 1.5em;
	height:	1.5em;
	margin: 0.5em 0 0.5em 0;
}

div.featured div.scrollnav div.scrollnav-item a {
	display: block;
	width: 1.5em;
	height: 1.5em;
        background: rgb(109,129,149); /* fallback for browsers without rgba support */
	background: rgba(49,69,89,0.5);
	color: rgb(235,235,245);
	font-family: var(--header-font);
	text-align: center;
        cursor: pointer;
	-webkit-border-radius: .25em;
	-moz-border-radius: .25em;
	border-radius: .25em;
}

div.featured div.scrollnav div.scrollnav-item a:hover {
        background: rgb(79,99,119); /* fallback for browsers without rgba support */
        background: rgba(49,69,89,0.75);
	text-decoration: none;
	cursor: pointer;
}

div.featured div.scrollnav div.active a {
        background: rgb(69,89,109); /* fallback for browsers without rgba support */
	background: rgba(49,69,89,0.75);
	color: rgb(229,154,23);
	text-decoration: none;
}

div.featured div.scrollnav div.active a:hover {
	text-decoration: none;
	cursor: default;
}

div.featured div.scrollnav div.scrollnav-item a.disabled:hover {
        background: rgb(69,79,109); /* fallback for browsers without rgba support */
	background: rgba(49,69,89,0.5);
	text-decoration: none;
	cursor: default;
}

div.text {
}

div.chunks {
  clear: both; /* clear about and featured floats */
	overflow: hidden; /* tiny hack to give containing element a pixel height */
	margin: 0;
}

div.chunk {
	float: left;
        width: 31.1827%;
/*	width: 290px; */
        margin-top: 30px;
        margin-right: 3.225%;
/*	margin: 30px 30px 0 0; */
}

div.chunk div.chunk-inner {
  margin-bottom: 2.75em;
}

div.chunk h2 {
	min-height: 2.667em;
        margin: 0;
	background: url('../gfx/chunk-heading.png') top right no-repeat;
	font-family: var(--header-font);
	font-weight: normal;
	text-transform: uppercase;
}

div.chunk h2 a:link, div.chunk h2 a:visited {
	display: block;
	min-height: 2.667em;
	padding: 0 0.125em;
        background: rgb(107,130,153); /* fallback for browsers without rgba support */
	background: rgba(107,130,153,.85);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(107,130,153,.85)), to(rgba(87,110,133,.85)));
	background: -moz-linear-gradient(top, rgba(107,130,153,.85), rgba(87,110,133,.85));
	color: rgb(235,235,245);
	border-bottom: 2px solid rgb(77,100,123);
	text-decoration: none;  
}

div.chunk h2 a:hover {
        background: rgb(235,235,245); /* fallback for browsers without rgba support */
	background: rgba(235,235,245,.85); 
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(245,245,255,.85)), to(rgba(225,225,235,.85)));
	background: -moz-linear-gradient(top, rgba(255,255,255,.85), rgba(235,235,245,.85));
	color: rgb(49,69,89);
	border-bottom: 2px solid rgb(229,154,23);
	text-decoration: none;
}

div.chunk p {
	padding-top: 1em;
	font-size: 87.5%; /* 14px equivalent */
}

div.bottom {
  width: 100%;
  grid-area: footer;
	/*clear: both;*/ /* clear main floats */
	/*margin: 30px 0 0 0;*/
  margin-top: 2rem;
	color: rgb(49,69,89);
  background: rgb(184,200,217);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(204,220,237)), to(rgb(184,200,217)));
	background: -moz-linear-gradient(top, rgb(204,220,237), rgb(184,200,217));
	font-family: var(--header-font);
}

div.footer {
	overflow: hidden; /* tiny hack to give containing element a pixel height */
        max-width: 58.125em; /* 930px */
        min-width: 43.75em; /* 700px */
	margin: 0 auto; /* center on page */
        padding: 1.5em .625em;
}

/* 2022-08-23: updated so we could use <h2> in the footer instead of <h1>. */
div.footer h1,
div.footer h2 {
  margin: 0 0 1em;
  border-style: none;
  color: rgb(229,154,23);
  font-family: var(--header-font);
  font-size: 125%; /* 20px equivalent */
  font-weight: normal;
  text-transform: uppercase;
}

div.footer div {
	float: left;
        width: 31.1827%;
        margin-right: 3.225%;
	font-size: 75%; /* 12px equivalent */
}

div.footer a:link, div.footer a:visited {
	color: rgb(49,69,89);
}

/* use this style to cancel the right margin on the last floated element in a row; */
/* can be used for chunks, footer elements, etc. */
/* NOTE: be precise in defining parent elements to ensure that all browsers correctly */
/* assign this style and override previously specified classes (e.g. "div.chunks div.last" */
/* rather than just "div.last" */

div.chunks div.last, div.footer div.last {
	margin-right: 0;
}

/* use this style to clear floats when beginning a new row; */
/* can be used for chunks and other elements as needed */
/* NOTE: be precise in defining parent elements to ensure that all browsers correctly */
/* assign this style and override previously specified classes (e.g. "div.chunks div.first" */
/* rather than just "div.first" */
div.chunks div.first {
	clear: both;
}

ol {
        margin: 0 0 1.5em 1em;
        list-style-type: decimal;
        
}

div.content samp {
        display: block;
        margin: 0 2em 1.5em 2em;
}

div.content p samp, div.content li samp, div.content dd samp {
        display: inline;
        margin: auto;
}

/* ######################################################## */
/* GlOBAL LINK STYLES                                       */
/* These link styles apply to ALL WWP, WWO, and Exhibits    */
/* pages and may be overriden locally as needed             */
/* ######################################################## */

a:link, a:visited, a:active {
	color: rgb(107,130,153);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:focus {
/*        outline: 2px dotted rgb(107,130,153); */
          outline: thin dotted rgb(107,130,153); 
}

/* ######################################################## */
/* MAIN NAVIGATION MENU FOR WWP                             */
/* These styles apply to the primary navigation menu at the */
/* top of all WWP pages, included via SSI                   */
/* The behavior of the menu (e.g. popups) is controlled by  */
/* scripts in /utils/javascript/wwp.js                      */
/* ######################################################## */

div.nav-menu {
        float: left;
        position: relative;
        width: 100%;
	font-family: var(--header-font);
	text-transform: uppercase;
 	background: url('../gfx/navmenu_tile.png') top left repeat-x;
 	background-color: rgb(235,235,245); /* specify background color just in case  */        
        z-index: 100;
}

div.nav-menu ul.nav-menu-outer {
    max-width: 58.125em;
    min-width: 43.75em;
    margin: 0.375em auto 0 auto;
}

div.nav-menu ul ul {
    float: left;
}

div.nav-menu li {
    float: left;
    position: relative;
    width: 26.125%;
    margin: 0 1px; 
    padding-top: 0.25em;
    vertical-align: bottom;
    text-align: center;
}

div.nav-menu li.first {
    width: 8%;
    text-align: left;
}

div.nav-menu li.last {
    width: 12.25%;
}

div.nav-menu ul li ul {
    width: 100%;
    padding-top: 0;
    background: rgb(235,235,245); /* for browsers without rgba support */
    background: rgba(233,233,244,.9);
    text-transform: none;
}

div.nav-menu a, div.nav-menu a:visited {
    display: block;
    padding: 0.25em 0.75em;
    color: rgb(49,69,89);
    text-decoration: none;
}

div.nav-menu li.first a, div.nav-menu li.first a:visited {
    padding-left: 0;
}

div.nav-menu li ul {
    border-bottom: 1px solid rgb(154,170,187);
}

div.nav-menu li ul li {
    width: 100%;
    margin: 0;
    padding-top: 0;
    text-align: left;
}

div.nav-menu li ul li a, div.nav-menu li ul li a:visited {
    padding-left: 2em;
}

div.nav-menu ul ul {
    visibility: hidden;
    position: absolute;
}

div.nav-menu li a:hover, div.nav-menu li a:focus {
    background: rgb(194,207,223); /* for browsers without rgba support */
    background: rgba(184,200,217,.8);
    border-left: 1px solid rgb(154,170,187);
    border-right: 1px solid rgb(154,170,187);
    text-decoration: none;
}

div.nav-menu li.first a:hover {
    background: transparent;
    border: none;
}

div.nav-menu > ul > li:hover, div.nav-menu > ul > li.active {
    padding-top: 0;
    border-top: 0.25em solid rgb(154,170,187);
}

div.nav-menu > ul > li.first:hover {
    padding-top: 0.25em;
    border-top: none;
}

div.nav-menu li:hover a, div.nav-menu li.active a {
    border-left: 1px solid rgb(154,170,187);
    border-right: 1px solid rgb(154,170,187);
}

div.nav-menu ul li:hover ul, div.nav-menu ul a:hover ul, div.nav-menu ul li.active ul {
    visibility: visible;
}


/* ######################################################## */
/* GlOBAL STYLES FOR PHRASE-LEVEL CONTENT                   */
/* These styles apply to ALL WWP, WWO, and Exhibits pages   */
/* and may be overriden locally as needed                   */
/* ######################################################## */

.title {
	font-style: italic;
}

a.link-more {
        display: block;
        text-align: right;
        color: rgb(107,130,153);
        cursor: pointer;
}

a.link-more-inline {
        display: inline;
        color: rgb(107,130,153);
}

a.link-more:after, a.link-more-inline:after {
        font-size: 125%;
        content: "\00A0\00BB";
}

/* ######################################################## */
/* LOCAL STYLES 				            */
/* These styles apply ONLY to specific WWP pages            */
/* ######################################################## */

/* used for phrase "The Brown University Women Writers Project" */
div.about b {
	font-size: 122%; /* 20px equivalent */
}

/* container for chunk elements on main page */
div#front {
	margin: 0;
	padding: 30px 0 0 0;
}

/* headings on main page look different */
div#front h1 {
	color: rgb(49,69,89);
	font-size: 112.5%; /* 18px equivalent in context */
}

/* the next three styles are used for announcements on main page */
div.news-item {
	padding-bottom: 0.5em;
	border-top: 1px solid rgb(209,225,242);
}

div.news-item-date {
	font-style: italic;
	color: rgb(49,69,89);
}

div.news-item p {
	padding-top: 0;
}

div.news-item p a {
	display: block;
	/*padding-right: 1.5em;*/
	/*background: url('../gfx/more_active.png') center right no-repeat;*/
}

div.news-item p a:after {
        font-size: 125%;
        content: "\00A0\00BB";
}


/* featured quotation from textbase */
div#qotd-container p {
        display: none; /* override with javascript once content has loaded */
	padding: 0;
}

div#qotd-container div.qotd {
}

div#qotd-container p.qotd {
	padding: 0.4em 0.5em;
	border: 2px solid rgb(184,200,217);
	border-bottom: none;
	text-align: justify;
}

div#qotd-container p.qotd-author {
	padding-top: 2em;
	background: url('../gfx/qotd_arrow.png') top center no-repeat;
	text-align: right;
}

div#qotd-container p.qotd-title {
	text-align: right;
}

div#upcoming div.event {
        display: none; /* override with javascript once it has loaded */
	overflow: hidden;
	padding-bottom: 0.5em;
	border-top: 1px solid rgb(209,225,242);
}

div#upcoming div.dateBox {
	float: left;
	overflow: hidden;
	margin: 0.375em 0.5em 0 0;
	padding: 0;
	font-family: var(--header-font);
	font-size: 75%; /* 12px equivalent */
	line-height: 183.25%; /* 22px equivalent */
	text-align: center;
}

div#upcoming div.dateBox div.monthBox {
	float: left;
	width: 3em;
	background: rgb(107,130,153);
	color: rgb(245,245,255);
	text-transform: uppercase;
        -webkit-border-top-left-radius: 3px;
        -webkit-border-bottom-left-radius: 3px;
	-moz-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}

div#upcoming div.dateBox div.dayBox {
	float: left;
	width: 2em;
	background: rgb(137,155,173);
	color: rgb(245,245,255);
        -webkit-border-top-right-radius: 3px;
        -webkit-border-bottom-right-radius: 3px;
	-moz-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}

/* the following are alternative styles for the date box used in event listings */
/* restore for a more conventional calendar icon */
/*
div#upcoming div.dateBox {
	float: left;
	overflow: hidden;
	width: 1.5em;
	height: 1.875em;
	margin: 0.286em 0 0 0.25em;
	padding: 1px;
	border: 1px solid rgb(184,200,217);
	font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
	text-align: center;
	-webkit-box-shadow: 0px 2px 4px rgba(49,69,89,.15);
	-moz-box-shadow: 0px 2px 4px rgba(49,69,89,.15);
} */

/* div#upcoming div.dateBox div.monthBox {
	background: rgb(107,130,153);
	color: rgb(245,245,255);
	font-size: 62.5%; */ /* 10px equivalent */
/*	text-transform: uppercase;
	line-height: 1.4em;
}

div#upcoming div.dateBox div.dayBox {
	color: rgb(107,130,153);
	font-size: 87.5%; */ /* 14px equivalent */
/*	line-height: 1.25em;
} */

div#upcoming a {
        display: block;
	padding: 0 1.25em 0 5.5em;
	text-align: left;
        font-size: 87.5%;
        /*background: url('../gfx/more_active.png') center right no-repeat;*/
}

div#upcoming a:after {
        font-size: 125%;
        content: "\00A0\00BB";
}

div#upcoming span.eventDates {
        display: none;
        color: rgb(49,69,89);
        font-style: italic;
}

div.event p:last-child:after {
        content: none;
        content: '';
}

/* used as container element for overview pages */
div.text p {
	font-size: 125%; /* 18px equivalent */
}

div.text p:last-child:after {
        display: inline;
        content: " " url('../gfx/logo_tiny.png');
        color: rgb(107,130,153);
        line-height: 0;
}

div.text p img.inline-right {
        float: right;
        margin: 0 0 1em 1em;
        padding: 0.125em;
        border: 1px solid rgb(225,225,235);
}


div.overlay {
        display: none;
        min-width: 51.6125%;
/*        width: 500px; */
        min-height: 200px;
        max-width: 90%;
        background: rgb(255,255,255);
        border: 1px solid rgb(49,69,89);
        -webkit-box-shadow: 0 0.5em 3em rgb(15,15,15);
        -moz-box-shadow: 0 0.5em 3em rgb(15,15,15);
        z-index: 1000;
        scroll: auto;
}

div.overlay .close {
        background: url('../gfx/overlay_close.png') center center no-repeat ;
        position: absolute;
        top: -10px;
        right: -10px;
        cursor: pointer;
        width: 26px;
        height: 26px;
}

div.overlay p.eventHead {
        padding: 0.8em;
        font-size: 125%;
        background: rgb(107,130,153);
        color: rgb(245,245,255);
        font-family: var(--header-font);
}

div.overlay p.eventHead span.eventDates {
        display: block;
        font-size: 80%;
}

div.overlay p.eventHead span.eventLoc {
        display: block;
        font-size: 80%;
        font-style: italic;
}

div.overlay div.dateBox {
        padding: 0.8em;
        font-size: 125%;
        background: rgb(107,130,153);
        color: rgb(245,245,255);
        font-family: var(--header-font);
}

div.overlay div.monthBox {
        display: inline;
}

div.overlay div.monthBox:after {
        content: ". "
}

div.overlay div.dayBox, div.overlay div.yearBox {
        display: inline;
}

div.overlay div.dayBox:after {
        content: ", ";
}

div.overlay p {
        padding: 1em;
        font-family: "Times New Roman", Times, serif; 
}

div.overlay p.eventDesc {
        padding: 1em;
}

div.overlay div.image {
        line-height: 0; /* slight hack to remove bottom white space in some browsers */
}

/* for use with the JQuery Tools tooltip function */
.tooltip {
        display: none;
        width: 100px;
        height: 94px;
        padding: 10px 12px 0 12px;
        background: url('../gfx/tooltip_arrow_down.png') top center no-repeat;
        font-family: "Times New Roman", Times, serif;
        font-size: 87.5%;
        text-align: center;
        line-height: 150%;
}

.tooltip:first-letter {
        text-transform: uppercase;
}

/* ######################################################## */
/* SEARCH FORMS                                             */
/* ######################################################## */

fieldset {
    padding: 0.75em;
    border: 1px solid rgb(107,130,153);
    background: rgb(245,245,255);
}

legend {
    padding: 0.125em 0.5em;
    border: 1px solid rgb(107,130,153);
    background: rgb(184,200,217);
    color: rgb(49,69,89);
}

select {
    margin: 0 2%;
}

input {
    width: 45%;
/*    width: 18em; */
    margin: 0 2%;
}



/* ######################################################## */
/* SEMINAR MATERIAL                                        */
/* ######################################################## */

div.seminar {
  grid-area: content;
}

div.seminar p {
    margin-bottom: .1em;
}

div.seminar ul {
        margin-bottom: 1.5em;
        list-style-type: disc;
}

div.seminar li {
        margin-left: 2em;
}


div.content td.time {width:30ex; font-weight:bold; padding: 0em 0em 0em 0em;
}

div.content td.content {width: 60ex; padding: 0em 0em 0em 0em;
}

div.content tr.seminar_item {padding-bottom: 0em;
}