html, body {
    background-image: url('images/background_surroundings.jpg');
    height: 100%;
    margin: 0px;
    min-height: 768px; /* for ie7*/
    font-family: helvetica, arial;
}

.hidden {
    display: none;
}

.cardstories_bg_outer {
    height: 100%;
    width: 100%;
    display: table;
    vertical-align: middle;
}

.cardstories_bg_inner {
    text-align: center;
    position: relative;
    vertical-align: middle;
    display: table-cell;
    height: 768px;
}

.cardstories { 
    width: 1024px; 
    height: 768px; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.cardstories .cardstories_logo { 
    background-repeat: no-repeat;
    background-image: url('images/logo.png');
    position: absolute;
    left: 419px;
    top: 15px;
    width: 223px;
    height: 171px;
}

.cardstories_game, .cardstories_lobby {
    background: transparent url('images/background.png') repeat-x left top;
}

.cardstories_extras {
    background: transparent url('images/background_plain.png') repeat-x left top;
}

.cardstories .cardstories_progress_owner { 
    position: absolute;
    height: 184px;
    width: 182px;
    z-index: 1;
    right: 25px;
    top: 15px;
}

.cardstories .cardstories_progress_player { 
    position: absolute;
    height: 180px;
    width: 198px;
    z-index: 1;
    right: 25px;
    top: 15px;
}

.cardstories .cardstories_go_lobby { 
    position: absolute;
    height: 90px;
    width: 118px;
    left: 650px;
    top: 10px;
    z-index: 4;
    background: transparent url('images/lobby.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories .cardstories_go_lobby:hover { 
    background: transparent url('images/lobby.png') no-repeat left top;
    background-position: -118px 0px;
}

/* Change cursor to treat buttons as links */
.cardstories_card,
.cardstories_submit,
.cardstories_start_story,
.cardstories_invite_friends,
.cardstories_ready {
    cursor: pointer;
}

/* subscribe (home) */

.cardstories .cardstories_extras .cardstories_subscribe .cardstories_logo_welcome {
    position: absolute;
    width: 671px;
    height: 374px;
    top: 55px;
    left: 175px;
    background: transparent url('images/logo_welcome.png') no-repeat left top;
}

.cardstories .cardstories_extras .cardstories_subscribe .cardstories_logo_farsides {
    position: absolute;
    width: 114px;
    height: 39px;
    top: 430px;
    left: 455px;
    background: transparent url('images/logo_farsides.png') no-repeat left top;
}

.cardstories .cardstories_extras .cardstories_subscribe .cardstories_bubble {
    position: absolute;
    width: 490px;
    height: 131px;
    top: 530px;
    left: 240px;
    background: transparent url('images/subscribe_bubble.png') no-repeat left top;
}

.cardstories .cardstories_extras .cardstories_subscribe label.error {
    position: absolute;
    top: 690px;
    left: 0px;
    width: 100%;
    text-align: center;
    color: red;
    font-size: 14px;
}

.cardstories .cardstories_extras .cardstories_subscribe .cardstories_email {
    position: absolute;
    width: 370px;
    height: 20px;
    top: 632px;
    left: 340px;
    border: 0;
    background-color: transparent;
    color: #FFFFFF;
    font-size: 14px;
}

.cardstories .cardstories_extras .cardstories_subscribe .cardstories_privacy_notice {
    position: absolute;
    top: 661px;
    left: 338px;
    color: #90856D;
    font-size: 10px;
}

.cardstories .cardstories_extras .cardstories_subscribe .cardstories_submit {
    position: absolute;
    background: transparent url('images/next.png') no-repeat left top;
    background-position: -212px 0px;
    top: 593px;
    left: 673px;
    border: 0px;
    height: 73px;
    width: 106px;
    z-index: 1;
}
.cardstories .cardstories_extras .cardstories_subscribe .cardstories_submit:hover {
    background-image: url('images/next.png');
    background-position: -106px 0px;
}

/* displaying a deck of cards */

.cardstories_cards_hand .cardstories_card_foreground,
.cardstories_cards_hand .cardstories_card_background {
    position:absolute; 
    top:0; 
    left:0; 
    border: 0px;
    height:100%;
}

.cardstories_cards_hand .cardstories_card_label {
    position:absolute;
    top:-25px;
    font-weight: bold; 
    font-size: 20px; 
    white-space: nowrap; 
    color: #000000;
    text-decoration: none;
}

.cardstories_cards_hand .cardstories_card_template {
    display: none;
}

.cardstories_card_confirm { 
    position: absolute;
    top: 290px;
    right: 20px;
    height: 148px;
    width: 236px;
    z-index: 5;
    display: none;
    background: transparent url('images/select_continue.png') no-repeat left top;
}

.cardstories_card_confirm_right .cardstories_card_confirm { 
   left: 50px;
 }

.cardstories_card_confirm_ok { 
    position: absolute;
    top: 60px;
    right: 15px;
    height: 50px;
    width: 109px;
    background: transparent url('images/select_ok.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories_card_confirm_ok:hover {
    background: transparent url('images/select_ok.png') no-repeat left top;
    background-position: -109px 0px;
}

.cardstories_card_confirm_cancel { 
    position: absolute;
    top: 60px;
    left: 20px;
    width: 91px;
    height: 38px;
    background: transparent url('images/select_cancel.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories_card_confirm_cancel:hover { 
    background: transparent url('images/select_cancel.png') no-repeat left top;
    background-position: -91px 0px;
}

/* state create : pick a card */

.cardstories .cardstories_create .cardstories_pick_card .cardstories_cards {
    position: absolute;
    left: 30px;
    bottom: 25px;
    display: none;
}

.cardstories .cardstories_create .cardstories_bubble_pick_a_card { 
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 159px;
    background: transparent url('images/pick_a_card.png') no-repeat left top;
    height: 99px;
    width: 388px;
}

.cardstories .cardstories_create .cardstories_pick_card .cardstories_progress_owner { 
    background: transparent url('images/progress_1.png') no-repeat left top;
}

/* state create : write a sentence */

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_progress_owner { 
    background: transparent url('images/progress_2.png') no-repeat left top;

}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_card_background {
    position: absolute;
    right: 30px;
    top: 255px;
    width: 363px;
    height: 481px;
    background: transparent url('images/card_bg.png') no-repeat left top;
}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_card {
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top left;
    width: 100%;
    height: 100%;
}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write {
    position: absolute;
    left: 3%;
    top: 270px;
    height: 352px;
    width: 544px;
}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write_title {
    position: absolute;
    background: transparent url('images/write_title.png') no-repeat left top;
    top: 21px;
    left: 7%;
    height: 72px;
    width: 538px;
    z-index: 1;

}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write_hint {
    position: absolute;
    background: transparent url('images/write_hint.png') no-repeat left top;
    top: 222px;
    left: 7%;
    height: 135px;
    width: 441px;
    z-index: 1;
}



.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write_box {
    position: absolute;
    left: 3%;
    top: 92px;
    height: 130px;
    width: 524px;
} 

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_sentence {
   border: 0px; 
   height: 90px;
   width: 410px;
   font-family: helvetica;
   font-size: 12pt;
   color: #000;
   outline: none;
} 

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_sentence.placeholder {
   color: #999;
}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write_top_box {
    background: transparent url('images/write_top_box.png') no-repeat left top;  
    height: 15px;
    width: 420px;
    border: 0px; 
} 

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write_middle_box {
   background: transparent url('images/write_middle_box.png') left top;
   border: 0px; 
   height: 95px;
   width: 420px;
} 


.cardstories .cardstories_create .cardstories_write_sentence .cardstories_write_bottom_box {
   background: transparent url('images/write_bottom_box.png') no-repeat left top;
   border: 0px; 
   height: 22px;
   width: 420px;
} 


.cardstories .cardstories_create .cardstories_write_sentence .cardstories_submit {
    position: absolute;
    background: transparent url('images/next.png') no-repeat left top;
    background-position: -212px 0px;
    border: 0px;
    top: 64px;
    right: 58px;
    height: 73px;
    width: 106px;
    z-index: 1;
}

.cardstories .cardstories_create .cardstories_write_sentence .cardstories_submit:hover {
    background-image: url('images/next.png');
    background-position: -106px 0px;
}

/* lobby */

.cardstories .cardstories_lobby .cardstories_tab {
    position: absolute;
    top: 272px;
    left: 50px;
    height: 81px;
    width: 300px;
}

.cardstories .cardstories_lobby .cardstories_tab_in_progress,
.cardstories .cardstories_lobby .cardstories_tab_finished {
    height: 78px;
    width: 123px;
    display: inline-block;
}

.cardstories .cardstories_lobby .cardstories_template {
     display: none;
}

.cardstories .cardstories_lobby .cardstories_lobby_owner {
    background: transparent url('images/lobby_owner.png') no-repeat left top;
    width: 117px;
    height: 42px;
    margin: 10px 15px;
}
    
.cardstories .cardstories_lobby .cardstories_lobby_player {
    background: transparent url('images/lobby_player.png') no-repeat left top;
    width: 105px;
    height: 42px;
    margin: 10px 15px;
}

.cardstories .cardstories_lobby .pagesize {
    display: none;
}

.cardstories .cardstories_lobby .cardstories_start_story {
    position: absolute;
    background: transparent url('images/start_story_off.png') no-repeat left top;
    top: 266px;
    right: 180px;
    height: 184px;
    width: 131px;
}

.cardstories .cardstories_lobby .cardstories_start_story:hover {
    background-image: url('images/start_story_on.png');
}

.cardstories .cardstories_lobby .cardstories_solo {
    position: absolute;
    background: transparent url('images/solo_story_off.png') no-repeat left top;
    background-position: 0px 0px;
    top: 266px;
    right: 40px;
    height: 85px;
    width: 131px;
}

.cardstories .cardstories_lobby .cardstories_solo:hover {
    background-image: url('images/solo_story_on.png');
}

.cardstories .cardstories_lobby .cardstories_pager {
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 30px;
    text-align: center;
}

.cardstories .cardstories_lobby .cardstories_pager > div  {
    height: 30px;
    width: 83px;
    display: inline-block;
}

.cardstories .cardstories_lobby .cardstories_pager .first  {
    background: transparent url('images/lobby_first.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .first:hover  {
    background: transparent url('images/lobby_first.png') no-repeat left top;
    background-position: -83px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .prev  {
    margin-left: 30px;
    background: transparent url('images/lobby_previous.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .prev:hover  {
    background: transparent url('images/lobby_previous.png') no-repeat left top;
    background-position: -83px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .next  {
    margin-right: 30px;
    background: transparent url('images/lobby_next.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .next:hover  {
    background: transparent url('images/lobby_next.png') no-repeat left top;
    background-position: -83px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .last  {
    background: transparent url('images/lobby_last.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories .cardstories_lobby .cardstories_pager .last:hover  {
    background: transparent url('images/lobby_last.png') no-repeat left top;
    background-position: -83px 0px;
}

.cardstories .cardstories_lobby .cardstories_finished,
.cardstories .cardstories_lobby .cardstories_in_progress {
    background: transparent url('images/lobby_background.png') no-repeat 35px 350px;
}

.cardstories .cardstories_lobby .cardstories_games_display {
    position: relative;
    width: 925px;
    height: 380px;
    left: 50px;
    top: 350px;
}

.cardstories .cardstories_lobby .cardstories_games {
    border-collapse: collapse;
    background: transparent url('images/transparent42.png') repeat-x left top;
}

.cardstories .cardstories_lobby .cardstories_games .cardstories_lobby_vote {
    color: #F2A71B;
}

.cardstories .cardstories_lobby .cardstories_lobby_sentence {
    cursor: pointer;
    text-decoration: underline;
}

/* lobby for in progress games */

.cardstories .cardstories_lobby .cardstories_in_progress .cardstories_tab_in_progress {
    background: transparent url('images/tab_in_progress_current.png') no-repeat left top;
}

.cardstories .cardstories_lobby .cardstories_in_progress .cardstories_tab_finished {
    background: transparent url('images/tab_finished.png') no-repeat left top;
}

.cardstories .cardstories_lobby .cardstories_in_progress .cardstories_tab_finished:hover {
    background: transparent url('images/tab_finished_over.png') no-repeat left top;
}

.cardstories .cardstories_lobby .cardstories_in_progress .cardstories_stories_you_are_playing {
    position: absolute;
    background: transparent url('images/stories_you_are_playing.png') no-repeat left top;
    top: 260px;
    left: 336px;
    height: 83px;
    width: 340px;
}

/* lobby for finished games */

.cardstories .cardstories_lobby .cardstories_finished .cardstories_tab_in_progress {
    background: transparent url('images/tab_in_progress.png') no-repeat left top;
}

.cardstories .cardstories_lobby .cardstories_finished .cardstories_tab_in_progress:hover {
    background: transparent url('images/tab_in_progress_over.png') no-repeat left top;
}

.cardstories .cardstories_lobby .cardstories_finished .cardstories_tab_finished {
    background: transparent url('images/tab_finished_current.png') no-repeat left top;
}

/* advertise the game and invite players */

.cardstories .cardstories_advertise .cardstories_hint {
    position: absolute;
    background: transparent url('images/hint.png') no-repeat left top;
    top: 45%;
    right: 30px;
    height: 211px;
    width: 267px;
}

.cardstories .cardstories_advertise .cardstories_invitegirl {
    position: absolute;
    background: transparent url('images/inviteyourfriendsgirl.png') no-repeat left top;
    top: 274px;
    left: 10%;
    height: 72px;
    width: 437px;
}

.cardstories .cardstories_advertise .cardstories_invitegirlshadow {
    position: absolute;
    background: transparent url('images/shadow_girl.png') no-repeat left top;
    top: 344px;
    left: 155px;
    height: 11px;
    width: 47px;
    z-index: 2;
}

.cardstories .cardstories_advertise .cardstories_frame {
    position: absolute;
    background: transparent url('images/purple_bkg.png');
    top: 45%;
    left: 10%;
    width: 605px;
    padding: 10px 15px 10px 15px;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_frame_bordertop {
    background: transparent url('images/bkg_white_border1.png');
    height: 33px;
    width: 100%;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_frame_borderbottom {
    background: transparent url('images/bkg_white_border2.png');
    height: 33px;
    width: 100%;
    margin-top: -1px;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_text_label {
    font-family: "helvetica";
    font-size: 12pt;
    color: #1D1D1B;
    background-color: #fff;
    text-align: left;
    margin: 0 2px 0 1px;
    padding: 0px 0px 4px 30px;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_text_label_tiny {
    font-family: "helvetica";
    font-size: 10pt;
    color: #4F4F4F;
    margin: 0 2px 0 1px;
    padding: 0px 0px 4px 30px;
    text-align: left;
    background-color: #fff;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_text_frame {
    margin: 0 2px 0 1px;
    padding: 0 25px 0 27px;
    width: 550px;
    background: #fff;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_text_frame .cardstories_text_container {
    width: 100%;
    margin: 0 0 0 1px;
    background-color: #725760;
}

.cardstories .cardstories_advertise .cardstories_frame .cardstories_text_frame .cardstories_text {
    font-family: "helvetica";
    background-color: #725760;
    font-size: 12pt;
    color: #E3D4CB;
    height: 200px;
    width: 400px;
    padding: 0px 10px 0px 10px;
    border: 0px;
    outline: none;
}

.cardstories .cardstories_advertise .cardstories_text.placeholder {
    color: #999;
}

.cardstories .cardstories_advertise .cardstories_text_bordertop {
    background: transparent url('images/bkg_purple2_border1.png') no-repeat left top;
    width: 551px;
    height: 20px;
}

.cardstories .cardstories_advertise .cardstories_text_borderbottom {
    background: transparent url('images/bkg_purple2_border2.png') no-repeat left top;
    width: 551px;
    height: 20px;
}

.cardstories .cardstories_advertise .cardstories_progress_owner { 
    background: transparent url('images/progress_3.png') no-repeat left top;
}

.cardstories .cardstories_advertise .cardstories_submit {
    position: absolute;
    background: transparent url('images/binvite.png') no-repeat;
    background-position: -106px 0px;
    margin-bottom: -10px;
    bottom: 0px;
    right: 0px;
    height: 84px;    
    width: 106px;
    z-index: 10;
}

.cardstories .cardstories_advertise .cardstories_submit_ready {
    background-position: 0px 0px;
}

.cardstories .cardstories_advertise .cardstories_submit:hover {
    background: transparent url('images/binvite.png') no-repeat left top;
    background-position: -212px 0px;
}

.cardstories .cardstories_advertise .cardstories_back {
    position: absolute;
    background: transparent url('images/bback.png') no-repeat;
    background-position: -113px 0px;
    margin-bottom: -10px;
    margin-right: -150px;
    bottom: 0px;
    right: 0px;
    height: 80px;
    width: 113px;
    z-index: 2;
}

.cardstories .cardstories_advertise .cardstories_back:hover {
    background: transparent url('images/bback.png') no-repeat;
    background-position: 0px 0px;
}


/* state invitation : owner */

.cardstories .cardstories_invitation .cardstories_owner .cardstories_progress_owner { 
    background: transparent url('images/progress_4.png') no-repeat left top;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_bubble_owner_pick_a_card { 
    position: absolute;
    left: 10px;
    top: 10px;
    background: transparent url('images/owner_pick_a_card.png') no-repeat left top;
    height: 566px;
    width: 248px;
    z-index: 10;
}


.cardstories .cardstories_invitation .cardstories_owner .cardstories_sentence {
    position: absolute;
    background: transparent url('images/invitations_owner_sentence.png') no-repeat left top;
    top: 204px;
    right: 10px;
    height: 85px;
    width: 723px;
    text-align: center;
    line-height: 80px;
    color: white;
    font-size: 13px;
    color: #F8E8D8;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_invite_friends {
    position: absolute;
    background: transparent url('images/invite_friends_button.png') no-repeat left top;
    background-position: 0px 0px;
    top: 275px;
    left: 23px;
    height: 137px;
    width: 146px;
    z-index: 20;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_invite_friends:hover {
    left: 30px;
    background: transparent url('images/invite_friends_button.png') no-repeat left top;
    background-position: -146px 0px;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_voting {
    display: none;
    position: absolute;
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top left;
    bottom: 190px;
    left: 20px;
    height: 90px;
    width: 135px;
    z-index: 20;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_voting.cardstories_ready {
    display: block;
    background: url('images/to_vote.png');
    background-position: 0px 0px;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_voting.cardstories_ready:hover {
    background: url('images/to_vote.png');
    background-position: -135px 0px;
}

.cardstories .cardstories_invitation .cardstories_owner .cardstories_cards {
    position: absolute;
    bottom: 90px;
    left: 220px;
    display: none;
}

/* state invitation, player point of view : pick a card */

.cardstories .cardstories_invitation .cardstories_pick .cardstories_progress_player { 
    background: transparent url('images/player_progress1.png') no-repeat left top;
}

.cardstories .cardstories_invitation .cardstories_pick .cardstories_bubble_player_pick_a_card { 
    position: absolute;
    left: 10px;
    top: 10px;
    background: transparent url('images/player_pick_a_card.png') no-repeat left top;
    height: 347px;
    width: 1001px;
}

.cardstories .cardstories_invitation .cardstories_pick .cardstories_sentence {
    position: absolute;
    z-index: 1;
    left: 380px;
    top: 314px;
    width: 600px;
    font-size: 13px;
    color: #7A6A59;
}

.cardstories .cardstories_invitation .cardstories_pick .cardstories_pick_mask_chose_a_card {
    position: absolute;
    bottom: 85px;
    left: 10px;
    background: transparent url('images/pick_mask_chose_a_card.png') no-repeat left top;
    height: 331px;
    width: 327px;
}

.cardstories .cardstories_invitation .cardstories_pick.cardstories_card_confirm_right .cardstories_pick_mask_chose_a_card {
    display: none;
}

.cardstories .cardstories_invitation .cardstories_pick .cardstories_card_confirm {
    top: 350px;
}

/* state invitation, anonymous view : wait for others */

.cardstories .cardstories_invitation .cardstories_invitation_anonymous .cardstories_text_label {
    font-family: "helvetica";
    font-size: 12pt;
    color: #1D1D1B;
    background-color: #fff;
    text-align: left;
    margin: 0 2px 0 1px;
    padding: 0px 0px 4px 30px;
}

.cardstories .cardstories_invitation .cardstories_invitation_anonymous .cardstories_bubble_player_pick_a_card_wait { 
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
    background: transparent url('images/player_pick_a_card_wait.png') no-repeat left top;
    height: 340px;
    width: 962px;
}

.cardstories .cardstories_invitation .cardstories_invitation_anonymous .cardstories_progress_player { 
    /*background: transparent url('images/player_progress2.png') no-repeat left top;*/
}

/* state invitation, player point of view : wait for other players to pick a card */

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_progress_player { 
    background: transparent url('images/player_progress2.png') no-repeat left top;
}

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_bubble_player_pick_a_card_wait { 
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
    background: transparent url('images/player_pick_a_card_wait.png') no-repeat left top;
    height: 340px;
    width: 962px;
}

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_pick_thanks { 
    position: absolute;
    z-index: 1;
    left: 10px;
    bottom: 100px;
    background: transparent url('images/pick_thanks.png') no-repeat left top;
    height: 267px;
    width: 648px;
}

/* state invitation, owner point of view */

.cardstories .cardstories_owner .cardstories_cards_hand .cardstories_card_label {
    position: absolute;
    bottom: 5px;
    font-weight: bold; 
    font-size: 12px; 
    color: #000;
    text-align: center;
    text-decoration: none;
}

/* state vote, player point of view : vote for a card */

.cardstories .cardstories_vote .cardstories_voter .cardstories_progress_player { 
    background: transparent url('images/player_progress3.png') no-repeat left top;
}

.cardstories .cardstories_vote .cardstories_voter .cardstories_bubble_player_vote_for_a_card { 
    position: absolute;
    left: 10px;
    top: 10px;
    background: transparent url('images/player_vote_for_a_card.png') no-repeat left top;
    height: 342px;
    width: 980px;
}

.cardstories .cardstories_vote .cardstories_voter .cardstories_sentence {
    position: absolute;
    z-index: 1;
    left: 330px;
    top: 305px;
    width: 600px;
    font-size: 13px;
    color: #7A6A59;
}

.cardstories .cardstories_vote .cardstories_voter .cardstories_vote_mask_chose_a_card {
    position: absolute;
    bottom: 80px;
    left: 10px;
    background: transparent url('images/vote_mask_chose_a_card.png') no-repeat left top;
    height: 339px;
    width: 278px;
}

.cardstories .cardstories_vote .cardstories_voter.cardstories_card_confirm_right .cardstories_vote_mask_chose_a_card {
    display: none;
}

.cardstories .cardstories_vote .cardstories_card_inactive .cardstories_card_my {
    position: absolute;
    bottom: 20px;
    right: 0px;
    margin-right: -40px;
    height: 16px;
    width: 60px;
    z-index: 100;
    background: transparent url('images/yourcard.png') no-repeat left top;
}

.cardstories .cardstories_vote .cardstories_voter .cardstories_card_confirm {
    top: 350px;
}

/* state invitation and vote, player point of view : chose a card */

.cardstories .cardstories_invitation .cardstories_pick .cardstories_cards,
.cardstories .cardstories_vote .cardstories_voter .cardstories_cards {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 1;
    display: none;
}

/* state vote, anonymous point of view : wait for other players to vote for a card */

.cardstories .cardstories_vote .cardstories_vote_anonymous .cardstories_bubble_player_vote_wait { 
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
    background: transparent url('images/player_vote_wait.png') no-repeat left top;
    height: 340px;
    width: 962px;
}

/* state vote, player point of view : wait for other players to vote for a card */

.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_progress_player { 
    background: transparent url('images/player_progress4.png') no-repeat left top;
}

.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_bubble_player_vote_wait { 
    position: absolute;
    z-index: 1;
    left: 10px;
    top: 10px;
    background: transparent url('images/player_vote_wait.png') no-repeat left top;
    height: 340px;
    width: 962px;
}

.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_vote_thanks { 
    position: absolute;
    z-index: 1;
    left: 10px;
    bottom: 100px;
    background: transparent url('images/vote_thanks.png') no-repeat left top;
    height: 267px;
    width: 648px;
}

.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_sentence { 
    position: absolute;
    z-index: 2;
    left: 320px;
    top: 300px;
}

/* state invitation and vote, player point of view : wait for others to pick or vote */

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_sentence,
.cardstories .cardstories_invitation .cardstories_invitation_anonymous .cardstories_sentence,
.cardstories .cardstories_vote .cardstories_vote_anonymous .cardstories_sentence,
.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_sentence {
    position: absolute;
    left: 330px;
    top: 310px;
    z-index: 1;
    width: 600px;
    font-size: 13px;
    color: #7A6A59;
}

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_card_change,
.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_card_change { 
    position: absolute;
    z-index: 1;
    right: 380px;
    bottom: 118px;
    background: transparent url('images/change.png') no-repeat left top;
    width: 206px;
    height: 86px;
    background-position: 0px 0px;
}

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_card_change:hover,
.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_card_change:hover { 
    background: transparent url('images/change.png') no-repeat left top;
    background-position: -206px 0px;
}

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_card_bg,
.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_card_bg {
    position: absolute;
    right: 50px;
    bottom: 30px;
    width: 298px;
    height: 395px;
    background: transparent url('medium/card_bg.png') no-repeat left top;
}

.cardstories .cardstories_invitation .cardstories_pick_wait .cardstories_card_bg .cardstories_card,
.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_card_bg .cardstories_card {
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top left;
    width: 100%;
    height: 100%;
}

/* state vote, owner view */

.cardstories .cardstories_vote .cardstories_owner .cardstories_progress_owner { 
    background: transparent url('images/progress_5.png') no-repeat left top;
}

.cardstories .cardstories_vote .cardstories_owner {
    background: transparent url('images/vote_wall.png') no-repeat 13px bottom;
}

.cardstories .cardstories_vote .cardstories_owner .cardstories_monster {
    position: absolute;
    background: transparent url('images/vote_monster.png') no-repeat left top;
    top: 130px;
    left: 12px;
    height: 293px;
    width: 245px;
}

.cardstories .cardstories_vote .cardstories_owner .cardstories_finish {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: 0;
}

.cardstories .cardstories_vote .cardstories_owner .cardstories_sentence {
    position: absolute;
    z-index: 2;
    background: transparent url('images/vote_owner_sentence.png') no-repeat left top;
    top: 230px;
    right: 20px;
    height: 85px;
    width: 723px;
    text-align: center;
    line-height: 80px;
    color: white;
    font-size: 13pt;
    color: #F8E8D8;
}

.cardstories .cardstories_vote .cardstories_owner .cardstories_finish {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: transparent url('images/next.png') no-repeat left top;
    background-position: 0px 0px;
    height: 73px;
    width: 106px;
}

.cardstories .cardstories_vote .cardstories_owner .cardstories_finish.cardstories_ready {
    background-image: url('images/next.png');
    background-position: -212px 0px;
}

.cardstories .cardstories_vote .cardstories_owner .cardstories_finish.cardstories_ready:hover {
    background-image: url('images/next.png');
    background-position: -106px 0px;
}

/* state confirm results publication */

.cardstories .cardstories_confirm_results_publication {
    display: none;
    background: transparent url('images/vote_wall.png') no-repeat 13px bottom;
}

.cardstories .cardstories_confirm_results_publication .cardstories_owner .cardstories_progress_owner {
    background: transparent url('images/progress_5.png') no-repeat left top;
}


.cardstories .cardstories_confirm_results_publication .cardstories_announce_confirm {
    position: absolute;
    top: 320px;
    left: 200px;
    height: 53px;
    width: 619px;
    background: transparent url('images/announce_results_question.png') no-repeat 13px bottom;
}

.cardstories .cardstories_confirm_results_publication .cardstories_notyet_announce_results {
    position: absolute;
    top: 430px;
    left: 160px;
    height: 258px;
    width: 328px;
    cursor: pointer;
    background: transparent url('images/confirmation_no_off.png') no-repeat 13px bottom;
}

.cardstories .cardstories_confirm_results_publication .cardstories_notyet_announce_results:hover {
    background: transparent url('images/confirmation_no_over.png') no-repeat 13px bottom;
}

.cardstories .cardstories_confirm_results_publication .cardstories_announce_results {
    position: absolute;
    top: 430px;
    left: 540px;
    height: 258px;
    width: 328px;
    cursor: pointer;
    background: transparent url('images/confirmation_yes_off.png') no-repeat 13px bottom;
}

.cardstories .cardstories_confirm_results_publication .cardstories_announce_results:hover {
    background: transparent url('images/confirmation_yes_over.png') no-repeat 13px bottom;
}

/* state complete */

.cardstories .cardstories_complete .cardstories_progress_player,
.cardstories .cardstories_complete .cardstories_progress_owner {
    display: none;
}

.cardstories .cardstories_complete {
    background: transparent url('images/vote_wall.png') no-repeat 13px bottom;
}

.cardstories .cardstories_complete .cardstories_monster {
    position: absolute;
    background: transparent url('images/complete_monster.png') no-repeat left top;
    top: 130px;
    left: 12px;
    height: 293px;
    width: 245px;
}

.cardstories .cardstories_complete.cardstories_why .cardstories_monster {
    display: none;
}

.cardstories .cardstories_complete .cardstories_winners {
    position: absolute;
    left: 210px;
    top: 35px;
    height: 20px;
    width: 450px;
    text-align: center;
    line-height: 20px;
    color: #F8E8D8;
    font-size: 13px;
}

.cardstories .cardstories_complete.cardstories_why .cardstories_winners {
    display: none;
}

.cardstories .cardstories_complete .cardstories_sentence {
    position: absolute;
    left: 180px;
    bottom: 20px;
    height: 50px;
    line-height: 50px;
    width: 500px;
    text-align: center;
    color: #F8E8D8;
    font-size: 13px;
}

.cardstories .cardstories_complete.cardstories_why .cardstories_sentence {
    left: 450px;
}

.cardstories .cardstories_complete .cardstories_set_why {
    font-family: "helvetica";
    font-size: 11px;
    text-decoration: underline;
    color: #7A6A59;
    position: absolute;
    top: 55px;
    left: 35px;
}

.cardstories .cardstories_complete.cardstories_why .cardstories_set_why {
    display: none;
}

.cardstories .cardstories_complete .cardstories_unset_why {
    display: none;
}

.cardstories .cardstories_complete.cardstories_why .cardstories_unset_why {
    font-family: "helvetica";
    font-size: 11px;
    text-decoration: underline;
    color: #7A6A59;
    position: absolute;
    top: 55px;
    left: 290px;
    display: block;
}

/* state complete, owner point of view */

.cardstories .cardstories_complete.cardstories_owner .cardstories_progress_owner { 
    background: transparent url('images/progress_6.png') no-repeat left top;
    display: block;
}

.cardstories .cardstories_complete.cardstories_owner .cardstories_complete_explain {
    position: absolute;
    background: transparent url('images/complete_owner_explain.png') no-repeat left top;
    top: 195px;
    right: 30px;
    height: 152px;
    width: 731px;
}

.cardstories .cardstories_complete.cardstories_owner.cardstories_why .cardstories_complete_explain {
    position: absolute;
    background: transparent url('images/complete_owner_why.png') no-repeat left top;
    top: 195px;
    left: 12px;
    height: 150px;
    width: 988px;
}

/* state complete, player point of view */

.cardstories .cardstories_complete.cardstories_player .cardstories_progress_player { 
    background: transparent url('images/player_progress5.png') no-repeat left top;
    display: block;
}

.cardstories .cardstories_complete.cardstories_player .cardstories_complete_explain {
    position: absolute;
    background: transparent url('images/complete_player_explain.png') no-repeat left top;
    top: 195px;
    right: 30px;
    height: 152px;
    width: 731px;
}

.cardstories .cardstories_complete.cardstories_player.cardstories_why .cardstories_complete_explain {
    position: absolute;
    background: transparent url('images/complete_player_why.png') no-repeat left top;
    top: 195px;
    left: 12px;
    height: 150px;
    width: 988px;
}

/* owner view during the vote, complete state (both for owner and player) : the wall of the results */

.cardstories .cardstories_votes {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 395px;
}

.cardstories .cardstories_votes .cardstories_column {
    width: 135px;
    display: inline-block;
    vertical-align: top;
}

.cardstories .cardstories_votes .cardstories_column .cardstories_card_bg {
    background: transparent url('small/card_bg.png') no-repeat left top;
    width: 135px;
    height: 175px;
}

.cardstories .cardstories_votes .cardstories_column.cardstories_winner_card .cardstories_card_bg {
    background: transparent url('small/card_bg_winner.png') no-repeat left top;
}

.cardstories .cardstories_votes .cardstories_column .cardstories_card {
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center center;
    width: 135px;
    height: 175px;
}

.cardstories .cardstories_votes .cardstories_column .cardstories_player_name {
    background: transparent url('images/complete_player_name.png') no-repeat center center;
    height: 13px;
    line-height: 13px;
    width: 125px;
    padding: 0px 5px;
    overflow: hidden;
    margin-top: -20px;
    margin-bottom: 20px;
    text-align: center;
    color: #5C463B;
    font-size: 8px;
}

.cardstories .cardstories_votes .cardstories_column .cardstories_voter_name {
    background: transparent url('images/complete_player_vote.png') no-repeat center center;
    height: 23px;
    line-height: 23px;
    width: 100%;
    margin-top: 5px;
    color: #000;
    font-size: 8px;
    text-align: center;
}

/* Dimensions and initial state of all pages */

.cardstories .cardstories_subscribe, 
.cardstories .cardstories_in_progress,
.cardstories .cardstories_finished,
.cardstories .cardstories_create,
.cardstories .cardstories_create > div, 
.cardstories .cardstories_advertise,
.cardstories .cardstories_invitation,
.cardstories .cardstories_invitation > div,
.cardstories .cardstories_vote,
.cardstories .cardstories_vote > div,
.cardstories .cardstories_complete,
.cardstories .cardstories_game,
.cardstories .cardstories_lobby,
.cardstories .cardstories_extras { 
     width: 100%;
     height: 100%; 
     display: none;
 }

.cardstories div.cardstories_active {
    display: block;
}

/* Credits */

.cardstories_credits_short {
    position: absolute;
    bottom: 0px;
    left: 10px;
    margin-bottom: -36px;
    height: 36px;
    line-height: 36px;
}

.cardstories_credits_short > div {
    vertical-align: middle;
    display: inline-block;
}

.cardstories_credits_short_left,
.cardstories_credits_short_right {
    width: 15px;
    height: 100%;
}

.cardstories_credits_short_middle {
    background: transparent url('images/credits_short_middle.png') repeat-x left top;
/*    color: #9D9070; */
    color: #000;
    font-size: 12px;
}

.cardstories_credits_short_middle a {
/*    color: #9D9070; */
    color: #000;
}

.cardstories_credits_short_left {
   background: transparent url('images/credits_short_left.png') no-repeat left top;
}

.cardstories_credits_short_right {
   background: transparent url('images/credits_short_right.png') no-repeat left top;
}

.cardstories_credits_long {
    width: 100%;
    height: 100%;
    background: transparent url('images/background_plain.png') repeat-x left top;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    text-align: left;
}

.cardstories_credits_close {
    width: 26px;
    height: 28px; 
    right: 60px;
    top: 30px;
    position: absolute;
    z-index: 10;
    background: transparent url('images/credits_close.png') no-repeat left top;
    background-position: 0px 0px;
}

.cardstories_credits_close:hover {
    background: transparent url('images/credits_close.png') no-repeat left top;
    background-position: -26px 0px;
}

.cardstories_credits_long_bg_inner {
    width: 735px;
    left: 50%;
    margin-left: -355px;
    height: 711px; 
    top: 30px;
    background: transparent url('images/credits_background.png') no-repeat left top;
    position: absolute;
}

.cardstories_credits_container {
    position: relative;
    padding: 100px 80px;
}

.cardstories_credits_text {
    color: #9D9070;
    font-size: 11px;
    height: 500px;
    width: 580px;
    overflow: auto;
}
