Tweaks and cover design

[fsf-giving-guide.git] / stylesheet.css

/*Typography*/

@font-face {
    font-family: 'Signika Regular';
    src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Signika Light';
    src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Signika Bold';
    src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans';
    src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans Bold';
    src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
}

/*Style common HTML tags*/

html {
    font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #363636;
    background-color: #fff;
    width: 100%;
}

/* Type something: */

a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }

p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }

i { font-style: italic; }
b { font-style: oblique; }

li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
/* ul {margin: 1em 2em 0em 4em;} */

br {margin-bottom: 0.5em; margin-top: 0.5em;}

h1 {  font-size: 2.20em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 1em; }
h2 {  font-size: 1.75em;  font-family: 'Signika Light';	color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
h3 {  font-size: 1.625em; font-family: 'Signika Bold';	color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d;	margin-bottom: 0.5em; margin-top: 2em; }
h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }

/*Site-specific*/

  /* Header */

.header {
}

/* Navbar */

.header_wrapper {
  background-color: #2CAF8F;
  height: 486px;
}

.header a {
  border-bottom: 0;
}

.navbar_wrapper {
  max-width: 1300px;
  min-width: 1110px;
  margin: auto;
  text-align: center;
}

.logo_wrapper {
  padding: 1.3em;
  float: left;
}

.join_wrapper {
  padding: 1.2em;
  float: right;
  display: inline-block;
}

.logo, .join {
  max-width: 200px;
  min-width: 200px;
}

.share_wrapper {
}

.share {
  position: relative;
  bottom: 0.8em;
  text-align: center;
}

.share a{
  background-color: #FDD53A;
  border-bottom: 0;
  padding: .6em 2em;
  font-family: 'Signika Bold';
  font-size: 1.4em;
  color: #2CAF8F;
  border-radius: 50em;
}

.share a:hover {
  background-color: #FDDE56;
}

.navbar {
  width: 537px;
  padding: 1em;
  height: 2.55556em;
  display: inline-block;
/*   float: left; */
}

.navbar li {
  font-family: 'Signika Regular';
  font-size: 1em;
  background-color: white;
  list-style-type: none;
  border-right: 1px #9BD2BF solid;
  padding: 0 30px 0 30px;
  line-height: 2.6;
  float: left;
}

.navbar li:first-child {
  border-radius: 100px 0 0 100px;
}

.navbar li:last-child {
  border-right: 0;
  border-radius: 0 100px 100px 0;
}

.navbar li:hover {
  background-color: #FFDD55;
}

.navbar li a {
  display: block;
  text-decoration: none;
}

.navbar li a:hover {
  color: #4B423B;
}

.intro,
.share {
  max-width: 1300px;
  min-width: 1170px;
}

.intro_wrapper,
.intro_img {
  max-width: 500px;
  min-width: 00px;
}

.intro_wrapper {
  float: right;
  color: white;
  padding-right: 4em;
}

.intro_img{
  float: left;
  padding-left: 4em;
}

.intro_wrapper h2 {
  color: #FFDD55;
}

.intro_wrapper a {
  border-bottom: 1px solid #FDD53A;
  color: #FDD53A;
}

.intro_img img{
  padding-top: 1.7em;
  width: 100%;
}

/* Comparisons */

.wrapper,
.section_wrapper,
.buy_avoid,
.recommended,
.licenses {
  max-width: 750px;
  min-width: 750px;
  margin: auto;
}

.main_title {
  width: 100%;
  text-align: left;
  border-bottom: 1px solid lightgray;
  margin-top: 3em;
  margin-bottom: 2em;
  display: inline-block;
}

.buy a {
  border-bottom: none;
}

.product_img {
  margin: auto;
  max-height: 168px;
}

.product {
  margin: auto;
  display: block;
  height: 168px;
  /* margin-bottom: 8em; */
/*   max-height: 168px; */
}

 .proprietary .product_img:after {
  content: "";
  background-image: url("images/bad.png");
  background-size: 25px;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  position: absolute;
}

 .free h4:after {
  content: "";
  background-image: url("images/good.png");
  background-size: 25px;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  position: absolute;
}


/*
.good,
.bad {
 FIXME: This is temporary until I fix the sizes
  position: relative;

  left: 60%;
  width: 60px;
}

*/

.free, .proprietary {
  text-align: center;
}

.free li,
.proprietary li {
  text-align: left;
}

.buy img,
.avoid img {
  max-width: 151px;
  height: 42px;
}

.buy_avoid_wrapper {
  margin-top: 2em;
  min-width: 100%;
  max-width: 100%;
  display: inline-block;
}

.buy {
  text-align: center;
  margin: auto;
  width: 45.555555%;
  float: left;

}

.avoid {
  text-align: center;
  margin: auto;
  width: 45.555555%;
  float: right;
}

.free {
  float: left;
  width: 45.555555%;
}

.proprietary {
  float: right;
  width: 45.555555%;
}

/* Recommended Section */

.topic_title {
  border-bottom: 1px solid #2CAF8F;
  width: 100%;
  text-align: left;
  margin-top: 3em;
  display: inline-block;
}

.recommend_wrapper {
  padding-top: 1em;
  margin: auto;
  width: 750px;
}

.recommended_product {
  text-align: center;
  width: 29%;
  margin: 1em;
  display: inline-block
}

.recommended_product_img {
  width: 120px;
}

.recommend_wrapper .buy {
  float: none;
  text-align: center;
  width: 100%;
}

.remark {
  margin-top: 3em;
  font-weight: bold;
}

/* Licenses */

.licenses h1 {
  margin-top: 0.6em;
}

/* Footer */

footer {
  display: block;
  background-color: #1a1a1a;
}

.footer_wrapper {
  width: 750px;
  margin: auto;
  padding: 2em;
  color: white;
}