1/* HTML 5 */
2header, footer, nav, article, section, hgroup, figure {
3    display: block;
4}
5
6/* PAGE */
7html {
8    overflow: auto;
9    background-color: #555;
10    color: #fff;
11}
12html, body {
13    margin: 0;
14    padding: 0;
15}
16@font-face {
17    font-family: 'neolao title';
18    src: url('fonts/daniel.eot');
19    src: local('Daniel Regular'), local('Daniel'), url('fonts/daniel.woff') format('woff'), url('fonts/daniel.ttf') format('truetype'), url('fonts/daniel.svg#Daniel') format('svg');
20}
21@font-face {
22    font-family: 'neolao menu';
23    src: url('fonts/Florsn17.eot');
24    src: local('Florencesans SC Regular'), local('FlorencesansSC'), url('fonts/Florsn17.woff') format('woff'), url('fonts/Florsn17.ttf') format('truetype'), url('fonts/Florsn17.svg#FlorencesansSC') format('svg');
25}
26@font-face {
27    font-family: 'neolao header';
28    src: url('fonts/marker_sd.eot');
29    src: local('Marker SD Regular'), local('MarkerSD'), url('fonts/marker_sd.woff') format('woff'), url('fonts/marker_sd.ttf') format('truetype'), url('fonts/marker_sd.svg#MarkerSD') format('svg');
30}
31
32* {
33    font-family: Verdana, sans-serif;
34}
35
36/* HEADER */
37body {
38    background-color: #fff;
39    color: #000;
40    height: 1%;
41    overflow: hidden;
42}
43body > header {
44    background-image: url(images/header_background.png);
45    background-repeat: no-repeat;
46    background-position: top right;
47    background-color: #004f8a;
48    color: #fff;
49    height: 90px;
50    margin: 0;
51    position: relative;
52}
53    body > header h1 {
54        font-family: "neolao title", Verdana, sans-serif;
55        font-weight: normal;
56        font-size: 3em;
57
58        height: 135px;
59        background-image: url(images/avatar.png);
60        background-repeat: no-repeat;
61        background-position: top left;
62
63        white-space: nowrap;
64
65        /*
66        top: calc(90px - 1em);
67        */
68        margin: 0;
69        padding: .6em 0 0 150px;
70        text-shadow: 2px 2px 5px #000;
71    }
72        body > header h1 a {
73            font-size: 1em;
74            font-family: inherit;
75            color: inherit;
76            text-decoration: none;
77        }
78
79/* NAVIGATION */
80body > nav {
81    padding: 5px 10px 5px 150px;
82    font-family: "neolao menu", Verdana, Helvetica, Arial, sans-serif;
83    text-transform: uppercase;
84    background-color: #000;
85    color: #fff;
86    text-shadow: 1px 1px 1px #000;
87}
88body > nav[role="primary navigation"] {
89    background-color: #e39e37;
90    background-image: url(images/primary_navigation_background.png);
91    background-repeat: repeat-x;
92    background-position: top;
93
94    /*
95    background: -moz-linear-gradient(top, bottom, from(#f00), to(#00f));
96    background: -webkit-gradient(linear, top, bottom, from(#f00), to(#00f));
97    */
98    border-top: 1px solid #fbbf69;
99
100    border-bottom: 2px solid #b47d2c;
101    -moz-border-bottom-colors: #8c6122 #e39e37;
102
103    font-size: 16px;
104}
105body > nav[role="secondary navigation"] {
106    background-color: #1ba6b2;
107    background-image: url(images/secondary_navigation_background.png);
108    background-repeat: repeat-x;
109    background-position: top;
110
111
112    border-bottom: 2px solid #0e545a;
113    -moz-border-bottom-colors: #0e545a #1ba6b2;
114
115    font-size: 12px;
116}
117    body > nav ul {
118        margin: 0;
119        padding: 0;
120    }
121    body > nav li {
122        display: inline;
123        margin-right: 5px;
124    }
125    body > nav a {
126        font-family: "neolao menu", Verdana, Helvetica, Arial, sans-serif;
127        text-decoration: none;
128        color: inherit;
129        padding: 2px 7px 2px 7px;
130        position: relative;
131    }
132    body > nav li.selected a {
133        border-radius: 5px;
134        -moz-border-radius: 5px;
135        -webkit-border-radius: 5px;
136        text-shadow: 0px 0px 1px #000;
137    }
138    body > nav[role="primary navigation"] li.selected a {
139        background-image: url(images/primary_navigation_select_background.png);
140        background-repeat: repeat-x;
141        background-position: center;
142        -moz-box-shadow: inset #000 0px 0px 3px, #f3ae47 0 1px 1px;
143        -webkit-box-shadow: inset #000 0px 0px 3px, #f3ae47 0 1px 1px;
144        box-shadow: inset #000 0px 0px 3px, #f3ae47 0 1px 1px;
145    }
146    body > nav[role="secondary navigation"] li.selected a {
147        background-image: url(images/secondary_navigation_select_background.png);
148        background-repeat: repeat-x;
149        background-position: center;
150        -moz-box-shadow: inset #000 0px 0px 3px, #2bb6c2 0 1px 1px;
151        -webkit-box-shadow: inset #000 0px 0px 3px, #2bb6c2 0 1px 1px;
152        box-shadow: inset #000 0px 0px 3px, #2bb6c2 0 1px 1px;
153    }
154
155/* SIDEBAR */
156body > aside {
157    width: 200px;
158    float: right;
159    padding-top: 10px;
160    font-size: .8em;
161}
162body > aside + #body {
163    height: 1%;
164    overflow: hidden;
165}
166    /** liens */
167    body > aside a {
168        color: #fff;
169        background-color: inherit;
170    }
171    body > aside a:hover {
172        color: #ff9;
173    }
174
175    /** sections */
176    body > aside section {
177        color: #fff;
178        background-color: #1ba6b2;
179        border-radius: 10px 0 0 10px;
180        -moz-border-radius: 10px 0 0 10px;
181        -webkit-border-top-left-radius: 10px;
182        -webkit-border-bottom-left-radius: 10px;
183        padding: 10px 15px;
184        margin-bottom: 15px;
185    }
186        body > aside section h1 {
187            font-size: 1.2em;
188            margin: 0 0 5px 0;
189            font-family: "neolao menu", Verdana, sans-serif;
190        }
191        body > aside section ul {
192            margin: 0;
193            padding: 0;
194            list-style: none;
195        }
196        body > aside section ul ul {
197            margin-left: 2em;
198            list-style-type: disc;
199        }
200        body > aside section input[type=text] {
201            border: solid 2px #fff;
202            border-radius: 3px;
203            -moz-border-radius: 3px;
204            -webkit-border-radius: 3px;
205        }
206        body > aside section input[type=text]:focus {
207            border: solid 2px #ff6;
208        }
209        body > aside section input[type=submit] {
210            color: #333;
211            background-color: #ccc;
212            border: solid 2px #ccc;
213            border-radius: 3px;
214            -moz-border-radius: 3px;
215            -webkit-border-radius: 3px;
216        }
217        body > aside section input[type=submit]:hover {
218            border: solid 2px #666;
219        }
220        body > aside section input[type=submit]:focus {
221            border: solid 2px #666;
222        }
223
224/* BODY */
225#body {
226    background-color: #fff;
227    color: #333;
228    padding: 2em;
229    font-size: .8em;
230}
231    #body p {
232        margin: .5em 0;
233    }
234    #body .clear {
235        clear: both;
236        margin: 0;
237        visibility: hidden;
238        float: left;
239    }
240
241    /** pagination */
242    #body .pagination {
243        margin: 20px 0 0 0;
244        background-color: #e3e3e3;
245        color: #333;
246        border-radius: 10px;
247        -moz-border-radius: 10px;
248        -webkit-border-radius: 10px;
249        padding: 10px 20px;
250        text-align: center;
251        clear: both;
252    }
253        #body .pagination a {
254            text-decoration: none;
255            background-color: #ccc;
256            color: #333;
257            border-radius: 3px;
258            -moz-border-radius: 3px;
259            -webkit-border-radius: 3px;
260            padding: 2px 8px;
261        }
262        #body .pagination a:hover {
263            background-color: #aaa;
264        }
265
266/* ARTICLE */
267#body article {
268    margin-top: -30px;
269    clear: both;
270}
271#body article + article {
272    margin-top: 0;
273    padding-top: 10px;
274}
275    /** images */
276    #body article img {
277        border: solid 5px #fff;
278        border-color: #fff #fff #fff #fff #ccc;
279        -moz-border-top-colors: #fff #fff #fff #fff #ccc;
280        -moz-border-right-colors: #fff #fff #fff #fff #ccc;
281        -moz-border-bottom-colors: #fff #fff #fff #fff #ccc;
282        -moz-border-left-colors: #fff #fff #fff #fff #ccc;
283        box-shadow: 2px 2px 5px #666;
284        -moz-box-shadow: #666 1px 1px 5px;
285        -webkit-box-shadow: #666 1px 1px 5px;
286    }
287    #body article a:hover img {
288        border: solid 5px #ff9;
289        border-color: #ff9 #ff9 #ff9 #ff9 #ccc;
290        -moz-border-top-colors: #ff9 #ff9 #ff9 #ff9 #ccc;
291        -moz-border-right-colors: #ff9 #ff9 #ff9 #ff9 #ccc;
292        -moz-border-bottom-colors: #ff9 #ff9 #ff9 #ff9 #ccc;
293        -moz-border-left-colors: #ff9 #ff9 #ff9 #ff9 #ccc;
294    }
295        /** * smiley */
296        #body article img.smiley {
297            border: none;
298            box-shadow: none;
299            -moz-box-shadow: none;
300            -webkit-box-shadow: none;
301        }
302
303    /** table */
304    #body article table {
305        width: 100%;
306        border-collapse: collapse;
307        border: solid 2px #0ea6b4;
308    }
309        #body article table th {
310            border-right: solid 1px #fff;
311            background-color: #0ea6b4;
312            color: #fff;
313            padding: 3px;
314            text-align: left;
315        }
316        #body article table td {
317            padding: 3px;
318            border: solid 1px #0ea6b4;
319        }
320
321    /** code */
322    #body article pre.code {
323        overflow: auto;
324        border: solid 1px #a5a3af;
325        border-left: solid 2px #a5a3af;
326        background-color: #fffff5;
327        color: #333;
328        font-family: DejaVu, "Courier New", Courier, monospace;
329        padding: 2px 2px 2px 4px;
330    }
331        #body article pre.code * {
332            font-family: inherit;
333        }
334        pre .br0 { color: #6c6 !important; background-color: inherit; }
335        pre .co1 { color: #808080 !important; font-style: normal !important; background-color: #f0f0f0 !important; }
336        pre .co2 { color: #808080 !important; font-style: normal !important; background-color: #f0f0f0 !important; }
337        pre .coMULTI { color: #808080 !important; font-style: normal !important; background-color: #f0f0f0 !important; }
338        pre .es0 { color: #009 !important; font-weight: normal !important; background-color: inherit; }
339        pre .kw1 { color: #990 !important; font-weight: bold !important; background-color: inherit; }
340        pre .kw2 { color: #666 !important; font-weight: bold !important; background-color: inherit; }
341        pre .kw3 { color: #66a !important; font-weight: bold !important;background-color: inherit; }
342        pre .kw4 { color: #933 !important; background-color: inherit; }
343        pre .kw5 { color: #77f !important; background-color: inherit; }
344        pre .me0 { color: #060 !important; background-color: inherit; }
345        pre .nu0 { color: #c6c !important; background-color: inherit; }
346        pre .re0 { color: #77f !important; background-color: inherit; }
347        pre .re1 { color: #77f !important; background-color: inherit; }
348        pre .re2 { color: #77f !important; background-color: inherit; }
349        pre .re4 { color: #099 !important; background-color: inherit; }
350        pre .sc0 { color: #0bd !important; background-color: inherit; }
351        pre .sc1 { color: #db0 !important; background-color: inherit; }
352        pre .sc2 { color: #090 !important; background-color: inherit; }
353        pre .st0 { color: #00f !important; background-color: inherit; }
354    #body article code {
355        font-family: DejaVu, "Courier New", Courier, monospace;
356    }
357
358    /** titres */
359    #body article h1, #body article h1 *  {
360        font-family: "neolao header", Georgia, "Times New Roman", serif;
361        text-decoration: none;
362        color: inherit;
363    }
364
365    /** flash */
366    #body article .flash {
367        line-height: 0;
368        margin: 0 0 20px 0;
369
370        border-top: solid 1px #999;
371        border-left: solid 1px #999;
372        border-bottom: solid 1px #666;
373        border-right: solid 1px #666;
374        box-shadow: 2px 2px 5px #999;
375        -moz-box-shadow: #999 2px 2px 5px;
376        -webkit-box-shadow: #999 2px 2px 5px;
377    }
378    #body article .flash.cd {
379        width: 800px;
380        height: 600px;
381    }
382
383    /** sections */
384    #body article section {
385        clear: both;
386    }
387
388    /** section level 1 */
389    #body article > h1 {
390        margin: 30px 0 10px 0;
391        background-color: inherit;
392        color: #d38e27;
393        border-bottom: solid 2px #d38e27;
394        font-size: 1.8em;
395        background-image: url(images/h3_background.gif);
396        background-repeat: no-repeat;
397        background-position: left center;
398        padding-left: 20px;
399    }
400        #body article > .post-info {
401            font-size: .8em;
402            margin: -10px 0 0 0;
403            padding: 5px 20px;
404            background-color: #ffc;
405            border-bottom: solid 1px #dd9;
406            border-left: solid 1px #dd9;
407            border-right: solid 1px #dd9;
408            border-radius: 0 0 10px 10px;
409            -moz-border-radius: 0 0 5px 5px;
410        }
411
412
413    /** section level 2 */
414    #body article > section {
415        margin-top: 30px;
416        margin-left: 30px;
417        clear: both;
418    }
419        #body article > section > h1 {
420            font-size: 1.6em;
421            background-color: inherit;
422            color: #0e8694;
423            border-bottom: solid 1px #0ea6b4;
424        }
425
426    /** section level 3 */
427    #body article > section > section {
428        margin-top: 30px;
429        margin-left: 30px;
430        clear: both;
431    }
432        #body article > section > section > section > h1 {
433            font-size: 1.3em;
434            background-color: inherit;
435            color: #000;
436            border-bottom: solid 1px #000;
437        }
438
439    /** section level 4 */
440    #body article > section > section > section {
441        margin-top: 30px;
442        margin-left: 30px;
443        clear: both;
444    }
445        #body article > section > section > h1 {
446            font-size: 1.3em;
447            background-color: inherit;
448            color: #6d6e23;
449            border-bottom: solid 1px #6d6e23;
450        }
451
452    /** network */
453    #body article ul.network {
454        margin: 0;
455        padding: 0;
456    }
457        #body article ul.network li {
458            display: inline;
459        }
460        #body article ul.network img {
461            border-top: solid 1px #ccc;
462            border-left: solid 1px #ccc;
463            border-bottom: solid 1px #999;
464            border-right: solid 1px #999;
465            box-shadow: 1px 1px 3px #666;
466            -moz-box-shadow: #666 1px 1px 3px;
467            -webkit-box-shadow: #666 1px 1px 3px;
468        }
469
470    /** commentaires */
471    #body article .comments {
472        background-color: #e3e3e3;
473        color: #333;
474        border-radius: 10px;
475        -moz-border-radius: 10px;
476        -webkit-border-radius: 10px;
477        padding: 10px 20px;
478    }
479        #body article .comments h1 {
480            margin: 0 0 10px 0;
481            color: #999;
482            border-bottom: none;
483        }
484        #body article .comments article {
485            margin: 0 0 10px 0;
486        }
487            #body article .comments article h1 {
488                padding: 0;
489                background-image: none;
490                font-size: 1.2em;
491                color: #333;
492                border-bottom: solid 1px #999;
493            }
494        #body article .comments form {
495            margin: 0 0 10px 0;
496        }
497            #body article .comments form fieldset {
498                border: none;
499                padding: 0;
500            }
501            #body article .comments form label {
502                width: 13em;
503                float: left;
504                line-height: 1.6em;
505            }
506            #body article .comments form input[type=text] {
507                border: solid 2px #aaa;
508                border-radius: 3px;
509                -moz-border-radius: 3px;
510                -webkit-border-radius: 3px;
511            }
512            #body article .comments form input[type=text]:focus {
513                border: solid 2px #666;
514            }
515            #body article .comments form textarea {
516                border: solid 2px #aaa;
517                border-radius: 3px;
518                -moz-border-radius: 3px;
519                -webkit-border-radius: 3px;
520            }
521            #body article .comments form textarea:focus {
522                border: solid 2px #666;
523            }
524            #body article .comments form input[type=submit] {
525                border: solid 2px #666;
526                background-color: #666;
527                color: #fff;
528                border-radius: 3px;
529                -moz-border-radius: 3px;
530                -webkit-border-radius: 3px;
531                font-weight: bold;
532            }
533            #body article .comments form input[type=submit]:hover {
534                color: #ff9;
535            }
536
537
538    /** pings */
539    #body article #pings {
540        background-color: #e3e3e3;
541        color: #333;
542        border-radius: 10px;
543        -moz-border-radius: 10px;
544        -webkit-border-radius: 10px;
545        padding: 10px 20px;
546    }
547        #body article #pings h1 {
548            margin: 0 0 10px 0;
549            color: #999;
550            border-bottom: none;
551        }
552
553    /** aside */
554    #body article aside {
555        position: absolute;
556        right: 0;
557        top: 260px;
558        width: 200px;
559        font-size: 1em;
560    }
561        #body article aside section {
562            color: #fff;
563            background-color: #1ba6b2;
564            border-radius: 10px 0 0 10px;
565            -moz-border-radius: 10px 0 0 10px;
566            -webkit-border-top-left-radius: 10px;
567            -webkit-border-bottom-left-radius: 10px;
568            padding: 10px 15px;
569            margin-bottom: 15px;
570        }
571            #body article aside section h1 {
572                font-size: 1.2em;
573                margin: 0 0 5px 0;
574                font-family: "neolao menu", Verdana, sans-serif;
575            }
576            #body article aside section ul {
577                margin: 0;
578                padding: 0;
579                list-style: none;
580            }
581
582
583/* FOOTER */
584body > footer {
585    background-image: url(images/footer_background.png);
586    background-repeat: repeat-x;
587    background-position: top;
588    padding: 10px 0 10px 2em;
589    font-size: .7em;
590    clear: both;
591    background-color: #555;
592    color: #eee;
593}
594    body > footer p {
595        margin: 0;
596    }
597    body > footer a {
598        background-color: inherit;
599        color: inherit;
600    }
601    body > footer a:hover {
602        background-color: inherit;
603        color: #ffff00;
604    }
605
606/* CV */
607#body article.cv > p {
608    margin: 0 0 .5em 0;
609}
610#body article.cv section section {
611    margin-top: 0;
612}
613#body article.cv section section + section {
614    margin-top: 30px;
615}
616#body article.cv section section h1 {
617    border-bottom: none;
618}
619#body article.cv section section p {
620    margin: 0 0 .3em 9em;
621}
622#body article.cv section section p.time {
623    float: left;
624    width: 8em;
625    font-weight: bold;
626    margin: 0;
627}
628#body article.cv section.skills p {
629    margin: 0;
630}
631#body article.cv .photo {
632    float: left;
633    margin: 0 10px 20px 0;
634    border-top: solid 1px #666;
635    border-left: solid 1px #666;
636    border-bottom: solid 1px #333;
637    border-right: solid 1px #333;
638    box-shadow: 2px 2px 5px #555;
639    -moz-box-shadow: #555 2px 2px 5px;
640    -webkit-box-shadow: #555 2px 2px 5px;
641}
642
643/* WORKS */
644#body article.works section section figure {
645    float: left;
646    margin-right: 20px;
647    margin-bottom: 20px;
648}
649
650