/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
Created on : 30.6.2015, 13:42:52
Author     : urossr
*/

.psiholoskitesti{
    /*background-image: url('../images/testi/ozadje_PIL.jpg');
    background-position: center top;*/
}

.podlagapolprozorna{
    width: 1050px;
    margin: 0px auto;    
}

.psiholoskitesti #seznam {
    min-height: 550px;
    width: 96%;
    margin: 0 5%;
}

.psiholoskitesti #container{
    overflow:inherit;
}

.psiholoskitesti #seznam .mreza1{
    width:50%;
    float:left;
    display:none;
    margin-bottom: 10px;
}

.psiholoskitesti #izpostavljeno .naslov,
.psiholoskitesti #seznam .naslov{
    background-color: #515254;    
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    float: left;
    box-shadow: 1px 1px 3px #444;
    overflow: hidden;
    padding: 8px 12px;
    transition: all 0.3s ease 0s;
    width: 90%;  
    text-shadow: 0 1px 1px #333;
}

.psiholoskitesti .naslov.stil0{    
    background: linear-gradient(to bottom, #bd7a9a 0%,#8e328f 100%); /* W3C */
}

.psiholoskitesti .naslov.stil1{
    background: linear-gradient(to bottom, #d7748d 0%,#c42874 100%); /* W3C */
}

.psiholoskitesti .naslov.stil2{
    background: linear-gradient(to bottom, #97c3ba 0%,#34acb8 100%); /* W3C */
}

.psiholoskitesti .naslov.stil3{
    background: linear-gradient(to bottom, #e1b74d 0%,#f6961e 100%); /* W3C */
}

.psiholoskitesti .naslov.stil4{
    background: linear-gradient(to bottom, #bcc868 0%,#8eb440 100%); /* W3C */
}

.psiholoskitesti .naslov.stil5{
    background: linear-gradient(to bottom, #ffffff 0%,#90d3e8 100%); /* W3C */
}

.psiholoskitesti .naslov.stil6{
    background: linear-gradient(to bottom, #f37776 0%,#ee2527 100%); /* W3C */
}

.psiholoskitesti .naslov.stil7{
    background: linear-gradient(to bottom, #e9bab7 0%,#e57090 100%); /* W3C */
}

.psiholoskitesti .naslov.stil8{
    background: linear-gradient(to bottom, #ffef75 0%,#ffaf1f 100%); /* W3C */
}

.psiholoskitesti .naslov.stil9{
    background: linear-gradient(to bottom, #bd7a9a 0%,#8e328f 100%); /* W3C */
}

.psiholoskitesti #seznam .cena{
    background-color: rgba(255, 255, 255, 0.8);
    background-image: url("../images/testi/crta.png");
    background-position: 48px center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #444;
    color: #333;
    float: left;
    font-weight: bold;
    margin-left: 2%;
    padding: 8px 32px 8px 4px;
    position: relative;
    text-align: center;
    width: 7%;
}

.psiholoskitesti #seznam .cena .zlatnik{
    background-image: url("/bundles/mkzucimse/images/zlatnik.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 30px;
    position: absolute;
    right: 5px;
    top: 2px;
    width: 30px;
}

.psiholoskitesti #seznam .cena .zlatnik.vrtenje{
    -webkit-animation:spin 0.4s linear infinite;
    -moz-animation:spin 0.4s linear infinite;
    animation:spin 0.4s linear infinite;    
}

@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotateY(360deg); } }

.psiholoskitesti #seznam .mreza1:hover .naslov, 
.psiholoskitesti #seznam .mreza1:hover .cena{
    //background-color: rgba(255,255,255,0.5);
    //background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%);
    border: 1px solid #ff7;
}

.psiholoskitesti #test{
    display:none;
    min-height: 595px;
    overflow: hidden;
    position: relative;
    padding: 0 20px;
}

.psiholoskitesti #test #opis {
    background-image: url("../images/testi/podlaga-crte-1.jpg");
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.15em;
    margin-bottom: 20px;
    box-shadow: 1px 1px 4px #444;
    padding: 20px 35px 25px;
}

.psiholoskitesti #test #naslov {
    font-family: Comic Sans MS,cursive;
    font-size: 25px;
    margin-bottom: 10px;
    padding: 0 20px;
    text-shadow: 1px 1px 2px #fff;
}

.psiholoskitesti #test #vprasanje {
    background-image: url("../images/testi/podlaga_1.jpg");
    border-radius: 10px;
    font-size: 18px;
    padding: 24px 68px 40px;
    position: relative;
    box-shadow: 1px 1px 4px #444;

}

.psiholoskitesti #test #vprasanje.vprasanje0{
    background-image: url("../images/testi/podlaga_2.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje1{
    background-image: url("../images/testi/podlaga_3.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje2{
    background-image: url("../images/testi/podlaga_6.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje3{
    background-image: url("../images/testi/podlaga_4.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje4{
    background-image: url("../images/testi/podlaga_5.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje5{
    background-image: url("../images/testi/podlaga_6.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje6{
    background-image: url("../images/testi/podlaga_4.jpg");
}

.psiholoskitesti #test #vprasanje.vprasanje7{
    background-image: url("../images/testi/podlaga_2.jpg");
}

.psiholoskitesti #test #vprasanje .odgovor{
    background-position: 6px 4px;
    background-repeat: no-repeat;
    border-radius: 15px;
    cursor: pointer;
    margin-bottom: 6px;
    min-height: 26px;
    padding: 7px 0 5px 51px;
    transition: all 0.5s ease 0s;
}

.psiholoskitesti #test #vprasanje .odgovor.srcek{
    background-image: url('../images/testi/ikona_srcek_mala.png');
}

.psiholoskitesti #test #vprasanje .odgovor.trikotnik{
    background-image: url('../images/testi/ikona_trikotnik_mala.png');
}

.psiholoskitesti #test #vprasanje .odgovor.zvezdica{
    background-image: url('../images/testi/ikona_zvezda_mala.png');
}    

.psiholoskitesti #test #vprasanje .odgovor:hover{
    background-color: rgba(100, 200, 100, 0.35);
}

