/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ELEMENTS FOR GENERAL LAYOUT OF WEB PAGES                         === */
/* === ACCORDING TO HTML5 STANDARD                                               === */
/* ================================================================================= */
/* ================================================================================= */
BODY {
    background-color: #ffffff;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal
    }
HEADER.main {
    padding: 5px;
    background-color: #ffffff;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    width: 100%;       
    }
NAV.main {
    padding: 5px;
    background-color: #ffffff;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    width: 100%;       
    } 
SECTION:after {
    content: "";              
    display: table;
    clear: both;    
    }       
ARTICLE {
    background-color: #ffffff;
    padding: 10px;
    float: left;
    width: 70%;
    }
ASIDE {
    background-color: #ffffff;
    padding: 10px;
    float: left;
    }
FOOTER.main {
    background-color: #ffffff;
    padding: 10px;
    text-align: center;
    width: 100%;
    }

/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ELEMENTS FOR BUILDING GENERAL LAYOUT OF UPPER SECTION            === */
/* ================================================================================= */
/* ================================================================================= */
DIV.upperLeft, SPAN.upperLeft {
	float:       left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:       12px;
	font-weight:     200;
	font-style:	     normal;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    }    
DIV.upperRigth, SPAN.upperRight {
	float:       right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:       12px;
	font-weight:     200;
	font-style:	     normal;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    }    
	
A.upperMenu:link	{	
    font-weight:  200;
	text-decoration: none;
	color:	#000000;
	}	
		
A.upperMenu:visited	{	
	font-weight:  200;
	text-decoration: none;
	color:	#000000;
	}	
		
A.upperMenu:active	{	
	font-weight:  200;
	text-decoration: none;
	color:	#000000;
	}	
		
A.upperMenu:hover	{	
	font-weight:  800;
	text-decoration: underline;
    color:  #0000cc;
	}

/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ELEMENTS FOR BUILDING GENERAL LAYOUT OF SITE NAVIGATION          === */
/* === SETION: MAIN MENU, SLIDESHOW and SHORTCUTS                                === */
/* ================================================================================= */
/* ================================================================================= */
DIV.navSection, SPAN.navSection, TABLE.navSection {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:       15px;
	font-weight:     200;
	font-style:	     normal;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    text-align:      center;
    border:          none;
    height:          32px;
    width:           100%;
    }    
	
A.mainMenu:link	{	
    font-weight:  200;
	text-decoration: none;
	color:	#0000aa;
	}	
		
A.mainMenu:visited	{	
	font-weight:  200;
	text-decoration: none;
	color:	#0000aa;
	}	
		
A.mainMenu:active	{	
	font-weight:  200;
	text-decoration: none;
	color:	#0000cc;
	}	
		
A.mainMenu:hover	{	
	font-weight:  800;
	text-decoration: none;
    color:  #0000ff;
	}

/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ELEMENTS FOR BUILDING MAIN SLIDESHOW                             === */
/* ================================================================================= */
/* ================================================================================= */
#mainSlideshow {
    overflow:    hidden;
    position:    relative;
    margin:      0 auto;
    width:       1200px;    /* was 100%  */
    height:      330px;
    background:  white;
    box-shadow:  5px 5px 7px black;
    }
#mainSlideshow .slide{
    width:       1200px;    /* was 100%  */
    height:      330px;
    position:    absolute;
    top:         0;
    left:        0;
    opacity:     1;
    }
    
/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ATTRIBUTES AND PROPERTIES FOR MAIN PROMOTING TEXT               ==== */
/* ================================================================================= */
/* ================================================================================= */
DIV.promoSection, SPAN.promoSection {
	font-family:     Tahoma, Arial, Helvetica, sans-serif;
	font-weight:     normal;
	font-style:	     italic;
	text-decoration: none;
    text-align:      center;
    text-shadow:     2px 2px 4px Grey;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    color:           #0028DD;
    position:        relative;
    }

