/* 
    Document   : style.css
    Created on : 30-oct-2013, 13:28:47
    Author     : JOAN
    Description:
        Purpose of the stylesheet follows.
*/
*{
    ffont-family: 'Quantico', 'sans-serif';
}
root { 
    display: block;
}
html{
    /*font-family: 'Quintessential', cursive;
    font-family: 'Kelly Slab', cursive;*/
    font-family: 'Quantico', 'sans-serif';

}
body{
    width: 100%;
    height: 100%;
    background-color: #D8D8D8;
    background-image: url('../images/fons.png');
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    margin:0px;
    /* overflow: hidden; */

    /* top:0;
     left:0;
     margin : 0;
     padding:0;*/

    /*overflow: hidden;
    */
    /*background-color: silver;
  //  background-image: url('../images/silver.jpg');*/

}

.textInput{
    border: 3px outset ghostwhite;
    padding: 5px;
    color: black;
    font-size: 13pt;
}
.areaText{
    border: 3px outset ghostwhite;
    padding: 5px;
    color: black;
    font-size: 15pt;
    resize: none;
}
.selectText{
    border: 3px outset ghostwhite;
    padding: 5px;
    color: black;
    font-size: 15pt;
    text-align:center;
}
#logoMyPhotoCode{
    width: 30%;
    margin-left: 35%;
    margin-top: 10%;
}
select{   
    margin-top: 10px;
    color: gray;
    border: 1px Solid gray;
    height: 48px;
    font-size: 16pt;
    position: absolute;
    text-align: center;   
}
.back2{
    position: absolute;
    right: 7%;
}
.title1{
    color: gray;
    font-size: 26pt;
    margin-top:5px;
    margin-bottom:5px;
    font-weight: bolder;
}
.title2{
    color: gray;
    font-size: 20pt;
    margin-top:5px;
    margin-bottom:5px;
    font-weight: bolder;
}
.text{
    color: gray;
    font-size: 14pt;
    margin-top:5px;
    margin-bottom:5px;
    margin-right:20px;

}
.register{
    width : 1097px;
    height: 660px;
    position: relative;
    background-image: url('../images/boxLogin2.png');
    background-repeat: no-repeat;
    margin: -50px auto;
}
.right {
    top: -2px;
    right: 9%;
    position: absolute;
    display: block;
}
.left{
    top: -2px;
    left: 8%;
    position: absolute;
    display: block;

}
.left input{
    background-color:black;
    color: white;
    border: 2px solid black;
}
.right input{
    background-color:black;
    color: white;
    border: 2px solid black;
}
.green{
    color: greenyellow;
}
.red{
    color: white;
}
/*STYLES OF INDEX.PHP */
#inicio{
    position: relative;
    background-color: white;
    z-index: 0;
    overflow: auto;
    overflow-x: hidden;
    width: 90%;
    margin-left: 5%;
    border-radius: 15px;
    box-shadow: 4px 3px 20px black;
}
.largeBox{
    position: relative;
    float: left;
    display: block;
    width: 94%;
    border: 3px outset silver;
    overflow: auto;
    margin-left: 3%;
    margin-top: 4px;
    margin-bottom: 5px;
    height: 30%;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
}
.box{
    margin-top: 60px;
    left: 20%;
    width: 60%;
    position: relative;
}

.photoBothBox{
    right: 0%;
    width: 60%;
    height: 90%;
    float: right;
    position: relative;
    display: inline;
}

