@charset "UTF-8";
/* CSS Document */

html{
	background:url(images/line.gif) top repeat-x, url(images/jh.png) center bottom no-repeat fixed;
}
body{
	margin:0;
	padding:0;
	font-family:Times, serif;
	color:#333333;
	font-size:small;
}

#container{
	width:960px;
	margin:0 auto;
	position:relative;
	padding:1px;
}

a:link,a:visited{ color:#006; }
a:hover, a:active{ color:#666; }

.green{ color:#093; }
.red{ color:#C00; }
.clear{ clear:both; }
.hide, #portfolio .brief{display:none;}

.title{ display:none; }

#rtnMsg{
	width:100%;
	padding:3px 0;
	background:#f3f3f3;
	border-bottom:#cccccc;
	text-align:center;
	margin:0 0 10px 0;
}

#navigation{
		list-style:none;
		font-family:'Raleway',Verdana, Geneva, sans-serif;
		color:#939393;
		font-size:48px;
		text-transform:uppercase;
		margin:0;
		padding:0;
		margin-top:35px;
		margin-left:20px;
}
#navigation li{
	margin:0 0 10px 0;
	padding:0;
}
#navigation a:link,#navigation a:visited{
	text-decoration:none;
	color:#939393;
}
#navigation a:hover,#navigation a:active{
	color:#000000;
}
#navigation .current_page a:link,#navigation .current_page a:visited{
	color:#333333;
}

#drag_here{
	width:345px;
	height:211px;
	z-index:-1;
	display:block;
	position:absolute;
	background:url(images/drag_here.png) no-repeat;
	top:215px;
	right:160px;
}

#portfolio{
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	width:431px;
	right:20px;
	top:30px;
}
#portfolio li{
	width:50px;
	height:50px;
	float:left;
	margin:5px;
	padding:0;
	z-index:60;
}
#portfolio a:link,#portfolio a:visited{
	display:block;
	text-indent:-5000px;
	background-repeat:no-repeat;
	background-position:0 0;
	border:1px solid #cccccc;
	height:50px;
	width:50px;
}
#portfolio a:hover,#portfolio a:active{
	border:1px solid #000;
}

#portfolio li.screen_01 a{ background-image:url(images/thumbs/thumb_01.png); }
#portfolio li.screen_02 a{ background-image:url(images/thumbs/thumb_02.png); }
#portfolio li.screen_03 a{ background-image:url(images/thumbs/thumb_03.png); }
#portfolio li.screen_04 a{ background-image:url(images/thumbs/thumb_04.png); }
#portfolio li.screen_05 a{ background-image:url(images/thumbs/thumb_05.png); }
#portfolio li.screen_06 a{ background-image:url(images/thumbs/thumb_06.png); }
#portfolio li.screen_07 a{ background-image:url(images/thumbs/thumb_07.png); }
#portfolio li.screen_08 a{ background-image:url(images/thumbs/thumb_08.png); }
#portfolio li.screen_09 a{ background-image:url(images/thumbs/thumb_09.png); }
#portfolio li.screen_10 a{ background-image:url(images/thumbs/thumb_10.png); }
#portfolio li.screen_11 a{ background-image:url(images/thumbs/thumb_11.png); }
#portfolio li.screen_12 a{ background-image:url(images/thumbs/thumb_12.png); }
#portfolio li.screen_13 a{ background-image:url(images/thumbs/thumb_13.png); }
#portfolio li.screen_14 a{ background-image:url(images/thumbs/thumb_14.png); }
#portfolio li.screen_15 a{ background-image:url(images/thumbs/thumb_15.png); }
#portfolio li.screen_16 a{ background-image:url(images/thumbs/thumb_16.png); }
#portfolio li.screen_17 a{ background-image:url(images/thumbs/thumb_17.png); }
#portfolio li.screen_18 a{ background-image:url(images/thumbs/thumb_18.png); }
#portfolio li.screen_19 a{ background-image:url(images/thumbs/thumb_19.png); }
#portfolio li.screen_20 a{ background-image:url(images/thumbs/thumb_20.png); }
#portfolio li.screen_21 a{ background-image:url(images/thumbs/thumb_21.png); }

