/* Color palette: */
/*color: #ffffff; /* White */
/*color: #e8e8e8; /* Pale Gray */
/*color: #cccccc; /* Light Gray */
/*color: #999999; /* Mid Gray */
/*color: #666666; /* Dark Gray */
/*color: #444444; /* Charcoal */
/*color: #222222; /* Almost Black */
/*color: #5a5ab3; /* PhD Posters Light Blue */
/*color: #1a1a67; /* PhD Posters Dark Blue */
/*color: #f78d1d; /* Accent Orange */
/*color: #faa51a; /* Accent Orange (dark bkgd) */
/*color: #fcd3a5; /* Pale Orange (dark bkgd) */
/*color: #990000; /* Urgent Red */
/*color: #000099; /* Hyperlink Blue */


/* Source of Pure.CSS is a good reference:  https://unpkg.com/browse/purecss@1.0.1/build/ */
/* Min-Widths:  35.5.em, 48em, 64em, 80em */


/*
When setting the primary font stack, apply it to the Pure grid units along
with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
  font-family : 'Open Sans', sans-serif ;
}
/* Allows adding padding directly to pure-u-* divs (but not margins!) */
/* .pure-g > div { */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/*
What I mostly want from Pure.CSS for a responsive website:
N boxes that either exist in a row, with equal width and height;
or N boxes in a vertical stack, depending on the user's screen size.

The div.flex-row-xx is used to create a "row" of content,
and then plain divs inside are used to create each "column".

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
*/
@media screen and (min-width: 35.5em) {
  .flex-row-sm {
    display: flex;
  }
  .flex-row-sm > div {
    flex: 1 1 0; /* each item equal size */
  }
}
@media screen and (min-width: 48em) {
  .flex-row-md {
    display: flex;
  }
  .flex-row-md > div {
    flex: 1 1 0; /* each item equal size */
  }
}
@media screen and (min-width: 64em) {
  .flex-row-lg {
    display: flex;
  }
  .flex-row-lg > div {
    flex: 1 1 0; /* each item equal size */
  }
}


/* Use with .flex-row for internal padding. */
.pad-row {
  padding: 0.5em;
}
.pad-row > div {
  margin: 0.5em;
  padding: 0.5em;
}
/* Centered, with fixed max width */
.readable-width > div{
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
}


body {
  color: #222222; /* Almost Black */
  /*
  Not the main background we want, but needs to match the footer
  when pages are very short (less than one screen high).
  The /unsubscribe page is a good example to check for this.
  */
  background-color: #444444; /* Charcoal */
  margin: 0;
}
#main-body {
  /* The background color we actually want: */
  background-color: #e8e8e8; /* Pale Gray */
}
h1, h2, h3, h4, h5, h6 {
  font-family : 'Marcellus', Optima, sans-serif ;
  color: #f78d1d; /* matches the button gradient bottom, below */
}
.hi { /* "inline" header */
  font-weight: bold;
}

