xref: /template/writr/css/global.less (revision 6fb33d549a43f5a3cf7eb50b723c2cd26d9a2eb7) 
1/* =Global
2----------------------------------------------- */
3
4body,
5button,
6input,
7select,
8textarea {
9    color: #fff;
10    font-family: Montserrat, sans-serif;
11    font-size: 16px;
12    line-height: 1.5;
13}
14body.custom-background-size {
15    background-position: 0 0 !important;
16    background-repeat: no-repeat !important;
17    background-attachment: fixed !important;
18    -webkit-background-size: cover !important;
19    -moz-background-size:    cover !important;
20    background-size:         cover !important;
21}
22
23/* Headings */
24h1,
25h2,
26h3,
27h4,
28h5,
29h6 {
30    clear: both;
31    margin: 0 0 20px;
32    color: #303030;
33}
34h1 {
35    font-size: 32px;
36    line-height: 1.2;
37}
38h2 {
39    font-size: 24px;
40    line-height: 1.3;
41}
42h3 {
43    font-size: 22px;
44    line-height: 1.4;
45}
46h4 {
47    font-size: 18px;
48}
49h5 {
50    font-size: 16px;
51}
52h6 {
53    font-size: 14px;
54}
55hr {
56    background-color: #f5f5f5;
57    border: 0;
58    height: 5px;
59    margin-bottom: 20px;
60}
61
62/* Text elements */
63p {
64    margin-bottom: 20px;
65}
66ul,
67ol {
68    margin: 0 0 20px 0;
69}
70ul {
71    list-style: disc inside;
72}
73ol {
74    list-style: decimal inside;
75}
76li > ul,
77li > ol {
78    margin-bottom: 0;
79    margin-left: 20px;
80}
81dt {
82    font-weight: bold;
83}
84dd {
85    margin: 0 20px 20px;
86}
87b,
88strong {
89    font-weight: bold;
90}
91dfn,
92cite,
93em,
94i {
95    font-style: italic;
96}
97cite {
98    color: #1abc9c;
99}
100blockquote {
101    padding: 0 0 0 20px;
102    border-left: 15px double #f5f5f5;
103}
104address {
105    margin: 0 0 20px;
106}
107pre {
108    overflow: auto;
109    padding: 20px;
110    margin-bottom: 20px;
111    max-width: 100%;
112    background: #f5f5f5;
113    font: 15px/1.6 "Courier 10 Pitch", Courier, monospace;
114}
115code,
116kbd,
117tt,
118var {
119    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
120}
121abbr,
122acronym {
123    border-bottom: 1px dotted #656565;
124    cursor: help;
125}
126mark,
127ins {
128    padding: 0 5px;
129    background: #1abc9c;
130    color: #fff;
131    text-decoration: none;
132}
133sup,
134sub {
135    font-size: 75%;
136    height: 0;
137    line-height: 0;
138    position: relative;
139    vertical-align: baseline;
140}
141sup {
142    bottom: 1ex;
143}
144sub {
145    top: .5ex;
146}
147small {
148    font-size: 75%;
149}
150big {
151    font-size: 125%;
152}
153figure {
154    margin: 0;
155}
156table {
157    margin: 0 0 20px;
158    width: 100%;
159    background: #f5f5f5;
160}
161th {
162    background: #e5e5e5;
163    font-weight: bold;
164}
165th,
166td {
167    padding: 10px;
168    border-bottom: 1px solid #e5e5e5;
169}
170tr:last-of-type td {
171    border-bottom: none;
172}
173img {
174    margin: auto;
175    height: auto; /* Make sure images are scaled correctly. */
176    max-width: 100%; /* Adhere to container width. */
177}
178
179/* Forms */
180button,
181input,
182select,
183textarea {
184    font-size: 100%; /* Corrects font size not being inherited in all browsers */
185    margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
186    vertical-align: baseline; /* Improves appearance and consistency in all browsers */
187    *vertical-align: middle; /* Improves appearance and consistency in all browsers */
188}
189button,
190input {
191    line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
192}
193select {
194    width: 100%;
195    color: #303030;
196}
197button,
198html input[type="button"],
199input[type="reset"],
200input[type="submit"] {
201    padding: 10px 20px;
202    border: none;
203    background: #1abc9c;
204    color: #fff;
205    font-size: 14px;
206    line-height: 1.5;
207    font-weight: bold;
208    text-transform: uppercase;
209    cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
210    -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
211    -webkit-box-sizing: border-box;
212    -moz-box-sizing:    border-box;
213    box-sizing:         border-box;
214}
215.widget-area button,
216.widget-area html input[type="button"],
217.widget-area input[type="reset"],
218.widget-area input[type="submit"] {
219    background: #fff;
220    color: #1abc9c;
221}
222button:hover,
223html input[type="button"]:hover,
224input[type="reset"]:hover,
225input[type="submit"]:hover,
226button:focus,
227html input[type="button"]:focus,
228input[type="reset"]:focus,
229input[type="submit"]:focus,
230button:active,
231html input[type="button"]:active,
232input[type="reset"]:active,
233input[type="submit"]:active {
234    background: #16a085;
235}
236.widget-area button:hover,
237.widget-area html input[type="button"]:hover,
238.widget-area input[type="reset"]:hover,
239.widget-area input[type="submit"]:hover,
240.widget-area button:focus,
241.widget-area html input[type="button"]:focus,
242.widget-area input[type="reset"]:focus,
243.widget-area input[type="submit"]:focus,
244.widget-area button:active,
245.widget-area html input[type="button"]:active,
246.widget-area input[type="reset"]:active,
247.widget-area input[type="submit"]:active {
248    background: #f5f5f5;
249}
250input[type="checkbox"],
251input[type="radio"] {
252    box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
253    padding: 0; /* Addresses excess padding in IE8/9 */
254}
255input[type="search"] {
256    -webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
257    -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */
258    -moz-box-sizing:    content-box;
259    box-sizing:         content-box;
260}
261input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
262    -webkit-appearance: none;
263}
264button::-moz-focus-inner,
265input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
266    border: 0;
267    padding: 0;
268}
269input[type="text"],
270input[type="url"],
271input[type="email"],
272input[type="password"],
273input[type="search"],
274textarea {
275    width: 100%;
276    height: 40px;
277    padding: 5px 10px;
278    background: transparent;
279    color: #656565;
280    border: 5px solid #f5f5f5;
281    font-size: 14px;
282    line-height: 1.43;
283    -webkit-box-sizing: border-box;
284    -moz-box-sizing:    border-box;
285    box-sizing:         border-box;
286    -webkit-appearance: none;
287}
288.widget-area input[type="text"],
289.widget-area input[type="url"],
290.widget-area input[type="email"],
291.widget-area input[type="password"],
292.widget-area input[type="search"],
293.widget-area textarea {
294    color: #fff;
295    border-color: #16a085;
296}
297input[type="text"]:focus,
298input[type="url"]:focus,
299input[type="email"]:focus,
300input[type="password"]:focus,
301input[type="search"]:focus,
302textarea:focus {
303    outline: none;
304    border-color: #e5e5e5;
305}
306.widget-area input[type="text"]:focus,
307.widget-area input[type="url"]:focus,
308.widget-area input[type="email"]:focus,
309.widget-area input[type="password"]:focus,
310.widget-area input[type="search"]:focus,
311.widget-area textarea:focus {
312    border-color: #fff;
313}
314textarea {
315    overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
316    vertical-align: top; /* Improves readability and alignment in all browsers */
317    height: auto;
318}
319::-webkit-input-placeholder {
320   color: #656565;
321}
322:-moz-placeholder {
323   color: #656565;
324}
325::-moz-placeholder {
326   color: #656565;
327}
328:-ms-input-placeholder {
329   color: #656565;
330}
331.widget-area ::-webkit-input-placeholder {
332   color: #fff;
333}
334.widget-area :-moz-placeholder {
335   color: #fff;
336}
337.widget-area ::-moz-placeholder {
338   color: #fff;
339}
340.widget-area :-ms-input-placeholder {
341   color: #fff;
342}
343
344/* Links */
345a {
346    color: #1abc9c;
347}
348a:hover,
349a:focus,
350a:active {
351    color: #16a085;
352}
353
354/* Alignment */
355.alignleft {
356    display: inline;
357    float: left;
358    margin: 0 20px 20px 0;
359}
360.alignright {
361    display: inline;
362    float: right;
363    margin: 0 0 20px 20px;
364}
365.aligncenter {
366    clear: both;
367    display: block;
368    margin: 0 auto 20px auto;
369}
370
371/* Text meant only for screen readers */
372.screen-reader-text {
373    clip: rect(1px, 1px, 1px, 1px);
374    position: absolute !important;
375}
376.screen-reader-text:hover,
377.screen-reader-text:active,
378.screen-reader-text:focus {
379    background-color: #f1f1f1;
380    border-radius: 3px;
381    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
382    clip: auto !important;
383    color: #21759b;
384    display: block;
385    font-size: 14px;
386    font-weight: bold;
387    height: auto;
388    left: 5px;
389    line-height: normal;
390    padding: 15px 23px 14px;
391    text-decoration: none;
392    top: 5px;
393    width: auto;
394    z-index: 100000; /* Above WP toolbar */
395}
396
397/* Clearing */
398.clear:before,
399.clear:after,
400.entry-content:before,
401.entry-content:after,
402.comment-content:before,
403.comment-content:after,
404.site-header:before,
405.site-header:after,
406.site-content:before,
407.site-content:after,
408.site-footer:before,
409.site-footer:after,
410.widget:before,
411.widget:after {
412    content: '';
413    display: table;
414}
415
416.clear:after,
417.entry-content:after,
418.comment-content:after,
419.site-header:after,
420.site-content:after,
421.site-footer:after,
422.widget:after {
423    clear: both;
424}
425
426