body {
    font-family: "Myriad Pro Light", "Myriad Pro", "Myriad", "Gill Sans MT", "Gill Sans", Arial, Verdana, sans-serif;
    font-size: 16pt;
    background-color: #182035;
    background-image: url('/images/chroma/portal_new.jpg');
    background-position: 0px 160px;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100%;
}

input, textarea, select, option {
    font-size: 16pt;
    font-family: "Myriad Pro Light", "Myriad Pro", "Myriad", "Gill Sans MT", "Gill Sans", Arial, Verdana, sans-serif;
}

form {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: normal;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
    margin-top: 0;
}

h1 {
    font-size: 1.7em;
}

h2 {
    font-size: 1.7em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.0em;
}

h5 {
    font-size: 0.9em;
}

h2 + p {
    margin-top: 0;
}

p {
    margin: 1em 0 0.5em 0;
}

dt {
    font-weight: bold;
    color: #808080;
    margin-top: 1em;
}

dt:first-child {
    margin-top: 0em;
}

.clear {
    clear: both;
    text-indent: -9999px;
}


/**
 * Rules
 */

hr {
    height: 0px;
    border-width: 1px 0 0 0;
    border-style: dotted;
    border-color: #bbbbbb;
    margin-left: auto;
    text-align: left;
}

/**
 * Links
 */

a, a:link, a:visited {
    text-decoration: underline;
}

a:hover {
    color: #f00;
    text-decoration: underline;
}

img {
    border: 0;
}


/* Layout
=========================================================================================== */

* {
    margin: 0;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
}

#container_outer {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -212px; /* must be negative of .push height */
}

#container_inner {
    width: 980px;
    margin: 0 auto;
    top: 0;
}

#container_topburst {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background-color: #fff;
    z-index: -1;
}

#container_top {
    width: 980px;
    height: 160px;
    background-color: #fff;
    background-position: center right;
    background-repeat: no-repeat;
}

#logo {
    position: relative;
    top: 29px;
    left: 0;
    width: 220px;
    height: 96px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: left center;
}

#content_top {
    padding: 40px 22px 20px 22px;
    background-color: #fff;
}

#content_main {
    width: 980px;
    padding: 0;
}

/* not currently used but matches other "content_..." styling so leaving for now
#content_bottom {
    margin: 0 auto;
    width: 980px;
    height: 80px;
    padding: 20px 0 5px 0;
    border-top: none;
}*/

#container_contenttop {
    width: 980px;
    padding: 0;
    margin: 60px 0 38px 0;
}

.default #guidePage {
    margin-top: -60px;
}

.default #guidePage h2 {
    font-size: 1.3em;
}

#container_content {
    width: 980px;
    padding-bottom: 60px;
}

/* not currently used but leaving in case we need to bring footer back
#container_footer, .push {
    height: 210px; .push must be the same height as .footer
}

#container_footer {
    width: 100%;
    margin: auto;
    border-top: #999 1px solid !important;
    background: url('/images/chroma/footer-bg.gif') repeat-x !important;
}

#container_footer a {
    cursor: hand;
    float: left;
    height: 42px;
    padding: 10px;
    margin-left: 100px;
    outline: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-position: 10px;
    background-repeat: no-repeat;
}

#container_footer a:hover {
    background-color: #3c3c3c;
}

#container_footer a.footer-home {
    width: 103px;
    margin-left: 0;
    background-image: url('/images/chroma/footer-home.gif');
}

#container_footer a.footer-guide {
    width: 131px;
    background-image: url('/images/chroma/footer-guide.gif');
}

#container_footer a.footer-search {
    width: 180px;
    background-image: url('/images/chroma/footer-search.gif');
}

#container_footer a.footer-contact {
    width: 180px;
    background-image: url('/images/chroma/footer-contact.gif');
}*/


/* Background
=========================================================================================== */


.brandcolor,
.signpost,
.fb-el-title-req,
.fb-el-title-nonreq,
a,
.question,
dt,
h1, h2, h3, h4, h5 {
    color: #182035;
}

.monday #container_top {
    background-image: url('/images/chroma/em_logo_leaf_sm.png');
    background-size: 100px;
}


/* Signposts
=========================================================================================== */

