git.r.bdr.sh - rbdr/r.bdr.sh/blob - jekyll/curriculum/style.css

   1 *{
   2         margin: 0;
   3         padding: 0;
   4         text-rendering: optimizeLegibility;
   5 }
   6
   7 /*
   8  * DEFINE FONTS
   9  */
  10
  11  /* League Gothic */
  12
  13 @font-face {
  14     font-family: 'League Gothic';
  15     src: url('/curriculum/fonts/league-gothic/League_Gothic-webfont.ttf') format('truetype');
  16     font-weight: normal;
  17     font-style: normal;
  18 }
  19
  20  /* PT Sans */
  21
  22 @font-face {
  23         font-family: 'PT Sans';
  24         src: url('/curriculum/fonts/pt-sans/PTS55F_W.ttf') format('truetype');
  25         font-weight: normal;
  26     font-style: normal;
  27 }
  28
  29 @font-face {
  30         font-family: 'PT Sans';
  31         src: url('/curriculum/fonts/pt-sans/PTS56F_W.ttf') format('truetype');
  32         font-weight: normal;
  33         font-style: italic;
  34 }
  35
  36  /* PT Serif */
  37
  38  @font-face {
  39         font-family: 'PT Serif';
  40         src: url('/curriculum/fonts/pt-serif/PTF55F_W.ttf') format('truetype');
  41         font-weight: normal;
  42         font-style: normal;
  43 }
  44
  45 @font-face {
  46         font-family: 'PT Serif';
  47         src: url('/curriculum/fonts/pt-serif/PTF56F_W.ttf') format('truetype');
  48         font-weight: normal;
  49         font-style: italic;
  50 }
  51
  52  /* VAG - HandWritten */
  53
  54  @font-face {
  55     font-family: 'VAG-HandWritten';
  56     src: url('/curriculum/fonts/vag-handwritten/VAG-HandWritten-webfont.ttf') format('truetype');
  57     font-weight: normal;
  58     font-style: normal;
  59 }
  60
  61
  62 /*
  63  * END FONT DEFINITIONS
  64  */
  65
  66 /*
  67  * MAIN STRUCTURE
  68  */
  69
  70  body{
  71         font-size: 0.625em;
  72         text-align: center;
  73  }
  74
  75  #wrapper{
  76         width: 960px;
  77         margin: 0 auto;
  78         text-align: left;
  79         position: relative;
  80  }
  81
  82  #info{
  83         margin-left: 10px;
  84         width: 940px;
  85         height: 564px;
  86         background-image: url(/curriculum/images/bluebg.jpg);
  87         background-repeat: no-repeat;
  88  }
  89
  90  #quickinfo{
  91         width: 540px;
  92         height: 550px;
  93         background-image: url(/curriculum/images/benpixel.png);
  94         background-repeat: no-repeat;
  95         position: relative;
  96         z-index: 10;
  97  }
  98
  99  #quickinfo p{
 100         font-family: "VAG-HandWritten",sans-serif;
 101         font-size: 1.8em;
 102         position: absolute;
 103         line-height: 0.9em;
 104         color: #666666;
 105         top: 290px;
 106         left: 240px;
 107         width: 200px;
 108  }
 109
 110  #info h1{
 111         text-shadow: -7px 5px rgba(0,0,0,.15);
 112         font-size:16.07em;
 113         position: absolute;
 114         color: #fff;
 115         text-transform: uppercase;
 116         font-family: "League Gothic", sans-serif;
 117         left: 310px;
 118         z-index: 20;
 119         font-weight: normal;
 120  }
 121
 122  #info h2.subtitle{
 123         position: absolute;
 124         display: block;
 125         width: 580px;
 126         left: 310px;
 127         border-bottom: 1px solid rgba(255,255,255,.2);
 128         box-shadow: 0px 1px rgba(36,62,69,.33);
 129         text-align: center;
 130         padding: 10px 0;
 131         font-family: "League Gothic", sans-serif;
 132         text-transform: uppercase;
 133         font-size: 4.25em;
 134         top: 160px;
 135         z-index: 20;
 136         text-shadow: 0px 1px rgba(255,255,255,.23);
 137         color: #38616f;
 138         font-weight: normal;
 139  }
 140
 141   #info h2.contactheader{
 142         position: absolute;
 143         left: 600px;
 144         padding: 10px;
 145         display: block;
 146         top: 260px;
 147         font-size: 3.6em;
 148         font-weight: normal;
 149         color: #fff;
 150         font-family: "PT Sans", Helvetica, Arial, sans;
 151         text-transform: uppercase;
 152         text-shadow: 1px 1px rgba(0,0,0,.25);
 153         z-index: 20;
 154  }
 155
 156  #info ul.contactinfo{
 157         position: absolute;
 158         left: 600px;
 159         width: 220px;
 160         padding: 10px;
 161         display: block;
 162         list-style: none;
 163         top: 320px;
 164  }
 165
 166  #info ul.contactinfo li{
 167         font-family: "PT Sans", Helvetica, Arial, sans;
 168         background: transparent;
 169     padding-left: 40px;
 170     font-size: 1.8em;
 171     text-shadow: 1px 1px rgba(0,0,0,.25);
 172     color: #fff;
 173     display: block;
 174     height: 25px;
 175     margin-bottom: 15px;
 176     position: relative;
 177  }
 178
 179  #info ul.contactinfo li.phone{
 180         background: transparent url(/curriculum/images/sprites.png)
 181     0 0 no-repeat;
 182  }
 183
 184  #info ul.contactinfo li.site{
 185         background: transparent url(/curriculum/images/sprites.png)
 186     0 -25px no-repeat;
 187  }
 188
 189   #info ul.contactinfo li.mail{
 190         background: transparent url(/curriculum/images/sprites.png)
 191     0 -50px no-repeat;
 192  }
 193
 194   #info ul.contactinfo li.twitter{
 195         background: transparent url(/curriculum/images/sprites.png)
 196     0 -75px no-repeat;
 197  }
 198
 199  #info ul.contactinfo li a{
 200         color: #fff;
 201         text-decoration: none;
 202  }
 203
 204  #info ul.contactinfo li .type{
 205         display: none;
 206  }
 207
 208  div#profile:before{
 209         display: block;
 210         content: "-";
 211         color: transparent;
 212         background-image: url(/curriculum/images/perfilbgtop.png);
 213         background-repeat: no-repeat;
 214         z-index: 30;
 215         position: absolute;
 216         top: -40px;
 217         height: 40px;
 218         width: 960px;
 219  }
 220
 221  #profile:after{
 222         display: block;
 223         content: "-";
 224         color: transparent;
 225         background-image: url(/curriculum/images/perfilbgbottom.png);
 226         background-repeat: no-repeat;
 227         z-index: 30;
 228         height: 23px;
 229         width: 960px;
 230         position: relative;
 231         bottom: -23px;
 232  }
 233
 234  #profile{
 235         width: 960px;
 236         background: url(/curriculum/images/perfilbg.jpg);
 237         background-repeat: repeat;
 238         position: relative;
 239         color: #000;
 240  }
 241
 242  #profile h2{
 243
 244          -moz-transform: rotate(-90deg);
 245        -o-transform: rotate(-90deg);
 246   -webkit-transform: rotate(-90deg);
 247       -ms-transform: rotate(-90deg);
 248           transform: rotate(-90deg);
 249         font-size: 5.35em;
 250         font-family: "League Gothic", sans-serif;
 251         position: absolute;
 252         text-transform: uppercase;
 253         color: #c00;
 254         text-shadow: 1px 0px rgba(0,0,0,.2),
 255                                  -1px 0px rgba(255,255,255,.75);
 256         top: 60px;
 257         left: 40px;
 258
 259  }
 260
 261  #profile p{
 262         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 263         position: relative;
 264         left: 130px;
 265         width: 400px;
 266         color: #666;
 267         font-size: 1.4em;
 268         line-height: 1.17em;
 269         margin-bottom: 20px;
 270  }
 271
 272  #profile .visualaid{
 273         left: 600px;
 274         width: 300px;
 275         text-align: center;
 276         position: absolute;
 277         top: -10px;
 278         z-index: 40;
 279  }
 280
 281  #experience, #projects{
 282         margin-left: 10px;
 283         width: 940px;
 284         background-image: url(/curriculum/images/greybg.jpg);
 285         background-repeat: repeat;
 286  }
 287
 288  #experience{
 289         padding-top: 43px;
 290         padding-left: 50px;
 291         padding-right: 50px;
 292         width: 840px;
 293         -webkit-column-count: 3;
 294         -webkit-column-width: auto;
 295         -webkit-column-gap: 60px;
 296         -moz-column-count: 3;
 297         -moz-column-width: auto;
 298         -moz-column-gap: 60px;
 299         column-count: 3;
 300         column-gap: 60px;
 301         border-bottom: 1px solid #ccc;
 302  }
 303
 304  #experience h2{
 305         margin: 10px;
 306         font-weight: normal;
 307         font-family: "League Gothic", sans-serif;
 308         color: #c00;
 309         text-transform: uppercase;
 310         font-size: 6em;
 311         text-shadow: 1px 0 #fff,
 312                                  -1px 0 #fff,
 313                                  0 1px #fff,
 314                                  0 -1px #fff,
 315                                  -5px 3px rgba(127,213,222,.75);
 316  }
 317
 318  #experience h3{
 319         font-weight: normal;
 320         font-family: "PT Serif", Times, "Times New Roman", serif;
 321         color: #aaa;
 322         font-style: normal;
 323         font-size: 1.8em;
 324         text-shadow: 1px 0 #fff;
 325 }
 326
 327  #experience h3 span{
 328         color: #999;
 329         font-style: italic;
 330  }
 331
 332  #experience ul.trabajos{
 333         list-style: none;
 334  }
 335
 336  #experience ul.trabajos li{
 337         display: inline-block;
 338         margin: 20px 10px;
 339  }
 340
 341  #experience p{
 342         padding-top: 20px;
 343         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 344         font-size: 1.4em;
 345         color: #414141;
 346  }
 347
 348  #projects{
 349         border-top: 1px solid #fff;
 350         position: relative;
 351         overflow: auto;
 352  }
 353
 354  #projects h2{
 355         width:220px;
 356         padding-right: 10px;
 357         text-align: right;
 358         display: block;
 359         float: left;
 360         font-weight: normal;
 361         font-family: "League Gothic", sans-serif;
 362         color: #c00;
 363         text-transform: uppercase;
 364         font-size: 6em;
 365         text-shadow: 1px 0 #fff,
 366                                  -1px 0 #fff,
 367                                  0 1px #fff,
 368                                  0 -1px #fff,
 369                                  -5px 3px rgba(127,213,222,.75);
 370  }
 371
 372  #projectsvg, #projectsweb{
 373         float: left;
 374         width: 220px;
 375         padding: 0 10px;
 376         margin-left: 60px;
 377         margin-top: 10px;
 378  }
 379
 380  #projects h3{
 381         font-family: "League Gothic", sans-serif;
 382         font-weight: normal;
 383         text-transform: uppercase;
 384         font-size: 2.4em;
 385         color: #999;
 386         text-shadow: 0px 1px #fff;
 387         padding-left: 60px;
 388         width: 180px;
 389         background-repeat: no-repeat;
 390         height: 25px;
 391         display: block;
 392         margin-bottom: 20px;
 393  }
 394
 395  #projects h3.vgheader{
 396         background: transparent url(/curriculum/images/sprites.png)
 397     0 -100px no-repeat;
 398  }
 399
 400  #projects h3.webheader{
 401         background: transparent url(/curriculum/images/sprites.png)
 402     0 -125px no-repeat;
 403  }
 404
 405  #projects p{
 406         color: #414141;
 407         font-size: 1.4em;
 408         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 409         margin: 10px 0;
 410  }
 411
 412  #projects h4, #projects h5{
 413         font-family: "PT Serif", Times, "Times New Roman", serif;
 414         font-size: 1.8em;
 415         text-shadow: 1px 0 #fff;
 416         font-weight: normal;
 417  }
 418
 419  #projects ul.projects{
 420         list-style: none;
 421         display: block;
 422         width: 220px;
 423  }
 424
 425  #projects h4{
 426         color: #999;
 427         font-style: italic;
 428  }
 429
 430  #projects h5{
 431         color: #aaa;
 432  }
 433
 434  #projects ul.screenshots{
 435         list-style: none;
 436         margin-bottom: 20px;
 437  }
 438
 439  #projects ul.screenshots li{
 440         display: inline-block;
 441         border: 1px solid #ccc;
 442         padding: 10px 0;
 443         width: 90px;
 444         text-align: center;
 445  }
 446
 447  #projects ul.screenshots li.first{
 448         margin-right: 15px;
 449  }
 450
 451  #education{
 452         margin-left: 10px;
 453         width: 940px;
 454         height: 550px;
 455         background-image: url(/curriculum/images/bluebg.jpg);
 456         background-repeat: no-repeat;
 457         overflow: auto;
 458  }
 459
 460  #education h2{
 461         font-weight: normal;
 462         font-size: 9.6em;
 463         font-family: "League Gothic", sans-serif;
 464         text-align: center;
 465         text-shadow: 1px 0 1px #fff,
 466                                  -1px 0 1px #fff,
 467                                  0 1px 1px #fff,
 468                                  0 -1px 1px #fff;
 469         color: #fff;
 470         text-transform: uppercase;
 471         padding-top: 10px;
 472  }
 473
 474  #education .education-para{
 475         width: 220px;
 476         margin-left: 50px;
 477         padding: 10px;
 478         font-size: 1.4em;
 479         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 480         color: #fff;
 481         float: left;
 482  }
 483
 484  #education .education-para em{
 485         font-style: italic;
 486         color: #226076;
 487  }
 488
 489  #education .abilities{
 490         list-style: none;
 491         display: block;
 492         float: left;
 493         -webkit-column-count: 3;
 494         -webkit-column-width: auto;
 495         -webkit-column-gap: 20px;
 496         -moz-column-count: 3;
 497         -moz-column-width: auto;
 498         -moz-column-gap: 20px;
 499         column-count: 3;
 500         column-gap: 20px;
 501         column-width: auto;
 502         width: 520px;
 503         padding: 10px;
 504         margin-left: 60px;
 505  }
 506
 507  #education .abilities li{
 508         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 509         font-size: 1.4em;
 510         color: #fff;
 511         background: transparent url(/curriculum/images/sprites.png)
 512     0 -150px no-repeat;
 513         padding-left: 40px;
 514         margin-bottom: 10px;
 515         height: 40px;
 516         display: inline-block;
 517  }
 518
 519  #personal{
 520         margin-left: 10px;
 521         width: 940px;
 522         background-image: url(/curriculum/images/greybg.jpg);
 523         background-repeat: repeat;
 524  }
 525
 526  #personal h2{
 527         font-weight: normal;
 528         font-family: "League Gothic", sans-serif;
 529         display: block;
 530         height: 28px;
 531         padding-top: 4px;
 532         text-transform: uppercase;
 533         text-align: center;
 534         font-size: 2.4em;
 535         color: transparent;
 536         box-shadow: 0 0 10px rgba(0,0,0,.33);
 537         background-image: url(/curriculum/images/barrapeligro.png);
 538         background-repeat: no-repeat;
 539         cursor: pointer;
 540  }
 541
 542  #personal h2 a{
 543         background: url(/curriculum/images/avisotext.png);
 544         background-repeat: no-repeat;
 545         color: transparent;
 546         text-decoration: none;
 547         display: inline-block;
 548         text-align: left;
 549         padding-left: 2px;
 550         width: 293px;
 551         height: 24px;
 552         cursor: pointer;
 553  }
 554
 555  #personal .hidden{
 556         background-image: url(/curriculum/images/blackbg.jpg);
 557         overflow: auto;
 558         width: 940px;
 559         padding-top: 10px;
 560  }
 561
 562  #personal .separatorfinal{
 563         display: block;
 564         height: 32px;
 565         text-align: center;
 566         color: transparent;
 567         box-shadow: 0 0 10px rgba(0,0,0,.33);
 568         background-image: url(/curriculum/images/barrapeligro.png);
 569         background-repeat: no-repeat;
 570         content: "-"
 571         border: 0;
 572         clear: both;
 573         margin-top: 10px;
 574  }
 575
 576  #personal p{
 577         width: 220px;
 578         margin-left: 50px;
 579         padding: 10px;
 580         font-size: 1.4em;
 581         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 582         color: #fff;
 583         float: left;
 584         text-shadow: -1px 1px #000;
 585  }
 586
 587  #personal .funfacts{
 588         display: block;
 589         float: left;
 590         -webkit-column-count: 2;
 591         -webkit-column-width: auto;
 592         -webkit-column-gap: 20px;
 593         -moz-column-count: 2;
 594         -moz-column-width: auto;
 595         -moz-column-gap: 20px;
 596         column-count: 2;
 597         column-gap: 20px;
 598         column-width: auto;
 599         width: 520px;
 600         padding: 10px;
 601         margin-left: 60px;
 602  }
 603
 604  #personal .funfacts li{
 605         color: #fff;
 606         font-size: 1.4em;
 607         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 608         text-shadow: -1px 1px #000;
 609         display: inline-block;
 610         margin-bottom: 15px;
 611         padding-left: 16px;
 612         background-image: url(/curriculum/images/bullet.png);
 613         background-repeat: no-repeat;
 614         background-position: left 5px;
 615  }
 616
 617  #personal .disclaimer{
 618         text-align: center;
 619         padding: 20px 0;
 620         margin: 0 auto;
 621         font-family: "PT Sans", Helvetica, Arial, sans-serif;
 622         color: #666;
 623         width: 400px;
 624         font-size: 1.4em;
 625  }
 626
 627  #personal .disclaimer em{
 628         color: #999;
 629         font-style: italic;
 630         display: block;
 631  }