Page79
From 2010.igem.org
(Difference between revisions)
Line 92: | Line 92: | ||
/* Calendar Coding */ | /* Calendar Coding */ | ||
/* div for the calendar markup - text must be centered */ | /* div for the calendar markup - text must be centered */ | ||
- | div#calendar { | + | div#calendar |
+ | { | ||
float: left; | float: left; | ||
- | margin : 0 auto; | + | margin: 0 auto; |
- | padding : | + | padding: 2em; |
- | text-align : center; | + | text-align: center; |
- | width : | + | width: 24em; |
- | border : | + | border: 0.2em solid #000000; |
- | background: # | + | background: #3b3b3b; |
} | } | ||
/* calendar heading color */ | /* calendar heading color */ | ||
- | h2.calendar { | + | h2.calendar |
- | color : # | + | { |
+ | color : #fff200; | ||
+ | font-size: 2.5em; | ||
font-family: "Trebuchet MS", Times; | font-family: "Trebuchet MS", Times; | ||
} | } | ||
/* list info - monospace font must be used */ | /* list info - monospace font must be used */ | ||
- | ul#days, ul.weeks { | + | ul#days, ul.weeks |
- | font-family : | + | { |
- | list-style-type : none | + | font-family: "Trebuchet MS", Times; |
- | + | margin: 2em 0 2em 0; | |
+ | list-style-type: none; | ||
} | } | ||
/* day-box span styles - adjust with padding */ | /* day-box span styles - adjust with padding */ | ||
- | ul#days li span { | + | ul#days li span |
- | background-color : #a5a5a5; | + | { |
- | border : | + | background-color: #a5a5a5; |
- | font-weight : bold; | + | border: 0.2em solid #ffffff; |
- | color : #ffffff; | + | font-weight: bold; |
- | padding : | + | color: #ffffff; |
+ | margin: 2em 0 2em 0; | ||
+ | padding: 0.7em; | ||
} | } | ||
/* active links boxes default state - adjust with padding */ | /* active links boxes default state - adjust with padding */ | ||
- | ul.weeks li a.al, ul.weeks li a.na { | + | ul.weeks li a.al, ul.weeks li a.na |
- | color : # | + | { |
- | text-decoration : | + | color: #ffffff; |
- | background-color : # | + | text-decoration: underline; |
- | border : | + | background-color: #a5a5a5; |
- | padding : | + | border: 0.2em solid #ffffff; |
+ | padding: 0.8em; | ||
} | } | ||
/* all states of not-used links */ | /* 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 { | + | ul.weeks li a.na, ul.weeks li a.na:hover, ul.weeks li a.na:focus, ul.weeks li a.na:active |
- | background : transparent; | + | { |
- | color : # | + | background: transparent; |
+ | text-decoration: none; | ||
+ | color: #ffffff; | ||
+ | background-color: #656565; | ||
+ | border: 0.2em solid #ffffff; | ||
+ | padding: 0.8em; | ||
} | } | ||
/* hover and focus state of active links */ | /* 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 { | ul.weeks li a.al:hover, ul.weeks li a.al:focus, ul.weeks li a.al:active { | ||
- | color : # | + | color: #fff200; |
- | background-color : # | + | background-color: #3b3b3b; |
- | border : | + | border: 0.2em solid #ffffff; |
- | text-decoration : | + | text-decoration: underline; |
} | } | ||
/* not used link boxes - color and background should match - adjust with padding */ | /* not used link boxes - color and background should match - adjust with padding */ | ||
- | ul.weeks li a.nu { | + | ul.weeks li a.nu |
- | color : # | + | { |
- | padding : | + | color: #656565; |
- | border : | + | padding: 0.8em; |
- | background-color : # | + | border: 0.2em solid #ffffff; |
+ | background-color: #656565; | ||
} | } | ||
/* to hide link separators */ | /* to hide link separators */ | ||
- | span.sep { | + | span.sep |
- | display : none; | + | { |
+ | display: none; | ||
} | } | ||
/* this needs to be in conditional comment for IE only */ | /* this needs to be in conditional comment for IE only */ | ||
- | div#calendar { | + | div#calendar |
- | font-size : 0.9em; | + | { |
- | letter-spacing : 0.001em; | + | font-size: 0.9em; |
+ | letter-spacing: 0.001em; | ||
} | } | ||
- | + | ||
</style> | </style> | ||
</head> | </head> | ||
Line 189: | Line 204: | ||
<div id="calendar"> | <div id="calendar"> | ||
- | + | ||
- | <ul id="days"> | + | <h2 class="calendar">May 2010</h2> |
- | + | ||
+ | <ul id="days"> | ||
+ | <li> | ||
<span title="Sunday">Su</span> <span class="sep">|</span> | <span title="Sunday">Su</span> <span class="sep">|</span> | ||
<span title="Monday">Mo</span> <span class="sep">|</span> | <span title="Monday">Mo</span> <span class="sep">|</span> | ||
Line 199: | Line 216: | ||
<span title="Friday">Fr</span> <span class="sep">|</span> | <span title="Friday">Fr</span> <span class="sep">|</span> | ||
<span title="Saturday">Sa</span> | <span title="Saturday">Sa</span> | ||
- | + | </li> | |
- | + | </ul> | |
+ | |||
<!-- On links Below: NU = Not Used; NA = Not Active; AL = Active Link --> | <!-- On links Below: NU = Not Used; NA = Not Active; AL = Active Link --> | ||
<ul class="weeks"> | <ul class="weeks"> | ||
Line 206: | Line 224: | ||
<a class="na" href="#" title="">30</a> <span class="sep">|</span> | <a class="na" href="#" title="">30</a> <span class="sep">|</span> | ||
<a class="na" href="#" title="">31</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> <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="na" href="#" title="">01</a> | <a class="na" href="#" title="">01</a> | ||
</li> | </li> |
Revision as of 03:15, 5 July 2010
genomikon
May 2010
- Su | Mo | Tu | We | Th | Fr | Sa