mockups/content/css/mockups.css
author Sverre Rabbelier <srabbelier@gmail.com>
Sat, 22 Nov 2008 13:59:34 +0000
changeset 553 c0cc20b4afc9
parent 58 cee78a1ae672
permissions -rw-r--r--
Make redirect generic using the new Lists object This makes it possible (and easier) to have the list view redirect to any page specially tailored to the current item. Patch by: Sverre Rabbelier

body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
  font-size: small;
  margin: 8px;
  margin-top: 3px;
}

img {
  border: 0;
}

table {
  border-collapse: collapse;
}

th, td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}

a:link {
  color: #0000cc;
}

a:active {
  color: #cc0000;
}

a:visited {
  color: #551a8b;
}

h1 {
  font-size: x-large;
  margin-top: 0px;
}

h2 {
  font-size: large;
}

h3 {
  font-size: medium;
}

h4 {
  font-size: small;
}

form {
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 0.25em;
}

pre, code {
  color: #007000;
  font-family: "bogus font here", monospace;
  font-size: 100%;
}

pre {
  border: 1px solid silver;
  background-color: #f5f5f5;
  padding: 0.5em;
  overflow: auto;
  margin: 2em;
}

pre ins {
  color: #cc0000;
  font-weight: bold;
  text-decoration: none;
}

.newmark {
  color: red;
  font-size: 80%;
  vertical-align: top;
}

a.selected, .selected a, .selected {
  color: black;
  font-weight: bold;
  text-decoration: none;
}

a.selected:visited, .selected a:visited {
  color: black;
}

#login {
  text-align: right;
}

#header {
  height: 50px;
  margin-bottom: 11px;
  position: relative;
}

#logo {
  padding-right: 18px;
  position: absolute;
  left: 0;
  top: -5px;
}

#logo img {
  width: 143px;
  height: 59px;
}

#title {
  border-top: 1px solid #3366cc;
  background-color: #e5ecf9;
  font-size: large;
  font-weight: bold;
  margin: 0;
  padding: 0;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: 5px;
}

#title, #breadcrumbs {
  margin-left: 200px;
  padding-left: 3px;
}

#breadcrumbs {
  margin-top: 3px;
}

#side {
  width: 200px;
  margin-bottom: 3em;
  float: left;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-bottom: 1em;
  font-size: 95%;
}

#menu ul ul {
  margin-left: 10px;
  margin-bottom: 0;
}

#menu li {
  margin-top: 4px;
}

#menu h4 {
  margin: 0;
  padding: 0;
  margin-bottom: 1em;
}

#badge {
  clear: both;
  margin-top: 3.5em;
  margin-bottom: 1em;
  height: 53px;
  font-style: italic;
}

#search {
  margin-top: 2em;
}

#search .header {
  font-weight: bold;
  font-size: 90%;
  margin-bottom: 1px;
}

#search .button {
  margin-top: 1px;
}

#search .input input {
  width: 125px;
}

#body {
  border-left: 1px dotted silver;
  margin-left: 200px;
  margin-right: 25px;
  padding-left: 18px;
  padding-bottom: 25px;
}

#footer {
  clear: both;
  text-align: center;
  margin-top: 3.5em;
  margin-bottom: 1em;
  background-image: url("http://www.google.com/images/art.gif");
  height: 53px;
  background-repeat: no-repeat;
  background-position: left center;
}

#footer .text {
  padding-top: 20px;
}

div.download {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

div.download a {
  border: 1px solid #3366cc;
  background-color: #e5ecf9;
  padding: 0.5em;
  position: relative;
  font-weight: bold;
}

.termsagree {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #e5ecf9;
  padding: 0.5em;
}

.termsagree .button {
  padding-top: 0.5em;
}

.termsagree .text {
  font-weight: bold;
}

.termsagree .text .printable {
  font-weight: normal;
}

.termsagree .text, .termsagree .button {
  padding-left: 5px;
}

@media print {
  .noprint {
    display: none;
  }

  #header, #side, #login {
    display: none;
  }

  #body {
    margin: 0;
    border: 0;
    padding: 0;
  }
}

table.programorgs {
  text-align: left;
  width: 100%;
  border-color: #e5ecf9;
  border-width: 5px;
  border-left-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
}

table.programorgs td {
  padding-left: 5px;
}

table.programorgs td.triangle {
  width: 10px;
}

table.programorgs td.letter {
  width: 1em;
}

table.tabletabs {
  width: 100%;
}

table.tabletabs td {
  text-align: center;
}

table.tabletabs td.notab {
  border-bottom-width: 5px;
  border-bottom-style: solid;
  border-bottom-color: #e5ecf9;
  border-right-style: hidden;
}

table.tabletabs td.tab {
  border-bottom: 5px solid #e5ecf9;
  border-top: 2px solid #e5ecf9;
  border-right: 2px solid #e5ecf9;
  border-left: 2px solid #e5ecf9;
}

