@import "reset.css";

/***** Basic *****/

body { color: #666; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5em; }
p, h1, h2, h3 { padding-bottom: 10px }
h1, h2, h3 { line-height: 1.1em; font-weight: bold; }
h1 { font-size: 40px; letter-spacing: -1px; line-height: 1.1em; padding-top: 30px; }
h2 { font-size: 26px; letter-spacing: -1px; line-height: 1.1em; padding-top: 20px; }
h2 span.hello { bottom: 20px; }
h3 { font-size: 13px; }
a, a:link, a:visited, a:active { color: #333; text-decoration: none; }
a:hover { color: #9BCFF3; text-decoration: underline; }
.reset { clear: both; }

/***** Generic Classes *****/  

.hello, div#header, div.box, div#footer, ul#work li { position: relative; }
.detail, .nav, .hello span, div#header div#contact, div.box ul.boxnav, li div.hint { position: absolute; }
.detail, .hello, .hello span, div#footer ul#links li a { background-image: url(detail.jpg); background-repeat: no-repeat; }
div#footer ul.nav li a, div#header div.nav a { color: #666; text-decoration: none; }
div#footer ul.nav li a:hover, div#header div.nav a:hover { color: #333; text-decoration: underline; }
.print { display: none; }
.nonprint { display: visible; }

/***** Layout *****/

div#wrapper { margin: 0 auto; width: 720px; }
div#header { border-bottom: 1px dashed #EDEDED; margin: 0 0 40px; padding: 20px 0 0; }
div#footer { border-top: 1px dashed #EDEDED; margin: 30px 0 0; padding: 10px 0 30px; }

/***** Header *****/

div#header .detail { background-position: 0 0; bottom: -17px; height: 17px; left: 0; width: 29px; }
.hello {
	background: url(detail.jpg) no-repeat 0 -56px;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	height: 14px;
	line-height: 12px;
	padding: 4px 5px 12px;
}
.hello span { background-position: -123px -56px; height: 28px; left: auto; right: 0; top: 0; width: 5px; }
div#header div.nav { left: 280px; top: 20px; }
div#header div.nav li { float: left; padding: 0 10px 0 0; width: auto; }
div#header div#contact { right: 50px; top: 20px; }

/***** Content *****/

ul#work li {
	border: 1px solid #EDEDED;
	float: left;
	height: 75px;
	margin: 0 7px 7px 0;
	padding: 5px;
	width: 126px;
}
ul#work li:hover, img:hover { border-color: #9D9D9D; }
ul#work li.last { margin-right: 0; }
ul#work li a {
	background-image: url(sw.jpg);
	background-repeat: no-repeat;
	display: block;
	height: 75px;
	width: 126px;
}

li div.hint { height: 30px; left: 120px; top: -13px; width: 125px; z-index: 100; }
li div.hint .hello { background: url(hello.png) no-repeat left top; padding-right: 0; visibility: hidden; }
li div.hint .hello span { background: url(hello.png) no-repeat right top; right: -5px; }
li:hover div.hint .hello { visibility: visible; }

div.box ul.boxnav { right: 0; top: 20px; }
div.box ul.boxnav li { float: left; padding: 0 10px 0 0; width: auto; }
img { border: 1px solid #EDEDED; margin: 0 0 10px 0; padding: 5px; }
img.left { margin-right: 6px; }
img#me { float: right; margin: 30px 0 0 0; }
div#box1 { float: left; width: 540px; }
div.col1, div.col2 { display: inline; width: 48%; }
div.col1 { float: left; }
div.col2 { float: right;}

/***** Footer *****/

div#footer .detail { background-position: -29px 0; top: -10px; height: 56px; right: 0; width: 80px; }
div#footer ul.nav { right: 60px; top: 10px; }
div#footer ul.nav li { float: left; padding-left: 10px; width: auto; }
div#footer ul#links li { float: left; padding-right: 10px; width: auto; }
div#footer ul#links li a { display: block; height: 64px; width: 64px; }
div#footer ul#links li a#flickr { background-position: 0 -84px; }
div#footer ul#links li a#flickr:hover { background-position: 0 -148px; }

/***** Form *****/

form, form label { width: 200px; }
form input, form label, form textarea { width: 194px; }
form, form img, form input, form label, form textarea { border: none; font: inherit; margin: 0; padding: 0; }
form { float: left; margin-right: 20px; }
form input, form textarea { background: #EDEDED; margin-bottom: 6px; padding: 3px; }
form textarea { height: 150px; }
form img { float: left; margin: 0 6px 6px 0; width: auto; }
form input.captcha { width: 128px; }
form input.button { background: #9D9D9D; color: #FFF; float: right; margin-top: 6px; width: auto; }

/* Scroll */

div.layer {
	background: url(layer.png) no-repeat left top;
	height: 350px;
	margin: -195px 0 0 -230px;
	padding: 20px;
	position: fixed; left: 50%; top: 50%;
	width: 420px;
	z-index: 1000;
}
div.scroll {
	background: #FFF;
	float: right; 
	height: 300px;
	overflow: auto;
	margin: 0 0 15px 0;
	padding: 10px;
	width: 400px;
}