Difference between revisions of "Template:Oxford/css/style"

 
(51 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Oxford}}
+
/****************************** DEFAULT WIKI SETTINGS  ****************************/
  
<style>
+
 
.container-format {
+
  body,h1,h2,h3,h4,h5,h6,p {font-family: "Raleway", sans-serif; line-height: 1.5}
     margin-top: 80px;
+
 
 +
        body, html {
 +
        height: 100%;
 +
        line-height: 1.8;
 +
        }
 +
 
 +
    #home_logo, #sideMenu { display:none; }
 +
     #sideMenu, #top_title, .patrollink  {display:none;}
 +
    #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
    body {background-color:white; }
 +
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent p {
 +
        font-family: "Raleway", sans-serif;
 +
        line-height: 1.5;
 +
        margin-bottom: 0px;
 +
    }
 +
 
 +
 
 +
 
 +
/**************************** NAVBAR *************************************/
 +
 
 +
/* Add a dark background color with a little bit see-through */
 +
.navbar {
 +
    left: -20px !important;
 +
    right: -20px !important;
 +
    top: -20px !important;
 +
    padding-top: 25px;
 +
    padding-bottom: 5px;
 +
    padding-left: 25px;
 +
    padding-right: 25px;
 +
    background-color: rgb(25, 55, 89);
 +
    border-color: transparent;
 +
    border: 0;
 +
    font-size: 13px !important;
 +
    letter-spacing: 1px;
 +
    /*opacity:0.95;*/
 +
    margin-top: 17px;
 +
    transition: background-color 0.5s ease-out;
 
}
 
}
.table{
+
 
font-size: 80%;
+
.navbar-nav {
 +
    margin-top: 2.1em !important;
 
}
 
}
  
</style>
+
.navbar li {
 +
    margin: 0 2px;
 +
    border-radius: 5px;
 +
}
  
<div id="content" class="container"> 
+
/* Add a gray color to all navbar links */
<div class="row">
+
.navbar li a, .navbar .navbar-brand {
    <div class="col-sm-8">
+
    color: #fff;
    <h2 class="text-center">Introduction</h2>
+
    border-radius: 5px;
    <p>Chagas disease is a neglected tropical disease named after a Brazilian scientist, Carlos Chagas, who first described the life cycle of the parasite – Trypanosoma cruzi (T.cruzi) that causes the disease.  Chagas is primarily transmitted via the faeces of triatomine bugs, when they take a blood meal. Other forms of transmission include:blood transfusions orally via ingestion of contaminated fluids vertical transmission Chagas is endemic to Latin America but increased migration of infected people has led to it spreading to non-endemic countries, consequently increasing the number of people susceptible to the disease and causing it to be a growing global concern. </p>
+
}
<p>Since the 1990s, strategies to reduce the impact of Chagas in endemic countries have largely focused on preventing transmission through vector control programmes and blood banks. Although these achievements have significantly reduced its incidence, they  are not sufficient to  combat the spread of the disease vertically from a mother to her child. Therefore, congenital Chagas Disease is growing in epidemiological importance, as it is now one of the most persistent form of the transmission among the human population, with prevalence in some rural areas of Bolivia being as high as 70.5%. <br /> <br /><br /> </p>
+
  
<img class="img-responsive" style="margin-left: -50px" src="https://static.igem.org/mediawiki/2017/4/49/T--oxford--chagas_disease--life_cycle.png">
+
/* the color of the single Link ('safety') on hover */
<h3 class="text-center">Parasitology</h3>
+
.navbar-nav li a:hover {
<h6>T.cruzi follows the life-cycle shown in the diagram above: </h6>
+
    color: #193759;//changed
 +
}
  
 +
/* The active link this seems to be useless at the moment*/
 +
.navbar-nav li.active a {
 +
    color: #fff;
 +
    background-color:#29292c;
 +
}
  
