0.5.x/stylesheets/system.css

   1 /*  VML ( v\:* don't work for ie8(ie8mode))\r
   2 --------------------------------------------------------------------------------------*/\r
   3         v\:shape,\r
   4         v\:image {\r
   5                 behavior:       url(#default#VML);\r
   6                 display:        block;\r
   7         }\r
   8 \r
   9 /*  Reset\r
  10 --------------------------------------------------------------------------------------*/\r
  11         html, body {\r
  12                 margin:                 0;\r
  13                 padding:                0;\r
  14         }\r
  15          \r
  16         p {\r
  17                 text-shadow:    #000 0 0 0;/* for Safari */ \r
  18                 -moz-opacity:   0.99;/* for Firefox */ \r
  19         }\r
  20 \r
  21         /* http://e2designer.seesaa.net/article/152168876.html */\r
  22         /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
  23 \r
  24         .break-word {\r
  25                 white-space: pre;           /* CSS 2.0 */\r
  26                 white-space: pre-wrap;      /* CSS 2.1 */\r
  27                 white-space: pre-line;      /* CSS 3.0 */\r
  28                 white-space: -pre-wrap;     /* Opera 4-6 */\r
  29                 white-space: -o-pre-wrap;   /* Opera 7 */\r
  30                 white-space: -moz-pre-wrap; /* Mozilla */\r
  31                 white-space: -hp-pre-wrap;  /* HP Printers */\r
  32                 word-wrap:   break-word;    /* IE 5+ */\r
  33         }\r
  34         \r
  35         /* remember to define focus styles! */\r
  36         :focus { outline: 0;}\r
  37         \r
  38         /* http://honoo-no.com/creators/2008/02/14_211120.html */\r
  39         textarea, input {\r
  40                 font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r
  41         }\r
  42         \r
  43         \r
  44         a:link { color:#008;}\r
  45         a:visited { color: #505;}\r
  46         a { text-decoration: none;}\r
  47         \r
  48         a:hover {\r
  49                 text-decoration:        underline;\r
  50                 color:                          #f60;\r
  51         }\r
  52         \r
  53         \r
  54 /*  ClearFix\r
  55 --------------------------------------------------------------------------------------*/\r
  56 .clearfix:after {\r
  57   content: ".";  /* 新しい要素を作る */\r
  58   display: block;  /* ブロックレベル要素に */\r
  59   clear: both;\r
  60   height: 0;\r
  61   visibility: hidden;\r
  62 }\r
  63 \r
  64 .clearfix {\r
  65   min-height: 1px;\r
  66 }\r
  67 \r
  68 * html .clearfix {\r
  69   height: 1px;\r
  70   /*¥*//*/\r
  71   height: auto;\r
  72   overflow: hidden;\r
  73   /**/\r
  74 }\r
  75 \r
  76 /*  Button\r
  77 --------------------------------------------------------------------------------------*/\r
  78         .button {\r
  79                 border:                                 1px solid;\r
  80                 background:                             #E3E3E3;\r
  81                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
  82                 background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
  83                 border-color:                   #ccc #bbb #aaa;\r
  84                 color:                                  #666;\r
  85                 font-weight:                    bold;\r
  86                 text-align:                             center;\r
  87                 cursor:                                 pointer;\r
  88                 overflow:                               hidden;\r
  89                 height:                                 30px;\r
  90                 line-height:                    30px;\r
  91                 border-radius:                  3px;\r
  92                 -o-border-radius:               3px;\r
  93                 -ms-border-radius:              3px;\r
  94                 -moz-border-radius:             3px;\r
  95                 -webkit-border-radius:  3px;\r
  96         }\r
  97         .button-has-focus {\r
  98                 border-color:                   #4D90FE;\r
  99         }\r
 100 \r
 101 /*  Loading\r
 102 --------------------------------------------------------------------------------------*/\r
 103         .loading {\r
 104                 background-image:               url( ../images/loading.gif);\r
 105                 background-position:    50% 50%;\r
 106                 background-repeat:              no-repeat;\r
 107         }\r
 108         .error {\r
 109                 background-image:               url( ../images/error.png);\r
 110                 background-position:    50% 50%;\r
 111                 background-repeat:              no-repeat;\r
 112         }\r
 113 \r
 114 \r
 115 \r
 116 \r
 117 /*  Noscript Alert\r
 118 --------------------------------------------------------------------------------------*/\r
 119         #noscript-alert {\r
 120                 border-left:            1px solid #666;\r
 121                 display:                        block;\r
 122                 text-align:                     center;\r
 123                 color:                          red;\r
 124                 font-weight:            bold;\r
 125                 font-size:                      12px;\r
 126                 line-height:            12px;\r
 127                 padding:                        11px 0 7px;\r
 128         }\r
 129 \r
 130 /*--------------------------------------------------------------------------------------\r
 131  * \r
 132  *  home\r
 133  *  \r
 134  -------------------------------------------------------------------------------------*/\r
 135         #home-root {\r
 136                 position:       absolute;\r
 137                 top:            0;\r
 138                 left:           0;\r
 139                 width:          100%;\r
 140                 height:         100%;\r
 141         }\r
 142                 #home-tail-container {\r
 143                         position:       absolute;\r
 144                         padding:        20px;\r
 145                 }\r
 146                         .tail-wrapper {\r
 147                                 width:          150px;\r
 148                                 height:         150px;\r
 149                                 float:          left;\r
 150                                 margin:         0 10px 10px 0;\r
 151                                 overflow:       hidden;\r
 152                                 cursor:         pointer;\r
 153                             position:   relative;\r
 154                         }\r
 155                         .tail-wrapper h2 {\r
 156                                 position:               absolute;\r
 157                                 bottom:                 10px;\r
 158                                 left:                   20px;\r
 159                                 color:                  #FFF;\r
 160                                 font-size:              14px;\r
 161                                 font-weight:    normal;\r
 162                                 font-family:    Segoe UI,Tahoma,Arial,Verdana,sans-serif;\r
 163                         }\r
 164 \r
 165 /*--------------------------------------------------------------------------------------\r
 166  * \r
 167  *  overlay\r
 168  *  \r
 169  -------------------------------------------------------------------------------------*/\r
 170         #overlay-container,\r
 171         #overlay-shadow {\r
 172                 position:                       absolute;\r
 173                 left:                           0;\r
 174                 top:                            0;\r
 175                 width:                          100%;\r
 176                 height:                         100%;\r
 177                 overflow:                       hidden;\r
 178         }\r
 179                 #overlay-shadow {\r
 180                         background:                     #000;\r
 181                         opacity:                        0.5;\r
 182                         -moz-opacity:           0.5;\r
 183                         -khtml-opacity:         0.5;\r
 184                 }\r
 185                 .pettanr-ActiveX-enabled #overlay-shadow {\r
 186                         filter:                         alpha(opacity=50);\r
 187                         -ms-filter:                     alpha(opacity=50);                      \r
 188                 }\r
 189                 .pettanr-ActiveX-disabled #overlay-shadow {\r
 190                         background:                     transparent url( "../images/black_50pct.png" )　repeat 0 0;\r
 191                         _background:            url( "../images/black_50pct.gif" )　repeat 0 0;\r
 192                 }\r
 193                 \r
 194                 #overlay-close-button {\r
 195                         border:                                 2px solid #f00;\r
 196                         color:                                  #f00;\r
 197                         font-weight:                    bold;\r
 198                         font-size:                              16px;\r
 199                         line-height:                    16px;\r
 200                         text-align:                             center;\r
 201                         cursor:                                 pointer;\r
 202                         overflow:                               hidden;\r
 203                         width:                                  20px;\r
 204                         height:                                 20px;\r
 205                         padding:                                2px;\r
 206                         position:                               absolute;\r
 207                         top:                                    9px;\r
 208                         right:                                  9px;\r
 209                         z-index:                                9999;\r
 210                         border-radius:                  5px;\r
 211                         -o-border-radius:               5px;\r
 212                         -ms-border-radius:              5px;\r
 213                         -moz-border-radius:             5px;\r
 214                         -webkit-border-radius:  5px;\r
 215                 }