/*
Backward compatibility notes:
 -moz-border-radius    = Firefox up to version 3.6
 -webkit-border-radius = Safari, Chrome (before WebKit version 533)

 The :nth-child pseudo-class does not work with IE8, so even/odd classes
 must be applied manually to separate rows of a table.
*/

body {
    background-color: rgb(102, 119, 204);
    font-family: Verdana;
    padding: 0px;
    margin: 0;
    overflow: hidden;
}
form {
    margin: 0;
    padding: 0;
}
h3 { display: inline-block; margin: 0px; padding: 0px; }

#mainDiv {
    background-color: rgb(179, 191, 255);
    border:  1px solid rgb(000, 000, 090);

    overflow: auto;
    display: block;
    float: none;
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    top: 5px;
    z-index: 1;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

span.button {
    display: block;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #67C; /* very dark blue */
    background-color: rgb(225, 230, 255); /* Same as div.inputLayout */
    padding: 0px 6px;
    font-size: 11px;
    color: black;
    text-decoration: none;
    cursor: pointer;
    width: 150px;
    margin: 5px auto;
    text-align: center;
}

div.dataContainer {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border: 1px solid #67C; /* very dark blue */
    min-width: 600px;
    width: 90%; /* The data may be used with or without frames. We should not use a flat pixel value. */
    margin: 5px auto;
    padding: 0px;
}
div.dataContainerHeader {
    border-top-left-radius:          inherit;
    border-top-right-radius:         inherit;
    -moz-border-radius-topleft:      inherit;
    -moz-border-radius-topright:     inherit;
    -webkit-border-top-left-radius:  inherit;
    -webkit-border-top-right-radius: inherit;
}
div.dataContainerContent {
    padding: 3px;
}
table.dataContainerContent {
    border-collapse: collapse;
    width: 100%; /* The data may be used with or without frames. We should not use a flat pixel value. */
    margin: 0px;
    padding: 0px;
}


table.dataContainerContent caption:first-child,
table.dataContainerContent *:first-child tr:first-child > *:first-child {
    -moz-border-radius-topleft:6px;
    -webkit-border-top-left-radius:6px;
    border-top-left-radius:6px;
}
table.dataContainerContent caption:first-child,
table.dataContainerContent *:first-child tr:first-child > *:last-child {
    -moz-border-radius-topright:6px;
    -webkit-border-top-right-radius:6px;
    border-top-right-radius:6px;
}
table.dataContainerContent tbody:last-child tr:last-child > *:first-child {
    -moz-border-radius-bottomleft:6px;
    -webkit-border-bottom-left-radius:6px;
    border-bottom-left-radius:6px;
}
table.dataContainerContent tbody:last-child tr:last-child > *:last-child {
    -moz-border-radius-bottomright:6px;
    -webkit-border-bottom-right-radius:6px;
    border-bottom-right-radius:6px;
}

table.view tr {
    border-bottom: 1px solid rgb(230, 230, 230);
}
table.dataContainerContent tbody:last-child tr:last-child th,
table.dataContainerContent tbody:last-child tr:last-child td {
    border-bottom: hidden;
}
table.dataContainerContent th,
table.dataContainerContent td {
    font-size: 11px ;
    text-align: left;
    padding: 1px 5px;
    font-weight: normal;
    vertical-align: top;
}
table.view th {
    background-color: rgb(250, 248, 198);
    border-right: 1px solid rgb(200, 200, 200);
}
table.view td {
    background-color: white;
    border-right: 1px solid rgb(200, 200, 200);
}
table.view th:last-child td:last-child {
    border-right: 0px solid rgb(200, 200, 200);
}
table.view tr:nth-child(odd) td {
    background-color: white;
}
table.view tr:nth-child(even) td {
    background-color: rgb(245, 245, 245);
}

table.edit th,
table.edit td {
    background-color: rgb(225, 230, 255);
}

table.dataContainerContent tbody th {
    width: 150px;
}

div.dataContainerHeader,
table.dataContainerContent thead th,
table.dataContainerContent > caption {
    vertical-align: top;
    text-align: center;
    border-bottom: 1px solid #67C;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 0px;
    text-align: center;
}

div.dataContainer input,
div.dataContainer select {
    font-size: inherit;
}
div.dataContainer textarea {
    resize: vertical;
}
.floatLeft  {float:left;}
.floatRight {float:right;}
.floatClear {clear:both;}
.buttonRow  {width: 400px;
             margin: 0px auto;}

.money      {text-align:right;}
div.errorMsg     {text-align:center;
                  padding-top:1em;
                  font-weight:bold;}
div.errorMsg img {padding-left:1em;}

/* These are meant to be used along with the data containers. */
.mtddLayout,
.inputLayout,
.viewLayout,
.errorLayout {
    color: rgb(000, 000, 090);
    font-size: 12px;
}

.mtddLayout {
    background-color: white;
}
.inputLayout {
    background-color: rgb(225, 230, 255);
}
.viewLayout {
    background-color: rgb(250, 248, 198);
}
.errorLayout {
    background-color: #FCC; /* light red */
}


/* =========================================================================
   +                                                                       +
   +    The CSS attributes located below this point are associated only    +
   +    with the Benefit Enrollment webpage. Due to the IE-only model      +
   +    previously used, images of rounded corners were still employed.    +
   +    These methods do not work the same across all browsers however.    +
   +                                                                       +
   +    Once the Benefit Enrollment webpages have become browser neutral,  +
   +    the lines in the section below here can be erased.                 +
   +                                                                       +
   ========================================================================= */

