Difference between revisions of "Team:ETH Zurich/styles/template css"

 
(38 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
/* Default wiki style */
 
/* Default wiki style */
 
/*==========================================================================*/
 
/*==========================================================================*/
 +
.MathJax nobr>span.math>span{border-left-width:0 !important;}
 +
 
#sideMenu, #top_title {
 
#sideMenu, #top_title {
 
     display:none;
 
     display:none;
 +
}
 +
 +
#title_text a {
 +
    color: #FFFFFF;
 +
    text-decoration: none;
 +
}
 +
 +
#title_text a:hover
 +
{
 +
    color: #FFFFFF;
 +
    text-decoration: none;
 
}
 
}
  
Line 14: Line 27:
 
}
 
}
  
−
#bodyContent h1, #bodyContent h2, #bodyContent h3,
+
#bodyContent h2, #bodyContent h3,
 
#bodyContent h4, #bodyContent h5 {
 
#bodyContent h4, #bodyContent h5 {
−
    margin-bottom: 0px;
+
font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
 +
margin-bottom: 0px;
 +
}
 +
 
 +
#bodyContent h2 {
 +
font-size: 24px;
 +
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
 +
font-weight: 500;
 +
        line-height: 28px;
 +
}
 +
 
 +
/* styling for the titles */
 +
.content_wrapper h1, .content_wrapper h2 {
 +
padding: 16px 0px 10px 0px;
 +
border-bottom:0px;
 +
color:#1f407a;
 +
}
 +
.content_wrapper h3, .content_wrapper h4 {
 +
padding: 18px 0px 8px 0px;
 +
border-bottom:0px;
 +
color:#1f407a;
 +
}
 +
 
 +
.content_wrapper h3 {
 +
font-size: 18px;
 +
}
 +
 
 +
.content_wrapper h4 {
 +
font-size: 16px;
 
}
 
}
  
 
#globalWrapper {
 
#globalWrapper {
 
     padding: 0px;
 
     padding: 0px;
 +
}
 +
 +
video {
 +
max-width: 100%;
 +
}
 +
 +
#paws > li {
 +
display: inline-block;
 +
max-width: 25%;
 +
box-sizing: border-box;
 +
padding: 20px;
 +
}
 +
 +
.portrait_list {
 +
margin: 0px !important;
 +
padding: 0px !important;
 +
list-style: none !important;
 +
}
 +
 +
.portrait_list li {
 +
max-width: 25%;
 +
display: inline-block;
 +
padding-right: 8px;
 +
padding-bottom: 18px;
 +
box-sizing: border-box;
 +
        vertical-align: top;
 
}
 
}
  
Line 27: Line 94:
  
 
.title_container {
 
.title_container {
−
    height: 100px;
 
−
    line-height: 100px;
 
 
     text-align: center;
 
     text-align: center;
 
     font-family: "Segoe UI",Arial,Helvetica,sans-serif;
 
     font-family: "Segoe UI",Arial,Helvetica,sans-serif;
−
     font-size: 40px;
+
     font-size: 48px;
 
     color: #FFFFFF;
 
     color: #FFFFFF;
 
     font-weight: 600;
 
     font-weight: 600;
−
    font-stretch: extra-expanded;
+
padding: 8px 0px;
 +
margin: 0px auto;
 +
overflow: auto;
 +
width: 60%;
 +
max-width: 900px;
 +
display: table;
 +
}
 +
 
 +
.title_container div {
 +
width: auto;
 +
}
 +
 
 +
#title_pavlov {
 +
float: left;
 +
}
 +
#title_pavlov img {
 +
height: 100px;
 +
}
 +
 
 +
#title_text {
 +
display:table-cell;
 +
vertical-align:middle;
 +
}
 +
 
 +
#title_igem {
 +
float: right;
 +
}
 +
#title_igem img {
 +
margin: 10px 0px;
 +
height: 80px;
 
}
 
}
  
