/*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; margin: auto; width: 100%; /*width: 1300px;*/ } .header a { border-bottom: 0; } .navbar_wrapper, .comparisons { 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 { 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; margin: auto; } .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-width: 168px; max-height: 168px; position: relative; } .product { text-align: center; position: relative; margin: auto; display: block; height: 168px; width: 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 { z-index: 999; width: 65px; top: 8em; left: 9em; position: absolute; } .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; width: 100%; /*width: 1300px;*/ } .footer_wrapper { width: 750px; margin: auto; padding: 2em; color: white; }