#container {
    width: 700px;
    padding: 10px;
    margin: 0 auto;
    position: relative;
    z-index: 0;
}

#example {
    width: 708px;
    height: 350px;
    position: relative;
    margin: 0px auto;
}

#ribbon {
    position: absolute;
    top: -3px;
    left: -15px;
    z-index: 500;
}

#frame {
    position: absolute;
    z-index: 0;
    width: 739px;
    height: 341px;
    top: -3px;
    left: -80px;
}

/*
	Slideshow
*/

#slides {
    position: absolute;
    top: 15px;
    left: 4px;
    z-index: 100;

    outline: 15px solid white;
    height: 280px;
    width: 700px;
    box-shadow: 10px 15px 18px black;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
    height: 280px;
    width: 700px;
    overflow: hidden;
    position: relative;
    display: none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container div.slide {
    width: 700px;
    height: 280px;
    display: block;
}


/*
	Pagination
*/

.pagination_carousel {
    margin: 26px auto 0;
    width: 280px;
}

.pagination_carousel li {
    float: left;
    margin: 0 1px;
    list-style: none;
}

.pagination_carousel li a {
    display: block;
    width: 12px;
    height: 0;
    padding: 0px;
    padding-top: 12px;
    border: 0px none;
    background-image: url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}

.pagination_carousel li.current a {
    background-position: 0 -12px;
}

/*
	Caption
*/

.caption {
    z-index: 500;
    position: absolute;
    bottom: -100px;
    left: 0;
    right: 0;
    height: 80px;
    padding: 10px 20px;
    background: #000;
    background: rgba(0, 0, 0, 0.6);

    font-size: 1.3em;
    line-height: 1.33;
    color: #fff;
    text-shadow: none;

    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    bottom: 0px;
}

#container:hover .caption {
    bottom: 0px;
}

#frame {
    position: absolute;
    z-index: 0;
    width: 739px;
    height: 341px;
    top: -3px;
    left: -80px;
}

.caption_head_icon {
    position: relative;
    height: 64px;
    width: 64px;
}

.caption_head_icon img {
    position: absolute;
    top: 0px;
    left: 6px;
    height: 50px;
    width: 50px;
    border-radius: 2px;
}

.caption_name {
    position: absolute;
    top: 14px;
    left: 90px;
    font-size: 20px;
    color: white;
    text-decoration: none;
    width: 590px;
    height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.caption_name a {
    color: white;
}

.caption_desc {
    position: absolute;
    top: 65px;
    left: 20px;
    font-size: 11px;
    height: 26px;
    line-height: 12px;
    right: 110px;
    overflow: hidden;
    color: #EBEBEB;
}

.caption_play_btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
}


.caption-stars-block {
    position: absolute;
    top: 41px;
    left: 90px;
    color: white;
}

.icon-joystick {
    background: url(http://badoocdn.com/4228/-/-/i/icons-interests.png) no-repeat;
    background-position: -497px 0px;
    width: 16px;
}







#slides .next, #slides .prev {
    display: block;
    position: absolute;
    text-indent: -999px;
    text-align: left;
    top:69px;
}

