//Estilos pagina de directorio (Url: /directorio)
.page-directorio {
	#preface {
		#preface-third {
			#page-title {
				@include title-block(tint($c-dimgray, 10), 234%);
				font-weight: 300;
	    		margin: 0 auto 28px auto;
	    		max-width: 660px;
				text-align: center;

	    		&:after {
	    			margin: 15px auto 0 auto;
	    			width: 60px;
	    		}
	    	}
		}
	}

	.external-links {
		border: 1px solid shade($c-h-gray, 10);
		margin-bottom: 20px;
		padding: 1%;
		
		.sub-title {
			color: $c-b-gray;
			font-weight: 100;
			margin-bottom: 8px;
			text-transform: uppercase;
		}

		.menu {
			margin: 0;

			.menu-item {
				@include inline-block(top);
				margin-right: 3%;

				&:last-child {
					margin-right: 0;
				}

				a, a:link {
					color: $c-brand-green-dark;
					font-size: 107%;
					font-weight: 100;
					text-decoration: none;
				}
			}
		}

	} 

	.filters {
		@include input-radio(tint($c-dimgray,10));
		border: 1px solid shade($c-h-gray, 10);

		div > fieldset
		{ 
		    display: block;
		    margin: 0;
		    padding: 0;
		    border: 0;
		}

		.sub-title {
			color: $c-b-gray;
			font-weight: 100;
			margin-bottom: 8px;
			text-transform: uppercase;
			text-align: center;
		}

		.general-filters {
			@include ib-grid;
			margin: 0 auto;
			padding: 1%;
			width: 70%;
			> fieldset {
				font-size: 0;
				* {
					font-size: 16px;
				}
			}
			.filter {
				@include inline-block(top);
				margin-right: 2%;
				position: relative;
				width: 32%;
				
				.select-wrapper {
					background: $c-white url("../images/arrow_select.png") no-repeat 100%  center;
					border: 1px solid shade($c-h-gray, 10);
					border-radius: 8px;
					margin-top: 10px;
					position: relative;
					
					select {
   					    -webkit-appearance: none;
                        -moz-appearance: none;
						background: none;
						border: none;
						box-shadow: none;
						padding: 3px 45px 3px 8px;
						width: 100%;
					}

				}

				&.disabled {
					.select-wrapper {
						background: $c-lightgray url("../images/arrow_select.png") no-repeat right center;
					
						.unblocker {
							height: 100%;
							top: 0;
							position: absolute;
							width: 100%;
						}
					}
				}

				
				input[type="radio"] {
					~ label {
						color: tint($c-b-gray, 30);
						font-weight: bold;
					}

					&:checked {
						~ label {
							color: tint($c-dimgray,10);
						}
					}
				}
			}

			.custom-search {
				margin-right: 0;

				input[type="text"] {
					margin-top: 10px;
					padding: 5px 4px;
				}

				&.disabled {
					.unblocker {
						bottom: 0;
						height: 32px;
						position: absolute;	
						width: 100%;
					}
				}
			}
		}

		.inplace-filters {
			background-color: $c-t-gray;
			display: block;
			height: 28px;
			margin: 11px auto 0;
			padding: 14px 1% 17px;
			width: 68%;

			.inplace-filter {
				float: left;
				margin-right: 3%;
				
				&.select {
					width: 100%;
					label {
						@include inline-block(middle);
						color: $c-dimgray;
						font-weight: bold;
						margin-right: 2%;
						padding: 0;
					}

					select {
						@include inline-block(middle);
   					    -webkit-appearance: none;
                        -moz-appearance: none;
						border-radius: 10px;
						background: $c-white url("../images/arrow_select.png") no-repeat 100%  center;
						height: 33px;
						box-shadow: none;
						padding: 0 49px 0 10px;
						width: 70%;
					}
				}
			}
		}

		.actions {
			margin-top: 15px;
			padding: 1%;
			text-align: center;

			button{
				@include button();
				padding: 8px 30px;
			}	
		}

		&.showing-inplacefilters {
			.filter {
				&:after {
    				border-left: 15px solid transparent;
    				border-right: 15px solid transparent;
    				border-bottom: 15px solid $c-t-gray;
        			bottom: -25px;
					content: '';	
    				height: 0;
    				left: 50%;
    				margin-left: -20px;
    				position: absolute;
    				width: 0;
				}

				&.disabled {
					&:after {
						content: none;
					}
				}
			}
		}
	}

	.results {
		.search_term {
			color: $c-dimgray;
			font-size: 96%;
			margin: 10px 0;

			.label {
				display: inline-block;
				font-weight: bold;
			}

			.value {
				display: inline-block;
				font-weight: 100;
			}
		}

		.content {
			.row {
				border: 1px solid shade($c-brand-whitesmoke, 10);
				box-shadow: 1px 0px 6px shade($c-brand-whitesmoke, 20);
				margin:  0 0 20px 0;
				padding: 2%;
				width: 96%;
				
				.item {
					color: $c-dimgray;
					font-weight: 100;
					margin-bottom: 0.8em;

					.label {
						text-transform: uppercase;
					}
				}
				
				.basic-information{
					float: left;
					width: 35%;
				}

				.contact-information {
					float: right;
					position: relative;
					width: 60%;

					&:before {
						position: absolute;
						top: 2px;
						left: -45px;
						content: '';
						height: 100%;
						width: 1px;
						background-color: $c-gray;
					}	
				}
			}
		}	
	}
}