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, li .input {
  42   display: inline-block;
  43   padding: .3em;
  44   width: 22em;
  45   font-size: 1em;
  46
  47   border-color: #CCCCCC;
  48   border-style: solid;
  49   border-width: .1em;
  50 }
  51
  52 li input:focus {
  53   outline: rgb(15, 74, 169) solid .1em;
  54 }
  55
  56 button {
  57   font-size: 1em;
  58   padding: .5em 1.0em;
  59   margin: .5em;
  60   float: right;
  61
  62   background-color: #CECECE;
  63   border-color: #909090;
  64   border-style: solid;
  65   border-width: .1em;
  66   border-radius: .2em;
  67 }
  68
  69 button:active {
  70   border-color: rgb(15, 74, 169);
  71 }
  72
  73 hr {
  74   background-color: #CCCCCC;
  75   border: none;
  76   height: .1em;
  77   margin: 1em .5em;
  78 }
  79
  80 .clear {
  81   clear: both;
  82 }
  83
  84 @media screen and (max-width: 450px) {
  85   body {
  86     margin: 0;
  87     padding: 0;
  88     width: 100%;
  89     font-size: 1.1em;
  90   }
  91
  92   li {
  93     margin-bottom: 1.4em;
  94   }
  95
  96   li input, li .input {
  97     display: block;
  98     width: 100%;
  99     box-sizing: border-box;
 100   }
 101
 102   li label {
 103     text-align: left;
 104     color: hsl(0, 0%, 23%);
 105   }
 106
 107   li button {
 108     float: none;
 109     width: 100%;
 110     margin: 0;
 111   }
 112
 113   hr {
 114     display: none;
 115   }
 116 }