main.css 46 KB

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