small {
    color:gray;
    font-size:0.9em;
}
body {
    background: url('../img/fond_body.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#fond_prin_right {
    width:100%;
    min-height:20em;
    position:fixed;
    bottom:0;
    right:0;
    background-repeat: no-repeat;
    background-image:url('../img/fond_right.png');
    background-position: right 0;
    z-index: 0;
}
#fond_bar_trans {
    width:100%;
    position:fixed;
    top:135px;
}
#fond_bar_trans div {
    height:103px;
    width:100%;
    z-index: 1;
}
#fond_bar_trans div div {
    height:26px;
    width:100%;
}
#fond_bar_trans div .bar_transversal {
    background:url('../img/bar_trans.png') repeat-x center center;
    background-size: 100% 100%;
}
.hero-unit {
    margin-top:54px;
    background: none;
}
#head_fd {
    background: url('../img/head_fd.jpg') repeat-x center center;
    background-size: 100% 100%;
    width:100%;
    height:94px;
    position: absolute;
    top:20px;
    z-index:6;
    -moz-box-shadow: 0px 5px 20px #000000;
    -webkit-box-shadow: 0px 5px 20px #000000;
    box-shadow: 0px 5px 20px #000000;
}
.navbar-fixed-top {
    position: absolute;
}
.box {
    width: 110px; 
    height: 110px; 
    background-image:url('../img/box_fond.png');    
    background-repeat: no-repeat;
    float:left;
    margin-left: 45px;
    position: relative;
    z-index:2;
}
.draggable { 
    width: 110px; 
    height: 110px; 
    background:none; 
    z-index: 2; 
    float:left;
    position:relative;
    cursor:pointer;
}
#recpetor {
    position: absolute;
}
#droppable { 
    width: 674px; 
    height: 200px; 
    position:fixed; 
    bottom:0;
    z-index: 10;
    background: none;
    background-image:url('../img/pate.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
.cont_pizz {
    width:675px;
    margin:0 auto;
    height:2em;
    clear: both;
}

#object { 
    width: 300px; 
    height: 300px; 
    padding: 0.5em;
    background:none; 
    background-color: yellowgreen;  }

#content_values { 
    width: 100px; 
    min-height: 200px;
    max-height:400px;
    padding: 0.5em;
    background:none; 
    position:fixed; 
    top:13em;
    right:0px;
    z-index:1000;
    background-color: #eeeeee;
    -webkit-border-radius: 6px 0 0 6px;
    -moz-border-radius: 6px 0 0 6px;
    border-radius: 6px 0 0 6px;
    
    -moz-box-shadow: 0px 0px 10px #000000;
    -webkit-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
#mes_donnees {
    width: 0;
    max-height:500px;
    background:none; 
    position:absolute;
 
    top:15em;
    right:0px;
    z-index:990;
    background-color: #f2f2e7;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 10px #000000;
    -webkit-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
#receive_values {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 35px;
}
#mes_donnees {display:none;}
#mes_donnees h1 {font-size:1.8em;}
#mes_donnees button {width:140px;}
/*#mes_donnees form {margin:0;}*/
#mes_donnees h2 {
    color: grey;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
}
#retr_commande {cursor: pointer;}
#mes_donnees p {margin-left:15px;}
.new_targeted { 
    width:180px; 
    height:180px;}

.ui-widget-header {
    color: #222222;
    font-weight: bold;
    background-color:azure;
}

.on_object {
    float:left;
    position: absolute;
    width:100%;
    height:200px;
    display:none;
    background-repeat: no-repeat;
    background-position:bottom center;
}
/*DONNEES*/
#valid_ingreds  {
    width:90%;
    bottom: 10px;
    position: absolute;
}
#receive_values span {
    width:100%;
    border-top: 1px solid #e6e5e5;
    background-image: url('../img/bg_deg.png');
    background-repeat: repeat-x;
    background-size:auto 100%;
    color:gray;
    margin:0;
    display:list-item;
}

#receive_values label {
    margin:0 0 0 1em;
    display:inline;
    color:gray;
}
#cont_ingreds form p span {
    display:block;
}
#myModal .pop_btn_ret {
    position: absolute;
    right:10px;
    width:35px;
    height:20px;
    background-image: url('../img/pop_btn_ret.png');
    cursor:pointer;
    top: 46px;
}
#cont_ingreds form p input, #cont_ingreds form p label  {display:inline;margin-left: 0.5em;}

#cont_ingreds .ilu {
    text-align:center;
}
#cont_ingreds .illu span {
 display: inline-block;
 padding:10%;
 border-right: 1px solid #eeeeee;
}
#cont_ingreds div span img {
    display:block;
}


/*Slide_y*/
.silde_y {
    width: 100%;
    float:left;
}
#Slider_Y {
    position: relative;
}
#mask_principal {
    overflow: hidden;
    height: 270px;
    width:100%;
    position: relative;
    
}

