root/css/style.css

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