/*
    Document   : main.css
    Created on : 27.11.2010, 11:36:28
    Author     : Josef Rybicka, josef.rybicka@gmail.com
    Description: Main web style.
*/

/*
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/*
  CSS reset and setup base values
*/ 
* {
    margin:0; padding:0;
}
body, div, span, p, a, img, ul, ol, li, caption, table, thead, tbody, tfoot, tr, th, td, form, fieldset, legend, button, label, dl, dt, dd, blockquote, applet, object, h1, h2, h3, h4, h5 {
    border:0;
}
body {
    font: 14px "arial", sans-serif; text-align: center;
}

table {
    border-collapse:collapse; border-spacing:0; font-size:100%;
}
th {
    font-weight:bold;
}
th, td {
    padding:3px 7px;
}

ul, ol {
    margin-left:30px; padding: 6px 6px 6px 0;
}
ul ul, ol ol {
    margin:0; margin-left:20px;
}
ol {
    list-style-type:decimal;
}
li {
    display:list-item; margin: 5px 0; line-height: 20px;
}
/*
  Universal styles
*/  
.box {
    min-height:1px;
}
.box:after {
    display:block; visibility:hidden; clear:both; line-height:0; font-size:0; content:".";
}
.italic {
    font-style: italic;
}
.clear {
    clear:both; visibility: hidden;
}
.f-left {
    float:left !important;
}
img.f-left {
    float:left; margin-right:15px; margin-top:5px; margin-bottom: 15px;
}
img.f-left.gallery {
    margin-top: 0;
}
.f-right {
    float:right !important;
}
img.f-right {
    float:right; margin-left:20px; margin-top:0; margin-bottom: 0px; margin-right: 35px;
}
.t-left {
    text-align:left !important;
}
.t-center {
    text-align:center !important;
}
.t-right {
    text-align:right !important;
}
.va-middle {
    vertical-align:middle;
}
.nom {
    margin:0 !important;
}
.nom-right {
    margin-right:0 !important;
}
.noscreen {
    display:none;
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic; font-family: "times new roman"; font-size: 15px;
}
.m-right {
    margin-right: 40px;
}
.m-left {
    margin-left: 130px;
}
/*
  general styles
*/
ul.ul-style01 {
    margin:0 0 15px 20px; list-style:none; padding: 0 !important;
}
ul.ul-style01 li {
    padding-left:12px; background:url("../design/item-point-light.png") 0 7px no-repeat;
}
/*
  Layout
*/
.main {
    position:relative; width:1000px; margin:0 auto; text-align:left;
}
#header {
    padding:0; overflow:hidden; height: 216px; background: url("../design/header-bg.png") repeat-x scroll 0 0 transparent;
}
#header .main {
    height: 216px; background: url("../design/header-main-bg.png") top left no-repeat;
}