.boxright{
    position : relative;
    float: right;
    margin-top: 2%;
    margin-right: 2%;
    display : inline;
    width: 46%;
    border : 3px outset silver;
    font-size : 20pt;
    color: darkblue;
    overflow: auto;
    overflow-x: hidden;
}
.first{
    margin-left: 2.5%;
}
/*llistes preguntes i solucions*/
.llista{
    width:100%;
    height:78%;
    overflow:auto;
    overflow-x: hidden;
    border-top : 3px solid black;
    border-bottom: 2px solid black;
}
.llista ul li {
    text-decoration: none;
    cursor: pointer;
}
.llista ul{
    list-style: none;
    width: 100%;
    margin:0px;
    padding:0px;
}
.llista .primaria{
    background-color: white;
    color: darkblue;
    font-size: 13pt;
    border-bottom: 1px solid black;
}
.llista .primaria:hover{
    background-color: darkblue;
    color: white;
    font-size: 13pt;
    border-bottom: 1px solid black;
}
.llista .seleccionada{
    background-color: darkblue;
    color: white;
    font-size: 13pt;
    border-bottom: 1px solid black;
}
.llista .primaria li{
    padding-left: 20px;
    padding-right:20px;
}
.llista .secundaria{
    background-color: whitesmoke;
    color: black;
    font-size: 12pt;
    border-bottom: 1px solid darkblue;
    display:block;
    float:left;
}
.llista .secundaria li{
    margin-left:2%;
    display:inline;
    float:left;
    cursor:inherit;
}
/*
.secundaria span:hover{
    color: yellow;
    text-shadow: 1px 1px 1px green;
    cursor: pointer;
}*/

.hiddenAnswers{
    display:none;
}



/*LLISTES PROBLEMES*/
.lista{
    width:100%;
    height:78%;
    overflow:auto;
    overflow-x: hidden;
    border-top : 3px solid black;
    border-bottom: 2px solid black;
}
.lista ul{
    list-style: none;
    width: 100%;
    margin:0px;
    padding:0px;
    font-size: 16pt;
    color: darkcyan;
    text-decoration: none;
}
.lista ul li {
    width:100%;
    border-bottom: 1px solid silver;
    text-decoration: none;
    cursor: pointer;
}
.lista ul li:hover{
    width:100%;
    border-bottom: 1px solid silver;
    text-decoration: none;
    cursor: pointer;
    color : white;
    background-color: darkcyan; 
}

.logo{
    background-color: transparent;

    position: absolute;
    z-index: 4;

}
#logo1{
    top: 0%;
    left: 0%;
}
#logo2{
    top: 0%;
    right: 10px;
}
#logo3{
    bottom: 10px;
    left: 0%;
}
#logo4{
    bottom: 10px;
    right: 10px;
}
#bordersDIV{

    position: absolute ;
    left: 79px !important;
    right: 85px !important;
    top:75px !important;
    bottom: 85px !important;
    border  : 20px solid black;
    background-color: white;
    z-index:0;
}

#principal{
    position: absolute;
    left: 17%;
    top: 2%;
    width: 66%;
    height: 96%;
    /* background-color: honeydew; */
    background-color: white;
    z-index: 1;
    border-radius: 15px;
    box-shadow: 4px 3px 20px black;

}

