/*
Hoja para la charla de OSM de Castellón 2012

Cambios
- 6/4/12 jsanz
*/
/* Paleta de colores a usar por defecto */
/* 
Juego de variables que se usan en la plantilla. 

Se declaran aparte para poder cargarlas antes de la plantilla 
y poder en medio sobrecargarlas de forma que sea sencillo 
cambiarlas para cada charla sin alterar el aspecto de la
plantilla base.

Cambios:
- 17/03/12: Creación de la primera versión de la plantilla jsanz@prodevelop.es
 */
/* colores */
/* Fuentes */
/* colores y fuentes sobrecargados 
  $cPrimario:   #755671;
  $cSecundario: #615675;
  
  $cFondo1: #CCFFBB;
  $cFondo2: #ADD99F; 
  $cFondo3: #A1C993; 
  $cQuotes: #2B2B2B;
  
  @import url("http://fonts.googleapis.com/css?family=Imprima&subset=latin,latin-ext");
  @import url("http://fonts.googleapis.com/css?family=Inconsolata");
  
  $f_principal: 'Imprima', georgia, sans-serif;
  $f_condensada: Inconsolata, courier; */
/* Colores y fuentes para charla AVT */
/* paleta de kuler - triads - basada en el color base de OSM*/
/*fondo*/
/*exterior*/
/*interior*/
/*@import url("http://fonts.googleapis.com/css?family=Imprima&subset=latin,latin-ext");*/
@import url("http://fonts.googleapis.com/css?family=Inconsolata");
@import url("http://fonts.googleapis.com/css?family=Exo:500,800,500italic,800italic&subset=latin,latin-ext");
/* 
   Plantilla base con todo lo necesario 
   para una presentación básica
 */
