/********************
Copyright 2014-2015 Amazon.com, Inc. or its affiliates. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with the License. A copy of the License is located at

    http://aws.amazon.com/apache2.0/

or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Note: Other license terms may apply to certain, identified software files contained within or
distributed with the accompanying software if such terms are included in the directory containing
the accompanying software. Such other license terms will then apply in lieu of the terms of the
software license above.
 *******************/

$icon-font-path: '../fonts/';

// bower:scss
@import "bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower

body {
    margin-bottom: 70px;
    background: 0 0;
    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color: #fff;
    background: url(../images/bg.png) center center no-repeat fixed;
    background-size: cover
}

h1 {
    font-size: 20px
}

h2 {
    font-size: 1pc;
    font-weight: 200;
    margin-top: 6px;
}

#logo-title h1 {
    padding-top: 10px
}

#bg-text, #flow-container h1, #left, #legend, #main, #twitter {
  position:absolute;
}

.legend-row {
  clear:both;
}

.unittype {
  position:absolute;
  right: 10px;
  top: 4px;
  width: 140px;
  height: 40px;
  z-index: 144;
}

#left {
    background: rgba(15, 15, 15, .8);
    border-right: 2px solid #000;
    min-width: 420px
}

#legend {
    min-width: 25pc;
    padding: 20px 40px;
    z-index: 22
}

#left, #legend {
  left: 0;
top: 0;
height: 100%;
}

#twitter {
    right: 20px;
    top: 0;
    height: 100%;
    width: 220px
}

.legend-row {
    display: block;
    border-top: 2px solid #333;
    padding-top: 5px;
    z-index: 30
}

.legend-row .dht>div,
.legend-row>div {
    float: left;
    margin-left: 10px
}

.legend-row .dht {
    float: right!important
}

.legend-row .dht .humidity,
.legend-row .dht .temp,
.legend-row .location {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0
}

.legend-row .location {
    max-width: 140px
}

.placeholder-title {
    font-size: 9pt;
    margin: 0;
    padding: 0;
    display: block;
    color: #999;
    font-weight: 800
}

.colorblock {
    width: 36px;
    height: 36px;
    margin: 4px;
    font-size: 9pt;
    font-weight: 200;
    border: 2px solid #000
}

.short {
    padding: 4px
}

.twitter {
    margin: 5px
}

.logo {
    width: 75pt;
    float: left
}

#main {
    top: 20px;
    right: 260px;
    z-index: -1
}

.twitter-timeline {
    height: 100%
}

#sound-container h1 {
    position: absolute;
    top: 55%;
    right: 20px
}

#flow-container h1 {
    top: 20px;
    right: 20px
}

.graph h1 {
    font-size: 24px;
    font-weight: 700
}

#bg-text {
    left: -150px;
    bottom: 15pc;
    z-index: 11
}

.vertical-text {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    font-weight: 700;
    color: #333;
    margin: 0;
    padding: 0;
    font-size: 40px;
    z-index: 22;
    line-height: 70px
}

.vertical-text .acronym {
    font-size: 90pt;
    margin: 0;
    padding: 0;
    display: block
}

.vertical-text .regular {
    font-size: 40px;
    margin: 0;
    padding: 0;
    display: block
}

.unset {
    opacity: 0.3;
}

#twitter {
  right: 20px;
  top: 0;
  height: 100%;
  width: 220px;
}
@media only screen and (max-width:1480px) {
    #left {
        max-width: 25pc
    }
    #legend {
        min-width: 380px;
        padding: 10px
    }
    #main {
        right: 260px
    }
    #twitter {
        right: 20px
    }
    .graph h1 {
        font-size: 20px;
        font-weight: 700
    }
}

@media only screen and (max-width:800px) {
    #bg-text,
    #twitter {
        display: none
    }
    #main {
        top: 20px;
        width: 100%;
        right: 0
    }
    .graph h1 {
        font-size: 20px
    }
    #legend {
        background: rbga(0, 0, 0, .2);
        height: auto
    }
}

@media only screen and (max-width:500px) {
    #left,
    #legend,
    #main {
        position: static
    }
    #bg-text {
        display: none
    }
    #main {
        margin-top: 70px;
        border-top: 2px solid #333
    }
    .graph h1 {
        font-size: 20px
    }
    #flow-container h1,
    #sound-container h1 {
        position: static;
        padding: 10px
    }
    #left {
        height: auto
    }
    #legend {
        display: block;
        margin: 0;
        border: none;
        background: 0 0;
        width: 100%
    }
}
