@charset "utf-8";
/* CSS Document */

body { margin: 0px 0px 0px 0px; background: url(header_bg.gif) repeat-x #f0f0f0;}

#container { position: relative; width:980px; }

/* header */
#header { position: relative; width: 980px; height: 98px; }
#header_logo { position: absolute; width: 370px; height: 92px; background: url(header_logo.jpg) no-repeat top left; padding-top: 10px; left: 0px; top: 0px;}
#header_logo img { border: none;}

#header_searchbox { position: absolute; width:440px; right:0px; top: 18px;}
#header_searchbox input { border: 0px; padding: 3px 10px 0 10px; margin-right: 5px; background: url(header_searchfield.gif); width: 224px; height: 20px; font: normal 11px Arial, Helvetica, sans-serif; color: #333333;}
#header_searchbox .header_searchbox_text { font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#cccccc; text-align: left; }
#header_searchbox .header_searchbox_searchbtn_bg { background: url(header_btn_search.gif) no-repeat top left; border:none; width: 47px; height: 19px; cursor:pointer; padding-bottom: 3px; } 
#header_searchbox .header_searchbox_searchbtn_text { font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #cccccc; text-align: center; }

#header_button { position: absolute; width: 394px; height: 23px; top: 68px; left: 370px; font: bold 12px Arial, Helvetica, sans-serif; }
#header_button_space { display: block; width:4px; height: 23px; float:left; }

#header_button_ranking a { display: block; background:url(header_btn_ranking.gif); width:185px; height: 23px; float:left; text-align: center; padding-top: 4px; text-decoration: none; color: #FFFFFF; }
#header_button_ranking a:hover { background-position: 0 -28px;}

#header_button_submit a { display: block; background:url(header_btn_submit.gif);  width:113px; height: 23px; float:left; text-align: center; padding-top: 4px; text-decoration: none; color: #FFFFFF; }
#header_button_submit a:hover { background-position: 0 -28px;}

#header_button_contact a { display: block; background:url(header_btn_contact.gif); width: 86px; height: 23px; float:left; text-align: center; padding-top: 4px; text-decoration: none; color: #FFFFFF; }
#header_button_contact a:hover { background-position: 0 -28px;}

#header_links { position: absolute; width: 210px; top: 76px; right: 0px; font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #cccccc; text-align: right; padding-right: 10px;}
#header_links a { text-decoration: none; color: #cccccc; }
#header_links a:hover { text-decoration: underline; color:#ff9900;}



/* white background */
#mainbg { position: relative; background-color: #ffffff; width: 980px; height: auto; left: 0px; top: 0px; padding-bottom:}



/* mid - index page*/
#mid { position: relative; width: 980px; height: 127px; }

#mid_leftimg { background: url(mid_bg_mainvisual.gif) no-repeat top left; width: 536px; height: 127px; float: left; cursor:pointer}
#mid_leftimg .mid_leftimg_welcometext { position: absolute; top: 36px; left: 320px; width: 200px; }
#mid_leftimg .mid_leftimg_welcometext1 { font: bold 24px Arial, Helvetica, sans-serif; letter-spacing:-1px; color: #ccff33; text-align: left; }
#mid_leftimg .mid_leftimg_welcometext2 { font: bold 13px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: left;}

#mid_login { background: url(mid_bg_login.gif) no-repeat top left; width: 225px; height: 127px; float: left; }
#mid_login .mid_login_heading { position: relative; top: 8px; left: 5px;width: 200px; font: bold 12px Verdana, Arial, Helvetica, sans-serif;    color: #003300; text-align: left; }
#mid_login_field { position: relative; width: 215px; top: 15px; padding-right: 10px; text-align: right;}
#mid_login input { border: 0px; padding: 8px 10px 0 10px; margin-left: 5px; background: url(mid_login_field.gif); width: 134px; height: 26px; font: normal 11px Arial, Helvetica, sans-serif; color: #333333;}
#mid_login .mid_login_text { font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#ffffff; text-align: left; }
#mid_login .mid_login_links { text-align: left; padding: 5px 0 0 8px; }
#mid_login .mid_login_links a { background: url(mid_login_arrow.gif) no-repeat; background-position: 0; font: normal 10px Verdana, Arial, Helvetica, sans-serif; color:#99cc66; text-decoration: none; padding-left: 11px; line-height: 16px; }
#mid_login .mid_login_links a:hover { color:#99cc66; text-decoration: underline; }
#mid_login button { position: absolute; left: 668px; top: 98px; }
#mid_login .mid_loginbtn_bg { background: url(mid_login_btn.gif) no-repeat top left; border:none; width: 78px; height: 19px; cursor:pointer; padding-bottom: 3px; } 
#mid_login .mid_loginbtn_text { font: bold 9px Verdana, Arial, Helvetica, sans-serif; color: #003300; text-align: center; }

#mid_submit { background: url(mid_bg_submit.gif) no-repeat top left; width: 219px; height: 127px; float: left; cursor:pointer }
#mid_submit_heading { font: bold 14px "Lucida Sans Unicode"; color: #ffcc00; text-align: center; padding-top: 12px;}
#mid_submit_text { padding: 20px 0 10px 85px; font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; }
#mid_submit_button { position: absolute; left: 865px; top: 90px; }
#mid_submit_button a { display: block; background:url(mid_submit_btn.gif); width: 97px; height: 19px; text-align: center;  text-decoration: none; color: #ffff99; font: bold 9px Verdana, Arial, Helvetica, sans-serif; padding: 3px 0 0 0;}

#mid_user_dash{ background: url(mid_user_dash.png) no-repeat top left; width: 444px; height: 127px; float: left; cursor:pointer;margin-left:0px;}
#mid_user_dash_heading { font: bold 14px "Lucida Sans Unicode"; color: #ffcc00; text-align: left; padding-top: 8px; padding-left:40px;}
#mid_user_dash_text { padding: 10px 0 10px 40px; font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ffffff; text-align: left; }
#mid_user_dash_text a {color:#FFCC00;text-decoration:none;}
#mid_user_dash_text a:hover{ color:#FFCC00;text-decoration:underline;}

/* system info - index page */
#systeminfo { position: relative; width: 960px; height: 35px; text-align: right; font: 10px Verdana, Arial, Helvetica, sans-serif; padding-top: 10px;}
#systeminfo .systeminfo_lastupdate { font-weight: bold; color: #006699;}
#systeminfo .systeminfo_servertime { font-weight: normal; color: #333333;}


/* ranking - index page */
#rankingtable { position: relative; width: 960px; height: auto; background:url(rankingtable_bg.gif) repeat-y; }
#rankingtable_top { width: 960px; height: 45px; background: url(rankingtable_bg_top.gif) no-repeat top left; }
#rankingtable_top .rankingtable_top_rank { width: 688px; float: left;  }
#rankingtable_top .rankingtable_top_rank_text { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #3399cc; text-align: left; padding: 16px 0 0 16px; }
#rankingtable_top .rankingtable_top_todayin { width: 122px; float: left; }
#rankingtable_top .rankingtable_top_todayin_text { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #336600; text-align: left; padding: 16px 0 0 32px;  background:url(icon_in.gif) no-repeat; background-position: 10px;}
#rankingtable_top .rankingtable_top_todayout { width: 122px; float: left; }
#rankingtable_top .rankingtable_top_todayout_text { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #003366; text-align: left; padding: 16px 0 0 32px;  background:url(icon_out.gif) no-repeat; background-position: 10px;}
#rankingtable_bottom { width: 960px; height: 35px; background: url(rankingtable_bg_bottom.gif) no-repeat top left; }
#space { width: 10px; height: 10px; float: left;}

.rankingtable_list_iconrank { width: 67px; height: 44px; background: url(icon_ranking.gif) no-repeat; }
.ranknumber { font: bold 24px Arial, Helvetica, sans-serif; color: #ffffff; text-align: center; position: relative; top: 7px; left: 11px; width: 50px;  }

.rankingtable_list_screenshot { width: float: left;}        
.rankingtable_list_screenshot img { border: 1px solid #cccccc; width:180px; height:120px;}        
.rankingtable_list_description_heading { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #5ca300; text-align: left; text-decoration:none;}
.rankingtable_list_description_heading:hover{ font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #5ca300; text-align: left; text-decoration:underline;}
.rankingtable_list_description_text { font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #666666; line-height: 16px;text-align: left;}
.rankingtable_list_todayin_text { font: bold 30px Arial, Helvetica, sans-serif; color: #336600; text-align:center; padding-top: 50px; }
.rankingtable_list_todayout_text { font: bold 30px Arial, Helvetica, sans-serif; color: #003366; text-align:center; padding-top: 50px; }

#rankingtable_listwhite { width: 960px; height: 140px; padding: 0 4px 0 4px;}
#rankingtable_listwhite_rank { background-color: #ffffff; width: 688px; height: 140px; float: left;}
#rankingtable_listwhite_rank .rankingtable_listwhite_rank1 { width: 92px; height: auto;  float: left; padding: 8px 0 0 0;}
#rankingtable_listwhite_rank .rankingtable_listwhite_rank2 { width: 210px; height: auto;  float: left; padding: 8px 0 0 0;}
#rankingtable_listwhite_rank .rankingtable_listwhite_rank3 { width: 368px; height: auto;  float: left; padding: 8px 0 0 0;}
#rankingtable_listwhite_todayin { background-color: #ffffff; width: 122px; height: 140px; float: left; }
#rankingtable_listwhite_todayout { background-color: #ffffff; width: 122px; height: 140px; float: left; }

#rankingtable_listgrey { width: 960px; height: 140px; padding: 0 4px 0 4px;}
#rankingtable_listgrey_rank { background-color: #f3f3f3; width: 688px; height: 140px; float: left;}
#rankingtable_listgrey_rank .rankingtable_listgrey_rank1 { width: 92px; height: auto;  float: left; padding: 8px 0 0 0;}
#rankingtable_listgrey_rank .rankingtable_listgrey_rank2 { width: 210px; height: auto;  float: left; padding: 8px 0 0 0;}
#rankingtable_listgrey_rank .rankingtable_listgrey_rank3 { width: 368px; height: auto;  float: left; padding: 8px 0 0 0;}
#rankingtable_listgrey_todayin { background-color: #f3f3f3; width: 122px; height: 140px; float: left; }
#rankingtable_listgrey_todayout { background-color: #f3f3f3; width: 122px; height: 140px; float: left; }


#line { width: 960px; height: 1px; background-color: #cccccc; display: block;}

/* Submit Site */
#submit_site_info { width: 960px; height: auto; padding: 20px 0 20px 0; text-align: left;}
#submit_site_heading { font: bold 18px Arial, Helvetica, sans-serif; color: #006699; padding: 0 0 10px 0;}
#submit_site_frame { width: 940px; height: auto; background-color: #fff9d7; border: 1px solid #e2c822; padding: 15px 10px 5px 10px;}

/* Reference links */
#reflinks_info { width: 960px; height: auto;  padding: 15px 10px 20px 10px; text-align: left; padding: 0 0 10px 0;}
#reflinks_frame { width: 940px; height: auto; background-color: #edffff; border: 1px solid #cccccc; text-align: left;}
#bannerlink { float: left; }
#icon_copy { float: left; width: 20px; height: 20px; background: url(icon_copy.gif) no-repeat; background-position: 4px 4px; }



/* Site Stat */
#sitestat { width: 960px; height: auto; text-align: left; padding-bottom: 20px;}
#sitestat_frame { width: 940px; height: 96px; background-color:#ffffff; background: url(statbg.gif) repeat-x; border: 1px solid #cccccc;}
#sitestat_text { padding: 10px 10px 10px 10px;}
#sitestat {  } 
#sitestat .sitestat_text_space { padding: 0 25px 0 25px;}

#sitestat .todayin { width: 250px; float: left; font: bold 18px Arial, Helvetica, sans-serif; line-height: 18px; color: #333333;}
#sitestat .todayin_text { text-align: left; padding: 14px 0 10px 32px;  background:url(icon_in.gif) no-repeat; background-position: 10px;}
#sitestat .todayin_text span { color: #336600;}
#sitestat .todayout { width: 250px; float: left; font: bold 18px Arial, Helvetica, sans-serif; line-height: 18px; color: #333333;}
#sitestat .todayout_text { text-align: left; padding: 14px 0 10px 32px;  background:url(icon_out.gif) no-repeat; background-position: 10px;}
#sitestat .todayout_text span { color: #003366;}
#sitestat .currentrank { width: 250px; float: left; font: bold 18px Arial, Helvetica, sans-serif; line-height: 18px; color: #333333; padding: 14px 0 10px 0;}
#sitestat .currentrank span { text-align: left;  color: #ff6600;}

#statlist { width: 960px; padding: 20px 0 20px; 0;}
#statlist_frame { width: 810px; background-color: #ffffff; border: 1px solid #cccccc;}
#statlist_heading { width: 810px; height: 25px;font: bold 11px Verdana, Arial, Helvetica, sans-serif; background-color: #edffff; border-bottom: 1px solid #cccccc;}
#statlist_heading_date{ float: left; width: 490px; color: #333333; padding: 5px 0 0 10px; text-align:left;}
#statlist_heading_incount{ width: 140px; float: left; color: #669900; padding: 5px 0 0 10px; border-left: 1px solid #edffff; text-align:left;}
#statlist_heading_outcount{ width: 140px; float: left; color: #003366; padding: 5px 0 0 10px; border-left: 1px solid #edffff; text-align:left;}

#statlist_white { width: 810px; height: 25px;font: normal 11px Verdana, Arial, Helvetica, sans-serif; background-color: #ffffff;}
#statlist_grey { width: 810px; height: 25px;font: normal 11px Verdana, Arial, Helvetica, sans-serif; background-color: #f0f0f0;}
#statlist_date{ float: left; width: 490px; color: #333333; padding: 5px 0 0 10px; text-align:left;}
#statlist_incount{ width: 140px; float: left; color: #333333; padding: 5px 0 0 10px; border-left: 1px solid #ffffff; text-align:left;}
#statlist_outcount{ width: 140px; float: left; color: #333333; padding: 5px 0 0 10px; border-left: 1px solid #ffffff; text-align:left;}

#statlist_count { width: 810px; height: 50px;font: bold 13px Verdana, Arial, Helvetica, sans-serif; background-color: #edffff; border-top: 1px solid #cccccc;}
#statlist_count_total{ float: left; width: 490px; color: #333333; padding: 5px 0 0 10px; text-align:right;}
#statlist_count_total_incount{ width: 140px; float: left; color: #669900; padding: 5px 0 0 10px; border-left: 1px solid #edffff; text-align:left;}
#statlist_count_total_outcount{ width: 140px; float: left; color: #003366; padding: 5px 0 0 10px; border-left: 1px solid #edffff; text-align:left;}

#statlist_count_average{ float: left; width: 490px; color: #333333; padding: 5px 0 0 10px; text-align:right;}
#statlist_count_total_average{ width: 140px; float: left; color: #669900; padding: 5px 0 0 10px; border-left: 1px solid #edffff; text-align:left;}
#statlist_count_total_average{ width: 140px; float: left; color: #003366; padding: 5px 0 0 10px; border-left: 1px solid #edffff; text-align:left;}

#greenwich {  width: 810px; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #003366; text-align: left; padding: 20px 0 20px 0;}

/* Error Message */
#error_msg_frame { width: 960px; height: auto; padding: 10px 0 10px 0;}
#error_msg { padding: 10px 0 10px 50px;}
#error_msg_text1 { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #990000; text-align: left; line-height: 18px;}
#error_msg_text2 { font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #990000; text-align: left; line-height: 18px;}
#error_msg_text2 li { list-style-image:url(error_arrow.gif);}


/* Top tab bar*/
#toptabbar { width: 960px; height: 48px; padding: 20px 0 15px 0;}
#toptabbar_frame { width: 960px; height: 28px; background: url(tab_bg.gif) repeat-y top left;  }
#toptabbar_welcomemsg { display: block; width: 656; float: left; font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #669900; padding: 5px 0 0 5px; text-align: left;}
.toptabbar_welcomemsg_username { font: italic 12px Verdana, Arial, Helvetica, sans-serif; font-weight: normal;}

#toptabbar_tabon { display: block; background:url(tab_on.gif); width: 137px; height: 28px; float:left;}
#toptabbar_tabon_text { padding-top: 6px; }
#toptabbar_tabon_text a{ font: bold 12px Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; color: #333333; }
#toptabbar_tabon_text a:hover { color: #ff9900; }

#toptabbar_taboff { display: block; background:url(tab_off.gif); width: 137px; height: 28px; float:left;}
#toptabbar_taboff_text { padding-top: 6px; }
#toptabbar_taboff_text a{ font: bold 12px Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; color: #999999; }
#toptabbar_taboff_text a:hover { color: #ff9900; }






/* Error Message */
#error_msg_frame { width: 960px; height: auto; padding: 10px 0 10px 0;}
#error_msg { padding: 10px 0 10px 50px;}
#error_msg_text1 { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #990000; text-align: left; line-height: 18px;}
#error_msg_text2 { font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #990000; text-align: left; line-height: 18px;}
#error_msg_text2 li { list-style-image:url(error_arrow.gif);}


/* About */
#aboutyou_frame { width: 960px; padding: 30px 0 10px 0;}
#aboutyou { width: 515px; padding: 0 0 0 50px;}
#aboutyoursite { width: 515px; padding: 50px 0 0 50px;}
#aboutyou_heading_text1 { font: bold 18px Arial, Helvetica, sans-serif; color: #006699; line-height: 18px; text-align: left;}
#aboutyou_heading_text2 { font: bold 13px Verdana, Arial, Helvetica, sans-serif; color: #669900; line-height: 18px; text-align: left; padding-bottom: 10px;}

#requiredfield { font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #666666; padding: 20px 0 10px 50px; text-align: left;}

#aboutyou_inputplane { width: 480px; height: auto; padding: 30px 0 30px 30px; background-color: #edffff; border: 1px solid #cccccc;}
#aboutyou_fieldname { width: 145px; height: 20px; text-align: left; font: normal 12px Verdana, Arial, Helvetica, sans-serif; color: #666666; float: left; padding-right: 5px;}
#aboutyou_inputbar input {width: 250px; border: 1px solid #cccccc;}
#aboutyou_inputbar textarea {width: 250px; height: 70px; border: 1px solid #cccccc; overflow: auto;}
#aboutyou_inputinfo { width: 395px; height: 20px; text-align: left; font: normal 10px Arial, Helvetica, sans-serif; color: #666666; text-align:right;}

#aboutyou_userid { width: 180px; font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #333333; float: left;}
#aboutyou_changepwd { width: 120px; float: left; }
#aboutyou_changepwd a { font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #003366; text-decoration: none;}
#aboutyou_changepwd a:hover { text-decoration: underline;}

/* Bottom function */
#bottom_function { position: relative; width: 960px; height: auto; padding: 10px 0 80px 0;}
#bottom_function_frame { position: absolute; width: 400; left: 700px; top: 25px;height:30px; }

#bottom_function_submit a { display: block; background:url(btn_submit_bg.gif); width:120px; height: 23px; float:left; text-align: center; padding-top: 3px; text-decoration: none; color: #333333; font: bold 12 Verdana, Arial, Helvetica, sans-serif; color: #333333;}
#bottom_function_submit a:hover { background-position: 0 -28px;}


#bottom_function_cancel a { display: block; background:url(btn_submit_bg.gif); width:120px; height: 23px; float:left; text-align: center; padding-top: 3px; text-decoration: none; color: #333333; font: bold 12 Verdana, Arial, Helvetica, sans-serif; color: #333333;}
#bottom_function_cancel a:hover { background-position: 0 -28px;}

#bottom_function_terms { margin-top:55px ; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #666666; text-align: right; padding-left: 5px;}



/* pagination */
#pagination { width: 960px; height: 35px; font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #006699; text-align: center; }
#pagination_container { position: absolute; left: 330px; }
#pagenumber {  width: 240px; height: 22px; text-align: center; float: left; padding-top: 3px;}
#pagenumber a { color: #006699; text-decoration: none; font-weight: bold;}
#pagenumber a:hover { color: #5ca300; text-decoration: underline; }
#arrow_front {cursor:pointer; background: url(arrow_front.gif) no-repeat; width: 15px; height: 22px; float: left;}
#arrow_prev {cursor:pointer; background: url(arrow_prev.gif) no-repeat; width: 15px; height: 22px; float: left; }
#arrow_next {cursor:pointer; background: url(arrow_next.gif) no-repeat; width: 15px; height: 22px; float: left; }
#arrow_end {cursor:pointer; background: url(arrow_end.gif) no-repeat; width: 15px; height: 22px; float: left; }
#pagenumber .thispagenumber{ font-size: 16px;text-decoration:underline; color:#5ca300; }

/* footer */
#footer { position: relative; float: left; width: 980px; height: 150px; background: url(footer.jpg) no-repeat top left; top: 15px;}
#footer_links { color:#666666; font: normal 10px Verdana, Arial, Helvetica, sans-serif; }
#footer_links a { text-decoration: none; color: #666666; }
#footer_links a:hover { text-decoration: underline; color: #333333; }
#footer_links .separator{ padding: 0 8px 0 8px; }
#footer_links .row1{ padding-top: 0px; }
#footer_links .row2{ padding-top: 5px; }


.fstyle1 { font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #333333; } 
.fstyle2 { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #006666; line-height: 18px; } 
.fstyle3 { color: #006699; } 
.fstyle4 { font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #003366; line-height: 18px; } 
.fstyle5 { font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #003366; line-height: 18px; } 
.fstyle6 { font: normal 11px Verdana, Arial, Helvetica, sans-serif; color: #333333; line-height: 18px; } 
.fstyle6 a { text-decoration: underline; color: #333333;} 
.fstyle6 a:hover { text-decoration: underline; color: #ff9900;} 

#register{
  text-align: left;
  padding:10px 0 0 10px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
}
#register #register_title{
  text-align: left;
  font-size: 20px;
  color: #006699;
  font-weight: bold;
}

#register  #register_content{
  background-color: #FFF9D7;
  width: 940px;
  border: 1px solid #E3C725;
  padding: 10px;
  margin-top:10px;
  font-size: 12px;
}

#register  #register_content span{
  color: #006964;
  font-size: 14px;
  font-weight: bold;
}

#search_result{
 position: relative; width: 960px; height: 35px; text-align: center; font: 14px Verdana, Arial, Helvetica, sans-serif; padding-top: 10px; font-weight: bold; color: #006699;
}