Difference between revisions of "Template:2016Top"

(Undo revision 39 by Sifuentes anita (talk))
Line 3: Line 3:
 
 
 
/* Clear the default wiki settings */
 
/* Clear the default wiki settings */
−
 
+
 +
/* Remove footer, catlinks and logos */
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{
 +
display: none;
 +
}
 
 
  
 
/*-- Make page full width and remove borders */
 
/*-- Make page full width and remove borders */
−
#globalWrapper, {  
+
#globalWrapper, #content {  
 
width: 100%;  
 
width: 100%;  
 
height: 100%;
 
height: 100%;
−
border: none;
+
border: 0px;
 
background-color: transparent;
 
background-color: transparent;
 
margin: 0px;
 
margin: 0px;
Line 22: Line 26:
 
}
 
}
  
−
/*Styling for the content box */
 
−
#content {
 
−
    width: 950px;
 
−
      padding:15px;
 
−
    border: none;
 
−
    color: black;
 
−
margin-left: 20px;
 
−
    margin-right: auto;
 
−
    background-color: #ffffff;
 
−
    position: relative;
 
−
}
 
−
 
−
/*First heading styling */
 
−
#content H1 {
 
−
font-weight: bold;
 
−
}
 
−
 
−
/*First heading styling */
 
−
.firstHeading {
 
−
    padding-top: 20px;
 
−
border-bottom: none;
 
−
margin-left: 15px;
 
−
 
−
}
 
  
  
Line 53: Line 33:
 
}
 
}
  
−
 
−
 
−
 
−
 
−
 
−
/*STYLING BELLOW " #HQ_page " will apply only to pages created by HQ members */
 
  
  
Line 64: Line 38:
 
/*LAYOUT CLASSES */
 
/*LAYOUT CLASSES */
 
/**************************************************************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************************************************************/
 +
/* General wrap for the pages*/
 +
#contentWrap { 
 +
width: 980px;
 +
height: auto;
 +
float:left;
 +
margin-left: 20px;
 +
margin-top: -10px;
 +
margin-right: auto;
 +
background-color: #ffffff;
 +
}
 +
  
 
/* Full width div */
 
/* Full width div */
−
#HQ_page .oneColumn {
+
.oneColumn {
−
width: 920px;
+
width: 950px;
 
float:left;
 
float:left;
−
padding: 15px;
+
padding:15px;
−
 
+
 
}
 
}
  
 
/*  half width div  - can be mixed with .fourColumns */
 
/*  half width div  - can be mixed with .fourColumns */
−
#HQ_page .twoColumns {
+
.twoColumns {
−
width: 444px;
+
width: 460px;
 
float:left;
 
float:left;
−
padding: 15px;
+
padding:15px;
 
}
 
}
  
  
 
/* one third width div */
 
/* one third width div */
−
#HQ_page .threeColumns {
+
.threeColumns {
−
width: 285px;
+
width: 296.5px;
−
float: left;
+
float:left;
−
padding: 15px;
+
padding:15px;
 
}
 
}
  
 
/* one fourth width div */
 
/* one fourth width div */
−
#HQ_page .fourColumns {
+
.fourColumns {
−
width: 206px;
+
width: 215px;
 
float:left;
 
float:left;
−
padding: 15px;
+
padding:15px;
 
}
 
}
  
  
−
/*Clear, adds spacing 10px*/
+
/*Clear class for all the pages, adds spacing too*/
−
     #HQ_page .clear {
+
     .clear {
 
         height:10px;
 
         height:10px;
 
         clear: both;
 
         clear: both;
 
     }
 
     }
  
−
/*Clear class that ads spacing, when creating a title that will be # referenced in a link, place it in this class*/
 
−
    #HQ_page .clear_id {
 
−
        height:30px;
 
−
        clear: both;
 
−
    }
 
  
 +
/**************************************************************************************************************************************/
  
−
/*CLASSES */
+
/* HIGHLIGHTS */
−
/**********************************************************************************************************************************************************************************************************************************************/
+
  
  
 +
