Difference between revisions of "Template:Paris Bettencourt/cssPages"

 
(703 intermediate revisions by 3 users not shown)
Line 5: Line 5:
 
  * It's FREE! But you can send us beer at
 
  * It's FREE! But you can send us beer at
 
  * beer@corre.bio :-) */
 
  * beer@corre.bio :-) */
−
 
  
 
/* Background of the pages */
 
/* Background of the pages */
Line 16: Line 15:
 
-o-background-size: cover;
 
-o-background-size: cover;
 
background-size: cover;
 
background-size: cover;
−
         height: 100%;
+
         padding-top: 100vh;
 
}
 
}
  
  
 
/* All banners for all pages */
 
/* All banners for all pages */
−
.contentContainer#notebook {
+
#notebook .contentContainer {
 
   /*background-image: url('../images/manips_bw.jpg');*/
 
   /*background-image: url('../images/manips_bw.jpg');*/
−
   background-image: url('https://static.igem.org/mediawiki/2015/2/2a/ParisBettencourt_notebookBanner.jpg');
+
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/a/a2/ParisBettencourt_notebookBanner2.jpg');
 +
}
 +
#workshops .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/6/62/Parisbettencourt_workshopbanner.png');
 +
}
 +
#videos .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/d/d4/ParisBettencourt_videosBanner.jpg');
 +
}
 +
#press .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/5f/ParisBettencourt_pressBanner.jpg');
 +
}
 +
#attributions .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/5f/ParisBettencourt_pressBanner.jpg');
 +
}
 +
#acknowledgements .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/6/62/Parisbettencourt_acknowledgementbanner.png');
 +
}
 +
#descriptionB .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/5c/ParisBettencourt_descriptionBanner.jpg');
 +
}
 +
#bibliography .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/6/68/Parisbettencourt_bibiographybanner.jpeg');
 +
}
 +
#modeling .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/3/3e/Parisbettencourt_modelingbanner.jpeg');
 +
}
 +
#results .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/9/98/Parisbettencourt_resultbanner.png');
 +
}
 +
#parts .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/1/14/Parisbettencourt_partbanner.png');
 +
}
 +
#collaborations .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/54/Parisbettencourt_collabbanner.png');
 +
}
 +
#medalsB .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/c/cb/Parisbettencourt_medailbanner.png');
 +
}
 +
#design .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/5b/Parisbettencourt_deisgnbanner.png');
 +
}
 +
#facts .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/5f/ParisBettencourt_pressBanner.jpg');
 +
}
 +
#rhizi .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/2/2c/Parisbettencourt_rhizybanner.png');
 +
}
 +
#synbio .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/c/ce/Synbio.png');
 +
}
 +
#team .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/e/e4/ParisBettencourt_teamBanner.JPG');
 +
}
 +
#protocols .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/e/e0/ParisBettencourt_protocolsBanner.jpg');
 +
}
 +
#safety .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/f/fd/ParisBettencourt_SafetyBanner.jpg');
 +
}
 +
#continuity .contentContainer{
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/4/48/Parisbettencourt_continuitybanner.png');
 +
}
 +
#practices .contentContainer{
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/1/14/Parisbettencourt_overviewpracticebanner.png');
 +
}
 +
#software .contentContainer{
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/1/1a/Parisbettencourt_softwarebanner.png');
 +
}
 +
#acceptance .contentContainer{
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/f/f0/Acceptance.jpg');
 +
}
 +
#dilambda .contentContainer{
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/c/c0/ParisBettencourt_Spect.jpeg');
 +
}
 +
#micronutrients .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%),url('https://static.igem.org/mediawiki/2015/5/5c/ParisBettencourt_descriptionBanner.jpg');
 +
}
 +
 
 +
 
 +
 
 +
#cobalamin .contentContainer,
 +
#retinol .contentContainer,
 +
#riboflavin .contentContainer,
 +
#phytase .contentContainer {
 +
  /*background-image: url('../images/manips_bw.jpg');*/
 +
        background-color: black;
 +
        padding-top: 100px;
 +
}
 +
#cobalamin .contentContainer #banner h3,
 +
#retinol .contentContainer #banner h3,
 +
#riboflavin .contentContainer #banner h3,
 +
#phytase .contentContainer #banner h3 {
 +
  position: absolute;
 +
        top: 50px;
 +
        right: 20px;
 
}
 
}
  
