/* --- WelcomeToTheSky --- */


/* ---------------------- */
/* --- General Styles --- */
/* ---------------------- */

body {
	background: #1D1D1D url(../img/bg.jpg);font-family: Lucida Grande, Arial, sans-serif;font-size: 12px;text-shadow: 1px 1px 1px #fff;
}
.main {
	margin: 0 auto;width: 940px;
}
a {
	border-bottom: 3px double #f8f8f8;color: #FEA800;padding: 2px;text-decoration: none;-webkit-transition: all 0.4s ease;
}
a:hover {
	border-bottom: 3px double #b42e0f;color: #b42e0f;
}
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}



/* ------------------------- */
/* --- BorderPage Styles --- */
/* ------------------------- */

#border-page {
	filter: alpha(opacity=50);opacity: 0.5;position: relative;z-index: 999;
}
#border-page li {
	background: #000;position: fixed;
}
#border-page li.top {
	height: 10px;left: 0;top: 0;width: 100%;
}
#border-page li.bottom {
	bottom: 0;height: 10px;left: 0;width: 100%;
}
#border-page li.left {
	height: 100%;left: 0;top: 0;width: 10px;
}
#border-page li.right {
	height: 100%;right: 0;top: 0;width: 10px;
}
.top-banner,.bottom-banner {
	margin: 0 auto;width: 960px;
}
.top-banner {
	background: url(../img/banner.jpg) repeat;height: 25px;
}
.bottom-banner {
	background: url(../img/banner.jpg) repeat;height: 45px;
}



/* ------------------- */
/* --- Typo Styles --- */
/* ------------------- */

h1 {
	font-family: "madawaska-1","madawaska-2",Arial,Verdana, sans-serif;font-size: 10em;font-weight: bold;line-height: 2em;position: relative;z-index: 999;
}
h2 {
	font-family: "Georgia","Cambria",Times New Roman,Times,serif;
}
h2 {
	color: #444;font-size: 2.3em;line-height: 1.5em;
}
h2 a {
	font-style: italic;text-decoration: none;
}
h3 {
	color: #8f1501;font-family: "madawaska-1","madawaska-2",Arial,Verdana, sans-serif;font-size: 1.4em;line-height: 1.9em;
}
h3 strong {
	color: #838383;	
}
h3 i {
	color: #8ea8b4;font-size: 0.8em;font-style: italic;
}
h4 {
	color: #838383;font-family: "Georgia","Cambria",Times New Roman,Times,serif;font-size: 2em;font-style: italic;font-weight: normal;line-height: 1em;margin-top: 20px;text-align: right;width: 100%;
}
h4 b {
	color: #d0d0d0;font-weight: normal;
}
p {
	color: #313131;font-family: "republic-web-1","republic-web-2",Georgia,serif;font-size: 1.1em;line-height: 1.6em;margin-bottom: 8px;text-indent: 1.3em;
}
span.amp {
	font-family: Baskerville, Palatino, "Book Antiqua", serif;font-style: italic;
}
h3 + p {
	margin-bottom: 0;
}
h1 + p,h2 + p,h3 + p,h4 + p {
	text-indent: 0;
}
p + a {
	float: right;
}
p .amp {
	font-size: 1.2em;
}
q {
	font-style: italic;
}
html body .quote-author {
	display: block;float: right;font-size: 0.4em;
}
.small {
	font-size: 0.7em;line-height: 1.6em;
}
p.sketch {
	color: #8ea8b4;filter: alpha(opacity=0);font-family: "swister-regular-1","swister-regular-2", serif;opacity: 0;position: absolute;-webkit-transition: all 0.4s ease;
}



/* ---------------------- */
/* --- Content Styles --- */
/* ---------------------- */

