home *** CD-ROM | disk | FTP | other *** search
/ Orthodox Religion Class (2nd Semester) / ReligieCls1Sem2.iso / css / default.css < prev    next >
Encoding:
Cascading Style Sheet File  |  2015-01-20  |  4.7 KB  |  297 lines
  1. /* General Demo Style */
  2. /* @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); */
  3.  
  4. @font-face {
  5.     font-family: 'codropsicons';
  6.     src:url('../fonts/codropsicons/codropsicons.eot');
  7.     src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
  8.         url('../fonts/codropsicons/codropsicons.woff') format('woff'),
  9.         url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
  10.         url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
  11.     font-weight: normal;
  12.     font-style: normal;
  13. }
  14.  
  15. *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  16. body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
  17.  
  18. /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  19. .clearfix:before, .clearfix:after { content: " "; display: table; }
  20. .clearfix:after { clear: both; }
  21.  
  22. body {
  23.     font-family: 'Lato', Calibri, Arial, sans-serif;
  24.     color: #777;
  25.     background: #f6f6f6;
  26. }
  27.  
  28. a {
  29.     color: #555;
  30.     text-decoration: none;
  31.     outline: none;
  32. }
  33.  
  34. a:hover,
  35. a:active {
  36.     color: #777;
  37. }
  38.  
  39. a img {
  40.     border: none;
  41. }
  42.  
  43. /* Header Style */
  44. .main,
  45. .container > header {
  46.     margin: 0 auto;
  47.     padding: 2em;
  48. }
  49.  
  50. .container {
  51.     height: 100%;
  52. }
  53.  
  54. .container > header {
  55.     text-align: center;
  56.     background: rgba(0,0,0,0.01);
  57. }
  58.  
  59. .container > header h1 {
  60.     font-size: 2.625em;
  61.     line-height: 1.3;
  62.     margin: 0;
  63.     font-weight: 300;
  64. }
  65.  
  66. .container > header span {
  67.     display: block;
  68.     font-size: 60%;
  69.     opacity: 0.3;
  70.     padding: 0 0 0.6em 0.1em;
  71. }
  72.  
  73. /* Main Content */
  74. .main {
  75.     max-width: 69em;
  76. }
  77.  
  78. .column {
  79.     float: left;
  80.     width: 50%;
  81.     padding: 0 2em;
  82.     min-height: 300px;
  83.     position: relative;
  84. }
  85.  
  86. .column:nth-child(2) {
  87.     box-shadow: -1px 0 0 rgba(0,0,0,0.1);
  88. }
  89.  
  90. .column p {
  91.     font-weight: 300;
  92.     font-size: 2em;
  93.     padding: 0;
  94.     margin: 0;
  95.     text-align: right;
  96.     line-height: 1.5;
  97. }
  98.  
  99. /* To Navigation Style */
  100. .codrops-top {
  101.     background: #fff;
  102.     background: rgba(255, 255, 255, 0.6);
  103.     text-transform: uppercase;
  104.     width: 100%;
  105.     font-size: 0.69em;
  106.     line-height: 2.2;
  107. }
  108.  
  109. .codrops-top a {
  110.     padding: 0 1em;
  111.     letter-spacing: 0.1em;
  112.     color: #888;
  113.     display: inline-block;
  114. }
  115.  
  116. .codrops-top a:hover {
  117.     background: rgba(255,255,255,0.95);
  118.     color: #333;
  119. }
  120.  
  121. .codrops-top span.right {
  122.     float: right;
  123. }
  124.  
  125. .codrops-top span.right a {
  126.     float: left;
  127.     display: block;
  128. }
  129.  
  130. .codrops-icon:before {
  131.     font-family: 'codropsicons';
  132.     margin: 0 4px;
  133.     speak: none;
  134.     font-style: normal;
  135.     font-weight: normal;
  136.     font-variant: normal;
  137.     text-transform: none;
  138.     line-height: 1;
  139.     -webkit-font-smoothing: antialiased;
  140. }
  141.  
  142. .codrops-icon-drop:before {
  143.     content: "\e001";
  144. }
  145.  
  146. .codrops-icon-prev:before {
  147.     content: "\e004";
  148. }
  149.  
  150. .codrops-icon-archive:before {
  151.     content: "\e002";
  152. }
  153.  
  154. .codrops-icon-next:before {
  155.     content: "\e000";
  156. }
  157.  
  158. .codrops-icon-about:before {
  159.     content: "\e003";
  160. }
  161.  
  162. /* Demo Buttons Style */
  163. .codrops-demos {
  164.     padding-top: 1em;
  165.     font-size: 0.9em;
  166. }
  167.  
  168. .codrops-demos a {
  169.     display: inline-block;
  170.     margin: 0.2em;
  171.     padding: 0.45em 1em;
  172.     background: #999;
  173.     color: #fff;
  174.     font-weight: 700;
  175.     border-radius: 2px;
  176. }
  177.  
  178. .codrops-demos a:hover,
  179. .codrops-demos a.current-demo,
  180. .codrops-demos a.current-demo:hover {
  181.     opacity: 0.6;
  182. }
  183.  
  184. .codrops-nav {
  185.     text-align: center;
  186. }
  187.  
  188. .codrops-nav a {
  189.     display: inline-block;
  190.     margin: 20px auto;
  191.     padding: 0.3em;
  192. }
  193.  
  194. /* Demo Styles */
  195.  
  196. .demo-1 body {
  197.     color: #87968e;
  198.     background: #fff2e3;
  199. }
  200.  
  201. .demo-1 a {
  202.     color: #72b890;
  203. }
  204.  
  205. .demo-1 .codrops-demos a {
  206.     background: #72b890;
  207.     color: #fff;
  208. }
  209.  
  210. .demo-2 body {
  211.     color: #fff;
  212.     background: #c05d8e;
  213. }
  214.  
  215. .demo-2 a {
  216.     color: #d38daf;
  217. }
  218.  
  219. .demo-2 a:hover,
  220. .demo-2 a:active {
  221.     color: #fff;
  222. }
  223.  
  224. .demo-2 .codrops-demos a {
  225.     background: #883b61;
  226.     color: #fff;
  227. }
  228.  
  229. .demo-2 .codrops-top a:hover {
  230.     background: rgba(255,255,255,0.3);
  231.     color: #333;
  232. }
  233.  
  234. .demo-3 body {
  235.     color: #87968e;
  236.     background: #fff2e3;
  237. }
  238.  
  239. .demo-3 a {
  240.     color: #ea5381;
  241. }
  242.  
  243. .demo-3 .codrops-demos a {
  244.     background: #ea5381;
  245.     color: #fff;
  246. }
  247.  
  248. .demo-4 body {
  249.     color: #999;
  250.     background: #fff2e3;
  251.     overflow: hidden;
  252. }
  253.  
  254. .demo-4 a {
  255.     color: #1baede;
  256. }
  257.  
  258. .demo-4 a:hover,
  259. .demo-4 a:active {
  260.     opacity: 0.6;
  261. }
  262.  
  263. .demo-4 .codrops-demos a {
  264.     background: #1baede;
  265.     color: #fff;
  266. }
  267.  
  268. .demo-5 body {
  269.     background: #fffbd6;
  270. }
  271.  
  272.  
  273. @media screen and (max-width: 46.0625em) {
  274.     .column {
  275.         width: 100%;
  276.         min-width: auto;
  277.         min-height: auto;
  278.         padding: 1em; 
  279.     }
  280.  
  281.     .column p {
  282.         text-align: left;
  283.         font-size: 1.5em;
  284.     }
  285.  
  286.     .column:nth-child(2) {
  287.         box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
  288.     }
  289. }
  290.  
  291. @media screen and (max-width: 25em) {
  292.  
  293.     .codrops-icon span {
  294.         display: none;
  295.     }
  296.  
  297. }