body {
    box-sizing: border-box;
    padding: 50px 50px 50px 80px;
    overflow: auto !important;
    user-select: text;
    line-height: 1.4;
}

h1 {
    font-size: 36px;
    margin: 0 0 20px;
    padding: 10px 30px;
    color: #fff;
    font-weight: normal;
    display: inline-block;
    width: auto;
    background-color: #DA1A32;
    position: relative;
    left: -30px;
}

p {
    line-height: 1.4;
}

h2 {
    color: #999;
    font-size: 18px;
    margin: 0 0 10px;
    padding: 0;
}

.tiles {
    margin-top: 20px;
    margin-bottom: 30px;
    user-select: none;
}

.tile-group {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
}

.tile-group h2 { margin-bottom: 10px; }

.tile {
    box-sizing: border-box;
    display: inline-block;
    width: 140px;
    height: 125px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    border-width: 5px;
    position: relative;
    text-decoration: none;
    border-style: solid;
    transition: box-shadow 150ms linear, border 150ms linear;
}

.tile .icon {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 48px;
}

.tile .text {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 18px;
    transition: bottom 150ms linear, right 150ms linear;
}

.tile-group-staff .tile { color: #fff; }

.tile-group-staff .tile-economy {
    background-color: #f57f29;
    border-color: #f57f29;
}

.tile-group-staff .tile-community {
    background-color: #00a1e0;
    border-color: #00a1e0;
}

.tile-group-staff .tile-forecast {
    background-color: #3CB14A;
    border-color: #3cb14a;
}

.tile-group-staff .tile-admin {
    background-color: #000;
    color: #DA1A32;
    border-color: #DA1A32;
}

.tile-group-public .tile-economy { color: #f57f29; }

.tile-group-public .tile-community { color: #00a1e0; }

.tile-group-public .tile-investment { color: #53308C; }

.tile-group-public .tile-forecast { color: #3CB14A; }

.tile-group-tools .tile-mapbuilder { color: #ED0080; }

.tile:hover {
    -webkit-box-shadow: 0 0 10px 2px rgba(102, 102, 102, 1);
    -moz-box-shadow: 0 0 10px 2px rgba(102, 102, 102, 1);
    box-shadow: 0 0 10px 2px rgba(102, 102, 102, 1);
    border-width: 8px;
}

.tile:hover .text {
    bottom: 2px;
    right: 2px;
}

.row { clear: both; }

.row .news {
    float: left;
    width: 40%;
    margin-right: 50px;
    min-width: 400px;
    position: relative;
}

.row .about {
    float: left;
    width: 400px;
    font-size: 14px;
}

.row .about a { color: #da1a32; }

.remplanlogo {
    position: relative;
    width: 140px;
    height: 51px;
}

.remplanlogo .overlay {
    width: 140px;
    height: 51px;
    position: absolute;
    background: url(/Content/img/header/remplan-logo-nobars.png) no-repeat;
    pointer-events: none;
    margin-top: 1px;
}

.remplanlogo .bar {
    position: absolute;
    bottom: 5px;
    width: 18px;
    background: #DA1A32;
    -webkit-transition: margin-top 200ms ease-out, height 200ms ease-out;
    transition: margin-top 200ms ease-out, height 200ms ease-out;
}

.remplanlogo .bar-0 {
    left: 1px;
    height: 34px;
}

.remplanlogo .bar-0:hover { height: 40px; }

.remplanlogo .bar-1 {
    left: 21px;
    height: 21px;
}

.remplanlogo .bar-1:hover { height: 27px; }

.remplanlogo .bar-2 {
    left: 41px;
    height: 27px;
}

.remplanlogo .bar-2:hover { height: 33px; }

.remplanlogo .bar-3 {
    left: 61px;
    height: 34px;
}

.remplanlogo .bar-3:hover { height: 40px; }

.remplanlogo .bar-4 {
    left: 81px;
    height: 22px;
}

.remplanlogo .bar-4:hover { height: 28px; }

.remplanlogo .bar-5 {
    left: 101px;
    height: 31px;
}

.remplanlogo .bar-5:hover { height: 37px; }

.remplanlogo .bar-6 {
    left: 121px;
    height: 23px;
}

.remplanlogo .bar-6:hover { height: 29px; }


.newsfeed-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
}

.news h4 {
    color: #dd1a32;
    margin: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.4;
}

.news a { color: #dd1a32; }