Line 62: Line 156:
  
 
.menu_container {
 
.menu_container {
 +
    z-index: 10;
 
     background-color: #111111;
 
     background-color: #111111;
 
     color: #EEEEEE;
 
     color: #EEEEEE;
Line 67: Line 162:
 
     font-size: 20px;
 
     font-size: 20px;
 
width: 100%;
 
width: 100%;
 +
-webkit-font-smoothing: subpixel-antialiased;
 +
}
 +
 +
#outline {
 +
background-color: #222222;
 +
font-size: 16px;
 +
display: block;
 +
text-align:center;
 +
font-family: "Segoe UI",Arial,Helvetica,sans-serif;
 +
}
 +
 +
#outline a {
 +
color: #CCCCCC;
 
}
 
}
  
Line 100: Line 208:
 
}
 
}
  
−
.menu_item {
+
#outline > li > a, .outline_title {
 +
    height: 28px;
 +
    line-height: 28px;
 +
    padding: 0px 12px;
 +
}
 +
 
 +
.menu_item, #outline .outline_item, .outline_title {
 
     display: inline-block;
 
     display: inline-block;
 +
}
 +
 +
#outline .outline_title {
 +
    cursor: default !important;
 +
}
 +
 +
.quicklinks img {
 +
width: 16px !important;
 +
display: inline-block;
 +
margin-right: 4px;
 +
margin-bottom: 4px;
 +
}
 +
 +
.quicklinks ul {
 +
list-style: none !important;
 +
margin-left: 0px !important;
 +
}
 +
 +
.quicklinks a {
 +
font-size: 16px;
 +
 
}
 
}
  
Line 185: Line 320:
 
div.sec:first-of-type {
 
div.sec:first-of-type {
 
     width: auto;
 
     width: auto;
−
     padding: 54px 20% 14px 20%;
+
     padding: 54px 0px 14px 0px;
 
}
 
}
  
 
.sec {
 
.sec {
 
     width: auto;
 
     width: auto;
−
     padding: 14px 20%;
+
     padding: 14px 0px;
 
     overflow: hidden;
 
     overflow: hidden;
 +
}
 +
 +
.title_only {
 +
padding-bottom: 0px;
 +
}
 +
 +
.content_only {
 +
padding-top: 0px;
 +
}
 +
 +
.paddingless {
 +
padding-top: 0px !important;
 +
padding-bottom: 0px !important;
 +
}
 +
 +
.sec > div {
 +
max-width: 900px;
 +
margin: 0px auto;
 +
width: 60%;
 
}
 
}
  
Line 218: Line 372:
 
.dark_grey, .dark_grey *:not(span) {
 
.dark_grey, .dark_grey *:not(span) {
 
     background-color: #222222;
 
     background-color: #222222;
−
color: #FFFFFF !important;  
+
color: #FFFFFF !important;
 +
-webkit-font-smoothing: subpixel-antialiased;
 
}
 
}
  
Line 224: Line 379:
 
     background-color:#1f407a;
 
     background-color:#1f407a;
 
color: #FFFFFF !important;
 
color: #FFFFFF !important;
 +
-webkit-font-smoothing: subpixel-antialiased;
 +
}
 +
 +
.page_title {
 +
font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
 +
    font-size: 22px;
 +
    color: #1f407a;
 +
    font-weight: 600;
 +
line-height: normal;
 +
}
 +
.page_title h1 {
 +
border-bottom: solid !important;
 +
border-bottom-width: 2px !important;
 +
padding: 0px !important;
 +
line-height: 46px;
 +
text-align: center;
 
}
 
}
  
Line 230: Line 401:
 
overflow: auto;
 
overflow: auto;
 
}
 
}
−
.two_columns > div {
+
.two_columns > div > div {
−
width: calc(50% - 24px);
+
width: 50%;
 
padding: 0px 12px;
 
padding: 0px 12px;
 
float: left;
 
float: left;
 +
box-sizing: border-box
 
}
 
}
−
.two_columns > div:first-child {
+
.two_columns > div > div:first-child {
−
width: calc(50% - 12px);
+
width: 50%;
 
padding-left: 0px;
 
padding-left: 0px;
 
}
 
}
−
.two_columns > div:last-child {
+
.two_columns > div > div:last-child {
−
width: calc(50% - 12px);
+
width: 50%;
 
padding-right: 0px;
 
padding-right: 0px;
 
}
 
}
  
 
/* Section with three columns */
 
/* Section with three columns */
−
.three_columns > div {
+
.three_columns > div > div {
−
width: calc(33.33% - 24px);
+
width: 33.33%;
 
padding: 0px 12px;
 
padding: 0px 12px;
 
float: left;
 
float: left;
 +
box-sizing: border-box;
 
}
 
}
−
.three_columns > div:first-child {
+
.three_columns > div > div:first-child {
−
width: calc(33.33% - 12px);
+
width: 33.33%;
 
padding-left: 0px;
 
padding-left: 0px;
 
}
 
}
−
.three_columns > div:last-child {
+
.three_columns > div > div:last-child {
−
width: calc(33.33% - 12px);
+
width: 33.33%;
 
padding-right: 0px;
 
padding-right: 0px;
 
}
 
}
Line 261: Line 434:
 
/* Box containing an image and its caption */
 
/* Box containing an image and its caption */
 
.image_box {
 
.image_box {
−
        float: right;
+
    float: right;
−
        margin: 0px 0px 12px 12px;
+
    margin: 6px 0px 6px 12px;
−
        max-width: calc(50% - 12px);
+
    width: 50%;
−
        border-style: solid;
+
    border-style: solid;
−
        border-width: 1px;
+
    border-width: 1px;
−
        padding: 3px;
+
    padding: 4px;
 +
box-sizing: border-box;
 +
background-color:white !important;
 +
}
 +
.image_box * {
 +
background-color:white !important;
 
}
 
}
 
.image_box p {
 
.image_box p {
−
        margin-top: 2px;
+
    margin-top: 4px;
−
        font-size: 12px !important;
+
    font-size: 14px !important;
 +
padding-bottom: 0px !important;
 +
}
 +
.image_box img {
 +
background-color:white;
 +
border-style: solid;
 +
    border-width: 1px;
 +
box-sizing: border-box;
 
}
 
}
−
 
 
.full_size {
 
.full_size {
−
width:100%;  
+
width:100%;
−
}
+
float: none!important;
−
 
+
margin: 12px auto;
−
.full_size img {
+
−
padding: 10px 15px;
+
−
width:96.5%;  
+
 
}
 
}
  
Line 308: Line 489:
 
width: 95%;
 
width: 95%;
 
font-weight:bold;
 
font-weight:bold;
−
}
 
−
 
−
/* styling for the titles */
 
−
.content_wrapper h1, .content_wrapper h2 {
 
−
padding: 5px 0px;
 
−
border-bottom:0px;
 
−
color:#1f407a;
 
 
}
 
}
  
Line 321: Line 495:
 
font-size: 14px;
 
font-size: 14px;
 
font-family:Tahoma, Geneva, sans-serif;
 
font-family:Tahoma, Geneva, sans-serif;
−
        margin: 0px;
+
    margin: 0px;
 +
padding-bottom: 6px;
 +
/* line-height: 1.6em; */
 
}
 
}
  
 
/* Links */
 
/* Links */
 
