Page79

From 2010.igem.org

(Difference between revisions)
Line 91: Line 91:
/* Calendar Coding */
/* Calendar Coding */
-
#calendar  
+
/* div for the calendar markup - text must be centered */
-
{
+
div#calendar {
-
position:relative; width:350px; height:306px; border:1px solid #000; background:ffffff; margin:0 auto 100px auto;
+
  margin : 0 auto;
 +
  padding : 10px;
 +
  text-align : center;
 +
  width : 21em;
 +
  border : 1px solid #ccc;
}
}
-
#calendar h2  
+
/* calendar heading color */
-
{
+
h2.calendar {
-
   position:absolute; width:240px; left:110px; top:150px; text-align:center; font-size:2em; font-family: "Trebuchet MS", Times;
+
   color : #656565;
 +
  font-weight : normal;
}
}
-
#year a
+
/* list info - monospace font must be used */
-
{
+
ul#days, ul.weeks {
-
   text-decoration:none; color:#fff200;
+
   font-family : 'courier new', monospace;
 +
  list-style-type : none;
 +
  margin : 20px 0 20px 0;
}
}
-
#year
+
/* day-box span styles - adjust with padding */
-
{
+
ul#days li span {
-
   padding:54px 0 0 0; margin:0; list-style-type:none; width:110px;
+
   background-color : #a5a5a5;
 +
  border : 1px solid #000;
 +
  cursor : help;
 +
  font-weight : bold;
 +
  color : #ffffff;
 +
  padding : 5px;
}
}
-
#year li
+
/* active links boxes default state - adjust with padding */
-
{
+
ul.weeks li a.al, ul.weeks li a.na  {  
-
   display:block; width:100px; height:17px; line-height:17px; padding-left:10px; background:transparent;
+
   color : #fff200;
 +
  text-decoration : none;
 +
  background-color : #3b3b3b;
 +
  border : 1px solid #000000;
 +
  padding : 5px;
}
}
-
#year table
+
/* all states of not-used links */
-
{
+
ul.weeks li a.na, ul.weeks li a.na:hover, ul.weeks li a.na:focus, ul.weeks li a.na:active  {  
-
   border-collapse:collapse; width:240px; height:270px;
+
   background : transparent;
 +
  color : #000000;
}
}
-
#year table td
+
/* hover and focus state of active links */
-
{
+
ul.weeks li a.al:hover, ul.weeks li a.al:focus, ul.weeks li a.al:active {
-
   height:33px; width:35px; text-align:center; line-height:33px;
+
   color : #000;
 +
  background-color : #fff200;
 +
  border : 1px solid #000;
 +
  text-decoration : none;
}
}
-
#year table caption
+
/* not used link boxes - color and background should match - adjust with padding */
-
{
+
ul.weeks li a.nu {  
-
   color:#ffffff; height:32px; line-height:32px; padding:0; margin:0; background:#a5a5a5; font-size:1.5em; family-font: "Trebuchet MS", Times;
+
   color : #a5a5a5;
 +
  padding : 5px;
 +
  border : 1px solid #000000;
 +
  background-color : #a5a5a5;
}
}
-
#year table thead th
+
/* to hide link separators */
-
{
+
span.sep {
-
   text-align:center; background:#3b3b3b; color:#fff200;
+
   display : none;
}
}
-
#year li table
+
/* this needs to be in conditional comment for IE only */
-
{
+
div#calendar {
-
  display:none;
+
   font-size : 0.9em;
-
}
+
   letter-spacing : 0.001em;
-
 
+
-
#year li:hover
+
-
{
+
-
   cursor:default; background:#3b3b3b; color:#a5a5a5;
+
-
}
+
-
 
+
-
#year li:hover table
+
-
{
+
-
  display:block; position:absolute; left:6.875em; top:0; background:#a5a5a5;
+
-
}
+
-
 
+
-
#year td a
+
-
{
+
-
   display:block; position:absolute; left:110px; top:0; background:#3b3b3b;
+
-
}
+
-
 
+
-
#year td a:hover
+
-
{
+
-
  display:block; border:1px solid #000; margin:-1px; color:#a5a5a5;
+
}
}
Line 184: Line 188:
<div id="calendar">
<div id="calendar">
 +
<h2 class="calendar">May, 2010</h2>
 +
  <ul id="days">
 +
    <li>
 +
    <span title="Sunday">Su</span> <span class="sep">|</span>
 +
    <span title="Monday">Mo</span> <span class="sep">|</span>
 +
    <span title="Tuesday">Tu</span> <span class="sep">|</span>
 +
    <span title="Wednesday">We</span> <span class="sep">|</span>
 +
    <span title="Thursday">Th</span> <span class="sep">|</span>
 +
    <span title="Friday">Fr</span> <span class="sep">|</span>
 +
    <span title="Saturday">Sa</span>
 +
    </li>
 +
  </ul>
 +
<!-- On links Below: NU = Not Used; NA = Not Active; AL = Active Link -->
 +
  <ul class="weeks">
 +
    <li>
-
<ul id="year">
+
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
-
<li> MAY
+
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
-
  <table>
+
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
-
  <caption>MAY 2010</caption>
+
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
-
  <thead>
+
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
-
  <tr>
+
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
-
  <th scope="col">Sun</th>
+
    <a class="na" href="#" title="">01</a>  
-
  <th scope="col">Mon</th>
+
   
-
  <th scope="col">Tue</th>
+
    </li>
