body{
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
background-position:50% 50%;
background-size: cover;
overflow-x: hidden;
overflow-y: overlap;
-webkit-font-smoothing: antialiased;
font-weight: 500;
image-rendering: -webkit-optimize-contrast;
}

img#body_background {
position: fixed;
left: 0;
top: 0;
z-index: -10;
}

div, p, section, img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
outline: 0px !important;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
image-rendering: initial;
}

div[contentEditable = true]
{
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;	
}

a {
	text-decoration: none;
}

input, textarea {
outline:0px !important;
-webkit-appearance:none;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
}


.signup_login_div {
position: absolute;
text-align: center;
top: 111px;
left: 350px;
}

#signup_login_title {
position: absolute;
top: 76px;
left: 42px;
background: url(../img/hooklr.png);
background-size: contain;
background-position: center;
width: 240px;
height: 95px;
background-repeat: no-repeat;
}

.signup_login_text {
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
color: rgb(233, 233, 233);
font-size: 16px;
position: absolute;
top: 186px;
width: 300px;
text-align: center;
left: 9px;
font-weight: bold;
}

.signup_login_div input {
height: 35px;
width: 202px;
font-size: 16px;
color: rgb(78, 24, 28);
margin: -2px;
display: block;
padding-left: 8px;
line-height: 18px;
margin-left: 0px;
padding-right: 23px;
border: none;
box-shadow: inset 0px 0px 2px rgb(100, 21, 21);
background: whitesmoke;
}

.login_submit_button {
border: none;
background: #3777C9;
color: whitesmoke;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
padding: 8px 0px;
border-radius: 3px;
margin-top: 25px;
cursor: pointer;
width: 232px;
text-align: center;
font-weight: bold;
}

.login_submit_button:hover {
color: white;	
}

#signup_login_input_div input[type="email"] {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

#signup_login_input_div input[type="text"] {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.change_signup_login_mode {
background: none;
border: none;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
font-size: 14px;
color: whitesmoke;
margin: 12px;
cursor: pointer;
font-weight: bold;
position: relative;
top: -5px;
}

.change_signup_login_mode:hover {
	color:white;
}

.signup_message {
background: rgba(51, 51, 51, 0.75);
color: whitesmoke;
width: 232px;
margin: 0 auto;
margin-top: 9px;
padding: 3px;
font-weight: bold;
font-size: 14px;
border-radius: 3px;
margin-bottom: -19px;
}

.story_canvas_div {
height: 100%;
overflow: hidden;
background-position: 50% 50%;
background-size: cover;
width: 100%;
cursor: pointer;
}


.story_box {
width: 290px;
height: 179px;
overflow: hidden;
margin-top: 9px;
border-radius: 5px;
box-shadow: 0px 0px 14px whitesmoke;
cursor: pointer;
position: relative;
}

.story_name {
padding-top: 4px;
background: rgb(18, 19, 19);
opacity: 0.5;
position: relative;
top: -57px;
height: 34px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-family: Impact, Arial, Microsoft Yahei;
font-size: 23px;
color: whitesmoke;
text-align: left;
padding-top: 0px;
width: 100%;
padding-left: 10px;
}


#story_display_div {
position: fixed;
text-align: center;
display: none;
z-index: 18;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}

#story_div {
width: 610px;
float: left;
position: relative;
padding: 10px;
padding-bottom: 0px;
}

#story_div .story_column {
width: 290px;
float: left;
margin-right: 15px;
}


#facebook_friend_div {
height: 600px;
overflow: scroll;
left: 990px;
top: 84px;
position: fixed;
overflow-x: hidden;
}

.facebook_friend {
box-shadow: 5px 5px 5px rgb(71, 32, 32);
padding: 5px;
height: 47px;
font-size: 13px;
width: 155px;
}

.facebook_friend img {
border-radius: 5px;
}

.facebook_friend p {
margin: 0px;
position: relative;
top: -37px;
left: 56px;
color: rgb(223, 221, 221);
}

#connect_facebook_button {
position: fixed;
left: 990px;
height: 32px;
box-shadow: 5px 5px 5px rgb(21, 21, 71);
top: 120px;
}

#connect_facebook_button img{
height: 100%;
}

#story_description {
position: relative;
background: rgba(32, 31, 31, 0.41);
color: rgb(235, 235, 235);
border-radius: 10px;
font-size: auto;
text-align: left;
padding: 10px;
margin: 0 auto;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;
display: none;
}

#curtain {
background: rgb(14, 8, 8);
z-index: 200;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
display: none;
opacity: 0.9;
}

#mystory_logo {
float: left;
left: 30px;
cursor: pointer;
background: url("../img/hooklr.png") repeat-x 0 0;
background-size: contain;
background-position: center;
width: 74px;
height: 100%;
background-repeat: no-repeat;
position: absolute;
}

#mystory_logo:hover {
color: white;
}


header {
background: rgb(100, 21, 21);
position: fixed;
width: 100%;
left: 0px;
top: 0px;
padding: 2px;
box-shadow: 0px 0px 3px rgb(29, 29, 29);
z-index: 12;
height: 40px;
}

div#create_story {
position: absolute;
height: 100%;
left: 152px;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
color: whitesmoke;
top: 16px;
line-height: 19px;
font-size: 20px;
letter-spacing: -1px;
font-weight: bold;
cursor: pointer;
}

#create_story:hover {
color: white;
}

#dropbox {
width: 100%;
position: fixed;
height: 100%;
left: 0px;
z-index: 4;
top: 0px;
}

#theme_input {
position: absolute;
font-size: 27px;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
border-radius: 5px;
border: solid 2px whitesmoke;
background: rgba(255, 255, 255, 0);
color: whitesmoke;
text-align: center;
width: 300px;
top: 62px;
z-index: 10;
left: 100px;
line-height: 33px;
}

#file_input {
opacity: 0;
position: absolute;
top: -200px;
}

#drag_video_img {
position: absolute;
opacity: 0;
bottom: 30px;
right: 0px;
width: 310px;
}

#canvas_upload_file {
position: absolute;
left: 266px;
bottom: 10px;
border-radius: 5px;
color: whitesmoke;
font-size: 17px;
z-index: 9;
background: url('../img/chunchun.png') -34px -145px;
background-size: 400px;
width: 35px;
height: 30px;
cursor: pointer;
}

#canvas_upload_file:hover {
bottom: 12px;
}

#write_comment_upload {
position: absolute;
right: 100px;
bottom: 0px;
border-radius: 5px;
color: whitesmoke;
font-size: 17px;
z-index: 9;
background-position: center;
width: 33px;
height: 28px;
cursor: pointer;
background: url(../img/chunchun.png) -66px -127px;
background-size: 350px;
}

#write_comment_upload:hover {
bottom: 2px;
}

#story_write_comment_upload {
position: relative;
left: 3px;
bottom: 2px;
border-radius: 5px;
color: whitesmoke;
font-size: 17px;
z-index: 9;
background-position: center;
width: 33px;
height: 28px;
cursor: pointer;
background: url(../img/chunchun.png) -66px -127px;
background-size: 350px;
}

#story_write_comment_upload:hover {
bottom: 3px;	
}


#submit_button {
visibility: hidden;
}


#drop_file_suggest {
position: absolute;
top: 201px;
border: dashed 3px;
width: 90%;
left: 5%;
text-align: center;
font-size: 30px;
border-color: rgb(80, 12, 12);
height: 167px;
padding-top: 100px;
border-radius: 5px;
z-index: 1;
background: rgba(80, 12, 12, 0.2);
font-weight: bold;
color: whitesmoke;
opacity: 0;
text-shadow: 0px 0px 27px black;
}


#header_text {
width: auto;
font-size: 21px;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
margin-top: 4px;
margin-left: 26px;
color: whitesmoke;
padding: 4px;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
left: 41%;
position: absolute;
}

#hooklr_logout_button {
background: url(../img/exit.png);
background-size: contain;
background-position: center;
width: 25px;
height: 25px;
position: absolute;
right: 0px;
background-repeat: no-repeat;
opacity: 0.8;
cursor: pointer;
}

#hooklr_logout_button:hover {
opacity: 1;
}

#preview {
width: 970px;
position: relative;
top: 25px;
text-align: center;
margin: 0 auto;
margin-bottom: 100px;
}

.preview_column {
width: 310px;
float: left;
position: relative;
margin-left: 2%;
}

.upload_item_box {
position: relative;
margin-bottom: 25px;
overflow: hidden;
border-radius: 5px;
width: 310px;
text-align: center;
z-index: 10;
margin: 0px 10px;
height: 267px;
}

.upload_item_box img {
border-radius: 5px;
box-shadow: 0px 0px 2px rgb(56, 13, 13);
overflow: hidden;
position: relative;
margin-bottom: 35px;
cursor: move;
}

.upload_item {
	z-index: 10;
}

.filename_description {
position: absolute;
background: rgba(37, 9, 9, 0.75);
color: rgb(214, 214, 214);
font-weight: bold;
border-radius: 5px;
border: 1px;
text-align: left;
height: 20px;
bottom: 2px;
left: 0px;
padding-left: 7px;
width: 296px;
padding-top: 5px;
padding-right: 7px;
resize: none;
font-family:  "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
font-size: 13px;
overflow: hidden;
}

.cross {
width: 49px;
height: 24px;
position: absolute;
visibility: hidden;
z-index: 12;
bottom: 240px;
left: 257px;
background: rgba(44, 44, 44, 0.59);
border-radius: 5px;
}

.cross img {
width: 20px;
height: 20px;
display: inline;
position: relative;
margin: 0 2px;
box-shadow: none;
cursor: pointer;
}

.drop_here_box {
position: absolute;
border: dashed 4px rgb(46, 6, 6);
width: 200px;
height: 112px;
top: 55px;
z-index: 6;
left: 50px;
visibility: hidden;
opacity: 1;
}

#canvas_submit_file {
position: absolute;
left: 413px;
top: 69px;
border-radius: 2px;
color: whitesmoke;
background: #529ecc;
border: none;
font-size: 16px;
padding: 6px 8px;
z-index: 9;
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif, "MingLiU";
cursor: pointer;
}

#canvas_submit_file:hover {
color: white;
}

#story_audio_waiting {
position: absolute;
top: 117px;
z-index: 10;
left: 70%;
width: 300px;
height: 26px;
border-radius: 5px;
}

audio {
visibility: hidden;
}


#story_trends {
width: 269px;
top: 68px;
left: 765px;
height: 298px;
background: rgba(100, 21, 21, 0.3);
padding: 5px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
text-align: center;
}

div.home_page_story_trends_story_cover {
position: relative;
width: 100%;
height: 70px;
}

div.home_page_story_trends_outer {
position: relative;
display: inline-block;
width: 125px;
background: rgba(245, 245, 245, 0.95);
margin: 4px;
border-radius: 3px;
overflow: hidden;
box-shadow: inset 0px 0px 1px rgb(56, 56, 56);
}

div.home_page_story_trends_story_cover {
position: relative;
width: 100%;
height: 70px;
box-shadow: inset 0px 1px 1px rgb(56, 56, 56);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
cursor: pointer;
}

div.home_page_story_trends_story_name {
font-size: 13px;
color: rgb(100, 21, 21);
text-align: left;
padding: 1px 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 3px;
}

div.home_page_story_trends_story_description {
font-size: 12px;
text-align: left;
padding: 0px 6px;
padding-bottom: 4px;
font-weight: 300;
color: rgb(61, 60, 60);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

div.home_page_story_trends_outer {
position: relative;
display: inline-block;
width: 125px;
background: whitesmoke;
margin: 4px;
}

#trends_title {
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
font-size: 21px;
color: whitesmoke;
background: -webkit-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
background: -o-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
background: moz-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
background: linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
width: 258px;
height: 35px;
padding-left: 16px;
padding-top: 5px;
padding-bottom: 3px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
line-height: 34px;
padding-right: 5px;
font-weight: bold;
letter-spacing: -1px;
}

.story_trends_box {
height: 112px;
width: 180px;
text-align: center;
margin: 0px 9px;
float: left;
border: solid whitesmoke;
border-width: 4px;
border-radius: 2px;
border-bottom: 46px solid whitesmoke;
}

.story_trends_name {
position: absolute;
width: 131px;
margin-top: 6px;
max-height: 19px;
overflow: hidden;
font-size: 14px;
color: rgb(70, 13, 13);
bottom: 0px;
text-align: left;
padding-left: 4px;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
}

.trends_img_div {
height: 112px;
width: 180px;
box-shadow: 0px 0px 2px;
overflow: hidden;
background-position: 50% 50%;
background-size: cover;
cursor: pointer;
}

#story_trends_in_index {
height: 136px;
padding: 17px;
margin-top: -71px;
border-radius: 5px;
position: inherit;
top: 78px;
}

#story_trends_in_index #trends_title {
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 21px;
color: rgb(54, 8, 8);
margin-left: 10px;
}


#user_profile_img {
width: 90px;
height: 90px;
position: relative;
top: 9px;
overflow: hidden;
border-radius: 5px;
box-shadow: 1px 1px 2px rgb(43, 7, 7);
background-color: transparent;
background-position: 50% 50%;
background-size: cover;
}

#user_profile_name {
position: absolute;
left: 95px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
font-size: 24px;
bottom: 8px;
color: whitesmoke;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-overflow: ellipsis;
overflow: hidden;
width: 383px;
word-break: break-all;
white-space: nowrap;
font-weight: bold;
}

#subscribe_button {
position: absolute;
right: 25px;
border: none;
background: whitesmoke;
height: 21px;
width: 70px;
color: rgb(100, 21, 21);
border-radius: 3px;
bottom: 30px;
font-weight: bolder;
cursor: pointer;
font-size: 13px;
margin-bottom: 6px;
display: none;
text-align: center;
}


#subscribe_button:hover {
background: white;
}

#content {
width: 865px;
margin: 0 auto;
position: relative;
}

#content_left {
width: 550px;
float: left;
position: relative;
top: 75px;
background: rgba(100, 21, 21, 0.3);
border-radius: 7px;
padding-left: 9px;
margin-right: 22px;
min-height: 1px;
margin-bottom: 100px;
}

#content_right {
position: relative;
width: 278px;
float: left;
top: 74px;
overflow-x: hidden;
padding: 2px;
}

#create_first {
background: rgba(56, 12, 12, 0.54);
color: rgb(196, 196, 196);
width: 300px;
font-size: 29px;
text-align: center;
font-family: Impact, Arial, Microsoft Yahei;
padding: 7px;
border-style: dotted;
border-color: rgb(58, 13, 13);
border-radius: 5px;
cursor: pointer;
margin-bottom: -20px;
display: none;
margin-top: 10px;
}

#create_first:hover {
color: white;
}

#header_right {
position: absolute;
right: 38px;
float: right;
top: 10px;
width: 340px;
}

#setting_field {
width: 26px;
height: 26px;
background: url(../img/settings.png);
background-size: cover;
background-position: center;
cursor: pointer;
float: right;
margin-left: 100px;
position: absolute;
left: 175px;
opacity: 0.8;
}

#setting_field:hover {
opacity: 1;
}

#search_field {
position: relative;
float: left;
height: 19px;
width: 170px;
border-radius: 20px;
padding-left: 28px;
font-size: 13px;
color: rgb(100, 21, 1);
background: whitesmoke;
border: none;
top: 3px;
font-weight: 300;
line-height: 17px;
}

#header_right img {
position: absolute;
width: 23px;
top: 3px;
left: 2px;
background: url(../img/search_icon.png);
background-size: cover;
background-position: center;
height: 21px;
z-index: 1;
}

header img {
position: absolute;
width: 22px;
left: 130px;
top: 14px;
}

#setting_box {
position: absolute;
right: 33px;
background: whitesmoke;
padding: 2px;
border-radius: 5px;
top: 58px;
color: rgb(93, 22, 28);
box-shadow: 0px 0px 3px rgb(36, 36, 36);
visibility: hidden;
width: 155px;
}

.setting_pick_box {
padding: 6px;
border-radius: 2px;
cursor: pointer;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 14px;
font-weight: bold;
}

.setting_pick_box:hover {
background:	rgb(93, 22, 28);
color: whitesmoke;
}

#sign_out_div {
border-top: solid 2px;
}

#setting_box img {
position: absolute;
left: 115px;
top: -12px;
height: 12px;
background: url(../img/chunchun.png) -200px -110px;
background-size: 420px;
}

#theme_drop {
width: 97%;
background: rgba(71, 13, 13, 0.58);
border: dotted;
position: fixed;
top: 54px;
border-radius: 5px;
z-index: 100;
text-align: center;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 40px;
color: whitesmoke;
padding-top: 40px;
display: none;
height: 80%;
}

#theme_drop button {
position: absolute;
right: 10px;
top: 10px;
background: #3b5998;
border: solid 1px;
border-radius: 3px;
color: whitesmoke;
padding-left: 16px;
padding-right: 16px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 15px;
box-shadow: 0px 0px 4px rgb(8, 24, 54);
cursor: pointer;
}

#theme_drop button:hover {
color: white;
}

#change_profile_img {
width: 54px;
height: 57px;
background: rgba(85, 20, 20, 0.68);
position: absolute;
bottom: 7px;
border-radius: 5px;
border: dotted;
text-align: center;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
color: rgb(218, 218, 218);
display: none;
font-size: 11.4px;
left: 19px;
}

#user_profile {
height: 53px;
background: -webkit-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0));
background: -o-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0));
background: moz-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0));
background: linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0));
position: relative;
left: -9px;
padding: 11px;
width: 528px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
padding-left: 20px;
padding-bottom: 14px;
margin-bottom: 8px;
}

