stylesheet.css

   1 /*Typography*/
   2
   3 @font-face {
   4     font-family: 'Signika Light';
   5     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
   6 }
   7
   8 @font-face {
   9     font-family: 'Open Sans';
  10     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
  11 }
  12
  13 /*Style common HTML tags*/
  14
  15 html {
  16     line-height: 1.4em;
  17     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
  18     font-size: 1em;
  19     color: #363636;
  20     width: 100%;
  21 }
  22
  23 a { color: #b495d3;}
  24 a:link { text-decoration: none; }
  25 a:visited { text-decoration: none; }
  26 a:hover { text-decoration: underline; }
  27 a:active { text-decoration: underline; }
  28
  29
  30 p { line-height: 1.4em; margin-bottom: 1.2em; }
  31
  32 i { font-style: italic; }
  33 b { font-style: oblique; }
  34
  35 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
  36 ul {margin: 1em 2em 0em 4em;}
  37
  38 br {margin-bottom: 20em; margin-top: 20em;}
  39
  40 h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
  41 h2 {  font-size: 1.75em;  font-family: 'Signika Light'; color: #6c6c6c; margin-bottom: 0.5em; margin-top: 1em; }
  42 h3 {  font-size: 1.625em; font-family: 'Signika Light'; color: #b495d3; margin-bottom: 0.5em; margin-top: 1em; }
  43 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
  44 h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
  45 h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
  46
  47 /*Site-specific*/
  48
  49 #banner > img {
  50   width: 100%;
  51 }
  52
  53 #wrapper {
  54   margin: auto 5em;
  55 }
  56
  57 #comparisons {
  58   /* padding-top: 10em; */
  59   background-color: #fbfbfb;
  60   position: absolute;
  61   width: 100%;
  62   max-width: 1150px;
  63 }
  64
  65 .main_title {
  66   margin-left: 2em;
  67   margin-bottom: 3em;
  68 }
  69
  70 .section_wrapper {
  71   margin-bottom: 4em;
  72 }
  73
  74 .title {
  75   text-align: center;
  76   font-size: 1.5em;
  77 }
  78
  79 #free {
  80   position: relative;
  81   /* background-color: red; */
  82   float: left;
  83   width: 45%;
  84   max-width: 450px;
  85 }
  86
  87 #sign {
  88   position: relative;
  89   /* background-color: green; */
  90   width: 240px;
  91   float: left;
  92   margin-top: 3em;
  93 }
  94
  95 #proprietary {
  96   position: relative;
  97   /* background-color: blue; */
  98   width: 45%;
  99   max-width: 450px;
 100   float: right;
 101 }
 102
 103 .product {
 104   display: block;
 105   margin: auto;
 106   width: 250px;
 107   height: 250px;
 108 }
 109
 110 .sign  {
 111   display: block;
 112   margin: auto;
 113   width: 149px;
 114   height: 149px;
 115 }
 116
 117 .separator {
 118   width: 1px;
 119   height: 324px;
 120   margin: auto;
 121   margin-left: 7.5em;
 122   margin-top: 3em;
 123 }
 124
 125 #section_wrapper {
 126   position: relative;
 127 }
 128
 129 /* #test {
 130   height: 10em;
 131   position: relative;
 132   background-color: white;
 133   display: block;
 134   float: left;
 135 } */