<p>All life stages of T.cruzi secrete a specific protease, known as cruzipain, which allow the presence of the trypomastigotes to be detected by our biosensor. However, the levels of trypomastigotes in the human blood falls with time after infection, as shown in figure 2. </p>
+
/* Remove border color from the collapsible button */
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/2/2c/T--oxford--chagas_disease--evolution-chart.png">
+
.navbar-default .navbar-toggle {
<h6>Figure 2. Scheme of evolution of T.cruzi trypomastigotes in the blood of a  human host </h6>
+
    border-color: transparent;
<p>Within 4-8 weeks of being bitten, adults move from the acute phase of Chagas disease to the chronic phase if untreated. </p>
+
}
<p>During the chronic phase, cruzipain levels are very low in the blood and cost effective diagnosis of adults focuses on detecting antibodies specific to T.cruzi. However, antibody based diagnosis is unsuitable for newborns who lack a fully developed immune system. Newborns infected with congenital Chagas disease remain in the acute phase for up to 9 months, during which period there is no current cost-effective diagnostic available. We hope to fill this gap in the ability to diagnose congenital Chagas disease in newborns, using synthetic biology to create a specific protease detection system. </p>
+
  
<h3>Symptoms and current diagnosis</h3>
+
.navbar-default {
<p>Diagnosis of Chagas disease is difficult, as the disease is mostly asymptomatic in the acute phase and for the majority of the chronic phase. However, prolong onset of the chronic phase leads to 30% of patients develop cardiac disorders and up to 10% develop digestive, neurological or mixed alterations that cause 1200 deaths per year.  
+
    border-color:transparent;
The main diagnostic methods currently used to diagnose Chagas are summarised in the table below:</p>
+
}
       
+
 
+
  
</div>
+
.navbar-collapse>ul:before {
<div class="col-sm-4">
+
    content: "";
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/7/76/T--oxford--chagas_disease--chagas_disease.jpeg">
+
    margin-top: 40px;
<br/><br/>
+
}
<img class="img-responsive" src="https://static.igem.org/mediawiki/2017/7/7f/T--oxford--chagas_disease--stage_of_chagas.png">
+
</div>
+
  
