//Estilos del menu expandido de la policia nacional
.block-menu-menu-menu-topbar {

	> .content {
		.menu-father {
			~ .menu {
				position: absolute !important; 
				clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
				clip: rect(1px, 1px, 1px, 1px);
			}
			
			// Global menu 
			~ .content-father {
				background: rgba($c-black, 0.9);
				height: 100%;
				left: 0;
				padding-top: 48px;
				position: fixed;
				top: 0;
				width: 100%;
				z-index: 100;
				
				&.element-invisible {
					padding: 0;
					height: 0;
					width: 0;
					overflow: auto;
				}

				> .menu {
					display: block;
					@include holder;
					@include ib-grid;
					overflow: hidden;


					&:before {
						content: "La Policía Nacional";
						color: $c-white;
						display: block;
						font-size: 35px;
						font-weight: 100;
						margin-bottom: 40px;
						text-align: left;
					}

					.menu {
						margin: 0;
					}

					.menu-item {
						margin: 0;
						position: relative;
						text-align: left;
						width: 100%;
						z-index: 1;
						
						a, a:link, .nolink {
							color: $c-expanded-menu;
							font-weight: 100;
							display: inline-block;
							font-size: 1em;
							line-height: 1.7;
							padding: 2px 0 2px 5%;
							position: relative;
							width: 95%;
							z-index: 1;

							&:before {
								@include size(6px, 10px);
								content: '';
								background: url('../images/sprite.png') no-repeat -211px -19px;
								left: 5px;
								position: absolute;
								top: 11px;
							}
						}

						&.expanded {
							> .nolink {
								color: $c-white;
								display: inline-block;
								width: 100%;
							}
						}

						a, a:link {
							color: $c-expanded-menu;
							font-weight: 100;
						}
					}

					// Items
					> .menu-item {
						margin-right: 2%; 
						padding: 0;
						width: 32%;

						.menu-item {
							a, a:link {
								&:hover {
									background: tint($c-gray, 10);
									color: shade($c-dimgray, 40);
									text-decoration: none;
								}
							}

							&.expanded {
								> a, .nolink {
									cursor: pointer;
									color: $c-white;

									&:before {
										background: $c-white;
										border-radius: 50%;
										height: 5px;
										top: 13px;
										width: 5px;
									}
								}

								.menu-item {

									a, a:link, .nolink {
										padding-left: 10%;
										
										&:before {
											left: 25px;
										}
									}
								}
							} 
						}

						&:before {
							content: none;
						}

						&.last {
							margin-right: 0;
						}

						// Items titles
						> .nolink {
							border-bottom: 1px dashed $c-white;
							color: $c-white;
							display: inline-block;
							font-size: 1.1em;
							margin-bottom: 1em;
							padding: 0 0 0.5em 0!important; 
							width: 100%;

							&:before {
								content: none;
							}
						}

						// Menu Expanded Second level
						&.first  {
							z-index: 1000;

							.expanded {
								width: 102%;

								.menu {
									background: $c-expanded-active;
									height: 100%;
									left: 0;
									margin-left: 1%;
									overflow: scroll;
									position: fixed;
									text-align: left;
									top: 0;
									width: 0px;

									&.element-invisible {
										@include element-invisible;
									}
									a, a:link, .nolink {
										padding: 0 0 0 25px;
										width: auto;

										&:before {
											left: 10px;
											top: 9px;
										}

										&:hover {
											background: none;
											color: $c-white;
										}
									}

									.expanded {
										margin-bottom: 1em;
										width: 90%;

										> .nolink {
											color: $c-white;
											border: none;
											border-bottom: 1px dashed $c-white;
											font-size: 118%;
											margin-bottom: 13px;
											padding: 0 0 10px 0;
											width: 100%;

											&:before {
												content: none;
											}
										}
										> ul {
											display: block;    
											margin: 0;
    										position: relative;
    										overflow: hidden;
    										width: auto!important;

    										li {
    											width: 22%;
    										}
										}
									}
								}

								&:hover {
									width: 102%;
								}

								.nolink {
									border-top: 1px solid transparent;
									border-bottom: 1px solid transparent;
									padding: 5px 0 5px 5%;  

									&:hover {
										background: linear-gradient(to right, transparent ,  $c-expanded-active);
										border-top: 1px solid $c-expanded-borde;
										border-bottom: 1px solid $c-expanded-borde;
										width: 98%;
									} 

									&:before {
										@include size(9px, 8px);
										background: url("../images/sprite.png") no-repeat -210px -35px;
										border-radius: 0;
										top: 14px;
									}
								}

								&.active {
									position: relative;
									width: 102%;
									z-index: 2;

									> .nolink {
										background: $c-expanded-active;
										background: linear-gradient(to right, transparent ,  $c-expanded-active);
										border-right: 1px solid $c-expanded-active;
										border-top: 1px solid $c-expanded-borde;
										border-bottom: 1px solid $c-expanded-borde;
										display: inline-block;
										padding: 5px 0 5px 5%;
										position: relative;
										width: 98%;
										z-index: 2;
									}
								}
							}
						}
					}
				}

				.close {
					@include size(29px);
					background: url('../images/sprite.png') no-repeat -225px -109px;
					cursor: pointer;
					display: inline-block;
					position: absolute;
					right: 1%;
					top: 10px;
					z-index: 1000;

					&:hover {
						background-position: -225px -75px;
					}
				}
			}
		}
	}
}