css/help.css

   1 /*
   2  * Copyright (c) 2012, Intel Corporation.
   3  *
   4  * This program is licensed under the terms and conditions of the
   5  * Apache License, version 2.0.  The full text of the Apache License is at
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  */
   9
  10 .helpdialog {
  11     position: absolute;
  12     top: 0%;
  13     left: 0%;
  14     width: 100%;
  15     height: 100%;
  16     background-color: rgba(0,0,0,0);
  17     color: white;
  18     font-family: Sans;
  19     visibility: hidden;
  20 }
  21
  22 .helpdialog.shown {
  23     visibility: visible;
  24     -webkit-transition: background-color 0.5s;
  25     background-color: rgba(0,0,0,.33);
  26     z-index: 99;
  27 }
  28
  29 .helpdialog .inner {
  30     position: absolute;
  31     top: 17%;
  32     left : 21%;
  33     height: 60%;
  34     width: 58%;
  35     border: 20px solid #307f9a;
  36     background-color: #063a47;
  37     padding: 10px;
  38     opacity: 0;
  39 }
  40
  41 .helpdialog.shown .inner {
  42     -webkit-transition: opacity 0.5s;
  43     opacity: 1;
  44 }
  45
  46 .helpdialog .inner .contents {
  47     font-family: Arial;
  48     font-size: 20px;
  49     color: #ffffff;
  50     cursor: default;
  51 }
  52
  53 .helpdialog .inner .close {
  54     position: absolute;
  55     width: 30px;
  56     height: 30px;
  57     top: -10%;
  58     left: 98%;
  59     font-family: Sans;
  60     font-weight: 900;
  61     font-size: 50px;
  62     text-align: center;
  63     border: solid 10px #307f9a;
  64     background-color: #307f9a;
  65     -webkit-border-radius: 60px;
  66     line-height: 24px;
  67     cursor: pointer;
  68     color: #dddddd;
  69 }
  70
  71 .helplaunch {
  72     position: absolute;
  73     width: 20px;
  74     height: 20px;
  75     text-align: center;
  76     line-height: 20px;
  77     cursor: pointer;
  78     -webkit-border-radius: 20px;
  79     border: solid 1px #dddddd;
  80     color: #dddddd;
  81     opacity: 0.3;
  82 }
  83
  84 #home_help {
  85     top: 564px;
  86     left: 30px;
  87 }
  88
  89 #home_help:hover {
  90     opacity: 1;
  91 }
  92