/* Base style for DOF programs. */

/* Hide disabled tabs. */
.ui-tabs .ui-state-disabled { display: none; }

select, input { background-color: #00448A; }

button, .dof-button {
  color: white;
  font-weight: bold;
  background: #00448A url('/skriptit/images/ui-bg_highlight-soft_60_83b820_1x100.png') 50% 50% repeat-x;
  padding: 4px 6px;
  border: 1px solid #666;
  border-radius: 4px;
  cursor: pointer;
}

button:hover, .dof-button:hover { 
  color: black;
  background: #00448A url('/skriptit/images/ui-bg_highlight-soft_60_b8b8b8_1x100.png') 50% 50% repeat-x;
}

/* Fluid buttons with fixed maximum width. */
.button-wide { width: 100%; }
.button-250, .button-500 { width: 100%; }
.button-250 { max-width: 250px }
.button-500 { max-width: 500px }

/* On default, prevent images scaling down in size. */
img { flex-shrink: 0; }

/* Fluid images. */
.dof-img {
  display: block;
  max-width: 100%;
  height: auto;
  flex-shrink: 1;
}

/* Programs contain following structure:
   - Single .dof-main-box which encapsulates everything.
   - Inside are .dof-box DIVs which contain tabs and can be minimized/maximized.
   - Content of .dof-box is encapsulated in .dof-inside-box (content of tabs).
   - Basic structure is fluid so it stretches to contain content. To use fixed
     height, set heights of .dof-main-box and .dof-inside-box accordingly. 
   - On default, all .dof-boxes are wrapped. On larger screens, disable wrapping e.g.
     @media screen and (min-width: 69em) { div.dof-main-box { flex-wrap: nowrap; } } */
div.dof-main-box {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Overflow-x prevents boxes being different sizes horizontally even if their
   content differs. */
div.dof-box {
  max-height: inherit;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  margin: 0 2px;
}

/* Last and most inner container in three layered structure. */
div.dof-inside-box { 
  position: relative;
  overflow-y: auto; /* Prevents overflowing vertically. */  
}

/* Container for separating areas in same page. */
div.dof-area {
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 3px solid #83b820;
  border-radius: 4px
}

/* Label placed above area. */
span.dof-area-label { font-weight: bold; }

/* Overlay creates a DIV popup on screen. It has following parts:
   - Overlay container dof-overlay.
   - Title in dof-overlay-title (optional).
   - Content in dof-overlay-content.
   - Menu buttons in dof-overlay-menu (optional).
*/
div.dof-overlay {   
  z-index: 10;  
  position: fixed;
  top: 50%;
  left: 50%;    
  transform: translate(-50%, -50%);  
  padding: 5px;
  
  font: 12px Verdana, arial, sans-serif;
  background-color: #00448A;
  border: 5px solid #83b820;
  border-radius: 4px;
}

div.dof-overlay-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

div.dof-overlay .overlay-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;  
}

div.dof-overlay .overlay-menu {
  margin-top: 4px;
  padding-top: 4px; 
  width: 100%; 
  text-align: center;   
  border-top: 2px solid #83b820;
}

div.dof-overlay-button-close {
  display: block;
  position: absolute;
  top: -7px;
  right: 0px;
  
  color: black;  
  font-weight: bold;  
  text-align: center;
  font-size: 26px;  
  cursor: pointer;
}

div.align-center {
  display: flex;
  width: 100%;
  align-items: center;
}

/* Maximize button that will be generated when container is minimized. 
   IE11 doesn't stretch it 100% vertically so if fixed height is used,
   set, min-height same as .dof-main-box. For larger screens, set width
   and height values again to make button thin but high. */
div.maximize-button {
  display: flex;
  align-items: center;
  justify-content: center;  
  margin: 0 2px;
  
  min-width: 1em;
  width: 100%;
  height: 1em;
    
  color: white;
  background-color: #00448A;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.875em;  
  
  border: 2px solid #00448A;
  border-radius: 2px;
  cursor: pointer;
}

/* Title text for maximize buttons that is shown when they are horizontal (smaller screen). */
span.maximize-title { 
  font-family: Arial, Verdana;
  text-transform: uppercase;
  margin-right: 6px;
}

/* Used for saving translated texts as SPAN elements that can be recovered later on by using ID of parent. */
span.my-name { display: none; }

div.maximize-button:hover {
  color: black;
  background-color: #00448A;
}

.maximize-button::after { content: " »"; }

/* Minimize button that is set to top right corner of .dof-box containers. 
   Use following format after tabs (UL element):
   <div class="minimize-button" onclick="toggleContainer(this.parentElement.id, this)">&laquo;</div> */
div.minimize-button {
  position: absolute;
  top: 5px;
  right: 5px;
    
  color: white;
  background: #00448A url('/skriptit/images/ui-bg_highlight-soft_60_83b820_1x100.png') 50% 50% repeat-x;
  font-weight: bold;  
  text-align: center;
  
  width: 21px;
  height: 21px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 18px;
  
  border: 2px solid #d6d6d6;
  border-radius: 50%;
  cursor: pointer;
}

div.minimize-button:hover {
  color: black;
  background: #b8b8b8 url('/skriptit/images/ui-bg_highlight-soft_60_b8b8b8_1x100.png') 50% 50% repeat-x;
}

/* Used for printing notifications to the user. 
   Used e.g. in following format (with added translation):
   <span id="example" class="notification translate-me" onclick="$('#example').hide();">example-message</span>
*/
span.notification {
  display: none;
  position: relative;
  background-color: #00448A;
  color: white;
  font-weight: bold;
  border-radius: 3px;
  padding: 5px;
  cursor: pointer;
}

/* Warning container where warnings will be printed. 
   Example:
   <div id="warnings" class="warnings">
     <div class="warnings-title"></div>
     <div class="warnings-messages"></div>
     <div class="warnings-button" onclick="$('#warnings').hide();">x</div>
   </div>
*/
div.warnings {
  display: none;
  position: relative;
  background-color: #00448A;  
  color: white;    
  border-radius: 3px;
  padding: 5px;
}

.warnings-title {
  font-size: 1.25em;
  font-weight: bold;
}

.warnings-messages { font-size: 0.75em; }

/* Button for closing warning container. */
.warnings-button {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  
  color: white;  
  font-weight: bold;  
  text-align: center;
  
  width: 17px;
  height: 17px;
  font-size: 14px;
  line-height: 14px;
  
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
}

/* Controls flow of the page. With wider screens, place container in same row.*/
@media screen and (min-width: 69em) {
  div.dof-main-box { 
    flex-wrap: nowrap; 
    height: 550px;   
  }
  
  div.dof-box { overflow-y: hidden; }
  
  div.dof-inside-box { height: 490px; }
  
  div.maximize-button {    
    max-width: 1em;
    min-height: 550px;
  }
  
  span.maximize-title { display: none; }
}