style.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. body
  2. {
  3. font-family: Arial, Helvetica, sans-serif;
  4. font-size: 14px;
  5. color: #343434;
  6. background: #eee;
  7. background-image: url('back.png');
  8. }
  9. h1, h2, h3, h4 { font-weight: lighter; }
  10. .clear {clear: both;}
  11. #container
  12. {
  13. box-shadow: 0px 0px 3px #888;
  14. background: #fff;
  15. width: 960px;
  16. margin-top: 50px;
  17. margin-left: auto;
  18. margin-right: auto;
  19. border-radius: 10px;
  20. }
  21. #header
  22. {
  23. background: -webkit-linear-gradient(bottom, whiteSmoke 0%, #EDEDED 4%,white 13%,white 35%,#E3E3E3 80%, #EEE 96%);
  24. background: -moz-linear-gradient(bottom, whiteSmoke 0%, #EDEDED 4%,white 13%,white 35%,#E3E3E3 80%, #EEE 96%);
  25. background: -o-linear-gradient(bottom, whiteSmoke 0%, #EDEDED 4%,white 13%,white 35%,#E3E3E3 80%, #EEE 96%);
  26. background: -ms-linear-gradient(bottom, whiteSmoke 0%, #EDEDED 4%,white 13%,white 35%,#E3E3E3 80%, #EEE 96%);
  27. border-radius: 10px 10px 0px 0px;
  28. box-shadow: inset 1px -1px 4px 1px white ,0px 1px 2px 1px #BCBCBC,0px 5px 17px 0px #CBCBCB;
  29. height: 155px;
  30. border-bottom: 2px solid #dcdcdc;
  31. background: #eeeeee;
  32. }
  33. #header .logo
  34. {
  35. margin-left: 10px;
  36. margin-right: 20px;
  37. float: left;
  38. }
  39. #site-info
  40. {
  41. padding-top: 25px;
  42. margin-left: 5%;
  43. }
  44. #site-info a
  45. {
  46. text-decoration: none;
  47. }
  48. #site-info h1
  49. {
  50. font-family: sans-serif;
  51. font-size: 2em;
  52. font-weight: bold;
  53. margin-bottom: 0;
  54. color: #154270;
  55. word-spacing: 5px;
  56. }
  57. #site-info h2
  58. {
  59. font-weight: lighter;
  60. font-size: 1em;
  61. }
  62. /**
  63. * ----- Content -----
  64. */
  65. #content
  66. {
  67. padding-left: 15px;
  68. padding-right: 15px;
  69. padding-bottom: 4em;
  70. }
  71. #content .introduction
  72. {
  73. width: 90%;
  74. margin-left: auto;
  75. margin-right: auto;
  76. padding: 1em;
  77. margin-top: 1em;
  78. margin-bottom: 2em;
  79. clear: both;
  80. color: #333;
  81. }
  82. #content .ref
  83. {
  84. margin-top: 2em;
  85. border-top: 1px solid #aaa;
  86. color: #777;
  87. padding: 0.3em;
  88. font-size: 0.9em;
  89. }
  90. #main-menu a
  91. {
  92. opacity: 0.9;
  93. box-shadow: 0px 0px 3px #555;
  94. text-decoration: none;
  95. float: left;
  96. display: block;
  97. border: 3px solid #ddd;
  98. width: 200px;
  99. height: 200px;
  100. margin: 10px;
  101. }
  102. #main-menu a:hover
  103. {
  104. opacity: 1;
  105. border: 3px solid #aaa;
  106. }
  107. #main-menu .item-1
  108. {
  109. background-image: url('img/bk1.jpg');
  110. }
  111. #main-menu .item-2
  112. {
  113. background-image: url('img/gnu.png');
  114. }
  115. #main-menu .item-3
  116. {
  117. background-image: url('img/fc_menu.png');
  118. }
  119. #main-menu .item-4
  120. {
  121. background-image: url('img/materials.jpg');
  122. }
  123. #main-menu .item-5
  124. {
  125. background-image: url('img/promote.jpg');
  126. }
  127. #main-menu .item-6
  128. {
  129. background-image: url('img/about.jpg');
  130. }
  131. #main-menu p
  132. {
  133. opacity: 0.9;
  134. font-weight: bold;
  135. color: #111;
  136. padding: 1em;
  137. margin: 0;
  138. background: #eee;
  139. }
  140. #popup
  141. {
  142. box-shadow: -2px -2px 20px 2px #999999;
  143. border-radius: 10px;
  144. display: none;
  145. width: 960px;
  146. height: 530px;
  147. position: absolute;
  148. left: 50%;
  149. margin-left: -515px;
  150. margin-top: -230px;
  151. opacity: 1;
  152. background: #FFFFFF;
  153. padding: 25px 35px;
  154. border: 1px dotted #dddddd;
  155. clear: both;
  156. }
  157. .close-button
  158. {
  159. border-radius: 0px 10px 0px 8px;
  160. width: 30px;
  161. height: 30px;
  162. position: absolute;
  163. right: 0px;
  164. top: 0px;
  165. cursor: pointer;
  166. background: #cccccc;
  167. }
  168. .close-button p
  169. {
  170. margin: 8px auto;
  171. text-align: center;
  172. font-family: sans;
  173. font-size: 12px;
  174. font-weight: bold;
  175. }
  176. #popup #popup-content
  177. {
  178. height: 97%;
  179. width: 100%;
  180. margin-top: 12px;
  181. margin-left: 32px;
  182. /* margin: 0px auto;*/
  183. overflow: auto;
  184. }
  185. /**
  186. * ---- Sidebar ----
  187. */
  188. #sidebar
  189. {
  190. float: right;
  191. width: 250px;
  192. text-align: center;
  193. }
  194. #sidebar img
  195. {
  196. margin-bottom: 1em;
  197. }
  198. #sidebar h2
  199. {
  200. margin-top: 0;
  201. }
  202. #main-menu
  203. {
  204. text-align: center;
  205. width: 680px;
  206. }
  207. #news
  208. {
  209. text-align: left;
  210. font-size: 0.8em;
  211. background: #ddd;
  212. padding: 0.5em;
  213. max-height: 300px;
  214. overflow: scroll;
  215. }
  216. #news ul
  217. {
  218. list-style-type: none;
  219. margin: 1em;
  220. padding: 0;
  221. }
  222. #news ul li
  223. {
  224. margin-bottom: 1em;
  225. }
  226. #news ul li a
  227. {
  228. font-weight: bold;
  229. }
  230. /**
  231. * ----- Footer ----
  232. */
  233. #footer
  234. {
  235. text-align: center;
  236. margin: 3em;
  237. font-size: 0.9em;
  238. }