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