/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
.pr_frm_div {
	margin-left: 35%;
	width: 400px;
}
#form-button {
	padding: 0; margin: 0; text-align: right;
}
.fg-red {
	color: red;
}
.fg-white {
	color: white;
}
.bg-gray {
	background: #e7e7ec;	
}
.bg-blue {
	background: #3183c9;
}
div.header {
	display:block;
	/*width: 100%;*/
    border: 1px solid #dedede;
	font-size: 12px;
    padding: 1em;    
    /*margin-left: -1.1em;*/
    /*margin-top: -1.2em;*/
    margin-bottom: 0.5em;
    background: #e7e7ec;	
}
#control-panel {
	display: none;
}
#control-panel-detail {
    background-color: #f9f9fa;
    /*border: 1px solid #dedede;*/
    padding-top: 1em;
    padding-bottom: 1em;
}
.div-data {
	float:left;
	margin: 1.0em;
	border: 1px solid #dedede;
	background: white;
	height: 250px;
	max-height: 250px;
	overflow: auto;
}
.div-data-select {
	padding: 0.5em;
}
.div-tables {
	float:left;
	margin: 1.0em;
	border: 1px solid #dedede;
}
.div-graphs {
	float:left;
	margin-right: 0.5em;
	margin-bottom: 1.0em;
}
#map-container { display: none;  }
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(/images/Preloader_2.gif) center no-repeat #fff;
}
#total-footer {
    background-color: #f9f9fa;
    border: 1px solid #dedede;
    padding-top: 1em;
    padding-bottom: 1em;
}
#total-footer-icon {
	display:none;	
}
#total-footer-graph {
    background-color: #f9f9fa;
    border: 1px solid #dedede;
    padding-top: 1em;
    padding-bottom: 1em;
}
#total-footer-data {
    background-color: #f9f9fa;
    border: 1px solid #dedede;
    padding-top: 1em;
    padding-bottom: 1em;
}
body, h1 {
	font-family: 'Roboto', Helvetica, sans-serif;
}
th {
	font-size: 12px;
	background-color: #f2f2f2;
	margin-bottom: 20px;
	padding: 1.0em;
	margin-bottom: 1.0em;
}
td.tdata {
	font-size: 12px;
	padding: 1.0em;
	background-color: white;
	padding: 1.0em;
	border-bottom: 1px solid #E7E7EC;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}
td.tdata1 {
	padding-left: 18px;
	padding-bottom: 4px;
}
td.right {
	text-align: right;
}

.container {
    margin-top: 10px;
    margin-bottom: 10px;
}
#nav {
    margin: 5px 0 0 0;
}

#imageHeader img {
    max-width: 100%;
    height: auto;
}

#imageLogoArearec img {
    margin-bottom: 20px;
    max-width: 175px;
    height: auto;
}

#imageLogoCusa img {
    margin-bottom: 20px;
    max-width: 175px;
    height: auto;
}

#menu {
    background-color: #f9f9fa;
    margin-bottom: 30px;
}

#menu ul {
    margin-top: 20px;
    margin-left: 15px;
}

#menu ul li {
    display: inline;
    margin: 0px 20px 0 0;
    margin-bottom: 130px;
}
 
#menu a {
    text-decoration: none;
}
 
#menu a:hover {
	font-weight:bold;
}
#menu-footer {
    background-color: #f9f9fa;
    border: 1px solid #dedede;
    padding-top:1.0em;
}
#id_username {
	-webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
    border-bottom: none;
    width: 11.0em;
    font-size: 1.2em;
}

#id_password {
	-webkit-border-radius: 0px 0px 10px 10px;
    -moz-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    position:relative;
    top:-1.2em;
    width: 11.0em;
    font-size: 1.2em;
}

#welcome {
    margin-bottom: 20px;
}

.feature img {
    margin-bottom: 15px;
    max-width: 100%;
    height: auto;
}

#form {
    text-align: center;
}

#footer {
    margin-top: 20px;
}

#user_info {
	font-size: 12px;
	background-color: #E7E7EC;
	margin-bottom: 20px;
}

.menu_option {
	margin-left: 15px;
}

.menu_option a {
	text-decoration:none;
	color:white;
}

#option_one {
	font-size: 16px;
	color: white;
	background-color: #f87665;
	height: 50px;
	padding-top: 25px;
	margin-bottom: 3px;
	-webkit-border-radius: 0px 40px 40px 0px;
    -moz-border-radius: 0px 40px 40px 0px;
    border-radius: 0px 40px 40px 0px;
}

#option_two {
	font-size: 16px;
	color: white;
	background-color: #f87665;
	height: 50px;
	padding-top: 25px;
	margin-bottom: 3px;
	-webkit-border-radius: 0px 40px 40px 0px;
    -moz-border-radius: 0px 40px 40px 0px;
    border-radius: 0px 40px 40px 0px;
}

