/* Reset */

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;font-size:100%;margin:0;padding:0}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}svg{overflow:hidden}


/* Basic setup */

body
{
	font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	font-size: 15px;
	background-color: #f7f7f7;
	
	/*width: 320px;*/
}

.grid-container
{
	max-width: 1024px;		
}


/* Top menu */

.topbar
{
	padding: 2em 0em;	
}


.topbar img
{
	float: left;
}

.topbar ul a li:hover
{
	color: #22648c;
}

.topbar a.tagbutton
{
	text-decoration: none;
	text-transform: uppercase;
	background-color: #22648e;
	color: white;
	padding: 0.25em 0.75em;
	font: 1em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	font-stretch: condensed;
	letter-spacing: 2px;
	float: right;
	clear: left;
}

ul.topmenu
{
	margin: 0;
	list-style-type: none;
	text-transform: lowercase;
	padding-top: 0.35em;
}

ul.topmenu li
{
	display: block;
	float: left;
	padding: 0px 1em 0px 2em;
	color: gray;
	font-weight: 200;
}


/* Hero bar */

.heroic
{
	clear: both;
	padding: 2em 0em 2.3em 0em;
	overflow: hidden;
}

.heroic.wooji, .heroic.sylo-synth, .heroic.presentation-remote, .heroic.asb, .heroic.gtfo, .heroic.hexterity, .heroic.soundroid
{
	background: #04001e url("/i/hero/wooji.jpg") no-repeat 50% 70%;	
}

.heroic.grain-science
{
	background: #04001e url("/i/hero/grain-science.jpg") no-repeat 50% 80%;	
}
.heroic.hokusai
{
	background: #4e4e4e url("/i/hero/hokusai.jpg") no-repeat 50% 12%;	
}
.heroic.mitosynth
{
/*	background: #384654 url("/i/hero/mitosynth.jpg") no-repeat 50% 50%;	*/
	background: #28323d url("/i/hero/mitosynth.jpg") no-repeat 50% 50%;	
}
.heroic.ferrite
{
	background: #2d2d2d url("/i/hero/ferrite.jpg") no-repeat 50% 50%;
}
.heroic.portray
{
	background: #5e5a55 url("/i/hero/portray.jpg") no-repeat 50% 50%;
}
.heroic.gradiance
{
	background: #363139 url("/i/hero/gradiance.jpg") no-repeat 50% 50%;
}


.heroic.extra
{
	padding: 4em 0em;
}

.heroic h1
{
	color: white;
	text-transform: uppercase;
	font: 48pt "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	font-stretch: condensed;
	letter-spacing: 0.1em;
	text-shadow: #000 0 1px 0;
	position: relative;
    left: -0.05em;
}
a.giantbutton { text-decoration: none; }

@media screen and (min-width: 768px) 
{
	.heroic .lefty
	{
		text-align: right;
	}
	
	.heroic .lefty h1
	{
		left: 0.1em; /* letter-spacing + right-align fix */
	}
}

h2
{
	font: 16pt "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-weight: 100;
	letter-spacing: 0.05em;
}

.heroic h2
{
	color: #fff7df;	
	margin-bottom: 0.5em;
}

.heroic.extra h2
{
	margin-bottom: 1em;	
}

.heroic p
{
	font-weight: 200;
	color: white;
	line-height: 1.4em;
}
.heroic p a
{
    text-decoration: none;
	color: #fff7df;	
}



.bpa
{
    font-family: "Palatino", "Palatino Linotype";
    font-weight: lighter;
    font-style: italic;
    opacity: 0.95;
}

.heroic .tags
{
	color: white;
	margin-top: 1.2em;
	float: right;
}

.heroic label
{
	font-size: 80%;
	font-weight: 300;
	background-color: rgba(255,255,255,0.25);
	color: white;
	padding: 0.25em 8px;
	display: inline;
	margin: 0 0 0 1em;
}

.heroic .appstorebadge
{
	clear: both;
    margin-top: 1.5em;
    margin-right: -1px;
    display: block;
}


/* Product bar */

.wksticky
{
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 0px;
		z-index: 1000;
}
.stuck
{
	position: fixed;
	top: 0;
}

.midmenu
{
	display: block;	
	background: white;
	margin-bottom: 2em;
	z-index: 1000;
}

