Difference between revisions of "Template:SKLMT-China/template css"

Line 67: Line 67:
 
}
 
}
  
/**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ .igem_2017_menu_wrapper {
+
/**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ .igem_2018_menu_wrapper {
  
 
   width: 15%;
 
   width: 15%;
Line 83: Line 83:
 
}
 
}
  
/* this hides the scrollbar to keep view consistency */ .igem_2017_menu_wrappe::-webkit-scrollbar {
+
/* this hides the scrollbar to keep view consistency */ .igem_2018_menu_wrappe::-webkit-scrollbar {
  
 
   display: none;
 
   display: none;
 
}
 
}
  
/* styling for links in the menu, removes the line under text */ .igem_2017_menu_wrapper a {
+
/* styling for links in the menu, removes the line under text */ .igem_2018_menu_wrapper a {
  
 
   text-decoration: none;
 
   text-decoration: none;
 
}
 
}
  
/* styling for the images in the menu */ .igem_2017_menu_wrapper img {
+
/* styling for the images in the menu */ .igem_2018_menu_wrapper img {
  
 
   width: 100%;
 
   width: 100%;
 
}
 
}
  
/* styling for the menu buttons */ .igem_2017_menu_wrapper .menu_button {
+
/* styling for the menu buttons */ .igem_2018_menu_wrapper .menu_button {
  
 
   width: 100%;
 
   width: 100%;
Line 110: Line 110:
 
}
 
}
  
.igem_2017_menu_wrapper .menu_bottom_padding {
+
.igem_2018_menu_wrapper .menu_bottom_padding {
  
 
   width: 100%;
 
   width: 100%;
Line 122: Line 122:
 
}
 
}
  
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
.igem_2018_menu_wrapper .menu_button .expand_collapse_icon {
  
 
   width: 10%;
 
   width: 10%;
Line 128: Line 128:
 
}
 
}
  
.igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+
.igem_2018_menu_wrapper .menu_button .expand_collapse_icon::before {
  
 
   content: "+";
 
   content: "+";
Line 134: Line 134:
  
  
/* styling for the menu buttons on hover */ .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
+
/* styling for the menu buttons on hover */ .igem_2018_menu_wrapper .menu_button:hover, .igem_2018_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
  
 
   background-color: #3399ff;
 
   background-color: #3399ff;
Line 147: Line 147:
 
}
 
}
  
/* styling for the submenu buttons */ .igem_2017_menu_wrapper .submenu_button {
+
/* styling for the submenu buttons */ .igem_2018_menu_wrapper .submenu_button {
  
 
   width: 100%;
 
   width: 100%;
Line 159: Line 159:
 
}
 
}
  
/* wrapper for the submenu items, they are hidden by default*/ .igem_2017_menu_wrapper .submenu_wrapper {
+
/* wrapper for the submenu items, they are hidden by default*/ .igem_2018_menu_wrapper .submenu_wrapper {
  
 
   display: none;
 
   display: none;
 
}
 
}
  
/* when the page size is bigger than 800px, this show/hide control is hidden by default */ .igem_2017_menu_wrapper #display_menu_control {
+
/* when the page size is bigger than 800px, this show/hide control is hidden by default */ .igem_2018_menu_wrapper #display_menu_control {
  
 
   display: none;
 
   display: none;
Line 172: Line 172:
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
 
/***************************************************** CONTENT OF THE PAGE ****************************************************/
  
/* Wrapper for the content */ .igem_2017_content_wrapper {
+
/* Wrapper for the content */ .igem_2018_content_wrapper {
  
 
   width: 81%;
 
   width: 81%;
Line 184: Line 184:
 
/********************************* HTML STYLING *********************************/
 
/********************************* HTML STYLING *********************************/
  
/* styling for the titles h1 h2 */ .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
+
/* styling for the titles h1 h2 */ .igem_2018_content_wrapper h1, .igem_2018_content_wrapper h2 {
  
 
   padding: 5px 15px;
 
   padding: 5px 15px;
Line 191: Line 191:
 
}
 
}
  
/* styling for the titles h3 h4 h5 h6*/ .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
+
/* styling for the titles h3 h4 h5 h6*/ .igem_2018_content_wrapper h3, .igem_2018_content_wrapper h4, .igem_2018_content_wrapper h5, .igem_2018_content_wrapper h6 {
  
 
   padding: 5px 15px;
 
   padding: 5px 15px;
Line 198: Line 198:
 
}
 
}
  
/* font and text */ .igem_2017_content_wrapper p {
+
/* font and text */ .igem_2018_content_wrapper p {
  
 
   padding: 0px 15px;
 
   padding: 0px 15px;
Line 204: Line 204:
 
}
 
}
  
/* Links */ .igem_2017_content_wrapper a {
+
/* Links */ .igem_2018_content_wrapper a {
  
 
   font-weight: bold;
 
   font-weight: bold;
Line 217: Line 217:
 
}
 
}
  
/* hover for the links */ .igem_2017_content_wrapper a:hover {
+
/* hover for the links */ .igem_2018_content_wrapper a:hover {
  
 
   text-decoration: none;
 
   text-decoration: none;
Line 223: Line 223:
 
}
 
}
  
/* non numbered lists */ .igem_2017_content_wrapper ul {
+
/* non numbered lists */ .igem_2018_content_wrapper ul {
  
 
   padding: 0px 20px;
 
   padding: 0px 20px;
Line 230: Line 230:
 
}
 
}
  
