/* @(#)$Id: style6.css 2.11 2017-06-26 12:11:00 kleonard Exp $ */

/**
/**
 **  style6.css:
 **
 **    Basic style sheet.
 **
 **
 **  Changes:
 **
 **    2017-02-09 2.11 Add #dog6pictureBirthday3 with dimensions 400px by 332px.
 **    2016-06-23 2.10 Integrate mobile styles using media query.
 **    2016-06-20 2.09 Change id= to class= on most selectors.
 **    2016-06-02 2.08 Fix topbar printing bug.
 **    2016-06-01 2.07 Fix HASPparm printing bug.
 **    2016-06-01 2.06 Reformat info fields.
 **    2016-05-31 2.05 Add HASP parm classes.
 **    2016-05-28 2.04 Change Sidebar name to Navbar.
 **    2016-05-24 2.03 Reduce genparms link flexbox indention.
 **    2016-05-15 2.02 Indent genparms link flexbox.
 **    2016-05-12 2.01 Mobile toleration.
 **    2016-02-09 1.04 Add #dog6pictureBirthday2 with dimensions 391px by 563px.
 **    2014-04-20 1.03 Add #dog6pictureUnderstep with dimensions 426px by 280px.
 **    2013-03-07 1.02 Add #dogpictureSnow with dimensions 257px by 250px.
 **    2013-02-03 1.01 Add #dogpictureTshirt with dimensions 312px by 250px.
 **
 **/

/**
 **  Base body attributes.
 **/
body {
  background: white;
  color: black;
  /* font-family: Geneva, "Bitstream Vera Sans", Helv, Helvetica, sans-serif; */
    font-family: sans-serif;
  font-size: 14px;
}

/**
 **  Areas of the page.
 **/
.pageWrapper {
  /*min-width: 650px;*/
}
.banner {
  position: static;
  width: 100%;
  height: auto;
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  background: white;
  color: inherit;
  padding-bottom: 4px;
}
.contentWrapperNavbar, .contentWrapperNoNavbar {
  position: relative;
  clear: both;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 10pt;
  margin-top: 5px;
}
.contentWrapperNavbar {
  background: #FFFFCC;
  color: inherit;
}
.contentWrapperNoNavbar {
  background: white;
  color: inherit;
}
.navbar {
  position: relative;
  float: left;
  top: 0;
  left: 0;
  width: 175px;
  padding-top: 2px;
  background: #FFFFCC;
  color: inherit;
}
.main, .mainNoNavbar, .mainNopad {
  position: relative;
  top: 0px;
  right: 0;
  font-size: 10pt;
  background: white;
  color: inherit;
}
.main {
  margin-left: 175px;
  padding-left: 15px;
}
.mainNopad {
  margin-left: 0;
  padding-left: 0;
}
#footer {
  position: relative;
  left: 0;
  height: auto;
  padding-bottom: 20px;
  background: white;
  color: inherit;
}

/**
 **  Headers.
 **/
h1, h2, h3, h4, h5 { font-family: inherit; }
h1 {
  margin-top: 1px;
  margin-bottom: 2px;
  padding: 0 0 0 0;
  font-size: 160%;
  background: inherit;
  color: #000033;
}


/**
 **  Navigation path line fields.
 **/
