/* Shared styles for the WolframU course catalog.

   developer:   marionm
   requires:    /common/framework/css/framework.en.css
                /wolfram-u/css/shared.en.css
   ========================================================================== */

/* ==========================================================================
   shared
   ========================================================================== */

main header,
main section { margin: 3rem 0; }

main { margin-bottom: 4.5em; }

header+section { margin-top: 2.5rem; }

/* ==========================================================================
   header
   ========================================================================== */

#catalog-header .breadcrumb+.subheading { margin: .3rem 0 0; }

#catalog-header .course-title {}

#catalog-header .course-info {
	padding: 0.8125rem 0 0.3125rem;
	font-size: 15px;
}

.course-info span {
    display: inline-block;
    float: left;
    margin-right: 2rem;
    white-space: nowrap;
}

#catalog-header .download {
    background: url('/wolfram-u/img/download-2x.png') no-repeat;
    background-size: 20px;
    padding-left: 27px;
}

#catalog-header .download img {
    margin-right: .5rem;
    vertical-align: middle;
}

#catalog-header .download a:hover { color: #ff6c00; }

#catalog-header .social { margin: 1.25rem 0 0 0; }

#catalog-header .social a:not(:last-child) { margin-right: .25rem; }

#st-1 .st-total { padding-left: 0 !important; }

#catalog-header .social.right_600 {
	float: right;
	margin: 0;
}

#catalog-header .social.right_600 ~ .page-title.subheading { padding-top: 30px; }

/* ==========================================================================
   begin course
   ========================================================================== */

#begin { text-align: center; }

#begin a {
    display: inline-block;
    position: relative;
}

#begin span {
    position: relative;
    top: -1.5rem;
}

#begin a:hover span { background: #ff6c00; }

/* ==========================================================================
   course overview
   ========================================================================== */

#course-info .course-info span {
    display: inline;
    white-space: normal;
}
   
#course-info #course-info-details {
	margin-top: 10px;
	padding: 5px 0;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

#course-info #course-info-details div {
	padding: 5px 0;
}

#course-info #course-info-details,
#course-info #course-info-overview {
	color: #898989;
}

#course-info #course-info-overview {
	line-height: 1.65rem;
}

#course-info-overview:hover {
	color: #ff6c00 !important;
}

#course-info #course-info-details span {
	float: none;
	display: inline;
    white-space: normal;
}

#course-info-details .course-detail {
	color: #474747;
}

#course-info #course-info-details {
	display: none;
}

#course-info-details a {
	color: #5bb2a6;
}
#course-info-details a:hover {
	color: #ff6c00;
}

#course-info.expanded #course-info-details {
	display: block;
}

#course-info-overview {
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

#course-info-overview > div:first-of-type,
#course-info-overview > div:last-of-type {
	border: none;
}

#course-info-overview > div {
	border-left: 1px solid #ddd;
	display: inline-block;
}

#course-info-overview .course-overview-time {
	padding: 0 0.68rem 0 1.688rem;
	background: url('/wolfram-u/img/Clock-grey.png') no-repeat left .2rem;
	background-size: 1.3rem auto;
}

#course-info-overview .course-overview-level {
	padding: 0 0.68rem 0 2.54rem;
	background: url('/wolfram-u/img/Levels-grey.png') no-repeat .87rem .2rem;
	background-size: 1.3rem auto;
}

#course-info-overview .course-overview-certification {
	padding: 0 0.5rem 0 3.03rem;
	background: url('/wolfram-u/img/Certificate-grey.png') no-repeat .87rem .2rem;
	background-size: 1.9rem auto;
}

#course-info-overview:hover .course-overview-time {
	background: url('/wolfram-u/img/Clock-orange.png') no-repeat left .2rem;
	background-size: 1.3rem auto;
}

#course-info-overview:hover .course-overview-level {
	background: url('/wolfram-u/img/Levels-orange.png') no-repeat .87rem .2rem;
	background-size: 1.3rem auto;
}

#course-info-overview:hover .course-overview-certification {
	background: url('/wolfram-u/img/Certificate-orange.png') no-repeat .87rem .2rem;
	background-size: 1.9rem auto;
}