.content_wrapper a {
 
.content_wrapper a {
 +
color: #4286f4;
 +
        padding-right: 0px !important;
 +
-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;
 +
}
 +
 +
.content_wrapper li a {
 
color: #1f407a;
 
color: #1f407a;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
Line 343: Line 529:
 
.content_wrapper ul {
 
.content_wrapper ul {
 
padding:0px 5px;
 
padding:0px 5px;
 +
margin-top: 0px;
 +
margin-left: 8px;
 
font-size: 14px;
 
font-size: 14px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Tahoma, Geneva, sans-serif;
 +
list-style-image: url(https://static.igem.org/mediawiki/2016/0/05/T--ETH_Zurich--bullet.png);
 
}
 
}
 +
  
 
/* numbered lists */
 
/* numbered lists */
 
.content_wrapper ol {
 
.content_wrapper ol {
−
padding:0px;  
+
padding:0px;
 +
margin-top: 0px;
 +
margin-left: 28px;
 
font-size: 14px;
 
font-size: 14px;
 
font-family:Tahoma, Geneva, sans-serif;  
 
font-family:Tahoma, Geneva, sans-serif;  
Line 356: Line 548:
 
/* Table */
 
/* Table */
 
.content_wrapper table {  
 
.content_wrapper table {  
−
width: 97%;  
+
width: 100%;  
−
margin:15px 10px;  
+
margin:0px 0px;  
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #444444;  
−
border-collapse: collapse;  
+
border-collapse: collapse;
 +
background-color: white;
 +
font-size: 14px;
 
}
 
}
  
 
/* table cells */
 
/* table cells */
−
.content_wrapper td {  
+
.content_wrapper td {  
 
padding: 10px;
 
padding: 10px;
 
vertical-align: text-top;  
 
vertical-align: text-top;  
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #444444;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
}
 
}
Line 374: Line 568:
 
padding: 10px;  
 
padding: 10px;  
 
vertical-align: text-top;  
 
vertical-align: text-top;  
−
border: 1px solid #d3d3d3;  
+
border: 1px solid #444444;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 
background-color:#f2f2f2;  
 
background-color:#f2f2f2;  
Line 406: Line 600:
 
#sponsor_logos {
 
#sponsor_logos {
 
     text-align:center;
 
     text-align:center;
−
margin: 15px 0px;
+
margin: 16px 0px;
−
padding: 15px;
+
padding: 16px;
 +
background-color: white;
 +
}
 +
 
 +
#sponsor_logos a {
 +
    padding-right: 0px !important;
 
background-color: white;
 
background-color: white;
 
}
 
}
  
 
#sponsor_logos img {
 
#sponsor_logos img {
−
     max-height:80px;
+
     max-height:74px;
 
max-width:100%;
 
max-width:100%;
 
     width:auto;
 
     width:auto;
 
     height:auto;
 
     height:auto;
 +
background-color: white;
 
}
 
}
  
 
#sponsor_logos li {
 
#sponsor_logos li {
 
     display: inline-block;
 
     display: inline-block;
−
     margin: 0px 12px;
+
     margin: 16px 16px;
 +
background-color: white;
 
}
 
}
  
Line 430: Line 631:
 
.icon {display:none;}
 
.icon {display:none;}
 
.highlight {padding:10px 0px;}
 
.highlight {padding:10px 0px;}
−
.sec, div.sec:first-of-type { padding-left: 10%; padding-right: 10%; }
+
.sec > div, .title_container { width: 80%; }
 
}
 
}
  
Line 437: Line 638:
 
.collapsable_menu_control { display:block; }
 
.collapsable_menu_control { display:block; }
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
−
.sec, div.sec:first-of-type, .title_container { padding-left: 6%; padding-right: 6%; }
+
.sec > div { width: 88%; }
 +
.title_container { width: 88%; }
 
#burger_icon { display: block; float: right; }
 
#burger_icon { display: block; float: right; }
−
#title_text { display: block; float: left; text-align: left; }
+
#title_text { text-align: left; font-size: 40px; }
 
#main_menu { display: none; }
 
#main_menu { display: none; }
 
.menu_item { display: block; width: 100%; }
 
.menu_item { display: block; width: 100%; }
Line 445: Line 647:
 
.submenu_visible { position: relative !important; }
 
.submenu_visible { position: relative !important; }
 
.submenu a {  padding-left: 24px !important; }
 
