/**
*
* @note                           css file for common elements
* 
* @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                           2008-09-22
* @lastmodified                   2009-10-04 17:24
* 
* @colordef                       rgb(0,0,0); Black; Text
* @colordef                       rgb(255,255,255); White; Background
*/

/**
* @section                        clearing floats
*
*                                 http://www.positioniseverything.net/easyclearing.html
*/

.cf:after                         { content: " "; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
                        
/*                                http://www.quirksmode.org/css/clearing.html */
.scf                              { width: 100%; overflow: hidden; }

/**
* @section                        hiding elements (from user, bots and screenreaders)
*/

.hide                             { display: none; }

/**
* @section                        moving elements out of view port, while staying accessible for bots and screenreaders
*/

.moveout                          { position: absolute; display: block; height: 0; line-height: 0; text-indent: -100%; }

/**
* @section                        buttons
*
*                                 Markup:
*
*                                 as a hyperlink:
*                                 
*                                 <a class="btn" href="link">
*                                   <span class="b">Button Text</span>
*                                 </a>
*                                 
*                                 as a submit button (javascript required):
*                                 
*                                 <a class="btn" onmouseup="this.blur();" href="javascript:document.FormularID.submit();">
*                                   <span class="b">Button Text</span>
*                                 </a>
*
*/

a.btn                             { display: -moz-inline-stack; /* <-- this is needed for Firefox2 to display inline blocks */ display: inline-block; height: 100%; padding-left: 9px; background: transparent url('/img/site/btn/btnl.png') no-repeat scroll top left; font-weight: bold; text-decoration: none; white-space: nowrap; }
* html a.btn                      { display: inline; }
*+html a.btn                      { display: inline; }
a.btn span.b                      { display: block; background: transparent url('/img/site/btn/btnr.png') no-repeat scroll top right; line-height: 38px; padding: 0 12px 0px 5px; }
a:link.btn,                           
a:visited.btn                     { text-decoration: none; }
a:active.btn                      { background-image: url('/img/site/btn/btnla.png'); }
a:active.btn span.b               { background-image: url('/img/site/btn/btnra.png'); }

/**
* @section                        Rounded Corner Box
*
*                                 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; } 

/*                                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'); }