/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video { display: block; }

mark, rp, rt, ruby, summary, time { display: inline }

@font-face {
    font-family: 'MuseoSans500';
    src: url('../museosans/MuseoSans_500-webfont.eot');
    src: url('../museosans/MuseoSans_500-webfont.eot?iefix') format('eot'),
         url('../museosans/MuseoSans_500-webfont.woff') format('woff'),
         url('../museosans/MuseoSans_500-webfont.ttf') format('truetype'),
         url('../museosans/MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
    font-weight: normal;
    font-style: normal;
    }

body, header, h1, ul, li { 
	margin: 0; 
	padding: 0;
	}

/* Site-wide properties ======================================================== */
 /* Fibonacci based heading scale ratio */
    h1{ font-size: 4.4em; font-weight: normal; }
    h2{ font-size: 2.8em; font-weight: bold; }
    h3{ font-size: 1.6em; font-weight: bold; }
    h4{ font-size: 1.2em; font-weight: bold; }
    
body { 
	width: 100%;
	font: 62.5%/1.5 MuseoSans500, helvetica, sans-serif;
	background: url(../images/bg-chip1.jpg) repeat;
	margin: 0 auto;
	}
#bgheader { 
	width: 100%;
	height: 268px;
	background: url(../images/bg-chipBanner.jpg) repeat;
	-webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,.55);
	   -moz-box-shadow: 0 2px 4px 0px rgba(0,0,0,.55);
 			box-shadow: 0 2px 4px 0px rgba(0,0,0,.55);
	position: fixed;
	top: 0;
	z-index: 10;
	}/*SPAN ALL THE WAY ( FOR THE DROP SHADOW ) */
	
.wrap {
	width: 960px;
	position: relative; 
	margin: 0 auto;
	}
#pagetitle {
	position: fixed;
	top: 268px;
	width: 100%;
	height: 74px;
	z-index: 5;
	padding-top: 12px;
	background: url(../images/bg-chip1.jpg) repeat;
	}
	
#portal {
	margin-top: .3em;
	height: 75px;
	background: url(../images/designport.png) no-repeat top center;
	z-index: 10;
	}
#about {
	margin-top: .3em;
	height: 75px;
	background: url(../images/aboutme.png) no-repeat top center;
	}
#contactinfo {
	margin-top: .3em;
	height: 75px;
	background: url(../images/contactinfo.png) no-repeat top center;
	}
/*LOGO===============================================================================*/

header{ 
	background: url(../images/splash.png) no-repeat 387px -10px;
	width: 960px; 
	height: 268px;
	display: block;
	margin: 0 auto;
	position: relative;
	}
h1#logo a:link, h1 a:visited {
	text-indent: -9999px;
	display: block;
	width: 695px;
	height: 76px;
	background: url(../images/logo-sprite8.png) no-repeat;
	position: absolute;
	z-index: 10;
	top: 60px;
	left: 36px;
	}
h1#logo a:hover, #nav a:focus, #nav a:active { 
	background: url(../images/logo-sprite8.png) no-repeat;
	background-position: bottom left;
	outline: none; 
	width: 695px;

	}
/*NAV ===============================================================================*/

#main  { 
	top: 65px;
	left: 840px;
	width: 130px;
	position: absolute;
	list-style: none;
	overflow: hidden;
	}
	
#main li{ 
	list-style: none;
	width: 106px;
	height: 21px;
	margin-bottom: 15px;
	}
#main li.social { 
	width: 130px;
	position: relative;
	margin-top: 22px;
	}
#main a { 
	display: block;
	width: 106px;
	height: 21px;
	text-decoration: none; 
	}


/*home ===============================================================================*/
#main a { 
	width: 106px;
	height: 21px;
	position: absolute;
	background-position: top left;
	background-repeat: no-repeat;
	text-indent: -9999px;
	}
#main a.facebook, #main a.twitter { 
	width: 59px;
	height: 16px;
	}
#main a.twitter { 
	right: 0;
	top: 0;
	}
li.social img { 
	margin-left: 64px;
	}
#main a:hover, #main a:focus, #main a:active { 
	background-position: bottom left;
	outline: none; 
	}
#main a.facebook:hover, #main a.facebook:focus, #main a.facebook:active, #main a.twitter:hover, #main a.twitter:focus, #main a.twitter:active { 
	background-position: bottom left;
	outline: none; 
	}
#main a.home:link, #main a.home:visited { 
	background-image: url(../images/homesprite.png);
	}
	
/*portfolio
===============================================================================*/
#main a.portfolio:link, #main a.portfolio:visited { 
	background-image: url(../images/portfoliosprite.png);
	margin-top: 4px;
	}
	
/*about ===============================================================================*/
#main a.about:link, #main a.about:visited { 
	background-image: url(../images/aboutsprite.png);
	}

