/* CSS3 Superman (supplied from the original source; the archive never kept it) */

/* Superman  */
#clark {
border:1px solid #222;
width:280px;
margin-bottom:20px;
margin-top:0px;
text-align:center;
overflow:hidden;
background-color:#f5f5f5;
border-radius:15px;
box-shadow:0 5px 20px rgba(0,0,0,1);
}

#superman {
border:1px solid #222;
padding:20px 0 0;
width:280px;
margin:20px auto 0;
text-align:center;
overflow:hidden;
background-color:#fff;
box-shadow:0 5px 20px rgba(0,0,0,1);
}

#superman-ears {
height:49px;
width:180px;
margin-top:330px;
margin-bottom:-320px;
margin-left:auto;
margin-right:auto;
padding-top:1px;
background:#cf9f83;
position:relative;
border-radius:20px;
}

#superman-earin {
height:39px;
width:170px;
margin-top:5px;
margin-bottom:-100px;
margin-left:auto;
margin-right:auto;
background:#000;
opacity:.4;
border-radius:20px;
}

#superman-head {
width:160px;
height:198px;
margin-top:190px;
margin-left:auto;
margin-right:auto;
position:relative;
background:#c38e6f;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}

#superman-jaw {
width:90px;
height:0;
margin-top:92px;
border-top:55px solid #c38e6f;
border-left:35px solid transparent;
border-right:35px solid transparent;
position:relative;
z-index:999;
}

#superman-forehead {
width:90px;
height:160px;
margin-bottom:-152px;
margin-left:auto;
margin-right:auto;
background:#cf9f83;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}

#superman-hair {
width:160px;
height:50px;
margin-bottom:-35px;
margin-left:auto;
margin-right:auto;
position:relative;
background:#111;
border-top-left-radius:90px;
border-top-right-radius:90px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:0 1px 1px #000;
}

#superman-parting {
width:0;
height:0;
margin-bottom:-35px;
border-bottom:50px solid blue;
border-left:2px solid transparent;
border-right:5px solid transparent;
margin-left:23px;
position:relative;
opacity:.3;
transform:rotate(-25deg);
}

#superman-laser {
margin-bottom:-195px;
margin-top:80px;
background:yellow;
}

#superman-laser-l {
width:0;
height:0;
margin-left:29px;
margin-top:50px;
margin-bottom:-100px;
border-bottom:225px solid red;
border-left:4px solid transparent;
border-right:17px solid transparent;
float:left;
position:relative;
z-index:99999999999999;
opacity:.5;
transform:rotate(41deg);
}

#superman-laser-r {
width:0;
height:0;
float:right;
margin-top:50px;
margin-right:20px;
margin-bottom:-100px;
border-bottom:225px solid red;
border-left:4px solid transparent;
border-right:17px solid transparent;
position:relative;
z-index:99999999999999;
opacity:.5;
transform:rotate(-36deg);
}

#superman-hair-r {
width:10px;
height:100px;
margin-bottom:-50px;
float:right;
position:relative;
background:#111;
border-top-left-radius:90px;
border-top-right-radius:90px;
border-bottom-left-radius:90px;
border-bottom-right-radius:0;
box-shadow:0 1px 1px #000;
}

#superman-hair-l {
width:10px;
height:100px;
background:#111;
float:left;
position:relative;
margin-bottom:-50px;
border-top-left-radius:90px;
border-top-right-radius:90px;
border-bottom-left-radius:0;
border-bottom-right-radius:90px;
box-shadow:0 1px 1px #000;
}

#superman-quiff {
height:20px;
width:35px;
color:#111;
margin-top:13px;
margin-left:auto;
margin-right:auto;
font-size:1.5em;
text-shadow:#000 0 1px 1px;
}

#superman-brow-l-out {
height:5px;
width:22px;
float:left;
margin-top:-2px;
margin-right:-3px;
background:#444;
border-top-left-radius:80px;
border-top-right-radius:80px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:0 5px 15px rgba(0, 0, 0, .5);
transform:rotate(-15deg);
}

#superman-brow-l-in {
width:35px;
height:5px;
float:left;
background:#444;
border-top-left-radius:80px;
border-top-right-radius:80px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:0 5px 15px rgba(0, 0, 0, .5);
transform:rotate(15deg);
}


#superman-brow-r-out {
width:22px;
height:5px;
float:right;
margin-top:-4px;
margin-left:-4px;
background:#444;
border-top-left-radius:80px;
border-top-right-radius:80px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:0 5px 15px rgba(0, 0, 0, .5);
transform:rotate(25deg);
}

