/*------------------------------------------------------------------------*/
/* Screen stylesheet for the Daily.co.uk user control panel               */
/* Written by Andy Wardley http://wardley.org/ based on a design by       */
/* Chaos Design http://www.chaosdesign.com/                               */
/*------------------------------------------------------------------------*/


/*------------------------------------------------------------------------*/
/* Daily Status Specifically                                              */
/*------------------------------------------------------------------------*/

#header {
    float: none;
    height: auto;
    margin: auto auto auto auto;
}

div#this-page {
    padding: 10px;
    margin: 5px;
}

div#this-page h3{
    text-align: center;
    color: #403835;
}

div#no-issues {
    text-align: center;
    color: #403835;
    padding: 10px;
    margin: 20px;
    font-weight: bold;
    font-size: 1.5em;
}



/*------------------------------------------------------------------------*/
/* form styles                                                            */
/*------------------------------------------------------------------------*/
 
form {
    padding: 0;
    margin: 0px; 
}

form fieldset {
    position: relative;
    margin: 0;
    padding: 1px 0 0 0;
    border: 0px;
}

form fieldset legend {
    display: none;
}

form label { 
    float: left;
    margin: 4px;
    padding: 0px;
    font-size: 12px;
    color: #3A5153;
    text-align: right;
}

form input, form select {
    font-size: 12px;
    margin: 1px;
    padding: 1px 3px;
    color: #1D2829;    
/*    background-color: #EDF2F3;
     border: 1px solid #74A2A6;
*/
    background-color: #F5F6E7;
    border: 1px solid #57797C;
}

form select {
    padding: 0 1px;
    padding: 2px;
}

form .optional input,
form .optional select {
    color: #1D2829;    
    background-color: #EDF2F3;
    border: 1px solid #74A2A6;
}

form .mandatory input,
form .mandatory select {
    background-color: #F5F6E7;
    border: 1px solid #57797C;
}

form .optional label {
    color: #74A2A6;
}

form .mandatory label {
    color: #1D2829;
}

form input.text {
}

form .field input:focus,
form .field select:focus {
    background-color: #D7DDA4;
    border: 1px solid #1D2829;
}

form input.button {
    padding: 1px 3px;
    color: #DCE7E8;
    background-color: #57797C;
    border: 1px solid #57797C; 
}
   
form input.button:hover,
form input.button:focus {
    color: black;
    background-color: #EBEED1;
    border: 1px solid #3A5153; 
}

form .invalid input {
    border: 1px solid ;
}

form div.options {
    float: left;
    background-color: #fafafa;
    border: 1px dashed #ddd;
    padding: 3px;
    margin: 2px;
    font-size: 12px;
    line-height: 16px;
}

form.option {
    margin: 5px;
}

form.option input.button {
    border: 0;
    width: 27px;
    height: 27px;
    background-repeat: no-repeat;
    background-position: top left;
}

form.option label {
    line-height: 20px;
    font-size: 12px;
    padding-top: 2px;
}

form.option select {
    line-height: 20px;
    width: 190px; 
    margin: 0;
}

/* TODO - move control images, create different sizes */

form.option input.add {
    background-image: url('../images/controls/plus.gif');
}

form.option input.add:hover {
    background-image: url('../images/controls/plus_roll.gif');
}

form.option input.delete {
    background-image: url('../images/controls/minus.gif');
}

form.option input.delete:hover {
    background-image: url('../images/controls/minus_roll.gif');
}

select.usertype option {
    font-size: 10px;
    padding-left: 10px;
    height: 14px;
}

select.usertype option.heading,
select.usertype option.section {
    padding-left: 0;
}

select.usertype option.section {
    font-weight: bold;
    font-size: 11px;
}

form input.tick {
    display: block;
    margin: 5px 15px;
    padding: 4px 0 0 28px;
    background: url('../images/controls/tick.gif') no-repeat top left;
    min-height: 28px;
    font-size: 14px;
    text-decoration: none;
    color: #57797C;
    border: 0;
}

form input.tick:hover,
form input.tick:focus {
    background: url('../images/controls/tick_roll.gif') no-repeat top left;
    color: #3A5153;
}
/*------------------------------------------------------------------------*/
/* table styling                                                          */
/*------------------------------------------------------------------------*/


