/* CSS3 Batman (supplied from the original source; the archive never kept it) */
#batman {
width:280px;
border:1px solid #222;
padding:20px 0 0 ;
margin:20px auto 0;
text-align:center;
overflow:hidden;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,1);
}

#batman-ear-lshading {
width:0;
height:0;
position:absolute;
margin-bottom:-50px;
margin-left:65px;
border-top-left-radius:550px;
border-bottom:145px solid #111;
border-right:60px solid transparent;
transform:rotate(10deg);
}

#batman-ear-rshading {
width:0;
height:0;
margin-bottom:-50px;
margin-left:158px;
border-bottom:145px solid #111;
border-left:60px solid transparent;
position:absolute;
border-top-right-radius:550px;
transform:rotate(-10deg);
}

#batman-head {
width:196px;
height:290px;
margin-top:70px;
margin-left:auto;
margin-right:auto;
border:1px solid #111;
clear:both;
position:relative;
z-index:999;
background:#444;
background:radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%);
border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
}

#batman-forehead {
width:120px;
height:120px;
margin-top:50px;
margin-bottom:-140px;
margin-left:auto;
margin-right:auto;
background:#444;
padding-top:46px;
box-shadow:inset 0 20px 25px rgba(0, 0, 0, .3);
border-top-left-radius:30px;
border-top-right-radius:30px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;}

#batman-sclera-l {
padding:0 9px;
background:#fcfff4;
height:7px;
overflow:hidden;
background:radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
box-shadow:inset 0 -1px 2px rgba(255, 255, 255, .9);
border-top-left-radius:0;
border-top-right-radius:60px;
border-bottom-left-radius:90px;
border-bottom-right-radius:0;
transform:rotate(-10deg);
}

#batman-eye-l {
padding:6px 10px 1px 15px;
margin-left:24px;
clear:both;
border-top:1px solid #000;
border-bottom:3px solid #000;
float:left;
background:#111;
background:radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%);
box-shadow:inset 0 20px 25px rgba(0, 0, 0, .3);
border-top-left-radius:0;
border-top-right-radius:60px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
transform:rotate(10deg);
}

#batman-eye-r {
padding:6px 15px 1px 10px;
margin-right:21px;
border-top:1px solid #000;
border-bottom:3px solid #000;
clear:both;
background:#111;
background:radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%);
box-shadow:inset 0 20px 25px rgba(0, 0, 0, .3);
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
transform:rotate(-10deg);
}

#batman-eye-box-l {
width:80px;
float:left;
margin-bottom:-50px;
}

#batman-eye-box-r {
width:80px;
float:right;
margin-bottom:-40px;
}

#batman-eye-ridge-l {
width:0;
height:0;
border-bottom:10px solid #111;
border-left:16px solid transparent;
border-right:32px solid transparent;
margin-top:16px;
margin-left:27px;
transform:rotate(9deg);
}

#batman-eye-ridge-r {
width:0;
height:0;
border-bottom:10px solid #111;
border-left:32px solid transparent;
border-right:16px solid transparent;
margin-top:16px;
margin-left:10px;
transform:rotate(-9deg);
}

#batman-sclera-r {
padding:0 9px;
height:7px;
overflow:hidden;
background:#fcfff4;
background:radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
border-top-left-radius:60px;
border-top-right-radius:0;
border-bottom-left-radius:0;
border-bottom-right-radius:90px;
transform:rotate(10deg);
}

.batman-pupil {
padding:5px 5px;
margin:0 2px;
background:#000;
background:radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%);
box-shadow:inset 0 20px 5px rgba(0, 0, 0, .3);
border-radius:40px;
}

.batman-iris {
padding:1px 1px;
margin-top:-5px;
margin-left:0;
margin-bottom:2px;
margin-right:0;
background:lightskyblue;
box-shadow:inset 0 20px 5px rgba(0, 0, 0, .3);
border-radius:40px;
}

#batman-nose-frame {
width:125px;
clear:both;
margin-left:auto;
margin-right:auto;
margin-bottom:-70px;
margin-top:20px;
background:#333;
height:90px;
}

#batman-bridge-r {
width:0;
height:0;
border-bottom:66px solid  #222;
border-right:25px solid transparent;
float:right;
margin-right:36px;
}

#batman-bridge-l {
width:0;
height:0;
border-bottom:66px solid #333;
border-left:25px solid transparent;
margin-left:36px;
float:left;
}

