body {
	padding:0;
    margin:0;
    font-family: 'Lucida Grande', 'Arial', 'Verdana', sans-serif;
    color:#9f9f9f;
    font-size:14px;
    background:#121212;
}

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

h1, h2, h3, h4, h5, h6, h7, p {
    padding:0;
    margin:0;
}
a {
    outline:none;
    cursor:pointer;
    text-decoration:none;
}
#wrapper {
    position:relative;
    width:960px;
    margin:48px auto;
}

#header {
    height:41px;
    position:relative;
}
#branding {
    position:absolute;
    left:32px;
    bottom:0;
}
    #branding a {
        display:block;
        text-indent:-5000px;
        background:url(../img/logo.gif) left top no-repeat;
        width:164px;
        height:29px;
    }
#nav {
    position:absolute;
    right:32px;
    bottom:0;
}
    #nav ul li {
        display:inline;
        float:left;
        margin:0 0 0 24px;
    }
    #nav a {
        color:#9f9f9f;
    }
    #nav a:hover {
        color:#50CAEC;
    }
    #nav a.active {
        color:#fff;
    }

#home {
    font-family:'Georgia';
    font-weight:normal;
    margin:24px 0;
    border-width:1px 0;
    border-style:solid;
    border-color:#707070;
    padding:0 32px;
}
    #home h1 {
        color:#fff;
        font-size:42px;
        line-height:48px;
        font-family:'Georgia';
        font-weight:normal;
        margin:24px 0;
    }
    #home h2 {
        color:#ccc;
        font-size:24px;
        line-height:32px;
        font-family:'Georgia';
        font-weight:normal;
        margin:0 0 24px 0;
    }
    
#clients {
    margin:0 32px 24px 32px;
}
    #clients li {
        width:25%;
        display:inline;
        float:left;
    }
    #clients li a {
        display:block;
        padding:12px 0;
        height:120px;
        background-position:center top;
        background-repeat:no-repeat;
    }
    #clients li a:hover {
        background-position:center bottom;
    }
    #clients li.telnic a {
        background-image:url(../img/telnic/logo.gif);
    }
    #clients li.opodo a {
        background-image:url(../img/opodo/logo.gif);
    }
    #clients li.bdo a {
        background-image:url(../img/bdo/logo.gif);
    }
    #clients li.bmi a {
        background-image:url(../img/bmi/logo.gif);
    }
    #clients li.lsc a {
        background-image:url(../img/lsc/logo.gif);
    }
    #clients li.marksandspencer a {
        background-image:url(../img/mands/logo.gif);
    }
    #clients li.lp a {
        background-image:url(../img/lp/logo.gif);
    }
    #clients li.reyooz a {
        background-image:url(../img/reyooz/logo.gif);
    }
    #clients li.ri3k a {
        background-image:url(../img/ri3k/logo.gif);
    }
    #clients li.nspcc a {
        background-image:url(../img/nspcc/logo.gif);
    }
    #clients li.jobhive a {
        background-image:url(../img/jobhive/logo.gif);
    }
    #clients li.kube a {
        background-image:url(../img/kube/logo.gif);
    }
      
