Batman logo in CSS3 - no images

I was playing with the CSS3 rounded corners and thought that a neat challenge to give myself would be to try to create the Batman logo without images.

the markup:

<div id="main_wrap">

    <div id="left_side">

      <div id="left_wing" >

        <div id="left_middle_top" ></div>

        <div id="left_middle_bottom" >

          <div id="left_bottom_one"></div>

          <div id="left_bottom_two"></div>

        </div>

      </div>

    </div>

    <div id="middle">

      <div id="middle_top"></div>

    </div>

    <div id="right_side">

      <div id="right_wing" >

        <div id="right_middle_top" ></div>

        <div id="right_middle_bottom" >

          <div id="right_bottom_one"></div>

          <div id="right_bottom_two"></div>

        </div>

      </div>

    </div>

  </div>

it even kinda looks like a bat just with the markup lol... but this is all nothing without the CSS

    #main_wrap {

      width:80%; 

      margin:15px auto;

    }

    #left_side #left_wing {

      height:300px; 

      width:230px;

      background-color:#000000;

      float:left; 

      position:relative; 

      left:12px; 

      -moz-border-radius-bottomleft: 75px 150px; 

      border-bottom-left-radius: 75px 150px; 

      -moz-border-radius-topleft: 75px 150px; 

      border-top-left-radius: 75px 150px; 

    }

    #left_side #left_middle_top {

      height:130px; 

      width:200px; 

      background-color:#ffffff; 

      float:left; 

      z-index:10; 

      position:relative; 

      left:40px;

      -moz-border-radius-bottomleft: 120px 120px; 

      border-bottom-left-radius: 120px 120px; 

      -moz-border-radius-bottomright: 100px 120px; 

      border-bottom-right-radius: 100px 120px; 

      -moz-border-radius-topleft: 100px 120px; 

      border-top-left-radius: 100px 120px; 

    }

    #left_side #left_bottom_one {

      height:130px; 

      width:95px; 

      background-color:#ffffff; 

      float:left; 

      z-index:10; 

      position:relative; 

      left:40px; 

      top:40px;

      -moz-border-radius-bottomleft: 90px 120px; 

      border-bottom-left-radius: 90px 120px; 

      -moz-border-radius-topright: 90px 120px; 

      border-top-right-radius: 90px 120px; 

      -moz-border-radius-topleft: 90px 120px; 

      border-top-left-radius: 90px 120px; 

    }

    #left_side #left_bottom_two {

      height:150px; 

      width:126px; 

      background-color:#ffffff; 

      z-index:11; 

      position:relative; 

      float:left; 

      top:50px; 

      left:40px;

      -moz-border-radius-topright: 90px 120px; 

      border-top-right-radius: 90px 120px; 

      -moz-border-radius-topleft: 90px 120px; 

      border-top-left-radius: 90px 120px; 

    }

    #middle{

      width:90px; 

      height:300px; 

      background-color:#000000; 

      float:left; 

      z-index:5; 

      position:relative; 

    }

    #middle #middle_top {

      height:50px; 

      width:38px; 

      background-color:#ffffff; 

      z-index:10; 

      position:relative; 

      float:left; 

      left:26px; 

      -moz-border-radius-bottomleft: 25px 150px; 

      border-bottom-left-radius: 25px 150px;

      -moz-border-radius-bottomright: 25px 150px; 

      border-bottom-right-radius: 25px 150px;

    } 

    #right_side #right_wing {

      height:300px; 

      width:230px; 

      background-color:#000000;

      float:left; 

      position:relative; 

      left:-12px;

      -moz-border-radius-bottomright: 75px 150px; 

      border-bottom-right-radius: 75px 150px; 

      -moz-border-radius-topright: 75px 150px; 

      border-top-right-radius: 75px 150px; 

    }

    #right_side #right_middle_top {

      height:130px; 

      width:200px; 

      background-color:#ffffff; 

      float:right; 

      z-index:10; 

      position:relative; 

      right:40px;

      -moz-border-radius-bottomright: 90px 120px; 

      border-bottom-right-radius: 90px 120px; 

      -moz-border-radius-bottomleft: 90px 120px; 

      border-bottom-left-radius: 90px 120px; 

      -moz-border-radius-topright: 90px 120px; 

      border-top-right-radius: 90px 120px; 

    }

    #right_side #right_bottom_one {

      height:130px; 

      width:95px; 

      background-color:#ffffff; 

      float:right; 

      z-index:10; 

      position:relative; 

      right:40px; 

      top:40px;

      -moz-border-radius-bottomright: 90px 120px; 

      border-bottom-right-radius: 90px 120px; 

      -moz-border-radius-topright: 90px 120px; 

      border-top-right-radius: 90px 120px; 

      -moz-border-radius-topleft: 90px 120px; 

      border-top-left-radius: 90px 120px; 

    }

    #right_side #right_bottom_two {

      height:150px; 

      width:126px; 

      background-color:#ffffff; 

      z-index:11; 

      position:relative; 

      float:right; 

      top:50px; 

      right:40px;

      -moz-border-radius-topright: 90px 120px; 

      border-top-right-radius: 90px 120px; 

      -moz-border-radius-topleft: 90px 120px; 

      border-top-left-radius: 90px 120px; 

    }

which gives you the completed image of: