PRESENTATION/css/zulug5.css

   1 /* Fonts */
   2 @font-face {
   3   font-family: 'Yanone Kaffeesatz';
   4   font-style: normal;
   5   font-weight: 400;
   6   src: url('/src/fonts/yanone/YanoneKaffeesatz-Regular.ttf') format('truetype');
   7 }
   8 @font-face {
   9   font-family: 'Inconsolata';
  10   font-style: normal;
  11   font-weight: normal;
  12   src: url('/src/fonts/inconsolata/Inconsolata.ttf') format('truetype');
  13 }
  14 @font-face {
  15   font-family: 'JunctionRegular';
  16   src: url('/src/fonts/junction02/junction02-webfont.eot');
  17   src: local('?'), url('/src/fonts/junction02/junction02-webfont.woff') format('woff'), url('/src/fonts/junction02/junction02-webfont.ttf') format('truetype'), url('/src/fonts/junction02/junction02-webfont.svg#webfontwzJOjWvv') format('svg');
  18   font-weight: normal;
  19   font-style: normal;
  20 }
  21 @font-face {
  22   font-family: 'LeagueGothicRegular';
  23   src: url('/src/fonts/leaguegothic/leaguegothic-webfont.eot');
  24   src: local('?'), url('/src/fonts/leaguegothic/leaguegothic-webfont.woff') format('woff'), url('/src/fonts/leaguegothic/leaguegothic-webfont.ttf') format('truetype'), url('/src/fonts/leaguegothic/leaguegothic-webfont.svg#webfontWgfhmMGx') format('svg');
  25   font-weight: normal;
  26   font-style: normal;
  27 }
  28
  29 header, section, footer {
  30   font-family: "Arial";
  31 }
  32 header {
  33   font-weight: normal;
  34   letter-spacing: -.05em;
  35   position: absolute;
  36   left: 30px;
  37   top: 25px;
  38   margin: 0;
  39   padding: 0;
  40   font-size: 50px;
  41   text-shadow: rgba(0, 0, 0, 0.2) 0 2px 5px;
  42 }
  43 h1 {
  44     color: #0054AB ;
  45     font-size: 200%;
  46     display: inline;
  47     font-weight: normal;
  48     padding: 0;
  49     margin: 0;
  50     text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2)
  51 }
  52 h2 {
  53   color: black;
  54   font-size: 150%;
  55   padding: 0;
  56   margin: 15px 0 5px 0;
  57 }
  58 h2:first-child {
  59   margin-top: 0;
  60 }
  61
  62 a {
  63   color: inherit;
  64   display: inline-block;
  65   text-decoration: none;
  66   line-height: 110%;
  67   border-bottom: 2px solid #3f3f3f;
  68 }
  69
  70 p.example {
  71   display: block;
  72   padding: 10px 20px;
  73   color: black;
  74   background: rgba(128, 128, 128, 0.4);
  75   border-radius: 8px;
  76   margin-bottom: 10px;
  77   border: 4px solid rgba(0, 0, 0, 0.2);
  78 }
  79
  80 html {
  81   font-family: "Arial";
  82   color: black;
  83   display: inline-block;
  84   padding: 6px 10px 3px 10px;
  85   font-size: 25px;
  86   line-height: 30px;
  87   text-shadow: none;
  88   letter-spacing: 0;
  89   bottom: 10px;
  90   position: relative;
  91   border-radius: 10px;
  92   background-image: white;
  93   -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  94   -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  95   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  96 }
  97
  98
  99 img:hover {
 100   -webkit-transform: scale(1.5) rotate(0deg);
 101   -webkit-transform-origin: 50% 75px;
 102   -moz-transform: scale(1.5) rotate(0deg);
 103   -moz-transform-origin: 50% 75px;
 104   -o-transform: scale(1.5) rotate(0deg);
 105   -o-transform-origin: 50% 75px;
 106   transform: scale(1.5) rotate(0deg);
 107   transform-origin: 50% 50%;
 108   margin: auto;
 109 }
 110 .dragout {
 111   cursor: move;
 112   background: #ddd;
 113   padding: 6px;
 114   margin: 10px;
 115   border: 1px solid #666;
 116 }
 117 #see-position {
 118   margin-bottom: 10px;
 119 }
 120 #geo-map {
 121   height: 280px;
 122   width: 640px;
 123 }
 124 #geo-log {
 125   background-color: red;
 126   color: white;
 127   padding: 5px;
 128   border-radius: 5px;
 129   visibility: hidden;
 130 }
 131 #slide-orientation section {
 132   height: 100%;
 133 }
 134 #orientationWrap {
 135   width: 300px;
 136   height: 300px;
 137   position: relative;
 138 }
 139 #orientationWrap .layer {
 140   position: absolute;
 141   left: 50%;
 142   top: 0;
 143   -webkit-transition-property: x, y;
 144   -webkit-transition-duration: 0.1s;
 145   -webkit-transition-timing-function: linear;
 146   -moz-transition-property: x, y;
 147   -moz-transition-duration: 0.1s;
 148   -moz-transition-timing-function: linear;
 149 }
 150
 151 .transitions div {
 152   width: 20px;
 153   height: 20px;
 154   background: red;
 155 }
 156 .transitions div.left {
 157   margin-left: 0;
 158 }
 159 .transitions div.right {
 160   margin-left: 780px;
 161 }
 162
 163
 164
 165 body {
 166   font: 24px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
 167   background: #fff;
 168   background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#bbd));
 169   background-image: -webkit-linear-gradient(top, #fff, #bbd);
 170   background-image:    -moz-linear-gradient(top, #fff, #bbd);
 171   background-image:      -o-linear-gradient(top, #fff, #bbd);
 172   background-image:         linear-gradient(top, #fff, #bbd);
 173   border-radius: 10px
 174 }
 175
 176 body.impress-supported {
 177     background-image: url('femto-ts.png');
 178     background-repeat: no-repeat;
 179     background-size: 25% 15%;
 180     background-position: 100% 95% ;
 181 }
 182
 183
 184 .presentation {
 185   background: #778;
 186 }
 187 .slide {
 188  ;
 189 }
 190 .slide:nth-child(even) {
 191   border-radius: 20px 0;
 192 }
 193 .slide:nth-child(odd) {
 194   border-radius: 0 20px;
 195 }
 196 header, section, footer, .css, .js, .html {
 197   font-family: "Droid Sans", Arial;
 198 }
 199 header {
 200   color: black;
 201 }
 202 pre {
 203   font-family: "Droid Sans Mono", Courier;
 204   background: rgba(255, 0, 0, 0.05);
 205   border-radius: 8px;
 206   border: 1px solid rgba(255, 0, 0, 0.2);
 207 }
 208 .sidebar {
 209   background-color: #EEE;
 210   border-right: 5px solid #CCD;
 211 }
 212
 213 /*********************************************
 214  * LINKS
 215  *********************************************/
 216 a:not(.image) {
 217   color: #13daec;
 218   text-decoration: none;
 219   -webkit-transition: color .15s ease;
 220   -moz-transition: color .15s ease;
 221   -ms-transition: color .15s ease;
 222   -o-transition: color .15s ease;
 223   transition: color .15s ease; }
 224
 225 a:not(.image):hover {
 226   color: #71e9f4;
 227   text-shadow: none;
 228   border: none; }
 229
 230 .roll span:after {
 231   color: #fff;
 232   background: #0d99a5; }
 233
 234 /*********************************************
 235  * IMAGES
 236  *********************************************/
 237 img {
 238   display: block ;
 239   /*background: rgba(255, 255, 255, 0.12);*/
 240   /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
 241   -webkit-transition: all .2s linear;
 242   -moz-transition: all .2s linear;
 243   -ms-transition: all .2s linear;
 244   -o-transition: all .2s linear;
 245   transition: all .2s linear;
 246   margin-left: auto ;
 247   margin-right: auto ; }
 248
 249 /*************
 250 * code c
 251 **************/
 252 .code {
 253     font-size: 16px ;
 254 }
 255
 256 /*************************************
 257 *    tables
 258 **************************************/
 259 table.ligne {
 260     /*width:  100%;
 261     height: 100%;
 262     margin: 10px;*/
 263     margin-left: auto ;
 264     margin-right: auto ;
 265     margin-top: 3px ;
 266     margin-bottom: 3px ;
 267     padding: 0px;
 268     box-shadow: 10px 10px 5px #888888;
 269     border: 1px solid #cccccc;
 270     -moz-border-radius-bottomleft: 0px;
 271     -webkit-border-bottom-left-radius: 0px;
 272     border-bottom-left-radius: 0px;
 273     -moz-border-radius-bottomright: 0px;
 274     -webkit-border-bottom-right-radius: 0px;
 275     border-bottom-right-radius: 0px;
 276     -moz-border-radius-topright: 0px;
 277     -webkit-border-top-right-radius: 0px;
 278     border-top-right-radius: 0px;
 279     -moz-border-radius-topleft: 0px;
 280     -webkit-border-top-left-radius: 0px;
 281     border-top-left-radius: 0px;
 282 }
 283
 284 table.ligne tr:last-child td:last-child {
 285     -moz-border-radius-bottomright: 0px;
 286     -webkit-border-bottom-right-radius: 0px;
 287     border-bottom-right-radius: 0px;
 288 }
 289
 290 table.ligne tr:first-child td:first-child {
 291     -moz-border-radius-topleft:0px;
 292     -webkit-border-top-left-radius:0px;
 293     border-top-left-radius:0px;
 294 }
 295
 296 table.ligne th:first-child td:last-child {
 297     -moz-border-radius-topright:0px;
 298     -webkit-border-top-right-radius:0px;
 299     border-top-right-radius:0px;
 300 }
 301
 302 table.ligne tr:last-child td:first-child{
 303     -moz-border-radius-bottomleft:0px;
 304     -webkit-border-bottom-left-radius:0px;
 305     border-bottom-left-radius:0px;
 306 }
 307
 308 table.ligne tr:hover td{
 309     background-color:#e5e5e5;
 310 }
 311
 312 table.ligne td{
 313     vertical-align:middle;
 314     background:-o-linear-gradient(bottom, #ffffff 5%, #e5e5e5 100%);
 315     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #e5e5e5) );
 316     background:-moz-linear-gradient( center top, #ffffff 5%, #e5e5e5 100%);
 317     background: -o-linear-gradient(top,#ffffff,e5e5e5);
 318     background-color:#ffffff;
 319     border:1px solid #cccccc;
 320     border-width:0px 1px 1px 0px;
 321     text-align:left;
 322     padding:2px;
 323     font-size:16px;
 324     font-family:Arial;
 325     font-weight:normal;
 326     color:#000000;
 327 }
 328
 329 table.ligne tr:last-child td{
 330     border-width:0px 1px 0px 0px;
 331 }
 332 table.ligne tr td:last-child{
 333     border-width:0px 0px 1px 0px;
 334 }
 335 table.ligne tr:last-child td:last-child{
 336     border-width:0px 0px 0px 0px;
 337 }
 338 table.ligne th {
 339     background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
 340     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
 341     background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
 342     background: -o-linear-gradient(top,#cccccc,b2b2b2);
 343     background-color:#cccccc;
 344     border:0px solid #cccccc;
 345     text-align:center;
 346     border-width:0px 0px 1px 1px;
 347     font-size:18px;
 348     font-family:Arial;
 349     font-weight:bold;
 350     color:#000000;
 351 }
 352 table.ligne th td{
 353     background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);
 354     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
 355     background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
 356     background: -o-linear-gradient(top,#cccccc,b2b2b2);
 357     background-color:#cccccc;
 358 }
 359 table.ligne th td:first-child{
 360     border-width:0px 0px 1px 0px;
 361 }
 362 table.ligne th td:last-child{
 363     border-width:0px 0px 1px 1px;
 364 }
 365
 366 table.remq tr td:first-child {
 367     width: 100px;
 368     height: 100px;
 369     float:left;
 370     margin-left: 0px;
 371     padding: 5px 10px;
 372     outline: none;
 373     background: url('attn.png') no-repeat center;
 374 }
 375
 376 table.remq tr td:last-child {
 377     text-align: left ;
 378     color: blue ;
 379 }
 380
 381 p.remq {
 382     width: 800px;
 383     height: 400px;
 384     float:left;
 385     text-align: left;
 386     box-shadow: 0 0 15px #DDD inset;
 387     margin-left: 0px;
 388     padding: 5px 10px;
 389     outline: none;
 390     background: url('attn.png') no-repeat center;
 391     border: 1px; solid #999 ;
 392     color: blue ;
 393 }
 394
 395 p.columns {
 396     width: 800px;
 397     height: 400px;
 398     float:left;
 399     text-align: left;
 400     margin-left: 0px;
 401     padding: 5px 10px;
 402     border: 1px; solid #999 ;
 403     color: blue ;
 404 }
 405
 406 .columns img {
 407     margin-left: 50px;
 408     float: right;
 409
 410 }
 411
 412 body #titre {
 413     background: rgba(100, 100, 100, 0.4);
 414     background-repeat: no-repeat;
 415     background-size: 40% ;
 416     background-position: 100% 0% ;
 417     text-align : center ;
 418     border-radius: 8px;
 419     margin-bottom:  10px;
 420     border: 4px solid rgba(0, 0, 0, 0.2);
 421 }
 422
 423 #overview { display: none }
 424
 425 /*
 426     We also make other steps visible and give them a pointer cursor using the
 427     `impress-on-` class.
 428 */
 429 .impress-on-overview .step {
 430     opacity: 1;
 431     cursor: pointer;
 432 }