main.css 47 KB

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