/*
  Usage:
  
  <div class="vertical-center-outer">
    <div class="vertical-center-middle">
      <div class="vertical-center-inner">
        Content in here will be vertically centered
      </div>
    </div>
  </div>
  
  Warning:
  In opera "body, html" takes the 100% of the window size at load time. When the window is resized, 
    "body, html" remains at the same size as the one when the content was loaded, it does not change
    at the same time with the resize action. In other browsers it works fine.
*/

body, html {
  height:100%;
}

.vertical-center-outer {
  height:100%; 
  width:100%;
}

.vertical-center-outer[class] {
  display:table;
  position:static;
  width:100%;
}

.vertical-center-middle {
  position:absolute;
  top:50%;
  width:100%;
}

.vertical-center-middle[class] {
  display:table-cell;
  vertical-align:middle;
  position:static;
  width:100%;
}

.vertical-center-inner {
  position:relative;
  top:-50%;
  width:100%;
}

.vertical-center-inner[class] {
  position:static;
  width:100%;
}