/* === ELEMENTS === */
img, table
{
    border: 0;
}
input, select, textarea
{
    font-family: verdana, tahoma, arial, helvetica, sans-serif;
    font-size: 1em;
}
ul
{
    list-style-type: none;
}
ul.square
{
    list-style-type: square;
    padding-left: 15px;
}
ol
{
    list-style-type: decimal;
    padding-left: 25px;
}
dt
{
    float: left;
}
dd
{
    margin-left: 7em;
}
.checkbox
{
    width: 16px;
    height: 16px;
}




/* === DISTANCE === */
.top1   {margin-top:1em}
.top2   {margin-top:2em}
.top3   {margin-top:3em}
.top4   {margin-top:4em}
.bottom1{margin-bottom:1em}
.bottom2{margin-bottom:2em}
.bottom3{margin-bottom:3em}
.bottom4{margin-bottom:4em}
.def5 {width:5em;float:left;clear:left}
.def6 {width:6em;float:left;clear:left}
.def7 {width:7em;float:left;clear:left}
.def8 {width:8em;float:left;clear:left}
.def9 {width:9em;float:left;clear:left}
.def10{width:10em;float:left;clear:left}
.def11{width:11em;float:left;clear:left}
.def12{width:12em;float:left;clear:left}




/* === WIDTH === */
.w10 {width:10px}
.w20 {width:20px}
.w30 {width:30px}
.w40 {width:40px}
.w50 {width:50px}
.w60 {width:60px}
.w70 {width:70px}
.w80 {width:80px}
.w90 {width:90px}
.w100{width:100px}
.w110{width:110px}
.w120{width:120px}
.w130{width:130px}
.w140{width:140px}
.w150{width:150px}
.w160{width:160px}
.w170{width:170px}
.w180{width:180px}
.w190{width:190px}
.w200{width:200px}




/* === STYLER === */
/* !!! at end !!! */
.text{width:100px}
.integer,.decimal,.currency,.rate{width:60px;text-align:right;padding-right:2px}
.control{cursor:pointer}
.localizer{cursor:pointer}
.localize{display:none}
.hide{display:none}
.show{display:run-in}
.required{background-color:rgb(243,245,249)}

/* !!! sort order !!! */
.light   {color:rgb(167,167,167)}
.active  {color:rgb(254,196,45)}
.passive {color:rgb(255,255,255)}
.success {color:rgb(0,0,0)}
.info    {color:rgb(0,0,0)}
.warn    {color:rgb(255,0,0)}
.error   {color:rgb(255,0,0)}
.selected{color:rgb(51,204,102);font-weight:bold}

/* !!! sort order !!! */
input.light,   select.light,   textarea.light   {color:rgb(0,0,0);background-color:rgb(167,167,167)}
input.active,  select.active,  textarea.active  {color:rgb(0,0,0);background-color:rgb(254,196,45)}
input.passive, select.passive, textarea.passive {color:rgb(0,0,0);background-color:rgb(255,255,255)}
input.success, select.success, textarea.success {color:rgb(0,0,0);background:transparent}
input.info,    select.info,    textarea.info    {color:rgb(0,0,0);background-color:rgb(0,0,0)}
input.warn,    select.warn,    textarea.warn    {color:rgb(0,0,0);background-color:rgb(255,0,0)}
input.error,   select.error,   textarea.error   {border: 2px solid red}

/* !!! important */
/* implement custom style with more importance here */
/* last rull will be taken for formatings */

#f-navi.show {display:block}
#f-navi.hide {display:none}
#f-content.indent{padding-left:220px}
#f-content.full  {padding-left:0px}




/* === FONT === */
.pre       {white-space:pre-wrap}
.bold      {font-weight:bold}
.left      {text-align:left}
.center    {text-align:center}
.right     {text-align:right}
.status    {font-weight:bold;color:rgb(255,0,0)}
.noborder  {border:0}
.through   {text-decoration:line-through}
.float-left{float:left}
.clear     {clear:both}

h1
{
    font-size: 1.5em;
    font-weight: bold;
    color: rgb(80,118,201);
    font-family: bankgothic md bt,verdana,tahoma,arial,helvetica,sans-serif;
    margin-bottom: 1.2em;
    text-decoration: none;
}
h2
{
    font-size: 1.0em;
    font-weight: bold;
    color: rgb(80,118,201);
    text-decoration: none;
}
h3
{
    font-size: 1.0em;
    font-weight: bold;
    color: rgb(80,118,201);
    margin-bottom: 1em;
    text-decoration: none;
}
strong
{
    font-weight: bold;
    color: rgb(80,118,201);
    text-decoration: none;
}




/* === COMMAND === */
#command
{
    text-align: right;
    line-height: 1.5em;
}    
#command .text
{    
    margin-left: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.5em;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    font-family: bankgothic md bt,verdana,tahoma,arial,helvetica,sans-serif;
    color: rgb(255,255,255);
    background-color: rgb(80,118,201);
}
#command img
{    
    margin-left: 15px;
}
#command select
{    
    margin-bottom: 4px;
}
#command a
{
    margin-left: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.6em;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    font-family: verdana,tahoma,arial,helvetica,sans-serif;
    color: rgb(255,255,255);
    background-color: rgb(80,118,201);
}




