.head {
    background-color:#00357A;
}

.logo {
    float: left;
    padding: 2px 2px 2px 10px;
    vertical-align: middle;
}

.headerBanner {
    /* This style was created for the top banner in the PageHeader.jsp page 
    * fragment.  Giving the container element on that page height:100% gives the
    * element the "layout" property for IE.  This property resolves a problem
    * with the background color being removed when the page is scrolled in IE.
    * (See defect NZLS00000277 in ClearQuest) */
    height:100%;
}

.sessionStatus {
    float: right;
    padding: 10px;
    color: white;
    font-size:90%;
/*    vertical-align: middle;*/
    
}

.mainNavigation {
    clear:left;
    height:31px;
    background-color: #000000;
    background-image:url('images/topnav.gif');
    margin: 0;
    padding-top: 0px; /* required to force this div to extend below 'ul' bottom border */
    overflow:hidden;
    vertical-align: middle;
}

.mainNavigation ul {
    display: inline; /* horizontal menu items */
    position:relative;
    margin:0;
    margin-left:5px;
    padding-left:5px;
    font-size: 1em;
    top: 7px;
    
}

.mainNavigation li {
    display: inline; /* horizontal menu items */
}

.mainNavigation li a {
    padding: 0px 12px;
    color: #333;
    text-decoration: none;
    font-weight:bold;
}

.mainNavigation li a:link {
    color: #333;
    text-decoration: none;
}

.mainNavigation li a:visited {
    color: #333;
    text-decoration: none;
}

.mainNavigation li a:hover {
    color: #00357A;
    text-decoration: none;
}

.mainNavigation li a:active {
    color: #00357A;
    text-decoration: none;
}

.mainNavigation li.highlit a {
    color: #00357A !important;
    text-decoration: none;
}

.pageNavigation {
    float: left;
    width: 9em;
    margin: 0px;
    min-height:500px;
    height:100%;
    background-color: #00357A;
    background-image:url('images/sidenav_rebranded2.jpg');
}

.blankPageNavigation {
    float: left;
    width: 9em;
    margin: 0px;
    min-height:500px;
    height:100%;    
}

.leftNavigationFiller {
    float: left;
    height: 100%;
}
.leftNavigationFiller img {
    width:1px;
    height:500px;
}

.page {
    width: 900px;
}

.pageNavigation ul {
    list-style: none;
    margin:0px 0px 0px 0px;
    padding:0px;}

.pageNavigation li {
    border-bottom: 0px solid #CCCCCC}


.pageNavigation li a:link, .pageNavigation li a:visited {
    color: white;
    display: block;
    text-decoration: none;
    font-size: 90%;
    padding: 7px 10px 7px 10px
}

.pageNavigation a:hover, #links li a:active {
    color: black;
    background-color: #DDDDDD;
}

.pageNavigation li a:hover {
    color: black;
    background-color: #DDDDDD;
}

.pageNavigation li.highlit a {
    color: black !important;    
    background-color: #DDDDDD;
}

.content {
    float:left;
    width:750px;
}


.pageTitle {
    font-size: 1.5em;
    margin:10px;
    color:#666;
}

.pageTitle .pageTitleLink {   
}

.pageContent {
    margin: 0px 0px 0px 10px;
    padding: 1px 5px 1px 5px; /* top padding required to force IE to render whole left border */
}

table{
    border: 0px;
}

td, th {
    border: 0px;
}

th {
    background-color:#666;
    color:white;
    font-weight:normal;
}

.formContent td, .formContent th {
    border: 0px;
    /*width : 300px ;*/
    vertical-align: top;
}

.formContent {
    padding: 0px 0px 0px 10px;
}

.formContent .formRow {
    margin: 3px 0px 3px 0px;
    clear: both;
}

.formContent span.LblLev2Txt {
    float: left;
    width: 11em;
    margin: 2px 0.5em 0 0;
}

.formContent label {
    float: left;
    width: 10em;
    margin: 0 0.5em 0 0;
}

.labelRight label, .labelRight span.LblLev2Txt {
    clear: none;
    float : none;
    width : auto;
    white-space: nowrap;
}
.labelRightWrap span.LblLev2Txt {
    white-space: normal !important;
    display:block;
}

