/**
* znanja main stylesheet.
*
* @author znanja, inc.
*/
/* Infrastructure
* ========================================================================== */
html
{
height: 100%;
}
span[rel=tootip], span[rel=popover]
{
display: inline-block;
}
/* Browser support warnings */
#firefox-upgrade, #opera-upgrade, #chrome-upgrade
{
display: none;
}
/* Fix dragging in some browsers */
[draggable=true] {
-khtml-user-drag: element;
}
/* Bootstrap modifications and fixes
* ========================================================================== */
/* Minicolors messes with the padding of help-block. */
p.help-block.minicolors-fix
{
margin-top: 10px;
}
/* Fix .help-block fails after non-<input> element */
.form-horizontal .typeahead + .help-block,
.form-horizontal button + .help-block
{
margin-top: 10px;
}
/* Fix cursors if no "href" specifed */
.nav a
{
cursor: pointer;
}
/* Allow for responsive images to be centered */
.img-responsive.img-center
{
margin: auto;
}
/* Fix extra border on panels nested inside of a collapsible panel */
.panel-default > .panel-heading + .panel-collapse .panel-body .panel-body
{
border-top: 0;
}
/* Icons
* -------------------------------------------------------------------------- */
/* So icons are properly sized in headings and such */
[class^="icon-"], [class*=" icon-"]
{
font-size: 14px;
}
/* Fix icons not being vertically centred very well in buttons */
.btn [class^="icon-"], btn [class*=" icon-"]
{
line-height: normal;
}
/* Forms
* -------------------------------------------------------------------------- */
/* Workaround for https://github.com/twitter/bootstrap/issues/5313 that
* Bootstrap refuses to fix */
fieldset > legend + .control-group
{
margin-top: 0;
}
/* Fix too much spacing between controls-rows having radio buttons */
div.controls-row .radio
{
min-height: 0;
}
div.controls-row + div.controls-row .radio
{
padding-top: 0;
}
/* Fix icons not being vertically centred very well in buttons */
.btn [class^="icon-"], btn [class*=" icon-"] { line-height: normal; }
/* Fix enormous amount of padding on upload progress bars and add better
* spacing. */
form .uploading
{
margin: 1em 0;
}
form .uploading > .progress
{
margin-bottom: 0.5em;
}
/* For forms that wrap the modal-body and modal-footer of a modal. */
.form-modal
{
margin-bottom: 0;
}
/* Unique fields
* --------------------------------------------------------------------------
* An icon is positioned on top of the input to indicate whether the value is
* valid and meets uniqueness criteria.
*/
.unique-taken, .unique-invalid
{
display: none;
}
/* Don't let text run underneath icon */
.unique-group input
{
padding-right: 40px;
}
/* Align text with middle of field when in two-column mode */
@media (min-width: 992px)
{
.col-unique-feedback
{
padding-top: 2.2em;
height: 0; /* Don't push down next field if feedback is long */
}
}
/* Icons */
.unique-group
{
position: relative;
}
.unique-group .fa-spinner,
.unique-group .fa-check-square,
.unique-group .fa-remove
{
display: none;
position: absolute;
top: 22px;
right: 15px;
margin-top: -7px;
}
.form-group-unique.ajax-loading .unique-group .fa-spinner
{
display: inline-block;
}
.form-group-unique.has-success .unique-group .fa-check-square
{
display: inline-block;
color: #468847;
}
.form-group-unique.has-error .unique-group .fa-remove
{
display: inline-block;
color: #b94a48;
}
/* Remove default spinner on .ajax-loading */
.form-group-unique.ajax-loading
{
background: none;
}
/* Popovers
* -------------------------------------------------------------------------- */
/* So much for Bootstrap 2.3 fixing popover issues. data-container is only
* really useful if set to "body", but popovers don't have a high enough z-index
* to display above modals. */
.popover
{
z-index: 99999;
}
/* Too much margin for last paragragh */
.popover-content p:last-child
{
margin-bottom: 0;
}
/* Tabs
* -------------------------------------------------------------------------- */
/* Tabs should always show a pointer even if they don't have "href" set */
.nav-tabs > li > a, .dropdown-menu > li > a
{
cursor: pointer;
}
/* Tabbale pans should always have 100% width for the tabs */
.tabbable ul.nav-tabs
{
width: 100%;
}
/* Tab panes shouldn't be pushed right against the nav-tabs */
.tab-pane
{
margin-top: 20px;
}
.tab-content
{
clear: both;
}
/* Loading notifications
* ========================================================================== */
/* AJAX form icons
* -------------------------------------------------------------------------- */
form.ajax-loading .form-actions
{
background-image: url(../images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
}
.form-horizontal.ajax-loading .form-actions
{
background-position: 120px center;
}
section.ajax-loading, div.ajax-loading
{
background-image: url(../images/loading.gif);
background-repeat: no-repeat;
background-position: center center;
min-height: 16px;
}
.accordion-toggle.ajax-loading
{
background: url(../images/loading.gif) right center no-repeat;
margin-right: 16px;
}
/* Section navbar
* ========================================================================== */
.navbar.navbar-sections
{
border: 0;
}
.navbar.navbar-sections .container-fluid
{
background: #f39c12;
border-radius: 0;
border: 0;
text-align: center;
margin-top: 80px;
/* min-height causes the navbar to increase in height when hovering over the
* nav tabs in IE because IE */
height: 81px;
/* Hide box-shadow from overlapping toolbar below */
overflow: hidden;
}
.navbar.navbar-sections .nav > li
{
float: left;
display: inline-block;
}
.navbar.navbar-sections .nav > li > a, .navbar.navbar-sections .nav > li > a:hover
{
background: #f39c12;
font-size: 1.2em;
text-align: center;
width: 130px;
color: #fff;
padding: 15px;
}
.navbar.navbar-sections .nav > li > a:hover
{
background-color: #dd8c0c
}
.navbar-sections .nav > li:first-child > a, .navbar-sections .nav > li:first-child > a:hover
{
margin-left: 0;
}
.navbar.navbar-sections .nav-tabs
{
border-bottom: none;
}
.navbar.navbar-sections .nav-tabs>li
{
margin: 0;
padding: 0;
}
.navbar.navbar-sections .nav-tabs>li>a
{
border-radius: 0;
border-top: 0;
border-left: 0;
border-color: #f5ab35;
height: 81px;
margin: 0;
}
/* Add a left border to the first item */
.navbar.navbar-sections .nav-tabs>li:first-child > a
{
border-left: 1px solid #f5ab35;
}
.navbar.navbar-sections .nav > li.active > a
{
background-color: #dd8c0c
}
@media(max-width: 1400px)
{
/* Prevent tabs from wrapping at this screen size */
.navbar.navbar-sections .container-fluid
{
padding-left: 20px;
}
}
@media(max-width: 1170px)
{
/* Condense tabs further to prevent wrapping */
.navbar.navbar-sections .nav > li > a,
.navbar.navbar-sections .nav > li > a:hover
{
width: 150px;
}
}
/* Toolbar
* ========================================================================== */
.btn-toolbar
{
margin-bottom: 20px
}
/* Sidebar
* ========================================================================== */
/* User information
* -------------------------------------------------------------------------- */
#basic_user_info .avatar
{
margin: 1em 0;
}
#basic_user_info .icon-nametag
{
float: left;
}
#basic_user_info .info
{
margin-left: 2em;
}
#basic_user_info .name, #basic_user_info .email
{
display: block;
overflow: hidden;
text-overflow: ellipsis
}
/* Custom design elements
* ========================================================================== */
/* Form consisting of a single button */
form.form-button
{
margin: 0;
}
/* Pagination
* -------------------------------------------------------------------------- */
tr.recalled
{
background-color: whiteSmoke;
}
/* Sorting
* -------------------------------------------------------------------------- */
th.sort i.sort
{
margin-left: 0.25em;
}
/* Overlay messages
* -------------------------------------------------------------------------- */
.message-overlay
{
background: rgba(233, 233, 233, 0.5);
box-shadow: 0 0 5px #cecece;
color: black;
display: none;
font-size: 4em;
left: 0;
line-height: normal;
margin-top: -1em;
padding: 0.5em 0;
position: fixed;
text-align: center;
text-shadow: 3px 0 5px #fff, -3px 0 5px #fff, 0 3px 5px #aaa,
0 -3px 5px #fff;
top: 50%;
width: 100%;
z-index: 999999;
}
.message-overlay .context
{
font-size: 0.35em;
}
/* Icons
* -------------------------------------------------------------------------- */
.icon-course, .icon-clone-course, .icon-create-course, .icon-sell-course,
.icon-nametag, .icon-visa, .icon-mastercard, .icon-americanexpress, .icon-jcb,
.icon-dinersclub, .icon-discover, .icon-doc-file, .icon-ppt-file
{
background: url(../images/icons.png);
display: inline-block;
vertical-align: middle;
}
.icon-clone-course { background-position: -60px 0; width: 100px; height: 69px; }
.icon-course { background-position: 0 0; width: 59px; height: 47px; }
.icon-create-course { background-position: -161px 0; width: 71px; height: 69px; }
.icon-nametag { background-position: 0 -48px; width: 16px; height: 15px; }
.icon-sell-course { background-position: -233px 0; width: 69px; height: 69px; }
.icon-visa { background-position: -365px -24px; width: 28px; height: 19px; margin-top: -10px }
.icon-mastercard { background-position: -335px -24px; width: 28px; height: 19px; margin-top: -10px }
.icon-americanexpress { background-position: -305px -24px; width: 28px; height: 19px; margin-top: -10px }
.icon-discover { background-position: -365px -4px; width: 28px; height: 19px; margin-top: -10px }
.icon-dinersclub { background-position: -335px -4px; width: 28px; height: 19px; margin-top: -10px }
.icon-jcb { background-position: -305px -4px; width: 28px; height: 19px; margin-top: -10px }
.icon-doc-file { background-position: -17px -48px; width: 16px; height: 16px; }
.icon-ppt-file { background-position: -34px -48px; width: 16px; height: 16px; }
a [class^="icon-"].noblock, a [class*=" icon-"].noblock
{
display: inline-block !important;
}
/* Step-by-step list
* -------------------------------------------------------------------------- */
/* Use an <ol class="steps"> and each step is an item: <li><a>My step</a><li>.
* The <a> is required, but does not have to link anywhere. */
ol.steps
{
counter-reset: li;
margin-left: 0;
}
/* Don't style links that go nowhere */
ol.steps > li a:not([href])
{
color: #888;
text-decoration: none;
}
/* Step number style */
ol.steps > li
{
background: #eee;
display: inline-block;
padding: 0.5em;
position: relative;
margin: 0.25em 0 0.25em 35px;
}
ol.steps > li a:before
{
background: #ccc;
border-radius: 0.5em;
content: counter(li);
counter-increment: li;
font-weight: bold;
margin-right: 0.5em;
padding: 0 0.5em;
}
/* Triangle sides between each step item -- the "inset" border-styles prevents
* Firefox from adding a shadow to the edges of the triangle */
ol.steps > li:before, ol.steps > li:after
{
content: '';
border-width: 17px 0 17px 25px;
position: absolute;
top: 50%;
margin-top: -17px;
}
ol.steps > li:after
{
border-color: transparent transparent transparent #eee;
border-style: inset solid;
right: -25px;
}
ol.steps > li:before
{
border-color: #eee transparent;
border-style: solid inset;
left: -25px;
}
/* Style the ends of the step list */
ol.steps > li:first-child:before, ol.steps > li:last-child:after
{
border: none;
}
ol.steps > li:first-child
{
border-radius: 0.5em 0 0 0.5em;
margin-left: 0;
}
ol.steps > li:last-child
{
border-radius: 0 0.5em 0.5em 0;
}
/* Active color */
ol.steps > li.active
{
background: #ffc507;
}
ol.steps > li.active a
{
color: #333;
}
ol.steps > li.active:before
{
border-color: #ffc507 transparent;
}
ol.steps > li.active:after
{
border-left-color: #ffc507;
}
ol.steps > li.active a:before
{
background: #333;
color: white;
}
/* Slashed containers
* -------------------------------------------------------------------------- */
.vertslash, .horizslash
{
line-height: normal;
font-size: 3em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
.vertslash
{
background: -moz-linear-gradient(100deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: -ms-linear-gradient(100deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: -o-linear-gradient(100deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: -webkit-linear-gradient(100deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: linear-gradient(100deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
padding: 275px 0;
}
.horizslash
{
background: -moz-linear-gradient(-10deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: -ms-linear-gradient(-10deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: -o-linear-gradient(-10deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: -webkit-linear-gradient(-10deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
background: linear-gradient(-10deg, white, white 49%, #e5e5e5 50%,
white 51%, white);
margin: 20px 0;
height: 40px;
}
.vertslash strong, .horizslash strong
{
background: white;
}
/* Choice containers
* -------------------------------------------------------------------------- */
.col-choice-image
{
text-align: center;
margin-bottom: 20px;
}
.col-choice-image img
{
margin: auto;
}
@media (min-width: 992px)
{
/* Horizontally and vertically center image within container. Positioning
* works reliably in IE. This could otherwise be accomplished with flexbox,
* except responsive images stretch outside their container in IE10 only. */
.row-choice
{
position: relative;
}
.col-choice-image
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
.col-choice-image img
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
}
/* Diagrams
* -------------------------------------------------------------------------- */
.dotted-line-vert
{
border-left: 0.3em dotted #333;
height: 5em;
margin: 1em auto;
width: 0;
}
.dotted-line-vert.muted
{
border-color: #999;
}
.diagram-transfer
{
font-size: 24px;
line-height: normal;
margin: 2em 0;
text-align: center;
}
.diagram-transfer [class^='icon-']
{
display: block;
font-size: 5em;
margin: 0.3em 0;
}
@media (max-width: 991px)
{
/* Rotate dotted lines to horizontal on phones */
.dotted-line-vert
{
border-top: 0.3em dotted #333;
width: 5em;
height: 0;
margin: 0 1em;
display: inline-block;
vertical-align: middle;
}
}
/* Fullscreen modals
* -------------------------------------------------------------------------- */
.modal .modal-dialog.modal-fullscreen
{
height: 95%;
width: 95%;
}
/* Assumes the modal as a footer */
.modal .modal-body.modal-fullscreen
{
height: calc(100% - 90px);
max-height: none;
}
/* Flexbox classes
* -------------------------------------------------------------------------- */
@media (min-width: 992px)
{
.flex-row-md-stretch
{
/* Align all children in a single row with equal height */
display: flex;
}
.flex-col-md-stretch
{
/* Align all children in a single column with equal height */
display: flex;
flex-direction: column;
}
.flex-fill-md
{
/* Stretch element to fill remaining space in its container */
flex: 1;
}
}
/* Miscellaneous text and element classes
* -------------------------------------------------------------------------- */
.all-caps { text-transform: uppercase; }
.center { text-align: center; }
.faded { color: #cfcfcf; text-shadow: 0 0 3px #818181; }
.file-type { font-family: monospace; }
.underline { text-decoration: underline; }
.text-copy { max-width: 38em; }
a [class^="icon-"], a [class*=" icon-"]
{
display: inline-block;
}
ol.lettered { list-style-type: lower-alpha; }
ol.roman { list-style-type: lower-roman; }
iframe.video { width: 100%; min-height: 264px; }
/* TODO: Move elsewhere because these are probably page-specific
* ========================================================================== */
.form-group.confirm-password
{
display: none;
}
#courses .col-lg-12 { margin-left: 0; }
.image-pane { text-align: center; }
.image-upload-button { margin-bottom: 20px; }
#storefront-options i
{
display: inline-block;
}
#socialmedia textarea
{
width: 30em;
}
.social-media-buttons
{
text-align: center;
}
.social-media-buttons button
{
margin-right: 15px;
height: 94px;
width: 94px;
}
.social-media-buttons button:hover
{
user-select: none;
-webkit-user-select: none;
transform: scale(1.04);
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
-o-transform: scale(1.04);
-moz-transform: scale(1.04);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.70);
}
.social-media-buttons i
{
display: block;
font-size: 32px;
margin-bottom: 10px
}
/* Bootstrap customizations
* -------------------------------------------------------------------------- */
/* Bootstrap 2 label styles which looks
* much better */
.label, .badge
{
display: inline-block;
padding: 2px 4px;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
white-space: nowrap;
vertical-align: baseline;
}
/* Some trickery to hide the real file input underneath the pretty one, so that
* HTML5 validation messages still shows. It won't show if the field has no
* height, display: none, or visibility: hidden, but this works! */
.input-file ~ input[type=file]
{
height: 1px;
margin-top: -1px;
opacity: 0;
}
.ie .input-file ~ input[type=file]
{
display: block;
opacity: 1;
margin-top: 0;
width: 100%;
height: 45px;
}
/* Miscellaneous fixes
* ========================================================================== */
/* Uhhh, why does this even take up any space? */
iframe[name=google_conversion_frame]
{
display: none;
}