#course-info .course-overview-show-details {
	padding-top: 15px;
}

#course-info .course-overview-carat {
	background: url('/wolfram-u/img/Chevron-down-black.png') no-repeat 0 3px;
	background-size: 0.5rem;
	height: 10px;
	width: 11px;
	padding-left: 1px;
}
#course-info #course-info-overview:hover .course-overview-carat {
	background: url('/wolfram-u/img/Chevron-down-orange.png') no-repeat 0 3px;
	background-size: 0.5rem;
}
#course-info.expanded .course-overview-carat {
	background: url('/wolfram-u/img/Chevron-up-black.png') no-repeat 0 3px;
	background-size: 0.5rem;
}
#course-info.expanded #course-info-overview:hover .course-overview-carat {
background: url('/wolfram-u/img/Chevron-up-orange.png') no-repeat 0 3px;
	background-size: 0.5rem;
}


/* ==========================================================================
   outline
   ========================================================================== */

#outline li,
#outline p {
    line-height: 1.7;
    padding: 0 .75rem .5rem;
    position: relative;
}

#outline li:before,
#outline p:before {
    background: #ff6c00;
    content: '';
    display: inline-block;
    height: 4px;
    margin: .7rem 0 0 -.75rem;
    position: absolute;
    width: 4px;
}

/* ==========================================================================
   community
   ========================================================================== */

#community img { margin-right: .5rem; }

#community span { font-weight: 600; }

/* ==========================================================================
   custom training
   ========================================================================== */

section#custom-training.show {
    margin-top: -2rem;
    display: flex !important;
	flex-direction: column;
}

#custom-training.view-events {
	display: inline-block;
	margin: -5px 0 30px;
}

#custom-training img {
    margin-right: .2rem;
    margin-top: -.4rem;
}

#custom-training span {
    font-weight: 400;
    color: #535353;
    vertical-align: middle;
}

#custom-training div:first-of-type {
	margin-bottom: 4px;
}

#custom-training a.button {
    font-size: .8rem;
    padding: .3rem .5rem;
    text-align: center;
    margin-left: .8rem;
    color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
}

#custom-training a {
	color: #767676;
	vertical-align: bottom;
	line-height: 2rem;
}

#custom-training a:hover {
	color: #ff6c00;
}

/* ==========================================================================
   related courses
   ========================================================================== */

#related { border-top: 1px solid #b3b3b3; }

#related .grid>* { margin-bottom: 1.5rem; }

#related h3 {
    margin: 3rem 0 1.5rem;
    font-family: 'Source Sans Pro', sans-serif;
}

#related img { margin-right: 1rem; }

#related span { font-weight: 600; }

#related span.type {
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.8em;
    line-height: 1.5em;
    color: #535353;
}

/* ==========================================================================
   video player
   ========================================================================== */

#video-player { border: 1px solid #d9d9d9; }

#video-wrapper,
#video-iframe {
    border: none;
    max-height: 653px;
    max-width: 866px;
    outline: none;
    width: 100%;
}

#video-playlist-wrapper {
    max-height: 230px;
    overflow-y: auto;
    width: 100%;
}

#video-playlist {
    display: table;
    width: 100%;
}

#video-playlist>* { display: table-row; }

#video-playlist>*>* {
    cursor: pointer;
    display: table-cell;
    padding: 1rem .5rem;
    text-align: center;
    vertical-align: top;
    width: 20%;
}

#video-playlist>*>*:hover { background: #cde8e4; }

#video-playlist .selected { background: #eef7f6; }

#video-playlist .thumbnail { text-align: center; }

#video-playlist .thumbnail img {
    border: 1px solid #dedede;
    height: 56px;
    width: 75px;
}

#video-playlist .title { font-size: .875rem; }

#video-wrapper { position: relative; }

#titlescreen {
    display: none;
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #fff;
    text-align: center;
    line-height: 2em;
    top: 0;
    bottom: 0;
    left: 0;
}

#endscreen {
    position: absolute;
    cursor: pointer;
    width: auto;
    height: auto;
    z-index: 1;
    opacity: 0;
    background-color: rgba(64, 90, 154, 0.8);
    text-align: center;
    line-height: 2em;
    bottom: 50px;
    right: 50px;
}