Line 30: Line 148:
 
#banner {
 
#banner {
 
height: 100%;
 
height: 100%;
 +
        position: relative;
 +
        bottom: 20px;
 +
    float: right;
 +
    width: 100%;
 
}
 
}
−
#banner img {
+
#banner h3 {
 
display: block;
 
display: block;
−
width: 30%;
+
position: absolute;
−
max-width: 800px;
+
bottom: 30px;
−
margin: auto;
+
right: 0;
−
position: relative;
+
 
−
top: 55%;
+
padding: 10px 20px 10px 20px;
−
transform: translateY(-55%);
+
/*text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
 +
            0.5px 0.5px #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000;*/
 +
color: white;
 +
font-size: 45px;
 +
font-family: 'Generica';
 
}
 
}
 +
a#moveDown {
 +
        display: block;
 +
        width: 100%;
 +
        height: 35px;
 +
        position: relative;
 +
        bottom: 20px;
 +
        margin-top: -55px;
 +
        background-image: url('https://static.igem.org/mediawiki/2015/5/55/ParisBettencourt_downArrow.png');
 +
        background-position: bottom;
 +
background-repeat: no-repeat;
 +
        background-size: 35px;
 +
}
 +
 +
.noBanner {
 +
    padding: 0;
 +
    margin: 0;
 +
    position: static;
 +
    display: block;
 +
}
 +
 +
.noBanner #banner {
 +
    background-color: black;
 +
    margin: 0;
 +
    padding: 0;
 +
    position: static;
 +
    display: block;
 +
}
 +
 +
.noBanner #banner h3 {
 +
    height: 60px;
 +
    margin: 0;
 +
    padding: 0;
 +
    position: static;
 +
}
 +
 +
 +
/* Overview & Infographics */
 +
#overview {
 +
  border-top: 0;
 +
}
 +
#overview table {
 +
  width: 100%;
 +
  max-width: 1800px;
 +
  background-color: black;
 +
  margin: auto;
 +
  border-collapse: collapse;
 +
  padding: 0;
 +
}
 +
#overview h2 {
 +
  color: white;
 +
  font-family: 'Generica';
 +
  font-weight: bold;
 +
  font-size: 40px;
 +
  margin: 0;
 +
}
 +
#overview h3 {
 +
  font-family: 'Generica';
 +
  font-size: 32px;
 +
  padding-top: 7px;
 +
  margin: auto;
 +
  height: 40px;
 +
  color: white;
 +
  font-weight: bold;
 +
}
 +
#overview table td, #overview table th {
 +
  border: 0
 +
  display: table-cell;
 +
  vertical-align: middle;
 +
}
 +
#overview table td {
 +
  width: 33.3%;
 +
  color: white;
 +
  text-align: justify;
 +
  padding: 10px;
 +
  font-size: 20px;
 +
  line-height: 30px;
 +
}
 +
#overview table tr:first-child th {
 +
  border-top: 0;
 +
}
 +
#overview table tr:last-child td {
 +
  border-bottom: 0;
 +
}
 +
#overview table tr td:first-child, #overview table tr th:first-child {
 +
  border-left: 0;
 +
}
 +
#overview table tr td:last-child, #overview table tr th:last-child {
 +
  border-right: 0;
 +
}
 +
#overview table th.noBottom {
 +
  border-bottom: 0;
 +
}
 +
#overview table td.noTop {
 +
  border-top: 0;
 +
}
 +
#overview p {
 +
  text-align: justify;
 +
  width: 90%;
 +
  width: calc(100% - 20px);
 +
  margin: auto;
 +
  padding: 10px;
 +
  color: white;
 +
  font-size: 20px;
 +
  line-height: 30px;
 +
}
 +
 +
 +
.yellow, h3.yellow, a.yellow {
 +
    color: #FFF200;
 +
}
 +
.magenta, h3.magenta, a.magenta {
 +
    color: #EC008C;
 +
}
 +
.cyan, h3.cyan, a.cyan {
 +
    color: #00ADEF;
 +
}
 +
#overview a {
 +
    color: #09A1FF;
 +
}
 +
#overview a:hover {
 +
    text-decoration: none;
 +
}
 +
 +
 +
 +
