Difference between revisions of "Team:Slovenia"

Line 1: Line 1:
−
{{Slovenia}}
+
li , p, td, th, tr{
−
<html>
+
color: rgba(0, 0, 0, 0.8);
−
<head>
+
}
−
    <title>Home</title>
+
/* from docs.css */
−
    <link rel="stylesheet"
+
#example .main.container .introduction p,
−
          href="//2016.igem.org/Team:Slovenia/libraries/semantic-min-css?action=raw&ctype=text/css">
+
#example .main.container .example p,
−
    <script type="text/javascript"
+
#example .main.container p {
−
            src="//2016.igem.org/Team:Slovenia/libraries/semantic-min-js?action=raw&ctype=text/javascript"></script>
+
    color: rgba(0, 0, 0, 0.8);
−
    <link rel="stylesheet" type="text/css" href="//2016.igem.org/Team:Slovenia/libraries/custom-css?action=raw&ctype=text/css">
+
}
−
    <script type="text/javascript" src="//2016.igem.org/Team:Slovenia/libraries/custom-js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
            src="//2016.igem.org/Team:Slovenia/libraries/zitator-js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript"
+
−
            src="https://2016.igem.org/Team:Slovenia/libraries/bibtexparse-js?action=raw&ctype=text/javascript"></script>
+
−
<!-- MathJax (LaTeX for the web) -->
+
−
    <script type="text/x-mathjax-config">
+
−
        MathJax.Hub.Config({
+
−
            tex2jax: {
+
−
                inlineMath: [['$', '$'], ['\\(', '\\)']]
+
−
            },
+
−
            jax: ["input/TeX","output/SVG"],
+
−
            TeX: {
+
−
                extensions: ["mhchem.js"],
+
−
                equationNumbers: {autoNumber: "all" },
+
−
                Macros: {
+
−
                  goodbreak: '\\mmlToken{mo}[linebreak="goodbreak"]{}',
+
−
                  badbreak: ['\\mmlToken{mo}[linebreak="badbreak"]{#1}',1],
+
−
                  nobreak: ['\\mmlToken{mo}[linebreak="nobreak"]{#1}',1],
+
−
                  invisibletimes: ['\\mmlToken{mo}{\u2062}']
+
−
                }
+
−
            },
+
−
            CommonHTML: { linebreaks: { automatic: true, width: "75% container" } },
+
−
            "HTML-CSS": { linebreaks: { automatic: true, width: "68% container" }},
+
−
            SVG: { linebreaks: { automatic: true, width: "200% container" }}
+
−
        });
+
−
    </script>
+
−
<script type="text/javascript" async
+
−
            src="//2016.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
+
−
    </script>
+
−
</head>
+
−
<body>
+
−
<style>
+
−
.container {
+
−
position: relative;
+
−
}
+
−
.module1 {
+
−
position: absolute;
+
−
top: 220px;
+
−
left: 10px;
+
−
}
+
−
.module2 {
+
−
position: absolute;
+
−
bottom: 90px;
+
−
left: 220px;
+
−
}
+
−
.module3 {
+
−
position: absolute;
+
−
top: 180px;
+
−
right: 350px;
+
−
}
+
−
.module4 {
+
−
position: absolute;
+
−
bottom: 15px;
+
−
right: 380px;
+
−
}
+
−
+
−
/* Popup container - can be anything you want */
+
−
.popup {
+
−
display: inline-block;
+
−
cursor: pointer;
+
−
-webkit-user-select: none;
+
−
-moz-user-select: none;
+
−
-ms-user-select: none;
+
−
user-select: none;
+
−
padding: 10px 10px;
+
−
}
+
  
−
/* The actual popup */
+
#example .main.container .examples h2,
−
.popup .popuptext {
+
#example .main.container h2,
−
padding: 10px 10px;
+
#example .main.container .tab > h2 {
−
visibility: hidden;
+
    position: relative;
−
width: 350px;
+
    margin: 5rem 0 3rem;
−
background-color: #555;
+
}
−
color: #fff;
+
−
text-align: center;
+
−
border-radius: 6px;
+
−
position: absolute;
+
−
z-index: 100;
+
−
font-size: 14px;
+
−
line-height: 20px;
+
−
}
+
  
