</pre>
<div class="window-margin">
<div class="window"><aside class="sidebar">
<div class="top-bar">RUBEBOX MOVIE</div>
<div class="search-box">
<input type="text" placeholder="Поиск..." /></div>
<menu class="menu">Трейлеры
<ul>
  <li class="active"><a href="#">Приключения / Боевики</a>
<ul>
  <li><a href="#">Последние</a></li>
  <li class="active"><a href="#">Популярные</a></li>
  <li><a href="#">Скоро в прокате</a></li>
  <li><a href="#">Наш выбор</a></li>
</ul>
</li>
  <li><a href="#">Анимация</a></li>
  <li><a href="#">Комедии</a></li>
  <li><a href="#">Документалистика</a></li>
  <li><a href="#">Драма</a></li>
  <li><a href="#">Ужасы</a></li>
  <li><a href="#">Фантастика / Фэнтези</a></li>
  <li><a href="#">Последние A-Я</a></li>
</ul>
<div class="separator"></div>
<ul class="no-bullets">
  <li><a href="#">Последние новости</a></li>
  <li><a href="#">Критика</a></li>
  <li><a href="#">Билеты</a></li>
  <li><a href="#">Toп 250</a></li>
</ul>
<div class="separator"></div>
</menu></aside>
<div class="main" role="main">
<div class="top-bar">
<div class="profile-box"></div>
<ul class="top-menu">
  <li class="menu-icon trigger-sidebar-toggle">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div></li>
  <li><a href="#">Последние новости</a></li>
  <li><a href="#">Статьи</a></li>
  <li class="active"><a href="#">Ролики & Кино</a></li>
  <li><a href="#">Телевидение</a></li>
  <li><a href="#">Музыка</a></li>
  <li><a href="#">Знаменитости</a></li>
</ul>
</div>
  <!-- top bar -->
<div class="featured-movie">
<img class="cover" alt="" src="jpg/backdrop_ggwxvq_1.jpg" />
Штаб
<div class="bottom-bar">
<div class="title-container"><b>Non-stop</b> Трейлер #1</div>
<div class="right">
<div class="stars"></div>
<div class="share">Поделиться</div>
</div>
  <!-- right --></div>
  <!-- bottom bar --></div>
  <!-- featured -->
<div class="movie-list">
<div class="title-bar">
<div class="left">Популярные трейлеры
Приключения / боевики</div>
  <!-- left -->
<div class="right"><a class="blue" href="#">Оценка<i class="fa fa-angle-down"></i></a>
  <a href="#">Новые</a>
  <a href="#">Старые</a></div>
  <!-- right --></div>
  <!-- title-bar -->
<ul class="list">
  <li><img class="cover" alt="" src="jpg/2014-03-08_140412_oavbye_1.png" />
Sin City: A Dame To Kill For
Action, Crime</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140329_aawn02_1.png" />
Transcendence
Action, Drama</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140239_kyg9i7_1.png" />
Need For Speed
Action, Crime</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140052_dq4dyx_1.png" />
The Amazing Spiderman
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140104_tdgzka_1.png" />
Pompeii
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140248_fmufrz_1.png" />
Divergent
Action, Sci-Fi</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140401_aewzsy_1.png" />
Guardians of the Galaxy
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140339_wck2gw_1.png" />
X-Men: Days of Fury
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140311_rj1det_1.png" />
Captain America: The Winter Soilder
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140248_fmufrz_1.png" />
Divergent
Action, Sci-Fi</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140132_bcnfqk_1.png" />
RoboCop (2014)
Action, Crime</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140329_aawn02_1.png" />
Transcendence
Action, Drama</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140239_kyg9i7_1.png" />
Need For Speed
Action, Crime</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140104_tdgzka_1.png" />
Pompeii
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140412_oavbye_1.png" />
Sin City: A Dame To Kill For
Action, Crime</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140339_wck2gw_1.png" />
X-Men: Days of Fury
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140052_dq4dyx_1.png" />
The Amazing Spiderman
Action, Adventure</li>
  <li><img class="cover" alt="" src="jpg/2014-03-08_140248_fmufrz_1.png" />
