docs/website/css/main.css

   1 /*
   2  * Author: Carlos Alvarez
   3  * URL: http://alvarez.is
   4  *
   5  * Project Name: FLATTY - Free Bootstrap 3 Theme
   6  * Version: 1.0
   7  * URL: http://blacktie.co
   8  */
   9
  10 body {
  11   background-color: #f2f2f2;
  12         font-family: 'Roboto', sans-serif;
  13         font-weight: 300;
  14         font-size: 16px;
  15         color: #555;
  16
  17         -webkit-font-smoothing: antialiased;
  18         -webkit-overflow-scrolling: touch;
  19 }
  20
  21 /* Titles */
  22 h1, h2, h3, h4, h5, h6 {
  23         font-family: 'Roboto', sans-serif;
  24         font-weight: 300;
  25         color: #333;
  26 }
  27
  28 h1 {
  29         font-size: 40px;
  30 }
  31
  32 h3 {
  33         color: #95a5a6;
  34         font-weight: 400;
  35 }
  36
  37 h4 {
  38         color: #95a5a6;
  39         font-weight: 400;
  40         font-size: 20px;
  41 }
  42
  43 .ellipsis p {
  44         margin-bottom:10px;
  45         white-space: nowrap;
  46         overflow: hidden;
  47         text-overflow: ellipsis;
  48 }
  49
  50 .centered {
  51         text-align: center;
  52 }
  53
  54 /* Links */
  55 a {
  56         color: #3498db;
  57         word-wrap: break-word;
  58
  59         -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
  60         -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
  61         -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
  62         -o-transition: color 0.1s ease-in, background 0.1s ease-in;
  63         transition: color 0.1s ease-in, background 0.1s ease-in;
  64 }
  65
  66 a:hover,
  67 a:focus {
  68         color: #7b7b7b;
  69         text-decoration: none;
  70         outline: 0;
  71 }
  72
  73 a:before,
  74 a:after {
  75         -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
  76         -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
  77         -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
  78         -o-transition: color 0.1s ease-in, background 0.1s ease-in;
  79         transition: color 0.1s ease-in, background 0.1s ease-in;
  80 }
  81
  82  hr {
  83         display: block;
  84         height: 1px;
  85         border: 0;
  86         border-top: 1px solid #ccc;
  87         margin: 1em 0;
  88         padding: 0;
  89 }
  90
  91 .navbar-default {
  92         background-color: #3498db;
  93         border-color: transparent;
  94 }
  95
  96 .navbar-default .navbar-brand {
  97         color: white;
  98 }
  99
 100 .navbar-default .navbar-nav > li > a {
 101         color: white;
 102 }
 103
 104 /* Helpers */
 105
 106 .mt {
 107         margin-top: 40px;
 108         margin-bottom: 40px;
 109 }
 110
 111 .nh {
 112         margin-top: 80px;
 113         margin-bottom: 40px;
 114 }
 115
 116 .form-control {
 117         height: 42px;
 118         font-size: 18px;
 119         width: 280px;
 120 }
 121
 122 i {
 123         margin: 8px;
 124         color: #3498db;
 125 }
 126
 127
 128 /* HeaderWrap */
 129 #headerwrap {
 130         /* background: url(../img/bg01.jpg) no-repeat center top; */
 131         background-color: #3498db;
 132         margin-top: -20px;
 133         padding-top:120px;
 134         background-attachment: relative;
 135         background-position: center center;
 136         min-height: 400px;
 137         max-height: 800px;
 138         width: 100%;
 139
 140         -webkit-background-size: 100%;
 141         -moz-background-size: 100%;
 142         -o-background-size: 100%;
 143         background-size: 100%;
 144
 145         -webkit-background-size: cover;
 146         -moz-background-size: cover;
 147         -o-background-size: cover;
 148         background-size: cover;
 149 }
 150
 151 #headerwrap h1 {
 152         color: white;
 153         font-size: 60px;
 154         font-weight: bold;
 155         letter-spacing: 1px;
 156 }
 157
 158 #menubutton {
 159         max-height: 50px;
 160         margin-top: 6px;
 161         padding-top: 15px;
 162         margin-left: 10px;
 163 }
 164
 165 .panel-sponsor {
 166         min-height: 300px;
 167         text-align: justify;
 168         text-justify: inter-word;
 169 }
 170
 171 @media (min-width: 768px) and (max-width: 991px) {
 172         .navbar-collapse.collapse {
 173                 display: none !important;
 174         }
 175         .navbar-collapse.collapse.in {
 176                 display: block !important;
 177         }
 178         .navbar-header .collapse, .navbar-toggle {
 179                 display:block !important;
 180         }
 181         .navbar-header {
 182                 float:none;
 183         }
 184         .navbar-collapse {
 185                 overflow:hidden;
 186         }
 187         #menubutton {
 188                 margin-right: 40px;
 189                 width: 45px;
 190         }
 191         .text-shrink {
 192                 visibility: hidden;
 193         }
 194 }
 195
 196 @media (max-width:767px) {
 197         #menubutton {
 198                 max-height: 50px;
 199                 margin-top: 6px;
 200                 padding-top: 15px;
 201                 margin-left: 15px;
 202                 margin-right: 15px;
 203         }
 204 }
 205
 206 /* entire container, keeps perspective */
 207 .flip-container {
 208         perspective: 1000;
 209 }
 210         /* flip the pane when hovered */
 211         .flip-container:hover .flipper, .flip-container.hover .flipper {
 212                 transform: rotateY(180deg);
 213         }
 214
 215 .flip-container, .front, .back {
 216         width: 180px;
 217         height: 180px;
 218 }
 219
 220 /* flip speed goes here */
 221 .flipper {
 222         transition: 0.6s;
 223         transform-style: preserve-3d;
 224
 225         position: relative;
 226 }
 227
 228 /* hide back of pane during swap */
 229 .front, .back {
 230         backface-visibility: hidden;
 231
 232         position: absolute;
 233         top: 0;
 234         left: 0;
 235 }
 236
 237 /* front pane, placed above back */
 238 .front {
 239         z-index: 2;
 240         /* for firefox 31 */
 241         transform: rotateY(0deg);
 242 }
 243
 244 /* back, initially hidden pane */
 245 .back {
 246         transform: rotateY(180deg);
 247 }
 248
 249 .back img {
 250         -moz-transform: scaleX(-1);
 251         -o-transform: scaleX(-1);
 252         -webkit-transform: scaleX(-1);
 253         transform: scaleX(-1);
 254         filter: FlipH;
 255         -ms-filter: "FlipH";
 256 }
 257
 258 .panel-box p {
 259     height: 1.5em;
 260 }