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  }