/* @group Preset */

nav,
article,
section,
header,
figure,
aside,
footer {
	display: block;
	/*background: none;
	border: none;
	margin: 0;
	padding: 0;*/
	}

div {
	}


/* @end */

/* @group Layout */

div#container {
	text-align: left;
	margin: 0 auto;
	width: 80%;

/*
	margin: 0 5% 0 auto;
	width: 85%;
*/
/* 	position: relative; */
	*font-size: 120%;
	max-width: 1100px;
	}

header {
	width: 160px;
	position: fixed;
	*position: static;
	margin-top: 80px;
	*float: left;
	}

nav {
	width: 160px;
	height: 160px;
	position: fixed;
	margin-top: 90px;
	margin-left: 180px;
	vertical-align: middle;
	display: table-cell;
	*display: none;
	}

nav ul {
	margin-top: 0;
	list-style-type: none;
	}

nav li {
	margin-bottom: 1em;
	}

article {
	margin-left: 360px;
	*margin-left: 270px;
/*
	padding-bottom: 1000px;
	*padding-bottom: 100px;
*/
	padding-bottom: 10em;
	}

article header {
	position: static;
	margin-top: 0;
	*float: none;
	}

article section {
	padding-top: 90px;
	}

article h2 {
	line-height: 1.0;
	margin-top: 0;
	margin-bottom: 1em;
	}

article ul {
	list-style-type:none;
	margin-top: 0;
	margin-left: 0;
	}

article p {
	margin-top: 0;
	}

article li {
	margin-left: 0;
	margin-bottom: 1em;
	display: block;
	}

article li a {
	display: block;
	}

article li:first-letter {
/* 	font-size:130%; */
	}

article a[href]:after {
	content: '- ' attr(href);
	display: block;
	}


article section#favTweet {
  }

article section#favTweet a[href]:after {
  display: none;
  }

article section#hello a[href]:after,
article section#contact a[href]:after {
	display: none;
	}

article section#hello header,
article section#address header {
	display: none;
	}

article section#hello {
  position: absolute;
  top: -5em;
  right: 1em;
/*
	position: fixed;
	right: 20px;
	top: 55px;
	_display:none;
*/
	}

article section#hello a {
	display: block;
	/*padding: 5px 12px 5px 7px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;*/

	padding:5px 2px;
	border-bottom: 2px solid #333;
	line-height: 1.0;
	font-size: 140%;
	}

article section#hello a img {
	width: 16px;
	height: 16px;
	background: url(../img/emoticon_smile.png) no-repeat;
	float: left;
	margin-right: 5px;
	margin-top: .1em;
	}

/*div#footer div.focus p#hello a img {
	background-image: url(../img/emoticon_tongue.png);
	}*/

article section#hello a:hover img {
	background-image: url(../img/emoticon_grin.png);
	}


/*
120.png
093.png
*/
article section#address {
  padding-left: 60px;
  background: url(../img/120.png) left 97px no-repeat;
  margin-left: 15px;
	}

article section#address p {
/* 	margin-top: 40px; */
	line-height: 1.8;
	letter-spacing: 1px;
	}

article dl {
	margin-top: 0;
	margin-bottom: 0;
	}

article dl dd {
	margin-top: .5em;
	margin-bottom: 0;
	}

article dd p {
	line-height: 1.8em;
	}

footer {
	clear: left;
	
/*
	clear: both;
	position: fixed;
	bottom: 0;
	width: 100%;
*/
	}

footer div {
	width: 80%;
	margin: 0 auto;
	}

footer div p#concept {
	margin-left: 360px;
	*margin-left: 270px;
	line-height: 1.0;
/* 	float: left; */
	text-align: right;
	font-size: 110%;
	}

footer div p#copyright {
/* 	float: right; */
	text-align: center;
	line-height: 1.0;
	margin-bottom: 0;
	padding-bottom: .5em;
	}

/* @end */

/* @group Color */

body {
	background:#f9f9f9;
	}

article h2 {
	color: #666;
	}

article a[href]:after {
    color: #999;
	}

nav li a {
	color: #666;
	}

/*section#hello a {
	background:  #cc0;
	}*/

article section#hello a {
	/*color: #fff;
 	text-shadow: 1px 1px 2px #333;*/
 	}

footer {
	background: #222;
	padding: 5px;
	}

footer div {
	color: #fff;
	}


#recent p {
  padding-left: 10px;
  font-size: 110%;
  }