−
/* Toggle this class - hide and show the popup */
+
#example .main.container .examples > .rail + h2,
−
.popup .show {
+
#example .main.container > .rail + h2,
−
visibility: visible;
+
#example .main.container > .tab > .rail + h2,
−
-webkit-animation: fadeIn 1s;
+
#example .main.container0 .examples h2:first-child,
−
animation: fadeIn 1s;
+
#example .main.container h2:first-child,
−
}
+
#example .main.container > .tab > h2:first-child {
 +
    margin-top: 0;
 +
}
  
−
/* Add animation (fade in the popup) */
+
#example > .pusher > .full.height {
−
@-webkit-keyframes fadeIn {
+
    display: -webkit-box;
−
from {opacity: 0;}
+
    display: -webkit-flex;
−
to {opacity: 1;}
+
    display: -ms-flexbox;
−
}
+
    display: flex;
 +
    -webkit-flex-direction: row;
 +
    -ms-flex-direction: row;
 +
    flex-direction: row;
 +
}
  
−
@keyframes fadeIn {
+
#example .full.height > .banana {
−
from {opacity: 0;}
+
    position: relative;
−
to {opacity:1 ;}
+
    z-index: 1;
−
}
+
    background-color: #1b1c1d;
−
.container img{
+
    width: 200px;
−
display: block;
+
    -webkit-box-flex: 0;
−
margin-left: auto;
+
    -webkit-flex: 0 0 auto;
−
margin-right: auto;
+
    -ms-flex: 0 0 auto;
−
}
+
    flex: 0 0 auto;
−
+
    padding-left: 50px;
 +
}
  
−
.corners {
+
#example .article {
−
border-radius: 15px;
+
    -webkit-box-flex: 1;
−
border: 2px solid #000000;
+
    -webkit-flex: 1 1 auto;
−
padding: 15px;
+
    -ms-flex: 1 1 auto;
−
margin-left:15px;
+
    flex: 1 1 auto;
−
margin-bottom:15px;
+
    min-width: 0;
−
}
+
}
−
+
 
−
</style>
+
#example .main.container {
−
<script>
+
    padding: 100px 0 7em;
−
$( document ).ready(
+
}
−
function() {
+
 
−
var getImgs = function() {
+
/* Defaults */
−
var imgs = [];
+
/*#example .masthead > .container,*/
−
$('img').each(function() {
+
#example .main.container {
−
console.log("image detected");
+
/*#example .fixed.menu > .container {*/
−
var data = $(this).data('alt');
+
    margin-left: 3em !important;
−
imgs.push(data);
+
    margin-right: 3em !important;
−
});
+
    width: auto !important;
−
return imgs;
+
    max-width: 960px !important;
−
}
+
}
−
var imgs = getImgs();
+
 
−
//preload images
+
/*#example .masthead > .container {*/
−
var image = [];
+
/*margin-right: 387px !important;*/
−
$.each(imgs, function(index) {
+
/*}*/
−
console.log("loading resource");
+
#example .main.container {
−
image[index] = new Image();
+
    /*margin-right: 387px !important;*/
−
image[index].src = imgs[index];
+
    margin-right: 20% !important;
−
});
+
}
−
}
+
 
−
);
+
/* Remove Fixed Sidebar */
−
function loadImage(sourceImage, popupname) {
+
@media only screen and (max-width: 1144px) {
−
console.log(sourceImage);
+
    /* Hide Fixed Sidebar */
−
var image = document.getElementById("projectScheme");
+
    #example .full.height > .banana {
−
image.src = sourceImage;
+
        display: none;
−
+
    }
−
//var rect = image.getBoundingClientRect();
+
}
−
//console.log(rect.top, rect.right, rect.bottom, rect.left);
+
 
−
+
/* Remove Rail */
−
var popup = document.getElementById(popupname);
+
@media only screen and (max-width: 992px) {
−
//popup.style.top = ((rect.bottom - rect.top)/2).toString().concat("px");
+
    /* Fluid Containers */
−
//popup.style.left =  ((rect.right - rect.left)/2).toString().concat("px");
+
    #example .masthead > .container,
−
//console.log((rect.right - rect.left)/2, (rect.bottom - rect.top)/2);
+
    #example .main.container,
−
popup.classList.toggle('show');
+
    #example .fixed.menu > .container {
−
}
+
        margin-left: 1em !important;
