html, body, div, span, applet, object, iframes,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    font-family: 'QuickSand', sans-serif;
	background-color: #000;	

}

#container {
    font-size: 32px;
    margin: 320px 0 0 390px;
    width: 300px;
}

#calculator, #number, .buttons, .buttons3, .buttons2 {
    border-radius: 6px;
}

#calculator {
    margin: 0 auto;
    background-color: #454545;
    border: 1px solid #3D3D3D;
    width: 275px;
	height:320px;
	padding-bottom:10px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .8);
}

#header {
    border-top: 1px solid #777;
    border-radius: 6px 6px 0 0;
    padding: 10px;
}

input#number {
    text-align: right;
    background-color: #121212;
    border: none;
    border-bottom: 1px solid #777;
    color: #C8C8C8;
    font-size: 20px;
    padding: 16px;
    width: 210px;
    box-shadow: inset 0 0 10px 4px rgba(0, 0, 0, .6);
}

input#number:focus {
    outline: none;
}

#body {
    padding: 0 10px;
}

.buttons {
    cursor: default;
    text-align: center;
    padding: 7px 12px;
    font-size: 20px;
    text-shadow: 0 -1px 1px #000;
    color: #FFF;
    font-weight: bold;
    display: inline-block;
    border-top: 1px solid #777;
    width: 92px;
    background: linear-gradient(#5F5F5F 0%, #404040 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
    margin-bottom: 10px;
}

.buttons:hover {
    background: linear-gradient(#79D144 0%, #50A61F 100%);
    border-top: 1px solid #9ADD73;
    text-shadow: 0 -1px 1px #008000;
}

.buttons:active {
    box-shadow: none;
}
.buttons2 {
    cursor: default;
    text-align: center;
    padding: 7px 12px;
    font-size: 20px;
	text-shadow: 0 -1px 1px #000;
    color: #FFF;
    font-weight: bold;
    display: inline-block;
    border-top: 1px solid #777;
    width: 50px;
	height:40px;
    background: linear-gradient(#e04d4d 0%, #ff0000 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
	border:0;
	margin-left:10px;
	margin-top:-10px !important;
}
.buttons2:hover {
    background: linear-gradient(#79D144 0%, #50A61F 100%);
    border-top: 1px solid #9ADD73;
    text-shadow: 0 -1px 1px #008000;
}

.buttons2:active {
    box-shadow: none;
}
.buttons3 {
    cursor: default;
    text-align: center;
    padding: 7px 12px;
    font-size: 20px;
    text-shadow: 0 -1px 1px #000;
    color: #FFF;
    font-weight: bold;
    display: inline-block;
    border-top: 1px solid #777;
    width: 180px;
	height:50px;
	background: linear-gradient(#79D144 0%, #50A61F 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
    margin-left: 105px;
	border:0;
	margin-top:-5px !important;
}

.buttons3:hover {
    background: linear-gradient(#FFAD3F 0%, #E94E1B 100%);
    border-top: 1px solid #9ADD73;
	border:0;
    text-shadow: 0 -1px 1px #008000;
}

.buttons3:active {
    box-shadow: none;
}
.cadran {
	display:inline-block;
	width:220px;
	height:40px;
	padding: 7px 12px;
}
#valeur, #valeur1, #valeur2 {
	display:block;
	width:220px;
	height:40px;
	font-size:16px;
	margin-top:5px;
	margin-left:-5px;
}
.logo {
	background-image:url(../img/logo.png);
	display:block;
	width:259px;
	height:148px;
	margin-top:50px;
	right:20px;
	position:absolute;
}
.logo_commerce {
	display:block;
	width:259px;
	height:148px;
	margin-top:20px;
	left:20px;
	position:absolute;
}
.st-pierre {
	background-image:url(../img/st-pierre2.png);
	display:block;
	width:1280px;
	height:800px;
	margin:0 0;
	position:absolute;
	z-index:-10000;
	opacity:0.7;
}
.bouton_bas {
	display:block;
	width:910px;
	/*border:#FFF 2px dashed;*/
	margin-left:250px;
	top:550px;
	position: absolute;
	
}
.scan {
	display:block;
	width:250px;
	height:250px;
	background:#09F url(../img/scan.png) center center no-repeat;
	float:left;
}
.accbutton {
	display:block;
	width:250px;
	height:250px;
	margin-left:250px;
	background:#09F url(../img/acc.png) center center no-repeat;
	float:left;
}
.profil {
	display:block;
	width:250px;
	height:250px;
	background:#09F url(../img/edit.png) center center no-repeat;
	float:left;
}
.recherche {
	display:block;
	width:250px;
	height:250px;
	background:#09F url(../img/search.png) center center no-repeat;
	float:left;
	margin:0 10px;
}
.titre_bouton {
	display:block;
	width:100%;
	height:30px;
	background-color:#037b91;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	color:#FFF;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.solde_jour {
	display:block;
	width:120px;
	height:120px;
	background:#09F url(../img/caisse.png) center center no-repeat;
	float:left;
	margin:0  0 5px 10px;
}
.alerte_btn {
	display:block;
	width:120px;
	height:120px;
	background:#09F url(../img/alerte.png) center center no-repeat;
	float:left;
	margin:5px 0 0 10px;
}
.reboot_btn {
	display:block;
	width:100px;
	height:100px;
	background:red url(../img/reboot.png) center center no-repeat;
	float:left;
	margin:150px 0 0 10px;
}
.solde_jour span, .alerte_btn span{
	display:none;
}
#calculator {
	display:block;
	width:310px;
	height:320px;
	left:100px;
	top:200px;
	position:absolute;
}
.info_user {
	display:block;
	width:460px;
	height:420px;
	right:100px;
	top:250px;
	text-align:center;
	font-family: 'Quicksand', sans-serif;
	color:#FFF;
	position:absolute;
}
.epargne_mep {
	display:block;
	width:600px;
	height:420px;
	left:300px;
	top:270px;
	text-align:center;
	font-family: 'Quicksand', sans-serif;
	color:#FFF;
	position:absolute;
}
.alerte_mep {
	display:block;
	width:750px;
	height:500px;
	left:150px;
	top:200px;
	text-align:center;
	font-family: 'Quicksand', sans-serif;
	color:#FFF;
	position:absolute;
}

.utilisateur {
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:48px;
	font-weight:bold;
}
.solde_comp {
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#999;
}
.mep_form {
	display:block;
	position:absolute;
	top:140px;
	left:300px;
	width:700px;
	height:50px;
}
.mep_form label {
	display:inline-block;
	width:120px;
}
.mep_form label {
	display:inline-block;
	width:120px;
	height:30px;
	background-color:#009fe3;
	color:#FFF;
	margin-top:10px;
	text-align:left;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding-top:8px;
	padding-left:5px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.mep_form input {
	display:inline-block;
	width:200px;
	height:30px;
	padding-top:2px;
	margin-top:18px;
	border:none;
}
.mep_form select {
	display:inline-block;
	width:200px;
	height:30px;
	padding-top:2px;
	margin-top:18px;
	margin-left:-5px;
	border:none;
}
#login_mpe {
	display:block;
	position:absolute;
	top:270px;
	left:420px;
	width:500px;
	height:250px;
}
#login_mpe input {
	display:inline-block;
	width:200px;
	height:30px;
	padding-top:2px;
	margin-top:18px;
	border:none;
}
.form_login{
	display:block;
	width:200px;
	height:30px;
	background-color:#009fe3;
	border:none;
	color:#FFF;
	margin-top:10px;
	margin-left:205px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	padding-top:8px;
	padding-left:5px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.form_envoyer{
	display:block;
	width:320px;
	height:30px;
	background-color:#009fe3;
	border:none;
	color:#FFF;
	margin-top:10px;
	margin-left:120px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	padding-top:8px;
	padding-left:5px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.mep_form_col1, .mep_form_col2 {
	display:block;
	float:left;
	width:320px;
	margin-right:10px;
}
#recherche_mep input {
	display:block;
	position:absolute;
	top:170px;
	left:350px;
	width:540px;
	height:50px;
}
.recherche_numero input {
	display:block;
	position:absolute;
	top:300px;
	left:350px;
	width:540px;
	height:50px;
}
#rechercher {
	display:block;
	position:absolute;
	top:240px;
	left:750px;
	width:140px;
	height:40px;
	background-color:#037b91;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
#alerte_lu {
	display:block;
	position:absolute;
	top:130px;
	left:300px;
	width:160px;
	height:40px;
	background-color:#037b91;
	background-color:#037b91;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
#alerte_creer {
	display:block;
	position:absolute;
	top:130px;
	left:680px;
	width:260px;
	height:40px;
	background-color:#037b91;
	background-color:#037b91;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
#alerte_messages {
	display:block;
	float:left;
	width:100%;
	margin-left:100px;
}
.message_txt {
	display:block;
	float:left;
	width:100%;
	text-align:left;
	margin-bottom:10px;
	border:1px dashed white;
	padding:5px;
}
.message_txt>span {
	font-weight:bold;
}
#alerte_texte {
	color:#333;
	width:80%;
	height:200px;
	margin-left:200px;
}
#profil_importer_carte {
	display:block;
	position:absolute;
	top:370px;
	left:350px;
	width:160px;
	height:40px;
	background-color:#037b91;
	background-color:#037b91;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
#profil_editer_carte {
	display:block;
	position:absolute;
	top:370px;
	left:728px;
	width:160px;
	height:40px;
	background-color:#037b91;
	background-color:#037b91;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.center{
	left:450px !important;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.alerte_on{
	background:#FF0000 url(../img/alerte.png) center center no-repeat !important;
}
#update_app {
	display:block;
	position:absolute;
	background-color:#F03;
	opacity:0.8;
	width:100%;
	height:40px;
	color:white;
	font-size:14px;
	text-align:center;
	padding-top:10px;
	font-weight:bold;
	
}
.entete_calculator {
	display:block;
	position:absolute;
	top:160px;
	left:100px;
	font-size:20px;
	color:white;
	width:200px;
	height:40px;
	font-weight:bold;
	font-family: 'Quicksand', sans-serif;
}
.bouton_annuler_transaction {
	display:block;
	position:absolute;
	top:670px;
	left:120px;
	width:260px;
	height:40px;
	background-color:#C00;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
#confirmer_annulation_transaction {
	display:block;
	position:absolute;
	top:370px;
	left:520px;
	width:260px;
	height:40px;
	background-color:#C00;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#FFF;
	padding-top:15px;
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
}
.titre_transaction {
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:38px;
	font-weight:bold;
	color:#FFF;
}
.titre_detail_transaction{
	font-family: 'Quicksand', sans-serif;
	font-size:18px;
	color:#FFF;
}
.detail_transaction {
	text-transform:uppercase;
	font-family: 'Quicksand', sans-serif;
	font-size:36px;
	font-weight:bold;
	color:#999;
}