Frogg's web tools

MavenPro font SAMPLE

Mission-Script font SAMPLE

Class = function( methods )
{   
var klass = function()
	{ this.initialize.apply( this, arguments ); };  
for (var property in methods)
	{ klass.prototype[property] = methods[property]; }
if ( !klass.prototype.initialize )
	{ klass.prototype.initialize = function(){}; }
return klass;    
};

function scrollTo(element, to, duration)
{
var animateScroll,
	start		= element.scrollTop,
	change		= to - start,
	increment	= 20;

animateScroll = function(elapsedTime)
	{ 
	var position;
	elapsedTime += increment;
	position = easeInOut(elapsedTime, start, change, duration);                        
	element.scrollTop = position; 
	if (elapsedTime < duration)
		{
		setTimeout(function()
			{ animateScroll(elapsedTime); }, increment);
		}
	};
animateScroll(0);
}

function easeInOut(currentTime, start, change, duration)
{
currentTime /= duration / 2;
if (currentTime < 1)
	{ return change / 2 * currentTime * currentTime + start; }
currentTime -= 1;
return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}

FORM UL
{
list-style:none;
padding:0;
margin:0;   
}

FORM LI
{
display: block;
padding: 9px 0;
border:1px solid #ddd;
margin-top: 30px;
border-radius: 3px;
}

FORM LI:first-child
{
margin-top: 10px;
}

FORM LI:last-child
{
border:none;
margin-top: 0px;
text-align: center;
}

FORM LI > LABEL
{
display: block;
float: left;
margin-top: -19px;
background: #fff;
height: 14px;
padding: 2px 5px 2px 5px;
color: #777;
font-size: 16px;
overflow: hidden;
}

FORM INPUT[type="text"],
FORM INPUT[type="date"],
FORM INPUT[type="datetime"],
FORM INPUT[type="email"],
FORM INPUT[type="number"],
FORM INPUT[type="search"],
FORM INPUT[type="time"],
FORM INPUT[type="url"],
FORM INPUT[type="password"],
FORM TEXTAREA,
FORM SELECT 
{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
display: block;
outline: none;
border: none;
height: 25px;
line-height: 25px;
font-size: 14px;
padding: 0 5px;
}

FORM TEXTAREA
{
line-height: 12px;
}

FORM LI > SPAN
{
background: #F3F3F3;
display: block;
padding: 3px;
margin: 0 0 -9px 0;
text-align: center;
color: #777;
font-size: 12px;
}

FORM TEXTAREA
{
resize:none;
}

input[type="submit"],
input[type="button"]
{
background-color: darkgreen;
border: none;
padding: 10px 20px 10px 20px;
border-bottom: 3px solid green;
border-radius: 3px;
color: #fff;
cursor:pointer;
white-space: normal;
}

.hvr-bounce-to-left
{
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}

.hvr-bounce-to-left:before
{
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098d1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-bounce-to-left:hover, .hvr-bounce-to-left:focus, .hvr-bounce-to-left:active 
{
color: white;
}
.hvr-bounce-to-left:hover:before, .hvr-bounce-to-left:focus:before, .hvr-bounce-to-left:active:before 
{
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

@-webkit-keyframes hvr-back-pulse { 50% { background-color: rgba(32, 152, 209, 0.75); }}
@keyframes hvr-back-pulse { 50% { background-color: rgba(32, 152, 209, 0.75); }}

.hvr-back-pulse
{
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}

.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active 
{
-webkit-animation-name: hvr-back-pulse;
animation-name: hvr-back-pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
background-color: #2098d1;
background-color: #2098d1;
color: white;
}

.tg-list 
{
text-align: center;
display: flex;
align-items: center;
}

.tg-list-item
{
margin: 0 2em;
}

.tgl 
{
display: none;
}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn
{
box-sizing: border-box;
}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection
{
 background: none;
}

.tgl + .tgl-btn
{
outline: 0;
display: block;
width: 7em;
height: 2em;
position: relative;
cursor: pointer;
user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before
{
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}

.tgl + .tgl-btn:after
{
left: 0;
}
.tgl + .tgl-btn:before
{
display: none;
}

.tgl:checked + .tgl-btn:after
{
left: 50%;
}

.tgl-flip + .tgl-btn
{
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
perspective: 100px;
}

.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before
{
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
border-radius: 4px;
}

.tgl-flip + .tgl-btn:after
{
content: attr(data-tg-on);
background: #02C66F;
transform: rotateY(-180deg);
}

.tgl-flip + .tgl-btn:before
{
background: #FF3A19;
content: attr(data-tg-off);
}

.tgl-flip + .tgl-btn:active:before 
{
transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before
{
transform: rotateY(180deg);
}

.tgl-flip:checked + .tgl-btn:after
{
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}

.tgl-flip:checked + .tgl-btn:active:after
{
transform: rotateY(20deg);
}

input {
-webkit-appearance: none; /* remove default */
display: block;
margin: 10px;
width: 24px;
height: 24px;
border-radius: 12px;
cursor: pointer;
vertical-align: middle;
box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
background-color: hsla(0,0%,0%,.2);
background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );
background-repeat: no-repeat;
-webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
-webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
outline: none;
}
input:checked {
-webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
-webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}
input:active {
-webkit-transform: scale(1.5);
-webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}
/* The up/down direction logic */
input,
input:active {
background-position: 0 24px;
}
input:checked {
background-position: 0 0;
}
input:checked ~ input,
input:checked ~ input:active {
background-position: 0 -24px;
}