ui.css 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. /******************************************
  2. * Hide elements intended for mobile. *
  3. ******************************************/
  4. .mobile{
  5. display: none;
  6. }
  7. /******************************************
  8. * Fonts used across the page *
  9. ******************************************/
  10. /* Glogal font */
  11. @font-face{
  12. font-family: font;
  13. src: url('/font/FreeSans.ttf')
  14. }
  15. /******************************************
  16. * Styles for html tags, without id or *
  17. * class. *
  18. ******************************************/
  19. /* Links */
  20. a{
  21. color: #4c9ed9;
  22. text-decoration: none;
  23. transition: all .2s ease-in-out;
  24. }
  25. a:hover{
  26. color: #347;
  27. text-shadow: 0 0 0.4em #265885;
  28. text-decoration: underline;
  29. }
  30. /* Fake links */
  31. .fake_a{
  32. color: #4c9ed9;
  33. text-decoration: none;
  34. transition: all .2s ease-in-out;
  35. }
  36. .fake_a:hover{
  37. color: #347;
  38. text-shadow: 0 0 0.4em #265885;
  39. text-decoration: underline;
  40. }
  41. /* Body */
  42. body{
  43. font-family: font;
  44. margin: 0;
  45. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5d3e5+0,e5f4ff+10,e5f4ff+90,b5d3e5+100 */
  46. background: #b5d3e5; /* Old browsers */
  47. background: -moz-linear-gradient(left, #b5d3e5 0%, #e5f4ff 10%, #e5f4ff 90%, #b5d3e5 100%); /* FF3.6-15 */
  48. background: -webkit-linear-gradient(left, #b5d3e5 0%,#e5f4ff 10%,#e5f4ff 90%,#b5d3e5 100%); /* Chrome10-25,Safari5.1-6 */
  49. background: linear-gradient(to right, #b5d3e5 0%,#e5f4ff 10%,#e5f4ff 90%,#b5d3e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  50. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5d3e5', endColorstr='#b5d3e5',GradientType=1 ); /* IE6-9 */
  51. }
  52. /* WARNING: If styles change dhere, make changes on commment scripts */
  53. input[type="text"], input[type="number"], input[type="date"], input[type="password"]{
  54. border-radius: 0.3em;
  55. height: 1.5em;
  56. border: 0.2em solid #0078ff;
  57. color: #002255;
  58. background-color: #ccddff;
  59. margin: 0.1em;
  60. }
  61. input[type="button"], input[type="submit"], input[type="file"], select{
  62. border-radius: 0.3em;
  63. height: 2em;
  64. border: 0.2em solid #0078ff;
  65. font-weight: bold;
  66. color: #ffffff;
  67. background-color: #124567;
  68. cursor: pointer;
  69. margin: 0.1em;
  70. letter-spacing: 0.1em;
  71. }
  72. textarea{
  73. border-radius: 0.3em;
  74. min-height: 2em;
  75. max-height: 15em;
  76. border: 0.2em solid #0078ff;
  77. color: #002255;
  78. background-color: #ccddff;
  79. resize: vertical;
  80. margin: 0.1em;
  81. }
  82. li{
  83. list-style-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQImWNgIBqU//+PWwKGcUoQVECanVgAAJSsH/KywgEfAAAAAElFTkSuQmCC');
  84. }
  85. /******************************************
  86. * Common elements present across the *
  87. * whle site. *
  88. ******************************************/
  89. /* Icon for slider sections */
  90. img.slid{
  91. height: 0.9em;
  92. width: 0.9em;
  93. padding: 0.1em;
  94. cursor: pointer;
  95. vertical-align: middle;
  96. transition: opacity 0.5s ease-in-out;
  97. }
  98. /* Elements that should have the cursor as pointer */
  99. .pointer{
  100. cursor: pointer;
  101. }
  102. /* Elemnts not to be displayed */
  103. .hidden{
  104. display: none;
  105. }
  106. /* Elements with an italic font */
  107. .italic{
  108. font-style: italic;
  109. }
  110. /*Elements with a bold font*/
  111. .bold{
  112. font-weight: bold;
  113. }
  114. /*Stroked elements*/
  115. .stroke{
  116. text-decoration: line-through;
  117. }
  118. /*Underlined elements*/
  119. .underline{
  120. text-decoration: underline;
  121. }
  122. /* Content */
  123. div#content{
  124. margin: 3em auto auto auto;
  125. width: 90%;
  126. max-width: 80em;
  127. min-width: 60em;
  128. }
  129. /* Sections */
  130. div.section{
  131. border-left: 0.1em solid #000011;
  132. border-right: 0.1em solid #000011;
  133. border-bottom: 0.1em solid #000011;
  134. border-radius: 1em;
  135. padding: 0 0 0.5em 0;
  136. background-color: #98c8ff;
  137. -webkit-filter: drop-shadow(0 0 0.4em #000011);
  138. filter: drop-shadow(0 0 0.4em #000011);
  139. -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
  140. filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
  141. }
  142. /* Title for each section */
  143. div.section .section_title{
  144. font-size: 120%;
  145. font-style: bold;
  146. color: #ffffff;
  147. background-color: #0078ff;
  148. padding: 0.5em 2em 0.1em 1.5em;
  149. border-top-left-radius: 0.7em;
  150. border-top-right-radius: 0.7em;
  151. border: 0.1em solid #000011;
  152. margin: 0;
  153. }
  154. /* Entries */
  155. .entry{
  156. background-color: #ffffff;
  157. padding: 0.2em;
  158. margin: 0.4em;
  159. border: 0.1em solid #6D6990;
  160. border-radius: 0.3em;
  161. box-shadow: inset 0 0 0.2em #dde;
  162. transition: all .3s ease-in-out;
  163. }
  164. /******************************************
  165. * Main toolbar. *
  166. ******************************************/
  167. div#member_action input{
  168. margin: 0.5em 2em 0.5em 2em;
  169. }
  170. div#toolbar{
  171. background-color: #000000;
  172. margin: 0;
  173. width: 100%;
  174. height: 2em;
  175. padding: 0;
  176. }
  177. div#toolbar img{
  178. height: 1.6em;
  179. vertical-align: center;
  180. }
  181. div#toolbar table{
  182. width: 90%;
  183. height: 100%;
  184. margin-left: auto;
  185. margin-right: auto;
  186. border-spacing: 0;
  187. border-collapse: collapse;
  188. margin: 0;
  189. table-layout: fixed;
  190. }
  191. div#toolbar td{
  192. color: #dddddd;
  193. font-weight: bold;
  194. text-align: center;
  195. }
  196. div#toolbar td a{
  197. color: #dddddd;
  198. font-weight: bold;
  199. text-align: center;
  200. text-shadow: none;
  201. text-decoration: none;
  202. transition: all .3s ease-in-out;
  203. }
  204. /******************************************
  205. * Secondary toolbars. *
  206. ******************************************/
  207. div.secondary_toolbar{
  208. background-color: #333333;
  209. margin: 0;
  210. display: none;
  211. width: 100%;
  212. height: 2em;
  213. }
  214. div.secondary_toolbar table{
  215. width: 90%;
  216. margin-left: auto;
  217. margin-right: auto;
  218. table-layout: fixed;
  219. }
  220. div.secondary_toolbar td{
  221. text-align: center;
  222. }
  223. div.secondary_toolbar td a{
  224. color: #dddddd;
  225. font-weight: bold;
  226. text-align: center;
  227. text-shadow: none;
  228. text-decoration: none;
  229. transition: all .3s ease-in-out;
  230. }
  231. div.secondary_toolbar td a:hover{
  232. color: #dddddd;
  233. text-shadow: none;
  234. text-decoration: none;
  235. }
  236. /******************************************
  237. * Translation elements. *
  238. ******************************************/
  239. table.translation_table{
  240. border-collapse: collapse;
  241. }
  242. table.translation_table th{
  243. font-weight: bold;
  244. font-size: 1.1em;
  245. border: 1px solid #000000;
  246. }
  247. table.translation_table td{
  248. border: 1px solid #000000;
  249. }
  250. /******************************************
  251. * Language selectors *
  252. ******************************************/
  253. div#lang_tabs{
  254. margin-top: 2em;
  255. margin-bottom: 2em;
  256. }
  257. div#lang_tabs table{
  258. width: 100%;
  259. }
  260. div#lang_tabs td{
  261. color: #555555;
  262. font-weight: bold;
  263. width: 33%;
  264. border: 0.1em solid black;
  265. margin: 0;
  266. }
  267. div#lang_tabs td.lang_tabs_active{
  268. color: #0078ff;
  269. border-bottom: 0.1em solid #ffffff;
  270. }