CSS Circular Template

body { background:none; }
#scroller { padding: 35px 0; box-sizing: border-box; }
#profile-container { width:1000px;background:#333; }
#profile-container {background: none;}

body {cursor: url(http://i.imgur.com/crzpCAJ.gif),auto; background: url(http://i.imgur.com/CTa2ONZ.jpg);}

/* scrollbar */
::-webkit-scrollbar { width: 5px; -moz-border-radius: 5px;
border-radius: 5px;}
::-webkit-scrollbar-track { border-radius: 0px;
background-color: #ebe3cc; }
::-webkit-scrollbar-thumb { border-radius: 0px;
background-color: #8A8270; }
/* end scrollbar */


/* unvisited link */
a:link {text-decoration: none; cursor: url(http://i.imgur.com/crzpCAJ.gif),auto;
    color: #000;
}


/* visited link */
a:visited {
    color: #000;
}

/* mouse over link */
a:hover {
   background-color: yellow;
}

/* selected link */
a:active {
    color: #000;
}


            .box {position: relative; margin: auto; width: 1000px; margin-left: 50px; top: 30px;}

.one {position: absolute; right: 0px;width: 400px; height: 400px; border-radius: 400px; background: url(http://i.imgur.com/FJygc7Q.jpg) no-repeat #ebe3cc; background-size: auto 120%; background-position: -20px -20px; border: 2px solid black; box-shadow: 0px 0px 3pt 6pt #ebe3cc;}

.two {border: 4px solid #ebe3cc; border-radius: 300px; width: 370px; height: 370px; margin: 12px;}

.three {position: absolute; left: -102px; top: 20px;width: 900px; border: 2px solid black; height: 360px; -moz-border-radius-bottomleft: 400px;
border-bottom-left-radius: 400px; -moz-border-radius-topleft: 400px; border-top-left-radius: 400px; background: #ebe3cc;box-shadow: 3px 3px 3pt 3pt #ebe3cc; }

.four {position: absolute; left: 87px; border-top: 1px dashed black; border-bottom: 1px dashed black; top: 100px; text-align: justify; height: 190px; overflow: auto; width: 555px; padding: 10px; font-family: calibri; font-size: 13px; color: black;}

.swap{cursor: url(http://i.imgur.com/crzpCAJ.gif),auto;
font-family: calibri;
  line-height: 11px;
   font-size: 12px;
   text-align: center;
   height: 11px;
   width: 130px;
   float: left;
   margin-right: 3px;
   padding-top: 1px;
   padding-bottom: 1px;
   margin-bottom: 3px;
  border-top: 1px solid #8A8270;
  border-bottom: 1px solid #8A8270;
  border-left: 5px solid #8A8270;
  border-right: 5px solid #8A8270;
 color: #ebe3cc;
   background-color: #655f51;
   display: block;
   -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
border-radius: .5em;

}

.bottom {
    display: none;
}

.swap:hover > .top{
    display: none;
}

.swap:hover > .bottom {
    display: inline;
}


.swap:hover{cursor: url(http://i.imgur.com/crzpCAJ.gif),auto;
 width: 130px;
font-size: 12px;
   text-align: center;
color: #ebe3cc;
   background-color: #8A8270;
border-top: 1px solid #655f51;
  border-bottom: 1px solid #655f51;
  border-left: 5px solid #655f51;
  border-right: 5px solid #655f51;
line-height: 13px;
font-family: calibri;
     letter-spacing: -1px;
    -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
    transform: rotateX(360deg);
 -moz-transform: rotateX(360deg);
 -webkit-transform: rotateX(360deg);
 -o-transform: rotateX(360deg);
  border-radius: .5em;

}


#divswap {width: 600px; height: 10px; position: absolute; top: 50px; left: 90px;}