/* The page setup is sort of like:

Wrapper
  TopImage
    Image
    Logo
    HeaderNav
    Search
    Nav
  Content
    leftcol
    Main
  Footer
*/

/** { padding: 0; margin: 0;}*/

/*
a:link {color: #717787;}
a:visited {color: #717787;}
a:active {color: #006;}
a:hover {color: #000;}
*/

body {
        font-family: "Luxi Sans", "Nimbus Sans L", arial, helvetica, sans-serif;
        font-family: "Nimbus Sans L", sans-serif;
        font-size: 10pt;
        text-align: center; /* IE hack to center the page */
        background-image: url(/pics/capodimontewall2.jpg);
        background-repeat: repeat;
}

ul#winbut {
        position: fixed;
        right: 0;
        top: 89%;
        list-style-type: none;
        border: 1px solid #006;
        margin: 0;
        padding: 0;
        background-color: #eef;
}

ul.tour {
        margin-left: 1.0em;
        padding-left: 1.0em;
        list-style-type: decimal;
}

/* table, td, th */
table {
        font-size: 10pt;
}

td {
        vertical-align: top;
        padding: 1px 4px;
}

th {
        vertical-align: top;
        padding: 1px 4px;
}

/* ONLINE */

table.online {
        width: 100%;
        text-align: center;
}

table.online img {
        width: 350;
        height: 350;
}

table.online th {
        text-align: center;
        font-size: 20pt;
        background-color: #BBBBDD;
        border-bottom: 1px dotted #999;
}

table.online td {
        padding: 10px;
        border-bottom: 1px dotted #999;
}


/* SPOTLIGHT */

table.spotlight {
        width: 100%;
        text-align: center;
}

table.spotlight img {
        width: 350;
        height: 350;
}

table.spotlight th {
        text-align: center;
        font-size: 20pt;
        background-color: #BBBBDD;
        border-bottom: 1px dotted #999;
}


/* NEWS */
table.news {
        text-align: left;
        width: 100%;
        border: 2;
}

table.news img {
        width: 100;
        height: 100;
}

table.news th {
        text-align: center;
        font-size: 20pt;
        background-color: #BBBBDD;
        border-bottom: 1px dotted #999;
}

table.news td {
        padding: 10px;
        border-bottom: 1px dotted #999;
}


/* KIDS */
table.kids {
        text-align: left;
        width: 100%;
        border: 2;
}

table.kids img {
        width: 100;
        height: 100;
}

table.kids th {
        text-align: center;
        font-size: 20pt;
        background-color: #BBBBDD;
        border-bottom: 1px dotted #999;
}

table.kids td {
        padding: 10px;
        border-bottom: 1px dotted #999;
}



.figure {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 400px;
}

.figure img {
        width: 400px;
}

.caption {
        text-align: center;
        font-style: italic;
        font-size: 9pt;
}

/* Wrapper to center everything */
#Wrapper {
        position: relative;
        margin: 0 auto;
        padding: 0;
        width: 97%;
        text-align: left;
}

#Header {
        position: relative;
        background: #372C2A;
        color: #999;
        height: 150px;
        padding: 0;
        margin: 0;
}

/* Main content area: goal is to get a page-on-background (of body) style */
#Content {
        position: relative;
        width: 100%;
        padding: 0;
        padding-bottom: 15px;
        min-height: 85em; /*1000px;*/
        height: auto;
        _height: 100em; /* IE hack to get min-height to work */
        top: 60px;
        _top: 59px;
        background: #e6e6fa;
}

#leftcol {
        position: absolute;
        background: #e6e6fa;
        margin: 0;
        /*float: left;*/
        /*border-right: 1px dashed #d5d5d5;*/
        padding-top: 35px;
        padding-right: 0.5%;
        padding-left: 0.5%;
        padding-bottom: 0.8%;
        left: 0.5%;
        width: 16.5%;
        z-index: 300;
}

