/* Colors:
#6484af  Header bg; body border
#6484b1  Secondary nav tabs bg; selected secondary nav tab border (was orange)
#6484b2  Non-selected secondary nav tabs border
#6484b3  Main nav tabs bg and border
#6484b0  Home page chunk header bg; chunk border bg (home-*.css)
#ffffff  Non-selected secondary nav bg; tab nav labels (links)  
#fffffe  Content bg; selected tab bg (primary through tertiary); ad bg
#bbe1ff  Def borer; header borders
#d5e4ff  Sent/citation borders
#f2f2ff  Featured def bg
#f9f9ff  Non-featured def bg
*/

/* CORE */

body {
  background-color: #ebebeb;
  padding: 0 15px;
  margin-top: 0;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.84em;
  line-height: 1.357;

  color: #222;
}

h1, h2, h3, h4 {
  text-align: left;
}
h1 {
  font-size: 140%;
  margin-top: 22pt;
}
h2 {
  font-size: 135%;
  margin-top: 20pt;
}
h3 {
  font-size: 117%;
  margin-top: 20pt;
}

a {
  color: #333;
}
a.noul {
  text-decoration: none;
}

/* In FF 20, 21 (and beyond?) when using DirectWrite rendering, double-bolded text appears extra bold.
   See e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=550128 which was closed Invalid (i.e. Won't fix.)
   This is to prevent that. */
b b {
  font-weight: bold;
}

img {
  border: none;
}

.nowrap {
  white-space: nowrap;
}

form {
  margin: 0;
  padding: 0;
}

table {
  border: none;
}
tr {
  text-align: left;
  vertical-align: top;
}

tt {
  font-size: 10pt;
}


/* SPRITES */

span.sprite {
  background-image: url(/static/images/sprites-2015-12-06.png);
  background-repeat: no-repeat;
  display: inline-block;
}
span.sprite-check {
  width: 29px;
  height: 23px;
  background-position: -10px 0;
}

span.sprite-facebook32x32 {
  width: 32px;
  height: 32px;
  background-position: -39px 0;
}
span.sprite-facebook32x32-as-16x16 {
  width: 16px;
  height: 16px;
  background-size: 843.75%;
   /* 50% would be 19.5px.  19px reduces how frequently you can see the right edge of the Blogger icon -
      at least at some zoom levels in at least desktop Firefox. */
  background-position: -19px 0;
}

span.sprite-favicon-blogger {
  width: 16px;
  height: 16px;
  background-position: -71px 0;
}
span.sprite-favicon-facebook {
  width: 16px;
  height: 16px;
   /* At some zoom levels in at least desktop Chrome, you can see the left edge of the Blogger icon. */
  background-position: -87px 0;
}

span.sprite-interact-email-blue32x32 {
  width: 32px;
  height: 32px;
  background-position: -103px 0;
}
span.sprite-interact-email-blue32x32-as-16x16 {
  width: 16px;
  height: 16px;
  background-size: 843.75%;
  background-position: -51.5px 0;
}

span.sprite-interact-map-blue32x32 {
  width: 32px;
  height: 32px;
  background-position: -135px 0;
}
span.sprite-interact-pepper-red32x32 {
  width: 32px;
  height: 32px;
  background-position: -167px 0;
}

span.sprite-interact-tweet-32x32 {
  width: 32px;
  height: 32px;
  background-position: -199px 0;
}
span.sprite-interact-tweet-32x32-as-16x16 {
  width: 16px;
  height: 16px;
  background-size: 843.75%;
  background-position: -99.5px 0;
}

span.sprite-interact-vote-blue32x32 {
  width: 32px;
  height: 32px;
  background-position: 0 -32px;
}

span.sprite-pepper-270x32-b {
  width: 270px;
  height: 32px;
  background-position: 0 -64px;
}
span.sprite-star {
  width: 16px;
  height: 16px;
  background-position: -32px -32px;
}

/* Unused and to be removed from the spritesheet. */

span.sprite-alpha192 {
    width: 10px;
    height: 10px;
    background-position: 0 0;
}
span.sprite-interact-tweets {
  width: 32px;
  height: 32px;
  background-position: -231px 0;
}

/* HEADER */