ul.midmenu
{
	list-style-type: none;
	float: left;
	display: block;
	clear: both;
	width: 100%;
	text-align: center;
	font-size: 18px;
}

ul.midmenu li
{
	display: block;
	float: left;
	font-weight: 200;
	padding: 1.5em 0;
	color: black;

	transition-duration: 300ms;
}
ul.midmenu li.selected
{
	color: #22648c;
}
ul.midmenu li:hover
{
	background: #fff7df;
}
@media screen and (max-width: 767px) 
{
	ul.midmenu li
	{
		padding: 4px 0;
	}
}

/* Main content */

.main
{
	background-color: #f7f7f7;
	line-height: 1.4em;
}
.main .grid-container.article
{
    padding-top: 2em;
}
.main .breather
{
    margin-top: 2em;
}

.main h2
{
	margin: 2em 0 0.5em;
	font-weight: 300;
}
.main h2, .main h2 a
{
	color: #7f7f7f;
}
.main h2:first-child
{
    margin-top: 0;
}

.main h3
{
	color: #7f7f7f;
	font-weight: normal;
	font-size: 1.1em;
	margin-top: 0.5em;
}
.main h2 + h3
{
    margin-top: 2em;
}

.main p
{
	font-size: 15px;
	font-weight: 300;
	margin: 1em 0;
}
.main p strong, .main li strong
{
    font-weight: 500;
    color: #444;
}

.main a
{
	color: #157bbd;
	text-decoration: none;
}
.main a:visited
{
	color: #22648e;	
}

.main hr
{
	margin: 2em 25%;
	border-top: 1px solid #D4D4D4;
	width: 50%;
}

.main .footmark
{
	padding-left: 0.25em;
	font-size: 0.75em;
	position: relative;
	top: -0.5em;
	font-weight: 500;
}

.main .footnote
{
	font-size: 0.9em;
	color: #555;
}

.reader-only
{
    position: absolute;
    left: -1000px;
}

.main .article .grid-60 > ul
{
	font-size: 15px;
	font-weight: 300;
    display: table;
	display: list-item;
	list-style: none;
}
.main .article .grid-60 > ul ul
{
	margin-left: 1em;
	display: list-item;
	list-style: none;
}
.main .article .grid-60 > ul li
{
    display: table-row;
}
.main .article .grid-60 > ul li:before
{
    content: "•\00A0";
    display: table-cell;
}

/* hack to make nav jump to correct place */
.main a[name] 
{
    padding-top: 8em;
    margin-top: -8em;
/*    display: inline-block;*/
    visibility: hidden;
}

/* code */

.main key
{
	background: #ddd;
	border-bottom: 1px solid rgba(79,87,107,0.25);
	padding: 2px 0.5em;
	font: 0.9em "Andale Mono", "Droid Sans Mono", Courier, "Courier New", mono;
}

.main var
{
	font-style: normal;
	font: 0.9em "Andale Mono", "Droid Sans Mono", Courier, "Courier New", mono;
	font-weight: 500;
	background: white;
	color: #444;
	padding: 0px 3px;
/*  color: #444;*/
}

.main h4
{
	padding-left: 1em;
	color: #999;
	font: 1em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	font-stretch: condensed;
	float: left;
	margin-top: 1em;
}

.main h5
{
	color: #666;
	font: 1em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	font-stretch: condensed;
	float: left;
	margin-top: 1em;
	padding-left: 1em;
}
.main h4 + h5
{
    padding-left: 0;
}
.main h4 + h5:before
{
	content: "• ";
	color: #777;
	position: relative;
	top: 1px;
	margin-left: 0.2em;
}

.main code
{
	font-style: normal;
	font: 0.9em "Andale Mono", "Droid Sans Mono", Courier, "Courier New", mono;
	color: #444;
	white-space: pre;
	display: block;
	background-color: #f0f0ed;
	padding: 1em;
	overflow: scroll;
	clear: left;
	margin: 2em 0px;
}

.main code .keyword
{
	color: #22648e;
}
.main code .name
{
	color: navy;
}
.main code .string
{
	color: #6495ED;
}
.main code .builtin
{
	color: purple;
}


/* other embedded blocks: quotes, forms, indices */