/*
Plantilla de base para charlas. Está
basada en la hoja de estilo original de impress.js
pero migrada a SASS, sacando variables fuera, y poco
más.

Cambios:
- 17/03/12: Creación de la primera versión de la plantilla jsanz@prodevelop.es
*/
/*
 HAY QUE IMPORTAR O DECLARAR ANTES UNA PALETA DE COLORES
 TODO: mirar si se puede comprobar que las variables están seteadas y
       si no es así hacer un import de _variables.scss
*/
/** SCSS para resetar estilos **/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* END RESET */
/** SCSS con mixins para CSS3 **/
/*****
SCSS CSS 3 Property Maxin v 0.1

by Dele O
*******/
/* Backgrounds */
/* Borders and boxes*/
/** BODY **/
body {
  /** Fuentes **/
  font-family: "Exo", verdana, sans-serif;
  /** Tamaño **/
  min-height: 740px;
  background: white;
  background-color: #d2dae4;
  background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f2f4f7), to(#d2dae4));
  background-image: -webkit-radial-gradient(#f2f4f7, #d2dae4);
  background-image: -moz-radial-gradient(#f2f4f7, #d2dae4);
  background-image: -o-radial-gradient(#f2f4f7, #d2dae4);
  background-image: radial-gradient(#f2f4f7, #d2dae4);
  -webkit-font-smoothing: antialiased; }

/* enable clicking on elements 'hiding' behind body in 3D */
body {
  pointer-events: none; }

#impress {
  pointer-events: auto; }

/* COMMON STEP STYLES */
.step {
  width: 900px;
  padding: 40px;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Exo", verdana, sans-serif;
  font-size: 40px;
  line-height: 1.5;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  /* fade out inactive slides */ }
  .step:not(.active) {
    opacity: 0.1; }
  .step h1, .step h2 {
    margin-bottom: 20px;
    line-height: 1.1; }
  .step h1 {
    color: #5b8547;
    font-size: 85px; }
  .step h2 {
    color: #275b85;
    font-size: 60px; }

/* IMÁGENES */
/* quitar propiedades cuando sean enlaces a fotos o con la clase noframe */
a.noframe, a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif], a[href*=flickr] {
  text-decoration: none;
  border: 0 none;
  padding: 0;
  background: none;
  text-shadow: none;
  border-radius: 0; }

img {
  max-width: 900px;
  max-height: 700px;
  height: auto; }
  img.figure, img[src*="flickr.com"] {
    margin: 10px;
    padding: 15px;
    background-color: white;
    border: 2px solid black;
    max-width: 800px; }

.slide img {
  max-width: 800px;
  max-height: 600px; }

/* ESTILOS BÁSICOS */
b, strong {
  font-weight: bold; }

i, em {
  font-style: italic; }

a {
  color: inherit;
  text-decoration: none;
  padding: 0 0.1em;
  text-shadow: -1px -1px 2px rgba(100, 100, 100, 0.9);
  background: rgba(255, 255, 255, 0.5);
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s; }

.left {
  float: left; }

.right {
  float: right; }

.center {
  text-align: center; }

.larger {
  font-size: larger; }

.smaller {
  font-size: smaller; }

.nobold {
  font-weight: normal; }

blockquote {
  color: #728cab;
  margin: 1em 20px;
  padding-left: 60px;
  background: transparent url(quote.png) no-repeat;
  font-style: italic; }

ul.discs {
  margin: 30px 0 30px 50px;
  list-style-type: disc; }
  ul.discs ul {
    list-style-type: disc;
    font-size: smaller;
    margin-left: 50px; }

ol.numbers {
  margin: 30px 0 30px 50px;
  list-style-type: decimal; }
  ol.numbers ol {
    list-style-type: lower-roman;
    font-size: smaller;
    margin-left: 50px; }

/** ralentizar la aparición de un objeto **/
.step:not(.active) .fade-in {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
  -webkit-transform: skew(0, 0) scale(0, 0) rotate(0) translate(0, 0);
  -moz-transform: skew(0, 0) scale(0, 0) rotate(0) translate(0, 0);
  -ms-transform: skew(0, 0) scale(0, 0) rotate(0) translate(0, 0);
  -o-transform: skew(0, 0) scale(0, 0) rotate(0) translate(0, 0);
  transform: skew(0, 0) scale(0, 0) rotate(0) translate(0, 0); }

.step.active .fade-in {
  opacity: 1;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-delay: 3s;
  -moz-transition-delay: 3s;
  -ms-transition-delay: 3s;
  -o-transition-delay: 3s;
  transition-delay: 3s;
  -webkit-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  -moz-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  -ms-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  -o-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0); }

/** BANNER POR DEFECTO **/
.banner {
  position: fixed;
  left: auto;
  right: 10px;
  bottom: 10px;
  background: url(/resources/imgs/prodevelop/logo-150x32.png) no-repeat right bottom;
  width: 150px;
  height: 32px;
  z-index: -100; }

/* TRANSICIÓN DEL STRONG A UN COLOR AL ACTIVAR DIAPO */
.active strong {
  color: #5b8547;
  -webkit-transition-property: color;
  -moz-transition-property: color;
  -ms-transition-property: color;
  -o-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s; }

/* DIAPOSITIVA DE OVERVIEW */
.impress-on-overview {
  /* ocultar todo por defecto */
  /* mostrar ligeramente las que tengan la clase section */
  /* mostrar completamente el título y la propia diapo */ }
  .impress-on-overview .step {
    opacity: 0;
    cursor: pointer; }
  .impress-on-overview .section {
    opacity: .6; }
  .impress-on-overview #title, .impress-on-overview #overview {
    display: block;
    opacity: 1; }

#overview {
  z-index: -1;
  padding: 0;
  /*ocultar el párrafo durante el resto de la charla*/
  /* colocar el texto */ }
  #overview:not(.active) p {
    display: none; }
  #overview.active p {
    margin-top: 570px;
    font-weight: bold;
    font-size: 40px; }

/* DIAPOSITIVAS SUPERPUESTAS USANDO LA CLASE HIDE */
.hide {
  /*eliminar el grosor del strong para que no se resalte*/
  /*cuando no esté activa se oculta completamente con transición*/ }
  .hide strong {
    font-weight: normal; }
  .hide:not(.active) {
    opacity: 0;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -ms-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s; }

.nohide:not(.active) {
  opacity: .8; }