div.header {
  padding: 5px 15px 10px 15px;
  margin-bottom: 8pt;
  background-color: #6484af;
  color: #fff;
  -moz-border-radius: 0 0 15px 15px;
  -webkit-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
}
.header .right {
  text-align: right;
  font-size: 90%;
}
div.header div.social {
  float: left;
  margin-left: 20px;
}
div.header a {
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

div.header div.title {
  float: left;
}
div.title a#title,
div.title span#tagline {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
}
div.title a#title {
  font-size: 150%;
}
div.title span#tagline {
  font-size: 110%;
}


/* MAIN CONTENT */

div.content-holder {
  background-color: #fffffe;
  padding: 0;
  margin: 0;
  border: 1px solid #6484af;
}

/* There is a corresponding rule for mobile. */
div.content {
  padding-top: 15pt;
  padding-left: 20pt;
  padding-right: 20pt;
  padding-bottom: 20pt;
  line-height: 1.55;
  text-align: justify;
}

div.site-notice {
  background-color: #ffc;
  padding: 10px;
  margin-bottom: 10pt;
  font-size: 90%;
}


/* FOOTER */

div.footer {
  text-align: center;
  font-weight: bold;
  color: #888;
  margin-top: 25px;
  margin-bottom: 75px;
}

div.footer a {
  color: #888;
  text-decoration: none;
}


/* MISC */

form.search-box {
  margin-top: 10px;    
}

h2.separator {
  border: 3px solid #bbe1ff;
  text-align: center;
  font-size: 175%;
  padding: 3pt;
}

.hl {
  background-color: #ffa;
}

.toggle {
  text-decoration: none;
  border-bottom: 1px dotted #777;
}

blockquote.news {
  font-family: Georgia, serif;
  font-style: italic;
  padding-left: 0px;
  margin: 0px
}

.honey {
  display: none;
}


/* SECONDARY / TERTIARY NAV (e.g. letters, numbered pages) */

table.nav {
  padding: 2px;
  line-height: 17pt;
}
table.nav td {
  /* width: 3.8%;  This doesn't work right in Firefox - the "z" becomes very narrow.  So we
     have to specify the width of each cell manually in the HTML. */
  border-left: 2px solid #fffffe; /* ignored */
  padding-right: 2px;
  text-align: center;
}

table.nav a {
  color:white;
  font-size: 1em;
  font-weight:bold;
  text-decoration:none;
  background-color:#6484b1;
  float: left;
  width: 100%;
  border: 1px solid #6484b2;
  margin-right: 2px;
}

table.nav#not-automatically-highlighted a.current,
/* Thesaurus */
table.nav#home a.home,
table.nav#contents a.contents,
table.nav#contents-full a.contents-full,
table.nav#index a.index,
/* Word list */
table.nav#wl0 a.wl0,
table.nav#wlb a.wlb,
table.nav#wlc a.wlc,
table.nav#wle a.wle,
table.nav#wlg a.wlg,
table.nav#wlh a.wlh,
table.nav#wll a.wll,
table.nav#wlp a.wlp,
table.nav#wls a.wls,
table.nav#wlt a.wlt,
table.nav#wlu a.wlu,
table.nav#wlx a.wlx,
/* Browse by letter */
table.nav#a a.a,
table.nav#b a.b,
table.nav#c a.c,
table.nav#d a.d,
table.nav#e a.e,
table.nav#f a.f,
table.nav#g a.g,
table.nav#h a.h,
table.nav#i a.i,
table.nav#j a.j,
table.nav#k a.k,
table.nav#l a.l,
table.nav#m a.m,
table.nav#n a.n,
table.nav#o a.o,
table.nav#p a.p,
table.nav#q a.q,
table.nav#r a.r,
table.nav#s a.s,
table.nav#t a.t,
table.nav#u a.u,
table.nav#v a.v,
table.nav#w a.w,
table.nav#x a.x,
table.nav#y a.y,
table.nav#z a.z,
table.nav#numbers a.numbers {
  background-color: #fffffe;
  color:#000;
  border: 1px solid #6484b1;
}

table.nav a:visited {
  text-decoration:none; /* necessary in IE to avoid underlines */
}

table.nav a:hover {
  background-color: white;
  color:#000;
  border: 1px solid #6484b2;
}


/* SERP STYLES */

div#serp a {
  color: #0000ff;
  font-weight: bold;
}

div#serp a:visited {
  color: #800080;
}

div.indent {
  margin-left: 20px;
}

div#serp li {
  margin-top: 13pt;
  line-height: 1;
}


/* DEFINITION STYLES */

/* term.featured is also used on profile pages, because they're boxes with a shaded background. */

