Use full opacity for dropdown text.

[enc-static.git] / css / main.css

diff --git a/css/main.css b/css/main.css
index 973715a57b893d9a0c376c20aa3d1c127ed63d35..8d2cfd8d11aadd72eaf6a2e2f5e7d652c3439eae 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -170,14 +170,6 @@ small {
                font-size: 0.85em;
 }
 
-#header .intro {
-       font-size: 1.1em;
-}
-
-#header .intro > #infographic {
-       font-size: .75em;
-}
-
 #header #fsf-intro {
        font-size: .7em;
 }
@@ -290,7 +282,7 @@ a:focus > img + strong {
                padding: .25em;
 }
 
-#header ul.os .share {
+#header ul.os .spacer {
                padding: .25em 0 .25em 4em;
 }
 
@@ -375,78 +367,107 @@ a:focus > img + strong {
                margin: .5em 0;
 }
 
-/* Images inside .main
+/* Images
 */
 
-.main ul.images:before, .main ul.images:after  {
+ul.images:before, ul.images:after  {
     content: " ";
     display: table;
 }
 
-.main ul.images:after {
+ul.images:after {
     clear: both;
 }
 
-.main ul.images {
+ul.images {
                padding: 0.5em 0;
 }
 
+ul.images li {
+               margin-bottom: 1em;
+}
+
+ul.images li > img {
+               width: 100%;
+               max-width: 600px;
+               height: auto;
+}
 
-/* Troubleshooting panel
-*/
+.sidebar > p > img {
+               width: 100%;
+               max-width: 600px;
+               height: auto;
+}
+
+/* Troubleshooting panel and dropdown */
 
 .troubleshooting {
-               margin-top: .8em;
+    margin-top: .8em;
+}
+
+.dropdown > h4 {
+    font-size: .85em;
+    width: 140px;
+    text-align: center;
+    display: inline-block;
+    cursor: pointer;
+    letter-spacing: 2px;
+    padding: .25em .5em;
+    color: #2f5faa;
+    border: 1px solid #5f8dd3;
+    border-radius: 3px;
 }
 
 .troubleshooting > h4 {
-               display: inline-block;
-               cursor: pointer;
-               letter-spacing: 2px;
-               padding: .25em .5em;
-               color: #2f5faa;
-               opacity: .5;
-               border: 1px solid #5f8dd3;
-               border-radius: 3px;
+    display: inline-block;
+    cursor: pointer;
+    letter-spacing: 2px;
+    padding: .25em .5em;
+    color: #2f5faa;
+    opacity: .5;
+    border: 1px solid #5f8dd3;
+    border-radius: 3px;
 }
 
 .troubleshooting > h4:hover,
 .troubleshooting > h4.expanded {
-               opacity: 1;
+    opacity: 1;
 }
 
-.troubleshooting > h4.expanded {
-               border-bottom: 0;
-               border-radius: 3px 3px 0 0;
+.troubleshooting > h4.expanded,
+.dropdown > h4.expanded {
+    border-bottom: 0;
+    border-radius: 3px 3px 0 0;
 }
 
-
-.troubleshooting > h4:after {
-               content:' ▾';
-               display: inline-block;
+.troubleshooting > h4:after,
+.dropdown > h4:after {
+    content:' ▾';
+    display: inline-block;
     line-height: 1;
-               padding: 0 0.2em;
+    padding: 0 0.2em;
     vertical-align: top;
 }
 
-.troubleshooting > h4.expanded:after {
-               content:' ▴';
-               display: inline-block;
+.troubleshooting > h4.expanded:after,
+.dropdown > h4.expanded:after {
+    content:' ▴';
+    display: inline-block;
     line-height: 1;
-               padding: 0 0.2em;
+    padding: 0 0.2em;
     vertical-align: top;
 }
 
-.troubleshooting dl {
-               display: none;
-               padding: .5em;
-               border: 1px solid #5f8dd3;
-               border-radius: 0 3px 3px;
+.troubleshooting dl,
+.dropdown ul {
+    padding: .5em;
+    border: 1px solid #5f8dd3;
+    border-radius: 0 3px 3px;
 }
 
 .main dt,
 .troubleshooting dt {
-               margin-top: 1em;
+    margin-top: 1em;
 }
 
 .main dt:first-child,
@@ -459,6 +480,13 @@ a:focus > img + strong {
                display: inline-block;
 }
 
+.dropdown ul {
+    position: absolute;
+    width: 140px;
+    text-align: center;
+    background: #f4eed7;
+}
+
 /* Form elements: newsletter + pgp pathfinder
 */
 
@@ -520,6 +548,15 @@ input[type='reset']:hover {
                margin-bottom: 1em;
 }
 
+#fsf-intro h3 a {
+               display: block;
+               max-width: 283px;
+}
+
+#fsf-intro h3 img {
+               width: 100%;
+}
+
 .newsletter input[type='text'],
 .newsletter input[type='submit']  {
                font-size: .75em;
@@ -529,6 +566,7 @@ input[type='reset']:hover {
                height: 3em;
                width: 16em;
                padding: .2em .65em;
+               margin-bottom: .5em;
 }
 
 .newsletter input[type='submit'] {
@@ -536,6 +574,7 @@ input[type='reset']:hover {
                padding: .5em 1em;
                margin-left: 5px;
                background-color: #5f8dd3;
+               margin-bottom: .5em;
 }
 
 #fsf-intro .newsletter form + p {
@@ -634,16 +673,17 @@ input[type='reset']:hover {
                                margin: 0 auto;
                }
 
+               #header ul.os .share {
+                               display: block;
+                               padding: .25em 0;
+               }
+
                #header #fsf-intro {
                                margin-bottom: 1em;
                                padding-bottom: 1em;
                                border-bottom: 1px solid #ff9b12;
                }
 
-               #header .intro {
-                               font-size: 1em;
-               }
-
                .section-intro p {
                                margin: 0.5em 0;
                }
@@ -658,14 +698,16 @@ input[type='reset']:hover {
                #header .intro {
                                float: right;
                                width: 100%;
-                               margin-right: 02.22%;
                }
 
                #header #fsf-intro {
                                float: left;
                                width: 100%;
-                               padding-left: 02.22%;
-                               border-left: 8px solid #ff9b12;
+                               padding-left: 0;
+                               border-left: 0;
+                               margin-bottom: 1em;
+                               padding-bottom: 1em;
+                               border-bottom: 1px solid #ff9b12;
                }
 
 }
@@ -755,9 +797,7 @@ input[type='reset']:hover {
                                width: 80%;
                                height: auto;
                }
-               
-               
 
-}
 
 
+}