.main blockquote
{
	padding-left: 8px;
	padding-right: 12px;
	font-weight: 200;
	color: #777;
	margin: 1.5em 1em 0.5em;
}

.main blockquote:before
{
	content:  "“";
	font-size: 2em;
	position: absolute;
	float: left;
	margin-left: -0.45em;
	margin-top: 0.075em;
	color: #999;
}
.main blockquote.noquote:before
{
    content: "";
}

.main blockquote:after
{
	font-size: 2em;
	line-height: 0.01em;
	content: "”";
	margin-left: 0.1em;
/*  margin-top: 0.075em;*/
	color: #999;
	position: relative;
	top: 0.3em;
	left: -0.12em;
}
.main blockquote p
{
	display: inline-block;
	margin-top: 0;
}
.main blockquote.noquote:after
{
    content: "";
}
.main .pullout blockquote
{
    font-size: 1.2em;
}
.main .pullout
{
    margin-bottom: 1.5em;
}
.main ul.responsivegrid
{
    display: -webkit-flex;
    display: flex; 
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; 
    -webkit-justify-content: center; 
    justify-content: center; 
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.main ul.responsivegrid li
{
    flex-grow: 0; 
    flex-shrink: 1; 
    flex-basis: auto;
    list-style-type: none;
}

.main .matrix td
{
    text-align: center;
    padding: 1em 0em;
    vertical-align: middle;
}

.main .matrix tr + tr
{
    border-top: 1px dotted #aaa;
}

.main cite
{
	margin-left: 1em;
	padding-left: 8px;
	color: #888;
	display: block;
	margin-bottom: 1.5em;	
}
.main cite:before
{
	content:  "— ";
}

.main .callout
{
	font-style: normal;
	color: #444;
/*  white-space: pre;*/
	display: block;
	background-color: #f0f0ed;
	padding: 1em;
/*  overflow: scroll;
*/	clear: left;
	margin: 2em 0px;
}
.main form
{
	color: #444;
	display: block;
	background-color: #f0f0ed;
	padding: 1.5em;
	margin: 2em 0em;
	border: 1px solid #ccc;
	border-left: 0;
	border-right: 0;
}
.main form input[type='text']
{
	width: 80%;
}
.main form .subtle
{
	font-size: 0.8em;
	color: #444;
}
.main form p.feedback
{
	display: none;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

.main ol.index
{
	background: #f0f0ed;
	list-style-type: none;
/*  list-style-position: inside;*/
	margin: 2em 0em;
	font: 1em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	font-stretch: condensed;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
}
.main ol.index li
{
	border-bottom: 1px solid #bbb;
	padding-bottom: 0.5em;
	padding-left: 1em;
	padding-top: 0.5em;
}
.main ol.index a:first-child li
{
	border-top: 1px solid #bbb;	
}
.main ol.index li:hover
{
	background: #e3e1d1;
}

.file-icon
{
	background: url(/i/download-icon@2x.png);
	background-size: 65px 80px;
	display: block;
	width: 65px;
	height: 30px;
	text-align: center;
	font-size: 0.7em;
	padding-top: 50px;
	color: #444;
	margin: 0 auto 10px;
}
label.file-size
{
	font: 0.9em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;	
	letter-spacing: 0.1em;
	font-stretch: condensed;
	color: #777;
	text-transform: uppercase;
}

/* Images, galleries & switchers */

img.article-inline
{
    max-width: 100%;
}

.video
{
    width: 100%;
    display: block;
    margin: 3em 0em;
    position: relative;
    height: 0;
    padding-bottom: 76%;
}
.video iframe
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

ul.switcher
{
	list-style-type: none;
	text-align: center;
	margin-bottom: 1em;
	margin-top: 2em;
	display: block;
	/*border: 1px solid red;*/
	font: 0.9em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	letter-spacing: 0.1em;
	font-stretch: condensed;
	width: 100%;
}
ul.switcher li
{
	display: inline;
	padding: 0.5em 2em;
	background: #eee;
	color: #777;
}
ul.switcher li.selected, ul.switcher li.selected:hover
{
	background: #dedede;
	color: black;
}
ul.switcher li:hover
{
	background: #e3e1d1;
	color: black;
}

.gallery
{
	text-align: center;
	clear: left;
	float: left;
	background: white;
	display: block;
	max-width: 100%;
	padding-bottom: 1em;
	margin-bottom: 3em;
}
.gallery.dark
{
	background-color: #f7f7f7;
}
.gallery.retinise .ipad img
{
	max-width: 768px;
	max-height: 768px;
}
.gallery.retinise.in-device .ipad img
{
	max-width: 750px;
	max-height: 750px;
}
.gallery.retinise .iphone img
{
	max-width: 480px;
	max-height: 480px;
}
.gallery.retinise.in-device .iphone img
{
	max-width: 568px;
	max-height: 568px;
}
.gallery .scroller
{
	overflow: scroll;
	float: left;
	width: 100%;
	padding-bottom: 1em;
	margin-bottom: 1em;
   -webkit-overflow-scrolling: touch;
}
.gallery .content
{
	text-align: left;
	float: left;
	white-space: nowrap;
	/*padding-left: 155px;*/
}
.gallery .content li
{
	display: inline-block;
	margin: 0 50px 0 0;
	text-align: center;
	vertical-align: bottom;
}
/*.gallery .content img:last-child
{
	margin-right: 155px;
}*/

.gallery .content li .gnah
{
	clear: left;
	float: left;
	text-align: center;
	width: 100%;
	vertical-align: top;
}
@media screen and (max-width: 320px) 
{
    .gallery .content li .gnah img { max-width: 300px; }
}
@media screen and (max-width: 480px) and (min-width: 479px)
{
    .gallery .content li .gnah img { max-width: 460px; }
}

.gallery .content
{
    display:none;
}
.gallery .content:first-child
{
    display:block;
}

.gallery .content li img
{
}
.gallery .gnah2
{
	clear: left;
	float: left;
	text-align: center;
	width: 100%;
	margin-top: 1em;
}
.gallery label
{
	width: 100%;
	max-width: 300px;
	white-space: normal;
	margin: 1em auto;
	text-align: center;
}



/*.gallery ul
{
}
.gallery ul li
{
	display: none;
}
.gallery ul li.selected
{
	display: inline;
	color: #888;
}*/

/* Support pages */ 

.support .mobile-grid-50, .support .tablet-grid-50, .support .grid-33, .centre
{
	text-align: center;
}

.support .prefix-33 h2
{
	margin-top: 3em;
}

/* Article Footer */

.main .articlefooter hr
{
	margin: 3em 0 0 0;
	border-top: 1px solid #D4D4D4;
	width: 100%;
}

.articlefooter, .articlefooter a
{
	text-decoration: none;
	margin-top:  0;
	margin-bottom:  0;
}
.articlefooter
{
    color: #7f7f7f;
}

/*.articlefooter a.buttony
{
	display: block;
}*/

.articlefooter ul
{
	list-style-type: none;     
    /*background: repeating-linear-gradient(
    	to bottom,
    	#ddd 0px,
    	#ddd 1.8em,
    	#eee 1.8em,
    	#eee 3.6em
    );
    background-position: 0px top;*/
    font-size: 1em;
}

.articlefooter ul li
{
	position: relative;
	padding: 0;
	margin: 0;
	line-height: 2em;
}
.articlefooter ul li.header
{
	color: #9B9B9B;
	text-transform: uppercase;
	/*margin-top: 1.8em;*/
	height: 2em;
}
.articlefooter ul li.header .f
{
	top: 40%;
	position: absolute;
	font: 1em "Futura-CondensedMedium", "Futura", "Trebuchet MS", sans-serif;
	font-stretch: condensed
}
.articlefooter ul li.header:first-child
{
	margin-top: 0;
}
.articlefooter ul li .icon
{
	position: absolute;
	top: 50%;
	margin-top: -12px;
	left: 0px;
}
.articlefooter ul li.icony a
{
	margin-left: 30px;
}

a.linky:after
{
	content: "➤";
	position: relative;
	top: 1px;
	padding-left: 0.4em;
}

a.linky
{
	color: #7f7f7f;
	text-decoration: none;	
}


 /*Page Footer*/ 

.footer
{
	margin: 8em 0em;
	text-align: center;	
	display: block;
	padding-bottom: 4em;
}