$blue:#77b8cc;
$blue:#6eb1d7;

@import "bootstrap";

@import "fontawesome/font-awesome";



@import "public/grid";
@import "public/popover";
@import "public/general";
@import "public/search";
@import "public/binary";
@import "public/account";
@import "public/annonces";
@import "public/affiliation";




.annonce_account_top{
  background:white;
  .security_panel{
    
    padding:10px;
    h3{
      margin-top:0;
    }
    ul{
      list-style:none;
      padding:0;
    }
  }
}
h1{
  font-size:28px;
  
}

h2{
  font-size:22px;
  
}

h3{
  font-size:20px;
  
}

#my_account_menu{
  border-radius:0;
  background:$blue;
  border:0;
  position:relative;
  .navbar-header{
    border-right:1px solid rgba(255,255,255,0.1);
    
    
  &.active a{
    background:darken($blue, 5%);
    
  }
  a{
        color:rgba(255,255,255,0.9);
        padding-left:20px;
        padding-right:20px;
        
        
      }
}
  
  top:-1px;
  .navbar-nav {
    .active a{
      background:darken($blue, 5%);
      
    }
    li > a{
      color:rgba(255,255,255,0.9);
    }
  }

  a{
    &:hover{
      
      background:darken($blue, 5%);
    }
    
  }

}

.loader{
  text-align:center;
  padding:100px;
}

.table{
  text-align:left;
}

#main{
position:relative;
//max-width:1400px;
margin:auto;
padding-top:0.1px;
padding-bottom:0.1px;

}
.top{
  
  //margin-bottom:10px;
  position:relative;
  background:white no-repeat center bottom ;  
  background-size:100%;
  background-size:cover;
 
  #specific_search{
    color:black;
    background:white;
    .inner{
      padding:10px;
      
    }
    
    
  }
  
  #menu{
    a{
      color:#383F42;
    
    }
    .btn-primary{
      
      color:white;
    }
    
    background:white;
    padding-bottom:3px;
    //border-bottom:1px solid #C8CBCC;
  }
  
}
.top_home{

  background:black url("/ete.jpg") no-repeat center center  ;
  background-size:100%;
  background-size:cover;

  position:relative;
  
  #menu{
    
    a{
      
      &:hover{
        color:#2B86F3;
      }
      
      &.btn-primary{
        &:hover{
          color:white;
        }
        
      }
    }
  }
  #search_form{
    margin-top:40px;
    
    
  }
  #specific_search{
    color:white;
    background:rgba(0,0,0,0.5);
    .inner{
      padding:10px;
      
    }
    
    
  }
  
  
  h1, h2{
    text-align:center;
    

    color:white;
    width:100%;
    padding:0;
    margin:0;
  }
  
  h1{
    font-size:2.3em;
    margin-top:200px;
    margin-bottom:50px;
    font-weight:normal;
  }
  h2{

    font-size:1.4em;
    
    img{
      width:60px;
      display:block;
      margin:1em auto;
    
      
    }
  }
}

#logo{
  width:100%;
  max-width:200px;
  padding:10px 10px;
  display:block;
  opacity:1;
  float:left;
  margin-top:3px;
  img{
    
  }

  
}

#menu{
  
  background:rgba(0,0,0,0) !important;
  width:100%;

  z-index:10;
  
  -webkit-transition: background-color 1000ms linear;
  -moz-transition: background-color 1000ms linear;
  -o-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
  
  a{
    color:white;
    
  }
  
  ul{
    margin:0;
    padding:2px 10px;
    float:right;
    li{
      padding:0;
      margin:0;
      display:inline;
      display:inline-block;
      padding:8px 0px;
      
    }
    
  }
  
}







.bottom{
  background:#323232;
  min-height:300px;
  padding:10px 10px;
  position:relative;
  text-align:left;
  #nb{
    position:absolute;
  
    right:20px;
    height:25px;
    bottom:20px;
    opacity:0.4;
    
    &:hover{
      opacity:1;
      
    }
  
  }
  ul{
    margin-left:0;
    list-style:none;
    padding:0;
    li{
      
    }
    
  }
  a,h4{
    font-weight:normal;
    color:rgb(255, 255, 255);
    
  }
  a{
    display:block;
    padding: .2em 0 0.6em;
    
  }
  
  h4{
    
    padding: .5em 0;
    border-bottom: 1px solid #656565;
  }
  
}

