/*css all document*/
p, div, span, h1, h2, h3, h4, h5, h6, ol, ul, li, a, table, tr, td, body  { /*z d�vodu vspace a hspace*/
	margin: 0;
	padding: 0;
  }

  a.underline:hover {
      text-decoration: underline!important;
}

body {
	background: #fff url('../pictures/background.jpg') no-repeat top center;
	text-align: center;
	font-family: Arial;
	color: #fff;
}

#center {
    position: relative;
    width: 980px;
    height: auto;
    margin: 0 auto;
    background: url('../pictures/head.jpg') no-repeat top center;
}

#center2 {
    position: relative;
    width: 980px;
    height: auto;
    margin: 0 auto;
    background: url('../pictures/head-2.jpg') no-repeat top center;
}

/*css all document*/

#header {
    position: relative;
    width: 892px;
    height: 320px;
    margin: 0 auto;
    text-align: left;
}

#header #logo {
    position: absolute;
    width: 273px;
    height: 172px;
    left: 35px;
    top: 27px;
}

#header #logo h2 span {
    position: absolute;
    width: 273px;
    height: 172px;
    left: 0;
    top: 0;
    background: url('../pictures/logo.jpg') no-repeat 0 0;
    z-index: 5;
    cursor: pointer;
}

#header #flash {
    position: absolute;
    width: 547px;
    height: 213px;
    top: -1px;
    left: 346px;
}

/*menu*/

#header #menu {
    position: absolute;
    width: 578px;
    height: 40px;
    top: 211px;
    left: 308px;
}

#header #menu a {
  color: #3f1e0e;
  font-size: 0px;
}

#header #menu li {
    list-style: none;
    display: inline;
    position: relative;
    float: left;
    height: 40px;
}

#header #menu li span {
    position: absolute;
    height: 40px;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

#header #menu li.m1 span,
#header #menu li.m1 {
    width: 75px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat 0 0;
}

#header #menu li.m1 span:hover{
    width: 75px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat 0 -53px;
}

#header #menu li.m2 span,
#header #menu li.m2 {
    width: 148px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -75px 0;
}

#header #menu li.m2 span:hover{
    width: 148px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -75px -53px;
}

#header #menu li.m3 span,
#header #menu li.m3 {
    width: 66px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -223px 0;
}

#header #menu li.m3 span:hover{
    width: 66px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -223px -53px;
}

#header #menu li.m4 span,
#header #menu li.m4 {
    width: 80px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -289px 0;
}

#header #menu li.m4 span:hover{
    width: 80px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -289px -53px;
}

#header #menu li.m5 span,
#header #menu li.m5 {
    width: 108px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -369px 0;
}

#header #menu li.m5 span:hover{
    width: 108px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -369px -53px;
}

#header #menu li.m6 span,
#header #menu li.m6 {
    width: 101px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -477px 0;
}

#header #menu li.m6 span:hover{
    width: 101px;
    z-index: 10;
    background: url('../pictures/menu.png') no-repeat -477px -53px;
}

/*menu*/

/*nadpisy*/

#header #nadpis {
    position: relative;
    width: 284px;
    height: 18px;
    top: 244px;
    left: 25px;
}

#header #nadpis h2 {
    font-size: 5px;
}

#header #nadpis h2 span {
    position: absolute;
    width: 229px;
    height: 18px;
    top: 0;
    left: -1px;
    z-index: 5;
}

#header #nadpis h2.uvod span{
    background: url('../pictures/nadpis/uvod.jpg') no-repeat 0 0;
}

#header #nadpis h2.prehled-sluzeb span{
    background: url('../pictures/nadpis/prehled-sluzeb.jpg') no-repeat 0 0;
}

#header #nadpis h2.o-firme span{
    background: url('../pictures/nadpis/o-firme.jpg') no-repeat 0 0;
}

#header #nadpis h2.reference span{
    background: url('../pictures/nadpis/reference.jpg') no-repeat 0 0;
}

#header #nadpis h2.kontakty span{
    background: url('../pictures/nadpis/kontakty.jpg') no-repeat 0 0;
}

#header #nadpis h2.cenik span{
    background: url('../pictures/nadpis/cenik.jpg') no-repeat 0 0;
}

