mods/atutor_opencaps/opencaps/styles.css

   1 /* capscribe styles */\r
   2 html,body{\r
   3         height:100%;\r
   4         width:100%;\r
   5 }\r
   6 \r
   7 body {\r
   8         height:100%;\r
   9         width:100%;\r
  10         \r
  11         font-family: Helevetica, Arial, sans-serif;\r
  12         font-size: 75%;\r
  13         background-color: #dce5f3;\r
  14         padding:0px;\r
  15         margin:0px;\r
  16 }\r
  17 img {\r
  18         border:0px;\r
  19 }\r
  20 \r
  21 h1 {\r
  22         display:inline;\r
  23         margin:0px;\r
  24         margin-right:20px;\r
  25         padding-left:10px;\r
  26 }\r
  27 \r
  28 h3 {\r
  29         color: #394e6f;\r
  30 }       \r
  31 \r
  32 h4 {\r
  33         display:inline;\r
  34         height:1em;\r
  35 }\r
  36 \r
  37 #container {\r
  38         margin:0px auto 0px auto;\r
  39         padding:0px;\r
  40         min-width:580px;\r
  41         \r
  42         min-height: 97%;\r
  43         position: relative;\r
  44         height: auto !important;\r
  45         height:97%;     \r
  46         background-color: white;\r
  47         width:780px;\r
  48         border-left:2px solid #ccc;\r
  49         border-right:2px solid #ccc;\r
  50         border-bottom:2px solid #ccc;\r
  51         \r
  52 }\r
  53 \r
  54 #header {\r
  55         background-color: #eaeffb; /* #eaeffb  #e2f7f7 */\r
  56         padding-bottom:5px;\r
  57 }\r
  58 \r
  59 #menubar {\r
  60         background-color: #b5c3d9;\r
  61         padding-top:3em;\r
  62         padding-bottom:3px;\r
  63         font-weight:bold;\r
  64         font-size:110%;\r
  65         /*background-image:url('images/menubar_left.png');\r
  66         background-repeat: no-repeat;   */\r
  67         margin-bottom:5px;\r
  68 }\r
  69 \r
  70 #menubar ul {\r
  71         margin:0px;\r
  72         display:inline; \r
  73         text-align:center;\r
  74 }\r
  75 #menubar ul li {\r
  76         display:inline;\r
  77         list-style:none;\r
  78 }\r
  79 \r
  80 #menubar a:link, #menubar a:visited {\r
  81         color: black;\r
  82         padding-left:10px;\r
  83         padding-right:10px;\r
  84         text-decoration:none;\r
  85 }\r
  86 \r
  87 #menubar a:hover, #menubar a:focus {\r
  88         padding:3px 10px 3px 10px;\r
  89         width:5em;\r
  90         background-color: #dce3f7;\r
  91         color: black;\r
  92         text-decoration:none;\r
  93 }\r
  94 #menubar .current a:link, #menubar .current a:visited {\r
  95         padding:3px 10px 4px 10px;\r
  96         width:5em;\r
  97         background-color: white;\r
  98         color: black;\r
  99         text-decoration:none;\r
 100 }\r
 101 \r
 102 #menubar input {\r
 103         padding:0px;\r
 104         margin:0px;\r
 105         margin-top:2px;\r
 106         margin-right:3px;\r
 107 }\r
 108 \r
 109 /* sub menu bar */\r
 110 \r
 111 #submenubar {\r
 112         padding-top:5px;\r
 113         padding-bottom:3px;\r
 114         font-weight:bold;\r
 115         /*background-image:url('images/menubar_left.png');\r
 116         background-repeat: no-repeat;   */\r
 117 }\r
 118 \r
 119 #submenubar ul {\r
 120         margin:0px;\r
 121         margin-left:-30px;\r
 122         display:inline;\r
 123 }\r
 124 #submenubar ul li {\r
 125         display:inline;\r
 126         list-style:none;\r
 127 }\r
 128 \r
 129 #submenubar a:link, #submenubar a:visited {\r
 130         color: black;\r
 131         background-color:#dce3f7;\r
 132         padding:3px 10px 4px 10px;\r
 133 }\r
 134 \r
 135 #submenubar a:hover, #submenubar a:focus {\r
 136         padding:3px 10px 4px 10px;\r
 137         width:5em;\r
 138         background-color: #ccc;\r
 139         color: black;\r
 140 }\r
 141 #submenubar .current a:link, #submenubar .current a:visited {\r
 142         padding:3px 10px 4px 10px;\r
 143         width:5em;\r
 144         background-color: #2f51b3;\r
 145         color: white;\r
 146 }\r
 147 \r
 148 #submenubar input {\r
 149         padding:0px;\r
 150         margin:0px;\r
 151         margin-top:2px;\r
 152         margin-right:3px;\r
 153 }\r
 154 \r
 155 #info-tab {\r
 156         overflow: auto;         \r
 157         border: 1px solid #ccc;\r
 158         height:450px;\r
 159 }\r
 160 \r
 161 #layout {\r
 162         border: 1px solid #ccc;\r
 163         border-top: 5px solid #2f51b3;\r
 164         margin-top:-1px;\r
 165 }\r
 166 \r
 167 h1 {\r
 168         margin-top:3px;\r
 169         margin-bottom:3px;\r
 170         font-size:110%;\r
 171 }               \r
 172 \r
 173 h2 {\r
 174         margin-top:3px;\r
 175         margin-bottom:3px;\r
 176         font-size:110%;\r
 177 }       \r
 178 \r
 179 dt {\r
 180         font-weight:bold;\r
 181 }\r
 182 \r
 183 \r
 184 #content {\r
 185         padding-left: 10px;\r
 186         padding-right: 10px;    \r
 187 }\r
 188 \r
 189 /* left movie area */\r
 190 #movie-container {\r
 191         margin: 5px 0px 0px 5px;\r
 192         float:left;\r
 193         text-align:center;\r
 194         vertical-align: text-top;\r
 195         width:70%;\r
 196         padding-bottom:3em;\r
 197 }\r
 198 \r
 199 #themovie {\r
 200         padding:5px;\r
 201         width:340px;    \r
 202 }\r
 203 \r
 204 #movie_status {\r
 205         width:340px;\r
 206         margin-left:auto;\r
 207         margin-right:auto;\r
 208         padding-top:10px;\r
 209 }\r
 210 \r
 211 /* movie controls */\r
 212 #movie-controls {\r
 213         clear:both;\r
 214         padding-left:5px;\r
 215         padding-right:5px;\r
 216         margin:5px;\r
 217         width:340px;\r
 218         margin-left:auto;\r
 219         margin-right:auto;\r
 220 \r
 221 }\r
 222 \r
 223 #m_timeline {\r
 224         margin-left:auto;\r
 225         margin-right:auto;\r
 226         margin-bottom:5px;\r
 227 }\r
 228 \r
 229 #last-saved {\r
 230         font-size:smaller;\r
 231 }\r
 232 \r
 233 /* clip controls */\r
 234 #clip-controls {\r
 235         margin-top:5px;\r
 236         background-color: #eaeaea;\r
 237         border:1px solid #ccc;\r
 238         padding:5px;\r
 239         text-align:center;\r
 240         width:57%;\r
 241         margin-left:auto;\r
 242         margin-right:auto;\r
 243 }\r
 244 \r
 245 #clip-info {\r
 246         float:left;\r
 247 }\r
 248 \r
 249 #clip-buttons {\r
 250         margin-top:1.5em;       \r
 251 }\r
 252 \r
 253 #clip-timeline {\r
 254         margin-top:5px;\r
 255         margin-left: auto; \r
 256         margin-right: auto;\r
 257         width:150px;\r
 258 }\r
 259 \r
 260 #make-clip {\r
 261         float:right; \r
 262         margin-top:45px; \r
 263         margin-right:20px;\r
 264 }       \r
 265 \r
 266 /* captions */\r
 267 #captions {\r
 268         text-align:center;\r
 269         width:51%;\r
 270         margin-left:auto;\r
 271         margin-right:auto;      \r
 272         margin-top:10px;\r
 273 }\r
 274 \r
 275 #captions textarea {\r
 276         width:100%;\r
 277         border: 1px solid #ccc;\r
 278 }\r
 279 \r
 280 /* right clip info area */\r
 281 #info-container {\r
 282         margin-left:71%;\r
 283         line-height:145%;\r
 284 }\r
 285 .clip {\r
 286         background-color: #f4f6fc;\r
 287         padding:5px;\r
 288         border-bottom: 1px solid #ccc;\r
 289 }\r
 290 \r
 291 .clip-title {\r
 292         text-decoration: underline;\r
 293         font-weight:bold;\r
 294         padding-bottom:10px;\r
 295 }\r
 296 \r
 297 .space {\r
 298         background-color:#fffff8;\r
 299         padding:5px;\r
 300         border-bottom: 1px solid #ccc;\r
 301 }\r
 302 \r
 303 \r
 304 \r
 305 /* footer */\r
 306 #footer {\r
 307         font-size: x-small;\r
 308         text-align:center;\r
 309 \r
 310         clear: both;\r
 311         width:780px;\r
 312         position: absolute;\r
 313         bottom: 0 !important;\r
 314         height:1.5em;\r
 315 }\r
 316 \r
 317 #duration, #current-time, #source-file, #clip-time, #clip-duration {\r
 318         display:inline;\r
 319 }\r
 320 \r
 321 .button {\r
 322         border:1px solid black;\r
 323         padding-top:3px;\r
 324         padding-bottom:3px;     \r
 325         margin:0px;\r
 326         width:3em;\r
 327 }\r
 328 \r
 329 \r
 330 \r
 331 /* skins sliders */\r
 332 \r
 333 .ui-slider { \r
 334         width: 100%; \r
 335         height: 23px; \r
 336         position: relative; \r
 337         background-repeat: repeat-x; \r
 338         background-position: center center; \r
 339 }\r
 340 .ui-slider-handle { position: absolute; z-index: 0; height: 23px; width: 12px; top: 0px; left: 0px; background-image: url(images/slider-handle.gif);  }\r
 341 \r
 342 /*.ui-slider-handle-ghost { \r
 343         position: absolute; \r
 344         z-index: 1; \r
 345         height: 23px; \r
 346         width: 12px; \r
 347         top: 0px; \r
 348         left: 0px; \r
 349         background-image: url(images/slider-handle.gif);  \r
 350         opacity: 0.1;\r
 351 }*/\r
 352 \r
 353 \r
 354 /*.ui-slider-handle-active, .ui-slider-handle-ghost-active { border: 1px dotted black;  }\r
 355 .ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }*/\r
 356 .ui-slider-range { position: absolute; background: #50A029; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }\r
 357 \r
 358 /* Default slider backgrounds */\r
 359 .ui-slider, .ui-slider-1 { background-image: url(images/slider-bg-2.png); }\r
 360 .ui-slider-2 { background-image: url(images/slider-bg-2.png); }\r
 361 .ui-slider-clip { background-image: url(images/middlebar.png); }\r
 362 \r
 363 /*.ui-slider-ghost { background-image: none; }*/\r
 364 \r
 365 \r
 366 /* links */\r
 367 a:link, a:visited {\r
 368         color: black;\r
 369 }\r
 370 a:hover, a:focus {\r
 371         color:red;\r
 372 }\r
 373 \r
 374 \r
 375 \r
 376 \r
 377 li.choice {\r
 378         height:19em;\r
 379         padding:5px;\r
 380         width: 12.25em;\r
 381         background-color: #fffff8;\r
 382         border: 1px solid #969696;\r
 383         text-align:center;\r
 384         float:left;\r
 385         margin-right:15px;\r
 386         margin-bottom:5px;\r
 387         list-style:none;\r
 388 }\r
 389 \r
 390 .choice-info {\r
 391         height:17em;\r
 392 }\r
 393 \r
 394 \r
 395 /* msgs */\r
 396 \r
 397 div.error {\r
 398         width:80%;\r
 399         margin-left:auto;\r
 400         margin-right:auto;\r
 401         background-color: #F4E0E0;\r
 402         border: 1px solid #A64040;\r
 403         padding:10px;\r
 404         margin:10px;\r
 405 }\r
 406 \r
 407 div.feedback {\r
 408         width:80%;\r
 409         margin-left:auto;\r
 410         margin-right:auto;\r
 411         background-color: #D4ECD1;\r
 412         border: 1px solid #4CA640;\r
 413         padding:10px;\r
 414         margin:10px;\r
 415 }\r
 416 \r
 417 div.notice {\r
 418         width:80%;\r
 419         margin-left:auto;\r
 420         margin-right:auto;\r
 421         background-color: #f3edf6;\r
 422         border: 1px solid #9977a8;\r
 423         padding:10px;\r
 424         margin:10px;\r
 425 }\r
 426 \r
 427 /* export */\r
 428 ul#export-list {\r
 429         list-style: none;       \r
 430 }\r
 431 \r
 432 ul#export-list li {\r
 433         padding-top:3px;\r
 434         padding-bottom:5px;     \r
 435 }\r
 436 \r
 437 ul#export-list a {\r
 438         font-weight:bold;\r
 439 }\r
 440 \r
 441 \r
 442 /* editor */\r
 443 #in-info {\r
 444         float:left; \r
 445         text-align:left; \r
 446 }\r
 447 \r
 448 #out-info {\r
 449         float:right; \r
 450         text-align:right;\r
 451 }\r
 452 \r
 453 /* settings */\r
 454 \r
 455 #edit-name, #edit-caps, #edit-media, #edit-perms {\r
 456         margin-bottom: 20px;\r
 457         padding:5px;\r
 458         background-color: #dce5f3;\r
 459 }