+/*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%;
+}
projects / fsf-giving-guide.git / blobdiff