/* Order that these appear in is important to Safari, apparently. */
a {    text-decoration : none ; }
a:link { color : #000099 ; }
a:visited { color : #000099 ; }
a:hover { text-decoration : underline ; color : #0000ff ; }
a:active { color : #0000ff ; }

img { border: none; background: transparent; }
img.hairline { border: 1px solid #cccccc; }
img.tri-icon {
  max-height: 6em;
  /* display: block;
  margin: 0 auto; */
}

/* Keeps forms from disrupting layout by adding bulk */
form {
  margin: 0;
  padding: 0;
}


#logo_header {
  background: url(logo_back.gif) repeat-x top left;
  margin: 0;
  height: 75px;
  position: relative; /* abosolutely positioned children are now relative to this */
}
#logo_header img {
  margin: 0;
  float: left; /* for CSS1 browsers */
  position: absolute; /* absolute, RELATIVE TO the enclosing element marked "relative" */
  left: 0;
  top: 0;
}
#logo_header div {
  color: #999999;
  margin: 0;
  padding: 0.2em 0.5em;
  text-align: right;
  position: absolute; /* absolute, RELATIVE TO the enclosing element marked "relative" */
  right: 0;
  bottom: 0;
}
#logo_header a {    text-decoration : none ; }
#logo_header a:link { color : #ffffff ; }
#logo_header a:visited { color : #ffffff ; }
#logo_header a:hover { text-decoration : underline ; color : #ffffff ; }
#logo_header a:active { color : #ffffff ; }


#pagefooter {
  color: #cccccc;
  background-color: #444444;
  font-size: smaller;
  text-align: center;
  padding: 16px; /* Matches chunk width */
  /*border-top: 1px solid #cccccc; /* Medium Gray Border */
}
#pagefooter a { text-decoration : none ; }
#pagefooter a:link { color : #ffffff ; }
#pagefooter a:visited { color : #ffffff ; }
#pagefooter a:hover { text-decoration : underline ; color : #ffffff ; }
#pagefooter a:active { color : #ffffff ; }


#nav_bar {
  color: #ffffff;
  background: #444444;
  margin: 0;
  padding: 0 1.5em 0 1.5em;
  /* border-bottom: 1px solid #999999; */
}
#nav_bar a { text-decoration : none ; }
#nav_bar a:link { color : #ffffff ; }
#nav_bar a:visited { color : #ffffff ; }
#nav_bar a:hover { text-decoration : underline ; color : #ffffff ; }
#nav_bar a:active { color : #ffffff ; }


/* https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp */
/* Accessibility improvements:  https://www.w3.org/WAI/tutorials/menus/flyout/ */
/* Navbar container */
.navbar {
  overflow: hidden;
}
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Links inside the navbar (intended for top level only?) */
.navbar a {
  float: left;
  padding: 0.3em 0.9em;
}
/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
  all: unset; /* prevent default styles from making button look weird */
  padding: 0.3em 0.9em;
  color: #ffffff;
  margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a background color to navbar links on hover */
