body {
    background-image:url('images/fond2.jpg');
    opacity:0.1;   
}

#iphone {
    /*background-image:url(images/iphone.png);*/
    background-color:black;
    border:3px solid #D0CECF ;
    width:340px;
    height:677px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    box-shadow: 2px 2px 20px black; 
}

.boutton {
    float: left;
    width:59px;
    height:37px;
    border:1px solid black;
    color:white;
    font-size:20px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
    /*box-shadow: 0px 0px 5px black;*/
    border-radius: 5px;
    margin-left: 10px;
    background-image: linear-gradient(bottom, rgb(102,99,102) 29%, rgb(212,212,212) 73%);
    background-image: -o-linear-gradient(bottom, rgb(102,99,102) 29%, rgb(212,212,212) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(102,99,102) 29%, rgb(212,212,212) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(102,99,102) 29%, rgb(212,212,212) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(102,99,102) 29%, rgb(212,212,212) 73%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.29, rgb(102,99,102)),color-stop(0.73, rgb(212,212,212)));  
}

.boutton_noir {
    float: left;
    width:59px;
    height:37px;
    border:1px solid black;
    color:white;
    font-size:20px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
    /*box-shadow: 0px 0px 5px black;*/
    border-radius: 5px;
    margin-left: 10px;
    background-image: linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -o-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.29, rgb(26,25,26)),color-stop(0.73, rgb(135,135,135)));   
}


.boutton_brun {
    float: left;
    width:59px;
    height:37px;
    border:1px solid black;
    color:white;
    font-size:20px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
    /*box-shadow: 0px 0px 5px black;*/
    border-radius: 5px;
    margin-left: 10px;
    background-image: linear-gradient(bottom, rgb(173,113,73) 42%, rgb(224,197,175) 93%);
    background-image: -o-linear-gradient(bottom, rgb(173,113,73) 42%, rgb(224,197,175) 93%);
    background-image: -moz-linear-gradient(bottom, rgb(173,113,73) 42%, rgb(224,197,175) 93%);
    background-image: -webkit-linear-gradient(bottom, rgb(173,113,73) 42%, rgb(224,197,175) 93%);
    background-image: -ms-linear-gradient(bottom, rgb(173,113,73) 42%, rgb(224,197,175) 93%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.42, rgb(173,113,73)),color-stop(0.93, rgb(224,197,175)));    
}


.result {
    width:295px;
    height:98px;
    border:none;
    background-image: linear-gradient(bottom, rgb(245,226,152) 49%, rgb(255,255,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(245,226,152) 49%, rgb(255,255,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(245,226,152) 49%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(245,226,152) 49%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(245,226,152) 49%, rgb(255,255,255) 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.49, rgb(245,226,152)),color-stop(1, rgb(255,255,255)));
    text-align: right;
    font-size: 80px;
    color:#0E3D21;
}

.block_button {
    /*border:1px solid white;*/
    width:290px;
    height:45px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;  
}

#ecran_iphone {
    position:absolute;
    border:3px inset gray;
    width:295px;
    height:442px;
    margin-top:25px;
    margin-left:20px;   
}

#all_button {
    /*border:1px solid white;*/
    width:290px;
    height:310px;
    margin-left:0px;
    background-image: url('images/background-button.png');
    padding-top:12px;
    padding-left:5px;  
    /*box-shadow:0px 20px 20px 0px rgba(0, 0, 0, 0.5) inset,0px 20px 20px 0px rgba(255, 255, 255, 0.5);*/
}

#button_0 input{
    width:129px;
    text-align: left;
    padding-left:20px;
}

.egale input{
    position:absolute;
    margin-left:218px;
    margin-top:-96px;
    height:88px;
    padding-top:50px;
    background-image: linear-gradient(bottom, rgb(250,111,5) 29%, rgb(255,214,178) 93%);
    background-image: -o-linear-gradient(bottom, rgb(250,111,5) 29%, rgb(255,214,178) 93%);
    background-image: -moz-linear-gradient(bottom, rgb(250,111,5) 29%, rgb(255,214,178) 93%);
    background-image: -webkit-linear-gradient(bottom, rgb(250,111,5) 29%, rgb(255,214,178) 93%);
    background-image: -ms-linear-gradient(bottom, rgb(250,111,5) 29%, rgb(255,214,178) 93%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.29, rgb(250,111,5)),color-stop(0.93, rgb(255,214,178)));
}

#infos {
    width:295px;
    height:20px;
    background-color:black;  
}

input.boutton:hover {
    background: #9cf;
}

input.boutton_brun:hover {
    background: #9cf;
}

input.boutton_noir:hover {
    background: #9cf;
}

input.egale:hover {
    background: #9cf;
}

input.boutton:active {
    background: #C8D8FF;
}

input.boutton_brun:active {
    background: #C8D8FF;
}

input.boutton_noir:active {
    background: #C8D8FF;
}

input.egale:active {
    background: #C8D8FF;
}

