* { margin: 0; padding: 0; }

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

#login_pane {
    position: absolute;
    top: 350px;
    left: 150px;
    width: 300px;
}

.bodies {
	padding: 0;
	margin: 0;
    background-color: #092841;
	font-size: 12px;
	font-family: Arial, Verdana, Sans-Serif;
}

img {
    border-style: none;
}

#wrapper {
    position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
}

/* start - big block definitions */
#content_index_header {
    position: relative;
	width: 1000px;
	height: 590px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
    background: url(../images/bg_index_header.jpg) no-repeat center;
}

#content_index_middle {
    position: relative;
	width: 1000px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
    background: url(../images/bg_index_line.gif) repeat-y;
}

#content_index_footer {
    position: relative;
	width: 1000px;
	height: 430px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
    background: url(../images/bg_index_footer.jpg) no-repeat center;
}

#content {
    position: relative;
	width: 1000px;
	height: 600px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
    background: url(../images/bg_main.jpg) no-repeat center;
}

#demo_ribbon {
    float: left;
    z-Index: 10px;
    margin: 5px 0 0 3px;
    width: 118px;
    height: 110px;
    background: url(../images/demo_ribbon.png) no-repeat center;
}

#logo, #logo_center {
    position: absolute;
    top: 145px;
    left: 45px;
    width: 277px;
    height: 98px;
    cursor: pointer;
    cursor: hand;
    background: url(../images/gagapost_logo.gif) no-repeat;
}

#logo_center {
    top: 210px;
    left: 60px;
}

#gaga_avatars, #gaga_avatars_center {
    position: absolute;
    top: 78px;
    right: 22px;
    width: 199px;
    height: 69px;
    background: url(../images/gaga_avatars.gif) no-repeat;
}

#gaga_avatars_center {
    top: 350px;
    left: 100px;
}

#version_update {
    position: absolute;
    top: 550px;
    left: 70px;
    width: 236px;
    height: 24px;
    background: url(../images/update_banner.gif) no-repeat;
    text-align: center;
    color: #FFF;
    padding-top: 4px;
    cursor: pointer;
    cursor: hand;
    text-decoration: none;
    font-weight: bold;
    font-size: 12px;
}

#register {
    position: absolute;
    top: 420px;
    left: 70px;
    width: 235px;
    height: 87px;
    cursor: pointer;
    cursor: hand;
    background: url(../images/register_button.gif) no-repeat;
}

#register_c {
    position: absolute;
    top: 420px;
    left: 70px;
    width: 235px;
    height: 87px;
    cursor: pointer;
    cursor: hand;
    background: url(../images/register_button_c.gif) no-repeat;
}

#update_notes {
    position: absolute;
    top: 175px;
    left: 420px;
    width: 520px;
    text-align: left;
}

#update_notes ul {
    margin-left: 30px;
}

#register_area {
    position: absolute;
    top: 145px;
    left: 420px;
}

#register_title {
    float: left;
    width: 500px;
    height: 25px;
    background: url(../images/register_title.gif) no-repeat;
}

#register_title_c {
    float: left;
    width: 500px;
    height: 25px;
    background: url(../images/register_title_c.gif) no-repeat;
}

#signin_title {
    position: absolute;
    top: 145px;
    left: 420px;
    width: 500px;
    height: 25px;
    background: url(../images/signin_title.gif) no-repeat;
}

#login_area, #login_area_simple, #password_area_simple {
    position: absolute;
    top: 285px;
    left: 80px;
    width: 250px;
	color:#666666 !important;
	z-Index: 10;
}

#login_area_simple {
    top: 300px;
    left: 500px;
}
#password_area_simple {
    top: 300px;
    left: 500px;
    width: 300px;
}

#footer {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	height: 20px;
	text-align: center;
}

#footer_text, #footer a, #footer a:hover {
    color: #FFF;
    font-size: 11px;
}