#load{
    display:block;
    position:absolute;
    _position: relative;
    left: 79px;
    right: 85px;
    top:75px;
    bottom: 85px;
    background-color: silver;
    z-index: 3;
    opacity: 0.3;
    overflow : hidden;
    border: 20px solid black;
}
#question{
    /* display:none;*/
    position: relative;
    top: 3%;
    left: 5%;
    background-color: transparent;
    width: 60%;
    height: 82%;
    z-index: 6;

}
#lastAgain{
    position: absolute;
    left: 5%;
    background-color: transparent;
    width: 60%;
    height: 12%;
    z-index: 6;
    bottom: 0px;
}
#errores{
    z-index:6;
    left: 44%;
    position: absolute;
    color: red;
    top: 65%;
    width: 50%;
    height: 30px;
    text-align: center;
}
.questionText{
    color: black;
    font-size: 16pt;
    padding: 10px;
    margin-top: 55px;
    margin-bottom: 0px;
}
.lastQuestion{
    background-image: url('../images/buttons/back.png');
    background-color : transparent;
    border-color:transparent;
    border: 0px;
    width:142px;
    height:48px;
    float:left;
    cursor: pointer;
}
.tryAgain{
    background-image: url('../images/buttons/tryAgain.png');
    background-color : transparent;
    border-color:transparent;
    border: 0px;
    width:142px;
    height:48px;
    float: right;
    margin-right: 5%;
    cursor: pointer;
}
.solutionText{
    /*color : darkgreen;*/
    color: darkslateblue;
    font-size: 16pt;
    padding:10px;
}
.questionText2{
    color: black;
    font-size: 16pt;
    padding: 10px;
    height: 51%;
    position: absolute;
    top: 25px;
}
.answerText{
    /*color : darkgreen;*/
    color: darkslateblue;
    font-size : 16pt;
    padding:10px;
}
.loadingImage{
    left: 45%;
    position: absolute;
    top: 35%;
}
.nextButton{
    position: absolute;
    bottom: 10px;
    right: 30px;
    left: 69%;
    font-size: 18pt;
    background-image: url('../images/silver2.jpg');
    border: 1px solid black;
    font-family: 'Quantico', 'sans-serif';
    color: #F7F7F7;
    text-shadow: 0px 0px 2px #C6C6C6;
}
#ownerComment{
    height: 25%;

}
#problemInfo{
    height: 90px;
}

#textAreaQuestion{
    height: 20%;
}
#textAreaSolution{
    height: 40%;
}
.txtAreaPop{
    height:100px;
    font-size: 11pt;
}
textarea{
    position: relative;
    display:block;
    width: 75%;
    font-family: 'Quantico', 'sans-serif';
    border: 1px Solid gray;
    color: gray;
    overflow-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    resize: none; 
    font-size: 16pt;
}
input[type="text"]{
    border: 3px outset ghostwhite;
    padding: 5px;
    color: black;
    font-size: 13pt;
}
#answers{
    display: block;
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
}
#errors{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 80%;
    background-color: red   ;
    display :none;
    margin: 0px;
    margin-left: 10%;
    margin-right: 10%;
    color : white;
}
#errPOP{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background-color: white;
    display :none;
}
.back{
    cursor: pointer;
}
#minipopup{
    width:40%;
    height: 40%;
    position:fixed;
    top: 30%;
    left:30%;
    z-index:10;
    display:none;
    background-color: white;
    border: 3px solid black;
}
#closeMiniPopup{
    background-color:red;
    color: white;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    width: 20px;
    height:20px;
    position: absolute;
    right:0px;
    top:0px;
    cursor:pointer;
}
#barralateral{
    position: fixed;
    background-color: white;
    border: 3px solid black;
    top:0;
    width:25%;
    height: 99%;
    z-index:11;
    display:none;
    overflow:auto;
}
#barralateralF{
    position: fixed;
    background-color: white;
    border: 3px solid black;
    top:0;
    width:25%;
    height: 99%;
    z-index:11;
    display:none;
}
.barraRight{
    right: 0;
}
.barraLeft{
    left:0;
}

.spanPointer{
    cursor: pointer;
}
.ui-datepicker{
    background-color:gray;
    border: 2px solid black;
}
.ui-datepicker td{
    border: 1px solid black;
    padding: 5px;
    background-color: silver;
    border-radius: 5px;
}
.ui-datepicker a{
    color: black;
    border-color: transparent;
    text-decoration: none;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: solid #FFF;
    border-width: 1px 0 0 1px;
}
.ui-icon-circle-triangle-e{
    float: right;
}
.ui-spinner {position: relative; border: 0px solid white; }
.ui-spinner-buttons {position: absolute}
.ui-spinner-button {overflow: hidden}

