/* Colors:
#6484af  Header bg; primary tab nav bg
#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); tab dividers (primary); ad bg
#bbe1ff  Def borer; header borders
#d5e4ff  Sent/citation borders
#f2f2ff  Featured def bg
#f9f9ff  Non-featured def bg
*/

/* CORE */

html {
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
  background-color: #f5f3f3;
  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 */

/* Also see "Interact, share icons" section. */

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-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-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;
}

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-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;
}


/* HEADER */

div.header {
  padding: 5px 15px 20px 15px;
  background-color: #6484af;
  color: #fff;
}
.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%;
}

.fb-like-container {
  width:80px;
  height:20px;
  margin-top:-1px;
  display: inline;
}
.fb-like-container .fb-like {
  display: inline;
}


/* MAIN CONTENT */

div.content-holder {
  background-color: #fffffe;
  padding: 0;
  margin: 0;
}

/* 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;
}


/* 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;    
  white-space: nowrap;
}

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

.hl {
  background-color: #ffa;
}

/* This affects only the immediate child elements. */
.toggle-holder > * {
  display: none;
}

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

.honey {
  display: none;
}


/* ATP page */

body#google-penalty-page blockquote {
  margin-left: 20px;
  padding-left: 10px;
  border-left: 3px solid black;
}

.photo {
  float: right;
  margin: 0 0 15px 20px;
  padding-left: 15px;
  border-left: 1px solid #bbb;
  /* The following 2 declarations ensure the caption wraps equally as wide as the photo. */
  display: table;
  width: 1%;
}
@media screen and (max-width: 530px) {
  .photo {
    float: none;
    padding-left: 0;
    border-left: none;

    margin-left: auto;
    margin-right: auto;
  }
}


/* 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: 8pt 14pt 10pt 8pt;
  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 {
  margin-top: 1em;
  margin-bottom: 2em;
}

blockquote.sentence,
blockquote.citation {
  background-color: #fff;
  border: 1px solid #d5e4ff;

  margin: 6pt 0 10pt -2pt;
  padding: 6pt 10pt 6pt 8pt;
}

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: 8pt;
  margin-bottom: 0;
  font-size: 90%;
}
p.attrib,
p.attrib a {
  color: #777;
}

.censored {
  background-color: #000;
}

table.s-harers ul {
  margin: 0;
  padding: 0;
  padding-left: 1em;
}
table.s-harers li {
  margin-right: 10pt;
}
table.s-harers 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 section nav buttons (in def chunks.)  Share/email buttons. */

div.icon-section-nav {
  text-align: center;
  float: left;
  padding-left: 20px;

  white-space: nowrap;
}

div.icon-s-hare {
  white-space: nowrap;
}

div.icon-section-nav a,
div.icon-s-hare      a {
  text-decoration: none;
}

div.icon-s-hare.size-16 {
	padding-bottom: 5px;
}
div.icon-s-hare.size-16 .label {
	padding-left: 8px;
	vertical-align: top;
}

div.icon-s-hare.size-32 {
  float: left;
  padding-left: 20px;
}
div.icon-s-hare.size-32 .label {
  display: block;

  /* Doesn't really work.  Adds _some_ space but it maxes out at some (fairly small) value. 
     e.g. 500px doesn't actually give 500px of padding.  I don't know why.  It doesn't have
     to do with floating the icon-share divs.

     Use padding (rather than margin) so that the whitespace between the icons and their
     labels is clickable.
  */
  padding-top: 5px;
}


/* 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;
  margin-bottom: 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 here makes the tabs taller/shorter, depending on the height of 
     contained elements.  padding-top will be hidden due to `overflow:hidden`. */
  padding-bottom: 9px; /* (X)  Keep in sync with (Y). */
  padding-top: 9px;    /* (X)  Must be the same as (X). */
  background-color: #6484af;
  /* Fix "<ul> isn't same height as <li>s" issue.  See 2018-10-19 entry in notes. */
  overflow: hidden;
}

