div.border {
  width: 800px;
  margin: auto;
}
div.border p.footer {
  font-family: "Arial";
  font-size: 11px;
  color: #666666;
  margin-top: 27px;
}
div.border p.footer a {
  color: #666666;
}
#main {
  background-color: #091f4e;
  height: 801px;
  color: #ffffff;
}
#main .toolbar {
  background-color: #091f4e;
  height: 28px;
  width: 800px;
  position: absolute;
  z-index: 1;
}
#main .toolbar.transparent {
  background-color: rgba(9, 31, 78, 0.8);
}
#main .toolbar a {
  float: right;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  text-decoration: none;
}
#main .toolbar a#close {
  width: 28px;
  height: 100%;
  border-left: 1px solid #546384;
  background: url("../img/x.png") no-repeat 10px 10px;
}
#main .toolbar a.share {
  width: 100px;
  padding-left: 30px;
  line-height: 30px;
}
#main .toolbar a.share:link {
  color: rgba(255, 255, 255, 0.7);
  background: url("../img/udostepnij-70.png") no-repeat 8px 7px;
}
#main .toolbar a.share:visited {
  color: rgba(255, 255, 255, 0.3);
  background: url("../img/udostepnij-30.png") no-repeat 8px 7px;
}
#main .toolbar a.share:hover {
  color: #ffffff;
  background: url("../img/udostepnij-100.png") no-repeat 8px 7px;
}
#main .toolbar a.share:active {
  color: #ffffff;
  background: url("../img/udostepnij-100.png") no-repeat 8px 7px;
}
#main .toolbar a#home {
  width: 114px;
  padding-left: 30px;
  line-height: 30px;
}
#main .toolbar a#home:link {
  color: rgba(255, 255, 255, 0.7);
  background: url("../img/home-70.png") no-repeat 8px 8px;
}
#main .toolbar a#home:visited {
  color: rgba(255, 255, 255, 0.3);
  background: url("../img/home-30.png") no-repeat 8px 8px;
}
#main .toolbar a#home:hover {
  color: #ffffff;
  background: url("../img/home-100.png") no-repeat 8px 8px;
}
#main .toolbar a#home:active {
  color: #ffffff;
  background: url("../img/home-100.png") no-repeat 8px 8px;
}
#main #header {
  height: 161px;
  background: url("../img/belka-dol.png") no-repeat center 130px, url("../img/belka-gora.png") no-repeat center 39px, url("../img/logotyp.png") no-repeat 20px 59px, url("../img/back-naglowek.png") no-repeat;
}
#main #header div {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  text-align: justify;
  text-align-last: justify;
  -moz-text-align-last: justify;
  width: 270px;
  padding-top: 57px;
  margin: auto;
}
#main #header div span {
  visibility: hidden;
}
#main #sets {
  padding: 5px;
}
#main #sets div.setPlaceholder {
  margin-top: 15px;
  margin-left: 15px;
  height: 190px;
  width: 140px;
  position: relative;
  float: left;
}
#main #sets div.setPlaceholder div.setWrapper {
  position: absolute;
  width: 140px;
  height: 190px;
  overflow: hidden;
}
#main #sets div.setPlaceholder div.setWrapper.left {
  right: 0;
}
#main #sets div.setPlaceholder div.setWrapper.left.active {
  -moz-box-shadow: -5px 0 10px 0px #000000;
  -webkit-box-shadow: -5px 0 10px 0px #000000;
  box-shadow: -5px 0 10px 0px #000000;
}
#main #sets div.setPlaceholder div.setWrapper.active {
  z-index: 10;
  -moz-box-shadow: 5px 0 10px 0px black;
  -webkit-box-shadow: 5px 0 10px 0px black;
  box-shadow: 5px 0 10px 0px black;
}
#main #sets div.setPlaceholder div.setWrapper.active .progress-bar {
  height: 13px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#main #sets div.setPlaceholder div.setWrapper.active .progress-bar .progress {
  height: 10px;
  width: 0;
  margin: 2px 0 1px 0;
  float: left;
}
#main #sets div.setPlaceholder div.setWrapper.active div.button,
#main #sets div.setPlaceholder div.setWrapper.active .progress-bar {
  display: block;
}
#main #sets div.setPlaceholder div.setWrapper div.set {
  width: 140px;
  height: 190px;
  float: left;
}
#main #sets div.setPlaceholder div.setWrapper div.set div {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#main #sets div.setPlaceholder div.setWrapper div.set div.author {
  margin-top: 4px;
  padding: 0 6px;
}
#main #sets div.setPlaceholder div.setWrapper div.set div.title {
  margin-top: -2px;
  padding: 0 6px;
}
#main #sets div.setPlaceholder div.setWrapper div.set .cover {
  margin: 4px 10px 0 10px;
  position: relative;
  width: 120px;
  height: 120px;
}
#main #sets div.setPlaceholder div.setWrapper div.set .cover .play-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: url("../img/play.png") no-repeat center;
  cursor: pointer;
}
#main #sets div.setPlaceholder div.setWrapper div.set .cover .play-icon.pause {
  background: url("../img/pause.png") no-repeat center;
}
#main #sets div.setPlaceholder div.setWrapper div.set .cover img {
  width: 100%;
  height: 100%;
}
#main #sets div.setPlaceholder div.setWrapper div.button {
  width: 130px;
  height: 190px;
  float: left;
  display: none;
}
#main #sets div.setPlaceholder div.setWrapper div.button a {
  display: block;
  width: 78px;
  height: 40px;
  line-height: 40px;
  margin: 80px 0 0 11px;
  padding-left: 20px;
  text-align: center;
  background-image: url("../img/ustaw-ikona.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
  color: #ffffff;
}
.color0,
.green {
  background-color: #4cb29c;
}
.color0 div.button a,
.green div.button a {
  background-color: #3d8e7d;
}
.color0 .progress-bar,
.green .progress-bar {
  background-color: #357c6d;
}
.color0 .progress-bar .progress,
.green .progress-bar .progress {
  background-color: #4cb29c;
}
.color1,
.pink {
  background-color: #e03582;
}
.color1 div.button a,
.pink div.button a {
  background-color: #c41e69;
}
.color1 .progress-bar,
.pink .progress-bar {
  background-color: #ae1b5d;
}
.color1 .progress-bar .progress,
.pink .progress-bar .progress {
  background-color: #e03582;
}
.color2,
.orange {
  background-color: #e3454f;
}
.color2 div.button a,
.orange div.button a {
  background-color: #d5202c;
}
.color2 .progress-bar,
.orange .progress-bar {
  background-color: #bf1d27;
}
.color2 .progress-bar .progress,
.orange .progress-bar .progress {
  background-color: #e3454f;
}
.color3,
.red {
  background-color: #d23559;
}
.color3 div.button a,
.red div.button a {
  background-color: #ad2746;
}
.color3 .progress-bar,
.red .progress-bar {
  background-color: #99223d;
}
.color3 .progress-bar .progress,
.red .progress-bar .progress {
  background-color: #d23559;
}
.color4,
.violet {
  background-color: #ac2f75;
}
.color4 div.button a,
.violet div.button a {
  background-color: #84245a;
}
.color4 .progress-bar,
.violet .progress-bar {
  background-color: #701f4c;
}
.color4 .progress-bar .progress,
.violet .progress-bar .progress {
  background-color: #ac2f75;
}
.color5,
.purple {
  background-color: #792d7a;
}
.color5 div.button a,
.purple div.button a {
  background-color: #541f55;
}
.color5 .progress-bar,
.purple .progress-bar {
  background-color: #421842;
}
.color5 .progress-bar .progress,
.purple .progress-bar .progress {
  background-color: #792d7a;
}
#main #set-details {
  position: relative;
  height: 240px;
  color: #ffffff;
}
#main #set-details #set {
  height: 240px;
  background: url("../img/logotyp.png") no-repeat 20px 125px;
}
#main #set-details #set #title {
  font-family: 'Open Sans', sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: #ffffff;
  padding-top: 40px;
  text-align: center;
}
#main #set-details #set .cover {
  margin: 13px 340px;
  position: relative;
  width: 120px;
  height: 120px;
}
#main #set-details #set .cover .play-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: url("../img/play.png") no-repeat center;
  cursor: pointer;
}
#main #set-details #set .cover .play-icon.pause {
  background: url("../img/pause.png") no-repeat center;
}
#main #set-details #set .cover img {
  width: 100%;
  height: 100%;
}
#main #set-details.active .progress-bar {
  height: 13px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#main #set-details.active .progress-bar .progress {
  height: 10px;
  width: 0;
  margin: 2px 0 1px 0;
  float: left;
}
#main #sms-details {
  background-color: #091f4e;
  height: 378px;
  font-family: 'Open Sans', sans-serif;
}
#main #sms-details div {
  float: left;
  width: 100%;
  text-align: center;
}
#main #sms-details div.info1 {
  margin-top: 58px;
  font-size: 18px;
}
#main #sms-details div.alias {
  font-size: 74px;
  font-weight: 700;
  margin-top: 5px;
}
#main #sms-details div.info2 {
  margin-top: 14px;
}
#main #sms-details div.phoneNumber {
  font-size: 70px;
  font-weight: 700;
  margin-top: 5px;
}
#main #sms-details div span {
  font-weight: 700;
}
#main #footer {
  background-color: #091f4e;
  height: 183px;
  border-top: 1px solid #848fA7;
  color: #ffffff;
}
#main #footer .shareSet {
  height: 48px;
  width: 138px;
  margin: 30px auto;
  padding-left: 30px;
  display: block;
  line-height: 48px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  background: #3dad9d url("../img/udostepnij-big.png") no-repeat 20px 12px;
}
#main #footer div {
  text-align: center;
  font-family: sans-serif;
  font-size: 15px;
  margin-top: 35px;
}
#main #footer div div {
  margin-top: 5px;
}
#main #footer div div a {
  color: #ffffff;
  text-decoration: underline;
}