@charset "UTF-8";

/************************************/
/************************************/
/********** GLOBAL > FONTS **********/
/************************************/
/************************************/

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

/************************************/
/************************************/
/********** GLOBAL > STYLE **********/
/************************************/
/************************************/

html {
	font-size:100%;
}
body {
	font-size:1em;
	background:url(../images/bg.gif) repeat;
}
html, input, textarea, select, button {
	-webkit-font-smoothing:antialiased;
}
h1, h2, h3, h4, h5, h6, ul, p, a, span, blockquote, label, div, table {
	font-family:'serif';
}
h1, h2, h3, h4, h5, h6  {
	font-family:'mactyperegular';
	font-weight:normal;
}
ul,
li {
	padding:0;
}
a,
a:focus {
	color:#000;
	outline:0;
}
a .label {
	position:absolute;
	font-size:0rem;
	line-height:0rem;
}
* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
.hidden {
	position:absolute;
	top:-1000px;
	left:-10000px;
}
.break {
	display:block;
	width:100%;
	border-bottom:double 3px #000;
	margin-bottom:1rem;
	padding-top:1rem;
}

/********** INLINE **********/

.inline li {
	display:inline-block;
	vertical-align:middle;
}
.inline a {
	display:inline-block;
	width:inherit;
	line-height:1em;
}

/***********************************/
/***********************************/
/********** GLOBAL > MAIN **********/
/***********************************/
/***********************************/

main {
	padding:2rem;
	background:#FFF;
	border:solid 1px #000;
}
@media (min-width:0px) {
	body {
		margin:1rem;
	}
	.title {
		font-size:2rem;
	}
}
@media (min-width:480px) {
	
}
@media (min-width:760px) {
	.title {
		font-size:4rem;
	}
	body {
		margin:4rem;
	}
}
@media (min-width:1000px) {
	
}
@media (min-width:1200px) {
	
}

/*************************************/
/*************************************/
/********** GLOBAL > HEADER **********/
/*************************************/
/*************************************/

header {
	text-align:center;
	border:double 4px #000;
	background:url(../images/bg2.gif) repeat;
	padding:1rem;
	margin-bottom:1rem;
}
header > * {
	display:inline;
}
header blockquote {
	background:#FFF;
}
@media (min-width:0px) {
	header h1 {
		font-size:1.5rem;
	}
}
@media (min-width:480px) {
	header h1 {
		font-size:3rem;
	}
}
@media (min-width:760px) {
	
}
@media (min-width:1000px) {
	
}
@media (min-width:1200px) {
	
}

/*************************************/
/*************************************/
/********** GLOBAL > FOOTER **********/
/*************************************/
/*************************************/

footer {
	text-align:center;
	padding-top:1rem;
}
.version {
	font-size:.75rem;
	text-align:right;
}

/*****************************************/
/*****************************************/
/********** GLOBAL > NAVIGATION **********/
/*****************************************/
/*****************************************/

nav {
	text-align:center;
	border:solid 1px #000;
	background:#FFF;
	padding:1rem;
	margin:1rem 0;
}
nav a {
	display:inline-block;
	margin:1rem;
}
nav .inactive {
	cursor:default;
	opacity:0;
}

/************************************/
/************************************/
/********** GLOBAL > ERROR **********/
/************************************/
/************************************/

#alert {
	position:fixed;
	z-index:10;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:none;
	background:url(../images/bg.gif) repeat;
}
#alert.active {
	display:block;
}
#alert #tooltip {
	position:fixed;
	z-index:100;
	top:40%;
	left:50%;
	width:240px;
	margin-left:-120px;
	border-radius:4px;
	border:double 3px #000;
	background:#FFF;
	box-shadow:4px 4px 0 0 #000;
	text-align:center;
}
#alert #tooltip .content {
	padding:1rem;
}
#alert #tooltip .content > * {
	font-family:'mactyperegular';
	font-weight:normal;
}
#alert #tooltip .content .message {
	display:inline-block;
	margin-bottom:1rem;
}
#loading {
	display:block;
	height:6px;
	border:solid 1px #000;
	width:100%;
	overflow:hidden;
}
#loading .progressbar {
	display:block;
	height:6px;
	width:0;
	background:url(../images/loading.gif) repeat;
}
#alert.error #bomb,
#alert.error .button {
	display:inline-block;
}
#alert.error #loading {
	display:none;
}
#alert.loading #bomb,
#alert.loading .button {
	display:none;
}
#alert.loading #loading {
	display:block;
}
#alert.ending #bomb,
#alert.ending #loading {
	display:none;
}
.button {
	font-family:'mactyperegular';
	font-weight:normal;
	display:inline-block;
	padding:8px;
	color:#000;
	text-decoration:none;
	border:solid 1px #000;
	border-radius:4px;
	margin:0 3px 3px 0;
	box-shadow:4px 4px 0 0 #000;
}
.button:hover {
	margin:3px 0 0 3px;
	box-shadow:1px 1px 0 0 #000;
}

