/*
 * KH World Responsive
 * código CSS y HTML (reescrito) por RikuAnsm (http://arrayzone.com)
 */

/* FONTS */
@font-face {
    font-family: Disney;
    src: url(fonts/waltograph42.otf);
}

@font-face {
    font-family: Disney;
    font-weight:normal;
    src: url(fonts/waltographUI.ttf);
}

/* Quitamos los bordes a las imagenes con <a> */
/*a img { border:none; }*/

/* GENERIC */
body { margin:0;
	/*background: -moz-linear-gradient(top,  #c46a6a 0%, #ebe2fa 264px, #ebe2fa 100%); /* FF3.6+ */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c46a6a), color-stop(264px,#ebe2fa), color-stop(100%,#ebe2fa)); /* Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(top,  #c46a6a 0%,#ebe2fa 264px,#ebe2fa 100%); /* Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(top,  #c46a6a 0%,#ebe2fa 264px,#ebe2fa 100%); /* Opera 11.10+ */
	/*background: -ms-linear-gradient(top,  #c46a6a 0%,#ebe2fa 264px,#ebe2fa 100%); /* IE10+ */
	/*background: linear-gradient(to bottom,  #c46a6a 0%,#ebe2fa 264px,#ebe2fa 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c46a6a', endColorstr='#ebe2fa',GradientType=0 ); /* IE6-9 */
	background: url(img/bg-rep-x.jpg) repeat-x #ebe2fa;
}

h2 { color: #003FA8; font-size: 10px; font-weight:bold; text-align:center;}
.header .social_buttons { float:right; margin:10px 10px 0 0; position:relative; z-index:99; }
.social_buttons .alterarFuente { display:inline-block; }
.alterarFuente a { display:block; }

/*.header .social_buttons img { width:40px; }*/

.web .top_menu { overflow:hidden; }
.web .top_menu a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	height:51px; padding:15px 0 0 30px ; background:url(img/siemprejuntos.png) no-repeat;
}

/* 
 * CENTRO
 */

/* DETALLES DE COLUMNAS */

