/*
 * PixInsight Website
 * Main Style Sheet / Updated 20160723
 *
 * Copyright (C) 2014-2016 Pleiades Astrophoto S.L. All Rights Reserved.
 */

/* -------------------------------------------------------------------------- */

/*
 * In case TypeKit fails
@import url( "local-fonts.css" );
 */

/*
 * PixInsight website
 */

@viewport {
   width: device-width;
   zoom: 1.0;
}

html {
   height: 100%;
}
html.wf-loading { /* TypeKit asynchronous load */
   visibility: hidden;
}

body {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   width: 100%;
   height: 100%;
   font-family: proxima-nova,open-sans,Helvetica,Arial,sans-serif;
   font-weight: 400; /* regular */
   font-size: 12pt;
   line-height: 1.25em;
   text-rendering: optimizeLegibility;
   color: #000000;
   background: #ffffff;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: top right;
   background-size: cover;
   hyphens: manual;
   -webkit-hyphens: manual;
   -moz-hyphens: manual;
   -ms-hyphens: manual;
   -o-hyphens: manual;

   /*
    * Fade-in effect on page load.
    * http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load
    */
    -webkit-animation: fadein 2s;
       -moz-animation: fadein 2s;
        -ms-animation: fadein 2s;
         -o-animation: fadein 2s;
            animation: fadein 2s;
}
body.home {
   color: #ffffff;
   background: #202020;
   background-image: none;
   overflow: hidden;
}
body.document {
   background: #ffffff;
}
body.image {
   background-color: #e8e8e8;
}
@media screen and (max-width: 1100px) {
   body {
      font-size: 10pt;
   }
}

/*
 * Fade-in effect on page load.
 * http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load
 */
@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
@-moz-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}
@-ms-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}​
@-o-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}​

:focus {
   outline: 0;
}

a {
   text-decoration: none;
   color: #3333ff;
}
a:visited {
}
a:active {
}
a:hover {
   text-decoration: underline;
}
#dark a {
   color: #a8a8ff;
}

strong, b {
   font-weight: 700; /* bold */
}

em, i {
   font-style: italic;
}

p {
   margin-top: 1.0em;
   margin-bottom: 1.0em;
   line-height: 1.25em;
}

li {
   margin-top: 0.25em;
   margin-bottom: 0.25em;
}

ul, ol {
   margin-top: 1.1em;
   margin-bottom: 1.1em;
}
ul {
   list-style-type: square;
}
ul.unindented, ol.unindented {
   padding-left: 1em;
}
ul.noVertSpace, ol.noVertSpace {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}

h1 {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 36pt;
   font-weight: 300; /* light */
   line-height: 1.2em;
   letter-spacing: -0.05em;
   margin-top: 0;
   margin-bottom: 0.5em;
   color: #0066ff;
}
h2 {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 16pt;
   font-weight: 400; /* regular */
   line-height: 1.2em;
   margin-top: 1.5em;
   color: #0066ff;
}
h3 {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 13pt;
   font-weight: 400; /* regular */
   line-height: 1.2em;
   color: #0066ff;
}
#dark h1, #dark h2, #dark h3 {
   color: #9BC3FF;
}
h4 {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 12pt;
   font-weight: 600; /* semi-bold */
   line-height: 1.2em;
   color: #990000;
}
h5 {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 12pt;
   font-weight: 600; /* semi-bold */
   line-height: 1.2em;
   color: #660000;
}
@media screen and (max-width: 1100px) {
   h1 {
      font-size: 30pt;
   }
   h2 {
      font-size: 13pt;
   }
   h3 {
      font-size: 11pt;
   }
   h4 {
      font-size: 10pt;
   }
   h5 {
      font-size: 10pt;
   }
}

img {
   border: none;
}
img.block {
   display: block;
}
/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio, canvas, img, video {
   vertical-align: middle;
}

hr {
   display: block;
   border: none;
   background: #969696;
   color: #969696;
   padding: 0;
   width: 100%;
   height: 1.5pt;
}
hr.separator {
   margin-top: 2em;
   margin-bottom: 2em;
   background: #c0c0c0;
   color: #c0c0c0;
}

code {
   font-family: DejaVu Sans Mono,Courier New,Courier,monospace;
}
p code {
   margin: 5px 0 5px 0;
   padding: 4px 8px 4px 4em;
}
p.codeBox {
   font-family: DejaVu Sans Mono,Courier New,Courier,monospace;
   border: 2px dashed #cccccc;
   margin: 5px 0 5px 0;
   padding: 4px 8px 4px 1em;
}
pre.code {
   border: 2px dashed #cccccc;
   margin: 5px 0 5px 0;
   padding: 4px 8px 4px 2em;
}
div.code {
   border: 2px dashed #cccccc;
   margin: 5px 0 5px 0;
   padding: 12px 8px 12px 2em;
}

form {
   background: rgba( 0, 0, 0, 0.025 );
   border: 1pt solid #c0c0c0;
   padding: 1em;
}
input, textarea, select {
   border: 1pt solid #a0a0a0;
}
textarea { /* allow only vertical resizing of textareas */
   resize: vertical;
}

