/*
Följande ytor används för applikationer på Posten.se:
    |---------------------------------------------------|
    |serviceArea                                        |
    |                                                   |
    | |-------------------------------------------------|
    | |serviceHead                                      |
    | |(Rubrik samt steg)                               |
    | --------------------------------------------------|
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    | (Applikationsinnehåll)                            |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |                                                   |
    |---------------------------------------------------|

Alla css-klasser har till uppgift att rita ut
sitt innehåll i någon av dessa ytor.
För att det ska fungera på rätt sätt behöver de användas på rätt sätt.
*/

/*Style för att skapa tjänsteytan på sidan */
.serviceArea {
    width: 56.1em; /* Total bredd för serviceArea: 58.5em */
    display: block;
    /*
       Förklaring av luft på vänster och höger sida om serviceArea:
       - 0.1em luft till höger från width på ".contentRow" i pse.css (56.2em)
       - margin-left:2.4em från ".contentRow" i pse.css.
       - margin-right:2.3em från "div#containerRightArea" i rightarea.css.
       Förklaring av luft nedanför .serviceArea:
       - margin-bottom 0.6em från ".contentRow" i pse.css
       - vit border-top 0.6em från "#footer" i pse.css
    */
    margin-bottom: 1.2em;
    text-align: left;
}

.serviceArea:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.serviceArea  p,
    .serviceArea  h1,
    .serviceArea  h2 {
    width: 32em;
}

.serviceHead {
    padding: 0.7em 0 0em 0;
    margin: 1.5em 0 1em 0;
    clear: both;
}

.serviceHead:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.serviceHead h1 {
    float: left;
    margin: 0;
    padding: 0;
    width: 22.857em; /*Motsvarar 320px, matchar bredd på .info p */
}

.info {
    clear: both;
    margin-bottom: 0;
}

.info p {
    padding-bottom: 0;
}

.info img.info {
/* Alltid samma storlek på bild i info */
    width: 22.9em;
    height: 6em;
    float: right;
    margin: 0;
}

/* Rubrik för tjänst med progress bar */
/* Huvudvariant med span för varje steg. */
.serviceHead div.steps {
    position: relative;
    padding-top: 0.2em; /* IE: Hindra att border-top kapas i valt steg */
    padding-bottom: 0.2em; /* IE: Hindra att border-bottom kapas i valt steg */
    top: -0.2em; /* IE: Kompensera padding-top ovan */
    text-align: right; /*display:inline-block;*/
    display: inline;
    float: right;
    font-weight: bold;
    width: 20em;
    font-size: 1.14em; /* Teckenhöjd 8px 1/0.7 * 0.8=1.14*/
    line-height: 1.9em; /*border: 1px solid;*/
}

.steps span {
    padding: 0.35em 0.1em 0.35em 0.1em;
    display: inline;
    margin-left: 0.1em;
    border-style: solid;
    border-width: 0.1em;
    border-color: #FFFFFF; /* "Transparent" border */
}

.steps span.label {
    margin: 0 0.1em 0 0;
    padding: 0;
    padding-top: 0.1em;
    border-style: none;
}

.steps span.mark {
    padding: 0.35em 0.4em 0.35em 0.4em;
    border-width: 0.1em;
    border-style: solid;
}

/* Hjälpfält som fälls ut då man klickar på länkliknande text på etiketten */
/* initialt är fältet dolt */
.serviceArea .description {
    display: none;
    padding: 1em;
}

.serviceArea .descriptionImage {
    float: right;
    margin: 0 0 1em 1em;
}

.serviceArea .descriptionText {
    margin: 0 0 0 16.5em;
}

.serviceArea .descriptionClose {
    clear: both;
    text-align: right;
    margin-top: 1em;
    text-decoration: underline;
    cursor: pointer;
}

.serviceArea .descriptionShow {
    text-decoration: underline;
    line-height: 1.2em;
    cursor: pointer;
    display: inline;
}

.serviceArea .holiday {
    display: none;
}

.serviceArea .holidayText {
    margin: 0 0 0 0;
}

.serviceArea .holidayClose {
    clear: both;
    text-align: left;
    margin-top: 1em;
    text-decoration: underline;
    cursor: pointer;
}

.serviceArea .holidayShow {
    text-decoration: underline;
    line-height: 1.2em;
    cursor: pointer;
    display: inline;
}

.serviceArea:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.serviceArea .normalText {
    font-weight: normal;
}

/* Felmeddelande, generellt */
.errorMessage {
    font-size: 1em;
    font-weight: bold;
    text-align: left;
}

/* Felmeddelande högst upp på sidan */
.serviceArea .errorMessage {
    clear: both;
    margin-bottom: 0.6em;
    padding: 0.2em 0.5em 0.5em 0.5em; /*border:1px solid;*/
}

.errorArea {
    /*
    width: 100%;
    */
/*min-height:5em;*/
}

.errorArea .errorMessage {
    padding: 0em 1.1em 0.5em 0;
    width: inherit; /* Bredden för errorMessage insprängt i formulär*/
}

