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