#recent ul a {
  width: 100%;
  padding-top: 278px;
  background-position: center center;
  border: 2px solid #fff !important;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-box-shadow: 0 0 20px #e6e6e6;
	-webkit-box-shadow: 0 0 20px #e6e6e6;
  }

#recent div#recent-giftee a {
  background-image: url(../img/works-giftee.png);
  }

#recent div#recent-traveling a {
  background-image: url(../img/works-traveling.png);
  }

#recent div#recent-skmts a {
  background-image: url(../img/works-skmts.png);
  }

/*

ss="c33-33-33">
          <div id="recent-giftee" class="c33-33-33-1">
            <p>giftee - send a small thank you<br />2011/3</p>
            <p>Gift &times; Social Media</p>
            <ul class="links">
              <li><a href="http://giftee.co/" target="_blank" class="replace">giftee - send a small thank you</a></li>
            </ul>
          </div>
          <div id="recent-traveling" class="c33-33-33-2">
            <p>Traveling Office<br />2011/2</p>
            <p>Tracking with iPhone App &times; Twitter</p>
            <ul class="links">
              <li><a href="http://traveling-office.com/" target="_blank" class="replace">Traveling Office</a></li>
            </ul>
          </div>
          <div id="recent-skmts" class="c33-33-33-3">
            <p>skmtSocial project / Phase 4<br />2011/1</p>
            <p>Live Music &times; Social Photo Stream</p>
            <ul class="links">
              <li><a href="htt
*/


/* @end */

/* @group Typo */


body {
	line-height: 1.6em;
	font-size: 75%;
	font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2" !important;
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2" !important;
	_font-family:"MSP Gothic";
	font-weight: normal !important;
	}

footer div p#concept {
	font-style: italic;
  font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2";
	letter-spacing: 1px;
	}

article h2 {
	font-size: 125%;
	font-weight: normal;
	font-size: 130%;
	letter-spacing:0.3em;
	}

nav li a {
	letter-spacing:0.15em;
	}

article a[href]:after {
	font-size: 96%;
	font-style: italic;
	}


article section a,
article section span {
	letter-spacing: 0.1em;
	line-height: 1.3;
	color:#111;
	}

article dl dt {
	font-weight:normal;
	font-size: 100%;
	}


article dd {
	color:#111;
	}

article section#contact p {
	letter-spacing:2;
	font-size:140%;
	font-style: italic;
	}

article section#contact p#contact-lead {
  min-height: 48px;
  background: url(../img/093.png) no-repeat left top;
  padding: 10px 0 0 60px;
	}

article section#address p  {
  font-size: 110%;
	font-style: italic;
	}

article section#address p strong {
  font-family: "ff-dagny-web-pro-1","ff-dagny-web-pro-2";
  font-size: 110%;
	font-weight: normal;
	}

article section#address p em {
	font-style: italic;
	}

article section#address p b {
	font-style: normal;
	font-weight: normal;
	}

article span.date {
	color:#666;
	font-size:xx-small;
	padding-left:10px;
	display:inline;
	letter-spacing:0;
	font-size:90%;
	}

article span.siteclose,
article span.siteclose span.date {
	color:#999;
	}

article span.nolink {
	color:#111;
	}

::selection {
	color: #fff;
	background: #000; /* Safari */
	}
::-moz-selection {
	color: #fff;
	background: #000; /* Firefox */
}

/* @end */


section#tools dl {
  clear: left;
  margin-top: 1em;
  margin-bottom: 1em;
  }

section#tools p {
  clear: left;
  margin-top: 2em;
  }

section#tools p:first-child {
  margin-top: 0;
  }

/*
section#tools dl {
  width: 48px;
  float: left;
  margin-right: 1%;
  }
*/

section#tools dl dd {
  line-height: 1.6;
  }

section#tools dl a[href]:after {
  content: '';
  }

section#tools dl span.name {
/*   font-weight: bold; */
  font-size: 120%;
  }

section#tools dl span.lead {
  font-style: italic;
  }

section#tools dl span.maker {
  font-size: 90%;
  color: #999;
  }

section#tools dl dt {
  width: 48px;
  float: left;
  }

section#tools dl dt img {
  margin-bottom: 1em;
  }

section#tools dl dd {
  margin-left: 58px;
  }






/*
li:nth-child(odd)       {
        background-color: yellow;
        }

li:nth-child(even)      {
        background-color: skyblue;
        }
*/