table {
   border-collapse: collapse;
}
.data tr:nth-child(odd) {
   background-color: #ebebeb;
}
.data tr:nth-child(even) {
   background-color: #fbfbfb;
}
.data caption {
   color: #ffffff;
   background-color: #a0a0a0;
   border-top: 1px solid #a0a0a0;
   border-left: 1px solid #a0a0a0;
   border-right: 1px solid #a0a0a0;
   border-bottom: 1px solid #eeeeee;
   font-size: 90%;
   font-style: normal;
   text-align: center;
   padding: 0.15em;
}
.data th {
   color: #ffffff;
   background-color: #a0a0a0;
   border: 1px solid #eeeeee;
   border-top: 1px solid #a0a0a0;
   font-size: 90%;
   text-align: center;
   padding-top: 0.30em;
   padding-bottom: 0.30em;
   padding-left: 0.55em;
   padding-right: 0.55em;
}
.data th:first-child {
   border-left: 1px solid #a0a0a0;
}
.data th:last-child {
   border-right: 1px solid #a0a0a0;
}
.data td {
   border: 1px solid #a0a0a0;
   padding-top: 0.50em;
   padding-bottom: 0.50em;
   padding-left: 0.55em;
   padding-right: 0.55em;
}
.data p {
   display: block;
}
.data p:nth-child(1), .data p:first-of-type {
   margin-top: 0;
   padding-top: 0;
}
.data p:nth-last-child(1), .data p:last-of-type {
   margin-bottom: 0;
   padding-bottom: 0;
}

.monospaced {
   font-family: DejaVu Sans Mono,Courier New,Courier,monospace;
   font-size: 10pt;
}

.small {
   font-size: 85%;
}
.tiny {
   font-size: 75%;
}

.firstLine {
   margin-top: 0;
}
.lastLine {
   margin-bottom: 0;
}

.center {
   text-align: center;
}
img.center {
   display: block;
   margin: 0 auto;
}

.clearfix:after {
   content: '';
   display: block;
   clear: both;
}

.spacedItems li {
   margin-top: 1em;
}
.spacedItems li:first-child {
   margin-top: 0;
}

.pageIntro {
   font-family: futura-pt,open-sans,Helvetica,Arial,sans-serif;
   font-weight: 300; /* light */
   font-size: 16pt;
   line-height: 1.15em;
   /*
   -webkit-text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
   -moz-text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
   text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
   */
}
.pageIntro strong {
   font-weight: 500; /* medium */
}
@media screen and (max-width: 1100px) {
   .pageIntro {
      font-size: 13pt;
   }
}

.figure {
   border: 1.5pt solid #cccccc;
   margin: 0;
   padding: 6pt;
   background-color: #eeeeee;
}
.figure_panel {
   border-bottom: 1.5pt solid #cccccc;
   padding: 0;
   background-color: #eeeeee;
}
.figure_caption {
   font-size: 85%;
}
.figure_credits {
   font-size: 80%;
}
.figure_padded {
   padding-left: 1em;
   padding-right: 1em;
}

.arrowLeft {
   width: 0;
   height: 0;
   border-left: 0;
   border-top: 0.4em solid transparent;
   border-right: 0.4em solid;
   border-bottom: 0.4em solid transparent;
   content: "";
   display: inline-block;
   vertical-align: baseline;
   -webkit-transform: rotate(360deg);
}
.arrowUp {
   width: 0;
   height: 0;
   border-left: 0.4em solid transparent;
   border-top: 0;
   border-right: 0.4em solid transparent;
   border-bottom: 0.4em solid;
   content: "";
   display: inline-block;
   vertical-align: baseline;
   -webkit-transform: rotate(360deg);
}
.arrowRight {
   width: 0;
   height: 0;
   border-left: 0.4em solid;
   border-top: 0.4em solid transparent;
   border-right: 0;
   border-bottom: 0.4em solid transparent;
   content: "";
   display: inline-block;
   vertical-align: baseline;
   -webkit-transform: rotate(360deg);
}
.arrowDown {
   width: 0;
   height: 0;
   border-left: 0.4em solid transparent;
   border-top: 0.4em solid;
   border-right: 0.4em solid transparent;
   border-bottom: 0;
   content: "";
   display: inline-block;
   vertical-align: baseline;
   -webkit-transform: rotate(360deg);
}

.documentIndexItem {
   margin-top: 20pt;
}
.documentIndexItem div:first-of-type {
   margin-top: 0;
}
.documentIndexItem div:after { /* clearfix */
   content: '';
   display: block;
   clear: both;
}
.documentIndexImage {
   float: left;
   width: 110pt;
   height: 110pt;
   border: 1px solid #a0a0a0;
   min-width: 150px;
   min-height: 150px;
   margin: 0;
   margin-right: 8pt;
}

.documentIndexText {
   margin-left: 120pt;
}
.documentIndexText p:first-of-type {
   margin-top: 0;
}
.documentIndexText p:last-of-type {
   margin-bottom: 0;
}

#logo {
   width: 100%;
   background: rgba( 0, 0, 0, 0.80 );
}
#logo img {
   margin-top: 3pt;
   margin-left: 3pt;
}
.home #logo {
   background: rgba( 0, 0, 0, 0.35 );
}