div.term {
  border: 1px solid #bbe1ff;
  margin: 2em 0 2em 0;
  padding: 5pt 7pt;
  background-color: #f9f9ff;
}

div.term.featured {
  background-color: #f2f2ff;
}

/* Term name. */
div.term h2 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 140%;
  font-weight: normal;
}
div.term.featured h2 {
  font-weight: bold;
}

div.term h2 a {
  text-decoration: none;
}

div.definitions li,
div.definitions li {
  margin-top: 1em;
  margin-bottom: 2em;
}

blockquote.sentence,
blockquote.citation {
  background-color: #fff;
  border: 1px solid #d5e4ff;
  margin-top: 1.5em;
  margin-left: 0;
  margin-bottom: 1.5em;
  padding: 3pt 5pt;
}

ul.theses {
  padding-left: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

ul.theses li {
  margin-top: 0;
  margin-bottom: 0;
}

p.attrib {
  font-style: italic;
  margin-top: 1.5em;
  margin-bottom: 0;
  font-size: 90%;
}
p.attrib,
p.attrib a {
  color: #777;
}

.censored {
  background-color: #000;
}

table.sharers ul {
  margin: 0;
  padding: 0;
  padding-left: 1em;
}
table.sharers li b a {
  margin-right: 10pt;
}
table.sharers span a {
  border-bottom: 1px solid #d8d8d8;
  text-decoration: none;
}

/* Part of speech. */
div.term h3 {
  margin-top: 0;
  margin-bottom: 1em;
  padding-bottom: 0;
  font-size: 100%;
  font-weight: normal;
}

div#twitter_div {
  height: 403px;
}

/* Referenced in JS.  Don't rename or change to an id selector. */
.embeddedmap {
  height: 450px;
  border: 1px solid black;
}

/* Interact, share icons */

div.icon-section {
  text-align: center;
  float: left;
  padding-left: 20px;
}
div.icon-section,
div.icon-share {
  white-space: nowrap;
}
div.icon-section a,
div.icon-share a {
  text-decoration: none;
}


/* WORD LIST */

table.wordlist h2 {
  margin-top: 0;
  padding-top: 0;
}

table.wordlist a {
  text-decoration: none;
}

table.wordlist a.v/*ariant*/ {
  color: #777;
  font-style: italic;
}


/* ADS */

div.upper-right-ad,
div.upper-left-ad {
  margin-bottom: 15px;
  margin-top: 20px;
}
div.upper-right-ad {
  float: right;
  margin-left: 20px;
  /* Floated ad divs are supposed to have a width, but we're reusing this div for ads with
     varying widths.  It works fine without specifying the width.
  width: 160px; */
}
div.upper-left-ad {
  float: left;
  margin-right: 20px;
}

/* This is a distinct class because I don't want div.upper-right-ad's margin-top. */
div.def-upper-right-ad {
  float: right;
  margin-left: 20px;
  margin-bottom: 20px;
}

div.home-left-ad {
  margin-top: 2px;
  padding-right: 15px;
}
div.home-right-ad {
  margin-top: 2px;
  margin-left: 15px;
}

div.inner-ad,
div.bottom-ad {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
div.inner-ad {
  margin-bottom: 12pt;
}
div.bottom-ad {
  margin-top: 16pt;
}

table.bottom-ads {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
div.left-ad-of-2 {
  margin-right: 10pt;
}

/* For content near ads. */

div.indent-from-ul-ad {
  margin-left: 190px;
}

/* Stricly only necessary when showing terms, because their shading and borders (though not content) bleed
   underneath any Ur ad. */
div.squeeze-from-ur-ad {
  margin-right: 190px;
}

/* Local-testing-placeholder-divs */

div.Lead, div.Ban, div.SmSq, div.Sq, div.Sky, div.WdSk, div.MdRc, div.LgRc, div.MoLe {
  border: 1px solid black;
  background-color: #ddf;
}
/* Each dimension has been reduced by 2px to account for the border. */
div.Lead { width: 726px; height:  88px; }
div.Ban  { width: 466px; height:  58px; }
div.SmSq { width: 198px; height: 198px; }
div.Sq   { width: 248px; height: 248px; }
div.Sky  { width: 118px; height: 598px; }
div.WdSk { width: 158px; height: 598px; }
div.MdRc { width: 298px; height: 248px; }
div.LgRc { width: 334px; height: 278px; }
div.MoLe { width: 318px; height:  48px; }


/* MAIN NAV TABS */

ul#tabnav { /* general settings */
  text-align: left; /* set to left, right or center */
  margin: 0 0 0 0; /* set margins as desired */
  font-weight: bold; /* set font as desired */
  list-style-type: none;
  padding: 0;
  padding-bottom: 3px;
  line-height: 1.25; /* WR: I added this directive */
}

ul#tabnav li { /* do not change */
  display: inline;
  line-height: 1.25; /* WR: I added this directive */
}

