root / okeanos_site / static / okeanos_static / css / main.css @ 2895f0d5
History | View | Annotate | Download (4.3 kB)
1 |
/* float clearing for IE6 */
|
---|---|
2 |
* html .clearfix{ |
3 |
height: 1%; |
4 |
overflow: visible; |
5 |
} |
6 |
|
7 |
/* float clearing for IE7 */
|
8 |
*+html .clearfix{ |
9 |
min-height: 1%; |
10 |
} |
11 |
|
12 |
/* float clearing for everyone else */
|
13 |
.clearfix:after{ |
14 |
clear: both; |
15 |
content: "."; |
16 |
display: block; |
17 |
height: 0; |
18 |
visibility: hidden; |
19 |
font-size: 0; |
20 |
} |
21 |
|
22 |
body {
|
23 |
background-image: url("../images/bg.png"); |
24 |
background-repeat: repeat-x; |
25 |
font-size: 13px; |
26 |
font-family: verdana; |
27 |
background-position: 0px -30px; |
28 |
} |
29 |
|
30 |
body.alt { |
31 |
background-image: url("../images/bg-alt.png"); |
32 |
} |
33 |
|
34 |
.container {
|
35 |
width: 870px; |
36 |
margin: 0 auto; |
37 |
margin-top: 50px; |
38 |
} |
39 |
|
40 |
.inner {
|
41 |
margin-top: 2.5em; |
42 |
background-image: url("../images/bg-inner.png"); |
43 |
width: 100%; |
44 |
} |
45 |
|
46 |
.inner .left { |
47 |
position: relative; |
48 |
width: 180px; |
49 |
float:left; |
50 |
} |
51 |
|
52 |
.inner .left ul { |
53 |
margin-top: 90px; |
54 |
color: #4085A5; |
55 |
left: -16px; |
56 |
padding-top: 40px; |
57 |
padding-right: 10px; |
58 |
} |
59 |
|
60 |
.inner .left ul li { |
61 |
font-size: 1.8em; |
62 |
margin-bottom: 0.2em; |
63 |
position: relative; |
64 |
} |
65 |
|
66 |
.inner .left ul li a.page-link { |
67 |
display: block; |
68 |
color: inherit; |
69 |
text-decoration: none; |
70 |
padding: 10px; |
71 |
padding-left: 36px; |
72 |
text-shadow: 1px 1px 0px #efefef; |
73 |
} |
74 |
|
75 |
.inner .left ul li a.page-link:hover, .inner .left ul li.selected a.page-link { |
76 |
text-shadow: none; |
77 |
color: #fff; |
78 |
background-color: #74AEC9; |
79 |
border-left: 0px solid #92C1D7; |
80 |
padding-left: 34px; |
81 |
} |
82 |
|
83 |
.inner .left ul li .close-button { |
84 |
display: block; |
85 |
position: absolute; |
86 |
left: -30px; |
87 |
top: 0px; |
88 |
font-size: 0.7em; |
89 |
border:none; |
90 |
background: transparent; |
91 |
padding:0; |
92 |
padding-top: 13px; |
93 |
padding-left: 9px; |
94 |
margin:0px; |
95 |
text-decoration: none; |
96 |
color: #fff; |
97 |
width: 21px; |
98 |
height: 30px; |
99 |
font-weight: bold; |
100 |
display: block; |
101 |
visibility: hidden; |
102 |
} |
103 |
|
104 |
.inner .left ul li.current a.page-link { |
105 |
color: #fff; |
106 |
background-color: #74AEC9; |
107 |
border-left: 30px solid #92C1D7; |
108 |
padding-left: 34px; |
109 |
margin-left: -30px; |
110 |
} |
111 |
|
112 |
.inner .video-cont, .inner .page-cont { |
113 |
width: 690px; |
114 |
float: right; |
115 |
} |
116 |
|
117 |
.inner .cols { |
118 |
position: relative; |
119 |
} |
120 |
|
121 |
.page {
|
122 |
display: block; |
123 |
top: 0; |
124 |
} |
125 |
|
126 |
.page-wrapper {
|
127 |
position: relative; |
128 |
} |
129 |
|
130 |
.page.text { |
131 |
margin-left: 27px; |
132 |
padding-top: 20px; |
133 |
padding-right: 20px; |
134 |
padding-bottom: 10px; |
135 |
} |
136 |
|
137 |
.page.text h2 { |
138 |
font-size: 2.2em; |
139 |
color: #4085A5; |
140 |
margin-bottom: 0.5em; |
141 |
text-shadow: 1px 1px 0px #ddd; |
142 |
} |
143 |
|
144 |
.page.text a { |
145 |
color: #407087; |
146 |
} |
147 |
|
148 |
.page.text p em { |
149 |
color: #444; |
150 |
font-weight: bold; |
151 |
} |
152 |
|
153 |
.page.text h3 { |
154 |
font-size: 1.3em; |
155 |
color: #407087; |
156 |
margin-bottom: 0.5em; |
157 |
margin-top: 0.3em; |
158 |
} |
159 |
|
160 |
.page.text h4 { |
161 |
font-weight: bold; |
162 |
font-size: 1.1em; |
163 |
margin-bottom: 0.3em; |
164 |
} |
165 |
|
166 |
.page.text p { |
167 |
font-size: 1.2em; |
168 |
margin-bottom: 1em; |
169 |
text-align: justify; |
170 |
line-height: 1.2em; |
171 |
text-shadow: 1px 1px 0px #efefef; |
172 |
} |
173 |
|
174 |
.inner .video { |
175 |
width: 640px; |
176 |
height: 360px; |
177 |
background-color: #4085A5; |
178 |
margin: 20px; |
179 |
margin-left: 27px; |
180 |
margin-bottom: 20px; |
181 |
margin-top: 20px; |
182 |
/*border: 1px solid #4085A5;*/
|
183 |
} |
184 |
|
185 |
.logo {
|
186 |
text-align: center; |
187 |
} |
188 |
|
189 |
.inner-bottom {
|
190 |
width: 100%; |
191 |
} |
192 |
|
193 |
.inner-bottom .testuser { |
194 |
display: none; |
195 |
background: #000; |
196 |
margin-right: 20px; |
197 |
float: right; |
198 |
margin-top: 10px; |
199 |
margin-bottom: 20px; |
200 |
} |
201 |
|
202 |
.gotoapp {
|
203 |
display: block; |
204 |
padding: 0.7em 5em; |
205 |
color: #fff; |
206 |
font-size: 1.2em; |
207 |
background-color: #FF6600; |
208 |
cursor: pointer; |
209 |
text-shadow: 1px 1px 0px #444; |
210 |
margin-right: -20px; |
211 |
} |
212 |
|
213 |
.gotoapp:hover { |
214 |
background-color: #D3702E; |
215 |
} |
216 |
|
217 |
.gotoapp {
|
218 |
color: #fff; |
219 |
text-decoration: none; |
220 |
} |
221 |
|
222 |
.banner-coming {
|
223 |
position: absolute; |
224 |
left: 0px; |
225 |
top: 0px; |
226 |
} |
227 |
|
228 |
.footer {
|
229 |
text-align: center; |
230 |
margin: 0 auto; |
231 |
width: 870px; |
232 |
margin: 2em auto; |
233 |
} |
234 |
|
235 |
.footer .links { |
236 |
color: #4085A5; |
237 |
margin-bottom: 1em; |
238 |
} |
239 |
|
240 |
.footer .links li { |
241 |
display: inline; |
242 |
margin-right: 1em; |
243 |
padding-right: 1em; |
244 |
border-right: 1px solid #4085A5; |
245 |
} |
246 |
|
247 |
.footer .links li a { |
248 |
color: inherit; |
249 |
text-decoration: none; |
250 |
} |
251 |
|
252 |
.footer .links li.last { |
253 |
margin-right:0; |
254 |
padding-right:0; |
255 |
border: none; |
256 |
} |
257 |
|
258 |
.footer .bottom-text { |
259 |
color: #74AEC9; |
260 |
} |
261 |
|
262 |
/*style 2*/
|
263 |
body.style2 .page.text { |
264 |
background-color: #7DB3CC; |
265 |
padding-left: 20px; |
266 |
} |
267 |
|
268 |
body.style2 .page.text p, body.style2 .page.text h2 { |
269 |
color: #fff; |
270 |
text-shadow: 1px 1px 0px #aaa; |
271 |
} |