body {
	background-color: #efefef;
}

#wrapper {
    margin: 100px auto;
    text-align: center;
    width: 600px;
}

#wrapper p,
#wrapper span,
#wrapper h1 {
    color: #555;
    font-family: helvetica neue, arial, sans-serif;
}

#wrapper h1 {
    font-size: 40px;
}

#fourohfour {
    margin: 20px 0 30px;
}

#wrapper span,
#wrapper h1 {
    font-weight: bold;
}

#wrapper .four {
    font-size: 150px;
}

#compass {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background-image: -webkit-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: -moz-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: -ms-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: -o-linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    background-image: linear-gradient(-45deg, #fff 50%, #f9f9f9 50%);
    border: 25px solid #AAA;
    border-left-color: #B4B4B4;
    border-top-color: #B4B4B4;
    display: inline-block;
    height: 115px;
    margin: 0 15px;
    position: relative;
    width: 115px;
    vertical-align: bottom;
    
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

#compass span {
    color: #8bc347;
    font-size: 20px;
}

#needle {
    background: #eee;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4YmMzNDciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background-image: -webkit-linear-gradient(top, #8bc347 50%, #eee 50%);
    background-image: -moz-linear-gradient(top, #8bc347 50%, #eee 50%);
    background-image: -ms-linear-gradient(top, #8bc347 50%, #eee 50%);
    background-image: -o-linear-gradient(top, #8bc347 50%, #eee 50%);
    background-image: linear-gradient(to bottom, #8bc347 50%, #eee 50%);
    filter: none;
    margin: -25px auto 0;
    height: 115px;
    width: 10px;
    
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#wrapper p {
    color: #888;
    line-height: 1.5em;
    opacity: 0;
}

#wrapper #fourohfour + p {
    margin-top: 40px;
}

#wrapper a {
    color: #8bc347;
    font-weight: bold;
    text-decoration: none;
}

#wrapper a:hover {
    text-decoration: underline;
}

.fadein {
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -ms-transition: all .8s ease-out;
}