table.rounded {
    border: 0;
    width: 795px;
}

table.rounded tr th {
    margin: 0;
    padding: 2px 6px;
    height: 18px;
    background-color: #57797C;
    color: white;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    border: 0;
    border-bottom: 1px solid white;
}

table.rounded tr th.tl,
table.rounded tr th.top {
    background: #57797C url('../images/form/panels/480x1000/head.gif') no-repeat top left;
}

table.rounded tr th.tr {
    background: #57797C url('../images/form/panels/480x1000/head.gif') no-repeat top right;
}

table.rounded tr th.bl {
    background: #57797C url('../images/form/panels/480x1000/head.gif') no-repeat bottom left;
}

table.rounded tr th.br {
    background: #57797C url('../images/form/panels/480x1000/head.gif') no-repeat bottom right;
}

table.rounded tr td {
    text-align: left;
    font-size: 11px;
    padding: 2px 6px;
    margin: 0;
    line-height: 18px;
    color: #1D2829;
    background-color: #DCE7E8;
    border: 0;
    border-bottom: 1px solid white;
}

table.rounded tr.bot td,
table.rounded tr td.bot {
    border-bottom: 0;
}

table.rounded tr.error td {
    background-color: #D6C9C9;
}

table.rounded tr.error td.action {
    color: #CC0000;
}

table.rounded tr td.tl {
    background: #DCE7E8 url('../images/form/panels/480x1000/value.gif') no-repeat top left;
}

table.rounded tr td.tr {
    background: #DCE7E8 url('../images/form/panels/480x1000/value.gif') no-repeat top right;
}

table.rounded tr td.bl {
    background: #DCE7E8 url('../images/form/panels/480x1000/value.gif') no-repeat bottom left;
}

table.rounded tr td.br {
    background: #DCE7E8 url('../images/form/panels/480x1000/value.gif') no-repeat bottom right;
}

table.rounded tr.alt td {
    background-color: #E9F0F3;
}

table.rounded tr.alt td.tl {
    background: #DCE7E8 url('../images/form/panels/480x1000/alt.gif') no-repeat top left;
}

table.rounded tr.alt td.tr {
    background: #DCE7E8 url('../images/form/panels/480x1000/alt.gif') no-repeat top right;
}

table.rounded tr.alt td.bl {
    background: #DCE7E8 url('../images/form/panels/480x1000/alt.gif') no-repeat bottom left;
}

table.rounded tr.alt td.br {
    background: #DCE7E8 url('../images/form/panels/480x1000/alt.gif') no-repeat bottom right;
}

table.rounded tr td.key {
    background-color: #B9D0D2;
}

table.rounded tr td.tlk {
    background: #B9D0D2 url('../images/form/panels/480x1000/key.gif') no-repeat top left;
}

table.rounded tr td.trk {
    background: #B9D0D2 url('../images/form/panels/480x1000/key.gif') no-repeat top right;
}

table.rounded tr td.blk {
    background: #B9D0D2 url('../images/form/panels/480x1000/key.gif') no-repeat bottom left;
}

table.rounded tr td.brk {
    background: #B9D0D2 url('../images/form/panels/480x1000/key.gif') no-repeat bottom right;
}

table.rounded tr.error td.tl {
    background: #D6C9C9 url('../images/form/panels/480x1000/error.gif') no-repeat top left;
}

table.rounded tr.error td.tr {
    background: #D6C9C9 url('../images/form/panels/480x1000/error.gif') no-repeat top right;
}

table.rounded tr.error td.bl {
    background: #D6C9C9 url('../images/form/panels/480x1000/error.gif') no-repeat bottom left;
}

table.rounded tr.error td.br {
    background: #D6C9C9 url('../images/form/panels/480x1000/error.gif') no-repeat bottom right;
}

table.rounded tr.fieldnames th {
    margin: 0;
    padding: 2px 6px;
    color: white;
    text-align: left;
    font-size: 11px;
    font-weight: normal;
    border-bottom: 1px solid white;
    text-align: center;
}

table.rounded tr.fieldnames th.tl {
    text-align: left;
}

table.rounded th.big,
table.rounded td.big {
    font-size: 18px;
}