#user_profile_img {
width: 60px;
height: 60px;
position: relative;
top: -2px;
overflow: hidden;
border-radius: 2px;
box-shadow: 0px 0px 2px rgb(29, 29, 29);
background-color: black;
background-position: 50% 50%;
background-size: cover;
}

#change_profile_img_cancel {
background: #3b5998;
border: solid 1px;
border-radius: 3px;
color: whitesmoke;
padding-left: 16px;
padding-right: 16px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 11px;
box-shadow: 0px 0px 3px rgb(8, 24, 54);
cursor: pointer;
position: absolute;
bottom: 72px;
left: -8px;
}

#change_profile_img_cancel:hover {
color: white;	
}

.trends_editor {
position: relative;
background-repeat: no-repeat;
background-color: black;
height: 40px;
width: 40px;
background-size: cover;
background-position: 50% 50%;
left: 140px;
border-radius: 3px;
box-shadow: 0px 0px 1px;
bottom: -3px;
cursor: pointer;
}


.trends_editor div {
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 8px;
position: relative;
top: -5px;
left: 4px;
background-position:50% 50%;
background-size: cover;
z-index: 3
}


.trends_editor p {
position: relative;
left: 54px;
width: 144px;
overflow: hidden;
font-size: 13px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
background: rgba(29, 29, 29, 0.35);
height: 29px;
padding: 0px;
margin-left: -54px;
padding-left: 69px;
bottom: 60px;
padding-top: 37px;
border-radius: 3px;
z-index: 2;
top: -81px;
color: white;
}

.trends_editor a {
color: whitesmoke;
}


#friend_list {
background: rgba(100, 21, 21, 0.3);
overflow: scroll;
overflow-x: hidden;
position: relative;
padding: 5px;
height: auto;
max-height: 380px;
width: 268px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
margin-bottom: 40px;
overflow: hidden;
margin-left: 2px;
left: -1px;
}

.friend {
padding: 5px;
font-size: 13px;
cursor: pointer;
background-position: 50% 50%;
background-size: cover;
width: 40px;
height: 40px;
border-radius: 5px;
margin: 5px;
box-shadow: 0px 0px 1px rgb(51, 51, 51);
position: relative;
}

.friend_name {
position: relative;
left: 64px;
font-size: 15px;
color: snow;
width: 188px;
bottom: 13px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: bold;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
}

.friend_word {
position: relative;
width: 196px;
bottom: 25px;
left: 65px;
color: beige;
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
}

#friend_title {
position: relative;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
font-size: 21px;
color: whitesmoke;
margin-left: 1px;
background: -webkit-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
background: -o-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
background: moz-linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
background: linear-gradient(rgba(100, 21, 21, 0.8), rgba(100, 21 ,21, 0.3));
width: 257px;
height: 35px;
padding-left: 16px;
padding-top: 5px;
padding-bottom: 3px;
margin-top: 18px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
line-height: 34px;
padding-right: 5px;
font-weight: bold;
letter-spacing: -1px;
}

.friend span {
background: rgb(197, 36, 36);
border: solid rgb(235, 235, 235);
border-width: 2px;
border-radius: 38px;
padding: 1px 2px;
text-align: center;
color: whitesmoke;
position: relative;
left: 36px;
bottom: 35px;
font-size: 10px;
font-weight: bold;
padding-top: 0px;
position: absolute;
}

#create_up {
height: 154px;
position: relative;
text-align: center;
margin: 0 auto;
width: 475px;
padding-left: 6px;
border-radius: 6px;
box-shadow: 0px 0px 3px black;
z-index: 11;
background: rgba(100, 21, 21, 0.3);
}


#story_thumbnail {
width: 76px;
height: 76px;
position: absolute;
top: 64px;
border-radius: 5px;
border: 2px dotted whitesmoke;
background: rgba(70, 11, 14, 0.2);
background-position: 50% 50%;
background-size: cover;
box-shadow: 1px 1px 4px rgb(133, 133, 133);
background-repeat: no-repeat;
left: 10px;
}

#story_thumbnail span {
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
color: rgb(238, 238, 238);
font-size: 16px;
}

#delete_story_button {
position: absolute;
left: 413px;
top: 113px;
border-radius: 2px;
color: whitesmoke;
background: #9da6af;
border: none;
font-size: 16px;
padding: 6px 9px;
z-index: 9;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
cursor: pointer;
}

#delete_story_button:hover {
color: white;
}

#story_audio_div {
width: 151px;
height: 19px;
position: absolute;
bottom: 10px;
border-radius: 5px;
border: 2px dotted whitesmoke;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
color: whitesmoke;
font-size: 13px;
left: 100px;
background-position: left;
background-size: cover;
z-index: 10;
font-weight: bold;
background-size: contain;
background-repeat: no-repeat;
padding-top: 6px;
}

#upload_video {
border-radius: 5px;
height: 235px;
overflow: scroll;
position: inherit;
margin-bottom: 35px;
}

#video_drag_canvas {
position: inherit;
bottom: 276px;
z-index: 10;
display: inline;
cursor: pointer;
width: 310px;
height: 200px;
}

#display_story {
	max-height: 100%;
	max-width: 100%;
}




#cancel_login_button {
position: fixed;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url('../img/Button-Delete-128.png');
background-size: cover;
}

#cancel_photo_display {
position: fixed;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
cursor: pointer;
background: url(../img/chunchun.png) -32px -220px;
background-size: 360px;
z-index: 1000;
box-shadow: 0px 0px 5px whitesmoke;
border-radius: 20px;
opacity: 0.8;
}

#cancel_photo_display:hover {
opacity: 1;
}

.story_setting img {
width: 22px;
cursor: pointer;
margin: 4px 2px;
opacity: 0.8;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}

.story_setting img:hover {
opacity: 1;
}


.story_setting {
position: absolute;
right: 0px;
top: 0px;
width: auto;
background: rgba(0, 0, 0, 0.58);
border-bottom-left-radius: 5px;
opacity: 0;
height: 31px;
padding: 0px 2px;
}

.progress {
background: rgb(100, 21, 21);
height: 22px;
position: absolute;
bottom: 30px;
z-index: 10;
border-radius: 5px;
width: 0%;
padding-top: 6px;
color: whitesmoke;
text-align: left;
}

#theme_progress {
background: rgb(100, 21, 21);
height: 22px;
position: absolute;
z-index: 10;
border-radius: 5px;
width: 0%;
padding-top: 6px;
color: whitesmoke;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
text-align: left;
}

#theme_progress_div {
height: 28px;
width: 180px;
position: absolute;
top: 8px;
right: 95px;
border: none;
border-radius: 5px;
}

#theme_progress p {
position: relative;
bottom: 24px;
font-size: 20px;
text-align: left;
padding-left: 7px;
}

#profile_img_progress {
height: 17px;
position: relative;
bottom: 0px;
background: rgb(100, 21, 21);
width: 0%;
border-radius: 5px;
border: none;
text-align: left;
}

#profile_img_progress p {
position: relative;
bottom: 11px;
}

.audio_progress {
background: rgb(100, 21, 21);
height: 19px;
position: absolute;
bottom: 0px;
border-radius: 5px;
width: 0%;
padding-top: 6px;
color: whitesmoke;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
text-align: left;
}

.progress p{
margin: 0 8px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
}

.audio_progress p{
margin: -1px 8px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
}

#signup_login_block {
position: relative;
margin: 0 auto;
width: 640px;
height: 200px;
top: 3%;
}

.story_trends_box2 {
height: 75px;
width: 120px;
float: left;
text-align: center;
margin: 4px 4px 4px 4px;
border: 3px solid whitesmoke;
border-bottom: 28px solid whitesmoke;
border-radius: 2px;
background-color: rgb(100, 21, 21);
}

.trends_img_div2 {
height: 75px;
width: 120px;
overflow: hidden;
background-position: 50% 50%;
background-size: cover;
cursor: pointer;
}

.story_trends_name2 {
position: absolute;
margin-top: 6px;
max-height: 19px;
overflow: hidden;
font-size: 12px;
color: rgb(100, 21, 21);
text-align: left;
padding-left: 1px;
width: 85px;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
}


.trends_editor2 {
position: relative;
background-repeat: no-repeat;
background-color: black;
height: 24px;
width: 24px;
background-size: cover;
background-position: 50% 50%;
left: 95px;
border-radius: 4px;
box-shadow: 0px 0px 2px black;
bottom: -2px;
cursor: pointer;
}

#more_trends_button {
position: absolute;
top: 15px;
right: 0px;
border: none;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
font-size: 18px;
color: transparent;
cursor: pointer;
line-height: 30px;
letter-spacing: -1px;
background: url(../img/more.png);
background-size: contain;
height: 20px;
background-repeat: no-repeat;
}


.trends_editor3 {
width: 70px;
height: 70px;
background-size: cover;
border-radius: 5px;
box-shadow: 0px 0px 6px black;
left: 225px;
bottom: 64px;
position: relative;
cursor: pointer;
margin-bottom: -65px;
}

.trends_editor3:hover {
width: 71px;
}

#change_username_input {
position: absolute;
height: 25px;
border: 2px solid rgb(100, 21, 21);
border-radius: 3px;
width: 202px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 19px;
padding-left: 4px;
color: rgb(100, 21, 21);
background: whitesmoke;
bottom: 32px;
left: 97px;
opacity: 0;
margin-right: -17px;
}

#change_username_button {
position: absolute;
bottom: 6px;
left: 320px;
border-radius: 2px;
background: whitesmoke;
color: rgb(100, 21, 21);
border: none;
height: 22px;
width: 50px;
cursor: pointer;
font-size: 12px;
opacity: 0;
font-weight: bold;
line-height: 19px;
}

#change_username_button:hover {
background: white;
}

#delete_confirm_block {
background: rgba(100, 21, 21, 0.22);
width: 200px;
opacity: 0;
margin: 0 auto;
padding: 12px 0px;
box-shadow: 2px 2px 4px black;
border-radius: 5px;
color: whitesmoke;
font-weight: bold;
display: none;
height: 72px;
margin-top: 154px;
box-shadow: 0px 0px 10px whitesmoke;
}

#delete_confirm {
margin-top: 23px;
background: rgb(47, 116, 47);
border: 1px solid whitesmoke;
border-radius: 3px;
height: 25px;
color: whitesmoke;
font-size: 13px;
box-shadow: 1px 1px 1px black;
cursor: pointer;
font-weight: bold;
}

#delete_confirm:hover {
color: white;
}

#delete_cancel {
margin-top: 23px;
background: #3b5998;
border: 1px solid whitesmoke;
border-radius: 3px;
height: 25px;
color: whitesmoke;
font-size: 13px;
box-shadow: 1px 1px 1px black;
cursor: pointer;
font-weight: bold;
}

#delete_cancel:hover {
color: white;
}

#search_result_box {
position: absolute;
right: 142px;
background: whitesmoke;
padding-top: 4px;
padding-left: 4px;
top: 48px;
font-size: 16px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
color: rgb(93, 22, 28);
box-shadow: 2px 2px 6px rgb(63, 16, 16);
width: 165px;
border-radius: 6px;
visibility: hidden;
max-height: 273px;
overflow: hidden;
}

.search_result {
position: relative;
height: 50px;
border-radius: 3px;
border-bottom: 5px solid whitesmoke;
width: 157px;
cursor: pointer;
}

.search_result:hover {
background: rgb(231, 231, 231);
}

.search_result_image {
width: 50px;
height: 50px;
background-size: cover;
background-position: center;
border-radius: 2px;
box-shadow: 1px 1px 2px black;
}	

.search_result_username {
position: relative;
left: 58px;
width: 102px;
bottom: 58px;
height: 40px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}

.search_result_userwords {
position: absolute;
top: 18px;
font-size: 12px;
left: 59px;
font-weight: bold;
width: 93px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 300;
color: rgb(66, 66, 66);
}

#search_result_box img {
position: absolute;
left: 115px;
top: -12px;
height: 12px;
background: url(../img/chunchun.png) -200px -110px;
background-size: 420px;
}

#large_search_field {
position: relative;
top: 280px;
width: 272px;
text-align: center;
border-radius: 5px;
padding-bottom: 7px;
box-shadow: 0px 0px 5px;
display: none;
background: rgba(100, 21, 21, 0.3);
padding-top: 1px;
padding-bottom: 21px;
}

#large_search_field p {
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 20px;
color: whitesmoke;
margin: 12px;
font-weight: bold;
}

#large_search_field input[type="text"] {
height: 19px;
width: 170px;
border-radius: 20px;
padding-left: 29px;
font-size: 14px;
color: rgb(100, 21, 21);
border: none;
}

#large_search_field img {
position: absolute;
width: 26px;
left: 34px;
margin-top: -1px;
}

.people_result_block {
width: 149px;
float: left;
margin: 1px 14px;
border-radius: 6px;
height: 143px;
box-shadow: 0px 0px 3px rgb(100, 21, 21);
background: white;
}

.people_top {
position: relative;
height: 45px;
background: whitesmoke;
top: -5px;
border-radius: 5px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
box-shadow: 0px 0px 1px rgb(100, 21 ,21);
cursor: pointer;
}

.people_img {
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
border-radius: 5px;
box-shadow: 0px 0px 3px;
margin: 5px;
position: relative;
top: 3px;
cursor: pointer;
}

.people_name {
position: relative;
bottom: 42px;
left: 51px;
color: rgb(100, 21, 21);
font-weight: bold;
width: 92px;
margin: 8px 0px;
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}

.people_search_words {
position: absolute;
top: 14px;
font-size: 12px;
font-weight: bold;
left: 52px;
width: 94px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: dimgray;
}

.people_story_canvas_div {
background-size: cover;
width: 140px;
height: 87px;
margin: 0 auto;
border-radius: 5px;
box-shadow: 0px 0px 6px;
position: relative;
bottom: -2px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.79);
}

.people_story_name {
background: rgba(0, 0, 0, 0.57);
color: rgb(228, 223, 223);
width: 126px;
height: 21px;
padding: 0px 7px;
position: relative;
left: 5px;
bottom: 19px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
font-weight: bold;
word-break: break-all;
overflow: hidden;
}

.people_story_name p {
margin-top: 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.story_name p {
padding-right: 5px;
width: 95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 32px;
overflow: hidden;
font-weight: bold;
}

#people_result {
position: absolute;
top: 43px;
height: 190px;
left: 0;
padding-top: 15px;
padding-left: 1%;
padding-right: 1%;
width: 98%;
text-align: center;
background: rgba(100, 21, 21, 0.3);
box-shadow: 0px 1px 2px dimgray;
}

#people_left {
position: fixed;
width: 58px;
height: 32px;
top: 102px;
z-index: 100;
background-size: initial;
border-radius: 40px;
left: -13px;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
padding-top: 10px;
padding-bottom: 10px;
}

#arrow_left {
width: 29px;
height: 29px;
cursor: pointer;
opacity: 0.5;
background: url(../img/chunchun.png) -54px -171px;
background-size: 350px;
margin-right: 3px;
position: relative;
bottom: 1px;
}

#arrow_left:hover {
opacity: 1;
}

#trends_left {
position: fixed;
width: 44px;
height: 32px;
bottom: 78px;
z-index: 10;
border-radius: 40px;
left: -13px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
background: url(../img/chunchun.png) -113px -70px;
background-size: 550px;
}

#people_right {
position: fixed;
width: 58px;
height: 32px;
top: 102px;
z-index: 10;
background-size: initial;
border-radius: 40px;
right: -13px;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
padding-top: 10px;
padding-bottom: 10px;

}

#arrow_right {
width: 30px;
height: 32px;
z-index: 10;
cursor: pointer;
opacity: 0.5;
position: relative;
bottom: -2px;
background: url(../img/chunchun.png) -76px -171px;
background-size: 350px;
}

#arrow_right:hover {
opacity: 1;
}

#trends_right {
position: fixed;
width: 46px;
height: 32px;
bottom: 78px;
z-index: 10;
border-radius: 40px;
right: -13px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
background: url(../img/chunchun.png) -153px -70px;
background-size: 550px;
}

#story_result {
position: relative;
margin: 0 auto;
width: 100%;
top: 280px;
text-align: center;
}

#story_result .story_column {
width: 300px;
float: left;
margin-left: 10px;
}

.search_story_div {
float: left;
margin: 5px;
border: 5px solid whitesmoke;
}

.search_story_img {
height: 183px;
}

.search_story_canvas {
width: 290px;
height: 179px;
background-size: cover;
background-position: center;
border-radius: 4px;
cursor: pointer;
}

.search_story_blcok {
background: whitesmoke;
width: 290px;
border: 5px solid whitesmoke;
border-radius: 4px;
display: inline-block;
max-height: 226px;
margin: 2px 5px;
position: relative;
overflow: hidden;
animation: scale_show 0.5s;
-webkit-animation: scale_show 0.5s; /* Safari and Chrome */
}

.search_editor_image {
height: 44px;
width: 44px;
background-size: cover;
background-position: center;
position: relative;
top: 3px;
left: 243px;
border-radius: 5px;
box-shadow: 0px 0px 3px rgb(100, 21, 21);
cursor: pointer;
background-color: black;
}

.search_story_name {
position: relative;
color: rgb(100, 21, 21);
bottom: 57px;
height: 23px;
overflow: hidden;
width: 229px;
font-size: 18px;
padding-left: 5px;
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 22px;
font-weight: bold;
}

