/**
 *	CSS base para la aplicacion
 *	@author Diego Calle
 */

@media print {
	
	#header {
		display: none;
	}
	
	#footer {
		display: none;
	}
	
	.left_box, .no_print {
		display: none !important;
	}
	
	.large_box, .medium_box {
		background: none !important;
		width: 1024px !important;
	}
	
		.large_box h2, .medium_box h2 {
			width: 1024px !important;
		}
		
		.form_group {
			width: 1024px !important;
		}
	
	body {
		border: none !important;
	}
	
	.only_print {
		display: block !important;
	}
	
	#msg {
		display: none;
	}
	
}

@font-face {
    font-family: 'Source';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'Source', Arial, Verdana;
	margin: 0;
	padding: 0;
	border-top: solid 8px #004D03;
	color: #575757;
}

	a {
		text-decoration: none;
		color: #3C3C3B;
	}
	
	a img {
		border: none;
	}

	ul, li, h1, h2, h3 {
		margin: 0;
		padding: 0;
	}
	
	ul {
		list-style: none;
	}
	
	input, textarea {
		font-family: 'Source';
		border: solid 1px #C5C5C5;
		padding: 4px;
		margin: 0;
		vertical-align: middle;
	}
	
	select {
		font-family: 'Source';
		border: solid 1px #C5C5C5;
		padding: 4px 0 4px 0;
		margin: 0;
	}
	
table {
	border-collapse: collapse;
}

.spaced {
	padding: 20px 0;
}

.only_print {
	display: none;
}

#header {
	width: 1024px;
	height: 40px;
	background: #F4F4F4;
	margin: 10px auto;
}

	#header_usuario {
		display: inline-block;
		vertical-align: middle;
		width: 250px;
		overflow: hidden;
		font-size: 16px;
		color: #575757;
		padding: 4px 0;
		text-align: center;
	}
	
		#header_usuario img {
			height: 20px;
		}
	
	#header_menu {
		display: inline-block;
		vertical-align: middle;
		width: 720px;
		font-size: 0;
	}
	
		#header_menu ul li {
			position: relative;
			display: inline-block;
			vertical-align: top;
		}
		
		#header_menu ul li:hover > a {
			background: #145CA6;
			color: #FFFFFF;
		}
		
		#header_menu ul li:hover ul {
			display: block;
		}
		
			#header_menu ul li a {
				display: block;
				padding: 10px 10px;
				color: #575757;
				font-size: 14px;
			}
		
			#header_menu ul li ul {
				position: absolute;
				top: 100%;
				left: 0;
				background: #F4F4F4;
				z-index: 100;
				width: 250px;
				display: none;
			}
		
			#header_menu ul li ul li {
				display: block;
				border-left: none;
			}
	
	#header_setting {
		display: inline-block;
		vertical-align: middle;
		width: 4%;
		text-align: right;
	}
	
#main_wrapper {
	width: 1024px;
	margin: 10px auto;
}

	#main_wrapper .titulo {
		font-size: 21px;
		color: #575757;
		text-align: right;
		padding: 5px 30px 5px 0;
		font-weight: 400;
	}

.ajax_results {
	font-size: 14px;
	margin: 10px 0;
}

span.hint {
	display: inline-block;
	vertical-align: middle;
	font-size: 11px;
	color: #575757;
}

.off {
	display: none;
}

.centered {
	text-align: center;
}

.align_rigth {
	text-align: right;
}

.colorpicker {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	background: url('images/select.png') no-repeat;
}

table.lotes {
	width: 100%;
}

/** CSS para formularios generales **/
	
	.form_group {
		width: 750px;
		margin: 0 auto 10px auto;
	}
	
	.form_group label {
		display: inline-block;
		width: 170px;
		text-align: right;
		margin-right: 20px;
	}
	
	.form_buttons {
		text-align: center;
		padding-top: 10px;
	}
	
	.form_buttons input, .form_buttons a {
		min-width: 150px;
	}
	
	.form_buttons a {
		display: inline-block;
	}

