28e7b63568
- Intro Screen - Share buttons (Twitter/Facebook) - SoundManager - Add audio files - Some CleanUp
164 lines
2.6 KiB
CSS
164 lines
2.6 KiB
CSS
/* Demo/example CSS - not needed for general use */
|
|
|
|
body {
|
|
background:#000;
|
|
font:normal 75% "helvetica neue",helvetica,verdana,arial,tahoma,"times new roman","sans serif";
|
|
color:#fff;
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
#background {
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
width:100%;
|
|
height:100%;
|
|
background:transparent url(http://farm1.static.flickr.com/45/191496680_97cdc5351b_b.jpg) no-repeat 50% 50%;
|
|
}
|
|
|
|
#site {
|
|
position:relative;
|
|
z-index:2;
|
|
background:rgba(0,0,0,0.5);
|
|
padding:1em;
|
|
}
|
|
|
|
#site h1 {
|
|
margin-top:0px;
|
|
}
|
|
|
|
#site p {
|
|
margin:0.5em 0px 0.5em 0px;
|
|
}
|
|
|
|
#site p:last-child {
|
|
margin:0px;
|
|
}
|
|
|
|
.clear {
|
|
float:none;
|
|
clear:both;
|
|
font-size:1px;
|
|
line-height:1px;
|
|
height:1px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
#mpc {
|
|
position:absolute;
|
|
left:50%;
|
|
top:50%;
|
|
margin-left:-19em;
|
|
margin-top:-19em;
|
|
width:38em;
|
|
_width:37.3em;
|
|
border:3px solid #666;
|
|
border:3px solid rgba(255,255,255,0.25);
|
|
-moz-border-radius:12px;
|
|
-webkit-border-radius:12px;
|
|
border-radius:12px;
|
|
z-index:2;
|
|
}
|
|
|
|
#mpc #wrapper {
|
|
position:relative;
|
|
background:#333;
|
|
background:rgba(0,0,0,0.5);
|
|
padding:0.5em;
|
|
-moz-border-radius:12px;
|
|
-webkit-border-radius:12px;
|
|
border-radius:12px;
|
|
}
|
|
|
|
#mpc ul {
|
|
margin:0px;
|
|
padding:0px;
|
|
margin-left:2px;
|
|
*margin-left:1em;
|
|
_margin-left:2px;
|
|
padding:2px 0px 2px 0px;
|
|
}
|
|
|
|
#mpc ul li {
|
|
position:relative;
|
|
float:left;
|
|
display:inline;
|
|
width:7em;
|
|
height:7em;
|
|
margin:0.5em;
|
|
background:#999;
|
|
border:1px solid rgba(0,0,0,0.75);
|
|
-moz-border-radius:2px;
|
|
-webkit-border-radius:2px;
|
|
border-radius:2px;
|
|
font:normal 1em/1em "helvetica",verdana,arial,system;
|
|
padding:0.5em;
|
|
cursor:pointer;
|
|
cursor:hand;
|
|
color:#eee;
|
|
text-transform:uppercase;
|
|
font-weight:bold;
|
|
}
|
|
|
|
#mpc ul li span {
|
|
text-transform:none;
|
|
font-weight:normal;
|
|
color:#ccc;
|
|
}
|
|
|
|
#mpc ul li.active {
|
|
background:#666;
|
|
}
|
|
|
|
#mpc ul li div {
|
|
/* progress indicator */
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:1em;
|
|
font-size:1em;
|
|
line-height:1em;
|
|
height:1em;
|
|
margin:0px 0px 0px 1em;
|
|
width:6em;
|
|
background:#888 url(../image/progress.png) no-repeat -256px 0px;
|
|
background-repeat:no-repeat;
|
|
border:1px solid #666;
|
|
visibility:hidden;
|
|
}
|
|
|
|
#mpc ul li.active div,
|
|
#mpc ul li.loading div {
|
|
visibility:visible;
|
|
}
|
|
|
|
#soundmanager-debug {
|
|
position:absolute;
|
|
right:20px;
|
|
bottom:20px;
|
|
height:12em;
|
|
width:50em;
|
|
overflow:auto;
|
|
margin-left:1em;
|
|
}
|
|
|
|
#soundmanager-debug div {
|
|
font-size:11px;
|
|
font-family: "lucida console",system,terminal,verdana,arial; /* IE doesn't seem to obey short-hand font family here? */
|
|
padding:0px 1em 0.5em 0px;
|
|
}
|
|
|
|
#mpc-debug,
|
|
.note {
|
|
color:#999;
|
|
}
|
|
|
|
#mpc-debug a,
|
|
.note a {
|
|
color:#6699cc;
|
|
text-decoration:none;
|
|
}
|
|
|
|
#isHTML5 {
|
|
display:none;
|
|
} |