.search_story_editor {
position: relative;
font-size: 13px;
color: dimgrey;
text-align: right;
bottom: 75px;
right: 0px;
height: 16px;
overflow: hidden;
width: 234px;
}

#trends_page_content {
width: 100%;
position: absolute;
top: 100px;
text-align: center;
}

#trends_wrap {
position: absolute;
width: 98%;
overflow: hidden;
overflow-x: hidden;
height: 258px;
background: rgba(100, 21, 21, 0.3);
left: -1px;
padding-top: 8px;
bottom: 0px;
box-shadow: 0px 0px 12px;
padding-left: 1%;
padding-right: 1%;
text-align: center;
}

.trends_story_editor {
position: relative;
bottom: 24px;
width: 118px;
left: 16px;
font-size: 11px;
color: dimgray;
text-align: right;
height: 14px;
overflow: hidden;
}

.search_facebook_share {
width: 22px;
cursor: pointer;
background: url(../img/chunchun.png) -99px -12px;
background-size: 391px;
box-shadow: 0px 0px 5px rgb(34, 199, 133);
}


.trend_facebook_share {
width: 22px;
cursor: pointer;
background: url(../img/chunchun.png) -104px -13px;
background-size: 410px;
box-shadow: 0px 0px 5px rgb(34, 199, 133);
border-radius: 13px;
}

.facebook_share {
background: url(../img/chunchun.png) -103px -13px;
background-size: 406px;
box-shadow: 0px 0px 5px rgb(34, 199, 133);
border-radius: 11px;
}

.story_setting_img {
background: url(../img/chunchun.png) -200px -12px;
background-size: 390px;
}


#view_photos {
position: fixed;
width: 100%;
height: 100%;
z-index: 15;
display: none;
left: 0;
top: 0;
box-shadow: 0px 0px 5px whitesmoke;
background: #45484d;
background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, black 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #45484d), color-stop(100%, black));
background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%, black 100%);
background: -o-radial-gradient(center, ellipse cover, #45484d 0%, black 100%);
background: -ms-radial-gradient(center, ellipse cover, #45484d 0%, black 100%);
background: radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%);
}

#view_photo_img {
max-width: 80%;
max-height: 80%;
position: absolute;
}

#view_photo_description {
position: relative;
bottom: 0px;
width: 100%;
background: rgba(100, 21, 21, 0.4);
padding: 10px;
box-shadow: 0px 0px 5px whitesmoke;
color: whitesmoke;
text-align: center;
max-height: 12%;
overflow-y: scroll;
font-size: 16px;
opacity: 0;
white-space: pre-line;
}

#wrap_cover {
position: absolute;
height: 218px;
width: 100%;
left: 0px;
overflow-y: hidden;
z-index:1;
}

#select_switch {
position: absolute;
left: 311px;
width: 88px;
bottom: 10px;
font-weight: bold;
font-size: 12px;
background: whitesmoke;
border-radius: 5px;
padding: inherit;
height: 31px;
cursor: pointer;
z-index: 11;
}

#select_switch:hover {
background: white;
}

#switch_text {
width: 64px;
color: rgb(100, 21, 21);
margin: 3px 0px;
position: relative;
left: 19px;
margin: 0px;
cursor: pointer;
font-size: 13px;
line-height: 12px;
margin-top: 3px;
}


#switch_circle {
height: 90%;
position: absolute;
width: 19px;
background: rgb(100, 21, 21);
top: 5%;
border-radius: 4px;
left: 2px;
box-shadow: 0px 0px 6px;
cursor: pointer;
}

#comment_div {
position: fixed;
display: none;
width: 50%;
z-index: 16;
left: 25%;
bottom: 60px;
border-radius: 2px;
background: rgba(100, 21, 21, 0.3);
box-shadow: 0px 0px 5px;
min-width: 400px;
}

.comment_user_image {
width: 40px;
height: 40px;
background-position: center;
background-size: cover;
position: relative;
left: 5px;
top: 5px;
border-radius: 2px;
box-shadow: 0px 0px 1px;
cursor: pointer;
z-index: 2;
}

.comment_user_image:hover {
box-shadow: 0px 0px 2px whitesmoke;
}


#write_comment_box {
position: relative;
width: 100%;
left: 0%;
top: 0%;
margin: 12px;
padding-bottom: 6px;
margin-bottom: 6px;
}

.comment {
border-bottom: 1px solid silver;
position: relative;
margin: 2px 8px;
}

.comment:hover {
background: rgba(100, 21, 21, 0.2);
border-radius: 5px;
}

.comment_user_name {
position: relative;
left: 52px;
bottom: 35px;
font-size: 14px;
color: cornsilk;
width: 70%;
font-weight: bold;
}

.comment_text {
padding-left: 52px;
position: relative;
bottom: 32px;
color: snow;
font-size: 14px;
margin-bottom: -3px;
padding-right: 70px;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

.comment_created_time {
position: relative;
top: 0px;
left: 8px;
font-size: 13px;
color: whitesmoke;
}

.reply_comment {
position: relative;
cursor: pointer;
width: 16px;
height: 16px;
background-position: center;
background-repeat: no-repeat;
float: right;
right: 18px;
background: url(../img/chunchun.png) -98px -128px;
background-size: 260px;
}

.reply_comment:hover {
opacity: 1;
}

.like_comment_button {
position: absolute;
cursor: pointer;
height: 13px;
font-family: Hevetical Neue, Arial;
color: whitesmoke;
font-size: 12px;
float: right;
top: 40px;
right: 26px;
text-align: center;
font-weight: bold;
width: 20px;
}

.kiss {
height: 29px;
position: absolute;
bottom: 14px;
left: -5px;
box-shadow: 0px 0px 2px whitesmoke;
border-radius: 30px;
background: rgba(255, 255, 255, 0.59);
background-image: url(../img/chunchun.png);
background-size: 320px;
}

.kiss:hover {
transform: scale(1.05);
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05);
}

.kiss_story:hover {
transform: scale(1.05);
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05);
}

#comment_editor_img {
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
border-radius: 2px;
float: left;
box-shadow: 0px 0px 1px;
background-color: rgba(100, 21, 21, 0.8);
}

#get_comment {
width: 26px;
height: 27px;
margin-left: 11px;
margin-right: 12px;
opacity: 0.5;
position: relative;
bottom: 1px;
cursor: pointer;
background: url(../img/chunchun.png) -36px -198px;
background-size: 400px;
}

#get_comment:hover{
	opacity: 1;
}

#img_controll_buttons {
position: fixed;
bottom: 10px;
margin: 0 auto;
width: 100%;
text-align: center;
z-index: 2;
}

#img_loader {
position: fixed;
left: 49%;
top: 40%;
background: rgba(0, 0, 0, 0.61);
border-radius: 5px;
width: 36px;
box-shadow: 0px 0px 3px whitesmoke;
display: none;
}

#story_loader {
position: fixed;
left: 49%;
top: 40%;
background: rgba(0, 0, 0, 0.61);
border-radius: 5px;
width: 36px;
box-shadow: 0px 0px 3px whitesmoke;
display: block;
}


#comment_triangle {
position: fixed;
width: 20px;
bottom: 45px;
left: 49%;
opacity: 0.9;
display: none;
height: 13px;
}


#post_button {
position: absolute;
right: 31px;
float: right;
border-radius: 2px;
cursor: pointer;
bottom: 3px;
background: skyblue;
color: rgb(100, 21, 21);
font-size: 13px;
font-weight: bold;
padding: 3px 14px;
border: none;
box-shadow: 0px 0px 2px white;
}

#post_button:hover {
color: whitesmoke;
}

.comment_buttons {
height: auto;
width: auto;
border-radius: 2px;
bottom: 22px;
left: 42px;
padding-right: 35px;
position: relative;
opacity: 0;
}

.comment_buttons div:hover{
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1);
}

.reply_text {
margin-left: 53px;
margin-top: -4px;
border: none;
border-radius: 2px;
background: beige;
padding: 5px;
display: none;
margin-bottom: 32px;
font-size: 13px;
color: dimgray;
box-shadow: 0px 0px 3px;
min-height: 30px;
}

.reply_post_button, .edit_post_button, .confirm_delete_comment_button {
background-color: rgba(0, 0, 0, 0.44);
border: none;
border-radius: 2px;
position: absolute;
bottom: 2px;
right: 1px;
display: block;
cursor: pointer;
background: #529ecc;
font-size: 12px;
font-weight: bold;
padding: 5px 14px;
color: whitesmoke;
}

.reply_post_button:hover {
color: white;
}

.edit_post_button:hover {
color: white;	
}

.confirm_delete_comment_button:hover {
color: white;
}

.cancel_reply_button{
border: none;
border-radius: 2px;
position: absolute;
bottom: 2px;
right: 57px;
cursor: pointer;
display: block;
float: left;
background: #9da6af;
font-size: 12px;
color: whitesmoke;
padding: 5px 7px;
font-weight: bold;
}

.cancel_reply_button:hover {
color: white;
}

.cancel_delete_comment_button {
border: none;
border-radius: 2px;
position: absolute;
bottom: 2px;
right: 69px;
cursor: pointer;
display: block;
float: left;
background: #9da6af;
font-size: 12px;
color: whitesmoke;
padding: 5px 7px;
font-weight: bold;
}

.cancel_delete_comment_button:hover {
color: white;
}

.delete_confirm_div p {
margin: 0px;
border-top: 2px dotted whitesmoke;
text-align: right;
padding: 0px 4px;
color: whitesmoke;
margin-bottom: 28px;
font-size: 14px;
}

.parent_content {
padding: 5px;
position: relative;
font-size: 13px;
font-weight: bold;
color: whitesmoke;
border-left: 2px solid skyblue;
margin-left: 7px;
text-align: left;
}

.edit_comment_button {
position: relative;
cursor: pointer;
height: 16px;
font-size: 13px;
float: right;
width: 16px;
right: 10px;
background: url(../img/chunchun.png) -120px -128px;
background-size: 260px;
}

.delete_comment_button {
position: relative;
cursor: pointer;
height: 16px;
font-size: 13px;
float: right;
width: 16px;
background: url(../img/chunchun.png) -140px -128px;
background-size: 260px;
right: 5px;
}

#confirm_delete_comment_div {
position: fixed;
margin: 3% 17%;
width: 200px;
z-index: 1;
text-align: center;
background: rgba(100, 21, 21, 0.3);
color: snow;
padding: 8px 0px;
border-radius: 5px;
font-weight: bold;
font-size: 15px;
display: none;
box-shadow: 0px 0px 20px whitesmoke;
}

#delete_comment_button {
margin-top: 11px;
background: rgb(47, 116, 47);
border: 1px solid whitesmoke;
border-radius: 3px;
height: 25px;
color: whitesmoke;
font-size: 13px;
box-shadow: 1px 1px 1px black;
cursor: pointer;
font-weight: bold;
}

#delete_comment_button:hover {
color: white;	
}

#cancel_comment_delete {
margin-top: 11px;
background: #3b5998;
border: 1px solid whitesmoke;
border-radius: 3px;
height: 25px;
color: whitesmoke;
font-size: 13px;
box-shadow: 1px 1px 1px black;
cursor: pointer;
font-weight: bold;
}

#cancel_comment_delete:hover {
color: white;	
}

.like_story {
color: whitesmoke;
position: absolute;
width: 30px;
font-size: 12px;
font-weight: bold;
top: 2px;
text-align: center;
padding-top: 26px;
background: rgba(0, 0, 0, 0.37);
border-radius: 5px;
height: auto;
left: 2px;
padding-bottom: 3px;
cursor: pointer;
}

.kiss_story {
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
}

#redirect_signup_login {
position: fixed;
left: 40%;
text-align: center;
top: 20%;
z-index: 200;
display: none;
}

#redirect_title {
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 36px;
color: rgb(97, 42, 42);
text-shadow: 1px 1px 4px rgb(83, 18, 29);
width: 300px;
margin: 0;
}

#redirect_catpion {
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
color: whitesmoke;
font-size: 15px;
}

#redirect_signup_login input{
height: 30px;
width: 226px;
font-size: 16px;
color: rgb(78, 24, 28);
padding-left: 8px;
margin: -1px;
border-style: solid;
border-color: rgb(107, 47, 23);
border-width: 2px;
}

#redirect_login input[type="email"] {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

#signup_email, #redirect_signup_email {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

#login_password {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

#signup_username, #redirect_signup_username {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

#redirect_login_button {
border: none;
background: rgb(85, 20, 20);
color: whitesmoke;
font-size: 20px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
padding: 3px 87px;
border-radius: 3px;
margin-top: 18px;
cursor: pointer;
}

#redirect_login_button:hover {
color: white;	
}

#redirect_signup_button {
border: none;
background: rgb(85, 20, 20);
color: whitesmoke;
font-size: 20px;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
padding: 3px 87px;
border-radius: 3px;
margin-top: 18px;
cursor: pointer;
}

#redirect_signup_button:hover {
color: white;
}

.redirect_change_mode {
background: none;
border: none;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
font-size: 15px;
color: whitesmoke;
margin: 12px;
cursor: pointer;
}

.redirect_change_mode:hover {
color: white;	
}

.redirect_login_message {
color: whitesmoke;
margin-top: 8px;
padding: 3px;
font-weight: bold;
font-size: 14px;
margin: 6px;
margin-bottom: -15px;
display: none;
}

.comment_img {
max-width: 60%;
border-radius: 2px;
box-shadow: 0px 0px 2px;
}

.upload_item {
max-width: 302px;
max-height: 229px;
border: 3px solid whitesmoke;
}

.comment_reply_upload {
width: 30px;
height: 30px;
position: absolute;
left: 2px;
bottom: 1px;
background-position: center;
background-size: cover;
display: block;
cursor: pointer;
background: url(../img/chunchun.png) -55px -105px;
background-size: 300px;
}

.comment_reply_upload:hover {
bottom: 2px;
}

#delete_audio {
position: absolute;
width: 11px;
bottom: 20px;
left: 22px;
display: none;
box-shadow: 0px 0px 3px;
border-radius: 6px;
background: url(../img/chunchun.png) -116px 43px;
background-size: 214px;
}

#user_words {
position: absolute;
top: 38px;
left: 97px;
color: rgb(223, 223, 223);
font-size: 14px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
width: 400px;
word-break: break-all;
white-space: nowrap;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
}

#change_user_words {
position: absolute;
bottom: 5px;
left: 98px;
width: 194px;
background: beige;
padding: 2px 7px;
font-size: 14px;
border-radius: 2px;
color: rgb(100, 21, 21);
display: none;
border: none;
font-weight: bold;
}

#display_like_story {
color: whitesmoke;
position: absolute;
width: 30px;
font-size: 12px;
font-weight: bold;
top: 2px;
text-align: center;
padding-top: 26px;
border-radius: 5px;
height: auto;
right: 55px;
padding-bottom: 3px;
cursor: pointer;
z-index: 10;
}

#display_like_story img{
border: none;
box-shadow: none;
}

#index_choose_language {
position: absolute;
width: 85px;
color: whitesmoke;
font-weight: bold;
font-size: 13px;
border-radius: 3px;
padding-bottom: 6px;
padding-top: 3px;
right: 20px;
top: 10px;
cursor: pointer;
z-index: 2;
height: 14px;
line-height: 17px;
text-align: center;
}

#index_choose_language span {
padding: 0px 18px;
}


#index_language_div {
text-align: center;
position: relative;
left: -8px;
background: whitesmoke;
color: rgb(100, 21, 21);
width: 89px;
top: 6px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 2px;
box-shadow: 0px 0px 2px rgb(100, 21, 21);
display: none;
}

.index_pick_language {
padding: 2px 0px;
border: 1px solid whitesmoke;
}

.index_pick_language:hover {
background: rgb(100, 21, 21);
color: whitesmoke;
}

#index_choose_language img {
width: 13px;
position: absolute;
top: 3px;
left: 77px;
background: url(../img/chunchun.png) -26px -20px;
background-size: 170px;
height: 14px;
}

#reset_password_img {
width: 20px;
position: absolute;
top: 41px;
right: 9px;
opacity: 0.8;
cursor: pointer;
background: url(../img/chunchun.png) -28px -46px;
background-size: 320px;
}

#reset_pass_email {
font-size: 16px;
color: rgb(78, 24, 28);
margin: -1px;
border-radius: 5px;
-webkit-touch-callout: auto;
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}

#password_email {
height: 35px;
width: 203px;
font-size: 16px;
color: rgb(78, 24, 28);
padding-left: 8px;
margin: -1px;
border-width: 2px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: block;
margin-bottom: -19px;
}

#reset_password_enter {
width: 203px;
font-size: 16px;
color: rgb(78, 24, 28);
padding-left: 8px;
margin: -1px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin-top: 19px;
}

.home_invite {
box-shadow: 0px 0px 5px red;
border-radius: 10px;
background: url(../img/chunchun.png) -69px -13px;
background-size: 401px;
}

#invite_block {
z-index: 201;
position: fixed;
width: 400px;
left: 50%;
top: 20%;
margin-left: -200px;
border-radius: 3px;
background: whitesmoke;
padding-bottom: 37px;
overflow: hidden;
height: 40%;
}

#invite_header {
width: 400px;
height: 29px;
box-shadow: 0px 0px 5px whitesmoke;
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
text-align: center;
padding-top: 8px;
position: fixed;
z-index: 3;
color: rgb(66, 65, 65);
font-weight: bold;
}

#invite_content {
position: relative;
top: 38px;
height: 100%;
}


#invite_search_icon {
position: absolute;
width: 30px;
z-index: 2;
left: 13px;
background: url(../img/chunchun.png) -118px -97px;
background-size: 380px;
top: 1px;
}