img.info {
 +
        max-width: 842px;
 +
        min-width: 300px;
 +
        width: 100%;
 +
        margin-top: 20px;
 +
}
 +
 +
 +
/* Side Menu */
 +
#sideMenu {
 +
  float: left;
 +
  border: 1px solid black;
 +
  position: absolute;
 +
  left: 0;
 +
}
 +
.letter {
 +
  display: block;
 +
}
 +
.word {
 +
display: none;
 +
}
 +
 +
#roomMenu {
 +
  margin-left: 20px;
 +
}
 +
 +
  
 
/* Text content */
 
/* Text content */
−
#textContent {
+
.textContent {
 
width: 100%;
 
width: 100%;
 
margin-bottom: 5px;
 
margin-bottom: 5px;
−
background-color: white;
+
background-color: white;
 +
}
 +
.textContent.black {
 +
        background-color: black;
 +
        width: 100%;
 +
        max-width: 100%;
 
}
 
}
−
 
  
  
 
/* Text wrapper (just in case we're using a screen > 1800 px) */
 
/* Text wrapper (just in case we're using a screen > 1800 px) */
−
#textWrapper {
+
.textWrapper {
 
background-color: white;
 
background-color: white;
−
width: 100%;
+
width: 100%;
 +
        max-width: 100%;
 
}
 
}
  
 
/* Text content */
 
/* Text content */
−
#textContent {
+
.textContent {
−
width: 100%;
+
  max-width: 1800px;
−
max-width: 1800px;
+
font-size: 16px;
 
margin: auto;
 
margin: auto;
−
margin-bottom: 5px;
+
        overflow: hidden;
−
font-family: 'Libertinagec', serif;
+
padding: 3% 3% 6% 3%;
−
font-size: 18px;
+
−
padding: 10px;
+
 
/* -webkit-column-count: 2;
 
/* -webkit-column-count: 2;
 
-moz-column-count: 2;
 
-moz-column-count: 2;
Line 71: Line 352:
 
}
 
}
  
−
#textContent h1 {
+
 
−
font-size: 30px;
+
 
 +
/* Overview box */
 +
#overview {
 +
background: black;
 +
color: white;
 +
font-size: 15px;
 +
}
 +
 
 +
 
 +
 
 +
/* Title styling */
 +
.textContent h1 {
 +
font-size: 33px;
 
font-weight: bold;
 
font-weight: bold;
 
margin: 20px;
 
margin: 20px;
 +
        margin-left: 0;
 +
        height: 33px;
 +
/*font-family: 'Libertinagec', serif;*/
 
}
 
}
−
#textContent h2 {
+
.textContent h2 {
 
font-size: 25px;
 
font-size: 25px;
 
font-weight: bold;
 
font-weight: bold;
−
margin: 15px;
+
margin-bottom: 15px;
 +
        margin-top: 30px;
 +
        border-bottom: 1px solid black;
 +
/*font-family: 'Libertinagec', serif;*/
 +
        width: 100%;
 
}
 
}
−
#textContent h3 {
+
.textContent h3 {
 
font-size: 20px;
 
font-size: 20px;
−
font-weight: bold;
+
font-weight: bold;
−
margin: 10px;
+
        margin-top: 20px
 +
/*font-family: 'Libertinagec', serif;*/
 
}
 
}
−
#textContent h4 {
+
.textContent h4 {
 
font-size: 18px;
 
font-size: 18px;
 
font-weight: bold;
 
font-weight: bold;
 
margin-bottom: 10px;
 
margin-bottom: 10px;
 
margin-top: 8px;
 
margin-top: 8px;
 +
/*font-family: 'Libertinagec', serif;*/
 
}
 
}
−
#textContent h5 {
+
.textContent h5 {
 
font-size: 18px;
 
font-size: 18px;
 
text-decoration: underline;
 
text-decoration: underline;
 
margin-bottom: 10px;
 
margin-bottom: 10px;
 
margin-top: 8px;
 
margin-top: 8px;
 +
/*font-family: 'Libertinagec', serif;*/
 
}
 
}
−
#textContent p {
+
 
−
text-indent: 15px;
+
 
−
margin-top: 5px;
+
/* Lists styling */
−
margin-bottom: 10px;
+
.textContent ul, ol {
−
}
+
−
#textContent ul, ol {
+
 
display: block;
 
display: block;
 
