@font-face {
font-family: 'oswald-regular';
src: url('oswald-regular-webfont.eot'); 
src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('oswald-regular-webfont.svg#oswald-regular') format('svg'),
    url('oswald-regular-webfont.ttf')  format('truetype');
}

#contenedor_cuecas_2 {
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #b3a081;
	width: 958px;
	background-image: url(../img/bg_calculadora.png);
	background-repeat: repeat;
	float:left;
	padding-top: 13px;
}

#contenedor_cuecas {
font-family: Arial, Helvetica, sans-serif;
border: 1px solid #b3a081;
width: 958px;
min-height: 500px;
background-image: url(../img/bg_calculadora.png);
background-repeat: repeat;
float:left;
padding: 13px 0px;
}

#header_cuecas {
width: 925px;
padding: 13px 17px;
min-height: 75px;
background-image: url(../img/bg_calculadora_trans.png);
background-repeat: repeat;
border-bottom: 2px solid #b9a17f;
margin-top: -13px;
}

#header_cuecas h3 {
color: #644818;
font-weight: 300;
margin-bottom:0px;
font-size: 26px;
font-family: oswald-regular, Helvetica, Arial;
text-shadow: none;
}

#header_cuecas p {
	color: #644818;
	width: 900px;
	font-size: 12px;
	font-weight: bold;
}

#side_menu {
width: 340px;
background-image: url(../img/sombra-side-musica.png);
background-repeat: no-repeat;
background-position: 0px 10px;
margin-top:5px;
padding:40px 0px;
float:left;
position: relative;
}

#side_menu div.jp-playlist ul {
list-style-type: none;
width: 270px;
background-color: #ffffff;
border-left: 1px solid #c3a696;
border-right: 1px solid #c3a696;
border-bottom: 1px solid #c3a696;
margin-left: 14px;
padding-right: 12px;
padding-top: 12px;
padding-left:18px;
padding-bottom:0px;
min-height: 400px;
}

#side_menu div.jp-playlist li {
border: 1px solid #e5b88e;
margin-bottom: 13px;
height: 26px;
line-height: 26px;
padding-left:25px;
position: relative;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}

#side_menu div.jp-playlist li:hover {
cursor: pointer;
border: 1px solid #ec848f;
background-color: #eae4e4;
transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}

#side_menu div.jp-playlist ul a:link, #side_menu div.jp-playlist ul a:visited {
text-decoration: none;
color: #000000;
font-size: 14px;
}

ul.botones_playlist {
list-style-type: none;
position: absolute;
top:85px;
left:20px;
z-index: 10;
display: none;
}

ul.botones_playlist li {
width: 33px;
height: 33px;
background-image: url(../img/play.png);
background-repeat: no-repeat;
margin-bottom:8px;
cursor:pointer;
}

ul.botones_playlist li.activo {
background-image: url(../img/pause.png);
}

#side_menu div.jp-playlist li.jp-playlist-current {
border: 1px solid #ec848f;
background-color: #eae4e4;;
}

#side_menu div.jp-playlist li.jp-playlist-current a:link, #side_menu div.jp-playlist li.jp-playlist-current a:visited {
cursor: default;
}

#slide_fotos_cueca {
width: 587px;
height: 454px;
float:left;
border: 1px solid #c2a494;
background-color: #ffffff;
margin-top:45px;
margin-left:10px;
position: relative;
}

#slide_fotos_cueca img {
position: absolute;
top:26px;
left:30px;
display: none;
}

li div.boton_playlist {
width: 33px;
height: 33px;
left:-14px;
top:-2px;
position: absolute;
}

li div.boton_playlist_play {
background-image: url(../img/play.png);
background-repeat: no-repeat;
display: block;
cursor: pointer;
}

li div.boton_playlist_pausa {
background-image: url(../img/pause.png);
background-repeat: no-repeat;
display: none;
}

li div.boton_playlist_pausa.pausado {
opacity: 0.8;
filter: alpha(opacity=80);
background-image: url(../img/play.png);
background-repeat: no-repeat;
}

li.jp-playlist-current div.boton_playlist {
display: block;
}

#contenedor_slide_cuecas {
background-image: url(../img/sombra-musica.png);
background-repeat: no-repeat;
background-position: 0px 10px;
height: 550px;
float:left;
}

#jp_container_1 {
position: absolute;
top:75px;
left:0px;
}

/*Aprende a bailar cueca*/

div.box960 #jp_container_1 {
position: absolute;
top:49.36%;
top:calc(51.45% - 49px);
left:9.91%;
left:calc(14.91% - 50px);
}

div.box960 #jp_container_2 {
position: absolute;
top:49.36%;
top:calc(51.45% - 49px);
left:28.55%;
left:calc(33.55% - 50px);
}

div.box960 #jp_container_3 {
position: absolute;
top:49.36%;
top:calc(51.45% - 49px);
left:47.91%;
left:calc(52.91% - 50px);
}

div.box960 #jp_container_4 {
position: absolute;
top:49.36%;
top:calc(51.45% - 49px);
left:66.99%;
left:calc(71.99% - 50px);
}

div.box960 #jp_container_5 {
position: absolute;
top:49.36%;
top:calc(51.45% - 49px);
left:85.99%;
left:calc(90.99% - 50px);
}

div.box960 #jp_container_6 {
position: absolute;
top:64.97%;
top:calc(67.47% - 49px);
left:9.91%;
left:calc(14.91% - 50px);
}

div.box960 #jp_container_7 {
position: absolute;
top:64.97%;
top:calc(67.47% - 49px);
left:28.55%;
left:calc(33.55% - 50px);
}

div.box960 #jp_container_8 {
position: absolute;
top:64.97%;
top:calc(67.47% - 49px);
left:47.91%;
left:calc(52.91% - 50px);
}

div.box960 #jp_container_9 {
position: absolute;
top:64.97%;
top:calc(67.47% - 49px);
left:66.99%;
left:calc(71.99% - 50px);
}

ul.jp-controls {
list-style-type: none;
}

ul.jp-controls li a {
display: block;
overflow: hidden;
text-indent: -9999px;
position: relative;
}

div.jp-type-single .jp-play {
background: url(../img/play-off.png);
width:49px;
height:50px;
position: absolute;
top:27px;
left:0px;
}

div.jp-type-single .jp-play:hover {
background: url(../img/play-on.png);
}

div.jp-type-single .jp-pause {
background: url(../img/pause-off.png);
position: absolute;
width:49px;
height:50px;
top:27px;
left:0px;
}

div.jp-type-single .jp-pause:hover {
background: url(../img/pause-on.png);
}