.container_12 {
	position: relative;
}
.container {
	margin: 0 auto;width: 960px;
}
.content {
	background: #f8f8f8;padding: 20px 0;position: relative;
}
.intro {
	border-bottom: 1px solid #d0d0d0;border-top: 5px solid #d0d0d0;padding: 20px 0 45px;
}
.interlude {
	border-bottom: 1px solid #d0d0d0;border-top: 1px solid #d0d0d0;padding: 20px 0 15px;margin: 30px 0 0;
}
html body .contact-interlude {
	padding: 100px 0 15px;margin: 100px 0 30px;
}
html body .contact-us-button {
	background: #fea800;border: 0;color: #fff;font-family: "madawaska-1","madawaska-2";font-size: 1.2em;font-style: normal;font-weight: bold;text-decoration: none;text-shadow: 0 0 0;z-index: 2;-webkit-border-radius: 160px;-moz-border-radius: 160px;-moz-transition: all 0.5s linear;-webkit-transition: all 0.3s linear;-webkit-animation-name: contactBreath;-webkit-animation-duration: 4s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-webkit-transform: scale(1) rotate(0deg);position: absolute;height: 180px;left: 50%;line-height: 180px;margin-left: -90px;text-align: center;margin-top: -190px;width: 180px;
}
.contact-us-button-ie {
	display: none;
}
html body .contact-us-button:hover {
	background: #00827b;border-bottom: 0;color: #fff;z-index: 5;-moz-transform: scale(1.5) rotate(360deg);-webkit-animation-name: none;-webkit-transform: scale(1.5) rotate(-360deg);
}
html body .contact-us-button:active,.contact-us-button:focus {
	background: #f74300;outline: none;
}
@-webkit-keyframes contactBreath {
	0% {
		-webkit-transform: scale(1);
	}
	40% {
		-webkit-transform: scale(1);
	}
	45% {
		-webkit-transform: scale(1.2);
	}
	50% {
		-webkit-transform: scale(1);
	}
	55% {
		-webkit-transform: scale(1.2);
	}
	60% {
		-webkit-transform: scale(1);
	}
	100% {
		-webkit-transform: scale(1);
	}
}



/* ----------------------- */
/* --- Projects Styles --- */
/* ----------------------- */

.pic {
	background: #666;border: 5px solid #d0d0d0;display: block;height: 90px;padding: 0;position: relative;margin-top: 25px;width: 270px;-moz-border-radius: 6px;-webkit-border-radius: 6px;-webkit-transition: all 0.4s ease;
}
a.pic:hover {
	border: 5px solid #b42e0f;-moz-transform: scale(1.05);-webkit-transform: scale(1.05);
}
a.pic span {
	background: #000;background: rgba(0,0,0,0.7);color: #fff;display: block;filter: alpha(opacity=0);font-size: 1.3em;height: 90px;line-height: 90px;opacity: 0;position: absolute;text-align: center;text-shadow: 0 0 0;width: 270px;-webkit-transition: all 0.4s ease;
}
a.pic:hover span {
	filter:alpha(opacity=100);opacity: 1;
}
.squaro-project {
	background: url(../img/projects/squaro.jpg) no-repeat;
}
.myfasty-project {
	background: url(../img/projects/myfasty.jpg) no-repeat;
}
.wtts-project {
	background: url(../img/projects/wtts.jpg) no-repeat;
}
.toh-project {
	background: url(../img/projects/toh.jpg) no-repeat;
}
.jailartisan-project {
	background: url(../img/projects/jailartisan.jpg) no-repeat;
}
.arthemia-project {
	background: url(../img/projects/arthemia.jpg) no-repeat;
}
.appliiphone-project {
	background: url(../img/projects/appliiphone.jpg) no-repeat;
}
.magnetikband-project {
	background: url(../img/projects/magnetikband.jpg) no-repeat;
}
.limonetik-project {
	background:  url(../img/projects/limonetik.jpg) no-repeat;
}
.ril-project {
	background: url(../img/projects/ril.jpg) no-repeat;
}


/* ---------------------- */
/* --- Various Styles --- */
/* ---------------------- */