body#welcome li.welcome,
body#recent li.recent,
body#wordlist li.wordlist,
body#browse li.browse,
body#thesaurus li.thesaurus,
body#submit li.submit
{ /* settings for selected tab */
  background-color: #fffffe;  /* set background color to match above border color */
  margin-right: 5px;
}

body#welcome li.welcome a,
body#recent li.recent a,
body#wordlist li.wordlist a,
body#browse li.browse a,
body#thesaurus li.thesaurus a,
body#submit li.submit a
{ /* settings for selected tab link */
  background-color: #fffffe; /* set selected tab background color as desired */
  color: #000;           /* set selected tab link color as desired */
  margin-right: -5px;    /* IE 6, 7 hack.  It thinks the link extends off the right edge of the LI until it hits the next one */
  border-bottom: 1px solid #fffffe; /* WGR: Make selected tab seem to merge with body */
}

ul#tabnav li a { /* settings for all tab links */
  background-color: #6484b3; /* set unselected tab background color as desired */
  color: #fff;               /* set unselected tab link color as desired */
  text-decoration: none;
  padding: 3px 11px;         /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
  border: 1px solid #6484b3;
}

ul#tabnav a:hover { /* settings for hover effect */
  background: #fffffe; /* set desired hover color */
  color: #000;
}


/*************************************************************************************************************
 *
 * MOBILE
 *
 */

/* CORE AND MAIN CONTENT */

/* 400px is a SWAG. */
@media screen and (max-width: 400px) {
  body {
    padding: 0;
  }
  div.content-holder {
    border-left: none;
    border-right: none;
  }
}

/* 500px is a SWAG. */
@media screen and (max-width: 500px) {
  /* There is a corresponding rule for non-mobile. */
  div.content {
    text-align: left;
    /* Reduce padding by 10pt. */
    padding-top: 5pt;
    padding-left: 10pt;
    padding-right: 10pt;
    padding-bottom: 10pt;
  }
}


/* MISC? */

/* I don't see this used anywhere. */
.mobile {
  display: none;
}

/* Also used (see below) is .cf-inverted */
.cf {
  clear: left;
  display: none;
}


/* MAIN NAV TABS */

@media screen and (min-width: 841px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.full {
    display: block !important;
  }
}
@media screen and (min-width: 771px) and (max-width: 840px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrow {
    display: block !important;
  }
}
@media screen and (min-width: 720px) and (max-width: 770px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrower {
    display: block !important;
  }
}
@media screen and (min-width: 651px) and (max-width: 719px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrowerer {
    display: block !important;
  }
}
@media screen and (min-width: 605px) and (max-width: 650px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrowererer {
    display: block !important;
  }
}
@media screen and (min-width: 565px) and (max-width: 604px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrowerererer {
    display: block !important;
  }
}
@media screen and (min-width: 520px) and (max-width: 564px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrowererererer {
    display: block !important;
  }
}
@media screen and (min-width: 450px) and (max-width: 519px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrowerererererer {
    display: block !important;
  }
}
@media screen and (min-width: 1px) and (max-width: 449px) {
  #tabnav {
    display: none !important;
  }
  #tabnav.narrowererererererer {
    display: block !important;
  }
}


/* HEADER */

@media screen and (min-width: 641px) {
  .cf {
    display: none;
  }
  .cf-inverted {
    display: inline;
  }
  .header .right {
    text-align: right;
  }
  #tagline {
    display: inline;
  }
}
@media screen and (max-width: 640px) {
  .cf {
    display: block;
  }
  .cf-inverted {
    display: none;
  }
  .header .right {
    text-align: left;
  }
  #tagline {
    display: none;
  }
}


/* LETTERED NAV */

@media screen and (min-width: 641px) {
  table.nav.lettered.full {
    display: table !important;
  }
  table.nav.lettered.narrow {
    display: none !important;
  }
}
@media screen and (min-width: 1px) and (max-width: 640px) {
  table.nav.lettered.full {
    display: none !important;
  }
  table.nav.lettered.narrow {
    display: table !important;
  }
}