−
</script>
+
        margin-right: 1em !important;
−
+
        max-width: none !important;
−
<div id="example">
+
    }
−
<div class="pusher">
+
}
−
<div class="full height">
+
 
−
<div class="banana">
+
/* end of docs*/
−
<a href = "//2016.igem.org/Team:Slovenia">
+
 
−
<img class="ui medium sticky image" src="//2016.igem.org/wiki/images/d/d1/T--Slovenia--logo.png">
+
/* override default */
−
</a>
+
#content {
−
<div class="ui vertical sticky text menu">
+
    width: 100%;
−
<a class="item" href="#intro" style="margin-left: 10%">
+
    background-color: transparent;
−
<i class="selected radio icon"></i>
+
    margin-left: 0;
−
<b>Project</b>
+
    padding-left: 0;
−
</a>
+
}
−
<a class="item" href="#achievements" style="margin-left: 10%">
+
 
−
<i class="selected radio icon"></i>
+
#contentSub, #firstHeading, #column-one, #footer {
−
<b>Achievements</b>
+
    display: none;
−
</a>
+
}
−
<a class="item" href="#requirements" style="margin-left: 10%">
+
 
−
<i class="selected radio icon"></i>
+
#firstHeading, #content {
−
<b>Medal requirements</b>
+
    margin-top: 0 !important;
−
</a>
+
    padding-top: 0 !important;
−
<a class="item" href="idea">
+
}
−
<i class="chevron circle right icon"></i>
+
 
−
<b>Idea</b>
+
#bodyContent {
−
</a>
+
    margin-left: 0;
−
<span>
+
    padding-left: 0;
−
<br />
+
}
−
</span>
+
 
−
<img class = "ui large rounded image" src="//2016.igem.org/wiki/images/c/cb/T--Slovenia--igemLogo.gif">
+
body {
−
<p style="font-size:11px;">
+
    /*padding-top: 14px;*/
−
The iGEM symbol was drawn with a glass rod letter by letter on engineered human cells and imaged by a camera.
+
    background-color: #FCFCFC;
−
Cells were transfected with constructs coding for the bacterial ion channel MscS, gas vesicles (GvpA and GvpC) and a Ca-dependent
+
}
−
cyclic split luciferase reporter.
+
 
−
</p>
+
/* transparenten pravokotnik na levi in del za besedilo */
−
</div>
+
#example:not(.site) > .pusher > .full.height {
−
+
    background-color: transparent;
−
</div>
+
}
−
<div class="article" id="context">
+
 
−
<!-- menu goes here -->
+
/* pravokotnik na levi - sirina, ozadje.. */
−
<!-- content goes here -->
+
#example .full.height > .banana {
−
<div class="main ui citing justified container">
+
    width: 25%;
−
<div>
+
    background-color: transparent;
−
<h1 class="ui centered dividing header"><span id="intro" class = "section"> &nbsp; </span>Sonicell</h1>
+
    padding-top: 12px;
−
<div class = "ui segment">
+
}
−
<h4>Abstract in plain English</h4>
+
 
−
<p>
+
/* menus */
−
<br />
+
#projectSubmenu, #partsSubmenu, #notebookSubmenu, #notebookSubmenu, #societySubmenu, #ideaSubmenu, #homeSubmenu, #dryLabSubmenu, #teamSubmenu, #proteaseSignallingSubmenu, #mechanosensingSubmenu, #implementationSubmenu {
−
Synthetic biology aims to control cells so they can obey our commands and do what we want, for example to produce drugs when needed. In our project we made cells respond to ultrasound or touch. When we touch the cells they light up, which can be recorded on a camera. Ideally we want cells to respond to our commands as fast as possible, because sometimes we can’t wait an hour before the cells produce the medicine and release it. That is why we gave cells a novel mechanism of processing information.
+
    display: none;
