Difference between revisions of "Team:UChile Biotec/css"

Line 125: Line 125:
 
  }
 
  }
  
−
/********************************* HTML STYLING  *********************************/    
+
/**************************************************************************************************************************************************************************************************/
 +
/* CONTENT OF THE PAGE */
 +
/**************************************************************************************************************************************************************************************************/
  
−
/* styling for the titles h1 */
+
/* general wrapper for the content */
−
.igem_2017_content_wrapper h1 {
+
.igem_2018_team_content {
−
padding:15px 15px 20px !important;
+
background-color:white;  
−
border-bottom: 0px;  
+
display:block;
−
color: #CC6666;
+
width: 87%;
−
font-size: 30px !important;
+
 
}
 
}
  
−
/* styling for the titles h2 */
+
/* subwrapper to center content */
−
.igem_2017_content_wrapper h2 {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper {
−
padding:15px 24px 15px !important;  
+
margin:auto;
−
border-bottom: 0px;  
+
max-width: 1400px;
−
color: #CE6161;
+
width:90%;
−
font-size: 28px !important;
+
 
}
 
}
 +
   
 +
   
 +
/********************************* HTML STYLING  *********************************/    
  
−
/* styling for the titles  h3 */
+
   
−
.igem_2017_content_wrapper h3 {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
−
padding:5px 15px;  
+
.igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
−
border-bottom:0px;  
+
.igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
−
color: #003333;
+
.igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
−
font-size: 26px !important;  
+
.igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
−
}
+
.igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
  
−
/* styling for the titles h4 */
 
−
.igem_2017_content_wrapper h4 {
 
−
padding:5px 15px;
 
−
border-bottom:0px;
 
−
color: #003333;
 
−
font-size: 24px !important;
 
−
}
 
  
−
/* styling for the titles h5 */
+
/* styling for the titles h1, h2*/
−
.igem_2017_content_wrapper h5 {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
−
padding:5px 15px;
+
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #003333;
+
color: #635d5d;
−
font-size: 22px !important;  
+
font-family: "Arial Black", Gadget, sans-serif;
 +
padding: 10px 0px;
 
}
 
}
  
−
/* styling for the titles h6 */
+
/* styling for the titles h3, h3, h5, h6 */
−
.igem_2017_content_wrapper h6 {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper h3,
−
padding:5px 15px;
+
.igem_2018_team_content .igem_2018_team_column_wrapper h4,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h5,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper h6 {  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #003333;
+
color: #928b8b;
−
font-size: 20px !important;  
+
font-family: "Arial Black", Gadget, sans-serif;
 +
padding: 5px 0px;
 
}
 
}
  
−
/* font and text */
+
/* text */
−
.igem_2017_content_wrapper p {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper p {  
−
padding: 0px 15px;  
+
font-size: 130%;
−
font-size: 18px !important;
+
font-family: Arial, Helvetica, sans-serif;
−
text-shadow: -1px 0 #C0DACF, 0 1px #C0DACF, 1px 0 #C0DACF, 0 -1px #C0DACF;
+
padding: 5px 0px;
 +
text-align: left;
 +
color: #484848;
 
}
 
}
  
 
/* Links */
 
/* Links */
−
.igem_2017_content_wrapper a {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper a {
 +
color: #5bc7d8;
 
font-weight: bold;  
 
font-weight: bold;  
 
text-decoration: underline;
 
text-decoration: underline;
−
text-decoration-color: #3399ff;
+
text-decoration-color:#5bc7d8;
−
color: #339999;
+
transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
−
-moz-transition: all 0.4s ease;  
+
-moz-transition: all 0.4s ease;  
 
-ms-transition: all 0.4s ease;  
 
-ms-transition: all 0.4s ease;  
 
-o-transition: all 0.4s ease;  
 
-o-transition: all 0.4s ease;  
−
transition: all 0.4s ease;
 
 
}
 
}
  
 
/* hover for the links */
 
/* hover for the links */
−
.igem_2017_content_wrapper a:hover {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper a:hover {  
 +
color: #f8b732;
 
text-decoration:none;
 
text-decoration:none;
−
color:#000000;
 
 
}
 
}
  
−
/* non numbered lists */
 
−
.igem_2017_content_wrapper ul {
 
−
padding:0px 20px;
 
−
font-size: 18px !important;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
−
 
−
/* numbered lists */
 
−
.igem_2017_content_wrapper ol {
 
−
padding:0px;
 
−
font-size: 18px !important;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
−
}
 
  
 
/* Table */
 
/* Table */
−
.igem_2017_content_wrapper table {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper table {  
−
width: 97%;
+
border: 1px solid #928b8b;  
−
margin:15px 10px;
+
−
border: 1px solid #dclass="dropbtn" onclick="3d3d3;  
+
 
border-collapse: collapse;  
 
border-collapse: collapse;  
 +
font-size: 130%;
 +
width: 100%;
 
}
 
}
  
 
/* table cells */
 
/* table cells */
−
.igem_2017_content_wrapper  td {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper td {  
 +
border: 1px solid #c4baba;
 +
border-collapse: collapse;
 +
font-size: 105%;
 
padding: 10px;
 
padding: 10px;
 
vertical-align: text-top;  
 
vertical-align: text-top;  
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
 
}
 
}
  
 
/* table headers */
 
/* table headers */
−
.igem_2017_content_wrapper th {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper th {  
 +
background-color:#c4baba;
 +
border: 1px solid #928b8b;
 +
border-collapse: collapse;
 +
font-size: 110%;
 
padding: 10px;  
 
padding: 10px;  
 
vertical-align: text-top;  
 
vertical-align: text-top;  
−
border: 1px solid #d3d3d3;
 
−
border-collapse: collapse;
 
−
background-color:#f2f2f2;
 
 
}
 
}
  
−
/********************************* LAYOUT CLASES  *********************************/    
 
  
−
/* general class for column divs */
+
 
−
.igem_2017_content_wrapper .column  {  
+
/* non numbered lists */
−
padding: 10px 0px;
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
−
float:left;  
+
font-size: 130%;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding:0px 20px;
 
}
 
}
  