.signpost, .fb-el-title-req, .fb-el-title-nonreq {
    float: left;
    font-size: 1em;
    padding: 12px 15px;
    width: 285px;
    margin: 0 24px 0 0;
    text-align: left;
    background: url('/images/chroma/label-bg.gif') top right no-repeat !important;
}


.boxedsubmit {
    float: right;
    text-align: left;
    padding: 0 0 0 20px;
    width: 612px;
    border: #fff 4px solid;
    background: #fff;
}

.boxedsubmit input {
    float: right;
}

.boxedsubmit h3 {
    font-size: 1.2em;
    font-weight: normal !important;
}

.boxedsubmit p {
    color: #4a4a4a;
    margin-top: 5px;
    font-size: 12pt;
}

.boxedsubmit li {
    color: #4a4a4a;
    margin-top: 5px;
    font-size: 12pt;
}

/* Forms
=========================================================================================== */

.fb-el-field {
    float: left;
    width: 380px;
    margin-bottom: 10px;
}

.fb-el-title-req .description, .fb-el-title-nonreq .description {
    font-size: 0.8em;
    padding-left: 1em;
    color: #999;
}

.validation-message {
    clear: left;
    margin-left: 338px;
    padding-bottom: 10px;
}

.validation-message.invalid span {
    background: #de0000;
    padding: 8px 12px;
    color: #fff !important;
}

.fb-el-field input,
.fb-el-field select,
.fb-el-field textarea {
    border: 0;
    -webkit-border-radius: 6px;
    box-shadow: 0 0 6px #aaa inset;
    -moz-border-radius: 6px;
    border-radius: 6px;
    color: #555;
    padding: 12px 14px;
    width: 402px;
}

.fb-el-field select {
    -webkit-appearance: none;
    padding: 12px 9px;
    width: 430px;
}

.fb-el-field textarea {
    height: 150px;
}

.fb-el-field input[type=radio] {
    width: auto !important;
    box-shadow: none;
    border: 0px;
}

.fb-el-field label {
    padding-left: 1ex;
    line-height: 30px;
}

.hint-invalid input {
    background: #fcc url('/images/form/cross.png') center right no-repeat;
}

.hint-valid input {
    background: #dfd url('/images/form/tick.png') center right no-repeat;
}

		
.formgroup {
    float: right;
    width: 600px;
    background: #fff;
    padding: 0px 20px 10px 20px;
    margin-bottom: 20px;
    text-align: left;
    color: #4a4a4a;
}

.formgroup .fb-el-title-req, .formgroup .fb-el-title-nonreq {
    padding-left: 0 !important;
    width: auto;
}

.formgroup .validation-message {
    clear: left;
    margin: 0;
    padding-top: 10px;
    padding-right: 3px;
    float: right;
}

.formgroup .fb-el-field {
    width: 100%;
    padding-bottom: 15px;
    border-bottom: #d6d6d6 1px solid;
}

.formgroup input, .formgroup select {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    color: #555;
    border: 1px solid #aaa;
    box-shadow: 0 0 6px #aaa inset;
}

.formgroup input[type=text] {
    -webkit-appearance: none;
    width: 570px;
}



.formgroup select {
    width: 600px;
    background: white;
}

/* Contact Page
=========================================================================================== */

#userAddress, #userContact {
    float: right;
    width: 600px;
    background: #fff;
    padding: 0 20px 10px 20px;
    margin-bottom: 20px;
    text-align: left;
}

.userDetails {
    font-size: 0.8em;
}

.userDetails h2 {
    font-size: 1.3em;
}

#userAddress p, #userContact p {
    color: #4a4a4a;
}

#userAddress p.details {
    padding-bottom: 18px;
    border-bottom: #d6d6d6 1px solid;
    background: url('/images/chroma/details-icon.gif') right center no-repeat !important;
}

#userAddress p.address {
    background: url('/images/chroma/address-icon.gif') right center no-repeat !important;
}

#userContact .userDetails {
    float: left;
    width: 100%;
    padding: 14px 0;
    border-bottom: #d6d6d6 1px solid;
    color: #4a4a4a;
    background: url('/images/chroma/contact-icon.gif') right center no-repeat !important;
}

#userContact {
    padding-bottom: 30px;
}