.pathLink     { font-size: 90%; }
.pathCurrent  { font-size: 90%; color: #996600; background-color: inherit; }


/**
 **  Navigation sidebar fields.
 **/
p.navbar-link, p.navbar-highlight, p.navbar-head, p.navbar-sublink, p.navbar-subhead, p.navbar-subhighlight {
  font-size: 90%; margin: 0 25px 2px 10px;
  background: inherit; color: inherit;
}
p.navbar-sublink, p.navbar-subhead, p.navbar-subhighlight {
  margin: 0 25px 2px 20px;
}
p.navbar-highlight     { font-weight: bold; color: #996600; }
p.navbar-head          { font-weight: bold; color: black;   }
p.navbar-subhighlight  { font-weight: bold; color: #996600; }
p.navbar-subhead       { font-weight: bold; color: black;   }

/**
 **  Pseudo-class selectors for anchor tags.  Note that the selectors must
 **  be defined in the sequence below to avoid unexpected results.
 **/
.navbar   A:link       { color: #0000FF; background: inherit; text-decoration: none;      }
.navbar   A:visited    { color: #0000FF; background: inherit; text-decoration: none;      }
.navbar   A:hover      { color: #FF3300; background: inherit; text-decoration: underline; }
.pathLink A:link       { color: #0000FF; background: inherit; text-decoration: none;      }
.pathLink A:visited    { color: #0000FF; background: inherit; text-decoration: none;      }
.pathLink A:hover      { color: #FF3300; background: inherit; text-decoration: underline; }
A:link                 { color: #0000FF; background: inherit; text-decoration: underline; }
A:visited              { color: #551a8b; background: inherit; text-decoration: underline; }
A:hover                { color: #FF0000; background: inherit; text-decoration: underline; }


/**
 **  Attributes of the home page picture.
 **/
#dogpicture            { width: 280px; height: 250px; margin-top: 10px; }
#dogpictureTshirt      { width: 312px; height: 250px; margin-top: 10px; }
#dogpictureSnow        { width: 257px; height: 250px; margin-top: 10px; }
#dog6pictureUnderstep  { width: 426px; height: 280px; margin-top: 10px; }
#dog6pictureBirthday2  { width: 393px; height: 400px; margin-top: 10px; }
#dog6pictureBirthday3  { width: 400px; height: 332px; margin-top: 10px; }


/**
 **  Color-filled bar at the top of the page.
 **
 **  2016-06-02 Changed from:
 **
 **    .topbar  { background: #996600; color: inherit; line-height: 15px; }
 **
 **  to get the top bar to print (by default, browsers don't print
 **  background colors).
 **/
.topbar  { border: 8px solid #996600; height: 0; }


/**
 **  Footer fields.
.info         { position: relative; }
 **/
.info         { position: relative;  text-align: center;  padding-bottom: 20px;     }
.infoCopy     { font-size: 90%; top: 0; float: left;  left:  0; text-align: left;   }
.infoContact  { font-size: 90%; top: 0; display: inline-block;  text-align: center; }
.infoUpdate   { font-size: 90%; top: 0; float: right; right: 0; text-align: right;  }


/**
 **  Boxes for WebRing links.
 **/
.webringScriptBox, .webringNoscriptBox {
  top: 0;
  width: auto;
  height: auto;
  text-align: center;
  margin: 1px;
}
.webringNoscriptBox {
  padding: 4px;
  width: 40%;
  margin-left: 29%;
  position: relative;
  border: 1px solid #3333cc;
  background: #FFFFCC;
  color: inherit;
}


/**
 **  A block to indent text.
 **/
.indentBlock {
  margin-left: 20px;
}


/**
 **  Another block to indent text.
 **/
.indentBlock80 {
  margin-left: 80px;
}


/**
 **  A class to allow part of a page to be shown if request is from a mobile client.
 **/
.showIfMobile   {
  display: none;
}


/**
 **  HASP distribution and image file tables.
 **/
table#tblHaspDistfile, table#tblHaspImgfile {
  width: 1350px;
}
th.tblHaspDistfile, th.tblHaspImgfile, td.tblHaspDistfile, td.tblHaspImgfile {
  text-align: left;
  font-size: 9pt; line-height: 10pt;
}
th.tblHaspDistfile, th.tblHaspImgfile {
  background: #DDDDDD;
  color: inherit;
  font-weight: bold;
}


/**
 **  HASP parameter elements.
 **/
.HASPparmLinkContainer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction:     row;
    flex-direction:         row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack:           start;
    justify-content:         flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack:    start;
    align-content:         flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align:      start;
    align-items:         flex-start;
    width: 100%;
    font-size: 9pt;
  margin-left: 8px; /*40px;*/
    }

.HASPparmLink:nth-child(n) {
    -webkit-order:  0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex:     0 1 auto;
    flex:         0 1 auto;
    -webkit-align-self:  auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    padding: 2px;
    min-width: 80px;
    }

.HASPparm {
  position: static;
  display: block;
  clear: both;
  top: 0;
  right: 0;
  padding-top: 10px;
}

.HASPparmId {
  color: #483d8b;
  display: block;
  left: 0;
  margin-left: 0%;
  margin-right: 0%;
  width: 110px;
  background: inherit;
  font-size: 9pt;
  font-weight: bold;
  float: left;
}

.HASPparmExplanation, .HASPparmDefault, .HASPparmNotes, .HASPparmBack {
  margin-left: 120px;
  margin-bottom: 10px;
  font-size: 9pt;
}

.HASPparmText {
  color: #483d8b;
  font-size: 9pt;
  font-weight: bold;
}

.HASPparmBack {
 xmargin-bottom: 20px;
}

.HASPparmExplanation:before {
  content: "Explanation: ";
  font-weight: bold;
  }

.HASPparmDefault:before {
  content: "Default: ";
  font-weight: bold;
  }

.HASPparmNotes:before {
  content: "Notes: ";
  font-weight: bold;
  }


/**
 **  Classes for message elements.
 **/
.msg {
  position: static;
  display: block;
  clear: both;
  top: 0;
  right: 0;
}
.msgId {
  color: #483d8b;
  display: block;
  left: 0;
  margin-left: 0%;
  margin-right: 0%;
  width: 110px;
  font-size: 9pt;
  background: inherit;
  font-weight: bold;
  float: left;
  }
.msgExplanation, .msgDefault, .msgNotes, .msgBack {
  margin-left: 120px;
  margin-bottom: 10px;
  font-size: 9pt;
}
.msgBack {
  margin-bottom: 20px;
}


/**
 **
 **    Style modifications for mobile clients.  Note that these styles don't attempt a
 **    perfect display.  The hope is to make pages at least legible on a mobile client.
 **
 **/

@media only screen and (max-width: 500px) {

/**
 **  Base body attributes.
 **/
body {
  background: white;
  color: black;
  font-family: sans-serif;
  font-size: medium;
}

/**
 **  Areas of the page for mobile clients.
 **/
.pageWrapper {
  min-width: initial;
}
.banner {
  position: auto;
  padding-bottom: auto;
}
.contentWrapperNavbar, .contentWrapperNoNavbar {
  position: auto;
}
/*
.contentWrapperSidebar {
  font-size: medium;
  color: inherit;
   xbackground: orange;
   qwidth: 100%;
   xfloat: none;
    xdisplay: none;
}
.contentWrapperNoNavbar {
  background: white;
  color: inherit;
   width: 100%;
    xdisplay: none
}
*/
.navbar {
  position: static;
  float: none;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  padding-top: auto;
}

.main, .mainNoNavbar, .mainNopad {
  font-size: large;
  qbackground: green;
}
.main {
  margin-left: 0;
  padding-left: 0;
}

/*
.mainNopad {
  margin-left: 0;
  padding-left: 0;
}
*/
.footer {
  padding-bottom: 0;
}

/**
 **  Headers for mobile clients.
 **/
h1 {
   font-size: 200%;
}


/**
 **  Navigation sidebar fields for mobile clients.
 **/
p.navbar-link, p.navbar-highlight, p.navbar-head, p.navbar-sublink, p.navbar-subhead, p.navbar-subhighlight {
  font-size: large;
}


/**
 **  Attributes of the home page picture (not displayed on mobile clients).
 **/
#dogpicture, #dogpictureTshirt, #dogpictureSnow, #dog6pictureUnderstep, #dog6pictureBirthday2, #dog6pictureBirthday3  {
  display: none;
}


/**
 **  Footer fields for mobile clients.
 **/
.infoCopy, .infoContact, .infoUpdate  { font-size: small; float: none; text-align: center; display: block; }


/**
 **  A class to allow part of a page to be hidden if request is from a mobile client.
 **/
.hideIfMobile   {
  display: none;
}


/**
 **  A class to allow part of a page to be shown if request is from a mobile client.
 **/
.showIfMobile   {
  display: block;
}

}