@import url(//fonts.googleapis.com/css?family=Oxygen:400,300,700&subset=latin,latin-ext);

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Oxygen';
    overflow: hidden;
}

#bg {
    height: 4000px;
    left: -2200px;
    position: absolute;
    top: -2200px;
    width: 4200px;
}

.logo {
    font-weight: 400;
    font-size: 30px;
    color: white;
    padding: 20px;
    position: relative;
    left: -360px;
    top: -170px;
}

.error_500 .logo {
    font-weight: 400;
    font-size: 30px;
    color: white;
    padding: 20px;
    position: relative;
    left: -360px;
    top: -50px;
}

.message {
    position: absolute;
    padding: 170px 10px 0 360px;
    background-image: url("img/error.png");
    background-repeat: no-repeat;
    background-position: left 90px;
}

.error_500 .message {
    padding: 50px 0 0 360px;
    margin: 0 400px 0 0;
    background-image: url("img/scared-bug.png");
    background-repeat: no-repeat;
    background-position: 150px 250px;
}

.message ol li {
    margin: 10px 0;
}

h1 {
    font-weight: 300;
    font-size: 48px;
    color: white;
    margin: 0;
}

p {
    font-size: 18px;
    font-weight: 400;
    line-height: 19px;
}

.button_container {
    padding: 10px 0 100px 4px;
}

a.button {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-user-select: none;
    background-color: #515151;
    border-color: #515151;
    border-image: none;
    border-style: none solid;
    border-width: medium 2px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-table;
    /*font-family: 'Open Sans';*/
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    min-width: 70px;
    opacity: 1;
    padding: 6px 8px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

a.button:hover {
    background-color: #181A1D;
    border-color: #181A1D;
    opacity: 1;
}

.error_404 { background: #8fd0ec; }
.error_500 { background: #a8a6a6; }

.error_404 { color: #2c71b7; }
.error_500 { color: white; }

.error_404 #bg {
    background: #8fd0ec; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #3a96cf 17%, #bceffb 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(17%,#3a96cf), color-stop(100%,#bceffb)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #3a96cf 17%,#bceffb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #3a96cf 17%,#bceffb 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #3a96cf 17%,#bceffb 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #3a96cf 17%,#bceffb 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a96cf', endColorstr='#bceffb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.error_500 #bg {
    background: #a8a6a6; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #8f8f8f 17%, #b5b2b2 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(17%,#8f8f8f), color-stop(100%,#b5b2b2)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #8f8f8f 17%,#b5b2b2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #8f8f8f 17%,#b5b2b2 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #8f8f8f 17%,#b5b2b2 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #8f8f8f 17%,#b5b2b2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8f8f8f', endColorstr='#b5b2b2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.error_404 .logo { color: white; }
.error_500 .logo { color: #515151; }