Added 'Share' button, fixed 'Buy/avoid' buttons, added img template, removed old img

[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: #fffefb;
    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: 20em; margin-top: 20em;}

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 {
/*   background-image: url("images/banner.png"); */
/*   background-color: #2CAF8F; */
/*   background-repeat: no-repeat; */
/*   height: 710px; */
/*   background-size: 550px; */
/*   background-position: 5% 30%; */
}

/* Navbar */

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

.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 {
  text-align: center;
}

.share a{
  background-color: #FFE859;
  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 {
  margin: auto;
  max-width: 1300px;
  min-width: 1170px;
}

.intro_wrapper {
/*   width: 40%; */
  max-width: 500px;
  min-width: 500px;
  float: right;
  color: white !important;
/*   padding-right: 3em; */
}

.intro_wrapper h2 {
  color: #FFDD55;
}

.intro_img img{
  width: 40%;
  max-width: 500px;
  float: left;
  padding: 2em;
  padding-left: 3em;

}

/* Comparisons */

.wrapper,
.section_wrapper,
.buy_avoid,
.recommended {
  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;
  /* width: 168px; */
  height: 168px;
}

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

.good,
.bad {
  display: none; /* FIXME: This is temporary until I fix the sizes*/
  position: relative;
  top: 175px;
  left: 84px;
  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%;
}