html, body { background: #fff url(/images/header.png) repeat-x; color: #333; height: 100%; }
img { border: 0; }

a { color: #003366; text-decoration: none; }
a:hover { color: #cc6600; }
a:visited { color: #006666; }
strong { font-weight: bold; }

h1 { border-bottom: 0px solid #d8d8d8; margin: 0 0 16px 0; }
h1 span { font-weight: bold; font-size: 182%; }
h2 { margin: 0 0 8px 0; }
h2 span { font-weight: bold; font-size: 138.5%; }

#doc2 { overflow: hidden; position: relative; min-height: 100%; _height: 100%; /* for IE6 */;}

#hd { height: 41px; }
#hd a { text-decoration: none; }
#hd .header { height: 40px; margin: 0 4px; overflow: hidden; }
#hd .header .widget-title { display: block; height: 40px; width: 176px; line-height: 40px; font-size: 138.5%; float: left; margin-right: 12px; background: url(/images/logo.png) 0 8px no-repeat; text-indent: -4000px; }
#hd .header .widget-title a:hover { text-decoration: none; }
#hd .user-info { width: 140px; overflow: hidden; float: right; padding: 3px 0; }
#hd .user-info .user-icon { float: right; width: 30px; height: 30px; border: 2px solid #888; }
#hd .user-info .name { display: block; float: right; text-decoration: none; font-weight: bold; font-size: 93%; margin: 0 6px 0 0; line-height: 34px; }
#hd .global-navigation { float: left; height: 28px; line-height: 28px; overflow: hidden; padding: 0 8px; margin: 6px 0 0 0; }
#hd .global-navigation li { float: left; }
#hd .global-navigation li a { height: 24px; line-height: 24px; float: left; margin: 2px 4px; padding: 0 8px; }

#hd .header { height: 40px; overflow: hidden; }
#hd .header .widget-title a { color: #fff; }
#hd .user-info a { color: #eee; }
#hd .global-navigation li a { color: #ccc; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
#hd .global-navigation li a:hover { background: #444; }
#hd .global-navigation .selected a { color: #fff !important; font-weight: bold; background: #333 !important; }

#ft { position: absolute; bottom: 0px; width: 100%; height: 2em !important; color: #aaa; border-top: 2px solid #ccc; }
#ft div { margin: 4px 0 0 4px !important; }
#ft a { color: #aaa; }

#bd { padding-bottom: 3em !important; }
#bd .yui-g { }
#bd .inner { padding: 11px; }
#bd .main-column { }
#bd .page_title { overflow: hidden; }

/* Panel */
.left-panel { margin-left: 8px; }
.right-panel { margin-right: 8px; }

/*  */
.pagination { overflow: hidden; margin: 0 0 24px 0; }
.pagination li { display: block; float: left; margin: 0 2px;}
.pagination a { border:solid 1px #888; }
.pagination .prev-off, .pagination .next-off { border: solid 1px #ccc; color: #aaa; display: block; float: left; font-weight: bold; margin-right: 2px; padding: 3px 10px; }
.pagination .next a, .pagination .prev a { font-weight: bold; }	
.pagination .current { background: #666; color: #fff; font-weight: bold; display: block; float: left; padding: 4px 10px; margin-right: 4px; }
.pagination a:link, .pagination a:visited { color: #666; display: block; float: left; padding: 3px 10px; text-decoration: none; }
.pagination a:hover { border: solid 1px #444; }

/* Not found */
.not-found-page { margin: 8px; text-align: center; }
.not-found-page h1 { font-size: 2000%; }
.not-found-page .message { font-size: 280%; margin: -50px 0 50px 0; color: #888; }

/* Server error */
.server-error-page { margin: 8px; text-align: center; }
.server-error-page h1 { font-size: 1000%; line-height: 300px; }
.server-error-page .message { font-size: 220%; margin: -0px 0 50px 0; color: #888; }

/* login box */
* html .overlay { position: absolute !important; top: expression(eval(document.documentElement.scrollTop)); left: expression(eval(document.documentElement.scrollLeft)); height: expression(eval(document.documentElement.clientHeight)) !important;  width: expression(eval(document.documentElement.clientWidth)) !important; } /* IE Hack */
* html overlay-layout-inner { height: expression(eval(document.documentElement.clientHeight)/2) !important; } /* IE Hack */
.overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; }
.overlay-bg { background: black; z-index: 20000; }
.overlay-layout-outer { z-index: 20001; }
.overlay-layout-inner { height: 50%; }
.overlay-loginbox { margin: -89px auto 0 auto; /* (150+(8+6)*2)/2 */ width: 300px; height: 150px; background:white; border: 8px solid #aaa; padding: 6px; z-index: 20002; }
.overlay-loginbox .title { font-size: 123.1%; margin: 8px 0; }
.overlay-loginbox .form { margin: 8px 0 8px 0;}
.overlay-loginbox .line { overflow: hidden; margin: 8px 0 8px 0; text-align: left; }
.overlay-loginbox .line label { width: 80px; text-align: right; float: left; margin: 3px; }
.overlay-loginbox .line .input { width: 180px; border: 1px solid #888; padding: 2px; }
.overlay-loginbox .messages { height: 20px; }
.overlay-loginbox .errors { color: #ff4444; font-weight: bold; }
.overlay-loginbox .buttons { margin-top: 6px; color: #aaa; }
.overlay-loginbox .buttons a { }

/* sidebar */
.sidebar { margin: 32px 0 16px 0;  }
.sidebar p { margin: 6px 0 4px 0; text-indent: 6px; }
.sidebar .sidepanel { padding: 8px; background: #eee; margin: 0 0 12px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
.sidebar p.how-to-play-it { padding: 0 0 12px 0 !important; }
.sidebar .how-to-play-it a.link { font-size:123.1%; }

/* common */
.action-menu { overflow: hidden; display: block; height: 36px; margin: 0 0 4px 0; }
.action-menu .item { float: left; display: block; height: 36px; border-right: 1px solid white; }
.action-menu .item a { color: #333; line-height: 24px; display: block; padding: 0px 16px; background: #ccc; }
.action-menu .item a:hover { background: #666; color: #fff; }
.action-menu .item .action-name { font-size: 123.1%; }
.action-menu .selected { background: url(/images/down12-aaa.png) no-repeat 50% 24px !important; }
.action-menu .selected a { color: #fff !important; background: #333 !important; }
.action-menu .selected .action-name { font-weight: bold; }


/* widget list */
.widgets-page { margin: 12px 6px; }
.widget-thumbs { overflow: auto; color: #333; }
.widget-thumbs .widget-thumb { width: 169px; height: 260px; margin-bottom: 20px; background: url(/images/widget-thumb.png) no-repeat; display: block; float: left; position: relative; background-position: 0 -260px; }
.widget-thumbs .widget-thumb-published { background-position: 0 0px !important; }
.widget-thumbs .widget-thumb a { color: #333; }
.widget-thumbs .widget-thumb .thumbnail { position: relative; top: 11px; left: 10px; width: 140px; height: 181px; display: block; }
.widget-thumbs .widget-thumb .thumbnail .img { width: 140px; height: 181px; padding: 0; margin: 0;}
.widget-thumbs .widget-thumb .name { font-size: 116%; position: relative; top: 30px; left: 10px; width: 140px; height: 20px; display: block; overflow: hidden; }
.widget-thumbs .widget-thumb .menu { font-size: 77%; position: relative; top: 40px; left: 10px; width: 140px; height: 16px; display: block; overflow: hidden; }
.widget-thumbs .widget-thumb .author { position: relative; top: 36px; left: 10px; width: 140px; height: 16px; line-height: 16px; display: block; overflow: hidden; }
.widget-thumbs .widget-thumb .author a { padding: 0 0 0 20px; display: block; height: 16px; line-height: 16px; }


.widget-detail { width: 673px; margin: 33px 0 22px 11px; background: #ccc url(/images/round-top-ccc.png) no-repeat; }
.widget-detail .inner { padding: 16px !important; }
.widget-detail hr { border-bottom: 1px solid red; }
.widget-detail-bottom { width: 673px; background: #ccc url(/images/round-bottom-ccc.png) no-repeat bottom; height: 8px; }
.widget-detail .widget-info { overflow: hidden; }
.widget-detail .capture { width: 332px; height: 414px; float: left; padding-right: 4px; overflow: hidden; background: #ccc url(/images/thumb320-noimage.png) no-repeat; }
.widget-detail .capture .img { width: 320px; height: 416px; position: relative; cursor: pointer; }
.widget-detail .capture .preview { visibility: hidden; width: 332px; height: 416px; border: none; position: relative; background: #fff; }
.widget-detail .capture .play-button { position: relative; width: 80px; height: 60px; top: 178px; left: 120px; }
.widget-detail .capture .loading { position: relative; width: 128px; height: 15px; top: 200px; left: 96px; display: none; }
.widget-detail .description { margin: 0 0 0 336px; }
.widget-detail .description-body { min-height: 322px; }
.widget-detail .parent-widget { margin: 8px 0 4px 0; height: 16px; }
.widget-detail .author { amargin-left: 336px; height: 64px; overflow: hidden; display: block; color: #333; }
.widget-detail .author .user-info { }
.widget-detail .author .user-info .name { font-size: 138.5%; }
.widget-detail .author .user-info .number { font-size: 100%; }
.widget-detail .author .user-info .profile { margin: 7px 0 0 0; }
.widget-detail .author .icon { width: 60px; height: 60px; border: 2px solid #eee; float: left; margin-right: 8px; }
.widget-detail .actions { border-top: 1px solid #aaa; padding: 0 8px; overflow: hidden; background: url(/images/round-bottom-ccc.png) no-repeat bottom; }
.widget-detail .actions .action { padding: 8px 8px; float: left; display: block; border-right: 1px solid #aaa; color: #333; }
.widget-detail .actions .action:hover { background: #aaa; }
.widget-detail .actions .widget_id { font-weight: bold; }
.widget-detail .actions .fork { background: #660033; color: #fff !important; }
.widget-detail .actions .fork:hover { background: #993366 !important; }
.widget-detail .actions .edit { background: #660033; color: #fff !important; }
.widget-detail .actions .edit:hover { background: #993366 !important; }
.widget-detail .actions .favorites { width: 7.5em; height: 16px; float: left; }
.widget-detail .icon-favorite-on { background: url('/images/icons/star_yellow.gif') 0px 0px no-repeat; padding-left: 20px; }
.widget-detail .icon-favorite-off { background: url('/images/icons/star.gif') 0px 0px no-repeat; padding-left: 20px; }
.widget-detail .icon-favorite-loading { background: url('/images/loading16-cccccc.gif') 0px 0px no-repeat; padding-left: 20px; }

.derivative-widgets h2 { font-size: 153.9%; }

.widget-comments .comment { margin: 8px 0 4px 0; padding: 0 0 16px 0; border-bottom: 1px solid #eee; }
.widget-comments .title-box { overflow: hidden; }
.widget-comments .title-box h2 { font-size: 153.9%; float: left; }
.widget-comments .title-box a { display: block; float: left; margin: 6px 0 0 8px; }
.widget-comments .comment .user-info { overflow: hidden; height: 22px; margin: 0 0 4px 0; }
.widget-comments .comment .user-info a { color: #222; }
.widget-comments .comment .user-icon { float: left; width: 20px; height: 20px; border: 1px solid #888; }
.widget-comments .comment .username { float: left; line-height: 22px; margin: 0 8px; }
.widget-comments .comment .timestamp { float: left; line-height: 14px; border-left: 1px solid #aaa; margin: 4px 0; padding: 0 0 0 8px; }
.widget-comments .leave-a-comment { margin: 20px 0 0 0; }
.widget-comments .leave-a-comment h2 { font-size: 153.9%; }
.widget-comments .leave-a-comment textarea { width: 500px; height: 150px; }

/* my-widgets */
.my-widgets { margin: 12px 6px; }

/* search-page */
.search-page { margin: 12px 6px; }
.search-page h1 { margin: 0; }
.search-page .big-form { display: block; margin: 0 auto 32px auto; width: 400px; }
.search-page label { display: block; }
.search-page input.keyword { border: 1px solid #aaa; padding: 2px; font-size: 138.5%; width: 320px; } 
.search-page .results { border-top: 1px solid #ccc; padding: 8px 0; }

/* favorites */
.favorites-page { margin: 12px 6px; }

/* dashboard */
.dashboard { margin: 12px 6px; }
.dashboard .titlebox { margin: 0 0 16px 0; padding: 0 0 2px 0; overflow: hidden; position: relative; border-bottom: 2px solid #ccc; }
.dashboard .titlebox h2 { float: left; margin: 0 16px 0 0 !important; }
.dashboard .titlebox a { float: left; position: absolute; bottom: 2px; }
.dashboard .comment { background: #eee; padding: 8px; margin: 12px 0 0 0; }
.dashboard .comment .widget-name { font-size: 123.1%; }
.dashboard .comment .body { margin: 8px 0 0 0; }
.dashboard .comment .comment-user { line-height: 16px; }
.dashboard .comment .comment-user a { padding: 0 0 0 20px; }
.dashboard .comment .timestamp { }

/* signup */
.signup-page { }
.signup-page .inner-space { margin: 12px 6px; }
.signup-page input.error { border: 2px solid #f66 !important; padding: 1px !important; }
.signup-page .form { margin: 16px 0; width: 450px; }
.signup-page .line { overflow: hidden; margin-bottom: 12px; }
.signup-page .line label { width: 100px; float: left; display: block; text-align: right; padding: 3px; }
.signup-page .line .email { padding: 3px; font-weight: bold; }
.signup-page .line input.text { width: 200px; border: 1px solid #888; padding: 2px; }
.signup-page .line input.text { width: 200px; border: 1px solid #888; padding: 2px; }
.signup-page .buttons { margin: 16px 0 0 100px; }
.signup-page .login { margin: 16px 0; }

/* login */
.login-page { margin: 12px 6px; }
.login-page .login-form { }
.login-page .login-form .formRow { overflow: hidden; margin: 2px 0; line-height: 20px; }
.login-page .login-form label { width: 5em; display: block; float:left; margin: 4px 4px 4px 0 ; text-align: right; }
.login-page .login-form .email, .login-page .login-form .password { width: 200px; display: block; float:left; border: 1px solid #aaa; padding: 2px; margin: 2px 0; }

/* edit profile */
.edit-profile { margin: 12px 6px; }
.edit-profile h2 { color: #444; font-size: 115%; height: 16px; margin: 0 0 4px 0;}
.edit-profile form { margin: 0 0 8px 0; padding: 4px; border: 1px solid #ccc; background: #eee; }
.edit-profile p { overflow: hidden; height: 27px; }
.edit-profile p.description { color: #888; height: 20px !important; margin: 0 0 0 8px; }
.edit-profile p .text, .edit-profile p .password { border: 1px solid #888; padding: 2px; margin: 3px 0; }
.edit-profile p .submit { margin: 4px 0 0 84px; }
.edit-profile p textarea { float: left; border: 1px solid #888; padding: 2px; margin: 3px 0; height}
.edit-profile p label { float: left; width: 80px; text-align: right; margin: 0 4px 0 0; line-height: 28px; }
.edit-profile p.profile-line { height: 100px !important; }
.edit-profile p.profile-line textarea { height: 90px !important; width: 300px; }
.edit-profile p.picture-line { height: 64px !important; }
.edit-profile p.picture-line img { border: 2px solid #888; }
.edit-profile p.link-to-gravatar { margin: 0 0 0 84px; }

/* user detail */
.user-detail .user-info { overflow: hidden; }
.user-detail .user-info .icon { float: left; margin: 0 8px 0 0; width: 60px; height: 60px; }
.user-detail .user-info .name { font-size: 167%; }
.user-detail .user-info .numbers { color: #888; }
.user-detail .profile { margin: 16px 0 0 0; }

/* welcome */
.welcome { }
.welcome .row { display: hidden; }
.welcome .row .col33 { width: 33%; float: left; border: 1px solid red; }
.welcome .row .col50 { width: 50%; float: left; }
.welcome p { margin: 12px 0; }
.welcome .inner-space { margin: 12px 6px; }

.welcome #bd { font-size: 116%; /* 15px */ }
.welcome #bd ul { padding: 6px 0; }
.welcome #bd li { padding: 4px 0 4px 18px; background: #eee url(/images/arrow_141.gif) 6px 9px no-repeat; margin: 8px 0px;  }
.welcome .recommend-widgets { overflow: hidden; margin: 0 0 16px 0; }
.welcome .recommend-widgets .widget-rect { display: block; width: 140px; height: 140px; float: left; border: 4px solid #ccc; margin: 0 0.5em; }
.welcome .titlebox { margin: 0 0 16px 0; padding: 0 0 2px 0; overflow: hidden; position: relative; border-bottom: 2px solid #ccc; }
.welcome .titlebox h2 { float: left; margin: 0 16px 0 0 !important; }
.welcome .titlebox a { float: left; position: absolute; bottom: 2px; }
a.twitter { background: url(/images/twitter16.png) right 1px no-repeat; padding: 0 20px 0 0; }