#logo {
    padding-top: 59px; padding-left: 33px; padding-bottom: 25px;
}
#logo h1 a span, #logo p {
    display:none;
}
/* H1 overlay - logo */
h1, h1 a {
    display:block; position:relative; width:366px; height:86px; overflow:hidden; margin:0;
}
h1 a {
    background:url('../design/logo.png') no-repeat; position:absolute; top:0; left:0;
}
#volejte {
    position:absolute; top:30px; right:70px; text-align: center;
}
#volejte p.cislo {
    font-size: 38px; font-weight: bold;
}
#volejte p.text {
    font-size: 15px; text-transform: uppercase;
}
/*   navigation */
#nav {
    background:url('../design/nav.png') repeat-x; margin: 0; padding: 0 54px 0 0; height:46px;
}
ul#topnav {
    margin: 0; padding: 0 0 0 55px; list-style: none;
}
ul#topnav li {
    float: left; margin: 0 3px 0 0; padding: 0;
}
ul#topnav li.vesteni-pres-sms {
    margin: 0 240px 0 0;
}
ul#topnav a {
    float: left; display: block; height: 43px; text-indent: -99999px; background-position: left top;
}
ul#topnav a:hover, #vestirna li.vestirna a, #vestci-online li.vestci-online a ,#sluzby li.sluzby a, #vesteni-pres-sms li.vesteni-pres-sms a, #oblibene li.oblibene a {
    background-position: 0 -43px;
}
ul#topnav li.vestirna a {
    background-image: url("../design/li-vestirna.png");
    width: 112px;
}
ul#topnav li.sluzby a {
    background-image: url("../design/li-sluzby.png");
    width: 112px;
}
ul#topnav li.vestci-online a {
    background-image: url("../design/li-vestci-online.png");
    width: 141px;
}
ul#topnav li.vesteni-pres-sms a {
    background-image: url("../design/li-vesteni-pres-sms.png");
    width: 165px;
}
ul#topnav li.oblibene a {
    background-image: url("../design/li-oblibene.png");
    width: 112px;
}
#cols .main.box {
    background: url("../design/body-bg-2.png") top left no-repeat;
}
#cols #content {
    width: 763px; float: right;
}
#cols #content-in {
    padding: 16px 20px;
}
#aside {
    float:left; width:228px; overflow:hidden; margin: 0; padding: 0;
}
#aside-in {
    padding: 60px 0 0 55px;
}
#aside-in h3 {
    width: 174px; height: 27px; background: url("../design/h3-navigace.png") top left no-repeat; text-indent: -9999px;
}
#aside-in ul {
    background: url("../design/nav-bottom.png") bottom left no-repeat #7e5540; list-style: none; margin: 0 0 20px 0; padding: 10px 0 40px 0; font-size: 12px;
}
#aside-in ul li {
    margin: 0 0 0 0; padding: 0 0 0 23px; background:url("../design/item-point.png") 13px 8px no-repeat;
}
#aside-in ul li a {
    color: #ffd7c6; text-transform: uppercase;
}
#aside-in ul li a:hover, #aside-in .active {
    color: #000; text-decoration: none;
}
ul#kelt-znameni {
    list-style: none; margin: 0 0 0 80px; padding: 20px 0 30px 0;
}
ul#kelt-znameni li {
    margin: 0 0 2px 0;
}
ul#kelt-znameni li a {
    display: block; width: 563px; height: 55px; background: url("../design/znameni-kelt-bg.png") top left no-repeat; text-decoration: none; font-size: 16px;
}
ul#kelt-znameni li a img {
    margin: 0 0 0 9px; float: left;
}
ul#kelt-znameni li a .nazev {
    float: left; padding: 20px 30px 0 30px; color: #513220; font-weight: bold; text-transform: uppercase;
}
ul#kelt-znameni li a .datum {
    float: right; width: 220px; padding-top: 20px; text-align: left;
}
#aside ul li ul {
    padding: 0 0 10px 0; margin: 0; background: none;
}
#aside ul li ul li {
    margin: 0 0 0 0; background:url("../design/item-point-dark.png") 0px 9px no-repeat;  padding: 0 5px 0 10px;
}
#aside ul li ul li a {
    text-transform: none;
}

ul#znameni-zapadni {
    list-style: none; margin: 0 0 5px 80px; padding: 20px 0 30px 0;
}
ul#znameni-zapadni li {
    margin: 0 3px 3px 0; float: left;
}
ul#znameni-zapadni li a {
    display: block; width: 126px; height: 146px; background: url("../design/zapadni-znameni-bg.png") top left no-repeat; text-decoration: none; font-size: 16px;
}
ul#znameni-zapadni li a img {
    margin: 0 0 0 18px;
}
ul#znameni-zapadni li a .nazev {
    padding: 7px 0 5px 0; color: #000; font-weight: bold; text-align: center;
}
ul#znameni-zapadni li a .datum {
    color: #4e3222; text-align: center; font-size: 14px; font-weight: bold;
}

#znam-info {
    line-height: 15px;
}

.quote {
   width: 625px; height: 47px; font-style: italic; font-weight: bold; background: url("../design/quote.png") top left no-repeat; margin: 0 0 20px 50px;
}
.quote p {
    padding: 5px 45px !important; color: #513220; text-align: left !important;
}
.quote.znameni p {
    text-align: center !important;
}
.quote-runy {
    background: url("../design/quote-runy.png") 150px 0 no-repeat; color: #513220; font-style: italic; font-weight: bold; padding: 5px 0 10px 185px; font-size: 16px;
}


/*    content column  */
#content {
    margin: 0; padding: 0;
}
.main.box, #cols .main.box, #vestirna #content, #vesteni-pres-sms #content, #oblibene #content {
    background: url("../design/body-bg-3.png") top left repeat-y;
}



