Browse code

Add cta-buttons.jpg, change the floating call to action buttons, modify the css to match the changes.

Andrew Lewman authored on06/06/2011 02:54:21
Showing9 changed files
... ...
@@ -13,9 +13,24 @@ border: 0;
13 13
 #home #sidecol { width: 290px; }
14 14
 
15 15
 #calltoaction {
16
-	margin: 0;
16
+	width: 300px;
17 17
 }
18 18
 
19
+#calltoaction ul {
20
+	width: 300px;
21
+	}
22
+
23
+#calltoaction ul li {
24
+	padding: 0;
25
+	margin: 0px;
26
+	width: 100px;
27
+	}
28
+
29
+#calltoaction ul li a {
30
+	margin: 0;
31
+	width: 100px;
32
+	}
33
+	
19 34
 #banner ul li { list-style: url(../images/white-bullet.gif) outside; }
20 35
 
21 36
 #sidenav ul li {
... ...
@@ -2,10 +2,10 @@
2 2
 /* IE7 and Lower */
3 3
 
4 4
 
5
-#nav { margin: 0; }
5
+#nav { margin: 0; display: block; }
6 6
 #nav ul li a:link,
7 7
 #nav ul li a:visited {
8
-	display: block;
8
+	display: inline;
9 9
 	height: 50px;
10 10
 }
11 11
 
... ...
@@ -28,6 +28,15 @@ p.desc { margin: -10px 0 10px; }
28 28
 		border-bottom: 1px solid #ddd;
29 29
 	}
30 30
 
31
+#calltoaction ul li:first-child a:link,
32
+#calltoaction ul li:first-child a:visited {
33
+   background: url(../images/cta-buttons.jpg) top center no-repeat;
34
+	}
35
+	
36
+#calltoaction ul li:hover:first-child a {
37
+   background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800;
38
+	}
39
+
31 40
 .hlist {
32 41
 	text-align: center;
33 42
 	display: block;
... ...
@@ -26,6 +26,7 @@ h1#logo a:visited {
26 26
 			
27 27
 #calltoaction {
28 28
 	float: left;
29
+   margin-left: 5px;
29 30
 }
30 31
 	
31 32
 #calltoaction ul {
... ...
@@ -33,15 +34,13 @@ h1#logo a:visited {
33 34
 }
34 35
     
35 36
 #calltoaction ul li {
36
-  float: right;
37
-  margin-right: 10px;
37
+  float: left;
38
+  margin-right: 0px;
38 39
 }
39 40
 
40 41
 #calltoaction ul li a:link,
41 42
 #calltoaction ul li a:visited{
42
-  border-right: 1px solid #6ab334;
43
-  border-left: 1px solid #5a952b;
44
-  float: right;
43
+  float: left;
45 44
 }
46 45
 
47 46
 #banner {
... ...
@@ -189,7 +188,7 @@ table tr img {
189 188
 .windows,
190 189
 .mac,
191 190
 .linux,
192
-.android { padding: 5px 20px 5px 0; }
191
+.android { padding: 5px 30px 5px 0; }
193 192
 
194 193
 .windows { background-position: right center; }
195 194
 .mac { background-position: right center; }
... ...
@@ -215,8 +214,15 @@ table tr img {
215 214
 .warning {
216 215
 	background-position: right center;
217 216
 }
218
-.warning p { padding-right: 40px; }
219
-
217
+	.warning h2 {
218
+ 	  background: url("../images/warning2.jpg") no-repeat scroll right top transparent;
219
+		padding-right: 40px;
220
+		}
221
+	
222
+	.warning p {
223
+		padding-right: 20px;
224
+		}
225
+	
220 226
 .focus .icon {
221 227
 	float: right;
222 228
 	margin-left: 10px;
... ...
@@ -250,6 +256,40 @@ select#lang {
250 256
 	padding-left: 20px;
251 257
 }
252 258
 
259
+/* DONATION ADDITIONS ----------- */
260
+.dbox {
261
+	margin: 0px 10px 0px 0px;
262
+	}
263
+
264
+	.dbox input ,
265
+	.dbox select {
266
+	   padding: 0px 5px 0px 0px;
267
+	   }
268
+	
269
+	.dbox select.cur {
270
+		margin-right: 0px;
271
+		margin-left: 5px;
272
+		text-align: right;
273
+		}
274
+
275
+.dbox.donate {
276
+	text-align: right;
277
+	}
278
+
279
+	.dbox.donate .drow {
280
+		margin: 0px 20px 0px 0px;
281
+		}
282
+
283
+	.dbox.donate ul.amounts {
284
+		padding-left: 40px;
285
+		padding-right: 0px;
286
+		}
287
+
288
+.dbox.dl {
289
+	margin: -50px 20px 20px 0px;
290
+	float: left;
291
+  	}
292
+
253 293
 #footer .about {
254 294
 	padding-left: 30px;
255 295
 	border-left: 1px solid #ddd;
... ...
@@ -71,43 +71,93 @@ body {
71 71
 		height: 30px;
72 72
 		float: right;
73 73
 		margin-top: 10px;
74
+		margin-right: 5px;
75
+		text-align: center;
74 76
 	}
75 77
 	
76 78
     #calltoaction ul {
77 79
       padding: 0;
78
-      margin: 0;
80
+      margin: 0px;
79 81
       height: 30px;
80 82
       list-style: none;
81 83
       float: right;
82 84
     }
83
-    
85
+    	     
84 86
       #calltoaction ul li {
85 87
         list-style: none;
86 88
         display: inline;
87
-        float: left;
88
-        width: auto;
89
-        margin-left: 10px;
89
+        float: none;
90
+        width: 100px;
91
+        margin-left: 0px;
90 92
       }
