/* Palette
White       255, 255, 255 #ffffff
Black       0, 0, 0       #000000
Dark Grey   40, 39, 37    #282725
Mid Grey    108, 106, 102 #6c6a66
Light Grey  190, 189, 186 #bebdba

White Brown 233, 230, 225 #e9e6e1
Dark Brown  27, 9, 0      #1b0900
Pale Brown  77, 58, 49    #4d3a31
Orange      255, 79, 0    #ff4f00

White Blue  220, 225, 233 #dce1e9
Dark Blue   3, 15, 22     #030f16
Pale Blue   32, 43, 49    #202b31
Blue        0, 109, 174   #006dae

Body Font:    Hind
Heading Font: Montserrat
*/

/* GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */

/* Hide all Adsense ads on this page to avoid policy violation */
.adsbygoogle {
  display: none !important;
}

/* Style Astra container */
main#main.site-main {
  background-color: #000000 !important;
}

.ast-separate-container.ast-single-post .ast-article-single {
  padding: 0px !important;
}

/* Size Aladin Lite div */
#aladin-lite-div {
  width: 100%;
  min-width: 300px;
  height: 78vh;
  min-height: 392px;
}

/* Size Image Export div */
#FOV-export-div {
  z-index: 1000;
  position: absolute;
  top: 20px;
  left: 20px;
  display: none;
}

#FOV-export {
  background-color: #000000 !important;
  border-width: 10px;
  border-color: #fffaf5;
  padding: 0px;
}

/* Main UI buttons */
.equip-container, .pixel-container, .ccd-container, .comp-container, .search-container, .goto-container, .url-container,
.zoomIn-container, .zoomOut-container, .maximise-container, .constellation-container, .grid-container, .targets-container, .help-container, .pseudo-direct-button, .pseudo-indirect-button {
  position: absolute;
  cursor: pointer;
  line-height: 1;
  width: 36px;
  height: 36px;
  background: rgba(233, 230, 225, 0.8);
  box-shadow: 5px 5px 10px rgba(27, 27, 27, 0.7);
  border-radius: 3px;
  z-index: 20;
}

.equip-container:hover, .pixel-container:hover, .ccd-container:hover, .comp-container:hover, .search-container:hover, .goto-container:hover, .url-container:hover, .pseudo-indirect-button:hover {
  background: #e9e6e1;
}

/* Main UI buttons - direct action */
.zoomIn-container, .zoomOut-container, .maximise-container, .constellation-container, .grid-container, .targets-container, .help-container, .pseudo-direct-button {
  background: #006dae;
}

.zoomIn-container:hover, .zoomOut-container:hover, .maximise-container:hover, .constellation-container:hover, .grid-container:hover, .targets-container:hover, .help-container:hover, .pseudo-direct-button:hover {
  background: #ff4f00;
}

.pseudo-direct-button, .pseudo-indirect-button {
  position: relative;
  margin-right: 16px;
  margin-bottom: 6px;
  vertical-align: middle;
}

/* Position main UI buttons */
.equip-container {
  top: 34px;
  left: 4px;
}

.pixel-container {
  top: 74px;
  left: 4px;
}

.ccd-container {
  top: 114px;
  left: 4px;
}

.comp-container {
  top: 154px;
  left: 4px;
}

.search-container {
  top: 194px;
  left: 4px;
}

.goto-container {
  top: 234px;
  left: 4px;
}

.url-container {
  top: 274px;
  left: 4px;
}

.maximise-container {
  top: 34px;
  right: 4px;
}

.constellation-container {
  top: 74px;
  right: 4px;
}

.grid-container {
  top: 114px;
  right: 4px;
}

.targets-container {
  top: 154px;
  right: 4px;
}

.help-container {
  top: 194px;
  right: 4px;
}

.zoomIn-container {
  top: 234px;
  right: 4px;
}

.zoomOut-container {
  top: 274px;
  right: 4px;
}

/* Contents of main UI buttons - form opening */
#equip, #pixel, #ccd, #comp, #search, #goto, #url, .pseudo-indirect-button {
  font-size: 36px;
  color: rgba(27, 9, 0, 0.8);
  width: 36px;
  height: 36px;
}

