1
0

style.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. /* CSS Reset */
  2. html,body {
  3. margin: 0;
  4. padding: 0;
  5. font: 16px/1.6em Georgia,Times,Serif;
  6. }
  7. /* Layout */
  8. .clear {clear:both}
  9. .main {
  10. margin: 0 auto;
  11. width: 960px;
  12. }
  13. #header {
  14. background: transparent url("../images/background_header.png") top center repeat-x;
  15. height: 210px;
  16. }
  17. #header .main {
  18. background: url("../images/balloon_header.png") no-repeat scroll right bottom;
  19. height: 210px;
  20. width: 973px;
  21. }
  22. #menu {
  23. background: #d0def1;
  24. border-top: 1px solid #aaa;
  25. border-bottom: 1px solid #aaa;
  26. position: absolute;
  27. width: 100%;
  28. height: 36px;
  29. top: 210px;
  30. font-family: arial,helvetica,sans;
  31. z-index: 1;
  32. }
  33. #menu ul {
  34. padding: 5px 0;
  35. margin: 0;
  36. }
  37. #menu li {
  38. display: inline;
  39. padding: 1px;
  40. }
  41. #menu a {
  42. color: #515a6a;
  43. text-decoration: none;
  44. padding: 10px 15px;
  45. }
  46. #menu a:hover {
  47. color: #072d5a;
  48. text-decoration: underline;
  49. }
  50. #menu .selected a,
  51. #menu a:hover {
  52. color: #072d5a;
  53. text-decoration: none;
  54. }
  55. #menu #dropdown {
  56. float: left;
  57. margin-left: 220px;
  58. background: #d0def1;
  59. border: 1px solid #aaa;
  60. border-top: 0 none;
  61. width: auto;
  62. display: none;
  63. }
  64. #menu #dropdown li {
  65. display: block;
  66. padding: 5px 0;
  67. }
  68. #content .main {
  69. width: 980px;
  70. margin: 0 auto;
  71. }
  72. .box {
  73. padding: 30px;
  74. margin: 40px 0;
  75. color: #777;
  76. box-shadow: 0 0 8px #aaa;
  77. -moz-box-shadow: 0 0 8px #aaa;
  78. -webkit-box-shadow: 0 0 8px #aaa;
  79. border-radius: 10px;
  80. -moz-border-radius: 10px;
  81. -webkit-border-radius: 10px;
  82. background: #fff url('../images/background_box.png') bottom left repeat-x;
  83. }
  84. .box a {
  85. color: #5b9ff2;
  86. text-decoration: none;
  87. }
  88. .box a:hover {
  89. text-decoration: underline;
  90. }
  91. .box h2 {
  92. font: 26px Georgia, Times, serif;
  93. color: #242424;
  94. margin: -30px;
  95. margin-bottom: 0px;
  96. padding: 15px;
  97. background: #eee;
  98. border-bottom: 1px solid #ccc;
  99. border-top-left-radius: 10px;
  100. border-top-right-radius: 10px;
  101. -webkit-border-top-left-radius: 10px;
  102. -webkit-border-top-right-radius: 10px;
  103. -moz-border-radius-topleft: 10px;
  104. -moz-border-radius-topright: 10px;
  105. }
  106. .box.first {
  107. padding-top: 0;
  108. margin-top: 70px;
  109. }
  110. .box.first, .box.last {
  111. background-image: none;
  112. }
  113. .box.first h1 {
  114. padding-bottom: 15px;
  115. }
  116. .box.first .content .right img {
  117. margin-right: -30px
  118. }
  119. .box .content .right {
  120. float: right;
  121. }
  122. .box .content .left {
  123. float: left;
  124. width: 420px;
  125. }
  126. .doc .content {
  127. width: 620px;
  128. }
  129. .box h1 {
  130. text-align: center;
  131. margin-top: 0;
  132. padding-top: 0;
  133. }
  134. .doc h3 a {
  135. color: #ccc;
  136. }
  137. .doc h3 a:hover {
  138. color: #0088CC;
  139. }
  140. .box .content p, h3 {
  141. font: 16px Georgia, Times, Serif;
  142. line-height: 1.6em;
  143. padding: 10px 0;
  144. margin: 0;
  145. }
  146. .box .content h3 {
  147. font-size: 20px;
  148. padding-bottom: 2px;
  149. padding-top: 30px;
  150. color: #272727;
  151. }
  152. .box .content h4 {
  153. font: 18px Georgia, Times, serif;
  154. color: #272727;
  155. padding-top: 1em;
  156. margin-top: 10px;
  157. margin-bottom: 5px;
  158. }
  159. .box .content pre {
  160. border: 1px solid #ccc;
  161. background-color: #f5f5f5;
  162. border-radius: 10px;
  163. -moz-border-radius: 10px;
  164. -webkit-border-radius: 10px;
  165. padding: 1em;
  166. line-height: 1.5em;
  167. font-size: 14px;
  168. color: #333;
  169. }
  170. .box .content code {
  171. font-size: 14px;
  172. color: #333;
  173. margin: 0;
  174. padding: 0 3px;
  175. border: 1px solid #bbb;
  176. background: #f1f1f1;
  177. }
  178. .box .content pre code {
  179. background: transparent;
  180. border: 0 none;
  181. color: #333;
  182. }
  183. .box .content pre .prompt {
  184. color: #aaa;
  185. }
  186. .box .content pre .kbd {
  187. font-weight: bold;
  188. }
  189. .box .content pre .kbd.var {
  190. font-weight: normal;
  191. font-style: italic;
  192. }
  193. .box .content .tip {
  194. border: 1px solid #565656;
  195. border-radius: 10px;
  196. -moz-border-radius: 10px;
  197. -webkit-border-radius: 10px;
  198. padding: 1em;
  199. }
  200. .box .top img {
  201. margin: 30px 0 0 70px;
  202. }
  203. .box.last .content .left {
  204. width: 560px;
  205. }
  206. .box.last .content .left {
  207. margin-left: -30px;
  208. margin-bottom: -32px
  209. }
  210. .box.doc {
  211. margin-top: 70px;
  212. position: relative;
  213. width: 630px;
  214. }
  215. .box .content .warning,
  216. .box .content .information {
  217. position: absolute;
  218. right: -250px;
  219. margin-top: 20px;
  220. width: 200px;
  221. font-size: 14px;
  222. color: #222;
  223. font-family: arial,helevetica,sans;
  224. padding: 10px;
  225. opacity: 0.7;
  226. -moz-transition: opacity 0.3s;
  227. -webkit-transition: opacity 0.3s;
  228. -o-transition: opacity 0.3s;
  229. }
  230. .box .content .warning:hover,
  231. .box .content .information:hover {
  232. opacity: 1;
  233. }
  234. .box .content .information:before,
  235. .box .content .warning:before {
  236. font-family: Georgia, sans-serif;
  237. font-size: 28px;
  238. font-style: italic;
  239. position: absolute;
  240. right: 0;
  241. top: -21px;
  242. opacity: 0.5;
  243. }
  244. .box .content .information:before {
  245. content: "Info";
  246. color: #a6b1f3;
  247. }
  248. .box .content .warning:before {
  249. content: "Warning";
  250. color: #e869e7;
  251. }
  252. .box .content .information {
  253. background-color: #e4e8ff;
  254. }
  255. .box .content .warning {
  256. background-color: #f8ccf8;
  257. }
  258. .box .content .code {
  259. background: #565656;
  260. border-radius: 10px;
  261. -moz-border-radius: 10px;
  262. -webkit-border-radius: 10px;
  263. padding: 7px;
  264. }
  265. .box .content .code p {
  266. color: white;
  267. }
  268. .box.first .content .left h2 {
  269. font: 30px regular Georgia, Times, serif;
  270. color: #272727;
  271. margin-top: 10px;
  272. }
  273. .box.first .content .left ul {
  274. padding-left: 10px;
  275. }
  276. .box.last .content .right {
  277. width: 300px;
  278. }
  279. .doc .box.first .content .right {
  280. float: right;
  281. width: 230px;
  282. margin-top: 20px;
  283. padding: 10px;
  284. background-color: #ececec;
  285. border: 1px solid #e1e1e1;
  286. border-radius: 10px;
  287. -moz-border-radius: 10px;
  288. -webkit-border-radius: 10px;
  289. }
  290. .doc .box.first .content .right ol,
  291. .doc .box.first .content .right ol a {
  292. font: 18px Georgia, Time, serif;
  293. color: #03388a;
  294. }
  295. .doc .box.first .content .right ol {
  296. padding: 0 0 7px 35px;
  297. }
  298. .doc .box.first .content .right ol li{
  299. padding: 7px 0 7px 0;
  300. }
  301. .doc .box.first .content .right ul a {
  302. font: 15px Helvetica, Arial, sans;
  303. color: black;
  304. }
  305. .doc .box.first .content .right ul li {
  306. list-style-type: none;
  307. padding: 2px 0 2px 0;
  308. }
  309. .trysmalltalk {
  310. text-align: right;
  311. padding: 10px;
  312. }
  313. .trysmalltalk textarea {
  314. width: 850px;
  315. height: 300px;
  316. padding: 20px;
  317. background-color: #eaeaea;
  318. border: 1px solid #d3d3d3;
  319. border-radius: 10px;
  320. -moz-border-radius: 10px;
  321. -webkit-border-radius: 10px;
  322. font: 16px monaco, courier, monospace;
  323. color: 434343;
  324. line-height: 1.6em;
  325. }
  326. .trysmalltalk button {
  327. margin: 20px 0 0 5px;
  328. padding: 4px;
  329. background: #75aef5;
  330. border: 1px solid #7caeed;
  331. border-radius: 8px;
  332. -moz-border-radius: 8px;
  333. -webkit-border-radius: 8px;
  334. color: white;
  335. cursor: pointer;
  336. }
  337. .trysmalltalk .print-it {
  338. background: #bebebe;
  339. border: 1px solid #b2b2b2;
  340. }
  341. .trysmalltalk button:hover {
  342. background: #3180e1;
  343. border: 1px solid #518cd6;
  344. }
  345. #counters {
  346. border: 2px dashed;
  347. text-align: center;
  348. padding: 10px;
  349. margin: 10px;
  350. background: #ffffcc;
  351. font-family: arial,helvetica,sans;
  352. }
  353. #counters h1 {
  354. margin: 10px;
  355. color: #333;
  356. }
  357. .trysmalltalk .print-it:hover {
  358. background: #898989;
  359. border: 1px solid #919293;
  360. }
  361. #footer {
  362. height: 160px;
  363. margin: 0 auto;
  364. }
  365. #footer .main {
  366. border-top: 1px dashed #bbb;
  367. padding-top: 10px;
  368. }
  369. #footer p {
  370. text-align: center;
  371. line-height: 1em;
  372. color: #aaa;
  373. }
  374. #footer a {
  375. color: #3faae1;
  376. text-decoration: none;
  377. }
  378. #footer a:hover {
  379. text-decoration: underline;
  380. }