#rightcol {
        position: absolute;
        background: #f5f3ff;
        margin: 0;
        /*float: right;*/
        /*border-left: 1px dashed #d5d5d5;*/
        right: 0.5%;
        padding-top: 35px;
        padding-left: 0.5%;
        padding-right: 0.5%;
        padding-bottom: 0.8%;
        width: 13.0%;
}

#centercol {
        position: relative;
        left: 18.1%;
        /*left: 200px;*/
        /*width: 67.0%;*/
        width: 80%;
        /*margin-left: 17.9%; /* width of leftbox */
        /*margin-right: 15.4%; /* width of rightbox */
        margin: 0;
        background: #e6e6fa;
        padding-left: 0.5%;
        padding-right: 0.5%;
        padding-top: 35px;
        padding-bottom: 0.8%;
}

.clear  {
        clear: both;
        overflow: hidden;
        height: 1px;
}

#Footer {
        position: relative;
        clear: both;
        top: 60px;
        padding: 10px 0 10px 0;
        border-top: 1px dotted #d5d5d5;
        border-top: 1px dotted #000066;
        background: #F1EFFB;
        background: #eeeeff;
        color: #717787;
        width: 100%;
        text-align: center;
}

/* This makes the left/right columns extend all the way down */
/*#leftcol, #rightcol, #centercol {
        padding-bottom: 32767px;
        margin-bottom: -32767px; }

#Content {overflow: hidden;}
/* end extend columns */

#HeaderImage {
        position: relative;
        height: 150px;
        width: 100%;
        padding: 0;
        margin: 0;
}

#Logo {
        position: absolute;
        display: block;
        top: 10px;
        right: 15px;
        z-index: 200;
        padding: 0;
        margin: 0;
}

#HeaderNav ul {
        position: absolute;
        display: inline;
        font-size: 10pt;
        list-style-type: none;
        margin: 0;
        padding: 0;
        color: #000;
        top: 5px;
        left: 8px;
        z-index: 200;
}

#HeaderNav ul li {
        padding: 0px 5px;
        margin: 0;
        border-left: 1px solid #717787;
        list-style: none;
        display: inline;
        z-index: 200;
}

#HeaderNav ul li.first {
        margin-left: 0;
        border-left: none;
        list-style: none;
        display: inline;
}

#HeaderNav ul li a {
        text-decoration: none;
        color: #717787;
}

#Find {
        position: absolute;
        top: 152px;
        right: 1em;
        /*display: block;*/
        z-index: 100;
        /*width: 26em;*/
        width: 40%;
        margin: 0;
        padding: 0;
}

#Search {
        position: relative;
        /*right: 20px;*/
        font-size: 9pt;
        margin-top: 5px;
        margin-right: 5px;
        margin-left: 0;
        margin-bottom: 0;
        padding: 0;
        float: right;
        z-index: 200;
        width: auto;
}

#Index {
        position: relative;
        font-size: 9pt;
        /*top: 161px;*/
        /*right: 26em;*/
        float: right;
        padding: 0;
        margin-left: 0;
        margin-bottom: 0;
        margin-right: 5px;
        margin-top: 8px;
        z-index: 200;
        width: auto;
}

#Index a:link, #Index a:visited {
        color: #717787;
}

.SideBox {
        background-color: #eeeeff;
        border: 1px solid #020208;
        padding: 0px 8px 5px 10px;
        margin: 0 0 10px 0;
        text-align: left;
        font-size: 9pt;
}

/*
.SideBox a:link, .SideBox a:visited {
        color: #717787;
}

.SideBox a:hover {
        color: #000000;
}
*/
.SideBox table {
        font-size: 9pt;
}

.SideBox .title {
        font-size: 13pt;
        font-weight: normal;
        top: -1px;
        text-align: right;
        width: 100%;
        background-color: #bbd;
        /*color: #F5F3FF;*/
        color: #000;
        padding: 1px 8px 1px 0px;
        margin: 0;
}