#slides .prev {
    left: -81px;
    opacity: 1;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAACDCAQAAACT6QVyAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAAAEgAAABIAEbJaz4AAAAJdnBBZwAAAEIAAACDAEfs3eYAAAWXSURBVHjaxdzLb1RVHMDx7713pp1S5tEyHTqlFCultUAhSnkVDCskJPLwwdKFceFC48LwbxgXJq5MfCQmmhg1hARjdOHGaIKIbQUrgoIppSXYKnTaTufh4rYdysz0nte99yxn7tx+5nfuefzOOVOLYEuaBClaiJEEIEYCrED+dIYtZEnRWvttfxEtdNNJB7G1L/MLEWc7/aTELjaPaKSXPjplPmIWkWAv/URkP2YOkWaQPrX7mUFk2EeP+sf1EU08zXa9W+giBjhMo+730EG0cZSMLkAHYTHEXhMAdUSc43SYIqghujnm1RH7i3AYYo9JgDwiygm6TBPkEE2cot08QQYR53la/CCII9KcZr0/BFFEmhfNtofVxRa4Js5pPwkiiCZe8K8ixBARTolO0vxCOH41ShnEEJv9J6yN6DbfQcsi4hwLhlAfYXHc32Ypgjhscr6ghmjjqeAItREWRwNKlNdADJiZvuogYgwFS6iFOBJcq6iHaKc/aEI1IvCqqEZk/ZjGyiL2h0FYjWjlsfARxnJLdUSMbeEjtsuvNZlHDIRFqCAyfmVXMoi+8AgVRK/Be1qsI8s6WUSauDGARbwhdXn3M21kRWclLqLbICERTVw5vPvY+ZeONtIuxjCJcAnJK4e2HoToBnGGDUTImiOMHuo54L7Q0CrKsEG87rwIzcnRod59lRdXGEIIQ4RLqwjLjIzj1RebQNQlALx3YapM0RuR9o/wzqevTXHH6xY2jVp9hEtI1Sa8/fkbd5n0volNmwHCwVqEt758c5IJSpS9Eepx8CCcvcNtiiKICAkNQrI5uQZhnEUKlMCLEVnaqVUkXD7UM6hLAFtmtPOHALZC0meYoBIJ4wS3nwiZILas7DMBbBqkCNHmhGkC2FLDuEXm4621CD/+cHZSlQAO+wUZFhY2xXOciW6omiFs6thw40KRGRUC2OSlIlHKzT3509XRqjfs18+8m2ajCgEc9gqmfxYWFg6Fxej7/zwXaXtkcc2yBndmb5yHWRXELolG6lbJ4qLzwb1ajD0DagyHPuEtlcqzY5jh0CO5qVIGyvUZg7uz12UZDl3S05o1GSDPcEgrbKwYZjgklA6iPMQ46WzUZDjEFA+jrDA+1GY4LCgvmBljOBTZoXwqxhDDAbo0loqMMGzwzpDqAsqUKLDIAtO5BwcujYxWX/TysxkHxxtxWyMOHoyF6VOfiOWiEyojXz3GLyOVN+dmTn721YJILgoFJpQRjzLuD/08PLxC+OLrebFcFOBPDcRqxkzu/sHLw8OQ+/fEuW/mmKDoHWf3kcmzS4uxjHFbCh/dO5J79ftvZxmnSJGyF2N5eH5FexHRnWtEiBJhHeuZ4T4FCks0gUjAekM7wm7V5PmPOQpLVSFYHTBvbIHdZZRWFgWEclG3TDFtDFCkIB6FhyMBDlsMxaJCEiyVNPCqV78mFQ/PFlE7EgWSQe+RV0cCLmp031rl4fFtnhbNNU0DkYCL4UcCcqTr/fIguEiEFItH5zwPSAX/XFQvF33HfNiRgAJ5Y3tiypGAEe6GHQmASXYGecipNmKWhiBPnNXLCMbZbGzDVhlR5lZwhxnq50Z57vFE2AiYIRrMk7F2ljhOh+KmjEFEmWt0+X1g2gsBJa7T4/dpPC8EFLhOr8RegC8IyHOLXj+bqwgCcvzFVv+iIYaAHNd43K9nQxQBecbo9KeliCOgwBhZP/oNGQSU+J2okcMvGggoc5MptphtK7IIgGnGyJoc6FUQkOc3bDaFi4Ayf3ODdprDRADMMsIcHfrPhw4CYJJfadY6EmMA4Q5wN4np5LBmf02tOB3Uj8RyyfEHYzTQKnkSwWgklkuMbfTLzU39yrMS7KBf9OSSv8lemi462eS1vRVMxtnOZjpIhvP/J2rFJkWSFPGlA0VxmuB/KPXY6s9A/VIAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC) no-repeat;
    width: 66px;
    height: 131px;
}

#slides .next {
    right: -81px;
    opacity: 1;
    background: url(data:image/png;base64,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) no-repeat;
    width: 66px;
    height: 131px;
}



#container {
    border-bottom: 1px solid #C6C6C6;
    border-right: 1px solid #C6C6C6;
    vertical-align: top;
    background-color: #F8F8F8;

    overflow: hidden;
    padding: 10px;

    width: 960px;
    box-sizing: border-box;
}


.slideFull {
    position: relative;
    width: 100%;
    background: url(/public/images/steamdefense.com/SteamDefenseCoverFull.jpg) 50% 0;
    height: 280px;
    display: block;
    z-index: 220;
}
.slideFull a.main {
    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    transition: all 350ms ease;
}
.slideFull a.main img {
    display: block;
    opacity:0;
    -webkit-transition: all 350ms ease;
    -moz-transition: all 350ms ease;
    -ms-transition: all 350ms ease;
    transition: all 350ms ease;
    position: absolute;
    top: 40px;
    left:50%;
    margin-left:-353px;

    transform: scale(0.7,0.7);
    -ms-transform: scale(0.7,0.7); /* IE 9 */
    -webkit-transform: scale(0.7,0.7); /* Safari and Chrome */
    -moz-transform: scale(0.7,0.7); /* Safari and Chrome */
}
.slideFull a.main:hover img, .slideFull:hover a.main img {
    opacity:1;
    top: 30px;
    transform: scale(1,1);
    -ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari and Chrome */
    -moz-transform: scale(1,1); /* Safari and Chrome */
}
.slideFull a.main {
    display:block;
    height:280px;
}