/* Meyer Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { display:block;}

body{
	padding: 5em;
	max-width: 40em;
	margin: auto;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	line-height: 1.4;
	color: rgba(0,0,0,0.8);
}

article#cssmaskswebkit a{ color: rgba(0,0,0,0.8); }
article#cssmaskswebkit a:visited{ color: rgba(0,0,0,0.6); }
article#cssmaskswebkit a:hover{ color: rgba(10,200,10,0.8); }

header{
	margin-bottom: 2em;
}
header > h1{ font-size: 2em; }
header > p.author{ font-size: 0.7em;color: rgba(0,0,0,0.3); }
header > p.author > a{ color: rgba(0,0,0,0.3); }
header > p.author > a:visited{ color: rgba(0,0,0,0.3); }
header > p.author > a:hover{ color: rgba(10,200,10,0.8); }
header time{ font-style: italic;padding-left: 1em; }

section{
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: 0.1em dashed rgba(0,0,0,0.3);
}

section#license, #supportedby{
	font-size: 0.7em;	
}
section#license img{
	float: left;padding-right: 1em;
}
#supportedby{
	text-align: center;
	color: rgba(0,0,0,0.4);
}

p.note{
	font-size: 0.75em;
	color: rgba(0,0,0,0.6);
	padding: 1em;
	border: 0.2em solid rgba(10,200,10,0.3);
	-webkit-border-radius:0.3em;
	background-color: rgba(10,200,10,0.1);
	margin-bottom: 1.4em;
}
p.example{
	text-align: center;
}
section > p, section > code{
	display: block;
	margin-bottom: 1.4em;
}
section > code{
	padding: 0 2em;
}

article#cssmaskswebkit aside{
	float: right;
	clear: right;
	font-size: 0.75em;
	width: 14em;
	padding:1em 0 1em 1.5em;
	margin: 0 0 0 2em;
	color: rgba(0,0,0,0.6);
	border-left: 1px dashed rgba(0,0,0,0.3);
}
article#cssmaskswebkit aside h2{
	color: rgba(0,0,0,0.3);
}
article#cssmaskswebkit aside#resources{
	margin-bottom: 1em;
}
.cutout{
	-webkit-mask: url(images/heartmask.png) no-repeat center center;
}

.cutout.pulse:hover{
	-webkit-animation-name: pulsed;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:alternate;
	-webkit-mask-size: auto 100%;
}

@-webkit-keyframes pulsed {
	0% { -webkit-mask-size: auto 100%; }	
	100% { -webkit-mask-size: auto 90%; }
}