#invite_search_field {
border: none;
position: relative;
padding-left: 36px;
background: whitesmoke;
color: rgb(100, 21, 21);
height: 26px;
font-size: 14px;
left: 14px;
width: 336px;
box-shadow: 0px 0px 1px dimgray;
border-radius: 2px;
}

.following_in_invite {
background-position: center;
width: 50px;
background-size: cover;
height: 50px;
position: relative;
margin-left: 13px;
border-radius: 2px;
margin-bottom: -7px;
bottom: 11px;
}

.invite_friend_name {
position: relative;
left: 64px;
font-size: 15px;
color: rgb(100, 21, 21);
width: 188px;
bottom: -7px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-weight: bold;
}

.invite_friend_word {
position: relative;
width: 196px;
bottom: 4px;
left: 65px;
color: rgb(71, 71, 71);
font-size: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

#inviting {
padding: 4px 0px;
position: relative;
left: 1px;
width: 398px;
max-height: 80%;
}

.invite_button {
position: absolute;
bottom: 13px;
left: 306px;
background: whitesmoke;
text-align: center;
font-size: 14px;
font-weight: bold;
color: rgb(100, 21, 21);
border-radius: 1px;
cursor: pointer;
padding: 3px 2px;
width: 60px;
box-shadow: 0px 0px 1px;
}

.invite_button:hover {
background: white;
}

#invite_header_img {
position: absolute;
width: 30px;
height: 30px;
border-radius: 3px;
box-shadow: 0px 0px 4px whitesmoke;
bottom: 4px;
left: 4px;
}

#receive_invite_block {
position: fixed;
bottom: 10px;
width: 300px;
height: 111px;
left: 50%;
margin-left: -150px;
background: rgba(100, 21, 21, 0.5);
border-radius: 5px;
box-shadow: 0px 0px 5px whitesmoke;
display: none;
opacity: 0;
}

#invite_people_image {
background-position: center;
background-size: cover;
width: 30px;
height: 30px;
position: absolute;
border-radius: 2px;
top: 3px;
left: 10px;
box-shadow: 0px 0px 2px whitesmoke;
margin-top: 4px;
}

#invite_people_image {
background-position: center;
background-size: cover;
width: 30px;
height: 30px;
position: absolute;
border-radius: 2px;
top: 3px;
left: 10px;
box-shadow: 0px 0px 2px whitesmoke;
cursor: pointer;
}

#invite_story_thumbnail {
background-position: center;
background-size: cover;
width: 94px;
height: 58px;
top: 45px;
position: absolute;
left: 9px;
border-radius: 3px;
box-shadow: 0px 0px 3px whitesmoke;
cursor: pointer;
}

#invite_people_name {
position: absolute;
left: 47px;
color: beige;
bottom: 59px;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
width: 189px;
overflow: hidden;
text-overflow: ellipsis;
}

#invite_story_editor_img {
background-position: center;
background-size: cover;
width: 25px;
height: 25px;
top: 78px;
position: absolute;
border-radius: 2px;
left: 111px;
cursor: pointer;
}

#invite_story_editor_name {
position: absolute;
left: 143px;
top: 78px;
color: beige;
font-size: 12px;
font-weight: bold;
width: 148px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

#skip_invite {
width: 48px;
height: 20px;
background: whitesmoke;
position: absolute;
top: 10px;
right: 10px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: rgb(100, 21, 21);
border-radius: 2px;
box-shadow: 0px 0px 3px whitesmoke;
cursor: pointer;
line-height: 20px;
}

#skip_invite:hover {
background: beige;
}

#invite_story_name {
position: absolute;
top: 51px;
left: 110px;
color: azure;
font-weight: bold;
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.trend_invite {
width: 22px;
cursor: pointer;
box-shadow: 0px 0px 5px red;
border-radius: 10px;
background: url(../img/chunchun.png) -69px -13px;
background-size: 401px;
}

.search_invite {
width: 22px;
cursor: pointer;
box-shadow: 0px 0px 5px red;
border-radius: 10px;
background: url(../img/chunchun.png) -69px -13px;
background-size: 401px;
}


#failed_browser {
position: fixed;
height: 100%;
width: 100%;
text-align: center;
margin-top: 10%;
}

#failed_browser img {
width: 20%;
}

#failed_browser p {
font-size: initial;
font-weight: bold;
color: whitesmoke;
padding: 0px 5%;
}

#failed_browser h1 {
font-family: "Helvetica Neue", "Helvetica", "Microsoft Yahei", Arial, sans-serif, "MingLiU";
color: rgb(100, 21, 21);
font-weight: bold;
}

#create_pencil_icon {
background: url(../img/add_content.png);
background-size: cover;
background-position: center;
width: 20px;
top: 15px;
}

.delete_button {
background: url(../img/chunchun.png) -165px -149px;
background-size: 308px;
}

.home_button {
background: url(../img/chunchun.png) -91px -114px;
background-size: 308px;
}

.trend_icons {
position: absolute;
top: 0px;
right: 0px;
height: 22px;
opacity: 0;
background: rgba(0, 0, 0, 0.6);
padding: 4px 2px;
border-bottom-left-radius: 2px;
}

.trend_icons img {
margin: 0px 2px;
opacity: 0.8;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}

.trend_icons img:hover {
opacity: 1;
}

#trends_left_div {
position: fixed;
width: 58px;
height: 32px;
bottom: 78px;
z-index: 10;
background-size: initial;
border-radius: 40px;
left: -13px;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}

#trends_right_div {
position: fixed;
width: 58px;
height: 32px;
bottom: 78px;
z-index: 10;
background-size: initial;
border-radius: 40px;
right: -13px;
opacity: 0;
background: rgba(0, 0, 0, 0.5);
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}

.create_stamp {
position: absolute;
top: 31px;
right: 1px;
color: whitesmoke;
z-index: 10;
font-size: 14px;
font-weight: bold;
padding-left: 10px;
padding-right: 5px;
border: 1px solid whitesmoke;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
border-right: none;
cursor: pointer;
min-width: 36px;
padding-top: 1px;
padding-bottom: 1px;
line-height: 17px;
height: 17px;
}


.stamp {
position: absolute;
top: -1px;
cursor: pointer;
}

.stamp_point {
width: 8px;
height: 8px;
position: absolute;
border-radius: 2px;
cursor: pointer;
z-index: 2;
margin-left: -8px;
}

.stamp_name {
position: relative;
width: auto;
bottom: 31px;
border-radius: 16px;
padding: 0px 10px;
font-size: 13px;
line-height: 21px;
left: -50%;
border: 1px solid white;
box-shadow: 0px 0px 3px rgb(100, 21, 21);
color: whitesmoke;
cursor: pointer;
white-space: nowrap;
}



@keyframes scale_show
{
	0%   {transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 0;}
	100% {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); opacity: 1;}
}

@-webkit-keyframes scale_show /* Safari and Chrome */
{
	0%   {transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 0;}
	100% {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); opacity: 1;}
}

@keyframes fade_in
{
	0%   { opacity: 0;}
	100% { opacity: 1;}
}

@-webkit-keyframes fade_in /* Safari and Chrome */
{
	0%   { opacity: 0;}
	100% { opacity: 1;}
}

#share_page {
text-align: center;
}

.social_share_icon {
display: inline-block;
width: 100px;
height: 100px;
top: 50%;
border-radius: 5px;
cursor: pointer;
position: relative;
margin: -45px 18px;
}

#share_to_facebook {
background: url(../img/share.png) -21px -24px;
background-size: 142px;
}

#share_to_facebook:hover {
box-shadow: 0px 0px 10px rgb(0, 122, 255);
}

#share_to_weibo {
background: url(../img/share.png) -21px -301px;
background-size: 142px;
}

#share_to_weibo:hover {
box-shadow: 0px 0px 10px rgb(221, 221, 28);
}

#share_to_twitter {
background: url(../img/share.png) -21px -163px;
background-size: 142px;
}

#share_to_twitter:hover {
box-shadow: 0px 0px 10px rgb(0, 163, 255);
}


.comment_in_story {
position: relative;
width: 200px;
margin: 5px;
float: left;
box-shadow: 0px 0px 3px white;
border-radius: 2px;
animation: scale_show 0.5s;
-webkit-animation: scale_show 0.5s; /* Safari and Chrome */
}

.story_comment_editor_img {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 5px;
border-radius: 2px;
box-shadow: 0px 0px 3px whitesmoke;
}

.story_comment_editor_name {
position: relative;
width: 100px;
text-align: left;
left: 52px;
font-size: 14px;
color: white;
font-weight: bold;
top: 14px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.kiss_comment {
height: 29px;
position: absolute;
top: -28px;
left: -11px;
box-shadow: 0px 0px 2px whitesmoke;
border-radius: 30px;
background: rgba(255, 255, 255, 0.59);
background-image: url(../img/chunchun.png);
background-size: 320px;
cursor: pointer;
}

.kiss_comment:hover {
transform: scale(1.05);
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05);
}

.story_comment_like_button {
position: absolute;
color: white;
font-weight: bold;
text-align: center;
font-size: 13px;
top: 33px;
right: 24px;
cursor: pointer;
}

.story_comment_like_button span {
position: absolute;
}

.story_comment_content {
font-size: 14px;
color: whitesmoke;
text-align: left;
padding: 4px 8px;
line-height: 18px;
}

#write_comment {
margin-left: 50px;
border: none;
background: beige;
border-radius: 2px;
padding: 7px;
font-size: 13px;
color: dimgray;
box-shadow: 0px 0px 3px;
min-height: 50px;
margin-bottom: 24px;
}

#write_comment_after_show {
position: relative;
width: 400px;
left: 50%;
margin-left: -200px;
top: 30%;
border: 5px solid rgba(100, 21, 21, 0.6);
border-radius: 5px;
background: rgba(100, 21, 21, 0.3);
box-shadow: 0px 0px 30px black;
animation: scale_show 0.5s;
-webkit-animation: scale_show 0.5s;
}

#user_img {
height: 40px;
width: 40px;
position: absolute;
border-radius: 2px;
box-shadow: 0px 0px 3px whitesmoke;
left: 3px;
top: 3px;
background-color: rgb(100, 21, 21);
}

#story_write_comment {
width: auto;
background: beige;
text-align: left;
padding: 2px 5px;
font-weight: normal;
font-size: 14px;
margin-bottom: 31px;
color: dimgray;
overflow: overlay;
height: 181px;
position: relative;
top: 27px;
}

#post_story_write_comment {
position: absolute;
background: #529ecc;
border-radius: 2px;
padding: 5px 16px;
font-size: 14px;
color: whitesmoke;
cursor: pointer;
right: 1px;
bottom: 3px;
font-weight: bold;
width: 30px;
}

#post_story_write_comment:hover {
color: white;
}


#story_control_board {
position: absolute;
width: 62%;
height: 50px;
z-index: 18;
background: rgba(100, 21, 21, 0.6);
bottom: 30px;
border-radius: 5px;
box-shadow: 0px 0px 3px black;
left: 18%;
min-width: 500px;
}

#story_backwards {
background: url(../img/chunchun.png) -109px -276px;
width: 25px;
height: 25px;
position: absolute;
top: 13px;
left: 13px;
box-shadow: 0px 0px 7px whitesmoke;
border-radius: 15px;
opacity: 0.8;
cursor: pointer;
background-size: 452px;
}

#story_backwards:hover {
opacity: 1;
}

#play_pause_story {
width: 30px;
height: 30px;
position: absolute;
top: 10px;
left: 43px;
box-shadow: 0px 0px 7px whitesmoke;
border-radius: 15px;
opacity: 0.8;
cursor: pointer;
background: url(../img/chunchun.png) -48px -332px;
background-size: 544px;
}

#play_pause_story:hover {
opacity: 1;
}

#story_forwards {
background: url(../img/chunchun.png) -144px -276px;
width: 25px;
height: 25px;
background-size: 452px;
position: absolute;
top: 13px;
left: 78px;
box-shadow: 0px 0px 7px whitesmoke;
border-radius: 15px;
opacity: 0.8;
cursor: pointer;
}

#story_forwards:hover {
opacity: 1;
}

#volume_div {
width: 80px;
position: absolute;
top: 22px;
height: 6px;
left: 118px;
background: rgb(131, 36, 36);
border: 1px solid rgb(36, 16, 16);
border-radius: 3px;
opacity: 0.8;
cursor: pointer;
}

#volume_div:hover {
opacity: 1;
}

#volume_track {
position: relative;
height: 100%;
width: 62%;
border-right: 3px;
background: rgb(95, 14, 14);
border-radius: 3px;
cursor: pointer;
}

#volume_controller {
position: absolute;
width: 6px;
height: 6px;
background: rgb(100, 21, 21);
top: -4px;
border: 4px solid whitesmoke;
left: 62%;
border-radius: 15px;
margin-left: -8px;
cursor: pointer;
}

#volume_img {
background: url(../img/chunchun.png) -93px -122px;
background-size: 200px;
width: 16px;
height: 12px;
position: absolute;
left: 206px;
top: 20px;
opacity: 0.62;
}

#story_schedule {
width: 80px;
position: absolute;
left: 219px;
text-align: right;
padding: 0px 8px;
color: whitesmoke;
font-size: 12px;
top: 18px;
}

#cancel_story_display {
width: 50px;
height: 50px;
position: absolute;
top: 0px;
right: 0px;
opacity: 0.8;
cursor: pointer;
background: url(../img/chunchun.png) -296px -321px;
box-shadow: 0px 0px 6px rgb(58, 14, 14);
border-radius: 5px;
background-size: 540px;
}

#cancel_story_display:hover {
opacity: 1;
}

#story_track_div {
width: 80px;
position: absolute;
top: 22px;
height: 6px;
left: 315px;
background: rgb(131, 36, 36);
border: 1px solid rgb(36, 16, 16);
border-radius: 3px;
opacity: 0.8;
cursor: pointer;
}

#story_track {
position: relative;
height: 100%;
border-right: 3px;
background: rgb(95, 14, 14);
border-radius: 3px;
cursor: pointer;
width: 0%;
}

#story_track_div:hover {
opacity: 1;
}

#story_track_controller {
position: absolute;
width: 6px;
height: 6px;
background: rgb(100, 21, 21);
top: -4px;
border: 4px solid whitesmoke;
left: 0%;
border-radius: 15px;
margin-left: -8px;
cursor: pointer;
z-index: 5;
}

#story_comment_wrap {
position: absolute;
width: 80%;
height: 100%;
padding: 0px 20px;
background: rgba(100, 21, 21, 0.61);
right: 100%;
z-index: 16;
box-shadow: 0px 0px 6px whitesmoke;
}

#comment_trigger_button {
writing-mode: lr-tb;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
top: 20%;
right: -67px;
background: rgba(100, 21, 21, 0.61);
padding: 8px 7px;
line-height: 18px;
color: whitesmoke;
font-weight: normal;
border: 2px solid whitesmoke;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0px 2px 5px dimgrey;
cursor: pointer;
}

#write_comment_username {
position: relative;
color: whitesmoke;
font-weight: bold;
top: 25px;
width: 143px;
left: 53px;
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 20px;
}

.edit_comment_div {
height: 21px;
position: relative;
}

.editable_area {
background: beige;
text-align: left;
font-size: 14px;
padding: 0px 4px;
color: dimgray;
height: 180px;
overflow: overlay;
}

.edit_comment_block {
margin-bottom: 30px;
}

.link_icon {
box-shadow: 0px 0px 5px rgb(54, 91, 138);
border-radius: 16px;
}


.link_tip {
width: 0px;
height: 0px;
margin: 0 auto;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgba(100, 21, 21, 0.87);
position: absolute;
left: 50%;
margin-left: -5px;
top: -12px;
}

#link_box {
text-align: center;
width: auto;
border: 2px solid rgba(100, 21 ,21 ,0.8);
line-height: 20px;
padding: 0px 7px;
color: whitesmoke;
background: rgba(100, 21, 21, 0.3);
box-shadow: 0px 0px 5px whitesmoke;
border-radius: 5px;
font-size: 13px;
-webkit-user-select: initial;
-khtml-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
cursor: text;
}

.trend_link_icon {
width: 23px;
cursor: pointer;
}

div#new_story_div {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 100;
background: rgba(34, 11, 11, 0.87);
}

div#new_story_block {
width: 400px;
height: 455px;
background: snow;
border-radius: 3px;
position: relative;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -215px;
}

div#new_story_block_cover {
position: absolute;
width: 86px;
height: 86px;
background-image: url(../img/newstory.png);
background-size: cover;
background-position: center;
border-radius: 3px;
margin: 20px;
cursor: pointer;
box-shadow: inset 0px 0px 3px darkgoldenrod;
background-color: beige
}

input#new_story_block_input_name {
position: absolute;
top: 20px;
border: none;
padding: 11px 5px;
width: 250px;
left: 123px;
font-size: 16px;
text-align: center;
border-radius: 2px;
box-shadow: inset 0px 0px 3px darkgoldenrod;
color: darkgoldenrod;
font-weight: bold;
}

input#new_story_block_input_description {
position: absolute;
top: 71px;
border: none;
padding: 8px 5px;
width: 250px;
left: 123px;
font-size: 14px;
text-align: center;
border-radius: 2px;
box-shadow: inset 0px 0px 3px darkgoldenrod;
color: darkgoldenrod;
}