−
We achieved this by combining several enzymes that recognize very specific parts of proteins and cut them, which changes their function. This allowed us to combine different signals, like sound, touch, light or chemicals, to obtain the desired cell response. The new enzymes can also cut the anchor with which medicines are attached to cells after the cells make them. Among many possible uses of our inventions, we can imagine activating cells in the brain by ultrasound, which means that we don’t need to use
+
}
−
surgery to help people with Parkinson’s disease, or can trigger fast production of insulin in the body, to help people with diabetes.
+
 
−
<br /><br />
+
#menucomb {
−
</p>
+
    background-color: #FCFCFC;
−
</div>
+
    padding-top: 12px;
−
<div class = "container">
+
    padding-bottom: 12px;
−
<img width = "800px" style = "border-radius: 15px;" src="//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png" alt="project scheme" usemap="#projectmap" id = "projectScheme"></img>
+
    margin-top: 0;
−
<map name="projectmap">
+
}
−
  <area class="popup" shape="poly" coords="74, 132, 136, 217, 241, 225, 319, 175, 365, 89, 298, 42, 152, 62" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/9/92/T--Slovenia--Main-scheme1.png', 'module1')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module1')" href="resultsModule1.html"></area>
+
 
−
  <area class="popup" shape="poly" coords="387, 125, 393, 283, 423, 316, 518, 190, 486, 120" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/5/54/T--Slovenia--Main-scheme3.png', 'module2')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module2')" href="resultsModule2.html"></area>
+
.ui.vertical.sticky.menu {
−
  <area class="popup" shape="poly" coords="528, 77, 497, 134, 537, 173, 672, 185, 739, 145, 733, 94, 694, 71" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/f/f6/T--Slovenia--Main-scheme2.png', 'module3')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module3')" href="resultsModule3.html"></area>
+
    font-size: 1rem;
−
  <area class="popup" shape="poly" coords="393, 283, 423, 316, 454, 300, 474, 260, 537, 273, 494, 305, 678, 285, 697, 243, 788, 239, 788, 330, 383, 374, 343, 319" alt="module1" onmouseover="loadImage('//2016.igem.org/wiki/images/1/12/T--Slovenia--Main-scheme4.png', 'module4')" onmouseout="loadImage('//2016.igem.org/wiki/images/c/c2/T--Slovenia--Main-scheme0.png', 'module4')" href="resultsModule4.html"></area>
+
    background-color: transparent;
−
</map>
+
    padding-top: 0px;
−
<div class="popup module1">
+
    margin-left: 10px;
−
<span class="popuptext" id="module1"><b>Enhanced mechanosensing:</b><br /> Sensitivity of mammalian cells to ultrasound or other mechanical stimuli was enhanced by the introduction of mechanosensitive ion channels and/or by the expression of protein gas vesicles from bacteria. Influx of calcium through channels is sensed by formation of a complex between calmodulin and M13 peptide that can result in a rapid light emission by cells (used for cell painting) or reconstitution of a split protease.</span>
+
    margin-right: auto;*/
−
</div>
+
}
−
<div class="popup module2">
+
 
−
<span class="popuptext" id="module2"><b>Protease based signaling <br />and information processing:</b><br /> Combinations of proteolytic activities against specific targets resulted in activation of a reporter or another protease, which forms the basis for the design of a new type of rapid signaling pathways and construction of logic functions.</span>
+
/* end of menus */
−
</div>
+
 
−
<div class="popup module3">
+
h1 > span, h2 > span, h3 > span, h4 > span  {
−
<span class="popuptext" id="module3"><b>Orthogonal site-specific proteases: </b><br /> A collection of orthogonal site-specific proteases that recognize different targets was prepared as split proteins, whose activity against selected targets can be induced by stimulation with an external signal such as light or chemicals.</span>
+
  margin-top: -122px;        /* Size of fixed header */
−
</div>
+
  padding-bottom: 122px;
−
<div class="popup module4">
+
  display: block;
−
<span class="popuptext" id="module4"> <b>Protease-triggered rapid secretion <br /> of therapeutic proteins:</b> <br />A rapid cellular response by secretion of a protein is triggered by the proteolytic cleavage of an endoplasmic reticulum retention peptide. After the cleavage the cargo protein is moved from the ER, and secreted as therapeutic protein.</span>
+
}
−
</div>
+
 
