/* ==== Global styles ==== */
/* ==== Override some JS9 defaults ==== */
/* ==== Menu Bar ==== */
/* ==== Mini-image Navigation ==== */
/* ==== Popup tabs ==== */


/* TESTING AREA*/



.JS9Magnifier {
	margin-left: 3px;
}
.AstroLabPixelInfo {
	margin-left: 12px;
    text-indent: -7px;
}
.AstroLabPixelInfo p {
  margin-top: 0px;
  margin-bottom: 1px;
}

.al9_pxinf {
  line-height: 1.05;
}
.al9_pxinf_lab {
  font-weight: bold;
}

.JS9Panner{
	margin-left: 3px;
}
.LogoLjmu{
	margin-left: 3px;
}

/* ==== Global styles ==== */
body {
  /*background-color: #F9F6EE;  just off white */
  background: #FFFBF6;  /*TSO front-page boxes*/
  color: #002768; /*TSO text colour*/
  font-family: "Open Sans", sans-serif;
}
h2{
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif;
	text-transform: uppercase;
	margin: 8px 0px 8px 5px; /*trbl*/
}
a {
  color: #0F8D76;
}
a:hover {
  color: #CC3501;
}
a:visited {
  color: #104F5B;
}

button , #al9_coledit_usecol{
  background-color: #002768; /* TSO Text*/
  border: none;
  color: #FFFBF6; /* TSO pale box*/
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  margin: 4px 2px;
  cursor: pointer;
}
.astrolab-button{
	padding: 5px 10px;
}

.JS9Button {
  color: black;
}

.unhighlight {
  color: #002768; /* TSO Text*/
}

/* ==== Override some JS9 defaults ==== */

/* three right hand boxes and bottom area */
div.JS9Plugin {
   background: #FFFBF6; /*TSO Pale box*/
}

/* main box and 2 top right smaller boxes*/
canvas.JS9Image, canvas.JS9Panner, canvas.JS9Magnifier, canvas.JS9Info {
  /*background: #DBE2E9;  LJMU Light Blue*/
background: white;
  }
  
canvas.JS9ColorbarTextCanvas {
  background: #cccccc;
}

/* --- Popup windows (generic properties)---*/
.dhtmlwindow {
 /* background-color: #DBE2E9;  LJMU Light Blue - NEED TO CHANGE TEXT COLOURS TOO*/
  /*color: #2CD5C4;  was green; now LJMU Liver Green  NO IDEA WHERE THIS IS USED */
   border: 1px solid #002768; /* TSO text*/
}

/* giving the popups content some space to breathe*/


.AstroLabPopupWrapper {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 10px;
}

.AstroLabPopupWrapper p {
  margin-top: 5px;
  margin-bottom: 0;
}

.IroWheel{
	margin-top: 20px;
	margin-left: 20px;
}
.al9_reged_tool, #al9_reged_textfont_wrap, #al9_reged_addrow{
	margin-top: 10px;
}
#al9_reginfo_addrow{
	margin-bottom: 10px;
}


