@font-face {
    font-family: MyriadProLight;
    src: url('fonts/MyriadPro-Light.otf');
}

@font-face {
    font-family: MyriadPro;
    src: url('fonts/MyriadPro-Regular.otf');
}

@font-face {
    font-family: MyriadProBold;
    src: url('fonts/MyriadPro-Bold.otf');
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: MyriadProLight, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
}

#container {
    -webkit-transform: translate3d(0, 0, 0);
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    background-repeat: no-repeat;
}

#container.green {
    background-image: url("images/bg-green.jpg");
}

#container.blue {
    background-image: url("images/bg-blue.jpg");
}

header {
    width: 98%;
    height: 23%;
    padding: 1%;
}

.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;
}

.gradient {
    background:-moz-linear-gradient(
        center top,
        rgb(255, 255, 255) 0%, rgb(204, 220, 228) 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(rgb(255, 255, 255)), to(rgb(204, 220, 228))
    );
}

#headings.transparent, #time.transparent {
    background:-moz-linear-gradient(
        center top,
        rgba(255, 255, 255, 1) 0%, rgba(204, 220, 228, 0.82) 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(255, 255, 255, 1)), to(rgba(204, 220, 228, 0.82))
    );
}

.main.transparent {
    background:-moz-linear-gradient(
        center top,
        rgba(255, 255, 255, 0.5) 0%, rgba(204, 220, 228, 0.5) 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(rgba(255, 255, 255, 0.5)), to(rgba(204, 220, 228, 0.5))
    );
}

#headings {
    -webkit-transform: translate3d(0, 0, 0);
    width: 74%;
    height: 100%;
    margin: 0;
    float: left;
    text-align: center;
}

h1 {
    font-family: MyriadProLight, Arial, Helvetica, sans-serif;
    font-size: 5vw;
    font-weight: normal;
    line-height: 23vh;
    margin: 0;
    width: 100%;
}

h1.blue {
    color: #0F3B66;
}

h1.green {
    color: #094F18;
}

#time {
    width: 25%;
    height: 100%;
    margin: 0;
    float: right;
}

#clock {
    float: left;
    margin: 6vh 0 0 2vw;
}

#timetext {
    text-align: center;
}

.firstline {
    font-size: 4vw;
}

.secondline {
    font-size: 1.25vw;
}

#content {
    width: 98%;
    height: 72%;
    padding: 0 1%;
}

.main {
    -webkit-transform: translate3d(0, 0, 0);
    width: 74%;
    height: 100%;
    margin: 0;
    float: left;
}

.main img {
    -webkit-transform: translate3d(0, 0, 0);
    display: block;
    width: 98%;
    height: 96%;
    margin: 2% 1%;
}

#rightcol > div {
    width: 25%;
    float: right;
    margin: 0 0 1% 0;
}

#rightcol {
    height: 100%;
}

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

#city, #weathericon, #temperature {
    float: left;
    width: 33%;
    text-align: center;
    height: 30%;
    font-size: 3vw;
    line-height: 11vh;
}

#weathericon img {
    width: 100%;
    vertical-align: middle;
}

#temperature {
    color: #FFFFFF;
}

#weather table {
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0 1%;
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    height: 70%;
}

#weather  th {
    color: #888888;
    text-transform: uppercase;
    font-size: 1.5vh;
    letter-spacing: 1px;
    font-weight: lighter;
    text-align: left;
}

#weather tr {
    height: 20%;
}

#weather th:nth-child(1) {
    width: 63%;
}

#weather th:nth-child(2) {
    width: 18%;
}

.tableline {
    height: 6vh;
    background-color: #FFFFFF;
    font-size: 2vw;
    line-height: 6vh;
    background: url("images/separator.gif"), -moz-linear-gradient(
        center top,
        #F0F0F0 0%, #FFFFFF 100%
    );
    background: url("images/separator.gif"), -webkit-gradient(
        linear,
        left top, left bottom,
        from(#F0F0F0), to(#FFFFFF)
    );
    background-repeat: no-repeat;
    background-position: 5vw center, center center;
}

.tableline img {
    vertical-align: middle;
    width: 4vw;
    margin-left: 0.5vw;
}

.tableline span {
    display: inline-block;
}

.tableline span:first-of-type {
    margin-left: 1.5vw;
    width: 7vw;
}

.tableline span:nth-child(3), .tableline span:nth-child(4) {
    width: 5vw;
    text-align: center;
}

#news {
    height: 45%;
    background:-moz-linear-gradient(
        center top,
        #FFFFFF 0%, #DADADA 100%
    );
    background:-webkit-gradient(
        linear,
        left top, left bottom,
        from(#FFFFFF), to(#DADADA)
    );
}

#newsheading {
    height: 25%;
    border-bottom: 1px solid #BFBFBF;
    margin: 0 4%;
    -moz-box-shadow: 0 4px 4px -2px #CCCCCC;
    -webkit-box-shadow: 0 4px 4px -2px #CCCCCC;
    box-shadow: 0 4px 4px -2px #CCCCCC;
    font-size: 2vw;
    line-height: 8vh;
    text-indent: 3%;
    background-image: url("images/idnes.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 2vh;
}

h2 {
    margin: 3% 6% 4% 6%;
    color: #0061B3;
    font-family: MyriadPro, Arial, Helvetica, sans-serif;
    font-size: 2vh;
}

.newsimage {
    height: 20%;
    margin-left: 6%;
}

#news p {
    color: #0061B3;
    margin: 2% 6% 0 6%;
    font-size: 1vw;
}

div #kiwilogo {
    background-image: url("images/kiwilogo.png");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 60%;
    height: 7%;
    margin-top: -0.5%;
}