API tools faq
paste
Guest User

Untitled

a guest
Dec 14th, 2017
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 52.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3. <head>
  4. <title>Beta || Slogan</title>
  5. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
  6. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
  7. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
  8. <link rel="stylesheet" type="text/css" media="screen" href="template/style/base.css">
  9.  
  10.  
  11.  
  12. <!--[if IE 6]><META http-equiv="refresh" content="1; URL=indexIE"><![endif]-->
  13. <!--[if IE 7]><META http-equiv="refresh" content="1; URL=indexIE"><![endif]-->
  14. <!--[if IE 8]><META http-equiv="refresh" content="1; URL=indexIE"><![endif]-->
  15.  
  16. <div id="fb-root"></div>
  17. <script src="/dev/v3_landing_top2.js" type="text/javascript"></script>
  18.  
  19. <style>
  20. body {
  21. color:#333;
  22. /*background-image:url('/dev/bgni.png');
  23. background-position: center bottom;
  24. background-repeat: no-repeat;
  25. background-attachment:fixed;
  26. background-size:1599px 1200px;*/
  27. padding:0;
  28. margin:0;
  29. }
  30. }
  31. .login-logo {
  32. background:url("http://localhost/app/tpl/skins/Beta/images/logo2");
  33. position:center;
  34. width:100px;
  35. height:50px;
  36.  
  37. }
  38. .loginForm {
  39. background-color: rgba(0,0,0,.70);
  40. width: 385px;
  41. position: absolute;
  42. margin-top: 650px;
  43. border-radius: 3px;
  44. color: #fff;
  45. display: inline-block;
  46. }
  47. #logo {
  48. margin:10px;
  49. }
  50. #header {
  51. background:rgba(0,0,0,.8);
  52. width:100%;
  53. position:fixed;
  54. z-index:4999;
  55. border-bottom: 1px solid #5eb4c9;
  56. text-align:center;
  57. font-family: 'Open Sans', sans-serif;
  58. }
  59. #footer {
  60. background:rgba(0,0,0,.8);
  61. width:100%;
  62. position:fixed;
  63. z-index:4998;
  64. border-top: 1px solid #5eb4c9;
  65. text-align:center;
  66. bottom:0;
  67. font-family: 'Open Sans', sans-serif;
  68. color: #425c73;
  69. font-size:11px;
  70. letter-spacing:0!important;
  71. font-weight: 400;
  72. }
  73. #footer a {
  74. color:#425c73;
  75. text-decoration:underline;
  76. }
  77. #footer a:hover {
  78. color:#567ea1;
  79. }
  80. #central {
  81. background-color: rgba(0,0,0,.70);
  82. font-family: 'Open Sans', sans-serif;
  83. width: 385px;
  84. position: absolute;
  85. border-radius: 3px;
  86. color: #fff;
  87. display: inline-block;
  88. font-size:14px;
  89. position:absolute;
  90. width:385px;
  91. left:50%;
  92. margin-left:-190px;
  93. border:1px solid #d7d7d7;
  94. border-bottom:2px solid #d7d7d7;
  95. border-radius:3px;
  96. -moz-border-radius:3px;
  97. -webkit-border-radius:3px;
  98. background-color:white;
  99. top:37%;
  100. -webkit-transition: all 0.4s ease;
  101. -moz-transition: all 0.4s ease;
  102. -o-transition: all 0.4s ease;
  103. -ms-transition: all 0.4s ease;
  104. transition: all 0.4s ease;
  105. z-index:5000;
  106. opacity:0;
  107.  
  108. }
  109. .aUser {
  110. -webkit-transition: all 0.2s ease;
  111. -moz-transition: all 0.2s ease;
  112. -o-transition: all 0.2s ease;
  113. -ms-transition: all 0.2s ease;
  114. transition: all 0.2s ease;
  115. padding:8px;
  116. cursor:pointer;
  117. }
  118. .aUser:hover {
  119. background:#fff;
  120. -webkit-transition: all 0.4s ease;
  121. -moz-transition: all 0.4s ease;
  122. -o-transition: all 0.4s ease;
  123. -ms-transition: all 0.4s ease;
  124. transition: all 0.4s ease;
  125. }
  126. .round {
  127. width:65px;
  128. height:65px;
  129. border-radius:50px;
  130. border:4px solid #fff;
  131. -moz-box-shadow: 0px 0px 1px 1px #bbbbbb;
  132. -webkit-box-shadow: 0px 0px 1px 1px #bbbbbb;
  133. box-shadow: 0px 0px 0px 1px #bbbbbb;
  134. float:left;
  135. }
  136. .line {
  137. border-top:1px solid #ccc;
  138. margin-left:10px;
  139. margin-right:10px;
  140. }
  141. .pat1 {
  142. background: #c40000; /* Old browsers */
  143. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  144. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M0MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhZDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  145. background: -moz-linear-gradient(top, #c40000 0%, #ad0000 100%); /* FF3.6+ */
  146. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c40000), color-stop(100%,#ad0000)); /* Chrome,Safari4+ */
  147. background: -webkit-linear-gradient(top, #c40000 0%,#ad0000 100%); /* Chrome10+,Safari5.1+ */
  148. background: -o-linear-gradient(top, #c40000 0%,#ad0000 100%); /* Opera 11.10+ */
  149. background: -ms-linear-gradient(top, #c40000 0%,#ad0000 100%); /* IE10+ */
  150. background: linear-gradient(to bottom, #c40000 0%,#ad0000 100%); /* W3C */
  151. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c40000', endColorstr='#ad0000',GradientType=0 ); /* IE6-8 */
  152. }
  153. .blue {
  154. background: #33579b; /* Old browsers */
  155. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  156. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzNTc5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNTQ0OWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  157. background: -moz-linear-gradient(top, #33579b 0%, #15449b 100%); /* FF3.6+ */
  158. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#33579b), color-stop(100%,#15449b)); /* Chrome,Safari4+ */
  159. background: -webkit-linear-gradient(top, #33579b 0%,#15449b 100%); /* Chrome10+,Safari5.1+ */
  160. background: -o-linear-gradient(top, #33579b 0%,#15449b 100%); /* Opera 11.10+ */
  161. background: -ms-linear-gradient(top, #33579b 0%,#15449b 100%); /* IE10+ */
  162. background: linear-gradient(to bottom, #33579b 0%,#15449b 100%); /* W3C */
  163. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33579b', endColorstr='#15449b',GradientType=0 ); /* IE6-8 */
  164. }
  165. .grey {
  166. background: #4c5054; /* Old browsers */
  167. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  168. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNTA1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  169. background: -moz-linear-gradient(top, #4c5054 0%, #28343b 100%); /* FF3.6+ */
  170. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c5054), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
  171. background: -webkit-linear-gradient(top, #4c5054 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
  172. background: -o-linear-gradient(top, #4c5054 0%,#28343b 100%); /* Opera 11.10+ */
  173. background: -ms-linear-gradient(top, #4c5054 0%,#28343b 100%); /* IE10+ */
  174. background: linear-gradient(to bottom, #4c5054 0%,#28343b 100%); /* W3C */
  175. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c5054', endColorstr='#28343b',GradientType=0 ); /* IE6-8 */
  176. }
  177. .pat3 {
  178. background: #ffaf4b; /* Old browsers */
  179. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  180. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYWY0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjkyMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  181. background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%); /* FF3.6+ */
  182. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); /* Chrome,Safari4+ */
  183. background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Chrome10+,Safari5.1+ */
  184. background: -o-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Opera 11.10+ */
  185. background: -ms-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* IE10+ */
  186. background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); /* W3C */
  187. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-8 */
  188. }
  189.  
  190. .pat2 {
  191. background: #9dd53a; /* Old browsers */
  192. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  193. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZDUzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Y2JjMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  194. background: -moz-linear-gradient(top, #9dd53a 0%, #7cbc0a 100%); /* FF3.6+ */
  195. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
  196. background: -webkit-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
  197. background: -o-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%); /* Opera 11.10+ */
  198. background: -ms-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%); /* IE10+ */
  199. background: linear-gradient(to bottom, #9dd53a 0%,#7cbc0a 100%); /* W3C */
  200. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-8 */
  201. }
  202. .pat4 {
  203. background: #ff5db1; /* Old browsers */
  204. /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  205. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNWRiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZjAxN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  206. background: -moz-linear-gradient(top, #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
  207. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
  208. background: -webkit-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
  209. background: -o-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
  210. background: -ms-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* IE10+ */
  211. background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%); /* W3C */
  212. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-8 */
  213. }
  214. .username {
  215. float:left;
  216. margin-left:25px;
  217. }
  218. .clear {
  219. clear:both;
  220. }
  221. .username .u {
  222. font-family: 'Open Sans', sans-serif;
  223. text-transform:uppercase;
  224. font-weight:300;
  225. font-size:19px;
  226. margin-bottom:3px;
  227. margin-top:12px;
  228. }
  229. .username .d {
  230. color:#444444;
  231. }
  232. .bT {
  233. background:rgba(0,0,0,.8)!important;
  234. color:#fff!important;
  235. width:320px!important;
  236. margin-left:-160px!important;
  237. -webkit-transition: all 0.4s ease;
  238. -moz-transition: all 0.4s ease;
  239. -o-transition: all 0.4s ease;
  240. -ms-transition: all 0.4s ease;
  241. transition: all 0.4s ease;
  242. border-color:#fff;
  243. }
  244. .bT .aUser:hover {
  245. background:rgba(0,0,0,.8)!important;
  246. cursor:default;
  247. }
  248. .bT .username,.bT .round {
  249. float:inherit!important;
  250. }
  251. .avatarImg {
  252. height:65px;
  253. border-radius:50px;
  254. background-repeat: no-repeat!important;
  255. }
  256. .bT .round {
  257. margin-left:auto;
  258. margin-right:auto;
  259. width:100px;
  260. height:100px;
  261. -webkit-transition: all 0.4s ease;
  262. -moz-transition: all 0.4s ease;
  263. -o-transition: all 0.4s ease;
  264. -ms-transition: all 0.4s ease;
  265. transition: all 0.4s ease;
  266. }
  267.  
  268. .bT .username {
  269. text-align:center;
  270. margin-left:0;
  271. }
  272. .avatarr {
  273. height:100px!important;
  274. -webkit-transition: all 0.4s ease;
  275. -moz-transition: all 0.4s ease;
  276. -o-transition: all 0.4s ease;
  277. -ms-transition: all 0.4s ease;
  278. transition: all 0.4s ease;
  279. }
  280. .form {
  281. display:none;
  282. text-align:center;
  283. margin-top:10px;
  284. margin-bottom:2px;
  285. }
  286. input[type=text], input[type=password] {
  287. background:#fff;
  288. border:0;
  289. padding:7px;
  290. font-size:13px;
  291. outline:none;
  292. -webkit-transition: all 0.2s ease;
  293. -moz-transition: all 0.2s ease;
  294. -o-transition: all 0.2s ease;
  295. -ms-transition: all 0.2s ease;
  296. transition: all 0.2s ease;
  297. border-radius:3px;
  298. -moz-border-radius:3px;
  299. width:200px;
  300. }
  301. input[type=text]:focus, input[type=password]:focus {
  302. background:#ffffc6;
  303. -webkit-transition: all 0.4s ease;
  304. -moz-transition: all 0.4s ease;
  305. -o-transition: all 0.4s ease;
  306. -ms-transition: all 0.4s ease;
  307. transition: all 0.4s ease;
  308. }
  309. #return {
  310. display:none;
  311. padding:10px;
  312. cursor:pointer;
  313. -webkit-transition: all 0.2s ease;
  314. -moz-transition: all 0.2s ease;
  315. -o-transition: all 0.2s ease;
  316. -ms-transition: all 0.2s ease;
  317. transition: all 0.2s ease;
  318. }
  319. #return:hover {
  320. opacity:0.8;
  321. -webkit-transition: all 0.4s ease;
  322. -moz-transition: all 0.4s ease;
  323. -o-transition: all 0.4s ease;
  324. -ms-transition: all 0.4s ease;
  325. transition: all 0.4s ease;
  326. }
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333. /* BACKGROUND */
  334. #night {
  335. background-color:#42D2F9;
  336. position:fixed;
  337. z-index:500;
  338. height:100%;
  339. width:100%;
  340. z-index:300;
  341. }
  342. #light {
  343. background-color:#42D2F9;
  344. position:fixed;
  345. z-index:400;
  346. height:100%;
  347. width:100%;
  348. z-index:200;
  349. }
  350. #bottomRight {
  351. background:url(/dev/vueBlack.png);
  352. position:fixed;
  353. height:780px;
  354. width:1360px;
  355. bottom:0;
  356. left:0;
  357. z-index:1000;
  358. opacity:0.9;
  359. }
  360. #bottomRightClear {
  361. background:url(/dev/vue.png);
  362. position:fixed;
  363. height:780px;
  364. width:1400px;
  365. bottom:0;
  366. left:0;
  367. z-index:950;
  368. }
  369. #sun {
  370. background:url(/dev/sun3.png);
  371. height:634px;
  372. width:610px;
  373. position:fixed;
  374. z-index:1100;
  375. right:-600px;
  376. bottom:-700px;
  377. }
  378. #anhabbo1 {
  379. position:fixed;
  380. z-index:2000;
  381. bottom:2000px;
  382. left:290px;
  383. }
  384. #leftDoor {
  385. width:50%;
  386. height:280px;
  387. margin-top:-150px;
  388. position:fixed;
  389. top:50%;
  390. z-index:3000;
  391. background:rgba(0,0,0,.8);
  392. border-top: 1px solid #5eb4c9;
  393. border-bottom: 1px solid #5eb4c9;
  394. left:-50%;
  395. text-align:right;
  396. }
  397. #rightDoor {
  398. width:50%;
  399. height:280px;
  400. margin-top:-150px;
  401. position:fixed;
  402. top:50%;
  403. z-index:2900;
  404. background:rgba(0,0,0,.8);
  405. border-top: 1px solid #5eb4c9;
  406. border-bottom: 1px solid #5eb4c9;
  407. right:-50%;
  408. }
  409.  
  410.  
  411.  
  412. a,
  413. a:after,
  414. a::before,
  415. nav,
  416. nav:after,
  417. nav::before,
  418. a span,
  419. a span:after,
  420. a span::before {
  421. -webkit-box-sizing: border-box;
  422. -moz-box-sizing: border-box;
  423. box-sizing: border-box;
  424. }
  425.  
  426.  
  427.  
  428. nav a {
  429. position: relative;
  430. display: inline-block;
  431. margin: 10px 5px;
  432. outline: none;
  433. color: #fff;
  434. text-decoration: none;
  435. text-transform: uppercase;
  436. letter-spacing: 1px;
  437. font-weight: 400;
  438. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  439. font-size: 1.35em;
  440. }
  441.  
  442. nav a:hover,
  443. nav a:focus {
  444. outline: none;
  445. }
  446.  
  447. /* Effect 1: Brackets */
  448. .cl-effect-1 a::before,
  449. .cl-effect-1 a::after {
  450. display: inline-block;
  451. opacity: 0;
  452. -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
  453. -moz-transition: -moz-transform 0.3s, opacity 0.2s;
  454. transition: transform 0.3s, opacity 0.2s;
  455. }
  456.  
  457. .cl-effect-1 a::before {
  458. margin-right: 10px;
  459. content: '[';
  460. -webkit-transform: translateX(20px);
  461. -moz-transform: translateX(20px);
  462. transform: translateX(20px);
  463. }
  464.  
  465. .cl-effect-1 a::after {
  466. margin-left: 10px;
  467. content: ']';
  468. -webkit-transform: translateX(-20px);
  469. -moz-transform: translateX(-20px);
  470. transform: translateX(-20px);
  471. }
  472.  
  473. .cl-effect-1 a:hover::before,
  474. .cl-effect-1 a:hover::after,
  475. .cl-effect-1 a:focus::before,
  476. .cl-effect-1 a:focus::after {
  477. opacity: 1;
  478. -webkit-transform: translateX(0px);
  479. -moz-transform: translateX(0px);
  480. transform: translateX(0px);
  481. }
  482.  
  483. /* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
  484. .cl-effect-2 a {
  485. line-height: 44px;
  486. -webkit-perspective: 1000px;
  487. -moz-perspective: 1000px;
  488. perspective: 1000px;
  489. }
  490.  
  491. .cl-effect-2 a span {
  492. position: relative;
  493. display: inline-block;
  494. padding: 0 14px;
  495. background: #2195de;
  496. -webkit-transition: -webkit-transform 0.3s;
  497. -moz-transition: -moz-transform 0.3s;
  498. transition: transform 0.3s;
  499. -webkit-transform-origin: 50% 0;
  500. -moz-transform-origin: 50% 0;
  501. transform-origin: 50% 0;
  502. -webkit-transform-style: preserve-3d;
  503. -moz-transform-style: preserve-3d;
  504. transform-style: preserve-3d;
  505. }
  506.  
  507. .csstransforms3d .cl-effect-2 a span::before {
  508. position: absolute;
  509. top: 100%;
  510. left: 0;
  511. width: 100%;
  512. height: 100%;
  513. background: #0965a0;
  514. content: attr(data-hover);
  515. -webkit-transition: background 0.3s;
  516. -moz-transition: background 0.3s;
  517. transition: background 0.3s;
  518. -webkit-transform: rotateX(-90deg);
  519. -moz-transform: rotateX(-90deg);
  520. transform: rotateX(-90deg);
  521. -webkit-transform-origin: 50% 0;
  522. -moz-transform-origin: 50% 0;
  523. transform-origin: 50% 0;
  524. }
  525.  
  526. .cl-effect-2 a:hover span,
  527. .cl-effect-2 a:focus span {
  528. -webkit-transform: rotateX(90deg) translateY(-22px);
  529. -moz-transform: rotateX(90deg) translateY(-22px);
  530. transform: rotateX(90deg) translateY(-22px);
  531. }
  532.  
  533. .csstransforms3d .cl-effect-2 a:hover span::before,
  534. .csstransforms3d .cl-effect-2 a:focus span::before {
  535. background: #28a2ee;
  536. }
  537.  
  538. /* Effect 3: bottom line slides/fades in */
  539. .cl-effect-3 a {
  540. padding: 8px 0;
  541. }
  542.  
  543. .cl-effect-3 a::after {
  544. position: absolute;
  545. top: 100%;
  546. left: 0;
  547. width: 100%;
  548. height: 4px;
  549. background: rgba(0,0,0,0.1);
  550. content: '';
  551. opacity: 0;
  552. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  553. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  554. transition: opacity 0.3s, transform 0.3s;
  555. -webkit-transform: translateY(10px);
  556. -moz-transform: translateY(10px);
  557. transform: translateY(10px);
  558. }
  559.  
  560. .cl-effect-3 a:hover::after,
  561. .cl-effect-3 a:focus::after {
  562. opacity: 1;
  563. -webkit-transform: translateY(0px);
  564. -moz-transform: translateY(0px);
  565. transform: translateY(0px);
  566. }
  567.  
  568. /* Effect 4: bottom border enlarge */
  569. .cl-effect-4 a {
  570. padding: 0 0 10px;
  571. }
  572.  
  573. .cl-effect-4 a::after {
  574. position: absolute;
  575. top: 100%;
  576. left: 0;
  577. width: 100%;
  578. height: 1px;
  579. background: #fff;
  580. content: '';
  581. opacity: 0;
  582. -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  583. -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  584. transition: height 0.3s, opacity 0.3s, transform 0.3s;
  585. -webkit-transform: translateY(-10px);
  586. -moz-transform: translateY(-10px);
  587. transform: translateY(-10px);
  588. }
  589.  
  590. .cl-effect-4 a:hover::after,
  591. .cl-effect-4 a:focus::after {
  592. height: 5px;
  593. opacity: 1;
  594. -webkit-transform: translateY(0px);
  595. -moz-transform: translateY(0px);
  596. transform: translateY(0px);
  597. }
  598.  
  599. /* Effect 5: same word slide in */
  600. .cl-effect-5 a {
  601. overflow: hidden;
  602. padding: 0 4px;
  603. height: 1em;
  604. }
  605.  
  606. .cl-effect-5 a span {
  607. position: relative;
  608. display: inline-block;
  609. -webkit-transition: -webkit-transform 0.3s;
  610. -moz-transition: -moz-transform 0.3s;
  611. transition: transform 0.3s;
  612. }
  613.  
  614. .cl-effect-5 a span::before {
  615. position: absolute;
  616. top: 100%;
  617. content: attr(data-hover);
  618. font-weight: 700;
  619. -webkit-transform: translate3d(0,0,0);
  620. -moz-transform: translate3d(0,0,0);
  621. transform: translate3d(0,0,0);
  622. }
  623.  
  624. .cl-effect-5 a:hover span,
  625. .cl-effect-5 a:focus span {
  626. -webkit-transform: translateY(-100%);
  627. -moz-transform: translateY(-100%);
  628. transform: translateY(-100%);
  629. }
  630.  
  631. /* Effect 5: same word slide in and border bottom */
  632. .cl-effect-6 a {
  633. margin: 0 10px;
  634. padding: 10px 20px;
  635. }
  636.  
  637. .cl-effect-6 a::before {
  638. position: absolute;
  639. top: 0;
  640. left: 0;
  641. width: 100%;
  642. height: 2px;
  643. background: #fff;
  644. content: '';
  645. -webkit-transition: top 0.3s;
  646. -moz-transition: top 0.3s;
  647. transition: top 0.3s;
  648. }
  649.  
  650. .cl-effect-6 a::after {
  651. position: absolute;
  652. top: 0;
  653. left: 0;
  654. width: 2px;
  655. height: 2px;
  656. background: #fff;
  657. content: '';
  658. -webkit-transition: height 0.3s;
  659. -moz-transition: height 0.3s;
  660. transition: height 0.3s;
  661. }
  662.  
  663. .cl-effect-6 a:hover::before {
  664. top: 100%;
  665. opacity: 1;
  666. }
  667.  
  668. .cl-effect-6 a:hover::after {
  669. height: 100%;
  670. }
  671.  
  672. /* Effect 7: second border slides up */
  673. .cl-effect-7 a {
  674. padding: 12px 10px 10px;
  675. color: #566473;
  676. text-shadow: none;
  677. font-weight: 700;
  678. }
  679.  
  680. .cl-effect-7 a::before,
  681. .cl-effect-7 a::after {
  682. position: absolute;
  683. top: 100%;
  684. left: 0;
  685. width: 100%;
  686. height: 3px;
  687. background: #566473;
  688. content: '';
  689. -webkit-transition: -webkit-transform 0.3s;
  690. -moz-transition: -moz-transform 0.3s;
  691. transition: transform 0.3s;
  692. -webkit-transform: scale(0.85);
  693. -moz-transform: scale(0.85);
  694. transform: scale(0.85);
  695. }
  696.  
  697. .cl-effect-7 a::after {
  698. opacity: 0;
  699. -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  700. -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
  701. transition: top 0.3s, opacity 0.3s, transform 0.3s;
  702. }
  703.  
  704. .cl-effect-7 a:hover::before,
  705. .cl-effect-7 a:hover::after,
  706. .cl-effect-7 a:focus::before,
  707. .cl-effect-7 a:focus::after {
  708. -webkit-transform: scale(1);
  709. -moz-transform: scale(1);
  710. transform: scale(1);
  711. }
  712.  
  713. .cl-effect-7 a:hover::after,
  714. .cl-effect-7 a:focus::after {
  715. top: 0%;
  716. opacity: 1;
  717. }
  718.  
  719. /* Effect 8: border slight translate */
  720. .cl-effect-8 a {
  721. padding: 10px 20px;
  722. }
  723.  
  724. .cl-effect-8 a::before,
  725. .cl-effect-8 a::after {
  726. position: absolute;
  727. top: 0;
  728. left: 0;
  729. width: 100%;
  730. height: 100%;
  731. border: 3px solid #354856;
  732. content: '';
  733. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  734. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  735. transition: transform 0.3s, opacity 0.3s;
  736. }
  737.  
  738. .cl-effect-8 a::after {
  739. border-color: #fff;
  740. opacity: 0;
  741. -webkit-transform: translateY(-7px) translateX(6px);
  742. -moz-transform: translateY(-7px) translateX(6px);
  743. transform: translateY(-7px) translateX(6px);
  744. }
  745.  
  746. .cl-effect-8 a:hover::before,
  747. .cl-effect-8 a:focus::before {
  748. opacity: 0;
  749. -webkit-transform: translateY(5px) translateX(-5px);
  750. -moz-transform: translateY(5px) translateX(-5px);
  751. transform: translateY(5px) translateX(-5px);
  752. }
  753.  
  754. .cl-effect-8 a:hover::after,
  755. .cl-effect-8 a:focus::after {
  756. opacity: 1;
  757. -webkit-transform: translateY(0px) translateX(0px);
  758. -moz-transform: translateY(0px) translateX(0px);
  759. transform: translateY(0px) translateX(0px);
  760. }
  761.  
  762. /* Effect 9: second text and borders */
  763. .cl-effect-9 a {
  764. margin: 0 20px;
  765. padding: 18px 20px;
  766. }
  767.  
  768. .cl-effect-9 a::before,
  769. .cl-effect-9 a::after {
  770. position: absolute;
  771. top: 0;
  772. left: 0;
  773. width: 100%;
  774. height: 1px;
  775. background: #fff;
  776. content: '';
  777. opacity: 0.2;
  778. -webkit-transition: opacity 0.3s, height 0.3s;
  779. -moz-transition: opacity 0.3s, height 0.3s;
  780. transition: opacity 0.3s, height 0.3s;
  781. }
  782.  
  783. .cl-effect-9 a::after {
  784. top: 100%;
  785. opacity: 0;
  786. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  787. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  788. transition: transform 0.3s, opacity 0.3s;
  789. -webkit-transform: translateY(-10px);
  790. -moz-transform: translateY(-10px);
  791. transform: translateY(-10px);
  792. }
  793.  
  794. .cl-effect-9 a span:first-child {
  795. z-index: 2;
  796. display: block;
  797. font-weight: 300;
  798. }
  799.  
  800. .cl-effect-9 a span:last-child {
  801. z-index: 1;
  802. display: block;
  803. padding: 8px 0 0 0;
  804. color: rgba(0,0,0,0.4);
  805. text-shadow: none;
  806. text-transform: none;
  807. font-style: italic;
  808. font-size: 0.75em;
  809. font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  810. opacity: 0;
  811. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  812. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  813. transition: transform 0.3s, opacity 0.3s;
  814. -webkit-transform: translateY(-100%);
  815. -moz-transform: translateY(-100%);
  816. transform: translateY(-100%);
  817. }
  818.  
  819. .cl-effect-9 a:hover::before,
  820. .cl-effect-9 a:focus::before {
  821. height: 6px;
  822. }
  823.  
  824. .cl-effect-9 a:hover::before,
  825. .cl-effect-9 a:hover::after,
  826. .cl-effect-9 a:focus::before,
  827. .cl-effect-9 a:focus::after {
  828. opacity: 1;
  829. -webkit-transform: translateY(0px);
  830. -moz-transform: translateY(0px);
  831. transform: translateY(0px);
  832. }
  833.  
  834. .cl-effect-9 a:hover span:last-child,
  835. .cl-effect-9 a:focus span:last-child {
  836. opacity: 1;
  837. -webkit-transform: translateY(0%);
  838. -moz-transform: translateY(0%);
  839. transform: translateY(0%);
  840. }
  841.  
  842. /* Effect 10: reveal, push out */
  843. .cl-effect-10 {
  844. position: relative;
  845. z-index: 1;
  846. border-radius:3px;
  847. -moz-border-radius:3px;
  848. -webkit-border-radius:3px;
  849. }
  850.  
  851. .cl-effect-10 a {
  852. overflow: hidden;
  853. margin: 0 15px;
  854. font-size:13px;
  855. border-radius:3px;
  856. -moz-border-radius:3px;
  857. -webkit-border-radius:3px;
  858. }
  859.  
  860. .cl-effect-10 a span {
  861. display: block;
  862. padding: 10px 20px;
  863. background: #bd2f68;
  864. -webkit-transition: -webkit-transform 0.3s;
  865. -moz-transition: -moz-transform 0.3s;
  866. transition: transform 0.3s;
  867. border-radius:3px;
  868. -moz-border-radius:3px;
  869. -webkit-border-radius:3px;
  870. }
  871.  
  872. .cl-effect-10 a::before {
  873. position: absolute;
  874. top: 0;
  875. left: 0;
  876. z-index: -1;
  877. padding: 10px 20px;
  878. width: 100%;
  879. height: 100%;
  880. background: #fff;
  881. color: #bd2f68;
  882. content: attr(data-hover);
  883. -webkit-transition: -webkit-transform 0.3s;
  884. -moz-transition: -moz-transform 0.3s;
  885. transition: transform 0.3s;
  886. -webkit-transform: translateY(-25%);
  887. border-radius:3px;
  888. -moz-border-radius:3px;
  889. -webkit-border-radius:3px;
  890. }
  891.  
  892. .cl-effect-10 a:hover span,
  893. .cl-effect-10 a:focus span {
  894. -webkit-transform: translateY(100%);
  895. -moz-transform: translateY(100%);
  896. transform: translateY(100%);
  897. }
  898.  
  899. .cl-effect-10 a:hover::before,
  900. .cl-effect-10 a:focus::before {
  901. -webkit-transform: translateY(0%);
  902. -moz-transform: translateY(0%);
  903. transform: translateY(0%);
  904. }
  905.  
  906. /* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
  907. .cl-effect-11 a {
  908. padding: 10px 0;
  909. border-top: 2px solid #0972b4;
  910. color: #0972b4;
  911. text-shadow: none;
  912. }
  913.  
  914. .cl-effect-11 a::before {
  915. position: absolute;
  916. top: 0;
  917. left: 0;
  918. overflow: hidden;
  919. padding: 10px 0;
  920. max-width: 0;
  921. border-bottom: 2px solid #fff;
  922. color: #fff;
  923. content: attr(data-hover);
  924. -webkit-transition: max-width 0.5s;
  925. -moz-transition: max-width 0.5s;
  926. transition: max-width 0.5s;
  927. }
  928.  
  929. .cl-effect-11 a:hover::before,
  930. .cl-effect-11 a:focus::before {
  931. max-width: 100%;
  932. }
  933.  
  934. /* Effect 12: circle */
  935. .cl-effect-12 a::before,
  936. .cl-effect-12 a::after {
  937. position: absolute;
  938. top: 50%;
  939. left: 50%;
  940. width: 100px;
  941. height: 100px;
  942. border: 2px solid rgba(0,0,0,0.1);
  943. border-radius: 50%;
  944. content: '';
  945. opacity: 0;
  946. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  947. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  948. transition: transform 0.3s, opacity 0.3s;
  949. -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
  950. -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
  951. transform: translateX(-50%) translateY(-50%) scale(0.2);
  952. }
  953.  
  954. .cl-effect-12 a::after {
  955. width: 90px;
  956. height: 90px;
  957. border-width: 6px;
  958. -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
  959. -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
  960. transform: translateX(-50%) translateY(-50%) scale(0.8);
  961. }
  962.  
  963. .cl-effect-12 a:hover::before,
  964. .cl-effect-12 a:hover::after,
  965. .cl-effect-12 a:focus::before,
  966. .cl-effect-12 a:focus::after {
  967. opacity: 1;
  968. -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
  969. -moz-transform: translateX(-50%) translateY(-50%) scale(1);
  970. transform: translateX(-50%) translateY(-50%) scale(1);
  971. }
  972.  
  973. /* Effect 13: three circles */
  974. .cl-effect-13 a {
  975. -webkit-transition: color 0.3s;
  976. -moz-transition: color 0.3s;
  977. transition: color 0.3s;
  978. }
  979.  
  980. .cl-effect-13 a::before {
  981. position: absolute;
  982. top: 100%;
  983. left: 50%;
  984. color: transparent;
  985. content: '•';
  986. text-shadow: 0 0 transparent;
  987. font-size: 1.2em;
  988. -webkit-transition: text-shadow 0.3s, color 0.3s;
  989. -moz-transition: text-shadow 0.3s, color 0.3s;
  990. transition: text-shadow 0.3s, color 0.3s;
  991. -webkit-transform: translateX(-50%);
  992. -moz-transform: translateX(-50%);
  993. transform: translateX(-50%);
  994. pointer-events: none;
  995. }
  996.  
  997. .cl-effect-13 a:hover::before,
  998. .cl-effect-13 a:focus::before {
  999. color: #fff;
  1000. text-shadow: 10px 0 #fff, -10px 0 #fff;
  1001. }
  1002.  
  1003. .cl-effect-13 a:hover,
  1004. .cl-effect-13 a:focus {
  1005. color: #ba7700;
  1006. }
  1007.  
  1008. /* Effect 14: border switch */
  1009. .cl-effect-14 a {
  1010. padding: 0 20px;
  1011. height: 45px;
  1012. line-height: 45px;
  1013. }
  1014.  
  1015. .cl-effect-14 a::before,
  1016. .cl-effect-14 a::after {
  1017. position: absolute;
  1018. width: 45px;
  1019. height: 2px;
  1020. background: #fff;
  1021. content: '';
  1022. opacity: 0.2;
  1023. -webkit-transition: all 0.3s;
  1024. -moz-transition: all 0.3s;
  1025. transition: all 0.3s;
  1026. pointer-events: none;
  1027. }
  1028.  
  1029. .cl-effect-14 a::before {
  1030. top: 0;
  1031. left: 0;
  1032. -webkit-transform: rotate(90deg);
  1033. -moz-transform: rotate(90deg);
  1034. transform: rotate(90deg);
  1035. -webkit-transform-origin: 0 0;
  1036. -moz-transform-origin: 0 0;
  1037. transform-origin: 0 0;
  1038. }
  1039.  
  1040. .cl-effect-14 a::after {
  1041. right: 0;
  1042. bottom: 0;
  1043. -webkit-transform: rotate(90deg);
  1044. -moz-transform: rotate(90deg);
  1045. transform: rotate(90deg);
  1046. -webkit-transform-origin: 100% 0;
  1047. -moz-transform-origin: 100% 0;
  1048. transform-origin: 100% 0;
  1049. }
  1050.  
  1051. .cl-effect-14 a:hover::before,
  1052. .cl-effect-14 a:hover::after,
  1053. .cl-effect-14 a:focus::before,
  1054. .cl-effect-14 a:focus::after {
  1055. opacity: 1;
  1056. }
  1057.  
  1058. .cl-effect-14 a:hover::before,
  1059. .cl-effect-14 a:focus::before {
  1060. left: 50%;
  1061. -webkit-transform: rotate(0deg) translateX(-50%);
  1062. -moz-transform: rotate(0deg) translateX(-50%);
  1063. transform: rotate(0deg) translateX(-50%);
  1064. }
  1065.  
  1066. .cl-effect-14 a:hover::after,
  1067. .cl-effect-14 a:focus::after {
  1068. right: 50%;
  1069. -webkit-transform: rotate(0deg) translateX(50%);
  1070. -moz-transform: rotate(0deg) translateX(50%);
  1071. transform: rotate(0deg) translateX(50%);
  1072. }
  1073.  
  1074. /* Effect 15: scale down, reveal */
  1075. .cl-effect-15 a {
  1076. color: rgba(0,0,0,0.2);
  1077. font-weight: 700;
  1078. text-shadow: none;
  1079. }
  1080.  
  1081. .cl-effect-15 a::before {
  1082. color: #fff;
  1083. content: attr(data-hover);
  1084. position: absolute;
  1085. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1086. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1087. transition: transform 0.3s, opacity 0.3s;
  1088. }
  1089.  
  1090. .cl-effect-15 a:hover::before,
  1091. .cl-effect-15 a:focus::before {
  1092. -webkit-transform: scale(0.9);
  1093. -moz-transform: scale(0.9);
  1094. transform: scale(0.9);
  1095. opacity: 0;
  1096. }
  1097.  
  1098. /* Effect 16: fall down */
  1099. .cl-effect-16 a {
  1100. color: #6f8686;
  1101. text-shadow: 0 0 1px rgba(111,134,134,0.3);
  1102. }
  1103.  
  1104. .cl-effect-16 a::before {
  1105. color: #fff;
  1106. content: attr(data-hover);
  1107. position: absolute;
  1108. opacity: 0;
  1109. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1110. -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1111. -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1112. transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  1113. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1114. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1115. transition: transform 0.3s, opacity 0.3s;
  1116. pointer-events: none;
  1117. }
  1118.  
  1119. .cl-effect-16 a:hover::before,
  1120. .cl-effect-16 a:focus::before {
  1121. -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1122. -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1123. transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  1124. opacity: 1;
  1125. }
  1126.  
  1127. /* Effect 17: move up fade out, push border */
  1128. .cl-effect-17 a {
  1129. color: #10649b;
  1130. text-shadow: none;
  1131. padding: 10px 0;
  1132. }
  1133.  
  1134. .cl-effect-17 a::before {
  1135. color: #fff;
  1136. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  1137. content: attr(data-hover);
  1138. position: absolute;
  1139. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1140. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1141. transition: transform 0.3s, opacity 0.3s;
  1142. pointer-events: none;
  1143. }
  1144.  
  1145. .cl-effect-17 a::after {
  1146. content: '';
  1147. position: absolute;
  1148. left: 0;
  1149. bottom: 0;
  1150. width: 100%;
  1151. height: 2px;
  1152. background: #fff;
  1153. opacity: 0;
  1154. -webkit-transform: translateY(5px);
  1155. -moz-transform: translateY(5px);
  1156. transform: translateY(5px);
  1157. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1158. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1159. transition: transform 0.3s, opacity 0.3s;
  1160. pointer-events: none;
  1161. }
  1162.  
  1163. .cl-effect-17 a:hover::before,
  1164. .cl-effect-17 a:focus::before {
  1165. opacity: 0;
  1166. -webkit-transform: translateY(-2px);
  1167. -moz-transform: translateY(-2px);
  1168. transform: translateY(-2px);
  1169. }
  1170.  
  1171. .cl-effect-17 a:hover::after,
  1172. .cl-effect-17 a:focus::after {
  1173. opacity: 1;
  1174. -webkit-transform: translateY(0px);
  1175. -moz-transform: translateY(0px);
  1176. transform: translateY(0px);
  1177. }
  1178.  
  1179. /* Effect 18: cross */
  1180. .cl-effect-18 {
  1181. position: relative;
  1182. z-index: 1;
  1183. }
  1184.  
  1185. .cl-effect-18 a {
  1186. padding: 0 3px;
  1187. color: #fff;
  1188. -webkit-transition: color 0.3s;
  1189. -moz-transition: color 0.3s;
  1190. transition: color 0.3s;
  1191. }
  1192.  
  1193. .cl-effect-18 a::before,
  1194. .cl-effect-18 a::after {
  1195. position: absolute;
  1196. width: 100%;
  1197. left: 0;
  1198. top: 50%;
  1199. height: 1px;
  1200. margin-top: -1px;
  1201. background: #fff;
  1202. content: '';
  1203. z-index: -1;
  1204. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  1205. -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  1206. transition: transform 0.3s, opacity 0.3s;
  1207. pointer-events: none;
  1208. }
  1209.  
  1210. .cl-effect-18 a::before {
  1211. -webkit-transform: translateY(-13px);
  1212. -moz-transform: translateY(-13px);
  1213. transform: translateY(-13px);
  1214. }
  1215.  
  1216. .cl-effect-18 a::after {
  1217. -webkit-transform: translateY(13px);
  1218. -moz-transform: translateY(13px);
  1219. transform: translateY(13px);
  1220. }
  1221.  
  1222. .cl-effect-18 a:hover,
  1223. .cl-effect-18 a:focus {
  1224. color: #fff;
  1225. }
  1226.  
  1227. .cl-effect-18 a:hover::before,
  1228. .cl-effect-18 a:hover::after,
  1229. .cl-effect-18 a:focus::before,
  1230. .cl-effect-18 a:focus::after {
  1231. opacity: 0.7;
  1232. }
  1233.  
  1234. .cl-effect-18 a:hover::before,
  1235. .cl-effect-18 a:focus::before {
  1236. -webkit-transform: rotate(45deg);
  1237. -moz-transform: rotate(45deg);
  1238. transform: rotate(45deg);
  1239. }
  1240.  
  1241. .cl-effect-18 a:hover::after,
  1242. .cl-effect-18 a:focus::after {
  1243. -webkit-transform: rotate(-45deg);
  1244. -moz-transform: rotate(-45deg);
  1245. transform: rotate(-45deg);
  1246. }
  1247.  
  1248. /* Effect 19: 3D side */
  1249. .cl-effect-19 a {
  1250. line-height: 2em;
  1251. margin: 15px;
  1252. -webkit-perspective: 800px;
  1253. -moz-perspective: 800px;
  1254. perspective: 800px;
  1255. width: 200px;
  1256. }
  1257.  
  1258. .cl-effect-19 a span {
  1259. position: relative;
  1260. display: inline-block;
  1261. width: 100%;
  1262. padding: 0 14px;
  1263. background: #e35041;
  1264. -webkit-transition: -webkit-transform 0.4s, background 0.4s;
  1265. -moz-transition: -moz-transform 0.4s, background 0.4s;
  1266. transition: transform 0.4s, background 0.4s;
  1267. -webkit-transform-style: preserve-3d;
  1268. -moz-transform-style: preserve-3d;
  1269. transform-style: preserve-3d;
  1270. -webkit-transform-origin: 50% 50% -100px;
  1271. -moz-transform-origin: 50% 50% -100px;
  1272. transform-origin: 50% 50% -100px;
  1273. }
  1274.  
  1275. .csstransforms3d .cl-effect-19 a span::before {
  1276. position: absolute;
  1277. top: 0;
  1278. left: 100%;
  1279. width: 100%;
  1280. height: 100%;
  1281. background: #b53a2d;
  1282. content: attr(data-hover);
  1283. -webkit-transition: background 0.4s;
  1284. -moz-transition: background 0.4s;
  1285. transition: background 0.4s;
  1286. -webkit-transform: rotateY(90deg);
  1287. -moz-transform: rotateY(90deg);
  1288. transform: rotateY(90deg);
  1289. -webkit-transform-origin: 0 50%;
  1290. -moz-transform-origin: 0 50%;
  1291. transform-origin: 0 50%;
  1292. pointer-events: none;
  1293. }
  1294.  
  1295. .cl-effect-19 a:hover span,
  1296. .cl-effect-19 a:focus span {
  1297. background: #b53a2d;
  1298. -webkit-transform: rotateY(-90deg);
  1299. -moz-transform: rotateY(-90deg);
  1300. transform: rotateY(-90deg);
  1301. }
  1302.  
  1303. .csstransforms3d .cl-effect-19 a:hover span::before,
  1304. .csstransforms3d .cl-effect-19 a:focus span::before {
  1305. background: #ef5e50;
  1306. }
  1307.  
  1308. /* Effect 20: 3D side */
  1309. .cl-effect-20 a {
  1310. line-height: 2em;
  1311. -webkit-perspective: 800px;
  1312. -moz-perspective: 800px;
  1313. perspective: 800px;
  1314. }
  1315.  
  1316. .cl-effect-20 a span {
  1317. position: relative;
  1318. display: inline-block;
  1319. padding: 3px 15px 0;
  1320. background: #587285;
  1321. box-shadow: inset 0 3px #2f4351;
  1322. -webkit-transition: background 0.6s;
  1323. -moz-transition: background 0.6s;
  1324. transition: background 0.6s;
  1325. -webkit-transform-origin: 50% 0;
  1326. -moz-transform-origin: 50% 0;
  1327. transform-origin: 50% 0;
  1328. -webkit-transform-style: preserve-3d;
  1329. -moz-transform-style: preserve-3d;
  1330. transform-style: preserve-3d;
  1331. -webkit-transform-origin: 0% 50%;
  1332. -moz-transform-origin: 0% 50%;
  1333. transform-origin: 0% 50%;
  1334. }
  1335.  
  1336. .cl-effect-20 a span::before {
  1337. position: absolute;
  1338. top: 0;
  1339. left: 0;
  1340. width: 100%;
  1341. height: 100%;
  1342. background: #fff;
  1343. color: #2f4351;
  1344. content: attr(data-hover);
  1345. -webkit-transform: rotateX(270deg);
  1346. -moz-transform: rotateX(270deg);
  1347. transform: rotateX(270deg);
  1348. -webkit-transition: -webkit-transform 0.6s;
  1349. -moz-transition: -moz-transform 0.6s;
  1350. transition: transform 0.6s;
  1351. -webkit-transform-origin: 0 0;
  1352. -moz-transform-origin: 0 0;
  1353. transform-origin: 0 0;
  1354. pointer-events: none;
  1355. }
  1356.  
  1357. .cl-effect-20 a:hover span,
  1358. .cl-effect-20 a:focus span {
  1359. background: #2f4351;
  1360. }
  1361.  
  1362. .cl-effect-20 a:hover span::before,
  1363. .cl-effect-20 a:focus span::before {
  1364. -webkit-transform: rotateX(10deg);
  1365. -moz-transform: rotateX(10deg);
  1366. transform: rotateX(10deg);
  1367. }
  1368.  
  1369. /* Effect 21: borders slight translate */
  1370. .cl-effect-21 a {
  1371. padding: 10px;
  1372. color: #237546;
  1373. font-weight: 700;
  1374. text-shadow: none;
  1375. -webkit-transition: color 0.3s;
  1376. -moz-transition: color 0.3s;
  1377. transition: color 0.3s;
  1378. }
  1379.  
  1380. .cl-effect-21 a::before,
  1381. .cl-effect-21 a::after {
  1382. position: absolute;
  1383. left: 0;
  1384. width: 100%;
  1385. height: 2px;
  1386. background: #fff;
  1387. content: '';
  1388. opacity: 0;
  1389. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  1390. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  1391. transition: opacity 0.3s, transform 0.3s;
  1392. -webkit-transform: translateY(-10px);
  1393. -moz-transform: translateY(-10px);
  1394. transform: translateY(-10px);
  1395. }
  1396.  
  1397. .cl-effect-21 a::before {
  1398. top: 0;
  1399. -webkit-transform: translateY(-10px);
  1400. -moz-transform: translateY(-10px);
  1401. transform: translateY(-10px);
  1402. }
  1403.  
  1404. .cl-effect-21 a::after {
  1405. bottom: 0;
  1406. -webkit-transform: translateY(10px);
  1407. -moz-transform: translateY(10px);
  1408. transform: translateY(10px);
  1409. }
  1410.  
  1411. .cl-effect-21 a:hover,
  1412. .cl-effect-21 a:focus {
  1413. color: #fff;
  1414. }
  1415.  
  1416. .cl-effect-21 a:hover::before,
  1417. .cl-effect-21 a:focus::before,
  1418. .cl-effect-21 a:hover::after,
  1419. .cl-effect-21 a:focus::after {
  1420. opacity: 1;
  1421. -webkit-transform: translateY(0px);
  1422. -moz-transform: translateY(0px);
  1423. transform: translateY(0px);
  1424. }
  1425.  
  1426. #errorLogin {
  1427. background:#c03131;
  1428. width:100%;
  1429. padding-top:10px;
  1430. padding-bottom:10px;
  1431. margin-bottom:10px;
  1432. text-align:center;
  1433. color:#fff;
  1434. font-weight:100;
  1435. letter-spacing:1px;
  1436. display:none;
  1437. }
  1438. .delItem {
  1439. float:right;
  1440. margin-top:28px;
  1441. color:#ccc;
  1442. -webkit-transition: all 0.4s ease;
  1443. -moz-transition: all 0.4s ease;
  1444. -o-transition: all 0.4s ease;
  1445. -ms-transition: all 0.4s ease;
  1446. transition: all 0.4s ease;
  1447. }
  1448. .delItem:hover {
  1449. color:#333;
  1450. -webkit-transition: all 0.4s ease;
  1451. -moz-transition: all 0.4s ease;
  1452. -o-transition: all 0.4s ease;
  1453. -ms-transition: all 0.4s ease;
  1454. transition: all 0.4s ease;
  1455. }
  1456. .regbutton {
  1457. padding: 10px;
  1458. margin-top: 0px;
  1459. text-transform: uppercase;
  1460. color: #FFF;
  1461. font-weight: 300;
  1462. background: #3498db;
  1463. text-decoration: none;
  1464. text-align: center;
  1465. font-size: 15px;
  1466. border-radius: 4px;
  1467. width: 82%;
  1468. outline: none;
  1469. border: none;
  1470. box-shadow: 0px 3px hsla(0,0%,0%,.50);
  1471. border-bottom: 2px solid hsla(0,0%,0%,.30);
  1472. cursor: pointer;
  1473. transition: 0.5s;
  1474. -webkit-transition: 0.5s;
  1475. -moz-transition: 0.5s;
  1476. margin-top: 10px;
  1477. }
  1478. .loginbutton2 {
  1479. padding: 10px;
  1480. margin-top: 0px;
  1481. text-transform: uppercase;
  1482. color: #FFF;
  1483. font-weight: 300;
  1484. background: #9cc12a;
  1485. font-size: 15px;
  1486. border-radius: 4px;
  1487. width: 87%;
  1488. outline: none;
  1489. border: none;
  1490. box-shadow: 0px 3px hsla(0,0%,0%,.50);
  1491. border-bottom: 2px solid hsla(0,0%,0%,.30);
  1492. cursor: pointer;
  1493. transition: 0.5s;
  1494. -webkit-transition: 0.5s;
  1495. -moz-transition: 0.5s;
  1496. text-align: center;
  1497. }
  1498. </style>
  1499. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  1500. <script>
  1501. (function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.css(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);
  1502.  
  1503. (function($){$.extend($.fn,{caret:function(start,end){var elem=this[0];if(elem){if(typeof start=="undefined")if(elem.selectionStart!=undefined){start=elem.selectionStart;end=elem.selectionEnd}else{if(document.selection){var val=this.val();var range=document.selection.createRange().duplicate();range.moveEnd("character",val.length);start=range.text==""?val.length:val.lastIndexOf(range.text);range=document.selection.createRange().duplicate();range.moveStart("character",-val.length);end=range.text.length}}else{var val=
  1504. this.val();if(typeof start!="number")start=-1;if(typeof end!="number")end=-1;if(start<0)start=0;if(end>val.length)end=val.length;if(end<start)end=start;if(start>end)start=end;elem.focus();if(elem.selectionStart){elem.selectionStart=start;elem.selectionEnd=end}else if(document.selection){var range=elem.createTextRange();range.collapse(true);range.moveStart("character",start);range.moveEnd("character",end-start);range.select()}}return{start:start,end:end}}}})})(jQuery);
  1505.  
  1506.  
  1507.  
  1508. function centerBox(){
  1509. h = parseInt('-'+parseInt($('#central').height())/2.15);
  1510. $('#central').css({marginTop: h});
  1511. }
  1512. function see(idi) {
  1513. idd = "#aUser"+idi;
  1514. $('.aUser:not('+idd+')').hide();
  1515. $('.line').hide();
  1516. $('.d').slideUp(300);
  1517. $('#central').addClass('bT');
  1518. $(idd+' .avatarImg').addClass('avatarr');
  1519. $(idd+' .form').slideDown(300);
  1520. $(idd).removeClass('aUser');
  1521. $('#aUser1,#aUser2').hide();
  1522. $('#return').show();
  1523. $('.delItem').hide();
  1524. if(idi==0){
  1525. $('#aUser0').show();
  1526. } else {
  1527. setTimeout(function(){
  1528. $('#password'+idi).focus();
  1529. }, 550);
  1530. }
  1531. centerBox();
  1532. setTimeout(function(){
  1533. centerBox();
  1534. },200);
  1535. setTimeout(function(){
  1536. centerBox();
  1537. },400);
  1538. }
  1539. function dontSee() {
  1540. $('#errorLogin').hide();
  1541. $('.aUser').show();
  1542. $('.line').show();
  1543. $('.d').slideDown(300);
  1544. $('#central').removeClass('bT');
  1545. $('.aUc').addClass('aUser');
  1546. $('.avatarImg').removeClass('avatarr');
  1547. $('.form').hide();
  1548. $('#aUser0').hide();
  1549. $('#return').hide();
  1550. $('#aUser1,#aUser2').slideDown();
  1551. $('.delItem').fadeIn();
  1552. setTimeout(function(){
  1553. centerBox();
  1554. },200);
  1555. setTimeout(function(){
  1556. centerBox();
  1557. },400);
  1558.  
  1559. }
  1560.  
  1561. $(function(){
  1562. });
  1563.  
  1564. function light() {
  1565. $('#bottomRight').animate({'opacity':0},1400);
  1566. $('#night').fadeOut(1400);
  1567.  
  1568. }
  1569. function star() {
  1570. $('#star1').fadeOut(300);
  1571. $('#star2').fadeIn(300);
  1572. setTimeout(function(){
  1573. $('#star2').fadeOut(300);
  1574. $('#star1').fadeIn(300);
  1575. },300);
  1576. setTimeout(function(){
  1577. $('#star2').fadeIn(300);
  1578. $('#star1').fadeIn(300);
  1579. },700);
  1580. setTimeout(function(){
  1581. $('#star1').fadeOut(600);
  1582. $('#star2').fadeOut(600);
  1583. },1100);
  1584. }
  1585. $(window).load(function(){
  1586. setTimeout(function(){
  1587. light();
  1588. },1500);
  1589. setTimeout(function(){
  1590. $('#sun').animate({right:'-280px',top:'-300px'},2000);
  1591. },1400);
  1592. setTimeout(function(){
  1593. door();
  1594. },1800);
  1595. star();
  1596. });
  1597. function login(u,p) {
  1598. $('#loader').fadeIn('fast');
  1599. $('#errorLogin').slideUp();
  1600. $.post("ajaxIndex/login2.php", {
  1601. username: u,
  1602. password: p
  1603. })
  1604. .done(function(data) {
  1605. $('#errorLogin').html(data);
  1606. });
  1607. }
  1608. function errorL() {
  1609. $('#errorLogin').slideDown();
  1610. }
  1611.  
  1612. function delItem(iiid) {
  1613. $('#lid'+iiid+'').fadeOut();
  1614. $('#central').fadeOut('fast',function(){
  1615. $.post("ajaxIndex/delItem.php", {
  1616. id: iiid
  1617. })
  1618. .done(function(data) {
  1619. alert(data);
  1620. $('.id'+iiid).hide();
  1621. $('#lid'+iiid+'').hide();
  1622. dontSee();
  1623. setTimeout(function(){
  1624. $('#central').fadeIn('fast');
  1625. },500);
  1626. });
  1627. });
  1628. }
  1629. setTimeout(function(){
  1630. $('#central').animate({opacity:1});
  1631. centerBox();
  1632. },1000);
  1633. </script>
  1634. </head>
  1635. <body>
  1636.  
  1637. <div id="night"></div>
  1638. <div id="light"></div>
  1639. <div id="star1"></div>
  1640. <div id="star2"></div>
  1641. <div id="bottomRight"></div>
  1642. <div id="bottomRightClear"></div>
  1643. <div id="sun"></div>
  1644.  
  1645. <div id="cookies"></div>
  1646. <div id="header">
  1647. <center>
  1648. <table>
  1649. <tr>
  1650. <td>
  1651.  
  1652. <div id="logo">
  1653. <img src="http://localhost/app/tpl/skins/Beta/images/logo2.png">
  1654. </div>
  1655. <center
  1656.  
  1657.  
  1658. </nav>
  1659. </td>
  1660. </tr>
  1661. </table>
  1662. </center>
  1663. </div>
  1664.  
  1665. <div id="central">
  1666.  
  1667. <!--<div id="return" onclick="dontSee();">&#8592; Retour</div>-->
  1668. <nav class="cl-effect-18" id="return"><a style="color:#fff;font-size:12px!important;" href="javascript:void(0);" onclick="dontSee();" data-hover="&#8592; Retour">&#8592; Terug</a></nav>
  1669. <div id="errorLogin"></div>
  1670.  
  1671. </center>
  1672. <div id="l">
  1673. <div style="padding: 10px;">
  1674. <center>
  1675. <div id="people-inside">
  1676. <b><span><span class="stats-fig"><font color="black">Er zijn {online} Beta(s) online!</font></span><br> </span></b>
  1677. <i></i><div></div>
  1678. </div>
  1679. <div class="index_titel"><font color="black">Meld je aan!</font></div>
  1680. <form id="loginformitem" name="loginformitem" method="post">
  1681. <input style="color: #8C8C8C; width: 87%; border: 1px solid blue;" type="text" placeholder="Gebruikersnaam" name="log_username" id="credentials-email" /><br /><br />
  1682. <input style="color: #8C8C8C; width: 87%; border: 1px solid blue;"type="password" placeholder="Wachtwoord" name="log_password" id="credentials-password" /><br /><br />
  1683. <input class="loginbutton2"type="submit" name='login' value="Login" >
  1684. <a href="register" display="block"><div class="regbutton" style="text-decoration:none;" id="regbutton"><center>Registreren</center></div></a>
  1685. </form>
  1686.  
  1687.  
  1688. </div>
  1689. <div class="clear"></div>
  1690. </div>
  1691. <div id="central">
  1692.  
  1693. </div>
  1694. <div class="form">
  1695.  
  1696. </nav>
  1697. <div style="height:7px;"></div>
  1698. </div>
  1699. <div class="clear"></div>
  1700. </div>
  1701. <div class="clear"></div>
  1702. <div class="aUser aUc" id="aUser0" style="display:none;" onclick="see(0);">
  1703. <div class="round grey">
  1704.  
  1705. </div>
  1706. <div class="username">
  1707.  
  1708. </nav>
  1709. <div style="height:7px;"></div>
  1710. </div>
  1711. <div class="clear"></div>
  1712. </div>
  1713.  
  1714.  
  1715.  
  1716. </div>
  1717.  
  1718.  
  1719. </div>
  1720.  
  1721. </body>
  1722. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!