/*------------------------------------------------------------------------*/
/* Form button                                                            */
/*------------------------------------------------------------------------*/


table.form {
    border: 0;
    margin: auto;
    margin-bottom: 20px;
}

table.form tr td.blank {
    height: 10px;
    background-color: white;
}

table.form tr td a {
    color: #3A5153;
}

table.form tr td a:hover {
    color: #1D2829;
}


table.form tr td.help {
    width: 24px;
    text-align: center;
}

table.form tr td.help a {
    display: block;
    width: 24px;
    height: 18px;
    background: url('../images/form/icons/help.gif') no-repeat 3px 0px;
    text-align: center;
}

table.form tr td.help a:hover {
    background-image: url('../images/form/icons/help_roll.gif');
}

table.form tr.alt td.help a {
    background-image: url('../images/form/icons/help_alt.gif');
}

table.form tr.alt td.help a:hover {
    background-image: url('../images/form/icons/help_alt_roll.gif');
}

table.form tr td.message {
    background-color: #DCE7E8;
    font-size: 11px;
    line-height: 13px;
    padding: 4px;
    color: #403835;
    text-align: center;
}

table.form tr td.info {
    background-color: #EBEED1;
    color: #2B2F12;
    font-size: 11px;
    padding: 2px 20px;
    text-align: center;
    background: #EBEED1 url('../images/form/panels/480x1000/info.gif') no-repeat bottom right;
}

table.form tr td.pkginfo {
    background-color: #EBEED1;
    color: #2B2F12;
    font-size: 11px;
    padding: 2px 20px;
    background: #EBEED1 url('../images/form/panels/480x1000/info.gif') no-repeat bottom right;
}

table.form tr td.pkginfo .name {
    font-weight: bold;
    font-size: 12px;
}

table.form tr td.pkginfo ul.features {
    margin: 2px 10px 5px 10px;
    padding: 0 0 0 20px;
}

table.form tr td.pkginfo ul.features li {
    font-size: 10px;
    margin: 2px 0;
    padding: 0;
    line-height: 10px;
}

table.form tr td.option {
    background-color: #96B9BC;
    color: #2B2F12;
    font-size: 11px;
    text-align: center;
    min-width: 30px;
}

table.form tr th.option {
    text-align: center;
}

table.form tr td.info .examples {
}

table.form tr td.info .examples .example {
    font-style: italic;
}

table.form tr td.error {
    background-color: #D6C9C9;
    color: #CC0000;
    font-size: 10px;
    text-align: center;
    padding: 2px 30px;
/*    background: #D6C9C9 url('../images/form/panels/480x1000/error.gif') no-repeat top right; */
    min-height: 14px;
}

table.form tr td.error a {
    color: #CC0000;
    font-size: 10px;
}

table.form tr td.error a:hover {
    color: #3A5153;
}


table.form tr td input {
    margin: 1px;
}

table.form tr td {
/*    color: #57797C; */
}

table.form tr.mandatory td {
/*    color: #1D2829; */
}

table.form tr.invalid td {
    color: #CC0000;
}

table.form tr td span.static {
    font-weight: bold;
    color: #1D2829;
    font-size: 13px;
}

table.form tr td.button {
    background-color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
    border-bottom: 0px;
}

table.form tr td.minibutton {
    background-color: #FFFFFF; 
    text-align: left;
}

table.form tr td.button input.button {
    display: block;
    margin: 0px 10px 5px 0;
    width: 120px;
    height: 24px;
    font-size: 12px;
    padding: 1px 0 3px 0;
    float: right; 
    text-align: center;
    border: 0;
    color: white;
    background: url('../images/form/buttons/large/green/blank.gif') no-repeat top left;
    background: url('../images/form/panels/120x1000/button.gif') no-repeat bottom right;
    outline: none;
}

table.form tr td.button input.button:focus,
table.form tr td.button input.button:hover {
    background: url('../images/form/panels/120x1000/roll.gif') no-repeat bottom right;
    color: black;
    outline: none;
    cursor: pointer;
}

table.form tr td.minibutton input.button {
    display: block;
    margin: 0px 5px;
    width: 52px;
    height: 18px;
    padding: 0;
    text-align: center;
    border: 0;
    color: white;
    background: url('../images/form/buttons/small/green/blank.gif') no-repeat top left;
}