#gaga_content {
    position: absolute;
    top: 157px;
    left: 373px;
    width: 587px;
    height: 422px;
    background: url(../images/frame_index_main.gif) no-repeat;
}

#gallery {
    float: left;
    margin: 7px 0 0 0;
    *margin: 0 0 0 0;
    width: 530px;
}
#gallery ul li {
    display: inline;
}
#gallery ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}
#gallery ul img {
    border-color: #eaf4fd;
    border-style: solid;
    border-width: 5px 5px 5px;
}
#gallery ul a:hover img {
    border-color: #eb7a0a;
    border-style: solid;
    border-width: 5px 5px 5px 5px;
    color:#71a9d2;
}
#gallery ul a:hover {
    color:#71a9d2;
}
#gallery a, a:hover {
    text-decoration: none;
}

#members_area, #posts_area {
    float: left;
    margin-top: 15px;
    margin-left: 12px;
}

#howto_area {
    float: left;
    margin-left: 20px;
    padding: 15px 0 0 5px;
    *padding: 15px 0 0 4px;
    width: 342px;
    height: 354px;
    background: url(../images/frame_index_howto.gif) no-repeat;
}

#news_area {
    float: left;
    margin-left: 5px;
    padding: 15px 0 0 5px;
    width: 587px;
    height: 354px;
    background: url(../images/frame_index_news.gif) no-repeat;
}

#activation_area {
    position: absolute;
    top: 250px;
    left: 450px;
    width: 500px;
}

#activation_area h2 {
    font-size: 16px;
}

#follow_us {
    float: left;
    margin: 0 0 0 400px;
    width: 330px;
    height: 30px;
}

#twitter_div, #plurk_div {
    float: left;
}

#twitter_icon, #plurk_icon {
    float: left;
    width: 30px;
    height: 30px;
    cursor: pointer;
    cursor: hand;
}

#twitter_icon {
    background: url(../images/twitter.png) no-repeat;
}

#plurk_icon {
    background: url(../images/plurk.jpg) no-repeat;
}

#demo_button {
    position: absolute;
    top: -12px;
    right: 50px;
    background: url(../images/demo_button.gif) no-repeat;
    width: 57px;
    height: 55px;
    cursor: pointer;
    cursor: hand;
}
/* end - big block definitions */

#lang_form {
    position: absolute;
    top: 15px;
    right: 15px;
}

/* start - Members and Posts content */
#members_title, #posts_title, #news_title, #members_title_c, #posts_title_c, #news_title_c {
    float: left;
    width: 500px;
    height: 20px;
}

#members_title {
    background: url(../images/members_title.gif) no-repeat;
}

#members_title_c {
    background: url(../images/members_title_c.gif) no-repeat;
}

#posts_title {
    background: url(../images/posts_title.gif) no-repeat;
}

#posts_title_c {
    background: url(../images/posts_title_c.gif) no-repeat;
}

#news_title {
    background: url(../images/news_title.gif) no-repeat;
    margin-left: 8px;
}

#news_title_c {
    background: url(../images/news_title_c.gif) no-repeat;
    margin-left: 8px;
}

#howto_title {
    float: left;
    width: 300px;
    height: 20px;
    margin-left: 8px;
    background: url(../images/howto_title.gif) no-repeat;
}

#howto_title_c {
    float: left;
    width: 300px;
    height: 20px;
    margin-left: 8px;
    background: url(../images/howto_title_c.gif) no-repeat;
}

#tabs, #accordion {
    float: left;
    margin-top: 10px;
    text-align: left;
}

#accordion {
    width: 560px;
    margin-left: 10px;
}
.accordion_text {
	font-family: Arial, Verdana, Sans-Serif;
    font-size: 11px;
}
.accordion_text a {
    color: blue;
}

#members_list {
    float: left;
    margin-top: 5px;
    width: 580px;
    height: 60px;
}

