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