.page{
  padding-bottom:150px;
  table{
    margin:1em auto;
    tr:nth-child(even) {
     
        
        background:rgba(210,222,237,1);
      
      
    }
    td{
      padding:5px;
      border:1px solid rgba(77,128,186,1);
      
    }
    
  }
  
}



.layus{
  color:white;
  background:rgba(77,128,186,1);
  text-align:center;
  h1, h2,h3{
    font-weight:400;
    text-align:center;
  }
  h1{
    font-size:45px;
    
  }
  h2{
    font-size:32px;
    
  }
  padding:2em 10px;
  
}

.annonce_message_li{
  &.active, &:hover{
    background:#3677AF;
    color:white;
    text-decoration:none;
    border-color:transparent;
    .time{
      color:white;
      
    }
  }
  display:block;
  text-align:left;
  padding:10px 10px;
  color:#454340;
  
  img{
    float:left;
    border-radius:50%;
    height:60px;
    margin-right:5px;
    
  }
  .new{
    
    display:inline-block;
    width:10px;
    height:10px;
    background:#3677AF;
    border-radius:50%;
  }
  .pseudo{
    
    font-weight:600;
    margin-bottom:10px;
    
  }
  .time{
    font-size:0.7em;
    color:rgba(120,118,115,1);
    float:right;
    margin-left:10px;
    
  }
  border-radius:0;
  border-bottom:1px solid gray;
  
}

.message_avertissement{
  padding:10px;
  h3{
    margin-top:0;
  }
  background-color: #fcf8e3;
  border-top: 1px solid #faebcc;
  color: #8a6d3b;
}


.annonce_message_show_container{
  padding:0 !important;
  background:white;
  border:1px solid #ddd;
  border-radius:3px;
  .speak_with{
    padding:10px;
    line-height:60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    img{
      float:left;
      border-radius:50%;
      height:60px;
      margin-right:5px;
    
    }
  }
  
}
.annonce_message_list{
  padding:0;
  padding-right:5px;
}
.annonce_message_show{
  

  .annonce_message_container{
    
    padding:10px;
    margin-bottom:20px;
    .side{
      float:left;
      width:150px;
      text-align:center;
      position:relative;
      .square{
        position:absolute;
        background-color: #f5f5f5;
        top:16px;
        width:12px;
        height:12px;
        right:-6px;
        transform: rotate(45deg);
        
      }
      img{
         
          border-radius:50%;
          height:60px;
          
        
      }
      .pseudo{
          
            font-weight:600;
            margin-bottom:10px;
        
        }
      .time{
          font-size:0.7em;
          color:rgba(120,118,115,1);
          
        
      }
    
      
    }
    .content{
      background-color: #f5f5f5;
      padding:15px;
      margin-left:150px;
      min-height:150px;
      border-radius:10px;
      margin-right:80px;
      
    }
    .ip_country{
      font-size:0.8em;
      margin-left:150px;
      margin-right:80px;
      padding-top:5px;
    }
    
    &.me{
      
      .ip_country{
        font-size:0.8em;
        margin-right:150px;
        margin-left:80px;
      }
      
      .side{
        .square{
          right:auto;
          left:-6px;
          
        }
        
        
        float:right;
      }
      
      .content{
        margin-left:80px;
        margin-right:150px;
        
      }
      
      
    }
    
    &.desactivated{
      
      .side{
        .square{
          background-color: #fcf8e3;
          
        }
        
        

      }
      
      .content{
        background-color: #fcf8e3;
        color: #8a6d3b;
        h3{
          margin-top:0;
        }
        
      }
      
      
    }
  }
  .message_annonce{
    
    background:rgba(252,248,228,0.5);
    padding:10px;
    margin-bottom:10px;
    a{
      //color:white;
      
    }
    
  }
}


