pyc-website

main website for pyc inc.

git clone https://9o.is/git/pyc-website.git

jarvis-widgets.less

(23301B)


      1 	/*
      2 
      3 	 Copyright 2013 - SmartAdmin : WebApp (Sunny)
      4 	
      5 	 * This is part of an item on wrapbootstrap.com
      6 	 * https://wrapbootstrap.com/user/myorange
      7 	 * ==================================
      8 	
      9 	 Table of Contents
     10 	 ---------------------------------------------------------------
     11 	
     12 	 - Main
     13 	 - Header
     14 	 - Content
     15 	 - Edit box
     16 	 - Timestamp
     17 	 - Helpers
     18 	 - Fullscreen
     19 	 - Styling
     20 	 - Custom styles
     21 	 - Icons - A few used examples
     22 	 - RTL support
     23 	 - Clearfix
     24 	 - Examples (minimalistic in grid)
     25 	 - Examples (lists)
     26 	
     27 	 */
     28 	
     29 	/*
     30 	 * MAIN
     31 	 */
     32 	
     33 	article.sortable-grid {
     34 		min-height:30px;
     35 	}
     36 	
     37 	.jarviswidget {
     38 		margin: 0 0 30px 0;
     39 		position: relative;
     40 		-moz-border-radius: 0px;
     41 		-khtml-border-radius: 0px;
     42 		-webkit-border-radius: 0px;
     43 		border-radius: 0px;
     44 		padding: 0;
     45 	}
     46 	
     47 	.widget-content-padding {
     48 		padding: 20px;
     49 	}
     50 	
     51 	.widget-content-padding .well {
     52 		margin-bottom: 0px;
     53 	}
     54 
     55 	
     56 	/*
     57 	 * HEADER
     58 	 */
     59 	
     60 	.jarviswidget > header {
     61 		height: 34px; /* make sure ".jarviswidget-loader" is also the same height or it will flicker during collapse */
     62 		padding: 0;
     63 		line-height: 40px;
     64 	}
     65 	.ui-sortable .jarviswidget-sortable > header {
     66 		cursor: move;
     67 		-moz-border-radius: 0px;
     68 		-khtml-border-radius: 0px;
     69 		-webkit-border-radius: 0px;
     70 		border-radius: 0px;
     71 		line-height:normal;
     72 		box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
     73 		-moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
     74 		-webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
     75 	}
     76 	.jarviswidget > header > .widget-icon {
     77 		display:block;
     78 		width: 30px;
     79 		height: 32px;
     80 		position:relative;
     81 		float:left;
     82 		font-size: 111%;
     83 		line-height:32px;
     84 		text-align:center;
     85 		margin-right:-10px;
     86 	}
     87 	
     88 	.ui-sortable .jarviswidget-sortable.jarviswidget-collapsed > header {
     89 		-moz-border-radius: 0px;
     90 		-khtml-border-radius: 0px;
     91 		-webkit-border-radius: 0px;
     92 		border-radius: 0px;
     93 	}
     94 	
     95 	.jarviswidget > header h2 {
     96 		height: 100%;
     97 		width: auto;
     98 		display:inline-block;
     99 		font-size: 14px;
    100 		position: relative;
    101 		margin: 0;
    102 		line-height: 34px;
    103 		font-weight:normal;
    104 		letter-spacing: 0px;
    105 	}
    106 	
    107 	.jarviswidget > header > h2 {
    108 		margin-left:10px;
    109 		float:left;
    110 	}
    111 	
    112 	.jarviswidget > header >:first-child.widget-icon {
    113 		margin-left:0;
    114 	}
    115 	
    116 	
    117 	.jarviswidget > header .jarviswidget-icon {
    118 		width: 16px;
    119 		height: 16px;
    120 		float: left;
    121 		margin: 12px 10px 0 0;
    122 		display: block;
    123 		zoom: 1;
    124 		z-index: 4000
    125 	}
    126 	.jarviswidget-ctrls {
    127 		width: auto;
    128 		float: right;
    129 		padding: 0;
    130 		margin: 0;
    131 	}
    132 	.jarviswidget-ctrls .button-icon {
    133 		min-width: 30px;
    134 		height: 32px;
    135 		float: left;
    136 		position: relative;
    137 		font-family: Arial, Helvetica, sans-serif;
    138 		border-left:1px solid rgba(0,0,0,0.09);
    139 	}
    140 	.jarviswidget-ctrls .button-icon:hover {
    141 		background-color:rgba(0,0,0,0.05);
    142 	}
    143 	
    144 	.jarviswidget-loader {
    145 		width: 32px;
    146 		height: 32px;
    147 		margin: 0;
    148 		float: right;
    149 		background-repeat: no-repeat;
    150 		background-position: center center;
    151 		display: none;
    152 		text-align: center;
    153 		line-height: 32px;
    154 		font-size: 111%;
    155 	}
    156 	
    157 	/*
    158 	 * CONTENT
    159 	 */
    160 	
    161 	.jarviswidget > div {
    162 		float: left;
    163 		width: 100%;
    164 		position: relative;
    165 		font-size: 13px;
    166 		-moz-border-radius: 0px;
    167 		-khtml-border-radius: 0px;
    168 		-webkit-border-radius: 0px;
    169 		border-radius: 0px;
    170 		margin: 0;
    171 		border-width: 1px 1px 2px 1px;
    172 		border-style: solid;
    173 		border-top: none;
    174 		border-right-color: #CCC !important;
    175 		border-bottom-color: #CCC !important;
    176 		border-left-color: #CCC !important;
    177 		padding:13px 13px 0px;
    178 	}
    179 	
    180 	.jarviswidget .widget-body {
    181 		min-height:100px;
    182 		position:relative;
    183 		padding-bottom:13px;
    184 	}
    185 	
    186 	.jarviswidget .widget-body.widget-hide-overflow {
    187 		overflow:hidden;
    188 	}
    189 	
    190 	.widget-toolbar.no-border {
    191 		border-left:none;
    192 	}
    193 	
    194 	.widget-body.no-padding {
    195 		margin:-13px -13px 0px;
    196 	}
    197 	
    198 	.jarviswidget.well.transparent .widget-body.no-padding {
    199 		margin:0px !important;
    200 	}
    201 	
    202 	.widget-body > table {
    203 		margin-bottom:0;
    204 	}
    205 	
    206 	.widget-body.no-padding .alert {
    207 		margin: 0 0 10px;
    208 		padding: 10px;
    209 		box-shadow:none !important;
    210 		-webkit-box-shadow:none !important;
    211 		-moz-box-shadow:none !important;
    212 		border-width:0px 0px 1px !important;
    213 		border-radius:0px !important;
    214 		-webkit-border-radius: 0px !important;
    215 		-moz-border-radius: 0px !important; 
    216 	}
    217 	
    218 	.widget-body.no-padding .cke_chrome, .no-padding .md-editor {
    219 		border:none;
    220 	}
    221 	
    222 	.widget-toolbar > .smart-form {
    223 		margin-top:2px;
    224 	}
    225 	
    226 	.widget-toolbar > .smart-form .toggle:last-child {
    227 		font-size:12px;
    228 		line-height:29px;
    229 	}
    230 	
    231 	.widget-toolbar > .smart-form .radio input + i, 
    232 	.widget-toolbar > .smart-form .checkbox input + i, 
    233 	.widget-toolbar > .smart-form .toggle input + i {
    234 		border-width:1px;
    235 		border-color: #C7C7C7 !important;
    236 		margin-top:1px;
    237 		
    238 		box-shadow: 0 1px 1px #FFF,0 1px 1px #858585 inset;
    239 		-webkit-box-shadow: 0 1px 1px #FFF,0 1px 1px #858585 inset;
    240 		-moz-box-shadow: 0 1px 1px #FFF,0 1px 1px #858585 inset;
    241 	}
    242 
    243 	/*
    244 	 * WELL WIDGET
    245 	 */
    246 	
    247 	.jarviswidget.well {
    248 		margin: 0 0 30px 0;
    249 	}
    250 	
    251 	.jarviswidget.well > div{
    252 		border:none !important;
    253 		box-shadow:none !important;
    254 		-webkit-box-shadow:none !important;
    255 		-moz-box-shadow:none !important;
    256 	}
    257 	
    258 	.jarviswidget.well header {
    259 		display:none;
    260 	}
    261 
    262 	/*
    263 	 * WIDGET FOOTER
    264 	 */
    265 	
    266 	.widget-footer {
    267 		display: block;
    268 		min-height: 32px;
    269 		vertical-align:middle;
    270 		position: relative;
    271 		background-color: #F8F7F7;
    272 		padding: 5px;
    273 		border-top: 1px solid #E4E4E4;
    274 		text-align:right;
    275 		margin: 0px -13px -13px;
    276 	}
    277 	
    278 	.no-padding .widget-footer {
    279 		margin:0;
    280 	}
    281 	
    282 	.widget-footer.smart-form > label {
    283 		margin-top:4px;
    284 		display:block;
    285 	}
    286 	
    287 	/*
    288 	 * EDIT BOX
    289 	 */
    290 	
    291 	.jarviswidget-editbox {
    292 		display: none;
    293 		padding: 10px;
    294 	}
    295 	/*.jarviswidget-editbox div {
    296 		width: 100%;
    297 		float: left;
    298 		margin-bottom: 0;
    299 	}
    300 	.jarviswidget-editbox label {
    301 		width: 80px;
    302 		height: 26px;
    303 		float: left;
    304 		line-height: 26px;
    305 		font-weight: bold;
    306 		margin-bottom:0;
    307 	}
    308 	.jarviswidget-editbox input {
    309 		width: 200px;
    310 		height: 24px;
    311 		padding: 0 5px;
    312 		border: 1px solid #666;
    313 	}
    314 	.jarviswidget-editbox span {
    315 		height: 26px;
    316 		width: 26px;
    317 		float: left;
    318 		margin: 0 5px 0 0;
    319 		cursor: pointer;
    320 	}*/
    321 	
    322 	/*
    323 	 * TIMESTAMP
    324 	 */
    325 	
    326 	.jarviswidget-timestamp {
    327 		font-size: 12px;
    328 		color: #868686;
    329 		font-style:italic;
    330 		margin: 10px 0 0;
    331 	}
    332 	
    333 	/*
    334 	 * HELPERS
    335 	 */
    336 	
    337 	.jarviswidget-placeholder {
    338 		-moz-border-radius: 0px;
    339 		-khtml-border-radius: 0px;
    340 		-webkit-border-radius: 0px;
    341 		border-radius: 0px;
    342 		margin-bottom: 28px; /* adjusted from 28px */
    343 		padding: 0;
    344 		-webkit-box-sizing: border-box;
    345 		-khtml-box-sizing: border-box;
    346 		-moz-box-sizing: border-box;
    347 		-ms-box-sizing: border-box;
    348 		box-sizing: border-box;
    349 	}
    350 	
    351 	/*
    352 	 * FULL SCREEN
    353 	 */
    354 	
    355 	body.nooverflow {
    356 		overflow: hidden;
    357 		position: fixed;
    358 		width:100%;
    359 	}
    360 	#jarviswidget-fullscreen-mode {
    361 		width: 100%;
    362 		height: 100%;
    363 		position: fixed;
    364 		top: 0;
    365 		left: 0;
    366 		z-index: 99999;
    367 	}
    368 	#jarviswidget-fullscreen-mode .jarviswidget {
    369 		margin: 0;
    370 		-moz-border-radius: 0;
    371 		-khtml-border-radius: 0;
    372 		-webkit-border-radius: 0;
    373 		border-radius: 0;
    374 	}
    375 	#jarviswidget-fullscreen-mode .jarviswidget > div {
    376 		overflow-y: scroll;
    377 		-moz-border-radius: 0;
    378 		-khtml-border-radius: 0;
    379 		-webkit-border-radius: 0;
    380 		border-radius: 0;
    381 	}
    382 	#jarviswidget-fullscreen-mode > div > header {
    383 		cursor: default;
    384 	}
    385 
    386 	/*
    387 	 * WIDGET BODY TOOLBAR
    388 	 */
    389 	
    390 	.widget-body-toolbar, .smart-form.widget-body-toolbar {
    391 		display:block;
    392 		padding:8px 10px;
    393 		margin:-13px -13px 13px;
    394 		min-height:42px;
    395 		border-bottom:1px solid #ccc;
    396 		background: #fafafa;
    397 	}
    398 	
    399 	.no-padding.widget-body-toolbar, .no-padding .widget-body-toolbar, .no-padding .smart-form.widget-body-toolbar {
    400 		display:block;
    401 		margin:0px;
    402 	}
    403 	
    404 	.widget-body-toolbar.smart-form .inline-group,
    405 	.smart-form .widget-body-toolbar .inline-group {
    406 		float: left;
    407 		margin-top: 4px;
    408 	}
    409 	
    410 	.widget-body-toolbar .btn {
    411 		vertical-align:middle;
    412 	}
    413 	
    414 	.widget-body-toolbar .btn-xs {
    415 		margin-top:5px;
    416 	}
    417 	
    418 	/*
    419 	 * WIDGET BODY AJAX LOAD
    420 	 */
    421 	
    422 	.widget-body-ajax-loading::before {
    423 		content: url('@{base-url}/ajax-loader.gif');
    424 		padding-top:18%;
    425 		text-align:center;
    426 		font-weight:bold;
    427 		font-size:16px;
    428 		color:#fff;
    429 		display: block;
    430 		background: rgba(255, 255, 255, 0.4);
    431 		height: 100%;
    432 		z-index: 1;
    433 		width: 100%;
    434 		position: absolute;
    435 	}
    436 	.widget-body-ajax-loading:hover {
    437 		cursor:wait !important;
    438 	}
    439 	
    440 	/*
    441 	 * STYLING
    442 	 */
    443 	
    444 
    445 	.jarviswidget > header {
    446 		color: #333;
    447 
    448 		border: 1px solid #C2C2C2;
    449 		background: #fafafa;
    450 	}
    451 
    452 	.jarviswidget > div {
    453 		background-color: #fff !important;
    454 	}
    455 	.jarviswidget-editbox {
    456 		border-bottom: 1px solid #B1B1B1;
    457 		background-color: #fff;
    458 		margin: -13px -13px 13px;
    459 	}
    460 	.no-padding .jarviswidget-editbox {
    461 		margin: 0 0 10px;
    462 	}
    463 	
    464 	.jarviswidget-placeholder {
    465 		background-color: #FFC;
    466 		border: 1px dashed #A7A7A7;
    467 	}
    468 	
    469 	/*
    470 	 * CUSTOM STYLES
    471 	 */
    472 	
    473 	/* remove colors */
    474 	.jarviswidget-remove-colors {
    475 		color:#333 !important;
    476 		padding:0 !important;
    477 		background:none !important;
    478 	}
    479 
    480 	/* magenta theme */
    481 	.jarviswidget-color-magenta > header {
    482 		background: #6E3671; 
    483 		color: #FFF;
    484 	}
    485 	
    486 	.jarviswidget-color-magenta > header > .jarviswidget-ctrls a, .jarviswidget-color-magenta .nav-tabs li:not(.active) a  {
    487 		color:#fff !important;
    488 	}
    489 	
    490 	.jarviswidget-color-magenta .nav-tabs li a:hover {
    491 		color:#333 !important;
    492 	}
    493 	
    494 	.jarviswidget-color-magenta > header {
    495 		border-color: #6E3671 !important;
    496 	}
    497 
    498 	/* pink theme */
    499 	.jarviswidget-color-pink > header {
    500 		background: #AC5287; 
    501 		color: #FFF;
    502 	}
    503 	
    504 	.jarviswidget-color-pink > header > .jarviswidget-ctrls a, .jarviswidget-color-pink .nav-tabs li:not(.active) a  {
    505 		color:#fff !important;
    506 	}
    507 	
    508 	.jarviswidget-color-pink .nav-tabs li a:hover {
    509 		color:#333 !important;
    510 	}
    511 	
    512 	.jarviswidget-color-pink > header {
    513 		border-color: #AC5287 !important;
    514 	}
    515 	
    516 	/* pinkDark theme */
    517 	.jarviswidget-color-pinkDark > header {
    518 		background: #A8829F; 
    519 		color: #FFF;
    520 	}
    521 	
    522 	.jarviswidget-color-pinkDark > header > .jarviswidget-ctrls a, .jarviswidget-color-pinkDark .nav-tabs li:not(.active) a  {
    523 		color:#fff !important;
    524 	}
    525 	
    526 	.jarviswidget-color-pinkDark .nav-tabs li a:hover {
    527 		color:#333 !important;
    528 	}
    529 	
    530 	.jarviswidget-color-pinkDark > header {
    531 		border-color: #A8829F !important;
    532 	}
    533 	
    534 	/* yellow theme */
    535 	.jarviswidget-color-yellow > header {
    536 		background: #B09B5B; 
    537 		color: #FFF;
    538 	}
    539 	
    540 	.jarviswidget-color-yellow > header > .jarviswidget-ctrls a, .jarviswidget-color-yellow .nav-tabs li:not(.active) a  {
    541 		color:#fff !important;
    542 	}
    543 	
    544 	.jarviswidget-color-yellow .nav-tabs li a:hover {
    545 		color:#333 !important;
    546 	}
    547 	
    548 	.jarviswidget-color-yellow > header {
    549 		border-color: #B09B5B !important;
    550 	}
    551 	
    552 	/* orange theme */
    553 	.jarviswidget-color-orange > header {
    554 		background: #C79121; 
    555 		color: #FFF;
    556 	}
    557 	
    558 	.jarviswidget-color-orange > header > .jarviswidget-ctrls a, .jarviswidget-color-orange .nav-tabs li:not(.active) a  {
    559 		color:#fff !important;
    560 	}
    561 	
    562 	.jarviswidget-color-orange .nav-tabs li a:hover {
    563 		color:#333 !important;
    564 	}
    565 	
    566 	.jarviswidget-color-orange > header {
    567 		border-color: #C79121 !important;
    568 	}
    569 	
    570 	/* orangeDark theme */
    571 	.jarviswidget-color-orangeDark > header {
    572 		background: #A57225; 
    573 		color: #FFF;
    574 	}
    575 	
    576 	.jarviswidget-color-orangeDark > header > .jarviswidget-ctrls a, 
    577 	.jarviswidget-color-orangeDark .nav-tabs li:not(.active) a  {
    578 		color:#fff !important;
    579 	}
    580 	
    581 	.jarviswidget-color-orangeDark .nav-tabs li a:hover {
    582 		color:#333 !important;
    583 	}
    584 	
    585 	.jarviswidget-color-orangeDark > header {
    586 		border-color: #A57225 !important;
    587 	}
    588 	
    589 	/* darken theme */
    590 	.jarviswidget-color-darken > header {
    591 		background: #404040; 
    592 		color: #FFF;
    593 	}
    594 	
    595 	.jarviswidget-color-darken > header > .jarviswidget-ctrls a, 
    596 	.jarviswidget-color-darken .nav-tabs li:not(.active) a  {
    597 		color:#fff !important;
    598 	}
    599 	
    600 	.jarviswidget-color-darken .nav-tabs li a:hover {
    601 		color:#333 !important;
    602 	}
    603 	
    604 	.jarviswidget-color-darken > header {
    605 		border-color: #404040 !important;
    606 	}
    607 
    608 	/* purple theme */
    609 	.jarviswidget-color-purple > header {
    610 		background: #65596B; 
    611 		color: #FFF;
    612 	}
    613 	
    614 	.jarviswidget-color-purple > header > .jarviswidget-ctrls a, 
    615 	.jarviswidget-color-purple .nav-tabs li:not(.active) a  {
    616 		color:#fff !important;
    617 	}
    618 	
    619 	.jarviswidget-color-purple .nav-tabs li a:hover {
    620 		color:#333 !important;
    621 	}
    622 	
    623 	.jarviswidget-color-purple > header {
    624 		border-color: #65596B !important;
    625 	}
    626 	
    627 	/* teal theme */
    628 	.jarviswidget-color-teal > header {
    629 		background: #568A89; 
    630 		color: #FFF;
    631 	}
    632 	
    633 	.jarviswidget-color-teal > header > .jarviswidget-ctrls a, 
    634 	.jarviswidget-color-teal .nav-tabs li:not(.active) a  {
    635 		color:#fff !important;
    636 	}
    637 	
    638 	.jarviswidget-color-teal .nav-tabs li a:hover {
    639 		color:#333 !important;
    640 	}
    641 	
    642 	.jarviswidget-color-teal > header {
    643 		border-color: #568A89 !important;
    644 	}
    645 	
    646 	/* teal theme */
    647 	.jarviswidget-color-blueDark > header {
    648 		background: #4C4F53; 
    649 		color: #FFF;
    650 	}
    651 	
    652 	.jarviswidget-color-blueDark > header > .jarviswidget-ctrls a, 
    653 	.jarviswidget-color-blueDark .nav-tabs li:not(.active) a  {
    654 		color:#fff !important;
    655 	}
    656 	
    657 	.jarviswidget-color-blueDark .nav-tabs li a:hover {
    658 		color:#333 !important;
    659 	}
    660 	
    661 	.jarviswidget-color-blueDark > header {
    662 		border-color: #4C4F53 !important;
    663 	}
    664 	
    665 	/* blue theme */
    666 	.jarviswidget-color-blue > header {
    667 		background: #60747C; 
    668 		color: #FFF;
    669 	}
    670 	
    671 	.jarviswidget-color-blue > header > .jarviswidget-ctrls a, 
    672 	.jarviswidget-color-blue .nav-tabs li:not(.active) a  {
    673 		color:#fff !important;
    674 	}
    675 	
    676 	.jarviswidget-color-blue .nav-tabs li a:hover {
    677 		color:#333 !important;
    678 	}
    679 	
    680 	.jarviswidget-color-blue > header {
    681 		border-color: #60747C !important;
    682 	}
    683 	
    684 	/* blueLight theme */
    685 	.jarviswidget-color-blueLight > header {
    686 		background: #CCDADF; 
    687 		color: #2b363c;
    688 	}
    689 	
    690 	.jarviswidget-color-blueLight > header > .jarviswidget-ctrls a, 
    691 	.jarviswidget-color-blueLight .nav-tabs li:not(.active) a  {
    692 		color:#2b363c !important;
    693 	}
    694 	
    695 	.jarviswidget-color-blueLight .nav-tabs li a:hover {
    696 		color:#2b363c !important;
    697 	}
    698 	
    699 	.jarviswidget-color-blueLight > header {
    700 		border-color: #92A2A8 !important;
    701 	}
    702 	
    703 	/* red theme */
    704 	.jarviswidget-color-red > header {
    705 		background: #931313; 
    706 		color: #FFF;
    707 	}
    708 	
    709 	.jarviswidget-color-red > header > .jarviswidget-ctrls a, 
    710 	.jarviswidget-color-red .nav-tabs li:not(.active) a  {
    711 		color:#fff !important;
    712 	}
    713 	
    714 	.jarviswidget-color-red .nav-tabs li a:hover {
    715 		color:#333 !important;
    716 	}
    717 	
    718 	.jarviswidget-color-red > header {
    719 		border-color: #931313 !important;
    720 	}
    721 	
    722 	/* redLight theme */
    723 	.jarviswidget-color-redLight > header {
    724 		background: #A65858; 
    725 		color: #FFF;
    726 	}
    727 	
    728 	.jarviswidget-color-redLight > header > .jarviswidget-ctrls a, 
    729 	.jarviswidget-color-redLight .nav-tabs li:not(.active) a  {
    730 		color:#fff !important;
    731 	}
    732 	
    733 	.jarviswidget-color-redLight .nav-tabs li a:hover {
    734 		color:#333 !important;
    735 	}
    736 	
    737 	.jarviswidget-color-redLight > header {
    738 		border-color: #A65858 !important;
    739 	}
    740 
    741 	/* white theme */
    742 	.jarviswidget-color-white > header {
    743 		background: #fff; 
    744 		color: #838383;
    745 	}
    746 	
    747 	.jarviswidget-color-white > header > .jarviswidget-ctrls a, 
    748 	.jarviswidget-color-white .nav-tabs li:not(.active) a  {
    749 		color:#838383 !important;
    750 	}
    751 	
    752 	.jarviswidget-color-white .nav-tabs li a:hover {
    753 		color:#838383 !important;
    754 	}
    755 	
    756 	.jarviswidget-color-white > header {
    757 		border-color: #C8C8C8 !important;
    758 	}
    759 
    760 	/* greenDark theme */
    761 	.jarviswidget-color-greenDark > header {
    762 		background: #496949; 
    763 		color: #FFF;
    764 	}
    765 	
    766 	.jarviswidget-color-greenDark > header > .jarviswidget-ctrls a, 
    767 	.jarviswidget-color-greenDark .nav-tabs li:not(.active) a  {
    768 		color:#fff !important;
    769 	}
    770 	
    771 	.jarviswidget-color-greenDark .nav-tabs li a:hover {
    772 		color:#333 !important;
    773 	}
    774 	
    775 	.jarviswidget-color-greenDark > header {
    776 		border-color: #638167 !important;
    777 	}
    778 	
    779 	/* green theme */
    780 	.jarviswidget-color-green > header {
    781 		background: #356E35; 
    782 		color: #FFF;
    783 	}
    784 	
    785 	.jarviswidget-color-green > header > .jarviswidget-ctrls a, .jarviswidget-color-green .nav-tabs li:not(.active) a  {
    786 		color:#fff !important;
    787 	}
    788 	
    789 	.jarviswidget-color-green .nav-tabs li a:hover {
    790 		color:#333 !important;
    791 	}
    792 	
    793 	.jarviswidget-color-green > header {
    794 		border-color: #638167 !important;
    795 	}
    796 	
    797 	/* greenLight theme */
    798 	.jarviswidget-color-greenLight > header {
    799 		background: #71843F; 
    800 		color: #FFF;
    801 	}
    802 	
    803 	.jarviswidget-color-greenLight > header > .jarviswidget-ctrls a, .jarviswidget-color-greenLight .nav-tabs li:not(.active) a  {
    804 		color:#fff !important;
    805 	}
    806 	
    807 	.jarviswidget-color-greenLight .nav-tabs li a:hover {
    808 		color:#333 !important;
    809 	}
    810 	
    811 	.jarviswidget-color-greenLight > header {
    812 		border-color: #638167 !important;
    813 	}
    814 	
    815 	/* 
    816 	 * WIDGET COLOR DROPDOWN
    817 	 * 
    818 	 */
    819 	
    820 	.color-select {
    821 		list-style:none;
    822 		margin:0;
    823 		padding:4px;
    824 		min-width: 166px;
    825 		max-width: 156px;
    826 		right: -3px;
    827 	}
    828 	
    829 	.color-select li {
    830 		display:block;
    831 		margin:2px;
    832 		float:left;
    833 	}
    834 	
    835 	.color-select li span, .color-box {
    836 		display:block;
    837 		width:22px;
    838 		height:22px;
    839 		padding:0;
    840 		background:#333;
    841 		box-sizing:border-box;
    842 		-moz-box-sizing:border-box;
    843 		-webkit-box-sizing:border-box;
    844 		border:1px solid rgba(0,0,0,.1);
    845 		cursor:pointer;
    846 	}
    847 	.color-select li span:hover {
    848 		border:3px solid rgba(0,0,0,.2);
    849 	}
    850 
    851 	.color-box {
    852 		position:relative;
    853 		vertical-align:middle;
    854 		border:1px solid rgba(255,255,255,.3) !important;
    855 		outline:1px solid rgba(0,0,0,.1);
    856 		background: rgba(255,255,255,.3) !important
    857 
    858 	}
    859 	
    860 	.color-box:hover, .open .color-box {
    861 		outline:1px solid rgba(0,0,0,.1) !important;
    862 	}.color-box:hover {
    863 		-webkit-transform: scale(1.07);
    864 		-moz-transform: scale(1.07);
    865 	}
    866 	
    867 	.color-box:active {
    868 		top:1px;
    869 		left:1px;
    870 	}	
    871 	
    872 	.widget-toolbar > .color-box {
    873 		margin-top: 7px;
    874 		width: 18px;
    875 		height: 18px;
    876 		outline: 1px solid rgba(0, 0, 0, 0.2);
    877 	}
    878 	.widget-toolbar > .color-box:hover,  .widget-toolbar > .color-box:active, .widget-toolbar > .color-box:focus {
    879 		outline: 1px solid rgba(0, 0, 0, 0.25) !important;
    880 	}
    881 	
    882 	.widget-toolbar .dropdown-menu.color-select {
    883 		right:-1px;
    884 	}
    885 
    886 	
    887 	/*
    888 	 * ICONS
    889 	 */
    890 	
    891 	.jarviswidget-ctrls a {
    892 		text-decoration:none;
    893 		font-size:14px;
    894 		text-align:center;
    895 		display:inline-block;
    896 		line-height:32px;
    897 		padding:0;
    898 		margin:0;
    899 		color:#333;
    900 	}
    901 
    902 	
    903 	/*
    904 	 * RTL - SUPPORT
    905 	 */
    906 	
    907 	.rtl .jarviswidget > header {
    908 		padding: 0 7px 0 0;
    909 	}
    910 	.rtl .jarviswidget > header h2 {
    911 		float: right;
    912 		text-align: right
    913 	}
    914 	.rtl .jarviswidget > header .jarviswidget-icon {
    915 		float: right;
    916 		margin: 12px 0 0 7px;
    917 	}
    918 	.rtl .jarviswidget-ctrls {
    919 		float: left;
    920 		padding: 10px 0 0 3px;
    921 		margin: 0;
    922 	}
    923 	.rtl .jarviswidget-ctrls .button-icon {
    924 		margin: 0 0 5px 5px;
    925 	}
    926 	.rtl .jarviswidget-loader {
    927 		float: left;
    928 	}
    929 	
    930 	/*
    931 	 * CLEARFIX
    932 	 */
    933 	
    934 	.jarviswidget:before, .jarviswidget:after, .jarviswidget > div:before, .jarviswidget > div:after, .inner-spacer:before, .inner-spacer:after, .jarviswidget-editbox:before, .jarviswidget-editbox:after, .clearfix:before, .clearfix:after {
    935 		content: "\0020";
    936 		display: block;
    937 		height: 0;
    938 		overflow: hidden;
    939 		font-size: 0;
    940 		line-height: 0;
    941 		visibility: hidden;
    942 	}
    943 	.jarviswidget:after, .jarviswidget > div:after, .inner-spacer:after, .jarviswidget-editbox:after, .clearfix:after {
    944 		clear: both;
    945 	}
    946 	.jarviswidget, .jarviswidget > div, .inner-spacer:after, .jarviswidget-editbox, .clearfix {
    947 		zoom: 1;/*IE*/
    948 	}
    949 	
    950 	/*
    951 	 * WIDGET TOOLBARS
    952 	 */
    953 	
    954 	.widget-toolbar {
    955 		display:inline-block;
    956 		float:right;
    957 		width: auto;
    958 		height: 32px;
    959 		line-height:32px;
    960 		position: relative;
    961 		border-left: 1px solid rgba(0, 0, 0, 0.09);
    962 		cursor:pointer;
    963 		padding: 0 8px;
    964 		text-align:center;
    965 	}
    966 	
    967 	.widget-toolbar >:first-child {
    968 		text-align:left;
    969 	} 
    970 
    971 	
    972 	/*
    973 	 * WIDGET TOOLBAR COMPONENTS
    974 	 */
    975 	
    976 		/*
    977 		 * TABS
    978 		 */
    979 
    980 		.jarviswidget header .nav-tabs {
    981 			border-bottom-color:transparent;
    982 		}
    983 		
    984 		.jarviswidget header .nav-tabs>li>a {
    985 			border-radius:0px;
    986 			border:none;
    987 			padding: 7px 15px 6px;
    988 		}
    989 		
    990 		.jarviswidget header .nav-tabs>li.active>a, .jarviswidget header .nav-tabs>li.active>a:hover, .jarviswidget header .nav-tabs>li.active>a:focus {
    991 			color: #555;
    992 			background-color: #FFF ;
    993 			border: 1px solid #C2C2C2;
    994 			border-bottom-color: transparent;
    995 			border-top:none;
    996 			cursor: default;
    997 		}
    998 		
    999 		.jarviswidget header:first-child .nav-tabs {
   1000 			float:left;
   1001 		}
   1002 		
   1003 		.jarviswidget header:first-child .nav-tabs li {
   1004 			padding-left:0;
   1005 		}
   1006 		
   1007 		
   1008 		.jarviswidget header:first-child .nav-tabs li a {
   1009 			color:#333;
   1010 		}
   1011 		
   1012 		.jarviswidget header:first-child .nav-tabs.pull-right li:last-child a {
   1013 			margin-right:0px !important;
   1014 			border-right:none !important;
   1015 		}
   1016 		
   1017 		/*
   1018 		 * PILLS
   1019 		 */
   1020 		
   1021 		.jarviswidget header .nav-pills {
   1022 			margin:3px;
   1023 		}
   1024 		.jarviswidget header .nav-pills > li > a {
   1025 			padding: 3px 5px 4px;
   1026 		}
   1027 		
   1028 		/*
   1029 		 * BTN GROUPS
   1030 		 */
   1031 		.widget-toolbar .btn-group {
   1032 			margin-top:-3px;
   1033 		}
   1034 		
   1035 		/*
   1036 		 * BTNs
   1037 		 */
   1038 		
   1039 		.widget-toolbar > .btn {
   1040 			margin-top:-3px;
   1041 			font-size:12px !important;
   1042 			padding: 1px 8px !important;
   1043 		}
   1044 		
   1045 		/*
   1046 		 * INPUT
   1047 		 */
   1048 		
   1049 		.widget-toolbar .smart-form label.checkbox, .widget-toolbar .smart-form label.radio {
   1050 			line-height:29px;
   1051 		}
   1052 		
   1053 		/*
   1054 		 * LABELS
   1055 		 */
   1056 		.widget-toolbar > .label {
   1057 			vertical-align: middle;
   1058 			margin-top: -3px;
   1059 			display: inline-block;
   1060 			text-align:center;
   1061 			font-size:12px;
   1062 			padding: 4px 7px;
   1063 		}
   1064 		
   1065 		/*
   1066 		 * BADGE
   1067 		 */
   1068 		
   1069 		.widget-toolbar > .badge {
   1070 			padding: 5px 5px;
   1071 			font-size: 14px;
   1072 			border-radius: 50%;
   1073 			font-weight:normal;
   1074 			min-width:24px;
   1075 			text-align: center !important;
   1076 		}
   1077 		
   1078 		/*
   1079 		 * PROGRESS BARS
   1080 		 */
   1081 		
   1082 		.widget-toolbar .progress {
   1083 			width:130px; 
   1084 			margin: 7px 0 0 0;
   1085 			height: 18px !important;
   1086 			font-size:12px;
   1087 			box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px #D1D1D1 inset;
   1088 			-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0), 0 0 0 1px #D1D1D1 inset;
   1089 			-moz-box-shadow: 0 1px 0 transparent, 0 0 0 1px #D1D1D1 inset
   1090 		}
   1091 		
   1092 		.widget-toolbar .progress-bar {
   1093 			font-size:12px;
   1094 		}
   1095 		
   1096 		/*
   1097 		 * PAGINATION
   1098 		 */
   1099 		
   1100 		.widget-toolbar .pagination {
   1101 			margin:4px 0;
   1102 		}
   1103 		
   1104 		.widget-toolbar .pagination > li > a {
   1105 			padding: 2px 7px;
   1106 		}
   1107 		
   1108 		/*
   1109 		 * TEXT INPUT
   1110 		 */
   1111 		
   1112 		.widget-toolbar .widget-text-input {
   1113 			max-width:220px;
   1114 		}
   1115 		
   1116 		.widget-toolbar input[type='text'] {
   1117 			height:28px !important;
   1118 			margin-top:2px;
   1119 		}
   1120 		
   1121 		.widget-toolbar.smart-form .icon-append, .widget-toolbar.smart-form .icon-prepend,
   1122 		.widget-toolbar .smart-form .icon-append, .widget-toolbar .smart-form .icon-prepend  {
   1123 			top:3px !important;
   1124 		}