#content-in {
    padding: 25px 54px;
}
#content-in h2 {
    font-size: 24px; font-weight: bold; margin: 0 0 14px 0;
}
#content-in h3 {
    font-size: 22px; font-weight: normal; margin: 10px 0;
}
#content-in p {
    text-align: justify; margin: 0 0 10px 0; line-height: 20px; padding-right: 40px;
}

/*    footer   */
#footer {
    height: 50px; clear: both; padding: 0; font-size: 12px;
}
#copyright {
    padding: 5px 16px 6px 14px; margin: 5px 0 0 40px;
}
#kontakt {
    padding: 11px 20px 13px 14px; margin: 5px 40px 0 0;
}
/*  current pages - index  */
ul#panely {
    margin: 0; padding: 0; list-style: none; float: left;
}
ul#panely li {
    float: left; margin: 0 20px 20px 0; padding: 0;
}
ul#panely a {
    float: left; display: block; height: 168px; text-indent: -99999px; background-position: left top; background-repeat: no-repeat;
}
ul#panely li.tarot a {
    background-image: url("../design/tarot-small.png"); width: 207px;
}
ul#panely li.mariasove-karty a {
    background-image: url("../design/mariasove-karty-small.png"); width: 207px;
}
ul#panely li.vyklad-snu a {
    background-image: url("../design/vyklad-snu-small.png"); width: 207px;
}
ul#panely li.numerologie a {
    background-image: url("../design/numerologie-small.png"); width: 207px;
}
ul#panely li.zapadni-horoskop a {
    background-image: url("../design/zapadni-horoskop-small.png"); width: 207px;
}
ul#panely li.bylinky-lecitelstvi a {
    background-image: url("../design/bylinky-lecitelstvi-small.png"); width: 207px;
}
ul#panely li.runy a {
    background-image: url("../design/runy-small.png"); width: 207px;
}
ul#panely li.cinsky-horoskop a {
    background-image: url("../design/cinsky-horoskop-small.png"); width: 207px;
}
ul#panely li.clanky-zajimavosti a {
    background-image: url("../design/clanky-zajimavosti-small.png"); width: 207px;
}
ul#panely li.andelske-karty a {
    background-image: url("../design/andelske-karty-small.png"); width: 207px;
}
ul#panely li.keltsky-horoskop a {
    background-image: url("../design/keltsky-horoskop-small.png"); width: 207px;
}
ul#panely li.velky-eroticky-snar a {
    background-image: url("../design/velky-eroticky-snar.png"); width: 890px; background-repeat: no-repeat; height: 162px;
}
ul#panely li.magie-carodejnictvi a {
    background-image: url("../design/magie-carodejnictvi-small.png"); width: 207px;
}
 .odkaz {
    margin: 30px; border: 1px solid #8c8c8c; color: #000; font-family:monospace; padding: 5px;
 }
 .bigger {
 font-size: 125%;
 }
.tel {
    -moz-border-radius: 5px; border-radius: 5px; background: url('../design/phone.png') 250px 5px no-repeat #ebebe9; padding: 10px; width: 250px;
}
.back {
   -moz-border-radius: 5px; border-radius: 5px; background: url('../design/back.png') 5px 5px no-repeat #FFF; padding: 7px 7px 7px 30px;
}
.karticka {
    display: block; width: 72px; height: 101px; background: url('../design/karta.png') top left no-repeat;  float: left; margin: 0 2px 2px 0; text-align: center; cursor: pointer;
}
.gray {
    background-position: bottom left !important;
}
#karty-form {
    text-align: center;
}
#karty-form .check {
    visibility: visible;
}
#karty-form label.error {
    display: block; color: #FFF; margin: 0 0 5px 0; padding: 6px; background: #eb0f0f; text-align: center; -moz-border-radius: 7px; border-radius: 7px; font-size: 12px;
}
#m-karty {
    padding: 10px 65px;
}
#zobrazit-vestbu {
    width: 129px; height: 35px; text-indent: -9999px; cursor: pointer; background: url("../design/zobrazit-vestbu.png") no-repeat top right;
}
#zobrazit-vestbu:hover, #pokracovat:hover {
    background-position: bottom right;
}
/* Tabulka pro karty - zejmena mariasove*/
#m-tabulka, #a-tabulka {
    border: 1px solid #4e3222; margin: 4px 0 10px 0; background: #fff;
}
#m-tabulka th, #a-tabulka th {
    font-weight: normal; text-transform: uppercase; text-align: center; color: #ffd7c6; background-color: #4e3222; margin-right: 1px !important;
}
#m-tabulka td {
    text-align: center; padding: 10px 5px;
}
#m-tabulka p {
    text-align: center;
}
#m-tabulka h3 {
    font-size: 14px; font-weight: bold;  margin: 1px 0 3px !important;
}
/*
   clanky
*/
.perex .uvodnik{
   font-size: 18px; color: #782326; display: block; padding: 0 0 5px 0;
}
.perex {
    background: #ebebe9; padding: 10px; -moz-border-radius: 7px; border-radius: 7px; margin: 0 0 10px 0;
}
/* faze mesice */
#faze li {
    text-transform: uppercase; font-weight: bold; color: #513220;
}
#faze li ul li {
    text-transform: none; font-weight: normal; color: #000;
}
/* andelske karty */
#a-tabulka td {
    text-align: left; vertical-align: top; padding: 10px;/* border-bottom: 2px solid #513220; */
}
#a-tabulka .info h3 {
    padding-top: 0 !important; margin-top: 0 !important;
}
#a-tabulka .andel {
    color: #8c8c8c; font-style: italic; text-align: left;
}
/* tarotove karty */
#tarot-vestba img {
    margin: 10px 0;
}
#tarot-vestba img.ctvrta {
    margin-left: 270px;
}
#tarot-vestba img.prvni {
    margin-left: 116px
}

