@charset "UTF-8";
/*Makeshift CSS reset since not all browers are fully HTML 5 capable yet.*/
{margin-top: 0;padding: 0;}
body{margin:0;padding:0;}
::selection{background:#ff4b33}

#headerLine
{
	height:2px;
	text-align:center;
	background-color:#ff4b33;
	width: 100%;
    margin: 0 auto;
    padding: 0px 0;
	position:fixed;
	top:0%;
	z-index:1;
}

#header
{
	min-width:1000px;
	width:100%
	height:80px;
	text-align:center;
	background-color:#e2e2e2;
	z-index:2;
}

#footer
{
	/*position:fixed;*/
	/*bottom:0%;*/
	min-width:1000px;
	background-color:#e2e2e2;
	background-position:left bottom;
	width:100%;
	min-height:100px;
	display:block;
	color:#808080;
	font:16px Myraid Pro, Arial, sans-serif;
	text-decoration:none;
	text-align:center;
}

.headerJoeYipButton
{
	text-decoration:none;
	display:inline-block;
	vertical-align:middle;
	border:none;
	font:28px Myraid Pro, Arial, sans-serif;
	color:#808080;
}
.headerJoeYipButton:hover{color:#ff4b33;}

.headerButton
{
	width:90px;
	text-decoration:none;
	display:inline-block;
	vertical-align:middle;
	border:none;
	padding:20px;
	font:16px Myraid Pro, Arial, sans-serif;
	color:#808080;
}
.headerButton:hover{color:#ff4b33;}

.headerButtonActive
{
	width:90px;
	text-decoration:none;
	display:inline-block;
	vertical-align:middle;
	border:none;
	padding:20px;
	font:16px Myraid Pro, Arial, sans-serif;
	color:#ff4b33;
}

.headerIcon
{
	border:0;
	vertical-align:middle;
	padding-left:5px;
}

.headerIconSpacer
{
	width:10px;
	height:10px;
	display:inline-block;
}

.imgsDiv{max-width:100%;white-space:nowrap}
.textDivTitle{vertical-align:top;width:400px;display:inline-block}
.textDiv{width:600px;display:inline-block}
.textDiv3Title{padding-left:50px;width:340px;display:inline-block;vertical-align:middle}
.textDiv3Text{padding-right:50px;width:345px;display:inline-block;vertical-align:middle}
.textDiv3Img{max-width:100%;display:inline-block;vertical-align:middle}

.btn
{
	width:150px;height:35px;padding-top:15px;text-align:center;vertical-align:middle;text-decoration:none;color:#fff;font:16px Myraid Pro, Arial, sans-serif;background-color:#FF4B33;display:inline-block
}

#btnSocialLinkedIn,#btnSocialFacebook,#btnSocialYouTube,#btnSocialMail,#btnSocialPhone
{
	vertical-align:middle;
	width:32px;
	height:32px;
	display:inline-block;
}
#btnSocialLinkedIn{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/linkedIn.png");}
#btnSocialLinkedIn:hover{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/linkedIn_hover.png");}
#btnSocialFacebook{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/facebook.png");}
#btnSocialFacebook:hover{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/facebook_hover.png");}
#btnSocialYouTube{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/youTube.png");}
#btnSocialYouTube:hover{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/youTube_hover.png");}
#btnSocialMail{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/mail.png");}
#btnSocialMail:hover{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/mail_hover.png");}
#btnSocialPhone{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/phone.png");}
#btnSocialPhone:hover{background-image: url("http://joeyipanimation.com/webpage/images/networkLogos/phone_hover.png");}

#btnNavLf,#btnNavRt
{
	vertical-align:middle;
	width:48px;
	height:48px;
	display:inline-block;
}
#btnNavLf{background-image: url("http://joeyipanimation.com/webpage/images/gallery/utils/navLf.png");}
#btnNavLf:hover{background-image: url("http://joeyipanimation.com/webpage/images/gallery/utils/navLf_hover.png");}
#btnNavRt{background-image: url("http://joeyipanimation.com/webpage/images/gallery/utils/navRt.png");}
#btnNavRt:hover{background-image: url("http://joeyipanimation.com/webpage/images/gallery/utils/navRt_hover.png");}

#btnLand3D,#btnLandDesign
{
	width:500px;
	height:600px;
	display:inline-block;
	max-width:50%;
}
#btnLand3D{background-image: url("http://joeyipanimation.com/webpage/images/gallery/landingBranches/landingBranch_techArt.png");}
#btnLand3D:hover{background-image: url("http://joeyipanimation.com/webpage/images/gallery/landingBranches/landingBranch_techArtHover.png");}
#btnLandDesign{background-image: url("http://joeyipanimation.com/webpage/images/gallery/landingBranches/landingBranch_designer.png");}
#btnLandDesign:hover{background-image: url("http://joeyipanimation.com/webpage/images/gallery/landingBranches/landingBranch_designerHover.png");}

.assetCard
{
	width:330px;
	height:260px;
	padding:0px;
	margin:10px;
	display:inline-block;
	text-align:left;
	text-decoration:none;
	background-color:#f0f0f0;
	color:#333;
	box-shadow: 0px 0px 15px #999999;
	/*box-shadow: 7px 7px 8px #333333;*/
}

.assetCardImg
{
	width:315px;
	height:180px;
	text-align:center;
	padding:7.5px;
}

span.c1{color:#333;font:19px Myraid Pro, Arial, sans-serif;padding-left:27.5px;line-height:28px;}
span.c2{color:#555;font:16px Myraid Pro, Arial, sans-serif;padding-left:27.5px;}
span.tab{padding-left:2em}
h3{color:#333;font:24px Myraid Pro, Arial, sans-serif;}
h4{color:#999;font:16px Myraid Pro, Arial, sans-serif;}
h5{color:#ff4b33;font:16px Myraid Pro, Arial, sans-serif;}

.frameWrapper{max-width:1200px;max-height:675px;}
.frameWrapper .relative{position:relative;}
.frameWrapper .ratio{width:100%;padding-top:56.25%}
.frameWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;}