.SideBox ul {
        list-style-type: square;
        text-align: left;
        margin-left: 0em;
        padding-left: 2em;
        text-indent: -0.1em;
}

#Status {
        position: relative;
        display: block;
        text-align: right;
        /*font-size: 10pt;*/
/*        top: 15px;*/
/*        right: 50px;*/
        z-index: 200;
        background: #eef;
        padding: 3px;
}

#Status ul {
        padding: 1px;
        margin: 1px;
}

#Status li {
        display: inline;
        padding: 1px;
}



/* Navigation tabs */
#tabs {
        position: absolute;
        background: #bbd;
        /*top: 150px;*/
        width: 100%; /*1000px;*/
        height: 29px;
        border-bottom: 1px solid #d5d5d5;
        border-bottom: 1px solid #717787;
        margin-left: 0;
        margin-top: 0;
        padding: 0;
}

#tabs ul {
        display: inline;
        list-style-type: none;
        border-bottom: 1px solid #d5d5d5;
        border-bottom: 1px solid #717787;
}

#tabs li {
        display: inline;
}

#tabs a:link, #tabs a:visited {
        background: #F5F3FF;
        background: #eeeeff;
        color: #333;
        border: 1px solid #006;
        border: 1px solid #717787;
        float: left;
        /*font-family: "Luxi Sans", "Nimbus Sans L", Helvetica, Verdana, Arial, sans-serif, generic;*/
        font-family:  helvetica, sans-serif;
        font-size: 10pt;
        font-weight: bold;
        line-height: 14px;
        margin-left: 4px;
        margin-right: 2px;
        margin-top: 8px;
        margin-bottom: -1px; /* Important: seems to correct Opera, IE 6 */
        padding: 3px 10px 3px 10px;
        text-decoration: none;
}

#tabs a:link.active, #tabs a:visited.active {
        background: #F5F3FF;
        background: #e6e6fa;
        color: #000066;
        border-bottom: 1px solid #F5F3FF;
        border-bottom: 1px solid #e6e6fa;
}

#tabs ul a:hover, #tabs a:hover {
        color: #000066;
}

/* Highlighting of the active tab */
body.tab-home        #tabs li.tab-home a,
body.tab-system      #tabs li.tab-system a,
body.tab-instruments #tabs li.tab-instruments a,
body.tab-vo          #tabs li.tab-vo a,
body.tab-projects    #tabs li.tab-projects a {
        background: #F5F3FF;
        background: #e6e6fa;
        color: #000066;
        border-bottom: 1px solid #F5F3FF;
        border-bottom: 1px solid #e6e6fa;
}

/* Subnavigation tabs */

#tabs .subtabs-home,
#tabs .subtabs-system,
#tabs .subtabs-instruments,
#tabs .subtabs-vo,
#tabs .subtabs-projects {
        display: none; /* important! */
}

body.tab-home        #tabs ul.subtabs-home,
body.tab-system      #tabs ul.subtabs-system,
body.tab-instruments #tabs ul.subtabs-instruments,
body.tab-vo          #tabs ul.subtabs-vo,
body.tab-projects    #tabs ul.subtabs-projects {
        display: inline;
        position: absolute;
        height: 29px;
        background: #F5F3FF;
        background: #e6e6fa;
        width: 100%; /*1000px;*/
        left: 0px;
        margin: 0;
        padding: 0;
        top: 30px;
}

body.tab-home        #tabs ul.subtabs-home a,
body.tab-system      #tabs ul.subtabs-system a,
body.tab-instruments #tabs ul.subtabs-instruments a,
body.tab-vo          #tabs ul.subtabs-vo a,
body.tab-projects    #tabs ul.subtabs-projects a {
        background: #F5F3FF;
        background: #eeeeff;
        float: right;
        border: 1px solid #717787;
        color: #333;
        /*font-family: "Luxi Sans", "Nimbus Sans L", Helvetica, Verdana, Arial, sans-serif, generic;*/
        font-size: 10pt;
        font-weight: bold;
        margin-left: 0;
        margin-right: 6px;
        margin-top: 8px;
        margin-bottom: -1px; /* Important: seems to correct Opera, IE 6 */
        padding: 3px 10px 3px 10px;
        text-decoration: none;
}

