2015/assets/css/custom.css

   1 /* General */
   2
   3 body {
   4   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   5   font-size: 14px;
   6   line-height: 1.428571429;
   7   color: #333333;
   8 }
   9
  10 h3  {
  11   color: rgb(88, 208, 121);
  12 }
  13
  14 h3 {
  15   font-size: 20px;
  16 }
  17
  18 a:hover,
  19 a:focus {
  20   color: rgb(38, 208, 61);
  21   text-decoration: none;
  22 }
  23
  24 a {
  25   color: inherit;
  26   text-decoration: underline;
  27   -moz-text-decoration-color: rgb(88, 208, 121);
  28   text-decoration-color: rgb(88, 208, 121);
  29 }
  30
  31 .alt-a {
  32   color: inherit;
  33   text-decoration: none;
  34   -moz-text-decoration-color: rgb(88, 208, 121);
  35   text-decoration-color: rgb(88, 208, 121);
  36 }
  37
  38 .text-thick {
  39         font-weight: 900;
  40 }
  41
  42 .breadcrumb > .active {
  43         color: rgb(38, 208, 61);
  44 }
  45
  46 hr {
  47   margin-top: 20px;
  48   margin-bottom: 20px;
  49   border: 0;
  50   border-top: 1px solid #bababa;
  51 }
  52
  53 #lp-panel {
  54   max-width: 32%;
  55   margin-left: 0.3em;
  56   float: right;
  57 }
  58
  59 #lp-panel ul {
  60   list-style: square;
  61   padding-left: 0.4em;
  62 }
  63
  64 #lp-panel li {
  65   margin-bottom: 0.5em;
  66 }
  67
  68 #lp-updates {
  69   max-width: 35%;
  70   margin-left: 0.3em;
  71 }
  72
  73 /* Header */
  74
  75 .lp-banner {
  76   box-shadow: 0px 1px 5px rgba(255, 255, 255, 0.7);
  77   margin-bottom: 20px;
  78   text-shadow: 0px 1px 0px #ffffff;
  79   background-image: url(/2014/assets/img/l-noise.png);
  80 }
  81
  82 .lp-head img {
  83   margin: 0.5em 0 0.001em -1.5em;
  84 }
  85
  86 .lp-head p {
  87   margin: -0.79em 0 0.001em -4em;
  88 }
  89
  90 .lp-signup {
  91   margin-right: 10px;
  92   margin-left: 10px;
  93 }
  94
  95 .lp-banner .container {
  96   padding-right: 5px;
  97   padding-left: 5px;
  98   margin-right: auto;
  99   margin-left: auto;
 100 }
 101
 102 .btn-register {
 103   margin-top: 0.5em;
 104   margin-bottom: 0.3em;
 105   color: #ffffff;
 106   text-shadow: 0px 0px 0px #ffffff;
 107   background-color: rgba(58, 208, 61, 0.6);
 108   background-color: rgba(58, 208, 61, 0.6);
 109   text-decoration: none;
 110 }
 111
 112 .btn-register:hover,
 113 .btn-register:focus,
 114 .btn-register:active,
 115 .btn-register.active,
 116 .open .dropdown-toggle.btn-register {
 117   color: #ffffff;
 118   background-color: rgba(74, 161, 74, 0.9);
 119   border-color: rgba(57, 132, 57, 0.2);
 120 }
 121
 122 .btn-register:active,
 123 .btn-register.active,
 124 .open .dropdown-toggle.btn-register {
 125   background-image: none;
 126 }
 127
 128 .page-header {
 129   padding-bottom: 9px;
 130   margin: 40px 0 20px;
 131   border-bottom: none;
 132 }
 133
 134 @media (max-width:551px) {
 135   .lp-head p {
 136     margin: 0 0 0.2em 0;
 137     text-align: center;
 138   }
 139   .lp-head img {
 140     margin: 1.5em auto 0.5em auto;
 141   }
 142
 143   #lp-panel {
 144     max-width: 100%;
 145     margin-left: 0;
 146     float: none;
 147   }
 148
 149 }
 150
 151 @media (min-width: 552px) and (max-width:767px) {
 152
 153   .lp-head img {
 154     margin: 1.5em auto 0.5em auto;
 155   }
 156   .lp-head p {
 157     margin: 0.27em 0 0.001em -3.6em;
 158   }
 159
 160   #lp-panel {
 161     max-width: 100%;
 162     margin-left: 0;
 163     float: none;
 164   }
 165
 166   #lp-updates {
 167     max-width: 100%;
 168     margin-left: 0;
 169   }
 170 }
 171
 172 .lp-thumbnail {
 173   float: right;
 174   margin-left: 0.5em;
 175 }
 176
 177
 178 @media (max-width: 635px) {
 179   .lp-thumbnail {
 180     float: none;
 181     margin-left: 0;
 182   }
 183 }
 184
 185
 186 @media (min-width: 768px) and (max-width:991px) {
 187   .lp-head img {
 188     margin-top: 1.0em;
 189   }
 190   .lp-head p {
 191     margin: -0.45em 0 0.001em -3.6em;
 192   }
 193 }
 194
 195 @media (min-width:1200px) {
 196   .lp-head p {
 197     margin: -0.79em 0 0.001em -7em;
 198   }
 199 }
 200
 201 @media (min-width:1280px) {
 202   .btn-block {
 203     display: block;
 204     margin-right:auto;
 205     margin-left:auto;
 206     width: 85%;
 207     padding-right: 0;
 208     padding-left: 0;
 209   }
 210 }
 211
 212
 213 .fsf-donate-button {
 214   margin-left: 24%;
 215   margin-top: 5px;
 216   margin-bottom: 10px;
 217   width:56%;
 218 }
 219
 220 @media (max-width:768px) {
 221   .fsf-donate-button {
 222     margin-left: 38%;
 223     margin-top: 5px;
 224     margin-bottom: 10px;
 225     width:22%;
 226   }
 227 }
 228
 229 @media (min-width:320px) and (max-width:360px) {
 230   .fsf-donate-button {
 231     margin-left: 28%;
 232     margin-top: 5px;
 233     margin-bottom: 10px;
 234     width:46%;
 235   }
 236 }
 237
 238 .form-control:-moz-placeholder {
 239   color: #777777;
 240 }
 241
 242 .form-control::-moz-placeholder {
 243   color: #777777;
 244 }
 245
 246 .form-control:-ms-input-placeholder {
 247   color: #777777;
 248 }
 249
 250 .form-control::-webkit-input-placeholder {
 251   color: #777777;
 252 }
 253
 254 .form-control {
 255   display: block;
 256   width: 100%;
 257   height: 34px;
 258   padding: 6px 12px;
 259   font-size: 14px;
 260   line-height: 1.428571429;
 261   color: #555555;
 262   vertical-align: middle;
 263   background-color: rgba(250, 250, 250, 0.7);
 264   border: 1px solid #cccccc;
 265   border-radius: 4px;
 266   -webkit-box-shadow: none;
 267   box-shadow: none;
 268   -webkit-transition: border-color ease-in-out 0.15s;
 269   transition: border-color ease-in-out 0.15s;
 270 }
 271
 272 .form-control:focus {
 273   border-color: rgb(88, 208, 121);
 274   outline: 0;
 275   -webkit-box-shadow: none;
 276   box-shadow: none;
 277 }
 278
 279 .scholarship-input-annotation {
 280   margin-bottom: -0.6em;
 281 }
 282
 283 .lp-signup .form-group {
 284   margin-bottom: 2px;
 285 }
 286
 287 .lp-label-news {
 288   display: inline-block;
 289 }
 290
 291 .checkbox .help-block {
 292   display: inline-block;
 293   margin-top: 0;
 294   margin-bottom: 10px;
 295   color: #737373;
 296 }
 297
 298 .form-group .lp-left-form-checkbox-text {
 299   text-align:right;
 300   font-weight: bold;
 301 }
 302
 303 @media screen and (min-width: 320px) and (max-width: 768px){
 304   .form-group .lp-left-form-checkbox-text {
 305     text-align: left;
 306     font-weight: bold;
 307   }
 308 }
 309
 310 .field-required {
 311   color: rgba(128, 0, 0, 0.6);
 312 }
 313
 314 .radio-inline,
 315 .checkbox-inline {
 316   display: inline-block;
 317   padding-left: 30px;
 318   margin-bottom: 0;
 319   font-weight: normal;
 320   vertical-align: middle;
 321   cursor: pointer;
 322 }
 323
 324 .radio-clear-link {
 325   display: inline-block;
 326   padding-left: 5px;
 327   margin-bottom: 0;
 328   margin-top: 5px;
 329   font-weight: normal;
 330   vertical-align: middle;
 331   cursor: pointer;
 332 }
 333
 334 .btn-default {
 335   color: #ffffff;
 336   background-color: rgba(88, 208, 121, 0.8);
 337   border-color: rgba(88, 208, 121, 0.5);
 338 }
 339
 340 .btn-default:hover,
 341 .btn-default:focus,
 342 .btn-default:active,
 343 .btn-default.active,
 344 .open .dropdown-toggle.btn-default {
 345   color: #ffffff;
 346   background-color: rgba(88, 208, 121, 1.0);
 347   border-color: rgba(88, 208, 121, 0.2);
 348 }
 349
 350 .lp-home a {
 351   text-decoration: none;
 352 }
 353
 354 @media (min-width:768px) {
 355   .nav {
 356     padding-left: 0;
 357     margin-bottom: 0;
 358     list-style: none;
 359     padding-top: 1.0em;
 360   }
 361   .lp-home {
 362     padding-top: 2.0em;
 363     padding-bottom: 1.0em;
 364   }
 365   .nav-padding-top {
 366     margin-top: 4.12em;
 367   }
 368 }
 369
 370 .nav > li {
 371   position: relative;
 372   display: block;
 373   color: #ffffff;
 374   text-shadow: 0px 0px 0px #dadada;
 375   text-align: center;
 376   margin-bottom: 0.4em;
 377   border: none;
 378   border-radius: 5px;
 379 }
 380
 381 .nav > li > a {
 382   position: relative;
 383   display: block;
 384   padding: 10px 15px;
 385   text-decoration: none;
 386   background-color: rgba(145, 145, 145, 0.8);
 387   transition: background-color 1s;
 388 }
 389
 390 .nav > li.fsf-donate > a {
 391   background-color: rgba(58, 208, 61, 0.6);
 392   margin-top: 20px;
 393 }
 394
 395 .nav > li > a:hover,
 396 .nav > li > a:focus {
 397   background-color: rgba(88, 208, 121, 1.0);
 398 }
 399
 400 .nav-pills > li > a {
 401   border-radius: 5px;
 402   color: inherit;
 403 }
 404
 405 .nav-pills > li.active > a,
 406 .nav-pills > li.active > a:hover,
 407 .nav-pills > li.active > a:focus {
 408   color: #ffffff;
 409   background-color: rgba(88, 208, 121, 1.0);
 410 }
 411
 412 .btn-carousel {
 413   font-size: 1.15em;
 414   font-weight: 100;
 415 }
 416
 417 .carousel-control .icon-prev,
 418 .carousel-control .icon-next,
 419 .carousel-control .glyphicon-chevron-left,
 420 .carousel-control .glyphicon-chevron-right {
 421   position: absolute;
 422   top: 50%;
 423   left: 50%;
 424   z-index: 5;
 425   display: none;
 426 }
 427
 428 .carousel-caption-tr {
 429   position: absolute;
 430   font-size: 1.1em;
 431   top: 5%;
 432   bottom: auto;
 433   right: 1.5%;
 434   left: 38%;
 435   z-index: 10;
 436   padding-top: 10px;
 437   padding-bottom: 10px;
 438   color: #ffffff;
 439   text-align: center;
 440   background-color: rgba(0, 0, 0,0.6);
 441   border-radius: 8px;
 442 }
 443
 444 .carousel-caption-bl {
 445   position: absolute;
 446   font-size: 1.1em;
 447   top: auto;
 448   bottom: 5%;
 449   right: 45%;
 450   left: 2%;
 451   z-index: 10;
 452   padding-top: 10px;
 453   padding-bottom: 10px;
 454   padding-left: 10px;
 455   padding-right: 10px;
 456   color: #ffffff;
 457   text-align: center;
 458   background-color: rgba(0, 0, 0,0.6);
 459   border-radius: 8px;
 460 }
 461
 462 .carousel-caption-tl {
 463   position: absolute;
 464   font-size: 1.1em;
 465   top: 5%;
 466   bottom: auto;
 467   right: 34%;
 468   left: 2%;
 469   z-index: 10;
 470   padding-top: 10px;
 471   padding-bottom: 10px;
 472   color: #ffffff;
 473   text-align: center;
 474   background-color: rgba(0, 0, 0,0.6);
 475   border-radius: 8px;
 476 }
 477
 478 .carousel-caption-center {
 479   position: absolute;
 480   font-size: 1.1em;
 481   top: 50%;
 482   bottom: auto;
 483   right: auto;
 484   left: 35%;
 485   z-index: 10;
 486   padding-right: 10px;
 487   padding-left: 10px;
 488   padding-top: 10px;
 489   padding-bottom: 10px;
 490   color: #ffffff;
 491   text-align: center;
 492   background-color: rgba(0, 0, 0,0.6);
 493   border-radius: 8px;
 494 }
 495
 496 @media screen and (min-width: 1280px) {
 497   .carousel-caption-tr {
 498     padding-bottom: 10px;
 499     margin-left: 65px;
 500     margin-right: auto;
 501   }
 502
 503   .carousel-caption-bl {
 504     padding-bottom: 10px;
 505     margin-left: auto;
 506     margin-right: 65px;
 507   }
 508
 509 }
 510
 511 @media screen and (min-width: 600px) and (max-width: 980px){
 512   .btn-carousel {
 513     font-size: 0.9em;
 514     font-weight: 200;
 515   }
 516 }
 517
 518 @media screen and (min-width: 320px) and (max-width: 480px){
 519   .carousel-caption-tl {
 520     right: 2%;
 521   }
 522
 523   .btn-carousel {
 524     font-size: 0.85em;
 525     font-weight: 200;
 526   }
 527   .carousel-caption-tr {
 528     left: 1%;
 529   }
 530 }
 531
 532 .margin-top {
 533   margin-top: 22px;
 534 }
 535
 536 .speaker-bio {
 537   vertical-align:top;
 538   margin-bottom: 3em;
 539 }
 540
 541 .speaker-bio h3 {
 542   margin-top: 0px;
 543 }
 544
 545 .session {
 546   margin-bottom: 40px;
 547 }
 548
 549 .session h4 {
 550   margin-bottom: 0px;
 551 }
 552
 553 .session-speaker {
 554   line-height: 3em;
 555 }
 556
 557 .speaker-photo {
 558   padding-top:23px;
 559   padding-right:15px;
 560 }
 561
 562 .session-details {
 563   margin-left:15%;
 564 }
 565
 566 .lp-video {
 567   width: 100%;
 568 }
 569
 570 .word-break {
 571   word-break: break-all;
 572 }
 573
 574 /* Footer - adapted from <http://getbootstrap.com/examples/sticky-footer/>
 575 -------------------------------------------------- */
 576
 577 html,
 578 body {
 579   height: 100%;
 580 }
 581
 582 #wrapper {
 583   min-height: 100%;
 584   height: auto !important;
 585   height: 100%;
 586   margin: 0 auto -60px;
 587   padding: 0 0 60px;
 588 }
 589
 590 #footer {
 591   height: auto;
 592   border-top: 2px solid #dadada;
 593   box-shadow: 0px 1px 9px rgba(255, 255, 255, 0.7);
 594   background-color: rgb(255, 255, 255);
 595   margin-top: 1.5em;
 596 }
 597
 598 #footer .container p {
 599   margin: 1.4em 0;
 600 }