v6/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: 0.5em; margin-top: 0.5em;}
  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: 486px;
  72   margin: auto;
  73   width: 100%;
  74   /*width: 1300px;*/
  75 }
  76
  77 .header a {
  78   border-bottom: 0;
  79 }
  80
  81 .navbar_wrapper,
  82 .comparisons {
  83   max-width: 1300px;
  84   min-width: 1110px;
  85   margin: auto;
  86   text-align: center;
  87 }
  88
  89 .logo_wrapper {
  90   padding: 1.3em;
  91   float: left;
  92 }
  93
  94 .join_wrapper {
  95   padding: 1.2em;
  96   float: right;
  97   display: inline-block;
  98 }
  99
 100 .logo, .join {
 101   max-width: 200px;
 102   min-width: 200px;
 103 }
 104
 105 .share_wrapper {
 106 }
 107
 108 .share {
 109   position: relative;
 110   bottom: 0.8em;
 111   text-align: center;
 112 }
 113
 114 .share a{
 115   background-color: #FDD53A;
 116   border-bottom: 0;
 117   padding: .6em 2em;
 118   font-family: 'Signika Bold';
 119   font-size: 1.4em;
 120   color: #2CAF8F;
 121   border-radius: 50em;
 122 }
 123
 124 .share a:hover {
 125   background-color: #FDDE56;
 126 }
 127
 128 .navbar {
 129   padding: 1em;
 130   height: 2.55556em;
 131   display: inline-block;
 132 /*   float: left; */
 133 }
 134
 135 .navbar li {
 136   font-family: 'Signika Regular';
 137   font-size: 1em;
 138   background-color: white;
 139   list-style-type: none;
 140   border-right: 1px #9BD2BF solid;
 141   padding: 0 30px 0 30px;
 142   line-height: 2.6;
 143   float: left;
 144 }
 145
 146 .navbar li:first-child {
 147   border-radius: 100px 0 0 100px;
 148 }
 149
 150 .navbar li:last-child {
 151   border-right: 0;
 152   border-radius: 0 100px 100px 0;
 153 }
 154
 155 .navbar li:hover {
 156   background-color: #FFDD55;
 157 }
 158
 159 .navbar li a {
 160   display: block;
 161   text-decoration: none;
 162 }
 163
 164 .navbar li a:hover {
 165   color: #4B423B;
 166 }
 167
 168 .intro,
 169 .share {
 170   max-width: 1300px;
 171   min-width: 1170px;
 172   margin: auto;
 173 }
 174
 175 .intro_wrapper,
 176 .intro_img {
 177   max-width: 500px;
 178   min-width: 00px;
 179 }
 180
 181 .intro_wrapper {
 182   float: right;
 183   color: white;
 184   padding-right: 4em;
 185 }
 186
 187 .intro_img{
 188   float: left;
 189   padding-left: 4em;
 190 }
 191
 192 .intro_wrapper h2 {
 193   color: #FFDD55;
 194 }
 195
 196 .intro_wrapper a {
 197   border-bottom: 1px solid #FDD53A;
 198   color: #FDD53A;
 199 }
 200
 201 .intro_img img{
 202   padding-top: 1.7em;
 203   width: 100%;
 204 }
 205
 206 /* Comparisons */
 207
 208 .wrapper,
 209 .section_wrapper,
 210 .buy_avoid,
 211 .recommended,
 212 .licenses {
 213   max-width: 750px;
 214   min-width: 750px;
 215   margin: auto;
 216 }
 217
 218 .main_title {
 219   width: 100%;
 220   text-align: left;
 221   border-bottom: 1px solid lightgray;
 222   margin-top: 3em;
 223   margin-bottom: 2em;
 224   display: inline-block;
 225 }
 226
 227 .buy a {
 228   border-bottom: none;
 229 }
 230
 231 .product_img {
 232   margin: auto;
 233   max-width: 168px;
 234   max-height: 168px;
 235   position: relative;
 236 }
 237
 238 .product {
 239   text-align: center;
 240   position: relative;
 241   margin: auto;
 242   display: block;
 243   height: 168px;
 244   width: 168px;
 245   /* margin-bottom: 8em; */
 246 /*   max-height: 168px; */
 247 }
 248 /*
 249  .proprietary .product_img:after {
 250   content: "";
 251   background-image: url("images/bad.png");
 252   background-size: 25px;
 253   background-repeat: no-repeat;
 254   width: 25px;
 255   height: 25px;
 256   position: absolute;
 257 }
 258
 259  .free h4:after {
 260   content: "";
 261   background-image: url("images/good.png");
 262   background-size: 25px;
 263   background-repeat: no-repeat;
 264   width: 25px;
 265   height: 25px;
 266   position: absolute;
 267 }
 268  */
 269
 270
 271 .good,
 272 .bad {
 273   z-index: 999;
 274   width: 65px;
 275   top: 8em;
 276   left: 9em;
 277   position: absolute;
 278
 279 }
 280
 281
 282 .free, .proprietary {
 283   text-align: center;
 284 }
 285
 286 .free li,
 287 .proprietary li {
 288   text-align: left;
 289 }
 290
 291 .buy img,
 292 .avoid img {
 293   max-width: 151px;
 294   height: 42px;
 295 }
 296
 297 .buy_avoid_wrapper {
 298   margin-top: 2em;
 299   min-width: 100%;
 300   max-width: 100%;
 301   display: inline-block;
 302 }
 303
 304 .buy {
 305   text-align: center;
 306   margin: auto;
 307   width: 45.555555%;
 308   float: left;
 309
 310 }
 311
 312 .avoid {
 313   text-align: center;
 314   margin: auto;
 315   width: 45.555555%;
 316   float: right;
 317 }
 318
 319 .free {
 320   float: left;
 321   width: 45.555555%;
 322 }
 323
 324 .proprietary {
 325   float: right;
 326   width: 45.555555%;
 327 }
 328
 329 /* Recommended Section */
 330
 331 .topic_title {
 332   border-bottom: 1px solid #2CAF8F;
 333   width: 100%;
 334   text-align: left;
 335   margin-top: 3em;
 336   display: inline-block;
 337 }
 338
 339 .recommend_wrapper {
 340   padding-top: 1em;
 341   margin: auto;
 342   width: 750px;
 343 }
 344
 345 .recommended_product {
 346   text-align: center;
 347   width: 29%;
 348   margin: 1em;
 349   display: inline-block
 350 }
 351
 352 .recommended_product_img {
 353   width: 120px;
 354 }
 355
 356 .recommend_wrapper .buy {
 357   float: none;
 358   text-align: center;
 359   width: 100%;
 360 }
 361
 362 .remark {
 363   margin-top: 3em;
 364   font-weight: bold;
 365 }
 366
 367 /* Licenses */
 368
 369 .licenses h1 {
 370   margin-top: 0.6em;
 371 }
 372
 373 /* Footer */
 374
 375 footer {
 376   display: block;
 377   background-color: #1a1a1a;
 378   width: 100%;
 379   /*width: 1300px;*/
 380 }
 381
 382 .footer_wrapper {
 383   width: 750px;
 384   margin: auto;
 385   padding: 2em;
 386   color: white;
 387 }