/*
    Tabulka RUN
*/
ul#runy {
    list-style: none; margin: 0 0 15px 0; padding: 0;
}
ul#runy li {
    margin: 0 22px 0 0; float: left;
}
a.runa {
    display: block; width: 218px; height: 75px; background: url("../design/runa-bg.png") no-repeat 17px 11px; float: left; text-decoration: none;
}
a.runa img {
    float: left; margin-right: 5px;
}
a.runa .nazev {
    color: #513220; font-size: 18px; padding: 20px 0 0 0; display: block; font-weight: bold;
}
a.runa .vyznam {
    padding: 1px; display: block; color: #000;
}
h2.runa {
    padding-top: 15px;
}
.kaminek {
    display: block; width: 45px; height: 64px; background: url('../design/runa-kamen.png') top left no-repeat;  float: left; margin: 0 2px 2px 0; text-align: center; cursor: pointer;
}
#runy-form {
    width: 510px; text-align: center; margin-left: 50px;
}
#runy-form .check {
    visibility: visible;
}
#runy-form label.error {
    display: block; color: #FFF; margin: 0 0 5px 0; padding: 6px; background: #eb0f0f; text-align: center; -moz-border-radius: 7px; border-radius: 7px; font-size: 12px;
}
#pokracovat {
    width: 101px; height: 33px; text-indent: -9999px; cursor: pointer; background: url("../design/pokracovat-button.png") no-repeat top right;
}
.kaminek.gray {
    background-position: bottom left;
}
#runy-rozlozeni {
    margin-left: 150px; padding-bottom: 80px;
}
#runy-rozlozeni .ctvrta {
    margin-left: 115px;
}
#runy-rozlozeni .prvni, #runy-rozlozeni .treti, #runy-rozlozeni .pata, #runy-rozlozeni .sedma {
    position: relative; top: 65px;
}
#abeceda {
    margin: 10px 0 30px 0; padding-left: 12px;
}
#abeceda a {
    display: block; float: left; padding: 6px; text-decoration: none; -moz-border-radius: 5px; border-radius: 5px; background: #5d71ff; margin-right: 2px; text-transform: uppercase; color: #FFF;
}
#abeceda a:hover, #abeceda a.active {
    background: #2540ff;
}
.pojem {
    font-weight: bold;
}
.vysvetleni {
    padding-left: 15px;
}
h3.pismeno {
    font-size: 40px !important; text-transform: uppercase; font-weight: bold !important; color: #8c8c8c !important; text-align: center;
}