/* hint on the first slide */
.hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #EEE;
  text-align: center;
  font-size: 30px;
  padding: 20px;
  z-index: 100;
  opacity: 0;
  -webkit-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 400px);
  -moz-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 400px);
  -ms-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 400px);
  -o-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 400px);
  transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 400px);
  -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
  -moz-transition: opacity 1s, -moz-transform 0.5s 1s;
  -ms-transition: opacity 1s, -ms-transform 0.5s 1s;
  -o-transition: opacity 1s, -o-transform 0.5s 1s;
  transition: opacity 1s, transform 0.5s 1s; }

.impress-on-title .hint {
  opacity: 1;
  -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s;
  -moz-transition: opacity 1s 5s, -moz-transform 0.5s;
  -ms-transition: opacity 1s 5s, -ms-transform 0.5s;
  -o-transition: opacity 1s 5s, -o-transform 0.5s;
  transition: opacity 1s 5s, transform 0.5s;
  -webkit-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  -moz-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  -ms-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  -o-transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0);
  transform: skew(0, 0) scale(1, 1) rotate(0) translate(0, 0); }

/*
 * SLIDE STEP STYLES
 *
 * inspired by: http://html5slides.googlecode.com/svn/trunk/styles.css
 *
 * ;)
 */
.slide {
  display: block;
  width: 900px;
  height: 700px;
  padding: 40px 60px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: white;
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.3);
  font-family: "Exo", verdana, sans-serif;
  color: #666666;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -1px; }
  .slide q {
    display: block;
    font-size: 50px;
    line-height: 72px;
    margin-top: 100px; }
    .slide q strong {
      white-space: nowrap; }
  .slide ul {
    margin-top: 10px; }
  .slide a {
    color: #5b8547;
    background: none;
    text-shadow: none; }
  .slide h2 {
    color: #275b85;
    line-height: 1.5; }
  .slide li {
    margin-bottom: 15px; }

/* IMPRESS NOT SUPPORTED STYLES */
.fallback-message {
  font-family: "Exo", verdana, sans-serif;
  line-height: 1.3;
  display: none;
  width: 780px;
  padding: 10px 10px 0;
  margin: 20px auto;
  border-radius: 10px;
  border: 1px solid #E4C652;
  background: #EEDC94; }
  .fallback-message p {
    margin-bottom: 10px; }

.impress-not-supported .step {
  position: relative;
  opacity: 1;
  margin: 100px auto; }
.impress-not-supported .fallback-message {
  display: block; }

/* Estilos para el syntaxhighlighter */
.syntaxhighlighter {
  max-height: 500px; }
  .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td,
  .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead,
  .syntaxhighlighter table caption, .syntaxhighlighter textarea, .syntaxhighlighter .step pre {
    font-family: Inconsolata, courier !important;
    font-size: 25px !important; }
  .syntaxhighlighter td.gutter {
    display: none; }

.hint {
  bottom: 60px; }

/** BANNER PARA ESTE SARAO **/
.banner {
  background-image: url(banner.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  /* los tamaños son los de la imagen */
  width: 130px;
  height: 130px; }

/* estilos básicos */
a {
  background: #aaca9b; }

img {
  z-index: 1000; }

/* portada */
#title {
  padding: 0;
  background-image: url("../imgs/osm-logo-mini.png");
  background-position: top right;
  background-repeat: no-repeat;
  /*fuentes de la portada*/ }
  #title h1 {
    font-size: 100px;
    margin-bottom: 50px; }
  #title h2 {
    font-size: 50px;
    text-align: center;
    margin-bottom: 50px; }
  #title .yo {
    font-size: 28px;
    margin-bottom: 90px; }

/* definitions */
#def2 {
  font-size: 60px; }

.comp img {
  max-width: 900px;
  height: auto; }

/* pero ya tenemos GMaps */
#gmaps img {
  float: right;
  -webkit-transform: skew(0, 0) scale(1, 1) rotate(5deg) translate(0, 0);
  -moz-transform: skew(0, 0) scale(1, 1) rotate(5deg) translate(0, 0);
  -ms-transform: skew(0, 0) scale(1, 1) rotate(5deg) translate(0, 0);
  -o-transform: skew(0, 0) scale(1, 1) rotate(5deg) translate(0, 0);
  transform: skew(0, 0) scale(1, 1) rotate(5deg) translate(0, 0); }

