body{
	overflow: hidden;
	counter-reset:section;
}
body li .item{
	list-style: none;
}
.enunciado {
	background-color: white;
	clear: both;
	width: 100%;
	text-align: center;
    font-size: 21px;
    font-weight: bold;
	color: #5190bc;
	margin: 0;
	padding: 2.5% 0 1.5% 0;
}

/*--------------------------------  ----------------------------------------------*/
#sol {
    position:absolute;
    top:9%;
	width: 50%;
	min-height: 400px;
	height: 90%;
	text-align: justify;
    font-size: 21px;
    line-height: 30px;
    color: #ffffff;
	padding-left: 23%;
    padding-right: 23%;
    padding-top: 7%;
    padding-bottom: 5%;
    overflow-y: auto;
	overflow-x: hidden;
	background-image:url(../../imagenes/pizarra.png);
	background-repeat:no-repeat;
	background-position:center;
}
#sol .dictado{
    margin: 3% auto 5% auto;
}
.solFinal {
    width: 80%;
	padding-left: 10%;
    padding-right: 10%;
}
.tituloSol {
    margin-bottom: 2%;
    border-bottom: 1px solid #008ac9;
    width:100%;
    display:block;
    color: #008ac9;
    margin-top:37px;
}
.parrafo {
	counter-increment:section;
	font-weight: 200;
	width: 97%;
	margin: 0;
	line-height: 1.7;
	font-size: 20px;
	text-align: left;
	margin-bottom: 1%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #f0f0ff;
	padding: 0.5% 1.5%;
}
.autor {
    margin-top: 10%;
    font-style:italic;
    text-align: right;
    width:100%;
    display: block;
	text-align: right;
    color: #666;
    
}
#botones {
    position: relative;
    margin-top: 5%;
    margin-left: -200px;
    left: 50%;
    
}
#botones button{
    display: inline;
    width: 200px;
    height: 50px;
    margin: 0 5px 0 5px;
    
    font-size: 20px;
    color: #ddd;
    cursor: pointer;
    background-color: #008ac9;
    
    border: none;
    -webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
    
}
#botones button:hover{
    border: 1px solid #666;
    background-color: #008ac9;
    color: #fff;
}   
.dictadoActivo {
    display: none;
	width:98%;
	max-width:100%;
	min-width:100%;
    height: 90%;
    min-height: 500px;
    max-height: 90%;
    padding:1%;
    font-family: 'Open Sans',Helvetica,Arial,sans-serif;
    font-size:20px;
    text-align: left;
    color: #ffffff;
    
    border: none;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.dictadoActivo:focus {
     border: none;
     color: #ffffff;
}
.textoCorrecto {
     display: none;
}
.textoCorrecto p{
    -webkit-column-break-before: always;
    -moz-column-break-before: always;
    column-break-before: always;
}
.dictadoAudio {
    position: relative;
    top:-5%;
    width:100%;
	max-width:100%;
	min-width:100%;
    min-height: 25px;
    height: auto;

    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    

}
.welldone {
	color: #00af0d;
	border: 1px solid #00af0d;
}
.maldone {
	color: #FC3862;
    text-decoration:underline;
}
.showBoxes {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #fff;
    border: 1px solid #ccebf8; 
}

/*--------------------------------------- OTROS ----------------------------------------------*/
#advertencia {
    display: none;   
    
}
#cosa {
	position: absolute;
	float:left;
	top: 125px;
	left: 75px;
	z-index:0;
	
	/*width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 33px 39px 0 0;
	border-color: #156280 transparent transparent transparent;
	line-height: 0px;
	
	 /* Skew *//*
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);*/
	 width: 15px;
	height: 15px;
	background: #b34991;
	-moz-border-radius: 0px 0px 200px 0px / 0px 0px 270px 250px;
	-webkit-border-radius: 0px 0px 200px 0px / 0px 0px 270px 250px;
	border-radius: 0px 0px 200px 0px / 0px 0px 270px 250px;
}
#cosaDos {
	position: absolute;
	float:left;
	top: 120px;
	left: 78px;
	z-index:10;
	
	width: 10px;
	height: 6px;
	background-color: #b34991;
}

.oval-speech-border {
	position: absolute; 
	border:5px solid #fff; 
	text-align:center;
	line-height: 22px;
	font-weight: normal;
	font-size: 22px;
	color:#fff; 
	background:#b34991;
	float: right;
    z-index: 1000;
	top: 50px;
	right:13%;
	width: 150px;
	height: 120px;
	/* css3 */
	/*
	NOTES:
	-webkit-border-radius:240px 140px; // produces oval in safari 4 and chrome 4
	-webkit-border-radius:240px / 140px; // produces oval in chrome 4 (again!) but not supported in safari 4
	Not correct application of the current spec, therefore, using longhand to avoid future problems with webkit corrects this
	*/
	-webkit-border-top-left-radius:300px 300px;
	-webkit-border-top-right-radius:300px 300px;
	-webkit-border-bottom-right-radius:300px 300px;
	-webkit-border-bottom-left-radius:300px 300px;
	-moz-border-radius:300px / 300px;
	border-radius:300px / 300px;
	
	-moz-box-shadow: 2px 2px 2px #575157;
    -webkit-box-shadow: 2px 2px 2px #575157;
    box-shadow: 2px 2px 2px #575157;
}
.oval-speech-border p{
	position: relative;
	left: 16px;
	top:19px;
	width: 120px;
}
/* creates larger curve */
.oval-speech-border:before {
	content:""; 
	position:absolute; 
	z-index:2; 
	bottom:-22px; 
	right:45%; 
	width:25px; 
	height:15px;
	border-style:solid;
	border-width:0 5px 5px 0;
	border-color:#fff;
	margin-right:-10px;
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:80px 50px;
	-moz-border-radius-bottomright:80px 50px;
	border-bottom-right-radius:80px 50px;
    /* reduce the damage in FF3.0 */
    display:block; 
	
	-moz-box-shadow: 2px 2px 2px #575157;
    -webkit-box-shadow: 2px 2px 2px #575157;
    box-shadow: 2px 2px 2px #575157;
}

/* creates smaller curve */
.oval-speech-border:after {
	content:""; 
	position:absolute; 
	z-index:2; 
	bottom:-22px; 
	right:35%; 
	width:15px; 
	height:15px; 
	border-style:solid;
	border-width:0 5px 5px 0;
	border-color:#fff;
	margin-right:20px;
	background:transparent;
	/* css3 */
	-webkit-border-bottom-right-radius:40px 50px; 
	-moz-border-radius-bottomright:40px 50px; 
	border-bottom-right-radius:40px 50px; 
    /* reduce the damage in FF3.0 */
    display:block; 
}


@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) 
and (orientation : landscape) {
	#sol{
		height: 340px;
        font-size:14px;
	}
	#contents {
		margin-bottom:100px;
		margin-left:auto;
		margin-right:auto;
		height:420px;
		padding: 0 2%;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    #sol{
		height: 590px;
	}
	#contents {
		margin-bottom:100px;
		margin-left:auto;
		margin-right:auto;
		height:815px;
		padding: 0 2%;
	}
}
@media only screen 
and (max-width : 428px)  { 
    .enunciado {
       font-size: 16px;
    }
    #sol{
		height: 90%;
        min-width:280px;
        font-size: 14px;
	}
	#contents {
		margin-bottom:100px;
		margin-left:auto;
		margin-right:auto;
		height:815px;
		padding: 0 2%;
	}
    .dictadoActivo {
        font-size: 14px;
    }
    .dictado {
        margin-left:100px;
    }
    .autor {
        font-size: 12px;
    }
}