* { padding: 0; margin: 0; }
li { list-style: none; }
body { background:#00779e; }

#counter {width: 500px; height: 420px; margin: 50px auto 0; position: relative; }
#counter h2 { line-height: 42px; padding-left: 15px; font-size: 14px; font-family: arial; color:#FFF; }
#counter a {font-weight: normal; text-decoration: none; color:#FFF; }
#counter a:hover {text-decoration: underline; }
#bg { width: 280px; height: 200px; border: 3px solid #004f69; background: #009acd; filter: alpha(opacity=80); opacity: 0.8; position: absolute; left: 50%; top: 115px; margin-left:-141px;}
#counter_content { width: 250px; position: absolute; top: 130px; left: 130px; z-index: 1; }
#counter_content h3 { margin-bottom: 10px; }
#counter_content h3 input { border: none; width: 223px; height: 30px; line-height: 30px; padding: 0 10px; background: url(ico.png) no-repeat; text-align: right; color: #333; font-size: 14px; font-weight: bold; }
#counter_content ul { width: 250px; }
#counter_content li { width: 60px; height: 30px; line-height: 30px; float: left; background: url(ico.png) no-repeat -303px 0; text-align: center; color: #fff; cursor: pointer; margin: 0 1px 4px 0; }
#counter_content .active { background: url(ico.png) no-repeat -244px 0; }
#counter p { width: 500px; position: absolute; bottom: 20px; left: 0; color: #FFF; text-align: center; font-size: 12px; }