margin-top: 5px;
 
margin-top: 5px;
 
margin-bottom: 5px;
 
margin-bottom: 5px;
 +
        padding-left: 20px;
 +
        list-style-type: disc;
 
}
 
}
−
#textContent ul li {
+
 
−
list-style-type: disc;
+
.textContent ul li ul {
−
margin-left: 30px;
+
        padding-left: 40px;
 +
        list-style-type: circle;
 
}
 
}
−
#textContent ul li ul {
+
 
−
margin-left: 40px;
+
/* Subs and sups */
 +
sup {
 +
        vertical-align: super;
 +
        font-size: smaller;
 
}
 
}
−
#textContent ul li ul li{
+
sub {
−
list-style-type: circle;
+
        vertical-align: sub;
 +
        font-size: smaller;
 
}
 
}
 +
 +
 +
/* Paragraphs and columns */
 +
.textContent p {
 +
margin-top: 5px;
 +
margin-bottom: 10px;
 +
text-align: justify;
 +
line-height: 25px;
 +
}
 +
.textContent {
 +
line-height: 25px;
 +
}
 +
 +
.textContent div.column-left {
 +
float: left;
 +
width: 48%;
 +
}
 +
.textContent div.column-right {
 +
width: 48%;
 +
float: right;
 +
}
 +
.textContent #clear {
 +
clear: both;
 +
height: 10px;
 +
}
 +
/* Responsive design! */
 +
@media only screen and (max-width : 600px) {
 +
      /* Small screens: two columns become one! */
 +
      .textContent div.column-left,
 +
      .textContent div.column-right {
 +
        float: none;
 +
        width: 100%;
 +
      }
 +
}
 +
 +
.textContent hr {
 +
    border: 0;
 +
    border-bottom: 1px solid grey;
 +
    margin-left: 100px;
 +
    margin-right: 100px;
 +
    margin-bottom: 50px;
 +
    margin-top: 50px;
 +
}
 +
 +
.textContent a {
 +
  color: #636363;
 +
}
 +
.textContent a:hover {
 +
  color: #909090;
 +
}
 +
 +
 +
/* Tables */
 +
.textContent table {
 +
border-collapse: collapse;
 +
border: 1px solid black;
 +
border-top: 2px solid black;
 +
border-bottom: 2px solid black;
 +
margin-top: 20px;
 +
margin-bottom: 30px;
 +
line-height: 17px;
 +
}
 +
.textContent tr {
 +
border-bottom: 1px solid black;
 +
margin: 5px;
 +
}
 +
.textContent th {
 +
font-weight: bold;
 +
text-align: center;
 +
vertical-align: middle;
 +
border-bottom: 2px solid black;
 +
color: black;
 +
padding: 3px;
 +
margin: 3px;
 +
border: 1px solid black;
 +
        color: white;
 +
        background-color: black;
 +
}
 +
.textContent td {
 +
padding: 2px;
 +
vertical-align: middle;
 +
border: 1px solid black;
 +
}
 +
 +
 +
 +
/* Inline styling */
 +
.textContent b, .textContent strong {
 +
font-weight: bold;
 +
}
 +
i, em {
 +
font-style: italic;
 +
}
 +
.textContent u {
 +
text-decoration: underline;
 +
}
 +
 +
 +
 +
/* NOTEBOOK STYLING */
 +
/* Notebook menu */
 +
#notebookMenu {
 +
      width: 150px;
 +
      margin: 0;
 +
      margin-top: 20px;
 +
      position: absolute;
 +
      float: left;
 +
}
 +
#notebookMenu.fixed {
 +
      position: fixed;
 +
      top: 60px;
 +
}
 +
#notebookMenu a {
 +
      color: black;
 +
      text-align: justify;
 +
}
 +
#notebookMenu a:hover {
 +
      color: black;
 +
      text-decoration: underline;
 +
}
 +
#notebookMenu ul li {
 +
      margin: 0;
 +
      width: 100%;
 +
}
 +
#notebookMenu ul li:nth-child(3n+1) {
 +
      list-style-image: url('https://static.igem.org/mediawiki/2015/7/7f/ParisBettencourt_liyellow.png');
 +
}
 +
#notebookMenu ul li:nth-child(3n+2) {
 +
      list-style-image: url('https://static.igem.org/mediawiki/2015/c/c4/ParisBettencourt_limagenta.png');
 +
}
 +
