@charset "UTF-8";
@font-face {
	font-family: "Amaranth";
    src: url(fonts/Amaranth-Regular.ttf) format("truetype");
}
@font-face {
	font-family: "Barthowheel-Regular";
    src: url(fonts/Barthowheel-Regular.ttf) format("truetype");
}

body{
background:
linear-gradient(135deg, #93267A 22px, #93267A 24px, transparent 24px, transparent 67px, #93267A 67px, #93267A 69px, transparent 69px),
linear-gradient(225deg, #93267A 22px, #93267A 22px, #93267A 24px, transparent 24px, transparent 67px, #93267A 67px, #93267A 69px, transparent 69px)0 64px; 
background-color: #B02D91;  
background-size: 64px 128px; margin:0px !important; padding:0px !important;

}	



/* Wrappers  */
#outerWrapper{
	margin: 0px auto;
	padding: 0px;
	width: 954px; border:1px solid #D0D0D0;  background: rgba(255,255,255,1);	
}

#headerWrapper{
    margin:0px auto; 
	height:105px; 
	border-bottom:1px solid #E5E5E5;
	background: #fff url(../img/titulares.png) center center no-repeat;
	}

#leftWrapper{
	position:absolute;
	top:110px;
	left:0px;
	color: #000;
	width: 200px;
	border: none; 
	}

#centerWrapper{
	margin: 0px auto;
	padding-bottom:0px;
	padding-top:5px;
	background-repeat: no-repeat;
	width: 100%; 
	}

#rightWrapper{
	position:absolute;
	top:110px;
	right:0px;
	color: #000;
	width: 200px;
	border: none; 
	}


#headerWrapper h1{
	font-family: "Barthowheel-Regular", Arial, sans serif;
	font-size: 32pt;
	font-weight: normal;
	color:  #FFF; padding-top:40px;
	margin:0px auto; text-align:center;
	}

h2{
	text-align: center;
	font-family: "Barthowheel-Regular", Arial, sans serif;
	font-size: 1.8em;
	font-weight:bold; color:#fff; text-shadow: 0px 0px 8px rgba(235, 23, 87, 1);
	line-height:.9em;
	}		

h2.title{
	font-weight: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	margin: 0px 0px 5px 0px;
	color: #E4E4E4;
	}

h1.choose{
	font-weight: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	}

/* inputs */
textarea{
	border: 0px;
	font-family: "Barthowheel-Regular", Arial, sans serif;
	font-size: 18px; color:	#B02D91; margin-top:10px;
	text-align: center; resize:none; border:1px solid #E4E4E4;
	border-left: 4px solid #E4E4E4; width:200px; height:100px; overflow:auto; 
	}

input#button{
	margin:0px auto; font-family: "Barthowheel-Regular", Arial, sans serif;
	color: #fff;
	padding: 10px;
	padding:5px;
	font-size: 17px; width:170px;
	border: 1px solid #cdcdcd; background:#eb1757; cursor:pointer;
	}
	
input #button:active{ background:red;}

input#button2{
	margin:0px auto; font-family: "Barthowheel-Regular", Arial, sans serif;
	color:#fff; width:170px;
	padding: 10px;
	padding:5px;
	font-size: 17px;
	border: 1px solid #cdcdcd; background:#666666; cursor:pointer;
}

#chipRed{
	background: url(../img/2.png) no-repeat; display:inline-block;
	width:123px;
	height: 178px;
	text-indent: -9999px;
	z-index: 1; margin-top:5px;
	}
	
#chipRedColor{
	width:123px;
	height: 10px;
	background:#F00;
	z-index: 1; margin-top:0px;
	}
	
#chipBlue{
	background: url(../img/3.png) no-repeat; 
	display:inline-block;
	width:123px;
	height: 178px;	
	text-indent: -9999px; margin-top:5px;
	z-index: 1;
	}
	
#chipBlueColor{
	width:123px;
	height: 10px;
	background:#00C;
	z-index: 1; margin-top:0px;
	}	


img#firstdice1, img#firstdice2, img#seconddice1, img#seconddice2{
	cursor: hand;
	}
	
#footerWrapper{
	margin: 0px auto;
	text-align:right;
	border: 1px solid #7c7c7c;
	color: #333;
	height:50px; background:#7c7c7c; clear:both;
}

ul#navi{
	margin-top: 5px;
	}

ul#navi li{
	display: inline;
	list-style: none;
	padding: 10px;
	border-left: 1px solid #eee;
	}

ul#navi li:hover{
	background-color: none;
	}

