/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jun 20, 2014, 11:58:18 AM
    Author     : richd
*/

/* apply a natural box layout model to all elements */
/* remember: margins are still outside */
*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

* { margin: 0; padding: 0}
html {
    background-color: #333;    
    font-family: sans-serif;
    font-size: 13px;
}
h1 { font-size: 26px; text-transform: uppercase;}
h2 { font-size: 16px; text-transform: uppercase; padding-left: 25px;}
h3 { font-size: 14px; text-transform: uppercase; padding-left: 25px; color: #82BC00; padding-top: 25px; }
h4 { font-size: 19px; text-transform: uppercase; text-align: center; }
h5 { font-size: 22px; text-align: left; padding-bottom: 10px}

hr {
    display: block;
    height: 4px;
    border: 0;
    border-top: 3px solid #82BC00;
    margin: 1em 0;
    padding: 0;
}
button { min-width: 75px; height: 35px;}
.btn30pct { width: 30%; min-width: 125px; margin: auto; display: block; margin-top: 10px; }
p { padding-left: 25px; padding-right: 75px; text-align: justify; padding-top: 25px;  } /* if you change pad-left, change .pL25 too */
input { padding: 10px 6px 10px 6px; 
        color: #333;
        border: solid 1px #e0e0e0;
        margin-bottom: 1px;
        width: 100%;
}
input.error {
    color: #abc !important;
    font-size: 13px;
}
select { padding: 6px; color: #333; border: none;}
option { color: #333; }
option:hover {
    background-color:yellow;
}
textarea { padding: 6px; color: #333; 
           border: solid 1px #e0e0e0;
           margin-bottom: 1px;
}
fieldset { border: solid 0px red;}
form label, .label { display: block; padding-top: 10px; padding-bottom: 3px; color: #888; text-transform: uppercase;  font-size: smaller}
form label.error { padding: 0!important; margin: 0!important; }
form label { margin-top: 5px; clear: both;}


ul{list-style-position:inside;}
a {text-decoration: none; }

table {
    width: 100%;
    border: solid 1px #ccc;
    border-collapse: collapse;
}

tr:nth-child(even) {
    background-color: #f8f8f8;
}
th { 
    vertical-align: bottom;
    padding: 4px;
}
td { 
    vertical-align: top;
    border: solid 1px #ccc;
    padding: 5px;
}
td a, td a:hover, td a:visited  {
    font-weight: bold;
    color: #82BC00;
}
::-webkit-input-placeholder { color:#ccc; }
::-moz-placeholder { color:#ccc; } /* firefox 19+ */
:-ms-input-placeholder { color:#ccc; } /* ie */
input:-moz-placeholder { color:#ccc; }

/*
Primary Containers - nav and color bands
*/
.section-nav {
    clear: both;
    background-color: #FFF;    
}
.section-nav-inside {
    background-color: #FFF;    
    width: 80%;
    margin: auto;   
    height: 54px;
    min-width: 820px;
    text-transform: uppercase;
}


.section-nav-gray {
    clear: both;
    background-color: #F1F1F1;    
    border-bottom: solid 1px #E0E0E0;
}
.section-nav-gray-inside {
    background-color: #F1F1F1;    
    color: #333;    
    width: 80%;
    margin: auto;   
    height: 54px;
    min-width: 820px;
    text-transform: uppercase;
}
.section-nav-gray-inside a, .nav-gray-0 { 
    float: left;
    padding: 18px 26px 21px 26px; 
    font-size: 12px;
    border-right: solid 2px #E0E0E0;
    text-decoration: none;
    font-weight: bold;
    color: #999;
}
.section-nav-gray-inside a:hover, .nav-gray-1 {
    background-color: #E0E0E0;
}
.vert1px {  border-left: solid 1px #E0E0E0; height: 54px; width: 2px; }

.section-black {
    clear: both;
    background-color: #000;    
}
.section-black-inside {
    background-color: #000;    
    color: #fff;
    width: 80%;
    margin: auto;   
    min-width: 880px;
    text-transform: uppercase;  
}
.section-black-inside a, .section-black-inside a:visited {
    /* margin: 10px 0px 10px 50px; */
    color: #A5A5A5;   
    float: right;
}
.section-black-inside a:hover{
    color: #4D4D4D;  
}


.section-dark {
    clear: both;
    background-color: #333;    
}
.section-dark-inside {
    background-color: #333;    
    color: #fff;
    width: 80%;
    margin: auto;   
    min-width: 880px;
}

.section-gray {
    clear: both;
    background-color: #f1f1f1;    
    color: #333;
}
.section-gray-inside {
    background-color: #f1f1f1;    
    color: #333;
    width: 80%;
    margin: auto;   
    min-width: 880px;
}
.section-gray a, .section-gray a:hover, .section-gray a:visited{
    color: #999;
    font-weight: bold;
}


.section-light {
    clear: both;
    background-color: #fff;    
    color: #333;
}
.section-light-inside {
    background-color: #fff;    
    color: #333;
    width: 80%;
    margin: auto;   
    /*min-width: 820px;*/
}
.section-light a, .section-light a:hover, .section-light a:visited{
    color: #999;
    font-weight: bold;
}

#content {
    background-color: #333;    
}
#header {
    background-color: #fff;    
    width: 100%;   
}
#main-content {
    border: solid 2px #000;
    background-color: #f1f1f1;    
    min-height:  400px;
    min-width: 1000px;
    width: 80%;
    margin: auto;   
    margin-bottom: 22px;
    margin-top: 22px;
}
#footer{
    border-top: solid 1px #181818;
    background-color: #000;    
    color: #fff;
    min-height:  65px;
    width: 100%;       
}
/*
--------------- Header Bits ---------------
*/
#header-logo {
    height: 40px;
    padding: 15px 0 0 0;
}
#headerlinks {
    display: inline;
}
.top-nav, .top-nav-0 {
    float: left;
    background-color: #fff;
    padding: 18px 20px 19px 20px; 
    font-size: 14px;
    border-right: solid 1px #ccc;
    text-decoration: none;
    font-weight: bold;
    color: #999;
}
.top-nav:hover, .top-nav-1 {
    background-color: #f1f1f1;
}
.top-nav-doc {
    float: right;
    background-color: #fff;
    color: #82BC00;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}
.top-nav-icon {
    border-right: solid 1px #ccc;
    float: left;
    padding-right: 22px;
    height: 53px;       
    min-width: 222px;

}
/*hover menu in header*/
ul.hmenu {
    position: relative;
    display: inline-table;
    min-width: 110px;
}
ul.hmenu, ul.hmenu ul {
    list-style-type: none;
}
ul.hmenu li a {
    display: block;
    padding-bottom: 19px;
    padding-left: 10px;
}
ul.hmenu ul {
    display: none;
    position: absolute;
    top: 100%;
    background: white;
    border: 1px solid #CCC;
    width: 100%;
}
ul.hmenu ul li {
    border-top: 1px solid white;
    clear: both;
}
ul.hmenu ul li:first-child {
    border-top: none;
}
ul.hmenu ul li a img {
    float: right;
    margin-top: -7px;
}
ul.hmenu li:hover ul {
    display: block;
}
ul.hmenu ul li a {
    padding: 10px 5px 10px 5px;
    text-transform: none;
    color: #999;
    background: #f1f1f1;
}
ul.hmenu ul li a:hover {
    color: #82BC00;
}

/*
--------------- Footer Bits ---------------
*/
#footer-inside{
    width: 80%;
    margin: auto;   
    min-width: 900px;
}
.footer-inside-a{
    margin: 18px 0px 20px 50px;
    float: right;
    color: #A5A5A5;
    text-decoration: none;
}
.footer-inside-a:hover {
    color: #4D4D4D;
}
#footer-logo  {  padding-top: 6px }

/*
--------------- Left Sidebar  ---------------
*/
#left-sidebar {
    float: left;
    width: 220px;
    background-color: #f6f6f6;
}
#left-sidebar h5 { font-size: 22px; text-align: left; padding-bottom: 10px; color: #808080; font-weight: 100;}
#left-sidebar ul {
    list-style-type: none;    
    background-color: #f6F6f6;    
}
.left-sidebar-0 {
    height: 50px;
    display: block;
    vertical-align: middle;
    padding: 17px 25px 10px 25px;
    color: #999;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
}
a.left-sidebar-0:hover {
    background-color: #f1f1f1;
}
.left-sidebar-1  {
    height: 50px;
    background-color: #82BC00;
    display: block;
    padding: 17px 25px 10px 25px;
    color: #fff;
    text-transform: uppercase;
}
/* Main content areas */
/* Portal */
#central-content{
    float: left;
    min-width: 660px;
    background-color: #f1f1f1;
    min-height: 600px;
    height: 100%;
    padding: 20px;
    border-left: 1px solid #ccc;
    display: inline;
    width: calc(100% - 220px);
}
/* main revelar web page */
#two-column-content{
    float: left;
    min-width: 760px;
    background-color: #f1f1f1;
    min-height: 425px;
    height: 100%;
}
#one-column-content{
    min-width: 990px;
    background-color: #f1f1f1;
    min-height: 425px;
    height: 100%;
    width: 100%;
}
#image-content img {
    float: left;
    width: 100%;
}
#header-content {
    border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; margin-left: 220px; padding: 30px 20px 10px 20px;
}
.invisible-bottom{
    background-color:  transparent; position: absolute; bottom: 0px; height: 60px; width: 100%; opacity:0.1;   
}

