CSS preprocessing

News Web

I always thought that CSS lacks in expressiveness which is far below the one of XPath. For example you can’t select elements based on their child elements. How nice would it be if you could format anker tags if and only if they contain a single image tag.
For this to work you would simply use the following XPath expression:

//a[count(img)=1]

Imagine you would have the following HTML file only the first anker tag would be selected.

<html>
  <head/>
  <body>
    <a href="/"><img src="home.png"/></a>
    <a href="/">Alternative Home link</a>
    <a href="/">
      <img src="image1.png"/>
      <img src="image2.png"/>
    </a>
  </body>
</html>

There are other features I miss. For example you can’t express nested rules. Suppose you wanted to style you navigation. What you would have to do is to always repeat the tag whose content you want to style:

nav {
  ..
}

nav ul {
  ..
}

nav li {
  ..
}

nav li a {
  ..
}

Wouldn’t it be easier to write the following?

nav {
  ..
  ul {
    ..
    li {
      ..
      a {
        ..
      }
    }
  }
}

And what about variables and calculations?
They also don’t existing.

But CSS preprocessors come to help!
They all have in common that they provide you with further expressions and even extend CSS’s expressiveness by giving you the possibility to work with variables and make calculations.

There is more than a dozen of CSS preprocessors in the web and I tried some of them. But the best is to my mind is {less} as it provides many of the features I always missed, has a broad browser support and can be processed on the browser as well as on the server side.

For the client approach all you have to do is to rename your style.css to style.less and include a javascript file. No you’re free to use the new {less} expressions which include:

  • Variables
  • Mixins
  • Parametric Mixins
  • Pattern-matching
  • Nested Rules
  • Operations
  • Color functions
  • Namespaces
  • Scope
  • Single Line Comments
  • Importing

There is an especially easy way to use {less} in conjunction with WordPress. Simply install the WordPress plugin #BW-LESS-CSS and add all {less} stylesheet files in the administration section.
The only restriction you have to accept is that {less} does not even touch .css files. This means you have to move your style.css content to let’s say style.less and only leave the WordPress comments in the style.css.

My WordPress theme’s main stylesheet has a couple of duplicate expressions and made it to 1170 lines. I spent 2 hours on improving the old stylesheet which now has 1069 lines. So were not even 10% of line savings worth the time?
Yes. I had no idea of {less} and immediately saved some lines but the more important thing is that the code is already much better maintainable.

  • The rules are now nested (see line 71).
  • I can centrally change important values (see line 6).
  • I could finally get rid of the browser specific statements à la -webkit- or -moz-(see line 16).
  • I don’t have to update dependent values since I now use calculations (see line 898).

Consider using {less} or any other CSS preprocessor.
I didn’t regret it and extremely look forward for the next stylesheet I develop using a CSS preprocessor from the ground up.