/* Felmeddelande vid fältet */
.row .errorMessage {
/*border: 1px solid red;*/
    background-color: transparent;
    width: 36em;
    clear: none;
    margin: 0;
    padding: 0;
    padding-bottom: 0.3em;
    float: left;
}

.rowError {
    width: 36em; /*width:100%;*/
    margin: 0;
    padding: 0;
    float: left;
    clear: both; /*border:1px solid;*/

}

/* Felmeddelande i vänster kolumn (för 2 kolumnsinput) */
.rowError .left {
    float: left;
}

/* Felmeddelande i höger kolumn (för 2 kolumnsinput) */
.rowError .right {
    float: right;
}

/*********************** The Legendary legend *************************************************************/
legend {
    width: 56.1em;
    margin-bottom: 0.3em;
    overflow: hidden;
    padding: 0.9em 0 0.9em 0;
}

legend div.legendInstruction, legend span.legendInstruction {
    font-weight: normal;
    display: inline;
    font-size: 0.7em;
}

fieldset {
    clear: both;
    margin: 0;
    margin-bottom: 1.2em;
    padding: 0;
    border-style: none;
}

legend span {
    font-size: 1.4em;
    font-family: verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 39.2em;
    overflow: hidden;
    display: block;
    padding: 0.18em 0 0.18em 0.857em;
}

/* Text, obligatoriska fält */
.requiredFieldsInfo {
    clear: both;
    float: right;
    text-align: left;
    line-height: 1.3em;
    padding-bottom: 0.3em;
}

/* Input rad */
.dialogRow {
    clear: both;
    display: block;
    margin: 0 0 0.3em 0;
    padding: 1.2em 1.2em 1.2em 1.2em;
    background-position: 30% 0%;
}

.dialogRow:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.rowLabel {
/*display:inline;*/
    display: block;
    position: relative;
    width: 14em;
    font-weight: bold;
    line-height: 1.3em; /* Line-height så inte bokstäverna g,j,y kapas i nederkant */
    float: left;
    margin-right: 0.3em;
    /*
    border: 1px solid;
    */
}

/* Instruktioner vid label om fält ska fyllas i på speciellt sätt, exempelvis att 1 av 2 möjliga fält måste fyllas i. */
.rowLabel .rowInstruction {
    float: left;
    font-weight: normal;
    /*
    border:1px solid;
    */
}

.row {
    /*
        border: 1px solid red;
    */
    width: 36em; /* Width för korrekt utseende i Safari */
    float: left;
    position: relative;
    left: 1.8em;
    margin-right: 1.2em;
}

.rowInput {
    /*
        border: 1px solid;
    */
    width: 36em;
    float: left;
}

.dialogRow .twocols {
    width: 18.0em; /*border:1px solid;*/
}

.rowInput input, .rowInput select, .rowInput textarea {
    margin: 0 0.6em 0 0;
}

.rowInput div.choice {
    /*
    border: 1px solid;
    */
    margin-bottom: 0.4em;
}

.rowInput div.choice * {
    vertical-align: middle;
}

.rowInput div.choice input {
    float: left;
    margin: 0.1em 0.6em 0.3em 0.0em;
}

.serviceArea div.choiceLeft {
    float: left;
}

/* Fem olika storlekar på inmatningsfält. extra small (xs), small (s) medium (m) large (l) och extra large (xl) */
input.xs {
    width: 4.1em;
}

/* xs för select och textarea bredare än för input */
select.xs,
    textarea.xs {
    width: 5.8em;
}

input.s,
    select.s,
    textarea.s {
    width: 8.8em;
}

input.m,
    select.m,
    textarea.m {
    width: 13.5em;
}

input.l,
    select.l,
    textarea.l {
    width: 18.2em;
}

input.xl,
    select.xl,
    textarea.xl {
    width: 28.2em;
}

input.xxl,
    textarea.xxl {
    width: 37.6em;
}

select.xxl {
    width: 35.6em;
}

/* Högerställd text i input */
input.right {
    text-align: right;
}

input.readonly {
    border: none;
    padding: 2px;
}

input.disabled {
    padding: 1px;
    border-style: solid;
    border-width: 1px;

}

/*###############
Tabeller och definitionslistor- start
#################*/

/* Generell CSS för tabeller - start */
.serviceArea table {

/*border:1px solid #000000;*/
}

.serviceArea table caption {
    padding-bottom: 1em;
    font-weight: bold;
    text-align: left;
    font-size: 1.4em;
    line-height: 1em;

}

.serviceArea th,
    .serviceArea td {
    padding: 0.6em 0.2em 0.6em 0.2em;
    vertical-align: top;
    text-align: left;
}

.serviceArea th.firstcol,
    .serviceArea td.firstcol {
    padding-left: 1.2em;
}

.serviceArea th.firstcolsmallwidth,
    .serviceArea td.firstcolsmallwidth {
    width: 2.1em;
}

.serviceArea th.lastcol,
    .serviceArea td.lastcol {
    padding-right: 1.2em;
}

.serviceArea th {
    font-weight: bold;
}

