/* set global styles on the entire presentation */
html {
    background-color: #222;
    font-size: 200%;
    font-family: 'Source Sans Pro', sans-serif;
    position: relative;
}

html:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url('../img/space.png') 0 0 repeat;
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
}


/****************************************************************** footnote */
#footnote {
    z-index: 10;
    position: absolute;
    bottom: 0em;
    right: 0em;
}
#footnote svg text {
    font-size: 60%;
    fill: #666;
    font-weight: bold;
    text-anchor: end;

    -webkit-transition: fill 1s;
       -moz-transition: fill 1s;
        -ms-transition: fill 1s;
         -o-transition: fill 1s;
            transition: fill 1s;
}
#footnote svg text.backer {
    stroke: #fff;
    stroke-width: 3px;
    opacity: 1;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}
#footnote svg text.link {
    text-decoration: underline;
}
#footnote svg text.header {
    font-size: 75%;
}
body[class*="caveat"] #footnote svg text {
    fill: #999;

    -webkit-transition: fill 1s;
       -moz-transition: fill 1s;
        -ms-transition: fill 1s;
         -o-transition: fill 1s;
            transition: fill 1s;
}
body[class*="caveat"] #footnote svg text.backer {
    opacity: 0;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}

/*************************************************************** title slide */
#title {
    position: relative;
}
#title #credits {
    position: absolute;
    bottom: 150px;
    left: 20px;
    color: #333;
    display: none;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    border: 5px solid #666;
}
#title h1.title {
    font-size: 1em;
}
#title .author {
    font-size: 70%;
    text-align: right;
}
#title #credits a {
    color: #333;
    text-decoration: none;
}
#title #credits a:hover {
    color: #377eb8;
}
.impress-on-title .category text {
    fill: #999;
}
.impress-on-title #title #credits {
    display: block;
}
#ocean {
    position: absolute;
    top: -500px;
    left: -500px;
    z-index: -1;
    width: 2500px;
    height: 2000px;
    background-image: url('../img/ocean-small.png');
}

/* give user hint that map is clickable */
.category, .details {
    cursor: pointer;
}

/************************************************************* caveat slides */
#caveat-toolz, #caveat-open-source {
    z-index: -1;
    color: #eee;

    opacity: 0;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;

    width: 500px;
}
#caveat-toolz p, #caveat-open-source p {
    margin-bottom: 1em;
}
#caveat-toolz a, #caveat-open-source a {
    color: #377eb8;
    text-decoration: none;
}
#caveat-toolz a:hover, #caveat-open-source a:hover {
    text-decoration: underline;
}

/* make the text on these elements available */
#caveat-toolz.active {
    opacity: 1;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}

#caveat-open-source.active {
    opacity: 1;

    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
        -ms-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
}

/************************************************** styling for list headers */
.category svg text {
    font-size: 75%;
    fill: #333;
    text-anchor: middle;
    font-weight: bold;
}
.category svg text.backer {
    stroke: white;
    stroke-width: 3px;
}

/************************************************ styling for lists of tools */
.details {
    width: 450px;
    margin: 10px;
    height: 650px;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    border: 5px solid #666;
    color: #333;
}
.details h2 {
    text-align: center;
    padding: 15px;
    background-color: #666;
    color: #eee;
}
.details .tool {
    margin-top: 0.5em;
    padding-left: 15px
}
.details i.fa {
    opacity: 0;
    margin-left: 5px;
    margin-right: 5px;
}
.details a {
    color: #333;
    text-decoration: none;
}
.details a:hover {
    color: #377eb8;
}
.details a i.fa {
    opacity: 1;
}
.details span {
    padding-left: 0.5em;
}
.details {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="acquisition"] .details[id^="acquisition"] {
    opacity: 0.3;
    background-color: rgba(255, 255, 255, 0);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="acquisition"] .details[id^="acquisition"].active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}

body[class*="web"] .details[id^="web"] {
    opacity: 0.3;
    background-color: rgba(255, 255, 255, 0);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="web"] .details[id^="web"].active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}

body[class*="storage"] .details[id^="storage"] {
    opacity: 0.3;
    background-color: rgba(255, 255, 255, 0);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="storage"] .details[id^="storage"].active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}

body[class*="analysis"] .details[id^="analysis"] {
    opacity: 0.3;
    background-color: rgba(255, 255, 255, 0);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="analysis"] .details[id^="analysis"].active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}

body[class*="visualization"] .details[id^="visualization"] {
    opacity: 0.3;
    background-color: rgba(255, 255, 255, 0);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="visualization"] .details[id^="visualization"].active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}

body[class*="organization"] .details[id^="organization"] {
    opacity: 0.3;
    background-color: rgba(255, 255, 255, 0);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
body[class*="organization"] .details[id^="organization"].active {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 5;

    -webkit-transition: opacity 1s, background-color 1s;
       -moz-transition: opacity 1s, background-color 1s;
        -ms-transition: opacity 1s, background-color 1s;
         -o-transition: opacity 1s, background-color 1s;
            transition: opacity 1s, background-color 1s;
}
