@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600);.compass1:before,.compass2:before{content:"N";font-size:12px;top:-2px}.compass .direction p,.compass1:before,.compass2:before{text-align:center;font-weight:700}.compass{display:block;width:40px;height:40px;border-radius:100%;box-shadow:0 0 2px rgba(0,0,0,.4);position:relative;font-family:Dosis;color:#555;text-shadow:1px 1px 1px #fff}.compass .arrow,.compass .direction,.compass .direction p{width:100%;height:100%;display:block}.compass1:before{position:none;float:left;width:100%}.compass2:before{position:absolute;width:100%}.compass .direction{background:#f2f6f5;background:-moz-linear-gradient(top,#f2f6f5 0,#cbd5d6 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f2f6f5),color-stop(100%,#cbd5d6));background:-webkit-linear-gradient(top,#f2f6f5 0,#cbd5d6 100%);background:-o-linear-gradient(top,#f2f6f5 0,#cbd5d6 100%);border-radius:100%}.compass .direction p{margin:-25px 0 0;padding:0;position:absolute;top:50%;left:0;line-height:50px;font-size:20px}.compass .direction p span{display:block;line-height:normal;margin-top:-24px;font-size:11px;text-transform:uppercase;font-weight:400}.compass .arrow{position:absolute;top:0}.compass .arrow:after{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid red;position:absolute;top:-6px;left:50%;margin-left:-5px;z-index:99}.compass .arrow.nne{transform:rotate(22.5deg)}.compass .arrow.ne{transform:rotate(45deg)}.compass .arrow.ene{transform:rotate(67.5deg)}.compass .arrow.e{transform:rotate(90deg)}.compass .arrow.ese{transform:rotate(112.5deg)}.compass .arrow.d120{transform:rotate(120deg)}.compass .arrow.se{transform:rotate(135deg)}.compass .arrow.sse{transform:rotate(157.5deg)}.compass .arrow.s{transform:rotate(180deg)}.compass .arrow.ssw{transform:rotate(202.5deg)}.compass .arrow.sw{transform:rotate(-135deg)}.compass .arrow.wsw{transform:rotate(-114.5deg)}.compass .arrow.w{transform:rotate(-90deg)}.compass .arrow.wnw{transform:rotate(-69.5deg)}.compass .arrow.nw{transform:rotate(-45deg)}.compass .arrow.nnw{transform:rotate(-24.5deg)}