add cms, add todo
[ssproject1617.git] / testcms-final-anon / themes / default / css / style.css
diff --git a/testcms-final-anon/themes/default/css/style.css b/testcms-final-anon/themes/default/css/style.css
new file mode 100644 (file)
index 0000000..fb02058
--- /dev/null
@@ -0,0 +1,551 @@
+/**\r
+ *    TestCMS' default theme\r
+ */\r
\r
+::-webkit-selection {\r
+       background: #ffc;\r
+       color: #222;\r
+}\r
+::-moz-selection {\r
+       background: #ffc;\r
+       color: #222;\r
+}\r
+::selection {\r
+       background: #ffc;\r
+       color: #222;\r
+}\r
+\r
+html {\r
+    min-height: 100%;\r
+}\r
+\r
+body, input, textarea, button {\r
+       color: #777;\r
+       font: 16px/26px "Helvetica Neue", sans-serif;\r
+}\r
+\r
+h1 {\r
+    font-size: 40px;\r
+    line-height: 48px;\r
+    font-weight: bold;\r
+    \r
+    color: #333;\r
+\r
+    margin-bottom: 30px;\r
+}\r
+\r
+a, a * {\r
+    -webkit-transition: color .25s;\r
+    -moz-transition: color .25s;\r
+    -ms-transition: color .25s;\r
+    -o-transition: color .25s;\r
+    transition: color .25s;\r
+}\r
+    a:active {\r
+        -webkit-transform: translateY(1px);\r
+    }\r
+    \r
+.content a, .comments a {\r
+    color: #2082ab;\r
+}\r
+    .content a:hover, .comments a:hover {\r
+        color: #222;\r
+    }\r
+\r
+.wrap, .content {\r
+       width: 900px;\r
+       margin: 0 auto;\r
+       \r
+       text-align: left;\r
+}\r
+    .content {        \r
+        width: 730px;\r
+        margin: 60px auto 80px;\r
+    \r
+        padding-left: 170px;\r
+    }\r
+        .content img, .content .items {\r
+            margin-left: -170px;\r
+            \r
+            width: 900px;\r
+            height: auto;\r
+        }\r
+        .content p {\r
+            padding-bottom: 15px;\r
+        }\r
+\r
+form#search {\r
+       position: relative;\r
+       background: #ddd;\r
+       \r
+       padding: 10px 0;\r
+}\r
+       form#search input {\r
+               padding: 8px 12px;\r
+               color: #333;\r
+               \r
+               border: none;\r
+               width: 900px;\r
+       }\r
+       \r
+button {\r
+    background: #2082ab;\r
+\r
+    color: #fff;\r
+    font-weight: bold;\r
+\r
+    border: none;\r
+    \r
+    padding: 8px 15px;\r
+    \r
+    -webkit-border-radius: 3px;\r
+    -moz-border-radius: 3px;\r
+    border-radius: 3px;\r
+}\r
+\r
+header#top {\r
+       background: #f3f3f3;\r
+       padding: 50px 0 20px;\r
+}\r
+       header#top div {\r
+               position: relative;\r
+       }\r
+       header#top a#logo {\r
+               color: #444;\r
+               font-size: 18px;\r
+               line-height: 21px;\r
+               \r
+               text-decoration: none;\r
+               \r
+               display: block;\r
+               width: 130px;\r
+               \r
+               padding-bottom: 4px;\r
+       }\r
+           header#top a#logo:hover, header#top nav li.active a, header#top nav li.active a:hover {\r
+               color: #2082ab;\r
+           }\r
+       header#top nav {\r
+               position: absolute;\r
+               left: 170px;\r
+               bottom: 0;\r
+       }\r
+               header#top nav li {\r
+                       float: left;\r
+                       position: relative;\r
+                       \r
+                       margin-right: 50px;\r
+               }\r
+                   header#top nav li.active:after {\r
+                       content: '';\r
+                       display: block;\r
+\r
+                       position: absolute;\r
+                       left: 50%;\r
+                       bottom: -20px;\r
+                       \r
+                       width: 0;\r
+                       height: 0;\r
+                       \r
+                       border-left: 8px solid transparent;\r
+                       border-right: 8px solid transparent;\r
+                       border-bottom: 8px solid #fff;\r
+                       \r
+                       margin-left: -8px;\r
+                   }\r
+               header#top nav li a {\r
+                       color: #888;\r
+                       \r
+                       font-weight: bold;\r
+                       font-size: 14px;\r
+                       \r
+                       text-decoration: none;\r
+                       \r
+                       display: block;\r
+               }\r
+                   header#top nav li a:hover {\r
+                       color: #444;\r
+                   }\r
+       header#top img#search {\r
+               cursor: pointer;\r
+               \r
+               position: absolute;\r
+               right: 0;\r
+               bottom: 0;\r
+       }\r
+       \r
+ul.items {\r
+    list-style: none;\r
+    \r
+    padding: 60px 0 80px;\r
+}\r
+    ul.items li {\r
+        clear: both;\r
+        overflow: hidden;\r
+        \r
+        padding-bottom: 20px;\r
+    }\r
+    ul.items li a {\r
+        display: block;\r
+        text-decoration: none;\r
+    }\r
+        ul.items li a time {\r
+            display: block;\r
+            float: left;\r
+            \r
+            color: #aaa;\r
+            font-size: 13px;\r
+            line-height: 34px;\r
+            \r
+            width: 130px;\r
+            padding-right: 40px;\r
+            text-align: right;\r
+        }\r
+            ul.items li a:hover time {\r
+                color: #7ac1df;\r
+            }\r
+        ul.items li a h2 {\r
+            font-size: 28px;\r
+            line-height: 30px;\r
+            \r
+            color: #555;\r
+            \r
+            display: block;\r
+            float: left;\r
+            \r
+            width: 730px;\r
+        }\r
+            ul.items li a:hover h2 {\r
+                color: #2082ab;\r
+            }\r
+            \r
+section.comments {\r
+    width: 900px;\r
+    margin: 0 auto 50px;\r
+    padding-top: 30px;\r
+    \r
+    text-align: left;\r
+    \r
+    border-top: 1px solid #eee;\r
+}\r
+    section.comments h1, section.comments form.commentform legend {\r
+        font-weight: bold;\r
+        font-size: 22px;\r
+        \r
+        color: #555;\r
+    }\r
+        section.comments h1 a {\r
+            float: right;\r
+            font-size: 15px;\r
+        }\r
+    section.comments ul {\r
+        list-style: none;\r
+        overflow: hidden;\r
+        \r
+        padding-left: 170px;\r
+        padding-bottom: 30px;\r
+    }\r
+        section.comments ul li {\r
+            float: left;\r
+            width: 670px;\r
+            \r
+            margin-bottom: 30px;\r
+            padding: 30px;\r
+            \r
+            background: #fafafa;\r
+        }\r
+        section.comments h2 {\r
+            color: #555;\r
+            font-size: 18px;\r
+            line-height: 30px;\r
+            \r
+            float: left;\r
+            width: 250px;\r
+        }\r
+        section.comments time {\r
+            float: right;\r
+            \r
+            font: italic 13px/30px Georgia, serif;\r
+        }\r
+        section.comments div.content {\r
+            clear: both;\r
+            width: auto;\r
+\r
+            margin: 0;\r
+            padding: 20px 0 0;\r
+            \r
+            font-size: 15px;\r
+            line-height: 25px;\r
+        }\r
+        \r
+    section.comments form.commentform {\r
+        clear: both;\r
+        padding-left: 170px;\r
+        padding-top: 40px;\r
+        \r
+        border-top: 1px solid #eee;\r
+    }\r
+        section.comments form.commentform p.notification {\r
+            clear: both;\r
+            float: none;\r
+            padding-bottom: 25px;\r
+            \r
+            font-weight: bold;            \r
+        }\r
+            section.comments form.commentform p.notification.error {\r
+                color: #c22a0a;\r
+            }\r
+        section.comments form.commentform legend {\r
+            margin-left: -170px;\r
+            margin-bottom: 20px;\r
+        }\r
+        section.comments form.commentform p {\r
+            float: left;\r
+            width: 365px;\r
+            \r
+            position: relative;\r
+        }\r
+            section.comments form.commentform p.email {\r
+                position: relative;\r
+                right: -15px;\r
+            }\r
+            section.comments form.commentform p.textarea {\r
+                width: 630px;\r
+            }\r
+            section.comments form.commentform p em {\r
+                font: italic 13px Georgia, serif;\r
+                \r
+                position: absolute;\r
+                top: 5px;\r
+                right: 15px;\r
+                \r
+                color: #aaa;\r
+            }\r
+        section.comments form.commentform label {\r
+            display: block;\r
+            font-size: 15px;\r
+            \r
+            padding-bottom: 8px;\r
+        }\r
+        section.comments form.commentform input, section.comments form.commentform textarea {\r
+            width: 320px;\r
+            padding: 8px 14px;\r
+            margin-bottom: 20px;\r
+            \r
+            border: 1px solid #bbb;\r
+        }\r
+            section.comments form.commentform textarea {\r
+                width: 700px;\r
+                min-height: 150px;\r
+                max-height: 400px;\r
+                resize: vertical;\r
+            }\r
+        section.comments form.commentform button {\r
+            margin-bottom: 50px;\r
+        }\r
+            \r
+section.footnote {\r
+    clear: both;\r
+    width: 730px;\r
+\r
+    font: italic 12px/19px Georgia, serif;\r
+    text-align: left;\r
+    color: #aaa;\r
+    \r
+    margin: 0 auto 60px;\r
+    padding-left: 170px;\r
+}\r
+            \r
+footer#bottom {\r
+    width: 130px;\r
+    height: 80px;\r
+    \r
+    border-top: 1px solid #f5f5f5;\r
+    padding-top: 20px;\r
+    \r
+    text-align: left;\r
+    position: relative;\r
+}\r
+    footer#bottom small {\r
+        width: 730px;\r
+        display: block;\r
+        float: left;\r
+        \r
+        font-size: 13px;\r
+        color: #999;\r
+    }\r
+        footer#bottom small a {\r
+            color: #666;\r
+        }\r
+        footer#bottom small a:hover {\r
+            color: #333;\r
+        }\r
+    footer#bottom ul {\r
+        clear: both;\r
+        list-style: none;\r
+        \r
+        position: relative;\r
+        top: -8px;\r
+        \r
+        width: 730px;\r
+    }\r
+        footer#bottom ul li {\r
+            display: inline-block;\r
+            float: left;\r
+        }\r
+        footer#bottom ul a {\r
+            color: #aaa;\r
+            font-size: 11px;\r
+            line-height: 11px;\r
+            \r
+            padding-right: 15px;\r
+        }\r
+            footer#bottom ul a:hover {\r
+                color: #777;\r
+            }\r
+    footer#bottom a#attribution {\r
+        display: block;\r
+        \r
+        position: absolute;\r
+        left: 876px;\r
+        top: 18px;\r
+        \r
+        width: 24px;\r
+        height: 22px;\r
+        \r
+        background: url('../img/attribution.gif');\r
+        text-indent: -999em;\r
+    \r
+        opacity: .5;\r
+        \r
+        -webkit-transition: opacity .25s;\r
+        -moz-transition: opacity .25s;\r
+        -ms-transition: opacity .25s;\r
+        -o-transition: opacity .25s;\r
+        transition: opacity .25s;\r
+    }\r
+        footer#bottom a#attribution:hover {\r
+            opacity: 1;\r
+        }\r
+    \r
+@media only screen and (max-width: 900px), only screen and (max-device-width: 480px) {\r
+\r
+    .wrap, .content {\r
+        width: 90%;\r
+        margin: 0 5%;\r
+        padding-left: 0;\r
+    }\r
+        .content h1 {\r
+            padding-top: 50px;\r
+        }\r
+    \r
+    form#search {\r
+        padding: 10px 5%;\r
+    }\r
+        form#search input {\r
+            width: 100%;\r
+        }\r
+\r
+    header#top {\r
+        overflow: hidden;\r
+        padding-top: 40px;\r
+    }\r
+        header#top a#logo {\r
+            width: 100%;\r
+            padding-bottom: 15px;\r
+        }\r
+        header#top nav {\r
+            position: static;\r
+        }\r
+            header#top nav li {\r
+                margin-right: 30px;\r
+            }\r
+        header#top img#search {\r
+            bottom: -20px;\r
+        }\r
+        \r
+    ul.items {\r
+        padding-bottom: 20px;\r
+    }\r
+        ul.items li a {\r
+            overflow: hidden;\r
+            padding-bottom: 20px;\r
+        }\r
+            ul.items li a time, ul.items li a h2 {\r
+                float: none;\r
+                clear: both;\r
+                \r
+                width: 100%;\r
+            }\r
+            ul.items li a time {\r
+                line-height: 22px;\r
+                text-align: left;\r
+            }\r
+            \r
+    section.comments {\r
+        margin-top: 40px;\r
+        width: auto;\r
+    }\r
+    section.comments h1 {\r
+        padding: 0 20px;\r
+        line-height: 20px;\r
+    }\r
+    section.comments ul {\r
+        padding: 0;\r
+    }\r
+        section.comments ul li {\r
+            width: 90%;\r
+            padding: 20px 5%;\r
+            margin-bottom: 0;\r
+            border-bottom: 1px solid #ddd;\r
+            \r
+            position: relative;\r
+        }\r
+            section.comments ul li:last-child {\r
+                border-bottom: none;\r
+            }\r
+            section.comments ul li time {\r
+                position: absolute;\r
+                right: 20px;\r
+                top: 20px;\r
+            }\r
+        section.comments div.content {\r
+            width: auto;\r
+            padding-top: 0;\r
+        }\r
+    section.comments form.commentform {\r
+        padding: 20px 20px;\r
+        position: relative;\r
+    }\r
+        section.comments form.commentform legend {\r
+            margin-left: 0;\r
+        }\r
+        section.comments form.commentform p, section.comments form.commentform p.textarea {\r
+            float: none;            \r
+            width: 100%;\r
+        }\r
+            section.comments form.commentform p.email {\r
+                right: 0;\r
+            }\r
+            \r
+        section.comments form.commentform input, section.comments form.commentform textarea {\r
+            width: 93%;\r
+        }\r
+            \r
+    section.footnote {\r
+        width: 90%;\r
+\r
+        margin: 30px 5%;\r
+        padding: 0;\r
+    }\r
+            \r
+    footer#bottom, footer#bottom small, footer#bottom ul {\r
+        width: 100%;\r
+    }\r
+        footer#bottom a#attribution {\r
+            left: auto;\r
+            right: 0;\r
+            \r
+            top: 30px;\r
+        }\r
+}
\ No newline at end of file