Showcase_CSS
This is the CSS for all browsers other than IE6. The biggest difference is that the background color for the CSS sprite navigation images is transparent. Plus, I use CSS 2.1 and CSS 3 rules where ever I can as I learn them.
This page contains only the sections that pertain to the Contact page.
1| @charset "utf-8";
2| /* CSS Document */
3|
4| /*body information*/
5| /*1em = 16px*/
6| body {
7| background-color:#52E93A;
8| font: "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
9| font-size:100.01%;
10| line-height:1.5em; /* 16px*1.5em=24px */
11| }
12|
13| .hide {
14| display:none;
15| visibility:hidden;
16| }
17|
18| .left {
19| text-align:left;
20| }
21|
22| .right{
23| text-align:right;
24| }
25|
26| .fLeft {
27| float:left;
28| margin-right:5px;
29| margin-bottom:5px;
30| padding-right:15px;
31| }
32|
33| .fRight{
34| float:right;
35| margin-left:5px;
36| margin-bottom:5px;
37| padding-left:15px;
38| }
39|
40| .center {
41| text-align:center;
42| }
43|
44| .spacer{
45| clear:left;
46| }
47|
48| .CopyRight{
49| Width:98%;
50| height:85px;
51| float:left;
52| }
53|
54| .SubSiteLink{
55| width:290px;
56| height:82px;
57| float:right;
58| padding: 1px;
59| }
60|
61| /*Print specific*/
62| .webview{
63| display:inline;
64| visibility:visible;
65| }
66|
67| .printview {
68| display:none;
69| visibility:hidden;
70| }
71|
72| /*Color*/
73| .Red {
74| color:#BA2F39;
75| }
76|
77| .Black {
78| color: black;
79| }
80|
81| /*font-size*/
82| h1 {
83| font-size:2em; /* 16px*2em=32px */
84| color:#BA2F39;
85| text-shadow:-2px 3px 3px #808080;
86| }
87|
88| h2 {
89| font-size:1.75em; /* 16px*1.75em=28px */
90| color:#BA2F39;
91| text-shadow:-2px 3px 3px #808080;
92| }
93|
94| h3 {
95| font-size:1.5em; /* 16px*1.5em=24px */
96| color:#BA2F39;
97| text-shadow:-2px 3px 3px #808080;
98| }
99|
100| h4 {
101| font-size:1.375em; /* 16px*1.375em=22px */
102| font-style:italic;
103| color:#BA2F39;
104| text-shadow:-2px 3px 3px #808080;
105| }
106|
107| p {
108| font-size:1.125em; /* 16px*1.125em=18px */
109| }
110|
111| /*Link Color*/
112|
113| a:link {
114| color: #A1000C;
115| }
116|
117| a:visited {
118| color: #FC3F4D;
119| }
120|
121| a:hover {
122| color: #FC717B;
123| }
124|
125| a:active {
126| color: #FC717B;
127| }
128|
129| a:focus{
130| outline:none;
131| }
132|
133| /*generic border*/
134| .border {
135| border: 1px solid black;
136| margin: 0 4% 0 4%;
137| text-align:center;
138| width: 90%;
139| }
140|
141| /*Container*/
142| #container {
143| margin: 0 4% 0 4%;
144| max-width: 90%;
145| background-color:#52E93A;
146| border: 6px ridge #5DCFC3;
147| padding: 5px;
148| box-shadow:-2px 2px 10px #808080;
149| -moz-box-shadow:-2px 2px 10px #808080;
150| -webkit-box-shadow:-2px 2px 10px #808080;
151| border-radius: 15px;
152| -moz-border-radius: 15px;
153| -webkit-border-radius: 15px;
154| }
155|
156| /*masterhead*/
157| #masterhead {
158| margin: 0px 0px 5px 0px;
159| padding: 2px;
160| border: 6px ridge #5DCFC3;
161| background-color:#7AE969;
162| -moz-box-shadow:-2px 2px 5px #808080;
163| -webkit-box-shadow:-2px 2px 5px #808080;
164| box-shadow:-2px 2px 5px #808080;
165| -moz-border-radius: 15px;
166| -webkit-border-radius: 15px;
167| border-radius: 15px;
168| }
169|
170| /*navigation*/
171| #navigation {
172| margin: 0px 0px 5px 0px;
173| padding: 2px;
174| border: 6px ridge #5DCFC3;
175| background-color:#7AE969;
176| height: 60px;
177| text-align:center;
178| -moz-box-shadow:-2px 2px 5px #808080;
179| -webkit-box-shadow:-2px 2px 5px #808080;
180| box-shadow:-2px 2px 5px #808080;
181| -moz-border-radius: 15px;
182| -webkit-border-radius: 15px;
183| border-radius: 15px;
184| }
185|
230| /*content*/
231| #content {
232| margin: 0px 0px 5px 0px;
233| padding: 2px;
234| border: 6px ridge #5DCFC3;
235| background-color:#7AE969;
236| -moz-box-shadow:-2px 2px 5px #808080;
237| -webkit-box-shadow:-2px 2px 5px #808080;
238| box-shadow:-2px 2px 5px #808080;
239| -moz-border-radius: 15px;
240| -webkit-border-radius: 15px;
241| border-radius: 15px;
242| }
243|
258| /*footer*/
259| #footer {
260| margin: 0px 0px 5px 0px;
261| padding: 2px;
262| height: 90px;
263| border: 6px ridge #5DCFC3;
264| background-color:#7AE969;
265| -moz-box-shadow:-2px 2px 5px #808080;
266| -webkit-box-shadow:-2px 2px 5px #808080;
267| box-shadow:-2px 2px 5px #808080;
268| -moz-border-radius: 15px;
269| -webkit-border-radius: 15px;
270| border-radius: 15px;
271| }
272|
273| /*Navigation Menu*/
274|
275| #menuWrap a {
276| background-image:url('../images/menuNavStrip.png');
277| background-repeat:no-repeat;
278| line-height: 65px;
279| text-decoration:none;
280| }
281|
282| #menuWrap a.home {
283| background-position:-10px -6px;
284| padding:15px 43px;
285| }
286|
287|
288| #menuWrap a:hover.home, #menuWrap a:active.home, #menuWrap a:focus.home{
289| background-position:-11px -63px;
290| }
291|
292| #menuWrap .home_on {
293| background-position:-11px -121px;
294| padding:15px 43px;
295| }
296|
297| #menuWrap a:hover.home_on, #menuWrap a:active.home_on, #menuWrap a:focus.home_on{
298| background-position:-11px -63px;
299| }
300|
301| #menuWrap a.resume {
302| background-position:-107px -6px;
303| padding:15px 45px;
304| }
305|
306| #menuWrap a:hover.resume, #menuWrap a:active.resume, #menuWrap a:focus.resume{
307| background-position:-108px -63px;
308| }
309|
310| #menuWrap a.resume_on {
311| background-position:-108px -121px;
312| padding:15px 45px;
313| }
314|
315| #menuWrap a:hover.resume_on, #menuWrap a:active.resume_on, #menuWrap a:focus.resume_on{
316| background-position:-108px -63px;
317| }
318|
319| #menuWrap a.portfolio {
320| background-position:-217px -7px;
321| padding:15px 53px;
322| }
323|
324| #menuWrap a:hover.portfolio, #menuWrap a:active.portfolio, #menuWrap a:focus.portfolio{
325| background-position:-218px -64px;
326| }
327|
328| #menuWrap a.portfolio_on {
329| background-position:-218px -122px;
330| padding:15px 53px;
331| }
332|
333| #menuWrap a:hover.portfolio_on, #menuWrap a:active.portfolio_on, #menuWrap a:focus.portfolio_on{
334| background-position:-218px -64px;
335| }
336|
337| #menuWrap a.contacts {
338| background-position:-330px -6px;
339| padding:15px 55px;
340| }
341|
342| #menuWrap a:hover.contacts, #menuWrap a:active.contacts, #menuWrap a:focus.contacts{
343| background-position:-331px -63px;
344| }
345|
346| #menuWrap a.contacts_on {
347| background-position:-331px -121px;
348| padding:15px 55px;
349| }
350|
351| #menuWrap a:hover.contacts_on, #menuWrap a:active.contacts_on, #menuWrap a:focus.contacts_on{
352| background-position:-331px -63px;
353| }
354|
355| #menuWrap a.about {
356| background-position:-459px -6px;
357| padding:15px 55px;
358| }
359|
360| #menuWrap a:hover.about , #menuWrap a:active.about, #menuWrap a:focus.about {
361| background-position:-460px -63px;
362| }
363|
364| #menuWrap a.about_on {
365| background-position:-460px -121px;
366| padding:15px 55px;
367| }
368|
369| #menuWrap a:hover.about_on , #menuWrap a:active.about_on, #menuWrap a:focus.about_on {
370| background-position:-460px -63px;
371| }
372|
373| /*Navigation Menu Ends*/