.pagetitle {
  text-align: center;
}

.centered {
  text-align: center;
}

h1 {
  margin-bottom: 0.3em;
}

.warning-block {
  background-color: rgba(240, 0, 0, 0.2);
  border: solid red 1px;
  border-radius: 0.5em;
  margin: 1em;
  padding: 0.5em;
}

/* Tweak the header/footer for this page */

body { margin: 0; }

div.topbarcontainer { display: none; }
div.bottombar { display: none; }

/*
div#cxcheader { display: none; }
div#cxcfooter { display: none; }
*/

div#cxcheader {
  background: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  padding: 0;
  position: fixed;
}

/* hide virtually all of the header: try to leave only the CXC link,
   but this requires hard-coding assumptions about the way the header
   is written */

div#cxcheaderleft { display: none; }
div#cxcheaderright {
  /*
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: #D9D9D9;
  border-left-color: #D9D9D9;
  */
  background: rgba(153, 204, 102, 0.8);
  border-bottom-color: rgb(115, 172, 57);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(115, 172, 57);
  border-left-style: solid;
  border-left-width: 1px;
  margin: 0;
  position: fixed;
  right: 0;
}

div#cxcheaderright ul {
  display: none;
}

div#cxcheaderright ul:first-child {
  display: block;
  float: left;
}
div#cxcheaderright ul li {
  display: none;
  padding-top: 0;
}
div#cxcheaderright ul li:last-child {
  display: list-item;
}
div#cxcheaderright ul li a:hover {
  /* background-color: rgba(255, 255, 255, 0.6); */
  background-color: rgba(153, 204, 102, 0.8);
}

div#cxcfooter {
  padding: 0;
  position: fixed;
}
div#cxcfooterleft { display: none; }
div#cxcfooterright ul { display: none; }
div#cxcfooterright p {
  /*
  background: rgba(255, 255, 255, 0.6);
  border-top-color: #D9D9D9;
  */
  background: rgba(153, 204, 102, 0.8);
  border-top-color: rgb(115, 172, 57);
  border-top-style: solid;
  border-top-width: 1px;
  bottom: 0;
  margin: 0;
  padding: 0.3em 0.5em 0 0.5em;
  position: fixed;
  width: 100%;
}

div.mainbar { padding: 0; }

/* back to page elements */

.filename { font-family: monospace; }
.term { font-family: monospace; }

div.stackid { font-family: monospace; }
div.stackid output {
  border: 1px solid gray;
  border-radius: 0.4em;
  display: inline-block;
  padding: 0.2em;
}

output#stackid { width: 16em; }
output#stackdesc { width: 25em; }

div#WorldWideTelescopeControlHost {
  overflow: hidden;
/***
  margin-left: auto;
  margin-right: auto;
  position: relative;
***/
}

/* Since this is not a selectable element, use a different style to
 * the buttons
 */
#numbers {
  background-color: rgba(153, 204, 102, 0.8); /* #99CC66 made transparent */
  border: 1px solid rgb(115, 172, 57); /* from http://www.colorhexa.com/99cc66 */
  color: rgba(0, 0, 0, 0.8);
  display: inline-block;
  font-family: monospace;
  margin-bottom: 0.4em;
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
  width: 15.8em; /* TODO: review this */
}

.userinfo {
  background-color: rgba(153, 204, 102, 0.8); /* #99CC66 made transparent */
  border: 1px solid rgb(115, 172, 57); /* from http://www.colorhexa.com/99cc66 */
  color: rgba(0, 0, 0, 0.8);
  font-family: monospace;
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
}

.userinfo p {
  margin-bottom: 0;
  margin-top: 0;
}

/* should have a common class for these */
img.icon {
  cursor: pointer;
  height: 1em;
  width: 1em;
}

/* pretending I have come up with a semantically-meningful name here */
.end-of-line {
  float: right;
}

/* need to override image for sourcinfo block; do not need for stackinfo
 * but lets us add the padding rule to both
 */
div.sourceinfopane div.main img.icon , div.stackinfopane div.main img.icon {
  display: inline;
  padding-left: 0.5em;
}

output.pos {
  display: inline-block;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  text-align: right;
  width: 1.5em;
}
output#dec_d { width: 2em; }
output#ra_s { width: 3.5em; }
output#dec_s { width: 2.5em; }

/* Since the stack, source, and source selection panes appear in the help area,
 * do not apply all settings in this section, as some are left for
 * div#xxxinfo or later rules. Examples include the cursor and
 * position settings
 */
