github.com/feiyang21687/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  }