/* numbered lists */ .igem_2017_content_wrapper ol {
+
/* numbered lists */ .igem_2018_content_wrapper ol {
  
 
   padding: 0px;
 
   padding: 0px;
Line 237: Line 237:
 
}
 
}
  
/* Table */ .igem_2017_content_wrapper table {
+
/* Table */ .igem_2018_content_wrapper table {
  
 
   width: 97%;
 
   width: 97%;
Line 245: Line 245:
 
}
 
}
  
/* table cells */ .igem_2017_content_wrapper td {
+
/* table cells */ .igem_2018_content_wrapper td {
  
 
   padding: 10px;
 
   padding: 10px;
Line 253: Line 253:
 
}
 
}
  
/* table headers */ .igem_2017_content_wrapper th {
+
/* table headers */ .igem_2018_content_wrapper th {
  
 
   padding: 10px;
 
   padding: 10px;
Line 264: Line 264:
 
/**********************************LAYOUT CLASSES **********************************/
 
/**********************************LAYOUT CLASSES **********************************/
  
/* general class for column divs */ .igem_2017_content_wrapper .column {
+
/* general class for column divs */ .igem_2018_content_wrapper .column {
  
 
   padding: 10px 0px;
 
   padding: 10px 0px;
Line 294: Line 294:
 
/********************************* SUPPORT CLASSES ********************************/
 
/********************************* SUPPORT CLASSES ********************************/
  
/* class that clears content below*/ .igem_2017_content_wrapper .clear {
+
/* class that clears content below*/ .igem_2018_content_wrapper .clear {
  
 
   clear: both;
 
   clear: both;
 
}
 
}
  
/* adds extra spacing when clearing content */ .igem_2017_content_wrapper .clear.extra_space {
+
/* adds extra spacing when clearing content */ .igem_2018_content_wrapper .clear.extra_space {
  
 
   height: 30px;
 
   height: 30px;
 
}
 
}
  
/* highlight class, makes content slightly smaller */ .igem_2017_content_wrapper .highlight {
+
/* highlight class, makes content slightly smaller */ .igem_2018_content_wrapper .highlight {
  
 
   margin: 0px 15px;
 
   margin: 0px 15px;
Line 310: Line 310:
 
}
 
}
  
/* highlight class, adds a gray background */ .igem_2017_content_wrapper .highlight.gray {
+
/* highlight class, adds a gray background */ .igem_2018_content_wrapper .highlight.gray {
  
 
   background-color: #f2f2f2;
 
   background-color: #f2f2f2;
 
}
 
}
  
/* highlight with decoration blue line on top */ .igem_2017_content_wrapper .highlight.blue_top {
+
/* highlight with decoration blue line on top */ .igem_2018_content_wrapper .highlight.blue_top {
  
 
   border-top: 4px solid #3399ff;
 
   border-top: 4px solid #3399ff;
 
}
 
}
  
/* highlight with a full blue border decoration */ .igem_2017_content_wrapper .highlight.blue_border {
+
/* highlight with a full blue border decoration */ .igem_2018_content_wrapper .highlight.blue_border {
  
 
   border: 4px solid #3399ff;
 
   border: 4px solid #3399ff;
 
}
 
}
  
/* button class */ .igem_2017_content_wrapper .button {
+
/* button class */ .igem_2018_content_wrapper .button {
  
 
   max-width: 35%;
 
   max-width: 35%;
Line 340: Line 340:
 
}
 
}
  
/* styling for button on hover */ .igem_2017_content_wrapper .button:hover {
+
/* styling for button on hover */ .igem_2018_content_wrapper .button:hover {
  
 
   background-color: #3399ff;
 
   background-color: #3399ff;
Line 353: Line 353:
 
       width: 100%;
 
       width: 100%;
 
   }
 
   }
   .igem_2017_menu_wrapper {
+
   .igem_2018_menu_wrapper {
 
       width: 15%;
 
       width: 15%;
 
       right: 0;
 
       right: 0;
Line 360: Line 360:
 
       padding: 10px 0px;
 
       padding: 10px 0px;
 
   }
 
   }
   .igem_2017_menu_wrapper #display_menu_control {
+
   .igem_2018_menu_wrapper #display_menu_control {
 
       display: none;
 
       display: none;
 
   }
 
   }
Line 373: Line 373:
 
/* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) {
 
/* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) {
  
   .igem_2017_menu_wrapper {
+
   .igem_2018_menu_wrapper {
 
       width: 100%;
 
       width: 100%;
 
       height: 15%;
 
       height: 15%;
Line 379: Line 379:
 
       left: 0%;
 
       left: 0%;
 
   }
 
   }
   .igem_2017_content_wrapper {
+
   .igem_2018_content_wrapper {
 
       width: 100%;
 
       width: 100%;
 
       margin-left: 0px;
 
       margin-left: 0px;
Line 393: Line 393:
 
       padding: 15px 5px;
 
       padding: 15px 5px;
 
   }
 
   }
   .igem_2017_menu_wrapper #display_menu_control {
+
   .igem_2018_menu_wrapper #display_menu_control {
 
       display: block;
 
       display: block;
 
   }
 
   }
Line 399: Line 399:
 
       display: none;
 
       display: none;
 
   }
 
   }
   .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
   .igem_2018_menu_wrapper .menu_button .expand_collapse_icon {
 
       width: 5%;
 
       width: 5%;
 
   }
 
   }

Revision as of 12:31, 4 October 2018