.web > section .cell1 { background-color:#F0E3DD !important; }
/* Columna con la llave espada bajando */
.web > section .cell2 { display:none; }

.web > section .cell3 { background-color:#E3CDC0 !important;}
.web > section .cell4 { background-color:#FFEFD6 !important; }


/* CONTENT */

.menu > div { margin-bottom:12px; overflow:hidden; }
.menu > img, .menu > div { position:relative; display:block; z-index:2; }

.left_menu span { display:block; margin:10px 0 0 2px; color:#572B2B; font-weight:bold; }
.left_menu > div > a, .linksIcon a { background:url(orflex.png) no-repeat 0 0.5em; margin-left:13px; padding-left:10px; display:block; }

/* Secciones especificas */
.changelog { font-weight:bold; padding:0; }
.changelog > li > span { color:#D81414; }
.changelog > li > ul { padding:0 0 0 10px; margin-bottom:10px; }

/*
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(img.php?img=orbgg.jpg) #EBE2FA  50% 0% repeat-x;
}*/
a:link {
	color: #572B2B; 
	text-decoration: none;
}

#menu2 {
display: none;
}

.b:link {
	color: #572B2B; 
	text-decoration: none;
}

a:visited {
	color: #572B2B; 
	text-decoration: none;
}

.b:visited {
	color: #572B2B; 
	text-decoration: none;
}

a:active {
	color: #572B2B; 
	text-decoration: none;
}

.b:active {
	color: #572B2B; 
	text-decoration: none;
}

.tb {
	border: 1px dotted #000000;
}

a:hover {
	color: #BB7198; 
	text-decoration: none;
	font-weight:bold;
}

.b:hover {
	color: #BB7198; 
	text-decoration: none;
	font-weight:bold;
}


body, td {
	font-family: Verdana;
	font-size: 10px;
	color: #000000;
	scrollbar-base-color: #612341;
	scrollbar-arrow-color: #612341;
	scrollbar-shadow-color: #BE9378;
	scrollbar-highlight-color: #821518;
	scrollbar-darkshadow-color: #55223E;
	scrollbar-track-color: #9F786C;
	scrollbar-face-color: #F1C598;
}
.highslide {
	cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
	border: 2px solid gray;
}
.highslide:hover img {
	border: 2px solid white;
}

.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10px;
    padding: 5px;
    background-color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.highslide-loading {
    display: block;
	color: white;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
    text-decoration: none;
	padding: 3px;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
.highslide-html {
    background-color: white;
    border: 2px solid gray;
}
.highslide-html-content {
	position: absolute;
    display: none;
    padding: 10px;
}
.highslide-loading {
    display: block;
	color: black;
	font-size: 8pt;
	font-family: sans-serif;
	font-weight: bold;
    text-decoration: none;
	padding: 2px;
	border: 1px solid black;
    background-color: white;
    
    /*padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;*/   
}
.control {
	float: right;
    display: block;
    /*position: relative;*/
	margin: 0 5px;
	font-size: 9pt;
    font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	color: #999;
}
.control:hover {
	color: black !important;
}
.highslide-move {
    cursor: move;
}

.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}


/* Special effects for boxs */
.ablock, .afloat, .freeimg { text-align:center; }
.ablock a { display:inline-block; }

.afloat a { display:inline-block; }
.freeimg img { display:inline; }



.centered { text-align:center; }
.centered > * { margin:0 auto; }
.centered a { display:inline-block; }

.contenidoweb { max-width:465px; width:99%; margin-left:auto; margin-right:auto; } 
.contenidoweb > table { width:100%; }

/* NOVEDADES DEL INICIO (vinculadas a origin.tpl) */
.contenidoweb .titulo { text-align:justify; font-family:verdana; color:#006DAE !important; font-weight:bold; }
.contenidoweb .cont { text-align:justify; font-family:verdana;color:#000000; font-weight:bold; }
.novedadesInicio > div > img { width:100%; }
footer { color:#9D7EC7; padding:0 0 10px 0; text-align:center; }

.toSky { display:scroll; position:fixed; bottom:5px; right:5px; }

.key > li  { background:url(fan/khcom/sprites/3.GIF) no-repeat 0 0; margin-left:13px; padding-left:10px; display:block; }

/*
	RESPONSIVE
*/
.web .cont iframe { width:100% !important; max-width:100%; }
.cont .cita { font-weight:normal; background:#fff; }

/* FullScreen */
@media screen and (max-width:245px) {
	#logo { width:100%; }
}

@media screen and (max-width:399px) {
	.web .top_menu a { display:block; width:50%; margin:0 auto; text-align:center; }
}

@media screen and (min-width: 400px) and (max-width:799px) {
	.web .top_menu a { float:left; width:40%; margin:0 0 0 7%; }
	.web > section .cell3, .web > section .cell4 { float:left; width:50% !important; }
	
	footer { clear:both; }
	.background_footer { display:none; }
}

/* Tamaño aproximadamente el original del contenido */
@media screen and  (max-width:510px) {
	.contenidoweb .cont img { max-width:100%; }
	.novedadesInicio > div { width:100%; display:block; }
	/*.web .content table:first-child { width:auto !important; padding:0 1%; }*/
	
}

@media screen and  (min-width:510px) {
	/*.web .content table:first-child { width:487px !important; padding:0 1%; }*/
}

@media screen and  (max-width:799px) {
	#logo { display:block; margin:0 auto !important; clear:both; }
	
	.web .top_menu a { font-family:Disney; font-size:14pt; text-decoration:none; color:#fff;
		text-shadow: 2px 0 0 #532679, -2px 0 0 #532679, 0 2px 0 #532679, 0 -2px 0 #532679, 1px 1px #532679, -1px -1px 0 #532679, 1px -1px 0 #532679, -1px 1px 0 #532679;
	}

	.menu > div { width:86%; margin-left:auto; margin-right:auto; }
	.menu > img { margin:0 0 0 10px; }
	
	.header { text-align:center; }
	
	.web .top_menu { max-width:465px; margin:0 auto; }
	
	body, td { font-size:10pt; }
	
}

@media screen and (min-width: 800px) {
	.top_publi { position:absolute; margin:-116px 0 0 13px; }
	.web > section > div > * { height:100px; }
	.web { margin:0 0 10px; padding:8px 0 0; background:url(img/background.jpg) no-repeat 50% 0%; }
	
	/* Aplicamos los estilos genericos al header, contenido y footer */
	.web > * { width:798px; margin:0 auto; border-color:#B39B91; border-width: 0 1px; border-style:solid; }
	.web > header { -webkit-border-top-left-radius: 54px; -moz-border-radius-topleft: 54px; border-top-left-radius: 54px; }
	.web .top_menu a.fix_top { padding-top:14px; }
	.web .top_menu a.fix_left { padding-left:33px; }
	
	/* HEADER */
	.header { background:url(img/headerkh3.jpg) no-repeat; height:470px;}
	
	#logo { clear:both; float:right; margin:-11px 53px 0 0; }
	
	.web .top_menu { margin-top:-63px; height:63px; background:url(img/top_menu.jpg) no-repeat; padding-left:24px; }
	.web .top_menu a { float:left; z-index:999; width:112px; margin:8px 4px 0 0; font-size:0; }
	
	.right_menu > img { margin:0 auto; }

	.web > section { display:table; }
	.web > section > div { display:table-row; }
	.web > section > div > * { display:table-cell !important; height:400px; vertical-align:top; }

	/* DETALLES DE COLUMNAS */
	.web > section .cell1 { width:487px; background:url(img/center_bg.jpg) no-repeat; }
	/* Columna con la llave espada bajando */
	.web > section .cell2:before { background:url(img/keyblade_1.png) no-repeat ; margin:-7px 0 0 -24px ; position:absolute; width:58px; height:100px; display:block; content:""; z-index:1; }
	.web > section .cell2 { width:11px; background:url(img/keyblade_2.png) repeat-y;}
	
	.web > section .cell3 { width:148px; background:url(img/menu_right_bg_1.jpg) no-repeat;}
	.web > section .cell4 { background:url(img/menu_right_bg_2.jpg) no-repeat; border-left:1px solid #B3978B; }
	.web > section .cell4:before { background:url(img/rama_derecha.png) no-repeat; margin:0 0 0 -35px; position:absolute; width:66px; height:208px; content:""; }

	.background_footer { background:url(img/footer.jpg) no-repeat; height:250px; }	
	
	.onlySmall { display:none; }
}

/* Para pantallas grandes (no se aplicara en smartphones y otros) */
@media screen and (min-device-width: 800px) {
	/* Especial usado por JS */
	.hidden { display:none; }
}