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 .action {
  96   float: right;
  97 }
  98 /* popup notifications */
  99 div.jGrowl div.notice {
 100   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
 101   color: #ffffff;
 102   padding-left: 58px;
 103 }
 104 div.jGrowl div.info {
 105   background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
 106   color: #ffffff;
 107   padding-left: 58px;
 108 }
 109 /* header */
 110 header {
 111   position: fixed;
 112   left: 43%;
 113   right: 43%;
 114   top: 0px;
 115   margin: 0px;
 116   padding: 0px;
 117   /*width: 100%; height: 12px; */
 118
 119   z-index: 110;
 120   color: #ffffff;
 121 }
 122 header #site-location {
 123   display: none;
 124 }
 125 header #banner {
 126   text-align: center;
 127   width: 100%;
 128 }
 129 header #banner a,
 130 header #banner a:active,
 131 header #banner a:visited,
 132 header #banner a:link,
 133 header #banner a:hover {
 134   color: #ffffff;
 135   text-decoration: none;
 136   outline: none;
 137   vertical-align: bottom;
 138 }
 139 header #banner #logo-img {
 140   height: 22px;
 141   margin-top: 5px;
 142 }
 143 header #banner #logo-text {
 144   font-size: 22px;
 145 }
 146 /* nav */
 147 nav {
 148   width: 100%;
 149   height: 32px;
 150   position: fixed;
 151   left: 0px;
 152   top: 0px;
 153   padding: 0px;
 154   background-color: #0e232e;
 155   color: #ffffff;
 156   z-index: 100;
 157   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 158   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 159   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 160 }
 161 nav a,
 162 nav a:active,
 163 nav a:visited,
 164 nav a:link,
 165 nav a:hover {
 166   color: #ffffff;
 167   text-decoration: none;
 168   outline: none;
 169 }
 170 nav ul {
 171   margin: 0px;
 172   padding: 0px 20px;
 173 }
 174 nav ul li {
 175   list-style: none;
 176   margin: 0px;
 177   padding: 0px;
 178   float: left;
 179 }
 180 nav ul li .menu-popup {
 181   left: 0px;
 182   right: auto;
 183 }
 184 nav .nav-menu-icon {
 185   position: relative;
 186   height: 22px;
 187   padding: 5px;
 188   margin: 0px 10px;
 189   -moz-border-radius: 5px 5px 0 0;
 190   -webkit-border-radius: 5px 5px 0 0;
 191   border-radius: 5px 5px 0 0;
 192 }
 193 nav .nav-menu-icon.selected {
 194   background-color: #364e59;
 195 }
 196 nav .nav-menu-icon img {
 197   width: 22px;
 198   height: 22px;
 199 }
 200 nav .nav-menu-icon .nav-notify {
 201   top: 3px;
 202 }
 203 nav .nav-menu {
 204   position: relative;
 205   height: 16px;
 206   padding: 5px;
 207   margin: 3px 15px 0px;
 208   font-size: 14px;
 209   border-bottom: 3px solid #0e232e;
 210 }
 211 nav .nav-menu.selected {
 212   border-bottom: 3px solid #9eabb0;
 213 }
 214 nav .nav-notify {
 215   display: none;
 216   position: absolute;
 217   background-color: #19aeff;
 218   -moz-border-radius: 5px 5px 5px 5px;
 219   -webkit-border-radius: 5px 5px 5px 5px;
 220   border-radius: 5px 5px 5px 5px;
 221   font-size: 10px;
 222   padding: 1px 3px;
 223   top: 0px;
 224   right: -10px;
 225   min-width: 15px;
 226   text-align: right;
 227 }
 228 nav .nav-notify.show {
 229   display: block;
 230 }
 231 nav #nav-help-link,
 232 nav #nav-search-link,
 233 nav #nav-directory-link,
 234 nav #nav-apps-link,
 235 nav #nav-site-linkmenu {
 236   float: right;
 237 }
 238 nav #nav-help-link .menu-popup,
 239 nav #nav-search-link .menu-popup,
 240 nav #nav-directory-link .menu-popup,
 241 nav #nav-apps-link .menu-popup,
 242 nav #nav-site-linkmenu .menu-popup {
 243   right: 0px;
 244   left: auto;
 245 }
 246 nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 247   background-image: url("../../../images/icons/22/notify_on.png");
 248 }
 249 nav #nav-apps-link.selected {
 250   background-color: #364e59;
 251 }
 252 ul.menu-popup {
 253   position: absolute;
 254   display: none;
 255   width: 10em;
 256   background: #ffffff;
 257   color: #2d2d2d;
 258   margin: 0px;
 259   padding: 0px;
 260   list-style: none;
 261   border: 3px solid #364e59;
 262   z-index: 100000;
 263   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 264   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 265   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 266 }
 267 ul.menu-popup a {
 268   display: block;
 269   color: #2d2d2d;
 270   padding: 5px 10px;
 271   text-decoration: none;
 272 }
 273 ul.menu-popup a:hover {
 274   background-color: #bdcdd4;
 275 }
 276 ul.menu-popup .menu-sep {
 277   border-top: 1px solid #9eabb0;
 278 }
 279 ul.menu-popup li {
 280   float: none;
 281   overflow: auto;
 282   height: auto;
 283   display: block;
 284 }
 285 ul.menu-popup li img {
 286   float: left;
 287   width: 16px;
 288   height: 16px;
 289   padding-right: 5px;
 290 }
 291 ul.menu-popup .empty {
 292   padding: 5px;
 293   text-align: center;
 294   color: #9eabb0;
 295 }
 296 #nav-notifications-menu {
 297   width: 400px;
 298 }
 299 #nav-notifications-menu img {
 300   float: left;
 301   margin-right: 5px;
 302 }
 303 #nav-notifications-menu .contactname {
 304   font-weight: bold;
 305 }
 306 #nav-notifications-menu .notif-when {
 307   font-size: 10px;
 308   color: #9eabb0;
 309   display: block;
 310 }
 311 /* aside */
 312 aside {
 313   display: table-cell;
 314   width: 200px;
 315   padding: 0px 10px 0px 20px;
 316   border-right: 1px solid #bdcdd4;
 317 }
 318 aside .vcard .fn {
 319   font-size: 16px;
 320   font-weight: bold;
 321   margin-bottom: 5px;
 322 }
 323 aside .vcard .title {
 324   margin-bottom: 5px;
 325 }
 326 aside .vcard dl {
 327   height: auto;
 328   overflow: auto;
 329 }
 330 aside .vcard dt {
 331   float: left;
 332   margin-left: 0px;
 333   width: 35%;
 334 }
 335 aside .vcard dd {
 336   float: left;
 337   margin-left: 4px;
 338   width: 60%;
 339 }
 340 aside #profile-extra-links ul {
 341   padding: 0px;
 342   margin: 0px;
 343 }
 344 aside #profile-extra-links li {
 345   padding: 0px;
 346   margin: 0px;
 347   list-style: none;
 348 }
 349 aside #dfrn-request-link {
 350   display: block;
 351   -moz-border-radius: 5px 5px 5px 5px;
 352   -webkit-border-radius: 5px 5px 5px 5px;
 353   border-radius: 5px 5px 5px 5px;
 354   color: #ffffff;
 355   background: #005c94 url('../../../images/connect-bg.png') no-repeat left center;
 356   font-weight: bold;
 357   text-transform: uppercase;
 358   padding: 4px 2px 2px 35px;
 359 }
 360 aside #dfrn-request-link:hover {
 361   text-decoration: none;
 362   background-color: #19aeff;
 363 }
 364 #contact-block {
 365   overflow: auto;
 366   height: auto;
 367 }
 368 #contact-block .contact-block-h4 {
 369   float: left;
 370   margin: 5px 0px;
 371 }
 372 #contact-block .allcontact-link {
 373   float: right;
 374   margin: 5px 0px;
 375 }
 376 #contact-block .contact-block-content {
 377   clear: both;
 378   overflow: auto;
 379   height: auto;
 380 }
 381 #contact-block .contact-block-link {
 382   float: left;
 383   margin: 0px 2px 2px 0px;
 384 }
 385 /* section */
 386 section {
 387   display: table-cell;
 388   width: 800px;
 389   padding: 0px 20px 0px 10px;
 390 }