/* Contents of main UI buttons - direct action */
#zoomIn, #zoomOut, #maximise, #constellation, #grid, #targets, #help, .pseudo-direct-button {
  font-size: 36px;
  color: #ffffff;
  width: 36px;
  height: 36px;
}

/* Export Image UI buttons */
.close-container, .download-container {
  position: absolute;
  cursor: pointer;
  line-height: 1;
  width: 36px;
  height: 36px;
  background: rgba(233, 230, 225, 0.8);
  box-shadow: 5px 5px 10px rgba(27, 27, 27, 0.7);
  border-radius: 3px;
  z-index: 20;
  background: #006dae;
  color: #ffffff;
  width: 36px;
  height: 36px;
}

#close-export, #download-export {
  font-size: 36px;
}

.close-container:hover, .download-container:hover {
  background: #ff4f00;
}

/* Position Export Image UI buttons */
.close-container {
  top: 14px;
  right: 14px;
}

.download-container {
  top: 14px;
  left: 14px;
}

/* UI Form outer container */
.fout {
  position: absolute;
  font-size: 13px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: rgba(233, 230, 225, 0.8);
  padding: 0px;
  margin: 0px;
  z-index: 21;
}

/* Position and initially hide UI forms */
#equipForm, #pixelForm, #ccdForm, #compForm, #searchForm, #gotoForm, #urlForm {
  display: none;
  border:#4d3a31 solid 1px;
  border-radius: 3px;
  box-shadow: 5px 5px 10px rgba(27, 27, 27, 0.7);
  left: 44px;
}

/* Position and show Reticule form */
#fovForm {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -150px;
  padding-left: 5px;
  background-color: rgba(255, 255, 255, 0);
  z-index: 20;
}

/* Position and show Donate form */
#donateForm {
  display: none;
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: 330px;
  z-index: 1001;
  margin: 0px;
  padding-top: 14px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgba(233, 230, 225, 0.8);
  box-shadow: 5px 5px 10px rgb(27 27 27 / 70%);
  border-radius: 3px;
}

/* 12-column container grid for forms (round down fractional sizes and percentages to avoid overflow) */
.f1-12, .f2-12, .f3-12, .f4-12, .f5-12, .f6-12, .f7-12, .f8-12, .f9-12, .f10-12, .f11-12, .f12-12,
.f4or5-12-responsive, .f4or7-12-responsive {
  display: inline-block;
  position: relative;
  float: left;
}

.f1-12 {
  width: 60px;
}

.f2-12 {
  width: 120px;
}

.f3-12 {
  width: 180px;
}

.f4-12 {
  width: 241px;
}

.f5-12 {
  width: 301px;
}

.f6-12 {
  width: 361px;
}

.f7-12 {
  width: 421px;
}

.f8-12 {
  width: 482px;
}

.f9-12 {
  width: 542px;
}

.f10-12 {
  width: 602px;
}

.f11-12 {
  width: 662px;
}

.f12-12 {
  width: 723px;
}

/* Form header */
.fhead {
  color:#e9e6e1;
  background:rgba(77, 58, 49, 1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  height: 23px;
  line-height: 23px;
  padding: 0px 5px 0px 5px;
  vertical-align: middle;
  font-weight: 700;
}

/* Form header close box*/
.fhead div, #donate-form-close {
  height: 23px;
  line-height: 23px;
  cursor: pointer;
  vertical-align: middle;
}

.fhead div:hover, #donate-form-close:hover {
  font-weight: 900;
}

.fhead div {
  font-size: 16px;
}

#donate-form-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
}

/* Form inner container */
.finner {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 3px 5px 2px 5px;
  width: 100%;
}

/* Labels for form controls */
.fout label {
  vertical-align: middle;
  padding-left: 3px;
}

/* Form controls */
.fout input, .fout textarea, .fout select, .fout textarea {
  font-size: 13px;
  border-color: #4d3a31;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  white-space: nowrap;
  margin-bottom: 10px;
  min-height: 32px;
}

input[type=text] {
  padding: 3px !important;
}
.pseudo-input {
  position: relative;
  margin-right: 16px;
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-color: #4d3a31;
  margin-bottom: 6px;
}

