/*Author: Lewis Garmston - 2017*/
/*Purpose: Specific CSS for Tuturial Tile Page*/

.logo-text {
	top: 11px !important;
}

/*#region templates*/

.templates{
    display:none;
}

/*#endregion templates*/


/*#region Typography*/
.content-page{
    font-family: "AvenirNextLTW01-Regular", arial, sans-serif;
    color: #313841;
    font-size: 14px; /*14px*/
}


.tutorials-page H1, 
.tutorials-page H2{
    color: #81af42;
    font-weight: normal;
}

.tutorials-page H1{
    font-size: 30px; /*30px;*/
}

.tutorials-page H2{
    font-size: 18px; /*18px;*/
}

.tutorials-page .tutorial-title{
    font-size: 18px; /*18px;*/
    color: #313841;
}

.tutorials-page .tutorial-description{
    line-height: 20px;
    color: rgba(49,56, 65,0.75);
}

.tutorial-indicators{
    font-size: 18px; /*14px;*/
    color: #bdbdbd;
}

/*#endregion Typography*/


/*#region Page Layout*/

.lyt-content-page{

    padding: 20px;
}

.tutorials-page H1{
    margin-bottom: -10px; /*will make this 30px when followed by a h2*/
}

.tutorials-page H2{
    margin-top: 40px;
    margin-bottom: 10px;
}


/*#endregion Page Layout*/

/*#region Generic Icon Styles*/

.icon{
    background-repeat: no-repeat;
    display:block;
}

.icon-size12{
    width: 12px;
    height: 12px;
    background-size: 12px 12px;
}

.icon-size16{
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
}

.icon-size64{
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
}

/*#endregion Generic Icon Styles*/


/*#region Tutorial Item*/





.tutorial-item > a{
    text-decoration: none; /*override default hyperlink styles*/
    color: #313841;  /*override default hyperlink styles*/
}

.lyt-tutorial-item{
    display: flex;
    flex-direction: row;


    padding: 10px;
    margin-bottom: 10px;

    box-sizing: border-box;
    min-height: 84px;
}

