5 files changed, 82 insertions, 12 deletions
diff --git a/view/photo_album.tpl b/view/photo_album.tpl
index 3ab9fe723..cc3dcfb9c 100644
--- a/view/photo_album.tpl
+++ b/view/photo_album.tpl
@@ -1,6 +1,6 @@
 <div class="photo-album-image-wrapper" id="photo-album-image-wrapper-$id">
 	<a href="$photolink" class="photo-album-photo-link" id="photo-album-photo-link-$id" title="$phototitle">
-		<img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-album-photo lframe  resize" id="photo-album-photo-$id" />
+		<img src="$imgsrc" alt="$imgalt" title="$phototitle" class="photo-album-photo lframe resize$twist" id="photo-album-photo-$id" />
 		<p class='caption'>$desc</p>		
 	</a>
 </div>
diff --git a/view/photo_top.tpl b/view/photo_top.tpl
index 04a054b52..155cab51d 100644
--- a/view/photo_top.tpl
+++ b/view/photo_top.tpl
@@ -1,7 +1,7 @@
 
-<div class="photo-top-image-wrapper lframe" id="photo-top-image-wrapper-$id">
+<div class="photo-top-image-wrapper lframe" id="photo-top-image-wrapper-$photo.id">
 	<a href="$photo.link" class="photo-top-photo-link" id="photo-top-photo-link-$photo.id" title="$photo.title">
-		<img src="$photo.src" alt="$photo.alt" title="$photo.title" class="photo-top-photo" id="photo-top-photo-$photo.id" />
+		<img src="$photo.src" alt="$photo.alt" title="$photo.title" class="photo-top-photo$photo.twist" id="photo-top-photo-$photo.id" />
 	</a>
 	<div class="photo-top-album-name"><a href="$photo.album.link" class="photo-top-album-link" title="$photo.album.alt" >$photo.album.name</a></div>
 </div>
diff --git a/view/photos_recent.tpl b/view/photos_recent.tpl
index b8cb924b7..1df78cb7b 100644
--- a/view/photos_recent.tpl
+++ b/view/photos_recent.tpl
@@ -8,3 +8,4 @@
 	{{ inc photo_top.tpl }}{{ endinc }}
 {{ endfor }}
 </div>
+<div class="photos-end"></div>
diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 826acc7ef..c556dcead 100644
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -1963,23 +1963,29 @@ aside input[type='text'] {
 }
 
 
-.photos {
+/*.photos {
 	height: auto;
 	overflow: auto;
+}*/
+
+.photos-end {
+	clear: both;
+	margin-bottom: 25px;
 }
 
 .photo-album-image-wrapper {
 	float: left;
 	margin-top: 15px;
 	margin-right: 15px;
-	width: 200px; height: 200px; 
+	margin-left: 15px;
+/*	width: 200px; height: 200px; 
 	overflow: hidden; 
-	position: relative;
+	position: relative; */
 }
 .photo-album-image-wrapper .caption {
 	display: none; 
  	width: 100%;
- 	position: absolute; 
+/* 	position: absolute; */
  	bottom: 0px; 
  	padding: 0.5em 0.5em 0px 0.5em;
  	background-color: rgba(245, 245, 255, 0.8);
@@ -1992,20 +1998,23 @@ aside input[type='text'] {
 
 #photo-album-end {
 	clear: both;
+	margin-bottom: 25px;
 }
 
 .photo-top-image-wrapper {
-	position: relative;
+/*	position: relative; */
 	float: left;
 	margin-top: 15px;
 	margin-right: 15px;
-	width: 200px; height: 200px; 
-	overflow: hidden; 
+	margin-left: 15px;
+	margin-bottom: 15px;
+/*	width: 200px; height: 200px; 
+	overflow: hidden; */
 }
 .photo-top-album-name {
  	width: 100%;
  	min-height: 2em;
- 	position: absolute; 
+/* 	position: absolute;  */
  	bottom: 0px; 
  	padding: 0px 3px;
  	padding-top: 0.5em;
diff --git a/view/theme/slackr/style.css b/view/theme/slackr/style.css
index abb431ab9..41f4e58ee 100644
--- a/view/theme/slackr/style.css
+++ b/view/theme/slackr/style.css
@@ -52,10 +52,70 @@ nav #site-location {
 	box-shadow: 3px 3px 10px -2px #000000;
 }
 
-.contact-entry-photo img, .profile-match-photo img, #photo-photo img, .directory-photo-img {
+.contact-entry-photo img, .profile-match-photo img, #photo-photo img, .directory-photo-img, .photo-album-photo, .photo-top-photo {
 	border-radius: 3px;
 	-moz-border-radius: 3px;
 	box-shadow: 3px 3px 10px 0 #000000;
 }
 
+.photo-top-photo, .photo-album-photo {
+	padding: 10px;
+	max-width: 300px;
+}
+
+.rotleft1 {
+-webkit-transform: rotate(-1deg);
+-moz-transform: rotate(-1deg);
+-ms-transform: rotate(-1deg);
+-o-transform: rotate(-1deg);
+}
+
+.rotleft2 {
+-webkit-transform: rotate(-2deg);
+-moz-transform: rotate(-2deg);
+-ms-transform: rotate(-2deg);
+-o-transform: rotate(-2deg);
+}
+
+.rotleft3 {
+-webkit-transform: rotate(-3deg);
+-moz-transform: rotate(-3deg);
+-ms-transform: rotate(-3deg);
+-o-transform: rotate(-3deg);
+}
+
+.rotleft4 {
+-webkit-transform: rotate(-4deg);
+-moz-transform: rotate(-4deg);
+-ms-transform: rotate(-4deg);
+-o-transform: rotate(-4deg);
+}
+
+.rotright1 {
+-webkit-transform: rotate(1deg);
+-moz-transform: rotate(1deg);
+-ms-transform: rotate(1deg);
+-o-transform: rotate(1deg);
+}
+
+.rotright2 {
+-webkit-transform: rotate(2deg);
+-moz-transform: rotate(2deg);
+-ms-transform: rotate(2deg);
+-o-transform: rotate(2deg);
+}
+
+.rotright3 {
+-webkit-transform: rotate(3deg);
+-moz-transform: rotate(3deg);
+-ms-transform: rotate(3deg);
+-o-transform: rotate(3deg);
+}
+
+.rotright4 {
+-webkit-transform: rotate(4deg);
+-moz-transform: rotate(4deg);
+-ms-transform: rotate(4deg);
+-o-transform: rotate(4deg);
+}