<div class="col-sm-12">
+
@media (min-width: 768px){
<table class="table table-hover">
+
     .navbar-collapse>ul:before {
     <thead>
+
         content: "";
      <tr>
+
         margin-top: 0px;
        <th>Test</th>
+
    }
        <th>How it works</th>
+
        <th>Benefits</th>
+
        <th>Limitations</th>
+
        <th>Suitable for newborns</th>
+
      </tr>
+
    </thead>
+
    <tbody>
+
      <tr>
+
        <td>Whole parasite microscopy</td>
+
        <td>
+
        <ul>
+
        <li>Preparation of Giesma blood smears</li>
+
        <li>Visualised using light microscopy</li>
+
        </ul>
+
        </td>
+
        <td>
+
        <ul>
+
        <li>Established method</li>
+
        <li>Carried out by already trained professionals</li>
+
        </ul>
+
        </td>
+
        <td>
+
        <ul>
+
        <li>Not suitable for the when there is little T.cruzi  in the blood</li>
+
        <li>Not always possible to differentiate between T.cruzi from T.rangeli, which does not cause disease in humans.</li>
+
        </ul>
+
         </td>
+
         <td>Yes</td>
+
      </tr>
+
      <tr>
+
    <td>Polymerase Chain Reaction (PCR)</td>
+
    <td>
+
    <ul>
+
    <li>Molecular detection of T. cruzi DNA is performed using a combination of three real-time PCR assays.</li>
+
    <li>Acceptable specimen types are EDTA blood, heart biopsy tissue or cerebrospinal fluid.</li>
+
    </ul>
+
    </td>
+
    <td>
+
    <ul>
+
    <li>Allows high sensitivity in the acute phase</li>
+
    <li>Allows the presence of T.cruzi to be accurately distinguished from T.rangeli</li>
+
    <li>Allows direct detection of infection and easy interpretation of results</li>
+
    </ul>
+
    </td>
+
    <td>
+
    <ul>
+
    <li>High variation in accuracy and lack of international quality controls</li>
+
    <li>High cost and complexity means it is not practical to use in a clinical practice</li>
+
    <li>Further validation is needed to prove whether PCR is suitable to diagnose the  chronic phase of Chagas</li>
+
    </ul>
+
    </td>
+
    <td>Yes</td>
+
      </tr>
+
      <tr>
+
      <td>Serological tests</td>
+
      <td>
+
      <ul>
+
      <li>Detection of antibodies against T.cruzi</li>
+
      <li>Includes techniques such as indirect fluorescent antibody (IFA) test, a commercial enzyme immunoassay (EIA) and immunochromatographic tests</li>
+
      </ul>
+
      </td>
+
      <td>
+
      <ul>
+
      <li>Can be used for acute phase and chronic phase</li>
+
      <li>High specificity and sensitivity</li>
+
      <li>Commercialised and approved for use by WHO</li>
+
      <li>Low-cost formats are available</li>
+
      </ul>
+
      </td>
+
      <td>
+
      <ul>
+
      <li>Cross reactivity can occur with diseases, such as leishmaniasis and schistosomiasis </li>
+
      <li>Performance of these tests is lower than reported by their manufacturer, especially against specific strains of T. cruzi</li>
+
      <li>Not suitable for immunocompromised patients and newborns</li>
+
      </ul>
+
      </td>
+
      <td>No</td>
+
  </tr>
+
    </tbody>
+
  </table>
+
  <p>The table highlights the lack of a rapid and feasible diagnostic for congenital Chagas disease. Moreover, in June 2016 the WHO and experts on Chagas disease based in Latin America regarded a point of care diagnostic for congenital Chagas as their top priority in terms of the diagnostic needs for Chagas disease. The diagnostic needs were ranked following considerations of existing diagnostic tools and the expected clinical and epidemiological scenario of Chagas disease in the next five years. </p>
+
  <h3>Treatment</h3>
+
  <p>An 8 week course of benznidazole or nifurtimox can be used to kill the parasite and treat Chagas disease. The younger the patient and the closer to acquisition of the infection, the higher the probability of parasitologic cure. Therefore, newborns with congenital Chagas disease have the greatest chance for cure, with data from Argentina indicating that the cure rate is higher than 90% if treatment is given within the first year of life. In most cases the potential benefits of medication in curing, preventing or delaying the Chagas is balanced against the possible adverse reactions that occurring in up to 40% of treated patients. However, newborns are least affected by side effects of  benznidazole or nifurtimox, due to the lower weight-accounted dosage, making treatment a very viable option. If the chronic phase is left untreated, additional specific treatment for cardiac or digestive manifestations may be required.</p>
+
  <h4>References</h4>
+
  <h6>http://www.who.int/chagas/strategy/en/ <br/> https://www.hindawi.com/journals/bmri/2014/401864/ <br/> https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4618875/ <br/>
+
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3552304/ <br/> https://www.ncbi.nlm.nih.gov/pubmed?cmd=Search&doptcmdl=Citation&defaultField=Title%20Word&term=Marin-Neto%5Bauthor%5D%20AND%20Pathogenesis%20of%20chronic%20Chagas%20heart%20disease
+
<br/> http://emedicine.medscape.com/article/214581-treatment?pa=8NzeMcIsf2L2NYDeJvy4ZoO1LWEPOwX7vVdtvcVUJoOYwMyg61ZQ3PAOKQ1pIwNHbOMFnZcMllAKcR9rY0RREHf7Bj2Gvk6BKC47oRZ1BB8%3D </h6>
+
  
+
    .navbar-right {
 +
        margin-right: 2% !important;
 +
    }
  
  </div>
+
    .navbar-header {
  </div>
+
        margin-left: 2% !important;
</div>
+
    }
 +
   
 +
    .navbar>li>a {
 +
        padding: 10px 15px;
 +
    }
 +
}
 +
@media (max-width: 761px){
 +
.dropdown-menu li a {
 +
    color: #ffffff;
 +
    letter-spacing: 1px;
 +
}
 +
}
 +
 
 +
/* the color of the Dropdown on click */
 +
.open .dropdown-toggle {
 +
    color: #193759;//changed
 +
    background-color: #fff;
 +
}
 +
 
 +
/* the color of the Dropdown links */
 +
.dropdown-menu li a {
 +
    color: #000;
 +
    letter-spacing: 1px;
 +
}
 +
 
 +
/* the color of the dropdown links on hover */
 +
.dropdown-menu li a:hover {
 +
    background-color: #fff;
 +
}
 +
 
 +
.navbar-toggle .icon-bar {
 +
    background: white;
 +
}
 +
 
 +
.navbar-header img {
 +
    height: 80px;
 +
}
 +
 
 +
#globalWrapper {
 +
    margin-bottom: 0px;
 +
    padding-bottom: 0px;
 +
}
 +
 
 +
#top_menu_14 {
 +
    height: 18px;
 +
}
 +
 
 +
#top_menu_14 #user_item {
 +
    margin-top: -3px;
 +
    padding-top: 0px;
 +
}
 +
 
 +