div#cancle_new_story_block {
position: absolute;
border-radius: 2px;
right: 81px;
bottom: 7px;
cursor: pointer;
background: dimgray;
color: whitesmoke;
font-size: 13px;
padding: 5px 0px;
width: 57px;
text-align: center;
}

div#new_story_block_line {
position: absolute;
background: darkgoldenrod;
width: 90%;
left: 5%;
top: 114px;
height: 1px;
}

input#new_story_block_search {
position: absolute;
width: 352px;
left: 20px;
padding: 7px 5px;
border: none;
box-shadow: inset 0px 0px 3px darkgoldenrod;
top: 118px;
border-radius: 2px;
color: darkgoldenrod;
}

div#new_story_block_people_div {
position: absolute;
top: 152px;
width: 362px;
padding: 0px 22px;
max-height: 145px;
}

div.new_story_block_friend_div {
position: relative;
width: 100%;
padding: 2px 0px;
height: 35px;
cursor: pointer;
border-radius: 2px;
}

div.new_story_block_friend_div:hover {
background: whitesmoke;
}

div.new_story_block_friend_invite {
position: absolute;
width: 22px;
height: 22px;
border-radius: 20px;
cursor: pointer;
border: 2px solid darkgoldenrod;
top: 7px;
left: 7px;
}

div.new_story_block_friend_invite[select="1"] {
background: url(../img/selected.png);
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
}

div.new_story_block_friend_profile_image {
position: absolute;
width: 35px;
height: 35px;
left: 48px;
border-radius: 2px;
cursor: pointer;
}

div.new_story_block_friend_name {
position: absolute;
width: 200px;
left: 100px;
top: 10px;
line-height: 18px;
cursor: pointer;
color: rgb(70, 70, 70);
font-size: 13px;
}


div#new_story_block_update_cover {
position: absolute;
width: 100%;
height: 69px;
background: rgba(0, 0, 0, 0.45);
color: whitesmoke;
font-size: 14px;
line-height: 15px;
text-align: center;
border-radius: 3px;
font-weight: bold;
padding-top: 17px;
opacity: 0;
cursor: pointer;
}

div#new_story_block_1 {
position: relative;
width: 400px;
height: 455px;
}

div#new_story_block_create_button {
position: absolute;
bottom: 7px;
background: rgb(45, 100, 172);
color: whitesmoke;
font-size: 13px;
padding: 5px 0px;
border-radius: 2px;
right: 16px;
cursor: pointer;
width: 57px;
text-align: center;
}

div#new_story_block_post_button:hover {
color: white;
}

div#new_story_block_update_button {
position: absolute;
bottom: 7px;
background: rgb(45, 100, 172);
color: whitesmoke;
font-size: 13px;
padding: 5px 0px;
border-radius: 2px;
right: 16px;
cursor: pointer;
width: 57px;
text-align: center;
}

div#quit_group_button {
position: absolute;
bottom: 7px;
background: darkgoldenrod;
color: whitesmoke;
font-size: 13px;
padding: 5px 18px;
border-radius: 2px;
right: 16px;
cursor: pointer;
}

div#new_story_block_tags_div {
position: absolute;
background: white;
width: 364px;
height: 26px;
bottom: 41px;
left: 19px;
box-shadow: inset 0px 0px 3px darkgoldenrod;
border-radius: 2px;
font-size: 12px;
color: dimgray;
overflow-y: hidden;
overflow-x: hidden;
cursor: text;
}

#new_story_block_tag_img {
position: relative;
width: 18px;
height: 20px;
background: url('../img/tag.png');
background-size: contain;
background-position: center;
top: 3px;
background-repeat: no-repeat;
display: inline-block;
margin-right: 4px;
left: 2px;
}

input#new_story_add_tags {
position: relative;
border: none;
color: dimgrey;
bottom: 3px;
margin-left: 5px;
}

div.new_story_block_tag {
position: relative;
height: 16px;
background: beige;
padding: 3px 8px;
border: 1px solid rgb(199, 198, 198);
border-radius: 2px;
top: -3px;
margin-left: 1px;
display: inline-block;
padding-right: 16px;
front-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
}

.new_story_block_tag_delete_button {
position: absolute;
width: 8px;
height: 8px;
background: url('../img/delete.png');
background-size: cover;
background-position: center;
top: 8px;
right: 4px;
cursor: pointer;
background-repeat: no-repeat;
}

.story_inner_tag_img {
position: relative;
width: 17px;
height: 16px;
background: url('../img/tag2.png');
background-size: contain;
background-position: center;
top: 3px;
background-repeat: no-repeat;
display: inline-block;
margin-right: 4px;
margin-left: 13px;
}

div.story_outer {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
border-radius: 5px;
background: -webkit-linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
background: -o-linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
background: -moz-linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
background: linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
margin-right: 20px;
float: left;
margin-bottom: 20px;
box-shadow: inset 0px 0px 3px rgb(87, 87, 87);
}

img#upload_waiting_gif {
position: absolute;
width: 52px;
top: 174px;
right: 15px;
}

#create_story_waiting_gif {
position: absolute;
width: 52px;
bottom: 12px;
right: 19px;
}

div.story_inner {
text-align: left;
position: absolute;
}

div.story_background {
position: relative;
width: 100%;
height: 140px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
overflow: hidden;
box-shadow: inset 0px 1px 2px rgb(77, 74, 74);
}

div.story_inner_tag {
position: relative;
display: inline-block;
background: dimgray;
font-size: 12px;
padding: 1px 7px;
color: whitesmoke;
border-radius: 2px;
bottom: 1px;
box-shadow: 0px 0px 1px rgb(182, 182, 182);
cursor: pointer;
margin-right: 4px;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
}

div.story_inner_name {
position: relative;
color: rgb(100, 21, 21);
font-size: 15px;
font-weight: bold;
padding: 10px 15px;
}

div.story_inner_description {
position: relative;
color: rgb(80, 79, 79);
font-size: 13px;
padding: 0px 15px;
margin-top: -4px;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
}

div.story_inner_tags_div {
position: absolute;
top: 82px;
max-width: 240px;
width: 240px;
overflow: hidden;
max-height: 22px;
}

div.story_operation_board {
position: absolute;
height: 28px;
width: 100%;
bottom: -28px;
}

.new_story_like[like_status='false'] {
background-image: url(../img/icon-kiss.png);
background-size: cover;
background-position: center;
width: 24px;
height: 24px;
position: absolute;
left: 5px;
top: 1px;
cursor: pointer;
background-color: rgba(53, 51, 51, 0.69);
border-radius: 3px;
}


.new_story_like[like_status='true'] {
background-image: url(../img/icon-kiss2.png);
background-size: cover;
background-position: center;
width: 24px;
height: 24px;
position: absolute;
left: 5px;
top: 1px;
cursor: pointer;
background-color: rgba(53, 51, 51, 0.69);
border-radius: 3px;
}

span.new_story_like_num_span {
position: absolute;
left: 30px;
font-size: 12px;
color: whitesmoke;
top: 5px;
text-shadow: 0px 2px 3px rgb(48, 47, 47);
}

.new_story_link {
background: url(../img/link_new.png);
background-size: cover;
background-position: center;
width: 23px;
height: 23px;
position: absolute;
right: 56px;
top: 2px;
box-shadow: 0px 0px 5px rgb(134, 8, 8);
border-radius: 20px;
cursor: pointer;
}

.new_story_invite {
background: url(../img/invite_new.png);
background-size: cover;
background-position: center;
width: 22px;
height: 22px;
position: absolute;
right: 30px;
top: 3px;
box-shadow: 0px 0px 3px rgb(29, 83, 105);
border-radius: 20px;
cursor: pointer;
}

.new_story_share {
background: url(../img/share_new.png);
background-size: cover;
background-position: center;
width: 22px;
height: 22px;
position: absolute;
right: 4px;
top: 3px;
box-shadow: 0px 0px 3px rgb(20, 126, 20);
border-radius: 20px;
cursor: pointer;
}

div#display_story_outer {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 100;
overflow: scroll;
min-height: 600px;
padding-right: 40px;
overflow-x: hidden;
}

div#display_story_inner {
position: relative;
height: 200%;
overflow: hidden;
width: 100%;
padding-right: 17px;
}


div#display_story_inner_1 {
position: absolute;
width: 100%;
height: 50%;
background: url(../img/story_bg5.png);
background-size: contain;
text-align: center;
z-index: 3;
}


div#display_story_inner_2 {
position: absolute;
width: 100%;
height: 50%;
top: 50%;
overflow-y: scroll;
background: rgba(34, 16, 16, 0.63);
}

div#display_story_inner_operate {
position: absolute;
width: 100%;
height: 38px;
top: 10px;
z-index: 1;
}

#display_story_inner_like {
position: absolute;
width: 25px;
height: 25px;
background-image: url(../img/icon-kiss.png);
background-size: cover;
background-position: center;
background-color: rgba(77, 75, 75, 0.79);
border-radius: 2px;
left: 45px;
cursor: pointer;
box-shadow: 0px 0px 3px;
}

#display_story_inner_like[like_status='true'] {
background-image: url(../img/icon-kiss2.png);
background-size: cover;
background-position: center;
}

#display_story_inner_link {
position: absolute;
width: 25px;
height: 25px;
background: url(../img/link_new.png);
background-size: cover;
background-position: center;
right: 100px;
cursor: pointer;
box-shadow: 0px 0px 3px maroon;
border-radius: 20px;
margin-right: 17px;
}

#display_story_inner_invite {
position: absolute;
width: 25px;
height: 25px;
background: url(../img/invite_new.png);
background-size: cover;
background-position: center;
right: 70px;
border-radius: 20px;
cursor: pointer;
box-shadow: 0px 0px 3px rgb(11, 59, 87);
margin-right: 17px;
}

#display_story_inner_share {
position: absolute;
width: 25px;
height: 25px;
background: url(../img/share_new.png);
background-size: cover;
background-position: center;
right: 40px;
border-radius: 20px;
cursor: pointer;
box-shadow: 0px 0px 3px rgb(3, 41, 3);
margin-right: 17px;
}

#display_story_inner_setting {
position: absolute;
width: 25px;
height: 25px;
background: url(../img/setting_new.png);
background-size: cover;
background-position: center;
right: 10px;
cursor: pointer;
box-shadow: 0px 0px 3px rgb(114, 114, 27);
border-radius: 20px;
margin-right: 17px;
}

div#display_story_inner_tittle {
position: relative;
font-size: 40px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: white;
top: 10%;
text-shadow: 0px 7px 23px rgb(53, 53, 53);
padding: 13px 0px;
}

div#display_story_inner_description {
position: relative;
top: 10%;
max-width: 60%;
margin: 0 auto;
color: white;
text-shadow: 0px 2px 9px rgb(60, 59, 59);
font-size: 18px;
height: 50px;
text-overflow: ellipsis;
overflow: hidden;
}

div#display_story_inner_member_list {
position: absolute;
top: 50%;
width: 100%;
margin-top: -40px;
}

div.display_story_inner_member {
position: relative;
display: inline-block;
width: 80px;
height: 80px;
margin: 0px 8px;
border-radius: 50px;
box-shadow: 0px 0px 12px dimgray;
cursor: pointer;
}

div.display_story_inner_member[member_status='1'] {
box-shadow: 0px 0px 12px maroon;
}

div.display_story_inner_member_name {
position: absolute;
top: 90px;
text-align: center;
width: 100%;
font-size: 13px;
color: white;
text-shadow: 0px 2px 9px rgb(44, 43, 43);
opacity: 0;
}

div#display_story_inner_background {
position: absolute;
width: 100%;
height: 62%;
z-index: 0;
box-shadow: 0px 3px 7px dimgray;
}

div#display_story_inner_1_1 {
position: absolute;
top: 62%;
height: 28%;
width: 100%;
z-index: 1;
}

div#display_story_inner_join_button {
position: absolute;
top: 44%;
background: rgb(37, 105, 179);
color: whitesmoke;
width: 70px;
padding: 3px 0px;
box-shadow: 0px 0px 1px whitesmoke;
left: 50%;
margin-left: -35px;
border-radius: 2px;
cursor: pointer;
}

div#display_story_inner_join_button:hover {
color: white;
}

div#display_story_inner_start_play {
position: absolute;
background: url(../img/play_new.png);
background-size: cover;
background-position: center;
padding: 20px;
border-radius: 20px;
left: 50%;
top: 32%;
z-index: 1;
cursor: pointer;
z-index: 3;
margin-left: -20px;
cursor: pointer;
opacity: 0.8;
}

div#display_story_inner_start_play:hover {
opacity: 1;
}

div#display_story_inner_add_category {
background: whitesmoke;
color: rgb(90, 90, 90);
padding: 5px 11px;
border-radius: 2px;
font-size: 13px;
cursor: pointer;
z-index: 2;
padding-left: 22px;
display: inline-block;
box-shadow: 0px 0px 3px dimgray;
margin-right: 4px;
position: relative;
font-weight: normal;
}


div#display_story_inner_2_1 {
position: relative;
height: 100%;
padding-top: 60px;
text-align: center;
margin: 0 auto;
margin-top: 20px;
}

div.display_story_inner_2_block {
position: relative;
width: 300px;
display: inline-block;
margin: 8px;
border-radius: 5px;
overflow: hidden;
box-shadow: 0px 0px 3px rgb(54, 53, 53);
}

div.display_story_inner_2_block:last-child {
margin-bottom: 50px;
}

div.display_story_inner_folder {
height: 80px;
}

input#add_new_folder_input_name {
width: 240px;
padding: 4px 7px;
border: none;
position: absolute;
left: 23px;
font-size: 16px;
top: 26px;
background: none;
color: whitesmoke;
text-align: center;

}

div.display_story_category_name {
width: 240px;
border: none;
padding: 4px 7px;
position: absolute;
left: 23px;
font-size: 16px;
top: 26px;
background: none;
color: whitesmoke;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-familiy: "Luckiest Guy";
}

div.dispaly_story_category_control_board {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
opacity: 0;
}

div.display_story_new_content {
position: absolute;
background: url(../img/add_content.png);
background-size: cover;
background-position: center;
width: 30px;
height: 30px;
left: 50%;
margin-left: -15px;
top: 50%;
margin-top: -15px;
cursor: pointer;
opacity: 0.8;
}

div.display_story_new_content:hover {
opacity: 1;
}

div.display_story_delete_category {
position: absolute;
background: url(../img/delete_category.png);
background-size: contain;
background-position: center;
width: 30px;
height: 30px;
left: 100px;
top: 50%;
margin-top: -15px;
cursor: pointer;
opacity: 0.8;
background-repeat: no-repeat;
}

div.display_story_delete_category:hover {
opacity: 1;
}

div.display_story_rename_category {
position: absolute;
background: url(../img/rename_category.png);
background-size: cover;
background-position: center;
width: 30px;
height: 30px;
right: 100px;
top: 50%;
margin-top: -15px;
cursor: pointer;
opacity: 0.8;
}

div.display_story_rename_category:hover {
opacity: 1;
}

div#new_content_writing_outer {
position: fixed;
width: 400px;
height: 400px;
left: 50%;
margin-left: -200px;
top: 50%;
margin-top: -200px;
background: whitesmoke;
box-shadow: 0px 0px 15px rgb(71, 69, 69);
border-radius: 5px;
z-index: 10;
}

div#new_content_pick_mode {
position: absolute;
top: -26px;
}

div#new_content_pick_photo {
position: absolute;
cursor: pointer;
background: url(../img/upload_photo.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 89px;
height: 30px;
left: 21px;
top: -4px;
}

div#new_content_pick_photo[select='1'] {
background: url(../img/upload_photo_select.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
top: -6px;
}

div#new_content_pick_text {
position: absolute;
cursor: pointer;
background: url(../img/upload_text.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 89px;
height: 30px;
top: -4px;
left: 99px;
z-index: -1;
}

div#new_content_pick_text[select='1'] {
background: url(../img/upload_text_select.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
top: -6px;
}

div#new_content_control {
position: absolute;
bottom: 0px;
height: 40px;
width: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: rgb(199, 199, 199);
box-shadow: 0px -1px 4px dimgrey;
}

div#huihui_said_add_it {
position: absolute;
width: 390px;
left: 5px;
height: 4px;
background: rgb(244,126,107);
top: 22px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 2;
}

div#cancel_new_content {
position: absolute;
font-size: 13px;
background: rgb(85, 84, 84);
cursor: pointer;
background-image: url(../img/cross_delete.png);
background-size: 66%;
background-position: center;
width: 22px;
height: 22px;
background-repeat: no-repeat;
border-radius: 20px;
border: 2px solid whitesmoke;
top: -372px;
right: -11px;
}

div#post_new_content {
position: absolute;
font-size: 13px;
background: rgb(39, 107, 160);
color: whitesmoke;
padding: 8px 15px;
right: 5px;
bottom: 5px;
box-shadow: 0px 0px 1px rgb(8, 27, 77);
border-radius: 2px;
cursor: pointer;
}

div#new_content_edit_div {
position: absolute;
height: 330px;
top: 14px;
width: 92%;
left: 4%;
}

div#new_content_edit_photo {
position: absolute;
width: 100%;
height: 100%;
display: none;
text-align: center;
overflow-y: scroll;
padding-right: 12px;
}

div#new_content_edit_photo[select='1'] {
display: block;
}

div#new_content_edit_text {
position: absolute;
width: 100%;
height: 100%;
display: none;
color: rgb(73, 73, 73);
overflow-y: scroll;
padding: 1px 0px;
}

div#new_content_edit_text[select='1'] {
display: block;
}