.threeColumns_feature{
 +
width: 296.5px;
 +
float:left;
 +
padding:15px;
  
−
/* EFFECTS / VARIANTS FOR LAYOUT CLASSES */
+
/*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;
 +
}
  
  
−
/*highlight a div on hover*/
+
.twoColumns_Highlight {
−
#HQ_page .highlight {
+
width: 460px;
 +
float:left;
 +
padding:15px;
 +
background-color: #d3d3d3;
 +
}
 +
 
 +
 
 +
 
 +
.fourColumns_feature{
 +
width: 215px;
 +
float:left;
 +
padding:15px;
 +
font-weight:normal;
 +
color:black;
 +
 
 
/*animate transition */
 
/*animate transition */
 
-webkit-transition: background 0.2s linear;
 
-webkit-transition: background 0.2s linear;
Line 127: Line 130:
 
}
 
}
  
−
/* change the color on hover */
+
 
−
#HQ_page .highlight:hover {
+
/*hover state for feature items */
 +
.threeColumns_feature:hover, .fourColumns_feature:hover {
 
background-color:#ebeea9;
 
background-color:#ebeea9;
 
cursor:pointer;
 
cursor:pointer;
Line 134: Line 138:
  
  
−
/* declare a medium gray line around the div*/
+
/**************************************************************************************************************************************************************************************************************************************************/
−
#HQ_page .full_border {
+
/*END LAYOUT CLASSES */
−
border: 1px solid #d3d3d3;
+
−
}
+
  
  
−
/* declare a turquoise dotted border on a div */
 
−
#HQ_page .dot_border {
 
−
border: 1px dashed #5da88a;
 
−
}
 
  
−
/* declare a border on the right of a div  */
 
−
#HQ_page .right_border {
 
−
border-right: 1px solid #f2f2f2;
 
−
}
 
  
−
/* make the background of a div light gray */
 
−
#HQ_page .background_gray {
 
−
background-color: #f2f2f2;
 
−
}
 
  
−
/* remove the padding for a div that contains a picture */
 
−
#HQ_page .photo_container {
 
−
padding:0px;
 
−
margin-right:30px;
 
−
}
 
  
−
#HQ_page .photo_container p{
+
/*MENU */
−
padding:  0px 15px;
+
/**************************************************************************************************************************************************************************************************************************************************/
−
font-size: 11px;
+
−
}
+
  
 +
/*  this div will contain the side menu */
 +
.sideMenu {
 +
width: 170px;
 +
position: absolute;
 +
display:none;
 +
top:20px;
 +
left: 1020px;
 +
z-index: 10;
  
−
/* declares that a div is an alert box */
+
padding-top: 0px;
−
#HQ_page .alert_box{
+
padding-bottom: 15px;
−
background-color: pink;
+
padding-left: 15px;
−
border: 1px solid red;
+
padding-right: 15px;
−
color:red;
+
 
−
font-weight:bold;
+
background-color: white;
−
cursor:pointer;
+
text-align: left;
 
}
 
}
  
  
−
/* styling for the hover of the alert box */
 
−
#HQ_page .alert_box:hover{
 
−
background-color: red;
 
−
border: 1px solid red;
 
−
color:white;
 
−
font-weight:bold;
 
−
}
 
  
 +
.sideMenu ul{
 +
margin-top:0px;
 +
margin-bottom: 0px;
 +
}
  
  
 
/**************************************************************************************************************************************/
 
/**************************************************************************************************************************************/
 +
/*MAIN MENU  STYLING*/
  
 +
/*styling for the Main menu*/
 +
#mainMenu ul li {
 +
width: 183px;
 +
 +
margin-left: -30px;
 +
margin-bottom: 0px;
  
−
/*Buttons for all of the pages */
+
list-style:none;
−
        #HQ_page .button {
+
}
−
            min-width: 25%;
+
 
−
            max-width: 50%;