.tutorial-item-container{
    background-color: rgb(255,255,255);
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

.tutorial-item .tutorial-item-container{
    border: solid 1px transparent;
    transition:border-color 0.15s linear;
}

.tutorial-item:hover .tutorial-item-container{
    border-color: #2196f3;
    transition:border-color 0.15s linear;
}


.lyt-tutorial-item-icon{
    flex-shrink: 0;
}

.tutorial-description{
    line-height: 2.0rem;
    max-height: 6.0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}


.lyt-tutorial-item-content{
    flex-grow: 1;
    margin-left: 20px;
    overflow: hidden;
}

.lyt-tutorial-item-indicators{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.tutorial-focus-area{
    width: 180px;
    box-sizing: border-box;
    padding-right: 5px;
}


/*Container for label and 3 blobs*/
.tutorial-difficulty{
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 180px;
}

.difficulty-label{
    padding-left: 5px;
    padding-right: 5px;
}

/*Container for 3 blobs*/
.difficulty-indicator{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.difficulty-indicator > .icon{
    padding-left: 5px;
}

/*Container for duration label and icon*/
.lyt-tutorial-duration{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.tutorial-duration label{
    padding-left: 10px;
}


/*#endregion Tutorial Item*/



/*#region @1x images*/
@media only screen and 
    (max-resolution: 1.5dppx), 
    (max-resolution: 144dpi), 
    (-webkit-max-device-pixel-ratio: 1.5), 
    (-o-max-device-pixel-ratio: 3/2){ 

    /*#region general icons*/
    .ic-tutorial-difficulty{ background-image: url("Images/levelgrey12.png");}
    .ic-tutorial-difficulty.on{ background-image: url("Images/levelgreen12.png");}

    .ic-tutorial-duration{ background-image: url("Images/duration16.png");}
    /*#endregion general icons*/

    /*#region specific icons*/
    .ic-tutorial-helloworld{ background-image: url("Images/HelloWorld64.png");}
    .ic-tutorial-soccer{ background-image: url("Images/WorkflowSoccer64.png");}
    .ic-tutorial-calendar{ background-image: url("Images/Calendar64.png");}
    .ic-tutorial-survey{ background-image: url("Images/Survey64.png");}
    .ic-tutorial-contactlist{ background-image: url("Images/ContactList64.png");}
    .ic-tutorial-leaverequest{ background-image: url("Images/LeaveRequest64.png");}
	.ic-tutorial-leaverequestext{ background-image: url("Images/LeaveRequestExt64.png");}
	.ic-tutorial-ExpenseClaim{ background-image: url("Images/ExpenseClaim64.png");}
	.ic-tutorial-APP-DocReview-Approval{ background-image: url("Images/APP-DocReview-Approval64.png");}
	.ic-tutorial-APP_JobSat{ background-image: url("Images/APP_JobSat64.png");}
	.ic-tutorial-APP_ContactList{ background-image: url("Images/APP_ContactList64.png");}
	.ic-tutorial-SP_HalloWorld{ background-image: url("Images/SP_HalloWorld64.png");}
	.ic-tutorial-SP_HalloWorld_Extended{ background-image: url("Images/SP_HalloWorld_Extended64.png");}
	.ic-tutorial-SPDocReview-Appoval{ background-image: url("Images/SPDocReview-Appoval64.png");}
	.ic-tutorial-SP_SiteProv{ background-image: url("Images/SP_SiteProv64.png");}
	.ic-tutorial-SP_ContactList{ background-image: url("Images/ContactList64.png");}
	.ic-tutorial-SP_ExpenseClaim{ background-image: url("Images/SP_ExpenseClaim64.png");}
    /*#endregion specific icons*/
}
/*#endregion @1x images*/

/*#region @2x images*/
@media only screen and 
    (min-resolution: 1.5dppx),  /*this is for retina graphics, apple/samsung devices*/
    (min-resolution: 144dpi),
    (-webkit-min-device-pixel-ratio: 1.5), 
    (-o-min-device-pixel-ratio: 3/2){

    /*#region general icons*/
    .ic-tutorial-difficulty{ background-image: url("Images/levelgrey12@2x.png");}
    .ic-tutorial-difficulty.on{ background-image: url("Images/levelgreen12@2x.png");}

    .ic-tutorial-duration{ background-image: url("Images/duration16@2x.png");}
    /*#endregion general icons*/

    /*#region specific icons*/
    .ic-tutorial-helloworld{ background-image: url("Images/HelloWorld64@2x.png");}
    .ic-tutorial-soccer{ background-image: url("Images/WorkflowSoccer64@2x.png");}
    .ic-tutorial-calendar{ background-image: url("Images/Calendar64@2x.png");}
    .ic-tutorial-survey{ background-image: url("Images/Survey64@2x.png");}
    .ic-tutorial-contactlist{ background-image: url("Images/ContactList64@2x.png");}
    .ic-tutorial-leaverequest{ background-image: url("Images/LeaveRequest64@2x.png");}
    .ic-tutorial-leaverequestext{ background-image: url("Images/LeaveRequestExt64@2x.png");}
	.ic-tutorial-ExpenseClaim{ background-image: url("Images/ExpenseClaim64@2x.png");}
	.ic-tutorial-APP-DocReview-Approval{ background-image: url("Images/APP-DocReview-Approval64@2x.png");}
	.ic-tutorial-APP_JobSat{ background-image: url("Images/APP_JobSat64@2x.png");}
	.ic-tutorial-APP_ContactList{ background-image: url("Images/APP_ContactList64@2x.png");}
	
	.ic-tutorial-SP_HalloWorld{ background-image: url("Images/SP_HalloWorld64@2x.png");}
	.ic-tutorial-SP_HalloWorld_Extended{ background-image: url("Images/SP_HalloWorld_Extended64@2x.png");}
	.ic-tutorial-SPDocReview-Appoval{ background-image: url("Images/SPDocReview-Appoval64@2x.png");}
	.ic-tutorial-SP_SiteProv{ background-image: url("Images/SP_SiteProv64@2x.png");}
	.ic-tutorial-SP_ContactList{ background-image: url("Images/ContactList64@2x.png");}
	.ic-tutorial-SP_ExpenseClaim{ background-image: url("Images/SP_ExpenseClaim64@2x.png");}
	
	/*#endregion specific icons*/
}
/*#endregion @2x images*/