@import url(http://fonts.googleapis.com/css?family=Amatic+SC);

$size: 15em;
$border: 2em;
$ear: 4.5em;
$mug-color: #C73B0B;
$mug-inside-color: #1F0505;
$spot-size: random();

html, body {
  margin: 0;
  padding: 0;
  background-color: #E7A136
}

#title {
  font: 7em Amatic SC;
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: -.8em;
}

#mug {
  position: absolute;
  left: 50%;
  margin-left: -$size / 2;
  top: 50%;
  margin-top: -$size / 2;
  width: $size;
  height: $size;
  background-color: $mug-color;
  border-radius: 100%;
  box-shadow: 8px 9px #222;
  
  #coffee-border {
    position: absolute;
    left: 50%;
    margin-left: -$size / 2;
    top: 50%;
    margin-top: -$size / 2;
    height: $size - $border;
    width: $size - $border;
    border: $border / 2 $mug-color solid;
    border-radius: 100%;
  }
  
  &::before {
    position: absolute;
    top: ($size / 2) - (($ear / 4) / 2);
    left: -$ear + .1;
    content: "";
    width: $ear;
    height: $ear / 3;
    background-color: $mug-color;
    border-radius: 8px 0 0 8px;
    box-shadow: 5px 10px 0 0 #222;
    z-index: 0;
  }
  
  #mug-inside {
    position: absolute;
    left: $border / 2;
    top: $border / 2;
    height: $size - $border;
    width: $size - $border;
    background-color: $mug-inside-color;
    border-radius: 100%;
    box-shadow: 15px 10px 0 #161616 inset;
  }
}

.spot {
  height: $size - $border;
  width: $size - $border;
  box-shadow: 10px 20px 0 3px $mug-inside-color;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -$size / 2 + 5;
  margin-left: -$size / 2 + 4;
  z-index: -1;
/* ============����============== */
body{margin:0;padding:0;border:0;height:100%;text-align:left} 
#contain{position: relative;height:100%;padding:10px;margin:10px auto;border:0;}
#content {position:relative;margin:10px auto 10px auto} 
#bottom {position: relative;margin:0px auto} 
#top {position:relative;margin:0px auto;z-index:99} 
#bodyex {position: absolute;left:0;top:0;margin:0} 
#bottomex {position: absolute;left:0;bottom:0;margin:0;z-index:-1} 
#topex {position: absolute;left:0;top:0;margin:0;z-index:-1} 
#contentex {position: absolute;left:0;top:0;margin:0;z-index:-1} 
#advsex {display:none;position: absolute;width:100%;left:0;bottom:0;margin:0;z-index:-1} 


/*===����������===*/

.pdv_class{position:absolute;border:0px}


/* ==����== */

div,li,td,p,select,input,textarea,a,button,input{font:12px Verdana, Arial, Helvetica, sans-serif;color:#505050;text-decoration: none}
ul{margin:0px;padding:0px;}
a:link,a:visited,a:active{color:#505050;text-decoration: none;}
a.nomal:link,a.nomal:visited,a.nomal:active{color:#505050;text-decoration: underline;}
a:hover{color:#ff0000;text-decoration: underline;}

/* ============����============== */
form{margin:0;padding:0}
.input{border:1px #ddd solid;height:20px;line-height:20px;padding:0px 3px;color:#555;background:#f7f7f7}
.textarea{border:1px #ddd solid;font-size:12px;padding:3px;background:#f7f7f7}
.button{border:1px #c0c0c0 solid;height:22px;line-height:20px;padding:0px 3px;background:#e8e8e8;}
.submit{border:1px #c0c0c0 solid;height:22px;line-height:20px;padding:0px 3px;background:#e8e8e8;}
.mustfill{color:#ff0000}
select{font:12px Verdana, Arial, Helvetica, sans-serif;color:#505050;}


/* ==��ʾ��ʽ== */

.msgdiv {color:#336699;padding-left:53px;background:url(../images/chk_msg.gif) 30px no-repeat;}
.errdiv {color:#FF0000;padding-left:53px;background:url(../images/chk_error.gif) 30px no-repeat;}
.rightdiv {color:#505050;padding-left:53px;background:url(../images/chk_right.gif) 30px no-repeat;}
.noticediv{display:none;border:1px #fc5959 solid;background:#FFFDF4 url(../images/chk_error.gif) 10px no-repeat;padding-left:33px;line-height:25px;margin:3px 0px}
.okdiv{display:none;border:1px #fc5959 solid;background:#FFFDF4 url(../images/chk_right.gif) 10px no-repeat;padding-left:33px;line-height:25px;margin:3px 0px}
.securenotice{line-height:100px;color:#FF0000;text-align:center;}


/* ============��ʾ��Ϣ����============== */
div#alert {display:none;cursor:default;}
div#alert .border{border:1px #97A0AA solid;}
div#alert .ntc{padding:30px;text-align:left;background:#fff;font: 14px/1.6 Verdana, Arial, Helvetica, sans-serif;}
div#alert .buttonzone{padding:15px;text-align:center;background:#f7f7f7;}
div#alert .topBar{height:20px;line-height:20px;background:#cbddef;text-align:left;padding:0px 0px 5px 5px ;font-size:12px;}
div#alert .topBar .pwClose{position: absolute;top:0px;right:8px;width:45px;height:18px;background:url(../images/pwin3.gif) no-repeat;cursor:pointer}
div#alert .button{border:1px #97A0AA solid;height:22px;line-height:20px;padding:0px 5px;background:#eee}


/* ============����frame/���