/*------------------------------------*\
    FONT FACE
\*------------------------------------*/

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("/assets/fonts/OpenSans-Light.ttf");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("/assets/fonts/OpenSans-Regular.ttf");
}

/*------------------------------------*\
    RESET
\*------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0b1 | 201101 
    NOTE:WORK IN PROGRESS
    USE WITH CAUTION AND TEST WITH ABANDON */

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style:none;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}





/*------------------------------------*\
    $SHARED
\*------------------------------------*/



body {
    
    font-family: "Open Sans", Verdana, Helvetica, Sans-Serif;
    color: #232323;
    background-color: #e1e1e1;
}

h1, h2, h3, h4, h5, h6, strong {
    color: #0072bc;
    margin-bottom:1em
}
h1 {
    font-size: 2.2em
}
h2 {
    font-size:1.8em
}
h3 {
    font-size:1.3em
}
h4 {
    font-size:1.2em;
    margin-bottom:auto;
}

p {
    line-height:1.5em;
    margin-bottom:1.2em
}

strong {
        font-weight:600;
}

input, textarea, select {
    font-family: "Open Sans", Verdana, Helvetica, Sans-Serif;
}

fieldset {
    border:1px solid #c2c2c2;
    margin-bottom:20px;
    padding:20px 0
}

.clear {
    line-height:0;
    clear:both;
}

.left {
    float:left;
}
.right {
    float:right;
}

.wrapper {
    width:1000px;
    margin:0 auto
}


table {
    width: 100%;
    margin-bottom:20px
}
th {
    background-color: #0072bc;
    color: #fff;
}
th, td {
    padding:6px 2px 6px 3px;
    text-align:left;
    line-height:1.3em;
    
    vertical-align:top;
}
 .table-alternate-row, tr:nth-child(2n) {
    background-color: #efefef;    
}

 .table-row-required{
    background-color: #ef8888;    
}

tr:last-of-type {
    border-bottom:1px solid #c2c2c2
}

.text-left {
    text-align:left;
    width:380px
}

/*------------------------------------*\
    $MAIN
\*------------------------------------*/


.header{
    background-color:#0072bc;
    padding:10px 9px;
    color:#f4f4f4;
    display:block;
    font-size:1.6em;
}
.header
    .logo{
        padding-left:70px;
        height:60px;
        background:url(/assets/img/portal-logo.png) no-repeat 0px center;
        text-decoration:none;
        display:block;
        color:#f4f4f4;
        font-weight:200;
}

.header
    .logo
        .logo-title{
    font-size:1.6em;
    line-height: 0.75em;
}
.header
    .logo
        .logo-strapline{
    font-size:0.65em;
    line-height: 0.95em;
}

.header
    .strapline{
        font-size:0.6em;
        padding-left:10px
}




.footer {
    line-height:1;
    background-color:#0072bc;
    padding:10px 9px;
    color:#f4f4f4;
    display:block;
    font-size:0.7em;
    margin:20px 0
}
.footer a {
    color:#fff
}
.footer a:hover {
    color:#85c0e6
}


#bc-navigation{
    background-color:#c2c2c2;
    
}

.navigation{
    padding:10px;
    
}

.nav{
    /*padding:10px 0;*/
    overflow:hidden;
    list-style:none;
    border-top:1px solid #c2c2c2;
    border-bottom:1px solid #c2c2c2;
}
.nav li {
    /*display:inline-block;*/
    /*padding:8px 12px 8px 4px;*/
    float:left;
    font-size:0.75em;
}
.nav li span {
  color: white;
  text-decoration: none; 
  padding: 10px 0 10px 35px;
  background: brown; /* fallback color */
  background: hsla(34,85%,35%,1); 
  position: relative; 
  display: block;
  float: left;
}

.nav li span::after { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
  border-bottom: 50px solid transparent;
  border-left: 30px solid hsla(34,85%,35%,1);
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  left: 100%;
  z-index: 2; 
}
.nav li span::before { 
  content: " "; 
  display: block; 
  width: 0; 
  height: 0;
  border-top: 50px solid transparent;       
  border-bottom: 50px solid transparent;
  border-left: 30px solid white;
  position: absolute;
  top: 50%;
  margin-top: -50px; 
  margin-left: 1px;
  left: 100%;
  z-index: 1; 
}
.nav li:first-child span {
  padding-left: 10px;
}

.nav li:last-child span {
  background: transparent !important;
  pointer-events: none;
  cursor: default;
}
.nav li:last-child span::after { 
  border:0; 

}

.nav .completed span{
    background: #40ab30;
    color:#efefef;
}
.nav .completed span::after{
    border-left: 30px solid #40ab30; 
}

.nav .current span{
    background: #ff9933;
    color:#333;
}
.nav .current span::after{
    border-left: 30px solid #ff9933;
}

.nav .todo span{
    background: #656565;
    color:#efefef;
}
.nav .todo span::after{
    border-left: 30px solid #656565;
}