−
</div>
+
/* tabelite neka bidat na sredina */
−
<div class = "ui segment">
+
.ui.table {
−
<p style = "font-size:80%">Project Sonicell introduces exciting foundational advances to synthetic biology aimed to enable rapid cellular response to a combination of external stimuli such as sound, light or chemical compounds. This system is composed of a module for enhanced sensitivity of cells to ultrasound or other mechanical stimuli sensed by a calcium-dependent reporter, and a module for integration of a combination of several input signals into a signaling pathway based on the collection of orthogonal proteases. Finally, the proteases were designed to cleave an endoplasmic reticulum retention signal from target proteins, which results in a secretion of premade proteins.</p>
+
    margin: auto;
−
</div>
+
    width: 100%;
−
<div class= "ui segment">
+
}
−
<h4>Abstract for experts</h4>
+
 
−
<br />
+
/*црна боја на менито */
−
<p>Synthetic biology opens exciting perspectives to control cells, for applications ranging from industrial processes to cell-based therapy. However, the large majority of designed cellular circuits are based on the transcriptional regulation, which may be too slow for many therapeutic or diagnostic applications, for example delivery of insulin or detection of a metabolite. Several medical doctors and researchers that we consulted stressed that a fast but controllable response is high on their wish list of expectations from synthetic biology. Additionally, noninvasive stimulation of selected tissues in the organism would also be highly desirable. While light is extremely useful as a rapid, spatially-restricted input signal, it cannot penetrate deep into the tissue. On the other hand, ultrasound combines several advantages of light with the added ability to penetrate tissue.</p>
+
.home:link, .home:visited, .home:active, .home:hover {
−
<p>In our project we enhanced the sensitivity of mammalian cells to ultrasound or other mechanical stimulus by introduction of bacterial or engineered mammalian mechanosensors. Additionally, the response to ultrasound and touch was strongly increased by expression of the two components of bacterial gas vesicles, GvpA and GvpC. Mechanosensing was detected by the calcium-induced calmodulin-M13 complex reconstituting split cyclic luciferase, highly applicable for the emerging field of mechanogenetics. This enabled us to draw on cells using touch, where we engaged in collaboration with an artist.</p>
+
    color: black;
−
<p>For the rapid response of cells to multiple stimuli we designed proteolysis-based signaling pathways. For this purpose 4 orthogonal split proteases were generated, each recognizing its own motif of 7 amino acid residues. Based on cleavage of coiled-coil dimerizing domains we demonstrated the ability to implement proteolysis-based signal pathways and logic functions in mammalian cells. Based on the cleavage of an ER retention peptide by a protease, input signals lead to protein secretion without the slow step of induced protein synthesis.</p>  
+
}
−
<p>We believe that this project introduced several foundational advances that could be very useful to synthetic biology far beyond iGEM and for the benefit of humanity for therapy, diagnostics and potentially many other advanced applications.</p>
+
 
−
</div>
+
/* koga se namaluva ekranot ne sakame da gi skrsime zborovite */
−
</div>
+
/*h1, h2, h3, h4 {*/
−
<div>
+
/*!*white-space: nowrap;*!*/
−
<h1 class="ui centered dividing header"><span id="achievements" class = "section"> &nbsp; </span>Achievements</h1>
+
    /*padding-top: 120px!important;*/
−
<div class = "ui segment">
+
    /*margin-top: 0!important;*/
−
<div class = "corners" style="float:right;">
+
/*}*/
−
<p><img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;">  new at science</p>
+
 