/**
 * 	Diferentes estilos de botones
 */

.btn_settings {
	display: block;
	width: 21px;
	height: 20px;
	background: url('../img/tmpl/icon_settings.png') no-repeat;
}

.btn_calendar {
	background: url('../img/tmpl/icon_white_calendar.png') no-repeat center #145CA6;
	width: 30px;
	height: 26px;
}

.btn_green {
	background: #209F44;
	border: none;
	color: #FFFFFF;
	padding: 5px 10px;
}

	.btn_green:hover {
		background: #145CA6;
	}
	
.btn_red {
	background: #BC1622;
	border: none;
	color: #FFFFFF;
	padding: 5px 10px;
}

	.btn_red:hover {
		background: #E74E1B;
	}
	
.btn_blue {
	background: #145CA6;
	border: none;
	color: #FFFFFF;
	padding: 5px 10px;
}

	.btn_blue:hover {
		background: #209F44;
	}
	
a.btn_blue, a.btn_green, a.btn_red {
	font-size: 13px;
}

.btn_tr {
	cursor: pointer;
}

/**
 * Add ons para inputs
 */

.add_on {
	display: inline-block;
	vertical-align: middle;
	border-right: solid 1px #C5C5C5;
	border-top: solid 1px #C5C5C5;
	border-bottom: solid 1px #C5C5C5;
	width: 24px;
	height: 24px;
}

.add_on.left {
	border-right: none;
	border-left: solid 1px #C5C5C5;
}

	.add_on.icon_usuario {
		background: url('../img/tmpl/icon_white_usuario.png') no-repeat center #209F44;
	}
	
	.add_on.icon_key {
		background: url('../img/tmpl/icon_white_key.png') no-repeat center #209F44;
	}

/**
 * 	Cajas de contenidos
 */

.left_box {
	display: inline-block;
	vertical-align: top;
	width: 200px;
}

.right_box {
	display: inline-block;
	vertical-align: top;
	width: 815px;
}

