/
styles.css
84 lines (79 loc) · 2.29 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
body {
background-color: white; }
section {
background-color: snow;
width: 30%;
height: 26em;
margin-left: auto;
margin-right: auto;
margin-top: 5em;
text-align: center;
border-radius: 2.2em;
-webkit-box-shadow: 1px 1px 4px 5px rgba(0, 0, 0, 0.4);
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 1px 1px 4px 5px rgba(0, 0, 0, 0.4);
/* Firefox 3.5 - 3.6 */
box-shadow: 1px 1px 4px 5px rgba(0, 0, 0, 0.4);
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ }
section h2 {
padding-left: none;
margin-bottom: .5em;
margin-top: 0;
background-color: #565656;
color: transparent;
text-shadow: 0px 2px 3px white;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-transform: uppercase; }
#display {
height: 3em;
width: 100%;
background-color: #ededed;
text-align: center;
line-height: 3em;
white-space: nowrap;
overflow: hidden; }
#display span {
vertical-align: middle;
font-size: 1.8em;
font-weight: bolder; }
.row1, .row2, .row3, .row4, .row5 {
background-color: #3a7999;
display: inline-block;
margin-right: .5em;
margin-left: .5em;
margin-top: 1em;
height: 10%;
width: 15%;
text-align: center;
vertical-align: middle;
border-radius: .5em;
-webkit-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.4);
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.4);
/* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.4);
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ }
.row1 span, .row2 span, .row3 span, .row4 span, .row5 span {
color: white;
display: inline-block;
vertical-align: middle;
padding-top: .5em;
font-weight: bolder; }
.row1:hover, .row2:hover, .row3:hover, .row4:hover, .row5:hover {
background: transparent;
color: #c6c6c6;
box-shadow: inset 0 0 0 3px #3a7999; }
.row1:hover span, .row2:hover span, .row3:hover span, .row4:hover span, .row5:hover span {
color: #3a7999; }
@media (max-width: 800px) {
section {
width: 45%; } }
@media (min-width: 500px) and (max-width: 799) {
section {
width: 65%; } }
@media (min-width: 100px) and (max-width: 499px) {
section {
width: 75%; } }
/*# sourceMappingURL=styles.css.map */