.tb {
	border: 10px solid #a6a6a6;-moz-border-radius-topleft: 6px;-moz-border-radius-topright: 6px;-webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px;
}
.legend {
	background: #a6a6a6;color: #fff;display: block;font-size: 0.8em;text-align: right;text-shadow: 0 0 0;width: 100%;-moz-border-radius-bottomleft: 6px;-moz-border-radius-bottomright: 6px;-webkit-border-bottom-left-radius: 6px;-webkit-border-bottom-right-radius: 6px;
}
.legend i {
	display: block;font-style: normal;padding: 0px 10px 5px;
}

.intro-sketch {
	font-size: 0.7em;right: 0;-moz-transform: rotate(4deg);-webkit-transform: rotate(4deg);
}
.intro:hover .intro-sketch {
	filter: alpha(opacity=100);opacity: 1;
}
.bottom-quote i {
	font-style: normal;opacity: 1;-webkit-transition: all 0.4s ease;
}
.bottom-quote:hover i {
	opacity: 0.1;
}

/* ---------------------- */
/* --- Contact Styles --- */
/* ---------------------- */

#contact {
	background: rgba(0,0,0,0.6);color: #fff;display: block;padding: 20px;text-shadow: 0 0 0;
}
html body #contact h2 {
	color: #f8f8f8;font-style: italic;margin-bottom: 20px;
}
html body #contact p {
	color: #d0d0d0;font-family: "republic-web-1","republic-web-2",Georgia,serif;font-size: 1.1em;
}
#contact a {
	border: 0;font-size: 1.3em;
}


/* ----------------------------- */
/* --- Welcome in the Clouds --- */
/* ----------------------------- */

.cloud1 {
	background: url(../img/cloud1.png) no-repeat;height: 47px;position: absolute;width: 76px;-webkit-animation-name: cloud1Animation;-webkit-animation-duration: 8s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-moz-transform: scale(0);
}		
.cloud2 {
	background: url(../img/cloud2.png) no-repeat;height: 47px;position: absolute;width: 76px;-webkit-animation-name: cloud2Animation;-webkit-animation-duration: 8s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-moz-transform: scale(0);	
}
.cloud3 {
	background: url(../img/cloud3.png) no-repeat;height: 47px;position: absolute;width: 76px;-webkit-animation-name: cloud3Animation;-webkit-animation-duration: 10s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;-moz-transform: scale(0);
}

@-webkit-keyframes cloud1Animation {
	0% {
		left: 240px;top: 88px;opacity: 1;-webkit-transform: scale(0);
	}
	10% {
		left: 240px;top: 90px;-moz-transform: scale(0);-webkit-transform: scale(0);
	}
	20% {
		left: 240px;top: 10px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
	40% {
		left: 90px;opacity: 1;top: 10px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
	50% {
		left: 0px;opacity: 0;top: 10px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
	100% {
		left: 0px;opacity: 0;top: 10px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
}
		
@-webkit-keyframes cloud2Animation {
	0% {
		right: 304px;top: 88px;opacity: 1;-webkit-transform: scale(0);
	}
	50% {
		right: 304px;top: 88px;opacity: 1;-webkit-transform: scale(0);
	}
	60% {
		right: 304px;top: 90px;-moz-transform: scale(0);-webkit-transform: scale(0);
	}
	70% {
		right: 304px;top: 20px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
	90% {
		right: 154px;opacity: 1;top: 20px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
	100% {
		right: 64px;opacity: 0;top: 20px;-moz-transform: scale(1);-webkit-transform: scale(1);
	}
	
}

@-webkit-keyframes cloud3Animation {
	0% {
		right: 490px;top: 88px;opacity: 1;-webkit-transform: scale(0);
	}
	60% {
		right: 490px;top: 88px;opacity: 1;-webkit-transform: scale(0);
	}
	70% {
		right: 490px;top: 90px;-webkit-transform: scale(0);
	}
	75% {
		right: 490px;top: 60px;-webkit-transform: scale(0.5);z-index: 0;
	}
	90% {
		right: 380px;opacity: 1;top: 60px;-webkit-transform: scale(0.5);z-index: 9999;
	}
	100% {
		right: 350px;opacity: 0;top: 60px;-webkit-transform: scale(0.5);
	}
	
}