@charset "UTF-8";
/*------------------------------------*\
	$RESET
\*------------------------------------*/
/*

*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
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,


}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
	display:block;
}
h1,h2,h3,h4,h5,h6{
	font-size:1em;
}


}
em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}
abbr[title],dfn[title]{
	cursor:help;
	border-bottom:1px dotted;
}
ins{
	border-bottom:1px solid;


}
a,u,ins{
	text-decoration:none;


}
del,s{
	text-decoration:line-through;
}


/*------------------------------------*\
	$MEDIA
\*------------------------------------*/
/*
Based on @stubbornella’s media object: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
<a class="media promo">
	<img src=product.jpg alt="" class=img>
	<p class=body>Get Product for half price!</p>
</a>
*/
.media{
	display:block;
}
	.media .img{
		float:left;
		margin-right:10px;
	}
	.media .body{
		overflow:hidden;
		margin-bottom:0;
	}


/*--- LINKS ---*/
/*
Say no to negative hovers: csswizardry.com/2011/05/on-negative-hovers/
A negative hover is one whose appearance is subtracted from on hover rather than added to.
*/
a:visited{
	opacity:0.8; /* A bit basic, but it’s a bare minumum... */
}
a:hover{
	text-decoration:underline;
}
a:active,
a:focus{
	/* Give clicked links a depressed effect. */
	position:relative;
	top:1px;
}

/*--- LISTS ---*/
li > ul,
li > ol{
	/* Let’s take care of lists in lists */
	margin-bottom:0;
}

/*
A numbered list is NOT the same as an ordered one: csswizardry.com/2011/09/ordered-and-numbered-lists-the-differences/
Use this class when you want a list to be numbered but it has no order.
*/
ul.numbered{
	list-style:decimal outside;
}
dt{
	font-weight:bold;
}

/*--- QUOTES ---*/
/*
Big up @boblet: html5doctor.com/blockquote-q-cite/
*/
q{ quotes:"‘" "’" "“" "”"; }

q:before{ content:"‘"; content:open-quote; }
q:after{ content:"’"; content:close-quote; }

q q:before{ content: "“"; content: open-quote; }
q q:after{ content: "”"; content: close-quote; }

blockquote{ quotes: "“" "”"; }
blockquote p:before{ content: "“"; content: open-quote; }
blockquote p:after{ content: ""; content: no-close-quote; }
blockquote p:last-of-type:after{ content: "”"; content: close-quote; }

blockquote{
	text-indent:-0.4em;
}

/*
Mark up the source of a quote with .source:
<blockquote>
	<p>Lorem ipsum dolor sit amet. <b class=source>Joe Bloggs</b></p>
</blockquote>
*/
.source{
	display:block;
	text-indent:0;
	margin-top:-24px;
	margin-top:-1.5rem;
}
	.source:before{
		content:"—";
	}




/*------------------------------------*\
	$IMAGES
\*------------------------------------*/
img{
	max-width:100%;
	height:auto;
	/* Give it some text styles to offset alt text */
	color:#c00;
}
img.left	{ margin:0 1.5em 0 0; }
img.right	{ margin:0 0 0 1.5em; }

/*--- FLASH/VIDEO ---*/
object,
embed,
video{
	max-width:100%;
	height:auto;
}




/*------------------------------------*\
	$MOBILE
\*------------------------------------*/
/*
CSS for mobile devices.
Linearise it!
*/
@media (max-width: 720px){


/*------------------------------------*\
	IMAGES
\*------------------------------------*/
img.left,
img.right	{ max-width:50%; height:auto; }
}
/*--- END MOBILE ---*/