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 {
- line-height: 1.4em;
font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
- font-size: 1em;
+ font-size: 0.9em;
+ line-height: 1.4em;
color: #363636;
+ background-color: #fffefb;
width: 100%;
}
-a { color: #b495d3;}
-a:link { text-decoration: none; }
-a:visited { text-decoration: none; }
-a:hover { text-decoration: underline; }
-a:active { text-decoration: underline; }
+/* Type something: */
+
+a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;}
-p { line-height: 1.4em; margin-bottom: 1.2em; }
+p { line-height: 1.4em; 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.4em; }
-ul {margin: 1em 2em 0em 4em;}
+/* ul {margin: 1em 2em 0em 4em;} */
br {margin-bottom: 20em; margin-top: 20em;}
h1 { font-size: 2.75em; font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
-h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #6c6c6c; margin-bottom: 0.5em; margin-top: 1em; }
-h3 { font-size: 1.625em; font-family: 'Signika Light'; color: #b495d3; margin-bottom: 0.5em; margin-top: 1em; }
-h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
-h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 1em; }
-h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; 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 Light'; color: #b495d3; 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*/
-#banner > img {
- width: 100%;
+ /* Header */
+
+.header {
+ background-image: url("images/banner.png");
+ background-color: #2CAF8F;
+ background-repeat: no-repeat;
+ height: 776px;
+ background-size: 100%;
+ background-position: 100%;
+}
+
+.logo {
+ width: 247px;
+ height: 29px;
+ padding: 1.3em;
+}
+
+.logo_wrapper {
+}
+
+.join {
+ width: 172px;
+ height: 29px;
+ padding: 1.3em;
+ float: right;
+}
+
+.top {
+ position: relative;
+}
+
+.top a {
+ border-bottom: 0;
+}
+
+.navbar ul {
+ background-color: white;
+ border-radius: 100px;
+ text-align: center;
+ width: 875px;
+ height: 2.55556em;
+ margin: auto;
}
-#wrapper {
- margin: auto 5em;
+ .navbar li {
+ font-size: 0.9em;
+ font-weight: bold;
+ list-style-type: none;
+ border-right: 1px #9BD2BF solid;
+ padding: 0 10px 0 10px;
+ line-height: 2.9;
+ float: left;
+ width: 91px;
+ height: 2.85556em;
+}
+
+.navbar li:first-child {
+ border-radius: 100px 0 0 100px;
+ width: 81px;
+}
+
+.navbar li:last-child {
+ border-right: 0;
+ border-radius: 0 100px 100px 0;
+ width: 81px;
+}
+.navbar li:hover {
+ background-color: #FFDD55;
+
+}
+
+.navbar li a {
+ display: block;
+ text-decoration: none;
+ border: 0;
+
+}
+
+.navbar li a:hover {
+ color: #4B423B;
+}
+
+.wrapper {
+ width: 700px;
+ margin: auto;
}
-#comparisons {
- /* padding-top: 10em; */
+.wrapper .intro_phrase {
+ width: 450px;
+ text-align: center;
+ font-family: Signika Bold;
+ margin: 1.2em auto;
+ color: #bababa;
+
+}
+
+/* #comparisons {
+ padding-top: 100px;
background-color: #fbfbfb;
+ background-size: cover;
position: absolute;
width: 100%;
max-width: 1150px;
#free {
position: relative;
- /* background-color: red; */
+ background-color: red;
float: left;
width: 45%;
max-width: 450px;
#sign {
position: relative;
- /* background-color: green; */
+ background-color: green;
width: 240px;
float: left;
margin-top: 3em;
#proprietary {
position: relative;
- /* background-color: blue; */
+ background-color: blue;
width: 45%;
max-width: 450px;
float: right;
height: 324px;
margin: auto;
margin-left: 7.5em;
- margin-top: 3em;
-}
+ margin-top: 3em;}
#section_wrapper {
position: relative;
-}
-
-/* #test {
- height: 10em;
- position: relative;
- background-color: white;
- display: block;
- float: left;
} */