#notebookMenu ul li:nth-child(3n+3) {
 +
      list-style-image: url('https://static.igem.org/mediawiki/2015/0/0b/ParisBettencourt_liblue.png');
 +
}
 +
/* Notebook content */
 +
#notebookContent {
 +
        width: 80%;
 +
width: calc(100% - 200px);
 +
margin-left: 200px;
 +
        height: 100%;
 +
}
 +
@media only screen and (max-width : 600px) {
 +
      /* Smartphone: 2 tiles */
 +
      #notebookMenu {
 +
              display: none;
 +
      }
 +
      #notebookContent {
 +
              width: 100%;
 +
              margin: 0;
 +
      }
 +
}
 +
 +
/* Dates */
 +
.textContent h1.date,
 +
.textContent h2.date {
 +
      background-color: black;
 +
      color: white;
 +
      margin: 0;
 +
      font-size: 40;
 +
      margin-bottom: 10px;
 +
      margin-top: 30px;
 +
      padding:20px;
 +
      padding-top: 10px;
 +
      padding-bottom: 10px;
 +
      height: 50px;
 +
}
 +
.textContent h2.date.one,
 +
.textContent h1.date.one {
 +
      border-bottom: 2px solid #fef200;
 +
}
 +
 +
.textContent h2.date.two,
 +
.textContent h1.date.two {
 +
      border-bottom: 2px solid #f73e61;
 +
}
 +
 +
.textContent h2.date.three,
 +
.textContent h1.date.three {
 +
      border-bottom: 2px solid #00aeef;
 +
}
 +
 +
.textContent a.anchor {
 +
      color: black;
 +
      text-decoration: none;
 +
}
 +
.textContent a.anchor:hover {
 +
      color: black;
 +
      text-decoration: none;
 +
}
 +
 +
 +
.legend, .caption {
 +
      font-size: 13px;
 +
      line-height: 13px;
 +
}
 +
 +
 +
 +
 +
/* PROTOCOLS STYLING */
 +
#protocols .textWrapper,
 +
#protocols .textContent {
 +
      background-color: black;
 +
}
 +
#protocols .textWrapper{
 +
      border-bottom: 10px solid white;
 +
}
 +
/* Gallery */
 +
#protocolsGallerie {
 +
      width: 100%;
 +
      height: 100%;
 +
      margin: auto;
 +
      background-color: black;
 +
}
 +
#protocolsGallerie .box {
 +
      width: 20%;
 +
      padding-bottom: 20%;
 +
      position: relative;
 +
      float: left;
 +
}
 +
#protocolsGallerie .innerBox {
 +
      position: absolute;
 +
      left: 10px;
 +
      right: 10px;
 +
      bottom: 10px;
 +
      top: 10px;
 +
}
 +
#protocolsGallerie .innerBox.cyan {
 +
      background-color: #00AEEF;
 +
}
 +
#protocolsGallerie .innerBox.yellow {
 +
      background-color: #FFF101;
 +
}
 +
#protocolsGallerie .innerBox.magenta {
 +
      background-color: #ED028C;
 +
}
 +
#protocolsGallerie .innerBox img {
 +
      width: 100%;
 +
      height: 100%;
 +
      position: relative;
 +
}
 +
#protocolsGallerie .innerBox a {
 +
      width: 100%;
 +
      height: 100%;
 +
      display: block;
 +
      position: relative;
 +
}
 +
#protocolsGallerie .innerBox p {
 +
      vertical-align: middle;
 +
      text-align: center;
 +
      color: white;
 +
      font-family: 'Generica';
 +
      font-size: 25px;
 +
}
 +
#protocolsGallerie .innerBox .ptext {
 +
      display: block;
 +
      width: 100%;
 +
      /*min-height: 55px;*/
 +
      position: absolute;
 +
      margin: 0;
 +
      margin: auto;
 +
      padding: 5px;
 +
      padding-bottom: 5px;
 +
      padding-top: 2px;
 +
      z-index: 3;
 +
      background-color: rgba(0,0,0,0.6);
 +
      -webkit-transition: all 0.10s ease-in;
 +
      -moz-transition: all 0.10s ease-in;
 +
      transition: all 0.10s ease-in;
 +
}
 +
