Enhancements

- normal, reverse, random order
- slideshow now orders correctly
- slideshow now starts on 1st slide instead of 2nd
- new example theme

css/smoothslides.theme.css

@@ -1,8 +1,4 @@
-.ss-slides-wrap {
-    position: relative;
-    display: block;
-    line-height: 0px;
-}
+/* Captions */
 .ss-capwrap {
     text-align:center;
     position:absolute;
@@ -11,26 +7,28 @@
     text-align: center;
 }
 .ss-caption {
-    background: #444444; 
+    background: #fff; 
     border-radius:4px;
-    color:#fff;    
+    color:#444;    
     padding:15px 10px;
     font-family:sans-serif;
     font-size:16px;
     display: inline-block;
 }
+
+/* Pagination */
 .ss-pag-wrap {
     position: absolute;
     text-align: center;
     width: 100%;
-    padding-top:5px;
+    padding-top:15px;
 }
 .ss-paginate {
     display: inline-block;
     font-size: 20px;
     padding: 5px 10px;
     border-radius: 4px;
-    background: #444444;  
+    background: #fff;  
 }
 .ss-paginate a:link,
 .ss-paginate a:visited {
@@ -39,11 +37,51 @@
     height: 12px;
     border-radius: 6px;
     margin: 3px 6px;
-    background: #FFF;
+    background: #4C86DD;
+    -webkit-transition:all .2s ease-out;
+}
+.ss-paginate a:hover {
+    box-shadow: 0 0px 0 2px #2A89C5;
 }
 .ss-current {
-    background:#36f9a5!important;
-    box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(54, 249, 165, 0.27), 0 2px 2px #000;
+    background: #FFF!important;
+    box-shadow: 0 0px 0 2px #2A89C5;
+}
+
+/* Previous & Next Buttons */
+#ss-prev, #ss-next {
+    position: absolute;
+    top: 50%;
+    z-index: 50;
+    font-size: 12px;
+    font-family: serif;
+    margin-top: -15px;
+    line-height: 31px;
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 17px;
+    text-align: center;
+    border:2px solid #fff;
+}
+#ss-prev:hover, #ss-next:hover {
+    color:#444;
+    background: #fff; 
+}
+#ss-prev {
+    left:10px;
+}
+#ss-next {
+    right:10px;
+}
+
+/* Probably don't need to edit below here */
+.ss-slides-wrap {
+    position: relative;
+    display: block;
+    line-height: 0px;
 }
 .ss-slides {
     position:relative;
@@ -77,30 +115,4 @@
     -webkit-transition: none!important;
     -moz-transition:none!important;
     transition: none!important;
-}
-#ss-prev, #ss-next {
-    position: absolute;
-    top: 50%;
-    z-index: 50;
-    font-size: 55px;
-    font-family: serif;
-    margin-top: -20px;
-    line-height: 34px;
-    width: 40px;
-    height: 40px;
-    display: inline-block;
-    color: #a7a7a7;
-    background: #FFF;
-    text-decoration: none;
-    border-radius: 30px;
-    text-align: center;
-}
-#ss-prev:hover, #ss-next:hover {
-    color:#000;
-}
-#ss-prev {
-    left:-23px;
-}
-#ss-next {
-    right:-23px;
 }

css/stylesheet.css

@@ -0,0 +1,97 @@
+/**************************************/
+/* THIS IS UNRELATED TO THE SLIDESHOW */
+/**************************************/
+
+body, html {
+	padding:0px;
+	margin:0px;
+	background: #4C86DD;
+	color:#fff;
+	font-size: 18px;	
+	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+	text-align: center;
+}
+header {
+	background:#fff;
+	color:#555;
+	font-size: 14px;
+}
+header i {
+	background:#999;
+	color:#fff;
+	width:18px;
+	height:18px;
+	display: inline-block;
+	border-radius:9px;
+}
+.head-centering {	
+	max-width: 900px;
+	margin:0 auto;
+	padding:30px;
+}
+header h1 {
+	font-size: 60px;
+}
+.page{
+	padding: 5px 0px 30px 0px;
+	max-width: 800px;
+	margin: 0 auto;
+}
+.page ul {
+	text-align: left;
+	display: block;
+	margin: 0 auto;
+	background: #407AC4;
+	max-width: 900px;
+	padding: 30px 60px;
+}
+header a:link,
+header a:visited {
+	color:#222;
+}
+hr {
+	border:0;
+	border-bottom: 2px solid #fff;
+}
+a:hover {
+	color:#449a8c;
+}
+pre {
+	background: #333;
+	padding: 10px;
+	overflow: auto;
+	color: #BBB7A9;
+}
+.button {
+	text-decoration: none;
+	color: #fff;
+	background: none;
+	text-align: center;
+	border: 2px solid #fff;
+	padding: 8px 15px 12px 15px;
+	margin:5px 0;
+	display: inline-block;
+	font-size: 20px;
+	line-height: 1em;
+}
+.button:hover {
+	background:#fff;
+	color:#4C86DD;
+}
+.demo-centering {
+	max-width: 800px;
+	margin:0 auto;
+	padding:30px 30px 40px 30px;
+	-webkit-transition:padding .4s ease-out;
+}
+
+@media all and (max-width: 768px) {
+	.demo-centering {
+		padding:0 0 40px 0;
+	}
+}
+@media all and (max-width: 450px) {
+	header h1 {
+		font-size: 30px;
+	}
+}