/* global reset */

/* general */

* {padding:0;margin:0;font-family: "Myriad Web Pro", "Myriad Web", "Myriad Remote", "Helvetica", "Helvetica Neue", "Arial", sans-serif;font-size:100%;line-height:1.2em}

#updates h2, #about h2, #contact .happen .andrew, #main ul.showcase h3 a, div.portfolio_zoom div.description h3
{font-family:"serifa bt", SerifaRemote, "Tahoma", "Helvetica Neue", "Helvetica", "Arial", sans-serif}

body {background:#333 url(../images/dark_wallpaper.jpg)}
div {position:relative}
a {color:#e70;text-decoration:none;font-family:inherit}
a:hover {color:#e70;text-decoration:underline}
p {margin-bottom:1em}
.redoutline {border:1px solid red}

div.clear {clear:both;float:none;height:0px;line-height:0px;font-size:0;text-indent:-9000px}

/* something */

#body_wrapper {width:960px;margin:0 auto;background-color:#689/*#689*/;border:3px solid #000;border-top:none;background-image: url(../images/bg_tile_960.jpg)}
/* nav bar */

div.nav {position:absolute;top:5px;right:0;z-index:999;border-bottom:1px solid #fff}
div.nav ul {list-style:none}
div.nav li {float:left;display:inline}
div.nav li a {display:block;font-weight:normal;font-variant:small-caps;margin-right:35px;text-align:center;color:#246;text-decoration:none;font-size:20px;border-bottom:3px solid transparent;color:#fff;padding:3px 5px}
div.nav li.focused a {border-bottom:3px solid #fff;font-weight:bold}
div.nav li a:hover {color:#e70;background:#fff}

/* main section */

#main {height:650px}

#main .fork {position:absolute;top:60px;left:100px;width:111px;height:544px;background:url(../images/fork8.png) no-repeat}
#main .knife {position:absolute;top:60px;left:720px;width:108px;height:530px;background:url(../images/knife8.png) no-repeat}
#main .spoon {position:absolute;top:60px;left:790px;width:139px;height:536px;background:url(../images/spoon8.png) no-repeat}
#main .plate {position:absolute;top:30px;left:150px;width:636px;height:621px;background:url(../images/main_plate8.png) no-repeat}

#main .fork, #main .knife, #main .spoon, #main .plate {display:none}

#main .plate .plate_content {margin-left:40px;margin-right:50px;margin-top:50px;text-align:center}
#main .main_logo {margin-top:20px;height:125px;width:125px;margin-bottom:-10px}
#main h1 {background: no-repeat url(../images/iDumpling_text8.png);width:357px;height:65px;margin:0 auto;text-indent:-9000px}
#main .tagline {font-size:20px;color:#666}

#main h2 {font-weight:normal;letter-spacing:0.2em;font-size:10px;color:#666;text-align:center;padding-bottom:10px;width:345px;margin:50px auto 0 auto;background:url(../images/horiz_bar8.png) no-repeat 0 bottom}

#main a.prev_project, #main a.next_project {background:url(../images/portfolio_arrow_sprites.png) no-repeat top left}
#main a.prev_project {font-size:10px;padding-right:3px;position:absolute;left:50px;top:330px;background-position: 0 0;height:30px;padding-left:24px;padding-top:3px;}
#main a.next_project {font-size:10px;padding-left:3px;position:absolute;right:65px;top:330px;background-position: right -130px;height:30px;padding-right:24px;padding-top:3px}

#main ul.showcase {list-style:none;width:350px;margin:10px auto 0 auto;overflow:hidden;height:140px;position:relative}
#main ul.showcase li.slide {position:absolute;display:none;top:0;left:0}
#main ul.showcase li.current {display:block}
#main ul.showcase li.slide a.screenshot {position:absolute;;width:125px;height:125px;border:1px solid	 #e70;background-color:#e70;top:0;left:0}
#main ul.showcase li.slide div.body {position:absolute;width:210px;left:135px;top:0}
#main ul.showcase li.slide div.body h3 {font-size:16px;font-weight:normal;margin-bottom:0.4em}
#main ul.showcase li.slide div.body p.desc {font-size:14px;color:#333}
#main ul.showcase li.slide div.body p.tech {font-size:12px;color:#666}

#main ul.showcase li a.screenshot {background:url(../images/portfolio_sprites.jpg) no-repeat top left}

#main ul.showcase li.hm1 a.screenshot {background-position: 0 -129px}
#main ul.showcase li.surf1 a.screenshot {background-position: 0 -389px}
#main ul.showcase li.plumeria1 a.screenshot {background-position: 0 -259px}
#main ul.showcase li.hcw1 a.screenshot {background-position: 0 0}
#main ul.showcase li.xr1 a.screenshot {background-position: 0 -519px}


/* updates */

#updates {width:960px;height:700px}
#updates .chopsticks {position:absolute;height:135px;width:650px;top:50px;left:320px;background:url(../images/chopsticks8.png) no-repeat}
#updates .tweets {position:absolute;height:308px;width:306px;top:0px;left:80px;background:url(../images/teacup8.png) no-repeat}
#updates .product {position:absolute;height:432px;width:441px;top:280px;left:0px;background:url(../images/plate_small8.png) no-repeat}
#updates .blog {position:absolute;height:499px;width:497px;top:150px;left:430px;background:url(../images/plate_big8.png) no-repeat}

#updates .tweets .inner {margin:70px 80px 40px 45px}
#updates .product .inner {margin:50px 70px 0px 50px;height:325px}
#updates .blog .inner {margin:50px 65px 0 50px;height:380px}


#updates h2 {font-size:24px;text-align:center;font-weight:normal;}
#updates .tweets blockquote {margin-top:10px;padding:0 0px 0px 0px;position:relative;font-size:14px;color:#333;font-style:italic;}
#updates .tweets blockquote ul {list-style:none}
#updates .tweets .birdblock {text-align:center;margin-top:0.5em}
#updates .tweets .birdblock a span.twitterbird {display:block; background:url(../images/twitterbird8.png) no-repeat;width:46px;height:40px;margin:0 auto}
#updates .tweets .birdblock a span.follow {display:block;text-decoration:underline;font-size:0.9em;padding-top:20px;color:#fff;font-weight:bold}

#updates .blog p.tagline {text-align:center;font-size:1.2em}

#updates .product ul, #updates .blog ul {margin-top:1em;list-style:none}

#updates .product ul li, 
#updates .blog ul li {padding:5px 0 5px 0;font-size:16px;border-bottom:1px dotted #ccc;position:relative;clear:both;display:block}

#updates .product ul li a, 
#updates .blog ul li a {color:#333}

#updates .product ul li a span.date, #updates .blog ul li a span.date {
	background-color:#e70;
	display:block;
	color:#fff;
	float:left;clear:both;
	width:40px;
	font-size:12px;
	padding:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	text-align:left;
}

#updates .product ul li a:hover, #updates .blog ul li a:hover {text-decoration:none}


#updates .product ul li a span.date span.day, #updates .blog ul li a span.date span.day {font-weight:bold}
#updates .product ul li a span.date span.mon, #updates .blog ul li a span.date span.mon {padding-left:0.2em}
#updates .product ul li a span.date span.year, #updates .blog ul li a span.date span.year {display:block;}

#updates .product ul li a span.title {float:right;width:260px}
#updates .blog ul li a span.title {float:right;width:320px;}

#updates .product ul li:hover span.title,
#updates .blog ul li:hover a span.title {text-decoration:underline;color:#e70}

/* about */

#about {background: url(../images/dumpling_plate8.png) no-repeat -250px 0;width:960px;height:650px;overflow:hidden}
#about .inner {background:url(../images/black50.png);background:rgba(0,0,0,0.5);padding:50px;color:#fff;position:absolute;top: 50px;left:450px;padding-right:50px;width:420px;
-webkit-border-top-left-radius:2em;
-webkit-border-bottom-left-radius:2em;
-moz-border-radius-topleft:2em;
-moz-border-radius-bottomleft:2em;
}
#about h2 {font-size:22px;text-align:left;margin:1em 0;font-weight:normal}
#about p {margin-bottom:1em;line-height:1.5em}

#about .dumpling_story {position:absolute;top:115px;left:-650px;width:300px;background:url(../images/black50.png);background:rgba(0,0,0,0.5);padding:2em;color:#fff;
-webkit-border-top-right-radius:1em;
-webkit-border-bottom-right-radius:1em;
-moz-border-radius-topright:1em;
-moz-border-radius-bottomright:1em;
}

/* contact */

#contact {height:900px;margin-bottom:100px;background:url(../images/napkin.jpg) no-repeat 452px 52px;margin-top:-70px}

#contact .happen {text-align:left;padding-top:60px;padding-left:70px;color:#fff;width:480px}
#contact .happen .question {font-size:1.5em;margin-bottom:0}
#contact .happen h2 {font-size:3em;font-weight:normal;margin-bottom:0.5em}
#contact .happen .andrew {font-size:2em;line-height:1.5em}
#contact .happen .titles {font-size:1.2em;color:#eee}
#contact .happen .blurb {width:90%;font-size:1.1em}
#contact .happen label {font-weight:bold;color:#fff}
#contact .happen .location {font-size:1em;color:#eee;margin-top:1em}
#contact .happen .location .social {padding-top:5px;display:block}

#contact .happen .location a.friendly {background-color:#fff;padding:3px;-webkit-border-radius:2px;-moz-border-radius:2px}
#contact .napkin {position:absolute;top:120px;left:550px;height:600px;width:350px}
#contact .napkin form {}
#contact .napkin form input.text, #contact .napkin form textarea {border:1px dotted #fff;background-color:transparent;background-image:url(../images/white20.png);width:100%;font-size:20px;font-family:"Handwriting - Dakota", sans-serif;color:#339;padding:0.1em;
-webkit-border-radius:3px;
-moz-border-radius:3px;

}
#contact .napkin .result {background-color:#fff;padding:20px;text-align:center;-webkit-border-radius:3px;-moz-border-radius:3px}
#contact .napkin form input.text:focus, #contact .napkin form textarea:focus {border:1px solid #fff;background:url(../images/white80.png);background:rgba(255,255,255,0.8)}
#contact .napkin form input.text:hover, #contact .napkin form textarea:hover {border:1px solid #fff;background:url(../images/white80.png);background:rgba(255,255,255,0.8)}
textarea {overflow:auto}
#contact .napkin form button {color:#fff;padding:0.5em 2em;border:2px solid #333;background:#090;background:rgba(0,128,0,0.8);
-webkit-border-radius:3px;
-moz-border-radius:3px;}
#contact .napkin form button:hover {color:#fff;background-color:transparent;background:#090}

#contact .happen .skills {width:300px;font-size:0.8em;margin-top:30px}
#contact .happen .skills h3 {font-size:18px;margin-bottom:1em;font-weight:normal}


/* footer */

#footer {text-align:center;margin:1em 0 200px;color:#fff}

/* portfolio popups */

div.portfolio_zoom {width:400px;text-align:center;font-size:0.8em}
div.portfolio_zoom img.screenshot {width:100%;border:2px solid #333}
div.portfolio_zoom div.description {text-align:left;margin-bottom:2em}
div.portfolio_zoom div.description h3 {font-weight:bold;font-size:1.5em;margin-bottom:0.5em}
div.portfolio_zoom .caption {font-size:0.9em;font-weight:bold;text-align:left;margin-bottom:2em;color:#333}


/* noscript */
div.noscript_header {background-color:red;color:white;font-weight:normal;font-size:16px;padding:1em;text-align:center;border-bottom:3px solid white;width:100%;z-index:99999}
div.noscript_header a {text-decoration:underline;font-weight:bold;color:white}


/*------ jqpop -------------*/
.jqpop_backdrop 
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	float:none;
	clear:both;
	background-color:#000;
	z-index:9000;
	opacity:0.5;
	filter:Alpha(Opacity=50)
}
.jqpop_wrapper 
{
	position:absolute;
	top:50%;
	left:50%;
	z-index:9999;
	padding:20px 20px;
	margin:0;
	float:none;
	clear:both;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
	-moz-box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
	-webkit-box-shadow:2px 2px 20px rgba(0,0,0,0.8);
	background:#fff;
	border:none;
}

.jqpop_close,
.jqpop_close:link,
.jqpop_close:visited,
.jqpop_close:hover,
.jqpop_close:active
{
	z-index:9999;
	position:absolute;
	top:-15px;
	right:-15px;
	border:none;
	text-decoration:none;
	margin:0;
	padding:0;
	height:30px;
	width:30px;
	background-color:transparent;
	background-image:url(../images/closebox.png);
	cursor:pointer;
}

iframe.jqpop_bgiframe 
{
	background-color:transparent;
	filter:Alpha(Opacity=0);
	border:none;
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	z-index:-1;
	overflow:hidden
}

div.jqpop_bgiframe 
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:transparent
}