/* Highlight title when hovering over the tab */
body.tab-home        #tabs ul.subtabs-home a:hover,
body.tab-system      #tabs ul.subtabs-system a:hover,
body.tab-instruments #tabs ul.subtabs-instruments a:hover,
body.tab-vo          #tabs ul.subtabs-vo a:hover,
body.tab-projects    #tabs ul.subtabs-projects a:hover {
        color: #000066;
}

/* Definitions for active subtab */

/* All subtabs under tab1 (none) */
/* All subtabs under tab2 */
body.subtab-doc     #tabs ul.subtabs-system li.subtab-doc a,
body.subtab-howtos  #tabs ul.subtabs-system li.subtab-howtos a,
body.subtab-process #tabs ul.subtabs-system li.subtab-process a,
body.subtab-view    #tabs ul.subtabs-system li.subtab-view a,
body.subtab-data    #tabs ul.subtabs-system li.subtab-data a,
/* All subtabs under tab3 (none) */
/* All subtabs under tab4 */
body.subtab-awe        #tabs ul.subtabs-projects li.subtab-awe a,
body.subtab-ocam       #tabs ul.subtabs-projects li.subtab-ocam a,
body.subtab-lofar      #tabs ul.subtabs-projects li.subtab-lofar a,
body.subtab-vesuvio    #tabs ul.subtabs-projects li.subtab-vesuvio a,
body.subtab-omegawhite #tabs ul.subtabs-projects li.subtab-omegawhite a,
body.subtab-omegatrans #tabs ul.subtabs-projects li.subtab-omegatrans a,
body.subtab-kids       #tabs ul.subtabs-projects li.subtab-kids a,
body.subtab-comals     #tabs ul.subtabs-projects li.subtab-comals a {
        background: #F5F3FF;
        background: #e6e6fa;
        border-bottom: 1px solid #F5F3FF;
        border-bottom: 1px solid #e6e6fa;
        color: #000066;
}


/* Left menu */
ul#MenuLeft {
        /*position: absolute;*/
        /*left: 1.5%;*/ /*10px;*/
        width: 100%;
        overflow: visible;
        /*font-family: "Luxi Sans", "Nimbus Sans L", Helvetica, Verdana, Arial, sans-serif, generic;*/
        font-size: 9pt;
        margin: 0;
        padding: 0;
        z-index: 100;
}

ul#MenuLeft, ul#MenuLeft ul {
        width: 99%;
        cursor: default;
        /*margin: 0;
        padding: 0;*/
}

ul#MenuLeft li {
        list-style-type: none;
        margin: 0px;
        padding: 0;
        position: relative;
        color: #333;
        color: #006;
        width: 100%;
        background-color: #F1EFFB;
        background-color: #eeeeff;
        margin-bottom: -1px; /* equal to border width */
        border: 1px solid #d5d5d5;
        border: 1px solid #000066;
        z-index: 100;
}

ul#MenuLeft li > ul {
        display: none;
        position: absolute;
        top: 20px;
        left: 50%;
        padding: 0;
        margin: 0;
        z-index: 100;
}

ul#MenuLeft li:hover {
        background-color: #bbd;
        color: #000;
        z-index: 1000;
}

ul#MenuLeft li:active {
        background-color: #bbd;
        color: #000;
        z-index: 1000;
}

ul#MenuLeft li.CSStoHighlight {
        background-color: #bbd;
        color: #000;
        z-index: 1000;
}

ul#MenuLeft ul.CSStoShow {
        display: block;
        position: absolute;
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 1000;
}

