/* Body styles */
body {
background: #f6f6f6;
margin: 0;
padding: 0;
font-family: 'Cabin', sans-serif;
}
header h1 {
text-indent: 50px;
font-size: 2.5em;
color: #ccc;
text-shadow: rgba(0,0,0,0.5) 1px 0, rgba(0,0,0,0.3) 0 1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) 1px 2px;
font-weight: bold;
text-align: center;
}
/* Wrapper Styles */
#wrapper {
width: 800px;
margin: 0 auto;
margin-top: 50px;
}
/*simpleSlider styles */

/* The slider container */
#sliderContainer {
width: 660px;
margin: 0 auto;
}
/* The slider ul stypes, important to note that we hide all the overflow! */
#simpleSlider {
width: 660px;
height: 300px;
overflow: hidden;
position: relative;
list-style: none;
padding: 0;
margin: 0 auto;
}
/* styles for each item */
#simpleSlider li {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
/* display the first item */
#simpleSlider li:first-child {
display: block;
}
/* Our style for the next button, this can be anything */
#simpleSliderNext {
float: right;
color: #000;
font-size: 70pt;
font-weight: bold;
cursor: pointer;
margin-top: 110px;
}
/* Our style for the previous button, this can be anything */
#simpleSliderPrevious {
float: left;
color: #000;
font-size: 70pt;
font-weight: bold;
cursor: pointer;
margin-top: 110px;
}
li img {
border-radius: 2px;
}
/* Some margin for your navigation */
#simpleSliderNav {
margin: 20px;
}
/* Styling for the navigation items, this can also be anything we want, but I am using circles */
.simpleSliderNavItem {
height: 16px;
width: 16px;
float: left;
background: #000;
margin-left: 10px;
border-radius: 8px;
cursor: pointer;
}
/* styles for the active nav item */
.active {
background: #c10d0d;
}