/* ========================================================================== Base styles ========================================================================== */ body { color: #5D5F63; background: #212121; font-family: 'Open Sans', sans-serif; padding: 0px; margin: 0px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a:link, a:visited { text-decoration: none; outline: none; color: #e84c3d; } a:hover, a:active { outline: none; text-decoration: none; color: #16a086; } h1, h2, h3, h4, h5, h6 { font-family: 'Source Sans Pro', Arial, sans-serif; } p { font-size: 14px; } hr { margin-top: 10px; margin-bottom: 10px; } img { max-width: 100%; } ::selection { background: #fff7dd; } ::-moz-selection { background: #fff7dd; } /* ========================================================================== Layout ========================================================================== */ #container { width: 100%; height: 100%; z-index: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* Header */ #header { z-index: 200; background: #fff; min-height: 80px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-right: 0; } #header .brand { float: left; width: 240px; height: 80px; padding: 0; position: relative; background: url('../img/logoBG.jpg') no-repeat 0px 0px; } #header .logo { color: #fff; font-size: 1.7em; text-transform: uppercase; padding: 23px 0 0 75px; display: inline-block; } #header .logo span { font-weight: 700; } #header .toggle-navigation button:hover, #header .toggle-navigation button:active, #header button#toggle-mail:hover, #header button#toggle-mail:active { background: #e84c3d; } #header .toggle-navigation button:hover i, #header button#toggle-mail:hover i { color: #F6F6F6; } #header .toggle-navigation.toggle-left { margin-top: 5px; margin-left: 20px; display: inline-block; } #header .btn-default { padding: 3px 9px; background: #F6F6F6; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 35px; height: 35px; } #header .btn-default .fa-bars, #header .btn-default .fa-comment { cursor: pointer; color: #797979; } #header .btn-default .fa-info, #header .btn-default .fa-envelope, #header .btn-default .fa-user { color: #797979; } #header .user-nav button:hover, #header .user-nav button:active { background: #e84c3d; } #header .user-nav button:hover i { color: #F6F6F6; } #header .lessonTitle { display: inline-block; margin:0 0 0 20px; } #header .pull-right { float: right !important; margin-top:25px; margin-right:20px; } /* Sidebar */ .sidebar { width: 240px; height: 100%; background: #222; position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; z-index: 100; } .sidebar-toggle { margin-left: -240px; } #leftside-navigation ul, #leftside-navigation ul ul { margin: -2px 0 0; padding: 0; } #leftside-navigation ul li { list-style-type: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } #leftside-navigation ul li a { color: #aeb2b7; text-decoration: none; display: block; padding: 18px 0 18px 25px; font-size: 12px; outline: none; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; transition: all 200ms ease-in; } #leftside-navigation ul li a span { display: inline-block; } #leftside-navigation ul ul li { background: #333; margin-bottom: 0; margin-left: 0; margin-right: 0; border-bottom: none; } #leftside-navigation ul ul li a { font-size: 12px; padding-top: 13px; padding-bottom: 13px; color: #aeb2b7; } #leftside-navigation ul li a i { width: 20px; } #leftside-navigation ul li a i.fa-angle-right, #leftside-navigation ul li a i.fa-angle-left { padding-top: 3px; } #leftside-navigation ul ul { display: none; } #leftside-navigation li.active ul { display: block; } #leftside-navigation ul li a:hover, #leftside-navigation ul li.active > a { color: #e84c3d; } .btn-primary + .dropdown-menu > li > a:hover, .btn-primary + .dropdown-menu > li > a:active { background-color: #16a086; } /* ========================================================================== Main Content ========================================================================== */ .main-content-wrapper { margin-left: 240px; margin-right: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: #f1f2f7; min-height: 1000px; } .main-content-wrapper #main-content { background: url('../img/webBg.png') no-repeat top left; border-top: solid thin #e7e8ec; display: inline-block; padding: 15px 15px 0 15px; width: 100%; } .main-content-wrapper #main-content .h1 { margin: 0; padding: 0px 10px 40px 10px; float: left; line-height: 10px; font-weight: 300; font-size: 42px; font-family: 'Source Sans Pro', Arial, sans-serif; } .main-content-toggle-left { margin-left: 0; } .main-content-toggle-right { margin-right: 240px; } /* ========================================================================== Buttons ========================================================================== */ .btn { border: none; font-size: 15px; font-weight: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; padding: 8px 14px; margin-bottom: 5px; -webkit-font-smoothing: subpixel-antialiased; -webkit-transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear; transition: border 0.25s linear, color 0.25s linear, background-color 0.25s linear; } .btn:hover, .btn:focus { outline: none; } .btn:active, .btn.active { outline: none; -webkit-box-shadow: none; box-shadow: none; outline: none!important; } .btn.disabled, .btn[disabled], .btn fieldset[disabled] .btn { background-color: #bdc3c7; color: rgba(255, 255, 255, 0.75); opacity: 0.7; filter: alpha(opacity=70); } /* Default Buttons*/ .btn-default, a.btn-default:link, a.btn-default:visited { color: #ffffff; background-color: #bdc3c7; outline: none!important; } a.btn-default:hover, a.btn-default:active { color: #ffffff; background-color: #cbd0d3; border-color: #cbd0d3; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #ffffff; background-color: #cbd0d3; border-color: #cbd0d3; } .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background: #bdc3c7; border-color: #bdc3c7; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #bdc3c7; border-color: #bdc3c7; } .btn-primary, a.btn-primary:link, a.btn-primary:visited { color: #fff; background-color: #e84c3d; } a.btn-primary:hover, a.btn-primary:active { color: #ffffff; background-color: #C62F28; border-color: #C62F28; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #ffffff; background-color: #C62F28; border-color: #C62F28; } .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background: #e84c3d; border-color: #e84c3d; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #e84c3d; border-color: #e84c3d; } .btn-info { color: #ffffff; background-color: #3598db; } .btn-info, a.btn-info:link, a.btn-info:visited { color: #ffffff; background-color: #3598db; } a.btn-info:hover, a.btn-info:active { color: #ffffff; background-color: #4ba3df; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { color: #ffffff; background-color: #4ba3df; border-color: #4ba3df; } .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { background: #3598db; border-color: #3598db; } .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active { background-color: #3598db; border-color: #3598db; } .btn-danger { color: #ffffff; background-color: #e84c3d; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger { color: #ffffff; background-color: #eb6154; border-color: #eb6154; } .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger { background: #eb6154; border-color: #eb6154; } .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active { background-color: #e84c3d; border-color: #e84c3d; } .btn-success { color: #ffffff; background-color: #2dcc70; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { color: #ffffff; background-color: #3ed47d; border-color: #3ed47d; } .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { background: #2dcc70; border-color: #2dcc70; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { background-color: #2dcc70; border-color: #2dcc70; } .btn-warning { color: #ffffff; background-color: #f1c40f; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning { color: #ffffff; background-color: #f1c40f; border-color: #f1c40f; } .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning { background: #f2ca27; border-color: #f2ca27; } .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active { background-color: #f1c40f; border-color: #f1c40f; } /* Button Sizes */ .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; } .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } /* ========================================================================== Breadcrumbs ========================================================================== */ .breadcrumb { background: none; } .breadcrumb > li { font-size: 12px; } /* ========================================================================== Icons ========================================================================== */ .fa-hover { margin: 5px 0; } .fa-hover i { font-size: 14px; margin-right: 5px; width: 20px; } /* ========================================================================== Panels ========================================================================== */ .panel { border: none; box-shadow: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .panel > .panel-heading { font-size: 13px; font-weight: 400; text-transform: uppercase; padding: 15px; } .panel .actions { position: absolute; right: 30px; top: 18px; } .panel .actions i { font-size: 1em; margin: 0 3px; } .panel .actions i:hover { cursor: pointer; } .panel > .panel-footer { font-size: 13px; font-weight: 400; text-transform: uppercase; padding: 15px; } .panel-default > .panel-heading { border-color: #eff2f7; background: #fafafa; color: #767676; } .panel-default .actions i { font-size: 1em; color: #bdc3c7; margin: 0 3px; } .panel-default .actions i:hover { cursor: pointer; color: #767676; } .panel-default > .panel-footer { border-color: #eff2f7; background: #fafafa; color: #767676; } .panel-primary > .panel-heading { color: #fff; background-color: #e84c3d; border-color: #e84c3d; } .panel-primary { border-color: #e84c3d; } .panel-primary > .panel-heading a, .panel-primary > .panel-heading a:hover { color: #fff; } .panel-solid-default > .panel-heading, .panel-solid-default > .panel-body, .panel-solid-default > .panel-footer { background: #bdc3c7; color: #fff; border: none; } .panel-solid-primary > .panel-heading, .panel-solid-primary > .panel-body, .panel-solid-primary > .panel-footer { background: #e84c3d; color: #fff; border: none; } .panel-solid-success > .panel-heading, .panel-solid-success > .panel-body, .panel-solid-success > .panel-footer { background: #2dcc70; color: #fff; border: none; } .panel-solid-warning > .panel-heading, .panel-solid-warning > .panel-body, .panel-solid-warning > .panel-footer { background: #f1c40f; color: #fff; border: none; } .panel-solid-info > .panel-heading, .panel-solid-info > .panel-body, .panel-solid-info > .panel-footer { background: #3598db; color: #fff; border: none; } .panel-solid-danger > .panel-heading, .panel-solid-danger > .panel-body, .panel-solid-danger > .panel-footer { background: #e84c3d; color: #fff; border: none; } /* ========================================================================== Modal ========================================================================== */ .modal-footer .btn + .btn { margin-bottom: 5px; } .modal .modal-body.modal-scroll { max-height: 350px; overflow-y: auto; } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (max-width: 767px) and (min-width: 480px) { /* Main Content */ #main-content .h1 { font-size: 35px; } } @media only screen and (max-width: 660px) { #header { height: 160px; } #header .brand { width: 100%; } #header .user-nav ul { padding-left: 0; } #header .toggle-navigation.toggle-left { float: left; } .sidebar { margin-left: -240px; } .sidebar-toggle { margin-left: 0; width: 100%; } .main-content-wrapper { margin-left: 0; } .main-content-toggle-left { margin-left: 660px; } .sidebarRight { top: 160px; width: 100%; } .user-nav ul li { font-size: 12px; } } @media only screen and (max-width: 479px) { /* Main Content */ #main-content .h1 { font-size: 22px; } #header .dropdown.messages { display: none; } }