#top_menu_14 #bars_item img {
 +
    vertical-align: top;
 +
}
 +
 
 +
@media (max-width: 810px) {
 +
    #home-link {
 +
        display:none;
 +
    }
 +
}
 +
 
 +
.nav .open>a, .nav>li>a:hover, .nav .open:hover>a, .nav .dropdown:hover>a{
 +
    background-color: white;
 +
    border: none;
 +
    border-bottom-left-radius: 0px;
 +
    border-bottom-right-radius: 0px;
 +
    box-shadow: 0px 6px 12px rgba(0,0,0,.175);
 +
    color: #193759;//changed
 +
}
 +
 
 +
.nav .open .dropdown-menu, .nav .dropdown-menu {
 +
    border: none;
 +
    border-top-left-radius: 4px !important;
 +
}
 +
 
 +
.nav .open>a:hover, .nav a:focus {
 +
    background-color: white !important;
 +
}
 +
 
 +
@media (min-width: 979px) {
 +
  ul.nav li.dropdown:hover > ul.dropdown-menu {
 +
    display: block;
 +
  }
 +
}
 +
 
 +
.navbar.scrolled {
 +
    background-color: rgba(0,33,71,0.9);
 +
}
 +
 
 +
@media (min-width: 1200px) {
 +
    .container {
 +
        width: 1000px;
 +
    }
 +
}
 +
 
 +
 
 +
/**** PAGE CONTENT ****/
 +
 
 +
#bodyContent {
 +
    background-color: white;
 +
}
 +
 
 +
#bodyContent h1 {
 +
    text-align: center;
 +
    font-size: 48pt;
 +
    font-weight: lighter;
 +
}
 +
 
 +
#bodyContent h2 {
 +
    text-align: center;
 +
    font-size: 24pt;
 +
    font-weight: bold;
 +
}
 +
 
 +
#bodyContent h3 {
 +
    text-align: left;
 +
    font-size: 14pt;
 +
    font-weight: bold;
 +
    text-decoration: underline;
 +
}
 +
 
 +
#bodyContent h4 {
 +
    text-align: left;
 +
    font-size: 14pt;
 +
    text-decoration: underline;
 +
}
 +
 
 +
#bodyContent p {
 +
    font-size: 14pt;
 +
    margin-top: 10px;
 +
}
 +
 
 +
#bodyContent .table {
 +
    font-size: 12pt;
 +
   
 +
}
 +
 
 +
.img-center {
 +
    margin: 6pt auto;
 +
}
 +
 
 +
.img-reponsive {
 +
    margin-top: 6pt;
 +
    margin-bottom: 6pt;
 +
 
 +
}
 +
#bodyContent .imager{
 +
float: right;
 +
/*width: 200px;*/
 +
text-align: center;
 +
font-size: 12px;
 +
padding-left: 20px;
 +
 
 +
}
 +
 
 +
#bodyContent .imagel{
 +
float: left;
 +
/*width: 200px;*/
 +
text-align: center;
 +
font-size: 12px;
 +
padding-right: 20px;
 +
 
 +
}
 +
 
 +
#side {
 +
    float: left;
 +
padding-right: 20px;
 +
padding-top: 15px;
 +
}
 +
#sider {
 +
    float: right;
 +
padding-left: 20px;
 +
padding-top: 15px;
 +
}

Latest revision as of 03:16, 2 November 2017

/****************************** DEFAULT WIKI SETTINGS ****************************/


  body,h1,h2,h3,h4,h5,h6,p {font-family: "Raleway", sans-serif; line-height: 1.5}
       body, html {
       height: 100%;
       line-height: 1.8;
       }
 
   #home_logo, #sideMenu { display:none; }
   #sideMenu, #top_title, .patrollink  {display:none;}
   #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
   body {background-color:white; }
   #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent p {
       font-family: "Raleway", sans-serif;
       line-height: 1.5;
       margin-bottom: 0px;
   }
 
 
 

/**************************** NAVBAR *************************************/

/* Add a dark background color with a little bit see-through */ .navbar {

   left: -20px !important;
   right: -20px !important;
   top: -20px !important;
   padding-top: 25px;
   padding-bottom: 5px;
   padding-left: 25px;
   padding-right: 25px;
   background-color: rgb(25, 55, 89);
   border-color: transparent;
   border: 0;
   font-size: 13px !important;
   letter-spacing: 1px;
   /*opacity:0.95;*/
   margin-top: 17px;
   transition: background-color 0.5s ease-out;

}