#header #nadpis h2.firemni-a-prezentacni-cd-a-dvd span{
    background: url('../pictures/nadpis/firemni-cd-a-dvd.jpg') no-repeat 0 0;
}


#header #nadpis h2.filmy-a-videa-dvd-blu-ray span{
    background: url('../pictures/nadpis/filmy-a-videa.jpg') no-repeat 0 0;
}


#header #nadpis h2.hudebni-cd-a-dvd span{
    background: url('../pictures/nadpis/hudebni-cd-a-dvd.jpg') no-repeat 0 0;
}

#header #nadpis2 {
    position: relative;
    width: 630px;
    height: 40px;
    top: 274px;
    left: 25px;
}

#header #nadpis2 h3 {
    color: #314a7f;
    font-size: 18px;
    font-weight: bold;
}

h1 {
    line-height: 120%;
}

/*nadpisy*/

/*obsah*/

#obsah {
    position: relative;
    width: 980px;
    height: auto;
    float: left;
    background: url('../pictures/obsah.png') repeat-y -5px 0;
}

#obsah #text {
    position:  relative;
    width: 620px;
    height: auto;
    left: 70px;
    top: -30px;
    text-align: left;
    font-size: 12px;
    line-height: 150%;
    float: left;
    color: #314a7f;
}

#obsah #text2 {
    position:  relative;
    width: 822px;
    height: auto;
    left: 70px;
    top: -30px;
    text-align: left;
    font-size: 12px;
    line-height: 150%;
    float: left;
    color: #314a7f;
}

#obsah p {
    margin: 10px 0;
}

#obsah a {
    color: #314a7f;
}

#obsah a:hover {
    text-decoration: none;
}

#obsah h2, h3, h4, h5 {
    margin: 5px 0;
}

#obsah ul li {
    list-style-type: square;
    margin: 0 20px;
}

#obsah ul {
    list-style-type: square;
    margin: 10px 0;
}

#obsah div.oddelovac {
    position: relative;
    width: 663px;
    height: 39px;
    left: -15px;
    margin: 15px 0;
    float: left;
    background: url('../pictures/oddelovac.jpg') no-repeat 0 0;
}

/*nabidka*/

#nabidka {
    position: relative;
    width: 633px;
    height: auto;
    margin: 20px 0;
}

#nabidka #nabidka-top {
    position: relative;
    width: 633px;
    height: 14px;
    background: url('../pictures/nabidka-top.jpg') no-repeat 0 0;
}

#nabidka #nabidka-center {
    position: relative;
    width: 631px;
    height: auto;
    float: left;
    border-left: 1px solid #bdbcbd;
    border-right: 1px solid #bdbcbd;
    background: url('../pictures/nabidka-center.jpg') repeat-x bottom;
}

#nabidka #nabidka-bot {
    position: relative;
    width: 635px;
    height: 17px;
    float: left;
    background: url('../pictures/nabidka-bot.jpg') no-repeat 0 0;
}


/*vnitrek*/

div.n1 {
    position: relative;
    width: 180px;
    height: auto;
    float: left;
    margin: 0 20px 0 0;
}

div.n1 h4 {
    font-size: 15px;
    padding: 0 5px;
}

div.n1 p {
    padding: 0 5px;
}

div.n1 p.prostredni,
div.n1 h4.prostredni{
    padding: 0 5px 0 15px;
}

div.n1 p.pravy,
div.n1 h4.pravy{
    padding: 0 5px 0 19px;
}

div.n1 a span.nn1 {
    float: left;
    width: 165px;
    height: 178px;
    margin: 0 0 20px 0;
    cursor: pointer;
    background: url('../pictures/menu/menu.jpg') no-repeat 0 0;
}

div.n1 a span:hover {
    background: url('../pictures/menu/menu.jpg') no-repeat 0 -178px;
}

div.n1 a span.nn2 {
    float: left;
    width: 177px;
    height: 178px;
    margin: 0 0 20px 0;
    cursor: pointer;
    background: url('../pictures/menu/menu.jpg') no-repeat -189px 0;
}

div.n1 a span.nn2:hover {
    background: url('../pictures/menu/menu.jpg') no-repeat -189px -178px;
}