#monitor{ background-repeat:no-repeat; background-position:115px 62px; }
#monitor.screen_01{ background-image:url(images/screen/screen_01.jpg); }
#monitor.screen_02{ background-image:url(images/screen/screen_02.jpg); }
#monitor.screen_03{ background-image:url(images/screen/screen_03.jpg); }
#monitor.screen_04{ background-image:url(images/screen/screen_04.jpg); }
#monitor.screen_05{ background-image:url(images/screen/screen_05.jpg); }
#monitor.screen_06{ background-image:url(images/screen/screen_06.jpg); }
#monitor.screen_07{ background-image:url(images/screen/screen_07.jpg); }
#monitor.screen_08{ background-image:url(images/screen/screen_08.jpg); }
#monitor.screen_09{ background-image:url(images/screen/screen_09.jpg); }
#monitor.screen_10{ background-image:url(images/screen/screen_10.jpg); }
#monitor.screen_11{ background-image:url(images/screen/screen_11.jpg); }
#monitor.screen_12{ background-image:url(images/screen/screen_12.jpg); }
#monitor.screen_13{ background-image:url(images/screen/screen_13.jpg); }
#monitor.screen_14{ background-image:url(images/screen/screen_14.jpg); }
#monitor.screen_15{ background-image:url(images/screen/screen_15.jpg); }
#monitor.screen_16{ background-image:url(images/screen/screen_16.jpg); }
#monitor.screen_17{ background-image:url(images/screen/screen_17.jpg); }
#monitor.screen_18{ background-image:url(images/screen/screen_18.jpg); }
#monitor.screen_19{ background-image:url(images/screen/screen_19.jpg); }
#monitor.screen_20{ background-image:url(images/screen/screen_20.jpg); }
#monitor.screen_21{ background-image:url(images/screen/screen_21.jpg); }

#copy_container{
	width:375px;
	position:relative;
	float:right;
	right:60px;
	top:180px;
}

#item_description, .copy{
	padding:10px;
	padding-bottom:0;
	margin:10px 0;
	background-color:rgba(255,255,255,0.6);
	border:1px solid #cdcccb;
	-moz-border-radius-bottomright: 3px;
	-khtml-border-radius-bottomright: 3px;
	-webkit-border-bottom-right-radius: 3px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 3px;
	-khtml-border-radius-bottomleft: 3px;
	-webkit-border-bottom-left-radius: 3px;
	/*--Top right rounded corner--*/
	-moz-border-radius-topright: 3px;
	-khtml-border-radius-topright: 3px;
	-webkit-border-top-right-radius: 3px;
	/*--Top left rounded corner--*/
	-moz-border-radius-topleft: 3px;
	-khtml-border-radius-topleft: 3px;
	-webkit-border-top-left-radius: 3px;
}
.copy{
	padding-bottom:65px;
}
#item_description p, .copy p{
	margin:0;
	padding:0;
	margin-bottom:10px;
}
#item_description p.project{
	margin-bottom:0;
}

#monitor_overlay{
	width:430px;
	height:511px;
	background:url(images/mac.png) no-repeat;
	position:absolute;
	z-index:50;
	top:0;
	left:0;
}
#monitor{
	position:absolute;
	top:250px;
	width:430px;
	height:511px;
	left:20px;
}

#monitor.imac{
	width:542px;
	height:510px;
	background:url(images/imac.png) no-repeat;
	left:-92px;
	top:200px;
}
#monitor_overlay.imac{
	background-image:none;
}

#icons{
	position:absolute;
	bottom:-30px;
	left:-20px;
	margin:0;
	padding:0;
}
#icons li{
	list-style:none;
	padding:0;
	margin:0;
	float:left;
}
#icons a:link,#icons a:visited{
	width:82px;
	height:110px;
	display:block;
	text-indent:-5000px;
	background-repeat:no-repeat;
	background-image:url(images/icons.png);
}
#icons #twitter a:link,#icons #twitter a:visited{ background-position:0 0;}
#icons #twitter a:hover,#icons #twitter a:active{ background-position:0 -110px; }
#icons #facebook a:link,#icons #facebook a:visited{ background-position:-82px 0;}
#icons #facebook a:hover,#icons #facebook a:active{ background-position:-82px -110px; }
#icons #wordpress a:link,#icons #wordpress a:visited{ background-position:-165px 0;}
#icons #wordpress a:hover,#icons #wordpress a:active{ background-position:-165px -110px; }
#icons #konami a:link,#icons #konami a:visited{ background-position:-248px 0;}
#icons #konami a:hover,#icons #konami a:active{ background-position:-248px -110px; }