#userContact p.userIntro {
    margin-bottom: 0 !important;
    padding-bottom: 18px;
    border-bottom: #d6d6d6 1px solid;
}

#userContact .userDetails td.userIcon {
    width: 80px;
    background: url('/images/chroma/user-icon.gif') no-repeat !important;
}




/* Landing Page
  =========================================================================================== */

.landingPanel {
    margin-bottom: 40px;
    background: none;
}

.landingTab {
    float: right;
    width: 615px;
    text-align: left;
    padding: 1px 5px 1px 10px;
    border: #fff 5px solid;
    margin-bottom: 12px;
    background: #fff url('/images/chroma/landing-button.gif') right no-repeat !important;
}

.landingTab p {
    float: left;
    margin: 8px 0px 0 0 !important;
    padding: 0 100px 0 0 !important;
    color: #000;
    width: auto;
}

.landingTab a {
    /*float:right; width:46px; */
    display: block;
    height: 40px;
    outline: 0;
}

.landingTab table a {
    display: inline;
    height: auto;
}

/* User Guide
  =========================================================================================== */

#guidePage {
    padding: 25px;
    margin-bottom: 50px;
    background: #fff;
}

#guidePage h2, #guidePage ul, #guidePage ol {
    margin: 10px 0;
}

#guidePage h2.top {
    margin: 0 0 -10px 0;
}

#guidePage p {
    color: #4a4a4a;
    margin-top: 0;
}

#guidePage ul li, #guidePage ol li {
    color: #4a4a4a;
    padding-bottom: 4px;
}

#guidePage ul li a, #guidePage ol li a {
    text-decoration: underline;
}

#guidePage ul li a:hover, #guidePage ol li a:hover {
    color: #3B91DC;
    text-decoration: none;
}

#guidePage dt {
    font-weight: normal;
    margin-top: 12px;
}

#guidePage dd {
    color: #4a4a4a;
    margin-top: 0;
}

#guidePage .question {
    font-weight: normal;
    margin: 20px 0 4px 0;
}


/* Login Page
  =========================================================================================== */

#id-div-submitbutton {
    float: right;
    position: relative;
}

#id-div-submitbutton .content {
    position: relative;
    color: #000 !important;
    z-index: 100;
    padding: 0;
}

#id-div-submitbutton .content input {
    padding: 52px 40px;
}

#id-div-submitbutton .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;
}

#id-div-submitbutton:hover .background {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: .9;
}

/* general button styling - previously used by Optician Search
.button {
    background-color: #ccc;
    color: #000;
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid #aaa;
    border-radius: 7px;
    text-decoration: none !important;
}

.button:hover {
    background-color: #000;
    color: #fff;
}*/

.entitlement-description {
    background-color: white;
    padding: 25px;
    margin-bottom: 25px;
}

.entitlement-description p {
    color: #555;
}

.entitlement-description ol {
    list-style: lower-alpha;
    padding-left: 1em;
}

.entitlement-description li {
    color: #555;
    margin-top: 0.50em;
    line-height: 1.2;
}

.entitlement-description em {
    color: #c00;
}

.entitlement-description h5 {
    font-size: 0.8em;
    color: #900e00;
}

.landingPanel h3.signpost {
    color: #a00;
    font-weight: bold;
}




.landingTab em {
    color: #777;
    font-size: 0.8em;
    font-style: italic;
}

#practice-container label p {
    display: inline;
}

.label {
    padding: .2em .6em .3em;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    border-radius: .25em;
}

.label.label-warning {
    background-color: #e77300;
}

.btn-success {
    border-radius: 0;
    border: 3px solid #308719;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: #308719;
    padding: 10px 18px;
    transition: all ease-in-out 0.3s;
    position: relative;
    font-weight: bold;
}

.btn-default {
    border-radius: 0;
    border: 3px solid #717272;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: #717272;
    padding: 10px 18px;
    transition: all ease-in-out 0.3s;
    position: relative;
    font-weight: bold;
}

.btn-link {
    color: #717272;
    font-weight: normal;
    border-radius: 0;
    font-size: 0.8em;
}

.btn-link,
.btn-link:active,
.btn-link.active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    border-top-width: 1px;
    border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
    color: #2b9aa4;
    text-decoration: underline;
    background-color: transparent;
}