#posts_list {
    float: left;
    margin-top: 5px;
    width: 580px;
}
/* end - Members and Posts content */


/* start - Login form content */
#username_box, #password_box {
    float: left;
    margin-bottom: 7px;
    *margin-bottom: 0px;
}

#loginform #forgetmenot {
	float: right;
	margin: 3px 0px 5px 0;
    *margin: 0px 0px 3px 0;
	font-size: 11px;
    clear: both;
}

#loginform #forgetmenot .remember_me {
    border: 0;
    margin-right: 3px;
}

#info_box {
    float: left;
    margin-left: 70px;
    margin-top: 12px;
    width: 110px;
    font-size: 11px;
}
#info_box a {
    color: #5b5b5b;
    text-decoration: none;
}
#info_box a:hover {
    color: #5b5b5b;
    text-decoration: underline;
}

#submit_box {
    float: right;
}

#loginform #submit_box input {
    border: 0;
	width: 64px;
    height: 28px;
    cursor: pointer;
    cursor: hand;
    background: url(../images/signin_button.gif) no-repeat;
}

#loginform .user_input label, #lostpasswordform label {
    margin-bottom: 6px;
    height: 1%;
    display: block;
    text-align: right;
}
#loginform .user_input span, #lostpasswordform span {
    float: left;
    display: block;
    width: 70px;
    padding: 4px 6px 0 0;
    color: #5b5b5b;
    font-weight: bold;
}
#lostpasswordform span {
    width: 120px;
}
#loginform .user_input input, #lostpasswordform input {
    float: left;
    border: 1px solid #9e9b9b;
    background: #eaeaea;
    padding: 3px;
}
#loginform .user_input input.inputfield, #lostpasswordform input.inputfield {
    width: 165px;
}

#username_box input, #password_box input {
    filter:Alpha(opacity=100,enabled=80);
    -moz-opacity:1;          /* Moz + FF */
    opacity:1;               /* 支持CSS3的瀏覽器(FF1.5也支持) */
    background-color: #d0d0d0;
}
/* end - Login form content */

#lostpasswordform #gaga-submit {
    float: right;
	font-family: Arial, Verdana, Sans-Serif;
    color: #fff;
    border: 0;
    height: 28px;
    width: 150px;
    cursor: pointer;
    cursor: hand;
    background: url(../images/generic_button.png) no-repeat scroll left top;
    padding: 0 10px 0 10px;
}

/* start - Middle section */
#follow_us .text {
    float: left;
    margin: 12px 0 0 5px;
    cursor: pointer;
    cursor: hand;
    font-size: 10px;
}

#follow_us a, #follow_us a:hover {
    color: #5b5b5b;
    font-weight: bold;
}
/* end - Middle section */

/* start - Message and Error Area */
#msg_area_center {
    position: absolute;
    top: 200px;
    left: 500px;
    width: 300px;
}

.message, .hint, .error {
	margin: 0 0 16px 0;
	border-width: 1px;
	border-style: solid;
	padding: 7px;
	font-family: Arial, Verdana, Sans-Serif;
}
/* end - Message and Error Area */

#login_error  {
	width: 250px;
	padding: 7px;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 10px;
	text-align: center;
}

/* start - Member list css */
#members_list {
    padding-top: 0px;
    clear: both;
}

#members_list .user {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 3px;
    background: url(../images/avatar_frame.gif) no-repeat;
}

#members_list .user .avatar {
    padding: 6px 3px 5px 3px;
}
/* end - Member list css */

/* start - Member list css */
#posts_list {
    padding-top: 0px;
    clear: both;
}

#posts_list .eachpost {
    width: 560px;
    height: 80px;
}

#posts_list .author .user {
    float: left;
    width: 80px;
    height: 80px;
}

#posts_list .author .user .avatar {
    padding: 8px 0px 0px 0px;
}

#posts_list .members {
    float: left;
    text-align: left;
    padding-top: 18px;
}