Divergent
Action, Sci-Fi</li>
</ul>
<a class="load-more" href="#">Показать больше фильмов</a></div>
</div>
</div>
</div>
<pre>

@sidebar-width: 250px;
@window-margin: 60px;
body {
  background: #FFF linear-gradient(to bottom, #3F567C, #B5CCC6) no-repeat;
  font-family: Open Sans, sans-serif;
}
a {
  text-decoration: none;
  transition-duration: .3s;
&:hover {
  transition-duration: .05s;
  }
}
.window-margin {
  max-width: 1200px;
  padding: @window-margin;
  margin: auto;
}
.window {
  margin: auto;
  border-radius: 5px;
  background: #FFF;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, .1);
.sidebar .top-bar, .main .top-bar {
  height: 65px;
  color: #FFF;
  }
.sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: @sidebar-width;
  background: #24282C;
  transition-duration: .3s;
color: #DDD;
.top-bar {
  background: #3AB0FF;
  overflow: hidden;
.logo {
  float: left;
  font-family: Open Sans Condensed, sans-serif;
  font-size: 40px;
  line-height: 65px;
  margin-left: 20px;
  }
  }
.search-box {
  background: #373D41;
  padding: 20px;
  position: relative;
input {
  width: 170px;
  border: 0;
  padding: 10px 20px;
  border-radius: 50px;
  outline: none;
  color: #999;
  transition-duration: .3s;
&:focus {
  color: #333;
& ~ .fa {
  color: #999;
  }
  }
  }
.fa {
  position: absolute;
  top: 31px;
  right: 35px;
  color: #CCC;
  transition-duration: .3s;
  cursor: pointer;
  }
  }
.menu {
  padding-top: 20px;
.separator {
  border-top: 1px solid #111111;
  border-bottom: 1px solid #353535;
  margin: 20px;
  }
a {
  color: #DDD;
  text-decoration: none;
&:hover {
  color: #FFF;
  }
  }
.menu-name {
  text-transform: uppercase;
  padding: 0 20px;
  font-size: 14px;
  margin-bottom: 10px;
  }
& > ul.no-bullets > li a {
  &:before {
  content: none !important;
  }
  }
& > ul > li {
  list-style: none;
& > a {
  position: relative;
  top: -3px;
  font-size: 14px;
  padding: 8px 25px;
  display: block;
  font-weight: bold;
&:before {
  content: '';
  height: 9px;
  width: 9px;
  border-radius: 50px;
  display: inline-block;
  margin-right: 10px;
  box-shadow: inset 0 0 0 1px #EEE;
  }
  }
&.active {
  list-style-type: disc;
  color: #FF3A3A;
  padding-bottom: 10px;
& > a {
  padding-bottom: 0;
&:before {
  background: #FF3A3A;
  box-shadow: none;
  }
  }
ul {
  display: block;
  margin-left: 50px;
  margin-top: 5px;
li.active a {
  color: #FFF;
  font-weight: bold;
  }
li a {
  padding: 5px;
  display: block;
  font-size: 13px;
  color: #888;
&:hover {
  color: #FFF;
  }
  }
  }
  }
ul {
  display: none;
  }
  }
}
  }
