#container {
	width: 1400px;
	margin: auto;
}
#wrapper {
	float: left; /* important for inline positioning */
	width: 100%; /* 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: #f0f0f0;
	position: absolute;

	height: 85%;
}

.jqcarousal {
	position: absolute;
	left: 0px; /* important (this should be negative number of list items width(including margin) */
	list-style-type: none; /* removing the default styling for unordered list items */
	margin: 0px;
	padding: 0px;
	height: 89%;
	display: inline-block;
}

.toolBar {
	width: 100%;
	height: 5%;
	position: absolute;
	bottom: 0;
}

.jqcarousal li {
	float: left; /* important for inline positioning of the list items */
	width: 1396px; /* fixed width, important */
	/* just styling bellow*/
	padding: 0px;
	height: 80%;

	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
}

.jqcarousal li img {
	margin-bottom: -4px;
	cursor: pointer;
	cursor: hand;
	border: 0px;
}
#prev,
#next {
	float: left;

	width: 40px;
	top: -195px;
	left: 20px;
	padding: 5px;
	background: #fff;
	cursor: pointer;
	cursor: hand;
	text-align: center;
}
#next {
	left: 590px;
}
#prev img,
#next img {
	/*styling*/
	cursor: pointer;
	cursor: hand;
	height: 50%;
	width: 50%;
}
.red {
	background: #ff4949;
}
.blue {
	background: #49dfff;
}
.yellow {
	background: #e5e333;
}
.green {
	background: #6ee533;
}
.icon {
	margin-top: 75px;
	margin-left: 250px;
}

.controls {
	position: absolute;
	right: 0;
}

#pager {
	z-index: 10;
	top: 380px;
	margin: auto;
	text-align: center;
}
#pager a {
	margin-left: 0.5vw;
	font-size: large;
	color: #fb7946;
	text-decoration: none;
}

.dot {
	height: 1vw;
	width: 1vw;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
}