hosted.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   background-color: #EFEFEF;
  24   margin: 0 auto;
  25   width: 50em;
  26 }
  27
  28 p {
  29   margin-top: 1em;
  30 }
  31
  32 iframe {
  33   margin: 3em 0;
  34   width: 37em;
  35   background-color: #FFF;
  36   border-color: #CCC;
  37   border-style: solid;
  38   border-width: .1em;
  39 }
  40
  41 #core {
  42   height: 15em;
  43 }
  44
  45 #options {
  46   height: 6.25em;
  47 }
  48
  49 @media screen and (max-width: 800px) {
  50   body {
  51     background-color: #FFF;
  52     width: 100%;
  53     font-size: 1.1em;
  54   }
  55
  56   h1 {
  57     font-size: 1.5em;
  58     background-color: hsl(0, 0%, 23%);
  59     color: white;
  60     padding: .2em;
  61   }
  62   p {
  63     display: none;
  64   }
  65
  66   iframe {
  67     width: 100%;
  68     border: none;
  69     margin: 1em 0;
  70     overflow: hidden;
  71   }
  72
  73   iframe#core {
  74     height: 25em;
  75   }
  76
  77   iframe#options {
  78     display: none;
  79   }
  80 }