.drag-handle { /* Popup window title */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #002768, color-stop(1.0, #FFFBF6)));
    background: -webkit-linear-gradient(top, #002768, #FFFBF6);
    background: -moz-linear-gradient(top, #002768, #FFFBF6);
    background: -ms-linear-gradient(top, #002768, #FFFBF6);
    background: -o-linear-gradient(top, #002768, #FFFBF6);
    background: linear-gradient(top, #002768, #FFFBF6);
    color: white;
		font-size: 12pt;
}

.drag-contentarea { /* CSS for bottom half of popup Obs Details/photometry window, full colours/makemyown/scaling */
    background: #FFFBF6; /* LJMU Light Blue*/
    color: #00205B; /* LJMU Dark Blue*/
	font-family: "Open Sans", sans-serif;
	
}
.drag-contentarea h3 {
	font-family: "Open Sans", sans-serif;
	text-align: center;
}


.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
  border-top: 1px solid #333333;
  /*background-color: #2b2b2b;  just off black*/
  background-color: #pink; /* LJMU Light Blue*/
}


/* ==== Menu Bar ==== */
.TopContainer{
	width:960px;
	height:70px;
}
div.AstroLabTitle {
	width:800px;
	float:left;
	  /* Same as <h2> */
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #00205B; /* LJMU Dark Blue*/
	text-transform: uppercase;
	margin: 8px 0px 8px 5px; /*trbl*/
	background-color: #FFFBF6; /* LJMU Light Blue*/
}
.NSOLogo{
	width:150px;
	float:right;
}


/*************
   THE MENU
**************/
/* The screen-width menu bar holder div */
div.AstroLabMenuBar {
  /*background-color: #00205B;  just off white */

}

/* main menu text */
.astrolab-menu {
    /*background-color: rgb(0,0,0); WHAT DOES THIS ONE DO??*/
	color: #00205B; /* LJMU Dark Blue*/
	float:left;
    display: flex;
	width:800px;
    /* Reset list styles */
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.astrolab-menu li {
    /*background-color: #F9F6EE;  just off white */
	background-color: #FFFBF6; /* LJMU Light Blue*/
	font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, sans-serif;
    /* Spacing */
    padding: 2px 25px 5px 8px; /*trbl*/
    /* Used to position the sub dropdown */
    position: relative;
}

.astrolab-menu img {
  width: 16px;
  height: 16px;
  padding: 0px 5px 0px 0px;
}

/* The sub dropdown */
.astrolab-menu ul {
    /* Border
    border: 1px solid #24354b;*/
    /* Hidden by default */
    display: none;
    /* Absolute position */
    left: 0;
    position: absolute;
    top: 100%;
    /* Reset styles */
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* Width */
    width: 200px;
}


/* The second level sub dropdown */
.astrolab-menu ul ul {
    left: 100%;
    position: absolute;
    top: 0;
	
}

/* Unselected or hovered list item  */
.astrolab-menu ul li {
    /*background-color: #F9F6EE;  just off white */
	background-color: #FFFBF6;  /*LJMU Light Blue*/
}

/* Change background color of main menu list item when being hovered */
.astrolab-menu li:hover {
    /* background-color: #FFFBF6; LJMU Light Blue*/
}

/* Change background color of dropdown list item when being hovered */
.astrolab-menu li li:hover {
	/*background-color: #FFFBF6;  LJMU Light Blue*/
	background-color: #EEE8E3; /* just off white */
}

/* Change background color of dropdown inactive list item  */
.astrolab-menu li .inactive {
    /*background-color: #F9F6EE;  just off white */
	background-color: #FFFBF6;  /*LJMU Light Blue*/
    color: #999999;
}

/* Change background color of inactive list item when being hovered */
.astrolab-menu li .inactive:hover {
	/*background-color: #FFFBF6;  LJMU Light Blue*/
	background-color: #FFFBF6; /* just off white */
}

/* Show the direct sub dropdown when hovering the list item */
.astrolab-menu li:hover > ul {
    display: block;
}

li.al9_menu_toplvl {
  float: left;
}

/* Add a symbol to the RHS of menus (except top level) */
li.al9_menu_sublvl {
  background: url("../img/rarrow.png") no-repeat right;
}

.al9_txtlabel {
  line-height: 1.3;
}

.al9_txt {
  line-height: 1.4;
  font-weight: bold;
}

.al9_keylabel {
  line-height: 1.3;
  font-weight: bold;
}

.al9_keytxt {
  line-height: 1.3;
}


/* ==== Main page layout ==== */
td.al9-pannerCell {
  text-align: center;
  vertical-align: middle;
}

td.al9-imageCell {
  text-align: center;
  vertical-align: top;
}

td.al9-mininavCell {
  text-align: center;
  vertical-align: top;
}

td.al9-magnifierCell {
  text-align: center;
  vertical-align: middle;
}

td.al9-pixinfoCell {
  vertical-align: top;
}

td.al9-colbarCell {
  text-align: center;
  vertical-align: top;
}

td.al9-ljmuCell {
  text-align: center;
  vertical-align: top;
}

td.al9-tooltipCell {
  vertical-align: top;
}


/* ==== Mini-image Navigation ==== */

.AstroLabPixelInfo {
	color: #00205B; /* LJMU Dark Blue*/
}

div.AstroLabMiniNav {
  border:0px;
  height:575px;
   /*background: #F9F6EE;  just off white */
   background: #FFFBF6;  /* LJMU Light Blue*/
  margin-left: 5px;
  /* Control the layout (rows & cols) of the mini nav boxes */
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: top;
}

div.al9_mininav_wrap {
  float: left;
  color: #F9F6EE; /* just off white */
  border: 0px;
  padding-bottom:8px;
}

div.al9_mininav_box {
  float: left;
}

div.al9_mininav_add {
  background-color: #FFFBF6; /* LJMU Light Blue*/
  /*border: 1px solid #CC3501;*/
  float: left;
  text-align: center;
  display: block;
}

div.al9_mininav_sel {
  border: 4px solid #2CD5C4;
}

div.al9_mininav_notsel {
  border: 4px solid #FFFBF6;
}

/* === General elements ===*/

.al9-maintable {
  clear: left;
}

.al9_colsel_bar {
	border: 1px solid #2CD5C4;
}
.al9_colsel_barsel {
	border: 1px solid #CC3501;
}
.al9_colsel_name {
	color: #00205B;
}
.al9_colsel_namesel {
	color: #CC3501;
}

.al9_newsect {
  margin-top: 5px;
}

.al9_table_head {
  text-align: center;
  padding: 3px 5px 3px 5px;
}

.al9_table_data {
  text-align: right;
  padding: 2px 4px 2px 4px;
}

td.al9_table_data {
  border-top: 1px solid #CC3501;
}

.al9_table_highlight {
  background-color: #F9F6EE; /* just off white */
}

.al9_guidance p {
  margin: 0px auto 5px;
}

canvas.JS9ColorbarCanvas{
	border: 0px;
}

/* ==== Popup-specifics === */
/* Measure Size */

.al9_reginfo_diag_container {
  width:100%;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}
canvas.al9_reginfo_diag {
  display: inline-block;
}

/* About */

.al9_about_p {
  margin: 0px 1em 5px 1em;
}

#al9_about_nsologo {
  width: 200px;
  float: left;
  vertical-align: top;
  margin: 0px 5px 5px 5px;
}

#al9_about_ljmulogo {
  width: 120px;
  float: right;
  vertical-align: top;
  margin: 0px 5px 5px 5px;
}

#al9_about_vnum {
  text-align: center;
  font-size: small;
}

/* ==== Popup tabs ==== */

.ui-widget, .ui-tabs, .ui-tabs-nav, .ui-widget-content {
  background-color: #FFFBF6; /* LJMU Light Blue*/
  color: #00205B; /* LJMU Dark Blue*/
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  padding: 1px;
  border: 0px;
}

.ui-widget .ui-widget-content {
  border: 0px;
  border-top: 1px solid #999999;
}
.ui-widget.ui-widget-content {
  border: 0px;
}

 /* Remove the tabs background */
.ui-tabs-nav {
    padding-left: 0px;
    background: transparent;
    border-width: 0px 0px 1px 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.ui-tabs-nav .ui-state-default {
    border-radius: 2px;
}
  /* Set colours for selected/unselected tabs */
.ui-tabs-nav .ui-state-default a {
  background-color: #FFFBF6; /* LJMU Light Blue*/
  color: #393939; /* ~80% black */
}
.ui-tabs-nav .ui-state-active a {
  background-color: #FFFBF6; /* LJMU Light Blue*/
  color: #00205B; /* LJMU Dark Blue*/
}



/* === Bottom Area === */
#NSOJS9ColorbarTextCanvas{
	background-color: #FFFBF6; /* LJMU Light Blue*/
}

.AstroLabTooltip {
	color: #FFFBF6;
}
.al9-tooltipCell div.JS9Plugin{
	background: #00205B;
}
	
#NSOJS9Tooltip {
	padding:8px 0px 3px 0px;  /*trbl*/
	font-weight: normal;
}
#NSOJS9Tooltip  span{
	padding-left:8px;
}
/* Allie: Edit this to make the tooltips stand out a bit */
@keyframes tooltip {/*
  0%   {color: #2CD5C4; }
  40%  {color: #2CD5C4; }
  100% {color: #00205B; }
*/
  }
.al9_tooltip_active {
  animation-name: tooltip;
  animation-duration: 0.7s;
}


/* === Some speciific popups === */
#al9_phot_instruct {
  float: right;
  width: 320px;
}

input[type=range].al9_range_slider {
  width: 220px;
}