ul#znameni-cinska {
    list-style: none; margin: 0 0 5px 80px; padding: 20px 0 30px 0;
}
ul#znameni-cinska li {
    margin: 0 3px 3px 0; float: left;
}
ul#znameni-cinska li a {
    display: block; width: 127px; height: 149px; background: url("../design/cinsky-horoskop-bg.png") top left no-repeat; text-decoration: none; font-size: 16px;
}
ul#znameni-cinska li a img {
    margin: 15px 0 0 18px;
}
ul#znameni-cinska li a .nazev {
    padding: 25px 0 5px 0; color: #000; font-weight: bold; text-align: center;
}
#aside-in sup {
    color: #faff00; text-transform:  uppercase;
}
.snar {
    text-align: left !important; padding: 15px !important;
}
.vyraz .pojem {
    padding: 10px; background: #ffc9c9; color: #d40e0e; font-weight: bold; -moz-border-radius: 5px; border-radius: 5px;
}
.vyraz .pojem a {
    display: block; float: right; font-weight: normal; color: #000; font-size: 12px;
}
.vyraz p {
    padding: 10px 0 10px 15px;
}
.hint {
    font-size: 12px; margin: 5px 0 20px 0;
}
.link {
    float: left; margin-right: 10px !important; margin-bottom: 15px !important; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #4e3222; background: #fffde4;
}
.link a {
    display: block; padding: 10px; color: #782326; font-weight: bold;
}
.numer-form {
    padding-right: 40px; margin: 20px 0;
}
.numer-form fieldset {
    border: 1px solid #4e3222; padding: 7px 12px 10px 12px; margin: 20px 0;
}
.numer-form legend {
    padding: 10px; color: #ebebe9; background: #4e3222; -moz-border-radius: 5px; border-radius: 5px; 
}
.numer-form input, .numer-form select {
    padding: 5px;
}
.numer-form label {
    display: block; width: 150px; float: left; text-align: right; padding: 5px 0; margin-right: 10px;
}
.numer-form .row {
    padding: 5px 0;
}
.numer-form .row.submit {
    padding: 5px 0 5px 160px;
}
.numer-form p {
    margin: 5px 0 3px 0 !important; font-size: 13px; color: #5F5A57;
}
.numer-form select.error {
    border: 1px dotted red;
}
.numer-form label.error {
    color: white; float: left; padding: 7px 7px 8px 17px; width: auto; text-align: left !important; background: url("../design/arrow-error.png") top left no-repeat #d40e0e; font-size: 12px;
}
#vesteni-pres-sms .numer-form label.error {
    background: #d40e0e; -moz-border-radius: 5px; border-radius: 5px;
}
.numer-form .den, .numer-form .rok, .numer-form .mesic, .numer-form .oblast, .numer-form .mar {
    margin: 0 5px; float: left;
}
.numer-form .input {
    float: left; margin-right: 5px;
}
#numer-form2 label.error {
    width: 150px;
}
#osud {
    width: 127px; height: 149px; margin: 0 15px 15px 0; float: left; background: url("../design/cinsky-horoskop-bg.png") top left no-repeat; text-align: center; color: #4e3222;
}
#osud span {
    font-size: 8em; display: block; color: #782326;
}
.numer-form .check {
    visibility: visible;
}
.numer-form .karticka {
    display: block; width: 72px; height: 101px; padding: 0 !important; background: url('../design/karta.png') top left no-repeat;  float: left; margin: 0 2px 2px 0; text-align: center; cursor: pointer;
}

/*
    zalozka VESTCI ONLINE
*/

ul#vestci {
    margin: 0; padding: 0; list-style: none; float: left;
}
ul#vestci li {
    float: left; margin: 0 28px 20px 0; padding: 0; background: url("../design/vestci-li.png") top left no-repeat;
}
ul#vestci li a {
    float: left; display: block; height: 229px; width: 430px; text-decoration: none; color: #000;
}
ul#vestci li a.online {
    background: url("../design/vestci-online.png") bottom left no-repeat;
}
ul#vestci li a:hover {
    color: #000;
}
ul#vestci .jmeno {
    display: block; text-align: center; text-transform: uppercase; color: #FFF;
}
ul#vestci img {
    float: left; margin: 10px 10px 2px 15px; border: 2px solid #FFF;
}
ul#vestci .motto {
    display: block; font-style: italic; margin: 10px 10px 3px 0;
}
ul#vestci p {
    font-size: 12px; margin: 0 !important; padding: 3px 15px 5px 15px !important; line-height: 16px;
}
#vestci-online p, #sluzby p {
    padding-right: 0;
}
#oblibene ul#vestci img {
    float: left; margin: 10px 10px 2px 15px; border: 0px;
}
#oblibene ul#vestci p {
    font-size: 14px !important; margin: 0 !important; padding: 10px 20px 3px 20px !important; line-height: 17px;
}