style.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. body {
  2. margin:0;
  3. padding:0;
  4. background-color:#e6f5fc;
  5. font-family: Helvetica, Arial;
  6. }
  7. #ace_editor_demo, #embedded_ace_code {
  8. height: 275px;
  9. border: 1px solid #DDD;
  10. border-radius: 4px;
  11. border-bottom-right-radius: 0px;
  12. margin-top: 5px;
  13. }
  14. #embedded_ace_code {
  15. height: 525px;
  16. }
  17. h1, h2, h3, h4, h5, h6 {
  18. font-family: Helvetica;
  19. font-weight: 100;
  20. margin:0;
  21. padding:0;
  22. }
  23. h2, h3, h4, h5, h6 {
  24. padding-top: 30px;
  25. border-bottom: 1px solid #bedaea;
  26. }
  27. H2 {
  28. font-size:28px;
  29. color:#263842;
  30. padding-bottom:6px;
  31. }
  32. H3 {
  33. font-size:22px;
  34. color:#253741;
  35. margin-bottom:8px;
  36. }
  37. H4 {
  38. font-size:21px;
  39. color:#222222;
  40. margin-bottom:8px;
  41. }
  42. P {
  43. padding:13px 0;
  44. margin:0;
  45. line-height:21px;
  46. font-size: 15px;
  47. }
  48. UL{
  49. font-size: 15px;
  50. }
  51. #header {
  52. height: 93px;
  53. position: relative;
  54. background: url(images/background.png) repeat-x 0 0;
  55. border-bottom: 1px solid #C9E8FA;
  56. margin-top: 40px;
  57. }
  58. #header .content .signature {
  59. font-family:Trebuchet MS;
  60. font-size:11px;
  61. color:#ebe4d6;
  62. position:absolute;
  63. bottom:5px;
  64. right:42px;
  65. letter-spacing : 1px;
  66. }
  67. .content {
  68. width:970px;
  69. position:relative;
  70. margin:0 auto;
  71. }
  72. #header .content {
  73. height: 100%;
  74. z-index: 90000;
  75. }
  76. #header .content .logo {
  77. width: 141px;
  78. height: 92px;
  79. background: url(images/logo_half.png) no-repeat 0 0;
  80. position: absolute;
  81. top: -14px;
  82. left: 0;
  83. }
  84. #header .content .title {
  85. width: 605px;
  86. height: 58px;
  87. background: url(images/ace.png) no-repeat 0 0;
  88. position: absolute;
  89. top: 22px;
  90. left: 329px;
  91. }
  92. #wrapper {
  93. background:url(images/body_background.png) repeat-x 0 -15px;
  94. min-height:250px;
  95. }
  96. #wrapper .content {
  97. font-family:Arial;
  98. font-size:14px;
  99. color:#222222;
  100. width: 960px;
  101. }
  102. #wrapper .content .column1 {
  103. position:relative;
  104. overflow:hidden;
  105. float:left;
  106. width:315px;
  107. margin-right:31px;
  108. }
  109. #wrapper .content .column2 {
  110. position:relative;
  111. overflow:hidden;
  112. float:left;
  113. /*width:600px;*/
  114. }
  115. #top_container h1 {
  116. font-size: 68px;
  117. line-height: 60px;
  118. width: 515px;
  119. float: left;
  120. font-weight: 100;
  121. font-family: Helvetica;
  122. padding: 65px 0 0 14px;
  123. color: #333;
  124. }
  125. #top_container {
  126. background: url(images/header-bg.png) 0 0;
  127. overflow: hidden;
  128. padding: 11px 36px 19px 40px;
  129. height: 267px;
  130. -webkit-transition: height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
  131. -moz-transition: height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
  132. opacity: 1;
  133. margin-top: 25px;
  134. }
  135. #top_container.collapse {
  136. padding: 0px;
  137. height: 0px;
  138. opacity: 0;
  139. margin: 0;
  140. }
  141. #page_logo {
  142. padding: 35px 0 15px 0;
  143. width: 350px;
  144. float: right;
  145. text-align: center;
  146. height: 220px;
  147. }
  148. .fork_on_github {
  149. width:310px;
  150. height:80px;
  151. background:url(images/fork_on_github.png) no-repeat 0 0;
  152. position:relative;
  153. overflow:hidden;
  154. margin-top:49px;
  155. cursor:pointer;
  156. }
  157. .fork_on_github:hover {
  158. background-position:0 -80px;
  159. }
  160. .divider {
  161. height: 1px;
  162. background-color:#bedaea;
  163. margin-bottom:3px;
  164. }
  165. .menu, .site-menu {
  166. padding: 25px 0 0 35px;
  167. }
  168. UL.content-list {
  169. padding: 15px 0 15px 20px;
  170. margin:0;
  171. }
  172. UL.content-list li {
  173. padding-left: 10px;
  174. padding-bottom: 3px;
  175. }
  176. ul.menu-list {
  177. padding: 15px 0;
  178. margin: 0 0 20px 0;
  179. list-style-type: none;
  180. line-height: 16px;
  181. overflow: auto;
  182. }
  183. ul.menu-list li {
  184. color: #2557B4;
  185. font-family: Helvetica, Trebuchet MS;
  186. font-size: 12px;
  187. padding: 5px;
  188. cursor: pointer;
  189. display: block;
  190. float: left;
  191. margin-right: 15px;
  192. margin-bottom: 20px;
  193. width: 100px;
  194. height: 90px;
  195. border-radius: 5px;
  196. position: relative;
  197. background: rgba(255, 255, 255, 0.7);
  198. margin-left: 22px;
  199. margin-top: 20px;
  200. box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  201. -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  202. -webkit-transition: box-shadow 0.4s;
  203. -moz-transition: box-shadow 0.4s;
  204. border: 1px solid #999;
  205. background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
  206. -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
  207. -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
  208. -webkit-linear-gradient(-90deg, hsl(0,0%,78%) 0%,
  209. hsl(0,0%,90%) 47%,
  210. hsl(0,0%,78%) 53%,
  211. hsl(0,0%,70%)100%);
  212. background-image: -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
  213. -moz-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
  214. -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
  215. -moz-linear-gradient(-90deg, hsl(0,0%,78%) 0%,
  216. hsl(0,0%,90%) 47%,
  217. hsl(0,0%,78%) 53%,
  218. hsl(0,0%,70%)100%);
  219. }
  220. ul.menu-list li:hover {
  221. box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  222. -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  223. }
  224. ul.menu-list li a {
  225. position: absolute;
  226. bottom: 0px;
  227. left: 0px;
  228. color: white;
  229. text-align: center;
  230. font-weight: bold;
  231. text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
  232. width: 100%;
  233. display: block;
  234. background: rgba(0, 0, 0, 0.6);
  235. line-height: 12px;
  236. padding: 4px 0;
  237. }
  238. UL.menu-list LI a:hover {
  239. text-decoration: none;
  240. }
  241. li#add_your_site p {
  242. font-size: 32px;
  243. border: 3px solid #34A034;
  244. color: #34A034;
  245. border-radius: 34px;
  246. padding: 3px 4px 4px 5px;
  247. width: 20px;
  248. height: 22px;
  249. line-height: 18px;
  250. position: relative;
  251. left: 33px;
  252. top: 22px;
  253. background: #fff;
  254. }
  255. ul.menu-list li#add_your_site a {
  256. color: #A3EEA3;
  257. }
  258. /* This is the animation code. */
  259. @-webkit-keyframes example {
  260. 0% { -webkit-transform: rotate(0deg); }
  261. 25% { -webkit-transform: rotate(3deg); }
  262. 50% { -webkit-transform: rotate(0deg); }
  263. 75% { -webkit-transform: rotate(-3deg); }
  264. }
  265. /* This is the element that we apply the animation to. */
  266. li#add_your_site {
  267. -webkit-animation-name: example;
  268. -webkit-animation-duration: 0.4s;
  269. -webkit-animation-timing-function: ease; /* ease is the default */
  270. -webkit-animation-delay: 0s; /* 0 is the default */
  271. -webkit-animation-iteration-count: infinite; /* 1 is the default */
  272. -webkit-animation-direction: alternate; /* normal is the default */
  273. }
  274. A {
  275. color:#2557b4;
  276. text-decoration:none;
  277. }
  278. A:hover {
  279. text-decoration:underline;
  280. }
  281. #footer {
  282. height:40px;
  283. position:relative;
  284. overflow:hidden;
  285. background:url(images/bottombar.png) repeat-x 0 0;
  286. position:relative;
  287. margin-top:40px;
  288. }
  289. UL.menu-footer {
  290. padding:0;
  291. margin:8px 11px 0 0;
  292. list-style-type:none;
  293. float:right;
  294. }
  295. UL.menu-footer LI {
  296. color:white;
  297. font-family:Arial;
  298. font-size:12px;
  299. display:inline-block;
  300. margin:0 1px;
  301. }
  302. UL.menu-footer LI A {
  303. color:#8dd0ff;
  304. text-decoration:none;
  305. }
  306. UL.menu-footer LI A:hover {
  307. text-decoration:underline;
  308. }
  309. .nav-pills.nav {
  310. margin: 10px 0 25px 0;
  311. padding: 0;
  312. border-radius: 5px;
  313. border: 1px solid #d7d7d7;
  314. background: #eeeeee;
  315. background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  316. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
  317. background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  318. background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  319. background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  320. background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
  321. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
  322. overflow: hidden;
  323. }
  324. .nav-pills > .active > a, .nav-pills > .active > a:hover {
  325. color: white;
  326. background-color: #555;
  327. box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
  328. text-shadow: 0px 0px 3px #000;
  329. }
  330. .nav-tabs > li > a, .nav-pills > li > a {
  331. padding-right: 17px;
  332. padding-left: 17px;
  333. border-right: 1px solid #bbb;
  334. border-radius: 0;
  335. margin: 0;
  336. line-height: 25px;
  337. font-size: 14px;
  338. color: #333;
  339. text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  340. box-shadow: 0 0 1px rgba(255, 255, 255, 1);
  341. -moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
  342. -webkit-transition: background 0.2s;
  343. -moz-transition: background 0.2s;
  344. }
  345. .nav.nav-pills li:first-child > a {
  346. padding-left: 28px;
  347. padding-right: 28px;
  348. }
  349. .nav.nav-pills li:first-child > a > img {
  350. width: 34px;
  351. }
  352. .nav.nav-pills li:last-child > a {
  353. border-right: none;
  354. box-shadow: none;
  355. -moz-box-shadow: none;
  356. }
  357. .tab-content {
  358. margin-bottom: 50px;
  359. }
  360. .tab-content > .active, .pill-content > .active {
  361. padding: 25px 30px;
  362. }
  363. #top_container, .tab-content > .active, .pill-content > .active {
  364. border: 1px solid #DDD;
  365. border-radius: 5px;
  366. -moz-border-radius: 5px;
  367. }
  368. .tab-content > .active, .pill-content > .active {
  369. background: rgba(255, 255, 255, 0.7);
  370. }
  371. pre .xml .javascript, pre .xml .css {
  372. opacity: 1;
  373. }
  374. #embed_link {
  375. text-align: right;
  376. padding-top: 0;
  377. }
  378. #embed_link a {
  379. color: #059C05;
  380. font-weight: 100;
  381. font-family: helvetica;
  382. font-size: 13px;
  383. display: inline-block;
  384. padding: 2px 10px;
  385. background: #f4f4f4;
  386. border: 1px solid #ddd;
  387. border-top: none;
  388. border-bottom-left-radius: 4px;
  389. border-bottom-right-radius: 4px;
  390. text-shadow: 0px 1px 0px rgba(255, 255, 255, 1);
  391. text-decoration: none;
  392. }
  393. p.highlight_note {
  394. padding: 8px 35px 8px 14px;
  395. margin-top: 10px;
  396. color: #A0762E;
  397. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  398. background-color: #FCF8E3;
  399. border: 1px solid #CA9C44;
  400. -webkit-border-radius: 4px;
  401. -moz-border-radius: 4px;
  402. border-radius: 4px;
  403. }
  404. p.highlight_note a {
  405. color: #537CC7;
  406. }
  407. .prod_no_image {
  408. position: relative; left: -10px; top: -12px;
  409. }
  410. #api {
  411. padding: 0;
  412. }
  413. /*https://github.com/twitter/bootstrap/issues/5262*/
  414. img {
  415. max-width: none;
  416. }
  417. .text-logo{
  418. color: black;
  419. font-size: 24px;
  420. font-weight: lighter;
  421. margin-top: 23px;
  422. text-align: center;
  423. text-shadow: 1px 17px 2px gray, 1px 1px 2px gray;
  424. }
  425. .menu-list>li>img {
  426. position: relative;
  427. }
  428. .rotating-logo {
  429. -webkit-transform: rotate(0deg);
  430. transform: rotate(0deg);
  431. -webkit-transition: all 0.5s ease-out;
  432. transition: all 0.5s ease-out;
  433. }
  434. .rotating-logo:hover {
  435. -webkit-transform: rotate(360deg);
  436. transform: rotate(360deg);
  437. -webkit-transition: all 0.5s ease-in-out;
  438. transition: all 0.5s ease-in-out;
  439. }