div.stackinfopane , div.sourceinfopane , div.sourceselectionpane,
div.neareststackinfopane , div.nearestsourceinfopane ,
div.polygoninfopane, div.overlappingstacksinfopane {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid white;
  padding: 0;
}

div#stackinfo , div#sourceinfo , div#sourceselection, div#overlappingstacksinfo {
  cursor: move;
  display: none;
  overflow: auto;  /* scroll bar looks ugly when shown */
  position: absolute;
  z-index: 200;
}

/* appear to need a max height/width given my grab/move code for
   the windows. This feels wrong. */

div.stackinfopane {
  max-height: 500px;
  max-width: 650px;
}

div.sourceinfopane {
  /* background: rgba(255, 255, 255, 1); */
  max-height: 700px;
  max-width: 700px;
}

/* what's the best way to stop making this pane too wide */
div.sourceselectionpane {
  max-width: 20em;
}

/*
 * "Emulate" the WWT backgtound for the example stack/source info
 * panes on the help page.
 */
div.infocontainer {
  background: black;
  /*
   * at the moment the min max-width of source/stackinfopane + 2*2
   * from the internal padding
   */
  max-width: 654px;
  padding: 4px;
}


/* based on .stackinfopane/.sourceinfopane */

div.neareststackinfopane , div.nearestsourceinfopane ,
div.polygoninfopane {
  cursor: move;
  display: none;
  overflow: auto;  /* scroll bar looks ugly when shown */
  position: absolute;
  z-index: 200;
}

/* no-longer needed but kept in justin case I change my mind
div.stackinfopane div.main , div.sourceinfopane div.main ,
div.neareststackinfopane div.main , div.nearestsourceinfopane div.main ,
div.sourceselectionpane div.main , div.polygoninfopane div.main {
  background: rgba(255, 255, 255, 1);
}
*/

.namelink {
  font-size: small;
  font-family: monospace;
}

#example-url {
  font-family: monospace;
}

div.not-semantic-name {
  display: flex;
  flex-direction: row;
}

div.button-bar-horizontal {
  display: flex;
  flex-direction: row;
}

div.button-bar-horizontal button {
  /* margin-left: 1em; */
  margin-right: 1em;
  width: auto;
}

div.coords {
  font-weight: bold;
  padding-bottom: 1em;
  text-align: left;
  flex: auto;
}

.requires-samp {
  display: none;
}

div.samp {
  text-align: right;  /* does this center the image? */
  flex: auto;
}

div.samp-export-list {
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: row;
  margin-top: 0.5em;
  padding-top: 0.5em;
}

div.samp-export-list div:first-child {
  margin-right: 0.5em;
}

/* note: using a table for layout as easy to do */

div.sourceinfopane td.label {
  font-size: 100%;    /* there is a generic label which makes the font larger */
  font-style: italic;
  padding-right: 2em;
}

div.sourceinfopane td.labellimit {
  font-style: italic;
  padding-left: 2em;
  padding-right: 2em;
}

table.standard-table thead tr {
  background: rgba(153, 204, 102, 0.8);
}

table.standard-table thead th {
  padding: 0.2em 0.5em;
}

table.standard-table tbody tr:nth-child(even) {
  background: rgba(153, 204, 102, 0.8);
}

div.name {
  background: rgba(255, 255, 255, 0.6);
  float: left;
  margin-bottom: 0;
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-top: 0.3em;
  padding-bottom: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.2em;
  vertical-align: middle;
}

/* location of window-UI-like elements */

div.controlElements {

    height: 1em;

    /* The control box extends across the full pane.
     * Do we need to 'undo' any padding from a parent element? */
    /***
    margin-left: -0.5em;
    margin-right: -0.5em;
 ***/

    padding-bottom: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.3em;
}

/* do we want a border when the whole pane is displayed? */
div.controlElementsShown {
    /* border-bottom: 2px solid rgba(0, 0, 0, 0.4); */
}

span.title {
  background: rgba(255, 255, 255, 0.6);
  /* float: left; */
  /* margin-bottom: 0; */
  margin-left: 0.5em;
  margin-right: 0.5em;
  /* margin-top: 0.3em; */
  padding-bottom: 0.2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-top: 0.2em;
}

.closable {
  float: right;
}

div.pane-header {
  background-color: #99CC66; /* rgb(153, 204, 102); */
  position: sticky;
  top: 0;
}

