﻿/* =Fonts
 -------------------------------------------------------------- */


@font-face {
    font-family: 'helsureg';
    src: url('../fonts/reg.eot');
    src: url('../fonts/reg.eot') format('embedded-opentype'),
         url('../fonts/reg.woff2') format('woff2'),
         url('../fonts/reg.woff') format('woff'),
         url('../fonts/reg.ttf') format('truetype'),
         url('../fonts/reg.svg#helsureg') format('svg');
}

@font-face {
    font-family: 'helsubold';
    src: url('../fonts/bold.eot');
    src: url('../fonts/bold.eot') format('embedded-opentype'),
         url('../fonts/bold.woff2') format('woff2'),
         url('../fonts/bold.woff') format('woff'),
         url('../fonts/bold.ttf') format('truetype'),
         url('../fonts/bold.svg#helsubold') format('svg');
}


@font-face {
    font-family: 'helsublack';
    src: url('../fonts/black.eot');
    src: url('../fonts/black.eot') format('embedded-opentype'),
         url('../fonts/black.woff2') format('woff2'),
         url('../fonts/black.woff') format('woff'),
         url('../fonts/black.ttf') format('truetype'),
         url('../fonts/black.svg#helsublack') format('svg');
}





a:hover{
	color:#999;
	}	
			
.form table, input, textarea, label, li, select {
	font-family: 'helsubold',Verdana,Arial,sans-serif;
	color: #666;
	line-height: 160%;
	font-weight: lighter;
	list-style-type: none;
	}				

table{
	width:100%;
	    border-radius: 5px;
	}
th, td{	
	padding: none;
	}	
th{	
	text-align:left;
	}
li{
	display:list-item;
	}	
	
#container{	
	margin:0 auto;
	background-image: url(../textureleaf.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding:10px;
	text-align:left;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: 2px solid #000;
	}		
	
	


/* form 1 */

	#form1{
		margin: 0;
		float:left;
		width: 100%;
		z-index: 1500;
		margin-bottom: 20px;
		box-shadow: rgba(0,0,0, .2) 0px -1px 1px;
		    border-radius: 5px;
		
		}
	#form1 fieldset{
		margin: 0 auto;
		padding:0;
		border:none;	
		bottom: 0px;
		float:left;
		display: inline;
		width: 100%;
		}		
	#form1 legend{display:none;}	
	#form1 p{margin: 0;}	
	#form1 label{ display:block;
	font-family: 'helsureg',cursive,Verdana,Arial,Helvetica,sans-serif;
	color: Orange;
	line-height: 30px;
	font-size: smaller; 
	font-weight: lighter;
	}	
	#form1 input, #form1 textarea{		
		font-family: 'helsublack',Helvetica,cursive,Helvetica,sans-serif;
		line-height: 1.2em;
		font-size: 1.08em;
		background: #FFF;
		height: 50px;
		margin: 0;
		box-sizing: border-box;
		}		
	#form1 textarea{
		height: 150px;
		overflow:auto;
		font-family: Helvetica,cursive,Helvetica,sans-serif;
	
		}					
	#form1 p.submit{
		clear:both;
		padding: 0px 25px 20px 25px;
		margin:0;
		text-align:right;
		}	
	#form1 button{
	text-align: center;
	color: white;
	background: rgba(226, 75, 91, 0.9);
	height: 50px;
	width: 100%;
	margin: 0 auto;
	top: 100%;
	border: none;
	cursor: pointer;
	font-family: 'helsubold',Helvetica,Verdana,Arial,sans-serif;
	color: #FFF;
	font-size: large;
		}	
		#form1 button:hover{
	transition: ease-in-out 0.2s;
	text-align: center;
	color: #f5bd73;
	background-color: rgba(226, 75, 91, 1);
	width: 100%;
	margin: 0 auto;
	top: 100%;
	border: none;
		}	
		
		.currencyinput {
    position: absolute;
    font-family: 'helsublack',Helvetica,Verdana,Arial,sans-serif;
    color: #f5bd73;
    font-size: 2em;
    line-height: 1.7em;
    margin-left: -37px;
		}
		
		
		.submeat { 
		-webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;}
	.submeat:hover { 
	cursor: pointer;
	-webkit-transform: scale(1.02);
	-moz-transform: scale(1.02);
	-o-transform: scale(1.02);
	-ms-transform: scale(1.02); }						


