@charset "UTF-8";
/* line 5, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
/* line 22, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1;
}
body {
font-family: 'Lato-Regular' !important;
}
/* line 24, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none;
}
/* line 26, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* line 28, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
/* line 30, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none;
}
/* line 103, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
/* line 32, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
border: none;
}
/* line 116, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/* line 344, spr/*.png */
.spr-sprite, .e1:after, .e2:after, .e3:after, .e4:after, .e5:after, .e6:after, .e7:after, .e8:after, .mw-title > span:after, .quick-links-header .logout:after, .qlh-item.qlh-item-myfolder:after, a.bc-item.bc-item-home > span, a.bc-item.bc-item-home:after, .footer-menu .collapse-item-active .fm-title:after, .fm-title:after, .btnMenuVerticalAumentarFuente, .btnMenuVerticalReducirFuente, .btnMenuVerticalSeguir:before, .tramite-detalles .panel-header-tramites a:after, .tramite-detalles .panel-header-tramites a.collapsed:after, .tramite-detalles .pdf-list a:after, .tramite-detalles .excel-list a:after, .tramite-detalles .doc-list a:after, .info-title.hours:after, .al-minuto .items:hover .content-box.move-across:after, .al-minuto .content-box.move-across:after, .mc-motivos:after, .ico-pdf:after, .ico-doc:after, .ico-docx:after, .ico-xls:after, .ico-xlsx:after, .ico-ppt:after, .ico-pptx:after, .ico-cert:before, .actividades-info .gratuita:after, .actividades-info .adaptado:after, .actividades-info .familia:after, .actividades-info .mayores:after, .actividades-info .ninos:after, .cal-outlook:after, .cal-google:after, .news-item.news-item-moreinfo:after {
background-image: url('img/spr-s9d83c75c16.png');
background-repeat: no-repeat;
}
/* FONT FAMILY */
/* ROUTE */
/**
* @mixin triangle_irregular
* Triángulo con ancho, alto, dirección a donde mira, posición y color.
* width: ancho
* height: alto
* direction: dirección a donde mira el triángulo
* (top, top-right, right, bottom-right, bottom, bottom-left, left, top-left)
* position: donde colocar el triángulo y lo centra (right, bottom, bottom-part-right, bottom-part-left)
* bottom-part-right: colocara el triángulo en bottom pero centrado respecto a la parte de la derecha del triángulo
* bottom-part-left: colocara el triángulo en bottom pero centrado respecto a la parte de la izquierda del triángulo
* color: color del triangulo
**/
/* line 97, ../../../app/sass/partials/_fonts.scss */
html, body {
font-size: 100%;
font-family: "Lato-regular";
}
/* line 101, ../../../app/sass/partials/_fonts.scss */
strong {
font-weight: bold;
}
@font-face {
font-family: "Lato-Regular";
src: url('fonts/Lato-Regular.eot');
src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Lato-Regular.woff') format('woff'), url('fonts/Lato-Regular.ttf') format('truetype'), url('fonts/Lato-Regular.svg#Lato-Regular') format('svg');
}
@font-face {
font-family: "Lato-Bold";
src: url('fonts/Lato-Bold.eot');
src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Lato-Bold.woff') format('woff'), url('fonts/Lato-Bold.ttf') format('truetype'), url('fonts/Lato-Bold.svg#Lato-Bold') format('svg');
}
@font-face {
font-family: "AytMadIcons";
src: url('fonts/ayuntamiento-madrid.eot');
src: url('fonts/ayuntamiento-madrid.eot?#iefix') format('embedded-opentype'), url('fonts/ayuntamiento-madrid.woff') format('woff'), url('fonts/ayuntamiento-madrid.ttf') format('truetype'), url('fonts/ayuntamiento-madrid.svg#AytMadIcons') format('svg');
}
/*
Base
Styleguide 1
*/
/*
Fuentes
Listado de fuentes genéricas utilizadas en madrid.es.
Lato-regular - $font-family-Lato-regular
Lato-regular-Light - $font-family-Lato-regular-light
Lato-bold - $font-family-Lato-bold
Lato-regular-Italic - $font-family-Lato-regular-italic
Markup:
Lato-regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%^&*()_+-=,./?<>[]\{}|~`
1234567890
Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%^&*()_+-=,./?<>[]\{}|~`
1234567890
Italic
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%^&*()_+-=,./?<>[]\{}|~`
1234567890
Styleguide 1.1
*/
/*
Iconos
Los iconos están añadidos dentro de la fuente usada en esta web.
Cómo funciona:
- Se usa el pseudo-element css :before para asociar el icono al Tag que se desee.
- Con el atributo content, se especifica que icono se usa.
La siguiente lista de iconos sirve para saber las clases o content asociados a dichos iconos y para ver todos los iconos de forma rápida.
Markup:
Styleguide 1.2
*/
/*
Rejilla
La estructura de la web del Ayuntamiento está apoyada en la librería Bootstrap ya que facilita la construcción de un modelo web responsive.
Esta librería se basa en el ancho de la pantalla del dispositivo en el cual se va a reproducir la web:
- Según el ancho del dispositivo, se usan los prefijos de la clase .col-xs- , .col-sm-, .col-md- y .col-lg-
- Y se le añade a la clase el número de columnas que se quiere que ocupe el elemento, teniendo en cuenta que el máximo es 12 y el mínimo 1. Sin olvidar que la suma de cada nivel de elementos debe ser 12.
|
Dispositivos móviles
(<768px)
|
Tablets
(≥768px)
|
Pantallas de Escritorio
Normales (≥992px)
|
Grandes Pantallas de
Escritorio (≥1200px)
|
| Width |
Auto |
750px |
970px |
1170px |
| Prefijo de la clase |
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # de columnas |
12 |
Esto es un ejemplo de la estructura de la web:
- Header, Body, Footer 12 columnas
- Cuando se ocupe el ancho total, se usa la clase bg-fluid#, # son los valores del 0-5 con los que se pueden dar un "background-color" al contenedor.
- Cuando se dejen márgenes, primero se usa la clase container donde se define el ancho del contenedor y después la clase "nofluid" o "row" donde se especifican los márgenes. Si un contenedor padre tiene un "width" en "px" y el contenedor hijo tiene "margin:0 auto" se centrar dicho contenedor y todos los hijos de este.
- En la estructura central de la página, hay dos partes, el menú vertical o panel de herramientas y el 'body' o "mainContent".
- Para el menú vertical se usan las clases según el ancho del dispositivo .col-xs/sm/md/lg-3 y para el 'body' .col-xs/sm/md/lg-9.
| Estructura de la web |
| Header |
12 Columnas |
| bg-fluid# |
| X |
Container : {Margin: 0 auto y width: ..px} |
X |
| Body |
.... |
| bg-fluid# |
| X |
Container {width: ..px} |
X |
| row/nofluid {margin: 0 auto} |
| ..... |
| bg-fluid# |
| X |
Container : {width: ..px} |
X |
| Margin |
row { margin: x auto } |
Margin |
| 3-Cols |
9-Cols |
| Menu Vertical |
MainContent |
| nofluid |
| ..... |
| bg-fluid# |
| Footer |
12 Columnas |
| bg-fluid# |
| ... |
| bg-fluid# |
Para más información: http://getbootstrap.com/
Styleguide 1.3
*/
/*
Función javascript de configuración de la interfaz
Todas las páginas deben incluir en el head la siguiente función aytmad, que configura las siguientes características de la interfaz:
- menu: ruta del fichero JSON con los enlaces principales del menú responsive
- menuTramites: ruta del fichero JSON con los enlaces de la sede electrónica del menú responsive
- calendar: URL de la agenda de Madrid para el módulo del calendario dinámico
- taxonomias: URL del xml de configuración del autocompletar de un área temática
- numVisibleLinks: número máximo de elementos del bloque de información relacionada a mostrar antes de aplicar el plegado dinámico
- API_KEY: clave del API de Google Maps javascript API v3
Todas las varibles deben estar definidas, en caso de no utilizarlas deben tener valor igual a ''.
Markup:
Styleguide 1.4
*/
/*
Módulos comunes
Son aquellos que se utlizan más frecuentemente en las páginas, como por ejemplo los módulos estructurales de cabecera, pie, etc., otros generales como tablas y listas, etc.
Styleguide 2
*/
/*
Cabecera
Esta cabecera consta de seis partes dentro del tag header:
- Menú de herramientas
- Menú principal, el cual se colorea de azul cuando está activo
- Buscador(Lupa), que muestra un input cuando se clikea, donde se escribe lo que se desee buscar
- Título de la sección(página)
- Menu horizontal(opcional).
- Lo más visto(opcional)
Y una última parte, el menú horizontal, el cual se puede añadir o no.
No hay que olvidar que esta web esta hecha con responsive, con lo que el menú que hay en desktop no es el mismo(en html) que en versión movil.
En el html aparece un div="sidebar mm-menu mm-horizontal mm-offcanvas mm-hasheader" cuando el tamaño de la pantalla se corresponde al de una tablet o móvil.
Cabecera con menú horizontal
Markup:
Styleguide 2.1
*/
/*
Navegación
Para navegar por la web sin contar el footer, los módulos de que se disponen son:
Menú Principal
Está contenido en la clase navigation-bar y dividido en 2 áreas, un col-xx-3 para la imagen y otro col-xx-9 para la lista con las secciones y la lupa.
El style que lleva la capa container es solo para la guía para que se pueda distinguir el blanco de la página del menú.
Markup:
Menú Horizontal
Está contenido en la lista sub-menu visible-md-block visible-lg-block hidden-print, donde cada elemento esta formado de un enlace con la clase sub-menu-item
Miga de pan
Contenido en un row, y este a su vez en una lista con la clase breadcrumbs hidden-xs
Menú Vertical
Ambos menus verticales estan contenidos en la clase col-md-3 visible-md-block visible-lg-block.
Pero el menú vertical tiene una subclase hidden-print menuVertical social.
Menú vertical social o panel de herramientas
Y el Menú vertical social o panel de herramientas tiene la clase hidden-print menuVertical normal
Styleguide 2.2
*/
/*
Pie de página
El pie de la página consta de 3 secciones dentro de la clase footer hidden-print y cada una de ellas está contenida dentro de la clase bf-fluid#(según color):
- Navegación de las secciones principales del Ayuntamiento de Madrid, el cual incluye las herramientas principales.
- Árbol de navegación adicional basado en los aspectos de Usuario, Temas y Distritos. También incluye un acceso a Otras webs del Ayuntamiento de Madrid
- Cierre visual de la página con acceso de información general de Aviso Legal y Protección de datos.
Markup:
Styleguide 2.3
*/
/*
Encabezados
Es la estructura que debe tener la web desde los h1 hasta los h6.
- h1 --> Página: Ayuntamiento de Madrid o SITE de la làgina..
- h2 --> Sección en la que se encuetra. Módulos generales de la página.
- h3 --> Apartados en los que se divide la página.
- h4/h5/h6 --> Subsecciones/modulos del h# padre.
Styleguide 2.4
*/
/*
Tablas
La tabla vendrá contenida por la clase tiny-text.
Markup:
| Encabezado 1 |
Encabezado 2 |
Encabezado 3 |
Encabezado 4 |
Encabezado 5 |
Encabezado 6 |
| Uno |
Dos |
Tres |
Cuatro |
Cinco |
Seis |
| Uno |
Dos |
Tres |
Cuatro |
Cinco |
Seis |
| Uno |
Dos |
Tres |
Cuatro |
Cinco |
Seis |
| Uno |
Dos |
Tres |
Cuatro |
Cinco |
Seis |
Styleguide 2.5
*/
/*
Listados
Cuando se realiza una búsqueda,se devuelven cuatro tipos de listas principales. Estas listas incluyen las siguientes variaciones:
- Con o sin iconos
- Con o sin imágenes
- Con o sin texto
Markup:
-
-
EXPOSICIÓN
ClassicAuto Madrid 2015. VI Salón Internacional del Vehículo Clásico
Automóviles, motocicletas, fabricantes, recambios, accesorios, equipos competición, preparadores, restauradores, organizadores de pruebas deportivas, industria auxiliar, clubes, medios de comunicación...
Del viernes 20 de febrero de 2015 al domingo 22 de febrero de 2015
Pabellón de Cristal de la Casa de Campo
915 439 437 / 915 492 641
-
-
Filtro
Esta ventana se abre y se cierra al pulsar en la flecha de la derecha, efecto persiana.
Styleguide 2.6
*/
/*
Listas de definición
Sirven para presentar información tabular agrupada en listas.
Dentro del contenedor tributes nofluid, hay tres casos:
- Cabecera h3 tributes-header y el contenido en la clase tributes-body
- Cabecera h3 y el contenido en forma de tabla tributes-body tributes-table
- Y el panel con la clase panel panel-type1 searcher-tributes
Markup:
Emitir justificante de pago
Styleguide 2.7
*/
/*
Paginación
Después de hacer una busqueda, si el resultado no entra en una sola página, se usa la paginación.
La clase que lo define es nav-pagination top/bottom, con top añade un "border-bottom" y con bottom añade un "border-top".
Markup:
Styleguide 2.8
*/
/*
Formularios
A continuación se muestran ejemplos de los diferentes tipos de formularios que se pueden hacer. La clase contenedora es form form-electronic.
Consta de cuatro partes fundamentales:
- Texto donde se indica la obligatoriedad de los campos con el * y el top azul donde se indica el paso del formulario en el que se encuentra el usuario.
- Las secciones o áreas del formulario que vienen precedida por un título. Dichas secciones vienen dentro de un fieldset class="field12"
- Área de seguridad para evitar un uso indebido del formulario(Captcha). También viene dentro de un fieldset pero con distinta clase, form-fieldset-captcha
- Grupo de botones para navegar por el formulario. Para ello se usa la clase button-group text-right. Con la clase text-left el botón de Continuar de desplaza a la izquierda, con lo que se tiene que cambiar el icono de atrás a la derecha.
Markup:
Styleguide 2.9
*/
/*
Botones
Lista de todos los tipos de botones de que se disponen.
Hay cinco tipos de botones y se hacen mediante el tag button o el tag a.
Markup:
-
botones tipo button1
botones tipo button2
-
Default
-
Con iconos
-
Bold
-
botones tipo button3
-
botones tipo button4
-
botones tipo button5
Botonera de operación de Acción
¿Quieres cambiar la modalidad de pago?
Styleguide 2.10
*/
/*
Acordeones
Hay dos tipos de acordeones:
- Desplegable, se usa la clase panel-group info-detalles
- Selector, se usa la clase panel-group tramite-detalles
Markup:
-
Quiero una relación de mis multas que se tramitan en periodo voluntario pendientes de pago
-
A través de la web municipal www.madrid.es/micarpeta, con certificado electrónico. En las oficinas de la Subdirección General de Gestión de Multas de Circulación, calle Albarracín, 33, en horario de lunes a viernes de 8:30 a 14 horas (24 y 31 de diciembre cerrado). Persona jurídica CON CITA PREVIA. Persona física SIN CITA PREVIA. En las oficinas de atención al ciudadano de Línea Madrid, en horario de lunes a jueves de 8:30 a 17 horas y los viernes y mes de agosto de 8:30 a 14 horas (24 y 31 de diciembre cerrado) SIN CITA PREVIA (www.madrid.es/lineamadrid). Si no acude el interesado, el representante debe aportar la autorización correspondiente junto con la fotocopia del documento de identidad del autorizante.
-
Quiero una relación de mis multas que se tramitan en periodo voluntario pendientes de pago
-
A través de la web municipal www.madrid.es/micarpeta, con certificado electrónico. En las oficinas de la Subdirección General de Gestión de Multas de Circulación, calle Albarracín, 33, en horario de lunes a viernes de 8:30 a 14 horas (24 y 31 de diciembre cerrado). Persona jurídica CON CITA PREVIA. Persona física SIN CITA PREVIA. En las oficinas de atención al ciudadano de Línea Madrid, en horario de lunes a jueves de 8:30 a 17 horas y los viernes y mes de agosto de 8:30 a 14 horas (24 y 31 de diciembre cerrado) SIN CITA PREVIA (www.madrid.es/lineamadrid). Si no acude el interesado, el representante debe aportar la autorización correspondiente junto con la fotocopia del documento de identidad del autorizante.
-
Quiero una relación de mis multas que se tramitan en periodo voluntario pendientes de pago
-
A través de la web municipal www.madrid.es/micarpeta, con certificado electrónico. En las oficinas de la Subdirección General de Gestión de Multas de Circulación, calle Albarracín, 33, en horario de lunes a viernes de 8:30 a 14 horas (24 y 31 de diciembre cerrado). Persona jurídica CON CITA PREVIA. Persona física SIN CITA PREVIA. En las oficinas de atención al ciudadano de Línea Madrid, en horario de lunes a jueves de 8:30 a 17 horas y los viernes y mes de agosto de 8:30 a 14 horas (24 y 31 de diciembre cerrado) SIN CITA PREVIA (www.madrid.es/lineamadrid). Si no acude el interesado, el representante debe aportar la autorización correspondiente junto con la fotocopia del documento de identidad del autorizante.
Más información...
Styleguide 2.11
*/
/*
Calendario
Para los distintos días del mes se usan las clase disabled day o day en función de si dicho día del mes está antes o después del día actual.
Para el día actual se usa la claseday today y cuando se tenga una actividad day active.
Markup:
Styleguide 2.12
*/
/*
Paneles informativos
Listado de los distintos paneles informativos de que se disponen para los distintos casos que se puedan dar.
Los paneles iran dentro de la clase info-seccion, y los paneles cambiaran de color e icono en función de la clase que se use:
- Advertencia: modal-alert modal-warning
- Errores: modal-alert modal-error
- Todo correcto: modal-alert modal-success
- Información: modal-alert modal-info
- Resultados: modal-alert modal-results
Markup:
Existen errores en el formulario
Este es un aviso general para cuando existen errores en el formulario, además hay que señalar los campos erroneos.
El texto del enlace
Información sobre el trámite
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
El texto del enlace asociado a la información
Lo sentimos, tu búsqueda no obtiene resultados
Con los criterios de búsqueda´facilitados no te podemos mostrar ningún resultado
Te recomentamos:
-
Cambiar las palabras claves por alguna más genérica
-
Comprueba el rango de fechas
-
Comprueba el tipo de evento elegido y prueba con otra opción o elige todos
Styleguide 2.13
*/
/*
Información relacionada
Cuando se añada información relacionada se usa la clase
asociada y dentro de esta la clase
asociada-cont.
la información relacionada puede aparecer de diferentes formas:
- En forma de enlace a un archivo/fichero con texto asociado.
- Mediante un enlace, con o sin texto
- Cuando la información ocupe demasiado, está la opción de usar el botón ver más enlaces
Markup:
Documentación asociada
-
Memoria del área de gobierno de familia, servicios sociales y participación ciudadana
PDF, 2.5 Mb
-
Archivo con formato JPG o JPEG
PDF, 1.5 Mb
-
Archivo con formato html
PDF, 1.5 Mb
-
Archivo con formato doc
PDF, 1.5 Mb
-
Archivo con formato genérico
PDF, 2.5 Mb
-
Archivo con formato PNG
PDF, 2.5 Mb
-
Archivo con formato BMP
PDF, 2.5 Mb
-
Archivo con formato GIF
PDF, 2.5 Mb
-
Archivo con formato Txt
PDF, 2.5 Mb
-
Archivo con formato excel
PDF, 2.5 Mb
Cuando la información relacionada venga en formato multimedia se usa este panel mediante la clase
morefiles.
Styleguide 2.14
*/
/*
Direcciones destacadas
Este panel se usa para direcciones destacadas que vienen formadas por una imagen y un texto por dirección.
Para dicho panel se usa la clase
addresses nofluid.
Markup:
Styleguide 2.15
*/
/*
Síguenos en RRSS
Para la sección de
Síguenos en RRSS se usa la clase
follow.
Markup:
Síguenos en redes sociales
Styleguide 2.16
*/
/*
Módulos de texto con imágenes
Este módulo consta de dos partes, de textos e imágenes. Ambas vendrán contenidas en la clase
generic-content nofluid.
La posición de la imagen varía en función de la clase que se use en la imagen:
- image-content ic-right
- image-content ic-left
- image-content ic-center
Markup:
Un análisis de coyuntura de la capital, basado en datos actualizados sobre actividad empresLato-regular, empleo, turismo, comercio, consumo y calidad de vida. Se acompaña de un informe pormenorizado de algunos aspectos estructurales básicos para entender Madrid en clave económica. Trimestre tras trimestre, el Barómetro de Economía tratará de trasmitir cómo está posicionándose la Ciudad de Madrid, también en el contexto internacional.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.
No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Desde el Programa de "Visitas Guiadas Oficiales" de la Oficina de Turismo Madrid se ofrece la oportunidad de disfrutar de un recorrido especial con carácter gratuito denominado "Madrid, Musa de Compositores". Esta ruta pretende acercar al visitante a los lugares emblemáticos e imprescindibles para conocer, entender y disfrutar de la excepcional riqueza musical de la Villa de Madrid.
Las calles de Madrid desprenden historia al doblar cada esquina y gran parte de ella la escribieron ilustres músicos que, en muchos casos, hicieron de la capital su refugio de creación y de sus auditorios, testigos de obras inmortales.
En agradecimiento, la ciudad ha dedicado algunas de sus vías y plazas a compositores, tales como el Maestro Vitoria, Arrieta, Federico Chueca o el Maestro Guerrero. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Styleguide 2.17
*/
/*
Módulos específicos
A continuación se presenta un conjunto de módulos utilizados para funcionalidades o páginas particulares.
Styleguide 3
*/
/*
Panel informativo destacado
La clase
tu-formas-parte define el div contenedor de este módulo. Consta de una lista que viene definida por cuatro elementos.
Cada uno de estos elementos están formados por una sublista con la clase
item.
Markup:
Styleguide 3.1
*/
/*
Accesos destacados home
El contenedor padre es
al-minuto y está divido en tres partes:
- El título es un h2
- Fecha es una p
- Lista con 4 elementos, lo que indica que se usa la clase col-xx-3
Markup:
MADRID AL MINUTO
Martes 22 / Nov
Styleguide 3.2
*/
/*
Quizás le interese
Es un modelo
versatil para incluir enlaces destacados agrupados en pestañas.
La clase padre que contiene el modelo es
container-info_relevant nofluid, luego está el título y el panel con la agrupación de los enlaces.
El panel hace uso de la clase
tabspanel y esta a su vez puede estar dividida en dos secciones:
- Las pestañas para cambiar de agrupación de enlaces(opcional)
- Las agrupaciones de enlaces en forma de imágenes
La cantidad de pestañas puede variar, al igual que el número de enlaces.
Markup:
Quizás también te interese...
Styleguide 3.3
*/
/*
¿Te ha sido útil?
Viene dentro de la clase useful nofluid y está formada por una lista de tres elementos, lo que da lugar al uso de la clase col-xx-4
Markup:
¿Te ha sido útil esta página?
Styleguide 3.4
*/
/*
Pregunta del día
Tal y como indica el título de este apartado, se usa para hacer la pregunta del día y su respectiva respuesta.
En ambos casos el grupo formado por el título, el texto introductorio y las preguntas/respuestas van dentro del contenedor padre questionnaire.
Para las preguntas se crea un form con la clase questionnaire-form visibleWhenActive y para las respuestas una lsita con la clase questionnaire-items.
Hay que destacar que en las respuestas del día, si el porcentaje es superior a 50%, el número aparece dentro de la barra cambiando de color; para ello la clase del span tiene que ser questionnaire-votos, eliminando la otra clase questionnaire-votos-small.
Markup:
Pregunta del día
Ya han comenzado las actividades en las bibliotecas, pero de todas ellas ¿Cuál te resulta más interesante?
Resultados de la pregunta del día
Respuestas a la pregunta del día
Gracias por participar! Estos son los resultados en estos momentos
-
Las charlas y conferencias
17%
-
Las exposiciones
5%
-
Los clubs de lectura
23%
-
Los talleres (informática, idiomas...)
55%
Total de respuestas: 44
Styleguide 3.5
*/
/*
Contenido árbol
Hay dos tipos de estructuras en árbol:
- Árbol estático
- Árbol dinámico
Pára el estático, se usa la clase statictree en el contenedor. Hay más clases que se usan para dicha estructura, solo necesitan ver el código que hay a continuación para entender su funcionamiento.
Markup:
Y para el árbol dinámico se hace uso de la clase tree.
Styleguide 3.6
*/
/*
Actividades y Direcciones
Este módulo cuenta con dos secciones:
- Primera sección en la que aparece la imagen, el texto y la lista de iconos dentro de la clase tramites-content. Es una subtipo de lo visto en la sección 2.17
- Y la segunda sección donde aparecen los otros items, dentro de la clase info-actividad. Dichos items tienen la posibilidad de tener título o no tenerlo, para lo cual usaran la clase item o item noTitle
Markup:
Uno de los Centros Deportivos más modernos en cuanto a espacios y servicios de toda la red municipal. Dotado con nuevos sistemas de ahorro de energía y totalmente accesible.
Los deportes que se pueden practicar son Bádminton, Baloncesto, Balonmano, Fútbol Sala, Natación, Musculación y Voleibol, pudiéndose alquilar o utilizar el pabellón, la piscina, la sala de Musculación o las salas multiusos.
En enseñanza deportiva, el Centro ofrece Escuelas de Matronatación, Natación Peques, Polideportiva; Escuelas Infantiles de Aeróbic, Baloncesto, Gimnasia Rítmica, Judo, Natación
-
Adaptado
-
Gratuita
-
Familia
-
Mayores
-
Niños
Dirección y teléfono
- Dirección
- Avenida Pío XII, 2 28016 - Madrid
- Barrio / Distrito
- Nueva España / Chamartín
- Teléfono
- 91 359 33 33
Fecha
Sábado, 21 junio a las 19:00 horas.
Domingo, 22 junio, a las 12 horas
adaptada para personas con discapacidad visual
CELEBRACION Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pulvinar orci. Phasellus tincidunt, neque eleifend faucibus bibendum, mauris diam molestie risus, vitae commodo quam purus laoreet ex. In fermentum massa at elit aliquet, eu ornare elit placerat. Aenean congue, augue et pretium ullamcorper, leo enim tempus mi, ornare imperdiet velit lorem quis urna. Duis sit amet pulvinar arcu, ut bibendum lacus. Sed tincidunt auctor libero, id vestibulum urna lobortis id. Fusce nec lorem lorem. CELEBRACION
Styleguide 3.7
*/
/*
Listado Distributivo
Conjunto de enlaces destacados de manera gráfica.
Para este primer ejemplo se usa la clase listing nofluid y para el segundo nofluid.
En ambos casos se crea una lista no ordenada y se usa la clase col-xx-4, ya que son tres elementos por fila, 12/3 = 4 col por elemento.
En el segundo caso cabe destacar el uso del botón más información.
Markup:
¿Que publicación estás buscando?
-
-
Normativa municipal
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- lorem ipsum dolor sit amet
más información...
-
Tablón de edictos
- Lorem ipsum dolor sit amet,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- lorem ipsum dolor sit amet
más información...
-
-
-
Styleguide 3.8
*/
/*
Distritos
Haciendo uso de la clase bg-triangle nofluid se ha creado un módulo en el que se ha divido las 12 columnas en 4 cols para los botones y los 8 restantes para el mapa del distrito.
Markup:
Styleguide 3.9
*/
/*
Galería de imágenes
La galería está dentro de la clase gallery nofluid, esta también es una única lista desordenada donde cada li hace uso de la clase Bootstrap para los cols en función de la cantidad de imágenes que se quieran mostrar.
Markup:
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
-
Nombre de imagen
Styleguide 3.10
*/
/*
Galería de videos
La galería de vídeos esta contenida por la clase videoplayer row, la cual se divide en tres zonas:
- Cabecera: col-sm-4 cabecera
- Video: col-sm-4
- Lista de videos: col-sm-4 playlist
Markup:
Styleguide 3.11
*/
/*
Aplicaciones Externas
Aplicaciones externas sin panel de herramientas
Styleguide 4
*/
/*
Cabecera
Para las aplicaciones externas, la cabecera tiene ciertas diferencias respecto a los diferentes tipos de cabeceras descrito en la sección 2.1
Las principales diferencias son:
- No tiene menú herramientas, pero se mantiene el div="row visible-md-block visible-lg-block" vacío, el cual tiene un min-height que permite mantener el margen con el menú principal.
- No tiene buscador
- No tiene menú horizontal
- Si es para un servicio de la Sede Electrónica se marca el enlace de Trámites con la clase active ya que no hay página de inicio.
- Los enlaces son estáticos para evitar posibles futuros enlaces rotos.
Markup:
Centro de día municipal de Alzehimer Margarita Retuerto
Centro municipal de mayores Infante Don Juan
Centro Social Comunitario Casino de la Reina