table.tabletabs td.selectedtab {
  border: 5px #e5ecf9;
  border-style: solid solid hidden solid;
  font-weight: bold;
}

table.profile {
  text-align: left;
  width: 100%;
  border-width: 0px 0px 0px 0px;
  border-spacing: 2px;
  border-style: hidden hidden hidden hidden;
  border-collapse: separate;
}

table.profile td {
  padding-left: 5px;
}

table.profile td.explain {
  padding-left: 5px;
  font-size: 75%;
  vertical-align: top;
}

table.profile td.submit {
  text-align: center;
}

table.profile th {
  padding-top: 5px;
  text-align: left;
  font-weight: bold;
  font-style: italic;
}

table.user_roles {
  text-align: left;
  width: 100%;
  border-width: 0px 0px 0px 0px;
  border-spacing: 2px;
  border-style: hidden hidden hidden hidden;
  border-collapse: separate;
}

table.user_roles td {
  border-width: 0px 0px 0px 0px;
  padding: 2px 2px 2px 2px;
  border-style: hidden hidden hidden hidden;
  -moz-border-radius: 0px 0px 0px 0px;
  font-family: sans-serif;
  text-align: left;
}

table.user_roles td.program_last {
  border-width: 0px 0px 1px 0px;
  padding: 2px 2px 2px 2px;
  border-style: hidden hidden solid hidden;
  -moz-border-radius: 0px 0px 0px 0px;
  font-family: sans-serif;
  text-align: left;
}

table.user_roles td.org_last {
  border-width: 0px 0px 1px 0px;
  padding: 2px 2px 2px 2px;
  border-style: hidden hidden dotted hidden;
  -moz-border-radius: 0px 0px 0px 0px;
  font-family: sans-serif;
  text-align: left;
}

td.h1 {
  text-align: left;
  font-family: sans-serif;
  font-weight: bold;
}

td.h2 {
  text-align: center;
  font-family: sans-serif;
  font-style: italic;
  font-weight: bold;
  border-bottom-width: 1px;
  border-style: none none solid none;
  background: #c3d9ff;
}

td.program {
}

td.org {
}

td.role {
}

td.error {
  color: #cc0000;
  border-style: solid;
  border-color: red;
  font-size: 80%;
}

td.error_outline {
  color: #cc0000;
  border-style: solid;
  border-color: red;
}

th.error {
  color: #cc0000;
}

table.input {
  font-size: 100%;
  background: #c3d9ff;
  -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px;
}

table.input td {
  background: #c3d9ff;
  padding-left: 5px;
}

table.input td.help {
  background: #c3d9ff;
  padding-left: 5px;
  font-size: 75%;
}

td.explain {
  width: 200px;
  /*color: #676767; */
  vertical-align: top;
}

table.input th {
  padding-top: 5px;
  text-align: left;
  font-size: 120%;
}

.important {
  color:#cc0000;
  font-style:italic;
}

.important a {
  color:#cc0000;
}

.statusmsg {
  font-style:italic;
  font-size:x-small;
}

#panel {
  margin-top: 4ex;
}

#panel input {
  width: 150px;
  margin-bottom: 4px;
}

table.mentororg {
  width: 100%;
}

td.mentororg {
  background:#bbcced ;
  padding: 5px;
}

td.mentororg a {
  color: #aa0033;
}

td.mentorapp {
  padding-left: 20px;
  background: #e8e8e8;
}

span.would {
  background-color: yellow;
}

span.interested {
  background-color: green;
}

span.indifferent {
  background-color: blue;
}

span.disagree {
  background-color: red;
}

table.applist  {
  background: #C3D9FF;
  border-spacing: 0px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
}

table.applist td, th {
  padding-left: 5px;
  padding-right: 5px;
}

tr.listapp {
  background: #E8EEF7;
}

tr.listrequestapp {
  background: #c2bddd;
}

tr.listapp:hover {
  background: #ffeac0;
  cursor: pointer;
}

tr.listrequestapp:hover {
  background: #ffeac0;
  cursor: pointer;
}

tr.lastacceptlistapp {
  text-align: center;
}

table.mentors {
  width: 100%;
  border-spacing: 0px;
  background: #C3D9FF;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
}

td.orgapp {
  padding-left: 20px;
  background: #e8eef7;
}

th.orgapp {
  text-align: left;
  padding-left: 10px;
  background: #e8eef7;
  font-size: 80%;
  font-weight: normal;
}

table.apptable {
  background: #c3d9ff;
  -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px;
  width: 100%;
  border-spacing: 0px;
}

table.apptable td {
  background: none;
}

table.apptable a {
  color: #3366cc;
}

td.newapp a {
  color: #008000;
}

tr.appodd {
}

tr.appeven {
  background: #e5ecf9;
}