.submenu a {  padding-left: 24px !important; }
−
.two_columns > div, .three_columns > div { float: none; width: auto !important; padding: 0px; }
+
.two_columns > div > div, .three_columns > div > div {
 +
float: none; width: auto !important; padding: 0px; }
 +
#outline { display: none; }
 +
#title_igem { display: none; }
 +
#title_pavlov { display: none; }
 +
#paws > li { padding: 20px 0px; }
 +
.portrait_list li { max-width: 50%; }
 
}
 
}

Latest revision as of 21:16, 30 November 2016

/* Default wiki style */ /*==========================================================================*/ .MathJax nobr>span.math>span{border-left-width:0 !important;}

  1. sideMenu, #top_title {
   display:none;

}

  1. title_text a {
   color: #FFFFFF;
   text-decoration: none;

}

  1. title_text a:hover

{ 

   color: #FFFFFF;
   text-decoration: none;

}

body { 

   background-color:#1f407a;

min-width: 400px; 

  	width: auto !important;
  	width: 400px;

-webkit-font-smoothing: subpixel-antialiased; }

  1. bodyContent h2, #bodyContent h3,
  2. bodyContent h4, #bodyContent h5 {

font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif; margin-bottom: 0px; }

  1. bodyContent h2 {

font-size: 24px; font-family: "Segoe UI",Arial,Helvetica,sans-serif; font-weight: 500; 

       line-height: 28px;

}