+
 
−
    border: 3px solid #f58631;
+
/*main menu item */
−
    color: #f58631;
+
.mainMenu_Title {
−
    background-color: #FFF;
+
width: 152px;  
−
    height: 30px;
+
float:left;
−
    font-size: 15px;
+
 
−
    text-align: center;
+
padding-left:15px;  
−
        border-radius: 5px;
+
padding-top: 10px;
−
        padding: 10px 5px 0px 5px;
+
padding-bottom: 10px; 
−
        margin: auto;
+
 
 +
border: solid 1px #f2f2f2;
 +
font-size: 14px;
 +
 
 +
/*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;
 +
}
 +
 
 +
 
 +
/* toggle button in the main Menu */
 +
.mainMenu_toggle {
 +
width: 24px;
 +
text-align: center;
 +
float: left;
 +
font-size: 12px;
 +
margin-right: -17px;
 +
margin-left: -14px;
 +
padding-left: 5px;
 +
padding-bottom: 10px;
 +
padding-top: 10px;
 +
border: solid 1px #f2f2f2;
 +
 
  
 
/*animate transition */
 
/*animate transition */
Line 210: Line 230:
 
-o-transition: background 0.2s linear;
 
-o-transition: background 0.2s linear;
 
transition: background 0.2s linear;
 
transition: background 0.2s linear;
−
    }      
+
}
  
−
/*For the button class, change background on hover */
 
−
        #HQ_page .button:hover {
 
−
    background-color: #f58631;
 
−
    color: #fff;
 
−
    }
 
  
 +
/*hover styling for main menu item and main menu toggle */
 +
.mainMenu_Title:hover, .mainMenu_toggle:hover  {
 +
background: #5da88a;
 +
color:white;
 +
border: solid 1px #5da88a;
 +
} 
  
 +
/**************************************************************************************************************************************/
  
 +
/*MAIN MENU SUB MENUS (NESTED LISTS) */
  
−
/*Class for creating a news post, this is used in the Main Page and in the Archived news page */
+
/* submenu lists */
−
#HQ_page .newsItem {
+
#mainMenu ul li li {
−
border: 1px solid #cccccc;
+
width: 183px;
−
margin: 0px 5px 5px 5px;
+
−
padding: 5px 15px 5px 15px;
+
−
border-radius: 5px;
+
−
}
+
  
 +
margin-bottom: 0px;
 +
margin-left: -15px;
 +
padding-left: 15px;
 +
padding-top: 5px;
 +
padding-bottom:5px;
  
 +
cursor: pointer;
 +
border: solid 1px #f2f2f2;
 +
background-color: white;
 +
color: black;
 +
font-size: 12px;
 +
}
  
  
−
/*Style the date inside a news post */
+
#mainMenu ul li li:hover {
−
#HQ_page .newsDate {
+
background: #5da88a;
−
font-style: italic;  
+
border: solid 1px #5da88a;
−
display: inline-block;  
+
color:white;
−
color: #383838;  
+
}
−
float: right;  
+
 
−
padding-top: 5px;
+
 
−
padding-right: 15px;
+
 
 +
 
 +
 
 +
/* For HUB MENUS */
 +
 
 +
 
 +
#home_logo {margin-bottom:10px;  }
 +
 
 +
#home_logo:hover { opacity: 0.4; }
 +
 
 +
.sideMenuTitle, .expand_subMenus, .switch_Menus {  
 +
height:30px;
 +
padding-top:10px;
 +
float:left;
 +
font-weight:bold;
 +
color: #4e606e;  
 +
background-color:#e8edaa;  
 +
cursor:pointer;  
 +
text-align:center;  
 
}
 
}
  
  
  
 +
/* This switches between menus  */
 +
.switch_Menus {
 +
width:30px;
 +
font-size: 18px;
 +
margin-left:-15px;
 +
display:block;
 +
}
  
  
−
/* ( ? ) POP WHY - Makes a round div that will call the pop up box*/
 
