Difference between revisions of "Template:Main2018"

Line 174: Line 174:
 
});
 
});
  
−
 
−
 
−
 
−
 
−
</script>
 
  
  
Line 216: Line 211:
  
  
−
.logo_container { float:left; width:80%; }
+
.logo_container {  
 +
float:left;  
 +
width:80%;  
 +
}
  
 
/* class that shows the menu is displayed while the menu is loading */
 
/* class that shows the menu is displayed while the menu is loading */
Line 248: Line 246:
 
}
 
}
  
−
.submenu_access:hover { background-color: #f2f2f2;}
+
.submenu_access:hover {  
 +
background-color: #f2f2f2;
 +
}
  
−
  .submenu > .submenu_access:hover { background-color: #ffffff;}
+
  .submenu > .submenu_access:hover {  
 +
background-color: #ffffff;
 +
}
  
  
−
.menu_icon { width: 20%; float:left;}
+
.menu_icon {  
 +
width: 20%;  
 +
float:left;
 +
}
  
  
Line 262: Line 267:
 
   
 
   
 
/* styling for menu items in the menu */
 
/* styling for menu items in the menu */
−
.menu_item { float:left; padding: 9px 0px 7px 0px; font-weight: bold;  color: #000000;}
+
.menu_item {  
 +
float:left;  
 +
padding: 9px 0px 7px 0px;  
 +
font-weight: bold;   
 +
color: #000000;
 +
}
  
−
.submenu_item.current_page, .menu_item_wrapper.current_page, .sub_submenu_item.current_page { background-color: #97c998;}
+
.submenu_item.current_page, .menu_item_wrapper.current_page, .sub_submenu_item.current_page {  
 +
background-color: #97c998;
 +
}
  
−
.submenu_item.with_submenu_items { width: 70%;}
+
.submenu_item.with_submenu_items {  
 +
width: 70%;
 +
}
  
 
/* defines width - for menu items that take you to a page */
 
/* defines width - for menu items that take you to a page */
Line 317: Line 331:
 
}
 
}
  
−
.submenu > .submenu_access { background-color: #f2f2f2;    border-bottom: 1px solid #d3d3d3; margin:0px;}
+
.submenu > .submenu_access {  
 +
background-color: #f2f2f2;     
 +
border-bottom: 1px solid #d3d3d3;  
 +
margin:0px;
 +
}
  
 
.menu_title {
 
.menu_title {
Line 331: Line 349:
  
  
−
.submenu_item {    width: 100%;
+
.submenu_item {     
−
    background-color: #f2f2f2;
+
width: 100%;
−
    padding: 10px 0px 10px 10%;
+
    background-color: #f2f2f2;
−
    float: left;
+
  padding: 10px 0px 10px 10%;
−
    border-bottom: 1px solid #d3d3d3;
+
    float: left;
−
    color: black;
+
    border-bottom: 1px solid #d3d3d3;
−
    font-weight: bold;}
+
    color: black;
 +
    font-weight: bold;
 +
}
 
 
  
Line 346: Line 366:
  
  
−
.collapsable_menu_control {
+
.collapsable_menu_control {
−
    width: 100%;
+
    width: 100%;
−
    padding: 15px 0px;
+
  padding: 15px 0px;
−
    display: none;
+
    display: none;
−
float:left;
+
float:left;
−
    background-color: #f2f2f2;
+
    background-color: #f2f2f2;
−
    text-align: center;
+
    text-align: center;
−
    font-weight: bold;
+
    font-weight: bold;
−
    color: #5e5f5f;
+
    color: #5e5f5f;
−
    cursor: pointer;
+
    cursor: pointer;
−
}
+
}
 +
 
 +
 
 +
.collapsable_menu_control:hover {
 +
background-color: #10996a;
 +
color: #ffffff;
 +
}
 +
 
  
  
−
.collapsable_menu_control:hover {
 
−
background-color: #10996a;
 
−
color: #ffffff;
 
−
}
 
  
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/
Line 369: Line 392:
 
.igem_content_wrapper {
 
.igem_content_wrapper {
 
width: 81%;
 
width: 81%;
 +
max-width: 1600px;
 +
margin: 2%;
 
float:left;  
 
float:left;  
 +
display:block;
 
background-color:white;  
 
background-color:white;  
−
margin: 2%;
 
−
display:block;
 
 
}
 
}
  
−
/* class for when the menu is not shown and the content occupies the whole screen */
 
−
.igem_content_wrapper.full_screen {
 
−
width: 96%;
 
−
}
 
  
−
 
+
/*LAYOUT CLASSES*/
−
/*LAYOUT */
+
 
.column  {  
 
.column  {  
−
padding: 10px 0px;
+
padding: 0px;
−
float:left;  
+
margin: 1% 2%;
 +
float:left;
 
}
 
}
  
−
 
+
/* 100% */
−
 
+
 
.full_size {
 
.full_size {
−
width:100%;  
+
width:96%;  
 
}
 
}
  
−
.full_size img {  
+
/* 66% */
−
padding: 10px 15px;
+
.two_thirds_size {
−
width:97.5%;  
+
width: 62.6%;  
 
}
 
}
  
−
.half_size {
+
/* 33% */
−
width: 50%;  
+
.third_size {
 +
width: 29.3%;  
 
}
 
}
  
−
.half_size img {  
+
/* 75% */
−
padding: 10px 15px;
+
.three_quarter_size {
−
width: 93%;  
+
width: 71%;  
 
}
 
}
  
−
 
+
/* 50% */
−
.third_size {
+
.half_size {
−
width: 33.3%;  
+
width: 46%;  
 
}
 
}
−
.third_size img {  
+
−
padding: 10px 15px;
+
/* 25% */
−
width: 92%;  
+
.quarter_size {
 +
width: 21%;  
 
}
 
}
−
 
−
 
−
 
−
.fourth_size {
 
−
width: 25%;
 
−
}
 
−
.fourth_size img {
 
−
padding: 10px 15px;
 
−
width: 92%;
 
−
}
 
−
 
−
 
−
 
  
 
.clear {
 
.clear {
Line 433: Line 441:
 
}
 
}
  
−
.clear.extra_space {
+
.clear.extra_space {
−
height: 30px;
+
height: 30px;
−
}
+
}
−
 
+
−
 
+
−
.line_divider {
+
−
    border-top: 1px solid #d3d3d3;
+
−
    width: 98%;
+
−
    margin: auto;
+
−
}
+
  
  
 +
.line_divider {
 +
    border-top: 1px solid #d3d3d3;
 +
  width: 98%;
 +
    margin: auto;
 +
}
  
 
.highlight {  
 
.highlight {  
Line 471: Line 477:
 
}
 
}
  
−
.highlight.turquoise_top {
+
.highlight.decoration_top, .highlight.turquoise_top {
 
     border-top: 4px solid #10996a;
 
     border-top: 4px solid #10996a;
 
}
 
}
  
  
−
.highlight.turquoise_border {
+
.patrollink {display:none;}
−
    border: 4px solid #10996a;
+
 
 +
 
 +
/*STYLING */
 +
 
 +
/* styling for the titles */
 +
.igem_content_wrapper h1, .igem_content_wrapper h2 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #009d77;
 
}
 
}
  
  
 +
.igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #000000; 
 +
}
  
−
.patrollink {display:none;}
 
  
 +
/* font and text */
 +
.igem_content_wrapper p {
 +
padding:0px 15px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
  
−
.turquoise_full {
+
/* Links */
−
border: 4px solid #10996a;
+
.igem_content_wrapper a {  
−
}
+
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#10996a;
 +
color: #10996a;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
  
−
.yellow_full {
+
/* hover for the links */
−
border: 4px solid #ffe000;
+
.igem_content_wrapper a:hover {  
−
}
+
text-decoration:none;
 +
color:#000000;
 +
}
  
−
.blue_full {
+
/* non numbered lists */
−
border: 4px solid #00bccc;
+
.igem_content_wrapper ul {
−
}
+
padding:0px 20px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;  
 +
}
  
 +
/* numbered lists */
 +
.igem_content_wrapper ol {
 +
padding:0px;
 +
font-size: 13px;
 +
font-family:Tahoma, Geneva, sans-serif;
 +
}
  
−
.highlight.news_item {
+
/* Table */
−
    border: 2px solid #d3d3d3;
+
.igem_content_wrapper table {  
−
    margin: auto;
+
width: 97%;  
−
    height: auto;
+
margin:15px 10px;  
−
    overflow: auto;
+
border: 1px solid #d3d3d3;  
−
width: 97%;
+
border-collapse: collapse;  
−
}
+
}
  
−
.news_date {
+
/* table cells */
−
font-style: italic;
+
.igem_content_wrapper  td {  
−
    display: inline-block;
+
padding: 10px;
−
    color: #333333;
+
vertical-align: text-top;  
−
    float: right;
+
border: 1px solid #d3d3d3;  
−
    padding-top: 5px;
+
border-collapse: collapse;  
−
    padding-right: 15px;
+
}
−
}
+
  
 +
/* table headers */
 +
.igem_content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
 +
 +
 +
/* SUPPORT CLASSES*/
 +
 +
/*Button class */
 +
.button {
 +
margin: auto;
 +
text-align: center;
 +
font-size: 15px;
 +
margin: 30px 0px;
 +
}
 +
 +
.button a,  #bodyContent a[href ^="https://"], .link-https {
 +
color: #414042 !important;
 +
font-weight: bold;
 +
margin: auto;
 +
text-decoration: none !important;
 +
background-color: #97c998;
 +
padding: 10px 15px;
 +
}
 +
 +
.button a:hover , #bodyContent a[href ^="https://"]:hover, .link-https {
 +
background-color: #414042; 
 +
color: #97c998 !important;
 +
}
  
 +
/*Expand collapse button */
 
.expand_content.first{
 
.expand_content.first{
 
float:left;  
 
float:left;  
Line 558: Line 635:
 
}
 
}
  
 +
/*News items */
 +
.highlight.news_item {
 +
    border: 2px solid #d3d3d3;
 +
    margin: auto;
 +
    height: auto;
 +
    overflow: auto;
 +
width: 97%;
 +
}
  
 +
.news_date {
 +
font-style: italic;
 +
    display: inline-block;
 +
    color: #333333;
 +
    float: right;
 +
    padding-top: 5px;
 +
    padding-right: 15px;
 +
}
  
−
.button {
+
/*Multiple links */
−
margin: auto;
+
.multiple_links a{
−
text-align: center;
+
color: black !important;
−
font-size: 15px;
+
−
margin: 30px 0px;
+
 
}
 
}
  
−
.button a,  #bodyContent a[href ^="https://"], .link-https {
+
.multiple_links a:hover {
−
color: #414042 !important;
+
color: #10996a !important;
−
font-weight: bold;
+
−
margin: auto;
+
−
text-decoration: none !important;
+
−
background-color: #97c998;
+
−
padding: 10px 15px;
+
 
}
 
}
−
 
−
.button a:hover , #bodyContent a[href ^="https://"]:hover, .link-https {
 
−
background-color: #414042; 
 
−
color: #97c998 !important;
 
−
}
 
−
 
−
.multiple_links a{
 
−
color: black !important;
 
−
}
 
−
 
−
.multiple_links a:hover {
 
−
color: #10996a !important;
 
−
}
 
−
 
  
  
−
/* image slider styling */
+
/* image slider styling */
 
ul.image_slider {
 
ul.image_slider {
 
list-style: none;
 
list-style: none;
Line 603: Line 675:
  
  
 +
/*Navigation support */
 +
.column.full_size.navigation_support {
 +
    padding: 0px 0px 0px 20px;
 +
}
  
−
.column.full_size.navigation_support {
+
.navigation_button {  
−
    padding: 0px 0px 0px 20px;
+
    background-color: #ffffff;
−
}
+
    border: 2px solid #5e5f5f;
 +
  color: #10996a;
 +
    max-width: 40px;
 +
    text-align: center;
 +
    padding: 3px 0px;
 +
    font-size: 13px;
 +
    cursor: pointer;
 +
    border-radius: 50%;
 +
    float: left;
 +
    width: 25px;
 +
    margin-right: 10px;
 +
margin-top: 3px;
 +
}
  
−
.navigation_button { 
 
−
    background-color: #ffffff;
 
−
    border: 2px solid #5e5f5f;
 
−
    color: #10996a;
 
−
    max-width: 40px;
 
−
    text-align: center;
 
−
    padding: 3px 0px;
 
−
    font-size: 13px;
 
−
    cursor: pointer;
 
−
    border-radius: 50%;
 
−
    float: left;
 
−
    width: 25px;
 
−
    margin-right: 10px;
 
−
margin-top: 3px;
 
−
}
 
  
 +
.navigation_button.arrow_navigation {
 +
border: 2px solid white;
 +
margin-top: 0px;
 +
}
  
−
.navigation_button.arrow_navigation {
+
.navigation_button.arrow_navigation:hover {
−
border: 2px solid white;
+
color: #10996a;  
−
margin-top: 0px;
+
background-color: #ffffff;
−
}
+
border: 2px solid white;
 +
}
  
−
.navigation_button.arrow_navigation:hover {
+
.navigation_button.arrow_navigation.previous_item::before {
−
color: #10996a;
+
−
background-color: #ffffff;
+
−
border: 2px solid white;
+
−
}
+
−
 
+
−
.navigation_button.arrow_navigation.previous_item::before {
+
 
content: url(https://static.igem.org/mediawiki/2018/f/ff/Previous_demo_icon-14-21.svg);  
 
content: url(https://static.igem.org/mediawiki/2018/f/ff/Previous_demo_icon-14-21.svg);  
−
}
+
}
  
  
−
.navigation_button.arrow_navigation.next_item::before {
+
.navigation_button.arrow_navigation.next_item::before {
 
content: url(https://static.igem.org/mediawiki/2018/1/12/Next_demo_icon-14-21-22.svg);  
 
content: url(https://static.igem.org/mediawiki/2018/1/12/Next_demo_icon-14-21-22.svg);  
−
}
+
}
  
  
−
.navigation_button:hover , .title_extra:hover +  .navigation_button, .navigation_button.active_navigation_button:hover  {  
+
.navigation_button:hover , .title_extra:hover +  .navigation_button, .navigation_button.active_navigation_button:hover  {  
−
background-color: #10996a;  
+
background-color: #10996a;  
−
color: #ffffff;  
+
color: #ffffff;  
−
border: 2px solid #00bdcd;
+
border: 2px solid #00bdcd;
−
}
+
}
  
−
 
+
.navigation_button:hover + .title_extra , .title_extra:hover {   
−
 
+
color: #00bdcd;  
−
 
+
display:block;  
−
.title_extra {color: #10996a; float:left; padding: 7px 0px; margin-right: 20px; display:none;}
+
−
 
+
−
.title_extra.main_item { display:block; text-decoration: underline;}
+
−
.title_extra.support_item {display:block;margin-right:0px; margin-left: -17px;}
+
−
.title_extra.support_item:hover { color: #10996a;}
+
−
.navigation_button:hover + .title_extra , .title_extra:hover {  color: #00bdcd; display:block; }
+
−
 
+
−
.navigation_button.active_navigation_button {
+
−
background-color: #d3d3d3;
+
−
color: #5e5f5f;
+
−
border: 2px solid #5e5f5f;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
.igem_menu_wrapper::-webkit-scrollbar {
+
−
    display: none;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*STYLING */
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* styling for the titles */
+
−
.igem_content_wrapper h1, .igem_content_wrapper h2 {
+
−
padding:5px 15px;
+
−
border-bottom:0px;
+
−
/* color: #00bdcd;*/
+
−
color: #009d77;
+
 
}
 
}
  
−
 
+
.navigation_button.active_navigation_button {
−
 
+
background-color: #d3d3d3;  
−
.igem_content_wrapper h3, .igem_content_wrapper h4, .igem_content_wrapper h5, .igem_content_wrapper h6 {  
+
color: #5e5f5f;
−
padding:5px 15px;  
+
border: 2px solid #5e5f5f;
−
border-bottom:0px;  
+
−
color: #000000;
+
 
}
 
}
  
−
 
+
.title_extra {
−
/* font and text */
+
color: #10996a;
−
.igem_content_wrapper p {  
+
float:left;
−
padding:0px 15px;  
+
padding: 7px 0px;  
−
font-size: 13px;
+
margin-right: 20px;  
−
font-family:Tahoma, Geneva, sans-serif;  
+
display:none;
 
}
 
}
  
−
/* Links */
+
.title_extra.main_item {  
−
.igem_content_wrapper a {  
+
display:block;  
−
font-weight: bold;  
+
 
text-decoration: underline;
 
text-decoration: underline;
−
text-decoration-color:#10996a;
+
}
 +
 +
.title_extra.support_item {
 +
display:block;
 +
margin-right:0px;
 +
margin-left: -17px;
 +
}
 +
 +
.title_extra.support_item:hover {
 
color: #10996a;
 
color: #10996a;
−
-webkit-transition: all 0.4s ease;
 
−
-moz-transition: all 0.4s ease;
 
−
-ms-transition: all 0.4s ease;
 
−
-o-transition: all 0.4s ease;
 
−
transition: all 0.4s ease;
 
 
}
 
}
  
−
/* hover for the links */
 
−
.igem_content_wrapper a:hover {
 
−
text-decoration:none;
 
−
color:#000000;
 
−
}
 
  
−
/* non numbered lists */
+
.igem_menu_wrapper::-webkit-scrollbar {
−
.igem_content_wrapper ul {
+
    display: none;  
−
padding:0px 20px;
+
−
font-size: 13px;
+
−
font-family:Tahoma, Geneva, sans-serif;  
+
 
}
 
}
  
−
/* numbered lists */
+
 
−
.igem_content_wrapper ol {
+
/*calendar classes*/
−
padding:0px;  
+
.vertical_line {
−
font-size: 13px;
+
  position: absolute;
−
font-family:Tahoma, Geneva, sans-serif;  
+
  width: 5px;
 +
  background-color: #ccc;
 +
  left: 20px;
 +
  height: 100%;
 +
  z-index: -1;
 
}
 
}
  
−
/* Table */
+
.left_column {
−
.igem_content_wrapper table {  
+
width: 12%;
−
width: 97%;  
+
    border: 4px solid #d3d3d3;
−
margin:15px 10px;  
+
    text-align: center;
−
border: 1px solid #d3d3d3;  
+
    font-size: 25px;
−
border-collapse: collapse;  
+
    float: left;
 +
    border-radius: 10px;
 +
    color: #666666;
 +
    padding: 4% 0;
 +
font-weight: bold;
 
}
 
}
  
−
/* table cells */
+
 
−
.igem_content_wrapper  td {  
+
.left_column.month_access{
−
padding: 10px;
+
  border: 4px solid #00bdcd;
−
vertical-align: text-top;  
+
    color: #10996a
−
border: 1px solid #d3d3d3;  
+
    font-size: 40px;
−
border-collapse: collapse;  
+
    font-weight: bold;
 +
    cursor: pointer;
 
}
 
}
  
−
/* table headers */
+
.left_column.month_access::before {
−
.igem_content_wrapper th {
+
content: "-";  
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
border: 1px solid #d3d3d3;
+
−
border-collapse: collapse;
+
−
background-color:#f2f2f2;  
+
 
}
 
}
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
.vertical_line {
 
−
  position: absolute;
 
−
  width: 5px;
 
−
  background-color: #ccc;
 
−
  left: 20px;
 
−
  height: 100%;
 
−
  z-index: -1;
 
−
}
 
−
 
−
.left_column {
 
−
width: 12%;
 
−
    border: 4px solid #d3d3d3;
 
−
    text-align: center;
 
−
    font-size: 25px;
 
−
    float: left;
 
−
    border-radius: 10px;
 
−
    color: #666666;
 
−
    padding: 4% 0;
 
−
font-weight: bold;
 
−
 
−
}
 
−
 
−
 
−
.left_column.month_access{
 
−
  border: 4px solid #00bdcd;
 
−
 
−
    color: #10996a
 
−
    font-size: 40px;
 
−
    font-weight: bold;
 
−
    cursor: pointer;
 
−
}
 
−
 
−
.left_column.month_access::before {
 
−
content: "-";
 
−
}
 
  
 
.left_column.month_access.plus::before {
 
.left_column.month_access.plus::before {
Line 813: Line 804:
  
  
−
.left_column.month_access:hover {
+
.left_column.month_access:hover {
−
background-color: #10996a;
+
background-color: #10996a;
−
color: white;
+
color: white;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-moz-transition: all 0.4s ease;  
 
-moz-transition: all 0.4s ease;  
Line 821: Line 812:
 
-o-transition: all 0.4s ease;  
 
-o-transition: all 0.4s ease;  
 
transition: all 0.4s ease;
 
transition: all 0.4s ease;
−
}
+
}
  
  
−
.right_column  h1{
+
.right_column  h1{
−
font-size: 40px;
+
font-size: 40px;
−
padding: 15px 10px;
+
padding: 15px 10px;
−
}
+
}
  
 +
.right_column {
 +
    padding: 10px 0px 15px 0px;
 +
    float: left;
 +
width: 80%;
 +
}
  
−
.right_column {
+
.right_column.event_content {
−
    padding: 10px 0px 15px 0px;
+
border-top:  1px solid #d3d3d3;
−
    float: left;
+
}
−
width: 80%;
+
−
}
+
−
 
+
−
.right_column.event_content {
+
−
border-top:  1px solid #d3d3d3;
+
−
}
+
−
 
+
−
 
+
−
#all_menu_items{ display:block;}
+
−
 
+
  
 +
#all_menu_items{ display:block;}
  
 
.full_size_image { margin-top:-55px; width:85%; }  
 
.full_size_image { margin-top:-55px; width:85%; }  
−
 
  
  

Revision as of 17:11, 5 January 2018