@charset "utf-8";
/* CSS Document */
    
body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
	padding: 0;
	text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
    background-color: #FFFFFF;
    color: #000000;
    font-size: small;
    margin-left: 5%;
    margin-right: 5%;
}
input{vertical-align:baseline;padding: 0 2px 2px;}
input#dirigido{margin-top:5px;vertical-align: sub;}
input#ayuda{margin-top:5px;vertical-align: sub;}
input.reset{color:#999999;}
i{color:navy;}
p {
    font-size: 100%;
    margin: 0;
    text-align: left;
}
ul{ display:inline-block; margin:0; padding:0;}
table, div, span, td {
    color: #000000;
    font-size: 97%;
}
div.papelera{
    height: auto;
    margin: 0 auto;
    position: relative;
    right: -480px;
    top: -260px;
    width: 60px;
}
img.papelera{
	width:60px; height:auto;
}
div.papelera_arde{
    height: 1px;
    margin: 0 auto;
    position: relative;
    right: -450px;
    top: -346px;
    width: 1px;
	display:none;
}
img.papelera_arde{
	width:60px; height:auto;
}
div.Titles {
    color: #000033;
    text-align: center;
	padding: 2px 0 6px;
}
button {
    display: inline;
    font-family: arial,helvetica,sans-serif;
    font-size: 100%;
}
.ExerciseTitle {
    color: #34495e;
    font-size: 140%;
}
.ExerciseSubtitle {
    color: #000033;
    font-size: 120%;
}
div.StdDiv{
	background-color: #ced7dd;
	text-align: center;
	font-size: 100%;
	color: #000000;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-color: #000000;
	margin-bottom: 1px;
	padding: 6px;
}
div.NavButtonBar {
    background-color: #34495e;
    clear: both;
    font-size: 100%;
    margin: 7px 0;
    text-align: center;
	height:24px;
}
.FuncButton {
	text-align: center;
	border-style: solid;

	border-left-color: #ddddf6;
	border-top-color: #ddddf6;
	border-right-color: #5d5d77;
	border-bottom-color: #5d5d77;
	color: #000000;
	background-color: #ced7dd;

	border-width: 2px;
	padding: 3px 6px 3px 6px;
	cursor: pointer;
}

.FuncButtonUp {
	color: #ced7dd;
	text-align: center;
	border-style: solid;

	border-left-color: #ddddf6;
	border-top-color: #ddddf6;
	border-right-color: #5d5d77;
	border-bottom-color: #5d5d77;

	background-color: #000000;
	color: #ced7dd;
	border-width: 2px;
	padding: 3px 6px 3px 6px;
	cursor: pointer;
}

.FuncButtonDown {
	color: #ced7dd;
	text-align: center;
	border-style: solid;

	border-left-color: #5d5d77;
	border-top-color: #5d5d77;
	border-right-color: #ddddf6;
	border-bottom-color: #ddddf6;
	background-color: #000000;
	color: #ced7dd;

	border-width: 2px;
	padding: 3px 6px 3px 6px;
	cursor: pointer;
}
/* Hasta aquí uc3m */
.oneColLiqCtr #container {
	width: 80%;  /* esto creará un contenedor con el 80% del ancho del navegador */
	background: #FFFFFF;
	margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
	/*border: 1px solid #000000;*/
	text-align: left; /* esto anula text-align: center en el elemento body. */
}
.oneColLiqCtr #mainContent {
	padding: 0 20px; /* recuerde que el relleno es el espacio situado dentro del cuadro div y que el margen es el espacio situado fuera del cuadro div */
}
.tutorial{
	background-color:#9966CC;
}
canvas{
	cursor: url(img/puntero.ico), pointer;
}
#header_id{
	height:100%;
	vertical-align:top;
	margin:0;
}
#tablero{
    margin-bottom: 1px;
    padding: 0.5em;
    text-align: center;
    background-color: #ced7dd;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
	height:100%;
}
#canvas_id{
    border: 1px ridge black;
	margin-bottom: 3px;
    background-color: #dcdcdc;/*Gainsboro*/
	width:871px;
	height:300px;
}
.flotante{
	text-align:left;
	font-size:small;
}
.peso{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #000000;
    padding:2px;
	margin:2px;
	width:16px;
	height:16px;
	cursor:text;
	text-align:center;
}
.div_hover {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff000;
	width: 100%;  /* Las dimensiones de la capa se modifican con javascript*/
	height: 100%;
	display:block;
	z-index: 100;
	opacity:0.5;
	filter: alpha(opacity=50);
}
.div_info{
	width:auto;
	height:auto;
	background-color:#eee9e5;/*SeaShell*/
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	display:block;
	z-index: 101;
	padding:3px;
	text-align:center;
	opacity:1;
	filter: alpha(opacity=100);
	position:absolute;
	left:540px;
	top:300px;
}
.div_flecha{
	position: absolute;
	width:27px;
	height:33px;
	border:1px solid red;
	font-size:16px;
	font-weight:bold;
	padding:0 0 15px 0;
}
.div_flecha:hover{
	border:1px solid blue;
	cursor:move;
}
.canvas_flecha{
	width:25px;
	height:25px;
	position:relative;
	left:0px;
	cursor:move;
	padding-left:1px;
}
input.resolucion{
    background-color: #EEE9E5;
    border: medium none;
    color: red;
	font-style: italic;
    font-size: xx-large;
    font-weight: bold;
}
div.resolucion{
    float: left;
    height: 60px;
    margin: 10px;
    padding: 5px;
    width: 148px;
	color: MediumBlue;
}
div.botones_resolucion{
	margin:0 auto;
	width:361px;
}
.img_flecha{
	border:none;
	display:block;
}
span.titulo_resultado{
	font-size:smaller;
	color:#6a5acd;/*SlateBlue*/
	text-transform:none;
}
ul{
list-style:none outside none;
margin:0;
padding:0 0 4px 0;
}
li.soluciones{
	background-color:#ff00ff;
	border:3px outset navy;
	cursor:auto;
	/*margin-bottom:4px;*/
}
li.usuarios{
	background-color:#ff00ff;
	border:3px outset navy;
	cursor:auto;
	/*margin-bottom:4px;*/
}
li.draggable{
	background-color:#bc8f8f;/*RosyBrown*/
	border:3px outset beige;/*Beige*/
	/*margin-bottom:4px;*/
}
li.draggable:hover{
	border:3px outset #ced7dd;
	background-color:#7fffd4;/*aquamarine*/;
	cursor:alias;
}
li.draggable_clon{
	background-color:Highlight;
	border:3px outset beige;/*Beige*/
	/*margin-bottom:4px;*/
}
li.draggable_clon:hover{
	border:3px outset beige;/*Beige*/
	background-color: #bc8f8f;/*RosyBrown*/
	cursor:ns-resize;
}
ul.col_aristas{ 
	min-height:400px;
	background-color:#333;
	width:100%;
}
ul.col_camino{
	min-height:400px;
	background-color:#ccc;
	width:100%;
}
ul.col_solucion{
background-color:#ced7dd;
border:1px solid black;
display:none;
}
div.unicode_arista{
	color:#fff;
	background-color:#000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	width:15px;
	height:15px;
	font-size:small;
	display: inline-block;
}
div.unicode_peso{
    background-color: #FFFFFF;
    border-color: black;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: thin;
    display: inline-block;
    font-size: small;
    height: 18px;
    width: 18px;
}
div.canvas{
	width:871px;
	height:300px;
	margin:0 auto;
	position:relative;
}
span.letra{
	color: #FFFFFF;
    padding: 3px;
}
span.number{
    font-weight: lighter;
    position: relative;
    top: 2px;
}
img.flecha_aristas{
    display: inline-block;
    padding-top: 1px;
}
span.dirigido{
	color:#ffffff;
	cursor:pointer;
}
table.resultados{
	text-align:center;
	cellspacing:5px;
	background-color:#fff;
	border:1px solid #000;
	width: 875px;/*width:78%;*/
	margin:0 auto;
}
table.la_matriz{
	border: 1px solid;
    border-radius: 10px;
	empty-cells:hide;
	position:relative;
	border-spacing: 0;
	padding:8px;
	font-size: medium;
	text-align:center;
	margin:0 auto 0 auto;
}
table.la_matriz th{
	padding-right:5px;
}
td.solucion{}
th.tit_col_estrecha{
	width:10%;
	height:100%;
}
th.tit_col_ancha{
	width:40%;
}
th.col_resultados{
    padding-top: 2px;
    vertical-align: top;
}
div.origen{
	width:873px;
	height:302px;
	position:absolute;
}
div.matriz{
	display:none;
	position:relative;
	padding:0px;
	margin:0 auto 10px;
}
div.mandos{
}
#img_matrix{
	background-image: url("img/matrix_indice2.png");
    background-position: 1px 2px;
    background-repeat: no-repeat;
    font-size: xx-small;
}
input.v_inicial{
    height: 8px;
    width: 26px;
	text-transform:uppercase;
	font-size: xx-small;
}
span.tit_sol{
	color:navy;
	font-size:small;
}
div.foot{
	margin:0 auto;
	padding-top:5px;
	border:none;
}
div.foot img{
border:none;
}
span.optimizado{
font-size:x-small;
color:#6a5acd;
}
img.logo{
height:30px;
padding-right:2px;
}
div.div_iframe{
    background-color: #dcdcdc;
    border: 1px solid black;
	display:none;
	width:871px;
	height:575px;
	margin:0 auto;
	position:relative;
}
iframe#frame_navegador{
	background-color:#dcdcdc;
    height: 545px;
    width: 871px;
	border:none;
	margin:0;
	scrolling:auto;	
}
input.checo{
    margin-top: 5px;
    vertical-align: sub;
}
img.cerrar{
   cursor: pointer;
    display: inline-block;
    position: absolute;
    right: 2px;
    top: 2px;
    width: 17px;
}
div#div_url{
	margin-top:6px;
}
input.input_URL{
	width:790px;
}
#logo{
	float: left;
    opacity: 0.8;
    margin-top: -7%;
}