DIV.promoTitle, SPAN.promoTitle { font-size: 24px; }    
DIV.promoStatmt, SPAN.promoStatmt { font-size: 20px; }
DIV.promoOvervw, SPAN.promoOvervw { font-size: 18px; color: #000088; }
DIV.mottoSentnc, SPAN.mottoSentnc { text-decoration: underline; font-size: 28px; }

/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ATTRIBUTES AND PROPERTIES FOR INTRODUCTION TEXT                  === */
/* ================================================================================= */
/* ================================================================================= */
DIV.introSection, SPAN.introSection {
    background-color: FloralWhite;
    box-shadow: 2px 2px 5px grey;
	font-family:     Tahoma, Arial, Helvetica, sans-serif;
	font-weight:     normal;
	font-style:	     italic;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    color:           Black;
    padding: 20px;
    }
DIV.introCaption, SPAN.introCaption { font-size: 20px; position: relative; left: 20px; color: #000088; }    
DIV.introText, SPAN.introText { font-size: 14px; position: relative; left: 40px; }
DIV.introHigh, SPAN.introHigh { font-size: 16px; position: relative; left: 40px; color: #000088; }  
     
/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ATTRIBUTES AND PROPERTIES FOR LOGOS and SHORTCUTS                === */
/* ================================================================================= */
/* ================================================================================= */
DIV.shortcutSection, SPAN.shortcutSection {
	font-family:     Tahoma, Arial, Helvetica, sans-serif;
	font-size:       15px;
	font-weight:     normal;
	font-style:	     normal;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    color:           #000000;
    padding:         10px;
    }
DIV.logosBox, SPAN.logosBox {
    background-color: #efefef;
    box-shadow: 2px 2px 5px grey;
	font-size:       15px;
    padding:         5px;
    }
    
/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ATTRIBUTES AND PROPERTIES FOR LEGAL DOCUMENTS AND NOTES          === */
/* ================================================================================= */
/* ================================================================================= */
DIV.legalText, SPAN.legalText, P.legalText, UL.legalText, OL.legalText, LI.legalText {
    font-family: Verdana, Helvetica, sans-serif;
	font-size:       12px;
	font-weight:     normal;
	font-style:	     italic;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    color:           #000088;
    position:        relative;
    text-align:      left;
    left:            100px;
    /* border-style:solid;    */
    }    
DIV.legalCaption, SPAN.legalCaption, P.legalCaption, UL.legalCaption, OL.legalCaption, LI.legalCaption {
    position:        relative;
    left:            5px;
    font-size:       20px;
    }  
DIV.legalIntro, SPAN.legalIntro, P.legalIntro, UL.legalIntro, OL.legalIntro, LI.legalIntro {
    position:        relative;
    left:            5px;
    font-size:       18px;
   }  
DIV.legalStatmnt, SPAN.legalStatmnt, P.legalStatmnt, UL.legalStatmnt, OL.legalStatmnt, LI.legalStatmnt {
    position:        relative;
    left:            15px;
    font-size:       14px;
   }  

/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ATTRIBUTES AND PROPERTIES FOR LEGAL DOCUMENTS AND NOTES          === */
/* ================================================================================= */
/* ================================================================================= */
DIV.disclaimerText, SPAN.disclaimerText, P.disclaimerText  {
    font-family:     Tahoma, Arial, Helvetica, sans-serif;
	font-size:       10px;
	font-weight:     normal;
	font-style:	     italic;
	text-decoration: none;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    text-align:      center;
    }

DIV.copyrightNotes, SPAN.copyrightNotes, P.copyrightNote {
	font-size:       14px;
    color:           DarkSlateGrey;
    }    
DIV.disclaimerNotes, SPAN.disclaimerNote, P.disclaimerNote {
	font-size:       12px;
    color:           DimGrey;
    }               
 
/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING ATTRIBUTES AND PROPERTIES FOR QUICK INFO POPUP                   === */
/* ================================================================================= */
/* ================================================================================= */
/* === DEFINING POPUP CONTAINER                                                  === */
/* ================================================================================= */
.popup {
   position: relative;
   display: inline-block;
   cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;
}

/* ================================================================================= */
/* === DEFINING THE ACTUAL POPUP BODY                                                 === */
/* ================================================================================= */
.popup .popupBody {
    visibility: hidden;
    z-index: 1;
    /* ---------------------------------------- */
    position: relative;
    top: 300px;
    left: 50%;
    width: 160px;
    margin: 10px;
    padding: 8px 0;
    border-radius: 6px;
    /* ---------------------------------------- */
	font-family:     Tahoma, Arial, Helvetica, sans-serif;
	font-weight:     normal;
	font-style:	     italic;
	text-decoration: none;
    text-align:      center;
    text-shadow:     2px 2px 4px Grey;
	word-spacing:	 normal;
	letter-spacing:	 normal;
	text-transform:	 none;
    /* ---------------------------------------- */
    color:           #0028FF;
    background-color: #dddd33;
}

/* ================================================================================= */
/* === DEFINING THE ACTUAL POPUP APPEARANCE                                      === */
/* ================================================================================= */
/* Popup arrow */
.popup .popupBody::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #aaaaaa #aaaaaa transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 2s;
  animation: fadeIn 2s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
