126 lines
2.4 KiB
CSS
126 lines
2.4 KiB
CSS
|
|
||
|
|
/* these are the core requirements: */
|
||
|
|
@import "../resources/demos.css";
|
||
|
|
|
||
|
|
@import "../../dijit/themes/dijit.css";
|
||
|
|
|
||
|
|
/* custom styling: dojo.block() function */
|
||
|
|
.dojoBlockOverlay {
|
||
|
|
background:#000 url('resources/loading.gif') no-repeat center center;
|
||
|
|
z-index:999;
|
||
|
|
position:absolute;
|
||
|
|
top:0; left:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* all page styles: */
|
||
|
|
body {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* core styles for each region in the flip box */
|
||
|
|
#hair { height:120px; width:230px; background-position:0 0; }
|
||
|
|
#eyes { height:94px; width:230px; background-position:0 -118px; }
|
||
|
|
#mouth { height:112px; width:230px; background-position:0 -211px; }
|
||
|
|
|
||
|
|
/* make the flipbox exactly the right size to prevent click bleeding */
|
||
|
|
#flipper,
|
||
|
|
#flipper div {
|
||
|
|
width:230px;
|
||
|
|
z-index:990;
|
||
|
|
zoom:1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* the main content area */
|
||
|
|
#bodyWrap {
|
||
|
|
margin:0 auto;
|
||
|
|
width:745px;
|
||
|
|
background:#ccc;
|
||
|
|
padding:15px;
|
||
|
|
-moz-border-radius:8pt;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* offset the faceContainer within the bodyWrap node */
|
||
|
|
#faceContainer {
|
||
|
|
width:230px;
|
||
|
|
z-index:990;
|
||
|
|
zoom: -1;
|
||
|
|
float:left;
|
||
|
|
margin-right:15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width:230px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* this is visible when the webcam code gets enabled */
|
||
|
|
#photoShoot {
|
||
|
|
display:none;
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
width:230px;
|
||
|
|
height:326px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* a convenience class to remove from a node to show it */
|
||
|
|
.invisible {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* a conveince div, set way offscreen for temporarily holding content */
|
||
|
|
#offScreen {
|
||
|
|
position:absolute;
|
||
|
|
top:-9999px;
|
||
|
|
left:-9999px;
|
||
|
|
visibility:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#thumbnails {
|
||
|
|
height:295px;
|
||
|
|
overflow:auto;
|
||
|
|
padding:15px;
|
||
|
|
border:1px solid #ededed;
|
||
|
|
background:#fff;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.clan li.thumbnail { float:left; padding-right:7px; }
|
||
|
|
.clan ul {
|
||
|
|
list-style-type:none;
|
||
|
|
margin:0; padding:0;
|
||
|
|
}
|
||
|
|
.clan ul a img { border:0; }
|
||
|
|
|
||
|
|
.clan { clear:both; }
|
||
|
|
|
||
|
|
#thumbnails .clan h2 {
|
||
|
|
margin:0; padding:0;
|
||
|
|
color:#666;
|
||
|
|
}
|
||
|
|
|
||
|
|
#contentArea {
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#footer { padding-bottom:20px !important; }
|
||
|
|
|
||
|
|
#saveAs {
|
||
|
|
margin-top:10px;
|
||
|
|
line-height:1.3em;
|
||
|
|
cursor:pointer;
|
||
|
|
padding:9px;
|
||
|
|
color:#fff;
|
||
|
|
font-weight:bold;
|
||
|
|
background:#455058;
|
||
|
|
border:1px solid #ccc;
|
||
|
|
}
|
||
|
|
#saveAs:hover {
|
||
|
|
color:#455058;
|
||
|
|
background:#DFE8EE;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 a { text-decoration:none; color:#455058; cursor:pointer; margin-bottom:8px; }
|
||
|
|
h2 a:link { text-decoration:none; color:#455058; }
|
||
|
|
h2 a:visited { text-decoration:none; color:#455058; }
|
||
|
|
h2 a:hover { text-decoration:none; color:#000; }
|
||
|
|
h2 a:active { color:#000; }
|
||
|
|
|
||
|
|
.clan ul { margin-top:4px; }
|