Team:Purdue/CalendarTemplate

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style type="text/css">>
<style type="text/css">>
 +
body {
 +
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 +
color: #616B76;
 +
}
-
#cal {
+
a {
-
    width:400px;
+
color: #DF9496;
-
    font-family:arial, hevetica, sans-serif;
+
-
    font-size:9pt;
+
-
    text-align:center;
+
-
    color:#000;
+
-
    line-height:30px;
+
}
}
-
#cal h2 {
+
#calendar {
-
    width:270px;
+
width: 141px;
-
    margin:0 5px 5px 5px;
+
padding: 0;
-
    font-size:12pt;
+
margin: 0;
-
    background:#004a80;
+
border-left: 1px solid #A2ADBC;
-
    color:#fff;
+
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 +
color: #616B76;
 +
text-align: center;
 +
background-color: #fff;
}
}
-
#cal u1 {
+
.nav, .nav a {
-
    width:280px;
+
font: bold 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
-
    margin:0;
+
color: #fff;
-
    padding:0;
+
text-align: center;
 +
text-decoration: none;
 +
}
 +
 
 +
 
 +
caption {
 +
margin: 0;
 +
padding: 0;
 +
width: 141px;
 +
background: #A2ADBC;
 +
color: #fff;
 +
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 +
text-align: center;
}
}
-
#cal ul li {
+
th {
-
    width:30px;
+
font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
-
    height:30px;
+
color: #616B76;
-
    display:block;
+
background: #D9E2E1;
-
    float:left;
+
border-right: 1px solid #A2ADBC;
-
    list-style:none;
+
border-bottom: 1px solid #A2ADBC;
-
    border:5px solid #fff;
+
border-top: 1px solid #A2ADBC;
-
    margin:0;
+
}
}
-
#cal ul li.day{
+
.today, td.today a, td.today a:link, td.today a:visited {
-
    background:#666;
+
color: #F6F4DA;
-
    color:#fff;
+
font-weight: bold;
-
    font-wight:bold;
+
background: #DF9496;
}
}
-
#cal ul li.num {
+
td {
-
    background:#ccc;
+
border-right: 1px solid #A2ADBC;
 +
border-bottom: 1px solid #A2ADBC;
 +
width: 20px;
 +
height: 20px;
 +
text-align: center;
 +
background: url(images/bg_calendar.gif) no-repeat right bottom;
}
}
-
</style>
+
td a {
-
<div id="cal">
+
text-decoration: none;
-
  <h2>July, 2012</h2>
+
font-weight: bold;
-
  <ul>
+
display: block;
-
      <li class="day">Sunday</li>
+
}
-
      <li class="day">Monday</li>
+
-
      <li class="day">Tuesday</li>
+
-
      <li class="day">Wednesday</li>
+
-
      <li class="day"><Thursday</li>
+
-
      <li class="day"><Friday</li>
+
-
      <li class="day">Saturday</li>
+
-
+
-
      <li class="num">01</li>
+
td a:link, td a:visited {
-
      <li class="num">02</li>
+
color: #608194;
-
      <li class="num">03</li>
+
background:  no-repeat;
-
      <li class="num">04</li>
+
}
-
      <li class="num">05</li>
+
 
-
      <li class="num">06</li>
+
td a:hover, td a:active {
-
      <li class="num">07</li>
+
color: #6aa3ae;
 +
background: no-repeat right top;
 +
}
 +
</style>
 +
<body>
-
      <li class="num">08</li>
 
-
      <li class="num">09</li>
 
-
      <li class="num">10</li>
 
-
      <li class="num">11</li>
 
-
      <li class="num">12</li>
 
-
      <li class="num">13</li>
 
-
      <li class="num">14</li>
 
-
      <li class="num">15</li>
+
<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">
-
      <li class="num">16</li>
+
<caption><a href="#" title="previous month" class="nav">&laquo;</a> July 2012 <a href="#" title="next month" class="nav">&raquo;</a></caption>
-
      <li class="num">17</li>
+
-
      <li class="num">18</li>
+
-
      <li class="num">19</li>
+
-
      <li class="num">20</li>
+
-
      <li class="num">21</li>
+
-
      <li class="num">22</li>
+
<tr>
-
      <li class="num">23</li>
+
<th scope="col" abbr="Sunday" title="Sunday">S</th>
-
      <li class="num">24</li>
+
<th scope="col" abbr="Monday" title="Monday">M</th>
-
      <li class="num">25</li>
+
<th scope="col" abbr="Tuesday" title="Tuesday">T</th>
-
      <li class="num">26</li>
+
<th scope="col" abbr="Wednesday" title="Wednesday">W</th>
-
      <li class="num">27</li>
+
<th scope="col" abbr="Thursday" title="Thursday">T</th>
-
      <li class="num">28</li>
+
<th scope="col" abbr="Friday" title="Friday">F</th>
 +
<th scope="col" abbr="Saturday" title="Saturday">S</th>
 +
</tr>
 +
<tr>
-
      <br/>    
+
<td>1</td>
 +
<td>2</td>
 +
<td>3</td>
 +
<td>4</td>
 +
<td>5</td>
 +
        <td>6</td>
 +
        <td>7</td>
 +
</tr>
 +
<tr>
 +
<td>8</td>
 +
<td>9</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>&nbsp;</td>
 +
<td>&nbsp;</td>
 +
        <td>&nbsp;</td>
 +
<td>&nbsp;</td>
 +
</tr>
 +
</table>
-
      <li class="num">29</li>
+
</body>
-
      <li class="num">30</li>
+
-
      <li class="num">31</li>
+
-
      <li class="num"></li>
+
-
      <li class="num"></li>
+
-
      <li class="num"></li>
+
-
      <li class="num"></li>
+
-
  </ul>
+
</html>
</html>

Revision as of 23:14, 31 July 2012

« July 2012 »
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Retrieved from "http://2012.igem.org/Team:Purdue/CalendarTemplate"