@media screen and (max-width:800px) {
    @viewport {width:600px;}
    @-ms-viewport {width:600px;} 
    @-webkit-viewport {width:600px;}
    @-moz-viewport {width:600px;}   
}
@media screen and (min-width:801px) {
    @viewport {width:600px;}
    @-ms-viewport {width:600px;} 
    @-webkit-viewport {width:600px;}
    @-moz-viewport {width:600px;}   
}

html, body {padding:0;margin:0;font-family:'Open sans',400;font-size:22px}
img {border:0;vertical-align:bottom}
a {color:#000;text-decoration:none}
input,textarea,select {background-color:#fff;width:100%;height:2em;outline:0;border:0;font-size:1em;padding:0.5em 0;margin:0.5em 0;vertical-align:bottom;resize:none;-webkit-appearance:none}
input[type=submit] {height:3em;font-weight:800;text-align:center;text-transform:uppercase;box-shadow:3px 3px 0 rgba(0,0,0,0.1);cursor:pointer}
input[type=text],input[type=password],textarea {text-indent:0.5em}
textarea {height:5em}
select {width:auto;text-indent:0.5em}
input[type=checkbox] {width:2em;height:2em;border-radius:50%}
input[type=checkbox]:checked {background-color:#62c055;background-image:URL('../graph/ico_checked.png');background-repeat:no-repeat;background-position:center center;background-size:25%}

#window {position:relative;width:600px;margin:auto}
#header {position:relative;width:100%;background-color:#62c055}
#bar {position:relative;width:33%;height:100%;margin:auto}
#logo {margin:1em 0;width:100%}
#navbar {position:relative;background-color:rgba(255,255,255,0.5);text-transform:uppercase;font-weight:800;padding:1em 0;text-align:center}
#navbar span {position:relative;margin:0 1em}
#msg {background-color:#ddeeff;padding:1em;font-weight:400;text-align:center}
#intro {margin:3em 0;text-align:center}

.notif {position:absolute;top:-15px;right:-25px;background-color:#dd0000;color:#fff;width:1.5em;height:1.5em;border-radius:50%;text-align:center}
.label {display:inline-block;vertical-align:middle;height:2em}
.btn {width:100%;height:2em;padding-top:1em;outline:0;border:0;font-size:1em;vertical-align:bottom;resize:none;font-weight:800;text-align:center;text-transform:uppercase;background-color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,0.1);box-shadow:3px 3px 0 rgba(0,0,0,0.1);cursor:pointer}

.bulle {width:3em;height:2.15em;padding-top:0.85em;background-color:rgba(255,255,255,0.1);border-radius:50%;text-align:center;color:#fff;font-weight:800}
#bulle_credits {position:absolute;top:1em;left:1em}
#bulle_credits img {width:25%;margin-left:0.15em}
#bulle_account {position:absolute;top:1em;right:1em;background-image:URL('../graph/ico_account.png');background-repeat:no-repeat;background-position:center center;background-size:40%}
#bulle_contacts {position:absolute;top:1em;right:5em;background-image:URL('../graph/ico_contacts.png');background-repeat:no-repeat;background-position:center center;background-size:50%}

.tab {position:relative;display:inline-block;background-color:#444;color:#aaa;padding:0.5em;margin:0.5em;border-radius:5px;font-weight:800;cursor:pointer}
.tab_on {background-color:#62c055;color:#fff}

.frame_clair {margin:0 1em 0.5em 1em;padding:1em;background-color:#f1f1f1;border-radius:5px}
.frame_blanc {margin:0 1em 0.5em 1em;padding:1em;background-color:#fff;border-radius:5px}

.txt_noir {color:#000}
.txt_fonce {color:#444}
.txt_clair {color:#aaa}
.txt_blanc {color:#fff}
.b {font-weight:800}
.m {font-weight:600}

.txt_center {text-align:center}

.margin_bottom {margin-bottom:1em}

.clear {clear:both}

/* INDEX */
#fblogin {display:none}
#btn_fblogin {background-color:#4d699f;color:#fff}
#btn_login {background-color:#62c055;color:#fff}
#btn_fbsignup {background-color:#4d699f;color:#fff}
#btn_logout {background-color:#444;color:#fff}
.signup_table {display:table;width:100%}
.signup_row {display:table-row}
.signup_cell {display:table-cell;width:48%}
.signup_sep {display:table-cell;width:4%}
.fb_logo {vertical-align:middle;height:50%;margin-right:0.5em;box-shadow:3px 3px 0px rgba(0,0,0,0.1)}

/* WRITE */
#W_recipient_results {display:none;background-color:#fff;padding:0.5em}
.autocomplete {margin:0 0 0.25em 0;padding:0.5em;background-color:#f1f1f1;cursor:pointer}
#btn_send {background-color:#62c055;color:#fff}

/* CONTACTS */
#ask_add {background-color:#62c055;color:#fff}
#box_add {display:none;text-align:center}
#cnl_add {cursor:pointer}
#btn_add {background-color:#62c055;color:#fff}
.contact_t {display:table;width:90%;margin:1em auto}
.contact_r {display:table-row}
.contact_name {display:table-cell;vertical-align:top}
.contact_delete {display:table-cell;width:3em;vertical-align:top}
.btn_contact_delete {background-color:#dd0000;color:#fff;border-radius:50%}

/* ACCOUNT */
#btn_save {background-color:#62c055;color:#fff}
#btn_delete {background-color:#dd0000;color:#fff}
#ask_delete {background-color:#dd0000;color:#fff}
#box_delete {display:none;text-align:center}
#cnl_delete {cursor:pointer}

/* CREDITS */
.sku_item {background-color:#62c055;color:#fff}