−
#HQ_page .pop_why {
 
−
border: 2px solid #f58631;
 
−
color: #f58631;
 
−
font-weight: bold;
 
−
text-align: center;
 
−
border-radius: 50%;
 
−
float: none;
 
−
margin-right: 5px;
 
−
margin-left: 5px;
 
−
padding-left: 6px;
 
−
padding-top: 2px;
 
−
padding-right: 6px;
 
−
padding-bottom: 2px;
 
−
cursor:pointer;
 
−
        }
 
  
 +
/* This holds the title of the menu  */
 +
.sideMenuTitle  {
 +
width:140px;
 +
margin-left: 0px;
 +
font-size: 16px;
 +
}
  
−
/*For the pop why class, changes the color on hover */
 
−
      #HQ_page .pop_why:hover {
 
−
        color: #fff;
 
−
        background-color:#f58631;
 
−
        }
 
  
  
−
/*For the pop why class,creates the close button X */
+
/* This holds the expand all / collapse all button (+) (-)  */
−
#HQ_page .pop_close {
+
.expand_subMenus {
−
        font-size: 25px;
+
width:30px;
−
        border: 3px solid #f58631;
+
font-size: 20px;
−
        padding: 5px;
+
margin-right:-15px;  
−
        padding-top: 0px;
+
}
−
        padding-right: 10px;
+
−
        color: #f58631;
+
−
        border-radius: 5px;
+
−
        cursor: pointer;
+
−
        font-weight: bold;
+
−
        width: 10px;
+
−
        height: 18px;
+
−
        float: right;
+
−
    }
+
−
   
+
  
−
#HQ_page .pop_close:hover {
 
−
    background-color: #f58631;
 
−
    color: white;
 
−
    }
 
  
  
−
/*For the pop why class, div that holds the content being loaded */
+
.sideMenuTitle:hover, .expand_subMenus:hover, .switch_Menus:hover {
−
    #HQ_page .pop_why_box {
+
background-color:#f17530;  
−
display:none;
+
color:white;
−
left: 250px;
+
}
−
top:0px;
+
−
background-color: white;
+
−
padding: 15px;
+
−
width: 500px;
+
−
position: absolute;
+
−
border: 3px solid #4e606e;
+
−
border-radius: 3px;
+
−
z-index: 100;
+
−
        }
+
  
  
  
 +
.sideMenu h4 {color: #5ba88a;}
 +
.sideMenu a:hover {text-decoration:none;}
  
−
/*creates a div that covers the content - if clicked closes the pop why */
+
/*First layer of lists  (LIST ITEMS)  */
−
      #HQ_page .pop_why_cover {
+
.sideMenu ul  {margin-left: 15px; list-style:disc; }
−
display:none;
+
.sideMenu ol  {margin-left: 17px;}
−
z-index: 100;
+
.sideMenu ul a , .sideMenu ol a{font-weight:bold; color: #4e606e; }
−
    margin-top: -65px;
+
.sideMenu ul a:hover, .sideMenu ol a:hover { color:#f27631;}
−
    margin-left: -40px;
+
−
width: 980px;
+
−
height: 2100px;
+
−
float:left;
+
−
position: absolute;
+
−
opacity: 0.5;
+
−
background-color: #b2b2b2;
+
−
        }
+
  
 +
/*Second layer of lists  (SUBMENUS)  */
 +
.sideMenu ul  ul { margin-left: 15px; list-style: none; color: #4e606e;}
 +
.sideMenu ul  ul a {color: black; font-weight:normal;}
 +
.sideMenu ul  ul a:hover { color:#f27631; cursor:pointer;}
  
−
/*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;
+
.subMenu_toggle {
−
-moz-transition: background 0.2s linear;
+
float:right;  
−
-ms-transition: background 0.2s linear;
+
cursor:pointer;
−
-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 363: Line 361:
  
 
/*VISUAL STYLING*/
 
/*VISUAL STYLING*/
−
/**********************************************************************************************************************************************************************************************************************************************/
+
/**************************************************************************************************************************************************************************************************************************************************/
  
 
/* TEXT */
 
/* TEXT */
  
 
/* styling for text in all the pages */
 
/* styling for text in all the pages */
−
#HQ_page  p {
+
#contentWrap p {
 
font-family: "Arial", Helvetica, sans-serif;  
 
font-family: "Arial", Helvetica, sans-serif;  
 
font-size: 13px;
 
font-size: 13px;
 
text-align: justify;
 
text-align: justify;
 
}
 
}
−
 
−
 
−
 
−
/* styling for the hover of the alert box */
 
−
#HQ_page .red_text {
 
−
color: red;
 
−
font-weight:bold;
 
−
}
 
−
 
  
 
/**************************************************************************************************************************************/
 
/**************************************************************************************************************************************/
Line 387: Line 376:
  
 
/* styling for all the headers in all the pages */
 
/* styling for all the headers in all the pages */
−
#HQ_page h1, h2, h3, h4, h5 {  
+
#contentWrap h1, h2, h3, h4, h5 {  
 
font-family: "Arial", Gadget, sans-serif;  
 
font-family: "Arial", Gadget, sans-serif;  
 
border-bottom:none;
 
border-bottom:none;
 
font-weight: bold;
 
font-weight: bold;
 +
color: black;
 
}
 
}
  
  
 
