@media screen {
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v1/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');
}
}
body {
background:#404146;
margin:0;padding:0;
font:normal 13px/20px "Ubuntu", Arial, Helvetica, sans-serif;
}


img {border:0;}

ul, li, blockquote {list-style-type:none;margin:0;padding:0;}
h1, h2, h3 {font-weight:normal;margin:15px 0 5px;padding:0;}
h1 + p,
h2 + p,
h3 + p {
margin-top:0;
}

a {color:#404146;}
a:hover {color:#6b6d75;}
header, footer, section, aside, cite {display:block;}

/* - - - *HEADER - - - */
#page {
background: #bfbfc0 url(../img/bg.png) repeat-x 0 0;
padding-bottom:30px;
}

header {
position:relative;
width:960px;
height:60px;
margin:0 auto;
z-index:100;
}

#logo {
position:absolute;
top:100px;
left:30;
background: transparent url(../img/siyako.png) no-repeat 0 0;
width:900px;
height:250px;
text-indent:-9999px;
outline:none;
}



nav {
position:absolute;
top:18px;
right:0;
}

header nav ul li {
display:inline;
margin:0 24px;
}

header nav a {
font:normal 22px "Ubuntu","Arial",sans-serif;
text-decoration:none;
color:#404146;
padding:16px 0 0 0;
}

header nav a:hover {
color:#FFF;
text-shadow:-1px -1px 1px #000;
border-top:2px solid #FFF;
}

.active {border-top:2px solid #404146;}
.active:hover {border-top:2px solid #FFF;}

/* - - - *BODY - - - */
#main {
width:960px;
margin:0 auto;
}

#feature-box {
position:relative;
height:314px;
background: url(../img/bg-feature-box.jpg) no-repeat 100px 0;
}


#home-ss {
position:absolute;
top:-155px;
left:75px;
}

#logo-xbird {
position:absolute;
top:-160px;
left:85px;
}

#logo-circle {
position:absolute;
top:-160px;
left:85px;
}

#feature-box-content {
float:right;
width:500px;
margin-top:30px;
}

#feature-box-content h1 {font-size:26px;line-height:34px;margin:0;padding:0;}
.button-learn-more {
display:block;
background: transparent url(images/button-learn-more.png) no-repeat 0 0;
width:148px;
height:48px;
text-indent:-9999px;
outline:none;
}
.button-learn-more:hover {background-position:0 -48px;}
.button-contact {
display:block;
background: transparent url(images/button-contact.png) no-repeat 0 0;
width:148px;
height:48px;
text-indent:-9999px;
outline:none;
}
.button-contact:hover {background-position:0 -48px;}
#main h2 {
color:#404146;
font-family:"Ubuntu","Arial",sans-serif;
letter-spacing:1px;
width:660px;
text-shadow: 2px 2px 2px #FFF;
}
#main h2.auth {
color:#404146;
font-family:"Ubuntu","Arial",sans-serif;
letter-spacing:1px;
width:300px;
text-align:right;
text-shadow: 2px 2px 2px #FFF;
}
.col {
float:left;
width:300px;
margin-right:30px;
}

.col + .last-child {margin-right:0;}