.main {
  margin-left: @sidebar-width;
  transition-duration: .3s;
  position: relative;
.top-bar {
  background: #279CEB;
.top-menu {
  height: 65px;
  overflow: hidden;
.menu-icon {
  padding: 27px 20px 20px 18px;
  display: none;
  cursor: pointer;
  transition-duration: .3s;
&:hover {
  background: lighten(#3AB0FF, 5%);
  transition-duration: .05s;
  }
.line {
  height: 2px;
  width: 20px;
  background: #FFF;
  margin-bottom: 4px;
  }
  }
li {
  float: left;
  font-size: 14px;
&.active a, &.active a:hover {
  background: #3AB0FF;
  color: #FFF;
  font-weight: bold;
  }
  }
a {
  padding: 0 25px;
  color: #EEE;
  line-height: 65px;
  display: block;
&:hover {
  color: #FFF;
  background: fade(#3AB0FF, 35%);
  }
  }
  }
.profile-box {
  float: right;
  background: #3AB0FF;
  height: 65px;
  line-height: 65px;
  padding: 0 20px;
  cursor: pointer;
.circle {
  background: #FFF;
  height: 30px;
  width: 30px;
  border-radius: 50px;
  display: block;
  float: left;
  margin-top: 15px;
  }
.arrow {
  float: left;
  margin-left: 10px;
  line-height: 65px;
  }
  }
  }
  .featured-movie {
  position: relative;
.cover {
  width: 100%;
  display: block;
  }
.corner-title {
  position: absolute;
  top: 20px;
  left: 20px;
  text-transform: uppercase;
  color: #FFF;
  background: rgba(25,25,25,.3);
  padding: 10px;
  font-size: 13px;
  }
.bottom-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 30px;
  background: rgba(10,10,10,.8);
  color: #FFF;
  overflow: hidden;
.title-container {
  float: left;
  font-weight: 100;
  font-size: 40px;
.fa {
  margin-right: 10px;
  color: #FF3A3A;
  }
b {
  font-weight: 600;
  }
  }
.right {
  float: right;
  font-size: 14px;
  margin-top: 14px;
.stars {
  float: left;
  color: #F0C236;
  margin-right: 20px;
  }
.share {
  float: left;
  cursor: pointer;
.fa {
  margin-right: 5px;
  }
  }
  }
  }
  }
.movie-list {
  .title-bar {
  padding: 20px;
  border-bottom: 1px solid #DDD;
  overflow: hidden;
.left {
  float: left;
  font-size: 15px;
  text-transform: uppercase;
.grey {
  color: #999;
  }
.bold {
  font-weight: bold;
  }
p {
  display: inline-block;
  margin-right: 10px;
  }
  }
.right {
  float: right;
a {
  color: #999;
  margin-left: 10px;
&.blue {
  color: #279CEB;
  }
  }
  }
  }
.list {
  margin: 20px;
  margin-right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
li {
  flex: 0 0 130px;
  padding-bottom: 30px;
  margin-right: 20px;
  position: relative;
&:hover:after {
  opacity: 1;
  }
&:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 195px;
  content: '\f144';
  background: rgba(0,0,0,.3);
  border-radius: 5px;
  opacity: 0;
  color: #FFF;
  font-size: 40px;
  display: block;
  cursor: pointer;
  line-height: 195px;
  text-align: center;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  }
img {
  width: 130px;
  height: 195px;
  display: block;
  margin: 0 auto 5px auto;
  cursor: pointer;
  }
.title, .genre {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  }
.title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 4px;
  }
.genre {
  color: #999;
  font-size: 12px;
  }
  }
  }
.load-more {
  background: #EEE;
  padding: 15px;
  margin: 20px;
  border-radius: 5px;
  text-align: center;
  color: #666;
  display: block;
&:hover {
  background: #DDD;
  }
.fa {
  margin-left: 10px;
  }
  }
  }
}
}
@tablet-bk: (1100px + (@window-margin*2));
@media only screen and (max-width: @tablet-bk) {
.window > .sidebar {
  transform: translateX(-@sidebar-width);
  }
.window > .main {
  margin-left: 0;
  }
.window > .main .top-bar .top-menu .menu-icon {
  display: block;
  }
.sidebar-is-open {
  .window > .sidebar {
  transform: translateX(0);
  }
  .window > .main {
  transform: translateX(@sidebar-width);
  }
  }
}
@media only screen and(max-width: 960px) {
.window .main .featured-movie .bottom-bar {
  position: static;
.title-container {
  font-size: 25px;
  }
  }
}

jQuery(document).ready(function($) {
$('a').on('click', function(e) {
  e.preventDefault();
  });
$('.trigger-sidebar-toggle').on('click', function() {
  $('body').toggleClass('sidebar-is-open');
  });
});