/**
 * Estilos personalizados para ubicar componentes
 * @author: Erick Sánchez
 */

/*********** ESTILOS HTML ***************/

html,body{
	width           : 100%;
	height          : 100%;
	background-color: #ccc !important;
	padding         : 0px !important;
	margin          : 0px !important;
  background-image: url('../images/TexturaGral.png');
  background-repeat: repeat;
}

@font-face {
	font-family: 'Muli';
	font-style : normal;
	font-weight: 400;
	src        : local('Muli'), url(Muli.woff) format('woff');
}

/********** ESTILOS DE PLANTILLA **************/

#main-container	{
	width           : 1200px;
	height          : 100%;
	background-color: #fff;
	font-size       : 16px;
	font-family     : 'Muli', Arial, serif; font-weight: 400; 
	margin          : 0 auto;
}

#main-container	 *{
	/*border: 1px dotted #f00;*/
}

/* Header */
	#main-container #bar-header{
		background-color: #f6f6f6;
		width           : 100%;
		height          : 90px;
    /*background-image: url('../images/TexturaGral.png');
    background-repeat: repeat;
    background-size: 80px;/**/
	}
		#bar-header .bar-height{
			position   : absolute;
			padding-top: 10px;
			height     : 30px;
			display    : block;
			float      : left;
			font-weight: bold;
		}
		#bar-header #header-logo{
			position: absolute;
			width   : 150px;
			display : block;
		}
			#bar-header #header-logo img{
				margin : 0 auto;
				height : 90px;
        width  : 150px;
				display: block;
			}
		#bar-header #bar-username{
			width      : 850px;
			margin-left: 150px;
			text-indent: 30px;
		}
		#bar-header .item-session{
			width      : 200px;
			margin-left: 1000px;
			text-align : center;
		}
		#bar-header #bar-user-guest{
			width      : 850px;
			margin-left: 150px;
		}
		#bar-header #bar-main-title{
			margin-left: 150px;
			margin-top : 50px;
			width      : 1050px;
			position   : absolute;
			padding-top: 5px;
			height     : 20px;
			display    : block;
			text-align : center;
			font-size  : 25px;
			font-weight: normal;
		}

	#main-container #bar-main-container{
		/*height    : 100%;*/
		overflow-y: scroll;
	}

	#main-container #bar-footer{
		/*Alinear texto al centro verticalmente*/
    position:fixed;
		padding-top: 5px;
		height     : 25px;
		bottom     : 0px;
    width: 1200px;
	}
    #main-container #bar-footer a{
      color: #fff;
      font-size:18px;
      font-weight:bold;
    }
  #main-container #login-section{
    width: 500px !important;
    margin: 0 auto;
    background-color: #dfdfdf;
    border               : 2px #ccc solid;
  	-webkit-border-radius: 10px;
  	-moz-border-radius   : 10px;
  	border-radius        : 10px;
  	padding              : 10px;
    -webkit-box-shadow   : 7px 7px 5px 0px rgba(50, 50, 50, 0.60);
  	-moz-box-shadow      : 7px 7px 5px 0px rgba(50, 50, 50, 0.60);
  	box-shadow           : 7px 7px 5px 0px rgba(50, 50, 50, 0.60);
    background-image: url('../images/TexturaGral.png');
    background-repeat: repeat;
    background-size: 130px;
    
  }
    #main-container #login-section .note{
      color: #fff;
    }

/********* COLORES DE LAYOUT ************/
.darkblue-background{
	color           : #f6f6f6;
	background-color: #4f83c5;
}

.red-background{
	color           : #f6f6f6;
	background-color: #bb3346;
}
.red-background:hover{
	cursor: pointer;
}

/********* ESTILOS COMPARTIDOS ************/
.menu-item{
	background-color     : #ddd;
	border               : 2px #ccc solid;
	-webkit-border-radius: 10px;
	-moz-border-radius   : 10px;
	border-radius        : 10px;
	padding              : 10px;
	-webkit-box-shadow   : 7px 7px 5px 0px rgba(50, 50, 50, 0.60);
	-moz-box-shadow      : 7px 7px 5px 0px rgba(50, 50, 50, 0.60);
	box-shadow           : 7px 7px 5px 0px rgba(50, 50, 50, 0.60);
	margin-top           : 25px;
	height               : 160px;
	width                : 90%;
}
	.menu-item h4{
		text-shadow: 1px 1px 2px #777;
		color      : #172461;
	}
	.menu-item:hover{
		cursor     : auto;
		font-weight: bold;
	}
	.menu-item img{
		margin-top: 10px;
		width     : 90px;
		height    : 90px;
	}
	.menu-link:hover{
		text-decoration: none !important;
	}