.mediaV{
    width: 350px;
    height: 55px;
    position: fixed;
    top: 0px;
    right: 30px;
    background: black;
    color: white;
    padding-left: 10px;
    overflow: hidden;
    z-index: 50;
}
.mediaI{
    width: 60%;
    height: 55px;
    position: fixed;
    top: 0px;
    left: 30px;
    background: black;
    color: white;
    padding-left: 10px;
    overflow: hidden;
    z-index: 50;
}
.updown{
    width: 30px;
    position: absolute;
    top: 15px;
    right: 30px;
    cursor:pointer;
}
.divMediaForm{
    margin-left: 20%;
    margin-top:2%;
    margin-bottom:2%;
    height: 144px;
    background: silver;
    display: block;
    float: left;
    border: 1px solid black;
}
#helpVideos{
    height: 92%;
    top: 4%;
    position: absolute;
    width: 16%;
    background-color: black;
    left: 1%;
    z-index: 4;
    border-radius: 15px 0px 0px 15px;
    color: white;
    overflow-y: scroll;
    overflow-x: no-content;
    direction:rtl;

}
#helpIMG{
    height: 92%;
    top: 4%;
    position: absolute;
    width: 16%;
    background-color: black;
    left: 83%;
    z-index: 4;
    border-radius: 0px 15px 15px 0px;
    color: white;
    overflow-y: scroll;
    overflow-x: no-content;
}
.tot{
    width: 100%;
    position: relative;
    height: 70%;
}
#helpIMG img{
    width: 90%;
    margin-left:5%;
    border-radius: 0px 15px 15px 0px;
    color: white;
    overflow: auto;
}
.videos{
margin: 14px auto 0px auto;
height: 30%;
cursor:pointer;
}
.imgH{
margin: 14px auto 0px auto;
height: 30%;
cursor:pointer;
}
.helpTitle{
margin: 21px auto -20px auto;
width: 80%;
}
.popUp{
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.9;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;

}
#MP4{
    display:none;
    z-index: 51;
    position: absolute;
    top: 80px;
    left:25%;
    width: 50%;
    margin: auto;
}
#IMGPop{
position: absolute;
z-index: 51;
width: 100%;
top: 80px;
}
.answer {
    cursor: pointer;
    font-size: 17pt;
    width: 85%;
    float: left;
    margin-left: 10px;
    background-image: url('../images/buttons/answer.png');
    height: 56px;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0px;
    border-color: transparent;
    text-align: left;
    padding-left: 10%;
    color:#474747;
}
.responses{
    width: 100%;
    position: absolute;
}
.logo{
    position: absolute;
    width:17%;
    margin-top: 10px;
    right: 5%;
}
.welcome{
    position: absolute;
    padding: 15px;
    color: green;
    font-weight: bold;
    border: 2px solid black;
    border-top: 0px;
    margin-left: 5%;
    background-color: floralwhite;
    box-shadow: 6px 3px 16px grey;
}
.welcome a{
    font-weight : bold;
    color:red;
}
.header{
    height: 15%;
    width: 100%;
    position: relative;

}
.footer{
    min-height: 20px;
    width: 100%;
    position: relative;

}
.solvedUnsovedBox{
    display: inline;
    float: left;
    margin-left: 2%;
    margin-top: 60px;
    position: relative;
    width: 47%;
}
.login{
    width: 563px;
    height: 342px;
    margin: 0 auto;
    text-align: center;
    /* left: 35%; */
    position: relative;
    top: 0;
    background-color: transparent;
    border-radius: 10px;
    background-image: url('../images/boxLogin.png');
}
.loginInput{
    border: 1px Solid gray;
    height: 33px;
    font-size: 16pt;
    position: absolute;
    width: 75%;
    left: 12%;
    text-align: center;
}
#loginButton2{
    top: 256px;
    position: absolute;
    left: 211px;
    width: 140px;
    height: 38px;
    border: 0px;
    background-color: transparent;
    border-radius: 23px;
    cursor: pointer;
}
.spanEdit{
    display:inline;
    float:right;
}
.Type{
    display: inline;
    float: left;
    cursor: pointer;
    width: 30%;
    padding: 1%;
}



.Type img{
    width:100%;
}