ul#MenuLeft li:hover > ul {
        display: block;
        position: absolute;
        width: 100%;
        z-index: 1000;
}

ul#MenuLeft li a {
        color: #333;
        display: block;
        padding-top: .35em; /*2px;*/
        padding-bottom: .35em; /*2px;*/
        padding-left: .5em; /*3px;*/
        padding-right: .2em; /*3px;*/
        text-decoration: none;
        z-index: 1000;
}

ul#MenuLeft li a:active {
        color: #000;
}

ul#MenuLeft li a:active.link {
        background: #333;
        color: #000;
}

ul#MenuLeft li a:hover {
        color: #000;
}

/* END Left menu */

#Tools {
        position: absolute;
        top      : 5px;
        left     : 1.5%; /*10px;*/
        left     : 18.5%; /*10px;*/
        font-size: 9pt;
        z-index: 101;
}

#Tools a {
        text-decoration: none;
}

h1 {
        color: #000066;
        font-size: 15pt;
        text-align: center;
}

h1.lefty {
        text-align: left;
}

h2 {
        color: #000066;
        font-size: 14pt;
}

h2.ctr {
        text-align: center;
}

h2.emphasis {
        font-style: italic;
}


h3 {
        color: #000;
        font-size: 13pt;
}

h3.ctr {
        text-align: center;
}

h3.emphasis {
        font-style: italic;
}


h4 {
        color: #000;
        font-size: 13pt;
}

h4.emphasis {
        font-style: italic;
}

h5 {
        color: #000;
        font-size: 12pt;
}

h6 {
        color: #000;
        font-size: 11pt;
        text-align: center;
        margin-top: 8px;
        margin-bottom: 8px;
}

.inverted {
        color: #eef;
}

/* font classes */
it {
        font-style: italic;
}
em {
        color: #000066;
        font-style: normal;
        font-size: 120%;
}

/* Main div */

#MainLeft {
        position: relative;
        left: 5%;
        width: 42.5%;
        float: left;
        margin: 0 0 10px 0;
        padding-top: 35px;
}

#MainLeft h1{
        text-align: center;
}

#MainRight {
        position: relative;
        right: 5%;
        width: 42.5%;
        float: right;
        margin: 0 0 10px 0;
        padding-top: 35px;
}

#MainRight h1{
        text-align: center;
}

#Main {
        position: relative;
        left: 18.1%;
        /*left: 200px;*/
        /*width: 67.0%;*/
        width: 80%;
        /*margin-left: 17.9%; /* width of leftbox */
        /*margin-right: 15.4%; /* width of rightbox */
        margin: 0;
        background: #e6e6fa;
        padding-left: 0.5%;
        padding-right: 0.5%;
        padding-top: 35px;
        padding-bottom: 0.8%;

}

#MainCtr {
        position: relative;
        /*top: 40px;*/
        left: 5%; /*0px;*/
        width: 90%; /*900px;*/
        margin: 0;
        padding: 1px;
        padding-top: 20px;
        /*margin-bottom: 10px;*/
}


/* Boxed content */
.choicebox {
        background-color: #eeeeff;
        border: 1px solid #020208;
        padding: 0px 8px 5px 10px;
        margin: 0 0 10px 0;
        text-align: left;
        min-height: 26em;
        float: left;
        width: 27.5%;
        margin-right: 3%;
}

.choicebox .title {
        font-size: 13pt;
        font-weight: normal;
        top: -1px;
        text-align: right;
        width: 100%;
        background-color: #bbd;
        /*color: #F5F3FF;*/
        color: #000;
        padding: 1px 8px 1px 0px;
        margin: 0 0 15px 0;
        min-height: 3em;
}

.choicebox ul {
        padding-left: 1em;
        margin-left: 1em;
}

.Box {
        background-color: #eeeeff;
        border: 1px solid #006;
        border: 2px solid #006;
        padding: 8px;
        margin: 0 0 10px 0;
}

