@import url(http://fonts.googleapis.com/css?family=Syncopate|Overlock);

/* ProtoFluid. Edward Cant. @opticswerve. */

@-ms-viewport { width: device-width; }
@viewport { width: device-width; }

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, iframe, h1, h2, p, a, img, q, strong, ul, li, form, label,
table, tbody, tfoot, thead, tr, th, td, canvas, embed, footer, header {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;

}
q:before, q:after { content: ''; content: none; }

/* Style
---------*/
html { -webkit-text-size-adjust: none; }
body { color: #333; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }

a { color: #06f; text-decoration: none; }
p { margin: 0 0 1.5em; }
q { font-style: italic; quotes: none; }

header { display: block; padding: 1em 0; position: relative; }
.wrapper { padding: 1.5em 5%; position: relative; }

.ex { display: none; }

ul { list-style: none; margin: 0 0 1.5em; }
ul li { margin: 0 0 1em 1em; position: relative; }

ul.mark li:before { content: ''; border-top: 4px solid #222; border-right: 4px solid #000; width: 6px; height: 6px; position: absolute; top: 6px; left: -18px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

h1, h2 { font-weight: normal; }
h1 { color: #444; font-family: 'Syncopate', sans-serif; font-size: 2em; padding: 0 0 0 5%; } /* Width prevents overlapping menu button */
h1 span { color: #777; }
h2 { color: #222; font-family: 'Overlock', sans-serif; font-size: 1.5em; margin: 0 0 0.5em; }

/* Button
----------*/
.button { background: #06f; color: #fff; display: inline-block; padding: 0.5em 1em; position: relative; }
.button:hover, .button:active { background: #05d; }

/* Code
--------*/
code { background: #222; color: #ccc; display: block; font-family: 'Courier New', Courier, monospace; margin: 0 0 1.5em; padding: 24px 1em; white-space: pre; overflow: auto; }
code.inline { display: inline; padding: 4px 8px; margin: 0; left: 0; }

/* Keyboard keys
-----------------*/
.key { background: #333; border-radius: 2px; color: #eee; display: inline-block; min-width: 2em; margin-right: 0.5em; padding: 2px 0; text-align: center; }

/* Social
----------*/
.soc { margin: 0 0 1.5em; }
.fb-like { margin: 1em 0 0; }
.g-plusone { }
.twitter-share-button { }

/* Menu
--------*/
.menu { background: #06f; overflow: hidden; padding: 0 0 0 5%; }
.menu a { color: #fff; display: block; float: left; padding: 1em; }
.menu a:hover, .menu a:active { background: #05e; }

/* Ads, Callout
----------------*/
.ad { background: #eee; display: inline-block; height: 250px; margin: 0 0 1.5em; width: 300px; }
.call { background: #eee; padding: 1em; }

table { border-collapse: collapse; border-spacing: 0; margin: 0 0 1.5em; }
td { padding: 0.5em 1em; }

/* Breakpoints
---------------*/
@media (min-width: 320px) { }

@media (min-width: 480px) {
	h1 { font-size: 3em; }
}

@media (min-width: 600px) {
	h1 { font-size: 3.5em; }
	.ex { display: inline; }
	h2.ex { display: block; }

}

@media (min-width: 720px) {
	h1 { font-size: 4em; }
	h2 { font-size: 1.75em; }

}

@media (min-width: 980px) {
	h1 { font-size: 5em; }
	.wrapper { padding-top: 2em; }

	.slot0, .slot1 { float: left; }
	.slot0 { width: 58%; margin: 0 4em 4em 0; }
	.slot1 { clear: right; width: 300px; }

}

@media (min-width: 1024px) {
	h1 { max-width: 1024px; }
	.wrapper { max-width: 1024px; }

	.slot0 .fb-like { margin: 0; }

}

@media (min-width: 1200px) {
	h1 { font-size: 6em; max-width: 1152px; }
	.wrapper { max-width: 1152px; }

}