−
<p><img src="//2016.igem.org/wiki/images/0/0d/T--Slovenia--igemLogoSmall.png" alt="newAtiGEM" width="30" height="30" style = "display: inline;">  new at iGEM</p>
+
/* скриј го вертикалното мени доколку е екранот премногу мал и не изгледа убаво */
−
</div>
+
/*@media (max-width: 1350px) {*/
−
<ul>
+
/*.ui.sticky.container {*/
−
<li>Mammalian cell sensitivity to ultrasound and mechanical stimuli was increased by ectopic expression of bacterial or human cation permeable channels and functional reconstitution of bacterial protein gas vesicles from two protein components (GvpA and GvpC)  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
/*display: none;*/
−
<li>A custom-made ultrasound generator device was used to stimulate mammalian cells  <img src="//2016.igem.org/wiki/images/0/0d/T--Slovenia--igemLogoSmall.png" alt="newAtiGEM" width="30" height="30" style = "display: inline;"></li>
+
/*}*/
−
<li>A mechano-sensory luciferase reporter sensitive to an influx of free calcium ions was introduced into mammalian cells, which enabled rapid light emission of mammalian cells in response to mechanical stimuli and enabled painting on cells by touch with exciting potentials for other applications  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
/*}*/
−
<li>A circular proteolysis-activated luciferase reporter was experimentally verified and introduced into the iGEM collection  <img src="//2016.igem.org/wiki/images/0/0d/T--Slovenia--igemLogoSmall.png" alt="newAtiGEM" width="30" height="30" style = "display: inline;"></li>  
+
 
−
<li>A set of four different orthogonal site-specific proteases was designed and tested as split proteins in mammalian cells  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>  
+
/*.menu {
−
<li>New orthogonal protease-based signaling pathways and information processing platform was designed and several logic functions based on the combination of multiple input signals were tested experimentally  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
    white-space: nowrap;
−
<li>Proteolysis of the ER retention signal was introduced as the trigger for the fast release of proteins from cells aimed to enable fast therapeutic responses such as required for the release of peptide hormones, neuroactive peptides etc.  <img src="//2016.igem.org/wiki/images/d/dc/T--Slovenia--starSmall.png" alt="newAtiGEM" width="28" height="28" style = "display: inline;"></li>
+
}*/
−
</ul>
+
 
−
</div>
+
/* glavniot naslov neka ima edna crvena boja */
−
</div>
+
#context h1 {
−
<div>
+
    color: #c10c00;
−
<h1 class="ui centered dividing header"><span id="requirements" class = "section"> &nbsp; </span>Medal requirements</h1>
+
}
−
<div class = "ui segment">
+
 
−
<h4>Gold:</h4>
+
/* ostanatite naslovi neka bidat vo druga crvena */
−
<h4>Silver:</h4>
+
#context h2 {
−
</div>
+
    color: #c10c00;
−
</div>
+
}
−
</div>
+
 
−
</div>
+
/* naslovot na bibliografijata neka e vo treta boja */
−
</div>
+
#ref-title {
−
</div>
+
    color: #860000
−
</div>
+
}
−
</body>
+
 
−
</html>
+
/**, *::before, *::after {
 +
box-sizing: content-box !important;
 +
}*/
 +
 
 +
caption, figcaption {
 +
    caption-side: bottom;
 +
    text-align: center
 +
}
 +
 
 +
figure {
 +
    display: block;
 +
}
 +
 
 +
/* bibliography*/
 +
x-ref sup > a, x-ref sup > a:visited, x-ref sup > a:hover, x-ref sup > a:active {
 +
    color: grey;
 +
}
 +
 
 +
.reference > a {
 +
    color: black;
 +
}
 +
 
 +
/* end of bibliography */
 +
 
 +
/* enumeration of tables and figures */
 +
ref > a, ref > a:visited, ref > a:active, ref > a:hover {
 +
    color: black;
 +
}
 +
 
 +
/* team images */
 +
.teamimg {
 +
    overflow: hidden;
 +
}
 +
 
 +
.hiddentext {
 +
    position: absolute;
 +
    max-width: 80%;
 +
}
 +
 
 +
.image_div {
 +
    position: relative;
 +
    overflow: hidden;
 +
    width: 50%;
 +
    float: left;
 +
}
 +
 
 +
.right img {
 +
    position: relative;
 +
    margin-left: -100%;
 +
}
 +
 
 +
/* end of team images */
 +
 
 +
/* logo row */
 +
footer .column > a {
 +
    margin: auto;
 +
    display: inline-block !important;
 +
}
 +
 
 +
/* Calendar */
 +
/*#calendarTable {
 +
        position:relative;
 +
        width: auto;
 +
}*/
 +
#calendarHead:hover {
 +
    background-color: white;
 +
    color: #DB2828;
 +
    cursor: pointer;
 +
    cursor: hand;
 +
}
 +
#right, #left, #tdays, #tmonth {
 +
    text-align:center;
 +
    background-color: #AFAFAF;
 +
    color:white;
 +
    font-weight: bold;
 +
}
 +