#option_three {
	font-size: 16px;
	color: white;
	background-color: #f87665;
	height: 50px;
	padding-top: 25px;
	margin-bottom: 3px;
	-webkit-border-radius: 0px 40px 40px 0px;
    -moz-border-radius: 0px 40px 40px 0px;
    border-radius: 0px 40px 40px 0px;
}

.comboList {
	border: 1px solid #f2f2f2;
	padding: 10px;
	outline: none;
	font: 1.2em 'Roboto', Helvetica, sans-serif;
	font-weight: 300;
	color: #9a9a9a;
	margin: 0;
	display: block;
	margin-bottom: 20px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;	
	background: #f2f2f2 url("/images/down.png") no-repeat scroll right center;
}

.table_list_gray {
	font-size: 11px;
	background-color: #f9f9fa; /* #f9f9fa */
	height: 145px;
	margin: 1px;
	opacity: 0.85;
	padding-left: 15px;
	border: 1px solid #dedede;
}

.table_list_gray_report {
	font-size: 11px;
	background-color: #f9f9fa; /* #f9f9fa */
	margin: 1px;
	opacity: 0.85;
	padding-left: 15px;
	border: 1px solid #dedede;
	cursor: pointer;
}

.table_list_red {
	color: white;
	font-size: 11px;
	background-color: #f87665; /* #f9f9fa */
	height: 145px;
	margin: 1px;
	opacity: 0.85;
	padding-left: 15px;
	border: 1px solid #ff7665;
}

/* CSS PARA MAPAS */
#chart_div {
	min-height: 200px;
	width: 100%;
}
.map {
	min-height: 500px;
	width: 100%;
	float:left;
}
.pano {
	min-height: 800px;
	width: 0%; 
	float:left;	
}
.map-selected {
	min-height: 800px;
	width: 50%;
	float:left;
}
.pano-selected {
	min-height: 800px;
	width: 50%; 
	float:left;	
}
span.infowindow {
	background-color:#f9f9fa;
	display:block;
	width:97%;
	border:1px solid #dedede;
	padding:2px;
	margin-top: 2px;
}
span.icon {
	position:relative;
	top: -1.0em;
}
a.link-button {
	margin-left:1.0em;
	text-decoration: none;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 1.0em;
	padding-right: 1.0em;
	background-color: #3183C9;
	color: white;
	cursor: pointer;
}
#id_nest_birth_date {
	margin-left: 10%;
}
.marginleft10 {
	margin-left: 10%;
}
#id_surname{
	margin-left: 10%;
}
#id_mobile_phone{
	margin-left: 10%;
}

