@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-regular-webfont-v1.eot');
    src: url('fonts/sourcesanspro-regular-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-regular-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-regular-webfont-v1.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}
/*
@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-it-webfont-v1.eot');
    src: url('fonts/sourcesanspro-it-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-it-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-it-webfont-v1.ttf') format('truetype');
    font-style: italic;
}
*/

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-semibold-webfont-v1.eot');
    src: url('fonts/sourcesanspro-semibold-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-semibold-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-semibold-webfont-v1.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
/*
@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-semiboldit-webfont-v1.eot');
    src: url('fonts/sourcesanspro-semiboldit-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-semiboldit-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-semiboldit-webfont-v1.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}
*/

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-light-webfont-v1.eot');
    src: url('fonts/sourcesanspro-light-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-light-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-light-webfont-v1.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
/*
@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-lightit-webfont-v1.eot');
    src: url('fonts/sourcesanspro-lightit-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-lightit-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-lightit-webfont-v1.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}
*/

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-extralight-webfont-v1.eot');
    src: url('fonts/sourcesanspro-extralight-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralight-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-extralight-webfont-v1.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}



/*
@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-extralightit-webfont-v1.eot');
    src: url('fonts/sourcesanspro-extralightit-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralightit-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-extralightit-webfont-v1.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-bold-webfont-v1.eot');
    src: url('fonts/sourcesanspro-bold-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-bold-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-bold-webfont-v1.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-boldit-webfont-v1.eot');
    src: url('fonts/sourcesanspro-boldit-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-boldit-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-boldit-webfont-v1.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-black-webfont-v1.eot');
    src: url('fonts/sourcesanspro-black-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-black-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-black-webfont-v1.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-blackit-webfont-v1.eot');
    src: url('fonts/sourcesanspro-blackit-webfont-v1.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-blackit-webfont-v1.woff') format('woff'),
         url('fonts/sourcesanspro-blackit-webfont-v1.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

*/



@font-face {
	font-family: 'MBIdentity';
	src:url('fonts/MBIdentity-v1.eot');
	src:url('fonts/MBIdentity-v1.eot?#iefix') format('embedded-opentype'),
		url('fonts/MBIdentity-v1.ttf') format('truetype'),
		url('fonts/MBIdentity-v1.woff') format('woff'),
		url('fonts/MBIdentity-v1.svg#MBIdentity') format('svg');
	font-weight: normal;
	font-style: normal;
}

.mbLig {
	font-family: 'MBIdentity';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	
	/* Enable Ligatures ================ */
	
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga";
	font-feature-settings: "liga";

	/* Better Font Rendering =========== */
}

html, body, div, h1, h2, h3, p, ul,li, ol, canvas { margin: 0px; padding: 0px; border: 0px; font-weight: normal;}
html {
	background: #888888; /* Old browsers */
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering:optimizeLegibility;
}

body {
	font-family: "SourceSansPro";
	font-size: 17px;
	color: #bbb;
	font-weight: 200;
	/*padding: 0 10px;*/
	background-image: -moz-linear-gradient(top, #444444 0%, #888888 100%) ; /* FF3.6+ */
	background-image: /*url('../images/chrome/noise-v1.png'),*/ -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#888888)) ; /* Chrome,Safari4+ */
	background-image: /*url('../images/chrome/noise-v1.png'),*/ -webkit-linear-gradient(top, #444444 0%,#888888 100%) ; /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #444444 0%,#888888 100%) ; /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #444444 0%,#888888 100%) ; /* IE10+ */
	background-image: linear-gradient(to bottom, #444444 0%,#888888 100%) ; /* W3C */
/*	background-attachment: fixed;*/ /*fixed*/
	background-repeat: no-repeat; /*normal*/

}

canvas {
	background:black;
	opacity: 0.0;
	-webkit-transition:opacity 0.5s ease-in;
	-moz-transition:opacity 0.5s ease-in;
	-o-transition:opacity 0.5s ease-in;
	transition:opacity 0.5s ease-in;
	text-decoration: none;
}


a {
	-webkit-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-moz-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	-o-transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	transition:color 0.2s ease-in-out, background 0.2s ease-in-out;
	text-decoration: none;
}
a:link		{color:#fff;}  /* unvisited link */
a:visited	{color:#fff;}  /* visited link */
a:hover		{color:#bbb;}  /* mouse over link */
a:active	{color:#fff;}  /* selected link */

ul {
	list-style: none;
}
h1, li {
	font-weight: 100;
	font-size: 34px;
}
.loud {
	font-weight: 100;
	font-size: 26px;
}


h1 {
	color: #fff;
}

/*nav li {
	width: 100%;
	color: #444;
}*/



nav, footer, h1, h2 {
	display: block;
	width: 640px;
	margin: 10px auto;
	position: relative;
}

h1, h2 {
	margin: 0px auto;
}

h1 {
	margin-top: 10px;
}


h3 {
	font-weight: 100;
	/*text-transform: uppercase;*/
	font-size: 34px;
	margin-top: 20px;
}

h1, h3, h4 {
	letter-spacing: -1px;
}

header {
	width: auto;
	height: 60px;
	background: #aaaaaa; /* Old browsers */
}

footer {
	background: #333;
	width: 100%;
}
/*
body div {
	overflow:hidden;
	width: 640px;
	height: 480px;
	background:black;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.5);
}


body div div {
	width: auto;
	margin: 0;
	background: transparent;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
}*/

#app {
/*	width: 100px;*/
	height: auto;
	position: relative;
	top: 0;

}

#preview {
	position: relative;
	overflow: hidden;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.5);
	cursor: col-resize;
}

#preview, #title, #attribution, #app ul {
	margin: 0 auto;
	width: 640px;
}

#attribution {
	margin-bottom: 10px;
}

#mask {
	box-shadow: 0px 4px 8px rgba(0,0,0,0.25);	
}

#app input {
	display: none;
}

ul {
	list-style: none; /* Remove default numbering */
	list-style: inline;
	width: 640px;
	margin: 0 auto;
}

ul li {
	display: inline;
	margin-right: 25px;
}

ul li span {
	-webkit-transition:opacity 0.6s ease-in-out;
	-moz-transition:opacity 0.6s ease-in-out;
	-o-transition:opacity 0.6s ease-in-out;
	transition:opacity 0.6s ease-in-out;
}

ul li span {
	opacity: 0;
}

ul li:hover span {
	opacity: 1.0;
}

ul li span a {
	font-family:"New Century Schoolbook";
	font-style: italic;
	font-size: 20px;
	padding: 0 10px;
	border-radius: 20px;
	background: rgba(0,0,0,0.25);
	line-height: 50px;
	vertical-align: middle;
}


nav ol {
	counter-reset: li; /* Initiate a counter */
	list-style: none; /* Remove default numbering */
	width: 660px;
	margin-left: -10px;
	font-size: 0;
	text-align: center;
	/*background: rgba(0,0,0,0.1);
	border-radius: 10px;*/
}

nav ol li {
	margin: 0;
	position: relative;
	width: 120px;
	display: inline-block;
	/*float: left;*/
	margin-left: 10px;
	vertical-align: top;
	margin-bottom: 0.5em;
	text-align: center;
}



nav ol li div {
	margin: 0;
	width: 120px;
	height: 120px;
	overflow: visible;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -o-box;
	display: box;
	background: transparent;
	margin-bottom:5px;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-box-align: center;
	-o-box-align: center;
	box-align: center;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-box-pack: center;
	-o-box-pack: center;
	box-pack: center;
	
	box-shadow: none;	
	-webkit-transition:background 0.6s ease-in-out;
	-moz-transition:background 0.6s ease-in-out;
	-ms-transition:background 0.6s ease-in-out;
	-o-transition:background 0.6s ease-in-out;
	transition:background 0.6s ease-in-out;
}

nav ol li a:hover canvas
{
	border: 4px solid #ccc;
	margin: -4px;
	border-radius: 4px;
	border-radius: 4px;
}

nav ol li div canvas {
	position: static;
    margin: auto;
    display: block;
	z-index: 5;
	background: black;
	box-shadow: 0px 4px 8px rgba(0,0,0,0.25);
}

nav ol li a {
	font-size: 13px;
	line-height: auto;
	position: relative;
	font-weight: normal;
	display: block;
}


nav ol.numbered li a:first-child:before {
	content: counter(li);
	counter-increment: li;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	font-size: 68px;
	line-height: 120px;
	width: 120px;
	text-align: center;
	font-weight: 100;
	text-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}


nav ol li a:first-child:link		{color:#fff;}  /* unvisited link */
nav ol li a:first-child:visited	{color:#fff;}  /* visited link */
nav ol li a:first-child:hover		{color:#000;}  /* mouse over link */
nav ol li a:first-child:active	{color:#fff;}  /* selected link */

nav ol li a:link		{color:#bbb;}  /* visited link */
nav ol li a:visited		{color:#bbb;}  /* visited link */
nav ol li a:hover		{color:#222;}  /* mouse over link */
nav ol li a:active		{color:#bbb;}  /* selected link */


footer {
	margin: 0;
	padding: 0;
	margin-top: 20px;
	color: #666;
	font-size: 17px;
	padding-top: 20px;
}

footer li {
	display: inline;
}

footer li + li:before {
	content: " / ";
	padding: 0.25em;
}

footer a:link		{color:#ccc;}  /* visited link */
footer a:visited	{color:#ccc;}  /* visited link */
footer a:hover		{color:#222;}  /* mouse over link */
footer a:active		{color:#ccc;}  /* selected link */
									
p, h2 {
	font-weight: 200;
	font-size: 17px;
}

header p {
	margin: 0;
	width: auto;
	font-size: 17px;
	text-align: right;
	height: 60px;
	line-height: 60px;
	padding-right: 15px;
	display: block;
}

#introLogo {
	font-size: 31px;
	position: absolute;
	left: 20px;
	top: 14px;
	line-height: 31px;
	height: 31px;
	font-weight: normal;
}

#mask {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	/*border-right: 1px solid rgba(255,255,255,0.05);*/
	
/*
	animation: maskAnim 1s ease-in-out 2s;
	-webkit-animation: maskAnim 1s ease-in-out 2s;
*/

	-webkit-backface-visibility: hidden;

	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0, 0, 0);
}

#grabber {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100px;
	display: block;
	width: 16px;
	height: 40px;
	border-radius: 5px;
	background: #ccc;
	box-shadow: 0px 3px 4px rgba(0,0,0,0.5);
	margin-left: -8px;
	left: 50%;
	
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

/*
	animation: dividerAnim 1s ease-in-out 2s;
	-webkit-animation: dividerAnim 1s ease-in-out 2s;
*/

}

.modalBg {
	background: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	z-index: 1000;
	display: block;
}

.modalBg, .modalBg div {
	-webkit-transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-ms-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition:opacity 0.5s ease-in-out;
}

header, .modalBg div {
	background: #888888;
	background-image: -moz-linear-gradient(top, #aaaaaa 0%, #888888 100%) ; /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#888888)) ; /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(top, #aaaaaa 0%,#888888 100%) ; /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(top, #aaaaaa 0%,#888888 100%) ; /* Opera 11.10+ */
	background-image: -ms-linear-gradient(top, #aaaaaa 0%,#888888 100%) ; /* IE10+ */
	background-image: linear-gradient(to bottom, #aaaaaa 0%,#888888 100%) ; /* W3C */
}


.modalBg p, .modalBg div {
	width:80%;
	height:80%;
	max-width: 500px;
	margin: 0 auto;
	top: 10%;
	color: white;
}

.modalBg p {
	position: relative;
}

.modalBg div p {
	width: auto;
	height: auto;
	position: static;
	max-width: auto;
	margin: auto;
	top: auto;
}

.modalBg div {
	position: relative;

	box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
	border-radius: 4px;

	
	/*left: 10%;
	*/
	
	opacity: 1.0;
	
	font-weight: normal;
	overflow: hidden;
	text-align: center;
	
}

.modalBg div div {
	box-shadow: none;
	border-radius: 0;
	overflow: hidden;
	top: 0;
	left: 0;
	
	width: 100%;
	height: auto;
	max-height: 80%;
	padding: 0;
	text-align: center;
	
	position: relative;
}

.modalBg div.autoHeight {
	max-height: 80%;
	height: auto;
}

.modalBg p.advice, .modalBg p.saveButton {
	height: auto;
	margin: 5%;
	display: block;
	position: absolute;
	text-align: left;
	width: 90%;
	bottom: 0;
	right: 0;
}

.modalBg p.advice {
	top: 0;
	bottom: auto;
	text-shadow: 1px 1px 2px black;
}
.modalBg p.modalImage {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	display: block;
	position: relative;
}

.modalBg p.modalImage img {
	width: auto;
	height: auto; 
	max-width: 100%;
	max-height: 80%;
	display: block;
	margin: 0;
	background: gray;
	vertical-align: middle;
	position: relative;
}

.modalBg div.close {
	background: none;
	border-radius: 0;
	box-shadow: none;
	background: red;
	height: 44px;
	position: relative;
	height: 0;
	overflow: visible;
}

.modalBg svg {
	display: block;
	z-index: 2000;
	position: relative;
	top: -22px;
	left: -22px;
}


/* Spinner */
/* Thanks to Jason Zimdars */
/* http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit */
span.spinner {
	background: transparent;
	box-shadow: none;
	width: 34px;
	height: 34px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin: 0;
	padding: 0;
	margin-left: 0.5em;
	-webkit-transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-ms-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition:opacity: 0.5s ease-in-out;
}

span.spinner span {
	width: 8%;
	height: 26%;
	background: white;
	position: absolute;
	left: 46%;
	top: 37%;
	opacity: 0;
	-webkit-animation: fade 1s linear infinite;
	-webkit-border-radius: 50px;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);

	-moz-animation: fade 1s linear infinite;
	-moz-border-radius: 50px;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);

	-ms-animation: fade 1s linear infinite;
	-ms-border-radius: 50px;
	-ms-box-shadow: 0 0 3px rgba(0,0,0,0.2);

	-o-animation: fade 1s linear infinite;
	-o-border-radius: 50px;
	-o-box-shadow: 0 0 3px rgba(0,0,0,0.2);

	animation: fade 1s linear infinite;
	border-radius: 50px;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);

}

span.spinner span.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    
span.spinner span.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
span.spinner span.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
span.spinner span.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
span.spinner span.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
span.spinner span.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
span.spinner span.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
span.spinner span.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
span.spinner span.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
span.spinner span.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
span.spinner span.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
span.spinner span.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}


span.spinner span.bar1 {-moz-transform:rotate(0deg) translate(0, -142%); -moz-animation-delay: 0s;}    
span.spinner span.bar2 {-moz-transform:rotate(30deg) translate(0, -142%); -moz-animation-delay: -0.9167s;}
span.spinner span.bar3 {-moz-transform:rotate(60deg) translate(0, -142%); -moz-animation-delay: -0.833s;}
span.spinner span.bar4 {-moz-transform:rotate(90deg) translate(0, -142%); -moz-animation-delay: -0.75s;}
span.spinner span.bar5 {-moz-transform:rotate(120deg) translate(0, -142%); -moz-animation-delay: -0.667s;}
span.spinner span.bar6 {-moz-transform:rotate(150deg) translate(0, -142%); -moz-animation-delay: -0.5833s;}
span.spinner span.bar7 {-moz-transform:rotate(180deg) translate(0, -142%); -moz-animation-delay: -0.5s;}
span.spinner span.bar8 {-moz-transform:rotate(210deg) translate(0, -142%); -moz-animation-delay: -0.41667s;}
span.spinner span.bar9 {-moz-transform:rotate(240deg) translate(0, -142%); -moz-animation-delay: -0.333s;}
span.spinner span.bar10 {-moz-transform:rotate(270deg) translate(0, -142%); -moz-animation-delay: -0.25s;}
span.spinner span.bar11 {-moz-transform:rotate(300deg) translate(0, -142%); -moz-animation-delay: -0.1667s;}
span.spinner span.bar12 {-moz-transform:rotate(330deg) translate(0, -142%); -moz-animation-delay: -0.0833s;}

span.spinner span.bar1 {-ms-transform:rotate(0deg) translate(0, -142%); -ms-animation-delay: 0s;}    
span.spinner span.bar2 {-ms-transform:rotate(30deg) translate(0, -142%); -ms-animation-delay: -0.9167s;}
span.spinner span.bar3 {-ms-transform:rotate(60deg) translate(0, -142%); -ms-animation-delay: -0.833s;}
span.spinner span.bar4 {-ms-transform:rotate(90deg) translate(0, -142%); -ms-animation-delay: -0.75s;}
span.spinner span.bar5 {-ms-transform:rotate(120deg) translate(0, -142%); -ms-animation-delay: -0.667s;}
span.spinner span.bar6 {-ms-transform:rotate(150deg) translate(0, -142%); -ms-animation-delay: -0.5833s;}
span.spinner span.bar7 {-ms-transform:rotate(180deg) translate(0, -142%); -ms-animation-delay: -0.5s;}
span.spinner span.bar8 {-ms-transform:rotate(210deg) translate(0, -142%); -ms-animation-delay: -0.41667s;}
span.spinner span.bar9 {-ms-transform:rotate(240deg) translate(0, -142%); -ms-animation-delay: -0.333s;}
span.spinner span.bar10 {-ms-transform:rotate(270deg) translate(0, -142%); -ms-animation-delay: -0.25s;}
span.spinner span.bar11 {-ms-transform:rotate(300deg) translate(0, -142%); -ms-animation-delay: -0.1667s;}
span.spinner span.bar12 {-ms-transform:rotate(330deg) translate(0, -142%); -ms-animation-delay: -0.0833s;}

span.spinner span.bar1 {-o-transform:rotate(0deg) translate(0, -142%); -o-animation-delay: 0s;}    
span.spinner span.bar2 {-o-transform:rotate(30deg) translate(0, -142%); -o-animation-delay: -0.9167s;}
span.spinner span.bar3 {-o-transform:rotate(60deg) translate(0, -142%); -o-animation-delay: -0.833s;}
span.spinner span.bar4 {-o-transform:rotate(90deg) translate(0, -142%); -o-animation-delay: -0.75s;}
span.spinner span.bar5 {-o-transform:rotate(120deg) translate(0, -142%); -o-animation-delay: -0.667s;}
span.spinner span.bar6 {-o-transform:rotate(150deg) translate(0, -142%); -o-animation-delay: -0.5833s;}
span.spinner span.bar7 {-o-transform:rotate(180deg) translate(0, -142%); -o-animation-delay: -0.5s;}
span.spinner span.bar8 {-o-transform:rotate(210deg) translate(0, -142%); -o-animation-delay: -0.41667s;}
span.spinner span.bar9 {-o-transform:rotate(240deg) translate(0, -142%); -o-animation-delay: -0.333s;}
span.spinner span.bar10 {-o-transform:rotate(270deg) translate(0, -142%); -o-animation-delay: -0.25s;}
span.spinner span.bar11 {-o-transform:rotate(300deg) translate(0, -142%); -o-animation-delay: -0.1667s;}
span.spinner span.bar12 {-o-transform:rotate(330deg) translate(0, -142%); -o-animation-delay: -0.0833s;}

span.spinner span.bar1 {transform:rotate(0deg) translate(0, -142%); animation-delay: 0s;}    
span.spinner span.bar2 {transform:rotate(30deg) translate(0, -142%); animation-delay: -0.9167s;}
span.spinner span.bar3 {transform:rotate(60deg) translate(0, -142%); animation-delay: -0.833s;}
span.spinner span.bar4 {transform:rotate(90deg) translate(0, -142%); animation-delay: -0.75s;}
span.spinner span.bar5 {transform:rotate(120deg) translate(0, -142%); animation-delay: -0.667s;}
span.spinner span.bar6 {transform:rotate(150deg) translate(0, -142%); animation-delay: -0.5833s;}
span.spinner span.bar7 {transform:rotate(180deg) translate(0, -142%); animation-delay: -0.5s;}
span.spinner span.bar8 {transform:rotate(210deg) translate(0, -142%); animation-delay: -0.41667s;}
span.spinner span.bar9 {transform:rotate(240deg) translate(0, -142%); animation-delay: -0.333s;}
span.spinner span.bar10 {transform:rotate(270deg) translate(0, -142%); animation-delay: -0.25s;}
span.spinner span.bar11 {transform:rotate(300deg) translate(0, -142%); animation-delay: -0.1667s;}
span.spinner span.bar12 {transform:rotate(330deg) translate(0, -142%); animation-delay: -0.0833s;}



@-webkit-keyframes fade {
	from {opacity: 1.0;}
	to {opacity: 0.25;}
}
@-moz-keyframes fade {
	from {opacity: 1.0;}
	to {opacity: 0.25;}
}
@-ms-keyframes fade {
	from {opacity: 1.0;}
	to {opacity: 0.25;}
}
@-o-keyframes fade {
	from {opacity: 1.0;}
	to {opacity: 0.25;}
}
@keyframes fade {
	from {opacity: 1.0;}
	to {opacity: 0.25;}
}


@-webkit-keyframes maskAnim {
	0%		{width: 50%;}
	25%		{width: 0%;}
	75%		{width: 100%;}
	100%	{width: 50%;}
}
@-moz-keyframes maskAnim {
	0%		{width: 50%;}
	25%		{width: 0%;}
	75%		{width: 100%;}
	100%	{width: 50%;}
}
@-ms-keyframes maskAnim {
	0%		{width: 50%;}
	25%		{width: 0%;}
	75%		{width: 100%;}
	100%	{width: 50%;}
}
@-o-keyframes maskAnim {
	0%		{width: 50%;}
	25%		{width: 0%;}
	75%		{width: 100%;}
	100%	{width: 50%;}
}
@keyframes maskAnim {
	0%		{width: 50%;}
	25%		{width: 0%;}
	75%		{width: 100%;}
	100%	{width: 50%;}
}

@-webkit-keyframes dividerAnim {
	0%		{left: 50%;}
	25%		{left: 0%;}
	75%		{left: 100%;}
	100%	{left: 50%;}
}
@-moz-keyframes dividerAnim {
	0%		{left: 50%;}
	25%		{left: 0%;}
	75%		{left: 100%;}
	100%	{left: 50%;}
}
@-ms-keyframes dividerAnim {
	0%		{left: 50%;}
	25%		{left: 0%;}
	75%		{left: 100%;}
	100%	{left: 50%;}
}
@-o-keyframes dividerAnim {
	0%		{left: 50%;}
	25%		{left: 0%;}
	75%		{left: 100%;}
	100%	{left: 50%;}
}
@keyframes dividerAnim {
	0%		{left: 50%;}
	25%		{left: 0%;}
	75%		{left: 100%;}
	100%	{left: 50%;}
}

/* end spinner */



p {
	width: 640px;
	margin: 5px auto;
	color: #eee;
	font-weight: 400;
}

noscript p {
	border-radius: 4px;
	background: #d22;
	/*position: fixed; */
	top: 0;
	padding: 20px;
	font-size: 31px;
	color: #eee;
	display: block;
	letter-spacing: -1px;
	z-index: 5000;
	width: auto;
	font-weight: 200;
}

noscript, noscript img {
	width: 600px;
}

noscript {
	display: block;
	margin: 0 auto;
	margin-top: 10px;
}


body footer p {
	margin: 0 auto;
	padding: 5px 0;
}

p.identity {
	margin-top: 50px;
}


p a.mbLig {
	display: block;
	margin: 0 auto;
	color: white;
	margin-bottom: 20px;
	font-size: 31px;
}

.mbLig span {
	opacity: 0.5;
}

/* footer */

h4 a, .buttonize a, .saveButton a, .bigInput a {
	border-radius: 4px;
	box-shadow: 0px 5px 8px rgba(0,0,0,0.25);

	background: #111;

	color: #eee;
	font-size: 34px;
	display: block;
	padding: 0 2%;
}



h4 a, .buttonize a, .saveButton a, .bigInput input {
	font-size: 34px;
	display: block;	
	font-weight: 100;
	letter-spacing -1px;
	font-family: "SourceSansPro";
}

.modalBg div p.buttonize, .modalBg div p.bigInput {
	width: auto;
	position: relative;
	margin: 2%;
	padding: 0;
}

.buttonize a, .bigInput input, .bigInput a {
	font-weight: 200;
	vertical-align: middle;
	width: 100%;
	margin: 0;
	padding: 0px;
	border: none;
}


.bigInput input, .bigInput a {
	width: 49%;
	display: inline-block;
}

.bigInput input {
	background: #e8e8e8;
	color: #888;
}

.bigInput a {
	margin-left: 2%;
}


h4 a {
	padding: 20px;
/*	margin: 10px;*/
	margin: 10px auto;
	text-align: center;
	width: 600px;

}

h4 a:hover, .buttonize a:hover {
	color: white;
	background: #1b1b1b;
}

.buttonize a.fbButton {
	background: #43609C;
}

.buttonize a.fbButton:hover {
	background: #2F427C;	
}

.buttonize a.twButton {
	background: #00ACF2;
}

.buttonize a.twButton:hover {
	background: #0092CA;
}

h4 a span {
	font-size: 17px;
	letter-spacing: 0;
	font-weight: 400;
	margin: auto;
	padding: auto;
	display: block;
}

h4.lighter a {
	background: #aaa;
}

h4.lighter a:hover {
	background: #ddd;
}

h4.lighter a {
	color: white;
}

h4.lighter a span {
	color: #555;
}

h4.lighter a:hover {
	color: #666;
}



/*footer span {
	margin-top: 1em;
	display: block;
	clear: both;
}*/

p.identity {
	font-weight: 400;
	width: auto;
	margin: 20px;
	margin-top: 50px;
	text-align: center;
	font-size: 17px;
	color: #ddd;
	display: none;
}


.legal {
	margin-top: 66px;
	color: #666;
	font-size: 13px;
}



/*@media screen and (max-device-width: 700px) {*/
@media screen and (max-width: 768px) {
	body {
		width: 768px;
	}

	header p {
		margin: 0;
		padding: 0;
		width: 704px;
	}
	
	#introLogo {
		left: 64px;
	}
	
}
@media screen and (max-width: 640px) {
	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		width: auto;
		background: #444;
		background-image: -moz-linear-gradient(top, #111 0%, #888 100%) ; /* FF3.6+ */
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#888)) ; /* Chrome,Safari4+ */
		background-image: -webkit-linear-gradient(top, #111 0%,#888 100%) ; /* Chrome10+,Safari5.1+ */
		background-image: -o-linear-gradient(top, #111 0%,#444 100%) ; /* Opera 11.10+ */
		background-image: -ms-linear-gradient(top, #111 0%,#444 100%) ; /* IE10+ */
		background-image: linear-gradient(to bottom, #111 0%,#444 100%) ; /* W3C */

		margin: 0;
	}
	
	noscript, noscript img {
		width: 320px;
		height: auto;
		margin-top: 0px;
	}
	
	nav, footer, body div, h1, h2 {
		padding: 0;
		width: auto;
		margin: 0;
	}
	
	footer {
		padding-top: 20px;
	}
	#preview, #title, #attribution, #app ul {
		margin: 0;
		width: auto;
	}
	
	p.identity {
		display: block;
	}
	
	#title, #attribution {
		margin-left: 10px;
	}

	body footer p {
		width: auto;
		padding: 10px;
	}
	/*
	header {
		position: absolute;
		height: auto;
	}
	
	header svg {
		display: block;
		position: relative;
	}

	
	header p {
		display: block;
		background: #111;
		padding-top: 210px;
	}
	*/


	h1, h2 {
		font-size: 17px;
	}
	h1, h2 {
		height: 25px;
		margin: 0;
		margin-left: 10px;
		z-index: 200;
		color: #ffffff;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.8	);
		
		position: absolute;
		letter-spacing: 0;
	}
	
	h1 {
		font-weight: 600;
		top: 10px;
	}
	
	h2 {
		font-weight: 300;
		top: 30px;
	}
	
	h3 {
		font-size: 17px;
		font-weight: 400;
		position: relative;
		height: auto;
		margin: 10px;
		color: #eee;
		letter-spacing: 0;
	}
	
	h4 a {
		margin: 10px;
	}
	ul {
		position: absolute;
		display: inline-block;
		width: 32px;
		right: 0;
		top: 10px;
		margin: 0;
		z-index: 200;
	}
	
	footer ul {
		width: auto;
		top: auto;
		float: none;
	}
	
	
	ul li {
		font-family: 'MBIdentity';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	
	/* Enable Ligatures ================ */
	
	-webkit-font-feature-settings: "liga";
	-moz-font-feature-settings: "liga=1";
	-moz-font-feature-settings: "liga";
	-ms-font-feature-settings: "liga" 1;
	-o-font-feature-settings: "liga";
	font-feature-settings: "liga";


		
		text-shadow: 0 3px 0 rgba(0,0,0,0.5);
		font-size: 23px;
		margin: 0;	
		padding: 0;	
		height: 50px;
		display: block;
	}
	
	
	footer ul li {
		display: inline;
	}
	
	ul li a {
		line-height: 20px;
		vertical-align: middle;
		margin: 0;
		padding: 20px;
		display: block;
		position: relative;
		
		-webkit-transform: translate3d(0, 0, 0);
		-moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		transform: translate3d(0, 0, 0);

	}
	
	
	nav ol {
		display: block;
		padding: 0;
		margin: 0;
		text-align: center;
		width: 100%;
		list-style: none;
		list-style-type: none;
	}
	
	nav ol li {
		padding: 0;
		margin: 0;
		margin: 5px;
	}
	
	
	header {
		display: none;
	}
	
	#app {
		/*background: #111;*/
		width: 100%;
		/*background: rgba(0,0,0,0.25);
		box-shadow: 0px 4px 8px rgba(0,0,0,0.5);
		overflow: hidden; */
	}
	
	ul li span {
		display: none;
	}

	#preview {
		width: 320px;
		height: 240px;
		/*-webkit-transform: 	scale(0.5, 0.5);	*/
		/*-moz-transform: 	scale(0.5, 0.5);
		transform: 			scale(0.5, 0.5);*/
		margin: 0 auto;
		padding: 0;
		position: relative;
		z-index: 100;
	}
	
	#preview canvas {
		position: relative;
		margin: 0;
		left: 0;
		width: 320px;
		height: 240px;
	}
	
	#preview:hover:after {
		content:"";
	}
	
	#grabber {
		background: #eee;
		width: 10px;
		margin-left: -4px;
		/*left: 0%;*/
		-webkit-animation: none;
		-moz-animation: none;
		-ms-animation: none;
		-o-animation: none;
		animation: none;
	}
	
	#mask {
		/*width: 50%;*/
		box-shadow: 0px 4px 8px rgba(0,0,0,0.75);
		-webkit-animation: none;
		-moz-animation: none;
		-ms-animation: none;
		-o-animation: none;
		animation: none;
	}
	
	.buttonize a, .saveButton a, .bigInput input, .bigInput a {
		font-size: 17px;
		padding: 2%;
		font-weight: 400;
	}
	
	.bigInput input, .bigInput a {
		width: 45%;
	}
	
	.buttonize a {
		width: 96%;
	}
	

	/*
	nav ol li div canvas {
		-webkit-transform: scale3d(2.0, 2.0, 0);	
		-moz-transform: scale3d(2.0, 2.0, 0);
		transform: scale3d(2.0, 2.0, 0);
	}*/
	span.spinner {
		width: 25px;
		height: 25px;
	}
	
	span.spinner div {
		box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
	}
	
	
	@-webkit-keyframes iconAnim {
		0%		{-webkit-transform: scale3d(1.0, 1.0, 0.0);}
		50%		{-webkit-transform: scale3d(1.25, 1.25, 0.0);}
		100%	{-webkit-transform: scale3d(1.0, 1.0, 0.0);}
	}
	@-moz-keyframes iconAnim {
		0%		{-moz-transform: scale3d(1.0, 1.0, 0.0);}
		50%		{-moz-transform: scale3d(1.25, 1.25, 0.0);}
		100%	{-moz-transform: scale3d(1.0, 1.0, 0.0);}
	}
	@-ms-keyframes iconAnim {
		0%		{-ms-transform: scale3d(1.0, 1.0, 0.0);}
		50%		{-ms-transform: scale3d(1.25, 1.25, 0.0);}
		100%	{-ms-transform: scale3d(1.0, 1.0, 0.0);}
	}
	@-o-keyframes iconAnim {
		0%		{-o-transform: scale3d(1.0, 1.0, 0.0);}
		50%		{-o-transform: scale3d(1.25, 1.25, 0.0);}
		100%	{-o-transform: scale3d(1.0, 1.0, 0.0);}
	}
	@keyframes iconAnim {
		0%		{transform: scale3d(1.0, 1.0, 0.0);}
		50%		{transform: scale3d(1.25, 1.25, 0.0);}
		100%	{transform: scale3d(1.0, 1.0, 0.0);}
	}
	
	@-webkit-keyframes maskAnim {
		0%		{width: 50%;}
		25%		{width: 0%;}
		75%		{width: 100%;}
		100%	{width: 50%;}
	}
	@-moz-keyframes maskAnim {
		0%		{width: 50%;}
		25%		{width: 0%;}
		75%		{width: 100%;}
		100%	{width: 50%;}
	}
	@-ms-keyframes maskAnim {
		0%		{width: 50%;}
		25%		{width: 0%;}
		75%		{width: 100%;}
		100%	{width: 50%;}
	}
	@-o-keyframes maskAnim {
		0%		{width: 50%;}
		25%		{width: 0%;}
		75%		{width: 100%;}
		100%	{width: 50%;}
	}
	@keyframes maskAnim {
		0%		{width: 50%;}
		25%		{width: 0%;}
		75%		{width: 100%;}
		100%	{width: 50%;}
	}
	
	@-webkit-keyframes dividerAnim {
		0%		{left: 50%;}
		25%		{left: 0%;}
		75%		{left: 100%;}
		100%	{left: 50%;}
	}
	@-moz-keyframes dividerAnim {
		0%		{left: 50%;}
		25%		{left: 0%;}
		75%		{left: 100%;}
		100%	{left: 50%;}
	}
	@-ms-keyframes dividerAnim {
		0%		{left: 50%;}
		25%		{left: 0%;}
		75%		{left: 100%;}
		100%	{left: 50%;}
	}
	@-o-keyframes dividerAnim {
		0%		{left: 50%;}
		25%		{left: 0%;}
		75%		{left: 100%;}
		100%	{left: 50%;}
	}
	@keyframes dividerAnim {
		0%		{left: 50%;}
		25%		{left: 0%;}
		75%		{left: 100%;}
		100%	{left: 50%;}
	}

	footer h4 a {
		width: auto;
	}
	
	.loud {
	}
}

@media screen and (max-width: 400px) {
	.buttonize a, .saveButton a, .bigInput input, .bigInput a {
		padding: 5% 2%;
	}
}