ul#tabnav li { /* settings for all tabs */
  display: inline;
  /* WGR: Keeping the <li> exactly as tall as the <a> isn't strictly necessary (depending
     on a variety of factors*) but it does make it easier to reason about the layout and
     to debug the layout in inspectors.  Of course, you still have to deal with weird
     fractional vertical sizing issues.

     * - For example, if the tab divider is to be on this element rather on the tab links.
   */
}

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;
}

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 */
}

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;
  /* WGR modified from original: Set padding (tab size) as desired.  First number
     (padding-top) must be the same as (X) above.  Third number (padding-
     bottom) must be enough greater than (X) that these <a>s are taller than the <ul> so
     that `overflow: hidden` above fixes issue.

     20px is certainly enough to account for all zoom levels.  (However, if the hovered
     tab is to be distinguished visually from the current tab with a blue border-bottom,
     the delta between (X) and this must be tight.) */
  padding: 9px 11px 20px;
  border-right: 2px solid #fffffe; /* Separator line "between" tabs */
}

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;
  }
}

/* 500px is a SWAG. */
@media screen and (max-width: 500px) {
  /* Reduce paddings by 0, 5, 10, 5px. */
  div.header {
    padding: 5px 10px 10px 10px;
  }
  /* Reduce paddings by 10pt. */
  div.content {
    text-align: left;
    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: 840.999px) { #tabnav { display: none !important; } #tabnav.narrow { display: block !important; } } 
@media screen and (min-width: 720px) and (max-width: 770.999px) { #tabnav { display: none !important; } #tabnav.narrower { display: block !important; } } 
@media screen and (min-width: 651px) and (max-width: 719.999px) { #tabnav { display: none !important; } #tabnav.narrowerer { display: block !important; } } 
@media screen and (min-width: 615px) and (max-width: 650.999px) { #tabnav { display: none !important; } #tabnav.narrowererer { display: block !important; } } 
@media screen and (min-width: 575px) and (max-width: 614.999px) { #tabnav { display: none !important; } #tabnav.narrowerererer { display: block !important; } } 
@media screen and (min-width: 535px) and (max-width: 574.999px) { #tabnav { display: none !important; } #tabnav.narrowererererer { display: block !important; } } 
@media screen and (min-width: 450px) and (max-width: 534.999px) { #tabnav { display: none !important; } #tabnav.narrowerererererer { display: block !important; } }
/* See 2018-10-19 entry in notes regarding this sizing. */ 
@media screen and (min-width:   0px) and (max-width: 449.999px) { #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: 640.999px) { .cf { display: block; } .cf-inverted { display: none;   } .header .right { text-align: left;  } #tagline { display: none;   } }


/* LETTERED NAV */

table.nav.lettered {
  display: none;
}

@media screen and (min-width: 641px)                            { table.nav.lettered.full { display: table; } }
@media screen and (min-width:   0px) and (max-width: 640.999px) { table.nav.lettered.narrow {display: table; } }


/* PENALTY BOX */

#site-notice {
  background-color: #ffc;
  padding: 10px;
  font-size: 90%;
  max-width: 810px;
  margin-right: auto;
  margin-bottom: 10pt;
  margin-left: auto;
}
#site-notice {
  display: none;
}

/* 0 */ @media screen and (min-width: 865px)                            { #site-notice.full { display: block; } }
/* 1 */ @media screen and (min-width: 760px) and (max-width: 864.999px) { #site-notice.narrow { display: block; } }
/* 2 */ @media screen and (min-width: 675px) and (max-width: 759.999px) { #site-notice.narrower { display: block; } }
/* 3 */ @media screen and (min-width: 615px) and (max-width: 674.999px) { #site-notice.narrowerer { display: block; } }
/* 4 */ @media screen and (min-width:   0px) and (max-width: 614.999px) { #site-notice.narrowererer { display: block; } }