github.com/dougm/docker@v1.5.0/docs/theme/mkdocs/css/main.css (about) 1 /* some core mixins*/ 2 /* core shared with other docker projects */ 3 /* ****************************** 4 Core Docker style file 5 6 used on 7 www.docker.com 8 docker-index 9 ****************************** */ 10 /* this is about 10% darker, but slightly different */ 11 .debug { 12 border: 2px dotted red !important; 13 } 14 .debugbg { 15 background-color: rgba(255, 207, 139, 0.5) !important; 16 } 17 .highlight1 { 18 color: green !important; 19 } 20 .highlight2 { 21 color: red !important; 22 } 23 body { 24 margin: 0; 25 color: #394d54; 26 background-color: #fff; 27 } 28 .content { 29 padding-top: 20px; 30 } 31 h1, 32 h2, 33 h3, 34 h4, 35 h5, 36 h6 { 37 font-size: 18px; 38 font-weight: 400; 39 color: #394d54; 40 line-height: 1; 41 line-height: 1.4; 42 } 43 h4, 44 h5, 45 h6 { 46 font-size: 16px; 47 } 48 p { 49 margin: 0 0 1em 0; 50 font-size: 14px; 51 font-weight: 400; 52 color: #394d54; 53 line-height: 1.7; 54 } 55 p strong { 56 font-size: 14px; 57 font-weight: 500; 58 color: #394d54; 59 line-height: 1.7; 60 } 61 p a { 62 text-decoration: underline; 63 } 64 p a.btn { 65 text-decoration: none; 66 } 67 .time { 68 font-size: 14px; 69 font-weight: 400; 70 color: #949da7; 71 } 72 span.read-more { 73 margin-left: 15px; 74 white-space: nowrap; 75 } 76 div[class*='span'] { 77 -moz-box-sizing: border-box; 78 box-sizing: border-box; 79 } 80 .borderRadiusCode { 81 border-radius: 4px; 82 -webkit-border-radius: 4px; 83 -moz-border-radius: 4px; 84 } 85 .box { 86 padding: 18px; 87 margin-bottom: 20px; 88 border: 1px solid #dbdde0; 89 border-radius: 4px; 90 -webkit-border-radius: 4px; 91 -moz-border-radius: 4px; 92 } 93 .box h1, 94 .box h2, 95 .box h3, 96 .box h4 { 97 font-weight: 700; 98 font-size: 18px; 99 line-height: 18px; 100 margin: 0 0 10px 0; 101 } 102 .tbox.full { 103 margin: -18px; 104 } 105 .fleft { 106 position: relative; 107 float: left; 108 } 109 .fright { 110 position: relative; 111 float: right; 112 } 113 .nested { 114 padding: 18px; 115 margin-left: 0px; 116 } 117 .paper { 118 background-color: white; 119 padding-top: 30px; 120 padding-bottom: 30px; 121 } 122 .float-left { 123 float: left; 124 margin-right: 15px; 125 margin-bottom: 15px; 126 } 127 .float-right { 128 float: right; 129 margin-left: 15px; 130 margin-bottom: 15px; 131 } 132 .textcenter { 133 text-align: center; 134 } 135 .textright { 136 text-align: right; 137 } 138 .textsmaller { 139 font-size: 13px; 140 } 141 .modal-backdrop { 142 opacity: 0.4; 143 } 144 .placeholder-empty { 145 width: 100%; 146 color: grey; 147 min-height: 100px; 148 font-size: larger; 149 display: -webkit-flex; 150 display: -moz-flex; 151 display: flex; 152 -webkit-flex-flow: row; 153 flex-flow: row; 154 -webkit-align-items: center; 155 align-items: center; 156 -webkit-justify-content: center; 157 justify-content: center; 158 } 159 .span4andahalf { 160 width: 340px !important; 161 } 162 code { 163 white-space: pre-line; 164 } 165 .btn { 166 padding: 6px 15px; 167 line-height: 1.7; 168 } 169 .btn-primary, 170 .btn-danger { 171 padding: 6px 15px; 172 -webkit-border-radius: 4px; 173 -moz-border-radius: 4px; 174 border-radius: 4px; 175 background-color: #008bb8; 176 font-size: 14px; 177 font-weight: 400; 178 color: #fff; 179 box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16); 180 } 181 .btn-primary:hover, 182 .btn-danger:hover, 183 .btn-primary:active, 184 .btn-danger:active, 185 .btn-primary:focus, 186 .btn-danger:focus { 187 background-color: #24b8eb; 188 } 189 .btn-primary.disabled, 190 .btn-danger.disabled { 191 background-color: #676668; 192 } 193 .btn-danger { 194 background-color: #b74b4b !important; 195 } 196 .btn-danger:hover, 197 .btn-danger:active, 198 .btn-danger:focus { 199 background-color: #edd3d7 !important; 200 } 201 .btn-mini { 202 padding: 1px 7px !important; 203 font-size: 13px !important; 204 } 205 .nav-button1 { 206 padding: 5px 24px; 207 -webkit-border-radius: 4px; 208 -moz-border-radius: 4px; 209 border-radius: 4px; 210 background-color: #ff8100; 211 font-size: 14px; 212 font-weight: 700; 213 color: #fff; 214 } 215 .nav-button1:hover, 216 .nav-button1:active, 217 .nav-button1:focus { 218 background-color: #ffa141; 219 } 220 .btn.nav-button2 { 221 border: 1px solid #253237 !important; 222 padding: 5px 24px; 223 -webkit-border-radius: 4px; 224 -moz-border-radius: 4px; 225 border-radius: 4px; 226 background-color: #fff; 227 font-size: 14px; 228 font-weight: 700; 229 color: #253237; 230 } 231 .btn.nav-button2:hover, 232 .btn.nav-button2:active, 233 .btn.nav-button2:focus { 234 border-color: #24b8eb !important; 235 font-size: 14px; 236 font-weight: 700; 237 color: #24b8eb; 238 } 239 .primary-cta-button1 { 240 padding: 9px 24px; 241 -webkit-border-radius: 4px; 242 -moz-border-radius: 4px; 243 border-radius: 4px; 244 background-color: #ff8100; 245 font-size: 18px; 246 font-weight: 700; 247 color: #fff; 248 } 249 .primary-cta-button1:hover, 250 .primary-cta-button1:active, 251 .primary-cta-button1:focus { 252 background-color: #ffa141; 253 } 254 .primary-cta-button2 { 255 padding: 9px 24px; 256 -webkit-border-radius: 4px; 257 -moz-border-radius: 4px; 258 border-radius: 4px; 259 background-color: #005976; 260 font-size: 18px; 261 font-weight: 700; 262 color: #fff; 263 } 264 .primary-cta-button2:hover, 265 .primary-cta-button2:active, 266 .primary-cta-button2:focus { 267 background-color: #24b8eb; 268 } 269 .btn, 270 .btn-group { 271 border: none; 272 border-radius: 4px; 273 -webkit-border-radius: 4px; 274 -moz-border-radius: 4px; 275 } 276 .btn:hover, 277 .btn-group:hover, 278 .btn:active, 279 .btn-group:active, 280 .btn:focus, 281 .btn-group:focus { 282 color: #fff; 283 } 284 .add-repository .docker-caret { 285 display: inline-block; 286 background-color: yellow; 287 width: 15px; 288 height: 15px; 289 background: url("../img/dashboard/caret-down-create-new-icon.svg") no-repeat 70% 86%; 290 } 291 .add-repository .btn.open { 292 background-color: #005976; 293 } 294 /* ======================= 295 Sticky footer 296 ======================= */ 297 html, 298 body { 299 height: 100%; 300 /* The html and body elements cannot have any padding or margin. */ 301 } 302 /* Wrapper for page content to push down footer */ 303 #wrap { 304 /* Negative indent footer by it's height */ 305 margin: 0 auto -379px; 306 } 307 /* Set the fixed height of the footer here */ 308 #push-footer, 309 #footer { 310 height: 379px; 311 background: #253237; 312 } 313 #footer { 314 padding-top: 36px; 315 -moz-box-sizing: border-box; 316 box-sizing: border-box; 317 /* Social */ 318 } 319 #footer .copyright { 320 margin-top: 40px; 321 } 322 #footer .primary-button:hover { 323 color: #eeeeee; 324 text-decoration: none; 325 } 326 #footer ul { 327 margin-top: 0px; 328 } 329 #footer form { 330 display: inline-block; 331 width: 220px; 332 } 333 #footer .search span { 334 margin-bottom: 5px; 335 display: block; 336 } 337 #footer .search label { 338 display: none; 339 } 340 #footer .search ul { 341 display: none; 342 } 343 #footer .search form input { 344 background: #253237; 345 border-color: #ade5f9; 346 width: 220px; 347 height: 37px; 348 margin: 0px 0px 12px 0px !important; 349 } 350 #footer .search form button { 351 position: absolute; 352 display: block; 353 margin: -44px 220px; 354 background: none !important; 355 border: none; 356 outline: none; 357 color: #999999; 358 } 359 #footer .search form button:hover { 360 color: #eeeeee !important; 361 } 362 #footer a { 363 color: #949da7; 364 } 365 #footer a:hover { 366 text-decoration: none; 367 color: #eeeeee; 368 } 369 #footer .social { 370 width: 100px; 371 float: left; 372 } 373 #footer .social li a { 374 padding-left: 28px; 375 } 376 #footer .social li span { 377 float: left; 378 width: 24px; 379 height: 25px; 380 position: absolute; 381 margin: 1px 0px 2px -28px; 382 } 383 #footer .social .blog { 384 background: url(../img/footer/docker-blog-24.png) no-repeat; 385 background-position: 0px -3px; 386 } 387 #footer .social .twitter { 388 background: url(../img/footer/twitter-24.png) no-repeat; 389 background-position: 0px -3px; 390 } 391 #footer .social .googleplus { 392 background: url(../img/footer/googleplus-24.png) no-repeat; 393 background-position: 0px -3px; 394 } 395 #footer .social .facebook { 396 background: url(../img/footer/facebook-24.png) no-repeat; 397 background-position: 0px -3px; 398 } 399 #footer .social .youtube { 400 background: url(../img/footer/youtube-24.png) no-repeat; 401 background-position: 0px -3px; 402 } 403 #footer .social .slideshare { 404 background: url(../img/footer/slideshare-24.png) no-repeat; 405 background-position: 0px -3px; 406 } 407 #footer .social .linkedin { 408 background: url(../img/footer/sprites-small_360.png) no-repeat; 409 background-position: -168px -3px; 410 } 411 #footer .social .github { 412 background: url(../img/footer/sprites-small_360.png) no-repeat; 413 background-position: -48px -3px; 414 } 415 #footer .social .reddit { 416 background: url(../img/footer/sprites-small_360.png) no-repeat; 417 background-position: -192px -3px; 418 } 419 #footer .social .angellist { 420 background: url(../img/footer/angellist-white.svg) no-repeat; 421 background-position: 5px; 422 height: 20px; 423 } 424 /* Social Links */ 425 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 426 #footer .social .blog { 427 background: url(../img/footer/docker-blog-48.png) no-repeat; 428 background-size: 24px; 429 background-position: 0px -3px; 430 } 431 #footer .social .twitter { 432 background: url(../img/footer/twitter-48.png) no-repeat; 433 background-size: 24px; 434 background-position: 0px -3px; 435 } 436 #footer .social .googleplus { 437 background: url(../img/footer/googleplus-48.png) no-repeat; 438 background-size: 24px; 439 background-position: 0px -3px; 440 } 441 #footer .social .facebook { 442 background: url(../img/footer/facebook-48.png) no-repeat; 443 background-size: 24px; 444 background-position: 0px -3px; 445 } 446 #footer .social .youtube { 447 background: url(../img/footer/youtube-48.png) no-repeat; 448 background-size: 24px; 449 background-position: 0px -3px; 450 } 451 #footer .social .slideshare { 452 background: url(../img/footer/slideshare-48.png) no-repeat; 453 background-size: 24px; 454 background-position: 0px -3px; 455 } 456 } 457 label { 458 font-size: 14px; 459 font-weight: 700; 460 color: #253237; 461 } 462 input[type="text"], 463 input[type="password"], 464 input[type="url"], 465 input[type="email"], 466 textarea, 467 select, 468 .bootstrap-select button { 469 width: 530px; 470 padding: 0 14px; 471 line-height: 11.7px; 472 height: 11.7px; 473 font-size: 14px; 474 font-weight: 400; 475 color: #394d54; 476 line-height: 1.7; 477 border: 1px solid #cccccc; 478 -webkit-border-radius: 4px; 479 -moz-border-radius: 4px; 480 border-radius: 4px; 481 } 482 input[type="text"][disabled], 483 input[type="password"][disabled], 484 input[type="url"][disabled], 485 input[type="email"][disabled], 486 textarea[disabled], 487 select[disabled], 488 .bootstrap-select button[disabled] { 489 font-size: 14px; 490 font-weight: 400; 491 color: #949da7; 492 background-color: #eeeeee; 493 } 494 input[type="text"]:invalid, 495 input[type="password"]:invalid, 496 input[type="url"]:invalid, 497 input[type="email"]:invalid, 498 textarea:invalid, 499 select:invalid, 500 .bootstrap-select button:invalid { 501 font-size: 14px; 502 font-weight: 400; 503 color: #b74b4b; 504 line-height: 1.7; 505 border-color: #b74b4b; 506 background-color: #edd3d7; 507 } 508 textarea { 509 padding: 12px 14px; 510 height: 100px; 511 line-height: 1.7; 512 } 513 .bootstrap-select button { 514 height: 13.7px; 515 background-color: #ffffff; 516 } 517 .bootstrap-select button:active, 518 .bootstrap-select button:focus, 519 .bootstrap-select button:hover { 520 background-color: #ffffff; 521 } 522 .bootstrap-select .dropdown-menu { 523 margin-top: 0; 524 } 525 .btn-group.open .btn.dropdown-toggle { 526 background-color: #ffffff; 527 } 528 .dropdown-menu > li > a:hover, 529 .dropdown-menu > li > a:focus, 530 .dropdown-menu > li > a:active { 531 background-color: #ffffff; 532 color: #24b8eb; 533 outline: none; 534 } 535 .input-append .add-on, 536 .input-prepend .add-on { 537 border: none; 538 background-color: #f2f2f2; 539 line-height: 6.7px; 540 height: 6.7px; 541 } 542 .control-group.error label { 543 font-size: 14px; 544 font-weight: 400; 545 color: #b74b4b; 546 line-height: 1.7; 547 } 548 .control-group.success label { 549 font-size: 14px; 550 font-weight: 700; 551 color: #91c5c5; 552 line-height: 1.7; 553 } 554 .control-group.success input[type="text"], 555 .control-group.success input[type="password"] { 556 background: url("../img/icons/check-mark-green.svg") no-repeat 95% 50%; 557 } 558 input[type="submit"] { 559 line-height: 1.7; 560 border: none; 561 padding: 6px 15px; 562 -webkit-border-radius: 4px; 563 -moz-border-radius: 4px; 564 border-radius: 4px; 565 background-color: #008bb8; 566 font-size: 14px; 567 font-weight: 400; 568 color: #fff; 569 box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.16); 570 } 571 input[type="submit"]:hover, 572 input[type="submit"]:active, 573 input[type="submit"]:focus { 574 color: #fff; 575 } 576 input[type="submit"]:hover, 577 input[type="submit"]:active, 578 input[type="submit"]:focus { 579 background-color: #24b8eb; 580 } 581 input[type="submit"].disabled { 582 background-color: #676668; 583 } 584 input[type="radio"], 585 input[type="checkbox"] { 586 margin: 0 0.5em 0 0; 587 position: relative; 588 vertical-align: middle; 589 bottom: 1px; 590 } 591 input[type="reset"] { 592 font-size: 14px; 593 font-weight: 400; 594 color: #005976; 595 border: none; 596 background-color: #fff; 597 } 598 input[type="reset"]:hover { 599 font-size: 14px; 600 font-weight: 400; 601 color: #24b8eb; 602 } 603 .input-prepend .btn-group .dropdown-toggle { 604 font-size: 15px; 605 font-weight: 400; 606 color: #394d54; 607 background-image: url("../img/caret-down-user-icon.svg"); 608 } 609 .btn-group.open .btn-primary.dropdown-toggle { 610 background-color: #24b8eb; 611 } 612 .alert { 613 padding: 8px 14px 8px 14px; 614 border: none; 615 /* &.alert-block { 616 line-height: 46px !important; 617 padding: 0 14px; 618 width: 532px; 619 .border-radius; 620 }*/ 621 } 622 .alert ul { 623 margin-top: 0; 624 } 625 .alert.alert-error { 626 font-size: 14px; 627 font-weight: 400; 628 color: #b74b4b; 629 line-height: 1.7; 630 background-color: #edd3d7; 631 -webkit-border-radius: 4px; 632 -moz-border-radius: 4px; 633 border-radius: 4px; 634 } 635 .alert.alert-error a { 636 font-size: 14px; 637 font-weight: 700; 638 color: #b74b4b; 639 line-height: 1.7; 640 } 641 .alert.alert-info { 642 font-size: 14px; 643 font-weight: 400; 644 color: #24b8eb; 645 line-height: 1.7; 646 background-color: #d3f1fb; 647 -webkit-border-radius: 4px; 648 -moz-border-radius: 4px; 649 border-radius: 4px; 650 } 651 .alert.alert-info a { 652 font-size: 14px; 653 font-weight: 700; 654 color: #005976; 655 line-height: 1.7; 656 } 657 .alert.alert-success { 658 font-size: 14px; 659 font-weight: 400; 660 color: #91c5c5; 661 line-height: 1.7; 662 background-color: #e0f0d9; 663 -webkit-border-radius: 4px; 664 -moz-border-radius: 4px; 665 border-radius: 4px; 666 } 667 .alert.alert-success a { 668 font-size: 14px; 669 font-weight: 700; 670 color: #91c5c5; 671 line-height: 1.7; 672 } 673 form dl { 674 margin: 0; 675 } 676 form dd { 677 margin: 0; 678 } 679 form dd.helptext { 680 margin-top: 3px; 681 } 682 form dd.helptext + dd { 683 margin-top: 22px; 684 } 685 form dt { 686 margin: 32px 0 8px 0; 687 } 688 form dt:first-child { 689 margin-top: 0; 690 } 691 form dt .error { 692 display: inline-block; 693 margin-bottom: 12px; 694 border-color: #b74b4b; 695 font-size: 14px; 696 font-weight: 400; 697 color: #b74b4b; 698 line-height: 1.7; 699 -webkit-border-radius: 4px; 700 -moz-border-radius: 4px; 701 border-radius: 4px; 702 } 703 form dt .error a { 704 font-size: 14px; 705 font-weight: 700; 706 color: #b74b4b; 707 line-height: 1.7; 708 } 709 .form-inline label { 710 margin: 0 15px 0 0; 711 } 712 .form-inline input[type="text"], 713 .form-inline input[type="password"], 714 .form-inline input[type="url"], 715 .form-inline input[type="email"], 716 .form-inline textarea { 717 width: 360px; 718 margin: 0 15px 0 0; 719 } 720 .form-inline input[type="submit"] { 721 margin: 0; 722 } 723 .form-inline select { 724 height: 11.7px; 725 } 726 div + .form-inline { 727 margin-top: 20px; 728 } 729 .form-inline + hr { 730 margin-top: 20px; 731 } 732 #stickynav .navbar-inner { 733 background-color: #3a4855; 734 border: none; 735 height: 30px; 736 min-height: 30px; 737 color: white; 738 text-align: right; 739 } 740 #stickynav .nav li a { 741 padding: 5px 14px; 742 color: #eeeeee; 743 } 744 #topmostnav { 745 border-bottom: 1px solid #dbdde0; 746 } 747 #topmostnav li a { 748 font-size: 14px; 749 font-weight: 700; 750 color: #253237; 751 line-height: 55px; 752 padding: 0 20px; 753 } 754 #topmostnav li a:hover { 755 font-size: 14px; 756 font-weight: 700; 757 color: #24b8eb; 758 } 759 #topmostnav li.active a { 760 background-color: #E8E8E8; 761 } 762 #topmostnav .brand { 763 margin: 8px 20px 0 8px; 764 padding: 0; 765 } 766 #topmostnav .navbar-index-search { 767 position: relative; 768 float: left; 769 margin: 13px 20px 0 0; 770 /* firefox 18- */ 771 /* firefox 19+ */ 772 /* ie */ 773 } 774 #topmostnav .navbar-index-search ::-webkit-input-placeholder { 775 padding-top: 0; 776 } 777 #topmostnav .navbar-index-search :-moz-placeholder { 778 padding-top: 0; 779 } 780 #topmostnav .navbar-index-search ::-moz-placeholder { 781 padding-top: 0; 782 } 783 #topmostnav .navbar-index-search :-ms-input-placeholder { 784 padding-top: 0; 785 } 786 #topmostnav .navbar-index-search input[type="text"] { 787 height: 27px; 788 margin-top: 0; 789 font-size: 14px; 790 font-weight: 400; 791 color: #949da7; 792 background: #ffffff url("../img/nav/search-icon.svg") no-repeat 95% 50%; 793 border-color: #dbdde0; 794 border-radius: 0; 795 } 796 #topmostnav .navbar-index-search .search-query { 797 -webkit-transition: box-shadow linear 0.2s, background linear 0.3s, width linear 0.3s; 798 -moz-transition: box-shadow linear 0.2s, background linear 0.3s, width linear 0.3s; 799 -ms-transition: box-shadow linear 0.2s, background linear 0.3s, width linear 0.3s; 800 -o-transition: box-shadow linear 0.2s, background linear 0.3s, width linear 0.3s; 801 transition: box-shadow linear 0.2s, background linear 0.3s, width linear 0.3s; 802 width: 140px; 803 } 804 #topmostnav.public { 805 border-bottom: none; 806 height: 80px; 807 } 808 #topmostnav.public .nav { 809 margin-right: 0; 810 } 811 #topmostnav.public li a { 812 line-height: 80px; 813 padding: 0 15px; 814 } 815 #topmostnav.public li.active a { 816 background-color: #E8E8E8; 817 } 818 #topmostnav.public #usernav .btn { 819 margin: 24px 0 0 13px; 820 } 821 #topmostnav.public .brand { 822 padding-left: 10px; 823 margin: 18px 15px 0 0; 824 } 825 .brand.logo a { 826 text-decoration: none; 827 } 828 .brand.logo a { 829 text-decoration: none; 830 } 831 .navbar .navbar-inner { 832 padding-right: 0px; 833 padding-left: 0px; 834 } 835 .navbar .brand { 836 margin-left: 0px; 837 float: left; 838 display: block; 839 } 840 .navbar .brand.logo { 841 padding-top: 0; 842 padding-bottom: 0; 843 } 844 .navbar .nav li a { 845 padding: 0; 846 } 847 .nav-underline { 848 height: 6px; 849 background-color: #71afc0; 850 } 851 .nav-login li a { 852 color: white; 853 padding: 10px 15px 10px; 854 } 855 .inline-icon { 856 margin-bottom: 6px; 857 } 858 .float-left { 859 float: left; 860 margin-right: 15px; 861 margin-bottom: 15px; 862 } 863 .float-right { 864 float: right; 865 margin-left: 15px; 866 margin-bottom: 15px; 867 } 868 .navbar #usernav .nav img { 869 margin-right: 8px; 870 } 871 .navbar #usernav .nav li { 872 padding-top: 15px; 873 } 874 .navbar #usernav .nav li a, 875 #versionnav .nav li a.dropdown-toggle { 876 font-size: 14px; 877 font-weight: 400; 878 color: #394d54; 879 line-height: 1.7; 880 line-height: 30px; 881 padding: 0 20px 0 0; 882 background: url("../img/nav/caret-down-user-icon.svg") no-repeat 100% 50%; 883 } 884 .navbar #usernav .nav li a:hover, 885 #versionnav .nav li a.dropdown-toggle:hover { 886 background-image: url("../img/nav/caret-down-user-icon-over.svg"); 887 } 888 .navbar #usernav .nav li ul li, 889 #versionnav .version { 890 padding: 0; 891 margin: 0; 892 height: 28px; 893 } 894 .navbar #usernav .nav li ul li a { 895 padding: 0 0 0 12px; 896 background-image: none; 897 line-height: 28px; 898 } 899 .navbar #usernav .nav li ul li a:hover { 900 background-image: none; 901 } 902 .navbar-index-search input[type="text"] { 903 background-color: #fff; 904 border-color: #dbdde0; 905 } 906 /* 907 #usernav > a { 908 padding: 0 20px 0 0; 909 background: url(../img/caret-down-user-icon.svg) no-repeat 100% 50%; 910 } 911 #usernav > a:hover { 912 background-image: url(../img/caret-down-user-icon-over.svg); 913 } 914 */ 915 #leftnav ul a { 916 padding: 0 0 0 19px; 917 font-size: 14px; 918 font-weight: 400; 919 color: #005976; 920 } 921 #leftnav ul a:hover { 922 font-size: 14px; 923 font-weight: 400; 924 color: #24b8eb; 925 text-decoration: none; 926 } 927 #leftnav div:first-child { 928 border: 1px solid #dbdde0; 929 margin-bottom: 22px; 930 } 931 #leftnav .nav { 932 margin: 0, 0, 20px, 0; 933 } 934 #leftnav .nav > li > a { 935 line-height: 22px; 936 font-size: 16px; 937 font-weight: 500; 938 color: #005976; 939 } 940 #leftnav .nav > li > a:hover { 941 font-size: 16px; 942 font-weight: 500; 943 color: #24b8eb; 944 text-decoration: none; 945 background-color: inherit; 946 } 947 #leftnav .nav.nav-tabs > li > a.dropdown-toggle, 948 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a { 949 background: url("../img/nav/caret-down-subnav-icon.svg") no-repeat 90% 50%; 950 font-size: 16px; 951 font-weight: 500; 952 color: #949da7; 953 line-height: 69px ; 954 height: 69px; 955 } 956 #leftnav .nav.nav-tabs > li > a.dropdown-toggle img, 957 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a img { 958 margin-right: 11px; 959 } 960 #leftnav .nav.nav-tabs > li > a.dropdown-toggle img.profile, 961 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a img.profile { 962 -webkit-border-radius: 20px; 963 -moz-border-radius: 20px; 964 border-radius: 20px; 965 } 966 #leftnav .nav.nav-tabs > li > a.dropdown-toggle:hover, 967 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a:hover { 968 font-size: 16px; 969 font-weight: 500; 970 color: #24b8eb; 971 text-decoration: none; 972 } 973 #leftnav .nav.nav-tabs > li > a.dropdown-toggle:focus, 974 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a:focus { 975 outline: none; 976 } 977 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu { 978 width: 100%; 979 margin: 0; 980 padding: 0; 981 border-style: solid; 982 border-color: #dbdde0; 983 border-width: 0 1px 1px 1px; 984 left: -1px; 985 top: 68px; 986 } 987 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a { 988 background-image: none; 989 border-top: 1px solid #dbdde0; 990 } 991 #leftnav .nav.nav-tabs.nav-stacked > li > a { 992 border: 0; 993 } 994 Killwithfire #leftnav .nav.nav-tabs li.active a { 995 font-size: 16px; 996 font-weight: 500; 997 color: #394d54; 998 line-height: 2; 999 line-height: 48px; 1000 background-color: #d3f1fb; 1001 border-left: 10px solid #ade5f9; 1002 padding-left: 9px; 1003 } 1004 Killwithfire #leftnav .nav.nav-tabs li.active a:hover { 1005 font-size: 16px; 1006 font-weight: 500; 1007 color: #24b8eb; 1008 text-decoration: none; 1009 cursor: pointer; 1010 } 1011 Killwithfire #leftnav .nav.nav-tabs li.active a:focus { 1012 outline: none; 1013 } 1014 #leftnav .nav.nav-tabs > li > a { 1015 line-height: 48px; 1016 font-size: 16px; 1017 font-weight: 500; 1018 color: #005976; 1019 } 1020 #leftnav .nav.nav-tabs > li > a:hover { 1021 font-size: 16px; 1022 font-weight: 500; 1023 color: #24b8eb; 1024 text-decoration: none; 1025 } 1026 #leftnav .nav.nav-tabs > li > a:focus { 1027 outline: none; 1028 } 1029 #leftnav h3 { 1030 font-size: 16px; 1031 font-weight: 700; 1032 color: #394d54; 1033 line-height: 2; 1034 margin: 23px 0 3px 0; 1035 padding-left: 20px; 1036 } 1037 #leftnav .progress { 1038 margin-left: 20px; 1039 margin-right: 20px; 1040 margin-bottom: 12px; 1041 } 1042 #leftnav #profile_badge { 1043 margin-bottom: 0px; 1044 } 1045 #leftnav #profile_badge #profile_name { 1046 text-align: left; 1047 padding: .6em; 1048 padding-bottom: .1em; 1049 font-size: 1.3em; 1050 font-weight: bolder; 1051 } 1052 #leftnav #profile_badge #profile_details ul { 1053 padding: 0px; 1054 padding-left: .6em; 1055 } 1056 #leftnav #profile_badge #profile_details ul li { 1057 list-style-type: none; 1058 } 1059 #leftnav #subnav { 1060 margin: 0 20px; 1061 } 1062 #leftnav #subnav h1 { 1063 margin-bottom: 2px; 1064 margin-top: 12px; 1065 } 1066 #leftnav #subnav ul li { 1067 list-style-type: none; 1068 } 1069 #leftnav #subnav #billing_info .progress { 1070 margin: 0px; 1071 } 1072 #leftnav #subnav #repo_count { 1073 float: right; 1074 color: #949da7; 1075 font-style: oblique; 1076 font-size: .8em; 1077 } 1078 #leftnav #subnav .buy-button { 1079 margin-top: 8px; 1080 } 1081 .large-note { 1082 font-size: 20px; 1083 font-weight: 300; 1084 color: #394d54; 1085 } 1086 .large-header { 1087 font-size: 20px; 1088 font-weight: 400; 1089 color: #394d54; 1090 } 1091 .profile-link { 1092 font-size: 20px; 1093 font-weight: 400; 1094 color: #005976; 1095 } 1096 .profile-link-hover { 1097 font-size: 20px; 1098 font-weight: 400; 1099 color: #24b8eb; 1100 } 1101 .tile-number { 1102 font-size: 20px; 1103 font-weight: 500; 1104 color: #949da7; 1105 } 1106 .subhead { 1107 font-size: 18px; 1108 font-weight: 400; 1109 color: #394d54; 1110 line-height: 1; 1111 } 1112 .secondary-nav-header { 1113 font-size: 18px; 1114 font-weight: 500; 1115 color: #394d54; 1116 } 1117 .body-header { 1118 font-size: 18px; 1119 font-weight: 700; 1120 color: #394d54; 1121 line-height: 1.33; 1122 } 1123 .tab-link { 1124 font-size: 18px; 1125 font-weight: 500; 1126 color: #005976; 1127 } 1128 .tab-hover { 1129 font-size: 18px; 1130 font-weight: 500; 1131 color: #24b8eb; 1132 } 1133 .footer-title { 1134 font-size: 18px; 1135 font-weight: 400; 1136 color: #ade5f9; 1137 line-height: 1.8; 1138 } 1139 .primary-cta { 1140 font-size: 18px; 1141 font-weight: 700; 1142 color: #fff; 1143 } 1144 .home-body-header { 1145 font-size: 16px; 1146 font-weight: 400; 1147 color: #253237; 1148 } 1149 .tile-private { 1150 font-size: 16px; 1151 font-weight: 400; 1152 color: #394d54; 1153 line-height: 2; 1154 } 1155 .tile-medium { 1156 font-size: 16px; 1157 font-weight: 500; 1158 color: #394d54; 1159 line-height: 2; 1160 } 1161 .tile-header { 1162 font-size: 16px; 1163 font-weight: 700; 1164 color: #394d54; 1165 line-height: 2; 1166 } 1167 .secondary-nav { 1168 font-size: 16px; 1169 font-weight: 500; 1170 color: #005976; 1171 } 1172 .secondary-nav-hover { 1173 font-size: 16px; 1174 font-weight: 500; 1175 color: #24b8eb; 1176 text-decoration: none; 1177 } 1178 .eyebrow { 1179 font-size: 16px; 1180 font-weight: 500; 1181 color: #949da7; 1182 } 1183 .details-header { 1184 font-size: 15px; 1185 font-weight: 400; 1186 color: #394d54; 1187 } 1188 .tertiary-nav { 1189 font-size: 14px; 1190 font-weight: 400; 1191 color: #005976; 1192 } 1193 .tertiary-nav-hover { 1194 font-size: 14px; 1195 font-weight: 400; 1196 color: #24b8eb; 1197 text-decoration: none; 1198 } 1199 .home-body3 { 1200 font-size: 14px; 1201 font-weight: 400; 1202 color: #253237; 1203 line-height: 2; 1204 } 1205 .home-body1 { 1206 font-size: 14px; 1207 font-weight: 500; 1208 color: #253237; 1209 line-height: 2; 1210 } 1211 .emphasis1 { 1212 font-size: 14px; 1213 font-weight: 700; 1214 color: #253237; 1215 } 1216 .body { 1217 font-size: 14px; 1218 font-weight: 400; 1219 color: #394d54; 1220 line-height: 1.7; 1221 } 1222 .body-bold { 1223 font-size: 14px; 1224 font-weight: 500; 1225 color: #394d54; 1226 line-height: 1.7; 1227 } 1228 .home-link3 { 1229 font-size: 14px; 1230 font-weight: 400; 1231 color: #005976; 1232 } 1233 .home-link3-hover { 1234 font-size: 14px; 1235 font-weight: 400; 1236 color: #24b8eb; 1237 } 1238 .emphasis1-hover { 1239 font-size: 14px; 1240 font-weight: 700; 1241 color: #24b8eb; 1242 } 1243 .grey-body { 1244 font-size: 14px; 1245 font-weight: 400; 1246 color: #949da7; 1247 } 1248 .primary-button { 1249 font-size: 14px; 1250 font-weight: 400; 1251 color: #fff; 1252 } 1253 .nav-button { 1254 font-size: 14px; 1255 font-weight: 700; 1256 color: #fff; 1257 } 1258 .emphasis2 { 1259 font-size: 13px; 1260 font-weight: 500; 1261 color: #253237; 1262 } 1263 .small-body { 1264 font-size: 13px; 1265 font-weight: 400; 1266 color: #394d54; 1267 line-height: 2; 1268 } 1269 .header1 { 1270 font-size: 44px; 1271 font-weight: 500; 1272 color: #253237; 1273 line-height: 1.891; 1274 } 1275 .eyebrow-header { 1276 font-size: 44px; 1277 font-weight: 100; 1278 color: #253237; 1279 line-height: 1.891; 1280 } 1281 .header2 { 1282 font-size: 32px; 1283 font-weight: 300; 1284 color: #394d54; 1285 } 1286 .header3 { 1287 font-size: 26px; 1288 font-weight: 300; 1289 color: #394d54; 1290 line-height: 1.3; 1291 } 1292 .header5 { 1293 font-size: 21px; 1294 font-weight: 300; 1295 color: #394d54; 1296 } 1297 .alert-red-body { 1298 font-size: 14px; 1299 font-weight: 400; 1300 color: #b74b4b; 1301 line-height: 1.7; 1302 } 1303 .alert-red-link { 1304 font-size: 14px; 1305 font-weight: 700; 1306 color: #b74b4b; 1307 line-height: 1.7; 1308 } 1309 .alert-green-body { 1310 font-size: 14px; 1311 font-weight: 400; 1312 color: #91c5c5; 1313 line-height: 1.7; 1314 } 1315 .alert-green-link { 1316 font-size: 14px; 1317 font-weight: 700; 1318 color: #91c5c5; 1319 line-height: 1.7; 1320 } 1321 .alert-blue-body { 1322 font-size: 14px; 1323 font-weight: 400; 1324 color: #24b8eb; 1325 line-height: 1.7; 1326 } 1327 .alert-blue-link { 1328 font-size: 14px; 1329 font-weight: 700; 1330 color: #005976; 1331 line-height: 1.7; 1332 } 1333 /* specific pages */ 1334 /* Home */ 1335 #homepage { 1336 /* Three Functional Blocks */ 1337 /* What Is Docker? */ 1338 /* How Is It Used? */ 1339 /* What's Trending? */ 1340 /* What Are They Saying? */ 1341 } 1342 #homepage h1 { 1343 display: block !important; 1344 } 1345 #homepage h2 { 1346 margin: 0 !important; 1347 } 1348 #homepage a { 1349 color: #24b8eb; 1350 } 1351 #homepage a:hover { 1352 color: #008bb8; 1353 text-decoration: none; 1354 } 1355 #homepage #three { 1356 padding-top: 86px; 1357 text-align: center; 1358 } 1359 #homepage #three .header2 { 1360 display: block; 1361 margin-bottom: 8px !important; 1362 } 1363 #homepage #three .img { 1364 height: 98px; 1365 background-repeat: no-repeat !important; 1366 display: block; 1367 margin: 0 auto; 1368 background-position: center; 1369 } 1370 #homepage #three #stack-icon { 1371 background: url("../img/homepage/developer-stack-icon.png"); 1372 background-size: 91px 77px; 1373 width: 91px; 1374 } 1375 #homepage #three #container-icon { 1376 background: url("../img/homepage/container-icon.png"); 1377 background-size: 108px 83px; 1378 width: 108px; 1379 } 1380 #homepage #three #rack-icon { 1381 background: url("../img/homepage/server-rack-icon.png"); 1382 background-size: 108px 83px; 1383 width: 108px; 1384 } 1385 #homepage #three .home-body1 { 1386 display: block; 1387 height: 180px; 1388 } 1389 #homepage #what-is-docker { 1390 padding-top: 70px; 1391 padding-bottom: 102px; 1392 text-align: center; 1393 background: #f2fcff; 1394 } 1395 #homepage #what-is-docker #section-title h3 { 1396 margin: 0 !important; 1397 } 1398 #homepage #what-is-docker #body { 1399 background-image: url("../img/homepage/what-is-docker-arrow-loop.png"); 1400 background-position: center; 1401 background-repeat: no-repeat; 1402 height: 404px; 1403 } 1404 #homepage #what-is-docker #body .halfling { 1405 padding-top: 92px; 1406 width: 260px; 1407 } 1408 #homepage #use .content { 1409 margin-bottom: 36px; 1410 } 1411 #homepage #use #section-title { 1412 margin-top: 62px; 1413 margin-bottom: 46px; 1414 } 1415 #homepage #use #see-more { 1416 text-align: center; 1417 margin: 0px !important; 1418 margin-top: 46px !important; 1419 margin-bottom: 82px !important; 1420 } 1421 #homepage #whats-trending { 1422 text-align: center; 1423 background: #f2fcff; 1424 padding-bottom: 76px; 1425 } 1426 #homepage #whats-trending #section-title { 1427 margin: 52px 0px; 1428 } 1429 #homepage #whats-trending #body { 1430 margin-bottom: 36px; 1431 } 1432 #homepage #whats-trending #body .bucket { 1433 background: #ffffff; 1434 border-top: 4px solid #ade5f9; 1435 -moz-box-sizing: border-box; 1436 box-sizing: border-box; 1437 height: 346px; 1438 margin-top: 24px !important; 1439 } 1440 #homepage #whats-trending #body .bucket .content { 1441 text-align: left; 1442 height: 290px; 1443 max-height: 290px; 1444 margin: 0 !important; 1445 margin-left: 15px !important; 1446 margin-right: 19px !important; 1447 overflow: hidden; 1448 padding-top: 17px !important; 1449 } 1450 #homepage #whats-trending #body .bucket .view-more { 1451 margin-right: 10px; 1452 margin-bottom: 15px; 1453 } 1454 #homepage #whats-trending .official-repo { 1455 height: 100px; 1456 overflow: hidden; 1457 } 1458 #homepage #whats-trending .official-repo .repo-img { 1459 margin-top: 8px; 1460 } 1461 #homepage #whats-trending .official-repo .repo-info { 1462 width: 220px; 1463 padding-left: 10px; 1464 -moz-box-sizing: border-box; 1465 box-sizing: border-box; 1466 } 1467 #homepage #whats-trending .official-repo .repo-info .home-body-header { 1468 margin-right: 6px; 1469 } 1470 #homepage #whats-trending .contributor { 1471 height: 38px; 1472 margin-bottom: 12px; 1473 margin-top: 5px; 1474 } 1475 #homepage #whats-trending .contributor .avatar { 1476 width: 36px; 1477 height: 36px; 1478 } 1479 #homepage #whats-trending .contributor .name { 1480 padding-left: 10px; 1481 line-height: 38px; 1482 } 1483 #homepage #whats-trending .contributor .points { 1484 padding-left: 10px; 1485 line-height: 38px; 1486 background: url("../img/homepage/homepage-cloud-upload-icon.svg"); 1487 background-position: center left; 1488 background-repeat: no-repeat; 1489 width: 46px; 1490 text-align: right; 1491 } 1492 #homepage #whats-trending .popular-repo { 1493 margin-bottom: 48px; 1494 } 1495 #homepage #whats-trending .popular-repo .link { 1496 height: 20px; 1497 overflow: hidden; 1498 margin-bottom: 1px; 1499 } 1500 #homepage #whats-trending .popular-repo .downloads { 1501 padding-left: 34px; 1502 line-height: 38px; 1503 background: url("../img/homepage/homepage-cloud-download-icon.svg"); 1504 background-position: center left; 1505 background-repeat: no-repeat; 1506 text-align: left; 1507 margin-right: 15px; 1508 } 1509 #homepage #whats-trending .popular-repo .stars { 1510 padding-left: 34px; 1511 line-height: 38px; 1512 background: url("../img/homepage/homepage-star-icon.svg"); 1513 background-position: center left; 1514 background-repeat: no-repeat; 1515 text-align: left; 1516 } 1517 #homepage #what-are-they-saying { 1518 padding-bottom: 74px; 1519 } 1520 #homepage #what-are-they-saying #section-title { 1521 margin: 72px 0px 64px 0px; 1522 } 1523 #homepage #what-are-they-saying #tweets { 1524 width: 930px; 1525 } 1526 #homepage #what-are-they-saying #tweets .who { 1527 line-height: 16px; 1528 } 1529 #homepage #what-are-they-saying #tweets .who .tweet-name { 1530 font-weight: bold; 1531 } 1532 #homepage #what-are-they-saying #tweets .who .tweet-body { 1533 padding-left: 6px; 1534 } 1535 #homepage #what-are-they-saying #tweets .row { 1536 margin-top: 12px; 1537 margin-bottom: 24px; 1538 } 1539 #homepage #what-are-they-saying #tweets .avatar { 1540 width: 30px; 1541 height: 30px; 1542 -webkit-border-radius: 4px; 1543 -moz-border-radius: 4px; 1544 border-radius: 4px; 1545 } 1546 #homepage #what-are-they-saying .home-body-header { 1547 line-height: 16px; 1548 } 1549 #homepage #what-are-they-saying .tile-private { 1550 line-height: 16px; 1551 } 1552 #homepage #what-are-they-saying #up-down { 1553 position: absolute !important; 1554 margin-left: 950px; 1555 width: 20px; 1556 } 1557 #homepage #what-are-they-saying #up-down span { 1558 display: none; 1559 } 1560 #homepage #what-are-they-saying #up-down #up { 1561 display: block; 1562 height: 11px; 1563 width: 20px; 1564 margin-bottom: 180px; 1565 background-image: url("../img/homepage/arrow-up-icon.svg"); 1566 } 1567 #homepage #what-are-they-saying #up-down #up:hover { 1568 background-image: url("../img/homepage/arrow-up-icon-over.svg"); 1569 } 1570 #homepage #what-are-they-saying #up-down #down { 1571 display: block; 1572 height: 11px; 1573 width: 20px; 1574 background-image: url("../img/homepage/arrow-down-icon.svg"); 1575 } 1576 #homepage #what-are-they-saying #up-down #down:hover { 1577 background-image: url("../img/homepage/arrow-down-icon-over.svg"); 1578 } 1579 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 1580 #home-banner #logo-block { 1581 background: url("../img/homepage/docker-whale-home-logo+@2x.png"); 1582 background-size: 459px 261px; 1583 } 1584 #three #stack-icon { 1585 background: url("../img/homepage/developer-stack-icon+@2x.png"); 1586 background-size: 91px 77px; 1587 } 1588 #three #container-icon { 1589 background: url("../img/homepage/container-icon+@2x.png"); 1590 background-size: 108px 83px; 1591 } 1592 #three #rack-icon { 1593 background: url("../img/homepage/server-rack-icon+@2x.png"); 1594 background-size: 108px 83px; 1595 } 1596 #what-is-docker #body { 1597 background-image: url("../img/homepage/what-is-docker-arrow-loop+@2x.png"); 1598 background-position: center; 1599 background-repeat: no-repeat; 1600 background-size: 764px 276px; 1601 } 1602 } 1603 /* What is Docker? */ 1604 #what-is-docker #banner-block { 1605 height: 454px; 1606 background-color: #f2fcff; 1607 } 1608 #what-is-docker #banner-block h1 { 1609 margin: 0; 1610 margin-top: 52px; 1611 } 1612 #what-is-docker #banner-block #video-block { 1613 margin-top: 76px; 1614 } 1615 #what-is-docker #why-block #visual-block { 1616 padding-top: 192px; 1617 /* 89px */ 1618 padding-left: 32px; 1619 } 1620 #what-is-docker #why-block #visual-block #devs-like-icon { 1621 margin: 0 auto; 1622 height: 114px; 1623 width: 134px; 1624 background-image: url("../img/what_is_docker/devs-like-icon.png"); 1625 background-size: 134px 114px; 1626 background-repeat: no-repeat; 1627 background-position: center; 1628 } 1629 #what-is-docker #why-block #visual-block #devs-like-icon span { 1630 display: none; 1631 } 1632 #what-is-docker #why-block #visual-block #dotted-line-arrow { 1633 margin: 0 auto; 1634 margin-top: 26px !important; 1635 /* 0 */ 1636 margin-bottom: 32px !important; 1637 /* 19 */ 1638 height: 261px; 1639 width: 107px; 1640 background-image: url("../img/what_is_docker/dotted-line-arrow.png"); 1641 background-size: 107px 261px; 1642 background-repeat: no-repeat; 1643 background-position: center; 1644 } 1645 #what-is-docker #why-block #visual-block #dotted-line-arrow span { 1646 display: none; 1647 } 1648 #what-is-docker #why-block #visual-block #sysadmins-like-icon { 1649 margin: 0 auto; 1650 height: 129px; 1651 width: 121px; 1652 background-image: url("../img/what_is_docker/sysadmins-like-icon.png"); 1653 background-size: 121px 129px; 1654 background-repeat: no-repeat; 1655 background-position: center; 1656 } 1657 #what-is-docker #why-block #visual-block #sysadmins-like-icon span { 1658 display: none; 1659 } 1660 #what-is-docker #why-block #copy-block { 1661 padding-top: 106px; 1662 padding-left: 28px; 1663 } 1664 #what-is-docker #why-block #copy-block h2 { 1665 margin: 0; 1666 } 1667 #what-is-docker #why-block #copy-block #copy2 { 1668 margin-top: 84px; 1669 margin-bottom: 94px; 1670 } 1671 #what-is-docker #compare-block { 1672 background-color: #f2fcff; 1673 padding-top: 103px; 1674 padding-bottom: 100px; 1675 } 1676 #what-is-docker #compare-block h1 { 1677 margin: 0; 1678 } 1679 #what-is-docker #compare-block #copy-block { 1680 max-width: 360px; 1681 } 1682 #what-is-docker #compare-block #copy-block #copy1 { 1683 margin-top: 128px; 1684 } 1685 #what-is-docker #compare-block #copy-block #copy2 { 1686 margin-top: 153px; 1687 margin-bottom: 50px; 1688 } 1689 #what-is-docker #compare-block #curly-brace-large { 1690 margin-top: 72px; 1691 background-image: url("../img/what_is_docker/curly-brace-large.png"); 1692 background-size: 33px 142px; 1693 background-repeat: no-repeat; 1694 background-position: center; 1695 height: 142px; 1696 width: 33px; 1697 } 1698 #what-is-docker #compare-block #curly-brace-small { 1699 margin-top: 208px; 1700 background-image: url("../img/what_is_docker/curly-brace-small.png"); 1701 background-size: 27px 65px; 1702 background-repeat: no-repeat; 1703 background-position: center; 1704 height: 65px; 1705 width: 27px; 1706 } 1707 #what-is-docker #compare-block #visual-block { 1708 max-width: 220px; 1709 } 1710 #what-is-docker #compare-block #visual-block * { 1711 -moz-box-sizing: border-box; 1712 box-sizing: border-box; 1713 text-align: center; 1714 } 1715 #what-is-docker #compare-block #visual-block .base-block { 1716 background: #394d54; 1717 margin-top: 4px; 1718 height: 31px; 1719 line-height: 31px; 1720 color: #ffffff; 1721 } 1722 #what-is-docker #compare-block #visual-block .docker-block { 1723 background: #24b8eb; 1724 margin-top: 4px; 1725 height: 31px; 1726 line-height: 31px; 1727 color: #ffffff; 1728 } 1729 #what-is-docker #compare-block #visual-block .twin-block .left, 1730 #what-is-docker #compare-block #visual-block .twin-block .right { 1731 width: 108px; 1732 } 1733 #what-is-docker #compare-block #visual-block .twin-block .left div { 1734 background: #91c5c5; 1735 color: #ffffff; 1736 } 1737 #what-is-docker #compare-block #visual-block .twin-block .left .half-block1 { 1738 height: 40px; 1739 line-height: 40px; 1740 } 1741 #what-is-docker #compare-block #visual-block .twin-block .left .half-block2 { 1742 height: 29px; 1743 line-height: 29px; 1744 margin: 4px 0px; 1745 } 1746 #what-is-docker #compare-block #visual-block .twin-block .left .half-block3 { 1747 height: 63px; 1748 line-height: 63px; 1749 } 1750 #what-is-docker #compare-block #visual-block .twin-block .right { 1751 border: 3px solid #ffa141; 1752 } 1753 #what-is-docker #compare-block #visual-block .twin-block .right div { 1754 background: #e0f0d9; 1755 } 1756 #what-is-docker #compare-block #visual-block .twin-block .right .half-block1 { 1757 height: 37px; 1758 line-height: 37px; 1759 } 1760 #what-is-docker #compare-block #visual-block .twin-block .right .half-block2 { 1761 height: 29px; 1762 line-height: 29px; 1763 margin: 4px 0px; 1764 } 1765 #what-is-docker #compare-block #visual-block .twin-block .right .half-block3 { 1766 height: 60px; 1767 line-height: 60px; 1768 } 1769 #what-is-docker #compare-block #visual-block #visual1 { 1770 margin-top: 73px; 1771 } 1772 #what-is-docker #compare-block #visual-block #visual2 { 1773 margin-top: 102px; 1774 } 1775 #what-is-docker #compare-block #visual-block #visual2 .half-block2 { 1776 margin-bottom: 0; 1777 } 1778 #what-is-docker #compare-block #visual-block #visual2 .right .half-block2 { 1779 height: 26px; 1780 line-height: 26px; 1781 } 1782 #what-is-docker #compare-block #buttons a { 1783 margin-right: 20px; 1784 } 1785 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 1786 #what-is-docker #why-block #visual-block #devs-like-icon { 1787 background-image: url("../img/what_is_docker/devs-like-icon-@2x.png"); 1788 background-size: 134px 114px; 1789 background-repeat: no-repeat; 1790 background-position: center; 1791 } 1792 #what-is-docker #why-block #visual-block #dotted-line-arrow { 1793 background-image: url("../img/what_is_docker/dotted-line-arrow+@2x.png"); 1794 background-size: 107px 261px; 1795 background-repeat: no-repeat; 1796 background-position: center; 1797 } 1798 #what-is-docker #why-block #visual-block #sysadmins-like-icon { 1799 background-image: url("../img/what_is_docker/sysadmins-like-icon+2x.png"); 1800 background-size: 121px 129px; 1801 background-repeat: no-repeat; 1802 background-position: center; 1803 } 1804 #what-is-docker #compare-block #curly-brace-large { 1805 background-image: url("../img/what_is_docker/curly-brace-large+@2x.png"); 1806 background-size: 33px 142px; 1807 background-repeat: no-repeat; 1808 background-position: center; 1809 } 1810 #what-is-docker #compare-block #curly-brace-small { 1811 background-image: url("../img/what_is_docker/curly-brace-small+@2x.png"); 1812 background-size: 27px 65px; 1813 background-repeat: no-repeat; 1814 background-position: center; 1815 } 1816 } 1817 .partners-list { 1818 margin-top: 32px; 1819 } 1820 .partners-list > .row-fluid { 1821 margin: 20px 0px; 1822 } 1823 .partners-list > .row-fluid > .partners-logo { 1824 padding-right: 20px; 1825 text-align: center; 1826 } 1827 .partners-list > .row-fluid > .partners-logo > img { 1828 max-height: 70px; 1829 } 1830 /* Plans - Pricing Block */ 1831 #plans .row .span2 { 1832 margin-left: 0; 1833 } 1834 #plans #features { 1835 -moz-box-sizing: border-box; 1836 box-sizing: border-box; 1837 text-align: right; 1838 width: 144px; 1839 height: 435px; 1840 padding-top: 84px; 1841 padding-bottom: 12px; 1842 } 1843 #plans #features .feature-label { 1844 -moz-box-sizing: border-box; 1845 box-sizing: border-box; 1846 height: 42px; 1847 margin-bottom: 8px; 1848 padding-top: 6px; 1849 padding-right: 8px; 1850 } 1851 #plans #free { 1852 background-color: #f2fcff; 1853 } 1854 #plans .plan { 1855 -moz-box-sizing: border-box; 1856 box-sizing: border-box; 1857 margin: 0px 6px 0px 0px; 1858 background: #d3f1fb; 1859 width: 105px; 1860 height: 435px; 1861 text-align: center; 1862 } 1863 #plans .plan .plan-name { 1864 padding: 10px; 1865 height: 60px; 1866 line-height: 62px; 1867 } 1868 #plans .plan .plan-feature { 1869 -moz-box-sizing: border-box; 1870 box-sizing: border-box; 1871 height: 42px; 1872 line-height: 30px; 1873 margin-bottom: 8px; 1874 padding: 6px; 1875 } 1876 #plans .plan .plan-feature .feature-yes { 1877 display: block; 1878 height: 23px; 1879 background-image: url("../img/universal/docker-logo-pin.png"); 1880 background-position: center; 1881 background-repeat: no-repeat; 1882 background-size: 22px 16px; 1883 } 1884 #display-table .row .span2 { 1885 margin-left: 0; 1886 } 1887 #display-table #labels { 1888 -moz-box-sizing: border-box; 1889 box-sizing: border-box; 1890 padding-right: 22px; 1891 text-align: right; 1892 padding-top: 84px; 1893 padding-bottom: 12px; 1894 } 1895 #display-table #labels .column-label { 1896 -moz-box-sizing: border-box; 1897 box-sizing: border-box; 1898 height: 42px; 1899 margin-bottom: 8px; 1900 padding-top: 6px; 1901 } 1902 #display-table #labels .column-label-high { 1903 height: 100px !important; 1904 } 1905 #display-table .bg-dark { 1906 background-color: #f2fcff; 1907 } 1908 #display-table .bg-light { 1909 background-color: #d3f1fb; 1910 } 1911 #display-table .column-large { 1912 -moz-box-sizing: border-box; 1913 box-sizing: border-box; 1914 margin: 0px 16px 0px 0px; 1915 width: 216px; 1916 text-align: center; 1917 } 1918 #display-table .column-large .column-name { 1919 padding: 10px; 1920 height: 60px; 1921 line-height: 62px; 1922 } 1923 #display-table .column-large .column-feature { 1924 -moz-box-sizing: border-box; 1925 box-sizing: border-box; 1926 height: 42px; 1927 line-height: 30px; 1928 margin-bottom: 8px; 1929 padding: 6px; 1930 } 1931 #display-table .column-large .column-feature .feature-yes { 1932 display: block; 1933 height: 23px; 1934 background-image: url("../img/universal/docker-logo-pin.png"); 1935 background-position: center; 1936 background-repeat: no-repeat; 1937 background-size: 22px 16px; 1938 } 1939 #display-table .column-large .column-feature-high { 1940 padding-left: 12px; 1941 text-align: left; 1942 height: 100px !important; 1943 } 1944 /* Usecases */ 1945 #usecases .target-link { 1946 text-align: right; 1947 } 1948 #usecases .row-fluid { 1949 margin-top: 15px; 1950 margin-bottom: 45px; 1951 } 1952 /* listing teams & people */ 1953 /* Listing people (team, contributors etc.) */ 1954 .list-people .team-member { 1955 position: relative; 1956 float: left; 1957 margin: 0px 10px 10px 0; 1958 box-sizing: border-box; 1959 -moz-box-sizing: border-box; 1960 background-color: #f2fcff; 1961 border: 2px solid #d3f1fb; 1962 max-width: 570px; 1963 } 1964 .list-people .team-member img { 1965 width: 130px; 1966 height: 130px; 1967 } 1968 .list-people .team-member .name { 1969 position: absolute; 1970 float: center; 1971 bottom: 0px; 1972 left: 0px; 1973 right: 0px; 1974 margin-right: auto; 1975 margin-left: auto; 1976 text-align: center; 1977 line-height: 18px; 1978 font-size: 16px; 1979 padding: 10px 8px; 1980 color: #ffffff; 1981 background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.65) 99%); 1982 /* FF3.6+ */ 1983 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0.65)), color-stop(99%, rgba(0, 0, 0, 0.65))); 1984 /* Chrome,Safari4+ */ 1985 background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.65) 99%); 1986 /* Chrome10+,Safari5.1+ */ 1987 background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.65) 99%); 1988 /* Opera 11.10+ */ 1989 background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.65) 99%); 1990 /* IE10+ */ 1991 background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.65) 99%); 1992 /* W3C */ 1993 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); 1994 /* IE6-9 */ 1995 } 1996 .list-people .team-member .bio { 1997 display: none; 1998 } 1999 .entries h3 { 2000 margin: 10px 0px 20px 0px !important; 2001 } 2002 .entries .event { 2003 margin-bottom: 15px !important; 2004 } 2005 .entries .event .event-date { 2006 margin: 0px !important; 2007 } 2008 .entries .event .event-event-title { 2009 margin: 0px !important; 2010 } 2011 .entries .event p { 2012 margin: 0px !important; 2013 } 2014 /* patches */ 2015 #content { 2016 padding-bottom: 100px; 2017 } 2018 ul { 2019 list-style-position: inside; 2020 } 2021 h1 { 2022 display: none; 2023 } 2024 h1, 2025 h2, 2026 h3 { 2027 margin: 0; 2028 } 2029 a { 2030 color: #24b8eb; 2031 text-decoration: none !important; 2032 } 2033 a:hover { 2034 color: #008bb8; 2035 text-decoration: none; 2036 } 2037 .primary-cta-button1, 2038 .primary-cta-button2 { 2039 color: #ffffff !important; 2040 padding: 6px 12px !important; 2041 } 2042 .action-buttons { 2043 margin-top: 75px; 2044 } 2045 .header2, 2046 .header3 { 2047 display: block; 2048 } 2049 .center-cta-btn { 2050 margin-top: 30px; 2051 margin-left: 110px; 2052 } 2053 .expand { 2054 min-height: 700px; 2055 height: 100%; 2056 } 2057 .menu-caption { 2058 display: block; 2059 padding: 10px; 2060 padding-bottom: 0; 2061 } 2062 .bg-clr-blue7 { 2063 background-color: #f2fcff; 2064 } 2065 .bg-clr-blue11 { 2066 background-color: #d3f1fb; 2067 } 2068 .padded { 2069 border-collapse: separate; 2070 border-spacing: 10px 10px; 2071 border: 1px solid #fff; 2072 } 2073 /* Blocks for community/participate */ 2074 #community-blocks { 2075 text-align: center; 2076 font-weight: bold; 2077 font-size: 12px; 2078 } 2079 #community-blocks a { 2080 -moz-box-sizing: border-box; 2081 box-sizing: border-box; 2082 display: inline-block; 2083 width: 125px; 2084 height: 125px; 2085 padding: 8px; 2086 margin: 0 auto; 2087 background-color: #f2fcff; 2088 border: 2px solid #d3f1fb; 2089 } 2090 #community-blocks a span { 2091 display: block; 2092 } 2093 .margin-section { 2094 margin: 30px 0px; 2095 } 2096 /* Logo - copy banner */ 2097 #wrapping-banner { 2098 text-align: center; 2099 position: relative; 2100 left: 0; 2101 right: 0; 2102 background: #ffffff; 2103 /* Old browsers */ 2104 background: -moz-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2105 /* FF3.6+ */ 2106 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #b8edff), color-stop(100%, #83dfff)); 2107 /* Chrome,Safari4+ */ 2108 background: -webkit-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2109 /* Chrome10+,Safari5.1+ */ 2110 background: -o-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2111 /* Opera 11.10+ */ 2112 background: -ms-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2113 /* IE10+ */ 2114 background: linear-gradient(to bottom, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2115 /* W3C */ 2116 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#83dfff', GradientType=0); 2117 /* IE6-9 */ 2118 } 2119 #wrapping-banner h1, 2120 #wrapping-banner h2, 2121 #wrapping-banner h3 { 2122 display: block; 2123 } 2124 #wrapping-banner h2 { 2125 display: block; 2126 margin-top: 20px !important; 2127 margin-bottom: 20px !important; 2128 } 2129 #wrapping-banner .primary-cta-button1, 2130 #wrapping-banner .primary-cta-button2 { 2131 min-width: 180px; 2132 } 2133 #wrapping-banner #copy-block { 2134 width: 425px; 2135 margin-left: 26px; 2136 margin-bottom: 104px; 2137 margin-top: 74px !important; 2138 } 2139 #wrapping-banner #logo-block { 2140 height: 261px; 2141 width: 459px; 2142 margin-top: 57px; 2143 margin-bottom: 86px; 2144 background: url("../img/homepage/docker-whale-home-logo+.png"); 2145 background-size: 459px 261px; 2146 background-repeat: no-repeat; 2147 } 2148 #wrapping-banner .eyebrow-header { 2149 line-height: 46px; 2150 } 2151 #wrapping-banner .header1 { 2152 line-height: 46px; 2153 } 2154 #wrapping-banner .subhead { 2155 margin-top: 20px; 2156 margin-bottom: 20px; 2157 line-height: 30px; 2158 } 2159 #wrapping-banner .email-form { 2160 margin-top: 18px; 2161 } 2162 #wrapping-banner .email-form label { 2163 display: none; 2164 } 2165 #wrapping-banner .email-form ul[class=errorlist] { 2166 list-style: none; 2167 } 2168 #wrapping-banner .email-form input[class=form-control] { 2169 width: 300px; 2170 } 2171 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 2172 #wrapping-banner #logo-block { 2173 background: url("../img/homepage/docker-whale-home-logo+@2x.png"); 2174 background-size: 459px 261px; 2175 } 2176 }