stylesheet.css

   1 /*Typography*/
   2
   3 @font-face {
   4     font-family: 'Signika Regular';
   5     src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
   6 }
   7
   8 @font-face {
   9     font-family: 'Signika Light';
  10     src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
  11 }
  12
  13 @font-face {
  14     font-family: 'Signika Bold';
  15     src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
  16 }
  17
  18 @font-face {
  19     font-family: 'Open Sans';
  20     src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
  21 }
  22
  23 @font-face {
  24     font-family: 'Open Sans Bold';
  25     src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
  26 }
  27
  28 /*Style common HTML tags*/
  29
  30 html {
  31     font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
  32     font-size: 14px;
  33     line-height: 1.4;
  34     color: #363636;
  35     background-color: #fffefb;
  36     width: 100%;
  37 }
  38
  39
  40 /* Type something: */
  41
  42 a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
  43
  44 p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
  45
  46 i { font-style: italic; }
  47 b { font-style: oblique; }
  48
  49 li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
  50 /* ul {margin: 1em 2em 0em 4em;} */
  51
  52 br {margin-bottom: 20em; margin-top: 20em;}
  53
  54 h1 {  font-size: 2.75em;  font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
  55 h2 {  font-size: 1.75em;  font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
  56 h3 {  font-size: 1.625em; font-family: 'Signika Bold';  color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
  57 h4 {  font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  58 h5 {  font-size: 1.25em;  font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  59 h6 {  font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
  60
  61 /*Site-specific*/
  62
  63   /* Header */
  64
  65 .header {
  66   background-image: url("images/banner.png");
  67   background-color: #2CAF8F;
  68   background-repeat: no-repeat;
  69   height: 710px;
  70   background-size: 1200px;
  71   background-position: bottom;
  72 }
  73
  74 .header a {
  75   border-bottom: 0;
  76 }
  77
  78 .logo_wrapper {
  79   padding: 1.3em;
  80   float: left
  81 }
  82
  83 .join_wrapper {
  84   padding: 1.2em;
  85   float: right;
  86 }
  87
  88 .logo, .join {
  89   width: 210px;
  90 }
  91
  92 .nav_wrapper {
  93   padding: 1em 5em 1em 9em;
  94   height: 2.55556em;
  95   float: left;
  96 }
  97
  98  .navbar li {
  99   font-family: 'Signika Regular';
 100   font-size: 1em;
 101   background-color: white;
 102   list-style-type: none;
 103   border-right: 1px #9BD2BF solid;
 104   padding: 0 30px 0 30px;
 105   line-height: 2.6;
 106   float: left;
 107 }
 108
 109 .navbar li:first-child {
 110   border-radius: 100px 0 0 100px;
 111 }
 112
 113 .navbar li:last-child {
 114   border-right: 0;
 115   border-radius: 0 100px 100px 0;
 116 }
 117
 118 .navbar li:hover {
 119   background-color: #FFDD55;
 120 }
 121
 122 .navbar li a {
 123   display: block;
 124   text-decoration: none;
 125 }
 126
 127 .navbar li a:hover {
 128   color: #4B423B;
 129 }
 130
 131 .wrapper,
 132 .section_wrapper {
 133   width: 750px;
 134   margin: auto;
 135 }
 136
 137 .main_title {
 138   text-align: center;
 139 }
 140
 141 .wrapper .intro_phrase {
 142   width: 450px;
 143   text-align: center;
 144   font-family: Signika Bold;
 145   margin: 1.2em auto;
 146   color: #bababa;
 147 }