#protocolsGallerie .innerBox a:hover .ptext {
 +
      padding-top: 5%;
 +
      padding-bottom: 3%;   
 +
}
 +
,
 +
#protocolsGallerie .innerBox a:hover .ptextMembers {
 +
      padding-top: 0;
 +
      padding-bottom: 0; 
 +
}
 +
#protocolsGallerie .innerBox a:hover {
 +
      text-decoration: none;
 +
}
 +
#protocolsGallerie .innerBox.cyan a:hover .ptext {
 +
      border-bottom: 5px solid #00AEEF;     
 +
}
 +
#protocolsGallerie .innerBox.yellow a:hover .ptext {
 +
      border-bottom: 5px solid #FFF101;     
 +
}
 +
#protocolsGallerie .innerBox.magenta a:hover .ptext {
 +
      border-bottom: 5px solid #ED028C;
 +
}
 +
div.textBox {
 +
      width: 60%;
 +
      max-height: 80%;
 +
      position: fixed;
 +
      left: 50%;
 +
      margin-left: -30%;
 +
      top: 15%;
 +
      background-color: white;
 +
      box-shadow: 0 2px 10px grey;
 +
      border-radius: 5px;
 +
      z-index: 50;
 +
      overflow: auto;
 +
      padding: 10px;
 +
      -webkit-transition: all 0.50s ease-in;
 +
      -moz-transition: all 0.50s ease-in;
 +
      transition: all 0.50s ease-in;
 +
      height: 0;
 +
      visibility: hidden;
 +
      display: none;
 +
}
 +
div.textBox.show {
 +
      visibility: visible;
 +
      display: block;
 +
      height: 80%;
 +
      -webkit-transition: all 0.50s ease-in;
 +
      -moz-transition: all 0.50s ease-in;
 +
      transition: all 0.50s ease-in;
 +
}
 +
div.textBox.show.FS {
 +
      width: 100%;
 +
      width: calc(100% - 20px);
 +
      height: 100%;
 +
      height: calc(100% - 120px);
 +
      max-height: 100%;
 +
      left: 0;
 +
      top: 100px;
 +
      margin: 0;
 +
      box-shadow: 0 0 0;
 +
      border-radius: 0;
 +
      z-index: 4;
 +
}
 +
.textBox h3 {
 +
      color: white;
 +
      background-color: black;
 +
      width: 110%;
 +
      padding: 7px;
 +
      padding-left: 40px;
 +
      margin: 0;
 +
      position: relative;
 +
      left: -20px;
 +
      top: -10px;
 +
}
 +
.textBox.FS h3 {
 +
      top: 0px;
 +
      margin-top: 100px;
 +
}
 +
#bg {
 +
      background-color: rgba(0,0,0,0.8);
 +
      width: 100%;
 +
      height: 100%;
 +
      position: fixed;
 +
      top: 0;
 +
      left: 0;
 +
      display: none;
 +
      z-index: 40;
 +
}
 +
#bg.show {
 +
      display: block;
 +
}
 +
#bg.show.FS {
 +
      display: block;
 +
      background-color: white;
 +
      z-index: 4;
 +
}
 +
 +
/* Responsive design! */
 +
@media only screen and (max-width : 480px) {
 +
      /* Smartphone: 2 tiles */
 +
      #protocolsGallerie .box {
 +
              width: 50%;
 +
              padding-bottom: 50%;
 +
      }
 +
      #protocolsGallerie .innerBox p {
 +
              font-size: 20px;
 +
              padding-top: 5px;
 +
      }
 +
      div.textBox {
 +
              width: 300px;
 +
              max-height: 78%;
 +
              position: fixed;
 +
              left: 50%;
 +
              margin-left: -150px;
 +
              top: 10%;
 +
      }
 +
}
 +
@media only screen and (max-width : 740px) and (min-width : 481px) {
 +
      /* Tablet: 3 tiles */
 +
      #protocolsGallerie .box {
 +
              width: 33.33%;
 +
              padding-bottom: 33.33%;
 +
      }
 +
      #protocolsGallerie .innerBox p {
 +
              font-size: 20px;
 +
              padding-top: 5px;
 +
      }
 +
}
 +
