#slider{ position: relative; } .shadow { width: 100%; height: 168px; position: relative; margin-top: -110px; background: transparent url(../images/shadow.png) no-repeat bottom center; background-size: 100% 100%; /* stretches it */ z-index: -1; display: none; } .sb-description h3 { font-size: 20px; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); } .sb-description h3 a { color: #4a3c27; text-shadow: 0 1px 1px rgba(255,255,255,0.5); } .nav-arrows { display: none; } .nav-arrows a { width: 30px; height: 30px; background:url(../images/arrow.png) no-repeat top left; position: absolute; top: 50%; left: 20px; text-indent: -9000px; cursor: pointer; margin-top: -15px; opacity: 0.9; } .nav-arrows a:first-child{ left: auto; right: 20px; background-position: top right; } .nav-arrows a:hover { opacity: 1; } .nav-dots { text-align: center; position: absolute; bottom: -5px; height: 30px; width: 100%; left: 0; display: none; } .nav-dots span { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 3px; background: #cbbfae; cursor: pointer; box-shadow: 0 1px 1px rgba(255,255,255,0.6), inset 0 1px 1px rgba(0,0,0,0.1); } .nav-dots span.nav-dot-current { box-shadow: 0 1px 1px rgba(255,255,255,0.6), inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 0 3px #cbbfae, inset 0 0 0 8px #fff; } .nav-options { width: 70px; height: 30px; position: absolute; right: 70px; bottom: 0px; display: none; } .nav-options span { width: 30px; height: 30px; /* background: #cbbfae url(../images/options.png) no-repeat top left; */ text-indent: -9000px; cursor: pointer; opacity: 0.7; display: inline-block; border-radius: 50%; } .nav-options span:first-child{ background-position: -30px 0px; margin-right: 3px; } .nav-options span:hover { opacity: 1; }