#navig_Y {
    padding:0 5px;
    position: relative;
    z-index: 5;
    width:940px;
    margin:0 auto;
    margin-top:30px;
    text-align: center;
}
#navig_Y a{
    padding:0 1em;
    color:aliceblue;
    font-weight: bold;
    cursor:pointer;
}
#navig_Y a img{
    -webkit-transition: -webkit-transform 0.1s ease-in-out;/* Utilisé pour la transition sur chrome et safari */
    -moz-transition: -moz-transform 0.1s ease-in-out;/* Utilisé pour la transition sur Firefox */
    transition: transform 0.1s ease-in-out;
}
#navig_Y a img:hover{
    -webkit-transform: scale(1.1);/* Agrandissement de la photo à l'échelle 1.4 et rotation de -10 degrés */
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/*Slider horizontal*/
.cont_navig_galleri {
    float:left;
}
.navig_gallerie {
    position: relative;
    z-index:5;
    top:-5px;
    clear:both;
    height: 40px;
}
.navig_gallerie .sidebar_prev, .navig_gallerie .sidebar_next {
    background: url('../img/fon.jpg');
    -webkit-border-radius: 5px ;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    -moz-box-shadow: 0px 0px 10px #000000;
    -webkit-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;
    padding:0.5em 1em;
    width:35px;
    margin: 0 10px;
}
.navig_gallerie .sidebar_prev div, .navig_gallerie .sidebar_next div {
    background: url('../img/m_btn_slide.png') repeat-x;
    width:35px;
    height: 25px;
}
.navig_gallerie .sidebar_prev {
    float: left;
    clear: both;
}
.navig_gallerie .sidebar_next {
    float: right;
}
.navig_gallerie .sidebar_next div {
    background-position: center right;
}
.cont_galleri {
    float:left;
    min-height:260px;
}


/*Formulaire recherche*/
#recherche_pizz form {
    width:50%;
    float:left;
     clear:both;
}
#res_recherche {
    width:50%;
    float:right;
}
#res_recherche ul li {
    color: gray;
    display: inline;
    font-weight: bold;
    text-transform: uppercase;
}
#search_select div {display:none;}

/*Page PARTRNAIRE*/
#recherche_pizza {
    position:absolute;
    top:70px;
    right:0px;
    z-index:1000;
}
#recherche_pizza span {
    font-size:1.5em;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#list_pizzas article h1,#list_pizzas article h2,#list_pizzas article time {
    display:inline;
}
#list_pizzas article h1 {
    font-size: 2.5em;
    font-weight: lighter;
}
#list_pizzas article h2 {
    float:left;
    
}
#list_pizzas article time {
    float:right;
    font-weight: bold;
}
#list_pizzas article {
    text-align: center;
    max-height:400px;
    margin: 0.5em;
    padding: 0.5em 1em;
    background-color: #eeeeee;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    
    -moz-box-shadow: 0px 0px 10px #000000;
    -webkit-box-shadow: 0px 0px 10px #000000;
    box-shadow: 0px 0px 10px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}
#list_pizzas article hr {
    border-color:#d8d8d8;
}
#list_pizzas article .btn {width:40%;}
#list_pizzas .voir_pizza section {
    background-image: url('../img/fnd_post-it.png');
    -moz-box-shadow:inset 0px 0px 3px #898989;
    -webkit-box-shadow:inset 0px 0px 3px #898989;
    box-shadow:inset 0px 0px 3px #898989;
    padding:0.5em;
    margin:1em auto;
    border:1px solid #fff;
}
#list_pizzas .voir_pizza section h1{
    font-size:1.8em;
    margin: 0.5em 0;
    display: block;
    text-align: left;
    color:gray;
}

#list_pizzas .voir_pizza section li{
    list-style: none;
    text-align: left;
    font-size: 1.5em;
}


/*MEDIAS QUERIES*/
/*mini*/
@media (max-width: 480px) {
    #navig_Y {
        width:300px;
    }
    #navig_Y a{
        width:550px;
        padding-left:0.1em;
    }
#droppable { 
    width:300px; 
    height: 7em; 
    float: left;  
    position:fixed; 
    bottom:0;
    background: none;
    background-image:url('../img/pate.png');
    background-size: 100%;
    background-repeat: no-repeat;
    }
    .cont_pizz {
    width:300px;
    margin:0 auto;
    position: relative;
    }
    .on_object {
    background-size: 83%;
    height:7em;
    }
}

/*basse def*/
@media (min-width: 480px) and (max-width: 768px) {
    #navig_Y {
        width:550px;
    }
    #navig_Y a{
        width:550px;
        padding-left:0.1em;
    }
    #droppable { 
    width:480px; 
    height: 150px; 
    float: left;  
    position:fixed; 
    bottom:0;
    background: none;
    background-image:url('../img/pate.png');
    background-size: 100%;
    background-repeat: no-repeat;
    }
    .cont_pizz {
    width:480px;
    margin:0 auto;
    position: relative;
    }
    .on_object {
    background-size: 83%;
    height:150px;
    }
    #mask_Slider {
        width:650px;
    }
    .box {
         margin-left: 15px;
    }
}

@media (min-width: 768px) and (max-width: 979px){
    #navig_Y {
        width:724px;
    }
    #mask_Slider {
        width:710px;
    }
    .box {
         margin-left: 10px;
    }
}

/*haute def*/
@media (min-width: 1200px) {
    #navig_Y {
        width:1170px;
    }
    #droppable { 
    width:950px; 
    height: 300px; 
    float: left;  
    position:fixed; 
    bottom:0;
    background: none;
    background-image:url('../img/pate.png');
    background-size: 100%;
    background-repeat: no-repeat;
    }
    .cont_pizz {
    width:80%;
    margin:0 auto;
    position: relative;
    }
    .on_object {
    background-size: 83%;
    height:300px;
    }   
    #mask_Slider {
        width:1050px;
    }
    
    .box {
         margin-left: 85px;
    }
}