/**
*
* @note                           css file for boxes
* 
* @appdef                         fapulous framework
* @app-myapp-theme  
* @app-myapp-used                 True
* @media                          screen
* @valid                          true
* 
* @author                         Alp Uçkan
* @version                        1.1
* @link                           http://fapulous.77elements.net/
* @copyright                      Copyright(c) by Alp Uçkan
* @license                        http://sam.zoy.org/wtfpl/
* 
* @date                           2010-04-10
* @lastmodified                   2010-04-10 15:57
* 
* @colordef                       rgb(0,0,0); Black; Text
* @colordef                       rgb(255,255,255); White; Background
*
/

/**
* @section                        Rounded Corner Box, Old school
*
*                                 This technique doesn't use any floats for performance reasons.
*                                 If you are looking for a pre-css3-technique that requires only one image file, check out 
*                                 "Even More Rounded Corners With CSS" at http://www.schillmania.com/content/projects/even-more-rounded-corners/
*
*                                 Markup:
*
*                                 <div class="fapulousBox">
* here is the switch (toph/top) --> <div class="toph"><div><h2>Header of this box</h2></div></div>
*                                   <div class="contentC">
*                                     <div class="content">
*                                       Content
*                                     </div> <!-- /content -->
*                                   </div> <!-- /contentC -->
*                                   <div class="bottom"><div>&nbsp;</div></div>
*                                 </div> <!-- /fapulousBox -->
*
*/
                                  
.fapulousBox                      { position: relative; margin: 0 auto; line-height: 1.5; }
.fapulousBox .top                 { height: 15px; padding-left: 14px; overflow: hidden; background: url('/img/site/fapulousbox/topl.png') no-repeat left top; }
.fapulousBox .top div             { line-height: 15px; background: url('/img/site/fapulousbox/topr.png') no-repeat right top; }
.fapulousBox .top div h1,
.fapulousBox .top div h2,
.fapulousBox .top div h3,
.fapulousBox .top div h4          { visibility: hidden; }
.fapulousBox .toph                { height: 31px; padding-left: 14px; background: url('/img/site/fapulousbox/headerl.png') no-repeat left top; overflow: hidden; }
.fapulousBox .toph div            { line-height: 31px; padding-top: 2px; background: url('/img/site/fapulousbox/headerr.png') no-repeat right top; }
.fapulousBox .toph div h1,
.fapulousBox .toph div h2,
.fapulousBox .toph div h3,
.fapulousBox .toph div h4         { margin: 0; padding: 0; font-size: 1em; line-height: 31px; font-weight: normal; }
.fapulousBox .contentC            { padding-left: 14px; background: url('/img/site/fapulousbox/left.png') repeat-y left top; }
.fapulousBox .content             { padding: .4375em 1em 0 1em; overflow: hidden; background: url('/img/site/fapulousbox/right.png') repeat-y right top; }
.fapulousBox .bottom              { height: 30px; padding-left: 14px; background: url('/img/site/fapulousbox/bottoml.png') no-repeat left bottom; }
.fapulousBox .bottom div          { line-height: 30px; background: url('/img/site/fapulousbox/bottomr.png') no-repeat right top; } 

/**
* @section                        Rounded Corner Box, CSS3
*
*
*                                 Markup:
*
*                                 <div class="fapulousBoxM">
*                                   ...
*                                 </div> <!-- /fapulousBoxM -->
*
*/

.fapulousBoxM                     { position: relative; margin: 0 auto; padding: 1em; line-height: 1.5; background-color: #fff; border: 1px solid #eee; }
.fapulousBoxM:nth-of-type(1n)     { border: 1px solid #fff; -webkit-border-radius: .4375em; -moz-border-radius: .4375em; border-radius: .4375em;
                                    background: -webkit-gradient( linear, left bottom, left top, color-stop(0.07, rgb(235,238,241)), color-stop(0.23, rgb(255,255,255)), color-stop(1, rgb(255,255,255)) ); background: -moz-linear-gradient( center bottom, rgb(235,238,241) 7%, rgb(255,255,255) 23%, rgb(255,255,255) 100% );
                                    -webkit-box-shadow: .125em .125em .4375em  #cfcfcf; -moz-box-shadow: .125em .125em .4375em #cfcfcf; box-shadow: .125em .125em .4375em #cfcfcf; }


/**
* @section                        gif alternatives for IE6, in case you don't use any pngfix methods
*
*/

* html .fapulousBox .toph         { background-image: url('/img/site/fapulousbox/headerl.gif'); }
* html .fapulousBox .toph div     { background-image: url('/img/site/fapulousbox/headerr.gif'); }