#batman-nose {
width:6px;
height:78px;
margin-top:30px;
margin-left:61px;
background:#444;
background: #222222;
background: linear-gradient(top, #222222 0%,#555555 100%);
position:relative;
}

#batman-nose-l {
width:0;
height:0;
border-top:12px solid #333;
border-left:25px solid transparent;
margin-left:36px;
float:left;
margin-top:-12px;
}

#batman-nose-r {
width:0;
height:0;
border-top:12px solid #222;
border-right:25px solid transparent;
float:right;
margin-right:35px;
}

#batman-cheeks {
width:184px;
margin-top:-50px;
margin-left:6px;
background:#444;
padding:32px 0;
box-shadow:inset 0 20px 25px rgba(0, 0, 0, .3);
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;}

#batman-lower-face {
padding-top:10px;
clear:both;
height:100px;
margin-top:-20px;
margin-bottom:-50px;
background: #bc8e7e;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:inset 0 4px 9px rgba(0, 0, 0, .9);
}

#batman-lower-face-tone {
clear:both;
height:75px;
width:90px;
margin-left:auto;
margin-right:auto;
visibility:hidden;
margin-top:0px;
margin-bottom:-70px;
background: #d2ac9f;
border-top-left-radius:40px;
border-top-right-radius:60px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:inset 0 14px 19px rgba(0, 0, 0, .2);
}

#batman-lower-face-outer {
background: #000;
clear:both;
margin-left:40px;
margin-right:40px;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
}

#batman-mouth {
width:10px;
background:#333;
clear:both;
margin-top:25px;
margin-left:38px;
padding:1px 16px;
border-bottom:1px solid #000;
box-shadow:0 25px 10px rgba(0, 0, 0, .9);
}

#batman-mouth-r {
background:#333;
float:right;
margin-bottom:10px;
margin-right:21px;
border-bottom:1px solid #000;
padding:1px 8px;
transform:rotate(20deg);
border-radius:30px;
}

#batman-mouth-l {
background:#333;
float:left;
margin-left:23px;
border-bottom:1px solid #000;
padding:1px 8px;
transform:rotate(-20deg);
border-radius:30px;
}

#batman-chin {
width:57px;
height:30px;
margin:auto;
margin-top:20px;
background:#bc8e7e;
position:relative;
z-index:999;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:30px;
border-bottom-right-radius:30px;
box-shadow: 0 24px 20px rgba(0, 0, 0, .9);
}

#batman-neck {
height:60px;
width:120px;
margin-top:-60px;
margin-bottom:-30px;
margin-left:auto;
margin-right:auto;
background:#111;
border:1px solid #000;
background: linear-gradient(left, #4c4c4c 0%,#131313 100%);
z-index:222;
clear:both;
position:relative;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
border-radius:600px/235px;
}

#batman-traps {
height:50px;
margin-top:-70px;
margin-bottom:-30px;
margin-left:auto;
margin-right:auto;
z-index:22;
clear:both;
position:relative;
width:0;
height:0;
border-bottom:85px solid #222;
border-left:128px solid transparent;
border-right:128px solid transparent;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
border-radius:600px/235px;
}

#batman-shoulders {
width:320px;
height:90px;
margin-left:-20px;
background:#444;
background:radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%);
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
}

#batman-cleavage {
width:20px;
height:50px;
margin-bottom:-40px;
margin-left:auto;
margin-right:auto;
background:#444;
background:radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%);
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
}

#batman-sign {
width:90px;
height:50px;
margin-left:auto;
margin-right: auto;
border:3px solid #000;
background:yellow;
border-radius:100px/50px;
}

#batman-chest {
margin-top:-30px;
margin-left: auto;
margin-right: auto;
width: 100px;
height: 30px;
overflow:hidden;
}

#batman-sign-ear-r {
width:0;
height:0;
float:right;
border-left:8px solid transparent;
margin-right:35px;
border-bottom:15px solid #111;
margin-top:6px;
transform:rotate(-1deg);
}

#batman-sign-ear-l {
width:0;
height:0;
float:left;
border-bottom:15px solid #111;
border-right:8px solid transparent;
margin-top:6px;
margin-left:35px;
transform:rotate(1deg);
}

/* Restoration fix: the traps are a border triangle; its large border-radius + inset shadow now render (in Safari)
   as a translucent grey ellipse behind the neck. Square corners keep the intended triangle in every browser. */
#batman-traps { border-radius: 0; box-shadow: none; }