#boutton_iphone {
    width:65px;
    height:65px;
    margin-top:500px;
    margin-left:auto;
    margin-right:auto;
    border:3px solid #9FA1A3;
    border-radius: 50px;
    box-shadow: 0px 0px 4px black;
    background-image: linear-gradient(bottom, rgb(250,250,250) 23%, rgb(173,173,173) 82%);
    background-image: -o-linear-gradient(bottom, rgb(250,250,250) 23%, rgb(173,173,173) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(250,250,250) 23%, rgb(173,173,173) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(250,250,250) 23%, rgb(173,173,173) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(250,250,250) 23%, rgb(173,173,173) 82%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.23, rgb(250,250,250)),color-stop(0.82, rgb(173,173,173)));
}

#boutton_de_boutton_iphone {
    width:20px;
    height:20px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    border:3px solid #9FA1A3;
    border-radius:5px;
}

#haut_parleurs {
    /*border:1px solid black;*/
    width:170px;
    height:55px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
}

#haut_parleurs_1 {
    border:2px solid gray;
    width:70px;
    height:14px;
    margin-right:auto;
    margin-left:auto;
    border-radius:40px;
    background-color:black;
    background-image: url('images/background_haut_parleur_1.png');
}

#haut_parleurs_2 {
    border:2px solid gray;
    width:15px;
    height:15px;
    margin-top:19px;
    border-radius:40px;
    float:left;
    background-image: linear-gradient(bottom, rgb(13,13,13) 35%, rgb(138,138,138) 69%);
    background-image: -o-linear-gradient(bottom, rgb(13,13,13) 35%, rgb(138,138,138) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(13,13,13) 35%, rgb(138,138,138) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(13,13,13) 35%, rgb(138,138,138) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(13,13,13) 35%, rgb(138,138,138) 69%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.35, rgb(13,13,13)),color-stop(0.69, rgb(138,138,138))); 
}

#haut_parleurs_3 {
    border:2px solid gray;
    width:95px;
    height:10px;
    margin-top:20px;
    margin-left:18px;
    margin-right:auto;
    border-radius:40px;
    float:left;
    background-image: linear-gradient(bottom, rgb(161,161,161) 49%, rgb(148,148,148) 69%);
    background-image: -o-linear-gradient(bottom, rgb(161,161,161) 49%, rgb(148,148,148) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(161,161,161) 49%, rgb(148,148,148) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(161,161,161) 49%, rgb(148,148,148) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(161,161,161) 49%, rgb(148,148,148) 69%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.49, rgb(161,161,161)),color-stop(0.69, rgb(148,148,148)));   
}

#boutton_change_design {
    float: left;
    width:220px;
    height:40px;
    border:1px solid black;
    color:white;
    font-size:20px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
    box-shadow: 0px 0px 20px black;
    border-radius: 5px;
    margin-left: 10px;
    background-image: linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -o-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.29, rgb(26,25,26)),color-stop(0.73, rgb(135,135,135)));   
}

#boutton_change_design_2 {
	display:none;
    float: left;
    width:220px;
    height:40px;
    border:1px solid black;
    color:white;
    font-size:20px;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
    box-shadow: 0px 0px 20px black;
    border-radius: 5px;
    margin-left: 10px;
    background-image: linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -o-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -moz-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -webkit-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -ms-linear-gradient(bottom, rgb(26,25,26) 29%, rgb(135,135,135) 73%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.29, rgb(26,25,26)),color-stop(0.73, rgb(135,135,135)));   
}

#infos
{
    color:white;
}

.boutton_sc
{
    display:none;
}

#boutton_iphone2 {
    display:none;
}

#boutton_de_boutton_iphone2 {
    display:none;
}

#boutton_iphone {
    display:block;
}

#boutton_de_boutton_iphone {
    display:block;
}

body
{
    cursor: url('images/hand.png'), auto;
}
input:hover {
    cursor : url('images/hand.png'), auto;
}

input {
    cursor : url('images/hand.png'), auto;
}

#iphone {
    zoom:20%;
}

#iphone {
    transition:  1s;
    -moz-transition:  1s; /* Firefox 4 */
    -webkit-transition: 1s; /* Safari et Chrome */
    -o-transition:  1s; /* Opera */
}

#iphone {
    zoom:100%;
}


body {
    transition:  1s;
    -moz-transition:  1s; /* Firefox 4 */
    -webkit-transition: 1s; /* Safari et Chrome */
    -o-transition:  1s; /* Opera */
}

body {
    background-image:url(images/fond2.jpg);
    opacity:1;   
}

#ecran_iphone {
    background-color:black;
    opacity:0.08;
}

#ecran_iphone {
    transition:  1s;
    -moz-transition:  1s; /* Firefox 4 */
    -webkit-transition: 1s; /* Safari et Chrome */
    -o-transition:  1s; /* Opera */
}

#ecran_iphone:hover {
    background-color:white;
    opacity:1;
}