.widget {
    margin-top: 10px;
    margin-bottom: 10px;
}
.widget-head {
    color: #808080;
}
.widget-head h1 {
    padding-top: 5px; 
    padding-left: 5px;
    font-size: 15px;
    font-weight: normal;
    vertical-align: middle;
}
.widget-head img {
    width: 30px;
}
h1.widget{
    font-size: 19px;
    text-transform: capitalize;
}
.widget a {
    color: #abc;
}
.charttab a{
    padding-left: 15px;
    font-weight: bold;
}
.chartab-a-0 {
    color: #ccc !important;
}
.chartab-a-1 {
    color: #333 !important;    
}
.chartbar {
    width: 100%;
    position: absolute;
    bottom: -10px;
}
.chartbar a{
    opacity: .70;
    filter: alpha(opacity=70);
    transition: opacity .5s ease-out;    
}
.chartbar a:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity .5s ease-out;    
}
.chartbar img{
    width: 25px;
}

/*

*/
#contacts-section{
    padding: 0px 0 0px 0;
}
.contact-item{
    width: 50%; 
    /* margin: 0 5% 25px 0 ;  */
    position: relative;    
    margin-bottom: 25px;
}
.contacts-block{
    padding-top: 20px;
}
.contact-name {
    color: #82BC00 !important;
}
.contact-item:nth-child(odd){
    border-right: solid 1px #CCC;
    padding-right: 5%; 
}
.contact-item:nth-child(even){
    padding-left: 5%; 
}
.contact-detail{
    color: #AAA;   
}