.Type2{
    display: inline;
    float: left;
    cursor: pointer;
    width: 30%;
    padding: 1%;
    background-color:orange;
    opacity:0.6;
}
.Type2 img{
    width:100%;
}

.Type3{
    display: inline;
    float: left;
    cursor: pointer;
    width: 30%;
    padding: 1%;
    background-color:orange;
    opacity:0.6;
}
.Type3 img{
    width:100%;
}


.Types{
    width: 100%;
    height: 150px;
    box-shadow: 2px 2px 10px black;
    margin-bottom: 45px;
    overflow:auto;
}

.info{
    width: 30%;
    height: 90%;
    position: relative;
    display: inline;
    float: left;
    left: 7%;
}
.boothTypes{
    height: 80%;
    background-color: rgb(236, 236, 236);
    width: 90%;
    margin-bottom:3px;
    margin-top:10px;
    overflow:auto;
}
.lgn{
    background-image: url('../images/welBar.png');
    width: 510px;
    height: 56px;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    display: inline;
    float: left;
    margin-left: 5%;
    margin-top: 10px;
    position: relative;
    line-height: 56px;
    color: white;
    font-size: 18pt;
}
.logOut{
    width: 40px;
    height: 40px;
    position: absolute;    
    right: 18px;
    top: 9px;
    cursor: pointer;
}

.logRed{
    background-image: url('../images/logOut.png');
}
.start{
    position: relative;
    width: 90%;
    height: 41px;
    margin: 0px;

}
.startQuestions{
    background-image: url('../images/buttons/bstart.png');
    background-repeat: no-repeat;
    background-color: transparent;
    width: 142px;
    height: 48px;
    cursor: pointer;
    border-color: transparent;
    border: 0px;
    margin-top: 10px;
    float: right;
}
#help{
    width: 25%;
    height: 94%;
    position: absolute;
    top: 2.5%;
    right: 1%;
    /*background-color: whitesmoke;*/
    background-image: url('../images/titles/fons.png');
    border: 1px solid grey;
    border-radius: 20px;
    text-align:center;
}

.BWIMG{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
.finish{
    background-image: url('../images/buttons/finish.png');
    background-color: transparent;
    border-color: transparent;
    border:0px;
    width: 142px;
    height: 48px;
    float: right;
    margin-right: 5%;
    cursor: pointer;
}
.sendEmail{
    background-image: url('../images/buttons/sendEmail.png');
    background-color: transparent;
    border-color: transparent;
    border:0px;
    width: 142px;
    height: 48px;
    float: right;
    margin-right: 5%;
    cursor: pointer;
}

.imgTitle{
    position: relative;
    height: 24px;
    margin-top: 10px;
    display: block;
    margin-bottom: 5px;
}
.insTitle{
    width: 18%;
    position: absolute;
    margin-top: -51px;
}
.instrucctions{
    background-image: url('../images/intrucctionsbackground.jpg');
    border-radius: 10px;
    width: 90%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 25px;
    margin-top: 55px;
    margin-bottom: -36px;
    color: #474747;
    font-size: 14pt;
    border: 1px solid #474747;
    overflow: hidden;
}
.instrucctions2{

    height:30px;
}
.box2{
    width : 40%;
    height: 34%;
    padding-left: 5%;
    padding-top: 5%;
    padding-right: 5%;
    padding-bottom: 1%;
    display:inline;
    float:left;
}
.forgot{
    width: 500px;
    margin: 11% auto;
    background-image: url('../images/boxLogin2.png');
    background-size: 100% 100%;
    height: 300px;
}
.nextInst{
    position: relative;
    left: 90%;
	background-color:transparent;
	border: 0px;
	background-image: url('../images/nextMini.png');
	color:transparent;
	width : 47px;
	height: 32px;
	cursor:pointer;
	
}
.showIns{
    display: none;
    position: absolute;
    right: 10%;
    top: 15%;
	color:transparent;
	background-image: url('../images/ull.png');
	width : 47px;
	height: 32px;
	cursor:pointer;
}