body { background: #002e62; color: #efefef }
.buton {
	background: url(sprite.png) no-repeat; 
	display: block;
	height: 63px; width: 120px;
	text-indent: -9999px; margin-right: 2px
}
.logo,.logo:hover { width: 394px; height: 90px; margin-left: 157px; margin-top: 9px;
	text-indent: -9999px; background-position: 0px -126px }

.meniu-oriz { list-style: none; position: absolute; top: 88px; left: 242px }
.meniu-oriz li { display: inline; list-style: none }		

.contact { position: absolute; top: -88px; left: 277px  }
.contact { background-position: -363px 0; width: 122px; margin-left: 84px }
.contact:hover { background-position: -363px -63px; }
.despre:hover { background-position: 0 -63px; }
.terms { background-position: -122px 0; }
.terms:hover { background-position: -122px -63px; }
.faq { background-position: -243px 0; }
.faq:hover { background-position: -243px -63px; }

.canvas { background: none; position: absolute; width: 587px; top: 151px; left: 145px; z-index: 1 }
.canvas .canvas-header, .canvas .canvas-footer { background: url(sprite.png) no-repeat;  }
.canvas-header { height: 27px; background-position: 0 -217px!important }
.canvas-footer { height: 41px; background-position: 0 -245px!important }
.canvas-body { background: #b8e33c; border: 13px solid white; padding: 10px;
	border-top: none; border-bottom: none; min-height: 250px; color: #333; font-size: 11px }
#telecomanda { position: absolute; display: block; top: 91px; left: 27px;
	background: url(sprite.png) no-repeat; width: 274px; height: 243px; 
	background-position: 0 -289px; z-index:2; }
#container { width: 750px; position: relative; margin:0 auto; }
#telecomanda-sub { display: inline-block; width: 145px; height: 130px; float: left }
#telecomanda-sub + .buton.pull-right + p,
#telecomanda-sub + .buton.pull-right + div
{ clear: right }
.logo img, .logo:hover img { display: none; }

.contact-text { background-position: -486px 0;   width: 101px;  height: 38px }
.noutati-text { background-position: -494px -49px; width: 86px;  height: 42px }
.comanda-acum-text { background-position: -277px -288px; width: 245px;  height: 66px }
.faq-text { background-position: -277px -364px; width: 136px; height: 65px }
.despre-noi-text { background-position: -447px -133px; width: 136px;  height: 40px }
.terms-text { background-position: -426px -364px; width: 136px;  height: 65px }
.welcome-text { background-position: -277px -438px; width: 113px;  height: 65px }
.vodafone-text { background-position: -399px -130px; width: 40px;  height: 36px }
.orange-text { background-position: -426px -446px; width: 50px;  height: 50px }
.cosmote-text { background-position: -488px -448px; width: 81px; height: 40px }

#welcome-block { width: 160px; /* position: absolute; top: 15px; left: 154px;*/ float: left; line-height: initial;}
#oferta-generala-block { background: url(sprite.png) no-repeat 0 -534px; width: 282px;
   line-height: initial; padding: 42px 0 0 12px; float: left}
/*#action-block { position: absolute; top: 13px; right: 11px; width: 250px; }*/
#action-block select { width: 210px; }
#action-block-body { background: white; min-height: 100px; margin: 0 10px; border-radius: 20px; padding: 18px 9px; line-height: initial;  }
.tel, .tel:hover { text-decoration: none; color: #333; }
#action-block { float: right; margin-right: -15px; width: 250px; position:relative; }
.litera { margin-bottom: 5px; width: 10px; }
.marka { margin-bottom: 5px; }
.model { margin: 3px; }
.maimic { width: 144px; }

@media (max-width: 767px) {
  body { padding-left: 20px; padding-right: 20px }
  #telecomanda { display: none }
  #telecomanda-sub { display: none; }
  .contact, .meniu-oriz { position: relative; display: inline; float: none; left: auto; top: auto; width: auto }
  .canvas { width: auto; } 
  .buton { background: none; text-indent: 0; color: white; float: none; }
  .canvas-header, .canvas-footer { display: none; }
  .logo, .logo:hover { position: relative; margin: 0; text-indent: -9999px; width: auto; height: auto; }
  .logo img, .logo:hover img { display: block; width: 100%; }
  #container { width: auto; margin: 0 }
  .canvas-body { width: auto; border: none; background: #b8e33c; color: #333; border: 20px solid white;
       padding: 20px; border-radius: 20px; font-size: 13px; line-height: 20px; }
  .contact { top: auto; left: auto; position: relative; display: list-item; }
  .pull-left { float: none }
  .canvas { top: auto; left: auto; width: auto; position: relative; }
  .meniu-oriz li a { display: block;  float: left; width: 44.9299%; text-align: center;  color: #333;}
  .buton { text-align: center; width: auto; height: auto; margin: 0; padding: 10px; }
  #separator { clear: both; height: 20px; }
  .meniu-oriz, .meniu-oriz li, .meniu-oriz li a  { display: block; margin: 0; width: auto; border-radius: 20px }
  .meniu-oriz li { width: 48%; display: block; float: left; text-align: center; margin: 1%;  }
  .meniu-oriz { width: 100%; float: left; margin: 0 0 1% 0; }
  .meniu-oriz li a { float: none; width: auto; display: block; border: 1px solid #333; background: #efefef; }
  .meniu-oriz li a, .meniu-oriz li a:hover { text-decoration: none; /*font-weight: bold*/ }

  #welcome-block, #oferta-generala-block { display: none; }
  #action-block, #action-block-body { margin: 0; width: auto; height: auto; float: none; 
    border-radius: none!important; top: auto; right: auto; padding: 0; border: none; }
  #action-block-body { border-radius: 0;background: none; }

}