/*contact ===============================================================================*/
#main a.contact:link, #main a.contact:visited { 
	background-image: url(../images/contactsprite.png);
	}
	
/*social ===============================================================================*/
#main a.facebook:link, #main a.facebook:visited { 
	background-image: url(../images/facebook.png);
	}
#main a.twitter:link, #main a.twitter:visited { 
	background-image: url(../images/twitter.png);
	}
/*second nav ===============================================================================*/
#second {
	font-size: 16px;
	}
#second ul  { 
	list-style: none;
	position: absolute;
	bottom: 40px;
	left: 32px;
	}
#second li{ 
	padding: 0 2px;
	display: inline;
	}
#second a {
    text-decoration: none;
    border: none;
    outline: none;
}

#second a, 
#second a:visited { 
	color: #000;
	}
#second a:hover,
#second a:focus,
#second a:active { 
	color: #565656;
	}


/*CONTENT ===============================================================================*/

#portfolio #content {
	margin-top: 37em;
	padding-bottom: 40px;
	}
#portfolio .piece { 
	background: none repeat scroll 0 0 #999999; /* for IE -- #999999 maps to black at 40% opacity */
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
	width: 90%;
	overflow: auto;
	margin: 0 auto 2em;
	padding: 0;
	}
#portfolio dt {
	text-transform: uppercase;
	margin-top: 0;
	padding: 0;
	display: block;
	}
#portfolio .piece dl {
	width: 264px;
	margin: 0;
	padding: 0;
	float: left;
	}
	
#portfolio .piece img { 
	width: 600px;
	height: 266px;
	float: right;
	display: block;
	margin: 0;
	padding: 0;
	}
#portfolio .piece, .piece img { 
	box-shadow: 0 1px 4px rgba(0,0,0,.75);
	}
#portfolio dt { 
	color: #CCCCCC;
	margin: 2.5em 0 0 1em;
	float: left;
	}
#portfolio dt.lh, #portfolio dd.lh {
	line-height: 2;
	}
#portfolio dd {
	color: #fff;
	margin: 2.5em 0 0 7em;
	line-height: 1.5;
	}
#portfolio dt, dd { 	
	font-size: 11.5px;
	letter-spacing: .05em;
	}
	
/*ContentBasic ===============================================================================*/
#basicbody #bgheader { 
	position: relative;
	}

#basicbody #pagetitle {
	position: relative;
	top: 0;
	}
#basicbody #BasicContent {
	width: 960px;
	position: relative;
	}
#basicbody #basic.amo {
	padding: 10px 0px 60px 30px;
	background: url(../images/anne-marie_kim4.png) 372px bottom no-repeat;
	}	
#basicbody #basicHOME {
	width: 410px;
	margin: 60px 0 130px 30px;
	position: relative;
	z-index: 5;
	}
#basicbody #HomePageArt { 
	width: 950px;
	height: 888px;
	top: -120px;
	right: 20px;
	position: absolute;
	background: url(../images/HomePageArtwork.png) 0 0 no-repeat;
	}
#basicbody dl{
	color: rgba(0,0,0,.60);
	margin: 0;
	padding: 0;
	}
#basicbody .amo dl { 
	padding-top: 30px;
	}
#basicbody dt { 
	font-size: 35px;
	line-height: 35px;
	padding: 0;
	margin: 0;
	}
#basicbody dd {
	font-size: 18px;
	line-height: 25px;
	margin: 0;
	padding: 0;
	}
#basicbody dt+dd {
	margin-bottom: 16px;
	margin-top: 4px;
	}
#basicbody p {
	font-size: 16px;
	line-height: 24px;
	color: rgba(0,0,0,.65);
	padding-right: 10px;
	margin-bottom: 24px;
	}
#basicbody #basic.amo p { 
	width: 390px;
	}

#basicbody .linebreak { 	
	height:	15px;
	width: 430px;
	margin-left: -25px;
	background: url(../images/line.png) 0 0 no-repeat;
	margin-bottom: 24px;
	margin-top: 5px;
	position: relative; 
	z-index: 15;
	}
	
/*CONTACT
===============================================================================*/
#basicbody.contact fieldset {
	margin:  2em 0 0 0;
	padding: 0;
	border: none;
	}
#basicbody.contact form {
	position: relative;
	}
#basicbody.contact form div {
	position: relative; /* positioning context for inputs and labels */
	}
#basicbody.contact form div.comments {
	position: absolute;
	top: 0;
	right: 440px;
	}
#basicbody.contact form input,
#basicbody.contact form textarea {
	color: #fff;
	}
#basicbody.contact .tab-left,
#basicbody.contact .tab-right {
	position: relative; /* positioning context for items inside */
	padding: 1em 3.5em;
	margin: 4em 0;
	text-transform: uppercase;
	overflow: auto; /* float containment */
	}
