1 |
@import url("menu.css"); |
2 |
@import url("home.css"); |
3 |
@import url("xtra.css"); |
4 |
|
5 |
html, body { |
6 |
/* Normalize browser defaults */ |
7 |
margin: 0; |
8 |
padding: 0; |
9 |
height: 100%; |
10 |
} |
11 |
|
12 |
body { |
13 |
background-color: #fff; |
14 |
color: #444; |
15 |
font: 100% Oxygen, helvetica, sans-serif; |
16 |
} |
17 |
|
18 |
a:link, a:visited { |
19 |
/* Hyperlink defintions */ |
20 |
color: #1373ce; |
21 |
text-decoration: none; |
22 |
} |
23 |
|
24 |
a:active, a:hover { |
25 |
color: #909090; |
26 |
} |
27 |
|
28 |
#globe { |
29 |
/* WRAPPER SURROUNDING ALL ELEMENTS */ |
30 |
width: 1002px; /* Fits most 1024x768 in fullscreen */ |
31 |
margin: 0 auto; |
32 |
padding: 0; |
33 |
background: url(//d2ibasrwfd3o7m.cloudfront.net/images/shadow.png) repeat-y; |
34 |
} |
35 |
|
36 |
#header h1 { |
37 |
width: 928px; |
38 |
margin: 0 auto; |
39 |
z-index: 4; /* So IE has "layout" */ |
40 |
font-size: 10px; |
41 |
} |
42 |
|
43 |
#header a { |
44 |
/* CSS Text-to-Image replacement */ |
45 |
background-image: url("//d2ibasrwfd3o7m.cloudfront.net/images/logo.jpg"); |
46 |
background-repeat: no-repeat; |
47 |
width: 928px; |
48 |
height: 0 !important; |
49 |
height /**/: 189px; /* Exploit IE parsing error to give height */ |
50 |
padding: 189px 0 0 0; /* Pushes the div down to reveal the image */ |
51 |
margin: 0 auto; |
52 |
display: block; |
53 |
overflow: hidden; /* We don't want the text to show */ |
54 |
} |
55 |
|
56 |
.horiz { |
57 |
/* Horizontal-rule rules */ |
58 |
width: 800px; |
59 |
margin: auto; |
60 |
} |
61 |
|
62 |
.horiz blockquote { |
63 |
/* Why so many wrappers? Examine. */ |
64 |
width: 800px; |
65 |
float: left; |
66 |
margin: 0 auto; |
67 |
padding: 0; |
68 |
} |
69 |
|
70 |
hr { |
71 |
height: 1px; /* Normalize look for Opera */ |
72 |
color: #999; |
73 |
background: #999; |
74 |
border: 0; |
75 |
width: 100%; |
76 |
margin: 15px auto 0 auto; |
77 |
} |
78 |
|
79 |
#footer { |
80 |
text-align: center; |
81 |
width: 928px; |
82 |
font-size: .9em; |
83 |
margin: 10px auto; |
84 |
border-bottom: 2px solid #ccc; |
85 |
} |
86 |
|
87 |
#footer p { |
88 |
line-height: 18px; |
89 |
} |
90 |
|
91 |
#socialshare { |
92 |
border: none; |
93 |
width: 600px; |
94 |
} |
95 |
|
96 |
#text { |
97 |
line-height: 135%; |
98 |
} |
99 |
|
100 |
#text { |
101 |
width: 850px; |
102 |
margin: 0 auto; |
103 |
} |
104 |
|
105 |
#text h2 { |
106 |
text-align: center; |
107 |
margin: 1em; |
108 |
line-height: 1em; |
109 |
} |
110 |
|
111 |
#text h2 img { |
112 |
vertical-align: middle; |
113 |
padding-bottom: 4px; |
114 |
} |
115 |
|
116 |
table { |
117 |
margin: 0 auto; |
118 |
border: 1px solid #ccc; |
119 |
border-collapse: collapse; |
120 |
} |
121 |
|
122 |
th { |
123 |
padding: 10px; |
124 |
font-weight: bold; |
125 |
text-align: center; |
126 |
background: #f2fbff; |
127 |
} |
128 |
|
129 |
td { |
130 |
padding: 10px; |
131 |
border-width: 0; |
132 |
} |
133 |
|
134 |
/* GLOBAL RE-USABLES */ |
135 |
.clear { |
136 |
clear: both; |
137 |
} |
138 |
|
139 |
.fleft { |
140 |
float: left; |
141 |
} |
142 |
|
143 |
.fright { |
144 |
float: right; |
145 |
} |
146 |
|
147 |
#googlead { |
148 |
width: 470px; |
149 |
height: 60px; |
150 |
margin: 0 auto; |
151 |
} |
152 |
|
153 |
@media screen and (max-width: 900px) { |
154 |
html { |
155 |
overflow-x: auto !important; |
156 |
} |
157 |
|
158 |
body { |
159 |
overflow-x: auto !important; |
160 |
} |
161 |
|
162 |
#globe { |
163 |
width: 100%; |
164 |
background: none; |
165 |
} |
166 |
|
167 |
.horiz, .horiz blockquote { |
168 |
width: 80%; |
169 |
} |
170 |
|
171 |
#header h1 { |
172 |
width: 100%; |
173 |
margin: 0 auto; |
174 |
font-size: 2em; |
175 |
clear: both; |
176 |
} |
177 |
|
178 |
#header a { |
179 |
background: none; |
180 |
width: 100%; |
181 |
height: 2.1em !important; |
182 |
padding: 10px; |
183 |
margin: 0 auto; |
184 |
display: block; |
185 |
overflow: auto; |
186 |
} |
187 |
|
188 |
#footer { |
189 |
width: 100%; |
190 |
} |
191 |
|
192 |
#text { |
193 |
width: 80%; |
194 |
} |
195 |
|
196 |
} |
197 |
|
198 |
@media screen and (max-width: 600px) { |
199 |
#socialshare { |
200 |
display: none; |
201 |
} |
202 |
} |
203 |
|
204 |
@media screen and (max-width: 475px) { |
205 |
#googlead { |
206 |
display: none; |
207 |
} |
208 |
} |