github.com/pritambaral/docker@v1.4.2-0.20150120174542-b2fe1b3dd952/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 .navbar-index-search .search-query:focus, 805 #topmostnav .navbar-index-search .search-query.focused { 806 width: 200px; 807 } 808 #topmostnav.public { 809 border-bottom: none; 810 height: 80px; 811 } 812 #topmostnav.public .nav { 813 margin-right: 0; 814 } 815 #topmostnav.public li a { 816 line-height: 80px; 817 padding: 0 15px; 818 } 819 #topmostnav.public li.active a { 820 background-color: #E8E8E8; 821 } 822 #topmostnav.public #usernav .btn { 823 margin: 24px 0 0 13px; 824 } 825 #topmostnav.public .brand { 826 padding-left: 10px; 827 margin: 18px 15px 0 0; 828 } 829 .brand.logo a { 830 text-decoration: none; 831 } 832 .brand.logo a { 833 text-decoration: none; 834 } 835 .navbar .navbar-inner { 836 padding-right: 0px; 837 padding-left: 0px; 838 } 839 .navbar .brand { 840 margin-left: 0px; 841 float: left; 842 display: block; 843 } 844 .navbar .brand.logo { 845 padding-top: 0; 846 padding-bottom: 0; 847 } 848 .navbar .nav li a { 849 padding: 0; 850 } 851 .nav-underline { 852 height: 6px; 853 background-color: #71afc0; 854 } 855 .nav-login li a { 856 color: white; 857 padding: 10px 15px 10px; 858 } 859 .inline-icon { 860 margin-bottom: 6px; 861 } 862 .float-left { 863 float: left; 864 margin-right: 15px; 865 margin-bottom: 15px; 866 } 867 .float-right { 868 float: right; 869 margin-left: 15px; 870 margin-bottom: 15px; 871 } 872 .navbar #usernav .nav img { 873 margin-right: 8px; 874 } 875 .navbar #usernav .nav li { 876 padding-top: 15px; 877 } 878 .navbar #usernav .nav li a, 879 #versionnav .nav li a.dropdown-toggle { 880 font-size: 14px; 881 font-weight: 400; 882 color: #394d54; 883 line-height: 1.7; 884 line-height: 30px; 885 padding: 0 20px 0 0; 886 background: url("../img/nav/caret-down-user-icon.svg") no-repeat 100% 50%; 887 } 888 .navbar #usernav .nav li a:hover, 889 #versionnav .nav li a.dropdown-toggle:hover { 890 background-image: url("../img/nav/caret-down-user-icon-over.svg"); 891 } 892 .navbar #usernav .nav li ul li, 893 #versionnav .version { 894 padding: 0; 895 margin: 0; 896 height: 28px; 897 } 898 .navbar #usernav .nav li ul li a { 899 padding: 0 0 0 12px; 900 background-image: none; 901 line-height: 28px; 902 } 903 .navbar #usernav .nav li ul li a:hover { 904 background-image: none; 905 } 906 .navbar-index-search input[type="text"] { 907 background-color: #fff; 908 border-color: #dbdde0; 909 } 910 /* 911 #usernav > a { 912 padding: 0 20px 0 0; 913 background: url(../img/caret-down-user-icon.svg) no-repeat 100% 50%; 914 } 915 #usernav > a:hover { 916 background-image: url(../img/caret-down-user-icon-over.svg); 917 } 918 */ 919 #leftnav ul a { 920 padding: 0 0 0 19px; 921 font-size: 14px; 922 font-weight: 400; 923 color: #005976; 924 } 925 #leftnav ul a:hover { 926 font-size: 14px; 927 font-weight: 400; 928 color: #24b8eb; 929 text-decoration: none; 930 } 931 #leftnav div:first-child { 932 border: 1px solid #dbdde0; 933 margin-bottom: 22px; 934 } 935 #leftnav .nav { 936 margin: 0, 0, 20px, 0; 937 } 938 #leftnav .nav > li > a { 939 line-height: 22px; 940 font-size: 16px; 941 font-weight: 500; 942 color: #005976; 943 } 944 #leftnav .nav > li > a:hover { 945 font-size: 16px; 946 font-weight: 500; 947 color: #24b8eb; 948 text-decoration: none; 949 background-color: inherit; 950 } 951 #leftnav .nav.nav-tabs > li > a.dropdown-toggle, 952 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a { 953 background: url("../img/nav/caret-down-subnav-icon.svg") no-repeat 90% 50%; 954 font-size: 16px; 955 font-weight: 500; 956 color: #949da7; 957 line-height: 69px ; 958 height: 69px; 959 } 960 #leftnav .nav.nav-tabs > li > a.dropdown-toggle img, 961 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a img { 962 margin-right: 11px; 963 } 964 #leftnav .nav.nav-tabs > li > a.dropdown-toggle img.profile, 965 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a img.profile { 966 -webkit-border-radius: 20px; 967 -moz-border-radius: 20px; 968 border-radius: 20px; 969 } 970 #leftnav .nav.nav-tabs > li > a.dropdown-toggle:hover, 971 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a:hover { 972 font-size: 16px; 973 font-weight: 500; 974 color: #24b8eb; 975 text-decoration: none; 976 } 977 #leftnav .nav.nav-tabs > li > a.dropdown-toggle:focus, 978 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a:focus { 979 outline: none; 980 } 981 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu { 982 width: 100%; 983 margin: 0; 984 padding: 0; 985 border-style: solid; 986 border-color: #dbdde0; 987 border-width: 0 1px 1px 1px; 988 left: -1px; 989 top: 68px; 990 } 991 #leftnav .nav.nav-tabs li.dropdown .dropdown-menu li a { 992 background-image: none; 993 border-top: 1px solid #dbdde0; 994 } 995 #leftnav .nav.nav-tabs.nav-stacked > li > a { 996 border: 0; 997 } 998 #leftnav .nav.nav-tabs li.active a { 999 font-size: 16px; 1000 font-weight: 500; 1001 color: #394d54; 1002 line-height: 2; 1003 line-height: 48px; 1004 background-color: #d3f1fb; 1005 border-left: 10px solid #ade5f9; 1006 padding-left: 9px; 1007 } 1008 #leftnav .nav.nav-tabs li.active a:hover { 1009 font-size: 16px; 1010 font-weight: 500; 1011 color: #24b8eb; 1012 text-decoration: none; 1013 cursor: pointer; 1014 } 1015 #leftnav .nav.nav-tabs li.active a:focus { 1016 outline: none; 1017 } 1018 #leftnav .nav.nav-tabs > li > a { 1019 line-height: 48px; 1020 font-size: 16px; 1021 font-weight: 500; 1022 color: #005976; 1023 } 1024 #leftnav .nav.nav-tabs > li > a:hover { 1025 font-size: 16px; 1026 font-weight: 500; 1027 color: #24b8eb; 1028 text-decoration: none; 1029 } 1030 #leftnav .nav.nav-tabs > li > a:focus { 1031 outline: none; 1032 } 1033 #leftnav h3 { 1034 font-size: 16px; 1035 font-weight: 700; 1036 color: #394d54; 1037 line-height: 2; 1038 margin: 23px 0 3px 0; 1039 padding-left: 20px; 1040 } 1041 #leftnav .progress { 1042 margin-left: 20px; 1043 margin-right: 20px; 1044 margin-bottom: 12px; 1045 } 1046 #leftnav #profile_badge { 1047 margin-bottom: 0px; 1048 } 1049 #leftnav #profile_badge #profile_name { 1050 text-align: left; 1051 padding: .6em; 1052 padding-bottom: .1em; 1053 font-size: 1.3em; 1054 font-weight: bolder; 1055 } 1056 #leftnav #profile_badge #profile_details ul { 1057 padding: 0px; 1058 padding-left: .6em; 1059 } 1060 #leftnav #profile_badge #profile_details ul li { 1061 list-style-type: none; 1062 } 1063 #leftnav #subnav { 1064 margin: 0 20px; 1065 } 1066 #leftnav #subnav h1 { 1067 margin-bottom: 2px; 1068 margin-top: 12px; 1069 } 1070 #leftnav #subnav ul li { 1071 list-style-type: none; 1072 } 1073 #leftnav #subnav #billing_info .progress { 1074 margin: 0px; 1075 } 1076 #leftnav #subnav #repo_count { 1077 float: right; 1078 color: #949da7; 1079 font-style: oblique; 1080 font-size: .8em; 1081 } 1082 #leftnav #subnav .buy-button { 1083 margin-top: 8px; 1084 } 1085 .large-note { 1086 font-size: 20px; 1087 font-weight: 300; 1088 color: #394d54; 1089 } 1090 .large-header { 1091 font-size: 20px; 1092 font-weight: 400; 1093 color: #394d54; 1094 } 1095 .profile-link { 1096 font-size: 20px; 1097 font-weight: 400; 1098 color: #005976; 1099 } 1100 .profile-link-hover { 1101 font-size: 20px; 1102 font-weight: 400; 1103 color: #24b8eb; 1104 } 1105 .tile-number { 1106 font-size: 20px; 1107 font-weight: 500; 1108 color: #949da7; 1109 } 1110 .subhead { 1111 font-size: 18px; 1112 font-weight: 400; 1113 color: #394d54; 1114 line-height: 1; 1115 } 1116 .secondary-nav-header { 1117 font-size: 18px; 1118 font-weight: 500; 1119 color: #394d54; 1120 } 1121 .body-header { 1122 font-size: 18px; 1123 font-weight: 700; 1124 color: #394d54; 1125 line-height: 1.33; 1126 } 1127 .tab-link { 1128 font-size: 18px; 1129 font-weight: 500; 1130 color: #005976; 1131 } 1132 .tab-hover { 1133 font-size: 18px; 1134 font-weight: 500; 1135 color: #24b8eb; 1136 } 1137 .footer-title { 1138 font-size: 18px; 1139 font-weight: 400; 1140 color: #ade5f9; 1141 line-height: 1.8; 1142 } 1143 .primary-cta { 1144 font-size: 18px; 1145 font-weight: 700; 1146 color: #fff; 1147 } 1148 .home-body-header { 1149 font-size: 16px; 1150 font-weight: 400; 1151 color: #253237; 1152 } 1153 .tile-private { 1154 font-size: 16px; 1155 font-weight: 400; 1156 color: #394d54; 1157 line-height: 2; 1158 } 1159 .tile-medium { 1160 font-size: 16px; 1161 font-weight: 500; 1162 color: #394d54; 1163 line-height: 2; 1164 } 1165 .tile-header { 1166 font-size: 16px; 1167 font-weight: 700; 1168 color: #394d54; 1169 line-height: 2; 1170 } 1171 .secondary-nav { 1172 font-size: 16px; 1173 font-weight: 500; 1174 color: #005976; 1175 } 1176 .secondary-nav-hover { 1177 font-size: 16px; 1178 font-weight: 500; 1179 color: #24b8eb; 1180 text-decoration: none; 1181 } 1182 .eyebrow { 1183 font-size: 16px; 1184 font-weight: 500; 1185 color: #949da7; 1186 } 1187 .details-header { 1188 font-size: 15px; 1189 font-weight: 400; 1190 color: #394d54; 1191 } 1192 .tertiary-nav { 1193 font-size: 14px; 1194 font-weight: 400; 1195 color: #005976; 1196 } 1197 .tertiary-nav-hover { 1198 font-size: 14px; 1199 font-weight: 400; 1200 color: #24b8eb; 1201 text-decoration: none; 1202 } 1203 .home-body3 { 1204 font-size: 14px; 1205 font-weight: 400; 1206 color: #253237; 1207 line-height: 2; 1208 } 1209 .home-body1 { 1210 font-size: 14px; 1211 font-weight: 500; 1212 color: #253237; 1213 line-height: 2; 1214 } 1215 .emphasis1 { 1216 font-size: 14px; 1217 font-weight: 700; 1218 color: #253237; 1219 } 1220 .body { 1221 font-size: 14px; 1222 font-weight: 400; 1223 color: #394d54; 1224 line-height: 1.7; 1225 } 1226 .body-bold { 1227 font-size: 14px; 1228 font-weight: 500; 1229 color: #394d54; 1230 line-height: 1.7; 1231 } 1232 .home-link3 { 1233 font-size: 14px; 1234 font-weight: 400; 1235 color: #005976; 1236 } 1237 .home-link3-hover { 1238 font-size: 14px; 1239 font-weight: 400; 1240 color: #24b8eb; 1241 } 1242 .emphasis1-hover { 1243 font-size: 14px; 1244 font-weight: 700; 1245 color: #24b8eb; 1246 } 1247 .grey-body { 1248 font-size: 14px; 1249 font-weight: 400; 1250 color: #949da7; 1251 } 1252 .primary-button { 1253 font-size: 14px; 1254 font-weight: 400; 1255 color: #fff; 1256 } 1257 .nav-button { 1258 font-size: 14px; 1259 font-weight: 700; 1260 color: #fff; 1261 } 1262 .emphasis2 { 1263 font-size: 13px; 1264 font-weight: 500; 1265 color: #253237; 1266 } 1267 .small-body { 1268 font-size: 13px; 1269 font-weight: 400; 1270 color: #394d54; 1271 line-height: 2; 1272 } 1273 .header1 { 1274 font-size: 44px; 1275 font-weight: 500; 1276 color: #253237; 1277 line-height: 1.891; 1278 } 1279 .eyebrow-header { 1280 font-size: 44px; 1281 font-weight: 100; 1282 color: #253237; 1283 line-height: 1.891; 1284 } 1285 .header2 { 1286 font-size: 32px; 1287 font-weight: 300; 1288 color: #394d54; 1289 } 1290 .header3 { 1291 font-size: 26px; 1292 font-weight: 300; 1293 color: #394d54; 1294 line-height: 1.3; 1295 } 1296 .header5 { 1297 font-size: 21px; 1298 font-weight: 300; 1299 color: #394d54; 1300 } 1301 .alert-red-body { 1302 font-size: 14px; 1303 font-weight: 400; 1304 color: #b74b4b; 1305 line-height: 1.7; 1306 } 1307 .alert-red-link { 1308 font-size: 14px; 1309 font-weight: 700; 1310 color: #b74b4b; 1311 line-height: 1.7; 1312 } 1313 .alert-green-body { 1314 font-size: 14px; 1315 font-weight: 400; 1316 color: #91c5c5; 1317 line-height: 1.7; 1318 } 1319 .alert-green-link { 1320 font-size: 14px; 1321 font-weight: 700; 1322 color: #91c5c5; 1323 line-height: 1.7; 1324 } 1325 .alert-blue-body { 1326 font-size: 14px; 1327 font-weight: 400; 1328 color: #24b8eb; 1329 line-height: 1.7; 1330 } 1331 .alert-blue-link { 1332 font-size: 14px; 1333 font-weight: 700; 1334 color: #005976; 1335 line-height: 1.7; 1336 } 1337 /* specific pages */ 1338 /* Home */ 1339 #homepage { 1340 /* Three Functional Blocks */ 1341 /* What Is Docker? */ 1342 /* How Is It Used? */ 1343 /* What's Trending? */ 1344 /* What Are They Saying? */ 1345 } 1346 #homepage h1 { 1347 display: block !important; 1348 } 1349 #homepage h2 { 1350 margin: 0 !important; 1351 } 1352 #homepage a { 1353 color: #24b8eb; 1354 } 1355 #homepage a:hover { 1356 color: #008bb8; 1357 text-decoration: none; 1358 } 1359 #homepage #three { 1360 padding-top: 86px; 1361 text-align: center; 1362 } 1363 #homepage #three .header2 { 1364 display: block; 1365 margin-bottom: 8px !important; 1366 } 1367 #homepage #three .img { 1368 height: 98px; 1369 background-repeat: no-repeat !important; 1370 display: block; 1371 margin: 0 auto; 1372 background-position: center; 1373 } 1374 #homepage #three #stack-icon { 1375 background: url("../img/homepage/developer-stack-icon.png"); 1376 background-size: 91px 77px; 1377 width: 91px; 1378 } 1379 #homepage #three #container-icon { 1380 background: url("../img/homepage/container-icon.png"); 1381 background-size: 108px 83px; 1382 width: 108px; 1383 } 1384 #homepage #three #rack-icon { 1385 background: url("../img/homepage/server-rack-icon.png"); 1386 background-size: 108px 83px; 1387 width: 108px; 1388 } 1389 #homepage #three .home-body1 { 1390 display: block; 1391 height: 180px; 1392 } 1393 #homepage #what-is-docker { 1394 padding-top: 70px; 1395 padding-bottom: 102px; 1396 text-align: center; 1397 background: #f2fcff; 1398 } 1399 #homepage #what-is-docker #section-title h3 { 1400 margin: 0 !important; 1401 } 1402 #homepage #what-is-docker #body { 1403 background-image: url("../img/homepage/what-is-docker-arrow-loop.png"); 1404 background-position: center; 1405 background-repeat: no-repeat; 1406 height: 404px; 1407 } 1408 #homepage #what-is-docker #body .halfling { 1409 padding-top: 92px; 1410 width: 260px; 1411 } 1412 #homepage #use .content { 1413 margin-bottom: 36px; 1414 } 1415 #homepage #use #section-title { 1416 margin-top: 62px; 1417 margin-bottom: 46px; 1418 } 1419 #homepage #use #see-more { 1420 text-align: center; 1421 margin: 0px !important; 1422 margin-top: 46px !important; 1423 margin-bottom: 82px !important; 1424 } 1425 #homepage #whats-trending { 1426 text-align: center; 1427 background: #f2fcff; 1428 padding-bottom: 76px; 1429 } 1430 #homepage #whats-trending #section-title { 1431 margin: 52px 0px; 1432 } 1433 #homepage #whats-trending #body { 1434 margin-bottom: 36px; 1435 } 1436 #homepage #whats-trending #body .bucket { 1437 background: #ffffff; 1438 border-top: 4px solid #ade5f9; 1439 -moz-box-sizing: border-box; 1440 box-sizing: border-box; 1441 height: 346px; 1442 margin-top: 24px !important; 1443 } 1444 #homepage #whats-trending #body .bucket .content { 1445 text-align: left; 1446 height: 290px; 1447 max-height: 290px; 1448 margin: 0 !important; 1449 margin-left: 15px !important; 1450 margin-right: 19px !important; 1451 overflow: hidden; 1452 padding-top: 17px !important; 1453 } 1454 #homepage #whats-trending #body .bucket .view-more { 1455 margin-right: 10px; 1456 margin-bottom: 15px; 1457 } 1458 #homepage #whats-trending .official-repo { 1459 height: 100px; 1460 overflow: hidden; 1461 } 1462 #homepage #whats-trending .official-repo .repo-img { 1463 margin-top: 8px; 1464 } 1465 #homepage #whats-trending .official-repo .repo-info { 1466 width: 220px; 1467 padding-left: 10px; 1468 -moz-box-sizing: border-box; 1469 box-sizing: border-box; 1470 } 1471 #homepage #whats-trending .official-repo .repo-info .home-body-header { 1472 margin-right: 6px; 1473 } 1474 #homepage #whats-trending .contributor { 1475 height: 38px; 1476 margin-bottom: 12px; 1477 margin-top: 5px; 1478 } 1479 #homepage #whats-trending .contributor .avatar { 1480 width: 36px; 1481 height: 36px; 1482 } 1483 #homepage #whats-trending .contributor .name { 1484 padding-left: 10px; 1485 line-height: 38px; 1486 } 1487 #homepage #whats-trending .contributor .points { 1488 padding-left: 10px; 1489 line-height: 38px; 1490 background: url("../img/homepage/homepage-cloud-upload-icon.svg"); 1491 background-position: center left; 1492 background-repeat: no-repeat; 1493 width: 46px; 1494 text-align: right; 1495 } 1496 #homepage #whats-trending .popular-repo { 1497 margin-bottom: 48px; 1498 } 1499 #homepage #whats-trending .popular-repo .link { 1500 height: 20px; 1501 overflow: hidden; 1502 margin-bottom: 1px; 1503 } 1504 #homepage #whats-trending .popular-repo .downloads { 1505 padding-left: 34px; 1506 line-height: 38px; 1507 background: url("../img/homepage/homepage-cloud-download-icon.svg"); 1508 background-position: center left; 1509 background-repeat: no-repeat; 1510 text-align: left; 1511 margin-right: 15px; 1512 } 1513 #homepage #whats-trending .popular-repo .stars { 1514 padding-left: 34px; 1515 line-height: 38px; 1516 background: url("../img/homepage/homepage-star-icon.svg"); 1517 background-position: center left; 1518 background-repeat: no-repeat; 1519 text-align: left; 1520 } 1521 #homepage #what-are-they-saying { 1522 padding-bottom: 74px; 1523 } 1524 #homepage #what-are-they-saying #section-title { 1525 margin: 72px 0px 64px 0px; 1526 } 1527 #homepage #what-are-they-saying #tweets { 1528 width: 930px; 1529 } 1530 #homepage #what-are-they-saying #tweets .who { 1531 line-height: 16px; 1532 } 1533 #homepage #what-are-they-saying #tweets .who .tweet-name { 1534 font-weight: bold; 1535 } 1536 #homepage #what-are-they-saying #tweets .who .tweet-body { 1537 padding-left: 6px; 1538 } 1539 #homepage #what-are-they-saying #tweets .row { 1540 margin-top: 12px; 1541 margin-bottom: 24px; 1542 } 1543 #homepage #what-are-they-saying #tweets .avatar { 1544 width: 30px; 1545 height: 30px; 1546 -webkit-border-radius: 4px; 1547 -moz-border-radius: 4px; 1548 border-radius: 4px; 1549 } 1550 #homepage #what-are-they-saying .home-body-header { 1551 line-height: 16px; 1552 } 1553 #homepage #what-are-they-saying .tile-private { 1554 line-height: 16px; 1555 } 1556 #homepage #what-are-they-saying #up-down { 1557 position: absolute !important; 1558 margin-left: 950px; 1559 width: 20px; 1560 } 1561 #homepage #what-are-they-saying #up-down span { 1562 display: none; 1563 } 1564 #homepage #what-are-they-saying #up-down #up { 1565 display: block; 1566 height: 11px; 1567 width: 20px; 1568 margin-bottom: 180px; 1569 background-image: url("../img/homepage/arrow-up-icon.svg"); 1570 } 1571 #homepage #what-are-they-saying #up-down #up:hover { 1572 background-image: url("../img/homepage/arrow-up-icon-over.svg"); 1573 } 1574 #homepage #what-are-they-saying #up-down #down { 1575 display: block; 1576 height: 11px; 1577 width: 20px; 1578 background-image: url("../img/homepage/arrow-down-icon.svg"); 1579 } 1580 #homepage #what-are-they-saying #up-down #down:hover { 1581 background-image: url("../img/homepage/arrow-down-icon-over.svg"); 1582 } 1583 @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) { 1584 #home-banner #logo-block { 1585 background: url("../img/homepage/docker-whale-home-logo+@2x.png"); 1586 background-size: 459px 261px; 1587 } 1588 #three #stack-icon { 1589 background: url("../img/homepage/developer-stack-icon+@2x.png"); 1590 background-size: 91px 77px; 1591 } 1592 #three #container-icon { 1593 background: url("../img/homepage/container-icon+@2x.png"); 1594 background-size: 108px 83px; 1595 } 1596 #three #rack-icon { 1597 background: url("../img/homepage/server-rack-icon+@2x.png"); 1598 background-size: 108px 83px; 1599 } 1600 #what-is-docker #body { 1601 background-image: url("../img/homepage/what-is-docker-arrow-loop+@2x.png"); 1602 background-position: center; 1603 background-repeat: no-repeat; 1604 background-size: 764px 276px; 1605 } 1606 } 1607 /* What is Docker? */ 1608 #what-is-docker #banner-block { 1609 height: 454px; 1610 background-color: #f2fcff; 1611 } 1612 #what-is-docker #banner-block h1 { 1613 margin: 0; 1614 margin-top: 52px; 1615 } 1616 #what-is-docker #banner-block #video-block { 1617 margin-top: 76px; 1618 } 1619 #what-is-docker #why-block #visual-block { 1620 padding-top: 192px; 1621 /* 89px */ 1622 padding-left: 32px; 1623 } 1624 #what-is-docker #why-block #visual-block #devs-like-icon { 1625 margin: 0 auto; 1626 height: 114px; 1627 width: 134px; 1628 background-image: url("../img/what_is_docker/devs-like-icon.png"); 1629 background-size: 134px 114px; 1630 background-repeat: no-repeat; 1631 background-position: center; 1632 } 1633 #what-is-docker #why-block #visual-block #devs-like-icon span { 1634 display: none; 1635 } 1636 #what-is-docker #why-block #visual-block #dotted-line-arrow { 1637 margin: 0 auto; 1638 margin-top: 26px !important; 1639 /* 0 */ 1640 margin-bottom: 32px !important; 1641 /* 19 */ 1642 height: 261px; 1643 width: 107px; 1644 background-image: url("../img/what_is_docker/dotted-line-arrow.png"); 1645 background-size: 107px 261px; 1646 background-repeat: no-repeat; 1647 background-position: center; 1648 } 1649 #what-is-docker #why-block #visual-block #dotted-line-arrow span { 1650 display: none; 1651 } 1652 #what-is-docker #why-block #visual-block #sysadmins-like-icon { 1653 margin: 0 auto; 1654 height: 129px; 1655 width: 121px; 1656 background-image: url("../img/what_is_docker/sysadmins-like-icon.png"); 1657 background-size: 121px 129px; 1658 background-repeat: no-repeat; 1659 background-position: center; 1660 } 1661 #what-is-docker #why-block #visual-block #sysadmins-like-icon span { 1662 display: none; 1663 } 1664 #what-is-docker #why-block #copy-block { 1665 padding-top: 106px; 1666 padding-left: 28px; 1667 } 1668 #what-is-docker #why-block #copy-block h2 { 1669 margin: 0; 1670 } 1671 #what-is-docker #why-block #copy-block #copy2 { 1672 margin-top: 84px; 1673 margin-bottom: 94px; 1674 } 1675 #what-is-docker #compare-block { 1676 background-color: #f2fcff; 1677 padding-top: 103px; 1678 padding-bottom: 100px; 1679 } 1680 #what-is-docker #compare-block h1 { 1681 margin: 0; 1682 } 1683 #what-is-docker #compare-block #copy-block { 1684 max-width: 360px; 1685 } 1686 #what-is-docker #compare-block #copy-block #copy1 { 1687 margin-top: 128px; 1688 } 1689 #what-is-docker #compare-block #copy-block #copy2 { 1690 margin-top: 153px; 1691 margin-bottom: 50px; 1692 } 1693 #what-is-docker #compare-block #curly-brace-large { 1694 margin-top: 72px; 1695 background-image: url("../img/what_is_docker/curly-brace-large.png"); 1696 background-size: 33px 142px; 1697 background-repeat: no-repeat; 1698 background-position: center; 1699 height: 142px; 1700 width: 33px; 1701 } 1702 #what-is-docker #compare-block #curly-brace-small { 1703 margin-top: 208px; 1704 background-image: url("../img/what_is_docker/curly-brace-small.png"); 1705 background-size: 27px 65px; 1706 background-repeat: no-repeat; 1707 background-position: center; 1708 height: 65px; 1709 width: 27px; 1710 } 1711 #what-is-docker #compare-block #visual-block { 1712 max-width: 220px; 1713 } 1714 #what-is-docker #compare-block #visual-block * { 1715 -moz-box-sizing: border-box; 1716 box-sizing: border-box; 1717 text-align: center; 1718 } 1719 #what-is-docker #compare-block #visual-block .base-block { 1720 background: #394d54; 1721 margin-top: 4px; 1722 height: 31px; 1723 line-height: 31px; 1724 color: #ffffff; 1725 } 1726 #what-is-docker #compare-block #visual-block .docker-block { 1727 background: #24b8eb; 1728 margin-top: 4px; 1729 height: 31px; 1730 line-height: 31px; 1731 color: #ffffff; 1732 } 1733 #what-is-docker #compare-block #visual-block .twin-block .left, 1734 #what-is-docker #compare-block #visual-block .twin-block .right { 1735 width: 108px; 1736 } 1737 #what-is-docker #compare-block #visual-block .twin-block .left div { 1738 background: #91c5c5; 1739 color: #ffffff; 1740 } 1741 #what-is-docker #compare-block #visual-block .twin-block .left .half-block1 { 1742 height: 40px; 1743 line-height: 40px; 1744 } 1745 #what-is-docker #compare-block #visual-block .twin-block .left .half-block2 { 1746 height: 29px; 1747 line-height: 29px; 1748 margin: 4px 0px; 1749 } 1750 #what-is-docker #compare-block #visual-block .twin-block .left .half-block3 { 1751 height: 63px; 1752 line-height: 63px; 1753 } 1754 #what-is-docker #compare-block #visual-block .twin-block .right { 1755 border: 3px solid #ffa141; 1756 } 1757 #what-is-docker #compare-block #visual-block .twin-block .right div { 1758 background: #e0f0d9; 1759 } 1760 #what-is-docker #compare-block #visual-block .twin-block .right .half-block1 { 1761 height: 37px; 1762 line-height: 37px; 1763 } 1764 #what-is-docker #compare-block #visual-block .twin-block .right .half-block2 { 1765 height: 29px; 1766 line-height: 29px; 1767 margin: 4px 0px; 1768 } 1769 #what-is-docker #compare-block #visual-block .twin-block .right .half-block3 { 1770 height: 60px; 1771 line-height: 60px; 1772 } 1773 #what-is-docker #compare-block #visual-block #visual1 { 1774 margin-top: 73px; 1775 } 1776 #what-is-docker #compare-block #visual-block #visual2 { 1777 margin-top: 102px; 1778 } 1779 #what-is-docker #compare-block #visual-block #visual2 .half-block2 { 1780 margin-bottom: 0; 1781 } 1782 #what-is-docker #compare-block #visual-block #visual2 .right .half-block2 { 1783 height: 26px; 1784 line-height: 26px; 1785 } 1786 #what-is-docker #compare-block #buttons a { 1787 margin-right: 20px; 1788 } 1789 @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) { 1790 #what-is-docker #why-block #visual-block #devs-like-icon { 1791 background-image: url("../img/what_is_docker/devs-like-icon-@2x.png"); 1792 background-size: 134px 114px; 1793 background-repeat: no-repeat; 1794 background-position: center; 1795 } 1796 #what-is-docker #why-block #visual-block #dotted-line-arrow { 1797 background-image: url("../img/what_is_docker/dotted-line-arrow+@2x.png"); 1798 background-size: 107px 261px; 1799 background-repeat: no-repeat; 1800 background-position: center; 1801 } 1802 #what-is-docker #why-block #visual-block #sysadmins-like-icon { 1803 background-image: url("../img/what_is_docker/sysadmins-like-icon+2x.png"); 1804 background-size: 121px 129px; 1805 background-repeat: no-repeat; 1806 background-position: center; 1807 } 1808 #what-is-docker #compare-block #curly-brace-large { 1809 background-image: url("../img/what_is_docker/curly-brace-large+@2x.png"); 1810 background-size: 33px 142px; 1811 background-repeat: no-repeat; 1812 background-position: center; 1813 } 1814 #what-is-docker #compare-block #curly-brace-small { 1815 background-image: url("../img/what_is_docker/curly-brace-small+@2x.png"); 1816 background-size: 27px 65px; 1817 background-repeat: no-repeat; 1818 background-position: center; 1819 } 1820 } 1821 .partners-list { 1822 margin-top: 32px; 1823 } 1824 .partners-list > .row-fluid { 1825 margin: 20px 0px; 1826 } 1827 .partners-list > .row-fluid > .partners-logo { 1828 padding-right: 20px; 1829 text-align: center; 1830 } 1831 .partners-list > .row-fluid > .partners-logo > img { 1832 max-height: 70px; 1833 } 1834 /* Plans - Pricing Block */ 1835 #plans .row .span2 { 1836 margin-left: 0; 1837 } 1838 #plans #features { 1839 -moz-box-sizing: border-box; 1840 box-sizing: border-box; 1841 text-align: right; 1842 width: 144px; 1843 height: 435px; 1844 padding-top: 84px; 1845 padding-bottom: 12px; 1846 } 1847 #plans #features .feature-label { 1848 -moz-box-sizing: border-box; 1849 box-sizing: border-box; 1850 height: 42px; 1851 margin-bottom: 8px; 1852 padding-top: 6px; 1853 padding-right: 8px; 1854 } 1855 #plans #free { 1856 background-color: #f2fcff; 1857 } 1858 #plans .plan { 1859 -moz-box-sizing: border-box; 1860 box-sizing: border-box; 1861 margin: 0px 6px 0px 0px; 1862 background: #d3f1fb; 1863 width: 105px; 1864 height: 435px; 1865 text-align: center; 1866 } 1867 #plans .plan .plan-name { 1868 padding: 10px; 1869 height: 60px; 1870 line-height: 62px; 1871 } 1872 #plans .plan .plan-feature { 1873 -moz-box-sizing: border-box; 1874 box-sizing: border-box; 1875 height: 42px; 1876 line-height: 30px; 1877 margin-bottom: 8px; 1878 padding: 6px; 1879 } 1880 #plans .plan .plan-feature .feature-yes { 1881 display: block; 1882 height: 23px; 1883 background-image: url("../img/universal/docker-logo-pin.png"); 1884 background-position: center; 1885 background-repeat: no-repeat; 1886 background-size: 22px 16px; 1887 } 1888 #display-table .row .span2 { 1889 margin-left: 0; 1890 } 1891 #display-table #labels { 1892 -moz-box-sizing: border-box; 1893 box-sizing: border-box; 1894 padding-right: 22px; 1895 text-align: right; 1896 padding-top: 84px; 1897 padding-bottom: 12px; 1898 } 1899 #display-table #labels .column-label { 1900 -moz-box-sizing: border-box; 1901 box-sizing: border-box; 1902 height: 42px; 1903 margin-bottom: 8px; 1904 padding-top: 6px; 1905 } 1906 #display-table #labels .column-label-high { 1907 height: 100px !important; 1908 } 1909 #display-table .bg-dark { 1910 background-color: #f2fcff; 1911 } 1912 #display-table .bg-light { 1913 background-color: #d3f1fb; 1914 } 1915 #display-table .column-large { 1916 -moz-box-sizing: border-box; 1917 box-sizing: border-box; 1918 margin: 0px 16px 0px 0px; 1919 width: 216px; 1920 text-align: center; 1921 } 1922 #display-table .column-large .column-name { 1923 padding: 10px; 1924 height: 60px; 1925 line-height: 62px; 1926 } 1927 #display-table .column-large .column-feature { 1928 -moz-box-sizing: border-box; 1929 box-sizing: border-box; 1930 height: 42px; 1931 line-height: 30px; 1932 margin-bottom: 8px; 1933 padding: 6px; 1934 } 1935 #display-table .column-large .column-feature .feature-yes { 1936 display: block; 1937 height: 23px; 1938 background-image: url("../img/universal/docker-logo-pin.png"); 1939 background-position: center; 1940 background-repeat: no-repeat; 1941 background-size: 22px 16px; 1942 } 1943 #display-table .column-large .column-feature-high { 1944 padding-left: 12px; 1945 text-align: left; 1946 height: 100px !important; 1947 } 1948 /* Usecases */ 1949 #usecases .target-link { 1950 text-align: right; 1951 } 1952 #usecases .row-fluid { 1953 margin-top: 15px; 1954 margin-bottom: 45px; 1955 } 1956 /* listing teams & people */ 1957 /* Listing people (team, contributors etc.) */ 1958 .list-people .team-member { 1959 position: relative; 1960 float: left; 1961 margin: 0px 10px 10px 0; 1962 box-sizing: border-box; 1963 -moz-box-sizing: border-box; 1964 background-color: #f2fcff; 1965 border: 2px solid #d3f1fb; 1966 max-width: 570px; 1967 } 1968 .list-people .team-member img { 1969 width: 130px; 1970 height: 130px; 1971 } 1972 .list-people .team-member .name { 1973 position: absolute; 1974 float: center; 1975 bottom: 0px; 1976 left: 0px; 1977 right: 0px; 1978 margin-right: auto; 1979 margin-left: auto; 1980 text-align: center; 1981 line-height: 18px; 1982 font-size: 16px; 1983 padding: 10px 8px; 1984 color: #ffffff; 1985 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%); 1986 /* FF3.6+ */ 1987 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))); 1988 /* Chrome,Safari4+ */ 1989 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%); 1990 /* Chrome10+,Safari5.1+ */ 1991 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%); 1992 /* Opera 11.10+ */ 1993 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%); 1994 /* IE10+ */ 1995 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%); 1996 /* W3C */ 1997 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); 1998 /* IE6-9 */ 1999 } 2000 .list-people .team-member .bio { 2001 display: none; 2002 } 2003 .entries h3 { 2004 margin: 10px 0px 20px 0px !important; 2005 } 2006 .entries .event { 2007 margin-bottom: 15px !important; 2008 } 2009 .entries .event .event-date { 2010 margin: 0px !important; 2011 } 2012 .entries .event .event-event-title { 2013 margin: 0px !important; 2014 } 2015 .entries .event p { 2016 margin: 0px !important; 2017 } 2018 /* patches */ 2019 #content { 2020 padding-bottom: 100px; 2021 } 2022 ul { 2023 list-style-position: inside; 2024 } 2025 h1 { 2026 display: none; 2027 } 2028 h1, 2029 h2, 2030 h3 { 2031 margin: 0; 2032 } 2033 a { 2034 color: #24b8eb; 2035 text-decoration: none !important; 2036 } 2037 a:hover { 2038 color: #008bb8; 2039 text-decoration: none; 2040 } 2041 .primary-cta-button1, 2042 .primary-cta-button2 { 2043 color: #ffffff !important; 2044 padding: 6px 12px !important; 2045 } 2046 .action-buttons { 2047 margin-top: 75px; 2048 } 2049 .header2, 2050 .header3 { 2051 display: block; 2052 } 2053 .center-cta-btn { 2054 margin-top: 30px; 2055 margin-left: 110px; 2056 } 2057 .expand { 2058 min-height: 700px; 2059 height: 100%; 2060 } 2061 .menu-caption { 2062 display: block; 2063 padding: 10px; 2064 padding-bottom: 0; 2065 } 2066 .bg-clr-blue7 { 2067 background-color: #f2fcff; 2068 } 2069 .bg-clr-blue11 { 2070 background-color: #d3f1fb; 2071 } 2072 .padded { 2073 border-collapse: separate; 2074 border-spacing: 10px 10px; 2075 border: 1px solid #fff; 2076 } 2077 /* Blocks for community/participate */ 2078 #community-blocks { 2079 text-align: center; 2080 font-weight: bold; 2081 font-size: 12px; 2082 } 2083 #community-blocks a { 2084 -moz-box-sizing: border-box; 2085 box-sizing: border-box; 2086 display: inline-block; 2087 width: 125px; 2088 height: 125px; 2089 padding: 8px; 2090 margin: 0 auto; 2091 background-color: #f2fcff; 2092 border: 2px solid #d3f1fb; 2093 } 2094 #community-blocks a span { 2095 display: block; 2096 } 2097 .margin-section { 2098 margin: 30px 0px; 2099 } 2100 /* Logo - copy banner */ 2101 #wrapping-banner { 2102 text-align: center; 2103 position: relative; 2104 left: 0; 2105 right: 0; 2106 background: #ffffff; 2107 /* Old browsers */ 2108 background: -moz-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2109 /* FF3.6+ */ 2110 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #b8edff), color-stop(100%, #83dfff)); 2111 /* Chrome,Safari4+ */ 2112 background: -webkit-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2113 /* Chrome10+,Safari5.1+ */ 2114 background: -o-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2115 /* Opera 11.10+ */ 2116 background: -ms-linear-gradient(top, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2117 /* IE10+ */ 2118 background: linear-gradient(to bottom, #ffffff 0%, #b8edff 50%, #83dfff 100%); 2119 /* W3C */ 2120 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#83dfff', GradientType=0); 2121 /* IE6-9 */ 2122 } 2123 #wrapping-banner h1, 2124 #wrapping-banner h2, 2125 #wrapping-banner h3 { 2126 display: block; 2127 } 2128 #wrapping-banner h2 { 2129 display: block; 2130 margin-top: 20px !important; 2131 margin-bottom: 20px !important; 2132 } 2133 #wrapping-banner .primary-cta-button1, 2134 #wrapping-banner .primary-cta-button2 { 2135 min-width: 180px; 2136 } 2137 #wrapping-banner #copy-block { 2138 width: 425px; 2139 margin-left: 26px; 2140 margin-bottom: 104px; 2141 margin-top: 74px !important; 2142 } 2143 #wrapping-banner #logo-block { 2144 height: 261px; 2145 width: 459px; 2146 margin-top: 57px; 2147 margin-bottom: 86px; 2148 background: url("../img/homepage/docker-whale-home-logo+.png"); 2149 background-size: 459px 261px; 2150 background-repeat: no-repeat; 2151 } 2152 #wrapping-banner .eyebrow-header { 2153 line-height: 46px; 2154 } 2155 #wrapping-banner .header1 { 2156 line-height: 46px; 2157 } 2158 #wrapping-banner .subhead { 2159 margin-top: 20px; 2160 margin-bottom: 20px; 2161 line-height: 30px; 2162 } 2163 #wrapping-banner .email-form { 2164 margin-top: 18px; 2165 } 2166 #wrapping-banner .email-form label { 2167 display: none; 2168 } 2169 #wrapping-banner .email-form ul[class=errorlist] { 2170 list-style: none; 2171 } 2172 #wrapping-banner .email-form input[class=form-control] { 2173 width: 300px; 2174 } 2175 @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) { 2176 #wrapping-banner #logo-block { 2177 background: url("../img/homepage/docker-whale-home-logo+@2x.png"); 2178 background-size: 459px 261px; 2179 } 2180 }