.design-portfolio{
float: left;
width: 260px;
margin: 0 20px 10px 0;
}
.designer-portfolio{
width: 260px;
margin: 0 auto;
}
.webdesign-portfolio{
float: right;
width: 320px;
margin: 0 20px 20px 20px;
}
.flashdesign-portfolio{
width: 320px;
margin: 0 20px 50px 20px;
}

.animation,.game,.website,.character,.design{
text-align: center;
}

.pepslidewrapper{
position: relative; /* Do not change this value */
height: 300px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
}

.animation,.game,.character,.design{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: #eeeeee;
width: 260px;
padding: 10px;
visibility: hidden;
}
.website{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: #eeeeee;
width: 320px;
padding: 10px;
visibility: hidden;
}

.pepslidetoggler{ /*style for DIV used to contain toggler links. */
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
margin-bottom: 5px;
}

.pepslidetoggler a{ /*style for every navigational link within toggler */
display: inline-block;
background: #cccccc;
border: 1px solid #dbdbdb;
color: #ffffff;
padding: 1px 3px;
margin-right: 3px;
font-weight: bold;
text-decoration: none;
}

.pepslidetoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #dbdbdb;
color: black;
}

.pepslidetoggler a:hover{
background: #dbdbdb;
color: black;
}

.pepslidetoggler a.prev, .pepslidetoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.pepslidetoggler a.prev:hover, .pepslidetoggler a.next:hover{
background: #ffffff;
color: #999999;
border: 1px solid #eeeeee;
}