added rules for videos and images app

diff --git a/styles.css b/styles.css
index 3a3bde8..162f816 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -9,7 +9,8 @@ body {
        font-size: 16px;\r
        font-size: 1.6rem;\r
        font-family: 'Source Sans Pro', sans-serif;\r
-       background: url(assets/debut_dark.png);\r
+       background-image: url(assets/debut_dark.png);\r
+    background-attachment: fixed;\r
     }\r
 /* glm framework */\r
 .glmTxtImg {\r
@@ -32,6 +33,9 @@ body {
        margin-bottom: 0;\r
        *zoom: 1;\r
     }\r
+img {\r
+    border: 0;\r
+    }\r
 /* Clearfix */\r
 .clearfix:before, .clearfix:after {\r
     content: " ";\r
@@ -46,6 +50,9 @@ body {
        margin: 0 auto;\r
        position: relative;\r
        }\r
+.slides {\r
+    width: 1090px;\r
+    }\r
 .rHeader  {\r
        background: url(assets/bgHeader.png) repeat-x;\r
     }\r
@@ -92,8 +99,11 @@ nav a {
     padding-bottom: 19px;\r
     border-bottom: 3px solid black;\r
     }\r
+#inside .slides {\r
+    height: 140px;\r
+    background: url(assets/topInside.png) no-repeat center top;\r
+    }\r
 #hHlines {\r
-    margin-top: 19px;\r
        color: #263c3c;\r
     }\r
 #hHlines ul,\r