.small_box {
	width: 200px;
	padding-top: 8px;
	background: #F4F4F4;
	margin-left: 10px;
	margin-bottom: 10px;
}

	.small_box h2 {
		width: 190px;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 300;
		padding: 3px 0 3px 20px;
		margin-bottom: 15px;
		
		-moz-transform: translateX(-10px);
		-webkit-transform: translateX(-10px);
		-o-transform: translateX(-10px);
		-ms-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	
	.small_box.green h2 {
		background: #004D03;
	}
	
	.small_box.blue h2 {
		background: #145CA6;
	}
	
		.small_box .content {
			padding: 0 15px 15px 15px;
		}
		
		.small_box .menu li {
			padding: 3px 0;
		}
		
		.small_box .menu a {
			color: #575757;
		}
		
		.small_box .menu a:hover {
			color: #145CA6;
		}
		
.medium_box {
	width: 795px;
	background: #F4F4F4;
	padding-top: 8px;
	margin-left: 15px;
	margin-bottom: 10px;
}

	.medium_box h2 {
		width: 775px;
		background: #004D03;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 300;
		padding: 3px 0 3px 20px;
		margin-bottom: 15px;
	}
	
	.medium_box h3 {
		font-size: 16px;
		margin-bottom: 15px;
		color: #000000;
	}
	
	.medium_box .content {
		padding: 0 15px 15px 15px;
	}
	
.innerbox {
	font-size: 14px;
	margin-bottom: 15px;
}	

.large_box {
	width: 1024px;
	background: #F4F4F4;
	padding-top: 8px;
	margin-bottom: 20px;
}

	.large_box h2 {
		width: 1004px;
		background: #004D03;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 300;
		padding: 3px 0 3px 20px;
		margin-bottom: 15px;
	}
	
	.large_box .content {
		padding: 0 15px 15px 15px;
	}

.small_box.remision {
	text-align: center;
}
	
	.small_box.remision input[type="submit"] {
		width: 130px;
		display: inline-block;
	}
	
	.small_box.remision input[type="text"] {
		width: 120px;
		margin-bottom: 5px;
	}

/**
 * 	Modulos para vinculos
 */
.menu_acciones li {
	margin-bottom: 10px;
}

	.menu_acciones a {
		display: block;
		width: 87%;
		color: #FFFFFF;
		background: #209F44;
		padding: 5px 10px;
	}
	
		.menu_acciones a:hover {
			background: #145CA6;
		}
		
	.menu_acciones a.red {
		background: #BC1622;
	}
	
		.menu_acciones a:hover.red {
			background: #E74E1B;
		}

/**
 * 	Notaciones de inventario (ubicacion)
 */

.ub_small_notation {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	padding: 5px;
	cursor: pointer;
}

	.ub_small_notation .ub_termo, .ub_small_notation .ub_canastilla, .ub_small_notation .ub_piso {
		display: inline-block;
		vertical-align: middle;
		width: 28px;
		height: 16px;
		font-size: 14px;
		text-align: center;
		color: #FFFFFF;
	}
	
		.ub_small_notation .ub_termo {
			background: #1D70B6;
		}
		
		.ub_small_notation .ub_canastilla {
			background: #209F44;
		}
		
		.ub_small_notation .ub_piso {
			background: #F7B033;
		}
		
	.ub_small_notation .ub_color {
		display: inline-block;
		vertical-align: middle;
		width: 16px;
		height: 16px;
		font-size: 14px;
		text-align: center;
		color: #FFFFFF;
	}
	
	.ub_small_notation .ub_disponibles {
		display: inline-block;
		vertical-align: middle;
		width: 32px;
		height: 16px;
		font-size: 14px;
		text-align: center;
		background: #AAAAAA;
		color: #000000;
	}
	
	.ub_small_notation .ub_cantidad {
		display: inline-block;
		vertical-align: middle;
		width: 40px;
		height: 16px;
		font-size: 14px;
		text-align: center;
		color: #000000;
	}

.color_preview {
	display: inline-block;
	vertical-align: middle;
	width: 15px;
	height: 15px;
}

/**
 * 	CSS para contener la informacion del animal
 */

#animal_selector .info_animal {
	display: inline-block;
	vertical-align: top;
	width: 525px;
}

	#animal_selector .info_animal label {
		display: inline-block;
		vertical-align: top;
		width: 100px;
		text-align: right;
		padding-right: 15px;
	}
	
	#animal_selector .group {
		margin-bottom: 10px;
	}
	
	#animal_selector .imagen_animal {
		display: inline-block;
		vertical-align: top;
		width: 218px;
		margin-left: 10px;
	}
	
	#animal_selector .imagen_animal .imagen_wrapper {
		text-align: center;
	}
	
		#animal_selector .imagen_animal .imagen_wrapper img {
			max-width: 200px;
		}
		
/** CSS selector de cliente **/
	
	#cliente_selector select {
		min-width: 350px;
	}
	
	#info_cliente {
		position: relative;
		margin-bottom: 20px;
	}
	
		#info_cliente #imagen_cliente {
			display: inline-block;
			vertical-align: middle;
			width: 20%;
			margin-left: 25px;
			text-align: center;
		}
		
		#info_cliente #imagen_cliente img {
			max-width: 80%;
		}
		
		#info_cliente #datos_cliente {
			display: inline-block;
			vertical-align: middle;
			margin-left: 25px;
			width: 65%;
		}
		
			#info_cliente #datos_cliente #nombre_cliente {
				font-size: 22px;
				font-weight: bold;
			}
			
	
	#info_animal {
		position: relative;
		margin-bottom: 20px;
	}
	
		#info_animal #imagen_animal {
			display: inline-block;
			vertical-align: middle;
			width: 20%;
			margin-left: 25px;
			text-align: center;
		}
		
		#info_animal #imagen_animal img {
			max-width: 80%;
		}
		
		#info_animal #datos_animal {
			display: inline-block;
			vertical-align: middle;
			margin-left: 25px;
			width: 65%;
		}
		
			#info_animal #datos_animal #nombre_animal {
				font-size: 22px;
				font-weight: bold;
			}