.labelRightWrap label{
    white-space: normal !important;
    margin-left: 2em;
    display: block;
}

.autoWidthWrappableText {
    width : auto;
    white-space: normal;
}

/* Weird 3-pixel text jog bug (look it up) in IE is fixed by forcing "hasLayout".
Interestingly enough you can target IE by taking advantage of the implementation of
old versions of IE, where internally there is an element surrounding the html element.
This will not be present in other browsers, so this style will not mess with the
rendering on them.
*/
* html .labelRightWrap label {
    height: 1%;
    padding-top: 4px;
}

* html .labelRight label {
    height: 1%;
    padding-top: 2px;
}

* html .nudgeDown {
    height: 1%;
    padding-top:3px;
}


.labelRight span.RbSpn input, .labelRight span.CbSpn input {
    float: left;
    clear: both;
    margin: 1px 5px 0px 2px;
}

.threeColumnCB span.CbSpn input{
    float: left;
    clear: both;
    margin: 1px 10px 0px 2px;
}

.formContent .CbGrpClEv {
    border: 0px;
    width : 300px;
    white-space: nowrap; 
}
.threeColumnCB .CbGrpClEv,  .threeColumnCB .CbGrpClOd{
    border: 0px;
    width : 200px;
    white-space: nowrap; 
}
.wideThreeColumnCB .CbGrpClEv,  .wideThreeColumnCB .CbGrpClOd{
    border: 0px;
    width : 250px;
    white-space: nowrap; 
}


.formContent .CbGrpClEv label,  .formContent .CbGrpClOd label{
    border: 0px;
    white-space: nowrap; 
}


.formMedLabel {
    width: 15em !important;
}
.formWideText {
    width: 18em !important;
}

.formWideLabel {
    width: 20em !important;
}

.formAutoWidthLabel {
    width: auto !important;
    margin-right: 2em !important;
    white-space: nowrap;
}

.formAutoWidthElement {
    width: auto !important;
    white-space: nowrap;
}

div.formColumnWidthElement input[type='text'] {
    width: 23em !important;
}

.indented {
    padding-left: 2.5em;
}

.indented label, indented span.LblLev2Txt {
    width: 7em;
}

.formExtraWidthLabelForIndented {
    width: 12.5em !important;
}

.indented input[type="text"], .indented input[type="password"]{
    width : 8em !important;
}

.indented textarea {
    width: 14em;
}


.formWideInput {
    width: 24em;
    float: left;
    clear: both;
}

.formRow input.formAlmostWideInput[type="text"] {
    width: 20em !important;
}


.formRowStart {
    clear :both ;
    /*  float :left ;*/
}

span.formTextItem {
    width : 12em  !important;
}

.formLabeledWrappableText {
    margin: 2px 0 0 10.5em ;
}

.formLabelForWrappableText {
    clear:both;
    float: left;
}
* html .formLabeledWrappableText {
    height: 1%;
}
.formExtraShortLabeledWrappableText {
    margin: 0 0 0 5em ;
}

.formRow input[type="text"], .formRow input[type="password"]{
    width : 12em !important;
}

.formRow span {
    margin: 0 0 0 0;
}

/* (Anya)  border-top: solid 1px gray; /* border above 'SubGroup' of controls */
.formSubGroup {
    margin: 0;
    border-top: 0px;
    padding: 5px 0px 5px 0px;
}

.formButtonGroup {
    padding: 10px 0px 5px 0px;
    clear :both ;
}

.textBoxReadOnly {
    border: solid 2px #d0d0d0;
    background-color: #e8e8e8;
}

.resultsetDiv {
    margin: 20px 0px;
    border-top: solid 1px gray;
    padding: 10px;
}

.resultsetTitle {
    font-size: 1.2em;
}

.resultsetDiv table {
    margin: 10px 0px;
}

.resultsetDiv th, .resultsetDiv td {
    padding: 5px 15px;
}

.list-row-odd {
    background-color: #fff;
}

.list-row-even {
    background-color: #f4f4f4;
}

.moneyColumn {
    text-align: right;
}

#FeeSelect {
    margin-left:-30px;
    margin-right:20px;
}