/*Define color for  h1 titles (black) */
 
/*Define color for  h1 titles (black) */
−
#HQ_page .oneColumn h1,
+
#contentWrap h1 {  
−
#HQ_page .twoColumns h1,
+
−
#HQ_page .threeColumns h1,
+
−
#HQ_page .fourColumns h1,
+
−
#HQ_page .pop_why_content h1 {  
+
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 405: Line 391:
  
 
/*Define color for  h2  titles  (turquoise) */
 
/*Define color for  h2  titles  (turquoise) */
−
#HQ_page .oneColumn h2,
+
#contentWrap h2 {  
−
#HQ_page .twoColumns h2,
+
−
#HQ_page .threeColumns h2,
+
−
#HQ_page .fourColumns h2,
+
−
#HQ_page .pop_why_content h2 {  
+
 
color: #5da88a;
 
color: #5da88a;
 
}
 
}
  
  
−
/*Define color for h3 titles  (navy)*/
+
/*Define color for h4 titles  (navy)*/
−
 
+
#contentWrap  h3, h4 {  
−
#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;
−
}
 
−
 
−
 
−
/*Define color for h4 titles  (red)*/
 
−
#HQ_page .oneColumn h4,
 
−
#HQ_page .twoColumns h4,
 
−
#HQ_page .threeColumns h4,
 
−
#HQ_page .fourColumns h4,
 
−
#HQ_page .pop_why_content h4 {
 
−
color: #e9232f ;
 
 
}
 
}
  
  
 
/*Define color for h5 h6 titles (black)  */
 
/*Define color for h5 h6 titles (black)  */
−
#HQ_page .oneColumn h5,  
+
#contentWrap h5, h6 {  
−
#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 455: Line 413:
  
 
/*Defines the color of links*/
 
/*Defines the color of links*/
−
#HQ_page .oneColumn a,  
+
.oneColumn a, .twoColumns a, .threeColumns a, .fourColumns a {
−
#HQ_page .twoColumns a,  
+
−
#HQ_page .threeColumns a,
+
−
#HQ_page .fourColumns a ,
+
−
#HQ_page .pop_why_content a{
+
 
color:#f58631;
 
color:#f58631;
 
font-weight: bold;
 
font-weight: bold;
Line 467: Line 421:
  
 
  /* Styling links on hover- links are different in menus */
 
  /* Styling links on hover- links are different in menus */
−
#HQ_page .oneColumn a:hover,  
+
.oneColumn a:hover, .twoColumns a:hover, .threeColumns a:hover, .fourColumns a:hover {
−
#HQ_page .twoColumns a:hover,  
+
−
#HQ_page .threeColumns a:hover,  
+
−
#HQ_page .fourColumns a:hover,
+
−
#HQ_page .pop_why_content a:hover {
+
 
color: #fbceac;
 
color: #fbceac;
 
     }
 
     }
 +
 +
 +
 +
  
 
