/* Main Elements */

body {
background:#dedede;
color:#999;
padding:50px 0 0 0;
height:100%;
}

#title,
h2 {
display:block;
float:left;
text-indent:-9999px;
width:0;
}

* html h2 {
display:none;
}

a {
color:#888;
outline: none;
text-decoration:none;
}

a:hover {
color:#8b1;
}

a:active {
color:#555;
}

abbr,
acronym {
border-bottom:1px dotted #888;
cursor:help;
}

#jose {
background:url(../img/bg.png) no-repeat;
display:block;
padding:9px 9px 0;
width:537px;
}

#comingsoon {
font-style:italic;
margin-top:140px;
text-align:center;
width:100%;
}


/* Header */

#header{
height:73px;
overflow:hidden;
padding:25px 30px 0;
position:relative;
}

#description {
display:block;
float:left;
text-indent:-9999px;
}

#vcard a {
background:url(../img/icons.png) 0 506px;
cursor:pointer;
float:right;
margin:0;
outline:none;
text-indent:-9999px;
width:48px;
height:48px;
}

* html #vcard {
background:url(../img/icons.gif) 0 506px;
}


/* Language */

#language {
background:url(../img/icons.png) -417px 0px;
display:block;
position:absolute;
right:75px;
top:40px;
list-style:none;
padding:0;
width:29px;
height:28px;
}

#language:hover {
background:url(../img/icons.png) -417px -30px;
}

#language li a {
background:#ee;
display:block;
text-indent:-9999px;
width:29px;
height:15px;
}

#language ul {
list-style:none;
padding:0;
}

#language #en a {
width:20px;
}


/* Content */

#wrapper {
overflow:hidden;
}

#content {
float:left;
padding:30px 30px 10px 30px;
overflow:hidden;
width:365px;
height:316px;
}

#content a {
text-decoration:underline;
}

#home,
#work,
#social,
#contact {
background:#fff;
overflow:hidden;
}


#footer {
color:#888;
font-size:0.833em;
margin:8px 0 5px;
text-align:center;
text-shadow:1px 1px 0 #efefef;
}

#footer a:hover {
color:#333;
}


/* Navigation */


#nav {
float:left;
list-style:none;
margin:0;
overflow:hidden;
padding:0;
width:112px;
}

#nav li {
display:block;
height:89px;
text-indent:-9999px;
width:112px;
}


/* Nav Icons */

#nav li a {
background:url(../img/icons.png);
display:block;
outline:none;
width:112px;
height:89px;
}

* html #nav li a {
background:url(../img/icons.gif);
}

#nav #nav-home a {
background-position:-163px 25px;
}

#nav #nav-work a {
background-position:-163px -56px;
}

#nav #nav-social a {
background-position:-163px -135px;
}

#nav #nav-contact a {
background-position:-163px -212px;
}

#nav #nav-home a.selected,
#nav #nav-home a:hover {
background-position:-251px 25px;
}

#nav #nav-work a.selected,
#nav #nav-work a:hover {
background-position:-251px -56px;
}

#nav #nav-social a.selected,
#nav #nav-social a:hover {
background-position:-251px -135px;
}

#nav #nav-contact a.selected,
#nav #nav-contact a:hover {
background-position:-251px -212px;
}


/* Social Icons */

#social a {
text-decoration:none;
}

#social ul {
padding-left:0;
float:left;
font-size:0.833em;
margin-right:10px;
width:170px;
}

#social li {
display:block;
height:48px;
margin-bottom:20px;
}

#social li strong {
font-weight:300;
display:block;
font-size:1.8em;
}

#social li a {
display:block;
height:48px;
}

#social li .social-icon {
background:url(../img/icons.png);
display:block;
float:left;
width:54px;
height:48px;
}

* html #social li .social-icon  {
background:url(../img/icons.gif);
}

#social #technoratti .social-icon {
}

#social #delicious .social-icon {
background-position: 0 -80px;
}

#social #googlecode .social-icon {
background-position: 0 -160px;
}

#social #deviantart .social-icon {
background-position: 0 -240px;
}

#social #twitter .social-icon {
background-position: -93px 0;
}

#social #lastfm .social-icon {
background-position: -93px -80px;
}

#social #youtube .social-icon {
background-position: -93px -160px;
}

#social #flickr .social-icon {
background-position: -93px -240px;
}


/* Contact Icons */

#contact ul {
padding-left: 1em;
}

#contact li {
clear:left;
display:block;
margin-bottom:5px;
}

#contact .vcard {
margin-top:10px;
}

#contact li {
color:#555;
}

#contact li .bullet {
background:url(../img/icons.png);
display:block;
float:left;
width:20px;
height:16px;
}

* html #contact li .bullet {
background:url(../img/icons.gif);
}

#contact .fn .bullet {
background-position: 610px 2px;
}

#contact .web .bullet {
background-position: 610px -30px;
}

#contact .mail .bullet {
background-position: 610px -59px;
}

#contact .wave .bullet {
background-position: 610px -89px;
}

#contact .twitter .bullet {
background-position: 610px -118px;
}

#contact .gtalk .bullet {
background-position: 610px -150px;
}

#contact .vcard .bullet {
background-position: 610px -179px;
}