core.css

   1 /* Copyright (c) 2012 Robert Sesek <http://robert.sesek.com>
   2  *
   3  * Permission is hereby granted, free of charge, to any person obtaining a copy
   4  * of this software and associated documentation files (the "Software"), to
   5  * deal in the Software without restriction, including without limitation the
   6  * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
   7  * sell copies of the Software, and to permit persons to whom the Software is
   8  * furnished to do so, subject to the following conditions:
   9  *
  10  * The above copyright notice and this permission notice shall be included in
  11  * all copies or substantial portions of the Software.
  12  *
  13  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  18  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  19  * DEALINGS IN THE SOFTWARE.
  20  */
  21
  22 body {
  23   width: 36em;
  24 }
  25
  26 ol, ul {
  27   list-style-type: none;
  28 }
  29
  30 li {
  31   margin: .3em;
  32 }
  33
  34 li label {
  35   width: 12em;
  36   text-align: right;
  37   display: inline-block;
  38   font-weight: bold;
  39 }
  40
  41 li input {
  42   padding: .3em;
  43   width: 22em;
  44   font-size: 1em;
  45
  46   border-color: #CCCCCC;
  47   border-style: solid;
  48   border-width: .1em;
  49 }
  50
  51 li input:focus {
  52   outline: rgb(15, 74, 169) solid .1em;
  53 }
  54
  55 button {
  56   font-size: 1em;
  57   padding: .5em 1.0em;
  58   margin: .5em;
  59   float: right;
  60
  61   background-color: #CECECE;
  62   border-color: #909090;
  63   border-style: solid;
  64   border-width: .1em;
  65   border-radius: .2em;
  66 }
  67
  68 button:active {
  69   border-color: rgb(15, 74, 169);
  70 }
  71
  72 hr {
  73   background-color: #CCCCCC;
  74   border: none;
  75   height: .1em;
  76   margin: 1em .5em;
  77 }
  78
  79 .clear {
  80   clear: both;
  81 }
  82
  83 @media screen and (max-width: 450px) {
  84   body {
  85     margin: 0;
  86     padding: 0;
  87     width: 100%;
  88   }
  89
  90   li {
  91     margin-bottom: 1.4em;
  92   }
  93
  94   li input {
  95     display: block;
  96     width: 100%;
  97     box-sizing: border-box;
  98   }
  99
 100   li label {
 101     text-align: left;
 102   }
 103
 104   li button {
 105     float: none;
 106     width: 100%;
 107     margin: 0;
 108   }
 109
 110   hr {
 111     display: none;
 112   }
 113 }