1 body, img, div { 2 font-family: Verdana; 3 margin: 0; 4 padding: 0; 5 } 6 7 table { 8 width: auto; 9 border-collapse: collapse; 10 border-spacing: 0; 11 padding: 8px; 12 } 13 14 td { 15 border-top: 1px solid #DDD; 16 padding: 16px; 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 .common-name { 77 vertical-align: top; 78 } 79 80 81 .gm-image { 82 border: 1px dotted black; 83 } 84 85 .gm-image:hover { 86 border: 1px dashed black; 87 } 88 89 .selected { 90 background: #ffff88; 91 } 92 93 .left-image { 94 float: right; 95 } 96 97 .right-image { 98 text-align: right; 99 } 100 101 .success-flash { 102 -webkit-animation-duration: 0.5s; 103 -webkit-animation-name: greenflash; 104 } 105 106 .failure-flash { 107 -webkit-animation-duration: 0.8s; 108 -webkit-animation-name: redflash; 109 } 110 111 @-webkit-keyframes greenflash { 112 from { 113 background-color: #8F8; 114 } 115 116 to { 117 background-color: #FFF 118 } 119 } 120 121 @-webkit-keyframes redflash { 122 from { 123 background-color: #F88; 124 } 125 126 to { 127 background-color: #FFF 128 } 129 } 130 131 .result { 132 padding: 8px; 133 cursor: default; 134 -webkit-filter: grayscale(30%) 135 } 136 137 .result:hover { 138 border: 2px dotted #DDD; 139 padding: 6px; 140 -webkit-filter: grayscale(0) 141 } 142 143 .result-0 { 144 background-color: #268bd2; 145 } 146 147 .result-1 { 148 background-color: #d33682; 149 } 150 151 .result-2 { 152 background-color: #b58900; 153 } 154 155 .result-3 { 156 background-color: #cb4b16; 157 } 158 159 .result-4 { 160 background-color: #6c71c4; 161 } 162 163 .result-5 { 164 background-color: #dc322f; 165 } 166 167 .result-6 { 168 background-color: #2aa198; 169 } 170 171 .result-7 { 172 background-color: #859900; 173 } 174