.assessment-in-progress{
    background-position:0px 0px;
}
.assessment-not-started{
    background-position: -48px -24px;
}
.assessment-completed{
    background-position: -24px -24px;
}
.no-icon{
    background-position: -256px -256px;
}

.nav a {
    color:#0072bc
}




.main-area {
    margin-top:20px;
    border:1px solid #c2c2c2;
    background-color:#fff;
}

.data-wrapper {
    /*width:778px;
    float:right;*/
    float:left;
    background-color:#fff;
}
.data-wrapper-wide {
    width:998px;
}

.main-service-logo-area {

}

.main-service-logo-area img {
    width: 200px;
    height: 50px;
    outline:0;
    border:0
}

.description-area{
    padding:20px;
    background-color:#fff;
    /*width:738px;*/
}

.data-entry-area {
    
    padding:20px;
    background-color:#fff;
    /*width:738px;*/
}
.data-entry-area-wide{
    width:958px;
}

.input-button {
    
    padding:10px 16px;
    font-size:1.1em;
    border:0;
    cursor:pointer;
    margin:0
}
.input-button-next {
    background-color:#598527;
    color:#fff;
}

.input-button-loading {
    background: #333 url(/assets/img/loading.gif) no-repeat left center;
    padding-left:36px;
    color:#fff;
}

.input-button-clear {
    background-color:#999999;
    color:#333;
}

.data-entry-area 
    label {
    display:inline-block;
    width:240px; 
    text-align:right;
    margin-right:20px
}

.data-entry-area 
    .input-textbox {
        background-color:#666;
        padding:8px;
        color:#fff;
        border:0;
        width:250px;
        margin-bottom:10px
}

.self-referral-input-textbox {
        background-color:#666;
        padding:8px;
        color:#fff;
        border:0;
        width:38em;
        margin-bottom:1px
}

.self-referral-input-textbox-half {
        background-color:#666;
        padding:8px;
        color:#fff;
        border:0;
        width:16em;
        margin-bottom:1px
}

.service-logo{
    margin-bottom:20px   
}

.caveat {
    border-top:1px solid #c2c2c2;
    display:block;
    margin:20px 0 0 0;
    padding:16px 0 0 0;
    font-size:0.8em;
    color:#999;
}
.no-caveat {
    border-top:1px solid #c2c2c2;
    padding-top:40px;
    margin-top:40px;
    display:block
}

.psuedo-table-header {
    background-color:#0072bc;
    color:#fff;
    padding: 10px 1%;
    
    line-height:1.3em;
    font-size:0.9em
}

.list-of-sliders {
    border-top: 1px solid #c2c2c2;
    margin-top:16px
}

    .list-of-sliders 
        .slider-row {
        border-bottom: 1px solid #c2c2c2;
        padding: 12px 4px;
        float:left;
        margin-bottom: 10px;
        width:100%

    }
    .slider-row span {
        display:block
    }
    .slider-row span:first-child {
        padding-right:2%
    }
    .slider-row div {
        margin-right: 16px;
    }
    .slider-row label {
        display:inline;
        width:auto;
        text-align:left;
        margin:0
    }

.page-data .RadNotification_Metro {
    border:3px solid #25a0da;
}
.RadMenu_Notification {
	color: white;
    	background-color:white;
	font:normal 12px "Open Sans", Verdana, Helvetica, Sans-Serif;
	line-height:22px;
    border-color:red
    }

    .RadMenu_Notification .rnContentWrapper
    {
        color: black;
        background-color: white;
        font: normal 14px "Open Sans", Verdana, Helvetica, Sans-Serif;
        line-height: normal        
    }
    
     .RadMenu_Notification .rnContent
    {
        color: black;
        background-color: white;
        font: normal 14px "Open Sans", Verdana, Helvetica, Sans-Serif;
        line-height: normal;        
        }  

     .SelfReferralGrid {
        background-color:white;
        color:black;
        padding: 10px 1%;    
        line-height:1.3em;
        font-size:0.9em;
        border-style:solid; 
        width: 100%;
        margin-bottom:20px;    
        }


.data-entry-area .assessment-table tr td input[type=radio] {
    float:right;
}
.data-entry-area .assessment-table tr td label {
    width: 91%;
    margin-right:0;
    margin-bottom: 2px;
}

.progress-text{
    color:#0072bc;
    font-size:1.6em;
    font-weight:600;
}



     /* IE Specifics*/

     .lt-ie9 .table-alternate-row td {
    background-color: #efefef;    
}


/* Telerik specifics */
.RadPicker .rcTable{}
	.RadPicker .rcTable tr:last-of-type{
		border:0;
	}
	.RadPicker .rcTable .rcInputCell .riSingle .riTextBox{
		border:0;
		background-color:#666;
        color:#fff;
		padding:0;
	}
    .RadPicker a.rcCalPopup {
        background-position: 0 -50px;
    }