td.time {
  font-size: 60%;
}

pre {
  overflow: auto;
}

h2 {
  font-size: large;
}

div.extern_app {
  background: #bbcced;
  margin: 10px;
  padding: 2px;
}

td.extern_app {
  vertical-align:top;
}

div.extern_orginfo {
  width: 200px;
  border-style: solid;
  border-color: #3399cc;
  padding: 10px;
}

td.extern_orginfo {
  vertical-align:top;
}

table.organizations td {
  padding-right: 25px;
  vertical-align: top;
}

div.sidebar a {
  color: #3366cc;
}

div.sidebar {
  padding: 1px;
}

div.sidebarselect {
  padding: 3px;
  background: #C3D9FF;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
}

div.sidebarselect a {
  color: #3366cc;
}

td.frameleft {
  padding: 3px;
  background: #C3D9FF;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-bottomleft: 4px;
}

td.frameright {
  padding: 3px;
  background: #C3D9FF;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
}

div.frametop {
  padding: 3px;
  background: #C3D9FF;
  width: 100%;
}

div.info {
  background: #FFcc33;
  text-align: center;
  width: 100%;
}

div.orgabout {
  padding: 5px
}

div.orgaboutdescript {
  padding: 5px
}

div.question {
  padding: 10px;
  font-size: 120%;
  font-weight: bold;
}

div.section {
  padding: 10px;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
}

div.sectionlist {
  padding: 10px;
  font-size: 120%;
  font-weight: bold;
}

div.app_text {
  background-color: #ffffff;
  padding-left: 5px;
  font-family: Fixed,monospace;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
}

div.comment_group {
  width: 100%;
  margin-bottom: 5px;
}

div.comment {
  background-color: #e8e8e8;
  margin: 5px;
  padding: 2px;
}

div.comment_time {
  width: auto;
  background: #C3D9FF;
  padding: 2px;
}

div.comment_text {
  margin-top: 2px;
}

h2.infosection {
  border-bottom: 1px solid black;
}

td.navanchor {
  text-align: right;
  font-size: x-small;
}

.tB {
  padding: 3px;
  border: 1px solid #ffdea0;
  background-color: #fff8dc;
  margin-bottom:0.5em;
  margin-top:1em;
  font-weight:bold;
}

.tB td{
  background-color:#fff8dc;
}

.tB a {
  font-weight:normal;
  font-size:x-small;
}

.tBRed {
  padding: 3px;
  border: 1px solid #cdc9c9;
  background-color: #ffe5e5;
  margin-bottom:0.5em;
  margin-top:1em;
  font-weight:bold;
}

table.tB2 {
  border: 1px solid #ffdea0;
  border-spacing: 0px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
}

table.tB2 th{
  background-color: #e5ecf9;
  border-top: 1px solid #ffdea0;
  border-bottom: 1px solid #ffdea0;
  padding: 1px
}

table.tB2 td {
  padding-left: 5px;
  padding-right: 5px;
}

.tBRed td {
  background-color:#ffe5e5;
}

.tBRed a {
  font-weight: normal;
  font-size: x-small;
}

.ftl {
  font-weight: bold;
}

dt {
  font-weight: bold;
}

dd {
  margin:0em 0em 1em 1em;
}

ul {
  margin-top: 0;
}

.colorswatch {
  height: 18px;
  width: 20px;
}

.colorhover {
  border: 1px solid blue;
  cursor: pointer;
  background: #fff;
}

.colorchooser {
  position: absolute;
  display:none; z-index:999;
}

.mono {
  font-family: "Courier New", Courier, monospace;
}

table.palette {
  font-size: 5px;
  border: 1px solid #999;
  border-collapse: collapse;
}

table.palette td a {
  display: block;
  text-decoration: none;
}

table.palette td a div {
  width: 20px;
  height: 20px;
}

table.palette a {
  border: 1px solid #ccc;
  padding: 1px;
}

table.palette a:hover {
  border: 1px solid red;
  cursor: pointer;
}

span.selectedresponse {
  font-weight: bold;
  border-bottom: 1px solid #ffdea0;
  border-right: 1px solid #ffdea0;
  background-color: #fff8dc;
}

.popup {
  cursor: help;
  text-decoration: none;
}

.blog {
  border: 10px solid #e5ecf9;
  border-top: 1px solid #3366cc;
}

.blog h2 {
  margin-top: 0.1em;
  background-color: #e5ecf9;
}

.blog h2 a, .blog h2 a:visited {
  text-decoration: none;
  color: black;
}

.blog .entry {
  margin-bottom: 1em;
}

.blog .title {
   font-size: medium;
}

.blog .author {
  color: gray;
  margin-bottom: 0.5em;
}

.blog .snippet {
  background-color: white;
}

.todo {
  color: #cc0000;
  font-size: 80%;
}