div.n1 a span.nn3 {
    float: right;
    width: 165px;
    height: 178px;
    margin: 0 0 20px 0;
    cursor: pointer;
    background: url('../pictures/menu/menu.jpg') no-repeat -403px 0;
}

div.n1 a span.nn3:hover {
    background: url('../pictures/menu/menu.jpg') no-repeat -403px -178px;
}

div.oddeleni {
   position: relative;
   width: 603px;
   height: auto;
   float: left;
   padding: 0 5px 0 25px;
   background: url('../pictures/cara.png') repeat-y 0 0;
}

/*nabidka*/

#obsah #pravy {
    position:  relative;
    width: 202px;
    height: auto;
    right: 50px;
    text-align: center;
    font-size: 12px;
    line-height: 150%;
    color: #314a7f;
    float: right;
    background: url('../pictures/pravy.jpg') repeat-y 0 0;
}

/*pravy*/

#pravy div.produkt {
    position: relative;
    width: 190px;
    height: auto;
    margin: 10px auto;
    padding: 20px 0 0 0;
    background: url('../pictures/pravy-top.jpg') no-repeat top center;
}

#pravy div.produkt img {
    border: none;
    width: 190px;
    height: auto;
}

#pravy div.produkt a {
    color: #314a7f;
    text-decoration:  none;
}

#pravy #vice {
    position: relative;
    width: 200px;
    height: 32px;
    left: 1px;
    top: 18px;
    z-index: 5;
    float: left;
}

#pravy #vice a span {
    position: absolute;
    width: 200px;
    height: 32px;
    left: 0;
    top: 0;
    background: url('../pictures/vice.jpg') no-repeat 0 0;
}


/*pravy*/

#obsah #pravy-dole {
    position: relative;
    width: 202px;
    height: 19px;
    text-align: left;
    font-size: 12px;
    line-height: 150%;
    color: #314a7f;
    float: right;
    background: url('../pictures/pravy-dole.jpg') repeat-y 0 0;
}


/*footer*/

#footer {
    position: relative;
    width: 990px;
    height: 156px;
    left: 2px;
    /*left: 7px\9*/
    margin: 0 auto;
    background: url('../pictures/footer.png') no-repeat -88px 0;
    color: #00458c;
    font-size: 12px;
    clear: both;
    line-height: 150%;
}

#footer #foot {
    position: relative;
    width: 980px;
    height: 200px;
    margin: 0 auto;
}

#footer p.copy {
    position: relative;
    top: 70px;
}

#footer p.copy a {
    color: #00458c;
    text-decoration:  none;
}

#footer div.soc {
    position: relative;
    width: 910px;
    height: auto;
    top: 30px;
    text-align: right;
}

#footer div.soc a.img {
    padding: 0 0 0 17px;
    background: url('../pictures/fb.jpg') no-repeat 0 0;
    text-decoration: none;
    margin-right: 15px;
}

#footer div.soc a {
    color: #00458c;
    text-decoration: none;
}

#footer div.soc a:hover {
    text-decoration: underline;
}

/*obsah*/


/*bg*/

#bg {
    position: relative;
    width: 100%;
    height: auto;
    float: left;
    background: url('../pictures/background2.jpg') no-repeat bottom center;
}

/*css all document*/

/*kontakty*/

#kontakt-levy {
    position: relative;
    width: 408px;
    height: auto;
    left: 70px;
    top: -25px;
    float: left;
}

#kontakt-levy div.kon-top {
    position: relative;
    width: 408px;
    height: 13px;
    background: url('../pictures/k-top.jpg') no-repeat 0 0;
}

#kontakt-levy div.kon-cent {
    position: relative;
    width: 366px;
    height: auto;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    background: #fff url('../pictures/k-cent.jpg') no-repeat bottom;
    color: #2a4177;
    text-align: left;
    padding: 5px 20px;
    font-size: 12px;
    line-height: 150%;
}

#kontakt-levy div.kon-bot {
    position: relative;
    width: 408px;
    height: 12px;
    background: url('../pictures/k-bot.jpg') no-repeat 0 0;
}

#kontakt-pravy {
    position: relative;
    width: 408px;
    height: auto;
    left: 95px;
    top: -25px;
    float: left;
}

