body {
    color : #000000 ;
    background-color : #efefef ; /* Pale Gray */
    font-family : Optima, Arial, Helvetica, sans-serif ;
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family : Arial, Helvetica, sans-serif ;
}
h3 {
    color: #da7c0c; /* matches the button border, below */
}

/* 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.layered_corner { position: absolute; z-index: 10; background: transparent; }
img.hairline { border: 1px solid #cccccc; }

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

/* A ~ zero-height element that keeps floating images from sticking out of enclosing divs! */
.floatbreak {
    clear: both;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1px;
    line-height: 1px;
}


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


#nav_bar {
    background: #cccccc;
    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 : #666666 ; }
#nav_bar a:visited { color : #666666 ; }
#nav_bar a:hover { text-decoration : underline ; color : #333333 ; }
#nav_bar a:active { color : #333333 ; }


/* https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp */
/* Navbar container */
.navbar {
  overflow: hidden;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  padding: 0.3em 0.9em;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  padding: 0.3em 0.9em;
  color: #666666;
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to navbar links on hover */
/*.navbar a:hover,*/ .dropdown:hover .dropbtn {
  background-color: #999999;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 16em;
  background-color: #cccccc;
  border: 1px solid #999999;
  box-shadow: 0px 8px 16px 8px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  padding: 0.5em;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


.chunk {
    background: #ffffff;
    margin: 1.5em 16px; /* Matches footer line */
    border: 1px solid #cccccc; /* Medium Gray Border */
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
table .chunk {
    margin-top: 0;
    margin-bottom: 0;
}
.chunk h2 {
    color: #ffffff; /* White */
    /*color: #5a5ab3; /* PhD Posters Light Blue */
    /*color: #1a1a67; /* PhD Posters Dark Blue */
    background: url(logo_back.gif) repeat-x bottom left;
    /*background-color: #ffffff; /* White */
    /*background-color: #5a5ab3; /* PhD Posters Light Blue */
    /*background-color: #1a1a67; /* PhD Posters Dark Blue */
    margin: 0;
    /*padding: 0.1em 8px; /* Matches P width */
    padding: 0.2em 0.5em; /* Doesn't match P width, but that probably doesn't matter */
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}
.chunk .chunk-content {
    margin: 1em;
}
.chunk .hi { /* "inline" header */
    font-weight: bold;
}
.chunk img.side {
    margin: 0;
    float: right;
}
.chunk ul {
    list-style-type: circle;
}
.chunk li {
    padding: 0.2em 0; /* a little space between bullet points */
}


/* 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%;
}
.chunk .form-error {
    color: #cc0000;
    font-weight: bold;
    font-size: smaller;
}
.loc_details {
    margin-left: 1.5em;
}


.pagefooter {
    font-size: smaller;
    text-align: center;
    margin: 16px; /* Matches chunk width */
    /*border-top: 1px solid #cccccc; /* Medium Gray Border */
    padding-top: 0.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 */
.alert {
    background: #ffff99;
    border: 1px solid #cccc33;
    padding: 0.5em;
}
/* Used for lower-key alerts -- "Did you know?" style */
.alert2 {
    background-color: #ccccff;
    border: 1px dotted #5a5ab3; /* PhD Posters Light Blue */
    padding: 0.5em;
    font-style: italic;
}
/* 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 dividing Pickup from Mail Order */
.vertical_divide {
    border-right: 1px dotted #000000;
}
/* 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;
}