/* Common style sheet intended for use by many of our apps, either directly or as a starting point */

.gold-fg { color: #c1990b; }
.yellow-fg { color: #f1bf10; }
.blue-lighter-fg { color:#1a314d; }
.blue-darker-fg { color:#021935; }

html { 
  height:100%;  /* without this, the bottom of the box-shadow comes up to meet the end of its content */
}
body {
  background:gray;
  color:black;
  margin:0;
  padding:0;
  font-family:arial, sans-serif;
  height:100%;
}

header, main, nav { margin:0; }
header, footer { background:#021935; color:#f1bf10; }
header { padding:10px 5px; }
main { background:white; font-size:1.0rem; box-shadow: inset 0 0 3rem rgba(0, 0, 0, .5); padding:5px 20px; }
footer { background:#021935; color:#f1bf10; padding:3px 3px; font-size:0.9rem; text-align:center; }

h1 { text-align:center; margin:5px 10px 5px 10px; } /* top right bottom left */
h2 { text-align:center; margin:5px 10px 5px 10px; }
p { margin:5px; padding:0; }

a { color: #c1990b; }
footer a { color:#f1bf10; text-decoration:underline; }
footer a:hover { text-decoration:none; }
/* a:focus, a:hover { color: #002566; } */

.center-stack-outer { display:block; text-align:center; }
.center-stack-outer > .center-stack-inner { display:inline-block; text-align:left; }

/* label and input on same line if it fits.  aside is optional, on its own line (intened to be used in order: label, input, aside). */
/* Applies to <section> elements that are an immediate child of a <form>, or that are an immediate child of <div class="formItem"> */
form > section, div.formItem > section { display:block; }
form > section > label, div.formItem > section > label { display:inline-block; }
form > section > input, div.formItem > section > input { display:inline-block; }
form > section > aside, div.formItem > section > aside { display:block; /* font-size:0.8em; */ }

.center { text-align:center; }

table.normal { border-collapse:collapse; }
table.normal>tbody>tr>th { background:black; color:white; text-align:center; }
table.normal, table.normal>tbody>tr, table.normal>tbody>tr>th, table.normal>tbody>tr>td { border:1px solid gray; }

table.zebra>tbody>tr:nth-child(even) { background: white; }
table.zebra>tbody>tr:nth-child(odd) { background: #dddddd; }

/* start of wtap-custom.css */
h3,h4,h5,h6 { margin:5px; }
label, input, aside { margin:2px; }
aside { color:gray; font-size:0.8rem; }
aside.inline { display:inline; color:blue; }

.center-stack-outer > div { padding:3px; background:lightgray; border:1px solid darkgray; }
/* .center-stack-outer > div > aside { color:gray; font-size:0.8rem; border:none; } */

button { font-size:1.1em; background:#eeffee; }

/*a.faux-button { font-size:1.1em; color:#111111; background:white; padding:2px 10px; border-radius:4px; border:1px solid lightgray; } */
/*a.faux-button { font-size:1.1em; color:#111111; background:#ddffdd; padding:2px 10px; border:1px solid gray; box-shadow:3px 3px 2px #ff9999; }*/

a.faux-button { 
  font-size:1.10em; 
  color:#111111; 
  background:#eeffee; 
  padding:1px 5px; 
  border-left:1px solid lightgray; border-top:1px solid lightgray; 
  border-right:2px solid gray; border-bottom:2px solid gray; 
}

.buttons { text-align:center; border:none; }
input[type="submit"] { text-align:center; }
input[type="reset"] { margin-top:10px; }

aside.invalid { color:red; font-weight:bold; font-style:italic; }
aside.valid { color:gray; font-weight:normal; text-decoration:line-through; }

:link, :visited { color:#c1990b; text-decoration:none; }
.debug { background:lightyellow; }

/* figure is a special use-case for the page ID numbers in the upper right */
figure { 
  position:fixed; top:0; right:0; 
  width:120px; height:20px; 
  /*
  color:#021935;
  */
  /* background:#f1bf10; */
  /* 
  color:black; 
  opacity:0.9;
  color:gray;
   */
  /* font-family:Bradley Hand, fantasy, serif;  */
  font-family:fixed; /* American Typewriter, fantasy; */
  /* font-style:italic; font-weight:bold;  */
  font-size:0.8rem; 
  text-align:right; 
  margin:0; padding:1px 3px; 
  display:block;
}
/* figure>a { color:gray; } */
figure:hover { background:#f1bf10; }
figure>a:link { color:#021935; }
figure>a:visited { color:#021935; }
/*
figure>a:hover { background:red; }
*/

table { border-collapse:collapse; }
table, th, td { border:1px solid darkgray; }
table.horiz th { text-align:right; }

.limitedWidth { max-width:300px; }
.glue { display:inline-block; } /* used to cause line break (if necessary) between label and radio buttons rather than between radio buttons */

form>section, div.formItem>section, main>div>div>section, section.lighter { background:#eeeeee; border:none; border-radius:5px; margin:10px; padding:5px; }
 /* { background:#eeeeee; border:none; border-radius:5px; margin:10px; padding:5px; } */
/* nested sections, like in mailing address options and physical address options */
section>section { border:1px solid lightgray; border-radius:3px; margin:3px; padding:5px; }

.right { text-align:right; }
.errorMsg { border:1px solid red; margin:3px; padding:2px; }

p.pseudo-button { border:1px solid lightgray; background:white; border-radius:4px; padding:2px 20px; text-align:center; color:#111111; }
.pseudo-button>a:link { color:black; }
.pseudo-button>a:visited { color:black; }
.pseudo-button>a:hover { color:black; }
.pseudo-button>a:active { color:black; }

/* use a class="faux-button" instead
span.pseudo-button { 
  border:1px solid lightgray; background:#eeffee; padding:2px 20px; 
  text-align:center; 
  box-shadow: 8px 8px 8px gray;
}
*/

table.segDescs td { vertical-align:top; }
table.segDescs th { text-align:center; }

label.checkboxLabel { display:flex; flex-direction:row; grid-gap:5px;  }
label.checkboxLabel>* { display:block; vertical-align:top; }
/* label.checkboxLabel>*:last-child { border-bottom:1px solid gray; } */
div#otherWyoAddress { display:grid; /* grid-template-columns:1fr 1fr; */ }
div#otherWyoAddress>* { margin:2px; }
div#otherWyoAddress>label { grid-column-start:1; text-align:right; }
div#otherWyoAddress>div { grid-column-start:2; }
div#floatingSubmit { display:block; position:sticky; top:0px; border:1px solid #021935; background:lightgray; text-align:center; padding:2px 10px 2px 10px; }
table.vertical th { text-align:right; }
table.vertical td { text-align:left; }
table.vertical th.heading { text-align:center; }
ul.activeWat, ul.closed, ul.open, ul.activeRca { list-style-type:none; }
ul.activeWat li, ul.closed li, ul.open li, ul.activeRca li { border:1px solid black; margin:3px; padding:3px; }

div.activeWat, div.closed, div.open, div.activeRca { border:1px solid black; margin:3px 3px 6px 3px; padding:3px; }

div.activeWat { border:1px solid #0000dd; }
div.closed    { border:1px solid #f46d43; }
div.open      { border:1px solid #219809; }
div.activeRca { border:1px solid #0000dd; }

.activeWat hr { border:0; border-top:1px solid #0000dd; }
.activeRca hr { border:0; border-top:1px solid #0000dd; }
.closed    hr { border:0; border-top:1px solid #f46d43; }
.open      hr { border:0; border-top:1px solid #219809; }

.activeWat aside, .closed aside, .open aside, .activeRca aside { font-style:italic; color:black; font-size:1.0em; }

.activeWat h4, .closed h4, .open h4 { display:inline; font-size:1.1em; font-weight:bold; }
.activeWat h4 { color:#0000dd; }
.activeRca h4 { color:#0000dd; }
.closed    h4 { color:#f46d43; }
.open      h4 { color:#219809; }

.editForm label { display:block; }
pre { margin:5px; }
strong { font-weight:bold; }
.checked { font-weight:bold; }
span.username { font-weight:bold; font-style:italic; }

/* Apply flexbox to all the segment flex containers. */
div.activeWatGrid, div.activeRcaGrid, div.closedGrid, div.openGrid, div.pendingGrid, div.rejectedGrid { display:flex; flex-direction:column; margin:5px; padding:0; }

/* Put margin and padding on on the segment flex items.  */
div.activeWatGrid>*, div.activeRcaGrid>*, div.closedGrid>*, div.openGrid>*, div.pendingGrid>*, div.rejectedGrid>* { margin:0; padding:5px; }

/* Put a left, top, right border (and background color) on each flex container */
div.activeWatGrid { border-left:2px solid blue;  border-top:2px solid blue;  border-right:2px solid blue;  background:#eeeeff; }
div.activeRcaGrid { border-left:2px solid blue;  border-top:2px solid blue;  border-right:2px solid blue;  background:#eeeeff; }
div.closedGrid    { border-left:2px solid red;   border-top:2px solid red;   border-right:2px solid red;   background:#ffeeee; }
div.openGrid      { border-left:2px solid green; border-top:2px solid green; border-right:2px solid green; background:#eeffee; }
div.pendingGrid   { border-left:2px solid black; border-top:2px solid black; border-right:2px solid black; background:#eeeeee; }
div.rejectedGrid  { border-left:2px solid black; border-top:2px solid black; border-right:2px solid black; background:#eeeeee; }

/* Put a bottom border on every flex item */
div.activeWatGrid>* { border-bottom:1px solid blue; }
div.activeRcaGrid>* { border-bottom:1px solid blue; }
div.closedGrid>*    { border-bottom:1px solid red; }
div.openGrid>*      { border-bottom:1px solid green; } 
div.pendingGrid>*   { border-bottom:1px solid black; } 
div.rejectedGrid>*  { border-bottom:1px solid black; } 

/* Put a thicker bottom border on the last flex item */
div.activeWatGrid>*:last-child { border-bottom:2px solid blue; }
div.activeRcaGrid>*:last-child { border-bottom:2px solid blue; }
div.closedGrid>*:last-child    { border-bottom:2px solid red; }
div.openGrid>*:last-child      { border-bottom:2px solid green; } 


/* Make the h4 header color-coded */
div.activeWatGrid>h4 { color:blue; }
div.activeRcaGrid>h4 { color:blue; }
div.closedGrid>h4 { color:red; }
div.openGrid>h4 { color:green; }
div.feedback { text-align:center; }

/* style the FAQ dl/dt/dd "definition" list used in the FAQ */
dl.faq { display:block; }
/*dl.faq { border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid gray; } */
dl.faq>dt, dl.faq>dd { display:block; text-align:left; margin:0; padding-left:10px; padding-right:10px; }
dl.faq>dt { border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid gray; margin-top:10px; padding-top:5px; padding-right:50px; font-weight:bold; }
dl.faq>dd { border-left:1px solid gray; border-bottom:1px solid gray; border-right:1px solid gray; margin-bottom:10px; padding-left:40px; padding-bottom:5px; padding-top:5px; text-align:left; font-style:italic; }
dl.faq>h3 { text-align:center; }
dl.faq>dt span, dl.faq>dd span, dl.faq>dt del, dl.faq>dd del{ background:#eeccff; }

span.ampm { font-variant-caps: all-small-caps; }

/*
.dev>p { margin:8px 3px; }
.dev { background:#ffeeee; color:black; font-size:80%; font-style:italic; border:1px solid darkgray; padding:2px; }
*/
.dev { display:none; }
section.warning { border:2px solid red; border-radius:4px; }
section.warning>h3 { color:red; text-align:center; }
table.segmentChoices { margin-left:auto; margin-right:auto; }
p.masquerading { position:fixed; top:0; left:0; width:100%; text-align:center; background:red; color:white; margin:0; }
p.masquerading>img { height:30px; }
div.masqueradee-div { border:2px solid red; border-radius:5px; }
main.center-stack>* { background:#eeeeee; }
.center-stack { display:flex; flex-direction:column; align-items:center; } /* alternative to inner and outer center-stack */
.center-stack>hr { width:100%; color:red; }

#populateWithTestData { position:fixed; bottom:3px; right:4px; z-index:99; background:pink; }
dialog { border:1px solid red; background:pink; }
div.inputGrid { display:grid; grid-template-columns:40% 55%; grid-gap:5px 10px; }
div.inputGrid>label { text-align:right; background:white; }

@keyframes twist5x5 {
  0% { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75%  { transform: rotate(-5deg); }
  100%  { transform: rotate(0deg); }
}
.wiggle {  animation-name:twist5x5; animation-duration:0.5s; animation-iteration-count:3; }
.agreePop { border:2px solid red; border-radius:3px; padding:5px; }
/* end of wtap-custom.css */