1 body, img, div { 2 font-family: Verdana; 3 margin: 0; 4 padding: 0; 5 } 6 7 table { 8 width:100%; 9 border-collapse: collapse; 10 border-spacing: 0; 11 padding: 8px; 12 } 13 14 td { 15 border-top: 1px solid #DDD; 16 padding: 8px; 17 } 18 thead > tr > td { 19 border: none; 20 } 21 22 button { 23 font-family: Verdana; 24 font-weight: 900; 25 } 26 27 input[type="checkbox"] { 28 -webkit-appearance: none; 29 -moz-appearance: none; 30 width: 20px; 31 height:20px; 32 padding: 2px; 33 background: #EEE; 34 border-radius: 2px; 35 box-shadow: inset 0 0 8px -2px black; 36 } 37 38 input[type="checkbox"]:checked { 39 background: #a9db80; 40 background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); 41 } 42 43 input[type="checkbox"]:active { 44 background: #a9db80; 45 background: -webkit-linear-gradient(top, #009ec3 0%,#00b7ea 100%); 46 } 47 48 input[type="checkbox"].lastselected { 49 padding: 0; 50 border: 2px solid #009ec3; 51 box-shadow: inset 0 0 8px -2px black, 0 0 6px black; 52 } 53 54 .commit { 55 position: absolute; 56 top: 8px; 57 right: 8px; 58 } 59 60 .commit > button { 61 border: 1px solid #00687F; 62 border-radius: 4px; 63 padding: 8px; 64 color: white; 65 text-shadow: 0 0 4px black; 66 box-shadow: 0 0 8px black; 67 background: #a9db80; 68 background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); 69 } 70 71 .commit > button:active { 72 background: #96c56f; 73 background: -webkit-linear-gradient(top, #96c56f 0%,#a9db80 100%); 74 } 75 76 .gm-image { 77 border: 1px dotted black; 78 } 79 80 .gm-image:hover { 81 border: 1px dashed black; 82 } 83 84 .selected { 85 background: #ffff88; 86 } 87 88 .left-image { 89 float: right; 90 } 91 92 .right-image { 93 text-align: right; 94 } 95 96 .success-flash { 97 -webkit-animation-duration: 0.5s; 98 -webkit-animation-name: greenflash; 99 } 100 101 .failure-flash { 102 -webkit-animation-duration: 0.8s; 103 -webkit-animation-name: redflash; 104 } 105 106 @-webkit-keyframes greenflash { 107 from { 108 background-color: #8F8; 109 } 110 111 to { 112 background-color: #FFF 113 } 114 } 115 116 @-webkit-keyframes redflash { 117 from { 118 background-color: #F88; 119 } 120 121 to { 122 background-color: #FFF 123 } 124 } 125 126 .result { 127 padding: 8px; 128 cursor: default; 129 -webkit-filter: grayscale(30%) 130 } 131 132 .result:hover { 133 border: 2px dotted #DDD; 134 padding: 6px; 135 -webkit-filter: grayscale(0) 136 } 137 138 .result-0 { 139 background-color: #268bd2; 140 } 141 142 .result-1 { 143 background-color: #d33682; 144 } 145 146 .result-2 { 147 background-color: #b58900; 148 } 149 150 .result-3 { 151 background-color: #cb4b16; 152 } 153 154 .result-4 { 155 background-color: #6c71c4; 156 } 157 158 .result-5 { 159 background-color: #dc322f; 160 } 161 162 .result-6 { 163 background-color: #2aa198; 164 } 165 166 .result-7 { 167 background-color: #859900; 168 } 169