div#new_content_edit_photo_suggest {
text-align: center;
border: 2px dashed dimgray;
padding: 31px 0px;
position: relative;
top: 9px;
color: dimgrey;
background: rgb(230, 230, 230);
}

div.display_story_control_caption {
position: absolute;
text-align: center;
color: whitesmoke;
font-size: 13px;
font-weight: 300;
top: 36px;
left: -24px;
opacity: 0;
line-height: 12px;
width: 78px;
}

div.new_content_upload_photo_block {
position: relative;
width: 172px;
display: inline-block;
height: 160px;
margin: 4px 6px;
float: left;
z-index: 2;
}

div.new_content_upload_photo_block:last-child {
margin-bottom: 80px;
}

div.new_content_upload_photo {
position: absolute;
width: 100%;
height: 130px;
top: 0px;
border-radius: 2px;
}

textarea.new_content_caption_input {
position: absolute;
resize: none;
height: 13px;
bottom: 0px;
width: 164px;
font-size: 12px;
padding: 5px 4px;
border: none;
box-shadow: 0px 0px 1px maroon;
border-radius: 2px;
left: 0;
color: dimgray;
}

textarea.new_content_caption_input:focus {
height: 70px;
opacity: 0.9;
}

div.process_div {
position: absolute;
background: rgba(82, 170, 206, 0.81);
height: 20px;
font-size: 12px;
box-shadow: 0px 0px 2px;
top: 110px;
}

.process_div p {
margin: 0px;
color: whitesmoke;
line-height: 19px;
margin-left: 5px;
text-align: left;
}


div.new_content_remove_photo {
position: absolute;
background-image: url(../img/cancel_delete.png);
background-size: 100%;
background-position: center;
width: 14px;
height: 14px;
top: -3px;
right: -3px;
border-radius: 15px;
border: 1px solid whitesmoke;
box-shadow: 0px 0px 2px darkgoldenrod;
display: none;
cursor: pointer;
background-color: whitesmoke;
}

img.story_content_photo_img {
position: relative;
height: auto;
display: block;
cursor: -webkit-zoom-in;
}

div.story_content_photo_block {
background: -webkit-linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
background: -o-linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
background: -moz-linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
background: linear-gradient(rgb(185, 184, 184), rgb(226, 226, 226), whitesmoke, whitesmoke);
}

div.story_content_photo_block_inner {
position: absolute;
background: rgba(71, 71, 71, 0.57);
color: whitesmoke;
font-size: 13px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}

div.story_content_photo_block_user {
position: absolute;
width: 100%;
padding: 7px 0px;
top: 0px;
color: whitesmoke;
font-weight: bold;
}

div.photo_block_user_image {
position: absolute;
width: 25px;
height: 25px;
box-shadow: 0px 0px 1px darkgoldenrod;
border-radius: 2px;
left: 10px;
top: 10px;
cursor: pointer;
}

div.photo_block_username {
position: absolute;
font-weight: bold;
font-size: 13px;
left: 43px;
top: 16px;
line-height: 16px;
text-shadow: 0px 2px 3px dimgray;
}

div.text_block_username {
position: absolute;
font-weight: bold;
font-size: 13px;
left: 43px;
top: 16px;
line-height: 16px;
color: rgb(124, 124, 124);
}

div.photo_block_caption {
background: whitesmoke;
color: rgb(68, 68, 68);
width: 268px;
padding: 10px 16px;
text-align: left;
font-size: 14px;
white-space: pre-wrap;
}

div.story_content_text_block {
background: whitesmoke;
}

div.story_content_text_block_user {
position: relative;
width: 100%;
padding: 7px 0px;
top: 0px;
color: whitesmoke;
font-weight: bold;
border-bottom: 1px solid rgb(173, 173, 173);
height: 28px;
}

div.text_block_html {
position: relative;
font-size: 14px;
color: rgb(73, 72, 72);
width: 90%;
left: 5%;
text-align: left;
padding-bottom: 10px;
padding-top: 5px;
}

.text_block_html p {
margin: 4px 0px;
}


#display_story_inner_add_category_img {
position: absolute;
width: 10px;
height: 10px;
background: url(../img/add_new.png);
background-size: cover;
background-position: center;
left: 7px;
top: 8px;
}

div#display_story_inner_category_list {
position: relative;
text-align: center;
top: 8px;
padding-right: 50px;
padding-left: 50px;
margin-top: 16px;
z-index: 2;
}

div.story_display_category_tag {
display: inline-block;
margin: 5px 5px;
font-size: 14px;
color: whitesmoke;
padding: 5px 10px;
border-radius: 2px;
cursor: pointer;
font-weight: normal;
}

div.story_display_category_tag:hover {
color: white;
}

div#delete_category_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

div#invite_block_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
z-index: 201;
}

div#delete_category_inner {
position: relative;
display: inline-block;
margin: 0 auto;
background: whitesmoke;
font-size: 14px;
color: rgb(61, 61, 61);
padding: 15px 20px;
top: 30%;
border-radius: 2px;
box-shadow: 0px 0px 3px dimgray;
max-width: 300px;
}

div#delete_category_inner_text {
font-weight: normal;
}

div#delete_category_cancel_button {
position: relative;
display: inline-block;
background: dimgray;
color: whitesmoke;
padding: 5px;
font-size: 12px;
margin-top: 16px;
margin-right: 20px;
border-radius: 2px;
cursor: pointer;
}

div#delete_category_ok_button {
position: relative;
display: inline-block;
font-size: 12px;
color: whitesmoke;
background: rgb(73, 110, 156);
padding: 5px 17px;
border-radius: 2px;
cursor: pointer;
}

div#display_story_single_img_outer {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(34, 11, 11, 0.87);
z-index: 100;
text-align: center;
}


img#display_story_single_img_inner {
max-width: 62%;
max-height: 62%;
position: relative;
margin: 0 auto;
top: 19%;
box-shadow: 0px 0px 6px rgb(53, 53, 53);
border-radius: 6px;
}

div#display_story_statistics {
position: absolute;
z-index: 1;
color: whitesmoke;
top: 58%;
width: 100%;
font-size: 14px;
text-shadow: 0px 3px 8px black;
}

div.statistics_element {
position: relative;
display: inline-block;
margin: 0px 3px;
font-weight: 500;
width: 90px;
}

.statistics_element span {
position: absolute;
width: 100%;
bottom: 12px;
font-size: 30px;
font-weight: bold;
left: -1px;
}

div#display_story_inner_exit {
background-image: url(../img/exit.png);
background-size: 75%;
background-position: center;
width: 25px;
height: 25px;
background-color: rgba(77, 75, 75, 0.79);
position: absolute;
left: 10px;
border-radius: 2px;
background-repeat: no-repeat;
box-shadow: 0px 0px 3px;
cursor: pointer;
}

div#display_story_control_board_tips {
position: absolute;
top: 27px;
}

div#display_story_control_board_tip_corner {
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 8px solid rgb(54, 54, 54);
position: absolute;
top: 0px;
left: 5px;
}

div#display_story_control_board_tip_text {
position: absolute;
background: rgb(54, 54, 54);
color: whitesmoke;
font-size: 12px;
padding: 2px 7px;
top: 8px;
left: -5px;
border-radius: 2px;
white-space: nowrap;
box-shadow: 0px 0px 1px whitesmoke;
}

#display_story_inner_like span {
position: absolute;
left: 34px;
top: 3px;
color: whitesmoke;
text-shadow: 0px 2px 5px dimgray;
font-size: 14px;
}

div#display_stroy_link_get {
color: whitesmoke;
white-space: nowrap;
position: absolute;
float: left;
right: 33px;
background: rgba(100, 21, 21, 0.3);
padding: 1px 8px;
font-size: 14px;
top: 2px;
border-radius: 2px;
box-shadow: 0px 0px 1px whitesmoke;
line-height: 18px;
-webkit-user-select: initial;
-khtml-user-select: initial;
-moz-user-select: initial;
-ms-user-select: initial;
cursor: text;
}

div.story_content_like_div {
opacity: 0;
position: absolute;
top: 0px;
right: 0px;
}

div.story_content_like_button {
background-image: url(../img/icon-kiss.png);
background-position: center;
background-size: cover;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, 0.28);
border-radius: 2px;
position: absolute;
right: 9px;
top: 9px;
cursor: pointer;
}


div.story_content_like_button[like_status='true'] {
background-image: url(../img/icon-kiss2.png);
background-position: center;
background-size: cover;
}

div.story_content_edit_button {
opacity: 0;
background-image: url(../img/setting.png);
background-position: center;
background-size: 76%;
width: 25px;
height: 25px;
background-color: rgba(0, 0, 0, 0.28);
border-radius: 2px;
position: absolute;
right: 39px;
top: 9px;
cursor: pointer;
background-repeat: no-repeat;
z-index: 2;
}

div#delete_or_edit_div {
position: absolute;
top: 33px;
font-size: 13px;
background: rgb(60, 58, 58);
color: whitesmoke;
left: -21px;
padding: 5px 16px;
border-radius: 2px;
box-shadow: 0px 0px 3px black;
}

div#delete_or_edit_div_tip {
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgb(60, 58, 58);
top: -10px;
left: 24px;
}

div#delete_story_content_button {
margin-bottom: 2px;
cursor: pointer;
}

div#delete_story_content_button:hover {
color: rgb(240, 188, 61);
}

div#edit_story_content_button {
cursor: pointer;
}

div#edit_story_content_button:hover {
color: rgb(240, 188, 61);
}

div.story_content_like_tips {
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid rgb(60, 58, 58);
right: 11px;
top: 32px;
display: none;
}

div.story_content_like_text {
position: absolute;
right: 5px;
font-size: 12px;
background: rgb(60, 58, 58);
color: whitesmoke;
padding: 1px 12px;
top: 42px;
border-radius: 2px;
box-shadow: 0px 0px 3px black;
display: none;
}

div#display_story_content_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

div#display_story_content_inner {
position: relative;
display: block;
margin: 0 auto;
background: whitesmoke;
font-size: 14px;
color: rgb(61, 61, 61);
padding: 15px 20px;
top: 30%;
border-radius: 2px;
box-shadow: 0px 0px 3px dimgray;
max-width: 300px;
}

div#delete_story_content_cancel_button {
position: relative;
display: inline-block;
background: dimgray;
color: whitesmoke;
padding: 5px;
font-size: 12px;
margin-top: 16px;
margin-right: 20px;
border-radius: 2px;
cursor: pointer;
}

div#delete_story_content_ok_button {
position: relative;
display: inline-block;
font-size: 12px;
color: whitesmoke;
background: rgb(73, 110, 156);
padding: 5px 17px;
border-radius: 2px;
cursor: pointer;
}

div#edit_photo_content_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

div#edit_text_content_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

img#edit_photo_content_img {
position: relative;
left: 0;
max-width: 40%;
max-height: 40%;
margin: 0 auto;
margin-top: 10%;
border-radius: 6px;
box-shadow: 0px 0px 17px rgb(22, 22, 22);
}

textarea#edit_photo_textarea {
position: relative;
width: 360px;
margin: 0 auto;
background: whitesmoke;
resize: none;
overflow: scroll;
top: 10px;
font-size: 13px;
padding: 7px 8px;
border-radius: 2px;
color: rgb(61, 61, 61);
box-shadow: 0px 0px 17px;
margin-top: 16px;
}

div#edit_photo_cancel_button {
position: relative;
display: inline-block;
background: dimgray;
color: whitesmoke;
padding: 5px;
font-size: 12px;
margin-top: 30px;
margin-right: 20px;
border-radius: 2px;
cursor: pointer;
}

div#edit_text_content_cancel_button {
position: relative;
display: inline-block;
background: dimgray;
color: whitesmoke;
padding: 5px;
font-size: 12px;
margin-top: 13%;
margin-right: 20px;
border-radius: 2px;
cursor: pointer;
}

div#edit_photo_ok_button {
position: relative;
display: inline-block;
font-size: 12px;
color: whitesmoke;
background: rgb(73, 110, 156);
padding: 5px 17px;
border-radius: 2px;
cursor: pointer;
}

div#edit_text_content_ok_button {
position: relative;
display: inline-block;
font-size: 12px;
color: whitesmoke;
background: rgb(73, 110, 156);
padding: 5px 17px;
border-radius: 2px;
cursor: pointer;
}

div#edit_text_content_html_block {
position: relative;
width: 380px;
height: 280px;
background: whitesmoke;
margin: 0 auto;
top: 15%;
box-shadow: 0px 0px 7px rgb(53, 52, 52);
padding: 20px;
text-align: left;
border-radius: 6px;
}


div.set_authority_block {
position: relative;
height: 21px;
}

div.set_authority_button {
position: absolute;
top: 0px;
right: 6px;
width: 35px;
height: 20px;
background: darkgoldenrod;
border-radius: 20px;
box-shadow: inset 0px 0px 2px;
cursor: pointer;
}

div.set_authority_button_circle {
position: absolute;
width: 20px;
height: 20px;
background: white;
border-radius: 20px;
box-shadow: 0px 0px 1px darkgoldenrod;
cursor: pointer;
right: 0px
}

span.set_authority_on_off_text {
position: absolute;
right: 49px;
top: 1px;
font-size: 13px;
font-weight: 300;
color: rgb(56, 54, 54);
}

div#new_story_set_authority_div {
position: absolute;
width: 360px;
top: 305px;
padding: 2px 2px;
left: 19px;
z-index: 10;
border-top: 1px solid darkgoldenrod;
}

div.set_authority_text {
font-size: 12px;
position: relative;
left: 4px;
margin: 3px 1px;
color: rgb(102, 102, 102);
top: 2px;
}

div.set_authority_statement_img {
position: absolute;
background: url(../img/question.png);
background-size: cover;
background-position: center;
width: 15px;
height: 15px;
top: 3px;
cursor: pointer;
}

div#category_authority_statement_div {
position: absolute;
top: 0px;
left: 194px;
}

div#join_authority_statement_div {
position: absolute;
top: 0px;
left: 208px;
}

div#go_public_authority_statement_div {
position: absolute;
left: 153px;
top: 0px;
}

div.set_authority_statement_tips {
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgb(213, 213, 213);
top: -6px;
left: 0px;
display: none;
}

div.set_authority_statement_text {
position: absolute;
background: rgb(213, 213, 213);
font-size: 12px;
width: 200px;
padding: 3px;
bottom: 6px;
left: -92px;
border-radius: 2px;
z-index: 2;
font-weight: 300;
color: rgb(71, 71, 71);
box-shadow: 0px 0px 2px;
display: none;
}

div#join_story_invitation_div {
position: fixed;
background: rgba(100, 21, 21, 0.3);
width: 300px;
bottom: 20px;
left: 50%;
margin-left: -150px;
border-radius: 2px;
box-shadow: 0px 0px 4px rgb(65, 65, 65);
height: 123px;
padding: 12px;
}

div#join_story_invitaion_user_img {
position: absolute;
width: 40px;
height: 40px;
left: 12px;
top: 12px;
box-shadow: 0px 0px 2px dimgray;
cursor: pointer;
}

div#join_story_invitation_user_name {
position: relative;
left: 49px;
font-size: 13px;
top: 6px;
color: beige;
max-width: 110px;
overflow: hidden;
}

div#join_story_invitation_story_cover {
position: absolute;
width: 100px;
height: 75px;
bottom: 10px;
left: 10px;
border-radius: 2px;
box-shadow: 0px 0px 2px dimgray;
cursor: pointer;
}

div#join_story_invitation_story_name {
position: absolute;
left: 120px;
top: 70px;
font-weight: bold;
color: whitesmoke;
width: 175px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

div#join_story_invitation_story_description {
position: absolute;
left: 120px;
font-weight: normal;
font-size: 12px;
top: 95px;
width: 174px;
text-overflow: ellipsis;
overflow: hidden;
height: 44px;
color: rgb(235, 235, 235);
}

div#join_story_invitation_accept_button {
position: absolute;
background: rgb(33, 103, 158);
color: whitesmoke;
font-size: 12px;
padding: 4px 5px;
right: 12px;
top: 12px;
border-radius: 2px;
cursor: pointer;
}

div#join_story_invitation_skip_button {
position: absolute;
right: 69px;
background: dimgray;
color: whitesmoke;
font-size: 12px;
padding: 4px 11px;
border-radius: 2px;
top: 12px;
cursor: pointer;
}

div#join_story_request_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

div#join_story_request_inner {
position: relative;
width: 300px;
margin: 0 auto;
background: whitesmoke;
border-radius: 2px;
top: 30%;
box-shadow: 0px 0px 3px whitesmoke;
padding: 10px;
}

div#join_story_request_text {
font-size: 14px;
text-align: left;
color: rgb(66, 66, 66);
}

div#join_story_request_cancel_button {
position: relative;
background: dimgray;
font-size: 13px;
color: whitesmoke;
padding: 5px 7px;
border-radius: 2px;
display: inline-block;
margin: 0px 5px;
margin-top: 8px;
cursor: pointer;
}

div#join_story_request_ok_button {
position: relative;
background: rgb(59, 108, 170);
font-size: 13px;
color: whitesmoke;
padding: 5px 16px;
border-radius: 2px;
display: inline-block;
margin: 0px 5px;
cursor: pointer;
}

textarea#join_story_request_input {
position: relative;
padding: 5px 10px;
font-size: 13px;
width: 278px;
margin-top: 10px;
height: 50px;
border: none;
resize: none;
border-radius: 2px;
box-shadow: inset 0px 0px 2px rgb(100, 21, 21);
color: rgb(94, 94, 94);
}

