slidify.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Source+Code+Pro:500|Open+Sans|Oswald);
  2. /* Styles for Table of Contents */
  3. #io2012-toc {
  4. position: absolute;
  5. top:0;
  6. left:10px;
  7. z-index: 999;
  8. }
  9. #io2012-toc a{
  10. border-bottom: none;
  11. }
  12. #io2012-toc .nav-pills > .active > a{
  13. background-color: darkslategray;
  14. color: yellow;
  15. }
  16. #io2012-toc li {
  17. margin-bottom: 0em;
  18. }
  19. #io2012-toc li.current {
  20. background-color: yellow;
  21. }
  22. .license {
  23. font-size: 14px;
  24. color: #a9a9a9;
  25. position: absolute;
  26. bottom: 30px;
  27. left: 60px;
  28. }
  29. /* Styles for Title Slide */
  30. .title-slide hgroup > h1{
  31. font-family: 'Oswald', sans-serif;
  32. }
  33. .title-slide hgroup > h2{
  34. font-family: 'Oswald', 'Calibri', sans-serif;
  35. }
  36. /* Fonts and Spacing */
  37. article p, article li, article li.build, section p, section li{
  38. font-family: 'Open Sans','Helvetica', 'Crimson Text', 'Garamond', 'Palatino', sans-serif;
  39. text-align: justify;
  40. font-size:22px;
  41. line-height: 1.5em;
  42. color: #444;
  43. }
  44. slide:not(.segue) h2{
  45. font-family: 'Calibri', Arial, sans-serif;
  46. font-size: 52px;
  47. font-style: normal;
  48. font-weight: bold;
  49. text-transform: normal;
  50. letter-spacing: -2px;
  51. line-height: 1.2em;
  52. /* color: #193441;*/
  53. /* color: #02574D;*/
  54. color: #CC2904;
  55. }
  56. /* Reduce Space between Title and Body */
  57. slides > slide > hgroup + article {
  58. margin-top: 15px;
  59. }
  60. /* Remove Border, Margins and Padding from iframe */
  61. iframe {
  62. border: none;
  63. margin: 0;
  64. padding: 0;
  65. }
  66. /* Knitr Images */
  67. .rimage.left {
  68. text-align: left;
  69. }
  70. .rimage.right {
  71. text-align: right;
  72. }
  73. .rimage.center {
  74. text-align: center;
  75. }
  76. /* Quotes and Shout (for io2012, custom) */
  77. article q {
  78. font-family: 'Crimson Text', sans-serif;
  79. }
  80. q {
  81. display: block;
  82. font-size: 44px;
  83. line-height: 56px;
  84. margin-left: 50px;
  85. margin-top: 100px;
  86. margin-right: 150px;
  87. }
  88. q::before {
  89. content: '“';
  90. position: absolute;
  91. display: inline-block;
  92. margin-left: -2.1em;
  93. width: 2em;
  94. text-align: right;
  95. font-size: 90px;
  96. color: silver;
  97. }
  98. q::after {
  99. content: '”';
  100. position: absolute;
  101. margin-left: .1em;
  102. font-size: 90px;
  103. color: silver;
  104. }
  105. div.author {
  106. text-align: right;
  107. font-size: 40px;
  108. margin-top: 20px;
  109. margin-right: 150px;
  110. }
  111. div.author::before {
  112. content: '—';
  113. }
  114. q.shout:before {
  115. content: '';
  116. position: absolute;
  117. margin-left: -0.5em;
  118. }
  119. q.shout:after {
  120. content: '';
  121. position: absolute;
  122. margin-left: 0.1em;
  123. }
  124. /* Tables */
  125. table caption{
  126. margin-top: 20pt;
  127. font-weight: normal;
  128. font-family: "Trebuchet MS", Garuda, sans-serif;
  129. }
  130. table th {
  131. text-transform: capitalize;
  132. }
  133. /* Tables */
  134. table {
  135. border: none;
  136. width: 100%;
  137. border-collapse: collapse;
  138. font-size: 24px;
  139. line-height: 32px;
  140. font-family: 'Trebuchet MS';
  141. font-weight: bolder;
  142. color: rgb(102, 102, 102);
  143. }
  144. table thead {
  145. border-top: 1px solid #BFBEAD;
  146. border-bottom: 1px solid #BFBEAD;
  147. }
  148. table th, table td, table caption {
  149. margin: 0;
  150. padding: 2pt 6pt;
  151. text-align: left;
  152. vertical-align: top;
  153. }
  154. table th {
  155. background: #CFCEBD;
  156. color: #575400;
  157. text-transform: uppercase;
  158. }
  159. table td {
  160. border-bottom: 1px solid #CFCEBD;
  161. }
  162. table tr:nth-child(2n+1) {
  163. /* background: #E8F2FF; */
  164. background: #EFEEDD;
  165. }
  166. /* Styling for Ordered Lists (only for io2012) */
  167. ol {
  168. margin-left: 1.2em;
  169. margin-bottom: 1em;
  170. postion: relative;
  171. }
  172. ol li {
  173. margin-bottom: 0.5em;
  174. font-family: "Open Sans";
  175. }
  176. ol li ol {
  177. margin-left: 0.5em;
  178. margin-bottom: 0;
  179. }
  180. ol, ul {
  181. margin-top: .5em;
  182. }
  183. ol {
  184. list-style-type: decimal;
  185. }
  186. /*Github Ribbon Test*/
  187. /* Source: https://github.com/dciccale/css3-github-ribbon */
  188. /* Define classes for example, definition, problem etc. */
  189. /* Choose meaningful colors for background and text */
  190. .example {
  191. background-color: #121621;
  192. top: 1.2em;
  193. right: -3.2em;
  194. -webkit-transform: rotate(45deg);
  195. -moz-transform: rotate(45deg);
  196. transform: rotate(45deg);
  197. -webkit-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  198. -moz-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  199. box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  200. color: #FF0;
  201. display: block;
  202. padding: .6em 3.5em;
  203. position: absolute;
  204. font: bold .82em sans-serif;
  205. text-align: center;
  206. text-decoration: none;
  207. text-shadow: 1px -1px 8px rgba(0,0,0,0.60);
  208. -webkit-user-select: none;
  209. -moz-user-select: none;
  210. user-select: none;
  211. }
  212. .definition {
  213. background-color: #a00;
  214. top: 1.2em;
  215. right: -3.2em;
  216. -webkit-transform: rotate(45deg);
  217. -moz-transform: rotate(45deg);
  218. transform: rotate(45deg);
  219. -webkit-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  220. -moz-box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  221. box-shadow: 0 0 0 1px #1d212e inset,0 0 2px 1px #fff inset,0 0 1em #888;
  222. color: #FFF;
  223. display: block;
  224. padding: .6em 3.5em;
  225. position: absolute;
  226. font: bold .82em sans-serif;
  227. text-align: center;
  228. text-decoration: none;
  229. text-shadow: 1px -1px 8px rgba(0,0,0,0.60);
  230. -webkit-user-select: none;
  231. -moz-user-select: none;
  232. user-select: none;
  233. }
  234. /* Pasted from Custom.css */
  235. aside.gbar img {
  236. width: 175px;
  237. }
  238. div.modal-body pre{
  239. width: 95%;
  240. left: 0px;
  241. }
  242. .pagination {
  243. position: absolute;
  244. bottom: -5px;
  245. left:110px;
  246. }
  247. .pagination ul li:before {
  248. content: "";
  249. }
  250. body {
  251. font-family: "Open Sans";
  252. color: #444;
  253. }
  254. p {
  255. text-align: justify;
  256. line-height: 1.5em;
  257. }
  258. /* Place Video on Top Right */
  259. /* FIXME: Move CSS to css/popcorn.css */
  260. section.video {
  261. position: absolute;
  262. top: 0;
  263. right: 0;
  264. z-index: 1000;
  265. }
  266. /* Smaller code fonts in modal popup */
  267. .modal pre code {
  268. font-size: 16px;
  269. }
  270. img.center {
  271. display: block;
  272. margin: auto auto;
  273. }
  274. body {
  275. background-color: #000;
  276. }
  277. .quiz-option label{
  278. display: inline;
  279. font-size: 1em;
  280. }
  281. slide.segue h2{
  282. font-family: "Open Sans Condensed";
  283. font-weight: 700;
  284. }
  285. slide:not(.segue) h2{
  286. font-family: "Open Sans Condensed";
  287. font-weight: 700;
  288. color: darkslategray;
  289. }
  290. article p {
  291. font-family: "Open Sans"
  292. }
  293. code {
  294. font-size: 100%;
  295. font-family: "Source Code Pro", monospace;
  296. color: darkred;
  297. }
  298. pre code {
  299. font-weight: 500;
  300. -webkit-border-radius: 5px;
  301. border-radius: 5px;
  302. }
  303. #glimmer iframe {
  304. width: 100%;
  305. }
  306. .title-slide {
  307. background-color: #CBE7A5; /* #EDE0CF; ; #CA9F9D*/
  308. /* background-image:url(http://goo.gl/EpXln); */
  309. }
  310. .title-slide hgroup > h1{
  311. font-family: 'Oswald', 'Helvetica', sanserif;
  312. }
  313. .title-slide hgroup > h1,
  314. .title-slide hgroup > h2 {
  315. color: #535E43 ; /* ; #EF5150*/
  316. }