1 | /*
|
---|
2 | GENERAL
|
---|
3 | */
|
---|
4 | * { margin: 0; padding: 0; }
|
---|
5 | html { overflow-y: scroll; }
|
---|
6 | body { font: 14px Georgia, Serif; background: #444; }
|
---|
7 | #main-content { width: 600px; margin: 20px auto; padding: 20px; background: white; -moz-border-radius: 20px; -moz-box-shadow: #222 5px 5px 5px; -webkit-border-radius: 20px; -webkit-box-shadow: #222 5px 5px 5px; position: relative; }
|
---|
8 | pre { width: 580px; overflow: auto; margin: 0 0 12px 0; padding: 10px; background: #eee; border: 1px solid #ccc; }
|
---|
9 | code { font: 11px Monaco, Courier, MonoSpace; }
|
---|
10 | ul { margin: 0 0 12px 30px; }
|
---|
11 |
|
---|
12 | /*
|
---|
13 | NAV
|
---|
14 | */
|
---|
15 | #nav { list-style: none; overflow: hidden; margin: 0 0 22px 0; }
|
---|
16 | #nav li { display: inline; }
|
---|
17 | #nav li a { display: block; float: left; padding: 8px; text-decoration: none; }
|
---|
18 | #nav li a:hover,
|
---|
19 | #calendar #nav li.cal a,
|
---|
20 | #image #nav li.img a,
|
---|
21 | #text #nav li.txt a,
|
---|
22 | #use #nav li.use a,
|
---|
23 | #double #nav li.dbl a { background: #444; color: white; }
|
---|
24 |
|
---|
25 |
|
---|
26 | h1 { font: bold 40px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 12px 0; }
|
---|
27 | h2 { font: bold 30px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 6px 0; }
|
---|
28 | p { margin: 0 0 12px 0; }
|
---|
29 |
|
---|
30 | #dl { position: absolute; top: 15px; right: 15px; text-decoration: none; background: #222; color: white; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 3px 8px; }
|
---|
31 | #dl:hover { background: #999; }
|
---|
32 |
|
---|
33 |
|
---|
34 |
|
---|
35 | /*
|
---|
36 | FOR THE MOVER
|
---|
37 | */
|
---|
38 | #wrap { width: 600px; position: relative; }
|
---|
39 | #small { position: relative;} /* width: 100%; */
|
---|
40 | #large { background: white; position: relative; width: 600px;}
|
---|
41 | #mover { border: 1px solid blue; position: absolute; top: 0; left: 0; width: 198px; height: 198px; overflow: hidden; z-index: 100; background: white; display: none; }
|
---|
42 | #overlay { width: 200px; height: 200px; position: absolute; top: 0; left: 0; z-index: 200; }
|
---|
43 |
|
---|
44 | /*
|
---|
45 | .wrap { width: 600px; position: relative; }
|
---|
46 | .small { position: relative; width: 100%; }
|
---|
47 | .large { background: white; position: relative; width: 600px; }
|
---|
48 | .mover { position: absolute; top: 0; left: 0; width: 200px; height: 200px; overflow: hidden; z-index: 100; background: white; display: none; }
|
---|
49 | .overlay { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }
|
---|
50 | */
|
---|
51 |
|
---|
52 | /*
|
---|
53 | FOR TEXT DEMO
|
---|
54 | */
|
---|
55 | #small p { font-size: 8px; }
|
---|
56 |
|
---|
57 |
|
---|
58 |
|
---|
59 |
|
---|
60 |
|
---|
61 | /*
|
---|
62 | CALENDAR SPECIFIC
|
---|
63 | */
|
---|
64 | caption { background: #1634D8; padding: 3px; color: white; font: 13px Helvetica, Sans-Serif; text-transform: uppercase; letter-spacing: 1px; }
|
---|
65 | .calendar { font-size: 13px; }
|
---|
66 | .calendar td, .calendar th { padding: 1px; border: 2px solid white; }
|
---|
67 | .calendar td a { display: block; padding: 3px; background: #900; color: white; }
|
---|
68 | #months-tables .calendar td a:hover,
|
---|
69 | #months-tables .calendar td a[style]:hover { background: black !important; text-decoration: none; }
|
---|
70 | .day { text-align: center }
|
---|
71 | .past-day { background-color: #eee; }
|
---|
72 | #months-tables { width: 100%; }
|
---|
73 | #months-tables td { vertical-align: top; }
|
---|
74 | td { vertical-align: top; }
|
---|
75 | .single-month { padding-right: 10px; }
|
---|
76 | #small .calendar { font-size: 8px; }
|
---|
77 | #small .calendar td, #small .calendar th { width: 12px; height: 12px; border: 1px solid white; padding: 0; }
|
---|
78 | #small .calendar td a { padding: 0; display: block; width: 12px; height: 12px; }
|
---|
79 | #small .calendar td.day { background: #eee; }
|
---|
80 | #small .calendar td.past-day { background: #999; }
|
---|
81 | #small a { border: 0; }
|
---|
82 | #small .months-tables { width: auto; }
|
---|
83 | #small caption { font-size: 8px; white-space: nowrap; }
|
---|
84 |
|
---|
85 |
|
---|
86 |
|
---|