div.pane-header > h2 {
  padding-bottom: 0.25em;
  padding-top: 0.25em;
}

div.pane-header .closable {
  margin-right: 0.5em;
  margin-top: 0.8em; /* depends on h2 height */
}

/*
 * need to ensure this doesn't happen to the close buttons
 * for the "help" versions of the stack/source info panes
 */
#stackinfoexample .closable , #sourceinfoexample .closable {
  margin-top: 0;
}

.switchable {
  float: right;
  margin-left: 0.5em;
  margin-right: 0.2em;
}

.hideable {
}

.showable {
}


tr.selected {
  background: rgba(0, 0, 0, 0.1);
}

div.iconarea {
  background-color: rgba(0, 0, 0, 0.3); /* adjusted to look like panel background */
  border: 1px solid #D9D9D9;
  border-radius: 0.5em;
  display: inline;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  padding: 0.3em;
}

div.iconarea img {
  padding-left: 0.25em;
  padding-right: 0.25em;
}


div.main {
  background: white;
  clear: both;
  padding: 1em;
}

div.main div.basicinfo {
  display: flex;
  flex-direction: row;
  font-size: smaller;
}

div.main div.basicinfo span.clipboard {
  flex: auto;
  padding-right: 1em;
  text-align: left;
}

div.main div.basicinfo span.search {
  flex: auto;
  text-align: center;
}

div.main div.basicinfo span.zoomto {
  flex: auto;
  padding-left: 1em;
  text-align: right;
}

/* is this needed
div.basicinfo + br {
  clear: both;
}
*/

/* bootstrap-inspired styling */
.button {
  background-color: rgba(217, 83, 79, 0.8);  /* red-ish */
  border: 1px solid rgb(212, 63, 58);
  border-radius: 0.5em;
  color: white;
  cursor: pointer;
  /* display: inline-block; */
  margin-top: 0.3em;
  /* padding: 0.5em; */
  padding-bottom: 0.2em;
  padding-top: 0.2em;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

/* over-rides for specific buttons */
#resetdefaults {
  float: right;
  /* margin-bottom: 1em; */
  margin-top: 0;
  width: auto;
}




.button:hover {
  background-color: rgba(210, 35, 45, 0.8);
  border-color: rgb(172, 41, 37);
  /* color: white; */
  /* text-decoration: none; */
}

/* what is the best way to style this button when it is disbled? */
.button:disabled {
  /* color: rgba(255, 255, 255, 0.05); */
  background-color: rgba(217, 83, 79, 0.4);  /* red-ish */
}

/* turn off "hover" on disabled */
.button:disabled:hover {
  background-color: rgba(217, 83, 79, 0.4);  /* red-ish */
  border: 1px solid rgb(212, 63, 58);
  cursor: pointer;
}

/* handle disabled items in an input button; the default is
 * graytext but this is hard to read */

option:disabled {
  color: rgba(0, 0, 0, 0.4);
}

#stackbar, #sourcebar, #source11bar , #xmmsourcebar, #eROSITAsourcebar {
  display: flex;
  flex-direction: row;
}

/* Do not display by default */
#source11bar , #chsbar {
  display: none;
}

.sourceprops {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #D9D9D9;
  border-radius: 0.5em;
  display: none;
  flex-direction: row;
  left: 100%;
  margin-left: 0.5em;
  position: absolute;
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

#togglestacks, #togglesources, #togglesources11, #toggleXMMsources, #toggleeROSITAsources {
  flex: auto;
}

/* Looks like may need to explicitly replace margin/padding settings
 * as seeing significant variations on different browsers
 */
#togglestackprops, #togglesourceprops, #togglesource11props, #togglexmmsourceprops, #toggleeROSITAsourceprops {
  border-radius: 0.5em;
  display: none;
  flex: 18px;
  margin-left: 0.5em;
  margin-top: 0.2em;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

/* color buttons for sources */
.jscolor {
  border-radius: 0.5em;
  height: 2em;
  margin-left: 0.5em;
  margin-bottom: 0.4em;
  margin-top: 0.4em;
  vertical-align: middle;
  width: 2em;
}

.sourcesize {
  margin-right: 0.5em;
  width: 4em;
}

.sourceopacity {
  margin-right: 0.5em;
  width: 6em;
}

.sourceprops , .sourceitem button {
    font-variant: small-caps;
    font-size: smaller;
}

.sourceitem label {
    text-align: center;
}