#hot h2 {
  font-size: 45px; }
#hot img {
  height: 230px; }

#colofon img {
  float: right;
  width: 100px; }

#colofon.active img {
  -webkit-transform: skew(0, 0) scale(2.5, 2.5) rotate(-10deg) translate(0, 0);
  -moz-transform: skew(0, 0) scale(2.5, 2.5) rotate(-10deg) translate(0, 0);
  -ms-transform: skew(0, 0) scale(2.5, 2.5) rotate(-10deg) translate(0, 0);
  -o-transform: skew(0, 0) scale(2.5, 2.5) rotate(-10deg) translate(0, 0);
  transform: skew(0, 0) scale(2.5, 2.5) rotate(-10deg) translate(0, 0);
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-delay: 4s;
  -moz-transition-delay: 4s;
  -ms-transition-delay: 4s;
  -o-transition-delay: 4s;
  transition-delay: 4s; }

#refs li {
  font-size: 32px; }
#refs #ccby {
  height: 100px; }

/*renders*/
#render3 a, #render4 a, #datos7 p a {
  text-decoration: none;
  border: 0 none;
  padding: 0;
  background: none;
  text-shadow: none;
  border-radius: 0; }

#render3 img, #render4 img {
  width: 300px;
  margin: 0px;
  border: 1px solid black;
  padding: 10px;
  background: white; }

#render3 img:hover, #render4 img:hover {
  z-index: 100;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease; }

#render3 img[src*="standard"]:hover, #render4 img[src*="freeline"]:hover {
  -webkit-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, 68px);
  -moz-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, 68px);
  -ms-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, 68px);
  -o-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, 68px);
  transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, 68px); }

#render3 img[src*="cycle"]:hover, #render4 img[src*="midnight"]:hover {
  -webkit-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, 68px);
  -moz-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, 68px);
  -ms-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, 68px);
  -o-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, 68px);
  transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, 68px); }

#render3 img[src*="transport"]:hover, #render4 img[src*="pale"]:hover {
  -webkit-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, -68px);
  -moz-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, -68px);
  -ms-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, -68px);
  -o-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, -68px);
  transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(80px, -68px); }

#render3 img[src*="mapquest"]:hover, #render4 img[src*="city"]:hover {
  -webkit-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, -68px);
  -moz-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, -68px);
  -ms-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, -68px);
  -o-transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, -68px);
  transform: skew(0, 0) scale(2.1, 2.1) rotate(0) translate(-80px, -68px); }

/* api */
.api p {
  font-size: 32px; }

#api7 li {
  font-family: Iconsoledata,courier; }

/* josm */
#josm img {
  float: right;
  width: 60px;
  margin-bottom: 10px;
  margin-right: 30px; }

#josm.active img {
  -webkit-transform: skew(0, 0) scale(3, 3) rotate(0) translate(-80px, 10px);
  -moz-transform: skew(0, 0) scale(3, 3) rotate(0) translate(-80px, 10px);
  -ms-transform: skew(0, 0) scale(3, 3) rotate(0) translate(-80px, 10px);
  -o-transform: skew(0, 0) scale(3, 3) rotate(0) translate(-80px, 10px);
  transform: skew(0, 0) scale(3, 3) rotate(0) translate(-80px, 10px);
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -ms-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-delay: 2s;
  -moz-transition-delay: 2s;
  -ms-transition-delay: 2s;
  -o-transition-delay: 2s;
  transition-delay: 2s; }

/* mientras hago la diapo dejo este
 estilo para ver dónde queda cada cosa
 en el overview, luego puedo quitarlo
 y solo saldrán las diapos con clase "section"
 */
#overview img {
  display: none; }

.impress-on-overview {
  /* ocultar todo por defecto */ }
  .impress-on-overview .step {
    opacity: 0;
    cursor: pointer; }
  .impress-on-overview #overview img {
    display: block;
    opacity: 1;
    width: 300px;
    position: absolute;
    bottom: 15px;
    left: auto;
    right: 45px; }
  .impress-on-overview #title {
    opacity: 1 !important; }

#overview.active p {
  margin: 420px 0 0 50px; }