subclass-dance-party/styles.css at master · pbhorjee/subclass-dance-party · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
body, html {
  height:100%;
  overflow-x: hidden;
}
body {
  margin: 0px;
  background-color:#444;
  font-size: 18px;
}
body, a:link, a:visited, a:active{
  color: lightblue;
}
#dance-floor {
  position: relative;
  display: block;
  height: calc(100vh - 32px);
  color: white;
  z-index: -1;
  background: repeating-radial-gradient(
    circle,
    #FFFF00,
    #00FF00 10px,
    #C0C0C0 10px,
    #C0C0C0 20px
    )
}
.dancer {
  width: 20px;
  height: 20px;
}
.title, .addDancerButton{
  padding:5px 12px;
  float:right;
}
#line-up {
  cursor: pointer;
}
.topbar {
  height:32px;
  background-color: #555;
  border:1px solid green;
}
.title {
  background-color: #777;
}
.blinkyDancer {
  border:20px solid red;
  border-radius:15px 20px 17px 25px;
  position:absolute;
}
.jiggyDancer {
  border:10px solid blue;
  border-radius:10px;
  position:absolute;
}
.steppingDancer {
  border:10px solid orange;
  border-radius:10px;
  position:absolute;
}
.careltonDancer {
  width: 100px;
  height: 150px;
  position: absolute;
  /*background-image: url('http://giphy.com/gifs/smallworlds-lF1XZv45kIwMw');*/
  z-index: 0;
}

.nav {
  float: right;
  display: inline;
  text-align: right;
  margin: auto 0;
}
ul {
  list-style-type: none;
}
ul.nav>li {
  display: inline;
}
ul.sub-nav {
  display: none;
  background-color: #555;
  text-align: left;
  width: 150px;
  height: 300px;
  visibility: hidden;
}
ul li:hover ul {
  display: block;
  visibility: visible;
}