#breadcrumbs {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 10pt;
   font-variant: small-caps;
   margin-top: 12pt;
   margin-left: 12pt;
}
#breadcrumbs ul {
   margin: 0;
   padding: 0;
}
#breadcrumbs ul li {
   display: inline;
   list-style-type: none;
}
#breadcrumbs > ul > li > a {
   display: inline;
   text-decoration: none;
   padding: 4pt;
}
#breadcrumbs > ul > li:hover > a {
   background-color: #c0c0c0;
   color: #000000;
}
.refDocWeb #breadcrumbs {
   margin-left: -12pt;
   padding-left: 0;
}

#content {
   margin: 0 auto;
   padding: 24pt 24pt;
   width: 816pt;
}
@media screen and (max-width: 1100px) {
   #content {
      padding: 16pt 16pt;
      max-width: 850px;
   }
}

#article {
}
#article:after { /* clearfix */
   content: '';
   display: block;
   clear: both;
}

#toc {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   width: 180pt;
   padding: 10pt;
}
@media screen and (max-width: 1100px) {
   #toc {
      padding: 8pt 8pt;
      max-width: 200px;
   }
}

#toc .tocTitle {
   font-family: futura-pt,Helvetica,Arial,sans-serif;
   font-size: 12pt;
   font-weight: 400; /* book */
   margin: 0;
   padding: 4pt;
}
#toc ul {
   margin: 0;
   padding: 0;
}
#toc ul li {
   display: block;
   list-style-type: none;
}
#toc > ul > li > a {
   display: block;
   text-decoration: none;
   font-size: 10pt;
   margin: 0;
   padding: 4pt;
}
#toc > ul > li > a:hover {
   background-color: #c0c0c0;
   color: #000000;
}
.refDocWebIndex #toc {
   width: 100%;
   padding: 0;
   padding-left: 16pt;
}
.refDocWebIndex #toc > ul > li {
   padding: 6pt;
}
.refDocWebIndex #toc > ul > li > a {
   font-size: 12pt;
   margin: 0;
   padding: 2pt;
}
.refDocWebIndex #toc > ul > li > p {
   font-size: 10pt;
   margin: 0;
   padding: 2pt;
}

#leftColumn {
   float: left;
   width: 590pt;
   min-width: 800px;
}
@media screen and (max-width: 1100px) {
   #leftColumn {
      min-width: 0;
      max-width: 600px;
   }
   #leftColumn img {
      max-width: 600px;
   }
}

#rightColumn {
   float: right;
   border-left: 2pt solid gray;
   border-left-color: #c0c0c0;
   min-height: 250pt;
}
#singleColumn {
   width: 600pt;
   min-width: 900px;
}
@media screen and (max-width: 1100px) {
   #singleColumn {
      min-width: 0;
      max-width: 800px;
   }
   #singleColumn img {
      max-width: 800px;
   }
}

#videoHD720p {
   width: 1280px;
   margin: 0 auto;
   padding: 24pt 0;
}

#footer {
   font-family: open-sans,Helvetica,Arial,sans-serif;
   font-size: 9pt;
   padding: 0.5em 1.5em;
   background: #d0d0d0;
}
#footer #logo {
   float: left;
   height: 24pt;
   width: auto;
   margin-top: 8pt;
   margin-right: 5pt;
   background: transparent;
}
.refDocWeb #footer {
   padding: 0;
   background: transparent;
}

.collapsible {
   display: block;
   background: rgba( 0, 0, 0, 0.025 );
   border: 1pt solid #c0c0c0;
   -webkit-transition: opacity 0.5s ease-out;
   -moz-transition: opacity 0.5s ease-out;
   -ms-transition: opacity 0.5s ease-out;
   -o-transition: opacity 0.5s ease-out;
   transition: opacity 0.5s ease-out;
}
.collapsible[data-collapsed="1"] {
   opacity: 0;
   width: 0;
   height: 0;
   margin: 0;
   padding: 0;
   overflow: hidden;
}
.collapsible[data-collapsed="0"] {
   opacity: 1;
   width: auto;
   height: auto;
   margin-top: 0.25em;
   margin-bottom: 0.75em;
   padding: 1em;
   overflow: auto;
}
.collapsible p:first-of-type {
   margin-top: 0;
}
.collapsible p:last-of-type {
   margin-bottom: 0;
}

.collapsibleLink {
   font-weight: 500; /* medium */
   margin-bottom: 0.25em;
}

@media print {

   tr, img {
      page-break-inside: avoid;
   }

   img {
      max-width: 100% !important;
   }

   @page {
      margin: 0.5cm;
   }

   p, h2, h3 {
      orphans: 3;
      widows: 3;
   }

   h2, h3 {
      page-break-after: avoid;
   }
}

#IEWarning {
   background: #ffff00;
   border: 2px solid #000000;
   color: #000000;
   font-family: Arial,sans-serif;
   padding: 30px 30px;
   position: absolute;
   left: 0;
   top: 90px;
   z-index: 10;
   width: 300px;
   visibility: hidden;
}