/* Centrerad text */
.serviceArea th.center,
    .serviceArea td.center {
    text-align: center;
}

/* Högerställd text */
.serviceArea th.right,
    .serviceArea td.right {
    text-align: right;
}

.serviceArea td.important {
    font-weight: bold;
}

/* Definitionlist för tabell - start */
dl.tableItemDefinition {
    width: 32em;

}

.tableItemDefinition dt {
    float: left;
    margin-right: 0.5em;
    font-weight: bold;
}

.tableItemDefinition dd {
    margin-bottom: 0.5em;
}

/* Definitionlist för tabell - slut */

/* Generell CSS för tabeller - slut */
/* Tabell, editerbara rader - start */
.serviceArea table.editable {
    clear: both;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
}

.serviceArea table.editable th,
    .serviceArea table.editable td {
    border-bottom-width: 0.3em;
    border-bottom-style: solid;
    line-height: 1.3em;
}

/* Tabell, editerbara rader - slut */
/* Tabell, resultat - start */
.serviceArea table.result {
    clear: both;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
}

.serviceArea table.result th,
    .serviceArea table.result td {
    line-height: 1.3em;
}

.serviceArea table.result th {
    border-bottom-width: 0.3em;
    border-bottom-style: solid;
}

.serviceArea table.result th.even,
    .serviceArea table.result th.odd {
    border-style: none;
}

/* Tabell, resultat - slut */

/* Tabell, kundvagn - start */
.serviceArea table.cart {
    clear: both;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
}

.serviceArea table.cart th,
    .serviceArea table.cart td {
    border-bottom-width: 0.3em;
    border-bottom-style: solid;
    line-height: 1.3em;
}

.serviceArea table.cart tr.summarydetails td {
    border-bottom-style: none;
}

.serviceArea table.cart tr.summarydetailsfirstrow td {
    border-bottom-style: none;
}

.serviceArea table.cart tr.summarydetailslastrow td {
    border-bottom-style: solid;
}

.serviceArea tr.summarydetails td {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

.serviceArea tr.summarydetailsfirstrow td {
    padding-top: 0.6em;
    padding-bottom: 0.2em;
}

.serviceArea tr.summarydetailslastrow td {
    padding-top: 0.2em;
    padding-bottom: 0.6em;
}

.serviceArea tr.summarySum td {
    font-size: 1.3em;
}

/* Tabell, kundvagn - slut */
/* Bekräfta - start */
.serviceArea div.confirm {
    overflow: hidden;
    width: 56.1em;
}

.serviceArea div.confirm table {
    clear: both;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
}

.serviceArea div.confirm th,
    .serviceArea div.confirm td {
    line-height: 1.3em;
}

.serviceArea div.confirm th {
    border-bottom-width: 0.3em;
    border-bottom-style: solid;
}

.serviceArea div.confirm h2.headerdl {
    clear: both;
    width: 54.1em;
    padding: 0.6em 1em 0.6em 1em;
    line-height: 1.3em;
    margin: 0;
    border-bottom-width: 0.3em;
    border-bottom-style: solid;
}

.serviceArea div.confirm dl {
    margin-bottom: 1.2em;
    height: auto;
    padding-top: 0.5em;
    padding-left: 1.2em;
}

.serviceArea div.confirm dt {
    width: 18.8em;
    font-weight: bold;
}

.serviceArea div.confirm dd {
    margin-top: -1.3em;
    margin-left: 19.8em;
    padding-bottom: 1em;
}

/* Bekräfta - slut */
/* Kvitto - start */
.serviceArea div.receiptHead {
    padding: 1em;
    border-bottom-width: 0.3em;
    border-bottom-style: solid;
}

.serviceArea div.receiptHead h2 {
    font-size: 1.4em;
    padding-bottom: 0; /* overrides padding for h2 in pse.css */
}

.serviceArea div.receipt {
    padding: 1em;
    margin-bottom: 1.2em;
    overflow: hidden;
    width: 54.1em;
}

.serviceArea div.receipt .orderNumber {
/* margin-left:1em;*/
    font-weight: bold;
    font-size: 1.4em;
    margin-bottom: 1.2em;
}

.serviceArea div.receipt table {
    clear: both;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
}

.serviceArea div.receipt th,
    .serviceArea div.receipt td {
    line-height: 1.3em;
}

.serviceArea div.receipt dl {
    margin-bottom: 0.3em;
    height: auto;
    padding-top: 0.5em; /*padding-left: 1.2em;*/
}

.serviceArea div.receipt dt {
    width: 18.8em;
    font-weight: bold;
}

.serviceArea div.receipt dd {
    margin-top: -1.3em;
    margin-left: 19.8em;
    padding-bottom: 1em;
}

/* Kvitto - slut */

/*###############
Tabeller och definitionslistor- slut
#################*/

/* Klass till element att klicka på som då antingen visar eller gömmer fält som lagts i en div. */
.hideIt {
    display: inline;
}

/* Klass för div som visas eller göms via klick på element, se .hideIt ovan.
   Bör skrivas så divs med denna klass ej tar plats. */
.hideMe {
    border: solid red 1px;
}