/* -------------------------------------- SHARED STYLES ---------------------------------------*/ body { width: 100%; margin: 0; padding: 0; font-family: 'Open Sans',Helvetica, Arial, sans-serif; color: #666666; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; font-size-adjust: 100%; font-weight: 400; font-size: 13px; line-height: 1.475; background-color: #FFF; } .form-group1 { width:31.5%; float:left; margin-right:16px; margin-bottom: 15px } .form-group2 { width:48%; float:left; margin-right:20px; margin-bottom: 15px } .form-group3 { width:47%; float:left; margin-right:20px; margin-bottom: 15px } .form-group4 { width:100%; float:left; margin-right:20px; margin-bottom: 15px } #main { width: 100%; position: relative; } #content { margin-left: 240px; display: block; min-height: 100%; } .mNewBOx{ padding:10px; width:100%; background:#fafafa; border:#f1f1f1; min-height:150px; } #content:after { content: ""; position: fixed; width: 100%; top: 0; bottom: 0; display: block; z-index: -2; background-color: #f4f4f4; -webkit-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.33) inset; box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.33) inset; } /* Bootstraps ".container" class has been changed to a fluid full * width container. It's also used as the primary wrapper for * our page content. To maintain typical bootstrap usability * we apply the wrapper styles only to the direct child of #content. * This insures it's only used once and can again be used elsewhere */ .container { width: 100% } #content > .container { max-width: 1665px !important; padding: 35px 35px 50px 45px; } /* --------------------------------------- CLASS HELPERS ----------------------------------------*/ .padding-none { padding: 0 !important } .padding { padding: 10px !important } .padding-sm { padding: 5px !important } .padding-lg { padding: 22px !important } .padding-top-none { padding-top: 0 !important } .padding-top { padding-top: 14px !important } .padding-top-sm { padding-top: 5px !important } .padding-top-lg { padding-top: 22px !important } .padding-right-none { padding-right: 0 !important } .padding-right { padding-right: 14px !important } .padding-right-sm { padding-right: 5px !important } .padding-right-lg { padding-right: 22px !important } .padding-bottom-none { padding-bottom: 0 !important } .padding-bottom { padding-bottom: 14px !important } .padding-bottom-sm { padding-bottom: 5px !important } .padding-bottom-lg { padding-bottom: 22px !important } .padding-left-none { padding-left: 0 !important } .padding-left { padding-left: 14px !important } .padding-left-sm { padding-left: 5px !important } .padding-left-lg { padding-left: 22px !important } .margin-none { margin: 0 !important } .margin { margin: 14px !important } .margin-sm { margin: 5px !important } .margin-lg { margin: 22px !important } .margin-top-none { margin-top: 0 !important } .margin-top { margin-top: 14px !important } .margin-top-lg { margin-top: 22px !important } .margin-top-sm { margin-top: 5px !important } .margin-right-none { margin-right: 0 !important } .margin-right { margin-right: 14px !important } .margin-right-lg { margin-right: 22px !important } .margin-right-sm { margin-right: 5px !important } .margin-bottom-none { margin-bottom: 0 !important } .margin-bottom { margin-bottom: 14px !important } .margin-bottom-lg { margin-bottom: 22px !important } .margin-bottom-sm { margin-bottom: 5px !important } .margin-left-none { margin-left: 0 !important } .margin-left { margin-left: 14px !important } .margin-left-lg { margin-left: 22px !important } .margin-left-sm { margin-left: 5px !important } .border-left-none { border-left: none !important } .border-right-none { border-right: none !important } .border-bottom-none { border-bottom: none !important } .border-top-none { border-top: none !important } .border-none { border: none !important } .inline-object { display: inline-block !important } /* Useful for centering columns that don't * occupy an entire body/container */ .center-column { float: none; margin-left: auto; margin-right: auto; display: block; } /* Useful for emphasizing a disabled input */ .option-disabled { opacity: 0.6 } /* --------------------------------------- TYPOGRAPHY ----------------------------------------*/ ul, ol { padding-left: 30px } li { margin-bottom: 7px } a { color: #fff } a:hover { color: #fafafa } a:focus { outline: none } p { font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height: 22px; font-weight: 400; } p.small, p small { font-size: 13px } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 700; color: inherit; text-rendering: optimizelegibility; margin-bottom: 10px; } h1 { font-size: 30px; line-height: 45px; } h2 { font-size: 24px; line-height: 36px; } h3 { font-size: 18px; line-height: 27px; } h4, h5, h6 { line-height: 18px } h4 { font-size: 14px } h5 { font-size: 12px } h6 { font-size: 11px; color: #999999; text-transform: uppercase; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-weight: normal; color: #999999; } .semi-bold { font-weight: 600 } /* Dividers */ hr { margin: 35px 0; border-top: 1px solid #DDD; } hr.alt { border-top: 1px dashed #CCC } hr.short { margin: 20px 0 } hr.tall { margin: 55px 0 } /* Specialty Header - Also a Divider */ .page-header { text-shadow: 0 1px #FFF; border-bottom: 1px solid #c9c9c9; margin-bottom: 30px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); } /* --------------------------------------- ANIMATIONS ----------------------------------------*/ /* used in conjuction with "data-animate" * attr to create a delayed page animation * read docs for more info on proper use*/ .animated-delay { opacity: 0 } .sparkline-delay { height: 0; display: block; line-height: 40px; } /* --------------------------------------- HEADER ----------------------------------------*/ .navbar { z-index: 99999999; margin-bottom: 0; border-radius: 0; min-height: 51px; background-color: #FFF; border-bottom: 1px solid transparent; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1),0 1px 0 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1),0 1px 0 0 rgba(0, 0, 0, 0.1); background: #499bea; /* Old browsers */ background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%); /* IE10+ */ background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */ } .navbar-brand { width: 200px; padding: 10px 20px; } .navbar-brand .navbar-logo { max-width: 125px; float: left; } /* Header Buttons */ .header-btns { } .header-btns > div { display: inline-block; position: relative; margin-right: 5px; } .header-btns > div > button { color: #666; border-color: rgb(204,204,204) rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18); background-color: #f5f5f5; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f5f5f5 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .header-btns > div > button:hover { color: #0094d2 } /* Header Button Icons */ .header-btns > div > button > .glyphicon, .header-btns > div > button > .glyphicons, .header-btns > div > button > .fa { font-size: 1.25em; } .header-btns .user-menu > .btn:first-child { border-radius: 3px 0 0 3px } .header-btns .user-menu > .btn:last-child { border: 0 } /* Header Button Dropdowns */ .header-btns ul.dropdown-menu { margin-top: 17px; width: 300px; background: #f5f5f5; list-style: none; left: 0; padding: 0; border: 0; border-radius: 3px; -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); } /* Positions individual button dropdowns */ .messages-menu ul.dropdown-menu { margin-left: -45px } .tasks-menu ul.dropdown-menu { width: 430px; margin-left: -240px; } .user-menu ul.dropdown-menu { width: 250px; margin-left: -120px; } .alerts-menu ul.dropdown-menu { width: 300px; margin-left: -70px; } /* Header Menu Dropdown - Header */ .header-btns .dropdown-header { padding: 12px 20px; margin: 0; z-index: 999; font-size: 14px; font-weight: 700; color: #555; background: #FFF; position: relative; border-radius: 3px 3px 0 0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1),0 2px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1),0 2px 3px rgba(0, 0, 0, 0.05); } /* Header Menu Dropdown - Items */ .dropdown-menu ul.dropdown-items { padding: 0; list-style: none; } ul.dropdown-items > li { padding: 10px 14px; margin: 0; border-bottom: 1px solid #DDD; z-index: 888; position: relative; cursor: pointer; font-size: 13px; } .user-menu ul.dropdown-items > li { padding: 8px 14px } ul.dropdown-items > li:hover { background: #EEE } ul.dropdown-items > li:last-child { border-bottom: 0 } ul.dropdown-items > li a:hover { background: transparent; text-decoration: none; color: #666; } /* Special on-hover styles for user dropdown menu */ .user-menu ul.dropdown-items > li:hover i.fa { color: #d9534f; } .user-menu ul.dropdown-items > li:last-child:hover i.fa { color: #888; } .user-menu ul.dropdown-items > li:last-child > div:hover i.fa { color: #d9534f; } /* Header Menu Dropdown - Footer */ .header-btns .dropdown-footer { padding: 11px 20px; margin: 0; z-index: 999; font-size: 11px; color: #999; background: #FFF; text-align: center; position: relative; border-radius: 0 0 3px 3px; -webkit-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1),0 -2px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1),0 -2px 3px rgba(0, 0, 0, 0.05); } .header-btns .dropdown-footer a { color: #428bca } .header-btns .dropdown-footer a:hover { background: transparent } .header-btns .dropdown-footer i.fa { padding-left: 3px } /* Header Menu Dropdown - Top Directional Arrow */ .header-btns .menu-arrow { position: absolute; top: -12px; left: 10%; overflow: hidden; } .header-btns .menu-arrow .menu-arrow-up { background: url(../img/form/menu-arrow-up.png) no-repeat top left; width: 25px; height: 14px; display: block; } .messages-menu .menu-arrow { left: 20% } .alerts-menu .menu-arrow { left: 27% } .tasks-menu .menu-arrow { left: 59% } .user-menu .menu-arrow { left: 69% } /* Header Menu Dropdown - Item contents */ /* Item Avatar */ .header-btns .item-avatar { width: 45px; margin-right: 12px; display: inline-block; vertical-align: middle; border: 1px solid #CCC; } /* Item Icon */ .header-btns .item-icon { width: 40px; margin-right: 5px; display: inline-block; vertical-align: middle; font-size: 20px; text-align: center; color: #888; } .tasks-menu .item-icon { width: 30px } /* Item Message */ .header-btns .item-message { width: 200px; display: inline-block; vertical-align: middle; } .user-menu .item-message { width: 170px } .tasks-menu .item-message { width: 215px } /* Item Label */ .header-btns .item-label { width: 80px; display: inline-block; } /* Item Checkbox */ .header-btns .item-checkbox { position: absolute; right: 20px; top: 14px; } /* User Dropdown Menu */ .user-menu .dropdown-lockout { width: 50%; float: left; font-size: 13px; padding: 11px 0 11px 15px; background: #fff; border-top: 1px solid #bbb; } .user-menu .dropdown-signout { width: 50%; float: left; padding: 11px 5px 11px 15px; background: #fff; border-left: 1px dashed #ccc; border-top: 1px solid #bbb; } .user-menu .dropdown-signout a{ color:#000; } /* User Dropdown Menu - Signout Buttons */ .user-menu .dropdown-lockout .fa, .user-menu .dropdown-signout .fa { padding-right: 7px; font-size: 20px; color: #888; vertical-align: top; } /* Dropdown Checklist Toggle - The Task menu is a clickable checklist */ .task-checked > div:not(.item-checkbox) { opacity: 0.4 } /* add a text line through effect on any clickable checklist by adding ".text-slash" */ .task-checked .text-slash { text-decoration: line-through } /* --------------------------------------- SIDE MENU ----------------------------------------*/ /* Sidebar Column */ #sidebar { position: absolute; width: 240px; background: #FFF; z-index: 1024; left: auto; margin-top:10px; } #sidebar:before { content: ""; position: fixed; width: 240px; top: 0; bottom: 0; display: block; z-index: -2; background: #fff; } /* Sidebar Search Form */ #sidebar-search { position: relative; overflow: hidden; padding: 12px 13px 0 12px; height: 52px; max-height: 52px; border-bottom: 1px solid #d2d2d2; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f5f5f5 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } #sidebar-search form { position: relative; max-width: 170px; float: left; } #sidebar-search form input.search-bar { background: #fff; color: #999; font-size: 14px; outline: none; max-height: 30px; padding: 3px 8px; height: 29px; } #sidebar-search form .field-icon-right { color: #BBB; font-size: 16.5px; top: 6px; display: none; } /* Sidebar Collapse Toggle Button */ #sidebar-search .sidebar-toggle { cursor: pointer; float: right; height: 28px; line-height: 25px; width: 32px; font-size: 17px; color: #AAA; text-align: center; border-radius: 3px; border: 1px solid #ddd; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f0f0f0 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } /* Sidebar Navigation Menu */ ul.sidebar-nav li { margin: 0 } ul.sidebar-nav li a { color: #333 } ul.sidebar-nav li a:hover { background-color: transparent } ul.sidebar-nav > li > a { display: block; text-decoration: none; color: #fff; line-height: 45px; min-height: 45px; padding: 0; margin: 0; border-radius: 0; border-bottom: 1px solid #3a6d04; box-shadow: none; background-repeat: repeat-x; background: #77b931; /* Old browsers */ background: -moz-linear-gradient(top, #77b931 0%, #4d8d0a 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#77b931), color-stop(100%,#4d8d0a)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #77b931 0%,#4d8d0a 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #77b931 0%,#4d8d0a 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #77b931 0%,#4d8d0a 100%); /* IE10+ */ background: linear-gradient(to bottom, #77b931 0%,#4d8d0a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77b931', endColorstr='#4d8d0a',GradientType=0 ); /* IE6-9 */ } ul.sidebar-nav li.active > a .glyphicons { color: #d9534f } /* Side Nav Icon */ ul.sidebar-nav > li > a .glyphicons { width: 40px; height: 45px; text-align: center; line-height: 45px; font-size: 18px; float: left; border-right: 1px solid #3a6d04; margin-right: 10px; padding-right: 4px; margin-left: 4px; top: 0; } /* Side Nav Caret */ ul.sidebar-nav > li > a span.caret { position: absolute; top: 45%; right: 10px; border-top: 5px solid; border-right: 5px solid transparent; border-left: 5px solid transparent; } /* Side Nav caret state - we simply flip caret border */ ul.sidebar-nav > li > a.collapsed span.caret { border-top: 0; border-bottom: 5px solid; } ul.sidebar-nav > li.active > a span.caret { color: #d9534f } /* Sub-menu */ ul.sidebar-nav ul.sub-nav.menu-open { display: block } ul.sidebar-nav ul.sub-nav { display: none; border-bottom: 1px solid #c9c9c9; background-color: #fafafa; } ul.sidebar-nav ul.sub-nav > li > a { padding: 12px 20px 12px 35px } ul.sidebar-nav ul.sub-nav > li:last-child a { padding: 12px 35px 18px; } /* Sub Nav Icon */ ul.sidebar-nav ul.sub-nav li span { margin-right: 12px; min-width: 15px; min-height: 15px; float: left; } ul.sidebar-nav ul.sub-nav > li > a:hover .glyphicons { color: #d9534f } /* SIDE MENU COLLAPSED STATE * Activated via JS. A ".sidebar-collapsed" class is added to * #sidebar on click. The styles below essentially just mimic * the media-query based styles found in responsive.css -------------------------------------------------------------- */ /* Shrink Sidebar to the width of Title Icon */ body.sidebar-collapsed #sidebar { width: 40px } /* Expand primary page content */ body.sidebar-collapsed #content { margin-left: 40px } body.sidebar-collapsed #content:after { box-shadow: none; border-left: 1px solid #CCC; } /* Hide Search Form */ body.sidebar-collapsed #sidebar-search form { display: none } /* Shrink toggle button */ body.sidebar-collapsed #sidebar-search .sidebar-toggle { margin-right: -6px; width: 28px; font-size: 17px; } /* Convert Menu items to absolute positions */ body.sidebar-collapsed ul.sidebar-nav .sidebar-title, body.sidebar-collapsed ul.sidebar-nav ul.sub-nav { display: none; position: absolute; width: 200px; left: 40px; z-index: 9999; border: 1px solid #ccc; } /* Menu Icon */ body.sidebar-collapsed ul.sidebar-nav > li > a > .glyphicons, body.sidebar-collapsed ul.sidebar-nav > li > a > .glyphicon { margin-left: 2px; border-right: 0; } /* Menu Title */ body.sidebar-collapsed ul.sidebar-nav .sidebar-title { top: -1px; text-indent: 20px; height: 46px; background: #CCC; border-color: #AAA; } /* Hide menu caret */ body.sidebar-collapsed ul.sidebar-nav span.caret { display: none } /* Sub-menu */ body.sidebar-collapsed ul.sidebar-nav ul.sub-nav { height: auto !important; top: 44px; border-top: 1px solid #AAA; } /* Sub-menu items */ body.sidebar-collapsed ul.sidebar-nav ul.sub-nav li a { padding: 13px 15px } body.sidebar-collapsed ul.sidebar-nav ul.sub-nav li:last-child a { padding: 13px 15px 20px } /* Hide all open menus as they are now absolute positioned */ body.sidebar-collapsed ul.sidebar-nav ul.sub-nav.menu-open { display: none } /* Force open both menu title and its submenu on hover */ body.sidebar-collapsed ul.sidebar-nav li:hover ul.sub-nav, body.sidebar-collapsed ul.sidebar-nav li:hover a, body.sidebar-collapsed ul.sidebar-nav li:hover .sidebar-title { display: block !important } /* SIDEBAR ALTERNATE STYLES */ /* Flat White */ #sidebar.sidebar-alt-white ul.sidebar-nav > li > a { background: #FFF; border-color: #ddd; } #sidebar.sidebar-alt-white ul.sub-nav { background: #f8f8f8; border-color: #ddd; } /* Flat Grey */ #sidebar.sidebar-alt-grey:before { background: #f2f2f2 } #sidebar.sidebar-alt-grey ul.sidebar-nav > li > a { background: #f2f2f2; border-color: #ddd; } #sidebar.sidebar-alt-grey ul.sub-nav { background: #f8f8f8; border-color: #ddd; } /* -------------------------------------- TOPBAR/BREADCRUMBS --------------------------------------*/ #topbar { z-index: 99999; position: relative; width: 100%; min-height: 52px; padding-left: 20px; border-left: 1px solid #d2d2d2; border-bottom: 1px solid #CCC; /*background: url(../img/patterns/5.png) repeat top left;*/ background:#7cb62e; margin-top:6px; } .breadcrumb { float: left; padding: 0; padding-top: 16px; margin-bottom: 0; border-radius: 0; font-size: 14px; background-color: transparent; z-index:99999; margin-top:5px; } .breadcrumb .glyphicons { font-size: 13px; top: 0; } .breadcrumb li{ float:left; position:relative; display:block; z-index:99999; margin:0 5px; } .breadcrumb li a:link, .breadcrumb li a:visited{ padding:7px 5px; overflow: hidden; position: relative; z-index:99999; color:#333; } .breadcrumb li a:hover, .breadcrumb li a:active{ overflow: hidden; position: relative; color: #df1820; border-bottom: 1px solid #c9c9c9; font-size: 14px; border-radius: 3px 3px 0 0; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f2f2f2 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f2f2f2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .breadcrumb li a.active{ overflow: hidden; position: relative; color: #df1820; border-bottom: 1px solid #c9c9c9; font-size: 14px; border-radius: 3px 3px 0 0; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f2f2f2 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f2f2f2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .breadcrumb li ul{ display:none; z-index:99999; margin-top:9px; position:relative; left:-60px; } .breadcrumb li:hover ul{ position:absolute; display:block; z-index:99999; } .breadcrumb li:hover ul li a{ position:relative; background:#2d2d2d; color:#e9e9e9; display:block; width:220px; border:#fff solid 1px; margin:-2px 0 -2px 0; -webkit-border-radius:5px; border-radius:5px; } .breadcrumb li:hover ul li a:hover{ } /* --------------------------------------- LABELS ----------------------------------------*/ .label { padding: .3em .7em .4em; font-size: 84%; font-weight: 600; } /* Label Shapes - ".label" required */ .label.label-rounded { padding: .2em 0.85em .3em; border-radius: 1em; } /* Label Sizes - ".label" required */ .label-sm { padding: .2em .6em .3em; font-size: 75%; } .label-lg { padding: .4em .9em .5em; font-size: 95%; } label.error { color: #d9534f; font-size: 12px; font-weight: 600; } /* -------------------------------------- BADGES --------------------------------------*/ .badge { padding: 3px 7px; font-size: 12px; font-weight: 600; } /* Badge Sizes - ".badge" required */ .badge-sm { padding: 2px 6px; font-size: 11px; } .badge-lg { padding: 4px 8px } /* -------------------------------------------- ICONS -------------------------------------------- See documentation for a full explanation of available libraries and their associated classes ----------------------------------------------*/ /* Some font libraries have large file sizes. * We optionally can attach .wf-loading to the * body tag and have the fonts only visible after * they are fully loaded or cached. Prevents rough * icon flash and is currently used only on index.html */ .wf-loading .glyphicons, .wf-loading .glyphicon, .wf-loading .imoon, .wf-loading .fa { opacity: 0 !important; } /* Icons */ .glyphicons,.glyphicon, .imoon, .fa { opacity: 1; transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; -webkit-transition: opacity 0.3s ease-in; } /* Buttons with Icons * Cross browser problems were creating problems when * an icon was given a larger font size than its sibling * text. To fix Line height, vertical align, and top * positioning have been redefined */ .btn .glyphicons, .btn .glyphicon { top: -1px; vertical-align: middle; line-height: 0; font-size: 1.1em; } /* Glyphicon Pro and Halfling */ .glyphicons-2x, .glyphicon-2x { font-size: 2em } .glyphicons-3x, .glyphicon-3x { font-size: 3em } .glyphicons-4x, .glyphicon-4x { font-size: 4em } .glyphicons-5x, .glyphicon-5x { font-size: 5em } /* Icomoon Font Icons */ .imoon-2x { font-size: 2em } .imoon-3x { font-size: 3em } .imoon-4x { font-size: 4em } .imoon-5x { font-size: 5em } /* A helper class to align icons right in control-forms */ i.field-icon-right { position: absolute; right: 10px; top: 8px; } /* ----------------------------------------- ALERTS ------------------------------------------*/ /* Alert Sizes */ .alert { font-size: 14px } .alert-sm { padding: 8px 35px 8px 15px } .alert-lg { padding: 25px 35px 25px 15px; font-size: 16px; } /* Alert Dismiss Icon */ .alert-dismissable .close { color: #666 } /* ----------------------------------------- BUTTONS ------------------------------------------*/ /* Button Settings */ .btn { color: #FFF; outline: none; line-height: 1.47; } .btn:focus { color: #FFF } .btn-link { color: #444 } .btn-link:hover { color: #444 } /* Button Sizes */ .btn-sm { line-height: 1.5; } .btn-lg { line-height: 1.33;} /* Button Shapes */ .btn-square { border-radius: 0; } /* Button Colors */ /* These are only colors that follow Bootstraps * color scheme. Stardom includes many more colors * are at end of this doc */ .btn-success.btn-gradient { border-color: #3f9d00; background-color: #44ab00; } .btn-info.btn-gradient { border-color: #269abc; background-color: #14abd8; } .btn-primary.btn-gradient { background-color: #0088cc } .btn-warning.btn-gradient { background-color: #f28900 } .btn-danger.btn-gradient { background-color: #d3332e } .btn-default.btn-gradient { background-color: #f0f0f0 } /* Adds a custom "Alert"(purple) button to * the Bootstrap button lineup */ .btn-alert { background-color: #7857ca } .btn-alert.btn-gradient { background-color: #5d3ab5 } .btn-alert .caret { border-top-color: #FFF } /* Button Hover effect */ .btn:hover { color: #FFF; background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.13) 1%,rgba(255,255,255,0.13) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255, 0.13) 1%,rgba(255,255,255,0.13) 100%); } .btn-gradient:hover { background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.45) 1%,rgba(255,255,255,0.15) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255, 0.45) 1%,rgba(255,255,255,0.15) 100%); } /* Button Gradients * Gradients are created using a transparent gradient * overlay. This way you can transform any element * with a background color into a gradient without * having to use additional colors */ .btn-gradient { background-repeat: repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.40); border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.30) 1%,rgba(255,255,255,0.15) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255, 0.30) 1%,rgba(255,255,255,0.15) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0); } /* --------------------------------------- PROGRESS BARS ---------------------------------------*/ .progress { height: 18px; background-color: #f1f1f1; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); } .progress-bar { line-height: 18px } /* Progress Bar Sizes - ".progress" always required */ .progress.progress-sm { height: 12px } .progress.progress-sm .progress-bar { line-height: 12px } .progress.progress-lg { height: 28px } .progress.progress-lg .progress-bar { line-height: 28px } /* --------------------------------------- SLIDERS ---------------------------------------*/ /* Slider Container */ .ui-rangeSlider .ui-rangeSlider-bar { margin: 5px 0; height: 20px; background-color: #6390a7; } /* Slider Inner bar */ .ui-rangeSlider .ui-rangeSlider-innerBar { height: 24px; margin: 3px 0; background-color: #FFF; border: 1px solid #CCC; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0, 0.10) inset, 0 -1px 0 rgba(255,255,255, 0.65) inset; box-shadow: 0 1px 2px rgba(0,0,0, 0.10) inset, 0 -1px 0 rgba(255,255,255, 0.65) inset; } /* Slider Label */ .ui-rangeSlider-label { border: 0; box-shadow: none; background: none; background-image: none; } .ui-rangeSlider-label-value { position: relative; top: -8px; min-width: 40px; min-height: 25px; text-align: center; line-height: 25px; font-size: 12px; font-weight: 600; border-radius: 4px; background: #fafafa; background-image: none; -webkit-box-shadow: 0 1px 2px rgba(0,0,0, 0.25); box-shadow: 0 1px 2px rgba(0,0,0, 0.25); } .ui-rangeSlider-label:after { content: "\f0d7"; width: 100%; position: absolute; bottom: 0; margin: 0 -6px; color: #f8f8f8; font-family: FontAwesome; font-size: 18px; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0, 0.25); } /* Slider Input Label */ input.ui-editRangeSlider-inputValue { border: 1px solid #DDD; width: 2.2em; } /* Slider Handles */ .ui-rangeSlider .ui-rangeSlider-handle { background: none } .ui-rangeSlider .ui-rangeSlider-handle-inner { background: url(../img/form/slider-knob.png) no-repeat center top; width: 22px; height: 24px; } .ui-rangeSlider-leftHandle .ui-rangeSlider-handle-inner { margin-left: -10px } .ui-rangeSlider-rightHandle .ui-rangeSlider-handle-inner { margin-left: -4px } /* Slider Arrows */ .ui-rangeSlider-arrow { margin: 6px 0 } .ui-rangeSlider-arrow.ui-rangeSlider-leftArrow { left: -13px !important } .ui-rangeSlider-arrow.ui-rangeSlider-rightArrow { right: -13px !important } /* ---------------------------------------- FIELD ELEMENTS -----------------------------------------*/ /* Alternate Text Field Style - Gradient */ .text-field-alt { min-height: 40px; border-radius: 1px; border: 1px solid #cccccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f5f5f5 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } /* Boostrap Input Groups */ .input-group-addon { min-width: 40px } /* Bootstrap Help Block */ .help-block { margin-top: 7px; color: #888; } /* Checkboxes and Radios */ div.checker, div.checker span, div.checker input { cursor: pointer } div.checker, div.radio { margin-right: 3px } label .checker, label .radio, .form-horizontal label .checker, .form-horizontal label .radio { padding-top: 0 } .radio-inline, .checkbox-inline { padding-left: 5px; vertical-align: top; } /* JQuery UI Spinner */ .ui-spinner-input { color: inherit; min-height: 36px; } .ui-spinner-button { cursor: pointer; display: block; overflow: hidden; position: absolute; right: 0; width: 16px; height: 50%; padding: 0; margin: 0; font-size: .5em; text-align: center; } .input-group .ui-spinner .form-control:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .ui-spinner .ui-icon { position: absolute; margin-top: -2px; top: 50%; left: 0; text-indent: 0; } .ui-spinner-up .ui-icon { margin-top: -6px } .ui-spinner-up { top: 0 } .ui-spinner-down { bottom: 0 } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* needed to correct false icon sprite pos */ background-position: -65px -16px; } /* --------------------------------------- TABLES ----------------------------------------*/ /* Table first item changes */ .table tbody > tr:first-child > td { border-top: 0 } /* Table-striped item changes */ .table-striped > tbody > tr:nth-child(even) > td { background-color: #f8f8f8; border-bottom: 1px dashed #c9c9c9; padding: 13px 8px; } .table-striped > tbody > tr:nth-child(odd) > td { background-color: #FFF; border-bottom:none; padding: 13px 8px; } /* --------------------------------------- PRICING TABLES ---------------------------------------*/ /* Regular Pricing Plan */ .pricing-tables .pricing-plan { padding: 0 0 20px 0; margin: 30px -16px 20px -16px; border: 1px solid #CCC; background-color: #f6f6f6; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); } /* Pricing Table Title */ .pricing-tables .pricing-title { padding: 25px 5px 20px; border-bottom: 1px solid #DDD; } .pricing-tables .pricing-title h3 { margin-bottom: 0; font-weight: 200; text-transform: none; font-size: 26px; color: #555; } /* Pricing Table Cost Figure */ .pricing-info { margin: 20px 0 } .pricing-info .currency-sign { color: #333; font-size: 26px; font-weight: 200; display: inline-block; vertical-align: top; margin-left: -20px; padding-left: 5px; padding-top: 6px; } .pricing-info h2 { display: inline-block; margin-bottom: 0; color: #444; font-size: 54px; font-weight: 600; } .pricing-info h6 { color: #888; font-weight: 200; margin: 4px 0 0; } /* Pricing Table Item Features */ .pricing-features ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #DDD; } .pricing-features li { padding: 10px 0; border-bottom: 1px solid #DDD; background-color: #FFF; color: #999; margin: 0; } .pricing-tables .pricing-features li b { font-weight: 600 } .pricing-tables .pricing-features li i.fa { font-size: 15px; color: #777; padding-right: 8px; } /* Pricing Table Icons */ .pricing-tables .pricing-icons ul { list-style: none; padding: 0; margin: 0; } .pricing-tables .pricing-icons li { padding: 10px 0; border-bottom: 1px solid #DDD; background-color: #FFF; font-size: 18px; margin: 0; } .pricing-tables .pricing-icons li i.fa-times { color: #e74a4a } .pricing-tables .pricing-icons li i.fa-ellipsis-h { color: #555 } /* Pricing Table Sign Up Button*/ .pricing-tables a.btn { margin-top: 25px; padding: 8px 26px; } /* Hero Pricing Plan Modifications */ .hero-plan { z-index: 10 } .hero-plan .pricing-plan { background-color: #f6f6f6; padding: 0 0 20px 0; margin: 0 -17px 20px -17px; border-bottom: 1px solid #BBB; -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); } .hero-plan .pricing-plan .pricing-title { color: #FFF; margin: -1px -1px 0 -1px; } .hero-plan .pricing-plan .pricing-title h3 { color: #FFF; font-weight: 600; } .hero-plan .pricing-plan .pricing-subtitle { text-transform: uppercase; font-size: 12px; margin-top: 4px; font-weight: 600; } .hero-plan .pricing-plan a.btn { margin: 40px 0 20px } /* --------------------------------------------- PANELS ----------------------------------------------- Bootstrap Panels are a vital element in this Theme. Reading the Stardom Docs to better understand this component is recommended ----------------------------------------------*/ /* Overflow is hidden by default. Helper class to reverse */ .panel.panel-visible, .panel-heading.panel-visible { overflow: visible !important } .panel { position: relative; margin-bottom: 35px; overflow: hidden; border-color: #0c518b; } .panel-heading { overflow: hidden; position: relative; height: 57px; padding: 10px 20px 9px; color: #666; border-bottom: 1px solid #393187; font-size: 14px; font-weight: 700; line-height: 33px; border-radius: 3px 3px 0 0; background-repeat: repeat-x; background: #499bea; /* Old browsers */ background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%); /* IE10+ */ background: linear-gradient(to bottom, #499bea 0%,#207ce5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */ } .panel-title { float: left; padding-top: 1px; font-size: 14px; color:#fff; } .panel-heading .panel-title i.fa { margin-top: -3px; padding-right: 8px; font-size: 17px; vertical-align: middle; } /* Helpful for wrapping form components in * when placing them in the header. Otherwise * they can break the title with their width */ .panel-heading .panel-field { max-width: 140px } /* PANEL TITLES */ /* Used as a divider Bbetween panel content */ .panel-body-title { margin-bottom: 20px; padding: 10px 0 15px; color: #666; border-bottom: 1px solid #DDD; line-height: 18px; } /* Used as small text in panel header and footers */ .panel-title-sm { padding-right: 5px; color: #888; font-size: 12px; font-weight: 700; text-shadow: 0 1px #ffffff; } /* PANEL ALTERNATE STYLE - Minimal */ .panel.panel-alt { border-color: #DDD; box-shadow: none; background: #FFF; } .panel.panel-alt > .panel-heading { height: 45px; padding: 0 20px; background-color: #FFF; font-size: 14px; line-height: 43px; box-shadow: none; } .panel.panel-alt .panel-body { padding: 20px 30px; background-color: #fcfcfc; line-height: 22px; } /* PANEL ADDON - MENU */ /* Typically placed under the panel header * and used to hold buttons or menus */ .panel-menu { padding: 10px 13px; background-color: #eee; border-bottom: 1px solid #C9c9c9; } .panel-heading + .panel-menu { -webkit-box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 5px 5px -4px rgba(0, 0, 0, 0.15) inset; } .panel-menu .btn-default.btn-gradient.active { background-color: #FFF; color: #39b1d5; box-shadow: none; } /* PANEL ADDON - SIDEMENU */ /* A side column great for housing an * extra nav list. When used its sibling * panel body (content) is modified */ .panel-sidemenu + .panel-body { position: relative; float: left; width: 70%; margin: 40px 3.5% 100px; padding: 0; } /* Sidemenu and content are both floated. * to create equal heights we expand the sidemenu * with padding and allow its parent container * to catch the overflow */ .panel-sidemenu { position: relative; float: left; width: 23%; height: 100%; padding: 5px; background-color: #f6f6f6; border-right: 1px solid #CCC; margin-bottom: -2000px; padding-bottom: 2000px; } .panel-sidemenu ul.nav { margin-top: 30px; padding-left: 30px; } .panel-sidemenu ul.nav li { margin-bottom: 4px; list-style: none; } .panel-sidemenu ul.nav li.nav-title { padding: 10px 0; color: #777; font-weight: 700; text-decoration: none; text-shadow: 0 1px #FFF; } .panel-sidemenu ul.nav li.nav-title:hover { color: #777 } .panel-sidemenu ul.nav li a { padding: 5px 0; color: #888; } .panel-sidemenu ul.nav li a:hover { background: none } .panel-sidemenu ul.nav li .fa { width: 28px; color: #BBB; font-size: 18px; } .panel-sidemenu ul.nav li:hover, .panel-sidemenu ul.nav li:hover .fa { Color: #5bc0de } .panel-sidemenu ul.nav li.active, .panel-sidemenu ul.nav li.active .fa { color: #5bc0de } .panel-sidemenu ul.nav .divider { width: 80%; height: 1px; margin: 9px 0; overflow: hidden; background: #e2e2e2; } /* Sidemenu is hidden on small devices */ @media (max-width: 1000px) { .panel-sidemenu { display: none } .panel-sidemenu + .panel-body { width: 93%; margin: 40px 3.5% 100px; } } /* PANEL ADDON - BODY SEARCHBAR */ /* Useful anywhere but in this theme it is * only used or seen inside a panel body */ .search-widget { position: relative } #search-widget { height: 85px; margin-bottom: 50px; padding: 20px 25px; background: #f4f7fa; border: 1px solid #d8dee6; border-radius: 3px; -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.05) inset; box-shadow: 0 0 3px rgba(0,0,0, 0.05) inset; } .search-bar-widget { float: left; width: 82%; min-height: 43px; padding: 9px 12px 9px 40px; } #search-widget .search-widget-icon { position: absolute; top: 14px; left: 15px; color: #999; font-size: 16px; } #search-widget button { float: left; width: 16%; margin-left: 2%; padding: 10px; font-weight: 600; } /* PANEL TAB CORRECTION */ /* If you want a panel-like footer inside a tababble * area you need to wrap the content in a ".tab-body" * class. See timeline.html for an example(event panel) */ .tab-body { padding: 20px 20px 15px } .tab-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #dddddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /* Mildly styles a font awesome based icon group * used in occasionaly in panel heading. Look at * message widget on index.html for example */ .mini-action-icons i.fa { position: relative; top: 2px; padding-right: 10px; color: #777; font-size: 16px; cursor: pointer; } /* -------------------------------------- PANEL TABS ---------------------------------------*/ /* Panel Tab Navigation must be placed inside * ".panel-heading" see Stardom Docs for example */ .panel-tabs { float: right; margin-top: -10px; } .panel-tabs > li { float: left; margin-bottom: -1px; } .panel-tabs > li > a { line-height: 1.428571429; border-radius: 0; padding: 19px 15px 17px; border: 1px solid transparent; border-right: 1px solid #DDD; font-size: 12px; color: #777; } .panel-tabs > li > a:hover { background-color: transparent; } .panel-tabs > li:first-child > a { border-left: 1px solid #DDD } /* hover and active states */ .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #555555; cursor: default; background: #ffffff; padding: 19px 15px 21px; } /* panel tab icons */ .panel-tabs li i.fa { font-size: 14px } .panel-tabs .imoon { font-size: 14px; vertical-align: middle; } /* -------------------------------------- TABS ---------------------------------------*/ /* TAB CONTAINER */ .tab-block { position: relative } .tab-block .tab-content { overflow: auto; background-color: #FFF; } /* TAB CONTENT PANEL */ .tab-content { position: relative; z-index: 10; min-height: 170px; padding: 16px 12px; border: 1px solid #CCC; } /* TAB NAVIGATION */ .nav-tabs { position: relative; top: 1px; } .nav-tabs > li { float: left; margin-bottom: -1px; } .nav-tabs > li > a { position: relative; z-index: 9; padding: 12px 16px; margin-right: -1px; font-weight: 700; color: #777; font-size: 12px; text-shadow: 0 1px #ffffff; border-color: #CFCFCF; border-radius: 0; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f0f0f0 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .nav-tabs > li:first-child > a { margin-left: 0 } /* TAB NAVIGATION STATES */ .nav-tabs > li > a:hover { color: #428bca; border-color: #CFCFCF; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { cursor: default; position: relative; z-index: 12; color: #555555; background: #FFF; border-color: #CFCFCF; border-bottom: 1px solid #FFF; } /* TAB NAVIGATION ICONS */ .nav-tabs li i.fa { font-size: 14px } .nav-tabs li i.fa.fa-caret-down { font-size: 12px } /* open state for dropdown menus in nav * containers. Also a direct bootstrap override */ .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { color: #428bca; border-color: #CFCFCF; } /* TAB NAVIGATION - ALT STYLE: BORDER */ .tabs-border.nav-tabs > li.active > a, .tabs-border .nav-tabs > li.active > a { margin-top: -1px; border-top: 2px solid #428bca; } /* TAB NAVIGATION - ALT STYLE: BACKGROUND */ .tabs-bg.nav { background: #f5f5f5; border: 1px solid #CCC; padding: 10px 10px 0; } /* TABS - NAVIGATION BELOW */ .tabs-below { position: relative; top: -1px; } .tabs-below > li { float: left; margin-top: -1px; } .tabs-below > li > a { position: relative; z-index: 9; margin-right: -1px; padding: 12px 16px; font-size: 12px; color: #777; font-weight: 700; border: 1px solid #CFCFCF; text-shadow: 0 1px #ffffff; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f0f0f0 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } /* TAB NAVIGATION STATES */ .tabs-below > li > a:hover { } .tabs-below > li.active > a, .tabs-below > li.active > a:hover, .tabs-below > li.active > a:focus { cursor: default; position: relative; z-index: 12; color: #555555; background: #FFF; border-color: #CFCFCF; border-top: 1px solid #FFF; } /* TAB NAVIGATION - ALT STYLE: BORDER */ .tabs-border.tabs-below > li.active > a, .tabs-border .tabs-below > li.active > a { margin-bottom: -1px; border-bottom: 2px solid #428bca; } /* TAB NAVIGATION - ALT STYLE: BACKGROUND */ .tabs-bg.tabs-below { background: #f5f5f5; border: 1px solid #CCC; padding: 0 10px 10px; } /* TABS - NAVIGATION LEFT */ .tabs-left { float: left } .tabs-left > li { float: none; margin: 0 -1px -1px 0; } .tabs-left > li > a { padding: 12px 16px; color: #777; font-size: 12px; font-weight: 700; text-shadow: 0 1px #ffffff; border: 1px solid transparent; border-color: #CFCFCF; background: #f8f8f8; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f0f0f0 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f0f0f0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } /* TAB NAVIGATION STATES */ .tabs-left > li > a:hover { } .tabs-left > li.active > a, .tabs-left > li.active > a:hover, .tabs-left > li.active > a:focus { color: #555; border-color: #CCC #FFF #CCC #CCC; cursor: default; position: relative; z-index: 12; background: #FFF; } /* TAB NAVIGATION - ALT STYLE: BORDER */ .tabs-border.tabs-left > li.active > a, .tabs-border .tabs-left > li.active > a { margin-left: -1px; border-left: 2px solid #428bca; } /* WELL TABS - GREY MICRO NAV TABS */ .well-tabs { position:relative; } .well-tabs li { float: left; margin: 4px 6px; } .well-tabs li:first-child { margin-left: 0; } .well-tabs li a { background: #f0f0f0; border-radius: 4px; border: 1px solid #DDD; font-size: 11px; font-weight: 600; color: #888; padding: 6px 8px; line-height: 15px; } .well-tabs li a:hover,.well-tabs li.active a { background-color: #FFF; } /* Same style but inversed colors */ .well-tabs-inverse li a { background: transparent; border-radius: 4px; border: 1px solid #ddd; font-size: 11px; font-weight: 600; color: #888; padding: 6px 8px; line-height: 15px; } .well-tabs-inverse li a:hover,.well-tabs-inverse li.active a { background-color: #f0f0f0; border: 1px solid #ddd; } /* -------------------------------------- PANEL ACCORDION ---------------------------------------*/ /* Created with Bootstrap Panels */ .accordion.panel-group .panel { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .accordion.panel-group .panel + .panel { margin-top: 10px } /* Accordion Header */ .accordion .panel-heading a { text-decoration: none; display: block; } /* Accordion Toggle Arrows */ .accordion .accordion-toggle-icon i.fa { float: left; line-height: 36px; min-width: 31px; padding-right: 5px; font-size: 18px; } /* Accordion Toggle Arrow States */ .accordion .accordion-toggle-icon i:first-child { display: block } .accordion .accordion-toggle-icon i:last-child { display: none } .accordion .collapsed .accordion-toggle-icon i:first-child { display: none } .accordion .collapsed .accordion-toggle-icon i:last-child { display: block } /* Accordion Widget - Alt Size, Small */ .accordion.accordion-sm .panel-heading { padding: 0 20px; height: 40px; line-height: 40px; } .accordion.accordion-sm .accordion-toggle-icon i:first-child, .accordion.accordion-sm .accordion-toggle-icon i:last-child { line-height: 40px } /* Accordion Widget - Alt Style, White */ .accordion.accordion-alt.panel-group .panel { border-color: #DDD; box-shadow: none; } .accordion.accordion-alt.panel-group .panel > .panel-heading { background-color: #FFF; padding: 0 20px; height: 45px; line-height: 43px; font-size: 14px; box-shadow: none; } .accordion.accordion-alt.panel-group .panel > .panel-heading > a { color: #444; font-weight: 400; } .accordion.accordion-alt.panel-group .panel > .panel-heading > a.collapsed { color: #888 } .accordion.accordion-alt.panel-group .panel > .panel-heading > a.collapsed:hover { color: #444 } .accordion.accordion-alt .accordion-toggle-icon i:first-child, .accordion.accordion-alt .accordion-toggle-icon i:last-child { color: #BBB; line-height: 45px; font-size: 15px; min-width: 26px; } .accordion.accordion-alt.panel-group .panel .panel-body { background-color: #fcfcfc; padding: 20px 30px; line-height: 22px; } /* --------------------------------------- BOOTSTRAP POPOVER ----------------------------------------*/ .popover { z-index: 1100 } /* -------------------------------------- PAGINATIONS ---------------------------------------*/ /* MINI PAGERS */ .pager { margin: 5px 0; cursor: pointer; } .pager li > a, .pager li > span { font-size: 14px } .pager.pager-sm li > a, .pager.pager-sm li > span { font-size: 12px } .pager.pager-lg li > a, .pager.pager-lg li > span { font-size: 16px } /* PAGINATIONS */ .pagination { margin: 5px 0; cursor: pointer; } /* ROUNDED PAGINATION */ .pagination-rounded > li:first-child > a { border-radius: 50% 0 0 50% } .pagination-rounded > li:last-child > a { border-radius: 0 50% 50% 0 } /* ALT STYLE */ .pagination-alt > li > a { margin: 0 4px; border-radius: 2px; font-weight: 600; color: #666; text-shadow: 0 1px #FFF; padding: 4px 11px; border-color: #ccc; -webkit-box-shadow: 0 1px 2px rgba(0,0,0, 0.1); box-shadow: 0 1px 2px rgba(0,0,0, 0.1); background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f1f1f1 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .pagination-alt > li.active > a { background-color: #555; background-image: none; border-color: #444; } /* SIZES FOR ALT STYLE */ .pagination-alt.pagination-sm > li > a { margin: 0 3px; font-weight: 700; padding: 4px 9px; } .pagination-alt.pagination-lg > li > a { margin: 0 5px; padding: 4px 13px; } /* pagination-alt fixes */ .pagination-alt.pagination-sm > li:first-child > a, .pagination-alt.pagination-lg > li:first-child > a { margin-left: 0 } /* ----------------------------------------- BOOTSTRAP MODALS -----------------------------------------*/ /* Modal sizes - element always requires * default ".modal-dialog" class */ .modal-dialog-sm { width: auto } @media screen and (min-width: 768px) { .modal-dialog { padding-top: 50px } .modal-dialog-sm { width: 425px } } /* Modal Header */ .modal-header { position: relative; height: 52px; padding: 10px 20px 9px; color: #666; font-size: 14px; font-weight: 700; text-shadow: 0 1px #ffffff; line-height: 31px; border-radius: 3px 3px 0 0; border-bottom: 1px solid #c9c9c9; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),0 -1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),0 -1px 1px rgba(0, 0, 0, 0.05); background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f2f2f2 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f2f2f2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .modal-header .modal-title { line-height: 31px } .modal-header .close { margin-top: 6px } /* Modal Body */ .modal-body { } /* Modal Footer */ .modal-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #dddddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } /* --------------------------------------- CUSTOM MODALS ----------------------------------------*/ /* Login Form Modal */ #formModal .modal-content { width: 400px; margin: 0 auto; position: relative; } #formModal .modal-header .modal-title { line-height: 35px; } #formModal .modal-header button { margin-top: 6px; } #formModal .modal-footer button { margin-top: 0; } #formModal .modal-body { padding: 15px 20px 0 20px; } #formModal #login-avatar { margin: 15px 20px 25px; padding-bottom: 25px; border-bottom: 1px dashed #DDD; } #formModal #login-avatar img { display: block; margin: 0 auto; padding: 5px; border: 2px solid #DDD; } #formModal .login-alert { font-size: 13px; padding: 9px 13px; } /* --------------------------------------------- TABLE WIDGET ------------------------------------------------ This is a multi-purpose widget. Apply it to any table to access specific table styles. Avatars, titles, etc. Commonly inside a panel. ----------------------------------------------*/ .table-checklist td { cursor: pointer } .table-widget .tab-content { padding: 0; border: 0; overflow: hidden; } /* Table items (labels, badges, progress bars etc) */ .table-widget .progress { width: 80%; height: 13px; margin: 0; } .table-widget .label, .table-widget .badge { margin-right: 7px } /* Tables with the .table-checklist class become clickable * if you want text to have a line-through effect on click * add the .text-slash class to the element */ .table-checklist tr.task-checked { color: #BBB } .table-checklist tr.task-checked .text-slash { text-decoration: line-through } /* Table item checked state - class added via JS */ .table-checklist tr.task-checked .label, .table-checklist tr.task-checked .progress { opacity: 0.3 } /* --------------------------------------------- CHAT WIDGET ----------------------------------------------- Created with Panels. Activate by adding ".chat-panel" to panel wrapper (".panel") ----------------------------------------------*/ .chat-panel .media-img img { max-width: 70px; margin-right: 8px; border: 1px solid #CCC; } .chat-panel .media-heading { color: #777; font-weight: 600; } .chat-panel .media-timestamp { color: #999; font-size: 11px; font-weight: 400; line-height: 10px; } .chat-panel .media-content { padding: 10px 15px; color: #777; line-height: 25px; border: 1px solid #d5d5d5; border-radius: 3px; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f5f5f5 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .media, .media .media { margin-top: 20px } /* --------------------------------------------- MESSENGER WIDGET ------------------------------------------------ Not to be confused with the comments widget. unlike the comments Widget this has a listing of online and offline site users. ----------------------------------------------*/ /* Messenger user list table */ .message-widget .table tbody > tr > td { padding: 10px 8px; border-top: 1px dashed #c9c9c9; vertical-align: middle; } .message-widget .table tbody > tr:first-child > td { border-top: 0 } .message-widget .avatar { width: 15% } .message-widget .avatar img { min-width: 50px; max-width: 50px; } /* ----------------------------------------- CALENDAR WIDGET ------------------------------------------*/ #calendar { position: relative } .external-event { margin: 10px 0; padding: 7px; color: #FFF; cursor: pointer; border-radius: 3px; background-color: #368d0d; background-repeat: repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.40); border: 1px solid #CCC; border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.30) 1%,rgba(255,255,255,0.15) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255, 0.30) 1%,rgba(255,255,255,0.15) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .fc-header .fc-button { height: 35px; padding: 5px 10px; background-color: #f7f7f7; color: #666; font-size: 12px; font-weight: 700; text-align: center; border: 1px solid #CCC; text-shadow: 0 1px #ffffff; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #ffffff 1%,#f1f1f1 100%); background-image: linear-gradient(to bottom, #ffffff 1%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f1f1',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .fc-header-left { position: absolute; top: -61px; right: 167px; width: auto; } .fc-header-right { position: absolute; top: -61px; right: 0; width: auto; } .fc-button.fc-state-down, .fc-button.fc-state-active { background-color: #EEE; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } .fc-event { margin: 4px; background-color: #368d0d; background-repeat: repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.40); border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.30) 1%,rgba(255,255,255,0.15) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255, 0.30) 1%,rgba(255,255,255,0.15) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .fc-header-left .fc-button, .fc-header-right .fc-button { margin-left: 0 } .fc-header-title { margin: 10px 0 20px } .fc-grid .fc-day-header { border: 0; border-bottom: 1px solid #DDD; } .fc-grid .fc-day-number { font-size: 14px; font-weight: 600; } .fc-state-highlight { background-color: #f8f8f8 } .fc-event-inner { padding: 7px } /* --------------------------------------- TIMELINE WIDGET - Not Timeline Page ----------------------------------------*/ .timeline-widget { position: relative; margin: 4px 0 0; padding: 0; list-style: none; } .timeline-icon { z-index: 11; position: relative; float: left; width: 45px; height: 45px; line-height: 45px; text-align: center; margin-right: 10px; padding-top: 1px; padding-right: 1px; border-radius: 50%; background: #DDD; -webkit-box-shadow: 1px 0 1px #AAA inset,-1px 0 1px #ffffff inset; box-shadow: 1px 0 1px #AAA inset,-1px 0 1px #ffffff inset; } .timeline-widget span.glyphicons { z-index: 11; position: relative; top: 2px; width: auto; padding: 6px; font-size: 18px; border-radius: 50%; -webkit-box-shadow: 1px 1px 2px #AAA; box-shadow: 1px 1px 2px #AAA; background-color: #FFFFFF; background-repeat: repeat-x; background-image: -webkit-linear-gradient(top, #FFFFFF 1%, #F1F1F1 100%); background-image: linear-gradient(to bottom, #FFFFFF 1%, #F1F1F1 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00f1f1f1',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .timeline-widget .media { position: relative; font-size: 14px; min-height: 60px; padding-bottom: 15px; margin: 0; } .timeline-widget .media:after { position: absolute; top: 0; left: 20px; width: 8px; height: 100%; content: ""; z-index: 10; background: #DDD; -webkit-box-shadow: 1px 0 1px #AAA inset,-1px 0 1px #f5f5f5 inset; box-shadow: 1px 0 1px #AAA inset,-1px 0 1px #f5f5f5 inset; } .timeline-widget .media:last-child:after { display: none; content: ""; } .timeline-widget .date { padding-left: 5px; color: #888; font-size: 12px; } .timeline-widget .media-body { padding-top: 10px } /* ---------------------------------------- STARDOM COLOR SYSTEM -----------------------------------------*/ /* COLORS FOR BADGES - BOOTSTRAP THEMED */ .badge-default { background-color: #999 } .badge-primary { background-color: #428bca } .badge-success { background-color: #5cb85c } .badge-info { background-color: #5bc0de } .badge-warning { background-color: #f0ad4e } .badge-danger { background-color: #d9534f } .badge-alert { background-color: #7857ca } .badge-inverse, .label-inverse { background-color: #444 } /* COLORS FOR BADGES - CUSTOM THEMED */ .badge-grey { background-color: #666 } .badge-dark { background-color: #363a3e } .badge-blue { background-color: #6395cf } .badge-teal { background-color: #4fbdc8 } .badge-green { background-color: #7ec35d } .badge-purple { background-color: #7857ca } .badge-maroon { background-color: #b94fb5 } .badge-pink { background-color: #ef679d } .badge-ruby { background-color: #e33459 } .badge-red { background-color: #ee4e3c } .badge-orange { background-color: #ff802c } .badge-yellow { background-color: #efcf1d } /* COLORS FOR PROGRESS BARS - always requires ".progress-bar" class */ .progress-bar-alert { background-color: #7857ca } .progress-bar-grey { background-color: #666 } .progress-bar-dark { background-color: #363a3e } .progress-bar-blue { background-color: #6395cf } .progress-bar-teal { background-color: #4fbdc8 } .progress-bar-green { background-color: #7ec35d } .progress-bar-purple { background-color: #7857ca } .progress-bar-maroon { background-color: #b94fb5 } .progress-bar-pink { background-color: #ef679d } .progress-bar-ruby { background-color: #e33459 } .progress-bar-red { background-color: #ee4e3c } .progress-bar-orange { background-color: #ff802c } .progress-bar-yellow { background-color: #efcf1d } /* COLORS FOR SLIDER INPUT BARS */ /* take note of where color class is applied */ .ui-rangeSlider.slider-light .ui-rangeSlider-bar { background-color: #e2e2e2 } .ui-rangeSlider.slider-grey .ui-rangeSlider-bar { background-color: #666 } .ui-rangeSlider.slider-dark .ui-rangeSlider-bar { background-color: #363a3e } .ui-rangeSlider.slider-blue .ui-rangeSlider-bar { background-color: #6395cf } .ui-rangeSlider.slider-teal .ui-rangeSlider-bar { background-color: #4fbdc8 } .ui-rangeSlider.slider-green .ui-rangeSlider-bar { background-color: #7ec35d } .ui-rangeSlider.slider-purple .ui-rangeSlider-bar { background-color: #7857ca } .ui-rangeSlider.slider-maroon .ui-rangeSlider-bar { background-color: #b94fb5 } .ui-rangeSlider.slider-pink .ui-rangeSlider-bar { background-color: #ef679d } .ui-rangeSlider.slider-ruby .ui-rangeSlider-bar { background-color: #e33459 } .ui-rangeSlider.slider-red .ui-rangeSlider-bar { background-color: #ee4e3c } .ui-rangeSlider.slider-orange .ui-rangeSlider-bar { background-color: #ff802c } .ui-rangeSlider.slider-yellow .ui-rangeSlider-bar { background-color: #efcf1d } /******************************************************** /* NOTE: Colors past this point use a much larger and * different naming system. These colors are only used on * vital theme elements to prevent unnecessary CSS bloat. * But they still allow for unparralleled customization. */ /* Flat Colors - TEXT/ICONS FORM * Uses a single "color" style which makes them perfect * to use on ANY element requiring a color, such as icons! */ .text-blue { color: #35b5d7 } .text-blue2 { color: #3093c7 } .text-blue3 { color: #4f96b4 } .text-blue4 { color: #287bab } .text-blue5 { color: #1c5b86 } .text-blue6 { color: #205066 } .text-blue7 { color: #21334b } .text-green { color: #6db54b } .text-green2 { color: #71aa61 } .text-green3 { color: #417447 } .text-green4 { color: #47741A } .text-green5 { color: #1C4905 } .text-red { color: #e4151d } .text-red2 { color: #d10011 } .text-red3 { color: #bf0d14 } .text-red4 { color: #930b1f } .text-purple { color: #BB7EA6 } .text-purple2 { color: #7a5067 } .text-purple3 { color: #89264f } .text-purple4 { color: #462b4c } .text-orange { color: #E94216 } .text-orange2 { color: #f56333 } .text-orange3 { color: #fb7e2a } .text-orange4 { color: #ff802c } .text-yellow { color: #f0c92f } .text-yellow2 { color: #E1BC4A } .text-creme { color: #feda83 } .text-creme2 { color: #fae3b4 } .text-creme3 { color: #d3c27b } .text-brown { color: #b29579 } .text-brown2 { color: #7b5d3a } .text-brown3 { color: #563330 } .text-dark5 { color: #1e1c1f } .text-dark4 { color: #323232 } .text-dark3 { color: #494949 } .text-dark2 { color: #666666 } .text-dark { color: #777777 } .text-light7 { color: #aaaaaa } .text-light6 { color: #bbbbbb } .text-light5 { color: #cccccc } .text-light4 { color: #dddddd } .text-light3 { color: #e5e5e5 } .text-light2 { color: #f0f0f0 } .text-light { color: #ffffff } .text-alert { color: #7857ca } /* FLAT COLORS - .BTN FORM * These elements were designed to function using only the * background-color style which makes it perfectly acceptable * to use them on any element which requires a background. * They have only been given "btn" names to conform to typical * bootstrap html styling. Feel free to change them! */ .btn-blue { background-color: #35b5d7 } .btn-blue2 { background-color: #3093c7 } .btn-blue3 { background-color: #4f96b4 } .btn-blue4 { background-color: #287bab } .btn-blue5 { background-color: #1c5b86 } .btn-blue6 { background-color: #205066 } .btn-blue7 { background-color: #21334b } .btn-green { background-color: #6db54b } .btn-green2 { background-color: #71aa61 } .btn-green3 { background-color: #417447 } .btn-green4 { background-color: #47741A } .btn-green5 { background-color: #1C4905 } .btn-red { background-color: #e4151d } .btn-red2 { background-color: #d10011 } .btn-red3 { background-color: #bf0d14 } .btn-red4 { background-color: #930b1f } .btn-purple { background-color: #BB7EA6 } .btn-purple2 { background-color: #7a5067 } .btn-purple3 { background-color: #89264f } .btn-purple4 { background-color: #462b4c } .btn-orange { background-color: #E94216 } .btn-orange2 { background-color: #f56333 } .btn-orange3 { background-color: #fb7e2a } .btn-yellow { background-color: #f0c92f } .btn-yellow2 { background-color: #E1BC4A } .btn-brown { background-color: #b29579 } .btn-brown2 { background-color: #7b5d3a } .btn-brown3 { background-color: #563330 } .btn-creme { background-color: #feda83 } .btn-creme2 { background-color: #fae3b4 } .btn-creme3 { background-color: #d3c27b } .btn-dark5 { background-color: #1e1c1f } .btn-dark4 { background-color: #323232 } .btn-dark3 { background-color: #494949 } .btn-dark2 { background-color: #666666 } .btn-dark { background-color: #777777 } .btn-light7 { background-color: #aaaaaa } .btn-light6 { background-color: #bbbbbb } .btn-light5 { background-color: #cccccc } .btn-light4 { background-color: #dddddd } .btn-light3 { background-color: #e5e5e5 } .btn-light2 { background-color: #f0f0f0 } .btn-light { background-color: #ffffff } /* GRADIENT COLORS - .BTN FORM * These elements were designed to function using only the * background-color style which makes it perfectly acceptable * to use them on any element which requires a background. * They have only been given "btn" names to conform to typical * bootstrap html styling. Feel free to change them! */ .btn-blue.btn-gradient { background-color: #008aaf } .btn-blue2.btn-gradient { background-color: #0070ab } .btn-blue3.btn-gradient { background-color: #066b95 } .btn-blue4.btn-gradient { background-color: #005789 } .btn-blue5.btn-gradient { background-color: #00416d } .btn-blue6.btn-gradient { background-color: #043a53 } .btn-blue7.btn-gradient { background-color: #09203f } .btn-green.btn-gradient { background-color: #368d0d } .btn-green2.btn-gradient { background-color: #33881b } .btn-green3.btn-gradient { background-color: #00520a } .btn-green4.btn-gradient { background-color: #274d00 } .btn-green5.btn-gradient { background-color: #0d2f00 } .btn-red.btn-gradient { background-color: #eb050e } .btn-red2.btn-gradient { background-color: #d10011 } .btn-red3.btn-gradient { background-color: #a6050b } .btn-red4.btn-gradient { background-color: #930b1f } .btn-purple.btn-gradient { background-color: #9c457e } .btn-purple2.btn-gradient { background-color: #6a254b } .btn-purple3.btn-gradient { background-color: #71002f } .btn-purple4.btn-gradient { background-color: #36143e } .btn-orange.btn-gradient { background-color: #f93e0d } .btn-orange2.btn-gradient { background-color: #fe561f } .btn-orange3.btn-gradient { background-color: #ff7214 } .btn-yellow.btn-gradient { background-color: #fac908 } .btn-yellow2.btn-gradient { background-color: #e9bb2d } .btn-brown.btn-gradient { background-color: #99714b } .btn-brown2.btn-gradient { background-color: #6c4517 } .btn-brown3.btn-gradient { background-color: #4f1a16 } .btn-creme.btn-gradient { background-color: #ffd266 } .btn-creme2.btn-gradient { background-color: #fedd9a } .btn-creme3.btn-gradient { background-color: #bca339 } .btn-dark5.btn-gradient { background-color: #151416 } .btn-dark4.btn-gradient { background-color: #2c2c2c } .btn-dark3.btn-gradient { background-color: #333333 } .btn-dark2.btn-gradient { background-color: #444444 } .btn-dark.btn-gradient { background-color: #555555 } /* COLOR MODIFICATIONS SPECIFICALLY FOR BUTTONS * Any variations to buttons were placed below so that * the above classes contain only color styles. This * allows the styles to be used on any element rather * than just "Text" or "Buttons" as their name suggest */ .btn-creme { border-color: #f5c348 } .btn-creme2 { border-color: #f7ca5c } .btn-light6 { border-color: #e5e5e5 } .btn-light7 { border-color: #eee } .btn-light, .btn-light2, .btn-light3, .btn-light4, .btn-light5, .btn-light6, .btn-light7, .btn-default { color: #555 } .btn-light:focus, .btn-light2:focus, .btn-light3:focus, .btn-light4:focus, .btn-light5:focus, .btn-light6:focus, .btn-light7:focus, .btn-default:focus { color: #555 } .btn-light.btn-gradient, .btn-light2.btn-gradient, .btn-light3.btn-gradient, .btn-light4.btn-gradient, .btn-light5.btn-gradient, .btn-light6.btn-gradient, .btn-light7.btn-gradient, .btn-default.btn-gradient { text-shadow: 0 1px #ffffff; border-color: rgb(204,204,204) rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18); background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.9) 50%,rgba(255,255,255,0.1) 100%); background-image: linear-gradient(to bottom, rgba(255,255,255, 0.9) 10%,rgba(255,255,255,0.1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); } .btn-creme:focus, .btn-creme2:focus, .btn-yellow:focus, .btn-yellow2:focus { color: #ca8f00 } .btn-creme, .btn-creme2, .btn-yellow, .btn-yellow2 { color: #ca8f00; font-weight: 600; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.55); } .btn-yellow:hover, .btn-yellow2:hover, .btn-creme:hover, .btn-creme2:hover, .btn-creme3:hover, .btn-light:hover, .btn-light2:hover, .btn-light3:hover, .btn-light4:hover, .btn-light5:hover, .btn-light6:hover, .btn-light7:hover, .btn-default:hover { color: #555 } /* --------------------------------------- LAYOUT CHANGES - Primarily for Demo ----------------------------------------*/ body.boxed-example .console-btn-5, body.boxed-example #timeline-widget { display: none !important } body.boxed-example .container .col-md-11, body.boxed-example .container .col-md-10, body.boxed-example .container .col-md-9, body.boxed-example .container .col-md-8, body.boxed-example .container .col-md-7, body.boxed-example .container .col-md-6, body.boxed-example .container .col-md-5, body.boxed-example .container .col-md-4, body.boxed-example .container .col-md-3, body.boxed-example .container .col-md-2 { float: none; width: 100%; } body.boxed-layout #console-btns #console-search-btn { display: none !important; } @media (min-width: 1368px) { body.boxed-layout #console-btns .row > div { width: 25%; float: left; } } /* --------------------------------------- LAYOUT SETTINGS ----------------------------------------*/ body.hidden-breadcrumbs #topbar { display: none } body.hidden-searchbar #sidebar-search { display: none } /* fixed elements */ #sidebar.affix, #topbar.affix { position: fixed } /* give top padding to an element if its sibling is fixed * this compensates for the change in height */ header.navbar-fixed-top + #main { padding-top: 50px } #topbar.affix + .container { padding-top: 87px } /* for preview only - no real use in development enviroment */ body.hidden-breadcrumbs.fixed-breadcrumbs #content > .container { padding-top: 35px } /* boxed layout */ body.boxed-layout { background: #f9f9f9 } body.boxed-layout #main { width: 1150px !important; margin: 0 auto; border-right: 1px solid #CCC; border-left: 1px solid #CCC; background: #e8e8e8; } body.boxed-layout #content:after { display: none } body.boxed-layout #content { border-left: 1px solid #CCC } body.boxed-layout .navbar { width: 1150px !important; margin: 0 auto !important; border-top: 0; border: 1px solid #CCC; box-shadow: none; } body.boxed-layout #sidebar-search { box-shadow: none } body.boxed-layout #topbar { border-left: 0 } body.boxed-layout #sidebar:before { display: none } body.boxed-layout #sidebar:after { position: fixed; display: block; top: 0; bottom: 0; width: 240px; content: ""; z-index: -2; background: #fff; } body.sidebar-collapsed #sidebar:before { width: 40px } body.boxed-layout.sidebar-collapsed #sidebar:after { width: 40px } @media (max-width: 1450px) { body.boxed-layout #sidebar:after { width: 210px } } @media (max-width: 1200px) { body.boxed-layout #sidebar:after { width: 40px } } .multiselect:hover #checkboxes, .multiselect:hover #checkboxes1{ display: block !important;}