|
1 |
|
2 @font-face { |
|
3 font-family: 'exo'; |
|
4 src: url('app://font/exo/exo-regular.eot'); |
|
5 src: url('app://font/exo/exo-regular.eot?#iefix') format('embedded-opentype'), |
|
6 url('app://font/exo/exo-regular.woff') format('woff'), |
|
7 url('app://font/exo/exo-regular.ttf') format('truetype'), |
|
8 url('app://font/exo/exo-regular.svg#batchregular') format('svg'); |
|
9 font-weight: normal; |
|
10 font-style: normal; |
|
11 } |
|
12 |
|
13 @font-face { |
|
14 font-family: 'exobold'; |
|
15 src: url('app://font/exo/exo-bold.eot'); |
|
16 src: url('app://font/exo/exo-bold.eot?#iefix') format('embedded-opentype'), |
|
17 url('app://font/exo/exo-bold.woff') format('woff'), |
|
18 url('app://font/exo/exo-bold.ttf') format('truetype'), |
|
19 url('app://font/exo/exo-bold.svg#batchregular') format('svg'); |
|
20 font-weight: normal; |
|
21 font-style: normal; |
|
22 } |
|
23 |
|
24 /* http://adamwhitcroft.com/batch/ */ |
|
25 @font-face { |
|
26 font-family: 'batch'; |
|
27 src: url('app://font/batch/batch.eot'); |
|
28 src: url('app://font/batch/batch.eot?#iefix') format('embedded-opentype'), |
|
29 url('app://font/batch/batch.woff') format('woff'), |
|
30 url('app://font/batch/batch.ttf') format('truetype'), |
|
31 url('app://font/batch/batch.svg#batchregular') format('svg'); |
|
32 font-weight: normal; |
|
33 font-style: normal; |
|
34 } |
|
35 |
|
36 a { |
|
37 text-decoration: none; |
|
38 color: inherit !important; |
|
39 } |
|
40 |
|
41 .icon { |
|
42 font-family: 'batch'; |
|
43 line-height: 1; |
|
44 text-shadow: none; |
|
45 } |
|
46 |
|
47 body { |
|
48 background-color: #333; |
|
49 color: #fff; |
|
50 margin: 10px; |
|
51 padding: 0; |
|
52 font-family: "exo", Helvetica, Geneva, sans-serif; |
|
53 font-size: 1em; |
|
54 text-shadow: 2px 2px 2px #000; |
|
55 } |
|
56 |
|
57 fieldset { |
|
58 border: 1px inset #222; |
|
59 border-radius: 5px; |
|
60 background-image: -webkit-gradient( linear, left top, left bottom, color-stop( 0%, #222 ), color-stop( 20%, #303030) ); |
|
61 } |
|
62 |
|
63 /* button styles */ |
|
64 /* ---------------------------------------------- */ |
|
65 .button { |
|
66 display: inline-block; |
|
67 vertical-align: baseline; |
|
68 margin: 0 2px; |
|
69 outline: none; |
|
70 cursor: pointer; |
|
71 text-align: center; |
|
72 text-decoration: none; |
|
73 font: 14px/100% Arial, Helvetica, Geneva, sans-serif; |
|
74 padding: .5em 2em .55em; |
|
75 text-shadow: -1px -1px 0 rgba(0,0,0,0.3); |
|
76 box-shadow: 0 1px 2px rgba(0,0,0,.2); |
|
77 border: 1px solid #7d99ca; |
|
78 border-radius: 3px; |
|
79 color: #FFF; |
|
80 background-color: #a5b8da; |
|
81 background-image: -webkit-gradient( linear, left top, left bottom, from(#a5b8da), to(#7089b3) ); |
|
82 } |
|
83 |
|
84 .button:hover { |
|
85 border: 1px solid #5d7fbc; |
|
86 background-color: #819bcb; |
|
87 background-image: -webkit-gradient( linear, left top, left bottom, from(#819bcb), to(#536f9d) ); |
|
88 } |
|
89 |
|
90 .button:active { |
|
91 position: relative; |
|
92 top: 1px; |
|
93 } |
|
94 |
|
95 |
|
96 /* input field styles */ |
|
97 /* ---------------------------------------------- */ |
|
98 |
|
99 ::-webkit-input-placeholder { color: #333; } |
|
100 |
|
101 input[type="text"], |
|
102 select { |
|
103 font-family: "exo", Helvetica, Geneva, sans-serif; |
|
104 font-size: 0.8em; |
|
105 padding: 2px; |
|
106 background-color: #888; |
|
107 border-top: 1px solid #333; |
|
108 border-right: 1px solid #777; |
|
109 border-bottom: 1px solid #777; |
|
110 border-left: 1px solid #333; |
|
111 color: #000; |
|
112 box-shadow: inset -4px 4px 10px #555; |
|
113 border-radius: 3px; |
|
114 } |
|
115 |
|
116 input[type="text"]:active, |
|
117 select:active { |
|
118 border: 1px solid #00ffff; |
|
119 } |
|
120 |
|
121 input[type="text"]:focus, |
|
122 select:focus { |
|
123 background-color: #bbb; |
|
124 } |
|
125 |