div#request_sent_message {
position: fixed;
z-index: 100;
background: rgb(61, 61, 61);
color: whitesmoke;
font-size: 14px;
width: 110px;
text-align: center;
padding: 7px 0px;
border-radius: 2px;
box-shadow: 0px 0px 3px whitesmoke;
left: 50%;
margin-left: -55px;
}

div#join_story_request_div {
position: fixed;
width: 300px;
height: 125px;
background: rgba(100 ,21, 21, 0.3);
bottom: 10px;
left: 50%;
padding: 12px;
margin-left: -150px;
box-shadow: 0px 0px 5px rgb(54, 54, 54);
border-radius: 5px;
}

div#join_story_request_user_img {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
box-shadow: 0px 0px 2px whitesmoke;
border-radius: 2px;
}

div#join_story_request_user_name {
position: relative;
width: 190px;
display: inline-block;
margin-left: 12px;
font-size: 13px;
color: beige;
top: 1px;
font-weight: normal;
overflow: hidden;
text-overflow: ellipsis;
}

div#join_story_request_story_cover {
position: relative;
display: inline-block;
width: 100px;
height: 75px;
margin-top: 8px;
border-radius: 2px;
box-shadow: 0px 0px 2px whitesmoke;
cursor: pointer;
}

div#join_story_request_story_name {
position: relative;
display: inline-block;
bottom: 50px;
left: 12px;
color: whitesmoke;
width: 128px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

div#join_story_request_story_description {
position: absolute;
display: inline-block;
top: 95px;
left: 125px;
font-size: 13px;
color: rgb(240, 240, 240);
width: 186px;
height: 43px;
text-overflow: ellipsis;
overflow: hidden;
}

div#join_story_request_skip_button {
position: absolute;
padding: 3px 7px;
color: rgb(100, 21, 21);
background: whitesmoke;
top: 12px;
right: 12px;
font-size: 12px;
border-radius: 2px;
cursor: pointer;
}

div#join_story_request_skip_button:hover {
background: white;
}

div#join_story_request_accept_button {
position: absolute;
background: rgb(42, 89, 160);
font-size: 12px;
top: 12px;
right: 12px;
color: whitesmoke;
padding: 4px 6px;
border-radius: 2px;
cursor: pointer;
}

div#join_story_request_decline_button {
position: absolute;
font-size: 12px;
padding: 4px;
right: 12px;
top: 40px;
background: dimgray;
color: whitesmoke;
border-radius: 2px;
cursor: pointer;
}

div#join_story_request_ignore_button {
position: absolute;
font-size: 12px;
color: whitesmoke;
right: 12px;
top: 68px;
padding: 4px 8px;
background: darkgoldenrod;
border-radius: 2px;
cursor: pointer;
}

div#join_story_request_message {
position: absolute;
width: 300px;
background: rgba(100, 21, 21, 0.3);
bottom: 156px;
box-shadow: 0px 0px 3px silver;
color: whitesmoke;
font-size: 13px;
padding: 5px 12px;
left: 0;
border-radius: 4px;
max-height: 50px;
overflow: hidden;
text-overflow: overflow;
}

div#join_story_request_result_div {
position: fixed;
bottom: 10px;
width: 300px;
text-align: center;
background: rgba(100, 21, 21, 0.3);
color: whitesmoke;
padding: 12px;
left: 50%;
margin-left: -150px;
box-shadow: 0px 0px 3px whitesmoke;
border-radius: 5px;
}

#join_story_request_result_cancel_button {
position: absolute;
background: url('../img/delete.png');
background-size: cover;
background-position: center;
width: 30px;
height: 30px;
right: 0px;
top: 0px;
}

#join_story_request_result_cancel_button {
position: absolute;
background-image: url('../img/delete.png');
background-size: 73%;
background-position: center;
width: 13px;
height: 13px;
right: -9px;
top: -9px;
border: 3px solid rgb(100, 21, 21);
border-radius: 20px;
background-color: whitesmoke;
background-repeat: no-repeat;
box-shadow: 0px 0px 3px silver;
cursor: pointer;
}

div#join_story_request_result_text {
font-size: 14px;
font-weight: normal;
}

span#accept_result_span {
color: rgb(86, 133, 216);
font-weight: bold;
}

span#decline_result_span {
color: darkgoldenrod;
font-weight: bold;
}

div#dismiss_story_button {
position: absolute;
bottom: 7px;
font-size: 13px;
color: whitesmoke;
background: darkgoldenrod;
left: 20px;
padding: 5px 5px;
border-radius: 2px;
cursor: pointer;
}

div#setting_member_header {
position: relative;
padding: 0px 20px;
top: 116px;
font-weight: normal;
font-size: 14px;
color: rgb(92, 92, 92);
}

div#setting_invite_button {
position: absolute;
right: 20px;
top: 1px;
background: rgb(41, 94, 187);
color: whitesmoke;
font-size: 12px;
padding: 2px 5px;
border-radius: 2px;
cursor: pointer;
}

div#setting_invite_done {
position: absolute;
right: 20px;
top: 1px;
background: rgb(41, 94, 187);
color: whitesmoke;
font-size: 12px;
padding: 2px 5px;
border-radius: 2px;
cursor: pointer;
display: none;
}

div.member_status_icon[member_status='1'] {
background: url(../img/owner.png);
background-size: contain;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
left: 13px;
top: 10px;
background-repeat: no-repeat;
}

div.member_status_icon[member_status='2'] {
background: url(../img/manager.png);
background-size: contain;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
left: 13px;
top: 10px;
background-repeat: no-repeat;
}

div.member_status_icon[member_status='0'] {
background: url(../img/member.png);
background-size: contain;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
left: 13px;
top: 10px;
background-repeat: no-repeat;
}

div.manage_member_button {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgb(107, 107, 107);
position: absolute;
right: 16px;
top: 16px;
cursor: pointer;
}

div#manage_member_block {
width: 60px;
padding: 6px 6px;
text-align: center;
font-size: 12px;
background: rgb(75, 75, 75);
color: whitesmoke;
border-radius: 2px;
box-shadow: 0px 0px 3px black;
margin-left: -34px;
margin-top: 6px;
z-index: 11;
}

div.manage_member_status_element {
border-radius: 2px;
margin: 1px 0px;
cursor: pointer;
}

div.manage_member_status_element:hover {
background: whitesmoke;
color: rgb(75, 75, 75);
}

div#confirm_new_owner_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

div#confirm_remove_member_outer, div#confirm_quit_group_outer, div#confirm_dismiss_group_outer{
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
}

div#confirm_new_owner_inner  {
position: relative;
background: whitesmoke;
border-radius: 2px;
width: 360px;
margin: 0 auto;
top: 30%;
padding: 10px;
font-size: 14px;
color: rgb(73, 73, 73);
}


div#confirm_remove_member_inner, div#confirm_quit_group_inner, div#confirm_dismiss_group_inner{
position: relative;
background: whitesmoke;
border-radius: 2px;
width: 360px;
margin: 0 auto;
top: 30%;
padding: 10px;
font-size: 14px;
color: rgb(73, 73, 73);
}

div#confirm_new_owner_cancel_button {
position: relative;
display: inline-block;
background: dimgray;
font-size: 12px;
color: whitesmoke;
padding: 5px 7px;
margin-top: 15px;
cursor: pointer;
margin: 0px 10px;
border-radius: 2px;
margin-top: 24px;
}

div#confirm_remove_member_cancel_button, div#confirm_quit_group_cancel_button,  div#confirm_dismiss_group_cancel_button{
position: relative;
display: inline-block;
background: dimgray;
font-size: 12px;
color: whitesmoke;
padding: 5px 7px;
margin-top: 15px;
cursor: pointer;
margin: 0px 10px;
border-radius: 2px;
margin-top: 24px;
}

div#confirm_new_owner_ok_button, div#confirm_quit_group_ok_button, div#confirm_dismiss_group_ok_button{
position: relative;
display: inline-block;
background: rgb(31, 97, 168);
color: whitesmoke;
font-size: 12px;
padding: 5px 18px;
border-radius: 2px;
cursor: pointer;
margin: 0px 10px;
}

div#confirm_remove_member_ok_button {
position: relative;
display: inline-block;
background: rgb(31, 97, 168);
color: whitesmoke;
font-size: 12px;
padding: 5px 18px;
border-radius: 2px;
cursor: pointer;
margin: 0px 10px;
}

div#display_story_film_outer {
position: absolute;
background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, rgb(36, 5, 5) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #45484d), color-stop(100%, rgb(36, 5, 5)));
background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%, rgb(36, 5, 5) 100%);
background: -o-radial-gradient(center, ellipse cover, #45484d 0%, rgb(36, 5, 5) 100%);
background: -ms-radial-gradient(center, ellipse cover, #45484d 0%, rgb(36, 5, 5) 100%);
background: radial-gradient(center, ellipse cover, #45484d 0%, #000000 100%);
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 200;
}

div#display_story_film_tittle {
position: relative;
margin: 0 auto;
text-align: center;
top: 30%;
font-size: 40px;
font-weight: bold;
color: whitesmoke;
text-shadow: 0px 5px 23px rgb(44, 44, 44);
}

div#display_story_film_description {
position: relative;
margin: 0 auto;
text-align: center;
color: whitesmoke;
text-shadow: 0px 6px 12px rgb(71, 71, 71);
top: 35%;
font-size: 20px;
font-weight: normal;
}

div#display_story_film_inner {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align: center;
}

div#display_story_film_folder_name {
position: relative;
color: whitesmoke;
font-size: 30px;
text-align: center;
top: 30%;
text-shadow: 0px 3px 9px dimgray;
}

img#display_story_film_image {
max-width: 60%;
max-height: 60%;
position: relative;
margin: 0 auto;
border-radius: 5px;
box-shadow: 0px 0px 10px rgb(44, 43, 43);
}

div#display_story_film_caption {
color: whitesmoke;
position: relative;
top: 10px;
width: 40%;
margin: 0 auto;
text-shadow: 0px 2px 12px dimgray;
font-weight: bold;
padding-top: 0px;
max-height: 10%;
overflow: hidden;
}

div#display_story_username {
position: relative;
margin-top: 20px;
font-size: 13px;
color: whitesmoke;
text-shadow: 0px 2px 5px dimgray;
float: right;
right: 30%;
}

div#display_story_user_image {
position: relative;
float: right;
width: 20px;
height: 20px;
margin-top: 18px;
right: 30%;
margin-right: 5px;
border-radius: 2px;
box-shadow: 0px 0px 2px dimgray;
}

div#display_story_film_text_html {
position: relative;
width: 60%;
border-bottom: 2px solid whitesmoke;
left: 20%;
color: whitesmoke;
text-shadow: 0px 3px 9px dimgrey;
}

img#display_story_film_photo_background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
min-height: 100%;
min-width: 100%;
}

div#display_story_film_member_list {
position: relative;
text-align: center;
width: 60%;
height: 60%;
top: 20%;
left: 20%;
}

div.display_story_film_member {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
border-radius: 60px;
box-shadow: 0px 0px 5px;
margin: 6px;
}

div#display_story_film_description_ending {
position: relative;
margin: 0 auto;
text-align: center;
color: whitesmoke;
text-shadow: 0px 6px 12px rgb(71, 71, 71);
top: 12%;
font-size: 36px;
font-weight: bold;
}

div#display_story_film_control_board {
position: fixed;
z-index: 300;
width: 60%;
height: 40px;
background: rgba(41, 41, 41, 0.79);
border-radius: 5px;
bottom: 20px;
left: 20%;
box-shadow: 0px 0px 3px;
min-width: 300px;
max-width: 450px;
}

div#display_story_film_backward {
background: url(../img/backward.png);
background-position: center;
background-size: cover;
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 8px;
left: 9px;
}

div#display_story_film_play_stop[mode='play'] {
background: url(../img/pause_story.png);
background-position: center;
background-size: cover;
width: 29px;
height: 29px;
cursor: pointer;
position: absolute;
left: 39px;
top: 6px;
}

div#display_story_film_play_stop[mode='pause'] {
background: url(../img/play_story.png);
background-position: center;
background-size: cover;
width: 29px;
height: 29px;
cursor: pointer;
position: absolute;
left: 39px;
top: 6px;
}

div#display_story_film_forward {
background: url(../img/forward.png);
background-position: center;
background-size: cover;
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 8px;
left: 73px;
}

div#control_board_cancel {
background: url(../img/exit.png);
background-position: center;
background-size: contain;
width: 25px;
height: 25px;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
background-repeat: no-repeat;
}

div#control_board_track {
position: absolute;
top: 17px;
background: whitesmoke;
height: 5px;
left: 116px;
border-radius: 6px;
border: 1px solid black;
}

div#control_board_track_circle {
position: absolute;
width: 6px;
height: 6px;
border: 3px solid whitesmoke;
background: rgb(53, 53, 53);
top: -4px;
border-radius: 10px;
box-shadow: 0px 0px 3px;
cursor: pointer;
margin-left: -7px;
z-index: 2;
}

div#control_board_inner_track {
position: absolute;
height: 5px;
background: rgb(134, 134, 134);
border-radius: 10px;
}

div#user_mini_profile_outer {
width: 240px;
background-color: transparent;
z-index: 100;
margin-top: -40px;
margin-left: -25px;
}

div.search_user_mini_profile_outer {
width: 240px;
background-color: transparent;
z-index: 100;
display: inline-block;
height: 179px;
margin-right: 15px;
}

div#user_mini_profile_inner {
position: relative;
width: 240px;
margin-top: 55px;
height: 117px;
box-shadow: 0px -1px 2px rgb(54, 53, 53);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

div.search_user_mini_profile_inner {
position: relative;
width: 240px;
height: 117px;
box-shadow: 0px -1px 2px rgb(54, 53, 53);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

div#user_mini_profile_user_image {
position: absolute;
width: 50px;
height: 50px;
border: 2px solid whitesmoke;
border-radius: 3px;
left: 50%;
margin-left: -28px;
bottom: -19px;
box-shadow: 0px 0px 2px rgb(77, 77, 77);
cursor: pointer;
}

div.search_user_mini_profile_image {
position: absolute;
width: 50px;
height: 50px;
border: 2px solid whitesmoke;
border-radius: 3px;
left: 50%;
margin-left: -28px;
bottom: -19px;
box-shadow: 0px 0px 2px rgb(77, 77, 77);
cursor: pointer;
z-index: 2;
background-color: whitesmoke;
}

div#user_mini_profile_user_image:hover {
transform: scale(1.05);
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05);
}

div.search_user_mini_profile_image:hover {
transform: scale(1.05);
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05);
}

div#mini_profile_follow_button {
position: absolute;
font-size: 12px;
background: whitesmoke;
border-radius: 2px;
right: 5px;
bottom: 5px;
padding: 4px 8px;
color: rgb(100, 21, 21);
box-shadow: 0px 0px 3px dimgray;
cursor: pointer;
}

div.search_user_mini_profile_follow_button {
position: absolute;
font-size: 12px;
background: whitesmoke;
border-radius: 2px;
right: 5px;
bottom: 5px;
padding: 4px 8px;
color: rgb(100, 21, 21);
box-shadow: 0px 0px 3px dimgray;
cursor: pointer;
}

div#mini_profile_follow_button:hover {
background: white;
}

div#user_mini_profile_statsitics_div {
position: relative;
width: 100%;
text-align: center;
}

div.search_user_mini_profile_statsitics_div {
position: relative;
width: 100%;
text-align: center;
}

div.user_mini_profile_statistics {
position: relative;
display: inline-block;
color: whitesmoke;
font-size: 13px;
margin: 11px;
top: 33px;
text-shadow: 0px 5px 12px rgb(60, 58, 58);
width: 57px;
}

.user_mini_profile_statistics span {
position: absolute;
width: 100%;
bottom: 23px;
font-size: 24px;
text-align: center;
left: 0;
}

#user_mini_profile_mywords {
position: relative;
padding-top: 22px;
background: whitesmoke;
z-index: -1;
top: 79px;
border-bottom-left-radius: 5px;
text-align: center;
padding-bottom: 5px;
box-shadow: 0px 0px 5px;
color: rgb(90, 90, 90);
font-size: 12px;
border-bottom-right-radius: 5px;
}

div.search_user_mini_profile_mywords {
position: relative;
padding-top: 38px;
background: whitesmoke;
z-index: 1;
top: 79px;
border-bottom-left-radius: 5px;
text-align: center;
padding-bottom: 5px;
box-shadow: 0px 0px 5px;
color: rgb(75, 75, 75);
font-size: 13px;
font-weight: 300;
border-bottom-right-radius: 5px;
height: 19px;
overflow: hidden;
white-space: nowrap;
padding-left: 4px;
text-overflow: ellipsis;
}

div#index_cover_story_name {
position: fixed;
top: 14px;
left: 14px;
color: whitesmoke;
font-weight: normal;
cursor: pointer;
}

div.search_user_mini_profile_mywords {
position: relative;
padding-top: 38px;
background: whitesmoke;
z-index: 1;
top: 79px;
border-bottom-left-radius: 5px;
text-align: center;
padding-bottom: 5px;
box-shadow: 0px 0px 5px;
color: rgb(75, 75, 75);
font-size: 13px;
font-weight: 300;
border-bottom-right-radius: 5px;
}

div.search_user_mini_profile_username {
position: absolute;
bottom: -38px;
font-size: 14px;
color: rgb(100, 21, 21);
text-align: center;
width: 212px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0px 14px;
z-index: 2;
}