@media only screen and (max-width : 1300px) and (min-width : 741px) {
 +
      /* Small desktop: 4 tile */
 +
      #protocolsGallerie .box {
 +
              width: 25%;
 +
              padding-bottom: 25%;
 +
      }
 +
      #protocolsGallerie .innerBox p {
 +
              font-size: 20px;
 +
              padding-top: 5px;
 +
      }
 +
}
 +
 +
 +
 +
/* MEDALS STYLING */
 +
#medals {
 +
      padding-top: 50px;
 +
      margin: auto;
 +
}
 +
#medals h2 {
 +
      text-align: center;
 +
}
 +
#bronze,
 +
#silver,
 +
#gold,
 +
#jamboree,
 +
#empty {
 +
      width: 30%;
 +
      margin: 1.5%;
 +
      float: left;
 +
      background-size: 200px;
 +
      background-repeat: no-repeat;
 +
      background-position: top;
 +
      padding-top: 200px;
 +
}
 +
#bronze {
 +
      background-image: url('https://static.igem.org/mediawiki/2015/0/0f/ParisBettencourt_bronze.png');
 +
}
 +
#silver {
 +
      background-image: url('https://static.igem.org/mediawiki/2015/1/14/ParisBettencourt_silver.png');
 +
}
 +
#gold {
 +
      background-image: url('https://static.igem.org/mediawiki/2015/5/56/ParisBettencourt_Gold.png');
 +
}
 +
#jamboree {
 +
      background-image: url('https://static.igem.org/mediawiki/2015/d/d1/ParisBettencorut_igemFromAbove_small.jpg');
 +
      background-size: 500px;
 +
      background-repeat: no-repeat;
 +
      background-position: top;
 +
      padding-top: 320px;
 +
}
 +
#medals ul{
 +
      list-style-type: none;
 +
}
 +
#medals li {
 +
      padding-left: 30px;
 +
      background-repeat: no-repeat;
 +
      background-position: 10px 7px;
 +
      background-size: 13px;
 +
}
 +
#medals li.ok {
 +
      color: black;
 +
      background-image: url("https://static.igem.org/mediawiki/2015/5/52/ParisBettencourt_checkmark.jpg");
 +
      margin-left: 5px;
 +
}
 +
#medals li.nok {
 +
      color: #DD0000;
 +
      background-image: url("https://static.igem.org/mediawiki/2015/6/6d/ParisBettencourt_cross.png");
 +
}
 +
/* Responsive design! */
 +
@media only screen and (max-width : 740px) {
 +
      /* Small screens: 1 column */
 +
      #gold,
 +
      #silver,
 +
      #bronze {
 +
              float: none;
 +
              width: 100%;
 +
              max-width: 500;
 +
              padding-bottom: 60px;
 +
              margin: auto;
 +
      }
 +
}
 +
 +
 +
 +
 +
/* ACKNOWLEDGEMENTS SPONSORS STYLING */
 +
#sponsors {
 +
      width: 100%;
 +
      max-width: 1800px;
 +
      margin: auto;
 +
      text-align: center;
 +
}
 +
#sponsors img {
 +
}
 +
#sponsors table {
 +
      margin: auto;
 +
      width: 100%;
 +
}
 +
#sponsors table,
 +
#sponsors tr,
 +
#sponsors td {
 +
      border: none;
 +
}
 +
#sponsors td {
 +
      padding: 15px;
 +
}
 +
 +
 +
 +
 +
/* Team page */
 +
#teamGallery {
 +
      width: 100%;
 +
      height: 100%;
 +
      background-color: transparent;
 +
}
 +
#teamGallery .box {
 +
      width: 20%;
 +
      padding-bottom: 20%;
 +
      position: relative;
 +
      float: left;
 +
}
 +
#teamGallery .innerBox {
 +
      position: absolute;
 +
      left: 3px;
 +
      right: 3px;
 +
      bottom: 3px;
 +
      top: 3px;
 +
}
 +
#teamGallery .innerBox.cyan {
 +
      background-color: #00AEEF;
 +
}
 +
#teamGallery .innerBox.yellow {
 +
      background-color: #FFF101;
 +
}
 +
#teamGallery .innerBox.magenta {
 +
      background-color: #ED028C;
 +
}
 +
#teamGallery .innerBox img {
 +
      width: 100%;
 +
      height: 100%;
 +
      position: relative;
 +
}
 +
