<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Pricing and sign up | CannyBill</title>
<meta charset=utf-8>
<!--[if !IE 6]><!--><link rel="stylesheet" type="text/css" href="assets/css/main.css" media="screen, projection" /><!--<![endif]-->
<!--[if gte IE 7]><link rel="stylesheet" href="assets/css/ie7.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" media="screen, projection" /><![endif]-->
<!-- JS -->
<script src="assets/js/modernizr-1.0.js" type="text/javascript"></script>
<!--[if IE 6]><script src="assets/js/belatedpng.js" type="text/javascript"></script><![endif]-->
<script type="text/javascript">
Cufon.replace('h1,h2,h3', {hover: true, hoverables: { h3: true }, textShadow: '2px 2px rgb(0,0,0)'});
</script>
<!-- FAVICON -->
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="assets/img/favicon.gif" type="image/gif" />
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="assets/img/iphonetouch.jpg"/>
</head>
<body id="page">
<div class="content">
<ol class="hlisting offer-sale plans">
<li class="item basic">
<h4 class="fn">Basic <span class="price">£3.99 ($6 US)</span></h4>
<ul class="description">
<li><strong>15</strong> active clients</li>
<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong> staff logins</li>
</ul>
<p>Unlimited telephone & email support</p>
<p><a href="#" class="action">Sign up <span>30 day free trial</span></a> <img src="QQ截图20120301095236.png" width="83" height="76" alt="s"></p>
</li>
<li class="item small">
<h4 class="fn">Small business <span class="price">£6.99 ($12 US)</span></h4>
<ul class="description">
<li><strong>50</strong> active clients</li>
<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong></li>
</ul>
<p>Unlimited telephone & email support</p>
<p><a href="#" class="action">Sign up <span>30 day free trial</span></a><img src="QQ截图20120301095243.png" width="67" height="81"></p>
</li>
<li class="item professional">
<h4 class="fn">Professional <span class="price">£14.99 ($24 US)</span></h4>
<ul class="description">
<li><strong>500</strong> active clients</li>
<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong> staff logins</li>
<li><strong>Free</strong> upgrades</li>
<li><strong>RapidSSL Certificate</strong></li>
</ul>
<p>Unlimited telephone & email support</p>
<p><a href="#" class="action">Sign up <span>30 day free trial</span></a></p>
</li>
<li class="item enterprise">
<h4 class="fn">Enterprise <span class="price">£29.99 ($48 US)</span></h4>
<ul class="description">
<li><strong>2000</strong> active clients</li>
<li><strong>Unlimited</strong> invoices per month</li>
<li><strong>Unlimited</strong> staff logins</li>
<li><strong>Free</strong> upgrades</li>
<li><strong>RapidSSL Certificate</strong></li>
</ul>
<p>Unlimited telephone & email support</p>
<p><a href="#" class="action">Sign up <span>30 day free trial</span></a></p>
</li>
</ol>
</div>
</body>
</html>
/*
Stuff and Nonsense Ltd.
The Cow Shed Studio,
Gwaenysgor,
Flintshire, North Wales
LL18 6EP, UK
+44 1745 851848
http://stuffandnonsense.co.uk
http://forabeautifulweb.com
http://transcendingcss.com
http://twitter.com/malarkey
MAIN.CSS
*/
.csstransforms .plans .item {
-moz-transition: all 0.2s ease-in-out 0s;
}
ol.plans .item {
background-color: #FFFFFF;
border: 1px solid #DFE7EF;
color: #202830;
float: left;
padding: 19px 19px 0;
text-align: center;
text-shadow: 0 1px 1px #FFFFFF;
width: 180px;
}
.csstransforms .plans .item:hover{
-moz-transform:scale(1.05);
border-radius:10px 10px 10px 10px;
box-shadow:0 0 10px rbga(0,0,0,0.5)
}
window.Modernizr = (function(){
var ret = {},
enableHTML5 = true,
enableNoClasses = true,
fontfaceCheckDelay = 50,
doc = document,
docElement = doc.documentElement,
m = doc.createElement( 'modernizr' ),
m_style = m.style,
f = doc.createElement( 'input' ),
// Reused strings.
canvas = 'canvas',
canvastext = 'canvastext',
rgba = 'rgba',
hsla = 'hsla',
multiplebgs = 'multiplebgs',
borderimage = 'borderimage',
borderradius = 'borderradius',
boxshadow = 'boxshadow',
opacity = 'opacity',
cssanimations = 'cssanimations',
csscolumns = 'csscolumns',
cssgradients = 'cssgradients',
cssreflections = 'cssreflections',
csstransforms = 'csstransforms',
csstransforms3d = 'csstransforms3d',
csstransitions = 'csstransitions',
fontface = 'fontface',
geolocation = 'geolocation',
video = 'video',
audio = 'audio',
inputtypes = 'inputtypes',
// inputtypes is a test array of its own containing individual tests for
// various new input types, such as search, range, datetime, etc.
// SVG is not yet supported in Modernizr 1.0
// svg = 'svg',
background = 'background',
backgroundColor = background + 'Color',
canPlayType = 'canPlayType',
tests = {},
inputs = {},
elems,
elem,
i,
feature,
classes = [];
/**
* set_css applies given styles to the Modernizr DOM node.
*/
function set_css( str ) {
m_style.cssText = str;
}
/**
* set_css_all extrapolates all vendor-specific css strings.
*/
function set_css_all( str1, str2 ) {
str1 += ';';
return set_css(
str1
+ '-webkit-' + str1
+ '-moz-' + str1
+ '-o-' + str1
+ '-ms-' + str1
+ ( str2 || '' )
);
}
/**
* contains returns a boolean for if substr is found within str.
*/
function contains( str, substr ) {
return str.indexOf( substr ) !== -1;
}
/**
* test_props is a generic CSS / DOM property test; if a browser supports
* a certain property, it won't return undefined for it.
*/
function test_props( props, callback ) {
for ( var i in props ) {
if ( m_style[ props[i] ] !== undefined && ( !callback || callback( props[i] ) ) ) {
return true;
}
}
}
/**
* test_props_all tests a list of DOM properties we want to check against.
* We specify literally ALL possible (known and/or likely) properties on
* the element including the non-vendor prefixed one, for forward-
* compatibility.
*/
function test_props_all( prop, callback ) {
var uc_prop = prop.replace( /./, function(a) { return a.toUpperCase(); } ),
props = [
prop,
'webkit' + uc_prop,
'Moz' + uc_prop,
'moz' + uc_prop,
'o' + uc_prop,
'ms' + uc_prop
];
return !!test_props( props, callback );
}
// Tests
/**
* Canvas tests in Modernizr 1.0 are still somewhat rudimentary. However,
* the added "canvastext" test allows for a slightly more reliable and
* usable setup.
*/
tests[canvas] = function() {
return !!doc.createElement( canvas ).getContext;
};
tests[canvastext] = function() {
return !!(tests[canvas]() && typeof doc.createElement( canvas ).getContext('2d').fillText == 'function');
};
/**
* geolocation tests for the new Geolocation API specification.
* This test is a standards compliant-only test; for more complete
* testing, including a Google Gears fallback, please see:
* http://code.google.com/p/geo-location-javascript/
*/
tests[geolocation] = function() {
return !!navigator.geolocation;
};
tests[rgba] = function() {
// Set an rgba() color and check the returned value
set_css( background + '-color:rgba(150,255,150,.5)' );
return contains( m_style[backgroundColor], rgba );
};
tests[hsla] = function() {
// Same as rgba(), in fact, browsers re-map hsla() to rgba() internally
set_css( background + '-color:hsla(120,40%,100%,.5)' );
return contains( m_style[backgroundColor], rgba );
};
tests[multiplebgs] = function() {
// Setting multiple images AND a color on the background shorthand property
// and then querying the style.background property value for the number of
// occurrences of "url(" is a reliable method for detecting ACTUAL support for this!
set_css( background + ':url(m.png),url(a.png),#f99 url(m.png)' );
// If the UA supports multiple backgrounds, there should be three occurrences
// of the string "url(" in the return value for elem_style.background
return /(url\s*\(.*?){3}/.test(m_style[background]);
};
tests[borderimage] = function() {
set_css_all( 'border-image:url(m.png) 1 1 stretch' );
return test_props_all( 'borderImage' );
};
tests[borderradius] = function() {
set_css_all( 'border-radius:10px' );
return test_props_all( 'borderRadius', '', function( prop ) {
return contains( prop, 'orderRadius' );
});
};
tests[boxshadow] = function() {
set_css_all( 'box-shadow:#000 1px 1px 3px' );
return test_props_all( 'boxShadow' );
};
tests[opacity] = function() {
// Browsers that actually have CSS Opacity implemented have done so
// according to spec, which means their return values are within the
// range of [0.0,1.0] - including the leading zero.
set_css( 'opacity:.5' );
return contains( m_style[opacity], '0.5' );
};
tests[cssanimations] = function() {
set_css_all( 'animation:"animate" 2s ease 2', 'position:relative' );
return test_props_all( 'animationName' );
};
tests[csscolumns] = function() {
set_css_all( 'column-count:3' );
return test_props_all( 'columnCount' );
};
tests[cssgradients] = function() {
/**
* For CSS Gradients syntax, please see:
* http://webkit.org/blog/175/introducing-css-gradients/
*/
var str1 = background + '-image:',
str2 = 'gradient(linear,left top,right bottom,from(#9f9),to(white));';
set_css(
str1 + str2
+ str1 + '-webkit-' + str2
+ str1 + '-moz-' + str2
+ str1 + '-o-' + str2
+ str1 + '-ms-' + str2
);
return contains( m_style.backgroundImage, 'gradient' );
};
tests[cssreflections] = function() {
set_css_all( 'box-reflect:right 1px' );
return test_props_all( 'boxReflect' );
};
tests[csstransforms] = function() {
set_css_all( 'transform:rotate(3deg)' );
return !!test_props([ 'transformProperty', 'webkitTransform', 'MozTransform', 'mozTransform', 'oTransform', 'msTransform' ]);
};
tests[csstransforms3d] = function() {
set_css_all( 'perspective:500' );
return !!test_props([ 'perspectiveProperty', 'webkitPerspective', 'MozPerspective', 'mozPerspective', 'oPerspective', 'msPerspective' ]);
};
tests[csstransitions] = function() {
set_css_all( 'transition:all .5s linear' );
return test_props_all( 'transitionProperty' );
};
// @font-face detection routine created by Paul Irish - paulirish.com
// Merged into Modernizr with approval. Read more about Paul's work here:
// http://paulirish.com/2009/font-face-feature-detection/
tests[fontface] = (function(){
var fontret;
// IE supports EOT and has had EOT support since IE 5.
// This is a proprietary standard (ATOW) and thus this off-spec,
// proprietary test for it is acceptable.
if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;
else {
// Create variables for dedicated @font-face test
var st = doc.createElement('style'),
spn = doc.createElement('span'),
wid, nwid, isFakeBody = false, body = doc.body,
callback, isCallbackCalled;
// The following is a font-face + glyph definition for the . character:
st.textContent = "@font-face{font-family:testfont;src:url('data:font/ttf;base64,AAEAAAAMAIAAAwBAT1MvMliohmwAAADMAAAAVmNtYXCp5qrBAAABJAAAANhjdnQgACICiAAAAfwAAAAEZ2FzcP//AAMAAAIAAAAACGdseWYv5OZoAAACCAAAANxoZWFk69bnvwAAAuQAAAA2aGhlYQUJAt8AAAMcAAAAJGhtdHgGDgC4AAADQAAAABRsb2NhAIQAwgAAA1QAAAAMbWF4cABVANgAAANgAAAAIG5hbWUgXduAAAADgAAABPVwb3N03NkzmgAACHgAAAA4AAECBAEsAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAACAAMDAAAAAAAAgAACbwAAAAoAAAAAAAAAAFBmRWQAAAAgqS8DM/8zAFwDMwDNAAAABQAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABGAAMAAQAAAK4ABAAqAAAABgAEAAEAAgAuqQD//wAAAC6pAP///9ZXAwAAAAAAAAACAAAABgBoAAAAAAAvAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEACoAAAAGAAQAAQACAC6pAP//AAAALqkA////1lcDAAAAAAAAAAIAAAAiAogAAAAB//8AAgACACIAAAEyAqoAAwAHAC6xAQAvPLIHBADtMrEGBdw8sgMCAO0yALEDAC88sgUEAO0ysgcGAfw8sgECAO0yMxEhESczESMiARDuzMwCqv1WIgJmAAACAFUAAAIRAc0ADwAfAAATFRQWOwEyNj0BNCYrASIGARQGKwEiJj0BNDY7ATIWFX8aIvAiGhoi8CIaAZIoN/43KCg3/jcoAWD0JB4eJPQkHh7++EY2NkbVRjY2RgAAAAABAEH/+QCdAEEACQAANjQ2MzIWFAYjIkEeEA8fHw8QDxwWFhwWAAAAAQAAAAIAAIuYbWpfDzz1AAsEAAAAAADFn9IuAAAAAMWf0i797/8zA4gDMwAAAAgAAgAAAAAAAAABAAADM/8zAFwDx/3v/98DiAABAAAAAAAAAAAAAAAAAAAABQF2ACIAAAAAAVUAAAJmAFUA3QBBAAAAKgAqACoAWgBuAAEAAAAFAFAABwBUAAQAAgAAAAEAAQAAAEAALgADAAMAAAAQAMYAAQAAAAAAAACLAAAAAQAAAAAAAQAhAIsAAQAAAAAAAgAFAKwAAQAAAAAAAwBDALEAAQAAAAAABAAnAPQAAQAAAAAABQAKARsAAQAAAAAABgAmASUAAQAAAAAADgAaAUsAAwABBAkAAAEWAWUAAwABBAkAAQBCAnsAAwABBAkAAgAKAr0AAwABBAkAAwCGAscAAwABBAkABABOA00AAwABBAkABQAUA5sAAwABBAkABgBMA68AAwABBAkADgA0A/tDb3B5cmlnaHQgMjAwOSBieSBEYW5pZWwgSm9obnNvbi4gIFJlbGVhc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgT3BlbiBGb250IExpY2Vuc2UuIEtheWFoIExpIGdseXBocyBhcmUgcmVsZWFzZWQgdW5kZXIgdGhlIEdQTCB2ZXJzaW9uIDMuYmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhTGlnaHRiYWVjMmE5MmJmZmU1MDMyIC0gc3Vic2V0IG9mIEZvbnRGb3JnZSAyLjAgOiBKdXJhIExpZ2h0IDogMjMtMS0yMDA5YmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhIExpZ2h0VmVyc2lvbiAyIGJhZWMyYTkyYmZmZTUwMzIgLSBzdWJzZXQgb2YgSnVyYUxpZ2h0aHR0cDovL3NjcmlwdHMuc2lsLm9yZy9PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMAA5ACAAYgB5ACAARABhAG4AaQBlAGwAIABKAG8AaABuAHMAbwBuAC4AIAAgAFIAZQBsAGUAYQBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAdABlAHIAbQBzACAAbwBmACAAdABoAGUAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALgAgAEsAYQB5AGEAaAAgAEwAaQAgAGcAbAB5AHAAaABzACAAYQByAGUAIAByAGUAbABlAGEAcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAEcAUABMACAAdgBlAHIAcwBpAG8AbgAgADMALgBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQBMAGkAZwBoAHQAYgBhAGUAYwAyAGEAOQAyAGIAZgBmAGUANQAwADMAMgAgAC0AIABzAHUAYgBzAGUAdAAgAG8AZgAgAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAASgB1AHIAYQAgAEwAaQBnAGgAdAAgADoAIAAyADMALQAxAC0AMgAwADAAOQBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQAgAEwAaQBnAGgAdABWAGUAcgBzAGkAbwBuACAAMgAgAGIAYQBlAGMAMgBhADkAMgBiAGYAZgBlADUAMAAzADIAIAAtACAAcwB1AGIAcwBlAHQAIABvAGYAIABKAHUAcgBhAEwAaQBnAGgAdABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAgAAAAAAAP+BADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIAEQt6ZXJva2F5YWhsaQ==')}";
doc.getElementsByTagName('head')[0].appendChild(st);
spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden');
if (!body){
body = docElement.appendChild(doc.createElement(fontface));
isFakeBody = true;
}
// the data-uri'd font only has the . glyph; which is 3 pixels wide.
spn.innerHTML = '........';
spn.id = 'fonttest';
body.appendChild(spn);
wid = spn.offsetWidth;
spn.style.font = '99px testfont,_,serif';
// needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
fontret = wid !== spn.offsetWidth;
var delayedCheck = function(){
fontret = Modernizr[fontface] = wid !== spn.offsetWidth;
docElement.className = docElement.className.replace(/(no-)?font.*?\b/,'') + (fontret ? ' ' : ' no-') + fontface;
callback && (isCallbackCalled = true) && callback(fontret);
isFakeBody && setTimeout(function(){body.parentNode.removeChild(body)}, 50);
}
setTimeout(delayedCheck,fontfaceCheckDelay);
}
// allow for a callback
ret._fontfaceready = function(fn){
(isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
}
return function(){ return fontret || wid !== spn.offsetWidth; };
})();
tests[video] = function() {
return !!doc.createElement(video)[canPlayType];
};
tests[audio] = function() {
return !!doc.createElement(audio)[canPlayType];
};
// Run through all tests and detect their support in the current UA.
for ( feature in tests ) {
if ( tests.hasOwnProperty( feature ) ) {
classes.push( ( !( ret[ feature ] = tests[ feature ]() ) && enableNoClasses ? 'no-' : '' ) + feature );
}
}
// Run through HTML5's new input types to see if the UA understands any.
// This is put behind the tests runloop because it doesn't return a
// true/false like all the other tests; instead, it returns an array
// containing properties that represent the 'supported' input types.
ret[inputtypes] = function(props) {
for ( var i in props ) {
f.setAttribute('type', props[i]);
inputs[ props[i] ] = !!( f.type !== 'text');
}
return inputs;
}('search tel url email datetime date month week time datetime-local number range color'.split(' '));
/**
* Reset m.style.cssText to nothing to reduce memory footprint.
* Reset tmp, i and prop to null (in case they were used).
*
* TODO: explore alternative approach where m.style.cssText is
* set only once and we extract all data in one fell swoop.
* Could prove to be a performance improvement.
*/
set_css( '' );
m = f = null;
// Enable HTML 5 elements for styling in IE:
if ( enableHTML5 && !(!/*@cc_on!@*/0) ) {
elems = 'abbr article aside audio bb canvas datagrid datalist details dialog figure footer header mark menu meter nav output progress section time video'.split(' ');
i = elems.length+1;
while ( --i ) {
elem = doc.createElement( elems[i] );
}
elem = null;
}
// Assign private properties to the return object with prefix
ret._enableHTML5 = enableHTML5;
ret._enableNoClasses = enableNoClasses;
// Remove "no-js" class from <html> element, if it exists:
(function(H,C){H[C]=H[C].replace(/\bno-js\b/,'js')})(docElement,'className');
// Add the new classes to the <html> element.
docElement.className += ' ' + classes.join( ' ' );
return ret;
})();