/* this isn't working to align the labels and widgets */
.sourceitem {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

#wwtuserbuttons {
  display: flex;
  flex-direction: column;
  padding-top: 0.5em;
}

/* not a great class name */
.centered {
  /* align-self: center; */
}

#userSelection {
  align-self: center;
}

#resizeusercontrol {
  cursor: pointer;
  position: relative;
}

/*
 * This seems to get a better result for the width of the tooltip than
 * having the float attached to resizeusercontrol
 */
#resizeusercontrol img {
  float: left;
}

#zoomn, #zoom0, #zoomin, #zoomout {
}

.usercontrol {
  cursor: pointer;
  float: right;
  margin-left: 0.2em;
  margin-right: 0.2em;
}

/* override pointer where appropriate */
#zoomin {
  cursor: zoom-in;
}

#zoomout {
  cursor: zoom-out;
}


.with-tooltip-static , .with-tooltip {
  position: relative;
}

.with-tooltip {
  float: right;
}

/* ugly */
.with-tooltip-static img {
  float: left;
}

/*
 * left/top positions are over-ridden based on the mouse event,
 * left in until confident the new scheme works well
 */
.tooltip {
  background: black;
  border: solid 1px white;  /* not 100% sure about this */
  color: white;
  display: none;
  font-size: smaller;
  left: 1em;
  padding: 0.5em 1em;
  position: absolute;
  text-align: center;
  top: 0.5em;
  z-index: 150; /* larger than #wwtusercontrol */
}

#smallify-tooptip , #biggify-tooltip {
  width: 10em;
}

#zoomin-tooltip , #zoomout-tooltip {
  width: 8em;
}

#zoom0-tooltip , #zoomn-tooltip {
  width: 18em;
}

#targetName-tooltip {
  top: 2em;
  width: 15em;
}

#targetFind-tooltip {
  top: 1.5em;
}

#coordinate-clip-tooltip , #bookmark-tooltip {
  font-family: sans-serif; /* remove monospace font */
  width: 15em;
}

#smallify {
}

#bigify {
  display: none;
}

#register-samp {
  display: none;
}

#targetName {
  margin-top: 0.4em;
  /* width: 14em; */
}

/* temporary information panes */
#targetSuccess, #stackUpdateStatus {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid white;
  display: none;
  max-width: 650px;
  padding: 1em;
  position: absolute;
  top: 3em;
  right: 1em;
  z-index: 300;
}

/* this is for testing only */
#chs {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid white;
  display: none;
  max-width: 650px;
  padding: 1em;
  position: absolute;
  top: 3em;
  left: 18em;
  z-index: 400;
}

#targetFailure {
  background: white;
  border: 2px solid rgba(255, 0, 0, 0.8);
  display: none;
  max-width: 650px;
  padding: 1em;
  position: absolute;
  top: 3em;
  right: 1em;
  z-index: 300;
}

/* copying text to clipboard */
div.share {
  background-color: rgba(255, 255, 255, 1.0);
  border: 1px solid #D9D9D9;
  border-radius: 0.5em;
  padding: 0.5em;
  position: absolute;
  z-index: 200;
}

div.share p {
  margin-bottom: 0.5em;
  margin-top: 0;
}

/* text area for the text being copied to the clipboard */
div.share input {
  background: rgba(153, 204, 102, 0.8); /* match .userinfo */
  display: block;
  width: 20em; /* guess */
}

#wwtusercontrol {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #D9D9D9;
  border-radius: 0.5em;
  /* cursor: move;   currently have disabled drag on this window */

  display: none;

  left: 1em;
  padding: 0.5em;
  position: absolute;
  top: 1em;
  z-index: 100;
}

/* move down for narrow screens; guess at size, which looks to be
   not that narrow */
@media all and (max-width: 1000px) {
  #wwtusercontrol {
    top: 3em;
  }
}

#wwtusercontrol p.title {
  clear: both; /* do not share vertical space with the resize button */
  font-variant: small-caps;
  margin-bottom: 0.5em;
  text-align: center;
}

img#csclogo {
  display: block;
  margin-bottom: 0.4em;  /* match span#numbers */
  margin-left: auto;
  margin-right: auto;
}

#imagechoice {
}

#togglesources {
}

#togglemw {
}

/* remember to update the pane-pos-xxxx styles if change
   positioning to use different edges than top/left */