#downloads-section{
    padding: 25px 0 25px 0;
}
.download-article{
    width: 50%; 
    /* margin: 0 5% 25px 0 ;  */
    position: relative;    
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e0e0e0;
}
.download-article:nth-child(1){
    width: 100% !important;
    padding-left: 0px !important;
}
.download-brochure{
    width: 100%; 
    /* margin: 0 5% 25px 0 ;  */
    position: relative;    
    margin-bottom: 25px;
}
.downloads-article-block{
    padding-top: 20px;
}
.downloads-article-link {
    color: #82BC00 !important;
}
.downloads-image{
    /*width: 100%;*/
    height: 200px;
    max-width: 100%;
}
.download-article:nth-child(even){
    padding-right: 5%; 
}
.download-article:nth-child(odd){
    padding-left: 5%; 
}
.download-article-icon{
    float: left;
    height: 54px;
    padding-right: 10px;
}
.download-article-size-blurb{
    color: #AAA;   
}
.download-article-title{
    font-size: larger;   
}


#lit {
    padding: 25px;
}
.hidden { 
    display: none;
}

.lit-header {
    background-color: #f8f8f8;
    clear: both;
    height: 80px;
    padding: 10px 25px 10px 25px;
    border: solid 1px #e0e0e0;
}
.lit-head-title{
    float: left;
    width: 80%; 
    padding-left: 10px;    
} 
.lit-head-view-buttons{
    float: right;
    width: 10%;
}
.lit-item{
    background-color: #f8f8f8;
    color: #900;
}

.lit-detail{
    background-color: #f8f8f8; 
    border: solid 1px #E0E0E0; 
    padding: 20px;
}
.lit-detail a {
    font-weight: bold;
    color: #96C94B  !important;
}
.lit-detail-item{
    float: left; 
    width: 50%; 
    padding-left: 25px; 
    height: 60px; 
    border-left: solid 1px #e0e0e0;

}
.lit-detail-item img {
    height: 45px;
    padding-right: 10px;
}

#related-articles-section-outer{
    position: relative;
}

