@font-face {
    font-family: MyriadProRegular;
    src: url('fonts/MyriadPro-Regular.otf');
}
/**/
html {
    width: 100%;
    height: 100%;
    
}

body {
    margin: 0;
    padding: 0;
    font-family: MyriadProRegular, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

#container {
    width: 100%;
    height: 100%;
    /*padding: 10px;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.tile {
    border: 1px solid white;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -moz-box-shadow: 0 0 10px #3C3C3C;
    -webkit-box-shadow: 0 0 10px #3C3C3C;
    box-shadow: 0 0 10px #3C3C3C;
}

.soft {
    -moz-box-shadow: 0 0 10px #A4A4A4;
    -webkit-box-shadow: 0 0 10px #A4A4A4;
    box-shadow: 0 0 10px #A4A4A4;
}

#weather {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
        center top,
        #9AD6F6 0%, #FFFFFF 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(#9AD6F6), to(#FFFFFF)
    );
}


#weather.green {
    background: -moz-linear-gradient(
            center top,
            #fff 0%, #72b666 100%
    );
    background: -webkit-gradient(
            linear,
            left top, left bottom,
            from(#fff), to(#72b666)
    );
}


#weather.red {
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(228, 49, 50, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(228, 49, 50, 0.82))
    );
}

#weather.grey {
    background:-moz-linear-gradient(
            center bottom, #E3E3E3 0%, #FFFFFF 100%
    );
    background:-webkit-gradient(
            linear,
            left bottom, left top,
            from(#E3E3E3), to(#FFFFFF)
    );
}

#weather.yellow {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(250, 250, 145, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(250, 250, 145, 0.82))
    );
}

#weather.white {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(250, 250, 250, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(250, 250, 250, 0.82))
    );
}


#weather.black {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0.82))
    );
}


#weather.fuchsia {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(195, 85, 195, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(195, 85, 195, 0.82))
    );
}


#weather.silver {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(227, 228, 229, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(227, 228, 229, 0.82))
    );
}


#weather.teal {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(24, 167, 181, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(24, 167, 181, 0.82))
    );
}


#weather.purple{
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(238, 130, 238, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(238, 130, 238, 0.82))
    );
}


#weather.maroon{
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(195, 33, 72, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(195, 33, 72, 0.82))
    );
}


#weather.aqua{
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(0, 255, 255, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(0, 255, 255, 0.82))
    );
}


#weather.lime {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(158, 253, 56, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(158, 253, 56, 0.82))
    );
}


#weather.navy {
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(18, 10, 143, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(18, 10, 143, 0.82))
    );
}


#weather.olive{
    width: 100%;
    height: 100%;
    background:-moz-linear-gradient(
            center top,
            rgba(255, 255, 255, 1) 0%, rgba(154, 185, 115, 0.80) 100%
    );
    background:-webkit-gradient(
            linear,
            left top, left bottom,
            from(rgba(255, 255, 255, 1)), to(rgba(154, 185, 115, 0.82))
    );
}




#top-wrap {
    width: 100%;
    height: 28%;
}

#city-area, #weathericon-area, #temp-area {
    float: left;
    width: 33%;
    height: 100%;
}

#weathericon-area {
    width: 34%;
}

#city-wrap, #weathericon-wrap, #temp-wrap {
    display: table;
    width: 100%;
    height: 100%;
}

#city, #weathericon, #temperature {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
}

#weathericon img {
    height: 100%;
}

/*#temperature {
    color: #FFFFFF;
}*/

#weather #table {
    height: 70%;
    width: 98%;
    margin: 0 1%;
    float: left;
}

.firstline {
    height: 8%;
    margin: 0;
    color: #616161;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: lighter;
}

.firstline span {
    display: block;
    float: left;
    width: 20%;
    text-align: center;
    line-height: 100%;
}

.firstline span:nth-of-type(1) {
    margin-left: 53%;
}

.tableline {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1% 0;
    height: 29%;
    background-color: #FFFFFF;
    background: url("images/separator.png"), -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, 0.2) 0%, rgba(220, 220, 220, 0.2) 100%
    );
    background: url("images/separator.png"), -webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(220, 220, 220, 0.2)), to(rgba(255, 255, 255, 0.2))
    );
    background-repeat: no-repeat;
    background-position: 23% center, center center;
    background-size: 1px 75%, auto auto;
    opacity: 0.9;
    filter: alpha(opacity=60);
}

.tableline .img-wrap {
    width: 17%;
    padding: 0 3%;
    float: left;
    display: block;
    text-align: center;
}

.tableline img {
    height: 90%;
}

.tableline span {
    display: block;
    float: left;
}

.tableline span:first-of-type {
    padding-left: 3%;
    width: 30%;
}
.tableline span:nth-of-type(2), .tableline span:nth-of-type(3) {
    width: 20%;
    text-align: center;
}