#stinger {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

#stingerplay {
    display: none;
    font-size: 42px;
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 10px;
    width: 120px;
    margin-left: -60px;
    padding: 10px;
}

/* ==========================================================================
   Topic pages specific styles
   ========================================================================== */

#topic main section {
    position: relative;
    padding: 1rem 0 0.25rem 0;
    border-top: 1px solid #b3b3b3;
    margin: 0.5rem 0 0;
}

#topic main section.top { padding: 1rem 0 0; }

#topic main #catalog-header+section { border-top: none; }

header#catalog-header { margin: 3rem 0 0; }

#topic main section img { max-width: 100%; }

/* ==========================================================================
   Topic pages titles
   ========================================================================== */

#catalog-header .page-title,
#catalog-header .course-title.heading {
    color: #ff6c00;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2.8125rem;
    font-weight: 400;
    margin: .5rem 0 0;
}

#catalog-header .page-title.heading,
#catalog-header .course-title.heading { letter-spacing: -0.5px; }

#catalog-header .course-title.heading {
    margin-top: 0.125rem;
    max-width: 38.5rem;
}

#catalog-header .page-title.subheading {
    color: #535353;
    font-size: 1rem;
    text-transform: uppercase;
}

header#catalog-header+section h1 { margin-top: 0; }

section h1 {
    font-size: 1.0rem;
    margin: 1.875rem 0 1.563rem 0;
    color: #535353;
    display: inline-block;
    text-transform: uppercase;
}

.intro-section h1 {
    margin: 1.875rem 0 0;
}

#topic .intro-section img {
    display: inline-block;
    margin: 0 0 0 2rem;
}

/* ==========================================================================
   Topic pages thumbnails
   ========================================================================== */

#topic section .thumbnail.right { float: right; }

#topic section .thumbnail { margin: 0 0 2rem; }

#topic section .grid.cols-4 .thumbnail a {
    display: block;
    max-width: 147px;
}

#topic section .grid.cols-4 .thumbnail:nth-child(4n+2) a {
    margin: 0 auto;
    max-width: 163px;
    padding: 0 1rem 0 0;
}

#topic section .grid.cols-4 .thumbnail:nth-child(4n+3) a {
    margin: 0 auto;
    max-width: 163px;
    padding: 0 0 0 1rem;
}

#topic section .grid.cols-4 .thumbnail:nth-child(4n+4) a {
    float: right;
    max-width: 147px;
    padding: 0;
}

#topic section .thumbnails img {
    display: block;
    margin: 0 0 .625rem 0;
    /*  border:1px solid #cccccc;*/
}

#topic section#ScheduledCourses .thumbnails,
.date,
.location,
#topic section .thumbnails .level,
#topic section .number-of-part {
    display: block;
    font-size: .876rem;
    margin: .3rem 0;
    font-weight: 400;
    color: #757575;
    line-height: 0.7rem;
}

#topic section .thumbnails a {
    font-weight: 600;
    font-size: 1rem;
    display: inline-block;
    text-align: left;
    max-width: 95%;
    color: #192840;
}

#topic section .cols-4.thumbnails a { max-width: 147px; }

#topic section .cols-2.thumbnails a {
    font-size: 1.625rem;
    font-weight: 400;
    color: #192941;
}

#topic section .cols-3.thumbnails a { font-size: 1.2rem; }

#topic section .thumbnails a:hover { color: #ff6c00; }

#topic section .view-link {
    padding-bottom: 2rem;
}

#topic section .view-link a {
    font-weight: 600; 
    padding-bottom: 3rem;
}

#topic section button.button {
    right: 0;
    float: right;
    margin: 2rem 0;
}

#topic .intro + p a.button:hover {
    color: #fff;
}

#topic .intro + p a.button {
    display: inline-block;
    margin: 0 0 2rem;
}

#topic .hideable {
    display: block;
    width: 100% !important;
}

#topic section.show #topic section.show header { display: none; }

/* ==========================================================================
   Topic targeted styles
   ========================================================================== */