.centvingt {
width: 120px;	
}

#selectah {
position: absolute; height: 50px; width: 120px; background-color: transparent; border-top: none; border-top-color: transparent; border-bottom: none; border-left-color: transparent; border-bottom-color: transparent; border-right-color: transparent; border right: none;	padding-left: 5px;
}



/* // form 2 */

#form2{
		padding-top: 10px;
		width: 50%;
		min-width: 500px;
		margin-right: 25%;
		margin-left: 25%;
		z-index: 1500;
		position: absolute;
		bottom: 100px;
		
		}
	#form2 fieldset{
				margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		padding:0;
		border:none;	
		bottom: 0px;
		float:left;
		display: inline;
		width: 100%;
		}		
	#form2 legend{display:none;}	
	#form2 p{margin: 0;}	
	#form2 label{ display:block;
	font-family: 'helsureg',cursive,Verdana,Arial,Helvetica,sans-serif;
	color: Orange;
	line-height: 30px;
	font-size: smaller; 
	font-weight: lighter;
	}	
	#form2 input, #form2 textarea{		
		width: 45%;
		font-family: 'helsublack',Helvetica,cursive,Helvetica,sans-serif;
		line-height: 1.2em;
		background: none;
		border: solid #A9A9A9 1px;
		border-radius: 2px;
		height: 50px;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		box-sizing: border-box;
		}		
	#form2 textarea{
		height: 150px;
		overflow:auto;
		font-family: Helvetica,cursive,Helvetica,sans-serif;
		
		}					
	
	
			#cost::-moz-placeholder {
			color:#333; 
			}
		
		#cost::-webkit-input-placeholder { 
			color:#333; 
			}
			
	
		#cost {
		font-family: 'helsublack',Helvetica,cursive,Helvetica,sans-serif;
  		color: #f5bd73;
		border-left: none;
		border-top: none;
		border-bottom: none;
		padding-right: 5px;
		padding-left: 5px;
		width: 100%;
		} 
		
		


		
	#cost2 {
	width: 100%;
	float: right;
	right: 0px;
	border: none;
	padding-right: 5px;
	padding-left: 5px;
	color: #666;	
			
			} 

#cost2::-moz-placeholder { color:#333; }
#cost2::-webkit-input-placeholder { color:#333; }

	#cost3 {
		font-family: 'helsublack',Helvetica,cursive,Helvetica,sans-serif;
		font-size: 2em;
		color: #f5bd73;
		position: absolute;
		left: 0px;
		padding-right: 5px;
		padding-left: 5px;
		min-width: 250px;
			} 
			
			

	#cost4 {
			width: 5%;
			float: right;
			right: 0px;
			font-size: 1.1em;
			text-align: left;
			min-width: 250px;
			}
			
			
			
	#divhappyhand {
		/*background-color: rgba(245,189,115, 1);*/
		background-color: #FFF;
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding-bottom: 200px;
		/*box-shadow: #333333 0px 2px 5px;*/
		z-index: 1000;
		top: -40px;
	}
	
	
.sectionindicators {
	position: fixed;
	z-index: 1500;
	top: 40%;
	right: 25px;
	width: 20px;
	
	}

.sectionindicators li {
    list-style: none;
    width: 5px;
    height: 5px;
	 margin: 10px;
	border-radius: 5px;
	z-index: 1500;
	clear: both;
}
.sectionindicators li a {
    display: block;
       width: 10px;
    height: 10px;
	border-radius: 50%;
 
    background: none;
	box-shadow: rgba(0,0,0, .2) 0px 1px 2px;
	border: 3px solid #ED743E;
	padding: 0 !important ;
}