#calendarHead {
 +
    text-align:center;
 +
    font-weight: bold;
 +
    color: white;
 +
    background-color: #AFAFAF;
 +
}
 +
.week > td, .weekHighLight > td {
 +
    margin: 0 auto;
 +
    background-color: white; /* #AFAFAF; */
 +
    text-align: right;
 +
    vertical-align: top;
 +
}
 +
.weak {
 +
    color: #DB2828;
 +
}
 +
.week:hover > td, #right:hover, #left:hover, .weekHighLight > td {
 +
    background-color: #DB2828;
 +
    color: white;
 +
    cursor: pointer;
 +
    cursor: hand;
 +
}
 +
 
 +
/* Images and resizing stuff */
 +
figure {
 +
  background-color: #fff;
 +
  padding: 5px;
 +
  font-size: .875em;
 +
  display: table;
 +
}
 +
 
 +
figure img {
 +
    display: block;
 +
    width: 100%;
 +
}
 +
 
 +
figcaption {
 +
    display: table-caption;
 +
    caption-side: bottom;
 +
    background: #fff;
 +
font-size:10px;
 +
line-height:1.6em;
 +
    /* padding: 0 1px 1px; */
 +
}​

Revision as of 15:46, 15 October 2016

li , p, td, th, tr{ color: rgba(0, 0, 0, 0.8); } /* from docs.css */

  1. example .main.container .introduction p,
  2. example .main.container .example p,
  3. example .main.container p {
   color: rgba(0, 0, 0, 0.8);

}

  1. example .main.container .examples h2,
  2. example .main.container h2,
  3. example .main.container .tab > h2 {
   position: relative;
   margin: 5rem 0 3rem;

}

  1. example .main.container .examples > .rail + h2,
  2. example .main.container > .rail + h2,
  3. example .main.container > .tab > .rail + h2,
  4. example .main.container0 .examples h2:first-child,
  5. example .main.container h2:first-child,
  6. example .main.container > .tab > h2:first-child {
   margin-top: 0;

}

  1. example > .pusher > .full.height {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;

}

  1. example .full.height > .banana {
   position: relative;
   z-index: 1;
   background-color: #1b1c1d;
   width: 200px;
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   padding-left: 50px;

}

  1. example .article {
   -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   min-width: 0;

}

  1. example .main.container {
   padding: 100px 0 7em;

}

/* Defaults */ /*#example .masthead > .container,*/

  1. example .main.container {

/*#example .fixed.menu > .container {*/ 

   margin-left: 3em !important;
   margin-right: 3em !important;
   width: auto !important;
   max-width: 960px !important;

}

/*#example .masthead > .container {*/ /*margin-right: 387px !important;*/ /*}*/

  1. example .main.container {
   /*margin-right: 387px !important;*/
   margin-right: 20% !important;

}

/* Remove Fixed Sidebar */ @media only screen and (max-width: 1144px) { 

   /* Hide Fixed Sidebar */
   #example .full.height > .banana {
       display: none;
   }

}

/* Remove Rail */ @media only screen and (max-width: 992px) { 

   /* Fluid Containers */
   #example .masthead > .container,
   #example .main.container,
   #example .fixed.menu > .container {
       margin-left: 1em !important;
       margin-right: 1em !important;
       max-width: none !important;
   }

}

/* end of docs*/

/* override default */

  1. content {
   width: 100%;
   background-color: transparent;
   margin-left: 0;
   padding-left: 0;

}

  1. contentSub, #firstHeading, #column-one, #footer {
   display: none;

}

  1. firstHeading, #content {
   margin-top: 0 !important;
   padding-top: 0 !important;

}

  1. bodyContent {
   margin-left: 0;
   padding-left: 0;

}

body { 

   /*padding-top: 14px;*/
   background-color: #FCFCFC;

}

/* transparenten pravokotnik na levi in del za besedilo */

  1. example:not(.site) > .pusher > .full.height {
   background-color: transparent;

}

/* pravokotnik na levi - sirina, ozadje.. */

  1. example .full.height > .banana {
   width: 25%;
   background-color: transparent;
   padding-top: 12px;

}