#teamGallery .innerBox a {
 +
      width: 100%;
 +
      height: 100%;
 +
      display: block;
 +
      position: relative;
 +
}
 +
#teamGallery .innerBox a:hover .ptext {
 +
      padding-top: 5%;
 +
      padding-bottom: 3%;   
 +
}
 +
#teamGallery .innerBox a:hover {
 +
      text-decoration: none;
 +
}
 +
#teamGallery .innerBox.cyan a:hover .ptext {
 +
      border-bottom: 5px solid #00AEEF;     
 +
}
 +
#teamGallery .innerBox.yellow a:hover .ptext {
 +
      border-bottom: 5px solid #FFF101;     
 +
}
 +
#teamGallery .innerBox.magenta a:hover .ptext {
 +
      border-bottom: 5px solid #ED028C;
 +
}
 +
 +
 +
.descriptionArea {
 +
      width: 99%;
 +
      width: calc(100% - 20px);
 +
      display: none;
 +
      color: black;
 +
}
 +
.descriptionArea.show {
 +
      display: block;
 +
}
 +
.descriptionArea img {
 +
      display: block;
 +
      width: 100%;
 +
      margin-top: 40px;
 +
      padding: 3px;
 +
}
 +
.descriptionArea.cyan img {
 +
      border: 1px solid #00AEEF;
 +
}
 +
.descriptionArea.yellow img {
 +
      border: 1px solid #FFF101;
 +
}
 +
.descriptionArea.magenta img {
 +
      border: 1px solid #ED028C;
 +
}
 +
 +
 +
/* "Read more" button */
 +
a.readMore {
 +
        margin-top: 0px
 +
        margin-right: 0px;
 +
        padding: 10px 16px;
 +
        font-size: 20px;
 +
        font-family: 'Arial', 'sans-serif';
 +
        line-height: 100%;
 +
        text-shadow: 0 1px rgba(0,0,0,0.4);
 +
        color: white;
 +
        display: inline-block;
 +
        vertical-align: middle;
 +
        text-align: center;
 +
        cursor: pointer;
 +
        font-weight: bold;
 +
        -webkit-transition: background 0.1s ease-in-out;
 +
        -moz-transition: background 0.1s ease-in-out;
 +
        -ms-transition: background 0.1s ease-in-out;
 +
        -o-transition: background 0.1s ease-in-out;
 +
        transition: background 0.1s ease-in-out;
 +
        -webkit-border-radius: 2px;
 +
        -moz-border-radius: 2px;
 +
}
 +
a.readMore:active {
 +
        padding-top: 9px;
 +
        margin-bottom: -1px;
 +
}
 +
a.readMore, a.readMore:hover, a.readMore:active {
 +
        outline: 0 none;
 +
        text-decoration: none;
 +
        color: white;
 +
}
 +
a.buttonCyan {
 +
        background-color: #2293E1;
 +
        box-shadow: 0px 2px 0px 0px #1C7BBD;
 +
}
 +
a.buttonCyan:hover, a.buttonCyan:active {
 +
        background-color: #1D7FC2;
 +
}
 +
a.buttonCyan:active {
 +
        box-shadow: 0px 1px 0px 0px #1C7BBD;
 +
}
 +
a.buttonYellow {
 +
        background-color: #FCEF01;
 +
        box-shadow: 0px 2px 0px 0px #B2A900;
 +
}
 +
a.buttonYellow:hover, a.buttonYellow:active {
 +
        background-color: #DCD100;
 +
}
 +
a.buttonYellow:active {
 +
        box-shadow: 0px 1px 0px 0px #B2A900;
 +
}
 +
a.buttonMagenta {
 +
        background-color: #F80187;
 +
        box-shadow: 0px 2px 0px 0px #BB0066;
 +
}
 +
a.buttonMagenta:hover, a.buttonMagenta:active {
 +
        background-color: #D90076;
 +
}
 +
a.buttonMagena:active {
 +
        box-shadow: 0px 1px 0px 0px #BB0066;
 +
}
 +
 +
 +
.textWrapper.black {
 +
        background-color: black;
 +
}
 +
.container.black {
 +
        background-color: black;
 +
}
 +
.container.black.white {
 +
        background-color: white;
 +
}
 +
.textContent.black {
 +
        background-color: black;
 +
}
 +
 +
 +
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 14:54, 1 December 2015