ul#navi li a{
	text-decoration: none;
	border: 0px; font-size:22px;
	color:#fff; font-family: "Barthowheel-Regular", Arial, sans serif;
	}

ul#navi li a:hover{
	text-decoration: none;
	letter-spacing: 0px;
	color: #CACACA;
	}

/* table */
table{
	/*width: 480px; */
	width:940px;
	padding: 0px;
 	margin: 10px auto; 
	background:url(../img/serpientesyescaleras.png); 
	background-repeat: no-repeat;/*
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	filter: alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;*/
	}

tr, td{	
	width:105px;
	height:147px;
	padding: 2px; color:rgba(255,255,255,0); 	
	font-size:1em; 
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%; 	
	border: 1px solid transparent;
	margin: 0; padding: 0px;
	}

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background-color:#a14095 !important; 
background-image:
radial-gradient(#dacce0, rgba(255,255,255,.2) 2px, transparent 10px),
radial-gradient(#dacce0, rgba(255,255,255,.15) 1px, transparent 5px),
radial-gradient(#dacce0, rgba(255,255,255,.1) 2px, transparent 8px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 10px);
background-size: 230px 230px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; height:auto;

    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 950px; height:300px;
    position: relative;
    margin: 20px auto; text-align:left;
	font-family: 'Barthowheel-Regular', Arial, sans-serif;
	font-size:23px;
	/*color:#ffeb41; amarillo*/
	color:#fff;
	text-shadow: 0.1em 0.1em 0.1em rgba(26,26,26,1);	
    /*background: url(info.png) no-repeat !important;*/
}
.modalDialog > div span{ 
   color:#ffeb41; 
}

.modalDialog > div h2{
	text-align: center;
	font-family: "Barthowheel-Regular", Arial, sans serif;
	font-size: 28pt;
	font-weight:bold; color:#fff;
	}		

.modalDialog > div p{ 
   color:#ffeb41; font-size:1.6em;
}
.modalDialog ol.circles-list {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack*/
     
    margin-top: 20px;
    margin-left: 5em;
    padding: 0;
     
    counter-reset: li-counter;
}
.modalDialog ol.circles-list > li{
    position: relative;
    padding-left: 0.5em; min-height:2.8em;
}
.modalDialog ol.circles-list > li:before {
    position: absolute;
    top: 0;
    left: -1.33em;
    width: 1.2em;
    height: 1.2em;
     
    font-size: 1.6em;
    line-height: 1.2;
    text-align: center;
    color: #fff;
 
    border: 3px solid #fff; background:#eb1757;
    border-radius: 50%;
    content: counter(li-counter);
    counter-increment: li-counter;
}

.modalDialog .close {
    color: #FFFFFF;
    position: absolute; font-size:36px;
	top:0px;
    right: 0px;
    text-align: center;
    width: 32px;
    text-decoration: none;
}
.modalDialog .close:hover {
    background: #868686;
}


#dialog{
font-family: "Barthowheel-Regular", Arial, sans serif;
}

.dialog-inst{
	 font-size: 28px; line-height:25px; 
}

.opcpersonaje{
  display: inline-block; padding:2px; margin-top:50px; background:none;
}

#imagen_1{
  background:#fff url(../img/imagen_1.png) no-repeat center center;
  border:1px solid #cdcdcd;
  width: 143px; height: 198px;
}

#imagen_2{
  background: #fff url(../img/imagen_2.png) no-repeat center center;
  border:1px solid #cdcdcd;
  width: 143px; height: 198px;
}

#imagen_3{
  background: #fff url(../img/imagen_3.png) no-repeat center center;
  border:1px solid #cdcdcd;
  width: 143px; height: 198px;
}

#imagen_4{
  background: #fff url(../img/imagen_4.png) no-repeat center center;
  border:1px solid #cdcdcd;
  width: 143px; height: 198px;
}

#imagen_5{
  background: url(../img/imagen_5.png) no-repeat center center;
  border:1px solid #cdcdcd;
  width: 143px; height: 198px;
}

input[type="radio"]{
    display:none;
}

input[type="radio"] + label{        
    width: 125px; height: 180px; margin-right:8px;
    display:inline-block; background:none;
}

input[ type="radio"]:checked + label{
-webkit-box-shadow: 0px 0px 0px 10px rgba(230, 23, 85, 1);
-moz-box-shadow:    0px 0px 0px 10px rgba(230, 23, 85, 1);
box-shadow:         0px 0px 0px 10px rgba(230, 23, 85, 1);
}

.grumble-button {
			font-size:11px;
			}