/* --- [roundbox] --- */
.roundbox { height: 1px; overflow: hidden; background-color: #B6A385; display: block; clear: both;}
.r1 { margin: 0 4px; }
.r2 { margin: 0 2px; }
.r3 { margin: 0 1px; }
.roundbox-content { background-color: #B6A385; height: auto;}
/* --- [/roundbox] --- */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	margin: 0px;
	padding: 0px;
	background-color: #FFF;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

#wrapper { width: 780px; height: auto; margin: 0 auto; position: relative; }

#wrapper #top { width: 780px; height: 70px; }
#wrapper #top #logo { width: 270px; height: 60px; padding-top: 10px; padding-left: 12px; }
#wrapper #top #member-box { width: 438px; height: 57px; float: right; margin-top: 13px;}
#wrapper #top #member-box .roundbox-content { height: 47px; padding: 1px 5px; }
#wrapper #top #member-box #mb-avatar { width: 70px; height: 45px; text-align: center; display: inline-block; float: left; }
#wrapper #top #member-box #mb-avatar img { width: 53px; height: 45px; behavior: url(/css/iepngfix.htc);}
#wrapper #top #member-box #mb-info { width: 300px; text-align: left; display: inline-block; float: left;}
#wrapper #top #member-box #mb-info #mb-greet { font-size: 18px; color: #EEE;}
#wrapper #top #member-box #mb-info #mb-greet a { font-weight: bold; color: #FFF;}
#wrapper #top #member-box #mb-info #mb-points { font-size: 14px; color: #EEE;}
#wrapper #top #member-box #mb-controls { width: 55px; display: inline-block; float: left; text-align: left; }
#wrapper #top #member-box #mb-controls a { font-size: 12px; color: #FFF; line-height: 20px;}
#wrapper #top #member-box .mb-col { display: inline-block; float: left;}
#wrapper #top #member-box .mb-label { display: block; font-size: 11px; font-weight: bold; color: #FFF; padding-top: 5px;}
#wrapper #top #member-box .mb-input { font-size: 15px; color: #333; width: 120px; height: 16px; margin-right: 5px;}
#wrapper #top #member-box .mb-button { border: none; background: #a7cbd7; color: #FFF; font-size: 10px; font-weight: bold; padding: 2px 5px; margin: 20px 5px 0; /*padding: expression("2px 0px");*/}
#wrapper #top #member-box .mb-link { font-size: 11px; font-weight: bold; color: #FFF; display: block; margin: 5px 0; text-align: center; }

#wrapper #menu { width: 780px; height: 30px; background: url(/images/bg-menu.jpg) no-repeat left top; text-align: center; }
#wrapper #menu ul { margin: 0px; padding: 0px; list-style-type: none; }
#wrapper #menu ul li { display: inline; height: 30px; line-height: 30px; padding: 0 3px;}
#wrapper #menu ul li a { color: #FFF; font-weight: bold; font-size: 11px;}

#wrapper #main { width: 780px; height: auto; background: url(/images/bg-main.jpg) repeat-y left top; }
#wrapper #main #content { margin: 0px 2px; background: url(/images/bg-content.jpg) no-repeat left top; }

#wrapper #bottom { width: 780px; height: 120px; background: url(/images/bg-bottom.jpg) no-repeat left top; position: relative; }

#wrapper #footer { width: 780px; height: 30px; margin-top: 20px; font-size: 9px; color: #999; text-align: center; }
#wrapper #footer ul#footer-menu { margin: 0px; padding: 0px; list-style-ype: none; }
#wrapper #footer ul#footer-menu li { display: inline;}
#wrapper #footer ul#footer-menu li.separator { padding: 0 2px;}
#wrapper #footer ul#footer-menu li a { color: #666; }


/* tipbox */
.TIPBOX { width: 250px; margin-right: 10px;}
.TP { height: 1px; overflow: hidden; background-color: #73b06b; display: block; }
.TP1 { margin: 0 4px; }
.TP2 { margin: 0 2px; }
.TP3 { margin: 0 1px; }
.TP-CONTENT { padding: 2px 5px; background-color: #73b06b; font-size: 11px; color: #FFF; }

/* sysmsg */
#SYSMSG {	position: fixed; top: 0px; left: 0px; z-index: 1000; width: 100%; border: solid 1px #FC0; /*background-color: #FFFFCC;*/ background: url(/images/sysmsg-bg.png); padding: 5px 10px; margin-bottom: 10px; text-align: left; color: #333; font-size: 8pt; position: expression("absolute") }
#SYSMSG #SM-CLOSE { float: right; margin-right: 15px; display: inline-block; background-color: #FC0; color: #FFF; width: 20px; height: 20px; text-align: center; line-height: 20px; }
#SYSMSG #SM-ICON { width: 50px; text-align: center; }
#SYSMSG #SM-TEXT { width: auto; }


/* floating character icons */
.left-char-icon { float: left; display: inline; }
.right-char-icon { float: right; display: inline; }
.bottom-char-icon { position: absolute; z-index: 50; }
.dinosaur-icon { margin-right: -35px; }
.weegly-icon { margin-top: 50px; }
.grimmar-icon { margin-left: -35px; margin-right: 10px; }

.rabbit-icon { top: -15px; left: 40px; }
.rabbit-icon img { width: 143px; height: 126px; }
.playnow-icon { top: -20px; right: 60px; }
.playnow-icon img { width: 150px; height: 84px; }
.buggers-icon { top: -35px; right: 50px; }
.buggers-icon img { width: 197px; height: 146px; }
.grimmar2-icon { top: -35px; right: 50px; }
.grimmar2-icon img { width: 208px; height: 152px; }

.required { font-weight: bold; color: #C00; font-size: 15px; }


/* right side comic strips */
#comic-strip { position: absolute; top: 0px; right: 0px; z-index: 1000; width: 200px; margin-right: -200px;}

/* moving to the left comment this if not */
#wrapper { width: 980px; padding-left: 200px; }
#wrapper #comic-strip { left: 0px; margin-right: 0px;  }

.png { behavior: url(/css/iepngfix.htc); }


/* play window */
#play_win_bg { background: #000; position: absolute; z-index: 100; top:0px; left:0px; opacity: 0.75; }
#play_win { position: absolute; z-index: 101; }
#play_win .play_win_border { height: 15px; padding-left: 15px;}
#play_win .play_win_border_content { width: 400px; height: 15px; background: url(/images/play_win/play_window_bg.png); text-align: center; }
#play_win .play_win_corner { width: 15px; height: 15px;; float: right; clear: none; display: inline; }
#play_win #play_win_top { background: url(/images/play_win/play_window_bg_01.png) no-repeat left top; }
#play_win #play_win_corner_top { background: url(/images/play_win/play_window_bg_02.png) no-repeat left top; }
#play_win #play_win_bottom { background: url(/images/play_win/play_window_bg_03.png) no-repeat left top; }
#play_win #play_win_corner_bottom { background: url(/images/play_win/play_window_bg_04.png) no-repeat left top; }
#play_win #play_win_content { height: 200px; padding: 0 15px; background: url(/images/play_win/play_window_bg.png) }
#play_win #play_win_content #comment { width: 400px; height: 200px; }
#play_win_close { position: absolute; z-index: 102; width: 30px; height: 30px; cursor: pointer; }