├── bin ├── Test.dll └── Test.pdb ├── font ├── .DS_Store ├── iconic_stroke.eot ├── iconic_stroke.otf ├── iconic_stroke.ttf ├── sosa-regular-webfont.eot ├── sosa-regular-webfont.ttf ├── iconic_stroke-webfont.eot ├── iconic_stroke-webfont.ttf ├── iconic_stroke-webfont.woff ├── sosa-regular-webfont.woff ├── iconic_stroke.svg └── iconic_stroke-webfont.svg ├── images ├── Gear-128.png └── mobile.png ├── obj └── Debug │ ├── Test.dll │ ├── Test.pdb │ ├── DesignTimeResolveAssemblyReferencesInput.cache │ └── Test.csproj.FileListAbsolute.txt ├── Web.config ├── lamp.aspx.cs ├── mac.aspx.cs ├── test0.aspx.cs ├── test1.aspx.cs ├── test2.aspx.cs ├── default.aspx.cs ├── menuResponsive.aspx.cs ├── mac.aspx.designer.cs ├── lamp.aspx.designer.cs ├── test0.aspx.designer.cs ├── test1.aspx.designer.cs ├── test2.aspx.designer.cs ├── default.aspx.designer.cs ├── menuResponsive.aspx.designer.cs ├── test0.aspx ├── LICENSE ├── Test.csproj.user ├── test1.aspx ├── Web.Debug.config ├── Web.Release.config ├── Properties └── AssemblyInfo.cs ├── css ├── StyleSheet1.css ├── demo.css ├── simpletextrotator.css ├── StyleSheet2.css ├── normalize.css ├── fakeLoader.css └── grid.css ├── js ├── fakeLoader.min.js ├── jquery.simple-text-rotator.js ├── viewportchecker.js └── fakeLoader.js ├── default.aspx ├── lamp.aspx ├── mac.aspx ├── Test.csproj ├── menuResponsive.aspx └── test2.aspx /bin/Test.dll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/bin/Test.dll -------------------------------------------------------------------------------- /bin/Test.pdb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/bin/Test.pdb -------------------------------------------------------------------------------- /font/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/.DS_Store -------------------------------------------------------------------------------- /images/Gear-128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/images/Gear-128.png -------------------------------------------------------------------------------- /images/mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/images/mobile.png -------------------------------------------------------------------------------- /obj/Debug/Test.dll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/obj/Debug/Test.dll -------------------------------------------------------------------------------- /obj/Debug/Test.pdb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/obj/Debug/Test.pdb -------------------------------------------------------------------------------- /font/iconic_stroke.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/iconic_stroke.eot -------------------------------------------------------------------------------- /font/iconic_stroke.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/iconic_stroke.otf -------------------------------------------------------------------------------- /font/iconic_stroke.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/iconic_stroke.ttf -------------------------------------------------------------------------------- /font/sosa-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/sosa-regular-webfont.eot -------------------------------------------------------------------------------- /font/sosa-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/sosa-regular-webfont.ttf -------------------------------------------------------------------------------- /font/iconic_stroke-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/iconic_stroke-webfont.eot -------------------------------------------------------------------------------- /font/iconic_stroke-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/iconic_stroke-webfont.ttf -------------------------------------------------------------------------------- /font/iconic_stroke-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/iconic_stroke-webfont.woff -------------------------------------------------------------------------------- /font/sosa-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/font/sosa-regular-webfont.woff -------------------------------------------------------------------------------- /obj/Debug/DesignTimeResolveAssemblyReferencesInput.cache: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iQuartz/test/master/obj/Debug/DesignTimeResolveAssemblyReferencesInput.cache -------------------------------------------------------------------------------- /Web.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lamp.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class lamp : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /mac.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class mac : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /obj/Debug/Test.csproj.FileListAbsolute.txt: -------------------------------------------------------------------------------- 1 | c:\users\supachaiyin\documents\visual studio 2010\Projects\Test\Test\bin\Test.dll 2 | c:\users\supachaiyin\documents\visual studio 2010\Projects\Test\Test\bin\Test.pdb 3 | c:\users\supachaiyin\documents\visual studio 2010\Projects\Test\Test\obj\Debug\Test.dll 4 | c:\users\supachaiyin\documents\visual studio 2010\Projects\Test\Test\obj\Debug\Test.pdb 5 | -------------------------------------------------------------------------------- /test0.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class test0 : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /test1.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class test1 : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /test2.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class test2 : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /default.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class _default : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /menuResponsive.aspx.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Web; 5 | using System.Web.UI; 6 | using System.Web.UI.WebControls; 7 | 8 | namespace Test 9 | { 10 | public partial class menuResponsive : System.Web.UI.Page 11 | { 12 | protected void Page_Load(object sender, EventArgs e) 13 | { 14 | 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /mac.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test 11 | { 12 | 13 | 14 | public partial class mac 15 | { 16 | 17 | /// 18 | /// form1 control. 19 | /// 20 | /// 21 | /// Auto-generated field. 22 | /// To modify move field declaration from designer file to code-behind file. 23 | /// 24 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /lamp.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test 11 | { 12 | 13 | 14 | public partial class lamp 15 | { 16 | 17 | /// 18 | /// form1 control. 19 | /// 20 | /// 21 | /// Auto-generated field. 22 | /// To modify move field declaration from designer file to code-behind file. 23 | /// 24 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test0.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test 11 | { 12 | 13 | 14 | public partial class test0 15 | { 16 | 17 | /// 18 | /// form1 control. 19 | /// 20 | /// 21 | /// Auto-generated field. 22 | /// To modify move field declaration from designer file to code-behind file. 23 | /// 24 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test1.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test 11 | { 12 | 13 | 14 | public partial class test1 15 | { 16 | 17 | /// 18 | /// form1 control. 19 | /// 20 | /// 21 | /// Auto-generated field. 22 | /// To modify move field declaration from designer file to code-behind file. 23 | /// 24 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test2.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test 11 | { 12 | 13 | 14 | public partial class test2 15 | { 16 | 17 | /// 18 | /// form1 control. 19 | /// 20 | /// 21 | /// Auto-generated field. 22 | /// To modify move field declaration from designer file to code-behind file. 23 | /// 24 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /default.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test { 11 | 12 | 13 | public partial class _default { 14 | 15 | /// 16 | /// form1 control. 17 | /// 18 | /// 19 | /// Auto-generated field. 20 | /// To modify move field declaration from designer file to code-behind file. 21 | /// 22 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /menuResponsive.aspx.designer.cs: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------ 2 | // 3 | // This code was generated by a tool. 4 | // 5 | // Changes to this file may cause incorrect behavior and will be lost if 6 | // the code is regenerated. 7 | // 8 | //------------------------------------------------------------------------------ 9 | 10 | namespace Test 11 | { 12 | 13 | 14 | public partial class menuResponsive 15 | { 16 | 17 | /// 18 | /// form1 control. 19 | /// 20 | /// 21 | /// Auto-generated field. 22 | /// To modify move field declaration from designer file to code-behind file. 23 | /// 24 | protected global::System.Web.UI.HtmlControls.HtmlForm form1; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test0.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test0.aspx.cs" Inherits="Test.test0" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 iQuartz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /Test.csproj.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | CurrentPage 10 | True 11 | False 12 | False 13 | False 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | False 23 | True 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /test1.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test1.aspx.cs" Inherits="Test.test1" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | MySite 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /Web.Release.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 30 | 31 | -------------------------------------------------------------------------------- /Properties/AssemblyInfo.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using System.Runtime.CompilerServices; 3 | using System.Runtime.InteropServices; 4 | 5 | // General Information about an assembly is controlled through the following 6 | // set of attributes. Change these attribute values to modify the information 7 | // associated with an assembly. 8 | [assembly: AssemblyTitle("Test")] 9 | [assembly: AssemblyDescription("")] 10 | [assembly: AssemblyConfiguration("")] 11 | [assembly: AssemblyCompany("")] 12 | [assembly: AssemblyProduct("Test")] 13 | [assembly: AssemblyCopyright("Copyright © 2015")] 14 | [assembly: AssemblyTrademark("")] 15 | [assembly: AssemblyCulture("")] 16 | 17 | // Setting ComVisible to false makes the types in this assembly not visible 18 | // to COM components. If you need to access a type in this assembly from 19 | // COM, set the ComVisible attribute to true on that type. 20 | [assembly: ComVisible(false)] 21 | 22 | // The following GUID is for the ID of the typelib if this project is exposed to COM 23 | [assembly: Guid("80ca0422-b2a6-4b06-be75-51f111fadf04")] 24 | 25 | // Version information for an assembly consists of the following four values: 26 | // 27 | // Major Version 28 | // Minor Version 29 | // Build Number 30 | // Revision 31 | // 32 | // You can specify all the values or you can default the Revision and Build Numbers 33 | // by using the '*' as shown below: 34 | [assembly: AssemblyVersion("1.0.0.0")] 35 | [assembly: AssemblyFileVersion("1.0.0.0")] 36 | -------------------------------------------------------------------------------- /css/StyleSheet1.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IconicStroke'; 3 | src: url('../font/sosa-regular-webfont.eot'); 4 | src: url('../font/sosa-regular-webfont.eot?#iefix') format('embedded-opentype'), 5 | url('../font/sosa-regular-webfont.woff') format('woff'), 6 | url('../font/sosa-regular-webfont.ttf') format('truetype'), 7 | url('../font/sosa-regular-webfont.svg#IconicStrokeRegular') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .iconic 13 | { 14 | color: #FFFFFF; 15 | font-family: 'Microsoft Sans Serif'; 16 | text-decoration:none; 17 | } 18 | .rotate 19 | { 20 | font-size: 25px; 21 | font-family: "IconicStroke"; 22 | } 23 | 24 | .expan { 25 | margin:100px auto; 26 | width:200px; 27 | } 28 | .expan ul { 29 | font-weight:900; 30 | } 31 | .expan ul li { 32 | position:relative; 33 | list-style:none; 34 | cursor:pointer; 35 | } 36 | .expan ul li ul { 37 | position:absolute; 38 | left:0; 39 | right:0; 40 | } 41 | .expan ul .clicker { 42 | background:#2284B5; 43 | color:#FFF; 44 | } 45 | .expan ul .clicker:hover, .expan ul .active 46 | { 47 | background: #196F9A; 48 | color: #FFFFFF; 49 | } 50 | .expan img { 51 | position:absolute; 52 | top:9px; 53 | left:12px; 54 | } 55 | .expan ul li a { 56 | transition:background-color 0.2s ease-in-out; 57 | -webkit-transition:background-color 0.2s ease-in-out; 58 | -moz-transition:background-color 0.2s ease-in-out; 59 | display:block; 60 | padding:8px 10px 8px 40px; 61 | background:#FFF; 62 | color:#333; 63 | text-decoration:none; 64 | } 65 | .expan ul li a:hover { 66 | background:#F2F2F2; 67 | } 68 | /* Fallbacks */ 69 | .expan .no-js ul { 70 | display:none; 71 | } 72 | .expan .no-js:hover ul { 73 | display:block; 74 | } -------------------------------------------------------------------------------- /js/fakeLoader.min.js: -------------------------------------------------------------------------------- 1 | (function(b){b.fn.fakeLoader=function(m){var f=b.extend({timeToHide:1200,pos:"fixed",top:"0px",left:"0px",width:"100%",height:"100%",zIndex:"999",bgColor:"#2ecc71",spinner:"spinner7",imagePath:""},m);var l='
';var k='
';var j='
';var i='
';var h='
';var g='
';var e='
';var d=b(this);var c={position:f.pos,width:f.width,height:f.height,top:f.top,left:f.left};d.css(c);d.each(function(){var n=f.spinner;switch(n){case"spinner1":d.html(l);break;case"spinner2":d.html(k);break;case"spinner3":d.html(j);break;case"spinner4":d.html(i);break;case"spinner5":d.html(h);break;case"spinner6":d.html(g);break;case"spinner7":d.html(e);break;default:d.html(l)}if(f.imagePath!=""){d.html('
');a()}});setTimeout(function(){b(d).fadeOut()},f.timeToHide);return this.css({backgroundColor:f.bgColor,zIndex:f.zIndex})};function a(){var c=b(window).width();var e=b(window).height();var d=b(".fl").outerWidth();var f=b(".fl").outerHeight();b(".fl").css({position:"absolute",left:(c/2)-(d/2),top:(e/2)-(f/2)})}b(window).load(function(){a();b(window).resize(function(){a()})})}(jQuery)); -------------------------------------------------------------------------------- /default.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Test._default" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 38 | 39 | 40 |
41 |
42 | 52 | 53 |
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /js/jquery.simple-text-rotator.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-simple-text-rotator.js v1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * A very simple and light weight jQuery plugin that 8 | * allows you to rotate multiple text without changing 9 | * the layout 10 | * https://github.com/peachananr/simple-text-rotator 11 | * 12 | * ========================================================== */ 13 | 14 | !function ($) { 15 | 16 | var defaults = { 17 | animation: "dissolve", 18 | separator: ",", 19 | speed: 1000 20 | }; 21 | var refreshIntervalId; 22 | var deg = 0; 23 | var isRotate = true; 24 | $.fn.textrotator = function (options) { 25 | var settings = $.extend({}, defaults, options); 26 | 27 | if (isRotate) { 28 | return this.each(function () { 29 | var el = $(this) 30 | var array = []; 31 | $.each(el.text().split(settings.separator), function (key, value) { 32 | array.push(value); 33 | }); 34 | el.text(array[0]); 35 | var rotate = function () { 36 | index = $.inArray(el.text(), array) 37 | if ((index + 1) == array.length) index = -1 38 | 39 | el.wrapInner("").find(".rotating").hide().text(array[index + 1]).show().css({ 40 | "-webkit-transform": "rotate(" + deg + "deg)", 41 | "-moz-transform": "rotate(" + deg + "deg)", 42 | "-o-transform": "rotate(" + deg + "deg)", 43 | "transform": "rotate(" + deg + "deg)" 44 | }) 45 | deg = (deg >= 360) ? 30 : deg + 30; 46 | }; 47 | refreshIntervalId = setInterval(rotate, settings.speed); 48 | isRotate = false; 49 | }); 50 | } 51 | else { 52 | clearInterval(refreshIntervalId); 53 | isRotate = true; 54 | } 55 | } 56 | $.fn.textstop = function (options) { 57 | clearInterval(refreshIntervalId); 58 | isRotate = true; 59 | } 60 | 61 | } (window.jQuery); 62 | 63 | 64 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato); 2 | @import url(http://fonts.googleapis.com/css?family=Bitter:400,700); 3 | 4 | 5 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 6 | body, html { font-size: 100%; padding: 0; margin: 0;} 7 | .clearfix:before, .clearfix:after { content: " "; display: table; } 8 | .clearfix:after { clear: both; } 9 | 10 | body { 11 | font-family: 'Lato',Arial, sans-serif; 12 | color: #777; 13 | font-size: 16px; 14 | line-height: 1.6; 15 | } 16 | 17 | a { 18 | color: #539f10; 19 | text-decoration: none; 20 | } 21 | 22 | a:hover, 23 | a:active { 24 | color: #111; 25 | } 26 | h1.site-title a{ 27 | color:#555; 28 | } 29 | 30 | h2{ 31 | font-family: 'Bitter',Georgia,serif; 32 | font-size: 40px; 33 | font-weight: 900; 34 | color: #222; 35 | margin:0px; 36 | line-height: 1.2; 37 | margin-bottom: 20px; 38 | } 39 | 40 | .topbar{ 41 | height: 40px; 42 | width: 100%; 43 | position: fixed; 44 | line-height: 40px; 45 | background: #539f10; 46 | top:0px; 47 | padding: 0px 10px; 48 | z-index: 100; 49 | } 50 | 51 | .topbar a{ 52 | color: #fff; 53 | } 54 | 55 | .container{ 56 | width: 760px; 57 | margin: 100px auto 50px; 58 | } 59 | 60 | header.top{ 61 | border-bottom: 1px solid #ddd; 62 | margin-bottom: 50px; 63 | } 64 | 65 | header h1{ 66 | font-size: 46px; 67 | text-align: center; 68 | text-transform: uppercase; 69 | font-weight: normal; 70 | margin: 0px 0px; 71 | } 72 | 73 | .top ul{ 74 | margin: 0px; 75 | text-align: center; 76 | padding: 0px; 77 | margin-bottom: 30px; 78 | } 79 | 80 | .top ul li{ 81 | display: inline; 82 | list-style: none; 83 | margin: 0px 20px; 84 | } 85 | 86 | nav.effects{ 87 | margin: 20px 0px 50px; 88 | } 89 | 90 | nav.effects ul{ 91 | margin: 0px 0px; 92 | padding: 0px 0px; 93 | text-align: center; 94 | } 95 | 96 | nav.effects ul li{ 97 | display: inline; 98 | margin: 10px 10px; 99 | text-transform: uppercase; 100 | font-size: 12px; 101 | 102 | } 103 | 104 | nav.effects ul li a{ 105 | border: 2px solid #539f10; 106 | padding: 10px 20px; 107 | color: #539f10; 108 | opacity: 0.8; 109 | } 110 | 111 | nav.effects ul li a:hover{ 112 | opacity: 1; 113 | } 114 | 115 | .post{ 116 | margin-bottom: 80px; 117 | text-align: center; 118 | } 119 | 120 | span.icon{ 121 | display: block; 122 | font-size: 200px; 123 | color: #111; 124 | margin: 30px 0px; 125 | } 126 | 127 | footer.footer{ 128 | text-align: center; 129 | padding: 50px 0px 20px; 130 | border-top:1px solid #eee; 131 | } 132 | 133 | 134 | /* Required */ 135 | 136 | .hidden{ 137 | opacity: 0; 138 | } 139 | 140 | .visible{ 141 | opacity: 1; 142 | } 143 | -------------------------------------------------------------------------------- /js/viewportchecker.js: -------------------------------------------------------------------------------- 1 | /* 2 | Version 1.3.2 3 | The MIT License (MIT) 4 | 5 | Copyright (c) 2014 Dirk Groenen 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of 8 | this software and associated documentation files (the "Software"), to deal in 9 | the Software without restriction, including without limitation the rights to 10 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 11 | the Software, and to permit persons to whom the Software is furnished to do so, 12 | subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | */ 17 | 18 | (function($){ 19 | $.fn.viewportChecker = function(useroptions){ 20 | // Define options and extend with user 21 | var options = { 22 | classToAdd: 'visible', 23 | offset: 100, 24 | callbackFunction: function(elem){} 25 | }; 26 | $.extend(options, useroptions); 27 | 28 | // Cache the given element and height of the browser 29 | var $elem = this, 30 | windowHeight = $(window).height(); 31 | 32 | this.checkElements = function(){ 33 | // Set some vars to check with 34 | var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'), 35 | viewportTop = $(scrollElem).scrollTop(), 36 | viewportBottom = (viewportTop + windowHeight); 37 | 38 | $elem.each(function(){ 39 | var $obj = $(this); 40 | // If class already exists; quit 41 | if ($obj.hasClass(options.classToAdd)){ 42 | return; 43 | } 44 | 45 | // define the top position of the element and include the offset which makes is appear earlier or later 46 | var elemTop = Math.round( $obj.offset().top ) + options.offset, 47 | elemBottom = elemTop + ($obj.height()); 48 | 49 | // Add class if in viewport 50 | if ((elemTop < viewportBottom) && (elemBottom > viewportTop)){ 51 | $obj.addClass(options.classToAdd); 52 | 53 | // Do the callback function. Callback wil send the jQuery object as parameter 54 | options.callbackFunction($obj); 55 | } 56 | }); 57 | }; 58 | 59 | // Run checkelements on load and scroll 60 | $(window).scroll(this.checkElements); 61 | this.checkElements(); 62 | 63 | // On resize change the height var 64 | $(window).resize(function(e){ 65 | windowHeight = e.currentTarget.innerHeight; 66 | }); 67 | }; 68 | })(jQuery); -------------------------------------------------------------------------------- /lamp.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lamp.aspx.cs" Inherits="Test.lamp" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 116 | 117 | 118 |
119 |
120 | 121 | 122 | 123 |
124 |
125 |
126 |
127 |
128 | 129 | 130 | -------------------------------------------------------------------------------- /css/simpletextrotator.css: -------------------------------------------------------------------------------- 1 | .rotating { 2 | display: inline-block; 3 | -webkit-transform-style: preserve-3d; 4 | -moz-transform-style: preserve-3d; 5 | -ms-transform-style: preserve-3d; 6 | -o-transform-style: preserve-3d; 7 | transform-style: preserve-3d; 8 | -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); 9 | -moz-transform: rotateX(0) rotateY(0) rotateZ(0); 10 | -ms-transform: rotateX(0) rotateY(0) rotateZ(0); 11 | -o-transform: rotateX(0) rotateY(0) rotateZ(0); 12 | transform: rotateX(0) rotateY(0) rotateZ(0); 13 | -webkit-transition: 0.5s; 14 | -moz-transition: 0.5s; 15 | -ms-transition: 0.5s; 16 | -o-transition: 0.5s; 17 | transition: 0.5s; 18 | -webkit-transform-origin-x: 50%; 19 | } 20 | 21 | .rotating.flip { 22 | position: relative; 23 | } 24 | 25 | .rotating .front, .rotating .back { 26 | left: 0; 27 | top: 0; 28 | -webkit-backface-visibility: hidden; 29 | -moz-backface-visibility: hidden; 30 | -ms-backface-visibility: hidden; 31 | -o-backface-visibility: hidden; 32 | backface-visibility: hidden; 33 | } 34 | 35 | .rotating .front { 36 | position: absolute; 37 | display: inline-block; 38 | -webkit-transform: translate3d(0,0,1px); 39 | -moz-transform: translate3d(0,0,1px); 40 | -ms-transform: translate3d(0,0,1px); 41 | -o-transform: translate3d(0,0,1px); 42 | transform: translate3d(0,0,1px); 43 | } 44 | 45 | .rotating.flip .front { 46 | z-index: 1; 47 | } 48 | 49 | .rotating .back { 50 | display: block; 51 | opacity: 0; 52 | } 53 | 54 | .rotating.spin { 55 | -webkit-transform: rotate(360deg) scale(0); 56 | -moz-transform: rotate(360deg) scale(0); 57 | -ms-transform: rotate(360deg) scale(0); 58 | -o-transform: rotate(360deg) scale(0); 59 | transform: rotate(360deg) scale(0); 60 | } 61 | 62 | 63 | 64 | .rotating.flip .back { 65 | z-index: 2; 66 | display: block; 67 | opacity: 1; 68 | 69 | -webkit-transform: rotateY(180deg) translate3d(0,0,0); 70 | -moz-transform: rotateY(180deg) translate3d(0,0,0); 71 | -ms-transform: rotateY(180deg) translate3d(0,0,0); 72 | -o-transform: rotateY(180deg) translate3d(0,0,0); 73 | transform: rotateY(180deg) translate3d(0,0,0); 74 | } 75 | 76 | .rotating.flip.up .back { 77 | -webkit-transform: rotateX(180deg) translate3d(0,0,0); 78 | -moz-transform: rotateX(180deg) translate3d(0,0,0); 79 | -ms-transform: rotateX(180deg) translate3d(0,0,0); 80 | -o-transform: rotateX(180deg) translate3d(0,0,0); 81 | transform: rotateX(180deg) translate3d(0,0,0); 82 | } 83 | 84 | .rotating.flip.cube .front { 85 | -webkit-transform: translate3d(0,0,100px) scale(0.9,0.9); 86 | -moz-transform: translate3d(0,0,100px) scale(0.85,0.85); 87 | -ms-transform: translate3d(0,0,100px) scale(0.85,0.85); 88 | -o-transform: translate3d(0,0,100px) scale(0.85,0.85); 89 | transform: translate3d(0,0,100px) scale(0.85,0.85); 90 | } 91 | 92 | .rotating.flip.cube .back { 93 | -webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9); 94 | -moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 95 | -ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 96 | -o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 97 | transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85); 98 | } 99 | 100 | .rotating.flip.cube.up .back { 101 | -webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9); 102 | -moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 103 | -ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 104 | -o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 105 | transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85); 106 | } -------------------------------------------------------------------------------- /js/fakeLoader.js: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------------- 2 | *JAVASCRIPT "FakeLoader.js" 3 | *Version: 1.1.0 - 2014 4 | *author: João Pereira 5 | *website: http://www.joaopereira.pt 6 | *Licensed MIT 7 | -----------------------------------------------------------------------*/ 8 | (function ($) { 9 | 10 | $.fn.fakeLoader = function(options) { 11 | 12 | //Defaults 13 | var settings = $.extend({ 14 | timeToHide:1200, // Default Time to hide fakeLoader 15 | pos:'fixed',// Default Position 16 | top:'0px', // Default Top value 17 | left:'0px', // Default Left value 18 | width:'100%', // Default width 19 | height:'100%', // Default Height 20 | zIndex: '999', // Default zIndex 21 | bgColor: '#2ecc71', // Default background color 22 | spinner:'spinner7', // Default Spinner 23 | imagePath:'' // Default Path custom image 24 | }, options); 25 | 26 | //Customized Spinners 27 | var spinner01 = '
'; 28 | var spinner02 = '
'; 29 | var spinner03 = '
'; 30 | var spinner04 = '
'; 31 | var spinner05 = '
'; 32 | var spinner06 = '
'; 33 | var spinner07 = '
'; 34 | 35 | //The target 36 | var el = $(this); 37 | 38 | //Init styles 39 | var initStyles = { 40 | 'position':settings.pos, 41 | 'width':settings.width, 42 | 'height':settings.height, 43 | 'top':settings.top, 44 | 'left':settings.left 45 | }; 46 | 47 | //Apply styles 48 | el.css(initStyles); 49 | 50 | //Each 51 | el.each(function() { 52 | var a = settings.spinner; 53 | //console.log(a) 54 | switch (a) { 55 | case 'spinner1': 56 | el.html(spinner01); 57 | break; 58 | case 'spinner2': 59 | el.html(spinner02); 60 | break; 61 | case 'spinner3': 62 | el.html(spinner03); 63 | break; 64 | case 'spinner4': 65 | el.html(spinner04); 66 | break; 67 | case 'spinner5': 68 | el.html(spinner05); 69 | break; 70 | case 'spinner6': 71 | el.html(spinner06); 72 | break; 73 | case 'spinner7': 74 | el.html(spinner07); 75 | break; 76 | default: 77 | el.html(spinner01); 78 | } 79 | 80 | //Add customized loader image 81 | 82 | if (settings.imagePath !='') { 83 | el.html('
'); 84 | } 85 | centerLoader(); 86 | }); 87 | 88 | //Time to hide fakeLoader 89 | setTimeout(function(){ 90 | $(el).fadeOut(); 91 | }, settings.timeToHide); 92 | 93 | //Return Styles 94 | return this.css({ 95 | 'backgroundColor':settings.bgColor, 96 | 'zIndex':settings.zIndex 97 | }); 98 | 99 | 100 | }; // End Fake Loader 101 | 102 | 103 | //Center Spinner 104 | function centerLoader() { 105 | 106 | var winW = $(window).width(); 107 | var winH = $(window).height(); 108 | 109 | var spinnerW = $('.fl').outerWidth(); 110 | var spinnerH = $('.fl').outerHeight(); 111 | 112 | $('.fl').css({ 113 | 'position':'absolute', 114 | 'left':(winW/2)-(spinnerW/2), 115 | 'top':(winH/2)-(spinnerH/2) 116 | }); 117 | 118 | } 119 | 120 | $(window).load(function(){ 121 | centerLoader(); 122 | $(window).resize(function(){ 123 | centerLoader(); 124 | }); 125 | }); 126 | 127 | 128 | }(jQuery)); 129 | 130 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /css/StyleSheet2.css: -------------------------------------------------------------------------------- 1 | /*Clear float*/ 2 | [class*="-เมนูหลัก"]+ul::after { 3 | content: ' '; 4 | display: block; 5 | clear: both; 6 | } 7 | /*Float*/ 8 | [class*="-เมนูหลัก"]+ul>li { 9 | float: left; 10 | } 11 | /*Position*/ 12 | [class*="-เมนูหลัก"]+ul>li, [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li { 13 | position: relative; 14 | } 15 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul, 16 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>ul { 17 | position: absolute; 18 | } 19 | [class*="เมนู-แนวนอน"][class*="สี่"]+ul>li { width: 25%;} 20 | [class*="เมนู-แนวนอน"][class*="ห้า"]+ul>li { width: 20%;} 21 | [class*="เมนู-แนวนอน"][class*="หก"]+ul>li:not(:last-child) { width: 16.5%;} 22 | [class*="เมนู-แนวนอน"][class*="หก"]+ul>li:last-child { width: 17.5%;} 23 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul, 24 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul { 25 | visibility: hidden; 26 | opacity: 0; 27 | width: 0; 28 | height: 0; 29 | top: 0px; 30 | } 31 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul { 32 | width: 100%; 33 | top: 35px; 34 | z-index: 99; 35 | } 36 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul, 37 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li:hover>*:first-child+ul { 38 | visibility: visible; 39 | opacity: 1; 40 | height: auto; 41 | } 42 | [class*="เมนู"][class*="_สองชั้น"][class*="หก"]+ul>li>*:nth-child(1)+ul>li:hover>*:first-child+ul { 43 | width: 100%; 44 | left: 100%; 45 | z-index: 100; 46 | } 47 | 48 | [class*="-เมนูหลัก"]+ul>li>*:nth-child(1), 49 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>*:first-child, 50 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 51 | display: block; 52 | } 53 | [class*="-เมนูหลัก"][class*="สี่"]+ul>li>*:nth-child(1) { 54 | font-family: Georgia, "Times New Roman", Times, serif; 55 | } 56 | [class*="-เมนูหลัก"][class*="ห้า"]+ul>li>*:nth-child(1), 57 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>* { 58 | font-family: Lobster; 59 | } 60 | [class*="-เมนูหลัก"][class*="หก"]+ul>li>*:nth-child(1) { 61 | font-family: Kilogram; 62 | } 63 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>* { 64 | font-size: 1.2em; 65 | } 66 | [class*="-เมนูหลัก"][class*="ห้า"]+ul>li>*:nth-child(1), [class*="-เมนูหลัก"][class*="หก"]+ul>li>*:nth-child(1) { 67 | font-size: 1.5em; 68 | } 69 | /*Styling font*/ 70 | [class*="-เมนูหลัก"]+ul>li>*:nth-child(1), 71 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>a, 72 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 73 | line-height: 35px; 74 | font-weight: 400; 75 | text-transform: uppercase; 76 | letter-spacing: 1px; 77 | } 78 | [class*="-เมนูหลัก"]+ul>li>*:nth-child(1), 79 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>a, 80 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 81 | color: rgba(50, 50, 50, .7); 82 | } 83 | [class*="-เมนูหลัก"]+ul>li:hover>*:nth-child(1), 84 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li:hover>*:first-child, 85 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li:hover>*:first-child { 86 | color: rgba(50, 50, 50, 1); 87 | } 88 | [class*="-เมนูหลัก"]+ul>li>*:nth-child(1), [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>a, 89 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 90 | text-shadow: 1px 1px 0px rgba(255, 255, 255, .9); 91 | box-shadow: 0px -15px 25px 0px rgba(50, 50, 50, .3) inset; 92 | } 93 | [class*="-เมนูหลัก"]+ul>li:hover>*:nth-child(1), 94 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li:hover>*:first-child, 95 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li:hover>*:first-child { 96 | box-shadow: 0px 25px 25px 0px rgba(50, 50, 50, .4) inset; 97 | } 98 | [class*="-เมนูหลัก"]+ul { 99 | border: solid 1px rgba(50, 50, 50, .15); 100 | } 101 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li>*:first-child, 102 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 103 | border-left: solid 4px rgba(50, 50, 50, .3); 104 | } 105 | [class*="เมนู-แนวนอน"]+ul>li:not(:first-child)>*:first-child { 106 | border-left: solid 1px rgba(255, 255, 255, .3); 107 | } 108 | [class*="เมนู-แนวนอน"]+ul>li:not(:last-child)>*:first-child { 109 | border-right: solid 1px rgba(50, 50, 50, .35); 110 | } 111 | [class*="เมนู"][class*="_สองชั้น"]+ul>li:hover>*:nth-child(1)+ul>li:hover>*:first-child, 112 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li:hover>*:first-child { 113 | border-left: solid 4px rgba(50, 50, 50, .6); 114 | } 115 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child, 116 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 117 | border-top: solid 1px rgba(255, 255, 255, .3); 118 | } 119 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child, 120 | [class*="เมนู"][class*="_สองชั้น"]+ul>li>*:nth-child(1)+ul>li>*:first-child+ul>li>*:first-child { 121 | border-bottom: solid 1px rgba(50, 50, 50, .35); 122 | } -------------------------------------------------------------------------------- /mac.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mac.aspx.cs" Inherits="Test.mac" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 310 | 311 | 312 |
313 | 314 | 315 |
316 | 317 |
318 |
319 | 320 | 321 | -------------------------------------------------------------------------------- /Test.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Debug 5 | AnyCPU 6 | 7 | 8 | 2.0 9 | {47892AAF-F503-4AA6-96F3-8FB1B1C4741D} 10 | {349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc} 11 | Library 12 | Properties 13 | Test 14 | Test 15 | v4.0 16 | 17 | 18 | true 19 | full 20 | false 21 | bin\ 22 | DEBUG;TRACE 23 | prompt 24 | 4 25 | 26 | 27 | pdbonly 28 | true 29 | bin\ 30 | TRACE 31 | prompt 32 | 4 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | Web.config 78 | 79 | 80 | Web.config 81 | 82 | 83 | 84 | 85 | default.aspx 86 | ASPXCodeBehind 87 | 88 | 89 | default.aspx 90 | 91 | 92 | lamp.aspx 93 | ASPXCodeBehind 94 | 95 | 96 | lamp.aspx 97 | 98 | 99 | mac.aspx 100 | ASPXCodeBehind 101 | 102 | 103 | mac.aspx 104 | 105 | 106 | menuResponsive.aspx 107 | ASPXCodeBehind 108 | 109 | 110 | menuResponsive.aspx 111 | 112 | 113 | 114 | test0.aspx 115 | ASPXCodeBehind 116 | 117 | 118 | test0.aspx 119 | 120 | 121 | test1.aspx 122 | ASPXCodeBehind 123 | 124 | 125 | test1.aspx 126 | 127 | 128 | test2.aspx 129 | ASPXCodeBehind 130 | 131 | 132 | test2.aspx 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | False 153 | True 154 | 55330 155 | / 156 | 157 | 158 | False 159 | False 160 | 161 | 162 | False 163 | 164 | 165 | 166 | 167 | 174 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined in IE 8/9. 28 | */ 29 | 30 | article, 31 | aside, 32 | details, 33 | figcaption, 34 | figure, 35 | footer, 36 | header, 37 | hgroup, 38 | main, 39 | nav, 40 | section, 41 | summary { 42 | display: block; 43 | } 44 | 45 | /** 46 | * 1. Correct `inline-block` display not defined in IE 8/9. 47 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 48 | */ 49 | 50 | audio, 51 | canvas, 52 | progress, 53 | video { 54 | display: inline-block; /* 1 */ 55 | vertical-align: baseline; /* 2 */ 56 | } 57 | 58 | /** 59 | * Prevent modern browsers from displaying `audio` without controls. 60 | * Remove excess height in iOS 5 devices. 61 | */ 62 | 63 | audio:not([controls]) { 64 | display: none; 65 | height: 0; 66 | } 67 | 68 | /** 69 | * Address `[hidden]` styling not present in IE 8/9. 70 | * Hide the `template` element in IE, Safari, and Firefox < 22. 71 | */ 72 | 73 | [hidden], 74 | template { 75 | display: none; 76 | } 77 | 78 | /* Links 79 | ========================================================================== */ 80 | 81 | /** 82 | * Remove the gray background color from active links in IE 10. 83 | */ 84 | 85 | a { 86 | background: transparent; 87 | } 88 | 89 | /** 90 | * Improve readability when focused and also mouse hovered in all browsers. 91 | */ 92 | 93 | a:active, 94 | a:hover { 95 | outline: 0; 96 | } 97 | 98 | /* Text-level semantics 99 | ========================================================================== */ 100 | 101 | /** 102 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 103 | */ 104 | 105 | abbr[title] { 106 | border-bottom: 1px dotted; 107 | } 108 | 109 | /** 110 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 111 | */ 112 | 113 | b, 114 | strong { 115 | font-weight: bold; 116 | } 117 | 118 | /** 119 | * Address styling not present in Safari 5 and Chrome. 120 | */ 121 | 122 | dfn { 123 | font-style: italic; 124 | } 125 | 126 | /** 127 | * Address variable `h1` font-size and margin within `section` and `article` 128 | * contexts in Firefox 4+, Safari 5, and Chrome. 129 | */ 130 | 131 | h1 { 132 | font-size: 2em; 133 | margin: 0.67em 0; 134 | } 135 | 136 | /** 137 | * Address styling not present in IE 8/9. 138 | */ 139 | 140 | mark { 141 | background: #ff0; 142 | color: #000; 143 | } 144 | 145 | /** 146 | * Address inconsistent and variable font size in all browsers. 147 | */ 148 | 149 | small { 150 | font-size: 80%; 151 | } 152 | 153 | /** 154 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 155 | */ 156 | 157 | sub, 158 | sup { 159 | font-size: 75%; 160 | line-height: 0; 161 | position: relative; 162 | vertical-align: baseline; 163 | } 164 | 165 | sup { 166 | top: -0.5em; 167 | } 168 | 169 | sub { 170 | bottom: -0.25em; 171 | } 172 | 173 | /* Embedded content 174 | ========================================================================== */ 175 | 176 | /** 177 | * Remove border when inside `a` element in IE 8/9. 178 | */ 179 | 180 | img { 181 | border: 0; 182 | } 183 | 184 | /** 185 | * Correct overflow displayed oddly in IE 9. 186 | */ 187 | 188 | svg:not(:root) { 189 | overflow: hidden; 190 | } 191 | 192 | /* Grouping content 193 | ========================================================================== */ 194 | 195 | /** 196 | * Address margin not present in IE 8/9 and Safari 5. 197 | */ 198 | 199 | figure { 200 | margin: 1em 40px; 201 | } 202 | 203 | /** 204 | * Address differences between Firefox and other browsers. 205 | */ 206 | 207 | hr { 208 | -moz-box-sizing: content-box; 209 | box-sizing: content-box; 210 | height: 0; 211 | } 212 | 213 | /** 214 | * Contain overflow in all browsers. 215 | */ 216 | 217 | pre { 218 | overflow: auto; 219 | } 220 | 221 | /** 222 | * Address odd `em`-unit font size rendering in all browsers. 223 | */ 224 | 225 | code, 226 | kbd, 227 | pre, 228 | samp { 229 | font-family: monospace, monospace; 230 | font-size: 1em; 231 | } 232 | 233 | /* Forms 234 | ========================================================================== */ 235 | 236 | /** 237 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 238 | * styling of `select`, unless a `border` property is set. 239 | */ 240 | 241 | /** 242 | * 1. Correct color not being inherited. 243 | * Known issue: affects color of disabled elements. 244 | * 2. Correct font properties not being inherited. 245 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 246 | */ 247 | 248 | button, 249 | input, 250 | optgroup, 251 | select, 252 | textarea { 253 | color: inherit; /* 1 */ 254 | font: inherit; /* 2 */ 255 | margin: 0; /* 3 */ 256 | } 257 | 258 | /** 259 | * Address `overflow` set to `hidden` in IE 8/9/10. 260 | */ 261 | 262 | button { 263 | overflow: visible; 264 | } 265 | 266 | /** 267 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 268 | * All other form control elements do not inherit `text-transform` values. 269 | * Correct `button` style inheritance in Firefox, IE 8+, and Opera 270 | * Correct `select` style inheritance in Firefox. 271 | */ 272 | 273 | button, 274 | select { 275 | text-transform: none; 276 | } 277 | 278 | /** 279 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 280 | * and `video` controls. 281 | * 2. Correct inability to style clickable `input` types in iOS. 282 | * 3. Improve usability and consistency of cursor style between image-type 283 | * `input` and others. 284 | */ 285 | 286 | button, 287 | html input[type="button"], /* 1 */ 288 | input[type="reset"], 289 | input[type="submit"] { 290 | -webkit-appearance: button; /* 2 */ 291 | cursor: pointer; /* 3 */ 292 | } 293 | 294 | /** 295 | * Re-set default cursor for disabled elements. 296 | */ 297 | 298 | button[disabled], 299 | html input[disabled] { 300 | cursor: default; 301 | } 302 | 303 | /** 304 | * Remove inner padding and border in Firefox 4+. 305 | */ 306 | 307 | button::-moz-focus-inner, 308 | input::-moz-focus-inner { 309 | border: 0; 310 | padding: 0; 311 | } 312 | 313 | /** 314 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 315 | * the UA stylesheet. 316 | */ 317 | 318 | input { 319 | line-height: normal; 320 | } 321 | 322 | /** 323 | * It's recommended that you don't attempt to style these elements. 324 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 325 | * 326 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 327 | * 2. Remove excess padding in IE 8/9/10. 328 | */ 329 | 330 | input[type="checkbox"], 331 | input[type="radio"] { 332 | box-sizing: border-box; /* 1 */ 333 | padding: 0; /* 2 */ 334 | } 335 | 336 | /** 337 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 338 | * `font-size` values of the `input`, it causes the cursor style of the 339 | * decrement button to change from `default` to `text`. 340 | */ 341 | 342 | input[type="number"]::-webkit-inner-spin-button, 343 | input[type="number"]::-webkit-outer-spin-button { 344 | height: auto; 345 | } 346 | 347 | /** 348 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 349 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 350 | * (include `-moz` to future-proof). 351 | */ 352 | 353 | input[type="search"] { 354 | -webkit-appearance: textfield; /* 1 */ 355 | -moz-box-sizing: content-box; 356 | -webkit-box-sizing: content-box; /* 2 */ 357 | box-sizing: content-box; 358 | } 359 | 360 | /** 361 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 362 | * Safari (but not Chrome) clips the cancel button when the search input has 363 | * padding (and `textfield` appearance). 364 | */ 365 | 366 | input[type="search"]::-webkit-search-cancel-button, 367 | input[type="search"]::-webkit-search-decoration { 368 | -webkit-appearance: none; 369 | } 370 | 371 | /** 372 | * Define consistent border, margin, and padding. 373 | */ 374 | 375 | fieldset { 376 | border: 1px solid #c0c0c0; 377 | margin: 0 2px; 378 | padding: 0.35em 0.625em 0.75em; 379 | } 380 | 381 | /** 382 | * 1. Correct `color` not being inherited in IE 8/9. 383 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 384 | */ 385 | 386 | legend { 387 | border: 0; /* 1 */ 388 | padding: 0; /* 2 */ 389 | } 390 | 391 | /** 392 | * Remove default vertical scrollbar in IE 8/9. 393 | */ 394 | 395 | textarea { 396 | overflow: auto; 397 | } 398 | 399 | /** 400 | * Don't inherit the `font-weight` (applied by a rule above). 401 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 402 | */ 403 | 404 | optgroup { 405 | font-weight: bold; 406 | } 407 | 408 | /* Tables 409 | ========================================================================== */ 410 | 411 | /** 412 | * Remove most spacing between table cells. 413 | */ 414 | 415 | table { 416 | border-collapse: collapse; 417 | border-spacing: 0; 418 | } 419 | 420 | td, 421 | th { 422 | padding: 0; 423 | } -------------------------------------------------------------------------------- /css/fakeLoader.css: -------------------------------------------------------------------------------- 1 | /********************** 2 | *CSS Animations by: 3 | *http://codepen.io/vivinantony 4 | ***********************/ 5 | .spinner1 { 6 | width: 40px; 7 | height: 40px; 8 | position: relative; 9 | } 10 | 11 | 12 | .double-bounce1, .double-bounce2 { 13 | width: 100%; 14 | height: 100%; 15 | border-radius: 50%; 16 | background-color: #fff; 17 | opacity: 0.6; 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | 22 | -webkit-animation: bounce 2.0s infinite ease-in-out; 23 | animation: bounce 2.0s infinite ease-in-out; 24 | } 25 | 26 | .double-bounce2 { 27 | -webkit-animation-delay: -1.0s; 28 | animation-delay: -1.0s; 29 | } 30 | 31 | @-webkit-keyframes bounce { 32 | 0%, 100% { -webkit-transform: scale(0.0) } 33 | 50% { -webkit-transform: scale(1.0) } 34 | } 35 | 36 | @keyframes bounce { 37 | 0%, 100% { 38 | transform: scale(0.0); 39 | -webkit-transform: scale(0.0); 40 | } 50% { 41 | transform: scale(1.0); 42 | -webkit-transform: scale(1.0); 43 | } 44 | } 45 | 46 | .spinner2 { 47 | width: 40px; 48 | height: 40px; 49 | position: relative; 50 | } 51 | 52 | 53 | .container1 > div, .container2 > div, .container3 > div { 54 | width: 6px; 55 | height: 6px; 56 | background-color: #fff; 57 | 58 | border-radius: 100%; 59 | position: absolute; 60 | -webkit-animation: bouncedelay 1.2s infinite ease-in-out; 61 | animation: bouncedelay 1.2s infinite ease-in-out; 62 | /* Prevent first frame from flickering when animation starts */ 63 | -webkit-animation-fill-mode: both; 64 | animation-fill-mode: both; 65 | } 66 | 67 | .spinner2 .spinner-container { 68 | position: absolute; 69 | width: 100%; 70 | height: 100%; 71 | } 72 | 73 | .container2 { 74 | -webkit-transform: rotateZ(45deg); 75 | transform: rotateZ(45deg); 76 | } 77 | 78 | .container3 { 79 | -webkit-transform: rotateZ(90deg); 80 | transform: rotateZ(90deg); 81 | } 82 | 83 | .circle1 { top: 0; left: 0; } 84 | .circle2 { top: 0; right: 0; } 85 | .circle3 { right: 0; bottom: 0; } 86 | .circle4 { left: 0; bottom: 0; } 87 | 88 | .container2 .circle1 { 89 | -webkit-animation-delay: -1.1s; 90 | animation-delay: -1.1s; 91 | } 92 | 93 | .container3 .circle1 { 94 | -webkit-animation-delay: -1.0s; 95 | animation-delay: -1.0s; 96 | } 97 | 98 | .container1 .circle2 { 99 | -webkit-animation-delay: -0.9s; 100 | animation-delay: -0.9s; 101 | } 102 | 103 | .container2 .circle2 { 104 | -webkit-animation-delay: -0.8s; 105 | animation-delay: -0.8s; 106 | } 107 | 108 | .container3 .circle2 { 109 | -webkit-animation-delay: -0.7s; 110 | animation-delay: -0.7s; 111 | } 112 | 113 | .container1 .circle3 { 114 | -webkit-animation-delay: -0.6s; 115 | animation-delay: -0.6s; 116 | } 117 | 118 | .container2 .circle3 { 119 | -webkit-animation-delay: -0.5s; 120 | animation-delay: -0.5s; 121 | } 122 | 123 | .container3 .circle3 { 124 | -webkit-animation-delay: -0.4s; 125 | animation-delay: -0.4s; 126 | } 127 | 128 | .container1 .circle4 { 129 | -webkit-animation-delay: -0.3s; 130 | animation-delay: -0.3s; 131 | } 132 | 133 | .container2 .circle4 { 134 | -webkit-animation-delay: -0.2s; 135 | animation-delay: -0.2s; 136 | } 137 | 138 | .container3 .circle4 { 139 | -webkit-animation-delay: -0.1s; 140 | animation-delay: -0.1s; 141 | } 142 | 143 | @-webkit-keyframes bouncedelay { 144 | 0%, 80%, 100% { -webkit-transform: scale(0.0) } 145 | 40% { -webkit-transform: scale(1.0) } 146 | } 147 | 148 | @keyframes bouncedelay { 149 | 0%, 80%, 100% { 150 | transform: scale(0.0); 151 | -webkit-transform: scale(0.0); 152 | } 40% { 153 | transform: scale(1.0); 154 | -webkit-transform: scale(1.0); 155 | } 156 | } 157 | 158 | .spinner3 { 159 | width: 40px; 160 | height: 40px; 161 | position: relative; 162 | -webkit-animation: rotate 2.0s infinite linear; 163 | animation: rotate 2.0s infinite linear; 164 | } 165 | 166 | .dot1, .dot2 { 167 | width: 60%; 168 | height: 60%; 169 | display: inline-block; 170 | position: absolute; 171 | top: 0; 172 | background-color: #fff; 173 | border-radius: 100%; 174 | 175 | -webkit-animation: bounce 2.0s infinite ease-in-out; 176 | animation: bounce 2.0s infinite ease-in-out; 177 | } 178 | 179 | .dot2 { 180 | top: auto; 181 | bottom: 0px; 182 | -webkit-animation-delay: -1.0s; 183 | animation-delay: -1.0s; 184 | } 185 | 186 | @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }} 187 | @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} 188 | 189 | @-webkit-keyframes bounce { 190 | 0%, 100% { -webkit-transform: scale(0.0) } 191 | 50% { -webkit-transform: scale(1.0) } 192 | } 193 | 194 | @keyframes bounce { 195 | 0%, 100% { 196 | transform: scale(0.0); 197 | -webkit-transform: scale(0.0); 198 | } 50% { 199 | transform: scale(1.0); 200 | -webkit-transform: scale(1.0); 201 | } 202 | } 203 | 204 | .spinner4 { 205 | width: 30px; 206 | height: 30px; 207 | background-color: #fff; 208 | -webkit-animation: rotateplane 1.2s infinite ease-in-out; 209 | animation: rotateplane 1.2s infinite ease-in-out; 210 | } 211 | 212 | @-webkit-keyframes rotateplane { 213 | 0% { -webkit-transform: perspective(120px) } 214 | 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 215 | 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } 216 | } 217 | 218 | @keyframes rotateplane { 219 | 0% { 220 | transform: perspective(120px) rotateX(0deg) rotateY(0deg); 221 | -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 222 | } 50% { 223 | transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); 224 | -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 225 | } 100% { 226 | transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 227 | -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); 228 | } 229 | } 230 | 231 | .spinner5 { 232 | width: 32px; 233 | height: 32px; 234 | position: relative; 235 | } 236 | 237 | .cube1, .cube2 { 238 | background-color: #fff; 239 | width: 10px; 240 | height: 10px; 241 | position: absolute; 242 | top: 0; 243 | left: 0; 244 | 245 | -webkit-animation: cubemove 1.8s infinite ease-in-out; 246 | animation: cubemove 1.8s infinite ease-in-out; 247 | } 248 | 249 | .cube2 { 250 | -webkit-animation-delay: -0.9s; 251 | animation-delay: -0.9s; 252 | } 253 | 254 | @-webkit-keyframes cubemove { 255 | 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 256 | 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 257 | 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 258 | 100% { -webkit-transform: rotate(-360deg) } 259 | } 260 | 261 | @keyframes cubemove { 262 | 25% { 263 | transform: translateX(42px) rotate(-90deg) scale(0.5); 264 | -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); 265 | } 50% { 266 | transform: translateX(42px) translateY(42px) rotate(-179deg); 267 | -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); 268 | } 50.1% { 269 | transform: translateX(42px) translateY(42px) rotate(-180deg); 270 | -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); 271 | } 75% { 272 | transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 273 | -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); 274 | } 100% { 275 | transform: rotate(-360deg); 276 | -webkit-transform: rotate(-360deg); 277 | } 278 | } 279 | 280 | .spinner6 { 281 | width: 50px; 282 | height: 30px; 283 | text-align: center; 284 | } 285 | 286 | .spinner6 > div { 287 | background-color: #fff; 288 | height: 100%; 289 | width: 6px; 290 | margin-left:2px; 291 | display: inline-block; 292 | 293 | -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 294 | animation: stretchdelay 1.2s infinite ease-in-out; 295 | } 296 | 297 | .spinner6 .rect2 { 298 | -webkit-animation-delay: -1.1s; 299 | animation-delay: -1.1s; 300 | } 301 | 302 | .spinner6 .rect3 { 303 | -webkit-animation-delay: -1.0s; 304 | animation-delay: -1.0s; 305 | } 306 | 307 | .spinner6 .rect4 { 308 | -webkit-animation-delay: -0.9s; 309 | animation-delay: -0.9s; 310 | } 311 | 312 | .spinner6 .rect5 { 313 | -webkit-animation-delay: -0.8s; 314 | animation-delay: -0.8s; 315 | } 316 | 317 | @-webkit-keyframes stretchdelay { 318 | 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 319 | 20% { -webkit-transform: scaleY(1.0) } 320 | } 321 | 322 | @keyframes stretchdelay { 323 | 0%, 40%, 100% { 324 | transform: scaleY(0.4); 325 | -webkit-transform: scaleY(0.4); 326 | } 20% { 327 | transform: scaleY(1.0); 328 | -webkit-transform: scaleY(1.0); 329 | } 330 | } 331 | .spinner7 { 332 | width: 90px; 333 | height: 30px; 334 | text-align: center; 335 | } 336 | 337 | .spinner7 > div { 338 | background-color: #fff; 339 | height: 15px; 340 | width: 15px; 341 | margin-left:3px; 342 | border-radius: 50%; 343 | display: inline-block; 344 | 345 | -webkit-animation: stretchdelay 0.7s infinite ease-in-out; 346 | animation: stretchdelay 0.7s infinite ease-in-out; 347 | } 348 | 349 | .spinner7 .circ2 { 350 | -webkit-animation-delay: -0.6s; 351 | animation-delay: -0.6s; 352 | } 353 | 354 | .spinner7 .circ3 { 355 | -webkit-animation-delay: -0.5s; 356 | animation-delay: -0.5s; 357 | } 358 | 359 | .spinner7 .circ4 { 360 | -webkit-animation-delay: -0.4s; 361 | animation-delay: -0.4s; 362 | } 363 | 364 | .spinner7 .circ5 { 365 | -webkit-animation-delay: -0.3s; 366 | animation-delay: -0.3s; 367 | } 368 | 369 | @-webkit-keyframes stretchdelay { 370 | 0%, 40%, 100% { -webkit-transform: translateY(-10px) } 371 | 20% { -webkit-transform: translateY(-20px) } 372 | } 373 | 374 | @keyframes stretchdelay { 375 | 0%, 40%, 100% { 376 | transform: translateY(-10px); 377 | -webkit-transform: translateY(-10px); 378 | } 20% { 379 | transform: translateY(-20px); 380 | -webkit-transform: translateY(-20px); 381 | } 382 | } -------------------------------------------------------------------------------- /css/grid.css: -------------------------------------------------------------------------------- 1 | /* Layout 2 | ========================================================================== */ 3 | 4 | *, *:before, *:after { 5 | -moz-box-sizing: border-box; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | } 9 | 10 | html { 11 | font: 100%/1.5 "Open Sans", sans-serif; 12 | font-weight: 400; 13 | text-rendering: optimizeLegibility; 14 | -webkit-font-smoothing: antialiased; 15 | } 16 | 17 | @media (min-width: 40rem) { 18 | html { font-size: 112%; } 19 | } 20 | 21 | @media (min-width: 64rem) { 22 | html { font-size: 120%; } 23 | } 24 | 25 | body { 26 | background-color: #fff; 27 | color: #555; 28 | } 29 | 30 | .container { 31 | margin: 0 auto; 32 | max-width: 53rem; 33 | width: 90%; 34 | } 35 | 36 | /* Header 37 | ========================================================================== */ 38 | 39 | header { 40 | background-color: #497bad; 41 | text-align: center; 42 | } 43 | 44 | .intro { margin: 2rem 0; } 45 | 46 | @media (min-width: 40rem) { 47 | .intro { margin: 4rem 0; } 48 | } 49 | 50 | header h1 { 51 | border: 3px solid #fff; 52 | -moz-border-radius: 3px; 53 | -webkit-border-radius: 3px; 54 | border-radius: 3px; 55 | color: #fff; 56 | padding: .4rem .6rem; 57 | display: inline-block; 58 | font-size: 1.8rem; 59 | text-transform: uppercase; 60 | margin-bottom: 2rem; 61 | } 62 | 63 | header p { 64 | color: rgba(255,255,255,0.7); 65 | margin: 0 auto; 66 | } 67 | 68 | header a { 69 | color: rgba(255,255,255,0.9); 70 | text-decoration: underline; 71 | } 72 | 73 | header a:hover { text-decoration: none; } 74 | 75 | .mobile { 76 | margin: 0 auto; 77 | max-width: 150px; 78 | } 79 | 80 | @media (min-width: 40rem) { 81 | .mobile { max-width: 250px; } 82 | } 83 | 84 | /* Section 85 | ========================================================================== */ 86 | 87 | section { 88 | border-top: 1px solid #eee; 89 | text-align: center; 90 | padding: 2rem 0; 91 | } 92 | 93 | section:first-of-type { border-top: none; } 94 | 95 | @media (min-width: 40rem) { 96 | section { padding: 4rem 0; } 97 | } 98 | 99 | /* Mobile First Grid 100 | ========================================================================== */ 101 | 102 | .column { margin-bottom: 1.5rem; } 103 | 104 | @media (min-width: 40rem) { 105 | .column { 106 | float: left; 107 | margin: 0; 108 | padding-left: 1rem; 109 | padding-right: 1rem; 110 | } 111 | 112 | .column.full { width: 100%; } 113 | .column.two-thirds { width: 66.7%; } 114 | .column.half { width: 50%; } 115 | .column.third { width: 33.3%; } 116 | .column.fourth { width: 25%; } 117 | .column.flow-opposite { float: right; } 118 | } 119 | 120 | /* Typography 121 | ========================================================================== */ 122 | 123 | h1, h2, h3, h4, h5 { 124 | font-weight: 600; 125 | margin: 0; 126 | } 127 | 128 | h1 { 129 | font-size: 1.3rem; 130 | line-height: 1.3em; 131 | margin-bottom: 1.5rem; 132 | } 133 | 134 | @media (min-width: 40rem) { 135 | h1 { font-size: 1.5rem; } 136 | } 137 | 138 | h3 { 139 | font-size: 1.2rem; 140 | margin-bottom: .5rem; 141 | } 142 | 143 | p { 144 | color: #999; 145 | margin: 0 auto; 146 | max-width: 30rem; 147 | } 148 | 149 | blockquote { margin: 0; } 150 | 151 | blockquote p { 152 | color: #bbb; 153 | font-style: italic; 154 | margin-bottom: 1.5rem; 155 | } 156 | 157 | cite { color: #bbb; } 158 | 159 | /* Code 160 | ========================================================================== */ 161 | 162 | code { 163 | background-color: #f8f8f8; 164 | -moz-border-radius: 3px; 165 | -webkit-border-radius: 3px; 166 | border-radius: 3px; 167 | border: 1px solid #ddd; 168 | font-family: Consolas, "Liberation Mono", Courier, monospace; 169 | font-size: 0.8rem; 170 | padding: 0.1rem 0.3rem; 171 | position: relative; 172 | top: -1px; 173 | white-space: nowrap; 174 | } 175 | 176 | /* Lists 177 | ========================================================================== */ 178 | 179 | ul { 180 | margin: 0; 181 | text-align: left; 182 | } 183 | 184 | @media (min-width: 40rem) { 185 | ul { display: inline-block; } 186 | } 187 | 188 | /* Links 189 | ========================================================================== */ 190 | 191 | a { 192 | color: #497bad; 193 | text-decoration: none; 194 | } 195 | 196 | a:hover { text-decoration: underline; } 197 | 198 | /* Buttons 199 | ========================================================================== */ 200 | 201 | .button { 202 | -moz-appearance: none; 203 | -webkit-appearance: none; 204 | appearance: none; 205 | background-color: #497bad; 206 | -moz-border-radius: 3px; 207 | -webkit-border-radius: 3px; 208 | border-radius: 3px; 209 | border: none; 210 | color: #fff; 211 | cursor: pointer; 212 | display: block; 213 | font-size: 1rem; 214 | font-weight: 600; 215 | padding: 0.7rem 1.5rem; 216 | vertical-align: middle; 217 | white-space: nowrap; 218 | } 219 | 220 | .button:hover { 221 | background: #5183b6; 222 | text-decoration: none; 223 | } 224 | 225 | @media (min-width: 40rem) { 226 | .button { 227 | display: inline-block; 228 | font-size: 0.9rem; 229 | } 230 | } 231 | 232 | /* Elements 233 | ========================================================================== */ 234 | 235 | hr { 236 | border: 0; 237 | border-top: 1px solid #ddd; 238 | margin: 2rem auto; 239 | width: 3rem; 240 | } 241 | 242 | @media (min-width: 40rem) { 243 | hr { margin: 2.5rem auto; } 244 | } 245 | 246 | hr.small { margin: 1.5rem auto; } 247 | 248 | .circle { 249 | border: 3px solid #555; 250 | border-radius: 50%; 251 | -moz-border-radius: 50%; 252 | -webkit-border-radius: 50%; 253 | color: #555; 254 | display: block; 255 | font-size: 1.7rem; 256 | font-weight: 600; 257 | height: 3.2rem; 258 | line-height: 1.7em; 259 | margin: 0 auto 1rem auto; 260 | text-align: center; 261 | width: 3.2rem; 262 | } 263 | 264 | img { 265 | display: block; 266 | height: auto; 267 | margin: 0 auto 1.5rem auto; 268 | width: 100%; 269 | } 270 | 271 | .rwd { 272 | margin: 0 auto 1.5rem auto; 273 | max-width: 440px; 274 | } 275 | 276 | /* Examples 277 | ========================================================================== */ 278 | 279 | .example { 280 | border-top: none; 281 | background-color: #497bad; 282 | color: #fff; 283 | } 284 | 285 | .example p { color: rgba(255,255,255,0.7); } 286 | .example img { margin: 0; } 287 | 288 | .fragmentation { 289 | background-image: url("/images/fragmentation.png"); 290 | background-size: cover; 291 | min-height: 250px; 292 | } 293 | 294 | @media (min-width: 40rem) { 295 | .fragmentation { min-height: 500px; } 296 | } 297 | 298 | .mobile-first .column { 299 | float: none; 300 | margin-bottom: 1rem; 301 | } 302 | 303 | .grid { text-align: center; } 304 | 305 | .grid span { 306 | background: rgba(225,255,255,0.1); 307 | border: 2px solid rgba(255,255,255,0.2); 308 | display: block; 309 | padding: 1rem; 310 | font-size: 0.9rem; 311 | font-weight: 600; 312 | } 313 | 314 | .grid .container { 315 | border: 2px dashed rgba(255,255,255,0.3); 316 | padding: 1rem 1rem 0 1rem; 317 | } 318 | 319 | @media (min-width: 40rem) { 320 | .grid .container { padding: 1rem 0 0 0; } 321 | } 322 | 323 | .grid .column { margin-bottom: 1rem; } 324 | 325 | .row-example .container { 326 | border: 2px dashed rgba(255,255,255,0.2); 327 | padding: 1rem; 328 | } 329 | 330 | .row-example .row { 331 | background: rgba(225,255,255,0.1); 332 | border: 2px solid rgba(255,255,255,0.2); 333 | padding: 1rem 1rem 0 1rem; 334 | margin-bottom: 1rem; 335 | } 336 | 337 | .row-example .row:last-of-type { margin-bottom: 0; } 338 | 339 | @media (min-width: 40rem) { 340 | .row-example .row { padding: 1rem 0 0 0; } 341 | } 342 | 343 | .gutters { 344 | border: 2px dashed #eee; 345 | margin-bottom: 2rem; 346 | max-width: 39rem; 347 | padding: 1rem 1rem 0 1rem; 348 | } 349 | 350 | .gutters .column { 351 | background: #fb917e; 352 | margin-bottom: 1rem; 353 | } 354 | 355 | .gutters span { 356 | background: #f8f8f8; 357 | color: #999; 358 | display: block; 359 | padding: 1rem 0; 360 | } 361 | 362 | /* Box Model 363 | ========================================================================== */ 364 | 365 | .box-model h1 { margin-bottom: 3rem; } 366 | 367 | .margin { color: #f9cd9d; } 368 | .border { color: #fce08f; } 369 | .padding { color: #c2ddb6; } 370 | .content { color: #9ec3e5; } 371 | 372 | /* Gist Overrides 373 | ========================================================================== */ 374 | 375 | .gist .gist-file { 376 | font-size: .9rem !important; 377 | margin: 0 auto; 378 | max-width: 39rem; 379 | overflow: hidden !important; 380 | text-align: left; 381 | } 382 | 383 | .gist .gist-file .gist-data { 384 | background: #f8f8f8 !important; 385 | border-bottom: none !important; 386 | } 387 | 388 | .gist .gist-file .gist-meta { 389 | display: none !important; 390 | } 391 | 392 | .gist-syntax .k { 393 | color: #555 !important; 394 | font-weight: normal !important; 395 | } 396 | 397 | /* Animate.css by Daniel Eden 398 | ========================================================================== */ 399 | 400 | .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInUp { 401 | 0% { 402 | opacity: 0; 403 | -webkit-transform: translateY(20px); 404 | } 100% { 405 | opacity: 1; 406 | -webkit-transform: translateY(0); 407 | } 408 | } 409 | 410 | @-moz-keyframes fadeInUp { 411 | 0% { 412 | opacity: 0; 413 | -moz-transform: translateY(20px); 414 | } 415 | 416 | 100% { 417 | opacity: 1; 418 | -moz-transform: translateY(0); 419 | } 420 | } 421 | 422 | @-o-keyframes fadeInUp { 423 | 0% { 424 | opacity: 0; 425 | -o-transform: translateY(20px); 426 | } 427 | 428 | 100% { 429 | opacity: 1; 430 | -o-transform: translateY(0); 431 | } 432 | } 433 | 434 | @keyframes fadeInUp { 435 | 0% { 436 | opacity: 0; 437 | transform: translateY(20px); 438 | } 439 | 440 | 100% { 441 | opacity: 1; 442 | transform: translateY(0); 443 | } 444 | } 445 | 446 | .fadeInUp { 447 | -webkit-animation-name: fadeInUp; 448 | -moz-animation-name: fadeInUp; 449 | -o-animation-name: fadeInUp; 450 | animation-name: fadeInUp; 451 | } 452 | 453 | /* Utilities 454 | ========================================================================== */ 455 | 456 | .remove-padding { padding-bottom: 0; } 457 | .remove-border { border: none; } 458 | 459 | /* Clearfix by Nicolas Gallagher 460 | ========================================================================== */ 461 | 462 | .clearfix:before, 463 | .clearfix:after { 464 | content: " "; 465 | display: table; 466 | } 467 | 468 | .clearfix:after { clear: both; } 469 | .clearfix { *zoom: 1; } 470 | -------------------------------------------------------------------------------- /menuResponsive.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menuResponsive.aspx.cs" Inherits="Test.menuResponsive" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 324 | 325 | 326 |
327 |
328 |
329 | 330 | Es 331 | Elemental Shift 332 | 333 |
334 | 383 | 397 |
398 |
399 | 400 | 401 | -------------------------------------------------------------------------------- /test2.aspx: -------------------------------------------------------------------------------- 1 | <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Test.test2" %> 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 20 | 21 | 22 |
23 | 24 |
25 | 26 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

27 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

28 |
29 | 30 |
31 | 32 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

33 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

34 |
35 | 36 |
37 | 38 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

39 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

40 |
41 | 42 |
43 | 44 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

45 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

46 |
47 | 48 |
49 | 50 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

51 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

52 |
53 | 54 |
55 | 56 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

57 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

58 |
59 | 60 |
61 | 62 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

63 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

64 |
65 | 66 |
67 | 68 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

69 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

70 |
71 | 72 |
73 | 74 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

75 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

76 |
77 | 78 |
79 | 80 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

81 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

82 |
83 | 84 |
85 | 86 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

87 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

88 |
89 | 90 |
91 | 92 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

93 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

94 |
95 | 96 |
97 | 98 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr

99 |

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

100 |
101 | 102 | 106 |
107 | 108 | 109 | -------------------------------------------------------------------------------- /font/iconic_stroke.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 10 | 11 | 12 | 13 | 15 | 17 | 19 | 21 | 23 | 24 | 26 | 27 | 29 | 30 | 32 | 33 | 35 | 39 | 42 | 43 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 55 | 57 | 59 | 62 | 64 | 66 | 67 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 84 | 85 | 88 | 89 | 90 | 91 | 92 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 105 | 107 | 110 | 112 | 115 | 117 | 119 | 121 | 124 | 127 | 128 | 130 | 131 | 132 | 134 | 136 | 138 | 140 | 144 | 147 | 150 | 151 | 153 | 154 | 156 | 159 | 162 | 163 | 168 | 170 | 172 | 175 | 176 | 177 | 179 | 181 | 185 | 189 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | -------------------------------------------------------------------------------- /font/iconic_stroke-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | Copyright : Copyright c 2010 by PJ Onori All rights reserved 7 | Designer : PJ Onori 8 | Foundry : PJ Onori 9 | Foundry URL : httpsomerandomdudecom 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | --------------------------------------------------------------------------------