.foot {
    clear: both;
    margin:0px 0;
    border-top: solid thin gray;
    padding: 0px 0px 5px 5px;
    background-color: #f0f0f0;
    font-size: 75%;
    text-align:center;
}

.formCol {
    float: left;
    width : 300px ;
}

.rightPad{
    padding-right:1em;
}

.formColRightPadded {
    float: left;
    width : 300px ;
/*    padding-right: 1em;*/
}

.formWideCol {
    float: left;
    width : 350px ;
}
.formNarrowCol {
    float: left;
    width : 220px ;
}

.formButtonGroupListItem {
    width: 100% !important;
}

.formButtonGroupListItemLabel {
    width: 35% !important;
    white-space : nowrap !important ;
    margin: 5px 0pt 0pt !important;
}
.formButtonGroupListItemLabel1 {
    width: 410px !important;
    white-space : normal !important ;
    margin: 5px 0pt 0pt !important;
}
.formButtonGroupHeaderItem {
    width: 20% !important ;
    border: 0px !important;
}

.formButtonGroupHeaderItem label, .formButtonGroupHeaderItem span.LblLev2Txt {
    width:4em;
}

.sectionSpacer {
    padding: 10px 0px 10px 0px;
}

.formHorizSection {
    clear :both ;
    padding-top: 10px;
}
.formExtraTopPaddedHorizSection {
    clear :both ;
    padding: 30px 0px 0px 0px;
}
.topDivider {
    border-top: solid thin gray;
}

.leftDivider {  
    border-left: solid thin gray;
}

table.wideTable {
    width : 600px ;
}

.formGenerateFeesFromTemplateTable {
    padding: 10px;
    width: 600px
}

.formGenerateFeesFromTemplateTableHeader {
    font-weight: bold
}

.formFullWidthLabel label, .formFullWidthLabel span.LblLev2Txt {
    width: 600px !important;
}

.formShortLabel label, .formShortLabel span.LblLev2Txt {
    width: 7.5em;
}

.formExtraShortLabel label, .formExtraShortLabel span.LblLev2Txt {
    width: 5em;
}

.headerText {
    vertical-align: middle;
    padding: 10px 10px 10px 10px;
}

.headerText span {
    color: white;
    font-size:100%;
    vertical-align: middle;
}

.gridPanelLabelRight label, .gridPanelLabelRight span.LblLev2Txt {
    margin: 3px 0pt 0pt !important;
    width: 200px;
    white-space : nowrap;
}

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:.9em;
    color:black;	
    margin:0px;
}

a:link, a:active, a:hover {
    color: #035899;
}

a:visited {
    color: #035899;
}

label {
    margin-top: 2px !important;
}

h2 {
    position:relative;
    float:left;
    color:white;
    padding:12px 0 0px 10px;
    font-size:1.2em; 
    font-family: "Arial narrow";
    font-weight:normal;
}

.titleName {
}

.titleWarning {
    background:#FAEDED;
    border:1px solid red;
}

.selectableTextDiv {
    display: none;
    border: 3px outset gray;
    position: absolute;
    background-color: white;
    padding: 10px 10px 10px 10px;
    clear: both;
}

pre {
    font-family: inherit;
    margin-top: 0px;
    margin-bottom: 0px;
    white-space: pre-wrap; /* css-3 */
    white-space: pre; /* CSS2 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word !important; /* Internet Explorer 5.5+ */
}

.releaseIdentifier{
    float:right;
    color:white;
    font-weight: bold;
    vertical-align: middle;
    padding: 35px 50px 10px 10px;
/*    margin: 0 0 0 100px;*/
}

.releaseIdentifier span {
    font-size:1.4em !important;
}

.formButtonGroup img {
    clear:both;
    float:left;
    margin: 0 0.2em 0 0;
}

.borderless td {
    border: 0px !important;
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0;
    /*width: 100% !important;*/
}

.borderless1 td {
    border: 0px !important;
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0;
    width: 100% !important;
}

.leftPadded {
    padding: 0 0 0 2em;
}

table.Tbl .TblGrpLft {
    float:none;
    padding-bottom: 3px;
    padding-top: 2px;
    display: block;
}