#basicbody.contact .tab-left {
	background: url(../images/contact1.png) no-repeat 0 0;
	}
#basicbody.contact .tab-right {
	background: url(../images/contact2.png) no-repeat 0 0;
	margin-left: -6px;
	}
#basicbody.contact .tab-left h2,
#basicbody.contact .tab-right h2 {
	font: normal 2.2em MuseoSans500, helvetica, sans-serif;
	color: #4D4D4D;
	}
#basicbody.contact .tab-left h2 {}
#basicbody.contact .tab-right h2 {
	text-align: right;
	margin-right: 2.7em;
	}
#basicbody.contact .tab-left dl {
	color: #fff;
	letter-spacing: 1px;
	}
#basicbody.contact .tab-left dt {font: normal 1.6em MuseoSans500, helvetica, sans-serif; float: left;}
#basicbody.contact .tab-left dd {
	font: normal 1.6em MuseoSans500, helvetica, sans-serif; 
	margin-left: 150px;
	border-left: 2px solid #fff;
	padding-left: 50px;
}
#basicbody.contact .tab-right form {}
#basicbody.contact .tab-right label {
	position: absolute;
	top: 16px;
	left: 10px;
	display: block;
	color: #fff;
	font: normal 1.4em MuseoSans500, helvetica, sans-serif;
	z-index: 10;
}
#basicbody.contact .tab-right label[for="comments"] {
	width: 400px;
}
#basicbody.contact .tab-right input[type="text"] {
	width: 355px;
	height: 50px;
	background: #a1998d;
	background: rgba(0,0,0,.15);
	border: none;
	font: normal 1.4em MuseoSans500, helvetica, sans-serif;
	margin: 0 0 1.2em 0;
	float: none;
	padding: 0 1em 0 5em;
	}
#basicbody.contact .tab-right label.oops + input[type="text"] {
	padding-left: 15em;
	width: 215px;
	}
#basicbody.contact .tab-right input[type="submit"] {
	float: right;
	margin: -.5em 1.25em 0 0;
	border: none;
	background: none;
	font: normal 1.4em MuseoSans500, helvetica, sans-serif;
	text-transform: uppercase;
	background: #4d4743;
	background: rgba(0,0,0,.6);
	color: #fff;
	padding: .40em;
	cursor: pointer;
	}
#basicbody.contact .tab-right textarea {
	font: normal 1.4em MuseoSans500, helvetica, sans-serif;
	width: 400px;
	height: 134px;
	position: absolute;
	background: rgba(0,0,0,.15);
	border: none;
	padding: 3em .8em .5em;
}

p.confirmation,
p.error {
	font: normal 1.6em MuseoSans500, helvetica, sans-serif; 
    color: #fff;
	letter-spacing: 1px;
    }

/*FOOTER
===============================================================================*/
#footer { 
	position: fixed;
	bottom: 0;
	width: 100%;
	background: url(../images/bg-chip1.jpg) repeat;
	height: 40px;
	padding-bottom: 10px;
	}
#footer p {
	height: 50px;
	width: 960px;
	text-indent: -9999px;
	background: url(../images/footer36.png) no-repeat 0 0;
	z-index: 5;
	margin: -1px auto .3em;
	}
	#basicbody #footer p {
	height: 40px;
	width: 960px;
	text-indent: -9999px;
	background: url(../images/footer36.png) no-repeat 0 0;
	z-index: 5;
	margin: -3px auto .3em;
	}
#footer.stayput { 
	position: relative;
	margin-bottom: 1em;
	}
@media screen and (min-device-width: 180px) and (max-device-width: 480px)  {

#basicbody.contact .tab-left h2,
#basicbody.contact .tab-right h2 {
	font: normal 1.3em MuseoSans500, helvetica, sans-serif;
	color: #4D4D4D;
	}
#basicbody.contact .tab-left h2 {}
#basicbody.contact .tab-right h2 {
	text-align: right;
	margin: 1.5em 6em 0 0;
	}
#basicbody.contact .tab-left dl {
	color: #fff;
	letter-spacing: 1px;
	padding-top: 1.5em;
	}
	
#basicbody.contact .tab-left dt {font: normal 1.6em MuseoSans500, helvetica, sans-serif; float: left;}
#basicbody.contact .tab-left dd {
	font: normal 1.6em MuseoSans500, helvetica, sans-serif; 
	margin-left: 150px;
	border-left: 2px solid #fff;
	padding-left: 50px;
}

#basicbody.contact .tab-left dd.tel a,
#basicbody.contact .tab-left dd.tel a:visited,
#basicbody.contact .tab-left dd.tel a:hover,
#basicbody.contact .tab-left dd.tel a:focus,
#basicbody.contact .tab-left dd.tel a:active {
    text-decoration: none !important;
    color: #fff !important;
    }
	#footer,
	#footer.stayput {
		position: static;
	}

} /* end media query */