@media screen and (max-width:740px) {
  .annonce_message_show{
    
    .annonce_message_container{
    
    .content{
      margin-right:0px;
      
    }
    
    &.me{
      .content{
        margin-left:0px;
      
      }
      
    }
  
  }
   } 
    
}

.am{
  .badge{
    
    background:#3677AF;
  }
  
}

#categories{
  background:#F0F0F0;
  color:#525252;
  h2{
    font-size:1.2em;
    font-weight:normal;
    
  }
  h3{
    font-size:1.1em;

    border-bottom:1px solid #DBDBDB;
    padding-bottom:10px;
  }
  
  ul{
    list-style:none;
    padding:0;
    li{
      margin-left:0;
      font-size:0.9em;
      padding-bottom:5px;
      a{
        color:#525252;
      }
    }
    
  }
  
}

.annonce_account_dashboard{
  
  .panel{
    
    min-height:260px;
  }
  
}

#annonce_menu{
  border-bottom: 1px solid #C8CBCC;
  padding: 15px;
  text-align:center;
  .menu_icon{
    text-align:center;
    font-size:30px;
    background:white;
    display:block;
    border-radius:50%;
    margin:auto;
    padding:10px;
    width:70px;
    margin-bottom:5px;

  }
  
  .active{
    color:orange ;
    a{
      
      color:orange;
    }
    .menu_icon{
      
      background:orange;
      color:white;
      
    }
    
  }
  
  .ok{
    color:green;
    a{
      
      color:green;
    }
    .menu_icon{
      
      background:green;
      color:white;
      
    }
    
  }
  
}

.next_step{
  
  padding:20px 10px;
  text-align:center;
  margin-bottom:50px;
}

.connexion_form{
  h1{
    text-align:center;
  }
  padding:10px;

  max-width: 420px;
  padding: 10px 20px;
  margin: 20px auto 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  
}

#new_annonce_account_form_container{
  
  h1{
    text-align:center;
  }
  padding:10px;

  max-width: 600px;
  padding: 10px 20px;
  margin: 20px auto 20px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  
}

.fav{
  padding:5px;
  &.active, &:hover{
    color:#ffcc17;
    
  }
  color:#dddddd;
  font-size:18px;
  position:absolute;top:20px;right:20px;
}

.white{
  padding:20px;
  background:white;
  margin-bottom:20px;
  
  tr:nth-child(odd){
    
    background:#F7F9FA;
  }
  td{
    border:0 !important;
    
  }
}


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.aff_table{
  width:100%;
  th, td{
    padding:5px;
    border:1px solid rgba(170,170,170,1);
    background:white;
    border-collapse : collapse;
    text-align:center;
  }
  th{
    
    background:rgba(220,240,248,1);
    
    font-weight:normal;
  }
  .header_tr{
    
    th{
      color:white;
      background:rgba(58,59,86,1) !important;
    }
  }
  
  .orange{
    background:#c8de84;
    //color:black;
    
  }
}


#flashs{
  position:fixed;
  bottom:0px;

  right:2em;
  min-width:600px;
  width:50%;
  z-index:3;

}



@media screen and (max-width:740px) {
#annonce{
  
  #corps, #infos{
    
    width:auto;
    float:none;
  }
  
  #infos{
    padding:10px;
    
  }
  
  
}


#default_image{
  
  height:300px;
  border-radius:0;
}




  .annonce_header{
      .localisation{
        padding:5px 10px;
        float:none;
      }
      .price{
        text-align:right;
        font-size:1.5em;
        font-weight:600;
        float:none;
        padding-left:20px;
      }
      .fav{
    
        float:none;
        position:static;
        display:inline;
        cursor:pointer;
      }  
    
  }


  #menu{ 
    text-align:center;
    .add_annonce{
  
      display:block;

      .btn{
        width:200px;
        display:block;
        margin:6px auto;
        margin-top:0;
      }
    }

   
    #logo{
      float:none;
      margin:auto;
      display:block;
    }
    ul{
      
    float:none;
  }
}



  #search_form{ #general_search{ 
    display:block;
    .place_search{
      
      float:none;
    }
    #q, #place, #annonce_cat_id{
    border: 1px solid #c4c4c4;
    float:none;
    width:96%;
    display:block;
    border-radius:8px;
    margin:5px auto;
  }
  
  #search_button{
  
  float:none;
  width:200px;
  display:block;
  border-radius:8px;
  margin:5px auto;
  margin-top:10px;
}



}}