/* menus */

  1. projectSubmenu, #partsSubmenu, #notebookSubmenu, #notebookSubmenu, #societySubmenu, #ideaSubmenu, #homeSubmenu, #dryLabSubmenu, #teamSubmenu, #proteaseSignallingSubmenu, #mechanosensingSubmenu, #implementationSubmenu {
   display: none;

}

  1. menucomb {
   background-color: #FCFCFC;
   padding-top: 12px;
   padding-bottom: 12px;
   margin-top: 0;

}

.ui.vertical.sticky.menu { 

   font-size: 1rem;
   background-color: transparent;
   padding-top: 0px;
   margin-left: 10px; 
   margin-right: auto;*/

}

/* end of menus */

h1 > span, h2 > span, h3 > span, h4 > span { 

 margin-top: -122px;        /* Size of fixed header */
 padding-bottom: 122px; 
 display: block;

}

/* tabelite neka bidat na sredina */ .ui.table { 

   margin: auto;
   width: 100%;

}

/*црна боја на менито */ .home:link, .home:visited, .home:active, .home:hover { 

   color: black;

}

/* koga se namaluva ekranot ne sakame da gi skrsime zborovite */ /*h1, h2, h3, h4 {*/ /*!*white-space: nowrap;*!*/ 

   /*padding-top: 120px!important;*/
   /*margin-top: 0!important;*/

/*}*/

/* скриј го вертикалното мени доколку е екранот премногу мал и не изгледа убаво */ /*@media (max-width: 1350px) {*/ /*.ui.sticky.container {*/ /*display: none;*/ /*}*/ /*}*/

/*.menu { 

   white-space: nowrap;

}*/

/* glavniot naslov neka ima edna crvena boja */

  1. context h1 {
   color: #c10c00;

}

/* ostanatite naslovi neka bidat vo druga crvena */

  1. context h2 {
   color: #c10c00;

}

/* naslovot na bibliografijata neka e vo treta boja */

  1. ref-title {
   color: #860000

}

/**, *::before, *::after { box-sizing: content-box !important; }*/

caption, figcaption { 

   caption-side: bottom;
   text-align: center

}

figure { 

   display: block;

}

/* bibliography*/ x-ref sup > a, x-ref sup > a:visited, x-ref sup > a:hover, x-ref sup > a:active { 

   color: grey;

}

.reference > a { 

   color: black;

}

/* end of bibliography */

/* enumeration of tables and figures */ ref > a, ref > a:visited, ref > a:active, ref > a:hover { 

   color: black;

}

/* team images */ .teamimg { 

   overflow: hidden;

}

.hiddentext { 

   position: absolute;
   max-width: 80%;

}

.image_div { 

   position: relative;
   overflow: hidden;
   width: 50%;
   float: left;

}

.right img { 

   position: relative;
   margin-left: -100%;

}

/* end of team images */

/* logo row */ footer .column > a { 

   margin: auto;
   display: inline-block !important;

}

/* Calendar */ /*#calendarTable { 

       position:relative;
       width: auto;

}*/

  1. calendarHead:hover {
   background-color: white;
   color: #DB2828;
   cursor: pointer;
   cursor: hand;

}

  1. right, #left, #tdays, #tmonth {
   text-align:center;
   background-color: #AFAFAF;
   color:white;
   font-weight: bold;

}

  1. calendarHead {
   text-align:center;
   font-weight: bold;
   color: white;
   background-color: #AFAFAF;

} .week > td, .weekHighLight > td { 

   margin: 0 auto;
   background-color: white; /* #AFAFAF; */
   text-align: right;
   vertical-align: top;

} .weak { 

   color:  #DB2828;

} .week:hover > td, #right:hover, #left:hover, .weekHighLight > td { 

   background-color: #DB2828;
   color: white;
   cursor: pointer;
   cursor: hand;

}

/* Images and resizing stuff */ figure { 

  background-color: #fff;
  padding: 5px;
  font-size: .875em;
  display: table;

}

figure img { 

   display: block;
   width: 100%;

}

figcaption { 

   display: table-caption;
   caption-side: bottom;
   background: #fff;

font-size:10px; line-height:1.6em; 

   /* padding: 0 1px 1px; */

}​