#topic .side {
    margin-top: -5px;
    float: left;
}

#topic .side p {
    margin-top: 10px;
    line-height: 24px;
    width: 90%;
}

#topic .side button.start {
    padding: 10px;
    font-size: 16px;
    width: 160px !important;
    float: left;
    margin: 25px 0px 0px 0px;
}

#topic .side button.start.more-margin { margin-bottom: 33px; }

#topic .show { border-top: 0; }

#topic .show~.show { border-top: 1px solid #b3b3b3; }

#topic .col2-side2 { padding-left: 53px; }

#topic .col2-buttons .button {
    display: block;
    margin-bottom: 33px !important;
}

#topic .col2-buttons__600 .button { display: none; }

.styled-table.single-course td:nth-child(1) {
    background: #fff;
    color: #535353;
    font-size: 1rem;
    font-weight: 600;
    width: 20%;
}

/* ==========================================================================
   Product training index
   ========================================================================== */

main#course { margin-bottom: 6.5rem; }

main#course section {
    margin-top: 3rem;
    padding-top: 2.375rem;
}

main#course section:nth-child(2) {
    margin-top: 1rem;
    padding-top: 1rem;
}

#course h1.mini-m {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    font-size: 1rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

#course i.training-icon {
    background: url(/wolfram-u/img/product-training-icons.png) no-repeat;
    background-size: 120px 30px;
    display: inline-block;
    font-size: 0;
    height: 30px;
    line-height: 0;
    margin: 2px 10px 0 0;
    min-width: 30px;
    overflow: hidden;
    width: 30px;
}

#course .mathematica .training-icon { background-position: 0 0; }

#course .system-modeler .training-icon { background-position: -30px 0; }

#course .finance-platform .training-icon { background-position: -60px 0; }

#course .wa-notebook .training-icon { background-position: -90px 0; }

#course .view-all {
    font-size: 0.9375rem;
    line-height: 1;
}

#catalog-header .heading + .page-title.subheading {
    margin: 1rem 0 0;
}

#topic .intro {
    font-size: 1.3rem;
    margin: .5rem 0 1.5rem;
}


/* ==========================================================================
   overwrite based on the class
   ========================================================================== */

body.override .width-1 img { max-width: 90%; }

.summary p {
    line-height: 1.5;
    margin: 0 0 1rem;
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    #catalog-header .download {
        background-size: 18px;
        padding-left: 25px;
    }

    #catalog-header .social {
        margin-top: 1rem;
    }

	#catalog-header .course-info {
		font-size: 14px;
	}
	
    #topic section .grid.cols-4 .thumbnail:nth-child(4n+1) a {
        max-width: 163px;
        padding: 0 .5rem 0 0;
    }

    #topic section .grid.cols-4 .thumbnail:nth-child(4n+2) a {
        max-width: 163px;
        padding: 0 .25rem;
    }

    #topic section .grid.cols-4 .thumbnail:nth-child(4n+3) a {
        max-width: 163px;
        padding: 0 .25rem;
    }

    #topic section .grid.cols-4 .thumbnail:nth-child(4n+4) a {
        max-width: 163px;
        padding: 0 0 0 .5rem;
    }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    #catalog-header .download {
        background-size: 17px;
        padding-left: 24px;
    }
	
	#catalog-header .course-info {
		font-size: 13px;
	}
	
	#catalog-header .right_600 {
		float: none !important;
	}
	
	#catalog-header .social.right_600 ~ .page-title.subheading { padding-top: 5px; }

    #topic section .grid.cols-4 .thumbnail a {
        max-width: 147px !important;
        margin: 0;
        float: left;
    }

    #topic section .grid.cols-4 .thumbnail a:nth-child(n+1) {
        margin: 0 3rem 0 0;
        float: left;
    }

    #topic .col2-side2 {
        padding-left: 0px;
    }

    #topic .col2-buttons .button {
        display: none;
    }

    #topic .col2-buttons__600 .button {
        display: block;
    }

    #topic .col2-buttons__600 .button.first-button {
        margin-bottom: 33px !important;
    }
}

/* styles for minimum supported screen width (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}

/* printer styles
   ========================================================================== */

@media print {}