/**************************************************************************************************************************************/
 
/**************************************************************************************************************************************/
Line 479: Line 433:
  
 
/*Styling for all the tables */
 
/*Styling for all the tables */
−
         #HQ_page table {
+
         #contentWrap table {
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
 
border-collapse: collapse;
 
border-collapse: collapse;
Line 491: Line 445:
  
 
/*Styling cells inside all of the tables */
 
/*Styling cells inside all of the tables */
−
#HQ_page td {
+
#contentWrap td {
 
padding: 10px;
 
padding: 10px;
 
border: 1px solid #ccc;
 
border: 1px solid #ccc;
Line 499: Line 453:
  
 
/*Styling table headers for all the tables */
 
/*Styling table headers for all the tables */
−
#HQ_page th {
+
#contentWrap th {
 
background-color:#f2f2f2;
 
background-color:#f2f2f2;
 
padding: 10px;
 
padding: 10px;
Line 508: Line 462:
 
}
 
}
  
−
/**********************************************************************************************************************************************************************************************************************************************/
 
  
  
Line 517: Line 470:
  
  
−
/*MENU */
+
/*CLASSES */
−
/**************************************************************************************************************************************************************************************************************************************************/
+
/*Buttons for all of the pages */
 +
        .button {
 +
            width: 130px;
 +
    border: 2px solid #f58631;
 +
    background-color: #FFF;
 +
    height: 30px;
 +
    text-align: center;
 +
        border-radius: 5px;
 +
        padding: 10px 5px 0px 5px;
 +
        margin: auto;
  
−
/* this div will contain the side menu */
+
/*animate transition */
−
#HQ_page .sideMenu {
+
-webkit-transition: background 0.2s linear;
−
width: 170px;
+
-moz-transition: background 0.2s linear;
−
position: absolute;
+
-ms-transition: background 0.2s linear;
−
display:none;
+
-o-transition: background 0.2s linear;
 +
transition: background 0.2s linear;
 +
    }       
  
−
top:20px;
+
/*For the button class, change background on hover */
−
left: 1020px;
+
        .button:hover {
−
z-index: 10;
+
    background-color: #f58631;
 +
    color: #fff;
 +
    }
  
−
padding-top: 0px;
 
−
padding-bottom: 15px;
 
−
padding-left: 15px;
 
−
padding-right: 15px;
 
  
−
background-color: white;
+
 
−
text-align: left;
+
/*Class for creating a news post, this is used in the Main Page and in the Archived news page */
 +
.newsItem {
 +
border: 1px solid #cccccc;
 +
margin: 0px 5px 5px 5px;
 +
padding: 5px 15px 5px 15px;
 +
border-radius: 5px;
 
}
 
}
  
  
−
/* for all lists created within the sideMenu container - no spacing between top or bottom */
 
−
#HQ_page .sideMenu ul {
 
−
margin-top: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 */  
+
/*Style the date inside a news post */
−
#HQ_page #home_logo {
+
.newsDate {
−
margin-bottom:10px;
+
font-style: italic;
 +
display: inline-block;
 +
color: #383838;
 +
float: right;
 +
padding-top: 5px;
 +
padding-right: 15px;
 
}
 
}
  
−
#HQ_page #home_logo:hover {
 
−
opacity: 0.4;
 
−
}
 
  
  
−
/**************************************************************************************************************************************/
 
−
/*MAIN MENU  STYLING*/
 
  
−
/*styling for the Main menu*/
 
−
#HQ_page #MainPage_menu ul li {
 
−
width: 183px;
 
−
margin-left: -30px;
 
−
margin-bottom: 0px;
 