#superman-brow-r-in {
width:35px;
height:5px;
float:right;
background:#444;
border-top-left-radius:80px;
border-top-right-radius:80px;
border-bottom-left-radius:90px;
border-bottom-right-radius:90px;
box-shadow:0 5px 15px rgba(0, 0, 0, .5);
transform:rotate(-25deg);
}

#superman-brows {
width:130px;
height:10px;
margin-top:29px;
margin-left:auto;
margin-right:auto;
}

#superman-eye-r {
padding:4px 10px;
float:right;
border-top:1px solid pink;
border-bottom:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #eee;
margin-right:25px;
position:relative;
z-index:99999;
overflow:hidden;
background:#f1f1f1;
background:radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%);
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:0 5px 7px rgba(0, 0, 0, .2);
}

#superman-eye-l {
padding:4px 10px;
margin-left:25px;
border-top:1px solid pink;
border-bottom:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #eee;
float:left;
position:relative;
z-index:99999;
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:60px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
box-shadow:0 5px 7px rgba(0, 0, 0, .2);
}

.superman-iris {
padding:3px 2px;
background: #879abb;
margin-top:-7px;
margin-bottom:-3px;
border-radius:40px;
}

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

#superman-bridge {
width:3px;
height:44px;
background:#444;
border-right:10px solid #c38e6f;
margin-top:-16px;
margin-left:68px;
float:left;
border-bottom-left-radius:90px;
border-bottom-right-radius:0;
}

#superman-nose {
width:0;
height:0;
margin-top:-100px;
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
border-top:6px solid #222;
border-left:10px solid transparent;
border-right:10px solid transparent;
}

#superman-mouth {
width:100px;
margin-top:-15px;
margin-left:auto;
margin-right:auto;
padding-top:25px;
padding-bottom:15px;
background:#cf9f83;
overflow:hidden;
position:relative;
z-index:999999;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}

#superman-lips-left {
width:10px;
height:1px;
background:#000;
margin-top:2px;
margin-left:25px;
margin-bottom:-5px;
float:left;
box-shadow:0 14px 12px rgba(0, 0, 0, .8);
transform:rotate(-25deg);
}

#superman-lips-center {
width:30px;
height:1px;
background:#000;
margin-left:35px;
margin-bottom:-5px;
float:left;
box-shadow:0 16px 6px rgba(0, 0, 0, 1);
}

#superman-lips-right {
width:10px;
height:1px;
background:#000;
margin-top:2px;
margin-bottom:30px;
margin-right:25px;
float:right;
box-shadow:0 14px 12px rgba(0, 0, 0, .8);
transform:rotate(25deg);
}

#superman-chin {
width:66px;
height:25px;
clear:both;
margin:auto;
padding:5px 5px;
margin-top:-15px;
position:relative;
z-index:999;
background: #cf9f83;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
border-top-left-radius:60px;
border-top-right-radius:60px;
box-shadow:0 7px 15px rgba(0, 0, 0, .1);
}

#superman-chin-cleft-l {
width:40px;
height:20px;
margin-bottom:-40px;
margin-left:12px;
background:#c38e6f;
float:left;
position:relative;
border-radius:100px;
}

#superman-chin-cleft-r {
width:40px;
height:20px;
margin-bottom:-30px;
margin-right:12px;
background:#c38e6f;
float:right;
position:relative;
border-radius:15px;
}

#superman-neck {
width:150px;
height:60px;
margin-bottom:-40px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:222;
clear:both;
background: #cf9f83;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
border-radius:600px/235px;
}

#superman-cape {
width:90%;
height:90px;
margin-left:auto;
margin-right:auto;
background:red;
background:radial-gradient(center, ellipse cover, #ff3019 0%,#cf0404 100%);
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
}

#superman-shoulders {
width:90%;
height:70px;
margin-top:-60px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
background:lightskyblue;
background:radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%);
border-top-left-radius:75px;
border-top-right-radius:75px;
}

#superman-pecks {
width:10px;
height:70px;
margin-top:40px;
margin-bottom:-103px;
margin-left:auto;
margin-right:auto;
}

#superman-pecks-l {
width:5px;
height:70px;
margin-top:55px;
margin-left:50px;
float:left;
position:relative;
background:lightskyblue;
background:radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%);
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:0 0 33px rgba(0, 0, 0, .9);
}