-
  <th scope="col">Wed</th>
+
  </ul>
-
  <th scope="col">Thu</th>
+
-
  <th scope="col">Fri</th>
+
-
  <th scope="col">Sat</th>
+
-
 
+
-
  </tr>
+
-
  </thead>
+
-
  <tbody>
+
-
 
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>01</td></tr>
+
-
  <tr><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td></tr>
+
-
  <tr><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
+
-
  <tr><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td></tr>
+
-
  <tr><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td></tr>
+
-
  <tr><td>30</td><td>31</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </table>
+
-
  </li>
+
-
 
+
-
<li> JUNE
+
-
  <table>
+
-
  <caption>JUNE 2010</caption>
+
-
  <thead>
+
-
  <tr>
+
-
 
+
-
  <th scope="col">S</th>
+
-
  <th scope="col">M</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">W</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">F</th>
+
-
  <th scope="col">S</th>
+
-
  </tr>
+
-
  </thead>
+
-
  <tbody>
+
-
+
-
  <tr><td>..</td><td>..</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
+
-
  <tr><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td></tr>
+
-
  <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td></tr>
+
-
  <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td></tr>
+
-
  <tr><td>27</td><td>28</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </table>
+
-
  </li>
+
-
 
+
-
<li> JULY
+
-
  <table>
+
-
  <caption>JULY 2010</caption>
+
-
  <thead>
+
-
  <tr>
+
-
 
+
-
  <th scope="col">S</th>
+
-
  <th scope="col">M</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">W</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">F</th>
+
-
  <th scope="col">S</th>
+
-
  </tr> 
+
-
  </thead>
+
-
  <tbody>
+
-
 
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>01</td><td>02</td><td>03</td></tr>
+
-
  <tr><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td></tr>
+
-
  <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td></tr>
+
-
  <tr><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td></tr>
+
-
  <tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td></tr>
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </table>
+
-
  </li>
+
-
 
+
-
<li> AUGUST
+
-
  <table>
+
-
  <caption>AUGUST 2010</caption>
+
-
  <thead>
+
-
  <tr>
+
-
 
+
-
  <th scope="col">S</th>
+
-
  <th scope="col">M</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">W</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">F</th>
+
-
  <th scope="col">S</th>
+
-
  </tr> 
+
-
  </thead>
+
-
  <tbody>
+
-
 
+
-
  <tr><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td></tr>
+
-
  <tr><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
+
-
  <tr><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td></tr>
+
-
  <tr><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td></tr>
+
-
  <tr><td>29</td><td>30</td><td>31</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </table>
+
-
  </li>
+
-
 
+
-
<li> SEPTEMBER
+
-
  <table>
+
-
  <caption>SEPTEMBER 2010</caption>
+
-
  <thead>
+
-
  <tr>
+
-
 
+
-
  <th scope="col">S</th>
+
-
  <th scope="col">M</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">W</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">F</th>
+
-
  <th scope="col">S</th>
+
-
  </tr> 
+
-
  </thead>
+
-
  <tbody>
+
-
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>01</td><td>02</td><td>03</td><td>04</td></tr>
+
-
  <tr><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td></tr>
+
-
  <tr><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr>
+
-
  <tr><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
+
-
  <tr><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>..</td><td>..</td></tr>
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </li>
+
-
 
+
-
<li> OCTOBER
+
-
  <table>
+
-
  <caption>OCT 2010</caption>
+
-
  <thead>
+
-
  <tr>
+
-
 
+
-
  <th scope="col">S</th>
+
-
  <th scope="col">M</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">W</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">F</th>
+
-
  <th scope="col">S</th>
+
-
  </tr> 
+
-
  </thead>
+
-
  <tbody>
+
-
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>01</td><td>02</td></tr>
+
-
  <tr><td>03</td><td>04</td><td>05</td><td>06</td><td>07</td><td>08</td><td>09</td></tr>
+
-
  <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td></tr>
+
-
  <tr><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td></tr>
+
-
  <tr><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td></tr>
+
-
  <tr><td>31</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </table>
+
-
  </li>
+
-
 
+
-
<li> NOVEMBER
+
-
  <table>
+
-
  <caption>NOVEMBER 2010</caption>
+
-
  <thead>
+
-
  <tr>
+
-
 
+
-
  <th scope="col">S</th>
+
-
  <th scope="col">M</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">W</th>
+
-
  <th scope="col">T</th>
+
-
  <th scope="col">F</th>
+
-
  <th scope="col">S</th>
+
-
  </tr> 
+
-
  </thead>
+
-
  <tbody>
+
-
+
-
  <tr><td>..</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td></tr>
+
-
  <tr><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
+
-
  <tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
+
-
  <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
+
-
  <tr><td>28</td><td>29</td><td>30</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
  <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
+
-
 
+
-
  </tbody>
+
-
  </table>
+
-
  </li>
+
-
</ul>
+
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">02</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">03</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">04</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">05</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">06</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">07</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">08</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">09</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">10</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">11</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">12</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">13</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">14</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">15</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">16</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">17</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">18</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">19</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">20</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">21</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">22</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">23</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">24</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">25</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">26</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="">27</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">28</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">29</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
  <li>
 +
    <a class="na" href="#" title="">30</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">31</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a>  
</div>
</div>

Revision as of 23:09, 4 July 2010

genomikon

May, 2010

  • Su | Mo | Tu | We | Th | Fr | Sa

Retrieved from "http://2010.igem.org/Page79"