1 |
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ |
2 |
|
3 |
/* |
4 |
* What follows is the result of much research on cross-browser styling. |
5 |
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
6 |
* Kroc Camen, and the H5BP dev community and team. |
7 |
*/ |
8 |
|
9 |
/* ========================================================================== |
10 |
Base styles: opinionated defaults |
11 |
========================================================================== */ |
12 |
|
13 |
html, |
14 |
button, |
15 |
input, |
16 |
select, |
17 |
textarea { |
18 |
color: #222; |
19 |
} |
20 |
|
21 |
html { |
22 |
font-size: 1em; |
23 |
line-height: 1.4; |
24 |
} |
25 |
body |
26 |
{ |
27 |
background-color:#abb198; |
28 |
} |
29 |
|
30 |
#text |
31 |
{ |
32 |
padding-left:8.51%; |
33 |
} |
34 |
.nav-tabs { |
35 |
|
36 |
background-color: rgb(200, 209, 170); |
37 |
} |
38 |
.nav-tabs > li > a |
39 |
{ |
40 |
margin-right:2px; |
41 |
line-height:0.2em; |
42 |
border:1px solid transperent; |
43 |
border-right:2px solid rgb(255,255,255); |
44 |
color:black; |
45 |
} |
46 |
a |
47 |
{ |
48 |
color:black; |
49 |
} |
50 |
|
51 |
|
52 |
.navbar-default { |
53 |
border-color: rgb(248, 248, 248); |
54 |
} |
55 |
|
56 |
* Remove text-shadow in selection highlight: h5bp.com/i |
57 |
* These selection rule sets have to be separate. |
58 |
* Customize the background color to match your design. |
59 |
*/ |
60 |
|
61 |
::-moz-selection { |
62 |
background: #b3d4fc; |
63 |
text-shadow: none; |
64 |
} |
65 |
|
66 |
::selection { |
67 |
background: #b3d4fc; |
68 |
text-shadow: none; |
69 |
} |
70 |
|
71 |
/* |
72 |
* A better looking default horizontal rule |
73 |
*/ |
74 |
|
75 |
hr { |
76 |
display: block; |
77 |
height: 1px; |
78 |
border: 0; |
79 |
border-top: 1px solid #ccc; |
80 |
margin: 1em 0; |
81 |
padding: 0; |
82 |
} |
83 |
h2 |
84 |
{ |
85 |
font-size:25px; |
86 |
border-bottom:1px dotted; |
87 |
} |
88 |
#position |
89 |
{ |
90 |
border-bottom:1px dotted; |
91 |
} |
92 |
#container |
93 |
{ |
94 |
padding-top:2%; |
95 |
} |
96 |
.title |
97 |
{ |
98 |
margin-top:-15px; |
99 |
} |
100 |
.row |
101 |
{ |
102 |
margin-left:75px; |
103 |
margin-right:75px; |
104 |
max-width:84%; |
105 |
} |
106 |
.container |
107 |
{ |
108 |
max-width:88%; |
109 |
} |
110 |
/* |
111 |
* Remove the gap between images, videos, audio and canvas and the bottom of |
112 |
* their containers: h5bp.com/i/440 |
113 |
*/ |
114 |
|
115 |
audio, |
116 |
canvas, |
117 |
img, |
118 |
video { |
119 |
vertical-align: middle; |
120 |
} |
121 |
|
122 |
/* |
123 |
* Remove default fieldset styles. |
124 |
*/ |
125 |
|
126 |
fieldset { |
127 |
border: 0; |
128 |
margin: 0; |
129 |
padding: 0; |
130 |
} |
131 |
|
132 |
/* |
133 |
* Allow only vertical resizing of textareas. |
134 |
*/ |
135 |
|
136 |
textarea { |
137 |
resize: vertical; |
138 |
} |
139 |
|
140 |
/* ========================================================================== |
141 |
Browse Happy prompt |
142 |
========================================================================== */ |
143 |
|
144 |
.browsehappy { |
145 |
margin: 0.2em 0; |
146 |
background: #ccc; |
147 |
color: #000; |
148 |
padding: 0.2em 0; |
149 |
} |
150 |
|
151 |
/* ========================================================================== |
152 |
Author's custom styles |
153 |
========================================================================== */ |
154 |
|
155 |
|
156 |
/* ========================================================================== |
157 |
Helper classes |
158 |
========================================================================== */ |
159 |
|
160 |
/* |
161 |
* Image replacement |
162 |
*/ |
163 |
|
164 |
.ir { |
165 |
background-color: transparent; |
166 |
border: 0; |
167 |
overflow: hidden; |
168 |
/* IE 6/7 fallback */ |
169 |
*text-indent: -9999px; |
170 |
} |
171 |
|
172 |
.ir:before { |
173 |
content: ""; |
174 |
display: block; |
175 |
width: 0; |
176 |
height: 150%; |
177 |
} |
178 |
|
179 |
/* |
180 |
* Hide from both screenreaders and browsers: h5bp.com/u |
181 |
*/ |
182 |
|
183 |
.hidden { |
184 |
display: none !important; |
185 |
visibility: hidden; |
186 |
} |
187 |
|
188 |
/* |
189 |
* Hide only visually, but have it available for screenreaders: h5bp.com/v |
190 |
*/ |
191 |
|
192 |
.visuallyhidden { |
193 |
border: 0; |
194 |
clip: rect(0 0 0 0); |
195 |
height: 1px; |
196 |
margin: -1px; |
197 |
overflow: hidden; |
198 |
padding: 0; |
199 |
position: absolute; |
200 |
width: 1px; |
201 |
} |
202 |
|
203 |
/* |
204 |
* Extends the .visuallyhidden class to allow the element to be focusable |
205 |
* when navigated to via the keyboard: h5bp.com/p |
206 |
*/ |
207 |
|
208 |
.visuallyhidden.focusable:active, |
209 |
.visuallyhidden.focusable:focus { |
210 |
clip: auto; |
211 |
height: auto; |
212 |
margin: 0; |
213 |
overflow: visible; |
214 |
position: static; |
215 |
width: auto; |
216 |
} |
217 |
|
218 |
/* |
219 |
* Hide visually and from screenreaders, but maintain layout |
220 |
*/ |
221 |
|
222 |
.invisible { |
223 |
visibility: hidden; |
224 |
} |
225 |
|
226 |
/* |
227 |
* Clearfix: contain floats |
228 |
* |
229 |
* For modern browsers |
230 |
* 1. The space content is one way to avoid an Opera bug when the |
231 |
* `contenteditable` attribute is included anywhere else in the document. |
232 |
* Otherwise it causes space to appear at the top and bottom of elements |
233 |
* that receive the `clearfix` class. |
234 |
* 2. The use of `table` rather than `block` is only necessary if using |
235 |
* `:before` to contain the top-margins of child elements. |
236 |
*/ |
237 |
|
238 |
.clearfix:before, |
239 |
.clearfix:after { |
240 |
content: " "; /* 1 */ |
241 |
display: table; /* 2 */ |
242 |
} |
243 |
|
244 |
.clearfix:after { |
245 |
clear: both; |
246 |
} |
247 |
|
248 |
/* |
249 |
* For IE 6/7 only |
250 |
* Include this rule to trigger hasLayout and contain floats. |
251 |
*/ |
252 |
|
253 |
.clearfix { |
254 |
*zoom: 1; |
255 |
} |
256 |
|
257 |
/* ========================================================================== |
258 |
EXAMPLE Media Queries for Responsive Design. |
259 |
These examples override the primary ('mobile first') styles. |
260 |
Modify as content requires. |
261 |
========================================================================== */ |
262 |
|
263 |
@media only screen and (min-width: 35em) { |
264 |
/* Style adjustments for viewports that meet the condition */ |
265 |
} |
266 |
|
267 |
@media print, |
268 |
(-o-min-device-pixel-ratio: 5/4), |
269 |
(-webkit-min-device-pixel-ratio: 1.25), |
270 |
(min-resolution: 120dpi) { |
271 |
/* Style adjustments for high resolution devices */ |
272 |
} |
273 |
|
274 |
/* ========================================================================== |
275 |
Print styles. |
276 |
Inlined to avoid required HTTP connection: h5bp.com/r |
277 |
========================================================================== */ |
278 |
|
279 |
@media print { |
280 |
* { |
281 |
background: transparent !important; |
282 |
color: #000 !important; /* Black prints faster: h5bp.com/s */ |
283 |
box-shadow: none !important; |
284 |
text-shadow: none !important; |
285 |
} |
286 |
|
287 |
a, |
288 |
a:visited { |
289 |
text-decoration: underline; |
290 |
} |
291 |
|
292 |
a[href]:after { |
293 |
content: " (" attr(href) ")"; |
294 |
} |
295 |
|
296 |
abbr[title]:after { |
297 |
content: " (" attr(title) ")"; |
298 |
} |
299 |
|
300 |
|
301 |
/* |
302 |
* Don't show links for images, or javascript/internal links |
303 |
*/ |
304 |
|
305 |
.ir a:after, |
306 |
a[href^="javascript:"]:after, |
307 |
a[href^="#"]:after { |
308 |
content: ""; |
309 |
} |
310 |
|
311 |
pre, |
312 |
blockquote { |
313 |
border: 1px solid #999; |
314 |
page-break-inside: avoid; |
315 |
} |
316 |
|
317 |
thead { |
318 |
display: table-header-group; /* h5bp.com/t */ |
319 |
} |
320 |
|
321 |
tr, |
322 |
img { |
323 |
page-break-inside: avoid; |
324 |
} |
325 |
|
326 |
img { |
327 |
max-width: 100% !important; |
328 |
} |
329 |
|
330 |
@page { |
331 |
margin: 0.5cm; |
332 |
} |
333 |
|
334 |
p, |
335 |
h2, |
336 |
h3 { |
337 |
orphans: 3; |
338 |
widows: 3; |
339 |
} |
340 |
|
341 |
h2, |
342 |
h3 { |
343 |
page-break-after: avoid; |
344 |
} |
345 |
} |