/******************************************************************************
 Dynamic forms, lists and details pages style applied in the Ukea project
******************************************************************************/

.listTemplate, .formTemplate, .detailsTemplate {
    border: 1px solid black;
    background: white;
	margin: 0px auto;
    width: 90%;
    margin-top:20px;
}    

@media all {
    .header {
        height: 2.5em;
        border-top: 1px  solid white;
        border-left: 1px  solid white;
        border-right: 1px  solid white;
        line-height: 2.5em;  /* to vertical center the content */
        background: #6699cc;
        padding-left: 8px;
        padding-right: 8px;
    }
    .title {
        color: white;
        text-align: left;
        font-weight: bold;
        float: left;
    }
    .headermethod {
        color: #ffcc99;
        text-align: right;
        float: right;
    }
    .headermethod a{
        color: #ffcc99;
        text-decoration: none;
        font-weight:bold;
    }
    .headermethod a:hover{
        color: #ccffff;
    }
    .contentbody{
        margin: 0px auto;
        _width: 100%;
    }
    .contentbody table{
        width: 100%;
        border-collapse:collapse; 
    }
    .contentbody table td {
        border: solid 1px; 
        padding: 5px;
        color: #333366;
    }
    .contentbody table td a {
        color: #fd8712;
        font-weight:bold;
        text-decoration: none;
    }
    .contentbody table td a:hover {
        color: #0066cc; 
    }
    .contentbody table td td{
        border: none; 
        padding: 0;
    }
    .colheader {
        background: url(images/colheader_back.gif) repeat-x;
    }
    tr.colheader td{
        height: 29px;
        color: #333366;
        font-weight: bold;
    }
    .row1 td, .row td{
        background: #f0f6fd; 
    }
    .row2 td{
        background: #e4f1fd; 
    }
    .row1 .label, .row .label{
        background: #f0f6fd; 
    } 
    .row2 .label{
        background: #e4f1fd; 
    } 
    .detailstable .label{
        width: 30%;
    }          
    .detailstable .cell{
        width: 70%;
    }          
    .row1 .listmethod, .row .listmethod{
        background: #f0f6fd;
        white-space: nowrap;
    }
    .row2 .listmethod{
        background: #e4f1fd; 
    }
    .listmethod a {
        color: #333366; 
    }
    .button {
        background-color : #e4f1fd;
        color: #333366; 
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
    }
    .submitfooter{
        background: #dddfd7; 
        padding: 5px;
        text-align: center;
    }           
    .separator{
        background: url(images/colheader_back.gif) repeat-x;
        color: #333366;
        font-weight: bold;
        text-align: center;
        height: 30px;
    }  
}

/* Rules that are applied only for the screen presentation */
@media screen {
    .contentbody table td, .header, .headerRow, .colheader, .cell, .label, .cell2, .label2, .separator, .listmethod, .listmethod2 {
        /* The separator lines between the cells */
        border-color: white;
    }
}

/* Rules that are applied only for printing */
@media print {
    .contentbody table td, .header, .headerRow, .colheader, .cell, .label, .cell2, .label2, .separator, .listmethod, .listmethod2 {
        border-color: black;
    }
}

/* Pager tool styles */
.pager{ 
    color:#333366; 
  	padding-right: 8;
  	padding-bottom: 3;
  	text-align:right;
    margin-left: auto; 
    margin-right: 0px;
}
.pager span {
    padding-left: 5px; 
    padding-right: 5px;
    text-weight: bold;
}
.pager a { 
    text-decoration: none; 
    color:#333366;
}
.pager a:hover { 
    color:#0066cc;
}
.expl, .expl p{ 
    color: #336699; 
  	font-size: 7pt;
}
.expl, .expl p{ 
    color: #336699; 
  	font-size: 7pt;
}
.exp2, .exp2 p{ 
    color: #ffa600; 
  	font-size: 7pt;
}
.cash{ 
    width: 4em; 
  	font-size: 8pt;
}
.nameselect{ 
    width: 10em; 
  	font-size: 8pt;
}
