view/theme/quattro/style.css

   1 /**
   2  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
   3  **/
   4 /* icons */
   5 .icon {
   6   background-color: transparent ;
   7   background-repeat: no-repeat;
   8   background-position: center center;
   9   display: block;
  10   overflow: hidden;
  11   text-indent: -9999px;
  12   padding: 1px;
  13 }
  14 .icon.text {
  15   text-indent: 0px;
  16 }
  17 .icon.s16 {
  18   width: 22px;
  19   height: 22px;
  20 }
  21 .icon.s16.notify {
  22   background-image: url("../../../images/icons/16/notify_off.png");
  23 }
  24 .icon.s16.gear {
  25   background-image: url("../../../images/icons/16/gear.png");
  26 }
  27 .icon.s16.add {
  28   background-image: url("../../../images/icons/16/add.png");
  29 }
  30 .icon.s16.delete {
  31   background-image: url("../../../images/icons/16/delete.png");
  32 }
  33 .icon.s16.edit {
  34   background-image: url("../../../images/icons/16/edit.png");
  35 }
  36 .icon.s16.start {
  37   background-image: url("../../../images/icons/16/star.png");
  38 }
  39 .icon.s22 {
  40   width: 22px;
  41   height: 22px;
  42 }
  43 .icon.s22.notify {
  44   background-image: url("../../../images/icons/22/notify_off.png");
  45 }
  46 .icon.s22.gear {
  47   background-image: url("../../../images/icons/22/gear.png");
  48 }
  49 .icon.s22.add {
  50   background-image: url("../../../images/icons/22/add.png");
  51 }
  52 .icon.s22.delete {
  53   background-image: url("../../../images/icons/22/delete.png");
  54 }
  55 .icon.s22.edit {
  56   background-image: url("../../../images/icons/22/edit.png");
  57 }
  58 .icon.s22.start {
  59   background-image: url("../../../images/icons/22/star.png");
  60 }
  61 /* global */
  62 body {
  63   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
  64   font-size: 12px;
  65   background-color: #ffffff;
  66   color: #2d2d2d;
  67   margin: 50px 0px 0px 0px;
  68   display: table;
  69 }
  70 a, a:link {
  71   color: #005c94;
  72   text-decoration: none;
  73 }
  74 a:visited {
  75   color: #005c94;
  76   text-decoration: none;
  77 }
  78 a:hover {
  79   color: #005c94;
  80   text-decoration: underline;
  81 }
  82 .left {
  83   float: left;
  84 }
  85 .right {
  86   float: right;
  87 }
  88 .tool {
  89   height: auto;
  90   overflow: auto;
  91 }
  92 .tool .label {
  93   float: left;
  94 }
  95 .tool .icon {
  96   float: right;
  97 }
  98 /* header */
  99 header {
 100   position: fixed;
 101   left: 43%;
 102   right: 43%;
 103   top: 0px;
 104   margin: 0px;
 105   padding: 0px;
 106   /*width: 100%; height: 12px; */
 107
 108   z-index: 110;
 109   color: #ffffff;
 110 }
 111 header #site-location {
 112   display: none;
 113 }
 114 header #banner {
 115   text-align: center;
 116   width: 100%;
 117 }
 118 header #banner a,
 119 header #banner a:active,
 120 header #banner a:visited,
 121 header #banner a:link,
 122 header #banner a:hover {
 123   color: #ffffff;
 124   text-decoration: none;
 125   outline: none;
 126   vertical-align: bottom;
 127 }
 128 header #banner #logo-img {
 129   height: 22px;
 130   margin-top: 5px;
 131 }
 132 header #banner #logo-text {
 133   font-size: 22px;
 134 }
 135 /* nav */
 136 nav {
 137   width: 100%;
 138   height: 32px;
 139   position: fixed;
 140   left: 0px;
 141   top: 0px;
 142   padding: 0px;
 143   background-color: #0e232e;
 144   color: #ffffff;
 145   z-index: 100;
 146   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 147   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 148   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 149 }
 150 nav a,
 151 nav a:active,
 152 nav a:visited,
 153 nav a:link,
 154 nav a:hover {
 155   color: #ffffff;
 156   text-decoration: none;
 157   outline: none;
 158 }
 159 nav ul {
 160   margin: 0px;
 161   padding: 0px 20px;
 162 }
 163 nav ul li {
 164   list-style: none;
 165   margin: 0px;
 166   padding: 0px;
 167   float: left;
 168 }
 169 nav ul li .menu-popup {
 170   left: 0px;
 171   right: auto;
 172 }
 173 nav .nav-menu-icon {
 174   position: relative;
 175   height: 22px;
 176   padding: 5px;
 177   margin: 0px 10px;
 178   -moz-border-radius: 5px 5px 0 0;
 179   -webkit-border-radius: 5px 5px 0 0;
 180   border-radius: 5px 5px 0 0;
 181 }
 182 nav .nav-menu-icon.selected {
 183   background-color: #364e59;
 184 }
 185 nav .nav-menu-icon img {
 186   width: 22px;
 187   height: 22px;
 188 }
 189 nav .nav-menu-icon .nav-notify {
 190   top: 3px;
 191 }
 192 nav .nav-menu {
 193   position: relative;
 194   height: 16px;
 195   padding: 5px;
 196   margin: 3px 15px 0px;
 197   font-size: 14px;
 198   border-bottom: 3px solid #0e232e;
 199 }
 200 nav .nav-menu.selected {
 201   border-bottom: 3px solid #9eabb0;
 202 }
 203 nav .nav-notify {
 204   display: none;
 205   position: absolute;
 206   background-color: #19aeff;
 207   -moz-border-radius: 5px 5px 5px 5px;
 208   -webkit-border-radius: 5px 5px 5px 5px;
 209   border-radius: 5px 5px 5px 5px;
 210   font-size: 10px;
 211   padding: 1px 3px;
 212   top: 0px;
 213   right: -10px;
 214   min-width: 15px;
 215   text-align: right;
 216 }
 217 nav .nav-notify.show {
 218   display: block;
 219 }
 220 nav #nav-help-link,
 221 nav #nav-search-link,
 222 nav #nav-directory-link,
 223 nav #nav-apps-link,
 224 nav #nav-site-linkmenu {
 225   float: right;
 226 }
 227 nav #nav-help-link .menu-popup,
 228 nav #nav-search-link .menu-popup,
 229 nav #nav-directory-link .menu-popup,
 230 nav #nav-apps-link .menu-popup,
 231 nav #nav-site-linkmenu .menu-popup {
 232   right: 0px;
 233   left: auto;
 234 }
 235 nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 236   background-image: url("../../../images/icons/22/notify_on.png");
 237 }
 238 nav #nav-apps-link.selected {
 239   background-color: #364e59;
 240 }
 241 ul.menu-popup {
 242   position: absolute;
 243   display: none;
 244   width: 10em;
 245   background: #ffffff;
 246   color: #2d2d2d;
 247   margin: 0px;
 248   padding: 0px;
 249   list-style: none;
 250   border: 3px solid #364e59;
 251   z-index: 100000;
 252   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 253   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 254   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 255 }
 256 ul.menu-popup a {
 257   display: block;
 258   color: #2d2d2d;
 259   padding: 5px 10px;
 260 }
 261 ul.menu-popup a:hover {
 262   background-color: #bdcdd4;
 263 }
 264 ul.menu-popup .menu-sep {
 265   border-top: 1px solid #9eabb0;
 266 }
 267 ul.menu-popup li {
 268   float: none;
 269   overflow: auto;
 270   height: auto;
 271   display: block;
 272 }
 273 ul.menu-popup .empty {
 274   padding: 5px;
 275   text-align: center;
 276   color: #9eabb0;
 277 }
 278 #nav-notifications-menu {
 279   width: 400px;
 280 }
 281 #nav-notifications-menu img {
 282   float: left;
 283   margin-right: 5px;
 284 }
 285 #nav-notifications-menu .contactname {
 286   font-weight: bold;
 287 }
 288 #nav-notifications-menu .notif-when {
 289   font-size: 10px;
 290   color: #9eabb0;
 291   display: block;
 292 }
 293 /* aside */
 294 aside {
 295   display: table-cell;
 296   width: 200px;
 297   padding: 0px 10px 0px 20px;
 298   border-right: 1px solid #bdcdd4;
 299 }
 300 aside .vcard .fn {
 301   font-size: 16px;
 302   font-weight: bold;
 303   margin-bottom: 5px;
 304 }
 305 aside .vcard .title {
 306   margin-bottom: 5px;
 307 }
 308 aside .vcard dl {
 309   height: auto;
 310   overflow: auto;
 311 }
 312 aside .vcard dt {
 313   float: left;
 314   margin-left: 0px;
 315   width: 35%;
 316 }
 317 aside .vcard dd {
 318   float: left;
 319   margin-left: 4px;
 320   width: 60%;
 321 }
 322 aside #profile-extra-links ul {
 323   padding: 0px;
 324   margin: 0px;
 325 }
 326 aside #profile-extra-links li {
 327   padding: 0px;
 328   margin: 0px;
 329   list-style: none;
 330 }
 331 aside #dfrn-request-link {
 332   display: block;
 333   -moz-border-radius: 5px 5px 5px 5px;
 334   -webkit-border-radius: 5px 5px 5px 5px;
 335   border-radius: 5px 5px 5px 5px;
 336   color: #ffffff;
 337   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 338   font-weight: bold;
 339   text-transform: uppercase;
 340   padding: 4px 2px 2px 35px;
 341 }
 342 aside #dfrn-request-link:hover {
 343   text-decoration: none;
 344   background-color: #19aeff;
 345 }
 346 #contact-block {
 347   overflow: auto;
 348   height: auto;
 349 }
 350 #contact-block .contact-block-h4 {
 351   float: left;
 352   margin: 5px 0px;
 353 }
 354 #contact-block .allcontact-link {
 355   float: right;
 356   margin: 5px 0px;
 357 }
 358 #contact-block .contact-block-content {
 359   clear: both;
 360   overflow: auto;
 361   height: auto;
 362 }
 363 #contact-block .contact-block-link {
 364   float: left;
 365   margin: 0px 2px 2px 0px;
 366 }
 367 /* section */
 368 section {
 369   display: table-cell;
 370   width: 800px;
 371   padding: 0px 20px 0px 10px;
 372 }