/** Page Styles **/

body {
  margin: 0;
  padding: 50px;
  font-family: arial, helvetica, sans-serif;
  background-color: #fff;
}

div.area {
  border-style: solid;
  border-color: #000;
  border-width: 2px;
  position: relative;
  overflow: hidden;
  height: 400px;
  width: 400px;
/*
  background-color: rgb(46,144,255);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.25, rgb(0,85,176)),
    color-stop(0.89, rgb(46,144,255))
    )
*/
  background-color: #444444;
  background-image: -moz-linear-gradient(top, #014da2, #2e90ff); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #014da2, #2e90ff); /* IE10 */
  background-image: -o-linear-gradient(top, #014da2, #2e90ff); /* Opera 11.10+ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#014da2), to(#2e90ff)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #014da2, #2e90ff); /* Chrome 10+, Saf5.1+ */
  background-image: linear-gradient(top, #014da2, #2e90ff);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#014da2', EndColorStr='#2e90ff'); /* IE6–IE9 */

}


h1 {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 5;
  font-weight: normal;
  font-size: 5px;
  color :#0086ed;  
  background-color: #450000;
  width: 100px;
  height: 100px;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.50);
     -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.50);
          box-shadow: 2px 2px 10px rgba(0,0,0,0.50);
  background:-webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0.22, rgb(230,0,0)),
    color-stop(0.39, rgb(184,0,15)),
    color-stop(0.76, rgb(82,0,5))
);
}

/* Menu */

ul#menu {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 4;
}

ul#menu li {
  display: block;
  background-color: #a60101;
  width: 150px;
  height: 35px;
  margin: 0;
  padding: 5px 15px 0 0;
  text-align: right;
  position: relative; 
  -webkit-box-shadow: 5px 1px 10px rgba(0,0,0,0.50); 
     -moz-box-shadow: 5px 1px 10px rgba(0,0,0,0.50); 
          box-shadow: 5px 1px 10px rgba(0,0,0,0.50); 
  -webkit-transform-origin: 0 50%;
     -moz-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-border-radius: 0 20px 20px 0;
     -moz-border-radius: 0 20px 20px 0;
          border-radius: 0 20px 20px 0;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0.45, rgb(255,0,0)),
    color-stop(0.68, rgb(173,0,0)),
    color-stop(0.89, rgb(107,0,0))
  );

  -moz-box-shadow: -2px -2px 8px rgba(0,0,0,.25) inset, 2px 2px 8px rgba(255,255,255,.45) inset;
  box-shadow: -2px -2px 8px rgba(0,0,0,.25) inset, 2px 2px 8px rgba(255,255,255,.45) inset;
}

ul#menu li a {
  display: none;
}

ul#menu li:hover {
  background-color: #940101;
  z-index: 8;
  width: 200px;
}

ul#menu li:hover a {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-decoration:  none;
}


ul#menu li.t1 {
  -moz-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
}

ul#menu li.t2 {
  -moz-transform:rotate(15deg);
  -webkit-transform:rotate(15deg);
  top: -40px;
}

ul#menu li.t3 {
  -moz-transform:rotate(30deg);
  -webkit-transform:rotate(30deg);
  top: -80px;
}

ul#menu li.t4 {
  -moz-transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  top: -120px;
}

ul#menu li.t5 {
  -moz-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  top: -160px;
}

ul#menu li.t6 {
  -moz-transform:rotate(75deg);
  -webkit-transform:rotate(75deg);
  top: -200px;
}

ul#menu li.t7 {
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
  top: -240px;
}