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