/*
This page is THE REFERENCE when a new useOrgSho.css page must be created/inserted.
This css defines for the public site (ie when there is no position defined in the Header or Component), 
and also for all CCNCustomer when there is no specific useOrgSho.css, what fields/components are visible/hidden.
Most of the content is not used as these pages are not accessible through site.
PART#1:
a) Fields in each page for each customer depending if it is visible and/or required.
CCN VF page have ALL there components defined by Ids. Rule is: 
Some fields on the page are required in all cases. They do appear here in regards to the color aspect. Ex: Association Nature
This page manages a) the Display / Visibility of Buttons b) Display / Visibility of HTML boxes / fields / c) the Color of the field.
This page does not manage anything about 'required'. This is done in jQuery in the page, based on the value of the form field.
In every page, statements are ordered in the order they appear on the page. First class for HTML boxes, then Id for fields in this box.
In regards to Jquery action on Field, I can use either property visibility or display
b) component visibility all together on pages: a CCNCustomer that does not manage Membership will not have the Membership related components.
   They will be replaced by something else on the page.
PART#2:   
c) the custom formatting of elements such as background for header, colors, ...
------------------------------------------
Below explains the logic in regards to controlling the field visibility for each CCNCustomer, applicable
to all useOrgSho.css.
PART#1:
a) Fields in each component or page, AUW and CPM, for each customer depending if it is visible and/or required.
CCN VF page have ALL there components defined by Ids.
Implementation:
CASE 1)Some fields are ALWAYS visible AND required, regardless of the customer, in all components/pages. Eg: per.NameTitle, per.NameFirst ,per.NameLast
These fields do not need any CCNCustomer.css declaration.
These field are identified in the component with the ccnusorg.css class .req", so that 1)the asterix is visible
.req{   Required  field defined in ccnusorg.css 
background: url(https://www.ccnus.org/stylesheet/icon/asteriskRed12.png) no-repeat;
background-position: right 3px bottom 4px;
padding-right:15px;
}
In CNUpdProAuwCom:
Javascript on NameFirst:
} else if (j$('[id*=CNUpdProAuwComaifPerNameFirst]').val() == "" ) {  ///is the only condition to check as field always required
Component:
<tr><td style="width:30%;" >                                         ///No class required as always visible/required
<apex:outputText value="{!$Label.CNNameFirstC}" styleClass="req" />  ///No Id required. 
</td><td>
<apex:inputField value="{!Per.NameFirst__c}" onfocus="focusPerNameFirst();" onchange="focusPerNameFirst();" 
 id="CNUpdProAuwComaifPerNameFirst" />                              ///Id requried as used in JS validation field
</td></tr>

CASE 2) Some fields are NOT visible for a given customer. French customers do not use per.NickName. The entire data about the field must be hidden.
Because the rule applies to all per.NickName in ALL components/pages, the class is defined across all components/pages = neutral in this css
Below declaration in in the  -----------ACCROSS ALL AUW COMPONENTS----------- section of this css
.perNameNick{ display: none; }   ///perNameNick will be visible no where in any component/page
These classes are implemented at the table/tr level.
In CNUpdProAuwCom: If .perNameNick is visible, all the row is visible
<tr class="perNameNick" ><td>
<apex:outputText value="{!$Label.CNNickNameC}" styleClass="cusDep" id="CNUpdProAuwComaotCNNickNameC" />
</td><td class="CNUpdProAuwComtdNickName" >
<apex:inputField value="{!Per.NameNick__c}" onfocus="cheAllJS()" onchange="cheAllJS();" 
style="width:80%;" id="CNUpdProAuwComaifPerNameNick" />
</td></tr>
In CNUpdPosAffAuwCom, the same class is used:
<tr class="perNameNick" ><td>   As perNameNick is NOT display, entire row is hidden.
<apex:outputText value="{!$Label.CNNickNameC}" />
</td><td>
<apex:inputField value="{!per.NameNick__c}" />
</td></tr>
CASE 3)CCN Customer dependant field that is visible but can NEVER be required, across ALL components/pages for this CCNCustomer.
Eg: per.NickName__c   A person cannot be forced to have a nickname, but per.NickName is visible across the board.
The overall tr.class is defined as .perNameNick{ \/*display: none;*\/ } - commenting display: none is better that display:inline as it lets the 
component or browser finds whether inline or block or whatever is better.
This is it. No JS needs to run, therefore no Ids required. See component CNUpdProAuw.per.NameNick__c above.
CASE 4)CCN Customer dependant fields that is visible across SPECIFIC components/pages for this CCNCustomer.
Eg: per.DateBirth__c  CCNCustomer1 decides to display DateBirh in CNUpdProAuw, BUT NOT in CNUpdPosAffAuw
                      CCNCustomer2 decides to display DateBirh in CNUpdProAuw, AND in CNUpdPosAffAuw
per.DateBirth__c is identified in each CCNCustomer.css with a specific Class for each Component/page at the tr lev
.CNUpdProAuwComDateOfBirth{ \/*display:none;*\/ }  ///per.DateBirth is visible in CNUpdProAuwCOm
.CNUpdPosAffAuwComDateOfBirth{display: none;}      ///per.DateBirth is NOT visible in CNUpdPosAffAuw
In the component, the specific tr.class links to the css:
<tr class="CNUpdPosAffAuwComDateOfBirth" ><td>
<apex:outputText value="{!$Label.CNDateOfBirth}" styleClass="cusDep" id="CNUpdPosAffAuwComaotCNDateOfBirth" />
</td><td>
CASE 5)CCN Customer dependant field that is visible and may be required or not. Eg: per.DateBirth__c 
As in case 4), tr is !display:none so that the tr, therefore the fields are visible.
Each individual component of case 5 is identified in this CCNCustomer.css through its aot field:
[id*=CNUpdProAuwComaotCNDateOfBirth]{  [id*= because must cross the SFDC element structure
color:rgb(72, 72 , 73) !important;    ///Means that per.DateBirth is required in CNUpdPro. if commented means it is not required, but still visible
}
At the JS field validation level:
} else if ( j$('[id*=CNUpdPosAffAuwComaifPerDateBirth]').is(':visible')        ///As this should NOT RUN if field not visible all together
&& j$('[id*=CNUpdPosAffAuwComaifPerDateBirth]').val() == undefined             
&& j$('[id*=CNUpdPosAffAuwComaotCNDateOfBirth]').css('color' , 'rgb(72, 72 , 73)') ///Means the field is required
){
perDateBirth = false;
In the component, the id of the aot finds out if field is required or not, and the id of the aif finds out if it is empty or not
<tr class="CNUpdPosAffAuwComDateOfBirth" ><td>
<apex:outputText value="{!$Label.CNDateOfBirth}" styleClass="cusDep" id="CNUpdPosAffAuwComaotCNDateOfBirth" />
</td><td>
<apex:inputField value="{!perAff.DateBirth__c}" style="width:40%" onfocus="focusPerDateBirth()" onchange="focusPerDateBirth()" id="CNUpdPosAffAuwComaifPerDateBirth" />
</td></tr
----
In the component, the styleClass="cusDep" is used by the addAst JS method to add the red asterix. This is independent of the above.
///Below adds the red asterisk for all the required fields, based on cusDep (customer dependant) class in Component and CCNCustomer.css
function addAst(){
var reqEle = document.getElementsByClassName("cusDep"); ///Finds ALL the cusDep fields
var ele;
for (ele = 0; ele < reqEle.length; ele++) {
if (j$(reqEle[ele]).css('color') == "rgb(72, 72 , 73)"){   ///This finds out through the css if the field is required or not for this CCNCustomer
j$(reqEle[ele]).addClass('req');
}}}
----------------------
This css manages a)the Display / Visibility of Buttons b)Display / Visibility of HTML boxes / fields / c)the Color of the field.
This css does not manage anything about 'required'. This is done in jQuery in the page, based on the value of the form field[class*=
In every page, statements are ordered in the order they appear on the page. First class for HTML boxes, then Id for fields in this box.
In regards to Jquery action on Field, I can use either property visibility or display
b) Component visibility all together on pages: a CCNCustomer that does not manage Membership will not have the Membership related components.
   They will be replaced by something else on the page.
PART#2:   
c) the custom formatting for the customer such as:
 - font-family, color, .. used on Email and letter templates / communication with outside world
 - print media query format size letter US/A4, margins, ..
/*****************************/
/*  PART#1: FIELD VISIBILITY */
/*****************************/
/*  CNCusMemHomAuw  PAGE     */
/*****************************/
#CNCusMemHomAuwCNCusMemHeaAuwComDiv{
/*display:none;*/
}
#CNCusMemHomAuwCNLisEveAuwComDiv{
/*display:none;*/
}
#CNCusMemHomAuwCNPlaQuiAuwComDiv{
/*display:none;*/
}
#CNCusMemHomAuwCNReaPosMemAuwComDiv{
/*display:none;*/
}
/********************************/
/* ACCROSS ALL AUW COMPONENTS   */
/********************************/
.perNameMiddle{
/*display: none;*/
}
.perNameNick{
/*display: none;*/
}
.perNameSuffix{
/*display:none;    /* so that suffix data is never required in any component for this customer */
}
/****************************/
/* CNUpdProAuwCom COMPONENT */
/****************************/
[id*=CNUpdProAuwComacbcnLisPosAffAuwPar]{
/*display:none;*/
}
[id*=CNUpdProAuwComacbcnLisParAuwPar]{
/*display:none;*/
}
[id*=CNUpdProAuwComacbcnLisVehAuwPar]{
/*display:none;*/
}
[id*=CNUpdProAuwComacbcnLisEveAuwpar]{
/*display:none;*/
}
[id*=CNUpdProAuwComacbcnUpdOrdAuwPar]{
/*display:none;*/
}
[id*=CNUpdProAuwComacbcnUpdPosCodAuwPar]{
/*display:none;*/
}
[id*=CNUpdProAuwComacbcnLogoutPar]{
/*display:none;*/
}
.CNUpdProAuwComPosTitle{
/*display: table !important; */ /*not block, neither inline if it applies to a table element*/
}
[id*=CNUpdProAuwComaotCNPosTitleC]{
color:rgb(72, 72 , 73) !important;
}
[id*=CNUpdProAuwComaifCNPosTitle]{
/*display: none;*/
}
.CNUpdProAuwComNationality{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNNationalityC]{
color:rgb(72, 72 , 73) !important;
}
.CNUpdProAuwComDateOfBirth{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNDateOfBirth]{
/*color:rgb(72, 72 , 73) !important; */
}
.CNUpdProAuwComMobilePhone{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNMobilePhoneNb]{
color:rgb(72, 72 , 73) !important; 
}
.CNUpdProAuwPosExpertisePublic{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNExpertisePublic]{
/*color:rgb(72, 72 , 73) !important;*/
}
.CNUpdProAuwPosExpertisePrivate{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNExpertisePrivate]{
/*color:rgb(72, 72 , 73) !important;*/
}
.CNUpdProAuwComJacketSize{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNJacketSize]{
color:rgb(72, 72 , 73) !important;
}
.CNUpdProAuwComHouseHoldMember{
/*display: table !important;*/
}
[id*=CNUpdProAuwComaotCNHouseHoldMember]{
/* color:rgb(72, 72 , 73) !important;  */
}
/* ******************************/
/* CNUpdPosAffAuw COMPONNENT  */
/********************************/
.CNUpdPosAffAuwNationality{
/*display: table-row !important;*/
}
[id*=CNUpdPosAffAuwComaotCNNationalityC]{
color:rgb(72, 72 , 73) !important;
}
.CNUpdPosAffAuwComDateOfBirth{
/*display: table-row !important;*/
}
[id*=CNUpdPosAffAuwComaotCNDateOfBirth]{
color:rgb(72, 72 , 73) !important;
}
.CNUpdPosAffAuwComEmail{
/*display: table-row !important;*/
}
[id*=CNUpdPosAffAuwComaotCNEmailC]{
color:rgb(72, 72 , 73) !important;
}
.CNUpdPosAffAuwJacketSize{
/*display: table-row !important;*/
}
[id*=CNUpdPosAffAuwComaotCNJacketSize]{
color:rgb(72, 72 , 73) !important;
}
/* **************************/
/* CNUpdVehAuwCom COMPONENT */
/* **************************/
[id*=CNUpdVehAuwComaotCNMarqueC]{
color:rgb(72, 72 , 73) !important;
}
[id*=CNUpdVehAuwComaotCNMillesimeC]{
color:rgb(72, 72 , 73) !important;
}
[id*=CNUpdVehAuwComaotCNSerieC]{
color:rgb(72, 72 , 73) !important;
}
[id*=CNUpdVehAuwComaotCNModelC]{
color:rgb(72, 72 , 73) !important;
}
/****************************/
/*  CNUpdOrdAuw Page        */
/****************************/
[id*=apCNUpdOrdAuwacbcnCheOutNonEleAuwPar]{
display: none;
}
[id*=apCNUpdOrdAuwacbcnCheOutPayPalDemAuwPar]{
display: none;
}
[id*=apCNUpdOrdAuwacbcnCheOutPayPalAuwPar]{
/* display: none; */
}
[id*=apCNUpdOrdAuwacbcnPayOrdCnPAuwPar]{
/*display: none;*/
}
/**********************************/
/*   PART#2: Formatting Custom    */
/**********************************/
/********************** Applies to Media print only ***************************************/
/*Everything that is printed, Help Pages, Email, Mass generated letters uses these rules, vehicle datasheet */
@media print{
@page{
margin:0mm;          /* different margins applied in .letWra, .labWra, .badWra, ... in ccnusorg.css  */
}
body{
font-size:10pt;
}
.vehDatSheWraTab{ /* table wrapping each vehicle data sheet in the paper page.*/
width:259mm;  /*US letter-Landscape minus 20mm margin*/
height:197mm; /*US letter-Landscape minus 20mm margin*/ 
}
}
/* END Applies to media print only */
/************** GENERIC **************/
body.letter *{  /* Applies to all paper communications: HTML generated letters, labels, badges, .... Displayed on screen AND printed */
               /* Does not always apply to Email body (Gmail strips away external stylesheets, Outlook does not).*/
			   /* Never applies to VF Email template Email attachment because renderAd=PDF does not accept it, but it will use the */
               /* last understood ( Arial Unicode MS/sens-serif/serif/monospace )			   */
font-family: Comic Sans MS, Comic Sans MS5, cursive, monospace; /*Overrides common.css. */
color:#222222;
}
body.label *{
font-family: Comic Sans MS, Comic Sans MS5, cursive; /*Overrides common.css*/
color:black;
}
body.badge *{
font-family: Comic Sans MS, Comic Sans MS5, cursive; /*Overrides common.css*/
color:black;
}
/*************** END GENERIC *********/