* {
padding: 0;
margin: 0;
font-family: Calibri, Trebuchet MS, Arial;
font-size: 14px;
}

html {
height: 100%;
}
			
body {
height: 100%;
}

#wrapper {
min-height: 100%;
width: 876px;
background: #fff;
margin: auto;
}

#header {
height: 136px;
width: 876px;
margin: auto;
}

a.logolink {
background: url(../img/logo.jpg) no-repeat;
float: left;
width: 224px;
height: 51px;
display: block;
text-decoration: none;
margin-top: 50px;
}

#content {
width: 876px;
margin: 40px auto;
}

 .kwicks {
     list-style-type: none;
     list-style-position:outside;
     position: relative;
     margin: 0;
     padding: 0;
 }

 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 60px;
    margin-right: 0px;
    background-image:url(../img/kwicks_sprite.jpg);
    background-repeat:no-repeat;
}

.kwicks a{
	display:block;
	height:60px;
	text-indent:-9999px;
	outline:none;
}


#websites {
	background-position:0px 0px;
}
#logos {
	background-position:-200px 0px;
}
#artworks {
	background-position:-400px 0px;
}
#posters {
	background-position:-600px 0px;
}
#freebies {
	background-position:-800px 0px;
}
#tutorials {
	background-position:-1000px 0px;
}
#contact {
	background-position:-1200px 0px;
}


#websites.active, #websites:hover {
	background-position: 0 bottom;
}
#logos.active, #logos:hover{
	background-position: -200px bottom;
}
#artworks.active, #artworks:hover {
	background-position: -400px bottom;
}
#posters.active, #posters:hover {
	background-position: -600px bottom;
}
#freebies.active, #freebies:hover {
	background-position: -800px bottom;
}
#tutorials.active, #tutorials:hover {
	background-position: -1000px bottom;
}
#contact.active, #contact:hover {
	background-position: -1200px bottom;
}


#websites a{
	background-image:url(../img/end.jpg);
	background-repeat:no-repeat;
	background-position: left 0px;
}

#websites a:hover{
	background-position: left -120px;
}

#contact a{
	background-image:url(../img/end.jpg);
	background-repeat:no-repeat;
	background-position: right -60px;
}
#contact a:hover{
	background-position: right -180px;
}


ul.refs {
width: 876px;
margin: auto;
list-style: none;
}

ul.refs li {
background: #fff;
float: left;
height: 211px;
width: 273px;
margin-top: 40px;
}

ul.refs li.mid {
margin: 40px 28px 0;
}

ul.refs li a {
text-decoration: none;
}

#footer {
background: url(../img/footer.jpg) no-repeat;
width: 876px;
height: 42px;
margin: 40px auto;
padding-bottom: 50px;
}

ul.refs li p {
padding: 5px;
font-style: italic;
}

.info {
color: #af2d6b;
text-transform: uppercase;
font-weight: bold;
font-style: normal !important;
}

ul.refs li p a {
color: #333333;
padding: 5px;
font-style: italic;
text-decoration: underline;
}

ul.refs li p a:hover {
color: #333333;
padding: 5px;
font-style: italic;
text-decoration: none;
}