/* === SUBNAVI === */
#subnavi
{
    color: rgb(80,118,201);
    margin-top: 1em;
    margin-bottom: 2em;
}
#subnavi a:link, #subnavi a:visited, #subnavi a:hover, #subnavi a:active, #subnavi a:focus
{ 
    text-decoration: underline;
    color: rgb(80,118,201);
}
#subnavi h2
{ 
    display: inline;
}
#subnavi h2 a:link, #subnavi h2 a:visited, #subnavi h2 a:hover, #subnavi h2 a:active, #subnavi h2 a:focus
{ 
    text-decoration: none;
    color: rgb(80,118,201);
}




/* === TABLE === */
table
{
    font-size: 0.9em;
    border-collapse: collapse;
}
table a
{
    color: rgb(0,0,0);
    text-decoration: none;
}
tr
{
    padding-left: 10px;
    padding-right: 10px;
}
th
{
    height: 18px;
    padding-left: 10px;
    padding-right: 10px;

    font-weight: bold;
    text-align: left;

    color: rgb(255,255,255);
    background-color: rgb(80,118,201);
    border-top: 1px solid rgb(80,118,201);
    border-bottom: 1px solid rgb(80,118,201);
}
th a
{
    color: rgb(255,255,255);
    text-decoration: underline;
}
th.selected
{
    color: rgb(255,255,255);
    background-color: rgb(52,157,255);
}
td
{
    height: 17px;
    padding-left: 10px;
    padding-right: 10px;
    border-bottom: 1px solid rgb(80,118,201);
}
thead a
{
    display: block;
    color: rgb(255,255,255);
}	
thead a:link, thead a:visited, thead a:focus, thead a:active 
{
    color: rgb(255,255,255);
    text-decoration: none;
}
thead a:hover
{
    color: rgb(207,219,231);
    text-decoration: none;
}
thead .asc a, thead .desc a
{
    padding-left: 15px;
    background-repeat: no-repeat;
    background-position: 0px center;
}
thead .asc  a{background-image: url(/_image/_common/asc-passive.gif)}
thead .desc a{background-image: url(/_image/_common/desc-passive.gif)}
thead .asc  a:hover{background-image: url(/_image/_common/asc-active.gif)}
thead .desc a:hover{background-image: url(/_image/_common/desc-active.gif)}
tfoot
{
    padding-left: 10px;
    padding-right: 10px;
}
tfoot td
{
    height: 18px;
    line-height: 0px;
    font-weight: bold;
    font-size: 0.9em;
    text-align: left;
    color: rgb(255,255,255);
    background-color: rgb(80,118,201);
}


.list tbody td a:link, .list tbody td a:visited, .list tbody td a:hover, .list tbody td a:focus, .list tbody td a:active
{
    display: block;
    color: rgb(0,0,0);
    text-decoration: none;
}
.list tbody tr:hover, .list tbody tr:hover a
{
    font-weight: bold;
    color: rgb(80,118,201) !important;                                                                                  /* IE link */
    background-color: rgb(207,219,231);
}




/* === PANEL === */
.panel
{
    margin-bottom: 4em;
}
.panel .name
{
    width: 110px;
    height: 25px;
    font-weight: bold;
    color: rgb(80,118,201);
    background-color: rgb(207,219,231);
}
.panel .name a
{
    font-weight: bold;
    color: rgb(255,255,255);
    text-decoration: none;
}
.panel .value a
{
    font-weight: bold;
    color: rgb(80,118,201);
    text-decoration: underline;
}
.panel .value
{
    width: 190px;
}
.panel .flag-de
{
    margin-left: 180px;
}
.panel .flag-us
{
    margin-left: 10px;
}




/* === MESSAGES === */
#messages.error
{
    border-style: solid;
    border-color: rgb(255,0,0);
    color: rgb(255,0,0);
    background-color: rgb(244,220,220);
}
#messages.warn
{
    border-style: solid;
    border-color: rgb(255,102,0);
    color: rgb(255,102,0);
    background-color: rgb(252,216,200);
}
#messages.info
{
    border-style: solid;
    border-color: rgb(51,204,102);
    color: rgb(51,204,102);
    background-color: rgb(204,255,204);
}

#messages.error .indent, #messages.error .full, #messages.error .close
{
    color: rgb(244,220,220);
    background-color: rgb(255,0,0);
}
#messages.warn .indent, #messages.warn .full, #messages.warn .close
{
    color: rgb(252,216,200);
    background-color: rgb(255,102,0);
}
#messages.info .indent, #messages.info .full, #messages.info .close
{
    color: rgb(204,255,204);
    background-color: rgb(51,204,102);
}

#messages.error .verticalScroller
{
    border-style: inset;
    border-color: rgb(128,128,128);
    background-color: rgb(255,0,0);
}
#messages.error .verticalScroller div
{
    border-style: outset;
    border-color: rgb(128,128,128);
    background-color: rgb(244,220,220);
}
#messages.warn .verticalScroller
{
    border-style: inset;
    border-color: rgb(128,128,128);
    background-color: rgb(255,102,0);
}
#messages.warn .verticalScroller div
{
    border-style: outset;
    border-color: rgb(128,128,128);
    background-color: rgb(252,216,200);
}
#messages.info .verticalScroller
{
    border-style: inset;
    border-color: rgb(128,128,128);
    background-color: rgb(51,204,102);
}
#messages.info .verticalScroller div
{
    border-style: outset;
    border-color: rgb(128,128,128);
    background-color: rgb(204,255,204);
}

#messages li.error
{
    color: rgb(255,0,0);
}
#messages li.warn
{
    color: rgb(255,102,0);
}
#messages li.info
{
    color: rgb(51,204,102);
}