.highlitRow {
    background-color: #FAEDED !important;
    font-weight: bold;
}

@media print {
    .highlitRow {
        background-color: #ff9999 !important;
        font-weight: bold;
    }
}

.borderlessMedWide td {
    border: 0px !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
}

.borderlessMedWide {
    border: 0px !important;
    width: 400px !important;
    padding-left: 0px !important;
    margin-left: 0px !important;
}

.inputSized {
    width:12em;
}

.formAlmostWideInput {
    width:20em;
}

.leftMargin {
    margin-left: 2em;
}

.MsgGrpInfo {
    width: 400px;
    color: black;
}

/* *********************************************************************** */
/* All styles below this line are intended to target individual pages      */
/* This should be achieved by setting the ID of the BODY element, and      */
/* then targetting elements below that ID.                                 */

/* Note that many JSF elements are normally given IDs such as form1:label3 */
/* Unfortunately, the colon has to be ascaped in CSS rules, and even more  */
/* unfortunately the \ escape does not work in IE.  As a workaround the    */
/* escape sequence \00003A represents the colon character.  Therefore to   */
/* specify the ID #form1:label2 you would use #form1\00003Alabel2          */


/* *********************************************************************** */
/* OrganisationDetails page */

#organisationDetailsBody #form1\00003AlayoutPanel39 {
    margin-top:13px;
}


/* *********************************************************************** */
/* OrganisationDetailsForLink page */

#organisationDetailsForLinkBody #form1\00003AlayoutPanel38 {
    margin-top:6px;
}

#welcomeLawyerBody #form1\00003Ahyperlink_renewMembership {
    margin: 0 0 0 10px;
}

#welcomeLawyerBody #form1\00003Ahyperlink_joinNzls {
    margin: 0 0 0 10px;
}

/* *********************************************************************** */
/* RelatedPersons page */

#relatedPersonsBody #form1\00003Atable_currentLinks1\00003AtableRowGroup_currentLinks1\00003AtableColumn__currentLinkViewLink1\00003A_columnHeader {
    width: 70px;
}

#relatedPersonsBody #form1\00003Atable_previousLinks1\00003AtableRowGroup_previousLinks1\00003AtableColumn_previousLinkViewLink1\00003A_columnHeader {
    width: 70px;
}

/* *********************************************************************** */
/* FindLawyerOrOrganisation page */

/* Widen the labels on the left hand side of the form */
#FindLawyerOrOrganisationBody .LblLev2Txt {
    width: 150px;
}

/* Widen the table that contains the Lawyer and Organisation checkboxes */
#FindLawyerOrOrganisationBody table.LblLev2Txt.labelRight.RbGrp {
    width: 300px;
}
/* *********************************************************************** */
/* CurrentStatus page */

#currentStatusBody #form1\00003Atable_MembershipDetails td, #currentStatusBody #form1\00003Atable_MembershipDetails {
    border: 0px !important;
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0;
    width: 64% !important;
}

/* ********************************************************************** */
/* Forgotten Password page */
#form1\00003AlayoutPanel_FormRowForgottenPassword {
    margin: 12px;
}
#form1\00003Atable1\00003AtableRowGroup1\00003A0\00003AtableColumn1 {
    margin: 112px;
    width : 1px;
    border: 0px !important;
}
#form1\00003Atable1\00003AtableRowGroup1\00003A0\00003AtableColumn2 {
    margin: 112px;
    width : 1px;
    border: 0px !important;
}
/*
    workaround for label Yes No width in Declaration.jsp - need to investigate better way to render the label
*/
#form1\00003AlabelNo {
    margin-left:8px;
    width: 50px;
}
#form1\00003AlabelExplanation {
    width: 250px;
}
.greyBackground {
    background-color: #D3D3D3;
}

/* alwaysDisplayTable is used to force a table to be displayed.

   This is required because the Woodstock JavaScript library creates an HTML attribute named 'HIDDEN' on table elements.
   This attribute was ignored in HTML 4, but in HTML 5 the HIDDEN attribute causes the element to be hidden as though
   it had a display:none CSS property.
   The work around is to use alwaysDisplayTable to explicitly set display:table
*/
.alwaysDisplayTable {
	display: table;
}