−
list-style:none;
 
−
}
 
  
 +
/* highlight classes */
  
−
/*main menu button */
 
−
#HQ_page .mainMenu_Title {
 
−
width: 152px;
 
−
float:left;
 
  
−
padding-left:15px;
+
.highlightBoxB {
−
padding-top: 10px;  
+
background-color: #f2f2f2;  
−
padding-bottom: 10px;
+
padding: 10px;
−
 
+
width: 85%;  
−
border: solid 1px #f2f2f2;
+
margin:auto;
−
font-size: 14px;
+
margin-top:10px;
−
 
+
margin-bottom:10px;
−
/*animate transition */
+
border-radius:5px;
−
-webkit-transition: background 0.1s linear;
+
border: 1px solid #ccc;  
−
-moz-transition: background 0.1s linear;
+
−
-ms-transition: background 0.1s linear;
+
−
-o-transition: background 0.1s linear;
+
−
transition: background 0.1s linear;  
+
 
}
 
}
  
  
−
/* toggle button in the main Menu */
+
/*highlight link */
−
#HQ_page .mainMenu_toggle {
+
−
width: 24px;
+
−
text-align: center;
+
−
float: left;
+
−
font-size: 12px;
+
−
margin-right: -17px;
+
−
margin-left: -14px;
+
−
padding-left: 5px;
+
−
padding-bottom: 10px;
+
−
padding-top: 10px;
+
−
border: solid 1px #f2f2f2;
+
−
 
+
  
−
/*animate transition */
+
a.redLink { color: red;}
−
-webkit-transition: background 0.1s linear;
+
−
-moz-transition: background 0.1s linear;
+
−
-ms-transition: background 0.1s linear;
+
−
-o-transition: background 0.1s linear;
+
−
transition: background 0.1s linear;
+
−
}
+
  
 +
a.redLink:hover { color: pink;}
  
−
/*hover styling for main menu item and main menu toggle */
 
−
#HQ_page .mainMenu_Title:hover,
 
−
#HQ_page .mainMenu_toggle:hover  {
 
  
−
border: solid 1px #5da88a;
 
−
background: #5da88a;
 
−
color:white;
 
  
−
}
+
#slideshow {margin-left: -15px; margin-right:-15px;}
  
 +
#slider { overflow: hidden; list-style: none; padding: 0; margin: 0;}
  
  
−
/*MAIN MENU LIST UNDER TOGGLES (NESTED LISTS) */
+
.hide_button {width:25px; height:30px;background-color: #f2f2f2;text-align:center;font-weight:bold;padding-top:5px;cursor:pointer; left:975px; top:20px; position:absolute; z-index:50;}
  
 +
.hide_button:hover { background-color:orange; }
  
−
/* lists inside the toggle */
 
−
#HQ_page #MainPage_menu ul li li {
 
−
width: 183px;
 
  
−
margin-bottom: 0px;
 
−
margin-left: -15px;
 
−
padding-left: 15px;
 
−
padding-top: 5px;
 
−
padding-bottom:5px;
 
  
−
cursor: pointer;
+
/*
−
border: solid 1px #f2f2f2;
+
−
background-color: white;
+
−
color: black;
+
−
font-size: 12px;
+
−
}
+
  
−
/* hover for the lists inside the toggle */
+
#returnMainMenu, #returnCurrentMenu, #TitleMainMenu  {  
−
#HQ_page #MainPage_menu ul li li:hover {
+
width:185px;  
−
border: solid 1px #5da88a;
+
background-color:#f2f2f2;  
−
background: #5da88a;
+
height:30px;  
−
color:white;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/************************************************/
+
−
 
+
−
 
+
−
 
+
−
/* For HUB MENUS */
+
−
 
+
−
 
+
−
/*upper part of hub menus; switching between menus, menu name and collapse/expand all */
+
−
 
+
−
/* This switches between menus    " ▶ " */
+
−
#HQ_page .switch_Menus {
+
−
width:30px;
+
−
font-size: 18px;
+
 
margin-left:-15px;  
 
margin-left:-15px;  
−
display:block;
+
padding-top: 10px;
 +
padding-left: 15px;
 +
cursor:pointer; 
 +
font-weight:bold;
 +
font-size:18px; 
 +
color: #4d5f6d;
 
}
 
}
  
  
 +