#posts_list .members .title {
    font-size: 12px;
    font-weight: bold;
    color: #5e5e5e;
}

#posts_list .members .user {
    float: left;
    width: 40px;
    height: 40px;
}

#posts_list .members .user .avatar {
    padding-top: 3px;
}

#posts_list .postinfo {
    float: left;
    width: 220px;
    height: 60px;
    margin-top: 8px;
    margin-right: 10px;
    text-align: left;
}

#posts_list .title {
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    margin-top: -6px;
}

#posts_list .title a, #posts_list .title a:hover {
    text-decoration: none;
    color: #359bd7;
    font-size: 14px;
    font-weight: bold;
}

#posts_list .title a:hover {
    text-decoration: underline;
}

#posts_list .content {
    color: #3b3b3b;
    font-size: 10px;
    height: 54px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#posts_list .line {
    clear: both;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    line-height: 1px;
    background-color: #d5d5d0;
    width: 550px;
}
/* end - Member list css */

/* start - Tooltip */
.userinfo_panel {
    color: #ffffff;
    display: none;
}

.userinfo_panel_data {
    float: left;
    font-size: 0.8em;
    margin-top: 5px;
    margin-left: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
}

.userinfo_panel_img {
    float: left;
}

.userinfo_panel_update {
    float: right;
    font-size: 0.9em;
    text-align: left;
    width: 210px;
}

.userinfo_panel_update .title {
    float: left;
	overflow: hidden;
	text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
}

.userinfo_panel_update .date {
    float: right;
    width: 60px;
    text-align: right;
}
/* end - Tooltip */

/* start - Register Area */
#registration {
    float: left;
    margin-top: 20px;
    width: 560px;
    height: 360px;
}

#registration h2 {
    font-size: 16px;
}

.input_box {
    float: left;
    width: 570px;
    margin-bottom: 5px;
    *margin-bottom: 0px;
}

#setupform label {
    margin-bottom: 6px;
    height: 1%;
    display: block;
    text-align: right;
}
#setupform span {
    float: left;
    display: block;
    width: 120px;
    padding: 3px 6px 0 0;
    color: #5b5b5b;
    font-weight: bold;
}
#setupform input {
    float: left;
    border: 1px solid #9e9b9b;
    background: #eaeaea;
    padding: 1px;
}
#setupform input.input_field {
    width: 250px;
}
#setupform #agreement {
    float: left;
    text-align: left;
    font-size: 10px;
    margin-left: 35px;
    margin-top: 15px;
    width: 270px;
}
#setupform .submit {
    float: left;
    margin: 15px 0 0 15px;
    border: 0;
	width: 64px;
    height: 28px;
    cursor: pointer;
    cursor: hand;
    background: url(../images/submit_button.gif) no-repeat;
}
.note {
    float: left;
    text-align: left;
    font-size: 10px;
    margin-top: 0px;
    *margin-top: -5px;
    margin-bottom: 0px;
    *margin-bottom: 5px;
    margin-left: 130px;
}
#setupform .error {
    float: left;
    text-align: left;
    font-size: 10px;
    *margin-top: 5px;
    margin-left: 5px;
    color: #ca2525;
}

#captcha_box {
    clear: both;
    margin-top: 10px;
    *margin-top: 0px;
    width: 570px;
}
#captcha_input {
    float: left;
}
#captcha_image {
    float: left;
    margin-left: 10px;
}
#demo_link {
    float: left;
    margin-top: 12px;
    font-size: 10px;
}
.demo a:hover, .demo a:hover, #demo_link a, #demo_link a:hover {
    color: #5b5b5b;
    font-weight: bold;
}
.demo_note {
    width: 230px;
    position: absolute;
    top: 435px;
    left: 700px;
    font-size: 12px;
    border: solid 1px #5b5b5b;
    color: #800000 ;
    text-align: left;
    font-weight: bold;
    padding: 10px;
}