Advertisement
xdemonessx

Ahokas Start Page / White Style

Feb 7th, 2014
448
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.91 KB | None | 0 0
  1. @font-face {
  2.     font-family:"calibri-webfont";
  3.     font-style:normal;
  4.     font-weight:600;
  5. src:local("calibri-webfont"), local("calibri-webfont"), url("C:\Windows\Fonts\calibri-webfont.ttf") format("ttf");
  6. }
  7. @-webkit-keyframes animate-sites {
  8.     0% { transform:scale(0); opacity:0; }
  9.     25% { opacity:1; }
  10.     100% { transform:scale(1); }
  11. }
  12. @-moz-keyframes animate-sites {
  13.     0% { transform:scale(0); opacity:0; }
  14.     25% { opacity:1; }
  15.     100% { transform:scale(1); }
  16. }
  17. @-webkit-keyframes animate-opacity {
  18.     0% { opacity:0; }
  19.     100% { opacity:1; }
  20. }
  21. @-moz-keyframes animate-opacity {
  22.     0% { opacity:0; }
  23.     100% { opacity:1; }
  24. }
  25. @-webkit-keyframes animate-panel {
  26.     0% { box-shadow:none; height:0px; }
  27.     100% { box-shadow:#c4c4c4 0 0 10px; height:275px; }
  28. }
  29. @-moz-keyframes animate-panel {
  30.     0% { box-shadow:none; height:0px; }
  31.     100% { box-shadow:none 0 0 10px; height:275px; }
  32. }
  33. *:focus {
  34.     outline:none!important;
  35.     -moz-outline:none!important;
  36.     -moz-user-focus:none!important;
  37. }
  38. body, html {
  39.     background:none;
  40.     height:100%;
  41.     min-height:100%;
  42.     margin:0;
  43.     padding:0;
  44. }
  45. button, input {
  46.     -moz-transition:all .3s ease;
  47.     -webkit-transition:all .3s ease;
  48.     -moz-appearence:none;
  49.     -webkit-appearance:none;
  50. }
  51. #parent {
  52.     min-height:100%;
  53.     position:relative;
  54. }
  55. #panel {
  56.     background:none;
  57.     border: none;
  58.     border-top:none;
  59.     border-bottom:none;
  60.     position:absolute;
  61.     top:0;
  62.     bottom:0;
  63.     left:0;
  64.     right:0;
  65.     width:100%;
  66.     height:275px;
  67.     margin:auto;
  68.     box-shadow:none;
  69.     -webkit-animation: animate-panel .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  70.     -moz-animation: animate-panel .3s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  71. }
  72. #panel, #sites, #search, button, input {
  73.     box-sizing:border-box;
  74.     -moz-box-sizing:border-box;
  75.     -webkit-box-sizing:border-box;
  76. }
  77. #navigation {
  78.     height:28px;
  79.     position:absolute;
  80.     top:-28px;
  81.     width:100%;
  82.     -webkit-animation: animate-opacity .8s ease-in;
  83.     -moz-animation: animate-opacity .8s ease-in;
  84. }
  85. #navigation ul {
  86.     list-style:none;
  87.     margin:0;
  88.     padding:0;
  89.     text-align:center;
  90.  
  91. }
  92. #wrapper {
  93.     margin:0 auto;
  94.     width:692px;
  95. }
  96. #sites {
  97.     height:230px;
  98.     padding:5px 10px;
  99.     text-align:center;
  100. }
  101. #sites a {
  102.     background:none;
  103.     border:1px solid #919191;
  104.     border-bottom:1px solid #919191;
  105.     color:rgb(61,61,61);
  106.     display:inline-block;
  107.     font-family:'calibri-webfont';
  108.     font-size:200%;
  109.     height:100px;
  110.     line-height:100px;
  111.     margin:5px;
  112.     position:relative;
  113.     text-align:center;
  114.     text-decoration:none;
  115.     text-shadow:#c4c4c4  0px 0px 5px;
  116.     width:100px;
  117.     z-index:1;
  118.     border-radius:0px;
  119.     box-shadow:inset #c4c4c4 0 0px 0px;
  120.     -webkit-transition: all .4s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s;
  121.     -moz-transition: all .4s cubic-bezier(0.680, -0.550, 0.265, 1.550) .1s;
  122.     -webkit-animation: animate-sites .4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  123.     -moz-animation: animate-sites .4s cubic-bezier(0.680, -0.550, 0.265, 1.550);
  124. }
  125. #sites a:hover, #sites a:active {
  126.     background:none;
  127.     border:none;
  128.     color:rgb(94, 0, 22);
  129.     transform:scale(1.5);
  130.     -webkit-transform:scale(1.5);
  131.     box-shadow:none;
  132.     text-shadow:#eaeaea 0px 0px 5px, #c4c4c4 0px 1px, #c4c4c4 0px 2px;
  133.    
  134. }
  135. #search {
  136.     height:46px;
  137.     padding:5px 15px;
  138. }
  139. #search form {
  140.     position:relative;
  141.     -webkit-animation: animate-opacity .4s ease-in;
  142.     -moz-animation: animate-opacity .4s ease-in;
  143.  
  144. }
  145. #search input[type="text"] {
  146.     background:none;
  147.     border:1px solid #919191;
  148.     border-bottom:1px solid #919191;
  149.     width:100%;
  150.     height:33px;
  151.     padding:3px 86px 3px 6px;
  152.     border-radius:0px;
  153.     box-shadow:inset #c4c4c4 0 0 0px;
  154.     font-size: 12pt;
  155.     font-family:'calibri-webfont';
  156.     color: #404040;
  157. }
  158. #search input[type="text"]:hover, #search input[type="text"]:focus {
  159.     box-shadow:inset #c4c4c4 0 0 0px;
  160.     font-family:'calibri-webfont';
  161.     font-size: 12pt;
  162.     color:#3E549C;
  163.  
  164. }
  165. #search button {
  166.     cursor:pointer;
  167.     font-size:12px;
  168.     position:absolute;
  169.     top:4px;
  170.     right:4px;
  171.     background:-moz-linear-gradient(top, #e9e9e9 0%, #dcdcdc 35%, #cfcfcf 65%, #c2c2c2 101%);
  172.     background:-webkit-linear-gradient(top, #e9e9e9 0%,#dcdcdc 35%,#cfcfcf65%, #c2c2c2 101%);
  173.     border:1px solid rgba(164,164,164,.6);
  174.     color:#404040;
  175.     text-shadow:#a4a4a4 0 1px;
  176.     width:80px;
  177.     height:25px;
  178.     border-radius:3px;
  179.     box-shadow:inset #fefefe 0 0 3px, #a4a4a4 0 0 3px;
  180. }
  181. #search button:hover, #search button:focus {
  182.     background:-moz-linear-gradient(top, #e9e9e9 0%, #dcdcdc 35%, #cfcfcf 65%, #c2c2c2 101%);
  183.     background:-webkit-linear-gradient(top, #e9e9e9 0%, #dcdcdc 35%, #cfcfcf 65%, #c2c2c2 101%);
  184.     border:1px solid rgba(225,225,225,.75);
  185.     box-shadow:inset #fbfbfb 0 0 6px, #404040 0 0 3px;
  186. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement