Difference between revisions of "Dev/Timeline"

(Redirected page to Calendar)
 
Line 1: Line 1:
 
+
#REDIRECT [[Calendar]]
 
+
<html>
+
 
+
<style type="text/css">
+
/* Use border-box sizing for everything! It's the best thing in the world */
+
#tl-year-container, #tl-year-container * {
+
-webkit-box-sizing: border-box;
+
  -moz-box-sizing: border-box;
+
    box-sizing: border-box;
+
}
+
 
+
/* Set up overall container for timeline */
+
#tl-year-container {
+
width: 100%;
+
position: relative;
+
clear: both; /* so it falls below the left-floating iGEM logo */
+
}
+
 
+
/* The center line */
+
#tl-line {
+
position: absolute;
+
width: 4px;
+
background-color: #d3d3d3;
+
z-index: -1;
+
margin: auto;
+
left: 0;
+
right: 0;
+
top: 0;
+
bottom: 0;
+
}
+
 
+
/* Each month is its own div, so they could be individually loaded into another page */
+
#tl-year-container .tl-month-container {
+
margin: 3px;
+
padding: 3px;
+
overflow: auto;
+
}
+
 
+
 
+
 
+
/* Month names */
+
#tl-year-container .tl-month-name {
+
text-align: center;
+
font-color: #4e606e;
+
background-color: #f2f2f2;
+
width: 8em;
+
padding: 8px 1em;
+
margin: 0 auto;
+
border-radius: 1em;
+
border: 4px solid #d3d3d3;
+
/* z-index: 20; */
+
}
+
 
+
 
+
#tl-year-container .tl-month-name:hover {
+
background-color: #e8edaa;
+
cursor:pointer;
+
border: 4px solid #e8edaa;
+
}
+
 
+
 
+
/* Round icons that lie on the center line (come in large and small sizes) */
+
#tl-year-container .tl-icon-large, #tl-year-container .tl-icon-small {
+
position: relative;
+
margin: 0 auto;
+
background-color: #ffffff;
+
border: 4px solid #d3d3d3;
+
overflow: hidden;
+
clear: both;
+
/*vertical-align: middle;*/
+
}
+
#tl-year-container .tl-icon-large {
+
width: 48px;
+
height: 48px;
+
top: 24px;
+
border-radius: 12px;
+
}
+
#tl-year-container .tl-icon-small {
+
width: 28px;
+
height: 28px;
+
top: 14px;
+
border-radius: 7px;
+
}
+
 
+
/* Contents of tl-icons */
+
#tl-year-container .tl-icon-large p {
+
width: 100%;
+
height: 100%;
+
line-height: 100%;
+
text-align: center;
+
font-size: 24px;
+
}
+
#tl-year-container .tl-icon-small p {
+
width: 100%;
+
height: 100%;
+
line-height: 100%;
+
text-align: center;
+
font-size: 12px;
+
font-weight:bold;
+
}
+
 
+
#tl-year-container .tl-icon-large img, #tl-year-container .tl-icon-small img {
+
width: 100%;
+
height: 100%;
+
}
+
 
+
 
+
/* The events are floats. Left events are used for commentary, and right events for items with actual due dates. */
+
#tl-year-container .tl-event-left, #tl-year-container .tl-event-right {
+
display: inline-block;
+
border-top: 1px dotted black;
+
padding-top: 5px;
+
width: 49%;
+
clear: both;
+
margin-bottom: 1.5em;
+
}
+
#tl-year-container .tl-event-left > *:first-child, #tl-year-container .tl-event-right  > *:first-child {
+
padding-top: 0;
+
}
+
 
+
 
+
#tl-year-container .tl-event-right h2 {
+
color: #000000;
+
}
+
+
 
+
#tl-year-container .tl-event-right h3 {
+
color: #4e606e;
+
}
+
 
+
#tl-year-container .tl-event-left {
+
text-align: right;
+
float: left;
+
padding-left: 1em;
+
padding-right: 2em;
+
color: #bbbdc0;
+
}
+
#tl-year-container .tl-event-right {
+
float: right;
+
padding-right: 1em;
+
padding-left: 2em;
+
}
+
 
+
/* Special additional class for when a left event and a right event are at the same height -- this is used for a major event with extra commentary on it */
+
#tl-year-container .tl-event-right.tl-alongside {
+
clear: none !important;
+
}
+
 
+
</style>
+
 
+
 
+
<div class="oneColumn full_border background_gray">
+
<center>
+
The dates on 2016 timeline will be finalized soon.
+
</center>
+
</div>
+
<br><br><br><br><br>
+
 
+
 
+
 
+
 
+
 
+
<div id="tl-year-container">
+
<div id="tl-line"></div> <!--The vertical line-->
+
 
+
<div class="tl-month-container" id="january">
+
<h2 class="tl-month-name">January</h2>
+
 
+
<div class="month_content">
+
<div class="tl-icon-small"><img src="https://static.igem.org/mediawiki/2016/7/7a/Icon-eye.png"></div>
+
<div class="tl-event-left">
+
Get ready for iGEM 2016!
+
</div>
+
</div>
+
 
+
</div>
+
 
+
 
+
 
+
 
+
<div class="tl-month-container" id="february">
+
 
+
<h2 class="tl-month-name">February</h2>
+
 
+
 
+
<div class="month_content">
+
<div class="tl-icon-large"><p> 1 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Team Registration: opens</h2>
+
</div>
+
 
+
 
+
<div class="tl-icon-small"><img src="https://static.igem.org/mediawiki/2016/7/7a/Icon-eye.png"></div>
+
<div class="tl-event-left">
+
Please note: <br>  All the information on your team page must be filled correctly in order for your team to be approved.
+
</div>
+
</div>
+
</div>
+
 
+
 
+
 
+
 
+
<div class="tl-month-container" id="march">
+
<h2 class="tl-month-name">March</h2>
+
 
+
<div class="month_content">
+
<div class="tl-icon-large"><p> 31 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Team Registration: regular registration closes</h2>
+
</div>
+
</div>
+
</div>
+
 
+
 
+
<div class="tl-month-container" id="april">
+
<h2 class="tl-month-name">April</h2>
+
<div class="month_content">
+
<div class="tl-icon-small"><p> * </p></div>
+
<div class="tl-event-left tl-alongside">
+
DNA Distribution kit ships <br> Arrival date may vary per country.
+
</div>
+
 
+
</div>
+
</div>
+
 
+
 
+
 
+
<div class="tl-month-container" id="may">
+
<h2 class="tl-month-name">May </h2>
+
<div class="month_content">
+
 
+
<div class="tl-icon-large"><p> 1 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Team Registration: late registration closes</h2>
+
</div>
+
 
+
<div class="tl-icon-small"> <img src="https://static.igem.org/mediawiki/2016/7/7a/Icon-eye.png"></div>
+
<div class="tl-event-left tl-alongside">
+
Safety Check-Ins start<br>
+
More information coming soon.
+
</div>
+
 
+
 
+
 
+
<div class="tl-icon-small"><img src="https://static.igem.org/mediawiki/2016/7/7a/Icon-eye.png"></div>
+
<div class="tl-event-left tl-alongside">
+
Meetups begin<br>
+
More information coming soon.
+
</div>
+
 
+
 
+
</div>
+
 
+
</div>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
<div class="tl-month-container" id="june">
+
<h2 class="tl-month-name"> June </h2>
+
 
+
<div class="month_content">
+
 
+
 
+
<div class="tl-icon-small"><img src="https://static.igem.org/mediawiki/2016/7/7a/Icon-eye.png"></div>
+
<div class="tl-event-left">
+
Visa Application: <br>  We recommend that all team members start their visa application process as soon as possible.
+
</div>
+
 
+
 
+
 
+
<div class="tl-icon-large"><p> 10 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h3> Teachers Workshop </h3>
+
</div>
+
 
+
 
+
</div>
+
</div>
+
 
+
 
+
 
+
 
+
 
+
 
+
<div class="tl-month-container" id="july">
+
<h2 class="tl-month-name"> July</h2>
+
 
+
<div class="month_content">
+
 
+
 
+
<div class="tl-icon-large"><p> 1 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h3>Project description due </h2>
+
</div>
+
 
+
<div class="tl-icon-large"><p> 29 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>About our Lab: form due </h2>
+
</div>
+
 
+
 
+
<div class="tl-icon-large"><p> 29 </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>About our Project: form due </h2>
+
</div>
+
 
+
<div class="tl-icon-small"><img src="https://static.igem.org/mediawiki/2016/7/7a/Icon-eye.png"></div>
+
<div class="tl-event-left">
+
iGEM Tip: <br> Start working on your wiki!  Visit the <a href="https://2016.igem.org/Resources">resources page</a> for help.
+
</div>
+
 
+
</div>
+
</div>
+
 
+
 
+
 
+
<div class="tl-month-container" id="august">
+
<h2 class="tl-month-name">August</h2>
+
 
+
<div class="month_content">
+
 
+
<div class="tl-icon-large"><p>12</p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Track Selection </h2>
+
</div>
+
+
<div class="tl-icon-large"><p>12</p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Title and Abstract</h2>
+
</div>
+
+
 
+
<div class="tl-icon-large"><p>31</p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Giant Jamboree: Registration Closes </h2>
+
</div>
+
 
+
</div>
+
</div>
+
 
+
 
+
 
+
 
+
 
+
<div class="tl-month-container" id="september">
+
<h2 class="tl-month-name">September</h2>
+
 
+
<div class="month_content">
+
 
+
<div class="tl-icon-large"><p>16</p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h3>Team Rosters Due</h3>
+
</div>
+
 
+
 
+
<div class="tl-icon-large"><p>23</p></div>
+
<div class="tl-event-right">
+
<h3>Giant Jamboree: Hotel Booking Deadline</h3>
+
</div>
+
 
+
 
+
</div>
+
</div>
+
 
+
 
+
 
+
 
+
<div class="tl-month-container" id="october">
+
<h2 class="tl-month-name">October</h2>
+
 
+
 
+
 
+
<div class="month_content">
+
 
+
 
+
+
<div class="tl-icon-large"><p>7</p></div>
+
<div class="tl-event-right">
+
<h2>Giant Jamboree: Late Registration Closes  <br> (all guests)</h2>
+
</div>
+
 
+
 
+
 
+
<div class="tl-icon-large"><p>*</p></div>
+
<div class="tl-event-right">
+
<h3>Team Banners Due (optional)</h3>
+
</div>
+
+
 
+
 
+
 
+
<div class="tl-icon-large"><p>*</p></div>
+
<div class="tl-event-left tl-alongside">More information coming soon.</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Final Safety Form Due</h2>
+
</div>
+
 
+
+
<div class="tl-icon-large"><p>14</p></div>
+
<div class="tl-event-left tl-alongside">
+
Complete your Judging Form! More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Judging Forms Due</h2>
+
</div>
+
 
+
 
+
<div class="tl-icon-large"><p> 19  </p></div>
+
<div class="tl-event-left tl-alongside">
+
More information coming soon.
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Wiki Freeze!</h2>
+
</div>
+
 
+
 
+
 
+
<div class="tl-icon-large"><p>21</p></div>
+
<div class="tl-event-left tl-alongside">
+
You must send your part submissions by this date. (They do not need to arrive at iGEM Headquarters by this date.) <a href="#">More information about part submissions</a>
+
</div>
+
<div class="tl-event-right tl-alongside">
+
<h2>Part Submissions (Send by this date)</h2>
+
</div>
+
 
+
 
+
 
+
 
+
 
+
 
+
<div class="tl-icon-large"><p>27</p></div>
+
<div class="tl-event-right">
+
<h2>Giant Jamboree  begins!</h2>
+
</div>
+
 
+
 
+
 
+
 
+
<div class="tl-icon-large"><p>31</p></div>
+
<div class="tl-event-right">
+
<h2>Giant Jamboree ends</h2>
+
</div>
+
 
+
</div>
+
</div>
+
 
+
 
+
 
+
<!--Closing tag of #tl-year-container-->
+
</div>
+
 
+
 
+
 
+
 
+
 
+
<script>
+
 
+
//$("#september> .month_content").hide();
+
//$("#june> .month_content").hide();
+
//$("#august> .month_content").hide();
+
//$("#july> .month_content").hide();
+
//$("#october> .month_content").hide();
+
 
+
$(".tl-month-name").click(function() {
+
 
+
$(this).next(".month_content").slideToggle();
+
 
+
});
+
 
+
 
+
 
+
 
+
</script>
+
 
+
 
+
 
+
</html>
+
{{2016Bottom}}
+

Latest revision as of 17:27, 15 July 2016

Redirect to: