Difference between revisions of "Template:2016Demo"

 
(28 intermediate revisions by the same user not shown)
Line 10: Line 10:
 
width: 100%;  
 
width: 100%;  
 
height: 100%;
 
height: 100%;
−
border: 0px;
+
border: none;
 
background-color: transparent;
 
background-color: transparent;
 
margin: 0px;
 
margin: 0px;
Line 25: Line 25:
 
#content {
 
#content {
 
     width: 950px;
 
     width: 950px;
−
        height: auto;
 
−
      float: left;
 
 
       padding:15px;
 
       padding:15px;
 
     border: none;
 
     border: none;
 +
    color: black;
 
margin-left: 20px;
 
margin-left: 20px;
−
    margin-top: -10px;
 
 
     margin-right: auto;
 
     margin-right: auto;
−
     background-color: #ffffff;
+
     background-color: #ffffff;
−
     position: initial;  
+
     position: relative;  
 
}
 
}
  
Line 66: Line 64:
 
/*LAYOUT CLASSES */
 
/*LAYOUT CLASSES */
 
/**************************************************************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************************************************************/
−
 
  
 
/* Full width div */
 
/* Full width div */
Line 162: Line 159:
 
padding:0px;
 
padding:0px;
 
margin-right:30px;
 
margin-right:30px;
 +
}
 +
 +
#HQ_page .photo_container p{
 +
padding:  0px 15px;
 +
font-size: 11px;
 
}
 
}
  
Line 182: Line 184:
 
font-weight:bold;
 
font-weight:bold;
 
}
 
}
 +
  
  
Line 189: Line 192:
 
/*Buttons for all of the pages */
 
/*Buttons for all of the pages */
 
         #HQ_page .button {
 
         #HQ_page .button {
−
             min-width: 130px;
+
             min-width: 25%;
−
             max-width: inherit;
+
             max-width: 50%;
 
     border: 3px solid #f58631;
 
     border: 3px solid #f58631;
 +
    color: #f58631;
 
     background-color: #FFF;
 
     background-color: #FFF;
 
     height: 30px;
 
     height: 30px;
Line 291: Line 295:
  
 
/*For the pop why class,  div that holds the content being loaded */
 
/*For the pop why class,  div that holds the content being loaded */
−
     #HQ_page .pop_why_content {
+
     #HQ_page .pop_why_box {
 
display:none;
 
display:none;
 
left: 250px;
 
left: 250px;
Line 320: Line 324:
 
background-color: #b2b2b2;
 
background-color: #b2b2b2;
 
         }
 
         }
 +
 +
 +
/*click class for expandable content */
 +
      #HQ_page .click_open {
 +
padding: 10px 15px;
 +
background-color: #f2f2f2;
 +
border: 1px solid #d3d3d3;
 +
border-radius: 3px;
 +
cursor:pointer;
 +
 +
/*animate transition */
 +
-webkit-transition: background 0.2s linear;
 +
-moz-transition: background 0.2s linear;
 +
-ms-transition: background 0.2s linear;
 +
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
}
 +
 +
 +
      #HQ_page .click_icon {
 +
font-size:16px;
 +
float:right;
 +
margin-top:-25px;
 +
      }
 +
 +
 +
 +
/*div that holds the toggle content, hide by default */
 +
      #HQ_page .click_content {
 +
display:none;
 +
      }
  
 
/**********************************************************************************************************************************************************************************************************************************************/
 
/**********************************************************************************************************************************************************************************************************************************************/
Line 338: Line 373:
 
text-align: justify;
 
text-align: justify;
 
}
 
}
 +
 +
 +
 +
/* styling for the hover of the alert box */
 +
#HQ_page .red_text {
 +
color: red;
 +
font-weight:bold;
 +
}
 +
  
 
/**************************************************************************************************************************************/
 
/**************************************************************************************************************************************/
Line 351: Line 395:
  
 
/*Define color for  h1 titles (black) */
 
/*Define color for  h1 titles (black) */
−
#HQ_page h1 {  
+
#HQ_page .oneColumn h1,
 +
#HQ_page .twoColumns h1,
 +
#HQ_page .threeColumns h1,
 +
#HQ_page .fourColumns h1,
 +
#HQ_page .pop_why_content h1 {  
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 357: Line 405:
  
 
/*Define color for  h2  titles  (turquoise) */
 
/*Define color for  h2  titles  (turquoise) */
−
#HQ_page h2 {  
+
#HQ_page .oneColumn h2,
 +
#HQ_page .twoColumns h2,
 +
#HQ_page .threeColumns h2,
 +
#HQ_page .fourColumns h2,
 +
#HQ_page .pop_why_content h2 {  
 
color: #5da88a;
 
color: #5da88a;
 
}
 
}
Line 363: Line 415:
  
 
/*Define color for h3 titles  (navy)*/
 
/*Define color for h3 titles  (navy)*/
−
#HQ_page h3{  
+
 
 +
#HQ_page .oneColumn h3,
 +
#HQ_page .twoColumns h3,
 +
#HQ_page .threeColumns h3,
 +
#HQ_page .fourColumns h3,
 +
#HQ_page .pop_why_content h3 {  
 
color: #4d5f6d;
 
color: #4d5f6d;
 
}
 
}
Line 379: Line 436:
  
 
/*Define color for h5 h6 titles (black)  */
 
/*Define color for h5 h6 titles (black)  */
−
#HQ_page h5, h6 {  
+
#HQ_page .oneColumn h5,  
 +
#HQ_page .twoColumns h5,
 +
#HQ_page .threeColumns h5,
 +
#HQ_page .fourColumns h5,
 +
#HQ_page .pop_why_content h5,
 +
#HQ_page .oneColumn h6,
 +
#HQ_page .twoColumns h6,
 +
#HQ_page .threeColumns h6,
 +
#HQ_page .fourColumns h6,
 +
#HQ_page .pop_why_content h6{  
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 478: Line 544:
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 
}
 
}
 +
 +
/* al links within side menu have no decoration */
 +
#HQ_page .sideMenu a:hover {
 +
text-decoration:none;
 +
}
 +
 +
/* 2016 logo for top part of all menus */
 +
#HQ_page #home_logo {
 +
margin-bottom:10px; 
 +
}
 +
 +
#HQ_page #home_logo:hover {
 +
opacity: 0.4;
 +
}
  
  
Line 486: Line 566:
 
#HQ_page #MainPage_menu ul li {
 
#HQ_page #MainPage_menu ul li {
 
width: 183px;
 
width: 183px;
−
 
 
margin-left: -30px;
 
margin-left: -30px;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
−
 
 
list-style:none;
 
list-style:none;
 
}  
 
}  
  
  
−
/*main menu item */
+
/*main menu button */
 
#HQ_page .mainMenu_Title {
 
#HQ_page .mainMenu_Title {
 
width: 152px;  
 
width: 152px;  
Line 507: Line 585:
  
 
/*animate transition */
 
/*animate transition */
−
-webkit-transition: background 0.2s linear;
+
-webkit-transition: background 0.1s linear;
−
-moz-transition: background 0.2s linear;
+
-moz-transition: background 0.1s linear;
−
-ms-transition: background 0.2s linear;
+
-ms-transition: background 0.1s linear;
−
-o-transition: background 0.2s linear;
+
-o-transition: background 0.1s linear;
−
transition: background 0.2s linear;  
+
transition: background 0.1s linear;  
 
}
 
}
  
Line 530: Line 608:
  
 
/*animate transition */
 
/*animate transition */
−
-webkit-transition: background 0.2s linear;
+
-webkit-transition: background 0.1s linear;
−
-moz-transition: background 0.2s linear;
+
-moz-transition: background 0.1s linear;
−
-ms-transition: background 0.2s linear;
+
-ms-transition: background 0.1s linear;
−
-o-transition: background 0.2s linear;
+
-o-transition: background 0.1s linear;
−
transition: background 0.2s linear;
+
transition: background 0.1s linear;
 
}
 
}
  
Line 548: Line 626:
 
}   
 
}   
  
−
/**************************************************************************************************************************************/
 
  
−
/*MAIN MENU SUB MENUS (NESTED LISTS) */
 
  
−
/* submenu lists */
+
/*MAIN MENU LIST UNDER TOGGLES (NESTED LISTS) */
 +
 
 +
 
 +
/* lists inside the toggle */
 
#HQ_page #MainPage_menu ul li li {
 
#HQ_page #MainPage_menu ul li li {
 
width: 183px;
 
width: 183px;
Line 569: Line 648:
 
}  
 
}  
  
−
 
+
/* hover for the lists inside the toggle */
 
#HQ_page #MainPage_menu ul li li:hover {
 
#HQ_page #MainPage_menu ul li li:hover {
 
border: solid 1px #5da88a;
 
border: solid 1px #5da88a;
Line 579: Line 658:
  
  
 +
/************************************************/
  
−
/* For HUB MENUS */
 
  
  
−
#HQ_page #home_logo {
+
/* For HUB MENUS */
−
margin-bottom:10px; 
+
−
}
+
  
−
#HQ_page #home_logo:hover {
 
−
opacity: 0.4;
 
−
}
 
−
 
−
#HQ_page .sideMenuTitle, #HQ_page .expand_subMenus, #HQ_page .switch_Menus {
 
−
height:30px;
 
−
padding-top:10px;
 
−
float:left;
 
−
font-weight:bold;
 
−
color: #4e606e;
 
−
background-color:#e8edaa;
 
−
cursor:pointer;
 
−
text-align:center;
 
−
}
 
−
 
−
 
−
#HQ_page .sideMenuTitle:hover, #HQ_page .expand_subMenus:hover, #HQ_page .switch_Menus:hover {
 
−
background-color:#f17530;
 
−
color:white;
 
−
}
 
  
 +
/*upper part of hub menus; switching between menus, menu name and collapse/expand all */
  
−
/* This switches between menus */
+
/* This switches between menus     " ▶ " */
 
#HQ_page .switch_Menus {
 
#HQ_page .switch_Menus {
 
width:30px;
 
width:30px;
Line 619: Line 677:
  
  
−
/* This holds the title of the menu  */
+
/* This holds the title of the menu  "NAME OF HUB MENU " */
 
#HQ_page .sideMenuTitle  {  
 
#HQ_page .sideMenuTitle  {  
 
width:140px;
 
width:140px;
Line 636: Line 694:
  
  
 +
/* declares the height and color that three elements have in common */
 +
#HQ_page .sideMenuTitle, #HQ_page .expand_subMenus, #HQ_page .switch_Menus {
 +
height:30px;
 +
padding-top:10px;
 +
float:left;
 +
font-weight:bold;
 +
color: #4e606e;
 +
background-color:#e8edaa;
 +
cursor:pointer;
 +
text-align:center;
 +
}
  
  
 +
/* declares hover state, background turns orange and font becomes white */
 +
#HQ_page .sideMenuTitle:hover, #HQ_page .expand_subMenus:hover, #HQ_page .switch_Menus:hover {
 +
background-color:#f17530;
 +
color:white;
 +
}
  
  
 +
/************************************************/
  
−
#HQ_page .sideMenu h4 {color: #5ba88a;}
+
/*Lists and nested lists within the hub menu */
−
#HQ_page .sideMenu a:hover {text-decoration:none;}
+
  
−
/*First layer of lists  (LIST ITEMS)  */
 
−
#HQ_page .sideMenu ul  {margin-left: 15px; list-style:disc; }
 
−
#HQ_page .sideMenu ol  {margin-left: 17px;}
 
−
#HQ_page .sideMenu ul a , #HQ_page .sideMenu ol a{font-weight:bold; color: #4e606e; }
 
−
#HQ_page .sideMenu ul a:hover, #HQ_page .sideMenu ol a:hover { color:#f27631;}
 
−
 
−
/*Second layer of lists  (SUBMENUS)  */
 
−
#HQ_page .sideMenu ul  ul { margin-left: 15px; list-style: none; color: #4e606e;}
 
−
#HQ_page .sideMenu ul  ul a {color: black; font-weight:normal;}
 
−
#HQ_page .sideMenu ul  ul a:hover { color:#f27631; cursor:pointer;}
 
  
  
 +
/* h4 titles used in hub menus change to turquoise */
 +
#HQ_page .sideMenu h4 {
 +
color: #5ba88a;
 +
}
  
 +
/* toggle ▼*/
 
#HQ_page .subMenu_toggle {  
 
#HQ_page .subMenu_toggle {  
 
float:right;  
 
float:right;  
Line 663: Line 732:
  
  
−
/**********************************************************************************************************************************************************************************************************************************************/
+
/*First layer of lists  (LIST ITEMS)  */
  
 +
/* remove indentation in not numbered lists */
 +
#HQ_page .sideMenu ul  {
 +
margin-left: 15px;
 +
list-style:disc;
 +
}
  
 +
/* remove indentation in numbered lists */
 +
#HQ_page .sideMenu ol  {
 +
margin-left: 17px;
 +
}
  
 +
/* declare the color of links in both types of lists */
 +
#HQ_page .sideMenu ul a , #HQ_page .sideMenu ol a {
 +
font-weight:bold;
 +
color: #4e606e;
 +
}
  
 +
/* declare the color of links in hover state  in both types of lists */
 +
#HQ_page .sideMenu ul a:hover, #HQ_page .sideMenu ol a:hover {
 +
color:#f27631;
 +
}
  
  
  
 +
/*Second layer of lists  (SUBMENUS)  */
  
 +
/* styling for nested lists */
 +
#HQ_page .sideMenu ul  ul {
 +
margin-left: 15px;
 +
list-style: none;
 +
color: #4e606e;
 +
}
 +
 +
/* styling for links in nested lists */
 +
#HQ_page .sideMenu ul  ul a {
 +
color: black;
 +
font-weight:normal;
 +
}
 +
 +
/*styling for hover state of links in nested lists */
 +
#HQ_page .sideMenu ul  ul a:hover {
 +
color:#f27631;
 +
cursor:pointer;
 +
}
  
  
 
</style>
 
</style>
 +
 +
 +
 +
 +
 +
 +
 +
  
  
Line 708: Line 822:
 
</div>
 
</div>
  
−
<div class="pop_why_content" >  
+
 
−
<h3> Loading ... </h3>
+
<div class="pop_why_box" > <div class="pop_close">× </div>
 +
<div class="pop_why_content">
 +
<h3> Loading ... </h3>
 +
</div>
 
</div>
 
</div>
 
<!--------------------------------------------------------------------------------------------------------------------------------->
 
<!--------------------------------------------------------------------------------------------------------------------------------->

Latest revision as of 17:47, 30 November 2015

×

Loading ...