@charset "utf-8";
/* CSS for BLINK 2.00 */

/* Apply natural box layout model to all elements. */
* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
body { position:relative; z-index:1; height:100vh; }

h1 { text-align:center; margin-top:4px; margin-bottom:4px; }
h1 { font: 1.3em 'Source Sans Pro', 'Acme', 'Arial Black', Arial, san-serif;  
	font-weight:900; text-align:center; margin:0 0 6px 0; color: #339; display: block;
	text-shadow: -1px -1px 0px white, 1px 1px 3px white, 2px 2px 2px #999, 0 1px 0 #cccccc, 0 2px 0 #c9c9c9,0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9,0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),0 10px 10px rgba(0, 0, 0, 0.2) !important;
	text-transform:uppercase; letter-spacing:-1px; padding:0 12px 4px 12px; }
h2 { margin:2px auto; padding:2px; }
h4 { margin:4px 4px; font-size:135%; text-shadow:0 1px 3px rgba(0, 0, 0, 0.3); }
a 	      { text-decoration:none; padding:2px 4px; outline:none; }
a:link 	  { color:#324143; border-bottom:1px dotted #c93; }
a:visited { color:#324143; border-bottom:1px dotted #c93; }
a:hover   { background-color:#FCC; color:#943236; border-bottom:1px dotted #f33;}
a:focus   { background-color:#FCC; color:#943236; border-bottom:1px dotted #f33;
            outline:none; box-shadow:none; }
a:active  { background-color:#FCC; color:#943236; border-bottom:1px dotted #f33; }
a.nounder:link { border:none !important; background-color:transparent !important; 
  text-decoration:none; }
a.nounder:hover { background-color:transparent !important; color:#f00; }

hr { margin:0; padding:0; }

button { padding:3px; margin:2px 4px; border-radius:8px; 
  font-weight:bold; font-size:90%; box-shadow:0 1px 3px rgba(0, 0, 0, 0.3); }

#outerbox { width:100%; max-width:1600px; min-width:320px; margin:0 auto; 
	overflow:hidden; background-color:#bcd8df; border:1px solid #999; border-radius:8px; }

/*  BLINKER stuff */
#blink-set { width:100%; min-width:320px; margin:0 auto; padding:8px;
  text-align:center; background-color:#ccd8df; border-radius:8px;
  display:grid; justify-content:center; align-items:center;
}
.bset-small { grid-template-columns:repeat(auto-fit,184px); grid-gap:4px; }
.bset-medium { grid-template-columns:repeat(auto-fit,256px); grid-gap:8px; }
.bset-large { grid-template-columns:repeat(auto-fit,350px); grid-gap:10px; }

.blinker { aspect-ratio:3/2; height:168px; /*height:200px;*/ background-color:none;
  padding:8px; text-align:center; vertical-align:middle; text-align:center; }
.blinker img { object-fit:scale-down; /*object-fit:contain;*/
  max-width:100%; max-height:100%; width:auto; height:auto; border:1px solid #000;
  box-shadow:0 2px 4px rgba(0, 0, 0, 0.75); }
.bbox-small { height:120px !important; width:180px !important; }
.bbox-medium { height:168px !important; width:252px !important;  }
.bbox-large { height:240px !important; width:360px !important;  }

.blink-header { grid-column: 1 / -1; text-align:center;
  margin:0 !important; padding:0 0 4px 0 !important; }
.header-extra { /*grid-column: span 2 !important*/ };
.blink-header button { padding:4px 8px; margin-bottom:6px; }
.blink-header button:hover { background-color:#F4D3A3 !important; }

#control-panel h2 { text-shadow:1px 2px 2px rgba(80, 80, 128, 0.7); margin:8px auto; }

.blink-main { margin:0; padding:4px; position:relative; background-color:#dedeff;
  border-radius:8px; }
.blink-footer {  }
.copy-blurb { text-align:center; background-color: #acc8cf; font-size:75%;
    margin:0 auto !important; }

/* BLINK   #466f7a */
#blink-interval { display:inline-block; padding:0 4px; margin-top:4px;  
  color:#32D0F8 ; background-color:#557; font-weight:bold; font-size:110%;  
  border:2px solid #444; margin-left:8px; border-radius:8px; 
  box-shadow:0 1px 3px rgba(0, 0, 0, 0.3); }
#blinterval { display:inline-block; font-weight:bold; }

.limitbox { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; margin:0; }

.smalltext { font-size:84%; color:#114; }
.helptext { font-size:125%; }
.more-help-link { font-weight:bold; text-align:center; }
.more-help-link button { background-color:#f0f0f0 !important; }
#blinkhelp .blink-main { padding:12px; }

/* In-place dropdown menus.... */
.dropdown { position:relative; display:inline-block; font-weight:bold; }
.dropdown:hover .dropdown-content { display:block; }
.dropdown:hover .dropbtn { background-color:#8ca8af; }
.dropbtn { cursor:pointer; /*font-size:16px; background-color:#36c; padding:4px;*/ }
.dropdown-content { display:none; position:absolute; background-color:#8ca8af;
  border:1px solid #57767e;
  min-width:160px; z-index:1; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.3); }
.dropdown-content a { color:black; padding:6px; display:block; }
.dropdown-content a:link { border-bottom:1px solid #6e919a; }
.dropdown-content a:hover { background-color:#F4D3A3; }
.dropdown-content a:active { background-color:#cef; }
.dropdown-content a:focus { outline:none; }
.drop-help { width:24em; text-align:left; font-size:84%; font-weight:normal !important; }

.pithlist { margin:4px 0; padding:2px; }
.pithlist li { padding:0; margin:2px; list-style-type:square; list-style-position:inside; }

/* MODAL POPUP */
#modal-overlay { display:none; position:fixed; z-index:998; width:100%; overflow:auto;
  height:100vh; top:0; left:0; right:0; align-items:center; text-align:center; z-index:1;
  background:rgba(0, 0, 0); background:rgba(0, 0, 0, 0.7);
  transition: visibility 0s linear 0.5s, opacity 0.5s 0s, transform 0.5s; }
#modal-overlay #modal { display:block; max-width:90%; width:100%; height:90vh;
  max-height:100%; margin:0 auto; padding:10px; background:#808080;
  position:absolute; z-index:999;
  top: 50%;  /* position top  edge of element at middle of parent */
  left: 50%; /* position left edge of element at middle of parent */
  transform:translate(-50%, -50%); /* Short for translateX(-50%) and translateY(-50%) */
}
#modal-overlay #modal img { object-fit:scale-down; max-width:100%; max-height:75vh;
  width:auto; height:auto; }
#modal-overlay #modal .modal-footer { margin-top:auto; text-align:center; }
#modal-close:hover, #modal-next:hover { background-color:#F4D3A3; }
.modal-header { padding:0; margin:0; }
.modal-header h4 { padding:0; margin:4px; text-align:center; color:#eef; }
.modal-content p { text-align:center; }
.modal-buttons { z-index:999; }

/*
@media screen and (max-width:780px) {
  .blinker { width:240px; height:160px; }
}
@media screen and (max-width:360px) {
  .blinker { width:160px; height:120px; }
}
*/