#id_repemail {
	margin-left: 10%;
}
#id_land_phone {
	margin-left: 10%;
}
#input-address {
	padding: 0; margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 5%;
}
#input-province {
	padding: 0; margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 5%;
}
#id_pet_birth_date {
	margin-left: 10%;
}
.pf-table {
	width: 90%;
	margin-bottom: 5.0em;
	border-collapse: collapse;
	height: 100px;
}
.pf-table-text-small {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 300;
	font-size: 1.4em;
	line-height: 1.2em;
}
.pf-table-text-xsmall {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 300;
	font-size: 1.1em;
	line-height: 110px;
	padding-left: 5px;
}
.pf-table-text {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 600;
	font-size: 3.0em;
	line-height: 1.2em;
	text-align: right;
	padding-right: 0.5em;
}
.pf-table-td-title {
	width: 37%;
	height:70px;line-height: 60px;line-height: 60px;padding-left: 1.0em;	
}
.pf-table-td {
	width: 20%;
	border-left:1px solid #ddd;
}
.table-header {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 300;
	font-size: 1.0em;
	line-height: 1.2em;
	margin-left: 1.0em;
}
.pf-text {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 300;
	font-size: 1.8em;
	line-height: 1.2em;
	margin-left: 1.0em;
	width: 40%;
}
.pf-text-small {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 300;
	font-size: 1.4em;
	line-height: 1.2em;
	margin-left: 1.0em;
}
.pf-number-small {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 600;
	font-size: 3.0em;
}
.pf-number {
	display: block;
	float:left;
	color: #4d4d4d;
	font-weight: 600;
	font-size: 3.8em;
	width: 40%;
	text-align: right;
}
.table-container {
	height: 300px;
	max-height: 300px;
	overflow: auto;
}
/* TABLA DE KITS REQUESTS */
.pf-krtable-td {
	width: 16%;
	max-width: 16%;
	border:1px solid #white;
	background-color: #f2f2f2;
	display: block;
	float:left;
	color: #acacac;
	font-weight: 300;
	font-size: 1.0em;
	line-height: 30px;
	height:60px;
	padding: 2px;
	margin: 1px;
	text-align:center;	
}
.data-krtable-td {
	width: 7%;
	max-width: 7%;
	border:1px solid #white;
	background-color: #f2f2f2;
	display: block;
	float:left;
	color: #acacac;
	font-weight: 300;
	font-size: 1.0em;
	padding: 2px;
	margin: 1px;
	text-align:center;
	height: 40px;	
}
.data-krtable-tt {
	width: 7%;
	max-width: 7%;
	border:1px solid #000000;
	background-color: #b3b3b3;
	display: block;
	float:left;
	color: #ffffff;
	font-weight: 300;
	font-size: 1.0em;
	padding: 2px;
	margin: 1px;
	text-align:center;
	height: 40px;	
}
.data-table {
	margin-bottom: 5.0em;
	border-collapse: collapse;
	width: 100%;
}
.title-gray {
	color: #9a9a9a;
	font-weight: 300;
	font-size: 1.3em;
}
.title-red {
	color: #e31d32;
	font-weight: 500;
	font-size: 1.3em;
}

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.pr_frm_div {
			margin-left: 0;
			width: 400px;
		}
		.pf-table-td-title {
			width: 35%;
		}
		.pf-table-text-small {
			display: block;
			float:left;
			color: #4d4d4d;
			font-weight: 300;
			font-size: 1.0em;
			line-height: 1.2em;
			margin-left: 1.0em;
		}		
		.pf-table-text-xsmall {
			display: block;
			float:left;
			color: #4d4d4d;
			font-weight: 300;
			font-size: 1.0em;
			line-height: 110px;
		}		
		.pf-table-text {
			display: block;
			float:left;
			color: #4d4d4d;
			font-weight: 600;
			font-size: 2.7em;
			line-height: 1.2em;
			text-align: right;
			padding-right: 0.5em;
		}				
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		.pr_frm_div {
			margin-left: 0;
			width: 400px;
		}	
		#map {
			min-height: 300px;
			height: 300px;
			width: 100%;
		}
		#pano {
			min-height: 300px;
			height: 300px;
			width: 100%;
		}
		.pf-table-td-title {
			width: 35%;
		}
		.pf-table-text-small {
			display: block;
			float:left;
			color: #4d4d4d;
			font-weight: 300;
			font-size: 1.0em;
			line-height: 1.2em;			
		}
		.pf-table-text-xsmall {
			display: block;
			float:left;
			color: #4d4d4d;
			font-weight: 300;
			font-size: 1.0em;
			line-height: 110px;
		}	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.pr_frm_div {
			margin-left: 0;
			width: 80%;
		}	
		.title-gray {
			color: #9a9a9a;
			font-weight: 300;
			font-size: 0.9em;
		}	
		.title-red {
			color: #e31d32;
			font-weight: 500;
			font-size: 0.9em;
		}		
		#map {
			min-height: 300px;
			height: 300px;
			width: 100%;
		}
		#pano {
			min-height: 300px;
			height: 300px;
			width: 100%;
		}		
		#form-button {
			padding: 0; margin: 0;
			text-align: left;
			padding: 1.0em;
		}		
		#id_nest_birth_date {
			margin-left: 0;
		}
		.marginleft10 {
			margin-left: 0;
		}		
		#calendar-button {
			right: 44px;
		}
		#calendar-div {
			width: 90%;
		}	
		#id_surname{
			margin-left: 0;
		}
		#id_repemail {
			margin-left: 0;
		}
		#id_land_phone {
			margin-left: 0;
		}
		#input-address {
			padding: 0; margin: 0;
		}
		#input-province {
			padding: 0; margin: 0;
		}
		#id_pet_birth_date {
			margin-left: 0;
		}	
		.pf-krtable-td {
			width: 49%;
			max-width: 100%;
			border:1px solid #f2f2f2;
			background-color: white;
			display: block;
			float:left;
			color: #acacac;
			font-weight: 300;
			font-size: 1.0em;
			line-height: 30px;
			height:40px;
			padding: 2px;
			margin: 1px;
			text-align:center;	
		}			
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.pr_frm_div {
			margin-left: 0;
			width: 400px;
		}
		.no-mobile {
			display: none;
		}	
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.pr_frm_div {
			margin-left: 0;
			width: 400px;
		}	
		.title-gray {
			color: #9a9a9a;
			font-weight: 300;
			font-size: 0.9em;
		}
		.title-red {
			color: #e31d32;
			font-weight: 500;
			font-size: 0.9em;
		}		
		.no-mobile {
			display: none;
		}
		#profile-table {
			display: none;
		}
		.pf-text {
		    color: #4d4d4d;
		    display: block;
		    float: left;
		    font-size: 1.0em;
		    font-weight: 300;
		    line-height: 1.2em;
		    margin-left: 0.5em;
		    width: 40%;
		}		
		.pf-number {
		    color: #4d4d4d;
		    display: block;
		    float: left;
		    font-size: 1.8em;
		    font-weight: 600;
		    text-align: right;
		    width: 40%;
		}		
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/