/* Specifically style the jscolor button */
.jscolor {
  font-size: 13px;
  border-color: #4d3a31;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  white-space: nowrap;
  margin-bottom: 10px;
  min-height: 32px;
  padding: 3px;
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  font-family: "Hind", arial, sans-serif;
  font-variant: normal;
  font-weight: 400;
  color: #6c6a66;
}

.fout select {
  cursor: pointer;
}

.sliderCheckbox {
  width: 100%;
  height: 30px;
  background: #ffffff;
  border: 1px solid #1b0900;
  position: relative;
  border-radius: 3px;
}

.sliderCheckbox:after {
  content: 'OFF';
  color: #6c6a66;
  position: absolute;
  top: 6px;
  right: 4px;
}

.sliderCheckbox:before {
  content: 'ON';
  color: #6c6a66;
  position: absolute;
  top:6px;
  left: 4px;
}

.sliderCheckbox label {
  display: block;
  width: 40%;
  height: 24px;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
  background: #006dae;
  border-radius: 3px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.sliderCheckbox label:hover {
  background: #ff4f00;
}

.sliderCheckbox input[type=checkbox] {
  visibility: hidden;
}

.sliderCheckbox input[type=checkbox]:checked + label {
  left: 50%;
}

.fout input:disabled, .fout textarea:disabled, .fout select:disabled, .fout textarea:disabled {
  background-color: #e9e6e1;
}

.fout input[type=button] {
  cursor: pointer;
  border: none;
  color: #ffffff !important;
  background: #006dae;
  text-transform: uppercase;
  padding: 0px;
  min-width: 34px;
}

.fout input[type=button]:hover {
  background: #ff4f00;
}

#compColourButton:hover {
  cursor: pointer;
  border-color: #ff4f00;
}

#fovForm .e1-7 {
  z-index: 20;
  line-height: 1;
  padding: 0px;
  margin: 2px;
  width: 36px;
  height: 36px;
  border-radius: 3px;
  box-shadow: 5px 5px 10px rgba(27, 27, 27, 0.7);
}

#fovPrev, #fovNext, #fovRotateMinusTen, #fovRotateMinusOne, #fovRotatePlusOne, #fovRotatePlusTen, #fovXLeft, #fovXRight, #fovYUp, #fovYDown, #fovShow, a.zoomPlus, a.zoomMinus, #zoomIn, #zoomOut, #maximise {
  cursor: pointer;
  font-size: 36px;
  width: 36px;
  height: 36px;
  z-index: 20;
}

#fovRotation, #fovXOffset, #fovYOffset {
  width: 36px;
  height: 36px;
}

#fovPrev:disabled, #fovNext:disabled {
  background-color: #202b31;
}

.fright {
  float: right;
}

/* Start new row in element grid */
.fclear {
  clear: left;
}

/* 7 and 12-column element grids for form controls (round down fractional percentages to avoid overflow) */
.e1-7,
.e0-5-12, .e1-12, .e1-5-12, .e2-12, .e3-12, .e4-12, .e5-12, .e6-12, .e7-12, .e8-12, .e9-12, .e10-12, .e11-12, .e12-12,
.e2or6-12-responsive, .e3or6-12-responsive, .e4or6-12-responsive {
  display: inline-block;
  position: relative;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px 4px;
}

.e1-7 {
  width: 14.285%;
}

.e0-5-12 {
  width: 4.166%;
}

.e1-12 {
  width: 8.333%;
}

.e1-5-12 {
  width: 12.5%;
}

.e2-12 {
  width: 16.666%;
}

.e3-12 {
  width: 25%;
}

.e4-12 {
  width: 33.333%;
}

.e5-12 {
  width: 41.666%;
}

.e6-12 {
  width: 50%;
}

.e7-12 {
  width: 58.333%;
}

.e8-12 {
  width: 66.666%;
}

.e9-12 {
  width: 75%;
}

.e10-12 {
  width: 83.333%;
}

.e11-12 {
  width: 91.666%;
}

.e12-12 {
  width: 100%;
}

/* additonal / overriding styles for aladin-lite */
.aladin-zoomControl, .aladin-fullscreenControl  {
  display: none;
}

