@import 'layouts/www';
@import 'shared';
@import 'twitter/bootstrap/responsive';

@font-face {
  font-family: montserrat;
  src: font-url('montserrat.eot');  
  src: local('montserrat'), font-url('montserrat.ttf') format('truetype');
}

body{
  font-family: montserrat;
}

#discussions{
  padding: 20px 0;
}

.header{
  background: none repeat scroll 0 0 #fff !important;
  border-top: 10px solid #FA6900;
  border-bottom: 10px solid #12C2E7;
  img{
    margin: 10px 0;
    width: 200px;
  }
  h1.header-title{
    font-family: montserrat;
    font-size: 20px;
    text-align: center;
    margin: 30px 0;
  }
}

.breadcrumb{
  background-color: #f5f5f5;
  border-radius: 4px;
  list-style: outside none none;
  margin: 20px 0;
  padding: 8px 15px;
  a{
    color: #0088cc;
  }
}

h2{
  color: #4d4d4d;
  font-size: 28px;
}

h3{
  font-size: 24px;
}


h1, h2, h3{
  margin: 15px 0; 
}

h3.title-events{
  margin: 0 0 15px;
}

span.important-title{
  font-weight: bold;
  font-size: 16px;
}

.events{
  margin-top: 20px;
}

span.title-event-multimedia{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: 15px 0;
  display: block;
}

.event-links{
  margin: 20px 0;
  text-align: center;
  a{
    display: inline;
    margin: 0 10px;
  }
}

h3{
  margin-bottom: 10px;
}

p.available-slots{
  font-size: 14px;
  text-align: center;
  span.slots{
    font-size: 20px;
    color: #0088cc;
  }
}

h4.title-discussion{
  color: #0088cc;
}

.event{
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 15px 30px;
  position: relative;
  margin: 10px 0;
  .event-date{
    position: absolute;
    top: 0;
    right: 0;
    background: none repeat scroll 0 0 #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 0 0 0 10px;
    float: right;
    margin-bottom: 5px;
    padding: 5px 15px;
    text-align: center;
    width: auto;
  }

  img.guest-picture{
    display: block;
  }
  p{
    line-height: 1.5;
  }
  .subscribe{
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .event-subscription{
    text-align: center;
    margin: 20px auto;
    p{
      font-size: 16px;
      font-weight: bold;
    }
    span.last-slot{
      color: red;
      font-size: 20px;
    }
    span.slots{
      font-size: 20px;
      color: #0088cc;
    }
  }
}

a.fancyframe{
  display: block;
  float: left;
  max-width: 140px;
  height: 80px;
  margin-right: 5px;
  overflow: hidden;
}


.alert-success{
  padding: 10px 40px;
}



@media (max-width: 479px){
  .well label {
    display: block; 
  }

  button.btn, input.btn[type="submit"] {
    margin-top: 15px;
  }
}

@media (max-width: 600px) { 
  #left-bar{
    display: none;
  }
 
  #container, .container, #footer .footer-container{
    width: auto !important;
  }
 
 #internal-search{
   display: none;
 }
  
  #content{
    width: 90%;
    margin: 0 5%;
    .top{
      .social{
        display: none;
      }
    }
  }

  #footer {
    display: none;
  }

  #header h1 {
    width: 100%;
  }

  #footer_mobile {
    display: block;  
  }
  
  #top .container {
    .pull-right {
      display: none;
    }
  }
}

@media (max-width: 767px){
  .header{
    text-align: center;
    img{
      margin: 10px 0;
      width: 200px;
    }
    h1.header-title{
      margin: 20px 0;
    }
  }
}

@media (max-width: 1024px){ 
  #left-bar{
    display: none;
  }

  #content{
    width: 90%;
    margin: 0 5%;
    .top{
      .social{
        display: none;
      }
    }
  }
  
  #header h1 {
    width: 100%;
  }
  
  #container, .container, #footer .footer-container{
    width: auto !important;
  }

 #internal-search{
   display: none;
 }
  
  #top .container {
    .pull-right {
      display: none;
    }
  }
}

