production/example_apps/zippy_maps/webroot/css/home.css

   1 @font-face {
   2     font-family: 'cakefont';
   3     src: url('../font/cakedingbats-webfont.eot');
   4     src: url('../font/cakedingbats-webfont.eot?#iefix') format('embedded-opentype'),
   5     url('../font/cakedingbats-webfont.woff2') format('woff2'),
   6     url('../font/cakedingbats-webfont.woff') format('woff'),
   7     url('../font/cakedingbats-webfont.ttf') format('truetype'),
   8     url('../font/cakedingbats-webfont.svg#cake_dingbatsregular') format('svg');
   9     font-weight: normal;
  10     font-style: normal;
  11 }
  12
  13 .home {
  14     font-family: 'Roboto', sans-serif;
  15     font-size: 14px;
  16     line-height: 27px;
  17     color: #404041;
  18 }
  19
  20 .fredmenu {
  21         font-size: 28px;
  22         text-align: center;
  23 }
  24
  25 .fredmenu li {
  26         font-size: 28px;
  27 }
  28
  29 a {
  30     color: #0071BC;
  31     -webkit-transition: all 0.2s;
  32     -moz-transition: all 0.2s;
  33     -ms-transition: all 0.2s;
  34     -o-transition: all 0.2s;
  35     transition: all 0.2s;
  36 }
  37
  38 a:hover, a:active {
  39     color: #d33d44;
  40     -webkit-transition: all 0.2s;
  41     -moz-transition: all 0.2s;
  42     -ms-transition: all 0.2s;
  43     -o-transition: all 0.2s;
  44     transition: all 0.2s;
  45 }
  46
  47 ul, ol, dl, p {
  48     font-size: 0.85rem;
  49 }
  50
  51 p {
  52     line-height: 2;
  53 }
  54
  55 header {
  56     height: auto;
  57     line-height: 1em;
  58     padding: 0;
  59     box-shadow: none;
  60 }
  61
  62 header.row {
  63     margin-bottom: 30px;
  64 }
  65
  66 header .header-image {
  67     text-align: center;
  68     padding: 64px 0;
  69     background: #b060f1;
  70 }
  71
  72 header .header-title {
  73     padding: 0;
  74     display: block;
  75     background: #404041;
  76     text-align: center;
  77 }
  78
  79 header .header-title h1 {
  80     font-family: 'Raleway', sans-serif;
  81     margin: 0;
  82     font-style: italic;
  83     font-size: 18px;
  84     font-weight: 500;
  85     padding: 18px 30px;
  86     color: #DEDED5;
  87 }
  88
  89 header h1 {
  90     color: #fff;
  91 }
  92
  93 h3, h4 {
  94     font-family: 'Roboto', sans-serif;
  95     font-size: 27px;
  96     line-height: 30px;
  97     font-weight: 300;
  98     -webkit-font-smoothing: antialiased;
  99     margin-top: 0;
 100     margin-bottom: 20px;
 101 }
 102
 103 .more {
 104     color: #ffffff;
 105     background-color: #d33d44;
 106     padding: 15px;
 107     margin-top: 10px;
 108 }
 109
 110 .row {
 111     max-width: 1000px;
 112 }
 113
 114 .alert {
 115     background-color: #fff9e1;
 116     font-size: 12px;
 117     text-align: center;
 118     display: block;
 119     padding: 12px;
 120     border-bottom: 2px solid #ffcf06;
 121 }
 122
 123 .alert {
 124     background-color: #fff9e1;
 125     font-size: 12px;
 126     display: block;
 127     padding: 12px;
 128     border-bottom: 2px solid #ffcf06;
 129     margin-bottom: 30px;
 130     color: #404041;
 131 }
 132
 133 .alert p {
 134     margin: 0;
 135     font-size: 12px;
 136     line-height: 1.4;
 137 }
 138
 139 .alert p:before {
 140     color: #ffcf06;
 141     content: "\0055";
 142     font-family: 'cakefont', sans-serif;
 143     font-size: 21px;
 144     margin-left: -0.8em;
 145     width: 2.3em;
 146     -webkit-font-smoothing: antialiased;
 147     -moz-osx-font-smoothing: grayscale;
 148     padding: 0 10px 0 15px;
 149     vertical-align: -2px;
 150 }
 151
 152 .alert ul {
 153     margin: 0;
 154     font-size: 12px;
 155 }
 156
 157 .alert.url-rewriting {
 158     background-color: #F0F0F0;
 159     border-color: #cccccc;
 160     display: none;
 161 }
 162
 163 .text-center {
 164     text-align: center;
 165 }
 166
 167 ul {
 168     list-style-type: none;
 169     margin: 0 0 30px 0;
 170 }
 171
 172 li {
 173     padding-left: 1.8em;
 174 }
 175
 176 ul li ul, ul li ul li {
 177     margin: 0;
 178     padding: 0;
 179 }
 180
 181 .bullet:before {
 182     font-family: 'cakefont', sans-serif;
 183     font-size: 18px;
 184     display: inline-block;
 185     margin-left: -1.3em;
 186     width: 1.2em;
 187     -webkit-font-smoothing: antialiased;
 188     -moz-osx-font-smoothing: grayscale;
 189     vertical-align: -1px;
 190 }
 191
 192 .success:before {
 193     color: #88c671;
 194     content: "\0056";
 195 }
 196
 197 .problem:before {
 198     color: #d33d44;
 199     content: "\0057";
 200 }
 201
 202 .cutlery:before {
 203     color: #404041;
 204     content: "\0059";
 205 }
 206
 207 .book:before {
 208     color: #404041;
 209     content: "\0042";
 210     width: 1.7em;
 211 }
 212
 213 hr {
 214     border-bottom: 1px solid #e7e7e7;
 215     border-top: 0;
 216     margin-bottom: 35px;
 217     margin-left: 30px;
 218     margin-right: 30px;
 219 }
 220
 221
 222 .icon {
 223     color: #404041;
 224     font-style: normal;
 225     font-family: 'cakefont', sans-serif;
 226     -webkit-font-smoothing: antialiased;
 227     -moz-osx-font-smoothing: grayscale;
 228 }
 229 .icon.support {
 230     font-size: 60px;
 231 }
 232 .icon.docs {
 233     font-size: 57px;
 234 }
 235 .icon.training {
 236     font-size: 39px;
 237 }
 238
 239 @media (min-width: 768px) {
 240     .columns {
 241         padding-left: 30px;
 242         padding-right: 30px;
 243     }
 244 }
 245
 246 @media (min-width: 992px) {
 247     header.row {
 248         max-width: 940px;
 249     }
 250 }