/*-------[ general ]---------------------*/

body {
background:url(images/bg.gif);
margin:0 0 30px 0;
font:11px Arial, Tahoma, Sans-Serif;
color:#444;
}
p,ul,ol,h1,h2,h3,h4,blockquote,fieldset,form {
margin:0;
padding:0;
}
h3{
float:left;
width:100%;	
}
a {
text-decoration:none;
outline:none;
color:#487395;
}
a:hover {
color:#000;
}
img {
border:none;
}
.img-left {
float:left;
border:1px solid #666D73;
padding:2px;
margin:3px 7px 2px 0;
}
.img-right {
float:left;
border:1px solid #50565A;
padding:2px;
margin:3px 0 2px 7px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#tooltip {
position:absolute;
border:1px solid #565656;
background:#E9E9E9;
display:none;
}
#tooltipX {
border:1px solid #fff;
padding:5px 10px;
}
#screenshot {
position:absolute;
display:none;
border:1px solid #565656;
}
#screenshotX {
border:1px solid #fff;
background:#e9e9e9;
}
#screenshot img {
display:block;
padding:5px;
border-top:1px solid #fff;
}
#screenshot span {
display:block;
border-bottom:1px solid #aaa;
padding:5px;
font-size:13px;
background:#DFDFDF;
}
.ie7 #works {
padding-bottom:20px;
}
.ie7 #networks {
padding-bottom:10px;
}
.ie6 #navigation li a, .ie7 #navigation li a {
padding-bottom:5px;
}
.ie6 #navigation li a span {
cursor:pointer;
}
.ie6 #networks li a {
height:1%;
}
.ie6 #networks {
margin-right:-20px;
}
.ie6 #works {
margin-right:-40px;
}
.ie6 #logo {
margin:20px 20px 0 10px;
height:8px;
overflow:hidden;
}
.ie6 #contact-information {
width:210px;
}
.ie6 #shade {
background:none;
}

/*-------[ shade ]---------------------*/

#shade {
width:504px;
padding:100px 178px 0 178px;
margin:0 auto;
background:url(images/shade.png) 0 -20px no-repeat;
height:751px;
}

/*-------[ container ]---------------------*/

#container {
width:502px;
border:1px solid #C9BABA;
}

/*-------[ canvas ]---------------------*/

#canvas {
background:#f2f2f2;
border:1px solid #565656;
width:500px;
}

/*-------[ header ]---------------------*/

#header {
height:50px;
width:500px;
border-bottom:1px solid #565656;
background:url(images/header.jpg) repeat-x #AEAEAE;
}

/*-------[ logo ]---------------------*/

#logo {
float:left;
margin:23px 20px 0 20px;
text-indent:-9999pt;
}
#logo a {
background:url(images/logo.gif) no-repeat;
width:107px;
height:8px;
display:block;
}

/*-------[ navigation ]---------------------*/

#navigation {
list-style:none;
float:right;
margin:15px 8px 0 0;
}
#navigation li {
float:left;
margin-right:6px;
}
#navigation li a {
background:url(images/buttons.gif) 0 -19px repeat-x;
padding:6px 10px 6px 10px;
font-size:11px;
text-transform:uppercase;
display:block;
border:1px solid #5F5F5F;
}
#navigation li a:hover, .selected {
background:url(images/buttons.gif) repeat-x !important;
border:1px solid #111 !important;
}
#navigation li a span {
display:block;
height:7px;
text-indent:-9999pt;
overflow:hidden;
}
#navigation li a:hover span, .selected2 {
background-position:0 0 !important;
}
#home-button {
background:url(images/home.gif) 0 -7px no-repeat;
width:20px;
}
#social-button {
background:url(images/social.gif) 0 -7px no-repeat;
width:25px;
}
#work-button {
background:url(images/work.gif) 0 -7px no-repeat;
width:20px;
}
#contact-button {
background:url(images/contact.gif) 0 -7px no-repeat;
width:37px;
}

/*-------[ content ]---------------------*/

#content {
line-height:16px;
padding:20px;
border-top:1px solid #fff;
}
#content p {
margin-bottom:10px;
}
#content h3 {
font:14px Arial, Tahoma, Sans-Serif;
color:#333;
border-bottom:1px solid #C9BABA;
padding-bottom:2px;
margin-bottom:10px;
}

/*-------[ about styles ]---------------------*/

#about ul {
list-style-image:url(images/bullet.gif);
margin:0 0 10px 15px;
}

/*-------[ work styles ]---------------------*/

#works {
list-style-image:url(images/bullet.gif);
width:480px;
margin:0 0 35px 25px;
}
#works li {
margin:0;
}
.work-thumb {
display:block;
}
.work-thumb img {
border:1px solid #fff;
padding:3px;
background:#E9E9E9;
width:130px;
height:100px;
display:block;
}
.work-thumb span {
display:block;
border:1px solid #C9BABA;
}

/*-------[ social styles ]---------------------*/

#networks {
list-style:none;
width:470px;
}
#networks li {
float:left;
border:1px solid #C9BABA;
width:223px;
margin:0 10px 10px 0;
}
#networks li a {
border:1px solid #fff;
padding:5px;
display:block;
background:#E9E9E9;
min-height:48px;
}
#networks img {
float:left;
display:block;
margin-right:5px;
}
#networks strong {
display:block;
font-size:14px;
color:#444;
margin:2px 0 5px 0;
}
#networks span {
display:block;
}

/*-------[ contact form ]---------------------*/


#contactform {
float:left;
width:210px;
margin-right:20px;
}
#contactform fieldset {
border:none;
}
#contactform input {
width:210px;
}
#contactform textarea {
width:210px;
height:120px;
}
#contactform input, #contactform textarea {
display:block;
border:1px solid #C9BABA;
padding:5px;
background:#E9E9E9;
font:11px Arial, Tahoma, Sans-Serif;
color:#444;
margin-bottom:10px;
}
#contactform input:focus, #contactform textarea:focus {
background:#fff;
}
.send {
width:222px !important;
background:#ccc !important;
border:1px solid #C9BABA !important;
color:#444 !important;
cursor:pointer;
}
.send:hover {
border:1px solid #444 !important;
}
#contact-information h3{
width:95%;
}
#contact-information {
float:left;
width:100%;
}

/*-------[ footer ]---------------------*/

#footer {
background:#E9E9E9;
border-top:1px solid #565656;
clear:both;
}
#footer p {
border-top:1px solid #fff;
padding:10px 20px 10px 20px;
}