/* Focus-within makes the menu stay down when navigating with keyboard (tab key), for accessibility */
.dropdown:hover .dropbtn, .dropdown:focus-within .dropbtn {
  background-color: #666666;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 16em;
  background-color: #666666;
  /* border: 1px solid #999999; */
  box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.navbar .dropdown-content a {
  float: none;
  padding: 0.5em;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Show the dropdown menu on hover */
/* Focus-within makes the menu stay down when navigating with keyboard (tab key), for accessibility */
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content  {
  display: block;
}


/* Normal dark-on-light style row */
.std-back {
  color: #222222; /* Almost Black */
  background-color: #ffffff; /* White */
}
/*
Dark-on-light row, where background show between "cards"
This is the effect I couldn't achieve with Pure.CSS, so I switched to plain flexbox.
But then I decided it looks too cluttered to actually use anywhere --
I prefer the clean look of adequate white space instead!
*/
.card-back > div {
  color: #222222; /* Almost Black */
  background-color: #ffffff; /* White */
}
.alt-back {
  color: #cccccc; /* Light Gray */
  color: #e8e8e8; /* Pale Gray */
  background-color: #5a5ab3; /* PhD Posters Light Blue */
}
.alt-back a { text-decoration : none ; }
.alt-back a:link { color : #fcd3a5 ; }
.alt-back a:visited { color : #fcd3a5 ; }
.alt-back a:hover { text-decoration : underline ; color : #fcd3a5 ; }
.alt-back a:active { color : #fcd3a5 ; }
.alt-back h1, .alt-back h2, .alt-back h3, .alt-back h4, .alt-back h5, .alt-back h6 {
  color: #faa51a; /* matches the button gradient top, below */
}



/* Centered, with fixed max width */
.form-width {
  max-width: 30em;
  /* margin-left: auto; */
  /* margin-right: auto; */
  margin: 1em auto;
}
.form-width table {
  width: 100%;
}
.form-width table tr {
  vertical-align: top;
}
.form-width .form-label {
  width: 35%;
  vertical-align: top;
}
.form-width .form-field {
  width: 65%;
}
.form-error {
  color: #cc0000;
  font-weight: bold;
  font-size: smaller;
}
.loc_details {
  margin-left: 1.5em;
}


/* Used for the * that marks mandatory form fields */
.mandatory {
  color: #990000;
}
/* Used for e.g. competitor's prices */
.strikethru {
  color: #666666;
  text-decoration: line-through;
}
.deemph {
  /* color: #999999; */
  /* See http://css-tricks.com/css-transparency-settings-for-all-broswers/ */
  zoom: 1;
  filter: alpha(opacity=60);
  opacity: 0.6;
  font-size: smaller;
}
.urgent {
  text-shadow: 0 0 0.4em #faa51a, 0 0 0.4em #faa51a;
  font-weight: bolder;
}
.urgent2 { /* a smaller urgent */
  zoom: 1;
  filter: alpha(opacity=70);
  opacity: 0.7;
  text-shadow: 0 0 0.4em #faa51a;
  font-size: smaller;
}
/* Used for attributions in Testamonials, Gallery */
.attrib {
  color: #666666;
  text-align: center;
  font-size: smaller;
}
/* Used for "be patient" file upload msg in step1.php */
/* Used for lower-key alerts -- "Did you know?" style */
.alert {
  background: #ffffcc;
  border: 1px solid #cccc66;
  color: #222222; /* Almost Black */
  padding: 0.5em;
}
.alt-back .alert {
  background-color: #ccccff;
  /* border: 1px solid #5a5ab3; /* PhD Posters Light Blue */
  color: #222222; /* Almost Black */
  padding: 0.5em;
}
/* Used for API code documentation */
.code {
  background: #e8e8e8;
  border: 1px solid #cccccc;
  padding: 0.5em;
}
/* Used for calling out posters to be printed on something other than paper */
.notpaper {
  font-weight: bold;
  color: #ffffff;
  background-color: #660000;
}
.emailbody {
  font-family: monospace;
}
/* Used for 3-D button on homepage variation */
.button {
  /* On IE9, inline-block causes the background gradient to bleed outside the rounded corners. */
  /* However, some kind of block display is essential for the padding to work properly! */
  display: block;
  padding: .55em 2em .5em;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  outline: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.3em;
}
.button:hover {
  text-decoration: none;
}
.button:active {
  position: relative;
  top: 1px;
}
.orange_btn {
  color: #fef4e9;
  border: solid 1px #da7c0c;
  background: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f78d1d));
  background: -webkit-linear-gradient(top, #faa51a, #f78d1d);
  background: -moz-linear-gradient(top, #faa51a, #f78d1d);
  background: -ms-linear-gradient(top, #faa51a, #f78d1d);
  background: -o-linear-gradient(top, #faa51a, #f78d1d);
}
/* The :focus-visible styles only activate for keyboard navigation.  Important for accessibility. */
.orange_btn:hover, .orange_btn:focus-visible {
  background: #f47c20;
  background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
  background: -webkit-linear-gradient(top,  #f88e11,  #f06015);
  background: -moz-linear-gradient(top,  #f88e11,  #f06015);
  background: -ms-linear-gradient(top,  #f88e11,  #f06015);
  background: -o-linear-gradient(top,  #f88e11,  #f06015);
}
.orange_btn:focus-visible {
  border: solid 1px #000000;
}
.orange_btn:active {
  color: #fcd3a5;
  background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
  background: -webkit-linear-gradient(top,  #f47a20,  #faa51a);
  background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
  background: -ms-linear-gradient(top,  #f47a20,  #faa51a);
  background: -o-linear-gradient(top,  #f47a20,  #faa51a);
}
a.button {
  color: #fef4e9;
}
div.AuthorizeNetSealWrapper {
  float: right;
  margin: 1em; /* should match .form-width */
}
/* Set progress with width (as percentage) */
div.progress_bar_inner {
  height: 1em;
  background: #ccccff;
}
div.progress_bar_outer {
  width: 100%;
  border: solid 1px #5a5ab3;
}

table.pricing {
  width: 100%;
  border-collapse: collapse;
}
table.pricing td {
  padding: 2px 8px;
}