root/css/style.css

   1 /* General site-wide layout */
   2 body {
   3     margin: 0;
   4     padding: 20px;
   5     font: 1em Arial, Helvetica, sans-serif;
   6     font-size: 85%;
   7     color: #666;
   8 }
   9 h1 {
  10     border-bottom: 1px solid #488dd2;
  11     color: #488dd2;
  12     font-size: 18pt;
  13 }
  14 h2 {
  15     margin-top: 10px;
  16     color: #488dd2;
  17     font-size: 18px;
  18 }
  19 h3 {
  20         color: #488dd2;
  21         font-size: 14px;
  22         font-style: italic;
  23 }
  24
  25 div.button {
  26   background: transparent url('../images/b_button_a.png') no-repeat scroll top right;
  27   color: #fff;
  28   display: block;
  29   float: left;
  30   font: normal 12px Times, Times New Roman, Serif; /* arial, sans-serif; */
  31   height: 24px;
  32   margin-right: 6px;
  33   padding-right: 18px; /* sliding doors padding */
  34   text-decoration: none;
  35 }
  36 div.button.reset {
  37   background: transparent url('../images/c_button_a.png') no-repeat scroll top right;
  38 }
  39 div.button span {
  40   background: transparent url('../images/b_button_span.png') no-repeat;
  41   display: block;
  42   line-height: 14px;
  43   padding: 5px 0 5px 18px;
  44 }
  45 div.button.reset span {
  46   background: transparent url('../images/c_button_span.png') no-repeat;
  47 }
  48 div.button:hover {
  49   background-position: bottom right;
  50   color: #444;
  51   outline: none; /* hide dotted outline in Firefox */
  52 }
  53 div.button:hover span {
  54   background-position: bottom left;
  55 }
  56 #stemma_pager_buttons {
  57     height: 28px;
  58 }
  59 div.pager_left_button {
  60   width: 28px;
  61   height: 28px;
  62   float: left;
  63   background: transparent url('../images/button_left_28.png') no-repeat left bottom;
  64 }
  65 div.pager_left_button:hover {
  66     background: transparent url('../images/button_left_28.png') no-repeat center bottom;
  67 }
  68 div.pager_right_button:hover {
  69     background: transparent url('../images/button_right_28.png') no-repeat center bottom;
  70 }
  71 div.pager_right_button {
  72   width: 28px;
  73   height: 28px;
  74   float: left;
  75   margin-left: 10px;
  76   background: transparent url('../images/button_right_28.png') no-repeat left bottom;
  77 }
  78 div.pager_right_button.greyed_out, div.pager_right_button.greyed_out:hover {
  79     opacity: 0.5;
  80     background: url("../images/button_right_28.png") no-repeat scroll right bottom transparent;
  81 }
  82 div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
  83     opacity: 0.5;
  84     background: url("../images/button_left_28.png") no-repeat scroll right bottom transparent;
  85 }
  86 #topbanner {
  87         width: 100%;
  88 }
  89 #bannerinfo {
  90         float: right;
  91         margin-right: 12%;
  92         margin-top: 15px;
  93 }
  94 .navlink {
  95         color: #488dd2;
  96         text-decoration: underline;
  97 }
  98
  99
 100
 101 /* Index page components */
 102
 103 #directory_container {
 104         float: left;
 105         width: 300px;
 106         height: 450px;
 107         border: 1px #c6dcf1 solid;
 108         padding-left: 10px;
 109         padding-right: 10px;
 110 }
 111 #loading_message {
 112         display: none;
 113 }
 114 #directory {
 115         height: 360px;
 116         margin-left: 10px;
 117         overflow: auto;
 118 }
 119 #new_trad_button {
 120         margin-left: 10px;
 121         position: relative;
 122         top: 10px;
 123 }
 124 .traditionname {
 125         text-decoration: underline;
 126 }
 127 .selected {
 128         font-style: italic;
 129 }
 130 .mainnav {
 131         position: absolute;
 132         top: 10px;
 133         right: 22px;
 134         font-size: 14px;
 135         font-weight: 100;
 136         color: #488dd2;
 137 }
 138 .mainnav a {
 139         color: #488dd2;
 140 }
 141 #textinfo_waitbox {
 142         float: left;
 143         padding-left: 50px;
 144 }
 145 #textinfo_container {
 146     border: 1px solid #C6DCF1;
 147         float: left;
 148         height: 510px;
 149         width: 710px;
 150         margin-left: 10px;
 151         padding-left: 10px;
 152         padding-right: 10px;
 153 }
 154 #edit_instructions {
 155         float: left;
 156 }
 157 #stemma_container h2 h3 {
 158         color: #666;
 159 }
 160 #stemma_graph {
 161     height: 375px;
 162     width: 500px;
 163     text-align: center;
 164     border: 1px #c6dcf1 solid;
 165 }
 166 #stemma_graph img {
 167         margin-top: expression(( 450 - this.height ) / 2);
 168 }
 169 #stemma_graph svg {
 170         z-index: -100;
 171 }
 172 #textinfo_container_buttons {
 173     float: right;
 174     left: -18px;
 175     position: relative;
 176     top: 15px;
 177 }
 178 #run_stexaminer, #run_relater, #open_stemma_add, #open_stemma_edit {
 179     height: 32px;
 180 }
 181 #stemma_pager {
 182     height: 38px;
 183 }
 184 #open_textinfo_edit {
 185     float: right;
 186     height: 30px;
 187     position: relative;
 188     top: -34px;
 189     left: -8px;
 190 }
 191 #upload-collation-dialog {
 192     overflow: hidden;
 193 }
 194 .uploadfile {
 195     font-weight: bold;
 196 }
 197 #uploadfile_label {
 198     font-weight: normal;
 199 }
 200 #filelist {
 201     position: relative;
 202     top: 10px;
 203     margin-bottom: 24px;
 204 }
 205 .error {
 206     font-weight: bold;
 207     color: #ff3333;
 208 }
 209 #new_file {
 210     position: absolute;
 211     top: -50px;
 212     opacity: 0.0;
 213 }
 214 #new_file_name {
 215     font-weight: bold;
 216 }
 217 #new_name, #new_lang, #new_public, #new_file_name_container {
 218     margin-bottom: 6px;
 219 }
 220 #new_file_label {
 221     float: left;
 222     padding-right: 8px;
 223 }