Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// ----

$space:65px;
$light:#eee;
$medium:#ccc;
$dark:#aaa;
$fontSize: 22px;
$sidePad : $space - $fontSize;
.navSpace{
    height:48%;
}
.sides p{
    position:relative;
    text-align:center;
    top:$sidePad / 2;
    bottom:$sidePad / 2;
}
.sides{
    position:absolute;
  font-family: Arial;
    font-size:$fontSize;
  text-decoration: none;
}

#monad {
    position:absolute;
    top:$space;
    left:$space;
    bottom:$space;
    right:$space;
}

#n {
    top:$space / 4;
    height:$space;
    left:$space;
    right:$space;
}
#nw {
    left:0px;
    width:$space;
    top:0px;
    height:$space;
}

#ne {
    right:0px;
    width:$space;
    top:0px;
    height:$space;
}

#e {
    cursor:pointer;
    right:0px;
    top:$space;
    bottom:$space;
    width:$space;
}
#se {
    right:0px;
    width:$space;
    bottom:0px;
    height:$space;
}
#w {
    cursor:pointer;
    left:0px;
    width:$space;
    top:$space;
    bottom:$space;
}
#sw {
    left:0px;
    width:$space;
    bottom:0px;
    height:$space;
}
#s {
    border-radius:15px;
    bottom:$space - $space * 2;
    height:$space * 2;
    left:$space;
    right:$space;
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from($medium), to($light));
    background-image: -webkit-linear-gradient(bottom, $medium, $light);
    background-image: -moz-linear-gradient(bottom, $medium, $light);
    background-image: -o-linear-gradient(bottom, $medium, $light);
    background-image: linear-gradient(bottom, $medium, $light);
}

SassMeister-output.css

.navSpace {
  height: 48%;
}

.sides p {
  position: relative;
  text-align: center;
  top: 21.5px;
  bottom: 21.5px;
}

.sides {
  position: absolute;
  font-family: Arial;
  font-size: 22px;
  text-decoration: none;
}

#monad {
  position: absolute;
  top: 65px;
  left: 65px;
  bottom: 65px;
  right: 65px;
}

#n {
  top: 16.25px;
  height: 65px;
  left: 65px;
  right: 65px;
}

#nw {
  left: 0px;
  width: 65px;
  top: 0px;
  height: 65px;
}

#ne {
  right: 0px;
  width: 65px;
  top: 0px;
  height: 65px;
}

#e {
  cursor: pointer;
  right: 0px;
  top: 65px;
  bottom: 65px;
  width: 65px;
}

#se {
  right: 0px;
  width: 65px;
  bottom: 0px;
  height: 65px;
}

#w {
  cursor: pointer;
  left: 0px;
  width: 65px;
  top: 65px;
  bottom: 65px;
}

#sw {
  left: 0px;
  width: 65px;
  bottom: 0px;
  height: 65px;
}

#s {
  border-radius: 15px;
  bottom: -65px;
  height: 130px;
  left: 65px;
  right: 65px;
  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#cccccc), to(#eeeeee));
  background-image: -webkit-linear-gradient(bottom, #cccccc, #eeeeee);
  background-image: -moz-linear-gradient(bottom, #cccccc, #eeeeee);
  background-image: -o-linear-gradient(bottom, #cccccc, #eeeeee);
  background-image: linear-gradient(bottom, #cccccc, #eeeeee);
}