/* ------ MAIN BORDER ------- */

#topBorder {
    background-color: rgb(102, 119, 204);
    padding: 0;
    margin: 0;
    line-height: 0px;
    display: block;
    float: none;
    position: absolute;
    top: 0px;
    left: 5px;
    right: 5px;
    z-index: 2;
}
#mainContent {
    background-color: rgb(179, 191, 255);
    border-left:  1px solid rgb(000, 000, 090);
    border-right: 1px solid rgb(000, 000, 090);
    overflow: auto;
    display: block;
    float: none;
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    top: 5px;
    z-index: 1;
}
#bottomBorder {
    background-color: rgb(102, 119, 204);
    padding: 0;
    margin: 0;
    line-height: 0px;
    display: block;
    float: none;
    position: absolute;
    bottom: 0px;
    left: 5px;
    right: 5px;
    z-index: 2;
}
span.mainTopLeft,
span.mainTopRight,
span.mainBottomLeft,
span.mainBottomRight {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    background-repeat: no-repeat;
    display: inline-block;
}

span.mainTopLeft {
    position: relative;
    top: 4px;
    left: 0px;
    height:5px;
    width: 100%;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F5244455220544C4F.gif');
}
span.mainTopRight {
    position: absolute;
    top: 0px;
    right: 0px;
    height:5px;
    width: 5px;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F524445522054524F.gif');
}
span.mainBottom {
    border-top: 1px solid rgb(000, 000, 090);
    display: inline-block;
    width: 100%;
}
span.mainTop {
    border-bottom: 1px solid rgb(000, 000, 090);
    display: inline-block;
    width: 100%;
}
span.mainBottomLeft {
    position: relative;
    top: -5px;
    left: 0px;
    height:5px;
    width: 100%;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F5244455220424C4F.gif');
}
span.mainBottomRight {
    position: absolute;
    top: 0px;
    right: 0px;
    height:5px;
    width: 5px;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F524445522042524F.gif');
}



/* ---------- Generic Container ---------- */

div.containerBox {
    margin: 10px auto;
    width: 90%;
    padding: 0;
    float: none;
    clear: both;
}

div.containerContent {
    border-left: 1px solid #67C; /* very dark blue */
    border-right: 1px solid #67C; /* very dark blue */
    padding: 3px;
}

div.header {
    text-align: center;
    border-bottom: 1px solid #67C;
}

/* ---------- Generic Borders ---------- */

div.containerTopBorder {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 0px;
}
span.containerTop {
    line-height: 1px;
    border-bottom: 1px solid #67C;
    display: inline-block;
    width: 100%;
}

span.containerTopLeft,
span.containerTopRight,
span.containerBottomLeft,
span.containerBottomRight {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    background-repeat: no-repeat;
    display: inline-block;
}
span.containerTopLeft {
    position: relative;
    top: 4px;
    left: 0px;
    height: 5px;
    width: 100%;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F5244455220544C49.gif');
}
span.containerTopRight {
    position: absolute;
    top: 0px;
    right: 0px;
    height:5px;
    width: 5px;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F5244455220545249.gif');
}

div.containerBottomBorder {
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 0px;
}
span.containerBottom {
    border-top: 1px solid #67C;
    display: inline-block;
    width: 100%;
}
span.containerBottomLeft {
    position: relative;
    top: -5px;
    left: 0px;
    height:5px;
    width: 100%;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F5244455220424C49.gif');
}
span.containerBottomRight {
    position: absolute;
    top: 0px;
    right: 0px;
    height:5px;
    width: 5px;
    background-image: url('https://portal.sbamh.org/mig/sua/PUBLIC/535541/IMAGES/57454220424F5244455220425249.gif');
}

table.nb {
    width: 100%;
}

/* ----- Button -----*/
table.button {
    text-align: center;
    padding: 0px;
    margin: 0px;
    *border-collapse: collapse;
    border-spacing: 0px;
    display: inline;
}
table.button td {
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}

td.buttonCenter {
    font-size: 11px;
    height:15px;
    white-space:nowrap;
    text-align: center;

    border-top: 1px solid rgb(102, 119, 204);
    border-bottom: 1px solid rgb(102, 119, 204);

    background-color: rgb(225, 230, 255);
    color: rgb(000, 000, 090);
}

/* These three divs are used to guarantee the centering
   of their contents. Example of use:
   <div class='centerOuterwrap'>
    <div class='centerContainer1'>
     <div class='centerContainer2'>
     [Content goes in here and becomes centered on the screen]
     </div>
    </div>
   </div>
*/
div.centerOuterwrap {
    position:relative;
    overflow:hidden;
    padding: 0px;
    margin: 0px;
    display: inline;
    clear: both;
}
div.centerContainer1 {
    float:left;
    position:relative;
    left:50%;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}
div.centerContainer2 {
    float:left;
    position:relative;
    left:-50%;
    padding: 0px;
    margin: 0px;
}


/* ---------------- Meditor XML Styles ---------------- */
td.mtdd {
    padding: 0px 6px;
    border-right: 1px solid black;
    border-left: 1px solid black;
}
td.mtdd_btr {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    padding: 0px 6px;
}
table.mtdd {
    border: 1px solid black;
    border-collapse:collapse;
}
table.mtdd1 { width: 100%; }