#related-articles-section-inner{
    padding: 0 5% 0 5%
}
#related-articles-section-button-prev{
    position: absolute; 
    top: 90px;
    left: 0;
}
#related-articles-section-button-next{
    position: absolute; 
    top: 90px;
    right: 0;
}
#dummy {
    /*margin-top: 60%;*/ /* 4:3 aspect ratio */
    min-height: 20px;
}
#login-box {
    padding: 20px;
    max-width: 480px;
    margin: auto;
}

.related-article-container{
    float: left;
    position: relative;
    width: 50%;
    padding: 20px 5px 20px 5px;
    display: inline-block;
    background-color: #fff;
    background-clip:content-box;
}
.related-article-container:nth-child(odd){
    padding-right: 20px; 
}
.related-article-container:nth-child(even){
    padding-left: 20px; 
}
.related-article {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
}
.related-article:nth-child(odd){
    padding-right: 20px; 
}
.related-article:nth-child(even){
    padding-left: 20px; 
}
.related-article h4 {
    font-size: 10px;
    color: #999;
    text-align: left;
}
.related-article h3 {
    font-size: 14px;
    font-weight: bold;
    color: #82BC00;     
    text-align: left;
    padding: 10px 0 5px 0 ;
}
.related-article p {
    font-size: 9px;
    text-align: justify;
    color: #999;
    padding: 0;
    max-height: 100px;
    overflow: hidden;

}
.related-article-foot{
    padding-top: 10px;
    font-size: 10px;
    color: #82BC00;     
    bottom: 0;
}
.related-article-foot img{
    height: 17px;
}


/*

*/

.no-close .ui-dialog-titlebar-close { display: none;}

a.btn, a.btn:hover, a.btn:link  {
    font-weight: bold;
    text-transform: uppercase;
    color: #82BC00;     
    padding: 3px;
}
.d { border: solid 1px red; } /* debug - put a border on its */

.clear { clear: both;}
.clear0px { clear: both; font-size: 0px; }
.clear1px { clear: both; font-size: 1px; }

.dialog-button { width: 30%; margin: auto; min-width: 150px; }
.left { float: left}
.right {float: right}

.ctr { text-align: center; }

.w100 { width: 100%; float: left}
.w90 { width: 90%; float: left}
.w80 { width: 80%; float: left}
.w70 { width: 70%; float: left}
.w60 { width: 60%; float: left}
.w50 { width: 50%; float: left}
.w40 { width: 40%; float: left}
.w35 { width: 35%; float: left}
.w34 { width: 34%; float: left}
.w33 { width: 33%; float: left}
.w30 { width: 30%; float: left}
.w25 { width: 25%; float: left}
.w20 { width: 20%; float: left}
.w15 { width: 15%; float: left}
.w10 { width: 10%; float: left}
.w5 { width: 5%; float: left}

.w10px { width: 10px; max-width: 10px;}

.pL25{ padding-left: 25px; } /* standard indent see<p> */
.pr2pct { padding-right: 2%;}
.pl2pct { padding-left: 2%;}
.pr1pct { padding-right: 1%;}
.pl1pct { padding-left: 1%;}

.noindent{ padding-left: 0px; padding-right: 0px;}
.p25 { padding: 25px; }
.p10 { padding: 10px; }
.p5 { padding: 5px}
.m5 { margin: 5px}

.dd-select { font-size: smaller;}

.mtop4px { margin-top: 4px;}
.mtop5px { margin-top: 5px;}
.mtop6px { margin-top: 6px;}
.mtop8px { margin-top: 8px;}
.mtop10px { margin-top: 10px;}

.ptop25px { padding-top: 25px;}
.ptop10px { padding-top: 10px;}
.pbot5px { padding-bottom: 5px;}
.pright10 { padding-right: 10px; }

.ptb5px { padding-top: 5px; padding-bottom: 5px;}
.ptb10px { padding-top: 10px; padding-bottom: 10px;}
.mtb5px { margin-top: 5px; margin-bottom: 5px;}

/* required field star */
.star {
    float: left;
    width: 10px;
    margin-top: 9px;
    vertical-align: middle;
}

