├── .gitignore ├── LICENSE ├── README.md ├── cover.png ├── exemplos ├── 10 │ ├── bootstrap-3.0.2.css │ └── bootstrap.html ├── 01 │ ├── images │ │ ├── ibirapuera.jpg │ │ ├── noise.png │ │ ├── paulista.jpg │ │ └── piola.jpg │ ├── saopaulo.css │ └── saopaulo.html ├── 04 │ ├── box-sizing.css │ ├── box-sizing.html │ ├── oocss.css │ ├── oocss.html │ ├── print.css │ ├── print.html │ ├── pseudo.css │ ├── pseudo.html │ ├── reset.css │ └── reset.html ├── 05 │ ├── border-radius.css │ ├── border-radius.html │ ├── box-shadow.css │ ├── box-shadow.html │ ├── css3.css │ ├── css3.html │ ├── fonts.css │ ├── fonts.html │ ├── gradient.css │ ├── gradient.html │ ├── iconic_fill.woff │ ├── icons.css │ ├── icons.html │ ├── images │ │ └── sf.jpg │ ├── lobster.css │ ├── lobster.html │ ├── lobster.woff │ ├── rgba.css │ ├── rgba.html │ ├── text-shadow.css │ └── text-shadow.html ├── 06 │ ├── absolute.css │ ├── absolute.html │ ├── column.css │ ├── column.html │ ├── display.css │ ├── display.html │ ├── flexbox.css │ ├── flexbox.html │ ├── float-2.css │ ├── float-2.html │ ├── float.css │ ├── float.html │ ├── grid-overlay.png │ ├── grid.css │ ├── grid.html │ ├── himym.css │ ├── himym.html │ ├── himym.jpg │ ├── modal.css │ ├── modal.html │ ├── relative.css │ └── relative.html ├── 07 │ ├── form.css │ ├── form.html │ ├── placeholder.css │ └── placeholder.html ├── 08 │ ├── animation.css │ ├── animation.html │ ├── flip.css │ ├── flip.html │ ├── form.html │ ├── pics │ │ ├── erich.png │ │ ├── galdino.png │ │ ├── lucas.png │ │ └── rondy.png │ ├── transform.css │ └── transform.html └── vendor │ ├── jquery.min.js │ ├── normalize.css │ └── prefixfree.min.js ├── favicon.ico ├── fonts ├── museo-500.eot ├── museo-500.ttf ├── museo-500.woff ├── museo-700.eot ├── museo-700.ttf └── museo-700.woff ├── images ├── cover.png └── ps_neutral.png ├── index.html ├── javascripts └── modernizr.min.js ├── script └── update ├── stylesheets ├── application.css ├── h5bp.css └── normalize.css ├── template.zip └── template ├── index.html ├── jquery.min.js ├── normalize.css └── prefixfree.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Lucas Mazza 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Exemplos do livro HTML5 e CSS3: Domine a web do futuro 2 | 3 | Este é o repositório dos exemplos desenvolvidos no livro 4 | [HTML5 e CSS3: Domine a web do futuro](http://casadocodigo.com.br/products/livro-html-css). 5 | Você pode conferir todos os exemplos em lucasmazza.github.io/htmlcss-exemplos. 6 | 7 | ![Capa do livro](cover.png) 8 | 9 | O livro é distribuído pela editora [Casa do Código](http://www.casadocodigo.com.br), 10 | com outros títulos sobre programação e startups. 11 | 12 | ## Licença 13 | 14 | Copyright (c) 2012-2014 Lucas Mazza. Veja o arquivo `LICENSE`. 15 | -------------------------------------------------------------------------------- /cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/cover.png -------------------------------------------------------------------------------- /exemplos/01/images/ibirapuera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/01/images/ibirapuera.jpg -------------------------------------------------------------------------------- /exemplos/01/images/noise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/01/images/noise.png -------------------------------------------------------------------------------- /exemplos/01/images/paulista.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/01/images/paulista.jpg -------------------------------------------------------------------------------- /exemplos/01/images/piola.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/01/images/piola.jpg -------------------------------------------------------------------------------- /exemplos/01/saopaulo.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #FFF1D6 url(images/noise.png); 3 | font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; 4 | line-height: 1.6; 5 | } 6 | 7 | .container { 8 | margin: 0 auto; 9 | width: 960px; 10 | } 11 | 12 | h1 a { 13 | color: #7E9F19; 14 | text-decoration: none; 15 | } 16 | 17 | h1 a:hover { 18 | background-color: #7E9F19; 19 | color: #FFF; 20 | } 21 | 22 | .places { 23 | float: left; 24 | width: 660px; 25 | } 26 | 27 | .sidenote { 28 | background-color: #FFFBE4; 29 | border: 1px solid #C9BC8F; 30 | float: right; 31 | padding: 10px; 32 | width: 260px; 33 | } 34 | 35 | .sidenote h3 { 36 | font-size: 14px; 37 | margin-top: 0; 38 | } 39 | 40 | .sidenote ol { 41 | font-size: 12px; 42 | } 43 | 44 | .place { 45 | background-color: #FFF; 46 | border-color: #CCC #999 #999 #CCC; 47 | border: 1px solid #CCC; 48 | clear: both; 49 | margin-bottom: 20px; 50 | padding: 10px; 51 | } 52 | 53 | .place h2 { 54 | border-bottom: 1px dashed #7E9F19; 55 | margin: 0; 56 | } 57 | 58 | .place a { 59 | color: #2C88A7; 60 | font-weight: bold; 61 | } 62 | 63 | .place img { 64 | border: 1px solid #7E9F19; 65 | float: left; 66 | margin: 10px 10px 0 0; 67 | padding: 2px; 68 | } 69 | 70 | .clear { 71 | clear: both; 72 | } 73 | 74 | .footer { 75 | font-size: 12px; 76 | text-align: center; 77 | } 78 | -------------------------------------------------------------------------------- /exemplos/01/saopaulo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | O que eu mais gosto em São Paulo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

O que eu mais gosto em São Paulo

13 | 14 |
15 |
16 |

Passear na Avenida Paulista!

17 | O céu da avenida Paulista, foto por http://www.flickr.com/photos/jairo_abud 18 |

Um dos principais centros financeiros da cidade, a avenida Paulista também possui diversas opções de entretenimento. Endereço do Museu de Arte de São Paulo, MASP, do Teatro Gazeta e muitos outros, a região é de fácil 19 | acesso graças as diversas linhas de ônibus que cruzam a avenida e a linha de metrô que passa por baixo dela.

20 |

A Avenida Paulista sempre é assunto. O que será que estão falando a respeito no Twitter?

21 |
22 |
23 | 24 |
25 |

Os bares da Vila Madalena

26 | A varanda do Armazém Piola, foto por Fernando Moraes 27 |

Depois de um dia de trabalho, nada melhor do que um bom chopp, um petisco e uma conversa em uma mesa de bar. Opções de sobra na região das ruas Aspicuelta, Fradique Coutinho e Wisard.

28 |

Veja quais os melhores bares e restaurantes da região no Guia da VEJA São Paulo.

29 |
30 |
31 | 32 |
33 |

O Parque do Ibirapuera

34 | O Parque do Ibirapuera, por http://www.flickr.com/photos/soldon/ 35 |

Um dos cartões postais da cidade, o parque dispõe de mais de 1,5 km² de área verde, lagos artificiais e pistas de cooper e ciclismo. E se isso não fosse o suficiente, o parque costuma ser palco de diversos eventos culturais ao longo do ano.

36 |

Veja no mapa como chegar ao parque.

37 |
38 |
39 |
40 | 41 |
42 |

E existem muitos outros lugares interessantes na cidade...

43 |
    44 |
  1. O Mercado Municipal.
    2. 45 |
  2. A Sala São Paulo.
    3. 46 |
  3. Os estádios dos principais times de futebol da cidade.
    4. 47 |
  4. Diversos museus, como o Memorial da América Latina, Museu da Língua Portuguesa e o Museu do Ipiranga.
    5. 48 |
  5. E mais!
    6. 49 |
50 |
51 |
52 |

Parte do livro "HTML5 e CSS3: Domine a web do futuro."

53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /exemplos/04/box-sizing.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | .box { 10 | background-color: LimeGreen; 11 | width: 250px; 12 | } 13 | 14 | .box-with-padding { 15 | background-color: LightBlue; 16 | padding: 0 25px; 17 | width: 250px; 18 | } 19 | -------------------------------------------------------------------------------- /exemplos/04/box-sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
elemento sem padding
13 |
14 |
elemento com padding
15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /exemplos/04/oocss.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | } 4 | 5 | .button { 6 | background-color: #999999; 7 | color: white; 8 | display: inline-block; 9 | font-weight: bold; 10 | padding: 0.5em 1em; 11 | text-decoration: none; 12 | } 13 | 14 | .primary-button { 15 | background-color: #389739; 16 | } 17 | 18 | .big-button { 19 | font-size: 1.1em; 20 | } 21 | 22 | .small-button { 23 | font-size: 0.9em; 24 | } -------------------------------------------------------------------------------- /exemplos/04/oocss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Enviar mensagem 12 | Cancelar 13 | 14 | 15 | -------------------------------------------------------------------------------- /exemplos/04/print.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 40px; 3 | } 4 | 5 | table { 6 | width: 500px; 7 | } 8 | 9 | td { 10 | border: 1px dotted #666; 11 | padding: 5px; 12 | } 13 | 14 | td a { 15 | color: #3B5998; 16 | } 17 | 18 | .expense, .profit, .actions { 19 | text-align: right; 20 | } 21 | 22 | .expense, .profit { 23 | font-weight: bold; 24 | } 25 | 26 | .expense { color: red; } 27 | .profit { color: green; } 28 | 29 | .actions a { 30 | font-size: 0.9em; 31 | color: white; 32 | padding: 2px 5px; 33 | background-color: #3B5998; 34 | text-decoration: none; 35 | } 36 | 37 | @media print { 38 | * { 39 | color: #000 !important; 40 | } 41 | 42 | td { 43 | border-color: #000; 44 | } 45 | 46 | table { 47 | width: 100%; 48 | } 49 | 50 | a::after { 51 | content: '(' attr(href) ')'; 52 | margin-left: 2px; 53 | } 54 | 55 | .expense::before { 56 | content: '- '; 57 | } 58 | 59 | .expense::after { 60 | content: ' - Despesa'; 61 | } 62 | 63 | .profit::before { 64 | content: '+ '; 65 | } 66 | 67 | .profit::after { 68 | content: ' - Receita'; 69 | } 70 | 71 | .actions { 72 | display: none; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /exemplos/04/print.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exemplo de Impressão 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Transações de Maio, 2011

13 | 14 | 15 | 18 | 19 | 22 | 23 | 24 | 27 | 28 | 31 | 32 |
16 | Transação 1 17 | R$ 100,00 20 | Editar 21 |
25 | Transação 2 26 | R$ 200,00 29 | Editar 30 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /exemplos/04/pseudo.css: -------------------------------------------------------------------------------- 1 | body { padding: 40px; } 2 | 3 | .help { 4 | background-color: #F1EFE6; 5 | border: 1px solid #D3CDAE; 6 | font-size: 0.9em; 7 | padding: 10px; 8 | position: relative; 9 | width: 300px; 10 | } 11 | 12 | .help::before { 13 | border-color: transparent #D3CDAE transparent transparent; 14 | border-style: solid; 15 | border-width: 14px; 16 | content: ''; 17 | left: -28px; 18 | margin-top: -14px; 19 | position: absolute; 20 | top: 50%; 21 | } 22 | 23 | blockquote { 24 | color: #444; 25 | font-style: italic; 26 | } 27 | 28 | blockquote::before, blockquote::after { 29 | color: #000; 30 | font-size: 3em; 31 | } 32 | 33 | blockquote::before { 34 | content: "\201C"; 35 | } 36 | 37 | blockquote::after { 38 | content: "\201D"; 39 | } 40 | 41 | .focus::after { 42 | color: #990000; 43 | margin-left: 10px; 44 | content: '← ←'; 45 | } 46 | 47 | .focus::before { 48 | color: #990000; 49 | margin-right: 10px; 50 | content: '→ →'; 51 | } 52 | 53 | .tip::before { 54 | content: '\261E'; 55 | margin-right: 10px; 56 | color: #666; 57 | } 58 | 59 | section { 60 | border: 1px solid #000; 61 | height: 100px; 62 | margin: 40px auto; 63 | width: 400px; 64 | } 65 | 66 | h1 { 67 | background-color: #990000; 68 | color: #FFF; 69 | font-size: 1.2em; 70 | left: -10px; 71 | padding: 5px 0; 72 | position: relative; 73 | text-align: center; 74 | width: 420px; 75 | } 76 | 77 | 78 | h1::before { 79 | border-color: transparent #7C0000 #7C0000 transparent; 80 | border-style: solid; 81 | border-width: 5px; 82 | content: ''; 83 | left: 0; 84 | position: absolute; 85 | top: -10px; 86 | } 87 | 88 | h1::after { 89 | border-color: transparent transparent #7C0000 #7C0000; 90 | border-style: solid; 91 | border-width: 5px; 92 | content: ''; 93 | position: absolute; 94 | right: 0; 95 | top: -10px; 96 | } 97 | 98 | a::after { 99 | content: ' (' attr(href) ')'; 100 | } 101 | -------------------------------------------------------------------------------- /exemplos/04/pseudo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | Preencha o campo com um e-mail válido, assim poderemos entrar em contato 14 | com você para informar o resultado do nosso concurso. 15 |

16 | 17 | Home page do Google. 18 | 19 |
O problema com citações na Internet é que você não pode confirmar a sua veracidade.
20 |

Importante

21 |

Você sabia que...

22 | 23 |
24 |

Um exemplo de pseudo elementos

25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /exemplos/04/reset.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px 100px; 3 | } 4 | 5 | fieldset { 6 | width: 300px; 7 | } -------------------------------------------------------------------------------- /exemplos/04/reset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Título

13 |
14 | Campos do formulário 15 | HTML 16 |

17 | 18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /exemplos/05/border-radius.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 40px; 3 | } 4 | 5 | .tnt { 6 | border-radius: 50%; 7 | border: 5px solid #000; 8 | height: 50px; 9 | line-height: 50px; 10 | text-align: center; 11 | width: 50px; 12 | } 13 | 14 | .counter { 15 | background-color: #000; 16 | border-top-left-radius: 25px 10px; 17 | border-top-right-radius: 25px 10px; 18 | color: white; 19 | display: block; 20 | font-size: 1.7em; 21 | height: 50px; 22 | line-height: 50px; 23 | text-align: center; 24 | width: 50px; 25 | } 26 | 27 | div { 28 | background-color: #000; 29 | width: 50px; 30 | height: 10px; 31 | padding: 20px 50px; 32 | } 33 | 34 | .cloud { 35 | background-color: #FFF; 36 | border-radius: 48px; 37 | display: inline-block; 38 | height: 16px; 39 | position: relative; 40 | width: 48px; 41 | } 42 | 43 | .cloud::before, .cloud::after { 44 | background-color: #FFF; 45 | border-radius: 50%; 46 | content: ''; 47 | height: 14px; 48 | position: absolute; 49 | right: 7px; 50 | top: -6px; 51 | width: 14px; 52 | } 53 | 54 | .cloud::after { 55 | height: 23px; 56 | left: 7px; 57 | right: auto; 58 | top: -10px; 59 | width: 23px; 60 | } 61 | -------------------------------------------------------------------------------- /exemplos/05/border-radius.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

TNT

13 | 14 | 37 15 |



16 |
17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /exemplos/05/box-shadow.css: -------------------------------------------------------------------------------- 1 | body { padding: 40px; } 2 | 3 | .help { 4 | background-color: #F1EFE6; 5 | border: 1px solid #D3CDAE; 6 | font-size: 0.9em; 7 | padding: 10px; 8 | position: relative; 9 | width: 300px; 10 | } 11 | 12 | .help::before { 13 | border-color: transparent #D3CDAE transparent transparent; 14 | border-style: solid; 15 | border-width: 14px; 16 | content: ""; 17 | left: -28px; 18 | margin-top: -14px; 19 | position: absolute; 20 | top: 50%; 21 | } 22 | 23 | .help { 24 | box-shadow: 3px 3px 3px #AAA; 25 | } 26 | 27 | input { 28 | border: 1px solid #999; 29 | box-shadow: 2px 2px 2px rgba(0,0,0, 0.25) inset; 30 | padding: 2px 5px; 31 | } 32 | 33 | input:focus { 34 | border-color: #35861B; 35 | box-shadow: 0 0 5px #35861B, 2px 2px 2px rgba(0,0,0,0.25) inset; 36 | outline: none; 37 | } 38 | 39 | .nav { 40 | background-color: #B9522D; 41 | height: 30px; 42 | list-style:none; 43 | padding: 0; 44 | width: 210px; 45 | } 46 | 47 | .nav li { 48 | float: left; 49 | font-weight: bold; 50 | height: 30px; 51 | line-height: 30px; 52 | text-align: center; 53 | width: 70px; 54 | } 55 | 56 | .nav a { 57 | color: white; 58 | } 59 | 60 | .nav .current { 61 | background-color: #A64A28; 62 | box-shadow: inset 0 0 10px rgba(0,0,0,0.5); 63 | } -------------------------------------------------------------------------------- /exemplos/05/box-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 | Preencha o campo com um e-mail válido, assim poderemos entrar em contato 14 | com você para informar o resultado do nosso concurso. 15 |

16 | 17 | Faça a sua pesquisa aqui: 18 | 19 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /exemplos/05/css3.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 40px; 3 | } 4 | 5 | @font-face { 6 | font-family: 'IconicFill'; 7 | src: url('iconic_fill.woff') format('woff'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | 13 | .book { 14 | background-color: #FAFAFA; 15 | background-image: linear-gradient(#FAFAFA,#EEE); 16 | border-radius: 5px; 17 | border: 1px solid #CCC; 18 | padding: 10px; 19 | width: 600px; 20 | } 21 | 22 | h1 { 23 | color: #BD2C00; 24 | font-size: 1.2em; 25 | margin: 0; 26 | } 27 | 28 | h2 { 29 | font-size: 1em; 30 | margin: 5px 0; 31 | } 32 | 33 | .available { 34 | background-color: #6CC644; 35 | border-radius: 3px; 36 | color: white; 37 | font-size: 0.8em; 38 | font-weight: bold; 39 | padding: 3px 7px; 40 | text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); 41 | } 42 | ul { 43 | background-color: #56B4EF; 44 | background-image: linear-gradient(to bottom, #56B4EF,#148EDA); 45 | border-radius: 5px; 46 | border: 1px solid rgba(0,0,0, 0.3); 47 | float: left; 48 | list-style: none; 49 | margin: 10px 10px 0 0; 50 | padding: 0; 51 | width: 230px; 52 | } 53 | 54 | .icon { 55 | border-bottom: 1px solid rgba(0,0,0, 0.3); 56 | border-top: 1px solid rgba(255, 255, 255, 0.3); 57 | color: #FFF; 58 | display: block; 59 | font-size: 0.9em; 60 | font-weight: bold; 61 | padding: 5px; 62 | text-decoration: none; 63 | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9); 64 | } 65 | 66 | .icon.paper { 67 | border-top: none; 68 | } 69 | 70 | .icon.package { 71 | border-bottom: none; 72 | } 73 | 74 | .icon:hover { 75 | background-color: rgba(0, 0, 0, 0.1); 76 | } 77 | 78 | .icon::before { 79 | font-family: 'IconicFill'; 80 | margin: 0px 5px; 81 | } 82 | 83 | .paper::before { 84 | content: "\e00b"; 85 | } 86 | 87 | .digital::before { 88 | content: "\e044"; 89 | } 90 | 91 | .package::before { 92 | content: "\e022"; 93 | } 94 | 95 | .clear { 96 | clear: both; 97 | } 98 | -------------------------------------------------------------------------------- /exemplos/05/css3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Ruby on Rails: coloque sua aplicação web nos trilhos

14 |

Vinicius Baggio

15 | Disponível 16 |
17 | 18 | 23 |

24 | Uma ótima leitura para iniciantes afim de se aventurar no ecossistema 25 | de Ruby. 26 |

27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /exemplos/05/fonts.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 30px; 3 | } 4 | h1 { 5 | font-family: 'Press Start 2P', cursive; 6 | } -------------------------------------------------------------------------------- /exemplos/05/fonts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

HTML & CSS

13 | 14 | 15 | -------------------------------------------------------------------------------- /exemplos/05/gradient.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | } 4 | 5 | div { 6 | font-weight: bold; 7 | height: 50px; 8 | line-height: 25px; 9 | margin-bottom: 10px; 10 | padding: 5px; 11 | text-align: center; 12 | width: 220px; 13 | } 14 | 15 | .blue { 16 | background-color: #4377FA; 17 | background-image: linear-gradient(to bottom, #4377FA, #0537B7); 18 | } 19 | 20 | .reverse-blue { 21 | background-image: linear-gradient(to bottom, #0537B7, #4377FA); 22 | } 23 | 24 | .omg-pink { 25 | background-image: linear-gradient(to bottom left, #FC0050, #FF79A3); 26 | } 27 | 28 | .stops { 29 | background-image: linear-gradient(to bottom, #F5B951 48%, #F2A31C 56%); 30 | } 31 | -------------------------------------------------------------------------------- /exemplos/05/gradient.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | Um gradiente azul clássico, utilizando 2 tons similares. 15 |
16 | 17 |
18 | Uma versão inversa do gradiente azul. 19 |
20 | 21 |
22 | Combinando 'top' e 'right' para a direção. 23 |
24 | 25 |
26 | Utilizando posições específicas para as cores. 27 |
28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /exemplos/05/iconic_fill.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/05/iconic_fill.woff -------------------------------------------------------------------------------- /exemplos/05/icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IconicFill'; 3 | src: url('iconic_fill.woff') format('woff'); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | 8 | body { 9 | padding: 40px; 10 | } 11 | 12 | .icon-next::after { 13 | content: '\2192'; 14 | font-family: 'IconicFill'; 15 | margin-left: 10px; 16 | } 17 | 18 | h1.icon-next { 19 | color: blue; 20 | } 21 | 22 | .icon-ok { 23 | color: #489D00; 24 | } 25 | 26 | .icon-ok:before { 27 | content: "\2718"; 28 | font-family: 'IconicFill'; 29 | margin-right: 10px; 30 | } 31 | 32 | .icon-invalid { 33 | color: #990000; 34 | } 35 | 36 | .icon-invalid:before { 37 | content: "\2714"; 38 | font-family: 'IconicFill'; 39 | margin-right: 10px; 40 | } 41 | -------------------------------------------------------------------------------- /exemplos/05/icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Avançar

13 |

Ir para a próxima página

14 | 15 |

E-mail enviado com sucesso!

16 |

Atenção, preencha todos os campos do formulário

17 | 18 | 19 | -------------------------------------------------------------------------------- /exemplos/05/images/sf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/05/images/sf.jpg -------------------------------------------------------------------------------- /exemplos/05/lobster.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Lobster'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('Lobster'), url(lobster.woff) format('woff'); 6 | } 7 | 8 | h1 { 9 | font-family: 'Lobster', cursive; 10 | } 11 | 12 | h1.cursive { 13 | font-family: cursive; 14 | } 15 | -------------------------------------------------------------------------------- /exemplos/05/lobster.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Trabalhando com @font-face

12 |

Trabalhando com @font-face

13 | 14 | 15 | -------------------------------------------------------------------------------- /exemplos/05/lobster.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/05/lobster.woff -------------------------------------------------------------------------------- /exemplos/05/rgba.css: -------------------------------------------------------------------------------- 1 | body { padding: 20px } 2 | 3 | ul { 4 | border: 1px solid rgba(0,0,0,0.3); 5 | color: white; 6 | height: 35px; 7 | list-style:none; 8 | padding: 0; 9 | width: 210px; 10 | } 11 | 12 | li { 13 | border-left: 1px solid rgba(255,255,255, 0.3); 14 | border-right: 1px solid rgba(0,0,0, 0.3); 15 | float: left; 16 | line-height: 35px; 17 | font-size: 0.9em; 18 | width: 50px; 19 | text-align: center; 20 | } 21 | 22 | li:first-child { border-left: none; } 23 | li:last-child { border-right: none; } 24 | 25 | ul.blue { background-color: blue; } 26 | ul.red { background-color:red; } 27 | ul.green { background-color: #008A00; } 28 | ul.gray { background-color: #CCC; } 29 | 30 | figure { 31 | position: relative; 32 | } 33 | 34 | img { 35 | display: block; 36 | } 37 | 38 | figcaption { 39 | bottom: 5px; 40 | margin: 0 5px; 41 | padding: 5px; 42 | position: absolute; 43 | width: 300px; 44 | } 45 | 46 | figcaption { 47 | background-color: #000; 48 | background-color: rgba(0,0,0,0.5); 49 | color: #FFF; 50 | } -------------------------------------------------------------------------------- /exemplos/05/rgba.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Uso de RGBA para bordas 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | Uso de 'rgba' para definir bordas transparentes para gerar tons diferentes da cor de fundo. 15 |

16 |
17 | 18 | 19 | 25 | 26 | 32 | 33 | 39 | 40 | 46 | 47 | 48 | 49 |
50 | A Golden Gate. 51 |
52 | San Francisco, Califórnia 53 | Por Salim Virji (http://www.flickr.com/photos/salim/402618628/) 54 |
55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /exemplos/05/text-shadow.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 40px; 3 | } 4 | 5 | h1 { 6 | background-color:#1D9AC0; 7 | color: #FFF; 8 | padding: 10px; 9 | text-shadow: 2px 4px 2px rgba(0,0,0,0.3); 10 | } 11 | 12 | .status { 13 | color: white; 14 | display: inline-block; 15 | font-weight: bold; 16 | font-weight: bold; 17 | padding: 7px 10px; 18 | text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); 19 | } 20 | 21 | .failed { 22 | background-color: #BD2C00; 23 | } 24 | 25 | .shipped { 26 | background-color: #6CC644; 27 | } 28 | 29 | .processing { 30 | background-color: #FC9800; 31 | } -------------------------------------------------------------------------------- /exemplos/05/text-shadow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

HTML & CSS

13 | 14 | Pagamento recusado 15 | Produto enviado 16 | Em aprovação 17 | 18 | 19 | -------------------------------------------------------------------------------- /exemplos/06/absolute.css: -------------------------------------------------------------------------------- 1 | header { 2 | margin-top: 30px; 3 | position: relative; 4 | } 5 | 6 | h1 { 7 | background-color: LightBlue; 8 | position: absolute; 9 | top: 20px; 10 | left: 30px; 11 | } 12 | 13 | -------------------------------------------------------------------------------- /exemplos/06/absolute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Posicionado com "absolute"

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /exemplos/06/column.css: -------------------------------------------------------------------------------- 1 | body { padding: 20px; } 2 | 3 | p { 4 | column-count: 3; 5 | column-gap: 10px; 6 | column-rule: 1px solid #666; 7 | font-size: 0.9em; 8 | width: 500px; 9 | } -------------------------------------------------------------------------------- /exemplos/06/column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

12 | Firefly é uma série de ficção científica criada pelo escritor/diretor Joss 13 | Whedon, criador de Buffy: A Caça Vampiros, Angel e Dollhouse, com sua 14 | companhia de produção Mutant Enemy Productions. Seu ambiente futurista 15 | naturalista, modelado a partir de temas dos filmes de Western tradicionais, 16 | apresenta um cenário de ficção científica atípico para a narrativa. Whedon 17 | também trabalhou como produtor executivo, junto com Tim Minear. 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /exemplos/06/display.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 20px; 3 | } 4 | 5 | p { 6 | background-color: LimeGreen; 7 | } 8 | 9 | span { 10 | background-color: LightBlue; 11 | } 12 | 13 | div > span { 14 | display: inline-block; 15 | } -------------------------------------------------------------------------------- /exemplos/06/display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | inline 13 | inline 14 |

block

15 |
16 | inline-block 17 | inline-block 18 | inline-block 19 |
20 | inline-blockinline-block 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /exemplos/06/flexbox.css: -------------------------------------------------------------------------------- 1 | body { padding: 20px; } 2 | 3 | .flexbox { 4 | display: flex; 5 | height: 60px; 6 | width: 300px; 7 | } 8 | .box { 9 | color: #FFF; 10 | display: block; 11 | flex: auto; 12 | font-weight: bold; 13 | height: 30px; 14 | line-height: 30px; 15 | text-align: center; 16 | } 17 | 18 | .one { background-color: #8820DD; } 19 | .two { background-color: #2BB15A; } 20 | .three { background-color: #755322; } 21 | .four { background-color: #02A3A3; } 22 | .five { background-color: #C6363D; } 23 | -------------------------------------------------------------------------------- /exemplos/06/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 1 14 | 2 15 | 3 16 |
17 | 18 |
19 | 1 20 | 2 21 | 3 22 | 4 23 | 5 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /exemplos/06/float-2.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 30px; 3 | } 4 | 5 | .clearfix::before, 6 | .clearfix::after { 7 | content: ""; 8 | display: table; 9 | } 10 | 11 | .clearfix::after { 12 | clear: both; 13 | } 14 | 15 | .page { 16 | background-color: #E8E8E8; 17 | padding: 10px; 18 | margin: 0 auto; 19 | width: 940px; 20 | } 21 | 22 | .posts { 23 | float: left; 24 | width: 600px; 25 | } 26 | 27 | h1 { 28 | float: left; 29 | margin: 0 0 20px; 30 | } 31 | 32 | .timestamp { 33 | background-color: #000; 34 | color: #FFF; 35 | float: right; 36 | font-size: 0.9em; 37 | margin-top: 10px; 38 | padding: 5px 10px; 39 | } 40 | 41 | p { 42 | clear: both; 43 | } 44 | 45 | aside { 46 | background-color: #FFFBE4; 47 | border: 1px solid #C9BC8F; 48 | float: right; 49 | padding: 10px; 50 | width: 200px; 51 | } 52 | 53 | aside h3 { 54 | margin: 0; 55 | } -------------------------------------------------------------------------------- /exemplos/06/float-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Título do post #1

16 | 3 semanas atrás 17 | 18 |

Uma breve descrição sobre o assunto abordado no post...

19 |
20 | 21 |
22 |

Título do post #2

23 | 3 semanas atrás 24 | 25 |

Uma breve descrição sobre o assunto abordado no post...

26 |
27 |
28 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /exemplos/06/float.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 30px; 3 | } 4 | 5 | h2 { 6 | float: left; 7 | margin: 0 20px 20px 0; 8 | } 9 | 10 | h4 { 11 | margin-top: 5px; 12 | } -------------------------------------------------------------------------------- /exemplos/06/float.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

#1

12 |

500 pontos

13 |

Prêmio para o campeão: 1 MacBook Pro 15".

14 | 15 | 16 | -------------------------------------------------------------------------------- /exemplos/06/grid-overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/06/grid-overlay.png -------------------------------------------------------------------------------- /exemplos/06/grid.css: -------------------------------------------------------------------------------- 1 | body { padding-top: 20px; } 2 | 3 | .container { 4 | width: 610px; 5 | padding: 10px; 6 | margin: 0 auto; 7 | } 8 | 9 | .column { 10 | margin-right: 20px; 11 | float: left; 12 | } 13 | 14 | .six-columns { 15 | width: 400px; 16 | } 17 | 18 | .three-columns { 19 | width: 188px; 20 | background-color: #FFFBE4; 21 | border: 1px solid #C9BC8F; 22 | float: right; 23 | margin: 20px 0 0 0; 24 | } 25 | 26 | ol { 27 | list-style: none; 28 | } 29 | 30 | .overlay { 31 | width: 630px; 32 | background: transparent url("grid-overlay.png"); 33 | position: absolute; 34 | top: 30px; 35 | left: 50%; 36 | margin-left: -315px; 37 | height: 300px; 38 | opacity: 0.3; 39 | } -------------------------------------------------------------------------------- /exemplos/06/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

15 |
16 | 24 |
25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /exemplos/06/himym.css: -------------------------------------------------------------------------------- 1 | body { width: 600px; margin: 20px; } 2 | 3 | img { 4 | float: left; 5 | margin-right: 10px; 6 | } -------------------------------------------------------------------------------- /exemplos/06/himym.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |

How I Met Your Mother

12 | 13 |

14 | A série gira em torno da vida de Ted Mosby e dos seus amigos, 15 | que é narrada pelo próprio aos seus filhos, 25 anos mais tarde. 16 | Bob Saget, como Ted Mosby do futuro, conta então aos filhos as 17 | histórias e peripécias que o levaram a conhecer a mãe deles. 18 | As outras personagens principais são Marshall Eriksen, 19 | Robin Scherbatsky, Lily Aldrin e Barney Stinson. 20 |

21 | 22 |

23 | Em 2005, aos 27 anos, o jovem Ted Mosby (Josh Radnor), após o 24 | seu melhor amigo, Marshall Eriksen (Jason Segel), ficar noivo, 25 | decide finalmente ir em busca da sua cara-metade. Com gestos 26 | românticos questionáveis, Ted conhece Robin Scherbatsky 27 | (Cobie Smulders), no bar que costumavam frequentar, 28 | Maclaren's Pub. 29 |

30 | 31 | 32 | -------------------------------------------------------------------------------- /exemplos/06/himym.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/06/himym.jpg -------------------------------------------------------------------------------- /exemplos/06/modal.css: -------------------------------------------------------------------------------- 1 | body { padding: 20px; } 2 | 3 | .overlay { 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | background-color: rgba(0, 0, 0, 0.5); 8 | width: 100%; 9 | height: 100%; 10 | } 11 | 12 | .notice, .overlay { 13 | display: none; 14 | } 15 | 16 | .notice .close { 17 | background-color: #FF1A2D; 18 | color: #FFF; 19 | padding: 5px; 20 | position: absolute; 21 | right: -25px; 22 | top: -12px; 23 | } 24 | 25 | .notice { 26 | background-color: #FFF; 27 | border: 1px solid #000; 28 | height: 130px; 29 | padding: 10px; 30 | width: 380px; 31 | position: fixed; 32 | top: 50%; 33 | left:50%; 34 | margin: -75px 0 0 -200px; 35 | z-index: 1; 36 | } -------------------------------------------------------------------------------- /exemplos/06/modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | modal 6 | 7 | 8 | 9 | 10 | 11 | 12 | Exibir modal 13 | 14 |
15 |

Atenção

16 |

Aqui você pode exibir alguma mensagem importante, que ela irá 17 | sobrepor todo o conteúdo do seu site. 18 |

19 | Fechar 20 |
21 |
22 | 23 | 24 | 25 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /exemplos/06/relative.css: -------------------------------------------------------------------------------- 1 | body { padding: 20px; } 2 | 3 | .box { 4 | background-color: PapayaWhip; 5 | height: 100px; 6 | width: 100px; 7 | position: relative; 8 | top: 30px; 9 | left: 5px; 10 | } -------------------------------------------------------------------------------- /exemplos/06/relative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | Teste 14 |
15 |

Um parágrafo de texto logo abaixo

16 | 17 | 18 | -------------------------------------------------------------------------------- /exemplos/07/form.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0 10px; 3 | } 4 | 5 | label { 6 | display: inline-block; 7 | font-size: 0.9em; 8 | font-weight: bold; 9 | width: 90px; 10 | } 11 | 12 | input, textarea { 13 | display: inline-block; 14 | width: 200px; 15 | border: 1px solid #CCC; 16 | box-shadow: inset 2px 2px 2px #EEE; 17 | padding: 2px 5px; 18 | font-size: 0.9em; 19 | } 20 | 21 | textarea { 22 | height: 100px; 23 | } 24 | 25 | span { 26 | font-size: 0.8em; 27 | } 28 | 29 | .hint { 30 | background-color: #FFFBE4; 31 | border-radius: 3px; 32 | border: 1px solid #CCC; 33 | box-shadow: 1px 1px 3px rgba(0,0,0,0.2); 34 | display: none; 35 | margin-left: 20px; 36 | padding: 3px; 37 | font-size: 0.8em; 38 | } 39 | 40 | .error { 41 | color: red; 42 | display: block; 43 | font-style: italic; 44 | margin: 5px 0 0 90px; 45 | font-size: 0.8em; 46 | } 47 | 48 | input:focus + .hint, textarea:focus + .hint { 49 | display: inline-block; 50 | } 51 | 52 | .animated .hint { 53 | display: inline-block; 54 | margin-left: 0; 55 | opacity: 0; 56 | transition: all 0.5s; 57 | } 58 | 59 | .animated input:focus + .hint,.animated textarea:focus + .hint { 60 | margin-left: 20px; 61 | opacity: 1; 62 | } 63 | 64 | /*Base color #4183C4 65 | */ 66 | 67 | button { 68 | background-color: #E5E5E5; 69 | background-image: linear-gradient(to top, #E5E5E5, #FFF); 70 | border: 1px solid #AAA; 71 | border-radius: 3px; 72 | color: #000; 73 | font-size: 0.8em; 74 | font-weight: bold; 75 | padding: 5px 10px; 76 | } 77 | 78 | button:hover { 79 | background-color: #285582; 80 | background-image: linear-gradient(to top, #285582, #3775B3); 81 | border-color: #204569; 82 | color: #FFF; 83 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6); 84 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 3px #3775B3; 85 | } 86 | 87 | button:active { 88 | box-shadow: inset 0 2px 1px rgba(0,0,0, 0.15); 89 | background-image: none; 90 | background-color: #204569; 91 | border-color: #1A3754; 92 | } 93 | -------------------------------------------------------------------------------- /exemplos/07/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formulário completo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | 14 | 15 | por exemplo, seunome@dominio.com. 16 | Preencha o seu e-mail corretamente. 17 |

18 | 19 |

20 | 21 | 22 | Nos diga qual é o seu problema ou idéia. 23 |

24 | 25 |

26 | 27 | 28 | Escreva a sua mensagem, em até 500 caracteres. 29 |

30 | 31 |

32 | 33 |

34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /exemplos/07/placeholder.css: -------------------------------------------------------------------------------- 1 | form { 2 | padding: 10px; 3 | } 4 | label { 5 | display: none; 6 | } 7 | 8 | input { 9 | display: block; 10 | width: 150px; 11 | } 12 | 13 | input { 14 | border-radius: 3px 3px 0 0; 15 | border: 1px solid #999; 16 | font-size: 0.8em; 17 | font-weight: bold; 18 | padding: 5px; 19 | box-shadow: 1px 1px 5px rgba(0,0,0,0.2); 20 | } 21 | 22 | button { 23 | margin-top: 5px; 24 | } 25 | 26 | input[type='password'] { 27 | border-radius: 0 0 3px 3px; 28 | border-top: none; 29 | } 30 | 31 | input { 32 | font-weight: bold; 33 | } 34 | 35 | ::-webkit-input-placeholder { 36 | color: #666; 37 | font-style: italic; 38 | font-weight: normal; 39 | } 40 | 41 | :-moz-placeholder { 42 | color: #666; 43 | font-style: italic; 44 | font-weight: normal; 45 | } 46 | 47 | -ms-input-placeholder { 48 | color: #666; 49 | font-style: italic; 50 | font-weight: normal; 51 | } 52 | 53 | .no-placeholder input { 54 | border-radius: 3px; 55 | } 56 | 57 | .no-placeholder input[type='password'] { 58 | border-top: 1px solid #999; 59 | } 60 | 61 | .no-placeholder label { 62 | display: block; 63 | } 64 | 65 | /* Base color #87C442 */ 66 | button { 67 | border: 1px solid #588129; 68 | color: white; 69 | background-color: #6DA033; 70 | background-image: linear-gradient(to top, #6DA033 47%, #87C442 55%); 71 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); 72 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6); 73 | border-radius: 13px; 74 | font-size: 0.8em; 75 | padding: 5px 10px; 76 | font-weight: bold; 77 | } 78 | 79 | button:hover { 80 | border-color: #4E7324; 81 | background-color: #618F2D; 82 | background-image: linear-gradient(to top, #618F2D 47%, #79B238 55%); 83 | } 84 | 85 | button:active { 86 | box-shadow: inset 0 2px 1px rgba(0,0,0, 0.15); 87 | background-image: none; 88 | background-color: #618F2D; 89 | border-color: #405E1E; 90 | } 91 | -------------------------------------------------------------------------------- /exemplos/07/placeholder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formulário utilizando placeholder 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /exemplos/08/animation.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 50px; 3 | } 4 | 5 | .relative { 6 | position: relative; 7 | padding: 40px 0; 8 | } 9 | 10 | .loading { 11 | animation: pulse 1.5s infinite; 12 | background-color: #666; 13 | border-radius: 50%; 14 | font: 0/0 serif; 15 | position: absolute; 16 | } 17 | 18 | .shaked { 19 | background-color: #990000; 20 | border: 1px solid #990000; 21 | background-image: linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); 22 | text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4); 23 | text-decoration: none; 24 | border-radius: 5px; 25 | color: white; 26 | font-weight: bold; 27 | padding: 5px 10px; 28 | font-size: 0.8em; 29 | position: absolute; 30 | } 31 | 32 | .shaked:hover { 33 | animation: shake 3s; 34 | } 35 | 36 | h1 { 37 | animation: appear 2s 0s linear; 38 | color: #000; 39 | font-size: 1.4em; 40 | text-align: center; 41 | transform: scale(1.2); 42 | transform-origin: 50% 50%; 43 | } 44 | 45 | @keyframes appear { 46 | 0% { 47 | opacity: 0; 48 | transform: scale(2); 49 | } 50 | 70% { 51 | opacity: 1; 52 | transform: scale(1); 53 | } 54 | 100% { 55 | transform: scale(1.2); 56 | } 57 | } 58 | 59 | @keyframes shake { 60 | 10%, 30%, 50%, 70%, 90% { 61 | transform: translateX(-15px); 62 | } 63 | 20%, 40%, 60%, 80% { 64 | transform: translateX(15px); 65 | } 66 | } 67 | 68 | @keyframes pulse { 69 | 0% { 70 | width: 0; 71 | height: 0; 72 | opacity: 1; 73 | top: 50px; 74 | left: 50px; 75 | } 76 | 100% { 77 | width: 30px; 78 | height: 30px; 79 | opacity: 0; 80 | top: 35px; 81 | left: 35px; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /exemplos/08/animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Animações 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Bem vindo!

14 |
15 | 16 |
17 | Carregando... 18 |
19 |
20 | Clique aqui 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /exemplos/08/flip.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 30px; 3 | } 4 | 5 | .container { 6 | height: 300px; 7 | perspective: 500px; 8 | position: relative; 9 | width: 200px; 10 | } 11 | 12 | form { 13 | font-size: 0.8em; 14 | padding: 10px; 15 | } 16 | 17 | label { 18 | display: block; 19 | font-weight: bold; 20 | } 21 | 22 | input { 23 | border: 1px solid #CCC; 24 | box-shadow: inset 2px 2px 2px #EEE; 25 | font-size: 0.9em; 26 | padding: 2px 5px; 27 | } 28 | 29 | .card { 30 | border-radius: 5px; 31 | border: 1px solid #CCC; 32 | height: 100%; 33 | position: absolute; 34 | transform-style: preserve-3d; 35 | transition: transform 1s; 36 | width: 100%; 37 | } 38 | 39 | .card.flipped { 40 | transform: rotateY(180deg); 41 | } 42 | 43 | .card section { 44 | backface-visibility: hidden; 45 | background-color: #FFF; 46 | border-radius: 5px; 47 | position: absolute; 48 | } 49 | 50 | .signup { 51 | transform: rotateY(180deg); 52 | } -------------------------------------------------------------------------------- /exemplos/08/flip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formulários com Flip Card 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | Transição entre 2 formulários no mesmo container usando uma animação 3D. 15 |

16 | 17 |

Para alterar o sentido da animação - de horizontal para vertical - basta renomenar o "rotateY" por "rotateX" no CSS. 18 |

19 |
20 | 21 | 22 |
23 |
24 | 43 | 44 | 61 |
62 |
63 | 64 | 65 | 66 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /exemplos/08/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formulário completo com animações! 6 | 7 | 8 | 9 | 10 | 11 |
12 |

13 | 14 | 15 | por exemplo, seunome@dominio.com. 16 | Preencha o seu e-mail corretamente. 17 |

18 | 19 |

20 | 21 | 22 | Nos diga qual é o seu problema ou idéia. 23 |

24 | 25 |

26 | 27 | 28 | Escreva a sua mensagem, em até 500 caracteres. 29 |

30 | 31 |

32 | 33 |

34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /exemplos/08/pics/erich.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/08/pics/erich.png -------------------------------------------------------------------------------- /exemplos/08/pics/galdino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/08/pics/galdino.png -------------------------------------------------------------------------------- /exemplos/08/pics/lucas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/08/pics/lucas.png -------------------------------------------------------------------------------- /exemplos/08/pics/rondy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lucasmazza/htmlcss-exemplos/195f8ee746e4864561b7d494e9c9fc0d1c36dc13/exemplos/08/pics/rondy.png -------------------------------------------------------------------------------- /exemplos/08/transform.css: -------------------------------------------------------------------------------- 1 | body { padding: 30px; } 2 | 3 | li { margin-bottom: 30px; } 4 | ul { clear:both; } 5 | 6 | ul { 7 | list-style: none; 8 | padding: 0; 9 | } 10 | 11 | li { 12 | float: left; 13 | margin-left: 10px; 14 | transition: transform 0.2s linear; 15 | } 16 | 17 | span { 18 | margin-top: 5px; 19 | display: block; 20 | font-weight: bold; 21 | text-align: center; 22 | color: #153755; 23 | } 24 | 25 | .scale-and-rotate li:nth-child(even) { 26 | transform: rotate(5deg); 27 | } 28 | 29 | .scale-and-rotate li:nth-child(odd) { 30 | transform: rotate(-5deg); 31 | } 32 | 33 | .scale-and-rotate li:hover { 34 | transform: scale(1.3); 35 | z-index: 1; 36 | } 37 | 38 | /* Usando 'skew' */ 39 | .skew li { 40 | transform: skew(10deg, 10deg); 41 | } 42 | 43 | /* Usando 'translate' */ 44 | .translate li:nth-child(even) { 45 | transform: translateY(10px); 46 | } 47 | 48 | .translate li:nth-child(odd) { 49 | transform: translateY(-10px); 50 | } 51 | -------------------------------------------------------------------------------- /exemplos/08/transform.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Coleção de transforms 6 | 7 | 8 | 9 | 10 | 11 |

Reforços da Plataformatec em 2012

12 | 13 | 31 | 32 | 50 | 51 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /exemplos/10/bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bootstrap 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Exemplo do Bootstrap

13 | 14 |
15 | 16 |
17 | 18 | 19 |

Usaremos o seu e-mail para responder a sua mensagem! Nada de spams.

20 |
21 |
22 | 23 |
24 | 25 |
26 | 27 |

Nos diga qual é o seu problema ou idéia.

28 |
29 |
30 | 31 |
32 | 33 |
34 | 35 |

Escreva a sua mensagem para a equipe do site.

36 |
37 |
38 | 39 |
40 | 41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /exemplos/vendor/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v2.1.3 | MIT License | git.io/normalize */ 2 | 3 | /* ========================================================================== 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /** 8 | * Correct `block` display not defined in IE 8/9. 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | main, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | /** 27 | * Correct `inline-block` display not defined in IE 8/9. 28 | */ 29 | 30 | audio, 31 | canvas, 32 | video { 33 | display: inline-block; 34 | } 35 | 36 | /** 37 | * Prevent modern browsers from displaying `audio` without controls. 38 | * Remove excess height in iOS 5 devices. 39 | */ 40 | 41 | audio:not([controls]) { 42 | display: none; 43 | height: 0; 44 | } 45 | 46 | /** 47 | * Address `[hidden]` styling not present in IE 8/9. 48 | * Hide the `template` element in IE, Safari, and Firefox < 22. 49 | */ 50 | 51 | [hidden], 52 | template { 53 | display: none; 54 | } 55 | 56 | /* ========================================================================== 57 | Base 58 | ========================================================================== */ 59 | 60 | /** 61 | * 1. Set default font family to sans-serif. 62 | * 2. Prevent iOS text size adjust after orientation change, without disabling 63 | * user zoom. 64 | */ 65 | 66 | html { 67 | font-family: sans-serif; /* 1 */ 68 | -ms-text-size-adjust: 100%; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 2 */ 70 | } 71 | 72 | /** 73 | * Remove default margin. 74 | */ 75 | 76 | body { 77 | margin: 0; 78 | } 79 | 80 | /* ========================================================================== 81 | Links 82 | ========================================================================== */ 83 | 84 | /** 85 | * Remove the gray background color from active links in IE 10. 86 | */ 87 | 88 | a { 89 | background: transparent; 90 | } 91 | 92 | /** 93 | * Address `outline` inconsistency between Chrome and other browsers. 94 | */ 95 | 96 | a:focus { 97 | outline: thin dotted; 98 | } 99 | 100 | /** 101 | * Improve readability when focused and also mouse hovered in all browsers. 102 | */ 103 | 104 | a:active, 105 | a:hover { 106 | outline: 0; 107 | } 108 | 109 | /* ========================================================================== 110 | Typography 111 | ========================================================================== */ 112 | 113 | /** 114 | * Address variable `h1` font-size and margin within `section` and `article` 115 | * contexts in Firefox 4+, Safari 5, and Chrome. 116 | */ 117 | 118 | h1 { 119 | font-size: 2em; 120 | margin: 0.67em 0; 121 | } 122 | 123 | /** 124 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 125 | */ 126 | 127 | abbr[title] { 128 | border-bottom: 1px dotted; 129 | } 130 | 131 | /** 132 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: bold; 138 | } 139 | 140 | /** 141 | * Address styling not present in Safari 5 and Chrome. 142 | */ 143 | 144 | dfn { 145 | font-style: italic; 146 | } 147 | 148 | /** 149 | * Address differences between Firefox and other browsers. 150 | */ 151 | 152 | hr { 153 | -moz-box-sizing: content-box; 154 | box-sizing: content-box; 155 | height: 0; 156 | } 157 | 158 | /** 159 | * Address styling not present in IE 8/9. 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /** 168 | * Correct font family set oddly in Safari 5 and Chrome. 169 | */ 170 | 171 | code, 172 | kbd, 173 | pre, 174 | samp { 175 | font-family: monospace, serif; 176 | font-size: 1em; 177 | } 178 | 179 | /** 180 | * Improve readability of pre-formatted text in all browsers. 181 | */ 182 | 183 | pre { 184 | white-space: pre-wrap; 185 | } 186 | 187 | /** 188 | * Set consistent quote types. 189 | */ 190 | 191 | q { 192 | quotes: "\201C" "\201D" "\2018" "\2019"; 193 | } 194 | 195 | /** 196 | * Address inconsistent and variable font size in all browsers. 197 | */ 198 | 199 | small { 200 | font-size: 80%; 201 | } 202 | 203 | /** 204 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 205 | */ 206 | 207 | sub, 208 | sup { 209 | font-size: 75%; 210 | line-height: 0; 211 | position: relative; 212 | vertical-align: baseline; 213 | } 214 | 215 | sup { 216 | top: -0.5em; 217 | } 218 | 219 | sub { 220 | bottom: -0.25em; 221 | } 222 | 223 | /* ========================================================================== 224 | Embedded content 225 | ========================================================================== */ 226 | 227 | /** 228 | * Remove border when inside `a` element in IE 8/9. 229 | */ 230 | 231 | img { 232 | border: 0; 233 | } 234 | 235 | /** 236 | * Correct overflow displayed oddly in IE 9. 237 | */ 238 | 239 | svg:not(:root) { 240 | overflow: hidden; 241 | } 242 | 243 | /* ========================================================================== 244 | Figures 245 | ========================================================================== */ 246 | 247 | /** 248 | * Address margin not present in IE 8/9 and Safari 5. 249 | */ 250 | 251 | figure { 252 | margin: 0; 253 | } 254 | 255 | /* ========================================================================== 256 | Forms 257 | ========================================================================== */ 258 | 259 | /** 260 | * Define consistent border, margin, and padding. 261 | */ 262 | 263 | fieldset { 264 | border: 1px solid #c0c0c0; 265 | margin: 0 2px; 266 | padding: 0.35em 0.625em 0.75em; 267 | } 268 | 269 | /** 270 | * 1. Correct `color` not being inherited in IE 8/9. 271 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 272 | */ 273 | 274 | legend { 275 | border: 0; /* 1 */ 276 | padding: 0; /* 2 */ 277 | } 278 | 279 | /** 280 | * 1. Correct font family not being inherited in all browsers. 281 | * 2. Correct font size not being inherited in all browsers. 282 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 283 | */ 284 | 285 | button, 286 | input, 287 | select, 288 | textarea { 289 | font-family: inherit; /* 1 */ 290 | font-size: 100%; /* 2 */ 291 | margin: 0; /* 3 */ 292 | } 293 | 294 | /** 295 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 296 | * the UA stylesheet. 297 | */ 298 | 299 | button, 300 | input { 301 | line-height: normal; 302 | } 303 | 304 | /** 305 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 306 | * All other form control elements do not inherit `text-transform` values. 307 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 308 | * Correct `select` style inheritance in Firefox 4+ and Opera. 309 | */ 310 | 311 | button, 312 | select { 313 | text-transform: none; 314 | } 315 | 316 | /** 317 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 318 | * and `video` controls. 319 | * 2. Correct inability to style clickable `input` types in iOS. 320 | * 3. Improve usability and consistency of cursor style between image-type 321 | * `input` and others. 322 | */ 323 | 324 | button, 325 | html input[type="button"], /* 1 */ 326 | input[type="reset"], 327 | input[type="submit"] { 328 | -webkit-appearance: button; /* 2 */ 329 | cursor: pointer; /* 3 */ 330 | } 331 | 332 | /** 333 | * Re-set default cursor for disabled elements. 334 | */ 335 | 336 | button[disabled], 337 | html input[disabled] { 338 | cursor: default; 339 | } 340 | 341 | /** 342 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 343 | * 2. Remove excess padding in IE 8/9/10. 344 | */ 345 | 346 | input[type="checkbox"], 347 | input[type="radio"] { 348 | box-sizing: border-box; /* 1 */ 349 | padding: 0; /* 2 */ 350 | } 351 | 352 | /** 353 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 354 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 355 | * (include `-moz` to future-proof). 356 | */ 357 | 358 | input[type="search"] { 359 | -webkit-appearance: textfield; /* 1 */ 360 | -moz-box-sizing: content-box; 361 | -webkit-box-sizing: content-box; /* 2 */ 362 | box-sizing: content-box; 363 | } 364 | 365 | /** 366 | * Remove inner padding and search cancel button in Safari 5 and Chrome 367 | * on OS X. 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Remove inner padding and border in Firefox 4+. 377 | */ 378 | 379 | button::-moz-focus-inner, 380 | input::-moz-focus-inner { 381 | border: 0; 382 | padding: 0; 383 | } 384 | 385 | /** 386 | * 1. Remove default vertical scrollbar in IE 8/9. 387 | * 2. Improve readability and alignment in all browsers. 388 | */ 389 | 390 | textarea { 391 | overflow: auto; /* 1 */ 392 | vertical-align: top; /* 2 */ 393 | } 394 | 395 | /* ========================================================================== 396 | Tables 397 | ========================================================================== */ 398 | 399 | /** 400 | * Remove most spacing between table cells. 401 | */ 402 | 403 | table { 404 | border-collapse: collapse; 405 | border-spacing: 0; 406 | } 407 | -------------------------------------------------------------------------------- /exemplos/vendor/prefixfree.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StyleFix 1.0.3 & PrefixFree 1.0.7 3 | * @author Lea Verou 4 | * MIT license 5 | */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=(/^[a-z]{3,10}:/.exec(i)||[""])[0],o=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(i)||[""])[0],u=/^([^?]*)\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function(){f.readyState===4&&l()};l=function(){var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|#)/i.test(n)?e:/^\/\//.test(n)?'url("'+s+n+'")':/^\//.test(n)?'url("'+o+n+'")':/^\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var l=document.createElement("style");l.textContent=n;l.media=t.media;l.disabled=t.disabled;l.setAttribute("data-href",t.getAttribute("href"));a.insertBefore(l,t);a.removeChild(t);l.media=t.media}};try{f.open("GET",r);f.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){f=new XDomainRequest;f.onerror=f.onprogress=function(){};f.onload=l;f.open("GET",r);f.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a 2 | 3 | 4 | 5 | 6 | 7 | 8 | Exemplos do livro HTML5 e CSS3: Domine a web do futuro 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

Exemplos do livro

22 |

HTML5 e CSS3: Domine a web do futuro

23 |
24 | 25 |
26 | 27 | Compre já a sua cópia! 28 | 29 | Versão digital, DRM-free, R$ 39,90 30 |
31 | 32 |

33 | A seguir estão os exemplos de código criados no decorrer do livro. Este site também se encontra 34 | disponível em https://github.com/lucasmazza/htmlcss-exemplos. 35 |

36 | 37 |

38 | Caso você queria começar a escrever os exemplos do livro sozinho, não deixe de baixar o 39 | template utilizado em todos os exemplos. 40 |

41 | 42 |

Capítulo 1 - O desenvolvimento web hoje

43 | 46 | 47 |

Capítulo 4 - O que todo desenvolvedor precisa saber sobre CSS

48 | 55 | 56 |

Capítulo 5 - O que você consegue fazer com CSS3

57 | 66 | 67 |

Capítulo 6 - Tomando controle da estrutura visual

68 | 80 | 81 |

Capítulo 7 - Melhorando os seus formulários

82 | 86 | 87 |

Capítulo 8 - Efeitos 101: Trabalhando com animações e transições

88 | 94 |
95 | 96 | 97 | -------------------------------------------------------------------------------- /javascripts/modernizr.min.js: -------------------------------------------------------------------------------- 1 | window.Modernizr=function(window,document,undefined){var version="2.6.2",Modernizr={},enableClasses=true,docElement=document.documentElement,mod="modernizr",modElem=document.createElement(mod),mStyle=modElem.style,inputElem=document.createElement("input"),smile=":)",toString={}.toString,prefixes=" -webkit- -moz- -o- -ms- ".split(" "),omPrefixes="Webkit Moz O ms",cssomPrefixes=omPrefixes.split(" "),domPrefixes=omPrefixes.toLowerCase().split(" "),ns={svg:"http://www.w3.org/2000/svg"},tests={},inputs={},attrs={},classes=[],slice=classes.slice,featureName,injectElementWithStyles=function(rule,callback,nodes,testnames){var style,ret,node,docOverflow,div=document.createElement("div"),body=document.body,fakeBody=body||document.createElement("body");if(parseInt(nodes,10)){while(nodes--){node=document.createElement("div");node.id=testnames?testnames[nodes]:mod+(nodes+1);div.appendChild(node)}}style=["­",'"].join("");div.id=mod;(body?div:fakeBody).innerHTML+=style;fakeBody.appendChild(div);if(!body){fakeBody.style.background="";fakeBody.style.overflow="hidden";docOverflow=docElement.style.overflow;docElement.style.overflow="hidden";docElement.appendChild(fakeBody)}ret=callback(div,rule);if(!body){fakeBody.parentNode.removeChild(fakeBody);docElement.style.overflow=docOverflow}else{div.parentNode.removeChild(div)}return!!ret},testMediaQuery=function(mq){var matchMedia=window.matchMedia||window.msMatchMedia;if(matchMedia){return matchMedia(mq).matches}var bool;injectElementWithStyles("@media "+mq+" { #"+mod+" { position: absolute; } }",function(node){bool=(window.getComputedStyle?getComputedStyle(node,null):node.currentStyle)["position"]=="absolute"});return bool},isEventSupported=function(){var TAGNAMES={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};function isEventSupported(eventName,element){element=element||document.createElement(TAGNAMES[eventName]||"div");eventName="on"+eventName;var isSupported=eventName in element;if(!isSupported){if(!element.setAttribute){element=document.createElement("div")}if(element.setAttribute&&element.removeAttribute){element.setAttribute(eventName,"");isSupported=is(element[eventName],"function");if(!is(element[eventName],"undefined")){element[eventName]=undefined}element.removeAttribute(eventName)}}element=null;return isSupported}return isEventSupported}(),_hasOwnProperty={}.hasOwnProperty,hasOwnProp;if(!is(_hasOwnProperty,"undefined")&&!is(_hasOwnProperty.call,"undefined")){hasOwnProp=function(object,property){return _hasOwnProperty.call(object,property)}}else{hasOwnProp=function(object,property){return property in object&&is(object.constructor.prototype[property],"undefined")}}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError}var args=slice.call(arguments,1),bound=function(){if(this instanceof bound){var F=function(){};F.prototype=target.prototype;var self=new F;var result=target.apply(self,args.concat(slice.call(arguments)));if(Object(result)===result){return result}return self}else{return target.apply(that,args.concat(slice.call(arguments)))}};return bound}}function setCss(str){mStyle.cssText=str}function setCssAll(str1,str2){return setCss(prefixes.join(str1+";")+(str2||""))}function is(obj,type){return typeof obj===type}function contains(str,substr){return!!~(""+str).indexOf(substr)}function testProps(props,prefixed){for(var i in props){var prop=props[i];if(!contains(prop,"-")&&mStyle[prop]!==undefined){return prefixed=="pfx"?prop:true}}return false}function testDOMProps(props,obj,elem){for(var i in props){var item=obj[props[i]];if(item!==undefined){if(elem===false)return props[i];if(is(item,"function")){return item.bind(elem||obj)}return item}}return false}function testPropsAll(prop,prefixed,elem){var ucProp=prop.charAt(0).toUpperCase()+prop.slice(1),props=(prop+" "+cssomPrefixes.join(ucProp+" ")+ucProp).split(" ");if(is(prefixed,"string")||is(prefixed,"undefined")){return testProps(props,prefixed)}else{props=(prop+" "+domPrefixes.join(ucProp+" ")+ucProp).split(" ");return testDOMProps(props,prefixed,elem)}}tests["flexbox"]=function(){return testPropsAll("flexWrap")};tests["flexboxlegacy"]=function(){return testPropsAll("boxDirection")};tests["canvas"]=function(){var elem=document.createElement("canvas");return!!(elem.getContext&&elem.getContext("2d"))};tests["canvastext"]=function(){return!!(Modernizr["canvas"]&&is(document.createElement("canvas").getContext("2d").fillText,"function"))};tests["webgl"]=function(){return!!window.WebGLRenderingContext};tests["touch"]=function(){var bool;if("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch){bool=true}else{injectElementWithStyles(["@media (",prefixes.join("touch-enabled),("),mod,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(node){bool=node.offsetTop===9})}return bool};tests["geolocation"]=function(){return"geolocation"in navigator};tests["postmessage"]=function(){return!!window.postMessage};tests["websqldatabase"]=function(){return!!window.openDatabase};tests["indexedDB"]=function(){return!!testPropsAll("indexedDB",window)};tests["hashchange"]=function(){return isEventSupported("hashchange",window)&&(document.documentMode===undefined||document.documentMode>7)};tests["history"]=function(){return!!(window.history&&history.pushState)};tests["draganddrop"]=function(){var div=document.createElement("div");return"draggable"in div||"ondragstart"in div&&"ondrop"in div};tests["websockets"]=function(){return"WebSocket"in window||"MozWebSocket"in window};tests["rgba"]=function(){setCss("background-color:rgba(150,255,150,.5)");return contains(mStyle.backgroundColor,"rgba")};tests["hsla"]=function(){setCss("background-color:hsla(120,40%,100%,.5)");return contains(mStyle.backgroundColor,"rgba")||contains(mStyle.backgroundColor,"hsla")};tests["multiplebgs"]=function(){setCss("background:url(https://),url(https://),red url(https://)");return/(url\s*\(.*?){3}/.test(mStyle.background)};tests["backgroundsize"]=function(){return testPropsAll("backgroundSize")};tests["borderimage"]=function(){return testPropsAll("borderImage")};tests["borderradius"]=function(){return testPropsAll("borderRadius")};tests["boxshadow"]=function(){return testPropsAll("boxShadow")};tests["textshadow"]=function(){return document.createElement("div").style.textShadow===""};tests["opacity"]=function(){setCssAll("opacity:.55");return/^0.55$/.test(mStyle.opacity)};tests["cssanimations"]=function(){return testPropsAll("animationName")};tests["csscolumns"]=function(){return testPropsAll("columnCount")};tests["cssgradients"]=function(){var str1="background-image:",str2="gradient(linear,left top,right bottom,from(#9f9),to(white));",str3="linear-gradient(left top,#9f9, white);";setCss((str1+"-webkit- ".split(" ").join(str2+str1)+prefixes.join(str3+str1)).slice(0,-str1.length));return contains(mStyle.backgroundImage,"gradient")};tests["cssreflections"]=function(){return testPropsAll("boxReflect")};tests["csstransforms"]=function(){return!!testPropsAll("transform")};tests["csstransforms3d"]=function(){var ret=!!testPropsAll("perspective");if(ret&&"webkitPerspective"in docElement.style){injectElementWithStyles("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(node,rule){ret=node.offsetLeft===9&&node.offsetHeight===3})}return ret};tests["csstransitions"]=function(){return testPropsAll("transition")};tests["fontface"]=function(){var bool;injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}',function(node,rule){var style=document.getElementById("smodernizr"),sheet=style.sheet||style.styleSheet,cssText=sheet?sheet.cssRules&&sheet.cssRules[0]?sheet.cssRules[0].cssText:sheet.cssText||"":"";bool=/src/i.test(cssText)&&cssText.indexOf(rule.split(" ")[0])===0});return bool};tests["generatedcontent"]=function(){var bool;injectElementWithStyles(["#",mod,"{font:0/0 a}#",mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(""),function(node){bool=node.offsetHeight>=3});return bool};tests["video"]=function(){var elem=document.createElement("video"),bool=false;try{if(bool=!!elem.canPlayType){bool=new Boolean(bool);bool.ogg=elem.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,"");bool.h264=elem.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,"");bool.webm=elem.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}}catch(e){}return bool};tests["audio"]=function(){var elem=document.createElement("audio"),bool=false;try{if(bool=!!elem.canPlayType){bool=new Boolean(bool);bool.ogg=elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,"");bool.mp3=elem.canPlayType("audio/mpeg;").replace(/^no$/,"");bool.wav=elem.canPlayType('audio/wav; codecs="1"').replace(/^no$/,"");bool.m4a=(elem.canPlayType("audio/x-m4a;")||elem.canPlayType("audio/aac;")).replace(/^no$/,"")}}catch(e){}return bool};tests["localstorage"]=function(){try{localStorage.setItem(mod,mod);localStorage.removeItem(mod);return true}catch(e){return false}};tests["sessionstorage"]=function(){try{sessionStorage.setItem(mod,mod);sessionStorage.removeItem(mod);return true}catch(e){return false}};tests["webworkers"]=function(){return!!window.Worker};tests["applicationcache"]=function(){return!!window.applicationCache};tests["svg"]=function(){return!!document.createElementNS&&!!document.createElementNS(ns.svg,"svg").createSVGRect};tests["inlinesvg"]=function(){var div=document.createElement("div");div.innerHTML="";return(div.firstChild&&div.firstChild.namespaceURI)==ns.svg};tests["smil"]=function(){return!!document.createElementNS&&/SVGAnimate/.test(toString.call(document.createElementNS(ns.svg,"animate")))};tests["svgclippaths"]=function(){return!!document.createElementNS&&/SVGClipPath/.test(toString.call(document.createElementNS(ns.svg,"clipPath")))};function webforms(){Modernizr["input"]=function(props){for(var i=0,len=props.length;i";supportsHtml5Styles="hidden"in a;supportsUnknownElements=a.childNodes.length==1||function(){document.createElement("a");var frag=document.createDocumentFragment();return typeof frag.cloneNode=="undefined"||typeof frag.createDocumentFragment=="undefined"||typeof frag.createElement=="undefined"}()}catch(e){supportsHtml5Styles=true;supportsUnknownElements=true}})();function addStyleSheet(ownerDocument,cssText){var p=ownerDocument.createElement("p"),parent=ownerDocument.getElementsByTagName("head")[0]||ownerDocument.documentElement;p.innerHTML="x";return parent.insertBefore(p.lastChild,parent.firstChild)}function getElements(){var elements=html5.elements;return typeof elements=="string"?elements.split(" "):elements}function getExpandoData(ownerDocument){var data=expandoData[ownerDocument[expando]];if(!data){data={};expanID++;ownerDocument[expando]=expanID;expandoData[expanID]=data}return data}function createElement(nodeName,ownerDocument,data){if(!ownerDocument){ownerDocument=document}if(supportsUnknownElements){return ownerDocument.createElement(nodeName)}if(!data){data=getExpandoData(ownerDocument)}var node;if(data.cache[nodeName]){node=data.cache[nodeName].cloneNode()}else if(saveClones.test(nodeName)){node=(data.cache[nodeName]=data.createElem(nodeName)).cloneNode()}else{node=data.createElem(nodeName)}return node.canHaveChildren&&!reSkip.test(nodeName)?data.frag.appendChild(node):node}function createDocumentFragment(ownerDocument,data){if(!ownerDocument){ownerDocument=document}if(supportsUnknownElements){return ownerDocument.createDocumentFragment()}data=data||getExpandoData(ownerDocument);var clone=data.frag.cloneNode(),i=0,elems=getElements(),l=elems.length;for(;i 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /template/jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v2.0.3 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license 2 | //@ sourceMappingURL=jquery.min.map 3 | */ 4 | (function(e,undefined){var t,n,r=typeof undefined,i=e.location,o=e.document,s=o.documentElement,a=e.jQuery,u=e.$,l={},c=[],p="2.0.3",f=c.concat,h=c.push,d=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,x=function(e,n){return new x.fn.init(e,n,t)},b=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,w=/\S+/g,T=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,C=/^<(\w+)\s*\/?>(?:<\/\1>|)$/,k=/^-ms-/,N=/-([\da-z])/gi,E=function(e,t){return t.toUpperCase()},S=function(){o.removeEventListener("DOMContentLoaded",S,!1),e.removeEventListener("load",S,!1),x.ready()};x.fn=x.prototype={jquery:p,constructor:x,init:function(e,t,n){var r,i;if(!e)return this;if("string"==typeof e){if(r="<"===e.charAt(0)&&">"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:T.exec(e),!r||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof x?t[0]:t,x.merge(this,x.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:o,!0)),C.test(r[1])&&x.isPlainObject(t))for(r in t)x.isFunction(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return i=o.getElementById(r[2]),i&&i.parentNode&&(this.length=1,this[0]=i),this.context=o,this.selector=e,this}return e.nodeType?(this.context=this[0]=e,this.length=1,this):x.isFunction(e)?n.ready(e):(e.selector!==undefined&&(this.selector=e.selector,this.context=e.context),x.makeArray(e,this))},selector:"",length:0,toArray:function(){return d.call(this)},get:function(e){return null==e?this.toArray():0>e?this[this.length+e]:this[e]},pushStack:function(e){var t=x.merge(this.constructor(),e);return t.prevObject=this,t.context=this.context,t},each:function(e,t){return x.each(this,e,t)},ready:function(e){return x.ready.promise().done(e),this},slice:function(){return this.pushStack(d.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(0>e?t:0);return this.pushStack(n>=0&&t>n?[this[n]]:[])},map:function(e){return this.pushStack(x.map(this,function(t,n){return e.call(t,n,t)}))},end:function(){return this.prevObject||this.constructor(null)},push:h,sort:[].sort,splice:[].splice},x.fn.init.prototype=x.fn,x.extend=x.fn.extend=function(){var e,t,n,r,i,o,s=arguments[0]||{},a=1,u=arguments.length,l=!1;for("boolean"==typeof s&&(l=s,s=arguments[1]||{},a=2),"object"==typeof s||x.isFunction(s)||(s={}),u===a&&(s=this,--a);u>a;a++)if(null!=(e=arguments[a]))for(t in e)n=s[t],r=e[t],s!==r&&(l&&r&&(x.isPlainObject(r)||(i=x.isArray(r)))?(i?(i=!1,o=n&&x.isArray(n)?n:[]):o=n&&x.isPlainObject(n)?n:{},s[t]=x.extend(l,o,r)):r!==undefined&&(s[t]=r));return s},x.extend({expando:"jQuery"+(p+Math.random()).replace(/\D/g,""),noConflict:function(t){return e.$===x&&(e.$=u),t&&e.jQuery===x&&(e.jQuery=a),x},isReady:!1,readyWait:1,holdReady:function(e){e?x.readyWait++:x.ready(!0)},ready:function(e){(e===!0?--x.readyWait:x.isReady)||(x.isReady=!0,e!==!0&&--x.readyWait>0||(n.resolveWith(o,[x]),x.fn.trigger&&x(o).trigger("ready").off("ready")))},isFunction:function(e){return"function"===x.type(e)},isArray:Array.isArray,isWindow:function(e){return null!=e&&e===e.window},isNumeric:function(e){return!isNaN(parseFloat(e))&&isFinite(e)},type:function(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[m.call(e)]||"object":typeof e},isPlainObject:function(e){if("object"!==x.type(e)||e.nodeType||x.isWindow(e))return!1;try{if(e.constructor&&!y.call(e.constructor.prototype,"isPrototypeOf"))return!1}catch(t){return!1}return!0},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},error:function(e){throw Error(e)},parseHTML:function(e,t,n){if(!e||"string"!=typeof e)return null;"boolean"==typeof t&&(n=t,t=!1),t=t||o;var r=C.exec(e),i=!n&&[];return r?[t.createElement(r[1])]:(r=x.buildFragment([e],t,i),i&&x(i).remove(),x.merge([],r.childNodes))},parseJSON:JSON.parse,parseXML:function(e){var t,n;if(!e||"string"!=typeof e)return null;try{n=new DOMParser,t=n.parseFromString(e,"text/xml")}catch(r){t=undefined}return(!t||t.getElementsByTagName("parsererror").length)&&x.error("Invalid XML: "+e),t},noop:function(){},globalEval:function(e){var t,n=eval;e=x.trim(e),e&&(1===e.indexOf("use strict")?(t=o.createElement("script"),t.text=e,o.head.appendChild(t).parentNode.removeChild(t)):n(e))},camelCase:function(e){return e.replace(k,"ms-").replace(N,E)},nodeName:function(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()},each:function(e,t,n){var r,i=0,o=e.length,s=j(e);if(n){if(s){for(;o>i;i++)if(r=t.apply(e[i],n),r===!1)break}else for(i in e)if(r=t.apply(e[i],n),r===!1)break}else if(s){for(;o>i;i++)if(r=t.call(e[i],i,e[i]),r===!1)break}else for(i in e)if(r=t.call(e[i],i,e[i]),r===!1)break;return e},trim:function(e){return null==e?"":v.call(e)},makeArray:function(e,t){var n=t||[];return null!=e&&(j(Object(e))?x.merge(n,"string"==typeof e?[e]:e):h.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:g.call(t,e,n)},merge:function(e,t){var n=t.length,r=e.length,i=0;if("number"==typeof n)for(;n>i;i++)e[r++]=t[i];else while(t[i]!==undefined)e[r++]=t[i++];return e.length=r,e},grep:function(e,t,n){var r,i=[],o=0,s=e.length;for(n=!!n;s>o;o++)r=!!t(e[o],o),n!==r&&i.push(e[o]);return i},map:function(e,t,n){var r,i=0,o=e.length,s=j(e),a=[];if(s)for(;o>i;i++)r=t(e[i],i,n),null!=r&&(a[a.length]=r);else for(i in e)r=t(e[i],i,n),null!=r&&(a[a.length]=r);return f.apply([],a)},guid:1,proxy:function(e,t){var n,r,i;return"string"==typeof t&&(n=e[t],t=e,e=n),x.isFunction(e)?(r=d.call(arguments,2),i=function(){return e.apply(t||this,r.concat(d.call(arguments)))},i.guid=e.guid=e.guid||x.guid++,i):undefined},access:function(e,t,n,r,i,o,s){var a=0,u=e.length,l=null==n;if("object"===x.type(n)){i=!0;for(a in n)x.access(e,t,a,n[a],!0,o,s)}else if(r!==undefined&&(i=!0,x.isFunction(r)||(s=!0),l&&(s?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(x(e),n)})),t))for(;u>a;a++)t(e[a],n,s?r:r.call(e[a],a,t(e[a],n)));return i?e:l?t.call(e):u?t(e[0],n):o},now:Date.now,swap:function(e,t,n,r){var i,o,s={};for(o in t)s[o]=e.style[o],e.style[o]=t[o];i=n.apply(e,r||[]);for(o in t)e.style[o]=s[o];return i}}),x.ready.promise=function(t){return n||(n=x.Deferred(),"complete"===o.readyState?setTimeout(x.ready):(o.addEventListener("DOMContentLoaded",S,!1),e.addEventListener("load",S,!1))),n.promise(t)},x.each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(e,t){l["[object "+t+"]"]=t.toLowerCase()});function j(e){var t=e.length,n=x.type(e);return x.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}t=x(o),function(e,undefined){var t,n,r,i,o,s,a,u,l,c,p,f,h,d,g,m,y,v="sizzle"+-new Date,b=e.document,w=0,T=0,C=st(),k=st(),N=st(),E=!1,S=function(e,t){return e===t?(E=!0,0):0},j=typeof undefined,D=1<<31,A={}.hasOwnProperty,L=[],q=L.pop,H=L.push,O=L.push,F=L.slice,P=L.indexOf||function(e){var t=0,n=this.length;for(;n>t;t++)if(this[t]===e)return t;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",W="(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",$=W.replace("w","w#"),B="\\["+M+"*("+W+")"+M+"*(?:([*^$|!~]?=)"+M+"*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|("+$+")|)|)"+M+"*\\]",I=":("+W+")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|"+B.replace(3,8)+")*)|.*)\\)|)",z=RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=RegExp("^"+M+"*,"+M+"*"),X=RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=RegExp(M+"*[+~]"),Y=RegExp("="+M+"*([^\\]'\"]*)"+M+"*\\]","g"),V=RegExp(I),G=RegExp("^"+$+"$"),J={ID:RegExp("^#("+W+")"),CLASS:RegExp("^\\.("+W+")"),TAG:RegExp("^("+W.replace("w","w*")+")"),ATTR:RegExp("^"+B),PSEUDO:RegExp("^"+I),CHILD:RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:RegExp("^(?:"+R+")$","i"),needsContext:RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Q=/^[^{]+\{\s*\[native \w/,K=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,Z=/^(?:input|select|textarea|button)$/i,et=/^h\d$/i,tt=/'|\\/g,nt=RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),rt=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:0>r?String.fromCharCode(r+65536):String.fromCharCode(55296|r>>10,56320|1023&r)};try{O.apply(L=F.call(b.childNodes),b.childNodes),L[b.childNodes.length].nodeType}catch(it){O={apply:L.length?function(e,t){H.apply(e,F.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function ot(e,t,r,i){var o,s,a,u,l,f,g,m,x,w;if((t?t.ownerDocument||t:b)!==p&&c(t),t=t||p,r=r||[],!e||"string"!=typeof e)return r;if(1!==(u=t.nodeType)&&9!==u)return[];if(h&&!i){if(o=K.exec(e))if(a=o[1]){if(9===u){if(s=t.getElementById(a),!s||!s.parentNode)return r;if(s.id===a)return r.push(s),r}else if(t.ownerDocument&&(s=t.ownerDocument.getElementById(a))&&y(t,s)&&s.id===a)return r.push(s),r}else{if(o[2])return O.apply(r,t.getElementsByTagName(e)),r;if((a=o[3])&&n.getElementsByClassName&&t.getElementsByClassName)return O.apply(r,t.getElementsByClassName(a)),r}if(n.qsa&&(!d||!d.test(e))){if(m=g=v,x=t,w=9===u&&e,1===u&&"object"!==t.nodeName.toLowerCase()){f=gt(e),(g=t.getAttribute("id"))?m=g.replace(tt,"\\$&"):t.setAttribute("id",m),m="[id='"+m+"'] ",l=f.length;while(l--)f[l]=m+mt(f[l]);x=U.test(e)&&t.parentNode||t,w=f.join(",")}if(w)try{return O.apply(r,x.querySelectorAll(w)),r}catch(T){}finally{g||t.removeAttribute("id")}}}return kt(e.replace(z,"$1"),t,r,i)}function st(){var e=[];function t(n,r){return e.push(n+=" ")>i.cacheLength&&delete t[e.shift()],t[n]=r}return t}function at(e){return e[v]=!0,e}function ut(e){var t=p.createElement("div");try{return!!e(t)}catch(n){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function lt(e,t){var n=e.split("|"),r=e.length;while(r--)i.attrHandle[n[r]]=t}function ct(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&(~t.sourceIndex||D)-(~e.sourceIndex||D);if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function pt(e){return function(t){var n=t.nodeName.toLowerCase();return"input"===n&&t.type===e}}function ft(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function ht(e){return at(function(t){return t=+t,at(function(n,r){var i,o=e([],n.length,t),s=o.length;while(s--)n[i=o[s]]&&(n[i]=!(r[i]=n[i]))})})}s=ot.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return t?"HTML"!==t.nodeName:!1},n=ot.support={},c=ot.setDocument=function(e){var t=e?e.ownerDocument||e:b,r=t.defaultView;return t!==p&&9===t.nodeType&&t.documentElement?(p=t,f=t.documentElement,h=!s(t),r&&r.attachEvent&&r!==r.top&&r.attachEvent("onbeforeunload",function(){c()}),n.attributes=ut(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=ut(function(e){return e.appendChild(t.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=ut(function(e){return e.innerHTML="
",e.firstChild.className="i",2===e.getElementsByClassName("i").length}),n.getById=ut(function(e){return f.appendChild(e).id=v,!t.getElementsByName||!t.getElementsByName(v).length}),n.getById?(i.find.ID=function(e,t){if(typeof t.getElementById!==j&&h){var n=t.getElementById(e);return n&&n.parentNode?[n]:[]}},i.filter.ID=function(e){var t=e.replace(nt,rt);return function(e){return e.getAttribute("id")===t}}):(delete i.find.ID,i.filter.ID=function(e){var t=e.replace(nt,rt);return function(e){var n=typeof e.getAttributeNode!==j&&e.getAttributeNode("id");return n&&n.value===t}}),i.find.TAG=n.getElementsByTagName?function(e,t){return typeof t.getElementsByTagName!==j?t.getElementsByTagName(e):undefined}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},i.find.CLASS=n.getElementsByClassName&&function(e,t){return typeof t.getElementsByClassName!==j&&h?t.getElementsByClassName(e):undefined},g=[],d=[],(n.qsa=Q.test(t.querySelectorAll))&&(ut(function(e){e.innerHTML="",e.querySelectorAll("[selected]").length||d.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll(":checked").length||d.push(":checked")}),ut(function(e){var n=t.createElement("input");n.setAttribute("type","hidden"),e.appendChild(n).setAttribute("t",""),e.querySelectorAll("[t^='']").length&&d.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll(":enabled").length||d.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),d.push(",.*:")})),(n.matchesSelector=Q.test(m=f.webkitMatchesSelector||f.mozMatchesSelector||f.oMatchesSelector||f.msMatchesSelector))&&ut(function(e){n.disconnectedMatch=m.call(e,"div"),m.call(e,"[s!='']:x"),g.push("!=",I)}),d=d.length&&RegExp(d.join("|")),g=g.length&&RegExp(g.join("|")),y=Q.test(f.contains)||f.compareDocumentPosition?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},S=f.compareDocumentPosition?function(e,r){if(e===r)return E=!0,0;var i=r.compareDocumentPosition&&e.compareDocumentPosition&&e.compareDocumentPosition(r);return i?1&i||!n.sortDetached&&r.compareDocumentPosition(e)===i?e===t||y(b,e)?-1:r===t||y(b,r)?1:l?P.call(l,e)-P.call(l,r):0:4&i?-1:1:e.compareDocumentPosition?-1:1}:function(e,n){var r,i=0,o=e.parentNode,s=n.parentNode,a=[e],u=[n];if(e===n)return E=!0,0;if(!o||!s)return e===t?-1:n===t?1:o?-1:s?1:l?P.call(l,e)-P.call(l,n):0;if(o===s)return ct(e,n);r=e;while(r=r.parentNode)a.unshift(r);r=n;while(r=r.parentNode)u.unshift(r);while(a[i]===u[i])i++;return i?ct(a[i],u[i]):a[i]===b?-1:u[i]===b?1:0},t):p},ot.matches=function(e,t){return ot(e,null,null,t)},ot.matchesSelector=function(e,t){if((e.ownerDocument||e)!==p&&c(e),t=t.replace(Y,"='$1']"),!(!n.matchesSelector||!h||g&&g.test(t)||d&&d.test(t)))try{var r=m.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(i){}return ot(t,p,null,[e]).length>0},ot.contains=function(e,t){return(e.ownerDocument||e)!==p&&c(e),y(e,t)},ot.attr=function(e,t){(e.ownerDocument||e)!==p&&c(e);var r=i.attrHandle[t.toLowerCase()],o=r&&A.call(i.attrHandle,t.toLowerCase())?r(e,t,!h):undefined;return o===undefined?n.attributes||!h?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null:o},ot.error=function(e){throw Error("Syntax error, unrecognized expression: "+e)},ot.uniqueSort=function(e){var t,r=[],i=0,o=0;if(E=!n.detectDuplicates,l=!n.sortStable&&e.slice(0),e.sort(S),E){while(t=e[o++])t===e[o]&&(i=r.push(o));while(i--)e.splice(r[i],1)}return e},o=ot.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else for(;t=e[r];r++)n+=o(t);return n},i=ot.selectors={cacheLength:50,createPseudo:at,match:J,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(nt,rt),e[3]=(e[4]||e[5]||"").replace(nt,rt),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||ot.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&ot.error(e[0]),e},PSEUDO:function(e){var t,n=!e[5]&&e[2];return J.CHILD.test(e[0])?null:(e[3]&&e[4]!==undefined?e[2]=e[4]:n&&V.test(n)&&(t=gt(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(nt,rt).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=C[e+" "];return t||(t=RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&C(e,function(e){return t.test("string"==typeof e.className&&e.className||typeof e.getAttribute!==j&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=ot.attr(r,e);return null==i?"!="===t:t?(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i+" ").indexOf(n)>-1:"|="===t?i===n||i.slice(0,n.length+1)===n+"-":!1):!0}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),s="last"!==e.slice(-4),a="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,u){var l,c,p,f,h,d,g=o!==s?"nextSibling":"previousSibling",m=t.parentNode,y=a&&t.nodeName.toLowerCase(),x=!u&&!a;if(m){if(o){while(g){p=t;while(p=p[g])if(a?p.nodeName.toLowerCase()===y:1===p.nodeType)return!1;d=g="only"===e&&!d&&"nextSibling"}return!0}if(d=[s?m.firstChild:m.lastChild],s&&x){c=m[v]||(m[v]={}),l=c[e]||[],h=l[0]===w&&l[1],f=l[0]===w&&l[2],p=h&&m.childNodes[h];while(p=++h&&p&&p[g]||(f=h=0)||d.pop())if(1===p.nodeType&&++f&&p===t){c[e]=[w,h,f];break}}else if(x&&(l=(t[v]||(t[v]={}))[e])&&l[0]===w)f=l[1];else while(p=++h&&p&&p[g]||(f=h=0)||d.pop())if((a?p.nodeName.toLowerCase()===y:1===p.nodeType)&&++f&&(x&&((p[v]||(p[v]={}))[e]=[w,f]),p===t))break;return f-=i,f===r||0===f%r&&f/r>=0}}},PSEUDO:function(e,t){var n,r=i.pseudos[e]||i.setFilters[e.toLowerCase()]||ot.error("unsupported pseudo: "+e);return r[v]?r(t):r.length>1?(n=[e,e,"",t],i.setFilters.hasOwnProperty(e.toLowerCase())?at(function(e,n){var i,o=r(e,t),s=o.length;while(s--)i=P.call(e,o[s]),e[i]=!(n[i]=o[s])}):function(e){return r(e,0,n)}):r}},pseudos:{not:at(function(e){var t=[],n=[],r=a(e.replace(z,"$1"));return r[v]?at(function(e,t,n,i){var o,s=r(e,null,i,[]),a=e.length;while(a--)(o=s[a])&&(e[a]=!(t[a]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),!n.pop()}}),has:at(function(e){return function(t){return ot(e,t).length>0}}),contains:at(function(e){return function(t){return(t.textContent||t.innerText||o(t)).indexOf(e)>-1}}),lang:at(function(e){return G.test(e||"")||ot.error("unsupported lang: "+e),e=e.replace(nt,rt).toLowerCase(),function(t){var n;do if(n=h?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return n=n.toLowerCase(),n===e||0===n.indexOf(e+"-");while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===f},focus:function(e){return e===p.activeElement&&(!p.hasFocus||p.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:function(e){return e.disabled===!1},disabled:function(e){return e.disabled===!0},checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,e.selected===!0},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeName>"@"||3===e.nodeType||4===e.nodeType)return!1;return!0},parent:function(e){return!i.pseudos.empty(e)},header:function(e){return et.test(e.nodeName)},input:function(e){return Z.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||t.toLowerCase()===e.type)},first:ht(function(){return[0]}),last:ht(function(e,t){return[t-1]}),eq:ht(function(e,t,n){return[0>n?n+t:n]}),even:ht(function(e,t){var n=0;for(;t>n;n+=2)e.push(n);return e}),odd:ht(function(e,t){var n=1;for(;t>n;n+=2)e.push(n);return e}),lt:ht(function(e,t,n){var r=0>n?n+t:n;for(;--r>=0;)e.push(r);return e}),gt:ht(function(e,t,n){var r=0>n?n+t:n;for(;t>++r;)e.push(r);return e})}},i.pseudos.nth=i.pseudos.eq;for(t in{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})i.pseudos[t]=pt(t);for(t in{submit:!0,reset:!0})i.pseudos[t]=ft(t);function dt(){}dt.prototype=i.filters=i.pseudos,i.setFilters=new dt;function gt(e,t){var n,r,o,s,a,u,l,c=k[e+" "];if(c)return t?0:c.slice(0);a=e,u=[],l=i.preFilter;while(a){(!n||(r=_.exec(a)))&&(r&&(a=a.slice(r[0].length)||a),u.push(o=[])),n=!1,(r=X.exec(a))&&(n=r.shift(),o.push({value:n,type:r[0].replace(z," ")}),a=a.slice(n.length));for(s in i.filter)!(r=J[s].exec(a))||l[s]&&!(r=l[s](r))||(n=r.shift(),o.push({value:n,type:s,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?ot.error(e):k(e,u).slice(0)}function mt(e){var t=0,n=e.length,r="";for(;n>t;t++)r+=e[t].value;return r}function yt(e,t,n){var i=t.dir,o=n&&"parentNode"===i,s=T++;return t.first?function(t,n,r){while(t=t[i])if(1===t.nodeType||o)return e(t,n,r)}:function(t,n,a){var u,l,c,p=w+" "+s;if(a){while(t=t[i])if((1===t.nodeType||o)&&e(t,n,a))return!0}else while(t=t[i])if(1===t.nodeType||o)if(c=t[v]||(t[v]={}),(l=c[i])&&l[0]===p){if((u=l[1])===!0||u===r)return u===!0}else if(l=c[i]=[p],l[1]=e(t,n,a)||r,l[1]===!0)return!0}}function vt(e){return e.length>1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function xt(e,t,n,r,i){var o,s=[],a=0,u=e.length,l=null!=t;for(;u>a;a++)(o=e[a])&&(!n||n(o,r,i))&&(s.push(o),l&&t.push(a));return s}function bt(e,t,n,r,i,o){return r&&!r[v]&&(r=bt(r)),i&&!i[v]&&(i=bt(i,o)),at(function(o,s,a,u){var l,c,p,f=[],h=[],d=s.length,g=o||Ct(t||"*",a.nodeType?[a]:a,[]),m=!e||!o&&t?g:xt(g,f,e,a,u),y=n?i||(o?e:d||r)?[]:s:m;if(n&&n(m,y,a,u),r){l=xt(y,h),r(l,[],a,u),c=l.length;while(c--)(p=l[c])&&(y[h[c]]=!(m[h[c]]=p))}if(o){if(i||e){if(i){l=[],c=y.length;while(c--)(p=y[c])&&l.push(m[c]=p);i(null,y=[],l,u)}c=y.length;while(c--)(p=y[c])&&(l=i?P.call(o,p):f[c])>-1&&(o[l]=!(s[l]=p))}}else y=xt(y===s?y.splice(d,y.length):y),i?i(null,s,y,u):O.apply(s,y)})}function wt(e){var t,n,r,o=e.length,s=i.relative[e[0].type],a=s||i.relative[" "],l=s?1:0,c=yt(function(e){return e===t},a,!0),p=yt(function(e){return P.call(t,e)>-1},a,!0),f=[function(e,n,r){return!s&&(r||n!==u)||((t=n).nodeType?c(e,n,r):p(e,n,r))}];for(;o>l;l++)if(n=i.relative[e[l].type])f=[yt(vt(f),n)];else{if(n=i.filter[e[l].type].apply(null,e[l].matches),n[v]){for(r=++l;o>r;r++)if(i.relative[e[r].type])break;return bt(l>1&&vt(f),l>1&&mt(e.slice(0,l-1).concat({value:" "===e[l-2].type?"*":""})).replace(z,"$1"),n,r>l&&wt(e.slice(l,r)),o>r&&wt(e=e.slice(r)),o>r&&mt(e))}f.push(n)}return vt(f)}function Tt(e,t){var n=0,o=t.length>0,s=e.length>0,a=function(a,l,c,f,h){var d,g,m,y=[],v=0,x="0",b=a&&[],T=null!=h,C=u,k=a||s&&i.find.TAG("*",h&&l.parentNode||l),N=w+=null==C?1:Math.random()||.1;for(T&&(u=l!==p&&l,r=n);null!=(d=k[x]);x++){if(s&&d){g=0;while(m=e[g++])if(m(d,l,c)){f.push(d);break}T&&(w=N,r=++n)}o&&((d=!m&&d)&&v--,a&&b.push(d))}if(v+=x,o&&x!==v){g=0;while(m=t[g++])m(b,y,l,c);if(a){if(v>0)while(x--)b[x]||y[x]||(y[x]=q.call(f));y=xt(y)}O.apply(f,y),T&&!a&&y.length>0&&v+t.length>1&&ot.uniqueSort(f)}return T&&(w=N,u=C),b};return o?at(a):a}a=ot.compile=function(e,t){var n,r=[],i=[],o=N[e+" "];if(!o){t||(t=gt(e)),n=t.length;while(n--)o=wt(t[n]),o[v]?r.push(o):i.push(o);o=N(e,Tt(i,r))}return o};function Ct(e,t,n){var r=0,i=t.length;for(;i>r;r++)ot(e,t[r],n);return n}function kt(e,t,r,o){var s,u,l,c,p,f=gt(e);if(!o&&1===f.length){if(u=f[0]=f[0].slice(0),u.length>2&&"ID"===(l=u[0]).type&&n.getById&&9===t.nodeType&&h&&i.relative[u[1].type]){if(t=(i.find.ID(l.matches[0].replace(nt,rt),t)||[])[0],!t)return r;e=e.slice(u.shift().value.length)}s=J.needsContext.test(e)?0:u.length;while(s--){if(l=u[s],i.relative[c=l.type])break;if((p=i.find[c])&&(o=p(l.matches[0].replace(nt,rt),U.test(u[0].type)&&t.parentNode||t))){if(u.splice(s,1),e=o.length&&mt(u),!e)return O.apply(r,o),r;break}}}return a(e,f)(o,t,!h,r,U.test(e)),r}n.sortStable=v.split("").sort(S).join("")===v,n.detectDuplicates=E,c(),n.sortDetached=ut(function(e){return 1&e.compareDocumentPosition(p.createElement("div"))}),ut(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||lt("type|href|height|width",function(e,t,n){return n?undefined:e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&ut(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||lt("value",function(e,t,n){return n||"input"!==e.nodeName.toLowerCase()?undefined:e.defaultValue}),ut(function(e){return null==e.getAttribute("disabled")})||lt(R,function(e,t,n){var r;return n?undefined:(r=e.getAttributeNode(t))&&r.specified?r.value:e[t]===!0?t.toLowerCase():null}),x.find=ot,x.expr=ot.selectors,x.expr[":"]=x.expr.pseudos,x.unique=ot.uniqueSort,x.text=ot.getText,x.isXMLDoc=ot.isXML,x.contains=ot.contains}(e);var D={};function A(e){var t=D[e]={};return x.each(e.match(w)||[],function(e,n){t[n]=!0}),t}x.Callbacks=function(e){e="string"==typeof e?D[e]||A(e):x.extend({},e);var t,n,r,i,o,s,a=[],u=!e.once&&[],l=function(p){for(t=e.memory&&p,n=!0,s=i||0,i=0,o=a.length,r=!0;a&&o>s;s++)if(a[s].apply(p[0],p[1])===!1&&e.stopOnFalse){t=!1;break}r=!1,a&&(u?u.length&&l(u.shift()):t?a=[]:c.disable())},c={add:function(){if(a){var n=a.length;(function s(t){x.each(t,function(t,n){var r=x.type(n);"function"===r?e.unique&&c.has(n)||a.push(n):n&&n.length&&"string"!==r&&s(n)})})(arguments),r?o=a.length:t&&(i=n,l(t))}return this},remove:function(){return a&&x.each(arguments,function(e,t){var n;while((n=x.inArray(t,a,n))>-1)a.splice(n,1),r&&(o>=n&&o--,s>=n&&s--)}),this},has:function(e){return e?x.inArray(e,a)>-1:!(!a||!a.length)},empty:function(){return a=[],o=0,this},disable:function(){return a=u=t=undefined,this},disabled:function(){return!a},lock:function(){return u=undefined,t||c.disable(),this},locked:function(){return!u},fireWith:function(e,t){return!a||n&&!u||(t=t||[],t=[e,t.slice?t.slice():t],r?u.push(t):l(t)),this},fire:function(){return c.fireWith(this,arguments),this},fired:function(){return!!n}};return c},x.extend({Deferred:function(e){var t=[["resolve","done",x.Callbacks("once memory"),"resolved"],["reject","fail",x.Callbacks("once memory"),"rejected"],["notify","progress",x.Callbacks("memory")]],n="pending",r={state:function(){return n},always:function(){return i.done(arguments).fail(arguments),this},then:function(){var e=arguments;return x.Deferred(function(n){x.each(t,function(t,o){var s=o[0],a=x.isFunction(e[t])&&e[t];i[o[1]](function(){var e=a&&a.apply(this,arguments);e&&x.isFunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[s+"With"](this===r?n.promise():this,a?[e]:arguments)})}),e=null}).promise()},promise:function(e){return null!=e?x.extend(e,r):r}},i={};return r.pipe=r.then,x.each(t,function(e,o){var s=o[2],a=o[3];r[o[1]]=s.add,a&&s.add(function(){n=a},t[1^e][2].disable,t[2][2].lock),i[o[0]]=function(){return i[o[0]+"With"](this===i?r:this,arguments),this},i[o[0]+"With"]=s.fireWith}),r.promise(i),e&&e.call(i,i),i},when:function(e){var t=0,n=d.call(arguments),r=n.length,i=1!==r||e&&x.isFunction(e.promise)?r:0,o=1===i?e:x.Deferred(),s=function(e,t,n){return function(r){t[e]=this,n[e]=arguments.length>1?d.call(arguments):r,n===a?o.notifyWith(t,n):--i||o.resolveWith(t,n)}},a,u,l;if(r>1)for(a=Array(r),u=Array(r),l=Array(r);r>t;t++)n[t]&&x.isFunction(n[t].promise)?n[t].promise().done(s(t,l,n)).fail(o.reject).progress(s(t,u,a)):--i;return i||o.resolveWith(l,n),o.promise()}}),x.support=function(t){var n=o.createElement("input"),r=o.createDocumentFragment(),i=o.createElement("div"),s=o.createElement("select"),a=s.appendChild(o.createElement("option"));return n.type?(n.type="checkbox",t.checkOn=""!==n.value,t.optSelected=a.selected,t.reliableMarginRight=!0,t.boxSizingReliable=!0,t.pixelPosition=!1,n.checked=!0,t.noCloneChecked=n.cloneNode(!0).checked,s.disabled=!0,t.optDisabled=!a.disabled,n=o.createElement("input"),n.value="t",n.type="radio",t.radioValue="t"===n.value,n.setAttribute("checked","t"),n.setAttribute("name","t"),r.appendChild(n),t.checkClone=r.cloneNode(!0).cloneNode(!0).lastChild.checked,t.focusinBubbles="onfocusin"in e,i.style.backgroundClip="content-box",i.cloneNode(!0).style.backgroundClip="",t.clearCloneStyle="content-box"===i.style.backgroundClip,x(function(){var n,r,s="padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box",a=o.getElementsByTagName("body")[0];a&&(n=o.createElement("div"),n.style.cssText="border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px",a.appendChild(n).appendChild(i),i.innerHTML="",i.style.cssText="-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%",x.swap(a,null!=a.style.zoom?{zoom:1}:{},function(){t.boxSizing=4===i.offsetWidth}),e.getComputedStyle&&(t.pixelPosition="1%"!==(e.getComputedStyle(i,null)||{}).top,t.boxSizingReliable="4px"===(e.getComputedStyle(i,null)||{width:"4px"}).width,r=i.appendChild(o.createElement("div")),r.style.cssText=i.style.cssText=s,r.style.marginRight=r.style.width="0",i.style.width="1px",t.reliableMarginRight=!parseFloat((e.getComputedStyle(r,null)||{}).marginRight)),a.removeChild(n))}),t):t}({});var L,q,H=/(?:\{[\s\S]*\}|\[[\s\S]*\])$/,O=/([A-Z])/g;function F(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=x.expando+Math.random()}F.uid=1,F.accepts=function(e){return e.nodeType?1===e.nodeType||9===e.nodeType:!0},F.prototype={key:function(e){if(!F.accepts(e))return 0;var t={},n=e[this.expando];if(!n){n=F.uid++;try{t[this.expando]={value:n},Object.defineProperties(e,t)}catch(r){t[this.expando]=n,x.extend(e,t)}}return this.cache[n]||(this.cache[n]={}),n},set:function(e,t,n){var r,i=this.key(e),o=this.cache[i];if("string"==typeof t)o[t]=n;else if(x.isEmptyObject(o))x.extend(this.cache[i],t);else for(r in t)o[r]=t[r];return o},get:function(e,t){var n=this.cache[this.key(e)];return t===undefined?n:n[t]},access:function(e,t,n){var r;return t===undefined||t&&"string"==typeof t&&n===undefined?(r=this.get(e,t),r!==undefined?r:this.get(e,x.camelCase(t))):(this.set(e,t,n),n!==undefined?n:t)},remove:function(e,t){var n,r,i,o=this.key(e),s=this.cache[o];if(t===undefined)this.cache[o]={};else{x.isArray(t)?r=t.concat(t.map(x.camelCase)):(i=x.camelCase(t),t in s?r=[t,i]:(r=i,r=r in s?[r]:r.match(w)||[])),n=r.length;while(n--)delete s[r[n]]}},hasData:function(e){return!x.isEmptyObject(this.cache[e[this.expando]]||{})},discard:function(e){e[this.expando]&&delete this.cache[e[this.expando]]}},L=new F,q=new F,x.extend({acceptData:F.accepts,hasData:function(e){return L.hasData(e)||q.hasData(e)},data:function(e,t,n){return L.access(e,t,n)},removeData:function(e,t){L.remove(e,t)},_data:function(e,t,n){return q.access(e,t,n)},_removeData:function(e,t){q.remove(e,t)}}),x.fn.extend({data:function(e,t){var n,r,i=this[0],o=0,s=null;if(e===undefined){if(this.length&&(s=L.get(i),1===i.nodeType&&!q.get(i,"hasDataAttrs"))){for(n=i.attributes;n.length>o;o++)r=n[o].name,0===r.indexOf("data-")&&(r=x.camelCase(r.slice(5)),P(i,r,s[r]));q.set(i,"hasDataAttrs",!0)}return s}return"object"==typeof e?this.each(function(){L.set(this,e)}):x.access(this,function(t){var n,r=x.camelCase(e);if(i&&t===undefined){if(n=L.get(i,e),n!==undefined)return n;if(n=L.get(i,r),n!==undefined)return n;if(n=P(i,r,undefined),n!==undefined)return n}else this.each(function(){var n=L.get(this,r);L.set(this,r,t),-1!==e.indexOf("-")&&n!==undefined&&L.set(this,e,t)})},null,t,arguments.length>1,null,!0)},removeData:function(e){return this.each(function(){L.remove(this,e)})}});function P(e,t,n){var r;if(n===undefined&&1===e.nodeType)if(r="data-"+t.replace(O,"-$1").toLowerCase(),n=e.getAttribute(r),"string"==typeof n){try{n="true"===n?!0:"false"===n?!1:"null"===n?null:+n+""===n?+n:H.test(n)?JSON.parse(n):n}catch(i){}L.set(e,t,n)}else n=undefined;return n}x.extend({queue:function(e,t,n){var r;return e?(t=(t||"fx")+"queue",r=q.get(e,t),n&&(!r||x.isArray(n)?r=q.access(e,t,x.makeArray(n)):r.push(n)),r||[]):undefined},dequeue:function(e,t){t=t||"fx";var n=x.queue(e,t),r=n.length,i=n.shift(),o=x._queueHooks(e,t),s=function(){x.dequeue(e,t) 5 | };"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,s,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return q.get(e,n)||q.access(e,n,{empty:x.Callbacks("once memory").add(function(){q.remove(e,[t+"queue",n])})})}}),x.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),n>arguments.length?x.queue(this[0],e):t===undefined?this:this.each(function(){var n=x.queue(this,e,t);x._queueHooks(this,e),"fx"===e&&"inprogress"!==n[0]&&x.dequeue(this,e)})},dequeue:function(e){return this.each(function(){x.dequeue(this,e)})},delay:function(e,t){return e=x.fx?x.fx.speeds[e]||e:e,t=t||"fx",this.queue(t,function(t,n){var r=setTimeout(t,e);n.stop=function(){clearTimeout(r)}})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=x.Deferred(),o=this,s=this.length,a=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=undefined),e=e||"fx";while(s--)n=q.get(o[s],e+"queueHooks"),n&&n.empty&&(r++,n.empty.add(a));return a(),i.promise(t)}});var R,M,W=/[\t\r\n\f]/g,$=/\r/g,B=/^(?:input|select|textarea|button)$/i;x.fn.extend({attr:function(e,t){return x.access(this,x.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){x.removeAttr(this,e)})},prop:function(e,t){return x.access(this,x.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[x.propFix[e]||e]})},addClass:function(e){var t,n,r,i,o,s=0,a=this.length,u="string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).addClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];a>s;s++)if(n=this[s],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(W," "):" ")){o=0;while(i=t[o++])0>r.indexOf(" "+i+" ")&&(r+=i+" ");n.className=x.trim(r)}return this},removeClass:function(e){var t,n,r,i,o,s=0,a=this.length,u=0===arguments.length||"string"==typeof e&&e;if(x.isFunction(e))return this.each(function(t){x(this).removeClass(e.call(this,t,this.className))});if(u)for(t=(e||"").match(w)||[];a>s;s++)if(n=this[s],r=1===n.nodeType&&(n.className?(" "+n.className+" ").replace(W," "):"")){o=0;while(i=t[o++])while(r.indexOf(" "+i+" ")>=0)r=r.replace(" "+i+" "," ");n.className=e?x.trim(r):""}return this},toggleClass:function(e,t){var n=typeof e;return"boolean"==typeof t&&"string"===n?t?this.addClass(e):this.removeClass(e):x.isFunction(e)?this.each(function(n){x(this).toggleClass(e.call(this,n,this.className,t),t)}):this.each(function(){if("string"===n){var t,i=0,o=x(this),s=e.match(w)||[];while(t=s[i++])o.hasClass(t)?o.removeClass(t):o.addClass(t)}else(n===r||"boolean"===n)&&(this.className&&q.set(this,"__className__",this.className),this.className=this.className||e===!1?"":q.get(this,"__className__")||"")})},hasClass:function(e){var t=" "+e+" ",n=0,r=this.length;for(;r>n;n++)if(1===this[n].nodeType&&(" "+this[n].className+" ").replace(W," ").indexOf(t)>=0)return!0;return!1},val:function(e){var t,n,r,i=this[0];{if(arguments.length)return r=x.isFunction(e),this.each(function(n){var i;1===this.nodeType&&(i=r?e.call(this,n,x(this).val()):e,null==i?i="":"number"==typeof i?i+="":x.isArray(i)&&(i=x.map(i,function(e){return null==e?"":e+""})),t=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],t&&"set"in t&&t.set(this,i,"value")!==undefined||(this.value=i))});if(i)return t=x.valHooks[i.type]||x.valHooks[i.nodeName.toLowerCase()],t&&"get"in t&&(n=t.get(i,"value"))!==undefined?n:(n=i.value,"string"==typeof n?n.replace($,""):null==n?"":n)}}}),x.extend({valHooks:{option:{get:function(e){var t=e.attributes.value;return!t||t.specified?e.value:e.text}},select:{get:function(e){var t,n,r=e.options,i=e.selectedIndex,o="select-one"===e.type||0>i,s=o?null:[],a=o?i+1:r.length,u=0>i?a:o?i:0;for(;a>u;u++)if(n=r[u],!(!n.selected&&u!==i||(x.support.optDisabled?n.disabled:null!==n.getAttribute("disabled"))||n.parentNode.disabled&&x.nodeName(n.parentNode,"optgroup"))){if(t=x(n).val(),o)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=x.makeArray(t),s=i.length;while(s--)r=i[s],(r.selected=x.inArray(x(r).val(),o)>=0)&&(n=!0);return n||(e.selectedIndex=-1),o}}},attr:function(e,t,n){var i,o,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return typeof e.getAttribute===r?x.prop(e,t,n):(1===s&&x.isXMLDoc(e)||(t=t.toLowerCase(),i=x.attrHooks[t]||(x.expr.match.bool.test(t)?M:R)),n===undefined?i&&"get"in i&&null!==(o=i.get(e,t))?o:(o=x.find.attr(e,t),null==o?undefined:o):null!==n?i&&"set"in i&&(o=i.set(e,n,t))!==undefined?o:(e.setAttribute(t,n+""),n):(x.removeAttr(e,t),undefined))},removeAttr:function(e,t){var n,r,i=0,o=t&&t.match(w);if(o&&1===e.nodeType)while(n=o[i++])r=x.propFix[n]||n,x.expr.match.bool.test(n)&&(e[r]=!1),e.removeAttribute(n)},attrHooks:{type:{set:function(e,t){if(!x.support.radioValue&&"radio"===t&&x.nodeName(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},propFix:{"for":"htmlFor","class":"className"},prop:function(e,t,n){var r,i,o,s=e.nodeType;if(e&&3!==s&&8!==s&&2!==s)return o=1!==s||!x.isXMLDoc(e),o&&(t=x.propFix[t]||t,i=x.propHooks[t]),n!==undefined?i&&"set"in i&&(r=i.set(e,n,t))!==undefined?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){return e.hasAttribute("tabindex")||B.test(e.nodeName)||e.href?e.tabIndex:-1}}}}),M={set:function(e,t,n){return t===!1?x.removeAttr(e,n):e.setAttribute(n,n),n}},x.each(x.expr.match.bool.source.match(/\w+/g),function(e,t){var n=x.expr.attrHandle[t]||x.find.attr;x.expr.attrHandle[t]=function(e,t,r){var i=x.expr.attrHandle[t],o=r?undefined:(x.expr.attrHandle[t]=undefined)!=n(e,t,r)?t.toLowerCase():null;return x.expr.attrHandle[t]=i,o}}),x.support.optSelected||(x.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null}}),x.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){x.propFix[this.toLowerCase()]=this}),x.each(["radio","checkbox"],function(){x.valHooks[this]={set:function(e,t){return x.isArray(t)?e.checked=x.inArray(x(e).val(),t)>=0:undefined}},x.support.checkOn||(x.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})});var I=/^key/,z=/^(?:mouse|contextmenu)|click/,_=/^(?:focusinfocus|focusoutblur)$/,X=/^([^.]*)(?:\.(.+)|)$/;function U(){return!0}function Y(){return!1}function V(){try{return o.activeElement}catch(e){}}x.event={global:{},add:function(e,t,n,i,o){var s,a,u,l,c,p,f,h,d,g,m,y=q.get(e);if(y){n.handler&&(s=n,n=s.handler,o=s.selector),n.guid||(n.guid=x.guid++),(l=y.events)||(l=y.events={}),(a=y.handle)||(a=y.handle=function(e){return typeof x===r||e&&x.event.triggered===e.type?undefined:x.event.dispatch.apply(a.elem,arguments)},a.elem=e),t=(t||"").match(w)||[""],c=t.length;while(c--)u=X.exec(t[c])||[],d=m=u[1],g=(u[2]||"").split(".").sort(),d&&(f=x.event.special[d]||{},d=(o?f.delegateType:f.bindType)||d,f=x.event.special[d]||{},p=x.extend({type:d,origType:m,data:i,handler:n,guid:n.guid,selector:o,needsContext:o&&x.expr.match.needsContext.test(o),namespace:g.join(".")},s),(h=l[d])||(h=l[d]=[],h.delegateCount=0,f.setup&&f.setup.call(e,i,g,a)!==!1||e.addEventListener&&e.addEventListener(d,a,!1)),f.add&&(f.add.call(e,p),p.handler.guid||(p.handler.guid=n.guid)),o?h.splice(h.delegateCount++,0,p):h.push(p),x.event.global[d]=!0);e=null}},remove:function(e,t,n,r,i){var o,s,a,u,l,c,p,f,h,d,g,m=q.hasData(e)&&q.get(e);if(m&&(u=m.events)){t=(t||"").match(w)||[""],l=t.length;while(l--)if(a=X.exec(t[l])||[],h=g=a[1],d=(a[2]||"").split(".").sort(),h){p=x.event.special[h]||{},h=(r?p.delegateType:p.bindType)||h,f=u[h]||[],a=a[2]&&RegExp("(^|\\.)"+d.join("\\.(?:.*\\.|)")+"(\\.|$)"),s=o=f.length;while(o--)c=f[o],!i&&g!==c.origType||n&&n.guid!==c.guid||a&&!a.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(f.splice(o,1),c.selector&&f.delegateCount--,p.remove&&p.remove.call(e,c));s&&!f.length&&(p.teardown&&p.teardown.call(e,d,m.handle)!==!1||x.removeEvent(e,h,m.handle),delete u[h])}else for(h in u)x.event.remove(e,h+t[l],n,r,!0);x.isEmptyObject(u)&&(delete m.handle,q.remove(e,"events"))}},trigger:function(t,n,r,i){var s,a,u,l,c,p,f,h=[r||o],d=y.call(t,"type")?t.type:t,g=y.call(t,"namespace")?t.namespace.split("."):[];if(a=u=r=r||o,3!==r.nodeType&&8!==r.nodeType&&!_.test(d+x.event.triggered)&&(d.indexOf(".")>=0&&(g=d.split("."),d=g.shift(),g.sort()),c=0>d.indexOf(":")&&"on"+d,t=t[x.expando]?t:new x.Event(d,"object"==typeof t&&t),t.isTrigger=i?2:3,t.namespace=g.join("."),t.namespace_re=t.namespace?RegExp("(^|\\.)"+g.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,t.result=undefined,t.target||(t.target=r),n=null==n?[t]:x.makeArray(n,[t]),f=x.event.special[d]||{},i||!f.trigger||f.trigger.apply(r,n)!==!1)){if(!i&&!f.noBubble&&!x.isWindow(r)){for(l=f.delegateType||d,_.test(l+d)||(a=a.parentNode);a;a=a.parentNode)h.push(a),u=a;u===(r.ownerDocument||o)&&h.push(u.defaultView||u.parentWindow||e)}s=0;while((a=h[s++])&&!t.isPropagationStopped())t.type=s>1?l:f.bindType||d,p=(q.get(a,"events")||{})[t.type]&&q.get(a,"handle"),p&&p.apply(a,n),p=c&&a[c],p&&x.acceptData(a)&&p.apply&&p.apply(a,n)===!1&&t.preventDefault();return t.type=d,i||t.isDefaultPrevented()||f._default&&f._default.apply(h.pop(),n)!==!1||!x.acceptData(r)||c&&x.isFunction(r[d])&&!x.isWindow(r)&&(u=r[c],u&&(r[c]=null),x.event.triggered=d,r[d](),x.event.triggered=undefined,u&&(r[c]=u)),t.result}},dispatch:function(e){e=x.event.fix(e);var t,n,r,i,o,s=[],a=d.call(arguments),u=(q.get(this,"events")||{})[e.type]||[],l=x.event.special[e.type]||{};if(a[0]=e,e.delegateTarget=this,!l.preDispatch||l.preDispatch.call(this,e)!==!1){s=x.event.handlers.call(this,e,u),t=0;while((i=s[t++])&&!e.isPropagationStopped()){e.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!e.isImmediatePropagationStopped())(!e.namespace_re||e.namespace_re.test(o.namespace))&&(e.handleObj=o,e.data=o.data,r=((x.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,a),r!==undefined&&(e.result=r)===!1&&(e.preventDefault(),e.stopPropagation()))}return l.postDispatch&&l.postDispatch.call(this,e),e.result}},handlers:function(e,t){var n,r,i,o,s=[],a=t.delegateCount,u=e.target;if(a&&u.nodeType&&(!e.button||"click"!==e.type))for(;u!==this;u=u.parentNode||this)if(u.disabled!==!0||"click"!==e.type){for(r=[],n=0;a>n;n++)o=t[n],i=o.selector+" ",r[i]===undefined&&(r[i]=o.needsContext?x(i,this).index(u)>=0:x.find(i,this,null,[u]).length),r[i]&&r.push(o);r.length&&s.push({elem:u,handlers:r})}return t.length>a&&s.push({elem:this,handlers:t.slice(a)}),s},props:"altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(e,t){return null==e.which&&(e.which=null!=t.charCode?t.charCode:t.keyCode),e}},mouseHooks:{props:"button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(e,t){var n,r,i,s=t.button;return null==e.pageX&&null!=t.clientX&&(n=e.target.ownerDocument||o,r=n.documentElement,i=n.body,e.pageX=t.clientX+(r&&r.scrollLeft||i&&i.scrollLeft||0)-(r&&r.clientLeft||i&&i.clientLeft||0),e.pageY=t.clientY+(r&&r.scrollTop||i&&i.scrollTop||0)-(r&&r.clientTop||i&&i.clientTop||0)),e.which||s===undefined||(e.which=1&s?1:2&s?3:4&s?2:0),e}},fix:function(e){if(e[x.expando])return e;var t,n,r,i=e.type,s=e,a=this.fixHooks[i];a||(this.fixHooks[i]=a=z.test(i)?this.mouseHooks:I.test(i)?this.keyHooks:{}),r=a.props?this.props.concat(a.props):this.props,e=new x.Event(s),t=r.length;while(t--)n=r[t],e[n]=s[n];return e.target||(e.target=o),3===e.target.nodeType&&(e.target=e.target.parentNode),a.filter?a.filter(e,s):e},special:{load:{noBubble:!0},focus:{trigger:function(){return this!==V()&&this.focus?(this.focus(),!1):undefined},delegateType:"focusin"},blur:{trigger:function(){return this===V()&&this.blur?(this.blur(),!1):undefined},delegateType:"focusout"},click:{trigger:function(){return"checkbox"===this.type&&this.click&&x.nodeName(this,"input")?(this.click(),!1):undefined},_default:function(e){return x.nodeName(e.target,"a")}},beforeunload:{postDispatch:function(e){e.result!==undefined&&(e.originalEvent.returnValue=e.result)}}},simulate:function(e,t,n,r){var i=x.extend(new x.Event,n,{type:e,isSimulated:!0,originalEvent:{}});r?x.event.trigger(i,null,t):x.event.dispatch.call(t,i),i.isDefaultPrevented()&&n.preventDefault()}},x.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n,!1)},x.Event=function(e,t){return this instanceof x.Event?(e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||e.getPreventDefault&&e.getPreventDefault()?U:Y):this.type=e,t&&x.extend(this,t),this.timeStamp=e&&e.timeStamp||x.now(),this[x.expando]=!0,undefined):new x.Event(e,t)},x.Event.prototype={isDefaultPrevented:Y,isPropagationStopped:Y,isImmediatePropagationStopped:Y,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=U,e&&e.preventDefault&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=U,e&&e.stopPropagation&&e.stopPropagation()},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=U,this.stopPropagation()}},x.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(e,t){x.event.special[e]={delegateType:t,bindType:t,handle:function(e){var n,r=this,i=e.relatedTarget,o=e.handleObj;return(!i||i!==r&&!x.contains(r,i))&&(e.type=o.origType,n=o.handler.apply(this,arguments),e.type=t),n}}}),x.support.focusinBubbles||x.each({focus:"focusin",blur:"focusout"},function(e,t){var n=0,r=function(e){x.event.simulate(t,e.target,x.event.fix(e),!0)};x.event.special[t]={setup:function(){0===n++&&o.addEventListener(e,r,!0)},teardown:function(){0===--n&&o.removeEventListener(e,r,!0)}}}),x.fn.extend({on:function(e,t,n,r,i){var o,s;if("object"==typeof e){"string"!=typeof t&&(n=n||t,t=undefined);for(s in e)this.on(s,t,n,e[s],i);return this}if(null==n&&null==r?(r=t,n=t=undefined):null==r&&("string"==typeof t?(r=n,n=undefined):(r=n,n=t,t=undefined)),r===!1)r=Y;else if(!r)return this;return 1===i&&(o=r,r=function(e){return x().off(e),o.apply(this,arguments)},r.guid=o.guid||(o.guid=x.guid++)),this.each(function(){x.event.add(this,e,r,n,t)})},one:function(e,t,n,r){return this.on(e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,x(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return(t===!1||"function"==typeof t)&&(n=t,t=undefined),n===!1&&(n=Y),this.each(function(){x.event.remove(this,e,n,t)})},trigger:function(e,t){return this.each(function(){x.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];return n?x.event.trigger(e,t,n,!0):undefined}});var G=/^.[^:#\[\.,]*$/,J=/^(?:parents|prev(?:Until|All))/,Q=x.expr.match.needsContext,K={children:!0,contents:!0,next:!0,prev:!0};x.fn.extend({find:function(e){var t,n=[],r=this,i=r.length;if("string"!=typeof e)return this.pushStack(x(e).filter(function(){for(t=0;i>t;t++)if(x.contains(r[t],this))return!0}));for(t=0;i>t;t++)x.find(e,r[t],n);return n=this.pushStack(i>1?x.unique(n):n),n.selector=this.selector?this.selector+" "+e:e,n},has:function(e){var t=x(e,this),n=t.length;return this.filter(function(){var e=0;for(;n>e;e++)if(x.contains(this,t[e]))return!0})},not:function(e){return this.pushStack(et(this,e||[],!0))},filter:function(e){return this.pushStack(et(this,e||[],!1))},is:function(e){return!!et(this,"string"==typeof e&&Q.test(e)?x(e):e||[],!1).length},closest:function(e,t){var n,r=0,i=this.length,o=[],s=Q.test(e)||"string"!=typeof e?x(e,t||this.context):0;for(;i>r;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(11>n.nodeType&&(s?s.index(n)>-1:1===n.nodeType&&x.find.matchesSelector(n,e))){n=o.push(n);break}return this.pushStack(o.length>1?x.unique(o):o)},index:function(e){return e?"string"==typeof e?g.call(x(e),this[0]):g.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){var n="string"==typeof e?x(e,t):x.makeArray(e&&e.nodeType?[e]:e),r=x.merge(this.get(),n);return this.pushStack(x.unique(r))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function Z(e,t){while((e=e[t])&&1!==e.nodeType);return e}x.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return x.dir(e,"parentNode")},parentsUntil:function(e,t,n){return x.dir(e,"parentNode",n)},next:function(e){return Z(e,"nextSibling")},prev:function(e){return Z(e,"previousSibling")},nextAll:function(e){return x.dir(e,"nextSibling")},prevAll:function(e){return x.dir(e,"previousSibling")},nextUntil:function(e,t,n){return x.dir(e,"nextSibling",n)},prevUntil:function(e,t,n){return x.dir(e,"previousSibling",n)},siblings:function(e){return x.sibling((e.parentNode||{}).firstChild,e)},children:function(e){return x.sibling(e.firstChild)},contents:function(e){return e.contentDocument||x.merge([],e.childNodes)}},function(e,t){x.fn[e]=function(n,r){var i=x.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=x.filter(r,i)),this.length>1&&(K[e]||x.unique(i),J.test(e)&&i.reverse()),this.pushStack(i)}}),x.extend({filter:function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?x.find.matchesSelector(r,e)?[r]:[]:x.find.matches(e,x.grep(t,function(e){return 1===e.nodeType}))},dir:function(e,t,n){var r=[],i=n!==undefined;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&x(e).is(n))break;r.push(e)}return r},sibling:function(e,t){var n=[];for(;e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n}});function et(e,t,n){if(x.isFunction(t))return x.grep(e,function(e,r){return!!t.call(e,r,e)!==n});if(t.nodeType)return x.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(G.test(t))return x.filter(t,e,n);t=x.filter(t,e)}return x.grep(e,function(e){return g.call(t,e)>=0!==n})}var tt=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,nt=/<([\w:]+)/,rt=/<|&#?\w+;/,it=/<(?:script|style|link)/i,ot=/^(?:checkbox|radio)$/i,st=/checked\s*(?:[^=]|=\s*.checked.)/i,at=/^$|\/(?:java|ecma)script/i,ut=/^true\/(.*)/,lt=/^\s*\s*$/g,ct={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};ct.optgroup=ct.option,ct.tbody=ct.tfoot=ct.colgroup=ct.caption=ct.thead,ct.th=ct.td,x.fn.extend({text:function(e){return x.access(this,function(e){return e===undefined?x.text(this):this.empty().append((this[0]&&this[0].ownerDocument||o).createTextNode(e))},null,e,arguments.length)},append:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=pt(this,e);t.appendChild(e)}})},prepend:function(){return this.domManip(arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=pt(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=e?x.filter(e,this):this,i=0;for(;null!=(n=r[i]);i++)t||1!==n.nodeType||x.cleanData(mt(n)),n.parentNode&&(t&&x.contains(n.ownerDocument,n)&&dt(mt(n,"script")),n.parentNode.removeChild(n));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++)1===e.nodeType&&(x.cleanData(mt(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return x.clone(this,e,t)})},html:function(e){return x.access(this,function(e){var t=this[0]||{},n=0,r=this.length;if(e===undefined&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!it.test(e)&&!ct[(nt.exec(e)||["",""])[1].toLowerCase()]){e=e.replace(tt,"<$1>");try{for(;r>n;n++)t=this[n]||{},1===t.nodeType&&(x.cleanData(mt(t,!1)),t.innerHTML=e);t=0}catch(i){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var e=x.map(this,function(e){return[e.nextSibling,e.parentNode]}),t=0;return this.domManip(arguments,function(n){var r=e[t++],i=e[t++];i&&(r&&r.parentNode!==i&&(r=this.nextSibling),x(this).remove(),i.insertBefore(n,r))},!0),t?this:this.remove()},detach:function(e){return this.remove(e,!0)},domManip:function(e,t,n){e=f.apply([],e);var r,i,o,s,a,u,l=0,c=this.length,p=this,h=c-1,d=e[0],g=x.isFunction(d);if(g||!(1>=c||"string"!=typeof d||x.support.checkClone)&&st.test(d))return this.each(function(r){var i=p.eq(r);g&&(e[0]=d.call(this,r,i.html())),i.domManip(e,t,n)});if(c&&(r=x.buildFragment(e,this[0].ownerDocument,!1,!n&&this),i=r.firstChild,1===r.childNodes.length&&(r=i),i)){for(o=x.map(mt(r,"script"),ft),s=o.length;c>l;l++)a=r,l!==h&&(a=x.clone(a,!0,!0),s&&x.merge(o,mt(a,"script"))),t.call(this[l],a,l);if(s)for(u=o[o.length-1].ownerDocument,x.map(o,ht),l=0;s>l;l++)a=o[l],at.test(a.type||"")&&!q.access(a,"globalEval")&&x.contains(u,a)&&(a.src?x._evalUrl(a.src):x.globalEval(a.textContent.replace(lt,"")))}return this}}),x.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){x.fn[e]=function(e){var n,r=[],i=x(e),o=i.length-1,s=0;for(;o>=s;s++)n=s===o?this:this.clone(!0),x(i[s])[t](n),h.apply(r,n.get());return this.pushStack(r)}}),x.extend({clone:function(e,t,n){var r,i,o,s,a=e.cloneNode(!0),u=x.contains(e.ownerDocument,e);if(!(x.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||x.isXMLDoc(e)))for(s=mt(a),o=mt(e),r=0,i=o.length;i>r;r++)yt(o[r],s[r]);if(t)if(n)for(o=o||mt(e),s=s||mt(a),r=0,i=o.length;i>r;r++)gt(o[r],s[r]);else gt(e,a);return s=mt(a,"script"),s.length>0&&dt(s,!u&&mt(e,"script")),a},buildFragment:function(e,t,n,r){var i,o,s,a,u,l,c=0,p=e.length,f=t.createDocumentFragment(),h=[];for(;p>c;c++)if(i=e[c],i||0===i)if("object"===x.type(i))x.merge(h,i.nodeType?[i]:i);else if(rt.test(i)){o=o||f.appendChild(t.createElement("div")),s=(nt.exec(i)||["",""])[1].toLowerCase(),a=ct[s]||ct._default,o.innerHTML=a[1]+i.replace(tt,"<$1>")+a[2],l=a[0];while(l--)o=o.lastChild;x.merge(h,o.childNodes),o=f.firstChild,o.textContent=""}else h.push(t.createTextNode(i));f.textContent="",c=0;while(i=h[c++])if((!r||-1===x.inArray(i,r))&&(u=x.contains(i.ownerDocument,i),o=mt(f.appendChild(i),"script"),u&&dt(o),n)){l=0;while(i=o[l++])at.test(i.type||"")&&n.push(i)}return f},cleanData:function(e){var t,n,r,i,o,s,a=x.event.special,u=0;for(;(n=e[u])!==undefined;u++){if(F.accepts(n)&&(o=n[q.expando],o&&(t=q.cache[o]))){if(r=Object.keys(t.events||{}),r.length)for(s=0;(i=r[s])!==undefined;s++)a[i]?x.event.remove(n,i):x.removeEvent(n,i,t.handle);q.cache[o]&&delete q.cache[o]}delete L.cache[n[L.expando]]}},_evalUrl:function(e){return x.ajax({url:e,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0})}});function pt(e,t){return x.nodeName(e,"table")&&x.nodeName(1===t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function ft(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function ht(e){var t=ut.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function dt(e,t){var n=e.length,r=0;for(;n>r;r++)q.set(e[r],"globalEval",!t||q.get(t[r],"globalEval"))}function gt(e,t){var n,r,i,o,s,a,u,l;if(1===t.nodeType){if(q.hasData(e)&&(o=q.access(e),s=q.set(t,o),l=o.events)){delete s.handle,s.events={};for(i in l)for(n=0,r=l[i].length;r>n;n++)x.event.add(t,i,l[i][n])}L.hasData(e)&&(a=L.access(e),u=x.extend({},a),L.set(t,u))}}function mt(e,t){var n=e.getElementsByTagName?e.getElementsByTagName(t||"*"):e.querySelectorAll?e.querySelectorAll(t||"*"):[];return t===undefined||t&&x.nodeName(e,t)?x.merge([e],n):n}function yt(e,t){var n=t.nodeName.toLowerCase();"input"===n&&ot.test(e.type)?t.checked=e.checked:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}x.fn.extend({wrapAll:function(e){var t;return x.isFunction(e)?this.each(function(t){x(this).wrapAll(e.call(this,t))}):(this[0]&&(t=x(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this)},wrapInner:function(e){return x.isFunction(e)?this.each(function(t){x(this).wrapInner(e.call(this,t))}):this.each(function(){var t=x(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=x.isFunction(e);return this.each(function(n){x(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){x.nodeName(this,"body")||x(this).replaceWith(this.childNodes)}).end()}});var vt,xt,bt=/^(none|table(?!-c[ea]).+)/,wt=/^margin/,Tt=RegExp("^("+b+")(.*)$","i"),Ct=RegExp("^("+b+")(?!px)[a-z%]+$","i"),kt=RegExp("^([+-])=("+b+")","i"),Nt={BODY:"block"},Et={position:"absolute",visibility:"hidden",display:"block"},St={letterSpacing:0,fontWeight:400},jt=["Top","Right","Bottom","Left"],Dt=["Webkit","O","Moz","ms"];function At(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Dt.length;while(i--)if(t=Dt[i]+n,t in e)return t;return r}function Lt(e,t){return e=t||e,"none"===x.css(e,"display")||!x.contains(e.ownerDocument,e)}function qt(t){return e.getComputedStyle(t,null)}function Ht(e,t){var n,r,i,o=[],s=0,a=e.length;for(;a>s;s++)r=e[s],r.style&&(o[s]=q.get(r,"olddisplay"),n=r.style.display,t?(o[s]||"none"!==n||(r.style.display=""),""===r.style.display&&Lt(r)&&(o[s]=q.access(r,"olddisplay",Rt(r.nodeName)))):o[s]||(i=Lt(r),(n&&"none"!==n||!i)&&q.set(r,"olddisplay",i?n:x.css(r,"display"))));for(s=0;a>s;s++)r=e[s],r.style&&(t&&"none"!==r.style.display&&""!==r.style.display||(r.style.display=t?o[s]||"":"none"));return e}x.fn.extend({css:function(e,t){return x.access(this,function(e,t,n){var r,i,o={},s=0;if(x.isArray(t)){for(r=qt(e),i=t.length;i>s;s++)o[t[s]]=x.css(e,t[s],!1,r);return o}return n!==undefined?x.style(e,t,n):x.css(e,t)},e,t,arguments.length>1)},show:function(){return Ht(this,!0)},hide:function(){return Ht(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){Lt(this)?x(this).show():x(this).hide()})}}),x.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=vt(e,"opacity");return""===n?"1":n}}}},cssNumber:{columnCount:!0,fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":"cssFloat"},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,s,a=x.camelCase(t),u=e.style;return t=x.cssProps[a]||(x.cssProps[a]=At(u,a)),s=x.cssHooks[t]||x.cssHooks[a],n===undefined?s&&"get"in s&&(i=s.get(e,!1,r))!==undefined?i:u[t]:(o=typeof n,"string"===o&&(i=kt.exec(n))&&(n=(i[1]+1)*i[2]+parseFloat(x.css(e,t)),o="number"),null==n||"number"===o&&isNaN(n)||("number"!==o||x.cssNumber[a]||(n+="px"),x.support.clearCloneStyle||""!==n||0!==t.indexOf("background")||(u[t]="inherit"),s&&"set"in s&&(n=s.set(e,n,r))===undefined||(u[t]=n)),undefined)}},css:function(e,t,n,r){var i,o,s,a=x.camelCase(t);return t=x.cssProps[a]||(x.cssProps[a]=At(e.style,a)),s=x.cssHooks[t]||x.cssHooks[a],s&&"get"in s&&(i=s.get(e,!0,n)),i===undefined&&(i=vt(e,t,r)),"normal"===i&&t in St&&(i=St[t]),""===n||n?(o=parseFloat(i),n===!0||x.isNumeric(o)?o||0:i):i}}),vt=function(e,t,n){var r,i,o,s=n||qt(e),a=s?s.getPropertyValue(t)||s[t]:undefined,u=e.style;return s&&(""!==a||x.contains(e.ownerDocument,e)||(a=x.style(e,t)),Ct.test(a)&&wt.test(t)&&(r=u.width,i=u.minWidth,o=u.maxWidth,u.minWidth=u.maxWidth=u.width=a,a=s.width,u.width=r,u.minWidth=i,u.maxWidth=o)),a};function Ot(e,t,n){var r=Tt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function Ft(e,t,n,r,i){var o=n===(r?"border":"content")?4:"width"===t?1:0,s=0;for(;4>o;o+=2)"margin"===n&&(s+=x.css(e,n+jt[o],!0,i)),r?("content"===n&&(s-=x.css(e,"padding"+jt[o],!0,i)),"margin"!==n&&(s-=x.css(e,"border"+jt[o]+"Width",!0,i))):(s+=x.css(e,"padding"+jt[o],!0,i),"padding"!==n&&(s+=x.css(e,"border"+jt[o]+"Width",!0,i)));return s}function Pt(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=qt(e),s=x.support.boxSizing&&"border-box"===x.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=vt(e,t,o),(0>i||null==i)&&(i=e.style[t]),Ct.test(i))return i;r=s&&(x.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+Ft(e,t,n||(s?"border":"content"),r,o)+"px"}function Rt(e){var t=o,n=Nt[e];return n||(n=Mt(e,t),"none"!==n&&n||(xt=(xt||x("