.bws-maxIndicator, .aladin-fov, .aladin-location {
  z-index: 20;
  position: absolute;
  top: 4px;
  height: 21px;
  padding: 2px 4px 2px 4px;
  border-radius: 3px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  background-color: rgba(77, 58, 49, 0.8) !important;
  box-shadow: 5px 5px 10px rgba(27, 27, 27, 0.7);
  overflow: hidden;
  margin: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  line-height: 1.5em;
}

.aladin-location-text {
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
}

.aladin-location {
  left: 4px;
  width: 160px;
}

.aladin-fov {
  left: 170px;
}

.bws-maxIndicator {
  left: 250px;
}

.aladin-container {
  border: none;
  height:100%;
}

/* WIDE STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the wide (e.g. desktop) layout of your site */
@media only screen and (min-width: 768px) {
  /* Wide styles go below this line */

  /* Responsive form grid, switch between 4/12ths and 5/12ths width */
  .f4or5-12-responsive {
    width: 301px;
  }

  /* Responsive form grid, switch between 4/12ths and 7/12ths width */
  .f4or7-12-responsive {
    width: 421px;
  }

  /* Start new row in grid when mobile/tablet media */
  .fclear-narrow-responsive {
  }

  /* Start new row in grid when desktop media */
  .fclear-wide-responsive {
    clear: left;
  }

  /* Responsive element grid, switch between 2/12ths and 6/12ths width */
  .e2or6-12-responsive {
    width: 16.666%;
  }

  /* Responsive element grid, switch between 3/12ths and 6/12ths width */
  .e3or6-12-responsive {
    width: 25%;
  }

  /* Responsive element grid, switch between 4/12ths and 6/12ths width */
  .e4or6-12-responsive {
    width: 33.333%;
  }
}

/* MEDIUM WIDE STYLES
-------------------------
Add styles inside the media query below that you only want to be applied to the medium wide (e.g. tablet) layout of your site */
@media only screen and (max-width: 767px) {
  /* Medium wide styles go below this line */

  /* Responsive form grid, switch between 4/12ths and 5/12ths width */
  .f4or5-12-responsive {
    width: 241px;
  }

  /* Responsive form grid, switch between 4/12ths and 7/12ths width */
  .f4or7-12-responsive {
    width: 241px;
  }

  /* Start new row in grid when mobile/tablet media */
  .fclear-narrow-responsive {
    clear: left;
  }

  /* Start new row in grid when desktop media */
  .fclear-wide-responsive {
  }

  /* Responsive element grid, switch between 2/12ths and 6/12ths width */
  .e2or6-12-responsive {
    width: 50%;
  }

  /* Responsive element grid, switch between 3/12ths and 6/12ths width */
  .e3or6-12-responsive {
    width: 50%;
  }

  /* Responsive element grid, switch between 4/12ths and 6/12ths width */
  .e4or6-12-responsive {
    width: 50%;
  }
}

/* NARROW STYLES
-------------------------
Add styles inside the media query below that you only want to be applied to the narrow (e.g. mobile) layout of your site */
@media only screen and (max-width: 510px) {
  /* Narrow styles go below this line */

  /* Hide Aladin logo to avoid it overlapping FOV form */
  .aladin-logo-container {
    display: none;
  }
}

/* TALL STYLES
-------------------------
Add styles inside the media query below that you only want to be applied to the tall (e.g. desktop and tablet) layout of your site */
@media only screen and (min-height: 715px) {
  /* Tall styles go below this line */

  #equipForm {
    top: 34px;
  }

  #pixelForm {
    top: 74px;
  }

  #ccdForm {
    top: 114px;
  }

  #compForm {
    top: 154px;
  }

  #searchForm {
    top: 194px;
  }

  #gotoForm {
    top: 234px;
  }

  #urlForm {
    top: 274px;
  }
}

/* SHORT STYLES
-------------------------
Add styles inside the media query below that you only want to be applied to the short (e.g. mobile) layout of your site */
@media only screen and (max-height: 715px) {
  /* Short styles go below this line */

  #equipForm, #pixelForm, #ccdForm, #compForm, #searchForm, #gotoForm, #urlForm {
    top: 34px;
  }
}