.navbar-nav {

   margin-top: 2.1em !important;

}

.navbar li {

   margin: 0 2px;
   border-radius: 5px;

}

/* Add a gray color to all navbar links */ .navbar li a, .navbar .navbar-brand {

   color: #fff;
   border-radius: 5px;

}

/* the color of the single Link ('safety') on hover */ .navbar-nav li a:hover {

   color: #193759;//changed

}

/* The active link this seems to be useless at the moment*/ .navbar-nav li.active a {

   color: #fff;
   background-color:#29292c;

}

/* Remove border color from the collapsible button */ .navbar-default .navbar-toggle {

   border-color: transparent;

}

.navbar-default {

   border-color:transparent;

}

.navbar-collapse>ul:before {

   content: "";
   margin-top: 40px;

}

@media (min-width: 768px){

   .navbar-collapse>ul:before {
       content: "";
       margin-top: 0px;
   }
   .navbar-right {
       margin-right: 2% !important;
   }
   .navbar-header {
       margin-left: 2% !important;
   }
   
   .navbar>li>a {
       padding: 10px 15px;
   }

} @media (max-width: 761px){ .dropdown-menu li a {

   color: #ffffff;
   letter-spacing: 1px;

} }

/* the color of the Dropdown on click */ .open .dropdown-toggle {

   color: #193759;//changed
   background-color: #fff;

}

/* the color of the Dropdown links */ .dropdown-menu li a {

   color: #000;
   letter-spacing: 1px;

}

/* the color of the dropdown links on hover */ .dropdown-menu li a:hover {

   background-color: #fff;

}

.navbar-toggle .icon-bar {

   background: white;

}

.navbar-header img {

   height: 80px;

}

  1. globalWrapper {
   margin-bottom: 0px;
   padding-bottom: 0px;

}

  1. top_menu_14 {
   height: 18px;

}

  1. top_menu_14 #user_item {
   margin-top: -3px;
   padding-top: 0px;

}

  1. top_menu_14 #bars_item img {
   vertical-align: top;

}

@media (max-width: 810px) {

   #home-link {
       display:none;
   }

}

.nav .open>a, .nav>li>a:hover, .nav .open:hover>a, .nav .dropdown:hover>a{

   background-color: white;
   border: none;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   box-shadow: 0px 6px 12px rgba(0,0,0,.175);
   color: #193759;//changed

}

.nav .open .dropdown-menu, .nav .dropdown-menu {

   border: none;
   border-top-left-radius: 4px !important;

}

.nav .open>a:hover, .nav a:focus {

   background-color: white !important;

}

@media (min-width: 979px) {

 ul.nav li.dropdown:hover > ul.dropdown-menu {
   display: block;
 }

}

.navbar.scrolled {

   background-color: rgba(0,33,71,0.9);

}

@media (min-width: 1200px) {

   .container {
       width: 1000px;
   }

}


/**** PAGE CONTENT ****/

  1. bodyContent {
   background-color: white;

}

  1. bodyContent h1 {
   text-align: center;
   font-size: 48pt;
   font-weight: lighter;

}

  1. bodyContent h2 {
   text-align: center;
   font-size: 24pt;
   font-weight: bold;

}

  1. bodyContent h3 {
   text-align: left;
   font-size: 14pt;
   font-weight: bold;
   text-decoration: underline;

}

  1. bodyContent h4 {
   text-align: left;
   font-size: 14pt;
   text-decoration: underline;

}

  1. bodyContent p {
   font-size: 14pt;
   margin-top: 10px;

}

  1. bodyContent .table {
   font-size: 12pt;
   

}

.img-center {

   margin: 6pt auto;

}

.img-reponsive {

   margin-top: 6pt;
   margin-bottom: 6pt;

}

  1. bodyContent .imager{

float: right; /*width: 200px;*/ text-align: center; font-size: 12px; padding-left: 20px;

}

  1. bodyContent .imagel{

float: left; /*width: 200px;*/ text-align: center; font-size: 12px; padding-right: 20px;

}

  1. side {
   float: left;

padding-right: 20px; padding-top: 15px; }

  1. sider {
   float: right;

padding-left: 20px; padding-top: 15px; }