body {
background:url(../images/back.jpg) #333333;
color:#555555;
text-align:center;
font-family:Arial, 'Sans Serif';
font-size:12px;
height: 100%;
padding: 0;
margin: 0; 
}

a {
color:#999999;
text-decoration: none;
}

a:hover {
color:#555555;
text-decoration: none;
border-bottom: 1px dotted #555555;
}

.alignleft {
float:left;
display:block;
margin:0 10px 10px 0;
}

.alignright {
float:right;
display:block;
margin:0 0 10px 10px;
}

p, ul {
line-height:22px;
padding:0 0 10px 0;
}

.contactform p#response {
border:2px solid #CCCCCC;
color:#333333;
padding:5px;
line-height:18px;
font-size:11px;
display:none;
margin-bottom:20px;
}

h2 {
font-size:24px;
font-weight:normal;
color:#999999;
line-height:25px;
padding:0 0 10px 0;
}

DIV#page {
position: absolute;
left: 50%;
top: 50%;
width: 960px;
display:block;
overflow:hidden;
margin-left: -480px; /* half of width */
margin-top: -300px;  /* half of height */
text-align:left;
padding-bottom:100px;
}

#header {
width:860px;
padding:30px 50px 0 50px;
clear:both;
height:47px;
}

h1 a, h1 a:hover, a.logo:hover {
font-size:30px;
font-weight:bold;
color:#999999;
border:none;
}

h1 a span {
font-weight:normal;
color:#666666;
}

#main {
overflow:hidden;
position:relative;
width:860px;
margin:0 50px;
clear:both;
}

#main #workCol {
width:720px;
display:block;
clear:both;
}

#main #aboutCol, #main #contactCol {
width:720px;
display:block;
clear:both;

display:table;
height:1%;
margin-top:100px;
}

#main .content {
width:650px;
height:500px;
float:left;
display:block;
background:url(../images/tabgrad.jpg) no-repeat top left #eae9ea;
}

#main .content .sidebar {
float:right;
width:160px;
height:460px;
padding:20px;
background:#f0f0f0;
}

#main .content .contentarea {
width:410px;
height:460px;
padding:20px;
float:left;
overflow:hidden;
}

#main .content .contentarea h2 {
color:#555555;
}

#main a.tab {
width:68px;
border-right:1px solid #555555;
float:right;
display:block;
height:490px;
padding:10px 1px 0 0;
font-size:10px;
text-align:center;
color:#FFFFFF;
cursor:pointer;
}

#main a.tab.active, #main a.tab:hover {
background:url(../images/tabOver.jpg);
color:#FFFFFF;
border-bottom:none;
}

#main a.tab.active, #main a.tab.active:hover {
background:url(../images/tabActive.jpg);
width:67px;
border-left:1px solid #dddddd;
color:#555555;
}

#main #contactCol a.tab {
border-right:none;
width:69px;
}

#main #contactCol a.tab.active {
width:68px;
}

#main #aboutCol .content, #main #contactCol .content {
display:none;

display:block;
}

#main #workCol {
display:table;
height:1%;
}

#main #workCol .content {
display:table;
height:1%;
}

#main #workCol .content .contentarea {
display:block;
width:410px;
height:1%;
padding:20px;
float:left;
overflow:hidden;
}

#main #workCol a.tab {
display:block;
height:100%
}


/* Portfolio */

#main .content ul#portfolioLinks {
line-height:24px;
}

#main .content ul#portfolioLinks a.active {
color:#555555;
}

#main .content ul#portfolioItems li {
padding-bottom:50px;
}

span.screenshot {
background: url(../images/screenshot.png) no-repeat;
width:430px;
margin-left:-10px;
height:268px;
padding:44px 0 0 10px;
display:block;
overflow:hidden;
}


/* Contact */
.contactform {
padding:10px 0 0 0;
}

.contactform input, .contactform textarea {
border:2px solid #CCCCCC;
padding:3px;
font-size:12px;
font-family: Arial;
}

.contactform #submit {
background:#CCCCCC;
padding:5px;
color:#555555;
}

.contactform p label {
float:left;
padding:0 10px 0 0;
width:60px;
}