#superman-pecks-r {
width:5px;
height:30px;
margin-top:45px;
margin-right:50px;
float:right;
position:relative;
background:lightskyblue;
background:radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%);
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:0 0 33px rgba(0, 0, 0, .9);
}

#superman-shield {
width:50px;
height:10;
margin-top:-30px;
margin-left:auto;
margin-right:auto;
border-style:solid;
border-color:transparent transparent yellow transparent;
border-width:0 25px 25px 25px;
position: relative;
}

#superman-shield:after {
width:0;
height:0;
top:25px;
left:-25px;
content:"";
position:absolute;
border-style:solid;
border-color:yellow transparent transparent transparent;
border-width:70px 25px 0 25px;
}

#superman-shield-out {
width:50px;
height:0;
position:relative;
border-style:solid;
border-color:transparent transparent red transparent;
border-width:0 35px 35px 35px;
margin-top:30px;
margin-left:auto;
margin-right:auto;
}

#superman-shield-out:after {
width:0;
height:0;
top:35px;
left:-35px;
content:"";
position:absolute;
border-style:solid;
border-color:red transparent transparent transparent;
border-width:90px 60px 0 60px;
}


#superman-shield-symbol {
margin-left:auto;
margin-right:auto;
color:red;
margin-top:-25px;
font-family:georgia;
line-height:1em;
font-size:5em;
letter-spacing:8px;
text-align:center;
font-weight:500;
position:relative;
}



/* Clark  */

#clark-head {
width:160px;
height:198px;
margin-top:35px;
margin-left:auto;
margin-right:auto;
position:relative;
background:#c38e6f;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
}


#clark-quiff {
width:35px;
height:20px;
margin-top:10px;
margin-left:auto;
margin-right:auto;
visibility:hidden;
}

#clark-glasses {
width:156px;
height:50px;
margin-top:144px;
margin-bottom:-193px ;
margin-left:64px;
position:absolute;
z-index:9999;
}

#clark-join {
width:10px;
float:left;
border:4px solid #111;
position:relative;
margin-top:17px;
box-shadow:0 1px 1px #000;
}

#clark-side-l {
width:1px;
float:left;
border:4px solid #111;
position:relative;
margin-top:2px;
box-shadow:0 1px 1px #000;
}

#clark-side-r {
width:1px;
float:right;
border:4px solid #111;
position:relative;
margin-top:2px;
box-shadow:0 1px 1px #000;
}

#clark-rim-l {
width:50px;
height:30px;
margin-left:auto;
margin-right:auto;
float:left;
border:5px solid #111;
position:relative;
z-index:9999;
border-top-left-radius:10px;
border-top-right-radius:25px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
box-shadow:0 1px 1px #000;
}

#clark-rim-r {
width:50px;
height:30px;
margin-left:auto;
margin-right:auto;
float:right;
border:5px solid #111;
position:relative;
z-index:9999;
border-top-left-radius:25px;
border-top-right-radius:10px;
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
box-shadow:0 1px 1px #000;
}

#clark-pecks {
width:10px;
border-top: 90px solid #fff;
border-left: 70px solid transparent;
border-right: 60px solid transparent;
padding-bottom:30px;
margin-top:50px;
margin-bottom:-103px;
margin-left:auto;
margin-right:auto;
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:0 0 33px rgba(0, 0, 0, .9);
}

#clark-pecks-l {
width:45px;
height:90px;
margin-top:55px;
margin-bottom:-140px;
margin-left:30px;
position:relative;
background:#000;
border-top-left-radius:75px;
border-top-right-radius:75px;
}

#clark-pecks-r {
width:8px;
border-top: 9px solid red;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
margin-top:65px;
margin-left:120px;
}

#clark-cape {
width:90%;
height:90px;
margin-bottom:-140px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:33;
background:#888;
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
}

#clark-shoulders {
width:90%;
height:90px;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:33;
background:#000;
border-top-left-radius:75px;
border-top-right-radius:75px;
box-shadow:inset 0 20px 45px rgba(0, 0, 0, .5);
}

#clark-ears {
width:180px;
height:48px;
margin-top:130px;
margin-bottom:-175px;
padding-top:20px;
margin-left:auto;
margin-right:auto;
position:relative;
background:#c38e6f;
border-radius:50px;
}

#clark-earsin {
width:170px;
height:28px;
margin-left:auto;
margin-right:auto;
position:relative;
background:#000;
opacity:.4;
border-radius:50px;
}