−
/* class for a full width column */
+
 
−
.column .full_size {
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
−
width:100%;  
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
 +
 
 +
 
 +
 
 +
 
 +
/********************************* LAYOUT CLASES  *********************************/    
 +
 
 +
/*main layout class */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {  
 +
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 
}
 
}
  
−
/* styling for images in a full width column*/
+
/* 100% */
−
.column.full_size img {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
−
width:97%;  
+
 
−
padding: 10px 15px;
+
/* 66% */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
 +
 
 +
/* 33% */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
 +
 
 +
 
 +
 
 +
 
 +
/*styling for all images*/
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
 +
margin-bottom: 15px;
 +
width: 100%;  
 
}
 
}
  
−
/* class for a half width column */
+
 
−
.column.half_size {
+
/* page break */
−
width: 50%;  
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
 +
clear:both;
 
}
 
}
−
/* styling for images in a half width column*/
+
/*add extra space to page break with clear class*/
−
.column.half_size img {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
−
width: 94.5%;
+
height: 30px;
−
padding: 10px 15px;
+
 
}
 
}
 +
 +
/* horizontal line to divide the page*/
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
 +
    border-top: 1px solid #c4baba;
 +
  margin: auto;
 +
  width: 98%;
 +
}
 +
  
 
/********************************* SUPPORT CLASES  *********************************/
 
/********************************* SUPPORT CLASES  *********************************/
  
−
/* class that clears content below*/
+
/*main layout class */
−
.igem_2017_content_wrapper .clear {
+
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {
 +
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 +
}
 +
 
 +
/* 100% */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
 +
 
 +
/* 66% */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
 +
 
 +
/* 33% */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
 +
 
 +
 
 +
 
 +
 
 +
/*styling for all images*/
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
 +
margin-bottom: 15px;
 +
width: 100%;
 +
}
 +
 
 +
 
 +
/* page break */
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
 
clear:both;
 
clear:both;
 
}
 
}
−
+
/*add extra space to page break with clear class*/
−
+
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
−
/* adds extra spacing when clearing content */
+
−
.igem_2017_content_wrapper  .clear.extra_space {
+
 
height: 30px;
 
height: 30px;
 
}
 
}
  
−
/* highlight class, makes content slightly smaller */
+
/* horizontal line to divide the page*/
−
.igem_2017_content_wrapper .highlight {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
−
margin: 0px 15px;
+
    border-top: 1px solid #c4baba;
−
padding: 15px 0px;
+
  margin: auto;
 +
  width: 98%;
 
}
 
}
  
  
−
/* highlight class, adds a gray background */
+
 
−
.igem_2017_content_wrapper .highlight.gray {
+
−
background-color: #f2f2f2;  
+
/*support classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
/*Button  */
 +
/************************************************/
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
 +
font-size: 130%;
 +
margin: 30px auto;
 +
text-align: center;
 
}
 
}
  
−
/* highlight with decoration blue line on top */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a  {
−
.igem_2017_content_wrapper .highlight.blue_top {
+
background-color: #5bc7d8;
−
    border-top: 4px solid #3399ff;
+
color: #635d5d !important;
 +
font-weight: bold;
 +
margin: auto;
 +
text-decoration: none !important;
 +
padding: 10px 15px;
 
}
 
}
  
−
/* highlight with a full blue border decoration */
+
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover {
−
.igem_2017_content_wrapper .highlight.blue_border {
+
background-color: #f8b732 !important;  
−
    border: 4px solid  #3399ff;
+
 
}
 
}
  
  
−
/* button class */
+
 
−
.igem_2017_content_wrapper .button{
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight {  
−
max-width: 35%;
+
padding: 15px 20px;
−
margin: 30px auto;
+
}
−
padding: 12px 10px;
+
 
−
    background-color: #3399ff;
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
−
     text-align: center;
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
−
  color: #ffffff;
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
−
-webkit-transition: all 0.4s ease;
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
−
-moz-transition: all 0.4s ease;
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
−
-ms-transition: all 0.4s ease;
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
−
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
−
}  
+
padding: 5px 15px;
 +
}
 +
 
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background {
 +
background-color: #e4dede;  
 +
}
 +
 
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
 +
     border-top: 4px solid #5bc7d8;
 +
}
 +
 
 +
 
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
 +
    border: 4px solid #5bc7d8;
 +
}
 +
 
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
 +
    border-top: 4px solid #f8b732
 +
}
 +
 
 +
 
 +
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
 +
    border: 4px solid #f8b732;
 +
}
 +
 
 +
 
 +
 
 
      
 
      
 
</style>
 
</style>

Revision as of 03:41, 19 June 2018