planetlab/css/demo.css

   1 /*
   2    Add the following to your CSS file should you wish the cursor to
   3    "wait" while the script is processing the sort
   4
   5 body.sort-active *
   6         {
   7         cursor:wait;
   8         }
   9 */
  10
  11 body
  12         {
  13         padding:0;
  14         border:0;
  15         margin:0;
  16         text-align:center;
  17         font-size:12px;
  18         font-family: verdana,arial,sans-serif;
  19         color:#545454;
  20         min-width: 800px;
  21         }
  22 h2 span
  23         {
  24         font-variant:small-caps;
  25         }
  26 p a
  27         {
  28         font-weight:normal;
  29         outline:none;
  30         }
  31 p a:link,
  32 p a:visited
  33         {
  34         color:#333;
  35         text-decoration:underline;
  36         }
  37 p a:hover
  38         {
  39         color:#fff;
  40         text-decoration:none;
  41         background:#000;
  42         }
  43 p a:active
  44         {
  45         color:#000;
  46         text-decoration:underline;
  47         }
  48 code
  49         {
  50         font-family:'andale mono','lucida console','courier new',monospace;
  51         font-size:1em;
  52         }
  53 p
  54         {
  55         line-height:1.6em;
  56         margin:0 0 1em 0;
  57         }
  58 h1
  59         {
  60         font-weight:lighter;
  61         font-family:georgia, times new roman, times, georgia, palatino, serif;
  62         text-align:center;
  63         margin-top:0.6em;
  64         color:#000;
  65         font-size:2em;
  66         }
  67 h2
  68         {
  69         font-weight:lighter;
  70         font-family:verdana,arial,sans-serif;
  71         text-align:center;
  72         margin-top:1em;
  73         color:#333;
  74         text-transform:uppercase;
  75         letter-spacing:1px;
  76         font-size:1.2em;
  77         }
  78 h2 span
  79         {
  80         font-variant:small-caps;
  81         text-transform:none;
  82         }
  83 table
  84         {
  85         width: auto;
  86         padding: 0;
  87         margin: 0 auto 1.5em auto;
  88         border-left: 1px solid #C1DAD7;
  89         border-collapse:collapse;
  90         }
  91 .cs1
  92         {
  93         width:30em;
  94         }
  95 .cs2
  96         {
  97         width:20em;
  98         }
  99 .cs1 td,
 100 .cs2 td,
 101 #scientificNotation
 102         {
 103         text-align:right;
 104         }
 105 caption
 106         {
 107         padding: 0 0 5px 0;
 108         margin:0 auto;
 109         width:auto;
 110         font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 111         text-align: right;
 112         }
 113 th
 114         {
 115         font: bold 10px/22px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 116         color: #4f6b72;
 117         border-right: 1px solid #C1DAD7;
 118         border-bottom: 1px solid #C1DAD7;
 119         border-top: 1px solid #C1DAD7;
 120         letter-spacing: 1px;
 121         text-transform: uppercase;
 122         text-align: left;
 123         padding: 8px 12px 4px 12px;
 124         background: #CAE8EA url(../media/bg_header.jpg) no-repeat;
 125         vertical-align:middle;
 126         }
 127 td.total
 128         {
 129         border-top: 0;
 130         border-left: 0;
 131         border-right: 1px solid #C1DAD7;
 132         background: none;
 133         text-align:right;
 134         font-weight:bold;
 135         text-transform:uppercase;
 136         letter-spacing:1px;
 137         }
 138 th.sortable,
 139 th.sortable-text,
 140 th.sortable-date,
 141 th.sortable-keep,
 142 th.sortable-date-dmy,
 143 th.sortable-numeric,
 144 th.sortable-currency,
 145 th.sortable-sortByTwelveHourTimestamp,
 146 th.sortable-sortIPAddress,
 147 th.sortable-sortEnglishLonghandDateFormat,
 148 th.sortable-sortScientificNotation,
 149 th.sortable-sortImage,
 150 th.sortable-sortFileSize,
 151 th.sortable-sortAlphaNumeric,
 152 th.sortable-sortEnglishDateTime
 153
 154         {
 155         cursor:pointer;
 156         background: #CAE8EA url(../media/bg_header_sortable.jpg) no-repeat;
 157         padding: 8px 12px 4px 16px;
 158         }
 159 th.forwardSort
 160         {
 161         background:#CAE8EA url(../media/bg_header_down.jpg) no-repeat 0 0;
 162         }
 163 th.reverseSort
 164         {
 165         background:#CAE8EA url(../media/bg_header_up.jpg) no-repeat 0 0;
 166         }
 167 table thead th.forwardSort a,
 168 table thead th.reverseSort a
 169         {
 170         color:#000;
 171         text-decoration:none;
 172         }
 173 /*
 174 These styles should be added when very long tables are expected
 175 th.sort-active
 176         {
 177         background:#CAE8EA url(../media/bg_header_sorting.jpg) no-repeat 0 0;
 178         cursor:wait;
 179         }
 180 th.sort-active a
 181         {
 182         color:#a80000 !important;
 183         cursor:wait;
 184         }
 185 */
 186 th a
 187         {
 188         text-decoration:none;
 189         color: #4f6b72;
 190         background:transparent;
 191         }
 192 td a
 193         {
 194         text-decoration:none;
 195         color:#239;
 196         background:transparent;
 197         }
 198 td img
 199         {
 200         margin:0 auto;
 201         border:3px solid #ddd;
 202         }
 203 td a:hover
 204         {
 205         color:#a84444;
 206         border-bottom:1px dotted #a80000;
 207         background:transparent;
 208         }
 209 td
 210         {
 211         font: normal 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 212         border-right: 1px solid #C1DAD7;
 213         border-bottom: 1px solid #C1DAD7;
 214         padding: 6px 12px 6px 12px;
 215         color: #4f6b72;
 216         }
 217 td.lft
 218         {
 219         text-align:left;
 220         }
 221 tr.alt
 222         {
 223         background: #F5FAFA;
 224         color: #797268;
 225         }
 226
 227 /* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
 228    as it trys to download the image each and every time that it is used (which means a 1000 row table
 229    will produce 1000 http requests for the image in question) */
 230 tr[class="alt"] td
 231         {
 232         background: #F5FAFA url(../media/td_alt.jpg) no-repeat;
 233         }
 234 td[class~="alt"]
 235         {
 236         background: #edf3f3 url(../media/col_alt.jpg) no-repeat !important;
 237         }
 238 /* Poor old Internet Explorer won't see the next two rules either as it doesn't get :first-child */
 239 tbody tr.alt td:first-child
 240         {
 241         background: #F5FAFA url(../media/bullet2.gif) no-repeat;
 242         font-weight:bold;
 243         }
 244 tbody tr td:first-child
 245         {
 246         background: #fff url(../media/bullet1.gif) no-repeat;
 247         font-weight:bold;
 248         }
 249 /* Image free rules for Internet Explorer < 7 */
 250 * html tr.alt td
 251         {
 252         background-color:#F5FAFA;
 253         }
 254 * html tr td.alt,
 255 * html tr.alt td.alt
 256         {
 257         background-color:#edf3f3;
 258         }