/**************************************/
/**************************************/
/********** GLOBAL > PREVIEW **********/
/**************************************/
/**************************************/

#preview {
	text-align:center;
}
.preview {
	display:block;
	margin:0 auto;
	max-width:600px;
	text-align:center;
	border:double 6px #000;
	background:#FFF;
}
.preview > * {
	display:block;
	margin:0;
}
.preview .title {
	font-family:'mactyperegular';
	font-weight:normal;
	padding:1rem;
}
.preview img {
	width:100%;
	padding:0 1rem;
}
.preview .message {
	font-size:1.5rem;
	padding:1rem;
}
.preview .mentions {
	width:100%;
	text-align:right;
	font-size:.75rem;
	padding:1rem;
}
.preview .mentions p {
	margin:0;
}

/************************************/
/************************************/
/********** GLOBAL > INDEX **********/
/************************************/
/************************************/

#about {
	border-bottom:double 3px #000;
	margin-bottom:1rem;
}
#about h2 {
	margin-bottom:0;
}
#about h3 {
	margin-top:.5rem;
}
#how {
	border-top:double 3px #000;
	margin-top:1rem;
}
#how .launcher {
	text-align:center;
}
#ad {
	text-align:center;
	background:url(../images/bg2.gif) repeat;
}
#ad video {
	display:block;
	margin:0 auto;
	padding:5%;
	width:90%;
	max-width:480px;
	height:auto;
}

/**************************************/
/**************************************/
/********** GLOBAL > CLIPART **********/
/**************************************/
/**************************************/

#selectClipart {
	text-align:center;
}
#selectClipart li {
	margin:1rem;
}
#selectClipart input[type=radio] {
	display:none;
}
#clipartList img {
	border:solid 1px #000;
	margin:0 3px 3px 0;
	box-shadow:4px 4px 0 0 #000;
}
#clipartList img:hover,
#clipartList input[type=radio]:checked + a > img {
	margin:3px 0 0 3px;
	box-shadow:-4px -4px 0 0 #000;
}

/***********************************/
/***********************************/
/********** GLOBAL > TYPE **********/
/***********************************/
/***********************************/

#selectTxt input,
#selectTxt textarea {
	width:100%;
}

/***********************************/
/***********************************/
/********** GLOBAL > SEND **********/
/***********************************/
/***********************************/

#formToSend input,
#formToSend textarea {
	width:100%;
}
#formToSend .submit {
	text-align:center;
}
#download_btn {
	display:none;
}
#download_btn.active {
	display:block;
}

/*****************************************/
/*****************************************/
/********** GLOBAL > ANIMATIONS **********/
/*****************************************/
/*****************************************/

.blink_text {
-webkit-animation-name: blinker;
-webkit-animation-duration: .25s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;

-moz-animation-name: blinker;
-moz-animation-duration: .25s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;

 animation-name: blinker;
 animation-duration: .25s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@-webkit-keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

@keyframes blinker {  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
 }

/***********************************/
/***********************************/
/********** GLOBAL > FORM **********/
/***********************************/
/***********************************/

fieldset {
	border:none;
	margin:0;
	padding:0;	
}
input,
textarea,
button,
select {
	font-family:'serif';
	font-size:1rem !important;
	border:solid 1px #000;
	color:#000;
	background:#FFF;
	padding:.5rem;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-appearance:none;
	-webkit-border-radius:0;
}
input[type=submit], button {
	cursor:pointer;
	text-transform:uppercase;
}
input[type=submit]:hover, button:hover {
	color:rgb(255,255,255);
	background:rgb(31,185,203);
}
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
	color:rgb(164,164,165);
	text-shadow:0em 0em 0em rgb(155,155,155);
}
form img {
	display:inline-block;
}
input[type=radio],
input[type=checkbox] {
	height:8px;
	width:8px;
	padding:2px;
	background:#FFF;
	border:solid 1px #000;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
	background:#000;
	border:solid 1px #000;
}

/*****************************************/
/*****************************************/
/********** GLOBAL > RESPONSIVE **********/
/*****************************************/
/*****************************************/

@media screen and (max-device-width: 480px) {
	body {
		-webkit-text-size-adjust:none;
	}
}