.psiholoskitesti #test #vprasanje .odgovor.rdeci{
    color:#0B0;
    cursor: default;
}

.psiholoskitesti #test #vprasanje .odgovor.rdeci:hover{
    background-color: rgba(200,100,100,0);
}

.psiholoskitesti #test #vprasanje .index {
    border-radius: 85px;
    color: #fff;
    font-size: 23px;
    font-weight: bold;
    left: 16px;
    position: absolute;
    text-align: center;
    top: 19px;
    width: 35px;
}

.psiholoskitesti #test .vprasanje0 .index{      background-color: #fbd839;      }
.psiholoskitesti #test .vprasanje1 .index{      background-color: #e56c8e;      }
.psiholoskitesti #test .vprasanje2 .index{      background-color: #12c3f4;      }
.psiholoskitesti #test .vprasanje3 .index{      background-color: #aacb5c;      }
.psiholoskitesti #test .vprasanje4 .index{      background-color: #71c0b7;      }
.psiholoskitesti #test .vprasanje5 .index{      background-color: #f8991d;      }
.psiholoskitesti #test .vprasanje6 .index{      background-color: #b61d8d;      }
.psiholoskitesti #test .vprasanje7 .index{      background-color: #d02334;      }


.psiholoskitesti #test #vprasanje .tekst {

    font-weight: bold;
    margin-bottom: 17px;
}

.psiholoskitesti #test #stevec{
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 15px;
    bottom: 0;
    box-shadow: 1px 1px 3px #777;
    margin: 0 auto;
    padding: 5px 16px;
    position: absolute;
    right: 0;
    display:none;
    font-weight: bold;
}

.psiholoskitesti #test #trak {
    border-radius: 16px;
    height: 37px;
    padding: 2% 0px;
    margin: 2% auto;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.psiholoskitesti #test #trak > div {
    width: 30px;
    height: 30px;
    margin: 0px 1%;
    display: inline-block;
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    background-size: cover;
}

.psiholoskitesti #test #trak > div.idle {
    background-color: #ddd;
    border: 2px solid #ccc;
    border-radius: 50px;
    height: 20px;
    margin: 5px 2%;
    width: 20px;
    cursor: default;
    display: inline-block;
}

.psiholoskitesti #test #trak > div.current{
    border: 2px solid #2b2; 
}

.psiholoskitesti #test #trak > div.srcek{
    background-image: url("../images/testi/ikona_srcek_mala.png");
}

.psiholoskitesti #test #trak > div.trikotnik{
    background-image: url("../images/testi/ikona_trikotnik_mala.png");
}

.psiholoskitesti #test #trak > div.zvezdica{
    background-image: url("../images/testi/ikona_zvezda_mala.png");
}

.psiholoskitesti #test #stevec .count{
    background-repeat: no-repeat;
    float: left;
    height: 26px;
    margin-top: 5px;
    padding-top: 35px;
    text-align: center;
    width: 30px;
}

.psiholoskitesti #test #stevec .count.srcek{
    background-image: url("../images/testi/ikona_srcek_mala.png");
}

.psiholoskitesti #test #stevec .count.trikotnik{
    background-image: url("../images/testi/ikona_trikotnik_mala.png");
}

.psiholoskitesti #test #stevec .count.zvezdica{
    background-image: url("../images/testi/ikona_zvezda_mala.png");
}    

.psiholoskitesti #test #stevec .count:not(:last-child){
    margin-right: 20px;
}

.psiholoskitesti #test #rezultati{
    background-image: url("../images/testi/ozadje_karo2.png");
    border-radius: 10px;
    display: none;
    font-size: 18px;
    line-height: 1.4em;
    min-height: 180px;
    box-shadow: 1px 1px 4px #444;
    padding: 14px 35px 32px;
}

.psiholoskitesti #test #rezultati .naslov{
    background-color: #64cbe3;
    border-radius: 16px;
    color: #fff;
    display: inline-block;
    font-size: 20px;
    margin-left: -20px;
    padding: 7px 20px;
    
}

.psiholoskitesti #test #rezultati .podnaslov{
    color: #64cbe3;
    font-family: cursive,Arial;
    font-size: 28px;
    letter-spacing: -0.08em;
    margin-bottom: 14px;
}

.psiholoskitesti #test #rezultati .podnaslov .slika{
    background-repeat: no-repeat;
    display: inline-block;
    height: 30px;
    position: relative;
    top: 4px;
    width: 30px;
}

.psiholoskitesti #test #rezultati1.srcek .podnaslov .slika, .psiholoskitesti #test #rezultati2.srcek .podnaslov .slika{
    background-image: url("../images/testi/ikona_srcek_mala.png");
}

.psiholoskitesti #test #rezultati1.trikotnik .podnaslov .slika, .psiholoskitesti #test #rezultati2.trikotnik .podnaslov .slika{
    background-image: url("../images/testi/ikona_trikotnik_mala.png");
}

.psiholoskitesti #test #rezultati1.zvezdica .podnaslov .slika, .psiholoskitesti #test #rezultati2.zvezdica .podnaslov .slika{
    background-image: url("../images/testi/ikona_zvezda_mala.png");
}