.demo{
background: #efefef;
padding: 7px;
margin: 0;
}

.bubbleInfo {position: relative; float: right; /*clear: both;*/}
.popup {position: absolute; display: none; background-color: white; z-index: 1000; /* keeps the popup hidden if no JS available */ }

#viewport{
width: 487px; /*  Defines the size of the visible part of the carousel
                  Attention : if you only want to see plain items in the viewport,
                  the width of the viewport should take into account of :
                - the items width
                - the right and left padding of items
                - the number of items you want to see in the viewport
              */
overflow:hidden; /* Hides extra elements, those outside the viewport area */
position: relative;
float: left;
/*clear: both;*/
}
#viewport ul{
position: relative;  /* Enables positionning of elements inside viewport */
padding: 0; /* Resets default - User Agent - style */
margin: 0;
}
#viewport li{
width: 162px; /* Defines the size of inner element */
height: 230px;
float: left; /* Places list items side by side*/
list-style: none; /* Resets default - User Agent - style */
position: relative;
/* Cosmetic */
background-color: #fff;
margin: 0;
/*padding: 10px;*/
text-align:center;
}

#simplePrevious, #simplePause, #simpleNext{
cursor: pointer;
font-size: 0.8em;
text-decoration: underline;
}


.popup {
 background-color: #f5f5f5;
 height: 100px;
 text-align: left;
 padding: 5px;
 font-size: 13px;
}
.popup a {text-decoration: underline;}
.popup a:hover {text-decoration: none;}


.trigger {
    display: block;
    height: 200px;
    width: 150px;
 overflow: hidden;
}

.trigger img {
    margin-top: 30px;
}