* {
	box-sizing: border-box;
}

div.RandomTitleImages div.middle {
  float:left; /* important for inline positioning */
  width: 100%; /* 880px important (this width = width of list item(including margin) * items shown */
  overflow: hidden;  /* important (hide the items outside the div) */
  /* non-important styling bellow */
  background: #E9E9E9;
  height: 100px;
}

div.RandomTitleImages ul.ImageList {
  position:relative;  
  list-style-type: none; /* removing the default styling for unordered list items */
  margin: 0px;
  padding: 0px;
  width:9999px; /* important */
  /* non-important styling bellow */
  padding-bottom: 10px;
}

div.RandomTitleImages ul.ImageList li{
  float: left; /* important for inline positioning of the list items */
  width: 106px;  /* fixed width, important 200 */
  /* just styling bellow*/
  padding: 0px;
  height: 80px;
  background: #000000;
  margin-top:10px;
  margin-bottom:10px;
  margin-left: 2px;  /* calc. total width 5 */
  margin-right: 2px; /* calc. total width 5 */
}

div.RandomTitleImages ul.ImageList li img {
  margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/
  cursor:pointer;
  cursor: hand;
  border:0px;
  width: 106px;
  height: 80px;
}

div.RandomTitleImages div.left,
div.RandomTitleImages div.right {
  float: left;
  height: 100px;
  width: 14px;
  position: absolute;
  z-index: 1;
  padding: 0;
  box-shadow: 0 0 0 transparent;
}
div.RandomTitleImages div.left img,
div.RandomTitleImages div.right img {
	display: none;
}
div.RandomTitleImages div.left a ,
div.RandomTitleImages div.right a{
	display: block;
	width:  14px;
	height:  100%;
	background:  url(/_layouts/15/GR-AV-Kantonsbibliothek/images/gr-nav-icons.png) no-repeat 0 50%;
}
div.RandomTitleImages div.left a {
	background-position: -46px ;
}
div.RandomTitleImages div.left {
	left: 6px;
}
div.RandomTitleImages div.right {
	right: 5px;
}

div.PreviewImageSlider h2 {
	background: #2F619B;
	color: white !important;
	padding: 5px !important;
	margin-bottom: 10px !important;
}

div.RandomTitleImages div.left a,
div.RandomTitleImages div.right a {
  /*styling*/
  cursor: pointer;
  cursor: hand;
}

div.PreviewImageSlider {
	margin-top:  20px !important;
	float: left;
	width:  100%;
	/*background: #E9E9E9;*/
}

div.RandomTitleImages {
	float: left;
	width:  100%;
	position: relative;
}