/* Updated 13 Jan 2021 */
P
  { color:white;
    text-align:justify; 
    text-indent:2.5em; 
    line-height:1.3em;
    padding-right:8px; 
    padding-left:8px; }
P.cntr
  { text-align:center; text-indent:0 }
P.potw_date 
  { font-size:28pt;
    font-weight:bolder; 
    text-indent:.5em; 
    background-color:#602020;
    border-top : medium solid silver; 
    border-left : medium solid silver;
    margin-top:.45em; 
    margin-bottom:.25em; }


.potw_desc
  { display: table-cell;
    width:100%;
    vertical-align: top;
    background-color: rgba(30,26,20,0.6);
    border-style: solid;
    border-color: rgba(77,65,50,0.6);
    border-width: thin;
    border-radius: 1em; 
    padding:.25em }
.potw_desc p
  { margin: .5em;
    margin-left: 1.25em;
    margin-right: 1.5em;
    padding:.25em }
.potw_teaser
  { font-size: larger; 
    font-style: italic;
    font-weight:bolder; 
    text-align:left; 
    text-indent:0em; }   
.potw_loc
  { font-size:smaller; 
    text-align:right; 
    text-indent:0em }

.wide_graphic_bar
  { width:93.5%;
    margin-right:3%;
    margin-left:3% }

.widescrn 
  { margin-right:4%;
    margin-left:4% }

/* div wrapper for second pic, so there's a vertical space between them */
.second_pic
  { padding-top: .4em; }

.nav_years
  {text-align:center; text-indent:0; font-size:150%; margin-right:12%; margin-left:12%; padding-top: 0.4em;}

/* make sure that text links are readable on the new dark background */
/* for some reason chrome wasn't picking this up from rwp-main.css. Other browsers were. */
/* a {text-decoration: underline; color: yellow;} */
a:link {color: deepskyblue;}
a:visited {color: navajowhite;}

/* to play with buttons later */
/* .nav_years a:link {color:red;} */

/* added in 2021 - bold current page in nav list */
#POTW-2021 #nav-2021, #POTW-2020 #nav-2020, #POTW-2019 #nav-2019,
#POTW-2018 #nav-2018, #POTW-2017 #nav-2017, #POTW-2016 #nav-2016,
#POTW-2015 #nav-2015, #POTW-2014 #nav-2014, #POTW-2013 #nav-2013,
#POTW-2012 #nav-2012, #POTW-2011 #nav-2011, #POTW-2010 #nav-2010,
#POTW-2009 #nav-2009, #POTW-2008 #nav-2008, #POTW-2007 #nav-2007,
#POTW-2006 #nav-2006, #POTW-2005 #nav-2005, #POTW-2004 #nav-2004,
#POTW-2003 #nav-2003
  { font-weight: bold; color: white; text-decoration-line:none; }

/* catcher if the page ID hasn't been set */
#POTW-XXXX {background:red;}

/* this really needs to change - "Ariel Black" doesn't display in Firefox */
P.caption
  { font-size:2em; font-family:"arial black",arial,"times new roman","sans serif";
    color:#FFFADC; text-align:left; text-indent:1em; line-height:1em }

/* These are the parts that change with screen size */
/* default is smartphone */

  .potw_cell 
    { display: block;
      border-collapse: collapse;
      margin: .8em 0em 1.4em 0em; }
  .potw_pix
    { display: block;
      text-align:center; }
  /* show link border on potw images */
  .potw_pix img
    { border: 2px solid;
      max-width: 100%; }
  .potw_desc
    { display: block;
      background-color: rgba(30,26,20,0.6);
      border-style: solid;
      border-color: rgba(77,65,50,0.6);
      border-width: thin;
      border-radius: 1em; 
      padding:.25em }

/* and bigger on tablets and up */
@media only screen and (min-width : 750px) {
  .potw_cell 
    { display: table;
      border-collapse: collapse;
      margin: .8em 1.5em 1.4em 2.25em; }
  .potw_pix
    { display: table-cell;
       padding-right: 1.25em; }
  .potw_pix img
    { max-width: 300px; }
  /* all the colors in pots_desc carry over */
  .potw_desc
    { display: table-cell;
      vertical-align: top; 
      padding:.25em }
}

/* on the widest screen, no max size on thumbnails */
@media only screen and (min-width : 900px) {
  .potw_pix img
    { max-width: none; }
}