/*.sectionindicators li.active a {
    
}
*/


::-moz-selection {
    text-shadow: none;
	background-color: #3071A9;
	color: #FFF;
}

::selection {
    text-shadow: none;
	background-color: #3071A9;
		color: #FFF;
}


/* ---------------------------Messagerie ------------------------------------------*/

.friend-list {
  list-style: none;
}

.friend-list li {
  border-bottom: 1px solid #fff;
  background-color: #fadfba;
}

.friend-list li:hover {
  background-color: #f8d4a2;
}


.friend-list li a img {
  float: left;
  width: 45px;
  height: 45px;
  margin-right: 0px;
}

.friend-list li a {
  position: relative;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
    padding-left: 20px;
	padding-right: 30px;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
}

.friend-list li.active a {
  background-color: #ED743E;
}

.friend-list li a .friend-name, 
.friend-list li a .friend-name:hover {
  color: #777;
}


.friend-list li.active .friend-name {
	color: #FFF;
}

.friend-list li a .last-message {
    width: 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    margin-top: 7px;
}

.friend-list li a .time {
  position: absolute;
  top: 10px;
  right: 20px;
}

small, .small {
  font-size: 85%;
}

.friend-list li a .chat-alert {
  position: absolute;
  right: 20px;
  top: 27px;
  font-size: 10px;
  padding: 3px 5px;
}

.chat-message {
  padding: 60px 20px 115px;
}

.chat {
    list-style: none;
    margin: 0;
}

.chat-message{
    background: #f9f9f9;  
}

.chat li img {
  width: 45px;
  height: 45px;
  border-radius: 50em;
  -moz-border-radius: 50em;
  -webkit-border-radius: 50em;
}

img {
  max-width: 100%;
}

.chat-body {
  padding-bottom: 20px;
}

.chat li.left .chat-body {
    margin-left: 70px;
    background-color: #ED743E;
    color: #FFF;
}

.chat li .chat-body {
  position: relative;
  font-size: 11px;
  padding: 10px;
  border: 1px solid #f1f5fc;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.chat li .chat-body .header {
  padding-bottom: 5px;
}

.chat li .chat-body p {
  margin: 0;
}

.chat li.left .chat-body:before {
  position: absolute;
  top: 15px;
  left: -7px;
  border-radius: 3px;
  display: inline-block;
  background: #ED743E;
  width: 16px;
  height: 16px;
  border-top: 1px solid #ED743E;
  border-left: 1px solid #ED743E;
  content: '';
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.chat li.right .chat-body:before {
  position: absolute;
  top: 15px;
  right: -7px;
  border-radius: 3px;
  display: inline-block;
  background: #fadfba;
  width: 16px;
  height: 16px;
  border-top: 1px solid #fadfba;
  border-right: 1px solid #fadfba;
  content: '';
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.chat li {
  margin: 15px 0;
}

.chat li.right .chat-body {
  margin-right: 70px;
  background-color: #fadfba;
}

.chat-box {
  position: fixed;
  bottom: 0;
  background: #f9f9f9;
  left: 16.66666667%;
  right: 0;
  padding: 15px;
  border-top: 1px solid #eee;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.primary-font {
  color: #FFF;
  font-size: 12px;
}




/* Switch*/

.onoffswitch {
    position: relative; width: 80px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	display: inline-block;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #EEEEEE; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "\f00c";
background-color: #ED743E;
color: #FFFFFF;
text-align: left;
font-weight: 100;
font-size: 3.5em;
font-family: 'FontAwesome';
}
.onoffswitch-inner:after {
content: "\f00d";
padding-right: 3px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
font-weight: 100;
font-size: 4em;
font-family: 'FontAwesome';
}
.onoffswitch-switch {
    display: block; width: 30px; height: 30px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 46px;
    border: 2px solid #EEEEEE; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}