.menu-item:hover{
	background-color: #ccc;
}

.menu-link{
	width : 100%;
	height: 100%;
}

.fieldset-mini{
	border               : 1px dotted #ccc;
	-webkit-border-radius: 10px;
	-moz-border-radius   : 10px;
	border-radius        : 10px;
	font-size            : 14px;
}
	.fieldset-mini legend{
		font-size    : 16px;
		text-indent  : 15px;
		color        : #e01f00;
		margin-bottom: 0px;
	}

.form-hint{
	width                : 80%;
	text-align           : center;
	border               : 1px dashed #ccc;
	background-color     : #eee;
	-webkit-border-radius: 10px;
	-moz-border-radius   : 10px;
	border-radius        : 10px;
	margin               : 10px auto;
}
.container-center-login{
	width     : 500px;
	text-align: center;
	margin    : 0 auto;
}
.controls .errorMessage{
	display: inline-block;
}

.view-list{
	color                : #172461;
	border               : 1px solid #ccc;
	margin               : 5px 0px;
	padding              : 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius   : 8px;
	border-radius        : 8px;
	background-color: #efefef;
}
	.view-list .detail-menu{
		background-color: #fff;
		font-size       : 14px;
		padding         : 10px 0px;
	}
.input-info{
	border-color    : #3a87ad !important;
	background-color: #d9edf7 !important;
}

.label-big{
	font-size: 14px !important;
	padding  : 10px !important;
}

.hero-fit{
	padding: 20px !important;
}

.font-little{
	font-size: 15px;
}
/******* ESTILOS GENERICOS *******/
h1{
	font-size  : 24px !important;
	color      : #e01f00 !important;
	text-shadow: 1px 1px 2px #777;
}
	h1 small{
		color      : #ccc;
		margin-left: 20px;
		font-size  : 18px !important;
	}

/*Estilo para imagenes de menu de acciones de grids*/
table.items a img{
	width : 35px;
	height: 35px;
}


/*bug de plugin-chosen*/	
.bugged-chosen .chosen-container{
	width: 80% !important;
}


#main-content{
	width: 100%;
}
#main-content *{
	/*border: 1px solid #f00;*/

}
	#main-content #sidebar-datos{
		display: block;
		float: left;
		width: 200px;
		background-color: #e6e6e6;
		/*height: 100%;*/
	}
		#main-content #sidebar-datos .row-fluid{
			margin: 10px 0px;
			font-size: 14px;
		}
		#main-content #sidebar-datos img{
			width: 70%;
			margin-bottom: 10px;
		}

	#main-content #sidebar-content{
		display: block;
		float: left;
		width: 955px;
		padding: 0px 12px;
	}

/*ID para llenar la barra izquierda*/
#cuadro{
	width: 200px;
	height: 400px;
	background-color:  #86AEE2;
border-radius: 3px;
	border: 1px solid #0191C8 }

#cuadrito{
	width: 200px;
	height: 200px;
	background-color: white;
	border-right: 1px solid #0191c8;
	border-radius: 3px;
}
#cuadrito2{
	width: 200px;
	height: 200px;
	background-color: #005B9A;
	border-bottom: 1px solid #0191c8;
	border-top: 1px solid #0191c8;
	border-radius: 3px;
	font-size  : 18px !important;
	color      : #000000 !important;
	text-shadow: 1px 1px 2px #777;
	font-family     : 'Muli', Arial, serif; font-weight: 400; 
}
ul{
	height: 20px;
	overflow:auto;
}

.item-periodo-pago{
	background-color: #D0E3EF;
	border-radius   : 5px;
	padding-top     : 10px;
	margin-top      : 2px;
	padding-bottom  : 1px; 
	color           : #333;
}
.item-periodo-pago:hover
{
	background-color: #6EAACF;
	cursor          : pointer;
}
.img-galeria{
	width: 150px;
	height: 150px;
	
	margin: 2px;

}
.img-galeria:hover{
	width: 155px;
	height: 155px;
}
.item-galeria
{
	width: 170px;
	height: 170px;
	display: inline-block;
}
.galery-container
{
	background-color: #E6E6E6;
	display: inline-block;
	/*border: 1px solid #D31639; */
	border-radius: 3px; 
	padding: 4px;
	width: 100%;
}

h2{
	font-size  : 20px !important;
	color      : #519cc6 !important;
}

.small-font{
	font-size: 13px !important;
}

.btn-pull-top{
  margin-top: -5px;
}