[Summary view] [Print] [Text view]

   1  /* Form Styles
   2  ---------------------------------------- */
   3  
   4  /* General form styles
   5  ----------------------------------------*/
   6  fieldset {
   7      border-width: 0;
   8      font-family: Verdana, Helvetica, Arial, sans-serif;
   9      font-size: 1.1em;
  10  }
  11  
  12  input {
  13      font-weight: normal;
  14      vertical-align: middle;
  15      padding: 0 3px;
  16      font-size: 1em;
  17      font-family: Verdana, Helvetica, Arial, sans-serif;
  18  }
  19  
  20  select {
  21      font-family: Verdana, Helvetica, Arial, sans-serif;
  22      font-weight: normal;
  23      cursor: pointer;
  24      vertical-align: middle;
  25      border: 1px solid transparent;
  26      padding: 1px;
  27      font-size: 1em;
  28  }
  29  
  30  select:focus {
  31      outline-style: none;
  32  }
  33  
  34  option {
  35      padding-right: 1em;
  36  }
  37  
  38  select optgroup option {
  39      padding-right: 1em;
  40      font-family: Verdana, Helvetica, Arial, sans-serif;
  41  }
  42  
  43  textarea {
  44      font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  45      width: 60%;
  46      padding: 2px;
  47      font-size: 1em;
  48      line-height: 1.4em;
  49  }
  50  
  51  label {
  52      cursor: default;
  53      padding-right: 5px;
  54  }
  55  
  56  label input {
  57      vertical-align: middle;
  58  }
  59  
  60  label img {
  61      vertical-align: middle;
  62  }
  63  
  64  /* Definition list layout for forms
  65  ---------------------------------------- */
  66  fieldset dl {
  67      padding: 4px 0;
  68  }
  69  
  70  fieldset dt {
  71      float: left;
  72      width: 40%;
  73      text-align: left;
  74      display: block;
  75  }
  76  
  77  fieldset dd {
  78      margin-left: 41%;
  79      vertical-align: top;
  80      margin-bottom: 3px;
  81  }
  82  
  83  /* Specific layout 1 */
  84  fieldset.fields1 dt {
  85      width: 15em;
  86      border-right-width: 0;
  87  }
  88  
  89  fieldset.fields1 dd {
  90      margin-left: 15em;
  91      border-left-width: 0;
  92  }
  93  
  94  fieldset.fields1 div {
  95      margin-bottom: 3px;
  96  }
  97  
  98  /* Set it back to 0px for the reCaptcha divs: PHPBB3-9587 */
  99  fieldset.fields1 #recaptcha_widget_div div, fieldset.fields1 .live-search div {
 100      margin-bottom: 0;
 101  }
 102  
 103  /* Specific layout 2 */
 104  fieldset.fields2 dt {
 105      width: 15em;
 106      border-right-width: 0;
 107  }
 108  
 109  fieldset.fields2 dd {
 110      margin-left: 16em;
 111      border-left-width: 0;
 112  }
 113  
 114  /* Form elements */
 115  dt label {
 116      font-weight: bold;
 117      text-align: left;
 118  }
 119  
 120  dd label {
 121      white-space: nowrap;
 122  }
 123  
 124  dd input, dd textarea {
 125      margin-right: 3px;
 126  }
 127  
 128  dd select {
 129      width: auto;
 130  }
 131  
 132  dd select[multiple] {
 133      width: 100%;
 134  }
 135  
 136  dd textarea {
 137      width: 85%;
 138  }
 139  
 140  /* Hover effects */
 141  #timezone {
 142      width: 95%;
 143  }
 144  
 145  /* Quick-login on index page */
 146  fieldset.quick-login {
 147      margin-top: 5px;
 148  }
 149  
 150  fieldset.quick-login input {
 151      width: auto;
 152  }
 153  
 154  fieldset.quick-login input.inputbox {
 155      width: 15%;
 156      vertical-align: middle;
 157      margin-right: 5px;
 158  }
 159  
 160  fieldset.quick-login label {
 161      white-space: nowrap;
 162      padding-right: 2px;
 163  }
 164  
 165  /* Display options on viewtopic/viewforum pages  */
 166  fieldset.display-options {
 167      text-align: center;
 168      margin: 3px 0 5px 0;
 169  }
 170  
 171  fieldset.display-options label {
 172      white-space: nowrap;
 173      padding-right: 2px;
 174  }
 175  
 176  fieldset.display-options a {
 177      margin-top: 3px;
 178  }
 179  
 180  /* Display actions for ucp and mcp pages */
 181  fieldset.display-actions {
 182      text-align: right;
 183      line-height: 2em;
 184      white-space: nowrap;
 185      padding-right: 1em;
 186  }
 187  
 188  fieldset.display-actions label {
 189      white-space: nowrap;
 190      padding-right: 2px;
 191  }
 192  
 193  fieldset.sort-options {
 194      line-height: 2em;
 195  }
 196  
 197  /* MCP forum selection*/
 198  fieldset.forum-selection {
 199      margin: 5px 0 3px 0;
 200      float: right;
 201  }
 202  
 203  fieldset.forum-selection2 {
 204      margin: 13px 0 3px 0;
 205      float: right;
 206  }
 207  
 208  /* Submit button fieldset */
 209  fieldset.submit-buttons {
 210      text-align: center;
 211      vertical-align: middle;
 212      margin: 5px 0;
 213  }
 214  
 215  fieldset.submit-buttons input {
 216      vertical-align: middle;
 217      padding-top: 3px;
 218      padding-bottom: 3px;
 219  }
 220  
 221  /* Posting page styles
 222  ----------------------------------------*/
 223  
 224  /* Buttons used in the editor */
 225  #format-buttons {
 226      margin: 15px 0 2px 0;
 227  }
 228  
 229  #format-buttons input, #format-buttons select {
 230      vertical-align: middle;
 231  }
 232  
 233  /* Main message box */
 234  #message-box {
 235      width: 80%;
 236  }
 237  
 238  #message-box textarea {
 239      font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
 240      width: 450px;
 241      height: 270px;
 242      min-width: 100%;
 243      max-width: 100%;
 244      font-size: 1.2em;
 245      resize: vertical;
 246      outline: 3px dashed transparent;
 247      outline-offset: -4px;
 248      -webkit-transition: all .5s ease;
 249      -moz-transition: all .5s ease;
 250      -ms-transition: all .5s ease;
 251      -o-transition: all .5s ease;
 252      transition: all .5s ease;
 253  }
 254  
 255  /* Emoticons panel */
 256  #smiley-box {
 257      width: 18%;
 258      float: right;
 259  }
 260  
 261  #smiley-box img {
 262      margin: 3px;
 263  }
 264  
 265  /* Input field styles
 266  ---------------------------------------- */
 267  .inputbox {
 268      border: 1px solid transparent;
 269      padding: 2px;
 270  }
 271  
 272  .inputbox:hover, .inputbox:focus {
 273      border: 1px solid transparent;
 274      outline-style: none;
 275  }
 276  
 277  input.inputbox    { width: 85%; }
 278  input.medium    { width: 50%; }
 279  input.narrow    { width: 25%; }
 280  input.tiny    { width: 150px; }
 281  
 282  textarea.inputbox {
 283      width: 85%;
 284  }
 285  
 286  .autowidth {
 287      width: auto !important;
 288  }
 289  
 290  input[type="number"] {
 291      -moz-padding-end: 0;
 292  }
 293  
 294  input[type="search"] {
 295      -webkit-appearance: textfield;
 296      -webkit-box-sizing: content-box;
 297  }
 298  
 299  input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
 300      display: none;
 301  }
 302  
 303  input[type="search"]::-webkit-search-cancel-button {
 304      cursor: pointer;
 305  }
 306  
 307  /* Form button styles
 308  ---------------------------------------- */
 309  input.button1, input.button2 {
 310      font-size: 1em;
 311  }
 312  
 313  a.button1, input.button1, input.button3, a.button2, input.button2 {
 314      width: auto !important;
 315      padding-top: 1px;
 316      padding-bottom: 1px;
 317      font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
 318      background: transparent none repeat-x top left;
 319  }
 320  
 321  a.button1, input.button1 {
 322      font-weight: bold;
 323      border: 1px solid transparent;
 324  }
 325  
 326  input.button3 {
 327      padding: 0;
 328      margin: 0;
 329      line-height: 5px;
 330      height: 12px;
 331      background-image: none;
 332      font-variant: small-caps;
 333  }
 334  
 335  input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"] {
 336      cursor: pointer;
 337  }
 338  
 339  /* Alternative button */
 340  a.button2, input.button2, input.button3 {
 341      border: 1px solid transparent;
 342  }
 343  
 344  /* <a> button in the style of the form buttons */
 345  a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
 346      text-decoration: none;
 347      padding: 2px 8px;
 348      line-height: 250%;
 349      vertical-align: text-bottom;
 350      background-position: 0 1px;
 351  }
 352  
 353  /* Hover states */
 354  a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
 355      border: 1px solid transparent;
 356      background-position: 0 100%;
 357  }
 358  
 359  input.disabled {
 360      font-weight: normal;
 361  }
 362  
 363  /* Focus states */
 364  input.button1:focus, input.button2:focus, input.button3:focus {
 365      outline-style: none;
 366  }
 367  
 368  /* Topic and forum Search */
 369  .search-box {
 370      float: left;
 371  }
 372  
 373  .search-box .inputbox {
 374      background-image: none;
 375      border-right-width: 0;
 376      border-radius: 4px 0 0 4px;
 377      float: left;
 378      height: 24px;
 379      padding: 3px;
 380      -webkit-box-sizing: border-box;
 381      -moz-box-sizing: border-box;
 382      box-sizing: border-box;
 383  }
 384  
 385  .search-box button {
 386      float: left;
 387  }
 388  
 389  .search-box button.search-icon {
 390      border-radius: 0;
 391      font-size: 0;
 392      height: 24px;
 393      margin: 0;
 394      padding: 3px 5px;
 395  }
 396  
 397  .search-box a.button {
 398      border-left-width: 0;
 399      border-radius: 0 4px 4px 0;
 400      font-size: 0;
 401      margin: 0;
 402      padding: 2px 5px 2px 3px;
 403  }
 404  
 405  /* Search box (header)
 406  --------------------------------------------- */
 407  .search-header {
 408      border-radius: 4px;
 409      display: block;
 410      float: right;
 411      margin-right: 5px;
 412      margin-top: 30px;
 413  }
 414  
 415  .search-header .inputbox { border: 0; }
 416  
 417  .search-header button {
 418      border-top: 0;
 419      border-bottom: 0;
 420  }
 421  
 422  .search-header a.button {
 423      border: 0;
 424      border-left: 1px;
 425      padding: 3px 5px 3px 4px;
 426  }
 427  
 428  input.search {
 429      background-image: none;
 430      background-repeat: no-repeat;
 431      background-position: left 1px;
 432      padding-left: 17px;
 433  }
 434  
 435  .full { width: 95%; }
 436  .medium { width: 50%;}
 437  .narrow { width: 25%;}
 438  .tiny { width: 10%;}