91 93
       
92 94
       #calltoaction ul li a:link,
93
-      #calltoaction ul li a:visited{
94
-        background: #96c35a;
95
-        border-top: 1px solid #6ab334;
96
-        border-left: 1px solid #6ab334;
97
-        border-bottom: 1px solid #5a952b;
98
-        border-right: 1px solid #5a952b;
95
+      #calltoaction ul li a:visited {
96
+        background: url(../images/cta-buttons.jpg) top center no-repeat;
99 97
         padding: 8px 8px 0px;
100
-        color: #222c14;
98
+        color: #FFFFFF;
101 99
         font-weight: bold;
102 100
         text-decoration: none;
103
-        font-size: 1.167em;
104
-        line-height: 1.167em;
101
+        font-size: 1.067em;
102
+        line-height: 1.067em;
105 103
         height: 22px;
104
+        width: 84px;
106 105
         float: left;
106
+        text-shadow: 0px -1px 2px #111111, 0px 1px 2px #666666;
107 107
       }
108
+
109
+      #calltoaction ul li:first-child a:link,
110
+      #calltoaction ul li:first-child a:visited {
111
+        background: url(../images/cta-buttons.jpg) top left no-repeat;
112
+        -webkit-border-top-left-radius: 7px;
113
+		  -webkit-border-bottom-left-radius: 7px;
114
+		  -moz-border-radius-topleft: 7px;
115
+		  -moz-border-radius-bottomleft: 7px;
116
+		  border-top-left-radius: 7px;
117
+		  border-bottom-left-radius: 7px;
118
+        padding-left: 7px;
119
+        width: 85px;
120
+        }
121
+
122
+      #calltoaction ul li:last-child a:link,
123
+      #calltoaction ul li:last-child a:visited {
124
+        background: url(../images/cta-buttons.jpg) top right no-repeat;
125
+		  -webkit-border-top-right-radius: 7px;
126
+		  -webkit-border-bottom-right-radius: 7px;
127
+		  -moz-border-radius-topright: 7px;
128
+		  -moz-border-radius-bottomright: 7px;
129
+		  border-top-right-radius: 7px;
130
+		  border-bottom-right-radius: 7px;
131
+        padding-right: 9px;
132
+        width: 83px;
133
+        color: #FFFFFF;
134
+       }
108 135
       
109
-      #calltoaction ul li a:hover,
110
-      #calltoaction ul li a.active { background: #6ab334; }
136
+      #calltoaction ul li:hover a {
137
+        background: url(../images/cta-buttons.jpg) bottom center no-repeat #ff9800;
138
+        font-weight: bold;
139
+        text-shadow: 1px 1px 4px #111111;
140
+        }
141
+      
142
+      #calltoaction ul li:hover:first-child a {
143
+        background: url(../images/cta-buttons.jpg) bottom left no-repeat #ff9800;
144
+        -webkit-border-top-left-radius: 7px;
145
+		  -webkit-border-bottom-left-radius: 7px;
146
+		  -moz-border-radius-topleft: 7px;
147
+		  -moz-border-radius-bottomleft: 7px;
148
+		  border-top-left-radius: 7px;
149
+		  border-bottom-left-radius: 7px;
150
+        }
151
+
152
+      #calltoaction ul li:hover:last-child a {
153
+        background: url(../images/cta-buttons.jpg) bottom right no-repeat #ff9800;
154
+		  -webkit-border-top-right-radius: 7px;
155
+		  -webkit-border-bottom-right-radius: 7px;
156
+		  -moz-border-radius-topright: 7px;
157
+		  -moz-border-radius-bottomright: 7px;
158
+		  border-top-right-radius: 7px;
159
+		  border-bottom-right-radius: 7px;
160
+        }
111 161
 
