Photo gallery styling

diff --git a/styles.css b/styles.css
index af9bfd9..54d0c8b 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -105,7 +105,7 @@ body {
   list-style-type: disc;
 }
 .container .inner-container #toolbox ul li {
-  margin: 0 3px 15px 0;
+/*  margin: 0 3px 15px 0;*/
 }
 @media only screen and (max-width: 30em) {
   .container .inner-container #toolbox ul {
@@ -668,3 +668,248 @@ footer ul.images li img.latterns {
 .ui-datepicker {
   font-family: Arial, sans-serif !important;
 }
+
+
+/* Photo Gallery */
+
+
+/*#media-photo-gallery {
+    width:100% !important;
+}*/
+
+.gallery {
+    clear: both;
+    list-style: none outside none;
+    margin: 20px 0 10px;
+    padding: 0;
+    width: 100%;
+}
+
+/*#photo_wrapper, #photo_cats_wrapper {
+    clear: left;
+    margin-top: 0;
+}
+#photo_wrapper h2, #photo_cats_wrapper h2 {
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    padding: 5px;
+    width: 100%;
+}
+#photo_wrapper p, #photo_cats_wrapper p {
+    color: #333;
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    padding: 5px;
+    width: 100%;
+}*/
+.gallery {
+    clear: both;
+    list-style: none outside none;
+    margin: 20px 0 10px;
+    padding: 0;
+    width: 100%;
+}
+.gallery:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+.gallery li {
+    background: none repeat scroll 0 0 #f7f3e9;
+    padding: 1%;
+    display: block;
+    float: left;
+}
+
+.gallery li a {
+    display: block;
+    overflow: hidden;
+    padding: 10px 10px 5px 10px;
+    width: 100%;
+}
+.gallery li a img {
+    display: block;
+    width: 100%;
+}
+.gallery li a span.phototitle {
+    color: #a9aba9;
+    display: block;
+    font-size: 12px;
+    padding: 5px 0 0;
+    width: 100%;
+}
+#Gallery li a:hover span.photoHead {
+    color: #3fac46;
+}
+/*.ps-caption h1, .ps-caption h2, .ps-caption h3 {
+    color: #fff;
+}*/
+/*#photo_wrapper h3 {
+    padding-bottom: 0;
+}*/
+
+.photoimg img{
+    margin-bottom: 8px !important;
+}
+
+.imgBorderMe {
+    padding-bottom: 5px;
+    border: 1px solid #dddfdd;
+    border-radius: 3px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
+    background-color: #fdfdff;
+}
+
+#media-photo-gallery {
+    font-size:12px;
+}
+#gallery {
+    clear:both;
+}
+.gallery {
+    text-align: center;
+    list-style: none outside none;
+    padding: 10px 0 0 0;
+}
+.gallery:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+.gallery li img {
+    width: 100%;
+    border: 1px solid #2797AB;
+    display: block;
+    height: auto;/*width: 143px;*/
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.gallery li:hover img {
+    border: 1px solid #B8C728;
+}
+.gallery .ui-content {
+    overflow: hidden;
+}
+.photoHead {
+    line-height: 120%;
+    font-size: 12pt;
+    color: #336633;
+}
+
+/*.photoHead {
+    text-decoration: none !important;
+}*/
+/*#inside #main {
+    width: 720px;
+}*/
+/*#staticBanners {
+    display:none;
+}*/
+/*.media-gallery-download {
+    font-size: 10px;
+    min-height: 22px;
+    padding-bottom: 5px !important;
+}
+.media-gallery-download a {
+    padding: 2px !important;
+    display: inline !important;
+}
+#media-photo-gallery div {
+    clear:none;
+    font-size: 1em;
+    height: auto;
+    margin: 0;
+}
+#media-photo-gallery div p {
+    display: block;
+    color: black;
+    padding: 5px;
+    text-shadow: none;
+    font-weight: normal;
+}
+#media-photo-gallery div a {
+}*/
+/*#filter_wrapper {
+    overflow: hidden;
+}
+#cat_filter_wrapper {
+    float: left;
+    height: 56px;
+}*/
+
+/*#photoCategoryLabel {
+    float: left;
+}*/
+/*#photoCategoryId {
+    float: left;
+    clear: left;
+    width: 180px;
+    height: 24px;
+    border: 1px solid #ABADB3;
+    box-sizing: border-box;
+    padding:.2em;/.3em;
+}
+#photoCategoryId option {
+    padding: 3px;
+}
+#media-login #username {
+    float: left;
+    width: 100px;
+    height: 10px;
+    padding: 5px;
+    margin: 0 5px 0 0;
+    border: 1px solid #ABADB3;
+}
+#media-login #password {
+    float: left;
+    width: 100px;
+    height: 10px;
+    padding: 5px;
+    margin: 0 5px 0 0;
+    border: 1px solid #ABADB3;
+}
+
+.photoHead {
+    display: block;
+    text-align: center;
+    min-height: 38px;
+    margin: 0 !important;
+    padding: 5px;
+    background: none;
+}
+.captionWrapper {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}*/
+/*.captionTitleWrapper {
+    display: block;
+    width: 50%;
+    float: left;
+    font-size: 18px;
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #FFF;
+    text-align: left;
+    padding: 10px 20px;
+    margin: 0;
+}
+.captionDescWrapper {
+    display: block;
+    width: 50%;
+    float: left;
+    clear: left;
+    font-size: 14px;
+    font-size: 1.4rem;
+    color: #FFF;
+    text-align: left;
+    padding: 0 20px 10px 20px;
+    margin: 0;
+}*/