themes/photography/css/style.css

8-7 themes/photography/css/style.css
001/* Website Template by freewebsitetemplates.com */
002@font-face {
003    font-family: 'Conv_Arvo-Bold';
004    src: url('../fonts/Arvo-Bold.eot');
005    src: url('../fonts/Arvo-Bold.woff') format('woff'), url('../fonts/Arvo-Bold.ttf') format('truetype'), url('../fonts/Arvo-Bold.svg') format('svg');
006}
007body {
008    background: url(../images/bg-body.jpg) repeat;
009    font-family: Arial, Helvetica, sans-serif;
010    font-size: 14px;
011    margin: 0;
012    padding: 0;
013}
014#page {
015    margin: 0 auto;
016    padding: 0;
017    width: 960px;
018}
019#header {
020    background: url(../images/bg-header.png) no-repeat bottom center;
021    margin: 0;
022    overflow: hidden;
023    padding: 41px 0 90px;
024}
025#header a.logo {
026    display: block;
027    float: left;
028    height: 63px;
029    margin: 0 0 0 10px;
030    padding: 0;
031    width: 460px;
032}
033#header a.logo img {
034    border: 0;
035}
036#header ul {
037    float: right;
038    margin: 0;
039    overflow: hidden;
040    padding: 15px 40px 0 0;
041    width: 450px;
042}
043#header ul li {
044    float: right;
045    list-style: none;
046    margin: 0;
047    padding: 0 4px;
048}
049#header ul li a {
050    background: url(../images/navigation.png) no-repeat 0 -305px;
051    color: #fffcd5;
052    display: block;
053    height: 32px;
054    line-height: 32px;
055    margin: 0;
056    padding: 0;
057    text-align: center;
058    text-decoration: none;
059    text-shadow: 0 -1px 0 #064a58;
060    text-transform: lowercase;
061    width: 72px;
062}
063#header ul li.selected a {
064    background-position: 0 -342px;
065    color: #fff;
066    text-shadow: none;
067}
068#header ul li a:hover {
069    color: #fff;
070}
071#body {
072    background: url(../images/bg-body-content.png) repeat-y left top;
073    margin: 0;
074    min-height: 1114px;
075    overflow: hidden;
076    padding: 0;
077}
078#body ul.navigation {
079    background: url(../images/bg-secondary-menu.png) no-repeat top right;
080    float: left;
081    margin: 0;
082    padding: 16px 0 24px;
083    width: 40px;
084}
085#body ul.navigation li {
086    list-style: none;
087    margin: 0;
088    padding: 0 0 10px;
089}
090#body ul.navigation li a {
091    background: url(../images/navigation.png) no-repeat;
092    display: block;
093    margin: 0;
094    padding: 0;
095    text-indent: -99999px;
096    width: 40px;
097}
098#body ul.navigation li a.link1 {
099    background-position: 0 0;
100    height: 120px;
101}
102#body ul.navigation li.selected a.link1, #body ul.navigation li a.link1:hover {
103    background-position: -45px 0;
104}
105#body ul.navigation li a.link2 {
106    background-position: 0 -125px;
107    height: 80px;
108}
109#body ul.navigation li.selected a.link2, #body ul.navigation li a.link2:hover {
110    background-position: -45px -125px;
111}
112#body ul.navigation li a.link3 {
113    background-position: 0 -210px;
114    height: 90px;
115}
116#body ul.navigation li.selected a.link3, #body ul.navigation li a.link3:hover {
117    background-position: -45px -210px;
118}
119#body .content {
120    float: left;
121    margin: 0;
122    padding: 0 60px 0 30px;
123    width: 830px;
124}
125#body .content p {
126    color: #265264;
127    line-height: 30px;
128    margin: 0;
129    padding: 0;
130}
131#body .content p a {
132    color: #265264;
133}
134#body .content p a:hover {
135    color: #020f2d;
136}
137#body .content .header, #body .content > div.figure {
138    /*border: 3px solid #e9e1d0;*/
139    background: #e9e1d0;
140    margin: 16px 0 0;
141    padding: 3px;
142    position: relative;
143    width: 824px;
144}
145#body .content .header img, #body .content > div.figure img {
146    /*border: 2px solid #fff;*/
147    background: #fff;
148    display: block;
149    margin: 0;
150    padding: 2px;
151}
152#body .content .header span, #body .content > div.figure span {
153    background: url(../images/interface.png) no-repeat 0 -60px;
154    display: block;
155    height: 51px;
156    left: -7px;
157    position: absolute;
158    top: -7px;
159    width: 51px;
160    z-index: 3;
161}
162#body .content > div.figure {
163    margin: 20px 0 25px;
164}
165#body .content > h2 {
166    color: #ac0707;
167    font-family: 'Conv_Arvo-Bold';
168    font-size: 24px;
169    font-weight: normal;
170    margin: 0;
171    padding: 30px 0 0;
172    text-transform: uppercase;
173}
174#body .content h3 {
175    color: #265264;
176    font-family: 'Conv_Arvo-Bold';
177    font-size: 16px;
178    font-weight: normal;
179    line-height: 30px;
180    margin: 0;
181    padding: 25px 0 0;
182    text-transform: uppercase;
183}
184#body .content h3 a {
185    color: #265264;
186    text-decoration: none;
187}
188#body .content h3 a:hover {
189    color: #507d90;
190}
191#body .content > img {
192    display: block;
193    margin: 20px 0 0;
194    padding: 0;
195}
196#body .body {
197    margin: 0;
198    overflow: hidden;
199    padding: 32px 0 0;
200}
201#body .body h2 {
202    color: #ac0707;
203    font-family: 'Conv_Arvo-Bold';
204    font-size: 24px;
205    font-weight: normal;
206    margin: 0;
207    padding: 0 0 5px;
208    text-transform: uppercase;
209}
210#body .body div ul {
211    margin: 0;
212    overflow: hidden;
213    padding: 0;
214}
215#body .body div ul li {
216    list-style: none;
217    margin: 0;
218    overflow: hidden;
219    padding: 0;
220}
221#body .body div ul li .article {
222    float: left;
223    margin: 0 0 0;
224    padding: 0 5px 30px 0;
225    width: 95px;
226}
227#body .body div ul li .figure {
228    border: 2px solid #e9e1d0;
229    float: left;
230    margin: 10px 0 0;
231    padding: 0;
232    width: 96px;
233}
234#body .body div ul li .figure a {
235    display: block;
236    margin: 0;
237    padding: 0;
238}
239#body .body div ul li .figure a:hover {
240    opacity: 0.8;
241}
242#body .body div ul li .figure img {
243    border: 1px solid #fff;
244    display: block;
245}
246#body .body .aside {
247    float: left;
248    margin: 0;
249    padding: 0;
250    width: 200px;
251}
252#body .body .aside b {
253    color: #265264;
254    font-family: 'Conv_Arvo-Bold';
255    font-size: 16px;
256    font-weight: normal;
257    line-height: 30px;
258    margin: 0;
259    padding: 0;
260    text-transform: uppercase;
261}
262#body .body .aside p {
263    line-height: 30px;
264}
265#body .body .aside p span {
266    display: block;
267}
268#body .body .aside form {
269    margin: 0;
270    padding: 0;
271}
272#body .body .aside form input.email {
273    background: url(../images/interface.png) no-repeat 0 0;
274    border: 0;
275    color: #9d9d9d;
276    height: 25px;
277    line-height: 25px;
278    margin: 0;
279    padding: 0 0 0 10px;
280    width: 189px;
281}
282#body .body .aside form input.submit {
283    background: url(../images/interface.png) no-repeat 0 -30px;
284    border: 0;
285    cursor: pointer;
286    height: 25px;
287    margin: 10px 0 0 130px;
288    padding: 0;
289    width: 68px;
290}
291#body .body .aside form input.submit:hover {
292    background-position: -73px -30px;
293}
294#body .body .aside .connect ul {
295    padding-top: 15px;
296}
297#body .body .aside .connect ul li {
298    float: left;
299}
300#body .body .aside .connect ul li a {
301    background: url(../images/icons.png) no-repeat;
302    display: block;
303    height: 42px;
304    text-indent: -99999px;
305}
306#body .body .aside ul li.facebook a {
307    background-position: 0 0;
308    margin: 0 25px 0 0;
309    width: 25px;
310}
311#body .body .aside ul li.facebook a:hover {
312    background-position: -60px 0;
313}
314#body .body .aside ul li.twitter a {
315    background-position: 0 -46px;
316    margin: 0 25px 0 0;
317    width: 55px;
318}
319#body .body .aside ul li.twitter a:hover {
320    background-position: -60px -46px;
321}
322#body .body .aside ul li.googleplus a {
323    background-position: 0 -92px;
324    width: 42px;
325}
326#body .body .aside ul li.googleplus a:hover {
327    background-position: -60px -92px;
328}
329#body .body .aside h4 {
330    color: #507d90;
331    font-weight: normal;
332    line-height: 30px;
333    margin: 0;
334    padding: 0;
335    text-transform: capitalize;
336}
337#body .body .aside .contact h2 {
338    padding-bottom: 7px;
339}
340#body .body .aside .contact ul li {
341    color: #265264;
342    line-height: 30px;
343}
344#body .body .aside .contact ul li a {
345    color: #265264;
346}
347#body .body .aside .contact ul li a:hover {
348    color: #507d90;
349}
350#body .body .aside > div {
351    padding: 0 0 40px;
352}
353#body .body .section {
354    float: left;
355    margin: 0;
356    padding: 0 32px;
357    width: 366px;
358}
359#body .body .section li {
360    padding-bottom: 30px;
361}
362#body .body .section li small {
363    color: #265264;
364    display: block;
365    float: left;
366    font-size: 14px;
367    line-height: 30px;
368    margin: 0;
369    padding: 0;
370    width: 60px;
371}
372#body .body .section li p {
373    float: left;
374    line-height: 30px;
375    padding: 0 0 0 6px;
376    width: 300px;
377}
378#body .body .section li p a.more {
379    color: #507d90;
380    text-decoration: none;
381}
382#body .body .section li p a.more:hover {
383    color: #020f2d;
384}
385#body .content #blog {
386    float: left;
387    margin: 0 30px 0 0;
388    padding: 0;
389    width: 610px;
390}
391#body .content #blog h2 {
392    color: #ac0707;
393    font-family: 'Conv_Arvo-Bold';
394    font-size: 24px;
395    font-weight: normal;
396    margin: 0;
397    padding: 30px 0 0;
398    text-transform: uppercase;
399}
400#body .content #blog p {
401    text-align: justify;
402    padding-top: 24px;
403}
404#body .content #blog p b {
405    display: block;
406    font-size: 16px;
407}
408#body .content #blog img {
409    display: block;
410    margin: 15px 0 0;
411    padding: 0;
412}
413#body .content #sidebar {
414    float: left;
415    margin: 0;
416    padding: 84px 0 0;
417    width: 190px;
418}
419#body .content #sidebar div {
420    padding: 0 0 30px;
421}
422#body .content #sidebar h3 {
423    color: #507d90;
424    font-family: Arial, Helvetica, sans-serif;
425    font-size: 14px;
426    font-weight: normal;
427    letter-spacing: 1px;
428    line-height: 30px;
429    margin: 0;
430    padding: 0;
431}
432#body .content #sidebar ul {
433    margin: 0;
434    padding: 0;
435}
436#body .content #sidebar ul li {
437    background: url(../images/bullet.gif) no-repeat 0 15px;
438    list-style: none;
439    line-height: 30px;
440    margin: 0;
441    padding: 0;
442}
443#body .content #sidebar ul li a {
444    color: #265264;
445    display: block;
446    text-decoration: none;
447    text-indent: 10px;
448}
449#body .content #sidebar ul li a:hover {
450    color: #020f2d;
451    text-decoration: underline
452}
453#footer {
454    background: url(../images/bg-footer.png) no-repeat top center;
455    margin: 0;
456    padding: 50px 0 0;
457}
458#footer p {
459    color: #63e0fa;
460    font-size: 12px;
461    letter-spacing: 1px;
462    margin: 0;
463    padding: 35px 0;
464    text-align: center;
465}
8-7 themes/photography/css/style.css

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者
