/**
 * The white frame used on start page
 * 
 * @author:opr
 * 
 * @usage: copy&paste:
 * 
   <div class="whiteFrame" style="width:my_wanted_width">
      
      <div class="whiteFrameHeaderLeft">
        <div class="whiteFrameHeaderRight">
          <div class="whiteFrameTop"/>
        </div>
       </div>

       <div class="whiteFrameCenterLeft">
         <div class="whiteFrameCenterRight">
            <div class="whiteFrameCenter">
            
            <!-- content -->
            </div>
          </div>
        </div>
                
        <div class="whiteFrameFooterLeft">
          <div class="whiteFrameFooterRight">
            <div class="whiteFrameBottom"/>
          </div>
        </div>
            
   </div>
 * 
 */

div.whiteFrame {
	/** set a default width. Override as needed */
	width:804px;
}

div.whiteFrameHeaderLeft,
div.whiteFrameFooterLeft {
	background-image:url(white-frame-corner-topleft.png);
	background-position:left center;
	background-repeat:no-repeat;
}

div.whiteFrameFooterLeft { background-image:url(white-frame-corner-bottomleft.png); }

div.whiteFrameHeaderRight,
div.whiteFrameFooterRight {
	margin-left:12px;
    background-image:url(white-frame-corner-topright.png);
    background-position:right center;
    background-repeat:no-repeat;
}

div.whiteFrameFooterRight { background-image:url(white-frame-corner-bottomright.png); }

div.whiteFrameTop,
div.whiteFrameBottom {
	margin-right:11px;
	height:10px;
	
    background-image:url(white-frame-top.png);
    background-position:center center;
    background-repeat:repeat-x;
}

div.whiteFrameBottom {
	height:12px;
	background-image:url(white-frame-bottom.png);
}

div.whiteFrameCenterLeft {
	background-image:url(white-frame-left.png);
    background-position:left center;
    background-repeat:repeat-y;
}

div.whiteFrameCenterRight {
	margin-left:5px;
    
    background-image:url(white-frame-right.png);
    background-position:right center;
    background-repeat:repeat-y;
}

div.whiteFrameCenter {
	margin-right:3px;
    padding:20px;
    background-color:#fff;
}




div.whiteFrameOnGreenGround {
	/** set a default width. Override as needed */
	width:804px;
}

div.whiteFrameOnGreenGroundHeaderLeft,
div.whiteFrameOnGreenGroundFooterLeft {
	background-image:url(white-frame-on-green-ground-corner-topleft.png);
	background-position:left center;
	background-repeat:no-repeat;
}

div.whiteFrameOnGreenGroundFooterLeft { background-image:url(white-frame-on-green-ground-corner-bottomleft.png); }

div.whiteFrameOnGreenGroundHeaderRight,
div.whiteFrameOnGreenGroundFooterRight {
	margin-left:12px;
    background-image:url(white-frame-on-green-ground-corner-topright.png);
    background-position:right center;
    background-repeat:no-repeat;
}

div.whiteFrameOnGreenGroundFooterRight { background-image:url(white-frame-on-green-ground-corner-bottomright.png); }

div.whiteFrameOnGreenGroundTop,
div.whiteFrameOnGreenGroundBottom {
	margin-right:11px;
	height:10px;
	
    background-image:url(white-frame-on-green-ground-top.png);
    background-position:center center;
    background-repeat:repeat-x;
}

div.whiteFrameOnGreenGroundBottom {
	height:12px;
	background-image:url(white-frame-on-green-ground-bottom.png);
}

div.whiteFrameOnGreenGroundCenterLeft {
	background-image:url(white-frame-on-green-ground-left.png);
    background-position:left center;
    background-repeat:repeat-y;
}

div.whiteFrameOnGreenGroundCenterRight {
	margin-left:5px;
    
    background-image:url(white-frame-on-green-ground-right.png);
    background-position:right center;
    background-repeat:repeat-y;
}

div.whiteFrameOnGreenGroundCenter {
	margin-right:3px;
    padding:20px;
    background-color:#fff;
}