view/theme/quattro/style.css

   1 /**
   2  * Fabio Comuni <http://kirgroup.com/profile/fabrixxm>
   3  **/
   4 /* global */
   5 body {
   6   font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
   7   font-size: 12px;
   8   background-color: #ffffff;
   9   color: #2d2d2d;
  10   margin: 0px;
  11   display: table-row;
  12 }
  13 a, a:link {
  14   color: #005c94;
  15   text-decoration: none;
  16 }
  17 a:visited {
  18   color: #005c94;
  19   text-decoration: none;
  20 }
  21 a:hover {
  22   color: #005c94;
  23   text-decoration: underline;
  24 }
  25 .left {
  26   float: left;
  27 }
  28 .right {
  29   float: right;
  30 }
  31 /* icons */
  32 .icon {
  33   background-color: transparent ;
  34   background-repeat: no-repeat;
  35   background-position: center center;
  36   display: block;
  37   overflow: hidden;
  38   text-indent: -9999px;
  39 }
  40 .icon.s22 {
  41   width: 22px;
  42   height: 22px;
  43   padding: 1px;
  44 }
  45 .icon.s22.notify {
  46   background-image: url("../../../images/icons/notify_off_22.png");
  47 }
  48 .icon.s22.gear {
  49   background-image: url("../../../images/icons/gear_22.png");
  50 }
  51 /* header */
  52 header {
  53   position: fixed;
  54   left: 43%;
  55   right: 43%;
  56   top: 0px;
  57   margin: 0px;
  58   padding: 0px;
  59   /*width: 100%; height: 12px; */
  60
  61   z-index: 110;
  62   color: #ffffff;
  63 }
  64 header #site-location {
  65   display: none;
  66 }
  67 header #banner {
  68   text-align: center;
  69   width: 100%;
  70 }
  71 header #banner a,
  72 header #banner a:active,
  73 header #banner a:visited,
  74 header #banner a:link,
  75 header #banner a:hover {
  76   color: #ffffff;
  77   text-decoration: none;
  78   outline: none;
  79   vertical-align: bottom;
  80 }
  81 header #banner #logo-img {
  82   height: 22px;
  83   margin-top: 5px;
  84 }
  85 header #banner #logo-text {
  86   font-size: 22px;
  87 }
  88 /* nav */
  89 nav {
  90   width: 100%;
  91   height: 32px;
  92   position: fixed;
  93   left: 0px;
  94   top: 0px;
  95   padding: 0px;
  96   background-color: #0e232e;
  97   color: #ffffff;
  98   z-index: 100;
  99   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 100   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 101   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 102 }
 103 nav a,
 104 nav a:active,
 105 nav a:visited,
 106 nav a:link,
 107 nav a:hover {
 108   color: #ffffff;
 109   text-decoration: none;
 110   outline: none;
 111 }
 112 nav ul {
 113   margin: 0px;
 114   padding: 0px 20px;
 115 }
 116 nav ul li {
 117   list-style: none;
 118   margin: 0px;
 119   padding: 0px;
 120   float: left;
 121 }
 122 nav ul li .menu-popup {
 123   left: 0px;
 124   right: auto;
 125 }
 126 nav .nav-menu-icon {
 127   position: relative;
 128   height: 22px;
 129   padding: 5px;
 130   margin: 0px 10px;
 131   -moz-border-radius: 5px 5px 0 0;
 132   -webkit-border-radius: 5px 5px 0 0;
 133   border-radius: 5px 5px 0 0;
 134 }
 135 nav .nav-menu-icon.selected {
 136   background-color: #364e59;
 137 }
 138 nav .nav-menu-icon img {
 139   width: 22px;
 140   height: 22px;
 141 }
 142 nav .nav-menu-icon .nav-notify {
 143   top: 3px;
 144 }
 145 nav .nav-menu {
 146   position: relative;
 147   height: 16px;
 148   padding: 5px;
 149   margin: 3px 15px 0px;
 150   font-size: 14px;
 151   border-bottom: 3px solid #0e232e;
 152 }
 153 nav .nav-menu.selected {
 154   border-bottom: 3px solid #9eabb0;
 155 }
 156 nav .nav-notify {
 157   display: none;
 158   position: absolute;
 159   background-color: #19aeff;
 160   -moz-border-radius: 5px 5px 5px 5px;
 161   -webkit-border-radius: 5px 5px 5px 5px;
 162   border-radius: 5px 5px 5px 5px;
 163   font-size: 10px;
 164   padding: 1px 3px;
 165   top: 0px;
 166   right: -10px;
 167   min-width: 15px;
 168   text-align: right;
 169 }
 170 nav .nav-notify.show {
 171   display: block;
 172 }
 173 nav #nav-help-link,
 174 nav #nav-search-link,
 175 nav #nav-directory-link,
 176 nav #nav-apps-link,
 177 nav #nav-site-linkmenu {
 178   float: right;
 179 }
 180 nav #nav-help-link .menu-popup,
 181 nav #nav-search-link .menu-popup,
 182 nav #nav-directory-link .menu-popup,
 183 nav #nav-apps-link .menu-popup,
 184 nav #nav-site-linkmenu .menu-popup {
 185   right: 0px;
 186   left: auto;
 187 }
 188 nav #nav-notifications-linkmenu.selected .icon.s22.notify {
 189   background-image: url("../../../images/icons/notify_on_22.png");
 190 }
 191 nav #nav-apps-link.selected {
 192   background-color: #364e59;
 193 }
 194 ul.menu-popup {
 195   position: absolute;
 196   display: none;
 197   width: 10em;
 198   background: #ffffff;
 199   color: #2d2d2d;
 200   margin: 0px;
 201   padding: 0px;
 202   list-style: none;
 203   border: 3px solid #364e59;
 204   z-index: 100000;
 205   -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 206   -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 207   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 208 }
 209 ul.menu-popup a {
 210   display: block;
 211   color: #2d2d2d;
 212   padding: 5px 10px;
 213 }
 214 ul.menu-popup a:hover {
 215   background-color: #bdcdd4;
 216 }
 217 ul.menu-popup .menu-sep {
 218   border-top: 1px solid #9eabb0;
 219 }
 220 ul.menu-popup li {
 221   float: none;
 222   overflow: auto;
 223   height: auto;
 224   display: block;
 225 }
 226 ul.menu-popup .empty {
 227   padding: 5px;
 228   text-align: center;
 229   color: #9eabb0;
 230 }
 231 #nav-notifications-menu {
 232   width: 400px;
 233 }
 234 #nav-notifications-menu img {
 235   float: left;
 236   margin-right: 5px;
 237 }
 238 #nav-notifications-menu .contactname {
 239   font-weight: bold;
 240 }
 241 #nav-notifications-menu .notif-when {
 242   font-size: 10px;
 243   color: #9eabb0;
 244   display: block;
 245 }
 246 /* aside */
 247 aside {
 248   display: table-cell;
 249   width: 200px;
 250   padding: 50px 10px 0px 20px;
 251 }
 252 /* section */
 253 section {
 254   display: table-cell;
 255   width: 800px;
 256   padding: 50px 20px 0px 10px;
 257 }