0.5.x/test/pettanr.css

   1 @charset "utf-8";\r
   2 \r
   3 /*  \r
   4 --------------------------------------------------------------------------------------*/\r
   5         \r
   6         #panelContainer {\r
   7                 margin:                 0 auto;\r
   8                 _text-align:    left; /* ie5.5+6 */\r
   9                 \r
  10         }                                       \r
  11 \r
  12 /*  Panel\r
  13 --------------------------------------------------------------------------------------*/\r
  14         .panel-wrapper {\r
  15                 margin:                 10px 0;\r
  16                 position:               relative;\r
  17         }\r
  18                 .panel {\r
  19                         border:                 2px solid #333;\r
  20                         overflow:               hidden;\r
  21                         position:               relative;\r
  22                         top:                    0;\r
  23                         left:                   0;\r
  24                 }\r
  25                         .panel img,\r
  26                         .panel .speach {\r
  27                                 position:               absolute;\r
  28                                 margin:                 0;\r
  29                         }\r
  30                         \r
  31 /*  Panel > speach\r
  32 --------------------------------------------------------------------------------------*/\r
  33                         .speach {\r
  34                                 text-align:                     center;\r
  35                                 display:                        table;\r
  36                         }\r
  37                                 .speach span {\r
  38                                         display:                table-cell;\r
  39                                         vertical-align: middle;\r
  40                                         padding:                16.66%;\r
  41                                 }\r
  42                         \r
  43                 /* fix for ie */        \r
  44                         .speach table,\r
  45                         .speach tbody,\r
  46                         .speach tr,\r
  47                         .speach td {\r
  48                                 width:                          100%;\r
  49                                 height:                         100%;\r
  50                                 border:                         0;\r
  51                                 padding:                        0;\r
  52                                 margin:                         0;\r
  53                                 text-align:                     center;\r
  54                                 vertical-align:         middle;\r
  55                         }\r
  56                         .speach td {\r
  57                                 padding:                        16.66%;\r
  58                         }\r
  59                                 \r
  60 \r
  61 /*  Panel > tooltip contain Image's Title & Author\r
  62 --------------------------------------------------------------------------------------*/\r
  63                 .tooltip-container {\r
  64                         font-size:                      12px;\r
  65                         position:                       absolute;\r
  66                         top:                            0;\r
  67                         left:                           0;\r
  68                         *width:                         200%; /* ie7 */\r
  69                         _width:                         200%; /* ie5.5+6 */\r
  70                 }\r
  71                         .tooltip {\r
  72                                 position:                               absolute;\r
  73                                 color:                                  #999;\r
  74                                 background-color:               rgba( 255, 255, 255, 0.8);\r
  75                                 border:                                 1px solid #999;\r
  76                                 padding:                                1em 2em;\r
  77                                 border-radius:                  10px;\r
  78                                 -moz-border-radius:             10px;\r
  79                                 -opera-border-radius:   10px;\r
  80                                 -webkit-border-radius:  10px;\r
  81                                 box-shadow:                             2px 2px 1px #999;\r
  82                                 -moz-box-shadow:                2px 2px 1px #999;\r
  83                                 -opera-box-shadow:              2px 2px 1px #999;\r
  84                                 -webkit-box-shadow:             2px 2px 1px #999;\r
  85                         }\r
  86                         .image-shadow {\r
  87                                 position:                               absolute;\r
  88                                 margin:                                 0;\r
  89                         }\r
  90                         \r
  91                 /* fix for ie */\r
  92                         .tooltip {\r
  93                                 *background-color:              #fff;\r
  94                                 _background-color:              #fff;           \r
  95                         }\r
  96                         html>/**/body .tooltip {  \r
  97                                 background-color/*\**/: #fff\9;  /* ie8(ie8 mode) */\r
  98                         }\r
  99         \r
 100         /* hover */\r
 101                 .tooltip-container a:hover,                     \r
 102                 .tooltip-container:hover {\r
 103                         z-index:                                        9999;\r
 104                         _zoom:                                          1; /* ie5.5+6 */\r
 105                 }\r
 106                         .tooltip-container a:hover .image-shadow,\r
 107                         .tooltip-container:hover .image-shadow {\r
 108                                 border:                                 2px solid #666;\r
 109                         }\r
 110                         .tooltip-container a:hover .tooltip,                            \r
 111                         .tooltip-container:hover .tooltip {\r
 112                                 background-color:               #ffc;\r
 113                                 border-color:                   #333;\r
 114                                 color:                                  #333;\r
 115                                 box-shadow:                             2px 2px 3px #666;\r
 116                                 -moz-box-shadow:                2px 2px 3px #666;\r
 117                                 -opera-box-shadow:              2px 2px 3px #666;\r
 118                                 -webkit-box-shadow:             2px 2px 3px #666;\r
 119                         }\r
 120 \r
 121         /* fix for ie */\r
 122                 .tooltip-container a {\r
 123                         text-decoration:                        none; /* ie6 */\r
 124                         color:                                          #333; /* ie6 */                                         \r
 125                 }                                               \r
 126         \r
 127                 .tooltip-container table,\r
 128                 .tooltip-container tbody,\r
 129                 .tooltip-container tr,\r
 130                 .tooltip-container td {\r
 131                         width:                  100%;\r
 132                         height:                 100%;\r
 133                         border:                 0;\r
 134                         padding:                0;\r
 135                         margin:                 0;\r
 136                         position:               relative; /* ie5.5でなぜかtooltipがhoverで消えるのを防ぐ */\r
 137                 }                                       \r