| 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 { position: relative; }
|
|---|
| 39 | #small { position: relative; } /* width: 100%; */
|
|---|
| 40 | #large { background: white; position: relative; width: 600px; }
|
|---|
| 41 | #mover { border: 1px solid green; 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 |
|
|---|