112 162
 
113 163
 /* BANNER ------------*/
... ...
@@ -654,6 +704,12 @@ small {
654 704
 		   background-color: #FFFFFF;
655 705
 			}
656 706
 
707
+		.dbox input.radio {
708
+			border: 0px solid;
709
+			background: #ffffed;
710
+			padding: 0px 0px;
711
+			}
712
+
657 713
 	.dbox select.cur {
658 714
 		margin-right: 5px;
659 715
 		text-align: left;
... ...
@@ -92,15 +92,15 @@ jQuery(function(){
92 92
 			   </select>
93 93
 			  </span>
94 94
 			  <ul class="amounts">	
95
-		      <li><input type="radio" name="amount" value="2000.00"><label for="2000">2000</label></li>
96
-	  	      <li><input type="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
97
-		      <li><input type="radio" name="amount" value="500.00"><label for="500">500</label></li>
98
-		      <li><input type="radio" name="amount" value="250.00"><label for="250">250</label></li>
99
-		      <li><input type="radio" name="amount" value="100.00"><label for="100">100</label></li>
100
-		      <li><input type="radio" name="amount" value="50.00"><label for="50">50</label></li>
101
-		      <li><input type="radio" name="amount" value="20.00" checked="checked"><label for="20">20</label></li>
102
-		      <li><input type="radio" name="amount" value="10.00"><label for="10">10</label></li>
103
-		      <li><input type="radio" name="amount" value="5.00"><label for="5">5</label></li>
95
+		      <li><input type="radio" class="radio" name="amount" value="2000.00"><label for="2000">2000</label></li>
96
+	  	      <li><input type="radio" class="radio" name="amount" value="1000.00"><label for="1000">1000</label></li>
97
+		      <li><input type="radio" class="radio" name="amount" value="500.00"><label for="500">500</label></li>
98
+		      <li><input type="radio" class="radio" name="amount" value="250.00"><label for="250">250</label></li>
99
+		      <li><input type="radio" class="radio" name="amount" value="100.00"><label for="100">100</label></li>
100
+		      <li><input type="radio" class="radio" name="amount" value="50.00"><label for="50">50</label></li>
101
+		      <li><input type="radio" class="radio" name="amount" value="20.00" checked="checked"><label for="20">20</label></li>
102
+		      <li><input type="radio" class="radio" name="amount" value="10.00"><label for="10">10</label></li>
103
+		      <li><input type="radio" class="radio" name="amount" value="5.00"><label for="5">5</label></li>
104 104
 		    </ul>
105 105
 		   </div>
106 106
 		   <div>
... ...
@@ -7,18 +7,18 @@
7 7
 <:
8 8
     # path                              link text
9 9
     my @navigation = (
10
-        'index'                       , 'Home',
11
-        'about/overview'                 , 'About Tor',
10
+        'index'                        , 'Home',
11
+        'about/overview'              , 'About Tor',
12 12
         'docs/documentation'          , 'Documentation',
13
-        'projects/projects'         , 'Projects',
13
+        'projects/projects'           , 'Projects',
14 14
         'press/press'                 , 'Press',
15 15
         '<blog>'                      , 'Blog',
16 16
         'http://printfection.com/torprojectstore' , 'Store',
17 17
     );
18 18
     my @calltoaction = (
19 19
         'download/download'                , 'Download',
20
+        'getinvolved/volunteer'            , 'Volunteer',
20 21
         'donate/donate'                    , 'Donate',
21
-        'getinvolved/volunteer'          , 'Get Involved',
22
-    );      
22
+    );
23 23
 
24 24
 :>
25 25
new file mode 100644
26 26
Binary files /dev/null and b/images/cta-buttons.jpg differ
... ...
@@ -21,6 +21,9 @@ type="application/rss+xml">">
21 21
   <ifeq "$(STYLESHEET)" "" "<link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/master.css">">
22 22
 
23 23
   #<link href="css/master.css" rel="stylesheet" type="text/css">
24
+  <!--[if lte IE 8]>
25
+  <link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/ie8-and-down.css">
26
+  <![endif]-->
24 27
   <!--[if lte IE 7]>
25 28
   <link rel="stylesheet" type="text/css" href="$(DOCROOT)/css/ie7-and-down.css">
26 29
   <![endif]-->
... ...
@@ -17,8 +17,8 @@
17 17
     );
18 18
     my @calltoaction = (
19 19
         'download/download'                , 'Download',
20
+        'getinvolved/volunteer'            , 'Volunteer',
20 21
         'donate/donate'                    , 'Donate',
21
-        'getinvolved/volunteer'            , 'Get Involved',
22 22
     );
23 23
 
24 24
 :>