#kontakt-pravy div.kon-top {
    position: relative;
    width: 408px;
    height: 13px;
    background: url('../pictures/k-top.jpg') no-repeat 0 0;
}

#kontakt-pravy div.kon-cent {
    position: relative;
    width: 376px;
    height: auto;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    background: #fff url('../pictures/k-cent2.jpg') no-repeat bottom;
    color: #2a4177;
    text-align: left;
    padding: 5px 15px;
    font-size: 12px;
    line-height: 150%;
}

#kontakt-pravy div.kon-bot {
    position: relative;
    width: 408px;
    height: 12px;
    background: url('../pictures/k-bot.jpg') no-repeat 0 0;
}

#kontakt-pravy div.kon-cent #kontakt-form {
    position: relative;
    width: 331px;
    height: auto;
    min-height: 263px;
    margin: 20px 0;
    padding: 22px;
    color: #fff;
    background: url('../pictures/form.png') no-repeat 0 0;
}

#kontakt-pravy div.kon-cent #kontakt-form table tr td {
    padding: 5px 0;
}

#kontakt-pravy div.kon-cent #kontakt-form input {
    width: 235px;
    height: 26px;
    padding: 0 10px;
    padding: 2px 10px\9;
    border: none;
    background: url('../pictures/input.jpg') no-repeat 0 0;
}

#kontakt-pravy div.kon-cent #kontakt-form input.submit {
    position: relative;
    top: 33px;
    left: 22px;
    width: 108px;
    height: 38px;
    border: none;
    float: right;
    background: url('../pictures/odeslat.png') no-repeat 0 0;
    cursor: pointer;
}

#kontakt-pravy div.kon-cent #kontakt-form input.submit:hover {
    background: url('../pictures/odeslat.png') no-repeat -109px 0;
}

#kontakt-pravy div.kon-cent #kontakt-form textarea {
    width: 307px;
    height: 96px;
    padding: 5px 10px;
    border: none;
    background: url('../pictures/textarea.jpg') no-repeat 0 0;
}

/*kontakty*/

/*reference*/

#reference {
    position: relative;
    width: 842px;
    height: auto;
    left: 70px;
    top: -30px;
    font-size: 12px;
    text-align: left;
    line-height: 150%;
    color: #2a4177;
}

#reference div.ref {
    position: relative;
    width: 822px;
    height: 196px;
    margin: 15px 0;
    padding: 10px;
    background: url('../pictures/ref-pas.jpg') no-repeat 0 0;
}

#reference div.ref div.polozka {
    position: relative;
    width: 185px;
    height: 195px;
    float: left;
    background: url('../pictures/ref.png') no-repeat top;
}

#reference div.ref div.polozka div.obrazek {
    position: relative;
    width: 170px;
    height: 140px;
    top: 7px;
    left: 5px;
}

#reference div.ref div.polozka div.obrazek img {
    position: relative;
    max-width: 168px;
    max-height: 140px;
    width: 168px/9;
    padding: 0px;
    display: block;
    border: none;
}

#reference div.ref div.polozka div.obrazek table {
  position: relative;
  width: 170px;
  height: 140px;
  vertical-align: middle;
  margin: 0 auto;
  padding: 0px;
  text-align: center;
}

#reference div.ref div.polozka div.popis {
    position: relative;
    width: 170px;
    height: 45px;
    top: 17px;
    left: 7px;
    text-align: center;
}

#reference div.ref div.polozka div.popis table {
    position: relative;
    width: 170px;
    height: 45px;
    text-align: center;
}

#reference div.ref div.polozka div.popis table a {
    color: #314a7f;
    font-size: 13px;
    text-decoration: none;
}

#reference div.ref div.polozka div.popis table a:hover {
    color: #00a4d2;
}

#reference div.ref div.cara {
    position: relative;
    width: 2px;
    height: 189px;
    float: left;
    margin: 0 12px 0 13px;
    background: url('../pictures/sep.jpg') no-repeat 0 0;
}

/*reference*/

/*cislovani*/

div.cislovani {
    position: relative;
    width: 100%;
    height: 30px;

}