table.form tr td.minibutton input.button:hover,
table.form tr td.minibutton input.button:focus {
    color: black;
    outline: none;
    cursor: pointer;
}


table.form tr td.minibutton input.add { 
    background-image: url('../images/form/buttons/small/green/add.gif'); 
}
table.form tr td.minibutton input.add:hover,
table.form tr td.minibutton input.add:focus { 
    background-image: url('../images/form/buttons/small/green_roll/add.gif'); 
}
table.form tr td.minibutton input.blank { 
    background-image: url('../images/form/buttons/small/green/blank.gif'); 
}
table.form tr td.minibutton input.blank:hover,
table.form tr td.minibutton input.blank:focus { 
    background-image: url('../images/form/buttons/small/green_roll/blank.gif'); 
}
table.form tr td.minibutton input.change { 
    background-image: url('../images/form/buttons/small/green/change.gif'); 
}
table.form tr td.minibutton input.change:hover,
table.form tr td.minibutton input.change:focus { 
    background-image: url('../images/form/buttons/small/green_roll/change.gif'); 
}
table.form tr td.minibutton input.changing { 
    background-image: url('../images/form/buttons/small/green/changing.gif'); 
}
table.form tr td.minibutton input.changing:hover,
table.form tr td.minibutton input.changing:focus { 
    background-image: url('../images/form/buttons/small/green_roll/changing.gif'); 
}
table.form tr td.minibutton input.delete { 
    background-image: url('../images/form/buttons/small/green/delete.gif'); 
}
table.form tr td.minibutton input.delete:hover,
table.form tr td.minibutton input.delete:focus { 
    background-image: url('../images/form/buttons/small/green_roll/delete.gif'); 
}
table.form tr td.minibutton input.deleting { 
    background-image: url('../images/form/buttons/small/green/deleting.gif'); 
}
table.form tr td.minibutton input.deleting:hover,
table.form tr td.minibutton input.deleting:focus { 
    background-image: url('../images/form/buttons/small/green_roll/deleting.gif'); 
}
table.form tr td.minibutton input.info { 
    background-image: url('../images/form/buttons/small/green/info.gif'); 
}
table.form tr td.minibutton input.info:hover,
table.form tr td.minibutton input.info:focus { 
    background-image: url('../images/form/buttons/small/green_roll/info.gif'); 
}
table.form tr td.minibutton input.order { 
    background-image: url('../images/form/buttons/small/green/order.gif'); 
}
table.form tr td.minibutton input.order:hover,
table.form tr td.minibutton input.order:focus { 
    background-image: url('../images/form/buttons/small/green_roll/order.gif'); 
}
table.form tr td.minibutton input.remove { 
    background-image: url('../images/form/buttons/small/green/remove.gif'); 
}
table.form tr td.minibutton input.remove:hover,
table.form tr td.minibutton input.remove:focus { 
    background-image: url('../images/form/buttons/small/green_roll/remove.gif'); 
}
table.form tr td.minibutton input.search { 
    background-image: url('../images/form/buttons/small/green/search.gif'); 
}
table.form tr td.minibutton input.search:hover,
table.form tr td.minibutton input.search:focus { 
    background-image: url('../images/form/buttons/small/green_roll/search.gif'); 
}
table.form tr td.minibutton input.select { 
    background-image: url('../images/form/buttons/small/green/select.gif'); 
}
table.form tr td.minibutton input.select:hover,
table.form tr td.minibutton input.select:focus { 
    background-image: url('../images/form/buttons/small/green_roll/select.gif'); 
}
table.form tr td.minibutton input.transfer { 
    background-image: url('../images/form/buttons/small/green/transfer.gif'); 
}
table.form tr td.minibutton input.transfer:hover,
table.form tr td.minibutton input.transfer:focus { 
    background-image: url('../images/form/buttons/small/green_roll/transfer.gif'); 
}
table.form tr td.minibutton input.unselect { 
    background-image: url('../images/form/buttons/small/green/unselect.gif'); 
}
table.form tr td.minibutton input.unselect:hover,
table.form tr td.minibutton input.unselect:focus { 
    background-image: url('../images/form/buttons/small/green_roll/unselect.gif'); 
}

table.form td.mid {
    text-align: center;
}