/* colors */
/*
list of colors here
*/
/* elements */
  img       { font-size: 3px; }
a img       { border: none; }
    a       { text-decoration:none;}
	 a:hover { text-decoration:underline;}
/* emulation */
.hand       { cursor: pointer; }
.hand:hover { background-image: url(../images/toggle.png); background-repeat: no-repeat; background-position: center right; }
.button     { padding: 2px 10px 2px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-size: 1em; font-weight: bold;  }
/* floats */
.fl    { float: left; }
.fr    { float: right; }
.fldi  { float: left; display: inline;}
.frcb  { float: right; clear: both; }
.flcb  { float: left; clear: both; }
.frcr  { float: right; clear: right; }
.flcl  { float: left; clear: left; }
.clear { border: none; clear: both; margin: 0; padding: 2px 0px 0px 0px; line-height: normal; }
/* text */
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
.tj { text-align: justify; }
.b  { font-weight: bold; }
.i  { font-style: italic; }
.u  { border-bottom: 1px solid; }
.s  {	text-decoration: line-through;}
.small  { font-size: 0.6em; }
.normal { font-size: 1em; }
.big    { font-size: 2em; }
.huge   { font-size: 3em; }
/* position */
/* containers */
.c          {margin: 0 auto; } /* horizontal centering */
/* vertical centering */
/*
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>
*/
#outer      {height: 400px; overflow: hidden; position: relative;}
#outer[id]  {display: table; position: static;}
#middle     {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner      {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
.ib     { float: left; display: inline;} /* inline block */
/* images */
.il     {float: left; clear: left; margin: 4px 10px 4px 0;}
.ir     {float: right; clear: right; margin: 4px 0 4px 10px;}
/* kill stuff */
.nopadding {padding: 0;}
.nomargin  {margin: 0;}
.nooutline {outline: 0;}
.noindent  {margin-left: 0; padding-left: 0;}
.nobullet  {list-style: none; list-style-image: none;}
/* visibility */
.show    {display: block; visibility: visible; }
.hide    {display: none; visibility: hidden; }
.visible {visibility: visible; }
.hidden  {visibility: hidden; }
.di      {display: inline; }
.db      {display: block; }
.dn      {display: none; }
/* corners positioning */
.cbl {position: absolute; bottom: 5px; left: 5px;}
.cbr {position: absolute; bottom: 5px; right: 5px;}
.ctl {position: absolute; left: 5px; top: 5px;}
.ctr {position: absolute; right: 5px; top: 5px;}
/* messages */
.alert     { background: #FFEEEE; border: 1px solid #FF9999; color: #800000; margin: 2px 0px 2px 0px; padding: 1px; text-align: center;
				 }
.success   { background: #EEFFEE; border: 1px solid #99FF99; color: #008000; margin: 2px 0px 2px 0px; padding: 1px; text-align: center;
				-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.notice    { background: #EEEEFF; border: 1px solid #9999FF; color: #0000FF; margin: 2px 0px 2px 0px; padding: 1px; text-align: center;
				-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.mandatory { color: #FF0000; }
.highlight { background: #ffc; }
/* margins */
.m1  { margin: 1px; }
.m2  { margin: 2px; }
.m3  { margin: 3px; }
.m4  { margin: 4px; }
.m5  { margin: 5px; }
.m10 { margin: 10px; }
/* paddings */
.p1  { padding: 1px; }
.p2  { padding: 2px; }
.p3  { padding: 3px; }
.p5  { padding: 5px; }
.p7  { padding: 7px; }
.p10 { padding: 10px; }
/* borders */
.b1  { border: 1px solid #EEE; }
.b2  { border: 2px solid #EEE; }
.b3  { border: 3px solid #EEE; }
.b4  { border: 4px solid #EEE; }
.b5  { border: 5px solid #EEE; }
.b10 { border: 10px solid #EEE; }
/* widths */
.w20  { width: 20%; }
.w25  { width: 25%; }
.w33  { width: 33%; }
.w34  { width: 34%; }
.w40  { width: 40%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66%; }
.w80  { width: 80%; }
.w100 { width: 100%; }
/* heights */
.h20  {height: 20px;}
.h30  {height: 30px;}
.h50  {height: 50px;}
.h100 {height:100px;}
.h150 {height:150px;}
.h200 {height:200px;}
.h250 {height:250px;}
.h300 {height:300px;}
/* corners */
.c2  { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
.c3  { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.c4  { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.c5  { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.c10 { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.c20 { -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }
/* counters */
.first    { margin-left: 0; }
.last     { margin-right: 0; }
.odd      { background-color: #FAFAFA; }
.even     { background-color: #EEE;  }
/* link with background change on hover */
a.hover       { background-image: url(hover.gif); background-position: top left; background-repeat: no-repeat;}
a.hover:hover { background-image: url(hover.gif); background-position: bottom left; background-repeat: no-repeat;}
a.hover img   { width: 90px; height: 20px; }
/* inline list */
ul.inline li { display: inline; list-style:none; margin:0; padding:0; }
/* no bullets lists */
ul.nobullets { list-style:none; margin:0; padding:0; }