div.cislovani p {
  position: relative;
  width: auto;
  margin: 0 auto;
  text-align: center;
}

div.cislovani a {
  position: relative;
  color: #b96745;
  text-decoration: none;
  font-size: 12px;
}

div.cislovani a:hover {
  color: #000 !important;
}

div.cislovani a span {
  position: relative;
  width: 22px;
  height: 26px;
  text-align: center;
  padding: 5px 7px 7px 7px;
  margin: 0 2px;
  font-size: 12px;
}

div.cislovani a span.active {
  position: relative;
  width: 22px;
  height: 26px;
  text-align: center;
  color: #fff;
  padding: 5px 7px 7px 8px;
  margin: 0 2px;
  font-size: 12px;
  background: url('../pictures/cislo.png') no-repeat center top;
}

div.cislovani span.active a {
  color: #190d08;
  text-decoration: none;
}

div.cislovani img {
  position: relative;
  top: -1px;
  border: none;
  margin: 0 5px;
}


/*cislovani*/

/*ref-pravy*/

#levy-reference {
    position: relative;
    width: 215px;
    height: auto;
    left: 70px;
    top: -35px;
    float: left;
}

#levy-reference div.kon-top {
    position: relative;
    width: 215px;
    height: 42px;
    background: url('../pictures/ref-top.jpg') no-repeat 0 0;
    text-align: left;
}

#levy-reference div.kon-top h2 {
    color: #fff;
    font-size: 16px;
    position: relative;
    top: 15px;
    left: 14px;
}

#levy-reference div.kon-cent {
    position: relative;
    width: 193px;
    height: auto;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    background: #fff url('../pictures/ref-cent.jpg') no-repeat bottom;
    color: #2a4177;
    text-align: left;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 150%;
}

#levy-reference div.kon-bot {
    position: relative;
    width: 215px;
    height: 13px;
    background: url('../pictures/ref-bot.jpg') no-repeat 0 0;
}

/*ref-pravy*/

/*reference-ukazka*/

#reference-ukazka {
    position: relative;
    width: 608px;
    height: auto;
    left: 100px;
    float: left;
    top: -30px;
    font-size: 12px;
    text-align: left;
    line-height: 150%;
    color: #2a4177;
}

#reference-ukazka div.kon-top {
    position: relative;
    width: 608px;
    height: 13px;
    background: url('../pictures/reference-top.jpg') no-repeat 0 0;
    text-align: left;
}

#reference-ukazka div.kon-cent {
    position: relative;
    width: 566px;
    height: auto;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid #bdbdbd;
    background: #fff url('../pictures/reference-cent.jpg') no-repeat bottom;
    padding: 7px 20px;
}

#reference-ukazka div.kon-bot {
    position: relative;
    width: 608px;
    height: 13px;
    background: url('../pictures/reference-bot.jpg') no-repeat 0 0;
}

#reference-ukazka div.kon-cent #top {
    position: relative;
    width: 567px;
    height: 38px;
    background: url('../pictures/reference-top-2.png') no-repeat 0 0;
}

#reference-ukazka div.kon-cent #cent {
    position: relative;
    width: 563px;
    height: auto;
    border-left: 2px solid #5c7dae;
    border-right: 2px solid #5c7dae;
    background: #fff;
}

#reference-ukazka div.kon-cent #cent img {
    position: relative;
    width: 563px;
    height: auto;
}

#reference-ukazka div.kon-cent #bot {
    position: relative;
    width: 567px;
    height: 38px;
    background: url('../pictures/reference-bot-2.png') no-repeat 0 0;
}

/*reference-ukazka*/

/*button. zpet do referenci*/

#zpet-reference {
    position: relative;
    width: 159px;
    height: 38px;
    top: 15px;
    left: 25px;
}

#zpet-reference a span {
    position: absolute;
    width: 159px;
    height: 38px;
    top: 0;
    left: 0;
    cursor: pointer;
    background: url('../pictures/zpet-ref.png') no-repeat 0 0;
}

#zpet-reference a span:hover {
    position: absolute;
    width: 159px;
    height: 38px;
    top: 0;
    left: 0;
    background: url('../pictures/zpet-ref.png') no-repeat -160px 0;
}

/*button. zpet do referenci*/