/* styling for the titles */ .content_wrapper h1, .content_wrapper h2 { padding: 16px 0px 10px 0px; border-bottom:0px; color:#1f407a; } .content_wrapper h3, .content_wrapper h4 { padding: 18px 0px 8px 0px; border-bottom:0px; color:#1f407a; }

.content_wrapper h3 { font-size: 18px; }

.content_wrapper h4 { font-size: 16px; }

  1. globalWrapper {
   padding: 0px;

}

video { max-width: 100%; }

  1. paws > li {

display: inline-block; max-width: 25%; box-sizing: border-box; padding: 20px; }

.portrait_list { margin: 0px !important; padding: 0px !important; list-style: none !important; }

.portrait_list li { max-width: 25%; display: inline-block; padding-right: 8px; padding-bottom: 18px; box-sizing: border-box; 

       vertical-align: top;

}

/* Title style */ /*==========================================================================*/

.title_container { 

   text-align: center;
   font-family: "Segoe UI",Arial,Helvetica,sans-serif;
   font-size: 48px;
   color: #FFFFFF;
   font-weight: 600;

padding: 8px 0px; margin: 0px auto; overflow: auto; width: 60%; max-width: 900px; display: table; }

.title_container div { width: auto; }

  1. title_pavlov {

float: left; }

  1. title_pavlov img {

height: 100px; }

  1. title_text {

display:table-cell; 

	vertical-align:middle;

}

  1. title_igem {

float: right; }

  1. title_igem img {

margin: 10px 0px; height: 80px; }

  1. burger_icon {

display: none; }

  1. burger_icon > img {

padding: 6px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

  1. burger_icon > img:hover {

background-color: #3f609a; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* Menu style */ /*==========================================================================*/

.menu_container { 

   z-index: 10;
   background-color: #111111;
   color: #EEEEEE;
   font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif;
   font-size: 20px;

width: 100%; -webkit-font-smoothing: subpixel-antialiased; }

  1. outline {

background-color: #222222; font-size: 16px; display: block; text-align:center; font-family: "Segoe UI",Arial,Helvetica,sans-serif; }

  1. outline a {

color: #CCCCCC; }

.menu_container a { 

 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;

}

.menu_container a { 

   color: #EEEEEE;
   text-decoration:none;

display: block; }

.menu_container ul { 

   list-style-type: none;
   list-style-image: none;
   margin: 0px;

}

.menu_container > ul { 

   margin: 0 auto;

-webkit-margin-before: 0px; 

   -webkit-margin-after: 0px;

}

.menu_container > ul > li > a { 

   height: 42px;
   line-height: 42px;
   padding: 0px 12px;

}

  1. outline > li > a, .outline_title {
   height: 28px;
   line-height: 28px;
   padding: 0px 12px;

}

.menu_item, #outline .outline_item, .outline_title { 

   display: inline-block;

}

  1. outline .outline_title {
   cursor: default !important;

}

.quicklinks img { width: 16px !important; display: inline-block; margin-right: 4px; margin-bottom: 4px; }

.quicklinks ul { list-style: none !important; margin-left: 0px !important; }

.quicklinks a { font-size: 16px;

}

.menu_container li { 

   cursor: pointer;
   margin: 0px;

}

.menu { display: table; 

   margin: 0 auto;

}

.menu_item, .submenu > li { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.menu_hover { background-color: #3D3D3D; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.menu_open { background-color: #232323; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

.menu_container .submenu { 

   display: none;

background-color: #232323; }

.menu_container .submenu_visible { display: block; position: absolute; }

.menu_container .submenu a { font-size: 18px; padding: 6px 54px 6px 16px; }

.burger_visible { display: block !important; }

/* Default content style */ /*==========================================================================*/

.content_wrapper { width: 100%; 

   background-color:white;
   display: block;
 	margin-left: auto;
 	margin-right: auto;

}

  1. content {
   width: 100%;

height: 100%; 

   padding: 0;

padding:0px; 

   margin-left:0px;
   background-color:#1f407a;

}

.content_wrapper > p { 

   display:none;

}

div.sec:first-of-type { 

   width: auto;
   padding: 54px 0px 14px 0px;

}

.sec { 

   width: auto;
   padding: 14px 0px;
   overflow: hidden;

}

.title_only { padding-bottom: 0px; }

.content_only { padding-top: 0px; }

.paddingless { padding-top: 0px !important; padding-bottom: 0px !important; }

.sec > div { max-width: 900px; margin: 0px auto; width: 60%; }

.sec p { text-align: justify; }

.white, .white *:not(span) { 

   background-color: #FFFFFF;

color: #000000; }

.white h1, .white h2, .white h3, .white h4 { color:#1f407a; }

.light_grey, .light_grey *:not(span) { 

   background-color: #ECECEC;

color: #000000; }

.light_grey h1, .light_grey h2, .light_grey h3, .light_grey h4 { color:#1f407a; }

.dark_grey, .dark_grey *:not(span) { 

   background-color: #222222;

color: #FFFFFF !important; -webkit-font-smoothing: subpixel-antialiased; }

.blue, .blue *:not(span) { 

   background-color:#1f407a;

color: #FFFFFF !important; -webkit-font-smoothing: subpixel-antialiased; }

.page_title { font-family: wf_segoe-ui_light,'Segoe UI Light','Segoe WP Light',wf_segoe-ui_normal,'Segoe UI',Segoe,'Segoe WP',Tahoma,Verdana,Arial,sans-serif; 

   font-size: 22px;
   color: #1f407a;
   font-weight: 600;

line-height: normal; } .page_title h1 { border-bottom: solid !important; border-bottom-width: 2px !important; padding: 0px !important; line-height: 46px; text-align: center; }

/* Section with two columns */ .two_columns, .three_columns { overflow: auto; } .two_columns > div > div { width: 50%; padding: 0px 12px; float: left; box-sizing: border-box } .two_columns > div > div:first-child { width: 50%; padding-left: 0px; } .two_columns > div > div:last-child { width: 50%; padding-right: 0px; }

/* Section with three columns */ .three_columns > div > div { width: 33.33%; padding: 0px 12px; float: left; box-sizing: border-box; } .three_columns > div > div:first-child { width: 33.33%; padding-left: 0px; } .three_columns > div > div:last-child { width: 33.33%; padding-right: 0px; }

/* Box containing an image and its caption */ .image_box { 

   float: right;
   margin: 6px 0px 6px 12px;
   width: 50%;
   border-style: solid;
   border-width: 1px;
   padding: 4px;

box-sizing: border-box; background-color:white !important; } .image_box * { background-color:white !important; } .image_box p { 

   margin-top: 4px;
   font-size: 14px !important;

padding-bottom: 0px !important; } .image_box img { background-color:white; border-style: solid; 

   border-width: 1px;

box-sizing: border-box; } .full_size { width:100%; float: none!important; margin: 12px auto; }

.half_size { width: 50%; }

.half_size img { padding: 10px 15px; width: 93%; }

.clear { clear:both; }

.highlight { width: 90%; margin: auto; padding: 15px 5px; background-color: #f2f2f2; }

.judges-will-not-evaluate { border: 4px solid #72c9b6; display: block; margin: 5px 15px; width: 95%; font-weight:bold; }

/* font and text */ .content_wrapper p { font-size: 14px; font-family:Tahoma, Geneva, sans-serif; 

   margin: 0px;

padding-bottom: 6px; /* line-height: 1.6em; */ }

/* Links */ .content_wrapper a { color: #4286f4; 

       padding-right: 0px !important;

-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; }

.content_wrapper li a { color: #1f407a; -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 */ .content_wrapper a:hover { text-decoration:none; color:#000000; }

/* non numbered lists */ .content_wrapper ul { padding:0px 5px; margin-top: 0px; margin-left: 8px; font-size: 14px; font-family:Tahoma, Geneva, sans-serif; list-style-image: url(T--ETH_Zurich--bullet.png); }


/* numbered lists */ .content_wrapper ol { padding:0px; margin-top: 0px; margin-left: 28px; font-size: 14px; font-family:Tahoma, Geneva, sans-serif; }

/* Table */ .content_wrapper table { width: 100%; margin:0px 0px; border: 1px solid #444444; border-collapse: collapse; background-color: white; font-size: 14px; }

/* table cells */ .content_wrapper td { padding: 10px; vertical-align: text-top; border: 1px solid #444444; border-collapse: collapse; }

/* table headers */ .content_wrapper th { padding: 10px; vertical-align: text-top; border: 1px solid #444444; border-collapse: collapse; background-color:#f2f2f2; }

.content_wrapper img { width: 100%; }

/* Button class */ .button_click { margin: 10px auto; padding: 15px; width:12%; text-align:center; font-weight:bold; background-color: #72c9b6; cursor:pointer; -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; }

/* button class on hover */ .button_click:hover { background-color:#000000; color:#72c9b6; }

  1. sponsor_logos {
   text-align:center;

margin: 16px 0px; padding: 16px; background-color: white; }

  1. sponsor_logos a {
   padding-right: 0px !important;

background-color: white; }

  1. sponsor_logos img {
   max-height:74px;

max-width:100%; 

   width:auto;
   height:auto;

background-color: white; }

  1. sponsor_logos li {
   display: inline-block;
   margin: 16px 16px;

background-color: white; }

/* Responsive styling */ /*==========================================================================*/

/* If the screen width is smaller than 1000px */ @media only screen and (max-width: 1000px) { .icon {display:none;} .highlight {padding:10px 0px;} .sec > div, .title_container { width: 80%; } }

/* If the screen width is smaller than 740px */ @media only screen and (max-width: 740px) { .collapsable_menu_control { display:block; } .highlight {padding:15px 5px;} .sec > div { width: 88%; } .title_container { width: 88%; } #burger_icon { display: block; float: right; } #title_text { text-align: left; font-size: 40px; } #main_menu { display: none; } .menu_item { display: block; width: 100%; } .menu { width: 100%; } .submenu_visible { position: relative !important; } .submenu a { padding-left: 24px !important; } .two_columns > div > div, .three_columns > div > div { float: none; width: auto !important; padding: 0px; } #outline { display: none; } #title_igem { display: none; } #title_pavlov { display: none; } #paws > li { padding: 20px 0px; } .portrait_list li { max-width: 50%; } }