html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
ul,ol { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
object{ outline: 0; }
strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }
a:focus, input:focus{ outline-style: none; }

body{ background: url('images/bg.gif'); color: #939699; font: 14px/18px sans-serif; text-align: center; }
a{ color: #6d8894; text-decoration: none; }
	a:hover{ text-decoration: underline; }

div.wrapper{ width: 960px; text-align: left; margin: 0 auto; }

/* Header */
div.header{ position: relative; height: 158px; }
	.header h1 a{ text-indent: -5000px; background: url('images/yamm-logo.png') 0 0 no-repeat; width: 193px; height: 106px; position: absolute; top: 55px; left: 52px; }
	.header div.about{ width: 495px; height: 106px; position: absolute; top: 52px; left: 273px; background: url('images/about-bubble.png') 0 0 no-repeat; }
		.header .about p{ font-family: "MyriadPro-regular"; font-size: 24px; line-height: 28px; padding: 22px 18px 0 38px; color: #b6bcbf; text-shadow: 0 -1px 0 rgba(0,0,0,0.8); }
	.header a.contact{ width: 135px; height: 158px; position: absolute; display: block; top: 0; right: 31px; text-indent: -5000px; background: url('images/contact-btn.png') 0 0 no-repeat; }
	
/* Home */
.home h2{ display: block; text-indent: -5000px; background: url('images/my-work.png'); height: 126px; }

.home li{ display: block; width: 960px; height: 275px; background: url('images/project-even.png') 0 0 no-repeat; overflow: auto; }
	.home li.odd{ background-image: url('images/project-odd.png'); }
	.home li.odd.last{ height: 310px; background-image: url('images/project-odd-last.png'); }
	.home li.even.last{ height: 310px; background-image: url('images/project-even-last.png'); }
	.home h3{ font-family: "MyriadPro-Bold"; font-size: 30px; text-shadow: 0 1px 0 #fff; margin-bottom: 20px; }
	
	.home li img, .home li div.info{ float: left; display: inline; }
		.home li div.info{ width: 530px; padding-top: 50px; }
		.home img{ margin: 20px 30px 0 50px; }
		
	.home li.odd img, .home li.odd div.info{ float: right; }
		.home .odd img{ margin-right: 50px; }
		
	.home li p{ text-shadow: 0 1px 0 #fff; line-height: 22px; margin-bottom: 16px; }
	
a.appstore{ display: block; text-indent: -5000px; width: 144px; height: 54px; background: url('images/appstore-btn.png') 0 0 no-repeat; }
	a.appstore:hover{ background-position: 0 -54px; }
	
/* Footer */
div.footer{ overflow: auto; margin: 40px 0; }
	.footer div.contact{ width: 560px; height: 440px; background: url('images/contact-bubble.png') left bottom no-repeat; float: left; display: inline; margin-left: 40px; }
	.footer div.connect{ width: 280px; float: left; display: inline; margin-left: 40px; }
	.footer h2{ display: block; height: 80px; background: 0 0 no-repeat; text-indent: -5000px; }
		
	.contact h2{ background-image: url('images/get-in-touch.png'); }
	.connect h2{ background-image: url('images/connect.png'); }
	
	/* Form */
	.contact form{ padding: 30px; }
		.contact div.input{ background: url('images/input-dash.png') 0 bottom repeat-x; padding: 10px 0; }
		.contact .text input{ background: none; border: 0; font-size: 14px; color: #bcbebf; padding-left: 20px; width: 350px; }
		.contact textarea{ display: block; width: 490px; height: 110px; margin: 10px 0 0 0; font-size: 14px; color: #bcbebf; background: none; border: none; }
	.contact div.submit{ position: relative; }
	.contact .submit a.btn{ width: 208px; height: 48px; display: block; background: url('images/send-btn.png') 0 0 no-repeat; text-indent: -5000px; position: absolute; right: 0; top: 20px; }
		.contact .submit a.btn:hover{ background-position: 0 -48px; }
	span.error{ color: red; padding-top: 32px; display: block; }
	span.error.sending{ color: #fff; }
	div.sent{ padding: 30px; }
		
	/* Connect social list */
	.connect .social li{ background: 0 0 no-repeat; margin-bottom: 10px; display: block; font-size: 18px; font-family: "MyriadPro-regular"; text-shadow: 0 1px 1px rgba(0,0,0,0.3); line-height: 0; padding: 14px 0; }
		.connect .social a{ color: #939699; text-decoration: none; text-indent: 36px; display: block; }
		.connect .social a:hover{ color: #fff; }
		.connect li.mail{ background-image: url('images/icon-mail.png'); }
		.connect li.twitter{ background-image: url('images/icon-twitter.png'); }
		.connect li.linkedin{ background-image: url('images/icon-linkedin.png'); }
		.connect li.skype{ background-image: url('images/icon-skype.png'); }
	
	div.tweet{ background: url('images/twitter-bubble.png') 0 0 no-repeat; padding: 20px; height: 130px; margin-top: 50px; }
		.tweet span{ font-size: 12px; display: block; padding-top: 10px; }

/* Project */
div.project{ height: 802px; background: 0 0 no-repeat; margin-top: 10px; margin-bottom: -30px; position: relative; }
	div.project.portrait{ background-image: url('images/portrait.png'); }
	div.project.landscape{ background-image: url('images/landscape.png'); }

.project h2{ font-size: 44px; font-family: "MyriadPro-bold"; color: #898d8f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); padding: 82px 0 0 0; text-indent: 70px; margin-bottom: 23px; }
.project a.appstore{ margin-top: 20px; }
.portrait div.info{ position: absolute; top: 150px; left: 75px; width: 390px; line-height: 22px; }
	.project div.project-info{ height: 290px; }
	.portrait div.screenshots{ position: absolute; width: 320px; height: 480px; top: 3px; left: 526px; }

.landscape div.info{ position: absolute; top: 150px; left: 75px; width: 270px; line-height: 22px; }
	.landscape div.screenshots{ width: 480px; height: 320px; position: absolute; left: 405px; top: 28px; }
	
.project h3{ font-family: "MyriadPro-Bold"; font-size: 30px; text-shadow: 0 1px 0 #fff; margin-bottom: 30px; color: #5b727c; }
	.others ul{ overflow: auto; }
	.landscape .others li{ display: block; width: 100%; }
	.others li{ width: 50%; float: left; display: inline; margin-bottom: 10px; }
	.others h4{ display: inline; }
	.others img{ vertical-align: -38%; margin-right: 5px; }
	.others h4 a{ color: #737678; text-shadow: 0 1px 0 rgba(255,255,255,0.5); }
		.others h4 a:hover{ color: #514a4c; text-decoration: none; }
		
div.createdby{ font-size: 11px; padding-left: 40px; padding-bottom: 10px; }