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