/* -------------------------------- 

Basic Style

-------------------------------- */
.cd-breadcrumb, .cd-multi-steps {
  width: 90%;
  max-width: 768px;
  padding: 0.5em 1em;
  margin: 1em auto;
  background-color: #dcdee0;
  border-radius: .25em;
}
.cd-breadcrumb::after, .cd-multi-steps::after {
  clear: both;
  content: "";
  display: table;
}
.cd-breadcrumb li, .cd-multi-steps li {
  display: inline-block;
  float: left;
  margin: 0.5em 0;
}
.cd-breadcrumb li::after, .cd-multi-steps li::after {
  /* this is the separator between items */
  display: inline-block;
  content: '\00bb';
  margin: 0 .6em;
  color: #959fa5;
}
.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
  /* hide separator after the last item */
  display: none;
}
.cd-breadcrumb li > *, .cd-multi-steps li > * {
  /* single step */
  display: inline-block;
  font-size: 0.85em;
  color: #fff;
  background-color: #2c3f4c;
}
.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
  /* selected step */
  color: #96c03d;
}
.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
  /* steps already visited */
  color: #96c03d;
}

@media only screen and (min-width: 768px) {
  .cd-multi-steps {
    /* reset style */
    background-color: transparent;
    padding: 0;
    text-align: center;
  }

  .cd-multi-steps li {
    position: relative;
    float: none;
    margin: 0.4em 20px 0.4em 0;
  }
  .cd-multi-steps li:last-of-type {
    margin-right: 0;
  }
  .cd-multi-steps li::after {
    /* this is the line connecting 2 adjacent items */
    position: absolute;
    content: '';
    height: 4px;
    background: #2c3f4c;
    /* reset style */
    margin: 0;
  }
  .cd-multi-steps li.completed::after {
    background-color: #96c03d;
  }
  .cd-multi-steps li > *, .cd-multi-steps li.current > * {
    position: relative;
    color: #2c3f4c;
  }

  .cd-multi-steps.custom-separator li::after {
    /* reset style */
    height: 4px;
    background: #2c3f4c;
  }

  .cd-multi-steps.text-center li::after {
    width: 100%;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%) translateX(-1px);
    -moz-transform: translateY(-50%) translateX(-1px);
    -ms-transform: translateY(-50%) translateX(-1px);
    -o-transform: translateY(-50%) translateX(-1px);
    transform: translateY(-50%) translateX(-1px);
  }
  .cd-multi-steps.text-center li > * {
    z-index: 1;
    padding: .6em 1em;
    border-radius: .25em;
    background-color: #2c3f4c;
    color:#fff;
  }
  .no-touch .cd-multi-steps.text-center a:hover {
    background-color: #2c3f4c;
  }
  .cd-multi-steps.text-center li.current > *{
      color: #2c3f4c;
      background-color : #ff9933;
  }
  .cd-multi-steps.text-center li.completed > * {
    color: #ffffff;
    background-color: #96c03d;
  }
  .cd-multi-steps.text-center.custom-icons li.completed a::before {
    /* change the custom icon for the visited item - check icon */
    background-position: 0 -60px;
  }

  .cd-multi-steps.text-top li, .cd-multi-steps.text-bottom li {
    width: 80px;
    text-align: center;
  }
  .cd-multi-steps.text-top li::after, .cd-multi-steps.text-bottom li::after {
    /* this is the line connecting 2 adjacent items */
    position: absolute;
    left: 50%;
    /* 40px is the <li> right margin value */
    width: calc(100% + 40px);
  }
  .cd-multi-steps.text-top li > *::before, .cd-multi-steps.text-bottom li > *::before {
    /* this is the spot indicator */
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #edeff0;
  }
  .cd-multi-steps.text-top li.completed > *::before,
  .cd-multi-steps.text-top li.current > *::before, .cd-multi-steps.text-bottom li.completed > *::before,
  .cd-multi-steps.text-bottom li.current > *::before {
    background-color: #96c03d;
  }
  .no-touch .cd-multi-steps.text-top a:hover, .no-touch .cd-multi-steps.text-bottom a:hover {
    color: #96c03d;
  }
  .no-touch .cd-multi-steps.text-top a:hover::before, .no-touch .cd-multi-steps.text-bottom a:hover::before {
    box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
  }

  .cd-multi-steps.text-top li::after {
    /* this is the line connecting 2 adjacent items */
    bottom: 4px;
  }
  .cd-multi-steps.text-top li > * {
    padding-bottom: 20px;
  }
  .cd-multi-steps.text-top li > *::before {
    /* this is the spot indicator */
    bottom: 0;
  }

  .cd-multi-steps.text-bottom li::after {
    /* this is the line connecting 2 adjacent items */
    top: 3px;
  }
  .cd-multi-steps.text-bottom li > * {
    padding-top: 20px;
  }
  .cd-multi-steps.text-bottom li > *::before {
    /* this is the spot indicator */
    top: 0;
  }
}