#projects {
    margin:24px 0;
}
    #viewpane {
        position:relative;
        width:920px;
        height:340px;
        overflow:hidden;
        margin:0 20px;
        background:url(../img/ajax-loader.gif) center center no-repeat;
    }
        #viewpane div.project {
            height:340px;
            position:absolute;
            top:0;
            left:0;
            display:none;
        }
        #viewpane div.active {
            display:block;
        }
        #viewpane div.corner {
            position:absolute;
            width:12px;
            height:12px;
            background-position:left top;
            background-repeat:no-repeat;
            z-index:1000;
        }
        #viewpane div.corner-tl {
            top:0;
            left:0;
            background-image:url(../img/corner-tl.png);
        }
        #viewpane div.corner-tr {
            top:0;
            right:0;
            background-image:url(../img/corner-tr.png);
        }
        #viewpane div.corner-br {
            bottom:0;
            right:0;
            background-image:url(../img/corner-br.png);
        }
        #viewpane div.corner-bl {
            bottom:0;
            left:0;
            background-image:url(../img/corner-bl.png);
        }
    
    
    #lp.project {
        background:transparent url(../img/lp/1.jpg) left top no-repeat;
        width:920px;
    }
    #reyooz.project {
        background:transparent url(../img/reyooz/1.jpg) left top no-repeat;
        width:920px;
    }
    #telnic.project {
        background:transparent url(../img/telnic/1.jpg) left top no-repeat;
        width:920px;
    }
    #kube.project {
        background:transparent url(../img/kube/1.gif) left top no-repeat;
        width:920px;
    }
    #ri3k.project {
        background:transparent url(../img/ri3k/1.jpg) left top no-repeat;
        width:920px;
    }
    #bmi.project {
        background:transparent url(../img/bmi/1.jpg) left top no-repeat;
        width:920px;
    }
    #lsc.project {
        background:transparent url(../img/lsc/1.gif) left top no-repeat;
        width:920px;
    }
    #opodo.project {
        background:transparent url(../img/opodo/1.gif) center center no-repeat;
        width:920px;
    }
    #bdo.project {
        background:transparent url(../img/bdo/1.gif) center center no-repeat;
        width:920px;
    }
    #nspcc.project {
        background:transparent url(../img/nspcc/1.jpg) center center no-repeat;
        width:920px;
    }
    #mands.project {
        background:transparent url(../img/mands/1.gif) center center no-repeat;
        width:920px;
    }
    #jobhive.project {
        background:transparent url(../img/jobhive/1.gif) center center no-repeat;
        width:920px;
    }
#projectContent {
    position:relative;
    margin:48px 12px;
}
    #projectNav {
        position:absolute;
        top:0;
        left:12px;
        width:206px;
    }
        #projectNav li {
            padding-bottom:4px;
        }
        #projectNav a {
            color:#9f9f9f;
            font-size:14px;
        }
        #projectNav a:hover {
            color:#50caec;
        }
        #projectNav a.active {
            color:#fff;
        }
    #projectLinks {
        position:absolute;
        top:0;
        right:12px;
        width:206px;
    }
        #projectLinks li {
            display:none;
        }
        #projectLinks li.active {
            display:block;
        }
        #projectLinks a {
            color:#50caec;
            text-decoration:underline;
            display:block;
        }
        #projectLinks a:visited {
            color:#2e6976;
        }
    #projectCopy {
        margin:0 242px 0 230px
    }
        #projectCopy li {
            display:none;
        }
        #projectCopy li.active {
            display:block;
        }
        #projectCopy h2, #projectLinks h2 {
            color:#fff;
            line-height:18px;
            font-size:14px;
        }
        #projectCopy p {
            line-height:18px;
            margin-bottom:18px;
        }
        #projectCopy a {
            text-decoration:underline;
            color:#50CAEC;
        }
        #projectCopy a:visited {
            color:#2e6976;
        }
        
#footer {
    border-top:1px solid #707070;
    padding:24px 20px;
}
#contact {
    float:left;
}
    #contact strong {
        color:#fff;
    }
    #contact a {
        text-decoration:underline;
        color:#50caec;
    }
    
#social {
    float:right;
}
    #social li {
        float:left;
        display:inline;
        margin-left:24px;
    }
    #social li a {
        display:block;
        text-indent:-5000px;
        background-position:left top;
        background-repeat:no-repeat;
    }
        #social li a:hover {
            background-position:left bottom;
        }
    #social a.rss {
        background-image:url(../img/icon-rss.gif);
        width:36px;
        height:38px;
        overflow:hidden;
    }
    #social a.twitter {
        background-image:url(../img/icon-twitter.gif);
        width:50px;
        height:37px;
        overflow:hidden;
    }
    #social a.linkedin {
        background-image:url(../img/icon-linkedin.gif);
        width:62px;
        height:32px;
        overflow:hidden;
    }
        
 /*
 ************* THE MIGHTY CLEARFIX ***************
 */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

/* End hide from IE-mac */
* html .clearfix {
    height: 1%;
}