stylesheet.css

   1 /*Typography*/
   2
   3 @font-face {
   4     font-family: 'Signika Regular';
   5     src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
   6 }
   7
   8 @font-face {
   9     font-family: 'Signika Light';
  10     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
  11 }
  12
  13 @font-face {
  14     font-family: 'Signika Bold';
  15     src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
  16 }
  17
  18 @font-face {
  19     font-family: 'Open Sans';
  20     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
  21 }
  22
  23 @font-face {
  24     font-family: 'Open Sans Bold';
  25     src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
  26 }
  27
  28 /*Style common HTML tags*/
  29
  30 html {
  31     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
  32     font-size: 14px;
  33     line-height: 1.4;
  34     color: #363636;
  35     background-color: #fff;
  36     width: 100%;
  37 }
  38
  39 /* Type something: */
  40
  41 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
  42
  43 p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
  44
  45 i { font-style: italic; }
  46 b { font-style: oblique; }
  47
  48 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
  49 /* ul {margin: 1em 2em 0em 4em;} */
  50
  51 br {margin-bottom: 20em; margin-top: 20em;}
  52
  53 h1 {  font-size: 2.20em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 1em; }
  54 h2 {  font-size: 1.75em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
  55 h3 {  font-size: 1.625em; font-family: 'Signika Bold';  color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
  56 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  57 h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  58 h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  59
  60 /*Site-specific*/
  61
  62   /* Header */
  63
  64 .header {
  65 }
  66
  67 /* Navbar */
  68
  69 .header_wrapper {
  70   background-color: #2CAF8F;
  71   height: 450px;
  72 }
  73
  74 .header a {
  75   border-bottom: 0;
  76 }
  77
  78 .navbar_wrapper {
  79   max-width: 1300px;
  80   min-width: 1110px;
  81   margin: auto;
  82   text-align: center;
  83 }
  84
  85 .logo_wrapper {
  86   padding: 1.3em;
  87   float: left;
  88 }
  89
  90 .join_wrapper {
  91   padding: 1.2em;
  92   float: right;
  93   display: inline-block;
  94 }
  95
  96 .logo, .join {
  97   max-width: 200px;
  98   min-width: 200px;
  99 }
 100
 101 .share_wrapper {
 102 }
 103
 104 .share {
 105   text-align: center;
 106 }
 107
 108 .share a{
 109   background-color: #FDD53A;
 110   border-bottom: 0;
 111   padding: .6em 2em;
 112   font-family: 'Signika Bold';
 113   font-size: 1.4em;
 114   color: #2CAF8F;
 115   border-radius: 50em;
 116 }
 117
 118 .share a:hover {
 119   background-color: #FDDE56;
 120 }
 121
 122 .navbar {
 123   width: 537px;
 124   padding: 1em;
 125   height: 2.55556em;
 126   display: inline-block;
 127 /*   float: left; */
 128 }
 129
 130 .navbar li {
 131   font-family: 'Signika Regular';
 132   font-size: 1em;
 133   background-color: white;
 134   list-style-type: none;
 135   border-right: 1px #9BD2BF solid;
 136   padding: 0 30px 0 30px;
 137   line-height: 2.6;
 138   float: left;
 139 }
 140
 141 .navbar li:first-child {
 142   border-radius: 100px 0 0 100px;
 143 }
 144
 145 .navbar li:last-child {
 146   border-right: 0;
 147   border-radius: 0 100px 100px 0;
 148 }
 149
 150 .navbar li:hover {
 151   background-color: #FFDD55;
 152 }
 153
 154 .navbar li a {
 155   display: block;
 156   text-decoration: none;
 157 }
 158
 159 .navbar li a:hover {
 160   color: #4B423B;
 161 }
 162
 163 .intro,
 164 .share {
 165   max-width: 1300px;
 166   min-width: 1170px;
 167 }
 168
 169 .intro_wrapper,
 170 .intro_img {
 171   max-width: 500px;
 172   min-width: 00px;
 173 }
 174
 175 .intro_wrapper {
 176   float: right;
 177   color: white;
 178   padding-right: 4em;
 179 }
 180
 181 .intro_img{
 182   float: left;
 183   padding-left: 4em;
 184 }
 185
 186 .intro_wrapper h2 {
 187   color: #FFDD55;
 188 }
 189
 190 .intro_img img{
 191   width: 100%;
 192 }
 193
 194 /* Comparisons */
 195
 196 .wrapper,
 197 .section_wrapper,
 198 .buy_avoid,
 199 .recommended {
 200   max-width: 750px;
 201   min-width: 750px;
 202   margin: auto;
 203 }
 204
 205 .main_title {
 206   width: 100%;
 207   text-align: left;
 208   border-bottom: 1px solid lightgray;
 209   margin-top: 3em;
 210   margin-bottom: 2em;
 211   display: inline-block;
 212 }
 213
 214 .buy a {
 215   border-bottom: none;
 216 }
 217
 218 .product_img {
 219   margin: auto;
 220   /* width: 168px; */
 221   height: 168px;
 222 }
 223
 224 .product {
 225   margin: auto;
 226   display: block;
 227   /* margin-bottom: 8em; */
 228   /* max-width: 168px; */
 229   max-height: 168px;
 230 }
 231
 232 .good,
 233 .bad {
 234   display: none; /* FIXME: This is temporary until I fix the sizes*/
 235   position: relative;
 236   top: 175px;
 237   left: 84px;
 238   width: 60px;
 239 }
 240
 241 .free, .proprietary {
 242   text-align: center;
 243 }
 244
 245 .free li,
 246 .proprietary li {
 247   text-align: left;
 248 }
 249
 250 .buy img,
 251 .avoid img {
 252   max-width: 151px;
 253   height: 42px;
 254 }
 255
 256 .buy_avoid_wrapper {
 257   margin-top: 2em;
 258   min-width: 100%;
 259   max-width: 100%;
 260   display: inline-block;
 261 }
 262
 263 .buy {
 264   text-align: center;
 265   margin: auto;
 266   width: 45.555555%;
 267   float: left;
 268
 269 }
 270
 271 .avoid {
 272   text-align: center;
 273   margin: auto;
 274   width: 45.555555%;
 275   float: right;
 276 }
 277
 278 .free {
 279   float: left;
 280   width: 45.555555%;
 281 }
 282
 283 .proprietary {
 284   float: right;
 285   width: 45.555555%;
 286 }
 287
 288 /* Recommended Section */
 289
 290 .topic_title {
 291   border-bottom: 1px solid #2CAF8F;
 292   width: 100%;
 293   text-align: left;
 294   margin-top: 3em;
 295   display: inline-block;
 296 }
 297
 298 .recommend_wrapper {
 299   padding-top: 1em;
 300   margin: auto;
 301   width: 750px;
 302 }
 303
 304 .recommended_product {
 305   text-align: center;
 306   width: 29%;
 307   margin: 1em;
 308   display: inline-block
 309 }
 310
 311 .recommended_product_img {
 312   width: 120px;
 313 }
 314
 315 .recommend_wrapper .buy {
 316   float: none;
 317   text-align: center;
 318   width: 100%;
 319 }