/**
 * 	CSS para inventarios
 */
.inv_general .inv_termo {
	height: 120px;
} 

	.inv_general .inv_termo, .inv_detalle .inv_canastilla {
		margin: 5px;
	}
	
	.inv_detalle .inv_canastilla {
		margin: 5px;
	}

.inv_termo {
	display: inline-block;
	vertical-align: top;
	width: 108px;
	background: #1D70B6;
	color: #FFFFFF;
}

.inv_canastilla {
	display: inline-block;
	vertical-align: top;
	width: 108px;
	background: #209F44;
	color: #FFFFFF;
}
	
	.inv_titulo {
		text-align: center;
		margin: 0 4px;
		border-bottom: solid 1px #FFFFFF;
	}
	
	.inv_texto, .inv_idtermo, .inv_id {
		display: inline-block;
		vertical-align: middle;
	}
	
	.inv_titulo {
		font-size: 16px;
	}
	
	.inv_idtermo, .inv_id {
		font-size: 31px;
	}
	
	.inv_porcentaje {
		font-size: 12px;
		padding: 4px 0;
		text-align: center;
	}
	
	.inv_capacidad {
		font-size: 12px;
	}
	
	.inv_termo .inv_item {
		padding: 4px 0;
		text-align: center;
		font-size: 13px;
	}
	
	.inv_canastilla .inv_item {
		text-align: center;
		font-size: 13px;
	}
	
	.inv_nro {
		font-weight: bold;
	}
	
.inv_lotes {
	font-size: 14px;
}

/**
 * 	CSS para resultados de informes
 */
.informe {
	font-size: 14px;
	color: #000000;
}

	.informe a:hover {
		color: #004D03;
	}

.informe table {
	border-collapse: collapse;
	width: 100%;
}

	.informe table thead tr {
		background: #003F7F;
		color: #FFFFFF;
	}
	
		.informe table thead tr th {
			padding: 4px 7px;
		}
	
	.informe table tbody td {
		padding: 5px 7px;
	}
	
	.informe tbody tr:nth-child(even) {
		background-color: #AAD4FF;
	}

.imagen_animal {
	width: 170px;
	display: inline-block;
	vertical-align: top;
}

	.imagen_animal .imagen_wrapper {
		width: 100%;
	}
	
	.imagen_animal .imagen_wrapper img {
		width: 170px;
	}

/**
 * 	CSS para mensajes en pantalla
 */

#msg {
	position: fixed;
	bottom: 15px;
	left: 15px;
	width: 420px;
	min-height: 60px;
	color: #FFFFFF;
	padding-left: 100px;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 20px;
	text-align: center;
}

	.msg_info {
		background: url('../img/tmpl/icon_msg_ok.png') 23px 20px no-repeat #209F44;
	}
	
	.msg_error {
		background: url('../img/tmpl/icon_msg_error.png') 23px 20px no-repeat #BC1622;
	}
	
	.msg_warn {
		background: url('../img/tmpl/icon_msg_warning.png') 23px 20px no-repeat #F7B033;
	}

/**
 * 	Tamaños de elementos definidos
 */

.s_nombre {
	width: 390px;
}

.s_identificacion {
	width: 170px;
}

.s_ciudad {
	width: 160px;
}

.s_direccion {
	width: 260px;
}

.s_small_number {
	width: 52px;
}

.s_email {
	width: 320px;
}

.s_big_descripcion {
	width: 390px;
	height: 80px;
}

.s_colorhex {
	width: 50px;
}

/** TABLE CSS **/

#result_ubicacion {
	margin: 15px 0;
	text-align: center;
}

.results {
	width: 100%;
}

	.results table {
		border-collapse: collapse;
	}
	
	.results thead tr {
		background: #003f7f;
	}
	
		.results thead th {
			color: #FFFFFF;
			padding: 5px;
		}
	
	.results tbody td {
		padding: 5px;
	}
	
	.results tbody tr:hover {
		cursor: pointer;
		background: #aad4ff;
		color: #000000;
	}