.bgwhite0 { background-color: #fff; }
.bgwhite1 { background-color: #f1f1f1; }

/* vertical center children inside fixed height parents */
.vctr {
    position: relative;
    top: 50%;
    /*transform: translateY(-50%);*/
    vertical-align: middle;
}
.alert {
    border: 1px solid #ccc;
    padding: 20px;
    background-color: white;
    color: #999;
}
.rvgreen{
    color: #82BC00;
}
.idnum {
    margin-right: 60px; padding-top: 6px;
}
.error { font-size: smaller; color: red; }

/* styles for expandable widget expw */
div.expw {
    float: left; width: 100%;
}
/* 0 is not selected */
div.expw div.expw0 {
    border: 1px solid #e0e0e0; padding: 0px 20px;
    background: 20px 30px no-repeat white url('/images/expw-arrow-right.png');
}
div.expw div.expw1 {
    border: 1px solid #e0e0e0; padding: 0px 20px 20px 20px;
    background: 20px 30px no-repeat #82BC00 url('/images/expw-arrow-down.png');
}

div.expw div.expw-head {
    height: 80px; padding: 10px; font-weight: bold;
}
div.expw-head a {
    float: left
}
div.expw-head a img {
    margin-left: 20px;

}

/* same as expw-head, but for device list widgets */
div.expw div.expw-head-device {
    height: 60px; padding: 10px; font-weight: bold;
}
div.expw-head-device a {
    float: left
}
div.expw-head-device a img {
    margin-left: 20px;

}
/* same as expw-head, but for device list widgets */
div.expw div.expw-head-click {
    height: 70px; padding: 10px; font-weight: bold;
}
.expw-head-click a {
    float: left
}
.expw1 a, .expw1 a:hover, .expw1 a:visited, .expw1 .convertible {
    color: #fff;    
}
.expw0 a, .expw0 a:hover, .expw0 a:visited {
    color: #82BC00;    
}
.expw0 .convertible {
    color: #888;    
}
div.expw-head-click a img {
    margin-left: 20px;
}



div.expw-title {
    width: 80%; padding-left: 10px;
}
div.expw-sub {
    background-color: white; border: 1px solid #e0e0e0; padding: 20px 30px; display: none;
}
div.expw-sub-nopad {
    background-color: white; border: 1px solid #e0e0e0; display: none;
}
.expw h1 { 
    font-size: 14px;
    font-weight: bold;
}
/* doc list for expandable sub item */
div.expw-sub div {
    float: left;
}
div.expw-sub div.clear0px {
    float: none;
}
.doclist {
    width: 50%; padding-left: 25px; height: 60px; border-left: 1px solid #e0e0e0;
}
.doclist a {
    font-weight: bold;
    color: #96C94B  !important;
}
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
.green { color: #82BC00; }
.rvgreen{
    color: #82BC00;
}
.gray { color: #AAAAAA; }

.sort-0 { min-width: 35px; height: 35px; background-image: url(/images/sort-down.png); font-size: 25px; background-repeat: no-repeat; }
.sort-1 { min-width: 35px; height: 35px; background-image: url(/images/sort-up.png); font-size: 25px; background-repeat: no-repeat;}

#CountryID-button { width: 100%; min-width: 120px;}

#FLanguageID-button { width: 175px !important;}
#CountryID-button { width: 175px !important;}

#sort-by-status {min-width: 60px;}
.status-image { width: 28px; margin-top: -5px }
.sortheader { 
    font-weight: bold;
    background: linear-gradient(#f1f1f1, #f1f1f1); /* Standard syntax */             
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}
.sortheader div {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ssort-0 {color: #444;}
.ssort-1 {color: #777;}

.detail-head {
    font-size: larger;
    color: #999999;
}
.full-assessment-button {
    padding: 5px;
    border: 2px solid #82BC00;
    border-radius: 4px;
    color: #82BC00 !important;
    font-size: larger; 
    font-weight: bold;      
}
.detail-score {
    font-size: 32px;
    color: #000;
    font-weight: bold;
    text-align: center;
}
.detail-date {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    text-align: center;    
}

/* practitioner dashboard - completed test results */
#completed-test-results>div { height: 50px; clear: both; border-bottom: solid 1px #ccc; padding-top: 19px; padding-left: 7px;}

/* practitioner dashboard - missing assessments results */
#missing-assessments-results>div { height: 50px; clear: both; border-bottom: solid 1px #ccc; padding-top: 19px; padding-left: 7px;}

/* practitioner  dashboard - tests administered widget */
.select-tab-0 {
    float: right;
    min-width: 100px;
    text-align: center;    
    font-weight: normal;
    color: #808080;
    cursor: pointer;
}
.select-tab-1 {
    float: right;
    min-width: 100px;
    text-align: center;    
    font-weight: bold;
    color: #444;
    cursor: pointer;
}