.BoxLink {
        float: left;
        padding-left: 5px;
        padding-right: 10px;
        padding-bottom: 2px;
        padding-top: 2px;
        margin-bottom: 5px;
        font-weight: bold;
        color: #000066;
        background: #ddf;
        border-width: 2px;
        border-color: #bbe #005 #005 #bbe ; /* top right bottom left */
        border-style: solid;
        text-decoration: none;
}

.BoxLink:hover {
        background: #ccf;
}

.BoxAccess {
        float: right;
        margin-left: 10px;
        border-style: solid;
        border-width: 2px;
        padding: 1px;
        border-color: #000066;
}

.BoxAnonymous {
        float: right;
        margin-left: 10px;
        border-style: solid;
        border-width: 2px;
        padding: 1px;
        background: #dfd;
        border-color: green;
        color: green;
}

.BoxRestricted {
        float: right;
        margin-left: 10px;
        border-style: solid;
        border-width: 2px;
        padding: 1px;
        background:#fdd;
        border-color: red;
        color: red;
}

.BoxText {
        clear: both;
}

.CodeText {
        font-family: monospace;
        font-size: 12px;
}

.BoxUl {background: url(/pics/corner_ul.jpg) 0 0 no-repeat}
.BoxUr {background: url(/pics/corner_ur.jpg) 100% 0 no-repeat; padding: 10px}
.BoxLl {background: url(/pics/corner_ll.jpg) 0 100% no-repeat #e68200; width: 20em}
.BoxLr {background: url(/pics/corner_lr.jpg) 100% 100% no-repeat}
.BoxClear {font-size: 1px; height: 1px}


/* Animated orthographic sky ball */

#sky {
  /*background: #fcfcfa;*/
  /*background: #e6e6fa;*/
  position: relative;
  background: #eeeeff;
  width: 100%;
  height: 450px;
  margin-left: 0px;
}

#sphere {
  cursor: move;
}

svg {
  width: 100%;
  height: 450px;
}

.d3title {
  font-size: 20px;
}

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

.fill {
  fill: #eef;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.obs {
  fill: #222;
}

.equator {
  stroke: black;
  stroke-width: 1px;
  fill: none;
}

.meridian {
  stroke: blue;
  stroke-dasharray: 5 5;
  fill: none;
}

.antimeridian {
  stroke: red;
  stroke-dasharray: 5 5;
  fill: none;
}

.hidden {
  display: none;
}

.labels {
  font: 9px sans-serif;
  fill: black;
  opacity: .6;
}

.point{
  opacity: 0;
}

.legend-box {
  cursor: pointer;
}

.tooltip {
  position: absolute;
  text-align: center;
  /*width: 160px;
 *   height: 28px;*/
  padding: 4px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 1px;
  border-radius: 8px;
}

controls {
  width:220px;
  position: absolute;
  padding:10px;
  border: 2px;
}


/* BEGIN CHART.JS */
#chart {
  position: relative;
  background: #eeeeff;
  width: 100%;
  height: auto;
}

text {
  font: 10px sans-serif;
}

.dot {
  stroke: #000;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.label {
  fill: #777;
}

.year.label {
  /*font: 500 196px "Helvetica Neue";*/
  font: 100 40px "Helvetica Neue";
  fill: #ddd;
}

.year.label.active {
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

.legend-box {
  cursor: pointer;
}
/* END CHART.JS */

/* BEGIN CUMUL.JS */
/*
body {
  font: 10px sans-serif;
}
*/

#cumul {
  position: relative;
  background: #eeeeff;
  width: 100%;
  height: auto;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

/*
.x.axis path {
  display: none;
}
*/

.line, .dashed_line, .dotted_line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

/*
#mouse-tracker {
  stroke: #E6E7E8;
  stroke-width: 1px;
  border: 2px;
}
*/


/* END CUMUL.JS */