.top_home h1{
  width:96%;
  margin:auto;
  margin-top:30px;
  margin-bottom:30px;
}

}

#likebox-wrapper * {
   width: 100% !important;
}


#main{
  box-shadow:0 0 10px rgba(0,0,0,0.2);
  
  #main_place{
    margin-left:350px;
  }
  #sidebar{
    float:left;
    width:350px;
    min-height:100px;
    
    
    .inner{
      margin-top:10px;
      background:white;
      margin-left:10px;
      padding:5px;
    }
   
  }
  
  
  
}


@media screen and (max-width:740px) {
  #main{
  #main_place{
    margin-left:0;
  }
  #sidebar{
    float:none;
    width:auto;
    min-height:100px;
    
    
    .inner{

      margin:10px;
      padding:5px;
    }
   
  }}
  
  .annonce_header_container{
    
    height:auto;
  }
  .annonce_list .infos{
    
    height:auto;
  }

  .share{
    display:none;
  }
}


#search_map{
  padding:10px;
  
}

.page{
  
  .center{
    
    max-width:800px;
    margin:auto;
  }
}

.lequipe{
  
  text-align:left;
}

.add_annonce{
  
  .btn-primary{
    background:#eb5155;
    border-radius:20px;
    border:0;
    padding:6px 20px;
    padding-top:4px;
    transition-duration:0.2s;
    
    &:hover{
      //box-shadow:1px 2px 0px #eb5155;
      background:rgba(234,114,119,1);
    }
  }
}

.home_header{
  font-size:1.2em;
  
  text-align:center;
  margin: auto;
  padding:3em;
  background:$blue;
  p{max-width:780px;
    margin:auto;
    color:white;
    margin-bottom:1em;
  }
}

.bottom_line{
  margin-top:30px;
  padding-top:15px;
  text-align:left;
  border-top: 1px solid #656565;
  ul{
    display:inline;
    li{
      
      display:inline;
      
      a{
        
        display:inline-block;
        padding:5px 10px;
        opacity:0.5;
      }
    }
    
  }
}

#more_search{
  
  
}



.annonces_body{
  margin-left:400px;
  
  #search_form{
    background:white;
  }
  
}


.annonces_sidebar{
  
  width:400px;
  position:fixed;
  left:0;
  overflow:auto;
  
  bottom:0;
  .search_line{
    position:absolute;
    top:5px;
    left:5px;
    
  }
  .mask{
    display:none;
  }
  #map-canvas{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  
  .select_radius{
    position:absolute;
    bottom:20px;
    left:10px;
    padding:5px 10px;
    background:rgba(255,255,255,0.95);
    cursor:pointer;
    .radius_detail{
      display:inline;
    }
    
    #radius_value_field{
      width:50px;
    
    }
  
  }
  
}
#specific_search{
  text-align:center;
  padding:10px;
  padding-top:0;
}


@media screen and (max-width:1200px) {
.annonces_body{
  margin-left:300px;
}
.annonces_sidebar{
  width:300px;
}
}

@media screen and (max-width:740px) {
  .annonces_body{
    margin-left:0px;
  }
  .annonces_sidebar{
    position:relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:auto;
    height:200px !important;
  }
  
}


.map_blur{
  overflow:hidden;
#map-canvas{
  top:-10px;
  bottom:-10px;
  left:-10px;
  right:-10px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.mask{
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  .infos{
    position:absolute;
    top:10px;
    left:20px;
    right:20px;
    text-align:center;
    color:white;
  }
}

.select_radius{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  
}


}