#TitleMainMenu  { background-color: #ebeea9; color:#4d5f6d;  }
  
−
/* This holds the title of the menu  "NAME OF HUB MENU " */
 
−
#HQ_page .sideMenuTitle  {
 
−
width:140px;
 
−
margin-left: 0px;
 
−
font-size: 16px;
 
−
}
 
  
−
 
+
#returnMainMenu:hover, #returnCurrentMenu:hover, #TitleMainMenu:hover {  
−
 
+
background-color: #f17530;
−
/* This holds the expand all / collapse all button (+) (-)  */
+
−
#HQ_page .expand_subMenus {
+
−
width:30px;
+
−
font-size: 20px;
+
−
margin-right:-15px;
+
−
}
+
−
 
+
−
 
+
−
/* 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;
 
color:white;
 
}
 
}
  
 +
*/
  
−
/************************************************/
 
−
 
−
/*Lists and nested lists within the hub menu */
 
−
 
−
 
−
 
−
/* h4 titles used in hub menus change to turquoise */
 
−
#HQ_page .sideMenu h4 {
 
−
color: #5ba88a;
 
−
}
 
−
 
−
/* toggle ▼*/
 
−
#HQ_page .subMenu_toggle {
 
−
float:right;
 
−
cursor:pointer;
 
−
}
 
−
 
−
 
−
/*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;
 
−
}
 
  
  
Line 786: Line 590:
  
  
 +
<div id="contentWrap">
  
  
 +
<div class="sideMenu">
  
 +
<a href="https://2015.igem.org/Demo_mainpage"> 
 +
<div id="home_logo" > 
 +
<img  style="float:left;" src="https://static.igem.org/mediawiki/2015/2/2a/Igemlogo_banner.jpg" width="60px"> 
 +
<h1 style="float:left; padding-left:20px; padding-top:20px;"> 2016 </h1>
 +
</div>
 +
</a>
 +
<div style="clear:both;"></div>
  
 +
<div id="menuDisplay">
  
−
 
+
</div>
−
<!----------------------------------------------------------- Declares that pages under this template will use HQ styling --------------------------------------------------------------->
+
−
<div id="HQ_page">
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<!-----------------------------------------------------------Menu --------------------------------------------------------------->
+
−
 
+
−
<div class="sideMenu">
+
−
 
+
−
<a href="https://2015.igem.org/Demo_mainpage"> 
+
−
<div id="home_logo" > 
+
−
<img  style="float:left;" src="https://static.igem.org/mediawiki/2015/2/2a/Igemlogo_banner.jpg" width="60px"> 
+
−
<h1 style="float:left; padding-left:20px; padding-top:20px;"> 2016 </h1>
+
−
</div>
+
−
</a>
+
−
 
+
−
<div style="clear:both; height:5px;"></div>
+
−
 
+
−
<div id="menuDisplay">  <!- Menu will be loaded here ->
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
<!--------------------------------------------------------------------------------------------------------------------------------->
+
−
 
+
−
 
+
−
<!------------------------------------------ Pop why ( ? )  divs - hidden by default ------------------------------------------>
+
−
<div class="pop_why_cover">
+
−
</div>
+
−
 
+
−
 
+
−
<div class="pop_why_box" > <div class="pop_close">× </div>
+
−
<div class="pop_why_content">
+
−
<h3> Loading ... </h3>
+
−
</div>
+
−
</div>
+
−
<!--------------------------------------------------------------------------------------------------------------------------------->
+
−
 
+
−
 
+
  
  
 +
</div>
  
 
</html>
 
</html>

Revision as of 17:54, 30 November 2015