15c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)/* 25c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Copyright (C) 2012 Google Inc. All rights reserved. 35c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 45c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * Redistribution and use in source and binary forms, with or without 55c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * modification, are permitted provided that the following conditions 65c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * are met: 75c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 1. Redistributions of source code must retain the above copyright 85c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer. 95c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 2. Redistributions in binary form must reproduce the above copyright 105c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * notice, this list of conditions and the following disclaimer in the 115c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * documentation and/or other materials provided with the distribution. 125c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * 135c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' AND ANY 145c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 155c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 165c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS BE LIABLE FOR ANY 175c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 185c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 195c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 205c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 215c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 225c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 235c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) */ 245c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 255c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)body { 265c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) -webkit-user-select: none; 275c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) background-color: white; 285c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) font: -webkit-small-control; 295c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) margin: 0; 305c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) overflow: hidden; 315c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 325c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 335c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)#main { 345c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) background-color: white; 355c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) border: solid 1px #8899aa; 365c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) box-shadow: inset 2px 2px 2px white, 375c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) inset -2px -2px 1px rgba(0,0,0,0.1); 385c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) padding: 6px; 395c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) float: left; 405c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 415c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 425c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles).color-swatch { 435c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) float: left; 445c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width: 20px; 455c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) height: 20px; 465c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) margin: 1px; 475c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) padding: 0; 485c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) border: 1px solid #e0e0e0; 495c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) box-sizing: content-box; 505c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 515c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 525c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles).color-swatch:focus { 535c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) border: 1px solid #000000; 545c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) outline: none; 555c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 565c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 575c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles).color-swatch-container { 585c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width: 100%; 595c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) max-height: 104px; 605c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) overflow: auto; 618abfc5808a4e34d6e03867af8bc440dee641886fTorne (Richard Coles) display: flex; 628abfc5808a4e34d6e03867af8bc440dee641886fTorne (Richard Coles) flex-flow: row wrap; 638abfc5808a4e34d6e03867af8bc440dee641886fTorne (Richard Coles) align-items: center; 645c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 655c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) 665c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles).other-color { 675c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) width: 100%; 685c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles) margin: 4px 0 0 0; 695c87bf8b86a7c82ef50fb7a89697d8e02e2553beTorne (Richard Coles)} 70