ui.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. .stroke{
  2. text-decoration: line-through;
  3. }
  4. .underline{
  5. text-decoration: underline;
  6. }
  7. .bold{
  8. font-weight: bold;
  9. }
  10. .italic{
  11. font-style: italic;
  12. }
  13. input[type=button] {
  14. font-weight: bold;
  15. color: #cccccc;
  16. background-color: #555555;
  17. border: 0.143em solid #bbbbbb;
  18. border-radius: 0.429em;
  19. padding: 0.5em;
  20. text-shadow: 0 0 0.75em #000000;
  21. cursor: pointer;
  22. }
  23. /* Links */
  24. a{
  25. color: #6040a8;
  26. text-shadow: 0 0 0.5em #7799ff;
  27. text-decoration: none;
  28. transition: all .3s ease-in-out;
  29. }
  30. a:hover{
  31. color: #301075;
  32. text-shadow: 0 0 0.4em #ffffff;
  33. text-decoration: underline;
  34. }
  35. /* Icon for slider sections */
  36. img.slid{
  37. height: 1em;
  38. width: 1em;
  39. }
  40. /* Elements that should have the cursor as pointer */
  41. .pointer{
  42. cursor: pointer;
  43. }
  44. /* Body */
  45. body{
  46. color: #000000;
  47. margin: 0;
  48. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#95f78a+0,ffffff+100 */
  49. background: #95f78a; /* Old browsers */
  50. background: -moz-linear-gradient(top, #95f78a 0%, #ffffff 100%); /* FF3.6+ */
  51. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#95f78a), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  52. background: -webkit-linear-gradient(top, #95f78a 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  53. background: -o-linear-gradient(top, #95f78a 0%,#ffffff 100%); /* Opera 11.10+ */
  54. background: -ms-linear-gradient(top, #95f78a 0%,#ffffff 100%); /* IE10+ */
  55. background: linear-gradient(to bottom, #95f78a 0%,#ffffff 100%); /* W3C */
  56. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95f78a', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  57. }
  58. /* Header */
  59. div#header{
  60. margin: -1em auto 1em auto;
  61. padding: 1em 0 0 0;
  62. width: 95%;
  63. max-width: 80em;
  64. background-color: #aaaaaa;
  65. border-radius: 0 0 1em 1em;
  66. border: 1px solid #333333;
  67. box-shadow: 0 0 2em #555555;
  68. }
  69. /* Main image of the header, contains the logo */
  70. div#header img{
  71. display: inline-block;
  72. width: 10%;
  73. margin: 0;
  74. padding: 1%;
  75. vertical-align: middle;
  76. -webkit-filter: drop-shadow(0 0 0.6em #000000);
  77. filter: url(#drop-shadow);
  78. -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
  79. filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
  80. }
  81. /* Section of the header containing links to sections */
  82. div#header_menu{
  83. display: inline-block;
  84. vertical-align: middle;
  85. width: 85%;
  86. background-color: #ccffcc;
  87. border-radius: 0.5em;
  88. border: 0.2em solid #99cc99;
  89. }
  90. /* Table with the links to the sections */
  91. div#header_menu table{
  92. display: table;
  93. margin: auto 0 auto 0;
  94. width: 100%;
  95. border-collapse: collapse;
  96. border-spacing: 0;
  97. }
  98. div#header_menu table tbody{
  99. width: 100%;
  100. }
  101. div#header_menu table tbody tr{
  102. width: 100%;
  103. }
  104. /* containers of the section links */
  105. div#header_menu table td{
  106. width: 12%;
  107. text-align: center;
  108. transition: all .3s ease-in-out;
  109. }
  110. div#header_menu table td:hover{
  111. background-color: #88aa88;
  112. }
  113. div#header_menu table a{
  114. display: inline-block;
  115. font-weight: bold;
  116. font-size: 115%;
  117. width: 100%;
  118. padding-top: 0.8em;
  119. padding-bottom: 0.8em;
  120. }
  121. /* Footer */
  122. div#footer{
  123. width: 100%;
  124. }
  125. div#footer table{
  126. width: 100%;
  127. }
  128. div#footer table td{
  129. width: 33%;
  130. text-align: center;
  131. }
  132. /* Content of the page */
  133. div#content{
  134. width: 90%;
  135. margin-left: auto;
  136. margin-right: auto;
  137. }
  138. /* Images for language selection */
  139. img.lang{
  140. height: 1em;
  141. margin: 0.5em;
  142. border-radius: 0.2em;
  143. border: 0.15em solid #222222;
  144. cursor: pointer;
  145. box-shadow: 0 0 1em #333333;
  146. }
  147. /* App link image in the footer */
  148. img.app{
  149. height: 3em;
  150. margin: 0.5em;
  151. border-radius: 0.4em;
  152. border: 0.15em solid #aaaaaa;
  153. cursor: pointer;
  154. box-shadow: 0 0 0.5em #666666;
  155. }
  156. /* Each of the social links in the footer */
  157. img.footer_social_icon{
  158. height: 2.4em;
  159. margin: 0.15em;
  160. transition: all .3s ease-in-out;
  161. -webkit-filter: drop-shadow(0 0 0.2em #444444);
  162. filter: url(#drop-shadow);
  163. -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
  164. filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
  165. }
  166. img.footer_social_icon:hover{
  167. -webkit-filter: drop-shadow(0 0 0.4em #444444);
  168. }
  169. /* Content */
  170. div#content{
  171. margin: 3em auto auto auto;
  172. width: 90%;
  173. max-width: 80em;
  174. }
  175. /* Sections */
  176. div.section{
  177. background-color: #999999;
  178. border-radius: 0.2em;
  179. padding: 0.4em;
  180. border: 0.1em solid #333333;
  181. box-shadow: 0 0 1em #555555;
  182. }
  183. /* Title for each section */
  184. .section_title{
  185. font-style: bold;
  186. }
  187. /* Entries */
  188. div.entry{
  189. background-color: #cccccc;
  190. border-radius: 0.2em;
  191. padding: 0.4em;
  192. margin: 0.2em;
  193. border: 0.1em solid #333333;
  194. box-shadow: 0 0 1em #222222;
  195. transition: all .3s ease-in-out;
  196. }
  197. div.entry:hover{
  198. background-color: #dddddd;
  199. }
  200. div#member_action input{
  201. margin: 0.5em 2em 0.5em 2em;
  202. }
  203. /* Toolbar styles */
  204. div#toolbar{
  205. background-color: #000000;
  206. margin: 0;
  207. width: 100%;
  208. height: 2em;
  209. padding: 0;
  210. }
  211. div#toolbar img{
  212. height: 1.6em;
  213. vertical-align: center;
  214. }
  215. div#toolbar table{
  216. width: 90%;
  217. height: 100%;
  218. margin-left: auto;
  219. margin-right: auto;
  220. border-spacing: 0;
  221. border-collapse: collapse;
  222. margin: 0;
  223. table-layout: fixed;
  224. }
  225. div#toolbar td{
  226. color: #dddddd;
  227. font-weight: bold;
  228. text-align: center;
  229. }
  230. div#toolbar td a{
  231. color: #dddddd;
  232. font-weight: bold;
  233. text-align: center;
  234. text-shadow: none;
  235. text-decoration: none;
  236. transition: all .3s ease-in-out;
  237. }
  238. div.secondary_toolbar{
  239. background-color: #333333;
  240. margin: 0;
  241. display: none;
  242. width: 100%;
  243. height: 2em;
  244. }
  245. div.secondary_toolbar table{
  246. width: 90%;
  247. margin-left: auto;
  248. margin-right: auto;
  249. table-layout: fixed;
  250. }
  251. div.secondary_toolbar td{
  252. text-align: center;
  253. }
  254. div.secondary_toolbar td a{
  255. color: #dddddd;
  256. font-weight: bold;
  257. text-align: center;
  258. text-shadow: none;
  259. text-decoration: none;
  260. transition: all .3s ease-in-out;
  261. }
  262. div.secondary_toolbar td a:hover{
  263. color: #dddddd;
  264. text-shadow: none;
  265. text-decoration: none;
  266. }
  267. table.translation_table{
  268. border-collapse: collapse;
  269. }
  270. table.translation_table th{
  271. font-weight: bold;
  272. font-size: 1.1em;
  273. border: 1px solid #000000;
  274. }
  275. table.translation_table td{
  276. border: 1px solid #000000;
  277. }