style.css style.less
1 @import url(“../boilerplate/style.css”); 1 @import “../boilerplate/style.css”;
2 @import url(“css/fonts.css”); 2 @import “css/fonts.css”;
3 @import url(“css/anythingslider.custom.css”); 3 @import “css/anythingslider.custom.css”;
4 @import url(“css/colorbox.custom.css”); 4 @import “css/colorbox.custom.css”;
5
6 @blue: #4B83B3;
7
8 .border(@width: 2px, @style: solid, @color: @blue) {
9     border: @width @style @color;
10 }
11
12 .border(@color: @blue) {
13     border: 2px solid @color;
14 }
15
16 .border-radius (@radius: 5px) {
17     -webkit-border-radius: @radius;
18      -moz-border-radius: @radius;
19      border-radius: @radius;
20     -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
21 }
22
23 .background-gradient (@start: @blue, @end: darken(@blue, 10%)) {
24     background-color: @start;
25     background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
26     background-image: -webkit-linear-gradient(top, @start, @end);
27     background-image: -moz-linear-gradient(top, @start, @end);
28     background-image: -ms-linear-gradient(top, @start, @end);
29     background-image: -o-linear-gradient(top, @start, @end);
30     background-image: linear-gradient(top, @start, @end);
31     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’@start’, EndColorStr=’@end’);
32 }
33
34 .transition (@property, @duration, @easing) {
35     -webkit-transition: @property @duration @easing;
36      -moz-transition: @property @duration @easing;
37      -ms-transition: @property @duration @easing;
38      -o-transition: @property @duration @easing;
39      transition: @property @duration @easing;
40 }
41
42 .transform (@t) {
43     -webkit-transform: @t;
44      -moz-transform: @t;
45      -ms-transform: @t;
46      -o-transform: @t;
47      -transform: @t;
48 }
49
50 .box-shadow (@style, @x, @y, @width, @color) {
51     -webkit-box-shadow: @style @x @y @width @color;
52      -moz-box-shadow: @style @x @y @width @color;
53      box-shadow: @style @x @y @width @color;
54 }
55
56 .clearfix {
57     content: “.”;
58     display: block;
59     clear: left;
60     visibility: hidden;
61     line-height: 0;
62     height: 0;
63 }
64
65
5 66
6 .page-item-178 {    /* impressum link */ 67 .page-item-178 {    /* impressum link */
7     display: none; 68     display: none;
8 } 69 }
9 70
10 body { 71 body {
11     font-family: Nunito, Arial, Helvetica, sans-serif; 72     font-family: Nunito, Arial, Helvetica, sans-serif;
12     font-weight: 300; 73     font-weight: 300;
13     font-size: 14px; 74     font-size: 14px;
14     line-height: 1.7em; 75     line-height: 1.7em;
15     background: url(images/stripe_25.png) top left repeat; 76     background: url(images/stripe_25.png) top left repeat;
16 } 77
17 78     &.home:before {
18 body.home:before { 79         content: “”;
19     content: “”; 80         display: block;
20     display: block; 81         width: 100%;
21     width: 100%; 82         height: 415px;
22     height: 415px; 83         background: url(images/header.png) center top no-repeat;
23     background: url(images/header.png) center top no-repeat; 84     }
24 } 85
25 86     &.home div.headertext {
26 div.headertext { 87         display: block;
27     font-size: 15px; 88         font-size: 15px;
28     text-shadow: 0px 1px 0px #e0f0fa; 89         text-shadow: 0px 1px 0px #e0f0fa;
29     margin: -135px auto 135px auto; 90         margin: -135px auto 135px auto;
30     width: 450px; 91         width: 450px;
31     display: none; 92         color: #333333;
32 } 93
33 94         a {
34 div.headertext, 95             color: #333333;
35 div.headertext a { 96         }
36     color: #333333; 97
37 } 98         a:hover,
38 99         a:active {
39 div.headertext a:hover, 100             color: #e0f0fa;
40 div.headertext a:active { 101             text-shadow: 0px 1px 0px #333333;
41     color: #e0f0fa; 102         }
42     text-shadow: 0px 1px 0px #333333; 103
43 } 104         div {
44 105             position: relative;
45 div.headertext div { 106             left: 51px;
46     position: relative; 107         }
47     left: 51px; 108     }
48 } 109
49 110     &:not(.home) div.headertext {
50 body.home div.headertext { 111         display: none;
51     display: block; 112     }
52 } 113 }
114
115
53 116
54 117
55 118
56 119
57 120
58 121
59 img[align=right] { 122 img[align=right] {
60     margin-left: 15px; 123     margin-left: 15px;
61 } 124 }
62 125
63 a, 126 a,
64 a * { 127 a * {
65     -webkit-transition: all 0.15s linear; 128     .transition(all, 0.15s, linear);
66        -moz-transition: all 0.15s linear;
67         -ms-transition: all 0.15s linear;
68          -o-transition: all 0.15s linear;
69             transition: all 0.15s linear;
70
71     -webkit-transition-property: background-color, background-position, color, opacity, width, height;
72        -moz-transition-property: background-color, background-position, color, opacity, width, height;
73         -ms-transition-property: background-color, background-position, color, opacity, width, height;
74          -o-transition-property: background-color, background-position, color, opacity, width, height;
75             transition-property: background-color, background-position, color, opacity, width, height;
76 } 129 }
77 130
78 h1, 131 h1,
79 h2 { 132 h2 {
80     font-size: 2em; 133     font-size: 2em;
81     font-weight: 300; 134     font-weight: 300;
82     line-height: 1.2em; 135     line-height: 1.2em;
83 } 136 }
84 137
85 section h1 { 138 section h1 {
86     margin-bottom: 1em; 139     margin-bottom: 1em;
87 } 140 }
88 141
89 * + h1, 142 * {
90 * + h2, 143     + h1,
91 * + h3 { 144     + h2,
92     margin-top: 1em; 145     + h3 {
93 } 146         margin-top: 1em;
94 147     }
95 .isocube + h1, 148 }
96 .isocube + h2, 149
97 .isocube + h3 { 150 .isocube {
98     margin-top: 0; 151     + h1,
152     + h2,
153     + h3 {
154         margin-top: 0;
155     }
99 } 156 }
100 157
101 section, 158 section,
102 footer { 159 footer {
103     text-shadow: 0px 1px 0px #fff; 160     text-shadow: 0px 1px 0px #fff;
104 } 161 }
105 162
106 section .isocube { 163 section .isocube {
107     text-shadow: none; 164     text-shadow: none;
108 } 165 }
109 166
110 section h1 a, 167 section h1 a,
111 section h1 a:visited, 168 section h1 a:visited,
112 section h1 a:hover, 169 section h1 a:hover,
113 section h1 a:active, 170 section h1 a:active,
114 section h2 a, 171 section h2 a,
115 section h2 a:visited, 172 section h2 a:visited,
116 section h2 a:hover, 173 section h2 a:hover,
117 section h2 a:active, 174 section h2 a:active,
118 footer[role=contentinfo] a, 175 footer[role=contentinfo] a,
119 footer[role=contentinfo] a:visited, 176 footer[role=contentinfo] a:visited,
120 footer[role=contentinfo] a:hover, 177 footer[role=contentinfo] a:hover,
121 footer[role=contentinfo] a:active  { 178 footer[role=contentinfo] a:active {
122     text-decoration: none; 179     text-decoration: none;
123     color: #444; 180     color: #444;
124 } 181 }
125 182
126 section h1 a:hover:after, 183 section h1 a:hover:after,
127 section h1 a:active:after, 184 section h1 a:active:after,
128 section h2 a:hover:after, 185 section h2 a:hover:after,
129 section h2 a:active:after, 186 section h2 a:active:after,
130 footer[role=contentinfo] a:hover:after, 187 footer[role=contentinfo] a:hover:after,
131 footer[role=contentinfo] a:active:after { 188 footer[role=contentinfo] a:active:after {
132     content: ” →”; 189     content: ” →”;
133 } 190 }
134 191
135 h3 { 192 h3 {
136     font-size: 1.2em; 193     font-size: 1.2em;
137     font-weight: 300; 194     font-weight: 300;
138     margin: 1em 0 0.5em 0; 195     margin: 1em 0 0.5em 0;
139 } 196 }
140 197
198 // links
141 nav a, 199 nav a,
142 nav a:visited, 200 nav a:visited,
143 section p a, 201 section p a,
144 section p a:visited, 202 section p a:visited,
145 section li a, 203 section li a,
146 section li a:visited, 204 section li a:visited,
147 .entry-meta.isocube a, 205 .entry-meta.isocube a,
148 .entry-meta.isocube a:visited { 206 .entry-meta.isocube a:visited {
149     padding: 0px 5px; 207     padding: 0px 5px;
150     color:black; 208     color: #000;
151     text-decoration:none; 209     text-decoration: none;
152     border: 2px solid #4B83B3;
153     outline: none; 210     outline: none;
154 211
155     -webkit-border-radius: 5px; 212     .border;
156        -moz-border-radius: 5px; 213     .border-radius;
157             border-radius: 5px;
158     -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
159 } 214 }
160 nav a:focus, 215 nav a:focus,
161 nav a:hover, 216 nav a:hover,
162 nav a:active, 217 nav a:active,
163 section p a:focus, 218 section p a:focus,
164 section p a:hover, 219 section p a:hover,
165 section p a:active, 220 section p a:active,
166 section li a:focus, 221 section li a:focus,
167 section li a:hover, 222 section li a:hover,
168 section li a:active, 223 section li a:active,
169 .entry-meta.isocube a:focus, 224 .entry-meta.isocube a:focus,
170 .entry-meta.isocube a:hover, 225 .entry-meta.isocube a:hover,
171 .entry-meta.isocube a:active { 226 .entry-meta.isocube a:active {
172     background: #4B83B3; 227     background: @blue;
173     text-shadow: none; 228     text-shadow: none;
174     color: #000; 229     color: #000;
175 } 230 }
176 nav a:active, 231 nav a:active,
177 section p a:active, 232 section p a:active,
178 section li a:active, 233 section li a:active,
179 .entry-meta.isocube a:active { 234 .entry-meta.isocube a:active {
180   -webkit-box-shadow: inset 0px 0px 8px #000; 235     .box-shadow(inset, 0px, 0px, 8px, #000);
181     -moz-box-shadow: inset 0px 0px 8px #000;
182          box-shadow: inset 0px 0px 8px #000;
183 } 236 }
184 237
185 a > img { 238 a > img {
186     -webkit-transition: all 0.15s ease-in; 239     .transition(all, 0.15s, ease-in);
187        -moz-transition: all 0.15s ease-in;
188         -ms-transition: all 0.15s ease-in;
189          -o-transition: all 0.15s ease-in;
190             transition: all 0.15s ease-in;
191     cursor: pointer !important; 240     cursor: pointer !important;
192 } 241 }
193 242
194 a:hover > img { 243 a:hover > img {
195     -webkit-transform: scale(1.05); 244     .transform(scale(1.05));
196        -moz-transform: scale(1.05);
197         -ms-transform: scale(1.05);
198          -o-transform: scale(1.05);
199            -transform: scale(1.05);
200 } 245 }
201 246
202 a:active > img { 247 a:active > img {
203     -webkit-transform: scale(0.95); 248     .transform(scale(0.95));
204        -moz-transform: scale(0.95);
205         -ms-transform: scale(0.95);
206          -o-transform: scale(0.95);
207            -transform: scale(0.95);
208 } 249 }
209 250
210 251
211 252
212 253
213 254
214 p { 255 p {
215     margin: 1em 0; 256     margin: 1em 0;
216 } 257 }
217 258
218 header[role=banner] p { 259 header[role=banner] p {
219     display: none; 260     display: none;
220 } 261 }
221 262
222 263
223 /* 264 /*
224  * XING / Facebook / RSS 265 * XING / Facebook / RSS
225  */ 266 */
226 div.me { 267 div.me {
227     position: absolute; 268     position: absolute;
228     top: 10px; 269     top: 10px;
229     right: 10px; 270     right: 10px;
230 } 271
231 272     ul {
232     div.me ul { 273         list-style: none;
233          list-style: none; 274
234     } 275         &:after {
235 276             content: “.”;
236     div.me ul:after { 277             display: block;
237          content: “.”; 278             height: 0;
238          display: block; 279             clear: left;
239          height: 0; 280             visibility: hidden;
240          clear: left; 281         }
241          visibility: hidden; 282
242     } 283         li {
243 284             float: left;
244     div.me li { 285             margin-left: 10px;
245          float: left; 286
246          margin-left: 10px; 287             a {
247     } 288                 display: block;
248 289                 width: 22px;
249     div.me li a { 290                 height: 22px;
250          display: block; 291                 font-size: 0px;
251          width: 22px; 292                 background-image: url(images/me.png);
252          height: 22px; 293                 background-repeat: no-repeat;
253          font-size: 0px; 294             }
254          background-image: url(images/me.png); 295
255          background-repeat: no-repeat; 296             &:nth-child(1) a {
256     } 297                 background-position: -2px -5px;
257 298
258     div.me li:nth-child(1) a { 299                 &:hover {
259          background-position: -2px -5px; 300                     background-position: -2px -45px;
260     } 301                 }
261 302             }
262     div.me li:nth-child(2) a { 303
263          background-position: -30px -5px; 304             &:nth-child(2) a {
264     } 305                 background-position: -30px -5px;
265 306
266     div.me li:nth-child(3) a { 307                 &:hover {
267          background-position: -58px -5px; 308                     background-position: -30px -45px;
268     } 309                 }
269 310             }
270     div.me li:nth-child(1) a:hover { 311
271          background-position: -2px -45px; 312             &:nth-child(3) a {
272     } 313                 background-position: -58px -5px;
273 314
274     div.me li:nth-child(2) a:hover { 315                 &:hover {
275          background-position: -30px -45px; 316                     background-position: -58px -45px;
276     } 317                 }
277 318             }
278     div.me li:nth-child(3) a:hover { 319         }
279          background-position: -58px -45px; 320     }
280     } 321 }
281 322
282 323 .isocube {
283 324     .face {
325         font-size: 13px;
326         line-height: 1.3em;
327
328         &.left {
329             background-color:#CCC;
330         }
331
332         &.top {
333             background-color:#AAA;
334         }
335
336         &.right {
337             background-color:#999;
338         }
339     }
340
341     .shadow {
342         background: #EEE;
343     }
344 }
345
284 nav { 346 nav {
285     z-index: 10; 347     z-index: 10;
286 } 348
287 349     li {
288 .isocube { 350         display: inline-block;
289 } 351         width: 100%;
290 352         font-size: 0.9em;
291     .isocube .face { 353     }
292          font-size: 13px; 354
293          line-height: 1.3em; 355     a {
294     } 356         display: block;
295 357         padding: 4px;
296     .isocube .face.left { 358         margin: 6px 6px 0 6px;
297          background-color:#CCC; 359     }
298     } 360
299 361     &.isocube .page_item .children {    // don’t show sub navs in the cube
300     .isocube .face.top { 362         display: none;
301          background-color:#AAA; 363     }
302     } 364
303 365     .current_page_ancestor a,
304     .isocube .face.right { 366     .current_page_item a {
305          background-color:#999; 367         color: #000 !important;
306     } 368         background: #D8FF26 !important;
307 369     }
308     .isocube .shadow { 370
309          background: #EEE; 371     &#access {
310     } 372         margin: 25px 25px 25px 25px;
311 373         float: right;
312     .isocube.secondary .face.left { 374         position: relative;
313          background-color:#D83FDD; 375         right: 0;
314     } 376         width: 449px;
315 377         height: 330px;
316     .isocube.secondary .face.top { 378         z-index: 20;
317          background-color:#981B9C; 379
318     } 380         #skip,
319 381         li:nth-child(1) { /* Home link */
320     .isocube.secondary .face.right { 382             display: none;
321          background-color:#430B45; 383         }
322     } 384
323 385         &.isocube {
324     .isocube.secondary .shadow { 386             .face {
325          background: #EEE; 387                 line-height: 1.15em;
326     } 388
327 389                 &.left {
328 390                     background: #CCC;
329 391                 }
330 nav li { 392
331     display: inline-block; 393                 &.right {
332     width: 100%; 394                     background: #999 url(images/logo.cube.png) 16px -316px no-repeat;
333     font-size: 0.9em; 395
334 } 396                     // used to simulate alpha transparency for the logo
335 397                     div {
336 nav a { 398                         background: #999 url(images/logo.cube.png) 16px -120px no-repeat;
337     display: block; 399                         width: 100%;
338     padding: 4px; 400                         height: 100%;
339     margin: 6px 6px 0 6px; 401                     }
340 } 402                 }
341 403
342 nav.isocube .page_item .children {    /* don’t show sub navs in the cube */ 404                 &.top {
343     display: none; 405                     background: #aaa;
344 } 406                 }
345 407
346 nav .current_page_ancestor a, 408                 &.top div {
347 nav .current_page_item a { 409                     width: 100%;
348     color: #000 !important; 410                     height: 100%;
349     background: #D8FF26 !important; 411                     background: url(images/logo.cube.png) 18px -120px no-repeat;
350 } 412
351 413                     .transition(all, 0.4s, ease);
352 414                 }
353 415             }
354 416
355 417             a:hover .face.top div,
356 nav#access { 418             a:focus .face.top div {
357     margin: 25px 25px 25px 25px; 419                 width: 100%;
358     float: right; 420                 height: 100%;
359     position: relative; 421                 background: url(images/logo.cube.png) 18px -5px no-repeat;
360     right: 0; 422             }
361     width: 449px; 423
362     height: 330px; 424             header {
363     z-index: 20; 425                 a {
426                     padding: 0;
427                     border: none;
428                 }
429
430                 h1 {
431                     margin: -120px 0;
432                     padding: 55px 0px 25px 14px;
433                     line-height: 1.2em;
434                     font-family: Arial, Helvetica, sans-serif;
435                     font-size: 34px;
436                     font-weight: 500;
437                     border: none;
438                     color: rgba(40, 40, 40, 0.0);
439                 }
440
441                 &:link.face {
442                     .top,
443                     .right,
444                     .right div,
445                     .top,
446                     .right,
447                     .right div {}
448                 }
449                 &:focus .face.top,
450                 &:focus .face.right,
451                 &:focus .face.right div,
452                 &:hover .face.top,
453                 &:hover .face.right,
454                 &:hover .face.right div,
455                 &:active .face.top,
456                 &:active .face.right,
457                 &:active .face.right div {
458                     .box-shadow(inset, 0px, 0px, 38px, @blue);
459                 }
460
461                 &:active .face {
462                     &.top,
463                     &.right {
464                         .box-shadow(inset, 0px, 0px, 8px, #000);
465                     }
466                 }
467             }
468         }
469
470         li a,
471         li a:visited,
472         li a:active,
473         .isocube.secondary li a,
474         .isocube.secondary li a:visited,
475         .isocube.secondary li a:active {
476             color: #fff;
477             border: none;
478             background-color: @blue;
479             .box-shadow(inset, 1px, 1px, 1px, #000);
480         }
481
482         li a:hover,
483         li a:active {
484             background-color: @blue;
485             .box-shadow(1px, 1px, 1px, #000);
486         }
487
488         li:nth-child(2) a,
489         li:nth-child(5) a,
490         li:nth-child(6) a {
491             margin: 6px 6px 0 6px;
492         }
493
494         li:nth-child(3),
495         li:nth-child(4) {
496             width: 50%;
497         }
498
499         li:nth-child(3) a,
500         li:nth-child(4) a {
501             margin: 6px 3px 0 6px;
502         }
503
504         li:nth-child(4) a {
505             margin-left: 3px;
506             margin-right: 6px;
507         }
508     }
364 } 509 }
365 510
366 .secondary_wrapper { 511 .secondary_wrapper {
367     display: none; 512     display: none;
368     margin: -180px 0 0 0; 513 }
369     float: right; 514
370     clear: right;
371     overflow: hidden;
372 }
373
374     nav#access #skip,
375     nav#access li:nth-child(1) { /* Home link */
376          display: none;
377     }
378
379     nav#access.isocube .face {
380          line-height: 1.15em;
381     }
382
383     nav#access.isocube .face.right {
384          background: #999 url(images/logo.cube.png) 16px -316px no-repeat;
385     }
386
387     /* used to simulate alpha transparency for the logo */
388     nav#access.isocube .face.right div {
389          background: #999 url(images/logo.cube.png) 16px -120px no-repeat;
390          width: 100%;
391          height: 100%;
392     }
393
394     nav#access.isocube header a {
395          padding: 0;
396          border: none;
397     }
398
399     nav#access.isocube header h1 {
400          margin: -120px 0;
401          padding: 55px 0px 25px 14px;
402          line-height: 1.2em;
403          font-family: Arial, Helvetica, sans-serif;
404          font-size: 34px;
405          font-weight: 500;
406          border: none;
407          color: rgba(40, 40, 40, 0.0);
408     }
409     nav#access.isocube header a:link .face.top,
410     nav#access.isocube header a:link .face.right,
411     nav#access.isocube header a:link .face.right div,
412     nav#access.isocube header a:visited .face.top,
413     nav#access.isocube header a:visited .face.right,
414     nav#access.isocube header a:visited .face.right div {}
415     nav#access.isocube header a:focus .face.top,
416     nav#access.isocube header a:focus .face.right,
417     nav#access.isocube header a:focus .face.right div,
418     nav#access.isocube header a:hover .face.top,
419     nav#access.isocube header a:hover .face.right,
420     nav#access.isocube header a:hover .face.right div,
421     nav#access.isocube header a:active .face.top,
422     nav#access.isocube header a:active .face.right,
423     nav#access.isocube header a:active .face.right div {
424          /*background-color: #8d9ead;/* durch verschobenes Hintergrundbild wird “Blog” eingeblendet */
425       -webkit-box-shadow: inset 0px 0px 38px #4B83B3;
426           -moz-box-shadow: inset 0px 0px 38px #4B83B3;
427                 box-shadow: inset 0px 0px 38px #4B83B3;
428     }
429
430     nav#access.isocube header a:active .face.top,
431     nav#access.isocube header a:active .face.right {
432       -webkit-box-shadow: inset 0px 0px 8px #000;
433           -moz-box-shadow: inset 0px 0px 8px #000;
434                 box-shadow: inset 0px 0px 8px #000;
435     }
436
437     nav#access.isocube .face.top {
438          background: #aaa;
439     }
440
441     nav#access.isocube .face.top div {
442          width: 100%;
443          height: 100%;
444          background: url(images/logo.cube.png) 18px -120px no-repeat;
445
446          -webkit-transition: all 0.4s ease;
447             -moz-transition: all 0.4s ease;
448               -ms-transition: all 0.4s ease;
449                -o-transition: all 0.4s ease;
450                    transition: all 0.4s ease;
451     }
452
453     nav#access.isocube a:hover .face.top div,
454     nav#access.isocube a:focus .face.top div {
455          width: 100%;
456          height: 100%;
457          background: url(images/logo.cube.png) 18px -5px no-repeat;
458     }
459
460     nav#access.isocube .left {
461          background: #CCC;
462     }
463
464     nav#access li a,
465     nav#access li a:visited,
466     nav#access li a:active,
467     .isocube.secondary li a,
468     .isocube.secondary li a:visited,
469     .isocube.secondary li a:active {
470          color: #fff;
471          border: none;
472          background-color: #4B83B3;
473          -webkit-box-shadow: inset 1px 1px 1px #000;
474           -moz-box-shadow: inset 1px 1px 1px #000;
475                box-shadow: inset 1px 1px 1px #000;
476     }
477
478     nav#access li a:hover,
479     nav#access li a:active,
480     .isocube.secondary li a:hover,
481     .isocube.secondary li a:active {
482          background-color: #4B83B3;
483          -webkit-box-shadow: 1px 1px 1px #000;
484           -moz-box-shadow: 1px 1px 1px #000;
485                box-shadow: 1px 1px 1px #000;
486     }
487
488     nav#access li:nth-child(2) a,
489     nav#access li:nth-child(5) a,
490     nav#access li:nth-child(6) a {
491          margin: 6px 6px 0 6px;
492     }
493
494     nav#access li:nth-child(3),
495     nav#access li:nth-child(4) {
496          width: 50%;
497     }
498
499     nav#access li:nth-child(3) a,
500     nav#access li:nth-child(4) a {
501          margin: 6px 3px 0 6px;
502     }
503
504     nav#access li:nth-child(4) a {
505          margin-left: 3px;
506          margin-right: 6px;
507     }
508
509 nav.secondary {
510 }
511 515
512 section, 516 section,
513 footer[role=contentinfo] { 517 footer[role=contentinfo] {
514     margin: 50px auto; 518     margin: 50px auto;
515     width: 960px; 519     width: 960px;
516 } 520 }
517 521
518 #nav-above, 522 #nav-above,
519 #nav-below, 523 #nav-below,
520 article, 524 article,
521 article + h3, /* comments */ 525 article + h3, /* comments */
522 article + h3 + ol, /* comments */ 526 article + h3 + ol, /* comments */
523 footer[role=contentinfo] .xoxo { 527 footer[role=contentinfo] .xoxo {
524     position: relative; 528     position: relative;
525     margin-left: 155px; 529     margin-left: 155px;
526     margin-right: 250px; 530     margin-right: 250px;
527 } 531 }
528 532
529 /* 533 /*
530  * Navigation Below & Above 534 * Navigation Below & Above
531  */ 535 */
532 #nav-above, 536 #nav-above,
533 #nav-below { 537 #nav-below {
534     display: none; 538     display: none;
535 }
536
537 #nav-above {
538     display: none;
539 }
540
541 #nav-below {
542     margin-top: 100px;
543 }
544
545 #nav-below:after {
546     content: “.”;
547     display: block;
548     height: 0;
549     clear: left;
550     visibility: hidden;
551 }
552
553 #nav-below .nav-previous,
554 #nav-below .nav-next {
555     width: 50%;
556     float: left;
557 }
558
559 #nav-below a {
560     margin: 0;
561     text-overflow: ellipsis;
562     overflow: hidden;
563     white-space: nowrap;
564 }
565
566 #nav-below .nav-previous a {
567     margin-right: 5px;
568 }
569
570 #nav-below .nav-next a {
571     margin-left: 5px;
572 } 539 }
573 540
574 541
575 542
576 543
577 544
578 #respond { 545 #respond {
579     margin-left: 155px; 546     margin-left: 155px;
580     margin-right: 250px; 547     margin-right: 250px;
581     margin-top: 100px; 548     margin-top: 100px;
549
550     input, textarea { width: 100%; }
582 } 551 }
583 552
584 footer[role=contentinfo] { 553 footer[role=contentinfo] {
585     padding-bottom: 20px; 554     padding-bottom: 20px;
586 }
587
588 footer[role=contentinfo] {
589     clear: both; 555     clear: both;
590 } 556
591 557     li {
592 footer[role=contentinfo] li { 558         display: block;
593     display: block; 559         float: left;
594     float: left; 560     }
595 } 561
596 562     > a { // default wordpress links
597 footer[role=contentinfo] > a { /* default wordpress links */ 563         display: none;
564     }
565 }
566
567 body.page article h1 {
598     display: none; 568     display: none;
599 } 569 }
600 570
601 article + article { 571 article {
602     margin-top: 100px; 572     + article {
603 } 573         margin-top: 100px;
604 574     }
605 article h2 { 575
606     margin-bottom: 15px; 576     h2 {
607 } 577         margin-bottom: 15px;
608 578     }
609 article .entry-content { 579
610     font-size: 110%; 580     .entry-content {
611 } 581         font-size: 110%;
612 582     }
613 article .entry-summary a, 583
614 article .entry-content a { 584     .entry-summary a,
615     white-space: nowrap; 585     .entry-content a {
616 } 586         white-space: nowrap;
617 587     }
618 article .entry-content img { 588
619     margin: 15px auto; 589     .entry-content img {
620 } 590         margin: 15px auto;
621 591     }
622 article .example { 592
623     display: block; 593     .example {
624 594         display: block;
625     border: 2px solid #728B00; 595
626 596         .border(#728B00);
627   -webkit-border-radius: 5px; 597
628     -moz-border-radius: 5px; 598         .border-radius;
629          border-radius: 5px; 599         .background-gradient(#D8FF26, #728B00);
630 600     }
631 601
632   -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 602     .hosting {
633 603         display: block;
634 604         color: #fff;
635   background-color: #D8FF26; 605         padding: 5px 15px 5px 148px;
636   background-image: -webkit-gradient(linear, left top, left bottom, from(#D8FF26), to(#728B00)); 606         margin: 50px 0;
637   background-image: -webkit-linear-gradient(top, #D8FF26, #728B00); 607         text-shadow: #000000 0px 1px 0px;
638   background-image:    -moz-linear-gradient(top, #D8FF26, #728B00); 608         border: 2px dashed #2C4E6B;
639   background-image:    -ms-linear-gradient(top, #D8FF26, #728B00); 609         .border-radius;
640   background-image:     -o-linear-gradient(top, #D8FF26, #728B00); 610         .background-gradient(@blue, #2C3E6B);
641   background-image:        linear-gradient(top, #D8FF26, #728B00); 611         .transition(all, 0.15s, linear);
642            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#D8FF26′, EndColorStr=’#728B00′); 612
643 } 613         &:hover {
644 614             .background-gradient(#3184CC, #2C4E6B);
645 article .hosting { 615         }
646     display: block; 616
647 617         h2 {
648     color: #fff; 618             margin: 0;
649     padding: 5px 15px 5px 148px; 619             height: 0;
650     margin: 50px 0; 620             opacity: 0;
651 621             filter: alpha(opacity = 0);
652     border: 2px dashed #2C4E6B; 622         }
653 623
654     -webkit-border-radius: 5px; 624         a {
655        -moz-border-radius: 5px; 625             color: #000 !important;
656             border-radius: 5px; 626             text-shadow: none;
657     -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 627             border-color: #fff !important;
658 628             background-color: #fff;
659     background-color: #4B83B3; 629         }
660     background-image: -webkit-gradient(linear, left top, left bottom, from(#4B83B3), to(#2C4E6B)); 630
661     background-image: -webkit-linear-gradient(top, #4B83B3, #2C4E6B); 631         .isocube .face {
662     background-image:    -moz-linear-gradient(top, #4B83B3, #2C4E6B); 632             &.left {
663     background-image:    -ms-linear-gradient(top, #4B83B3, #2C4E6B); 633                 background-image: url(images/arrow-down.png);
664     background-image:     -o-linear-gradient(top, #4B83B3, #2C4E6B); 634                 background-position: center -155px;
665     background-image:        linear-gradient(top, #4B83B3, #2C4E6B); 635                 background-repeat: no-repeat;
666     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#4B83B3′, EndColorStr=’#2C4E6B’); 636             }
667 637
668     -webkit-transition: all 0.15s linear; 638             &.top {
669        -moz-transition: all 0.15s linear; 639                 background-image: url(images/arrow-down.png);
670         -ms-transition: all 0.15s linear; 640                 background-position: center -10px;
671          -o-transition: all 0.15s linear; 641                 background-repeat: no-repeat;
672             transition: all 0.15s linear; 642             }
673 } 643         }
674 644     }
675 article .hosting:hover { 645
676     background-color: #3184CC; 646     /*
677     background-image: -webkit-gradient(linear, left top, left bottom, from(#3184CC), to(#2C4E6B)); 647      * Comments
678     background-image: -webkit-linear-gradient(top, #3184CC, #2C4E6B); 648      */
679     background-image:    -moz-linear-gradient(top, #3184CC, #2C4E6B); 649     + h3 {
680     background-image:    -ms-linear-gradient(top, #3184CC, #2C4E6B); 650         margin-top: 50px;
681     background-image:     -o-linear-gradient(top, #3184CC, #2C4E6B); 651     }
682     background-image:        linear-gradient(top, #3184CC, #2C4E6B); 652
683     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#3184CC’, EndColorStr=’#2C4E6B’); 653     + ol {
684 } 654         margin-bottom: 50px;
685 655     }
686 article .hosting h2 {
687     margin: 0;
688     height: 0;
689     opacity: 0;
690     filter: alpha(opacity = 0);
691 }
692
693 article .hosting a {
694     color: #000 !important;
695     border-color: #fff !important;
696     background-color: #fff;
697 }
698
699 article .hosting .isocube .face.left {
700     background-image: url(images/arrow-down.png);
701     background-position: center -155px;
702     background-repeat: no-repeat;
703 }
704
705 article .hosting .isocube .face.top {
706     background-image: url(images/arrow-down.png);
707     background-position: center -10px;
708     background-repeat: no-repeat;
709 } 656 }
710 657
711 .entry-meta { 658 .entry-meta {
712     position: absolute; 659     position: absolute;
713     top: 0px; 660     top: 0px;
714     left: -155px; 661     left: -155px;
715     width: 129px; 662     width: 129px;
716     height: 103px; 663     height: 103px;
717 } 664
718 665     &.isocube .face {
719     .entry-meta.isocube .face { 666         font-size: 12px;
720          font-size: 12px; 667         text-align: center;
721     } 668
722 669         &.left {
723     .entry-meta.isocube .face { 670             > a {
724          text-align: center; 671                 padding: 6px 0;
725     } 672                 display: block;
726 673                 border: none;
727     .entry-meta.isocube .face.left > a { 674             }
728          padding: 6px 0; 675
729          display: block; 676             > *:not(a) {
730          border: none; 677                 display: none;
731     } 678             }
732 679         }
733     .entry-meta.isocube .face.left > *:not(a) { 680
734          display: none; 681         &.right a {
735     } 682             padding: 6px 0;
736 683             display: block;
737     .entry-meta.isocube .face.right a { 684             border: none;
738          padding: 6px 0; 685         }
739          display: block; 686
740          border: none; 687
741     } 688         &.top {
742 689             overflow: hidden;
743 690
744     .entry-meta.isocube .face.top { 691             a {
745          overflow: hidden; 692                 padding: 3px 0 4px 0;
746     } 693                 display: block;
747 694                 border: none;
748     .entry-meta.isocube .face.top a { 695                 font-size: 15px;
749          padding: 3px 0 4px 0; 696                 font-weight: 700;
750          display: block; 697                 color: #fff;
751          border: none; 698
752          font-size: 15px; 699                 // the development category is only a marker and makes the post appear in the development page
753          font-weight: 700; 700                 &.development {
754          color: #fff; 701                     display: none;
755     } 702                 }
756 703
757     /* the development category is only a marker and makes the post appear in the development page */ 704                 &.news {
758     .entry-meta.isocube .face.top a.development { 705                     background: #7C4BB4;
759          display: none; 706                     &:hover {
760     } 707                         background: #B092D2;
761 708                     }
762     .entry-meta.isocube .face.top a.news { 709                 }
763          background: #7C4BB4; 710
764     } 711                 &.eclipse {
765 712                     background: #B47C4B;
766     .entry-meta.isocube .face.top a.news:hover { 713                     &:hover {
767          background: #B092D2; 714                         background: #D2B092;
768     } 715                     }
769 716                 }
770     .entry-meta.isocube .face.top a.eclipse { 717
771          background: #B47C4B; 718                 &.web {
772     } 719                     background: #559234;
773 720                     &:hover {
774     .entry-meta.isocube .face.top a.eclipse:hover { 721                         background: #87C764;
775          background: #D2B092; 722                     }
776     } 723                 }
777 724
778     .entry-meta.isocube .face.top a.web { 725                 &.usability {
779          background: #559234; 726                     background: #B44B83;
780     } 727                     &:hover {
781 728                         background: #D292B4;
782     .entry-meta.isocube .face.top a.web:hover { 729                     }
783          background: #87C764; 730                 }
784     } 731
785 732                 &.mobile {
786     .entry-meta.isocube .face.top a.usability { 733                     background: #41C58E;
787          background: #B44B83; 734                     &:hover {
788     } 735                         background: #8FDCBC;
789 736                     }
790     .entry-meta.isocube .face.top a.usability:hover { 737                 }
791          background: #D292B4; 738             }
792     } 739         }
793 740     }
794     .entry-meta.isocube .face.top a.mobile { 741 }
795          background: #41C58E; 742
796     } 743
797 744
798     .entry-meta.isocube .face.top a.mobile:hover {
799          background: #8FDCBC;
800     }
801
802 /*
803  * Comments
804  */
805 article + h3 {
806     margin-top: 50px;
807 }
808
809 article + h3 + ol {
810     margin-bottom: 50px;
811 }
812
813
814 body.page article h1 {
815     display: none;
816 }
817
818
819 ul.tile { 745 ul.tile {
820     list-style: none; 746     list-style: none;
821     padding: 0; 747     padding: 0;
822     margin: 0; 748     margin: 0;
823 } 749
824 750     > li {
825 ul.tile > li { 751         float: left;
826     float: left; 752         width: 50%;
827     width: 50%; 753         height: 15em;
828     height: 15em; 754         margin: 0.8em 0;
829     margin: 0.8em 0; 755
830 } 756         li {
831 757             padding: 0;
832 ul.tile > li li { 758             margin-left: 0.2em;
833     padding: 0; 759             margin-bottom: 0.2em;
834     margin-left: 0.2em; 760         }
835     margin-bottom: 0.2em; 761     }
836 } 762
837 763     ul {
838 764         list-style: none;
839 ul.tile ul { 765         margin-left: 0;
840     list-style: none; 766         padding-left: 0;
841     margin-left: 0; 767     }
842     padding-left: 0; 768
843 } 769     h3 {
844 770         padding: 1px 5px 0px 5px;
845 ul.tile h3 { 771         margin: 0 10px 5px -4px;
846     padding: 1px 5px 0px 5px; 772
847     margin: 0 10px 5px -4px; 773         color: #FFFFFF;
848 774         text-shadow: #000000 0px 1px 0px;
849     color: #FFFFFF; 775
850     text-shadow: #000000 0px 1px 0px; 776         .border;
851 777         .border-radius;
852     border: 1px solid #999; 778         .box-shadow(0px, 1px, 1px, #666);
853     border-radius: 5px; 779
854     -moz-border-radius: 5px; 780         background: #666666 url(../../images/half-bg.png);
855     -webkit-border-radius: 5px; 781     }
856
857     box-shadow: 0px 1px 1px #666;
858     -moz-box-shadow: 0px 1px 1px #666;
859     -webkit-box-shadow: 0px 1px 1px #666;
860
861     background: #666666 url(../../images/half-bg.png);
862 } 782 }
863 783
864 784
865 /* 785 /*
866  * Fact Sheet 786 * Fact Sheet
867  */ 787 */
868 .post-119 .entry-content { 788 .post-119 {
869     background-image: url(images/notebook.png); 789     .entry-content {
870     width: 460px; 790         background-image: url(images/notebook.png);
871 } 791         width: 460px;
872 792     }
873 .post-119 .entry-content .s9gwrapper { 793
874     padding: 58px 42px 55px 54px !important; 794     .entry-content .s9gwrapper {
875 } 795         padding: 58px 42px 55px 54px !important;
876 796     }
877 .post-119 .entry-content h2, 797
878 .post-119 .entry-content p, 798     .entry-content {
879 .post-119 .entry-content li { 799         h2,
880     margin: 0; 800         p,
881     padding: 0; 801         li {
882 802             margin: 0;
883     font-family: KingthingsTrypewriter2Regular, “Lucida Console”, Monaco, monospace; 803             padding: 0;
884     font-size: 17px; 804
885     line-height: 22px; 805             font-family: KingthingsTrypewriter2Regular, “Lucida Console”, Monaco, monospace;
886 } 806             font-size: 17px;
887 807             line-height: 22px;
888 .post-119 .entry-content h2:after { 808         }
889     content: “:”; 809
890 } 810         h2:after {
891 811             content: “:”;
892 .post-119 .entry-content p, 812         }
893 .post-119 .entry-content li { 813
894 } 814         p + h2 {
895 815             margin-top: 20px;
896 .post-119 .entry-content a { 816         }
897     border: none; 817
898     color: #333; 818         a {
899     border-bottom: 2px solid #333; 819             border: none;
900     border-radius: 0px; 820             color: #333;
901     -moz-border-radius: 0px; 821             border-bottom: 2px solid #333;
902     -webkit-border-radius: 0px; 822             .border-radius;
903     padding: 0; 823             padding: 0;
904 } 824
905 825             &:hover,
906 .post-119 .entry-content a:hover, 826             &:active {
907 .post-119 .entry-content a:active { 827                 background: transparent;
908     background: transparent; 828                 color: @blue;
909     color: #4B83B3; 829                 border-color: @blue;
910     border-color: #4B83B3; 830             }
911 } 831         }
912 832
913 .post-119 .entry-content p + h2 { 833         &:after {
914     margin-top: 20px; 834             .clearfix;
915 } 835         }
916 836     }
917 .post-119 .entry-content:after {
918     content: “.”;
919     display: block;
920     clear: left;
921     visibility: hidden;
922     line-height: 0;
923     height: 0;
924 } 837 }
925 838
926 839
927 840
928 /* 841 /*
929  * Skills 842 * Skills
930  */ 843 */
931 article.post-121 .entry-content p:first-child:first-letter { 844 .post-121 {
932     font-family: Verdana, Geneva, sans-serif; 845     .entry-content p:first-child:first-letter {
933     font-size: 270px; 846         font-family: Verdana, Geneva, sans-serif;
934     line-height: 190px; 847         font-size: 270px;
935     padding-right: 14px; 848         line-height: 190px;
936     float: left; 849         padding-right: 14px;
937     display: block; 850         float: left;
938     width: 170px; 851         display: block;
939     height: 207px; 852         width: 170px;
940     color: rgba(0, 0, 0, 0.0); 853         height: 207px;
941     text-shadow: none; 854         color: rgba(0, 0, 0, 0.0);
942     background-image: url(images/S.png); 855         text-shadow: none;
943     background-repeat: no-repeat; 856         background-image: url(images/S.png);
944 } 857         background-repeat: no-repeat;
945 article.post-121:after { 858     }
946     content: “.”; 859
947     display: block; 860     &:after {
948     clear: left; 861         .clearfix;
949     visibility: hidden; 862     }
950     line-height: 0;
951     height: 0;
952 } 863 }
953 864
954 865
955 866
956 867
957 /* 868 /*
958  * Development 869 * Development
959  */ 870 */
960 article.post-125 .entry-content p:first-child:first-letter { 871 .post-125 {
961     font-family: Verdana, Geneva, sans-serif; 872     .entry-content p:first-child:first-letter {
962     font-size: 270px; 873         font-family: Verdana, Geneva, sans-serif;
963     line-height: 190px; 874         font-size: 270px;
964     padding-right: 5px; 875         line-height: 190px;
965     float: left; 876         padding-right: 5px;
966     display: block; 877         float: left;
967     width: 184px; 878         display: block;
968     height: 207px; 879         width: 184px;
969     color: rgba(0, 0, 0, 0.0); 880         height: 207px;
970     text-shadow: none; 881         color: rgba(0, 0, 0, 0.0);
971     background-image: url(images/A.png); 882         text-shadow: none;
972     background-repeat: no-repeat; 883         background-image: url(images/A.png);
973 } 884         background-repeat: no-repeat;
974 article.post-125:after { 885     }
975     content: “.”; 886
976     display: block; 887     &:after {
977     clear: left; 888         .clearfix;
978     visibility: hidden; 889     }
979     line-height: 0; 890 }
980     height: 0; 891
981 } 892
982 893
983
984
985 894
986 /* 895 /*
987  * Contact 896 * Contact
988  */ 897 */
989 898 .post-127 .entry-content {
990 /* Row 1 */ 899     .envelope { // row 1
991 .post-127 .entry-content .envelope { 900         @width: 460px;
992     background: url(images/envelope.png) no-repeat; 901         @height: 258px;
993     width: 145px; 902         @content-width: 145px;
994     height: 132px; 903         @content-height: 132px;
995     padding: 95px 30px 30px 285px; 904         @top: 83px;
996     font-family: AquilineTwoRegular, “Comic Sans MS”, “Comic Sans MS”, cursive; 905         @left: 285px;
997     font-size: 1.5em; 906
998     line-height: 1.4em; 907         background: url(images/envelope.png) no-repeat;
999 } 908         width: @content-width;
1000 909         height: @content-height;
1001 .post-127 .entry-content .envelope h2 { 910         padding: @top (@width – @left – @content-width) (@height – @top – @content-height) @left;
1002     display: none; 911         font-family: AquilineTwoRegular, “Comic Sans MS”, “Comic Sans MS”, cursive;
1003 } 912         font-size: 1.5em;
1004 913         line-height: 1.4em;
1005 /* Row 2 */ 914
1006 .post-127 .entry-content .row2 { 915         h2 {
1007     width: 460px; 916             display: none;
1008 } 917         }
1009 918     }
1010 .post-127 .entry-content .row2:after { 919
1011     content: “.”; 920     .row2 {
1012     display: block; 921         width: 460px;
1013     clear: both; 922
1014     visibility: hidden; 923         &:after {
1015     line-height: 0; 924             .clearfix;
1016     height: 0; 925         }
1017 } 926
1018 927         > * {
1019 .post-127 .entry-content .row2 > * { 928             width: 220px;
1020     width: 220px; 929             height: 303px;
1021     height: 303px; 930             float: left;
1022     float: left; 931             margin-top: 10px;
1023     margin-top: 10px; 932             margin-right: 20px;
1024     margin-right: 20px; 933         }
1025 } 934
1026 935         > *:last-child {
1027 .post-127 .entry-content .row2 > *:last-child { 936             margin-right: 0px;
1028     margin-right: 0px; 937         }
1029 } 938
1030 939         > * p {
1031 .post-127 .entry-content .row2 > * p { 940             font-size: 1.2em;
1032     font-size: 1.2em; 941             text-align: center;
1033     text-align: center; 942         }
1034 } 943
1035 944         > * a {
1036 .post-127 .entry-content .row2 > * a { 945             background-repeat: no-repeat;
1037     background-repeat: no-repeat; 946             background-position: center 15px;
1038     background-position: center 15px; 947             display: block;
1039     display: block; 948             padding: 225px 15px 15px 15px;
1040     padding: 225px 15px 15px 15px; 949         }
1041 } 950
1042 951         > * h2 {
1043 .post-127 .entry-content .row2 > * h2 { 952             display: none;
1044     display: none; 953         }
1045 } 954
1046 955         .phone a {
1047 .post-127 .entry-content .phone a { 956             background-image: url(images/phone.png);
1048     background-image: url(images/phone.png); 957         }
1049 } 958
1050 959         .mail a {
1051 .post-127 .entry-content .mail a { 960             background-image: url(images/mail.png);
1052     background-image: url(images/mail.png); 961         }
1053 } 962     }
1054 963
1055 /* Row 3 */ 964     .row3 {
1056 .post-127 .entry-content .row3 { 965         width: 460px;
1057     width: 460px; 966         text-shadow: none;
1058     text-shadow: none; 967
1059 } 968         &:after {
1060 969             .clearfix;
1061 .post-127 .entry-content .row3:after { 970         }
1062     content: “.”; 971
1063     display: block; 972         .col1,
1064     clear: both; 973         .col2 {
1065     visibility: hidden; 974             width: 220px;
1066     line-height: 0; 975             margin: 0;
1067     height: 0; 976             float: left;
1068 } 977         }
1069 978
1070 .post-127 .entry-content .row3 .col1, 979         .col2 {
1071 .post-127 .entry-content .row3 .col2 { 980             margin-left: 20px;
1072     width: 220px; 981         }
1073     margin: 0; 982
1074     float: left; 983         .col1:after,
1075 } 984         .col2:after {
1076 985             .clearfix;
1077 .post-127 .entry-content .row3 .col2 { 986         }
1078     margin-left: 20px; 987
1079 } 988         a {
1080 989             position: relative;
1081 .post-127 .entry-content .row3 .col1:after, 990             width: 46px;
1082 .post-127 .entry-content .row3 .col2:after { 991             height: 54px;
1083     content: “.”; 992             display: block;
1084     display: block; 993             margin-right: 20px;
1085     clear: both; 994             float: left;
1086     visibility: hidden; 995             padding-top: 3px;
1087     line-height: 0; 996             font-size: 9px;
1088     height: 0; 997             line-height: 14px;
1089 } 998             white-space: normal;
1090 999
1091 .post-127 .entry-content .row3 a { 1000             &:last-child {
1092     position: relative; 1001                 margin-right: 0px;
1093     width: 46px; 1002             }
1094     height: 54px; 1003         }
1095     display: block; 1004
1096     margin-right: 20px; 1005         .col1 {
1097     float: left; 1006             a {
1098     padding-top: 3px; 1007                 -webkit-border-bottom-right-radius: 50% 10px;
1099     font-size: 9px; 1008                  -moz-border-bottom-right-radius: 50% 10px;
1100     line-height: 14px; 1009                         border-bottom-right-radius: 50% 10px;
1101     white-space: normal; 1010
1102 } 1011                 &:link {
1103 1012                     .background-gradient(#D9E5EF, @blue);
1104 .post-127 .entry-content .row3 a:last-child { 1013                 }
1105     margin-right: 0px; 1014
1106 } 1015                 &:hover,
1107 1016                 &:active {
1108 .post-127 .entry-content .row3 .col1 a { 1017                     color: #fff;
1109     -webkit-border-bottom-right-radius: 50% 10px; 1018                     .background-gradient(@blue, #2C4E6B);
1110        -moz-border-bottom-right-radius: 50% 10px; 1019                 }
1111             border-bottom-right-radius: 50% 10px; 1020             }
1112 } 1021
1113 1022             span.lang {
1114 .post-127 .entry-content .row3 .col1 a:link { 1023                 position: absolute;
1115     background-color: #D9E5EF; 1024                 bottom: 2px;
1116     background-image: -webkit-gradient(linear, left top, left bottom, from(#D9E5EF), to(#4B83B3)); 1025                 left: 4px;
1117     background-image: -webkit-linear-gradient(top, #D9E5EF, #4B83B3); 1026             }
1118     background-image:    -moz-linear-gradient(top, #D9E5EF, #4B83B3); 1027         }
1119     background-image:    -ms-linear-gradient(top, #D9E5EF, #4B83B3); 1028
1120     background-image:     -o-linear-gradient(top, #D9E5EF, #4B83B3); 1029         .col2 {
1121     background-image:        linear-gradient(top, #D9E5EF, #4B83B3); 1030             a {
1122 } 1031                 background-position: center center;
1123 1032                 background-repeat: no-repeat;
1124 .post-127 .entry-content .row3 .col1 a:hover, 1033                 border-color: transparent;
1125 .post-127 .entry-content .row3 .col1 a:active { 1034
1126     color: #fff; 1035                 span {
1127 1036                     display: none;
1128     background-color: #4B83B3; 1037                 }
1129     background-image: -webkit-gradient(linear, left top, left bottom, from(#4B83B3), to(#2C4E6B)); 1038
1130     background-image: -webkit-linear-gradient(top, #4B83B3, #2C4E6B); 1039                 &:nth-child(1),
1131     background-image:    -moz-linear-gradient(top, #4B83B3, #2C4E6B); 1040                 &:nth-child(2),
1132     background-image:    -ms-linear-gradient(top, #4B83B3, #2C4E6B); 1041                 &:nth-child(3) {
1133     background-image:     -o-linear-gradient(top, #4B83B3, #2C4E6B); 1042                     background-image: url(images/me.contact.png);
1134     background-image:        linear-gradient(top, #4B83B3, #2C4E6B); 1043                     background-color: transparent;
1135 } 1044                 }
1136 1045
1137 .post-127 .entry-content .row3 .col1 span.lang { 1046                 &:nth-child(1) {
1138     position: absolute; 1047                     background-position: -4px -6px;
1139     bottom: 2px; 1048                     &:hover {
1140     left: 4px; 1049                         background-position: -4px -116px;
1141 } 1050                     }
1142 1051                 }
1143 .post-127 .entry-content .row3 .col2 a { 1052
1144     background-position: center center; 1053                 &:nth-child(2) {
1145     background-repeat: no-repeat; 1054                     background-position: -85px -6px;
1146     border-color: transparent; 1055                     &:hover {
1147 } 1056                         background-position: -85px -116px;
1148 1057                     }
1149 .post-127 .entry-content .row3 .col2 a:hover, 1058                 }
1150 .post-127 .entry-content .row3 .col2 a:active { 1059
1151     background-position: center center; 1060                 &:nth-child(3) {
1152     background-repeat: no-repeat; 1061                     background-position: -162px -6px;
1153     border-color: 4B83B3; 1062                     &:hover {
1154 } 1063                         background-position: -162px -116px;
1155 1064                     }
1156 .post-127 .entry-content .row3 .col2 a span { 1065                 }
1157     display: none; 1066             }
1158 } 1067         }
1159 1068     }
1160 .post-127 .entry-content .row3 .col2 a:nth-child(1) { 1069 }
1161     background-image: url(images/xing.png);
1162 }
1163
1164 .post-127 .entry-content .row3 .col2 a:nth-child(2) {
1165     background-image: url(images/facebook.png);
1166 }
1167
1168 .post-127 .entry-content .row3 .col2 a:nth-child(3) {
1169     background-image: url(images/rss.png);
1170 }