div.preselectedpane , div.settingspane {
  background-color: rgba(255, 255, 255, 0.6);
  border: 2px solid #D9D9D9;
  cursor: move;
  display: none;
  left: 2em;
  padding: 0;
  position: absolute;
  top: 2em;
  z-index: 200;
}

div.settingspane {
  max-width: 28em;
}

/***
div.settingspane .main + p {
  border-top: 0;
}
***/

div.sourceselectionpane div.main p:first-child {
  margin-top: 0;
}

div.sourceselectionpane div.main p {
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

div.sourceselectionpane div.main div.options {
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}

div.flowable p:first-child {
  margin-top: 0;
}

div.options {
  background-color: white;
  border: 1px solid black;
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

div.options div {
  margin-left: 0.5em;
}

/* Use a grid to align the "zoom to location" buttons; should allow
 * for fallback for those browsers which do not support grid CSS.
 */
div.gridable {
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: repeat(5, 8em);
}

div.grid-2-cols {
  align-items: center;
  display: grid;
  grid-gap: 0.2em;
  grid-template-columns: auto auto;
}

#fullscreenoption {
  display: none;
}

/*
 * Want the about/credits buttons to be on the same line; this is
 * not pretty CSS...
 */
#showabout , #search-ned{
  width: 48%;
}

#showcredits , #search-simbad {
  float: right;
  width: 48%;
}

/*
 * Used for the about/help blocks
 */
div.pane {
  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(0, 0, 0, 0.8);
  bottom: 2em;
  display: none;
  left: 2em;
  overflow: auto;  /* scroll bar looks ugly when shown */
  padding-left: 1em;
  padding-right: 1em;
  position: absolute;
  right: 2em;
  top: 2em;
}

#welcome {
  background: rgba(255, 255, 255, 1.0);
  border: 2px solid black;
  display: none;
  left: 50%;

  max-height: 80%;
  max-width: 50em;
  overflow: auto;
  padding: 1em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  -webkit-transform: translate(-50%, -50%);

}

#welcome h2 { text-align: center; }

div#about , div#credits {
  z-index: 250;
}

/*
 * Unlike the other settingspane we want this centered
 * on the screen.
 */
div#keypresses {
  cursor: default;  /* we do not allow this pane to be dragged so need to reset the cursor */
  left: 50%;
  max-height: 80%;
  max-width: 50em;
  overflow: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 400;  /* try to appear above everything */
  -webkit-transform: translate(-50%, -50%);
}

img.thumbnail {
  float: left;
  padding-right: 0.5em;
}

div.pane h2 {
  text-align: center;
}

div.pane dt {
  clear: left;  /* avoid thumbnail from preceeding item */
}

div.pane dl {
  padding-bottom: 1em;
}

/*
 * For some reason there is excess vertical space at the bottom of
 * the page. This removes some of it.
 */
div.mainbar + br {
  float: left;
}


/* plots */

/* remember to update the pane-pos-xxxx styles if change
   positioning to use different edges than top/left */
.plotpane {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid gray;
  cursor: move;
  display: none;
  left: 17em;
  /* max-height: 170px; */
  max-width: 800px;
  overflow: auto;  /* scroll bar looks ugly when shown */
  padding: 0;
  position: absolute;
  /* right: 2em; */
  top: 3em;
  z-index: 250;
}

div#plotchoice {
  margin-bottom: 1em;
}

input.plotchoice { display: none; }

label.plotchoice {
  /* background-color: rgba(217, 83, 79, 0.8);  */ /* red-ish */
  background-color: rgba(217, 83, 79, 0.7);  /* red-ish ; reduce opacity to make selected more obvious */
  border: 1px solid rgb(212, 63, 58);
  border-radius: 0.5em;
  color: white;
  cursor: pointer;
  font-size: smaller;
  margin-top: 0.4em;
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

label.plotchoice:hover {
  background-color: rgba(210, 35, 45, 0.8);
  border-color: rgb(172, 41, 37);
}

input.plotchoice:checked + label.plotchoice {
  background-color: rgba(217, 83, 79, 1.0);
}

#plot1area , #plot2area , #plot3area , #plot4area {
  display: none;
}

div.overview {
  border-top: solid 3px rgba(0, 0, 0, 0.6);
  margin-bottom: 0.5em;
}


/* Try and look like a button */
span.example-button {
  background-color: rgba(217, 83, 79, 0.8);  /* red-ish */
  border: 1px solid rgb(212, 63, 58);
  border-radius: 0.5em;
  color: white;
  padding: 0 0.3em;
  font-size: smaller;
}