leadership-training/css/main.css

781 строка
12 KiB
CSS
Executable File

.project {
padding-bottom: 2em;
}
.home-card h1 {
font-family: Arvo,sans-serif;
font-size: 1.9rem;
color:#000;
}
.highlight {
padding: 0.3em 0;
font-family: Arvo,sans-serif;
background-color: #FA8CFF;
font-weight:700;
line-height: 1.9;
color:#000;
}
.home-card {
padding:1.5em 0.5em;
margin-bottom:2em;
box-shadow:0 0 .625em .3125em rgba(0,0,0,.08)
}
.hero-unit {
text-align: center;
padding: 4em 1em 3em;
background-image: url("/leadership-training/img/Working-open-header.jpg");
background-size: cover;
}
.hero-unit h1 {
color: white;
display: inline;
padding: .3em 0;
font-family: Arvo,sans-serif;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
background-color: black;
}
.hero-unit p {
font-size: 2rem;
margin-top:1em;
color: black;
}
.intro {
letter-spacing: 0rem;
margin:0.5em 0 2em;
}
.home-page .intro {
text-align: center;
}
.lesson-content .intro p {
font-size: 1.3rem;
line-height: 2rem;
}
h2 {
margin: 1rem 0;
font-family: Arvo,sans-serif;
color:black;
}
ol.toc {
list-style-type: none;
}
h3 {
font-weight: 200;
margin-top: 3rem;
margin-bottom: 2rem;
font-size: 2rem;
font-family: Arvo,sans-serif;
color: #A95FAD;
}
h5 {
font-weight: 400;
}
.details + h3 {
margin-top: 1.5rem;
}
.details ul {
padding-left: 1.5rem;
}
a, a:link {
color:#3bb7ef;
}
a:hover {
color:#014c8c;
text-decoration: underline;
}
a:hover edit:before {
text-decoration: none;
}
.details time {
margin-top: 5px;
}
.details time, .details edit {
margin-bottom: 3px;
display: block;
}
time {
color: #2581B7;
}
.details time:before {
content: "\f017";
font-family: FontAwesome;
margin-right: 6px;
}
.video-player:before{
content: "\f16a";
font-family: FontAwesome;
}
.assignment:before{
content: "\f044";
font-family: FontAwesome;
margin-right: 6px;
}
h3 .assignment:before {
margin-right: 8px;
font-size: 1.75rem;
}
.suggest-changes {
margin-left: 1.25rem;
position: relative;
}
.suggest-changes:before {
content: "\f040";
font-family: FontAwesome;
margin-right: 6px;
font-size: .9rem;
position: absolute;
left: -1.2rem;
}
#markdown-toc {
border: solid 1px #DDD;
border-width: 1px 0 1px 0;
padding: 1.4rem 1rem 1.4rem 2rem;
}
#markdown-toc:before {
content: "Table of Contents";
color: rgba(0,0,0,.7);
margin-left: -2rem;
font-size: 18pt;
}
#markdown-toc li {
margin: .5rem 0;
}
pre, code, pre code {
border: none;
border-radius: 0;
background-color: #f9f9f9;
font-size: 0.85em;
}
pre {
font-size: 1em;
}
code {
color: inherit;
}
html.no-js .sidebar .collapsible-content {
/* The links in the sidebar are crucial to navigating the site.
* If JS is disabled, we want the links visible at all costs. */
opacity: 1 !important;
max-height: none !important;
}
.sidebar {
position: relative;
background-color: white;
position: relative;
height: auto;
color: #000;
font-size: 1rem;
padding: 0;
border-right: 1px solid #cfcfcf;
/*box-shadow: 0 5px 5px rgba(0,0,0,.5);*/
}
.sidebar a {
font-size: inherit;
color: inherit;
line-height: 1;
}
.sidebar .collapsible-content {
transition: all 0.5s ease;
opacity: 1;
max-height: 1400px;
padding-bottom: 1rem;
}
.sidebar .collapsible-content.collapsed {
opacity: 0;
max-height: 0;
padding-bottom: 0;
}
.lesson-content {
padding:1rem;
}
@media screen and (min-width: 992px) {
.sidebar {
transition: background-color 5ms;
}
.sidebar .collapsible-content.collapsed {
opacity: 1;
max-height: auto;
}
}
.sidebar-header {
position: relative;
font-size: 1rem;
padding: 1rem 1em;
overflow: hidden;
}
.sidebar-header a:hover,
.sidebar-header a:focus {
text-decoration: none;
}
.sidebar-header .moz-logo {
width:90px;
}
.sidebar-header span {
padding: 0.3em 0;
font-family: Arvo,sans-serif;
background-color: #FA8CFF;
font-weight:700;
line-height: 1.9;
}
.sidebar-header .glyphicon-menu-hamburger {
position: absolute;
right: 1rem;
top: 2.5rem;
color: #fff;
border: none;
background: transparent;
padding: 0;
}
.sidebar-header .glyphicon-menu-hamburger:focus {
color: #e6e6e6;
}
.sidebar-menu {
padding-bottom: 0;
margin-bottom: 0;
}
.sidebar-menu li {
font-size: 1rem;
}
.sidebar-menu a {
position: relative;
display: block;
outline: none;
font-size: 1em;
}
.sidebar-menu > li > a {
opacity: .8;
}
.sidebar-menu > li.selected > a,
.sidebar-menu > li:hover > a
{
opacity: 1;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li > a:focus {
background-color: #66FFFF;
color:black;
transition: background-color 3ms;
}
.sidebar-menu a:hover,
.sidebar-menu a:focus {
text-decoration: none;
}
.sidebar-menu li.selected {
background-color: #A6FFFF;
}
.sidebar-menu strong {
display: inline;
font-weight: 700;
text-transform: uppercase;
vertical-align: middle;
margin-left: 1rem;
}
.sidebar-menu .external-link:after {
color: rgba(255, 255, 255, 0.5);
}
.sidebar-menu .glyphicon {
position: absolute;
right: 1rem;
font-size: 1.5rem;
top: calc(41.5%);
color: #cd00cc;
transition: color 3ms;
visibility: hidden;
}
.sidebar-menu li {
margin:0;
padding: 0;
}
.sidebar-menu>li>a{
padding: 20px 20px;
}
.sidebar-line {
border-top:1px solid #cfcfcf;
}
@media screen and (min-width: 1200px) {
.sidebar-menu .glyphicon {
right: 1.5rem;
}
}
@media screen and (min-width: 992px) {
.sidebar-menu .glyphicon {
visibility: visible;
}
}
.sidebar-menu .img-container {
display: inline-block;
overflow: hidden;
width: 3.5rem;
text-align: center;
vertical-align: middle;
}
.sidebar-menu img {
float: none;
width: 2rem;
opacity: 0.6;
}
.sidebar-menu .activities img,
.sidebar-menu .opportunities img {
width: 1.6rem;
}
.sidebar-menu .tools-page img {
width: 2.3rem;
}
.sidebar-menu .community img {
width: 2.8rem;
}
.sidebar-subitems {
overflow: hidden;
list-style: none;
padding: .25rem .5rem 1.5rem 2rem;
}
.sidebar-subitems li {
margin-bottom: 0.5rem;
padding-right:10px;
}
.sidebar-subitems li:last-child {
margin-bottom: 0;
}
.sidebar-subitems li a::before {
content: "\f105";
font-family: "FontAwesome";
display: inline-block;
position: absolute;
left: 0rem;
}
.sidebar-subitems a {
position: relative;
display: inline-block;
padding: 0 0 0 1rem;
line-height: 1.25rem;
color: rgba(0,0,0,.6);
font-size:1rem;
transition: color .15s ease-out;
}
.sidebar-subitems a:hover {
color: rgba(0,0,0,1);
}
.sidebar-subitems a.current {
color:black;
}
.sidebar footer {
padding: 20px;
color:rgba(0,0,0,0.8);
border-top:1px solid #cfcfcf;
}
#content {
padding:0;
max-width:1400px;
}
#content img {
max-width:100%;
border:1px solid #CCC;
image-orientation:from-image;
}
#content h4 {
margin:0;
font-family: Arvo,sans-serif;
}
strong {
font-weight: 500;
}
blockquote {
padding: 0 1.5rem;
margin-bottom: 2rem;
line-height: 2.2rem;
font-size: 1.25rem;
border-left: 2px solid rgba(0, 0, 0, 0.3);
color: rgba(0, 0, 0, 0.5);
}
.lesson-content blockquote p {
font-size: 1.25rem;
color: rgba(0, 0, 0, 0.5);
}
body ul, body ol {
padding-left: 32px;
}
body.rtl {
direction: rtl;
}
body.rtl #header .brand {
float: right;
margin-left: 5px;
}
body.rtl .row-fluid [class*="span"] {
float: right !important;
margin-left: 0;
margin-right: 2.564102564102564%;
}
body.rtl .row-fluid [class*="span"]:first-child {
margin-right: 0;
}
body.rtl ul, body.rtl ol {
margin: 0 25px 10px 0;
}
table {
margin-bottom: 1rem;
border: 1px solid #e5e5e5;
border-collapse: collapse;
}
td, th {
padding: .25rem .5rem;
border: 1px solid #e5e5e5;
}
a.btn {
border: 2px solid #3bb7ef;
color: #000;
transition: background 0.2s ease-in-out;
white-space:normal;
text-decoration: none;
padding: 0.5rem 1rem;
margin-top: 1rem;
line-height: 2rem;
font-weight: 600;
text-transform: uppercase;
}
a.btn:hover {
opacity: 1;
background: #00FFFF;
border-color: #00FFFF;
color: #000;
}
/* PASSING */
@-webkit-keyframes passing {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
50% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 0.8;
}
100% {
-webkit-transform: translateX(250%);
-ms-transform: translateX(250%);
transform: translateX(250%);
opacity: 0;
}
}
@keyframes passing {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
50% {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 0.8;
}
100% {
-webkit-transform: translateX(250%);
-ms-transform: translateX(250%);
transform: translateX(250%);
opacity: 0;
}
}
.btn-next:hover > i {
-webkit-animation: passing 100ms linear;
animation: passing 100ms linear;
}
.btn-next:hover > i {
opacity:0;
}
.mofooter {
background: #000;
color: #fff;
text-align: center;
padding: 2.8125rem 0.625rem;
}
.mofooter .icon-container {
margin: 1.25rem 0;
}
.mofooter .icon-container .icon {
cursor: pointer;
display: inline-block;
font-weight: 300;
font-size: 1rem;
}
.mofooter .icon-container .icon img {
width: 1.25rem;
}
.mofooter .icon-container .icon .footer-icon {
opacity: 0.5;
}
.mofooter .icon-container .icon a {
color: #fff;
opacity: 0.5;
text-decoration: none;
}
.mofooter .icon-container .icon:hover a,
.mofooter .icon-container .icon:hover .footer-icon {
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
opacity: 1;
}
.mofooter .footer-content {
max-width: 35.625rem;
margin: 0 auto;
}
.mofooter .footer-content p {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
line-height: 1.5rem;
margin: 0;
}
.mofooter .footer-content p a {
color: rgba(255, 255, 255, 0.8);
line-height: inherit;
}
.mofooter .footer-content p a:hover {
color: white;
}
.mofooter .icons {
margin-bottom: 1.25rem;
}
.mofooter .logo {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 0.0625rem solid #666;
display: inline-block;
}
@media screen and (min-width: 768px) {
.mofooter .logo {
border-bottom: 0;
border-right: 0.0625rem solid #666;
padding-bottom: 0;
padding-right: 1.25rem;
margin-bottom: 0;
margin-right: 1.25rem;
}
.lesson-content {
padding: 2rem 3.5rem;
}
.hero-unit h1 {
/* font-size: 4.5rem;*/
}
}
@media screen and (max-width: 768px) {
.mofooter .icon-container:first-child {
margin-top: 0;
}
.mofooter .icon-container:last-child {
margin-bottom: 2.8125rem;
}
.mofooter .icon-container .footer-icon {
display: block;
margin: 0.375rem auto 0.375rem;
}
}
@media screen and (min-width: 768px) {
.mofooter .footer-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mofooter .footer-content .footer-icon {
margin-left: 0.625rem;
}
.mofooter .footer-content p {
text-align: left;
width: calc(89.625%);
}
.mofooter .icon-container {
display: inline-block;
margin: 0 1.125rem;
}
.mofooter .icon-container .icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.mofooter .icon-container .icon .footer-icon {
margin: 0 0.625rem 0 0;
display: inline-block;
}
}
footer.col-sm-12 {
padding:0;
}
.lesson-content p, .lesson-content li {
font-size: 1rem;
line-height: 1.4rem;
color: rgba(0,0,0);
}
.lesson-content p {
line-height: 1.5rem;
margin-bottom: 1.75rem;
}
hr {
margin: 2rem 0;
}
.help-us {
margin-top: 2.5rem;
padding-top: 1rem;
border-top: solid 1px #cfcfcf;
}
.anchorjs-link {
margin-left: 0px;
opacity: 0;
position: relative;
top: 1px;
}
.anchorjs-link:hover {
text-decoration: none;
opacity: .7;
}
video {
margin-bottom: 1.5rem;
border: solid 1px #DDD;
}
.subhead {
font-style: italic;
margin: 0 0 0.5em 0;
color: #777;
}
.mentor h4 {
color: #A95FAD;
}
.mentor {
padding-bottom: 1.5em;
}