@@ -193,6 +203,7 @@ nav a {
 /* Toolbox */\r
 #category {\r
        margin-bottom: 2em;\r
+    margin-top: 1em;\r
        }\r
 .imageright,\r
 .imageleft {\r
@@ -223,6 +234,14 @@ a:hover {
 #toolbox h1 {\r
        margin-top: 0;\r
        }\r
+#category li,\r
+.listing li {\r
+    list-style-type: none;\r
+    background-image: url(assets/bullet2.png);\r
+    background-repeat: no-repeat;\r
+    background-position: 0px 3px;\r
+    padding-left: 20px;\r
+    }\r
 /* footer */\r
 .row.rFooter {\r
        background: #364759;\r
@@ -287,3 +306,176 @@ footer p i {
 .xls    { background-image: url(images/file-ext/xls.gif);}\r
 .zip    { background-image: url(images/file-ext/zip.png);}\r
 .rar    { background-image: url(images/file-ext/rar.gif);}\r
+/* Video Gallery */\r
+\r
+\r
+ul#videoGallery {\r
+    display: block;\r
+    width: 100%;\r
+    overflow: hidden;\r
+    margin: 0;\r
+    padding: 0;\r
+    list-style-type: none;\r
+}\r
+ul#videoGallery li {\r
+    display: block;\r
+    float: left;\r
+    width: 200px;\r
+    margin-right: 20px;\r
+    margin-bottom: 20px;\r
+    padding: 0;\r
+    border: 1px solid #DDDFDD;\r
+    background: #FDFDFF;\r
+    border-radius: 3px;\r
+    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);\r
+    -moz-box-shadow:    1px 1px 3px rgba(0, 0, 0, 0.05);\r
+    box-shadow:         1px 1px 3px rgba(0, 0, 0, 0.05);\r
+    }\r
+ul#videoGallery li:nth-child(3n+4) {\r
+    clear: left;\r
+    background: red;\r
+    }\r
+\r
+ul#videoGallery li a {\r
+    position: relative;\r
+    z-index: 10;\r
+    display: block;\r
+    overflow: hidden;\r
+    text-decoration: none;\r
+    margin: 10px;\r
+    }\r
+ul#videoGallery li a img {\r
+    display: block;\r
+    width: 170px;\r
+    padding: 4px;\r
+    }\r
+ul#videoGallery li a span.vidtitle {\r
+    display: block;\r
+    position: relative;\r
+    /* padding: 5px 30px 0 0; */\r
+    padding-right: 20px;\r
+    margin: 10px;\r
+    color: #777;\r
+    font-size: 12px;\r
+    min-height: 27px;\r
+}\r
+ul#videoGallery li a:hover span.vidtitle {\r
+    color: #29ABE2;\r
+    text-decoration: none;\r
+}\r
+ul#videoGallery li a span.vidtitle span.play {\r
+    display: block;\r
+    position: absolute;\r
+    z-index: 11;\r
+    width: 25px;\r
+    height: 27px;\r
+    right: 0;\r
+    top: 5px;\r
+    background: url(assets/video_overlay.png)0 0 no-repeat;\r
+}\r
+ul#videoGallery li:hover a span.vidtitle span.play {\r
+    background-position: 0 -27px;\r
+}\r
+\r
+/* Image Library */\r
+#photo_wrapper, #photo_cats_wrapper {\r
+    clear: left;\r
+    margin-top: 20;\r
+}\r
+#photo_wrapper h3, #photo_cats_wrapper h3 {\r
+    font-size: 20px;\r
+    font-weight: normal;\r
+    color: #2783B7;\r
+    padding: 30px 0 0 0;\r
+}\r
+#photo_wrapper p, #photo_cats_wrapper p {\r
+    display: block;\r
+    width: 100%;\r
+    overflow: hidden;\r
+    margin: 0;\r
+    padding: 5px;\r
+    color: #333;\r
+}\r
+.gallery {\r
+    list-style: none;\r
+    padding: 0;\r
+    margin: 0;\r
+    width: 100%;\r
+    clear: both;\r
+}\r
+#photo_wrapper .gallery, #photo_cats_wrapper .gallery {\r
+    margin: 20px 0 0 0;\r
+}\r
+.gallery:after {\r
+    clear: both;\r
+    content: ".";\r
+    display: block;\r
+    height: 0;\r
+    visibility: hidden;\r
+    }\r
+.gallery li {\r
+    display: block;\r
+    float: left;\r
+    /* width: 22%; */\r
+    /* margin: 0 1.5% 24px 1.5%; */\r
+    margin: 0;\r
+    padding: 0;\r
+    border: 1px solid #CCC;\r
+    background: #F5F5F5;\r
+    border-radius: 3px;\r
+    margin: 0 20px 20px 0;\r
+    \r
+\r
+}\r
+/* .gallery li:nth-child(4n-3) {\r
+    clear: left;\r
+    width: 22.75%;\r
+    margin: 0 3% 24px 0;\r
+}\r
+.gallery li:nth-child(4n-2) {\r
+    width: 22.75%;\r
+    margin: 0 3% 24px 0;\r
+}\r
+.gallery li:nth-child(4n-1) {\r
+    width: 22.75%;\r
+    margin: 0 3% 24px 0;\r
+}\r
+.gallery li:nth-child(4n) {\r
+    width: 22.75%;\r
+    margin: 0 0 24px 0;\r
+}\r
+*/\r
+.gallery li a {\r
+    display: block;\r
+    overflow: hidden;\r
+    padding: 10px;\r
+    text-decoration: none;\r
+}\r
+.gallery li a img {\r
+    display: block;\r
+    width: 100%;\r
+    border: 1px solid #CFC4A7;\r
+}\r
+span.phototitle {\r
+    display: block;\r
+    width: 100%;\r
+    padding: 0 5px;\r
+    color: #777;\r
+    font-size: 12px;\r
+    text-align: center;\r
+    text-decoration: none;\r
+}\r
+.gallery li:hover {\r
+    border: 1px solid #7BBDE1;\r
+    background: #EDF2F8;\r
+}\r
+.gallery li:hover a img {\r
+    border: 1px solid #7BBDE1;\r
+}\r
+.gallery li:hover span.phototitle {\r
+    color: #7BBDE1;\r
+    text-decoration: none;\r
+}\r
+.gallery li {\r
+    background-image: none !important;\r
+    }
\ No newline at end of file