div.display_inner_story_link_get {
position: absolute;
font-size: 13px;
color: whitesmoke;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
background: rgba(100, 21, 21, 0.3);
padding: 2px 6px;
bottom: 30px;
right: 2px;
box-shadow: 0px 0px 3px rgb(90, 90, 90);
border-radius: 2px;
}

div#tag_trends_div {
position: absolute;
width: 255px;
height: 54px;
top: 290px;
left: 14px;
border-top: 1px solid rgb(214, 191, 191);
padding-top: 5px;
overflow: hidden;
font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif, "MingLiU";
}

div.trends_tag_div {
position: relative;
display: inline-block;
background: rgb(100, 21, 21);
font-size: 14px;
margin: 3px;
padding: 0px 5px;
line-height: 21px;
height: 21px;
border-radius: 2px;
color: whitesmoke;
cursor: pointer;
box-shadow: 0px 0px 1px rgb(177, 172, 172);
font-family: Athelas, "Times New Roman", sans-serif, "MingLiU";
}

div#user_setting_outer {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0px;
text-align: center;
z-index: 100;
background: rgba(34, 11, 11, 0.87);
}

div#user_setting_inner {
position: relative;
width: 400px;
margin: 0 auto;
top: 20%;
border-radius: 2px;
text-align: center;
}


div#user_setting_profile_image {
position: absolute;
width: 80px;
height: 80px;
border-radius: 2px;
box-shadow: 0px 0px 3px;
left: 50%;
margin-left: -40px;
border: 3px solid white;
top: 157px;
}

div#user_setting_profile_image_click {
position: absolute;
float: left;
width: 54px;
height: 50px;
border-radius: 2px;
box-shadow: 0px 0px 1px;
color: whitesmoke;
background: rgba(29, 29, 29, 0.4);
cursor: pointer;
opacity: 0;
left: 50%;
margin-left: -40px;
top: 157px;
padding: 18px 16px;
font-size: 13px;
font-weight: bold;
}

div#user_setting_profile_image_click:hover {
opacity: 1;	
}

input#user_setting_username_input {
position: absolute;
width: 220px;
font-size: 17px;
left: 50%;
border: none;
background: none;
border-radius: 2px;
padding: 5px 5px;
color: rgb(100, 21, 21);
top: 248px;
text-align: center;
margin-left: -110px;
font-weight: bold;
}

input#user_setting_username_input:hover {
box-shadow: inset 0px 0px 4px dimgray;
}

input#user_setting_userwords_input {
position: absolute;
width: 96%;
font-size: 16px;
left: 0;
border: none;
border-radius: 2px;
padding: 5px 5px;
color: rgb(60, 57, 57);
resize: none;
top: 199px;
height: 48px;
padding-left: 2%;
padding-right: 2%;
padding-top: 71px;
z-index: -1;
background: whitesmoke;
text-align: center;
font-weight: 300;
}

input#user_setting_userwords_input:hover {
box-shadow: inset 0px 0px 5px dimgray;
}

div#theme_background_image {
position: absolute;
float: left;
width: 100%;
height: 200px;
border-radius: 2px;
box-shadow: 0px 0px 1px;
}

div#theme_background_click {
position: absolute;
float: left;
width: 27px;
height: 27px;
border-radius: 2px;
color: whitesmoke;
font-size: 14px;
cursor: pointer;
background-image: url(../img/add_content.png);
background-size: 70%;
background-position: center;
right: 82px;
top: 168px;
background-color: rgba(51, 51, 51, 0.67);
background-repeat: no-repeat;
}

div#user_setting_cancel_button {
position: absolute;
display: inline-block;
cursor: pointer;
background-image: url(../img/cross_delete.png);
background-size: 60%;
background-position: center;
width: 20px;
height: 20px;
z-index: 2;
background-repeat: no-repeat;
right: -10px;
top: -10px;
background-color: rgb(46, 46, 46);
border-radius: 16px;
border: 2px solid whitesmoke;
}

div#user_setting_ok_button {
font-size: 12px;
color: rgb(100, 21, 21);
background: whitesmoke;
display: inline-block;
padding: 6px 19px;
border-radius: 2px;
margin-bottom: 20px;
cursor: pointer;
position: absolute;
right: 6px;
top: 168px;
font-weight: bold;
box-shadow: 0px 0px 2px;
}

div#hooklr_logout_outer {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0px;
text-align: center;
z-index: 100;
background: rgba(34, 11, 11, 0.87);
}

div#hooklr_logout_inner {
position: relative;
display: inline-block;
background: whitesmoke;
border-radius: 2px;
top: 35%;
padding: 15px;
color: rgb(80, 78, 78);
animation: fade_in 0.5s;
-webkit-animation: fade_in 0.5s; /* Safari and Chrome */
}

div#hooklr_logout_cancel_button {
position: relative;
display: inline-block;
font-size: 12px;
padding: 6px 6px;
background: dimgray;
color: whitesmoke;
border-radius: 2px;
margin-top: 15px;
margin-right: 10px;
cursor: pointer;
}

div#hooklr_logout_title {
font-size: 14px;
}

div#hooklr_logout_ok_button {
color: whitesmoke;
background: rgb(56, 87, 143);
font-size: 12px;
display: inline-block;
padding: 6px 17px;
border-radius: 2px;
margin-left: 10px;
cursor: pointer;
}

div#user_setting_statsitics_div {
position: relative;
width: 100%;
top: 78px;
text-align: center;
}

div.user_setting_statistics {
display: inline-block;
position: relative;
margin: 17px 10px;
color: whitesmoke;
font-weight: normal;
text-shadow: 0px 2px 12px rgb(56, 56, 56);
font-size: 16px;
width: 74px;
}

.user_setting_statistics span {
position: absolute;
width: 100%;
bottom: 27px;
font-size: 29px;
font-weight: bold;
float: left;
text-align: center;
display: block;
}

div#invite_block_cancel_button {
position: absolute;
display: block;
cursor: pointer;
background-image: url(../img/cross_delete.png);
background-size: 60%;
background-position: center;
width: 20px;
height: 20px;
z-index: 2;
background-repeat: no-repeat;
left: 50%;
top: 20%;
background-color: rgb(46, 46, 46);
border-radius: 16px;
border: 2px solid whitesmoke;
z-index: 205;
margin-left: 185px;
margin-top: -9px;
}

div#waiting_story_curtain_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
z-index: 100;
top: 0;
left: 0;
text-align: center;
display: none;
}

img#waiting_story_curtain_img {
position: absolute;
top: 40%;
width: 60px;
margin-left: -30px;
}

div#waiting_story_curtain_return_button {
position: absolute;
top: 50%;
color: whitesmoke;
font-size: 13px;
cursor: pointer;
width: 240px;
left: 50%;
margin-left: -120px;
}

div#display_story_inner_add_text {
width: 45px;
height: 45px;
position: fixed;
background: url(../img/add_text.png);
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
top: 79px;
left: 10px;
z-index: 0;
background-color: rgba(53, 52, 52, 0.83);
border-radius: 2px;
cursor: pointer;
box-shadow: 0px 0px 2px black;
opacity: 0.6;
z-index: 1;
}

div#display_story_inner_add_text:hover {
opacity: 1;
}

div#display_story_inner_add_photo {
width: 45px;
height: 45px;
position: fixed;
background: url(../img/add_photo.png);
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
top: 135px;
left: 10px;
z-index: 0;
background-color: rgba(53, 52, 52, 0.83);
border-radius: 2px;
cursor: pointer;
box-shadow: 0px 0px 2px black;
opacity: 0.6;
z-index: 1;
}

div#display_story_inner_add_photo:hover {
opacity: 1;
}

div#display_story_inner_display_all_button {
position: relative;
display: inline-block;
color: whitesmoke;
font-weight: bold;
margin: 0px 13px;
cursor: pointer;
font-size: 14px;
padding-right: 9px;
}


#redirect_login_outer {
position: fixed;
background: rgba(34, 11, 11, 0.87);
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 200;
}

div#redirect_login_inner {
position: relative;
display: inline-block;
background: whitesmoke;
top: 30%;
padding: 16px 16px;
}

div#redirect_login_text {
color: rgb(53, 53, 53);
font-size: 14px;
}

div#redirect_login_cancel_button {
position: relative;
background: dimgray;
color: whitesmoke;
display: inline-block;
font-size: 12px;
padding: 7px 4px;
margin-top: 14px;
border-radius: 2px;
cursor: pointer;
margin-right: 5px;
}

div#redirect_login_ok_button {
position: relative;
display: inline-block;
background: rgb(40, 89, 151);
color: whitesmoke;
font-size: 12px;
padding: 7px 27px;
border-radius: 2px;
cursor: pointer;
margin-left: 5px;
}

div#scroll_down_suggest {
position: absolute;
width: 120px;
background: rgba(41, 40, 40, 0.84);
height: 120px;
color: whitesmoke;
font-size: 13px;
padding: 10px;
box-shadow: 0px 0px 3px black;
border-radius: 2px;
z-index: 200;
bottom: 10px;
left: 10px;
}

img#scroll_down_gif {
position: absolute;
width: 30px;
left: 50%;
margin-left: -15px;
bottom: 27px;
}

img#display_story_inner_sort_img {
position: absolute;
width: 12px;
right: -9px;
top: 0px;
cursor: pointer;
}

div#display_story_inner_sort_tip {
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid whitesmoke;
right: -12px;
top: 20px;
z-index: 2;
display: none;
}

div.display_story_inner_sort_class {
position: relative;
width: 110px;
color: rgb(66, 65, 65);
font-size: 14px;
padding: 4px 0px;
cursor: pointer;
}

div.display_story_inner_sort_class[select='1'] {
color: rgb(100, 21, 21);
}

div#display_story_inner_sort_div {
position: absolute;
background: whitesmoke;
top: 28px;
right: -58px;
border-radius: 2px;
box-shadow: 0px 0px 3px black;
overflow: hidden;
display: none;
}

div#display_story_inner_display_all_span {
cursor: pointer;
}

div#add_folder_suggest {
position: fixed;
width: 260px;
text-align: center;
background: rgba(100, 21, 21, 0.6);
color: whitesmoke;
z-index: 200;
font-size: 14px;
padding: 13px 5px;
border-radius: 2px;
box-shadow: 0px 0px 3px black;
left: 50%;
margin-left: -130px;
top: 30%;
}

div#new_content_choose_folder_div {
position: absolute;
width: 200px;
left: 0px;
height: 40px;
bottom: 0px;
}

div#new_content_choose_folder_span {
position: absolute;
bottom: 4px;
padding: 9px 5px;
font-size: 12px;
font-weight: bold;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-radius: 2px;
padding-right: 27px;
color: rgb(100, 21, 21);
left: 5px;
background: snow;
text-align: center;
box-shadow: 0px 0px 1px;
}

div#new_content_choose_folder_img {
width: 16px;
height: 16px;
position: absolute;
left: 96px;
bottom: 12px;
padding: 0px;
border-left: 1px solid rgb(56, 55, 55);
cursor: pointer;
}

div#new_content_choose_folder_tip {
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgb(65, 65, 65);
bottom: 42px;
left: 96px;
z-index: 2;
display: none;
}

div#new_content_choose_folder_stack {
position: absolute;
bottom: 50px;
padding: 2px 5px;
background: rgb(65,65,65);
color: whitesmoke;
left: 20px;
border-radius: 2px;
box-shadow: 0px 0px 2px black;
display: none;
}

.new_content_choose_folder_class {
font-size: 13px;
padding: 3px 3px;
position: relative;
width: 98px;
text-align: center;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.new_content_choose_folder_class[select="1"] {
color: cornflowerblue;
}

div#new_content_upload_img_button {
position: absolute;
background-image: url(../img/upload_photo2.png);
background-position: center;
background-size: 80%;
background-repeat: no-repeat;
width: 32px;
height: 32px;
background-color: rgba(46, 45, 45, 0.71);
left: 123px;
border-radius: 2px;
top: 4px;
box-shadow: 0px 0px 1px;
cursor: pointer;
z-index: 3;
}

div#about_logo {
background: url(../img/hooklr.png);
background-size: contain;
background-position: center;
height: 100px;
width: 260px;
position: relative;
margin: 0 auto;
background-repeat: no-repeat;
top: 65px;
}

div#about_content {
width: 800px;
position: relative;
min-height: 20px;
background: white;
margin: 0 auto;
box-shadow: inset 0px 0px 1px black;
border-radius: 5px;
overflow: hidden;
color: rgb(61, 61, 61);
margin-top: 60px;
margin-bottom: 60px;
}

div#about_content_title_block {
position: relative;
height: 400px;
background: whitesmoke;
overflow: hidden;
}

div#about_logo_caption {
position: relative;
text-align: center;
color: white;
top: 80px;
font-size: 12px;
}

div#about_logo_caption2 {
position: relative;
padding: 0px 182px;
text-align: center;
top: 184px;
color: white;
}

img#about_page_background {
position: absolute;
}

div#about_content_div1 {
position: relative;
padding: 40px 20px;
text-align: center;
}

div#about_content_header1 {
text-align: left;
padding: 0px 66px;
font-size: 18px
}

div#about_content_text1 {
position: relative;
font-weight: normal;
font-size: 13px;
margin-top: 27px;
text-align: justify;
padding: 0px 66px;
font-size: 14px;
}

img#about_content_img1 {
position: relative;
width: 80%;
margin: 0 auto;
margin-top: 26px;
}

img#about_content_img2 {
position: relative;
width: 50px;
height: 50px;
left: 69px;
}

div#about_content_header2 {
position: relative;
margin-top: -36px;
left: 135px;
font-size: 18px;
}

div#about_content_div2 {
position: relative;
height: 400px;
background: whitesmoke;
padding-top: 33px;
}

div#about_content_text2 {
position: relative;
top: 40px;
font-size: 13px;
padding: 0px 76px;
text-align: justify;
font-size: 14px;
}

div#about_content_div2 {
position: relative;
height: 179px;
background: whitesmoke;
padding-top: 33px;
}

img#about_content_img3 {
position: relative;
width: 50px;
height: 50px;
left: 66px;
}

div#about_content_header3 {
position: relative;
left: 129px;
top: -35px;
font-weight: bold;
}

div#about_content_text3 {
padding: 0px 78px;
font-size: 14px;
width: 194px;
text-align: justify;
}

div#about_content_div3 {
padding: 100px 0px;
position: relative;
height: 180px;
}

img#about_content_img4 {
position: absolute;
width: 432px;
top: 51px;
right: 53px;
}

div#about_content_div4 {
position: relative;
background: whitesmoke;
padding: 105px 56px;
height: 230px;
}

img#about_content_img5 {
position: relative;
float: right;
width: 55px;
}

div#about_content_header4 {
position: relative;
text-align: right;
padding-right: 69px;
font-size: 16px;
font-weight: bold;
top: 18px;
}

div#about_content_text4 {
position: relative;
top: 48px;
float: right;
width: 284px;
text-align: justify;
font-size: 14px;
}

img#about_content_img6 {
width: 360px;
position: absolute;
left: 30px;
z-index: 0;
top: 64px;
}

div#about_content_div5 {
position: relative;
padding: 60px 66px;
}

img#about_content_img7 {
position: relative;
width: 50px;
}

div#about_content_header5 {
position: relative;
top: -40px;
left: 66px;
font-size: 18px;
}

div#about_content_text5 {
font-size: 14px;
text-align: justify;
}

div#about_content_div6 {
position: relative;
background: whitesmoke;
padding: 106px 66px;
height: 250px;
}

img#about_content_img8 {
position: relative;
float: right;
width: 50px;
}

div#about_content_header6 {
float: right;
margin-right: 18px;
top: 17px;
font-size: 16px;
font-weight: bold;
position: relative;
}

div#about_content_text6 {
position: relative;
width: 267px;
float: right;
text-align: justify;
z-index: 2;
right: -267px;
font-size: 14px;
top: 80px;
}

img#about_content_img9 {
position: absolute;
width: 360px;
top: 70px;
}

div#about_content_div7 {
position: relative;
padding: 100px 66px;
height: 280px;
}

img#about_content_img10 {
position: relative;
width: 60px;
}

div#about_content_header7 {
position: relative;
top: -42px;
left: 80px;
font-size: 16px;
font-weight: bold;
}

div#about_content_text7 {
position: relative;
width: 279px;
text-align: justify;
font-size: 14px;
top: 20px;
}

img#about_content_img11 {
position: absolute;
width: 360px;
top: 60px;
right: 56px;
}

div#about_content_div8 {
position: relative;
background: whitesmoke;
padding: 120px 66px;
height: 200px;
}

img#about_content_img12 {
position: relative;
float: right;
width: 65px;
}

div#about_content_header8 {
text-align: right;
padding-right: 88px;
position: relative;
font-weight: bold;
font-size: 18px;
top: 18px;
}

div#about_content_text8 {
font-size: 14px;
position: relative;
float: right;
top: 60px;
margin-right: -80px;
width: 240px;
text-align: center;
}

img#about_content_img13 {
position: absolute;
width: 400px;
top: 65px;
}

div#about_content_bottom {
position: relative;
padding: 60px 210px;
text-align: center;
font-size: 22px;
}

div#about_content_signin_button {
position: relative;
background: rgb(43, 89, 158);
color: whitesmoke;
width: 120px;
text-align: center;
font-size: 16px;
padding: 8px 0px;
margin: 0px auto;
margin-top: 30px;
cursor: pointer;
}

div#redirect_to_about {
position: absolute;
z-index: 2;
color: white;
font-size: 12px;
right: 116px;
top: 14px;
font-weight: bold;
cursor: pointer;
}