2 font-family: 'Open Sans', sans-serif;
3 background-color: #f7f7f7;
8 /*-webkit-font-smoothing: antialiased;*/ }
14 h1 small, h2 small, h3 small, h4 small, h5 small {
24 body.menu .sidebar-nav {
32 background: url("http://detail.herokuapp.com/img/lens.png") #fcfcfc no-repeat 95%;
38 border: 1px solid #d0dde9;
44 margin-bottom: 60px; }
45 .header h1, .header h2, .header h3, .header h4, .header h5 {
49 /* Custom navbar stuff */
52 /* navbar settings and logout icons */
53 /* notification menu with custom dropdowns */
54 /* navbar popup dialog */ }
55 .navbar-inverse input.search {
59 background: url("http://detail.herokuapp.com/img/lens.png") #0f1217 no-repeat 95%;
60 border: 1px solid #0f1217;
67 -webkit-transition: all .3s linear;
68 -moz-transition: all .3s linear;
69 transition: all .3s linear; }
70 .navbar-inverse input.search:focus {
71 background-color: #fff;
73 .navbar-inverse .settings i {
76 .navbar-inverse .notification-dropdown {
78 .navbar-inverse .notification-dropdown > a:hover,
79 .navbar-inverse .notification-dropdown > a.active {
80 background: #254261 !important;
81 box-shadow: inset 1px 0px 1px 0px #3e5a79; }
82 .navbar-inverse .notification-dropdown i {
85 .navbar-inverse .notification-dropdown .count {
97 .navbar-inverse .pop-dialog {
102 /* navbar popup dialog for notifications */
103 /* navbar popup dialog for messages */ }
104 .navbar-inverse .pop-dialog.is-visible {
106 -webkit-animation: reveal .2s ease-out;
107 -moz-animation: reveal .2s ease-out;
108 animation: reveal .2s ease-out; }
109 .navbar-inverse .pop-dialog .body {
110 box-shadow: 0px 1px 9px 1px #c2c2c2; }
111 .navbar-inverse .pop-dialog .close-icon {
113 text-decoration: none;
115 position: relative; }
116 .navbar-inverse .pop-dialog .footer {
117 border-top: 1px solid #e6e8e9;
118 background-color: #eff4f7;
119 margin: 15px 0px -10px 0px;
120 border-radius: 0px 0px 5px 5px;
122 text-align: center; }
123 .navbar-inverse .pop-dialog .footer a {
126 .navbar-inverse .pop-dialog .notifications {
128 margin: 10px -10px 0px -10px; }
129 .navbar-inverse .pop-dialog .notifications h3 {
135 margin-bottom: 15px; }
136 .navbar-inverse .pop-dialog .notifications .item {
138 padding: 10px 0px 8px 20px;
139 border-top: 1px solid #e7e8ea;
141 text-decoration: none;
144 transition: all .25s linear;
145 -moz-transition: all .25s linear;
146 -webkit-transition: all .25s linear;
147 -o-transition: all .25s linear; }
148 .navbar-inverse .pop-dialog .notifications .item:hover {
149 background: #f0f6ff; }
150 .navbar-inverse .pop-dialog .notifications .item > i {
155 .navbar-inverse .pop-dialog .notifications .item > i.icon-user {
157 .navbar-inverse .pop-dialog .notifications .item .time {
165 .navbar-inverse .pop-dialog .notifications .item .time i {
169 .navbar-inverse .pop-dialog .messages {
171 margin: 10px -10px 0px -10px; }
172 .navbar-inverse .pop-dialog .messages .item {
174 padding: 10px 20px 15px 20px;
176 border-bottom: 1px solid #e7e8ea;
178 text-decoration: none;
180 transition: all .25s linear;
181 -moz-transition: all .25s linear;
182 -webkit-transition: all .25s linear;
183 -o-transition: all .25s linear; }
184 .navbar-inverse .pop-dialog .messages .item.last {
185 border-bottom: 0px; }
186 .navbar-inverse .pop-dialog .messages .item:hover {
187 background: #f0f6ff; }
188 .navbar-inverse .pop-dialog .messages .item .display {
191 margin-right: 15px; }
192 .navbar-inverse .pop-dialog .messages .item .name {
196 .navbar-inverse .pop-dialog .messages .item .msg {
202 .navbar-inverse .pop-dialog .messages .item .time {
212 .navbar-inverse .pop-dialog .messages .item .time i {
216 .navbar-inverse .pop-dialog .messages .footer {
225 padding-top: 5.8em; }
226 .sidebar-nav .dashboard-menu {
232 /* sidebar submenus */ }
233 .sidebar-nav .dashboard-menu > li > a {
235 padding: 19px 14px 15px 14px;
238 border-bottom: 1px solid #dae1e8;
239 box-shadow: 0 2px 1px -1px #FFFFFF;
243 .sidebar-nav .dashboard-menu > li {
245 /* font awesome icon */ }
246 .sidebar-nav .dashboard-menu > li .icon-group {
248 .sidebar-nav .dashboard-menu > li i {
251 .sidebar-nav .dashboard-menu > li:hover i {
253 .sidebar-nav .dashboard-menu > li.active > a,
254 .sidebar-nav .dashboard-menu > li > a:hover {
256 text-decoration: none; }
257 .sidebar-nav .dashboard-menu > li.active a {
259 text-shadow: 1px 1px 1px #fff; }
260 .sidebar-nav .dashboard-menu > li.active i {
262 .sidebar-nav .dashboard-menu .pointer {
266 .sidebar-nav .dashboard-menu .pointer .arrow,
267 .sidebar-nav .dashboard-menu .pointer .arrow_border {
268 border-color: transparent #fff transparent transparent;
281 .sidebar-nav .dashboard-menu .pointer .arrow_border {
282 border-color: transparent #c0d2dd transparent transparent;
288 .sidebar-nav .dashboard-menu a span {
290 transition: color .1s linear;
291 -moz-transition: color .1s linear;
292 -webkit-transition: color .1s linear;
293 -o-transition: color .1s linear; }
294 .sidebar-nav .dashboard-menu a.ui-elements span {
296 .sidebar-nav .dashboard-menu a i {
302 transition: opacity .1s ease;
303 -moz-transition: opacity .1s ease;
304 -webkit-transition: opacity .1s ease;
305 -o-transition: opacity .1s ease; }
306 .sidebar-nav .dashboard-menu a i.icon-chevron-down {
314 .sidebar-nav .dashboard-menu > li.active .dropdown-toggle,
315 .sidebar-nav .dashboard-menu > li.open .dropdown-toggle {
318 .sidebar-nav .dashboard-menu ul.submenu {
319 list-style-type: none;
326 border-bottom: 1px solid #dae1e8;
327 box-shadow: 0 2px 1px -1px #FFFFFF;
328 padding-bottom: 10px; }
329 .sidebar-nav .dashboard-menu ul.submenu.active {
331 .sidebar-nav .dashboard-menu ul.submenu a {
335 text-decoration: none;
337 margin-bottom: 7px; }
338 .sidebar-nav .dashboard-menu ul.submenu a:hover {
339 text-decoration: underline; }
340 .sidebar-nav .dashboard-menu ul.submenu a.active {
349 font-style: italic; }
354 margin-bottom: 100px;
355 padding-bottom: 50px;
360 border-left: 1px solid #dae3e9;
361 border-bottom: 1px solid #dae3e9;
362 box-shadow: -3px 3px 3px -2px #f1f1f3;
363 border-radius: 0px 0px 0px 5px;
364 -webkit-transition: margin-left .3s ease;
365 -moz-transition: margin-left .3s ease;
366 -o-transition: margin-left .3s ease;
367 -ms-transition: margin-left .3s ease;
368 transition: margin-left .3s ease;
369 /* starts skins changer */
370 /* end skin changer*/ }
371 .content.wide-content {
374 .content .skins-nav {
376 -webkit-transition: right .3s;
377 -moz-transition: right .3s;
378 -ms-transition: right .3s;
379 -o-transition: right .3s;
380 transition: right .3s;
386 .content .skins-nav:hover {
388 .content .skins-nav a {
391 text-decoration: none;
394 -webkit-border-radius: 4px 0 0 4px;
395 -moz-border-radius: 4px 0 0 4px;
396 border-radius: 4px 0 0 4px;
398 -webkit-transition: all .5s;
399 -moz-transition: all .5s;
400 -ms-transition: all .5s;
401 -o-transition: all .5s;
402 transition: all .5s; }
403 .content .skins-nav a.first_nav {
404 background: rgba(95, 175, 228, 0.8); }
405 .content .skins-nav a.first_nav:hover {
406 background: #5fafe4; }
407 .content .skins-nav a.second_nav {
408 background: rgba(36, 43, 77, 0.8); }
409 .content .skins-nav a.second_nav:hover {
410 background: #242b4d; }
411 .content .skins-nav a .icon {
415 background: url("../../img/skin-nav-bullets.png") 0 0 no-repeat;
416 margin: 15px 15px 0 5px; }
417 .content .skins-nav a.selected .icon {
418 background-position: 0 -9px; }
419 .content .skins-nav a .text {
426 -webkit-transition: width .2s;
427 -moz-transition: width .2s;
428 -ms-transition: width .2s;
429 -o-transition: width .2s;
430 transition: width .2s; }
433 @media (max-width: 768px) {
441 .dashboard-menu .pointer {
448 background-color: #f7f7f7;
450 border-right: 1px solid #ccc;
452 box-shadow: 1px 1px 4px 1px #e9e9e9;
453 -webkit-transition: left .3s ease;
454 -moz-transition: left .3s ease;
455 -o-transition: left .3s ease;
456 -ms-transition: left .3s ease;
457 transition: left .3s ease; }
459 .sidebar-nav .dashboard-menu {
462 .sidebar-nav .dashboard-menu li a span {
463 visibility: visible; }
465 .sidebar-nav .dashboard-menu li:last-child a {
467 box-shadow: none; } }
468 @media (max-width: 822px) {
469 .navbar-inverse input.search {
471 @media (max-width: 767px) {