Line 67: | Line 67: | ||
} | } | ||
− | /**************************************************************** MENU ***************************************************************/ /* Wrapper for the menu */ . | + | /**************************************************************** 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 */ . | + | /* 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 */ . | + | /* 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 */ . | + | /* styling for the images in the menu */ .igem_2018_menu_wrapper img { |
width: 100%; | width: 100%; | ||
} | } | ||
− | /* styling for the menu buttons */ . | + | /* styling for the menu buttons */ .igem_2018_menu_wrapper .menu_button { |
width: 100%; | width: 100%; | ||
Line 110: | Line 110: | ||
} | } | ||
− | . | + | .igem_2018_menu_wrapper .menu_bottom_padding { |
width: 100%; | width: 100%; | ||
Line 122: | Line 122: | ||
} | } | ||
− | . | + | .igem_2018_menu_wrapper .menu_button .expand_collapse_icon { |
width: 10%; | width: 10%; | ||
Line 128: | Line 128: | ||
} | } | ||
− | . | + | .igem_2018_menu_wrapper .menu_button .expand_collapse_icon::before { |
content: "+"; | content: "+"; | ||
Line 134: | Line 134: | ||
− | /* styling for the menu buttons on 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 */ . | + | /* 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*/ . | + | /* 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 */ . | + | /* 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 */ . | + | /* 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 */ . | + | /* 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*/ . | + | /* 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 */ . | + | /* font and text */ .igem_2018_content_wrapper p { |
padding: 0px 15px; | padding: 0px 15px; | ||
Line 204: | Line 204: | ||
} | } | ||
− | /* Links */ . | + | /* Links */ .igem_2018_content_wrapper a { |
font-weight: bold; | font-weight: bold; | ||
Line 217: | Line 217: | ||
} | } | ||
− | /* hover for the links */ . | + | /* hover for the links */ .igem_2018_content_wrapper a:hover { |
text-decoration: none; | text-decoration: none; | ||
Line 223: | Line 223: | ||
} | } | ||
− | /* non numbered lists */ . | + | /* non numbered lists */ .igem_2018_content_wrapper ul { |
padding: 0px 20px; | padding: 0px 20px; | ||
Line 230: | Line 230: | ||
} | } | ||
− | /* numbered lists */ . | + | /* numbered lists */ .igem_2018_content_wrapper ol { |
padding: 0px; | padding: 0px; | ||
Line 237: | Line 237: | ||
} | } | ||
− | /* Table */ . | + | /* Table */ .igem_2018_content_wrapper table { |
width: 97%; | width: 97%; | ||
Line 245: | Line 245: | ||
} | } | ||
− | /* table cells */ . | + | /* table cells */ .igem_2018_content_wrapper td { |
padding: 10px; | padding: 10px; | ||
Line 253: | Line 253: | ||
} | } | ||
− | /* table headers */ . | + | /* table headers */ .igem_2018_content_wrapper th { |
padding: 10px; | padding: 10px; | ||
Line 264: | Line 264: | ||
/**********************************LAYOUT CLASSES **********************************/ | /**********************************LAYOUT CLASSES **********************************/ | ||
− | /* general class for column divs */ . | + | /* 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*/ . | + | /* class that clears content below*/ .igem_2018_content_wrapper .clear { |
clear: both; | clear: both; | ||
} | } | ||
− | /* adds extra spacing when clearing content */ . | + | /* adds extra spacing when clearing content */ .igem_2018_content_wrapper .clear.extra_space { |
height: 30px; | height: 30px; | ||
} | } | ||
− | /* highlight class, makes content slightly smaller */ . | + | /* 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 */ . | + | /* 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 */ . | + | /* 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 */ . | + | /* highlight with a full blue border decoration */ .igem_2018_content_wrapper .highlight.blue_border { |
border: 4px solid #3399ff; | border: 4px solid #3399ff; | ||
} | } | ||
− | /* button class */ . | + | /* button class */ .igem_2018_content_wrapper .button { |
max-width: 35%; | max-width: 35%; | ||
Line 340: | Line 340: | ||
} | } | ||
− | /* styling for button on 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_2018_menu_wrapper { |
width: 15%; | width: 15%; | ||
right: 0; | right: 0; | ||
Line 360: | Line 360: | ||
padding: 10px 0px; | padding: 10px 0px; | ||
} | } | ||
− | . | + | .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_2018_menu_wrapper { |
width: 100%; | width: 100%; | ||
height: 15%; | height: 15%; | ||
Line 379: | Line 379: | ||
left: 0%; | left: 0%; | ||
} | } | ||
− | . | + | .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_2018_menu_wrapper #display_menu_control { |
display: block; | display: block; | ||
} | } | ||
Line 399: | Line 399: | ||
display: none; | display: none; | ||
} | } | ||
− | . | + | .igem_2018_menu_wrapper .menu_button .expand_collapse_icon { |
width: 5%; | width: 5%; | ||
} | } |
Revision as of 12:31, 4 October 2018