slitaz-forge view arm/style.css @ rev 496

arm: tiny edits
author Paul Issott <paul@slitaz.org>
date Mon Mar 31 19:12:23 2014 +0100 (2014-03-31)
parents b29da4b62a3f
children 8ff618229a20
line source
1 /* CSS style for SliTaz Network (minimal version) */
2
3 html { min-height: 102%; }
4 body { font: 13px sans-serif, vernada, arial; margin: 0; }
5 h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; }
6 h1 a { color: #fff; text-decoration: none; }
7 h2 { color: #444; border-bottom: 1px dashed #afafaf;
8 padding: 4px 0px; margin: 30px 0 0 0; }
9 h3 { color: #666; font-size: 140%; }
10 a { text-decoration: underline; color: #215090; }
11 a:hover { text-decoration: none; }
12 li { list-style-type: square; }
13 img { border: 0pt none; vertical-align: middle; }
14 pre {
15 overflow: auto;
16 font-size: 98%;
17 }
18
19 /* Header */
20
21 #header {
22 background: #222;
23 height: 40px;
24 border-bottom: 4px solid #afafaf;
25 }
26
27 #header h1 {
28 margin: 0;
29 padding: 8px 0 0 42px;
30 width: 250px;
31 }
32
33 #header h1 a {
34 color: white;
35 text-decoration: none;
36 font-size: 20px;
37 font-style: italic;
38 }
39
40 #header h1 a:hover {
41 color: #afafaf;
42 }
43
44 /* Header links */
45
46 #network {
47 float: right;
48 padding: 14px 5px 0;
49 font-size: 12px;
50 }
51
52 #network a, #network span {
53 padding: 0 4px;
54 color: #fff;
55 font-weight: bold;
56 text-decoration: none;
57 }
58
59 #network a:hover, #network span { color: #afafaf; }
60
61 /* Logo */
62
63 #logo {
64 background: url(images/logo.png) no-repeat left;
65 position: absolute;
66 float: left;
67 left: 0px;
68 top: 0px;
69 width: 40px;
70 height: 40px;
71 }
72
73 /* Block */
74
75 #block {
76 min-height: 74px;
77 background: #ccc;
78 padding: 20px 10% 0px;
79 text-align: center;
80 color: #222;
81 border-bottom: 1px solid #afafaf;
82 }
83
84 #block_info {
85 text-align: justify;
86 width: 48%;
87 padding: 4px 0;
88 }
89
90 #block_info img { margin-right: 6px; }
91 #block_info p { margin: 10px 0; padding: 0; }
92 #block_info a { font-weight: normal; }
93 #block a:hover { color: #351a0a; }
94
95 #block_nav {
96 background: #666;
97 padding: 14px 6px;
98 text-align: justify;
99 width: 48%;
100 float: right;
101 }
102
103 nav { margin: 0; }
104
105 nav a {
106 text-decoration: none;
107 padding: 0px 4px;
108 color: #fff;
109 font-weight: bold;
110 vertical-align: middle;
111 }
112
113 #block_nav a:hover, nav a:hover { color: #afafaf; }
114
115 /* Search */
116
117 #search {
118 position: absolute;
119 right: 20px;
120 top: 60px;
121 }
122
123 #search input[type="text"] {
124 width: 200px;
125
126 padding: 4px;
127 margin: 4px 0px;
128 font-size: 14px;
129 line-height: 1.2em;
130 background: #fefefe;
131 border: 2px solid #afafaf;
132 -webkit-appearance: none;
133 -webkit-padding-end: 12px;
134 -webkit-padding-start: 6px;
135 }
136
137 /* Content */
138
139 #content {
140 margin: 40px auto;
141 padding: 0 20px;
142 text-align: justify;
143 max-width: 760px;
144 }
145
146 .box {
147 padding: 6px;
148 margin: 4px 0px;
149 }
150
151 .box-up, .box-share, .box-rpi {
152 padding: 20px 10px 20px 54px; margin: 20px 0; }
153
154 .box-dl {
155 background: url("images/download.png") no-repeat 12px center;
156 padding: 16px 16px 16px 54px;
157 margin: 20px 60px;
158 }
159
160 .box-up {
161 background: url("images/generic.png") no-repeat 12px center;
162 }
163
164 .box-share {
165 background: url("images/share.png") no-repeat 12px center;
166 }
167
168 .box-rpi {
169 background: url("images/raspberrypi.png") no-repeat 12px center;
170 }
171
172 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
173 background-color: #efefef;
174 border: 1px solid #ddd;
175 }
176
177 pre {
178 padding: 10px;
179 }
180
181 pre img { margin: 4px 4px 4px 0px; }
182
183 .error { color: red; }
184 .ok { color: green; }
185 .date { color: #666; font-size: 96%; }
186
187 /* Round corner */
188
189 pre, img, .box, .box-dl, .box-up, .box-rpi, input[type="text"],
190 #block_nav, .box-share {
191 -moz-border-radius: 4px;
192 -webkit-border-radius: 4px;
193 border-radius: 4px;
194 }
195
196 /* Footer */
197
198 #footer {
199 text-align: center;
200 padding: 20px;
201 border-top: 1px solid #ddd;
202 font-size: 90%;
203 }
204
205 #footer a { padding: 0 2px; }