.recent-project li {
color:#FFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

border:1px solid #404146;
background: #404146;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6d75', endColorstr='#404146'); 
background: -webkit-gradient(linear, left top, left bottom, from(#6b6d75), to(#404146)); 
background: -moz-linear-gradient(top,  #6b6d75,  #404146);
margin:0 0 10px 0;
padding:5px 5px 0 10px;
min-height:30px;

}

.recent-project li:hover {
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}

.recent-project img {
float:left;
border:3px solid #dbdada;
margin:0 10px 25px 10px;
}

.recent-project h3 {
font-weight:bold;
letter-spacing:1px;
margin:0;padding:0;
font-size:15px;
}
.recent-project p {margin:5px 0;}
.recent-project a {color:#FFF;}
.recent-project li:hover a {color:#83d9da;}
.recent-project li a:hover {color:#fd9;}


p.more-info {float:right;margin-top:0;padding-right:10px;}
#sidebar #download-resume {
clear:both;
padding-top:10px;
}
#resume-dl li {
float:left;
margin-left:10px;
}

#resume-dl li:first-child {margin-left:0;}

#contact {
float:right;
width:220px;
margin-right:5px;
margin-top:15px;
font-size:20px;
font-weight:bold;
text-shadow: 2px 2px 2px #FFF;
}

#testimonials-page li {margin-bottom:20px;}

#resume {
float:left;
width:600px;
}

#resume h3 {margin:0;padding:0;}

/* - - - *SIDEBAR - - - */
#sidebar {
float:right;
width:300px;
}
#contact-sidebar form {width:275px;}
#contact-sidebar #contact-form textarea {
width:275px;
height:200px;
padding:5px;
border:1px solid #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#resume + #sidebar li {list-style-type:disc;margin:0 0 10px 15px;}
/* --- *contact --- */
#contact-form {width:300px;}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="password"]
{
padding:5px;
width:288px;
border:1px solid #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:5px;
color:#333333;
font-family:"Ubuntu","Arial",sans-serif;
}

#contact textarea {
padding:5px;
width:100%;
height:300px;
border:1px solid #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

}
#contact-form select.sel1 {
font-size:16px;
width:180px;
border:1px solid #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-right:10px;
margin-bottom:5px;
color:#333333;
font-family:"Ubuntu","Arial",sans-serif;
}
#contact-form select.sel2 {
font-size:16px;
width:105px;
border:1px solid #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:5px;
color:#333333;
font-family:"Ubuntu","Arial",sans-serif;
}
#contact label {
display:block;
margin-top:10px;
}

#contact input[type="submit"] {clear:both;margin-top:20px;padding:8px;line-height:12px;}
.error-msg {
display:block;
font-weight:bold;
color:red;
}

/* - - - *PORTFOLIO - - - */
.portfolio-project {
float:left;
width:450px;
min-height:600px;
margin-right:30px;
}

.portfolio-project img {border:5px solid #9b9b9b;}
.portfolio-project:nth-child(odd) {margin:0 0 0 3px;float:right;}
.portfolio-project li {list-style-type:disc;margin-left:15px;}

/* - - - *FOOTER - - - */
footer {
position:relative;
width:940px;
margin:0 auto;
padding:20px;
color:#FFF;
}
footer a {color:#FFF;}
footer a:hover {color:#CCC;}
#copyright {font-size:12px;}

#icons-social {
position:absolute;
top:24px;
right:0;
}

#icons-social li {float:right;}
#icons-social a {
display:block;
background:transparent url(images/social.png) no-repeat 0 0;
width:16px;
height:16px;
margin-left:5px;
text-indent:-9999px;
outline:none;
}

a#social-tumblr {background-position: 0 -80px;}
a#social-linkedin {background-position: 0 -120px;}
a#social-facebook {background-position: 0 -40px;}
a#social-twitter {background-position: 0 0;}
a#social-delicious {background-position: 0 -160px;}
a#social-addthis {background:none;width:14px;}
#stats {display:none;}

/* - - -*common - - - */
.clear {clear:both;}
.left {float:left;}
.right {float:right;}
.note {font-size:10px;}
.button {
text-decoration:none;
border:1px solid #9b9b9b;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:5px;

background: #dbdada;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbdada', endColorstr='#bfbfbf'); 
background: -webkit-gradient(linear, left top, left bottom, from(#dbdada), to(#bfbfbf)); 
background: -moz-linear-gradient(top,  #dbdada,  #bfbfbf);

}

.button:hover {
color:#000;
background: #dbdada;
-moz-box-shadow:0 1px 0 #9b9b9b;
-webkit-box-shadow:0 1px 0 #9b9b9b;
box-shadow:0 1px 0 #9b9b9b;
}

li > .button {line-height:30px;}