.TileBundleFail { display: none; } .Tile { position: relative; height: 230px; margin: 0 6px 6px 0; float: left; border-width: 2px; border-style: solid; border-color: transparent; background-clip: padding-box; } @media (max-width: 600px) { .Tile { height: 150px; margin: 0 3px 3px 0; border-width: 1px; } } .Tile > div:not(.DashIcons) { position: absolute; width: 100%; height: 100%; background-color: #B2BB1C; color: #363636; box-sizing: content-box; overflow: hidden; } .Tile > div.Hover { background-color: #CCD397; color: #363636; transition: opacity 0.3s; opacity: 0; /*z-index: 1;*/ background-image: url("/Themes/DEFAULT/TileHoverImage.png"); background-size: 100%; } .Tile:hover > div.Hover, .Tile.Hover > div.Hover { transition: opacity 0.5s; opacity: 1; } .Tile.Hover:hover > div.Hover { transition: opacity 0.5s; opacity: 0; } .Tile.Single { width: 230px; } @media (max-width: 600px) { .Tile.Single { width: 150px; } } .Tile.Double { width: 470px; } @media (max-width: 600px) { .Tile.Double { width: 305px; } } .IconTopLeft .TileImage { width: 3.25rem; height: 3.25rem; margin: 1rem 1rem 0.5rem 1rem; } .IconTopLeft .TileTitle { margin: 0 1rem; line-height: 1.25em; } .IconTopLeft .TileDescription { margin: 0.5rem 1.5rem; } .FullImageHoverBorder .TileImage, .FullImageHoverShadow .TileImage, .FullImageHoverAlt .TileImage, .FullImageSmokeDetails .TileImage, .BottomOverlay .TileImage { width: 100%; height: 100%; } .FullImageHoverBorder .TileTitle, .FullImageHoverShadow .TileTitle, .FullImageHoverAlt .TileTitle { position: absolute; left: 0; right: 0; display: none; } .FullImageHoverBorder .TileDescription, .FullImageHoverShadow .TileDescription, .FullImageHoverAlt .TileDescription { position: absolute; left: 0; right: 0; display: none; } .FullImageHoverBorder .Tile:hover { border-color: #B7B7B7; } .FullImageHoverShadow .Tile:hover div.Hover::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #CCD397; opacity: 0.5; content: ""; } .FullImageSmokeDetails .TileText { text-align: center; position: absolute; top: 13%; left: 13%; width: 74%; height: 74%; overflow: hidden; } .FullImageSmokeDetails .TileTitle { margin-bottom: 1em; } .FullImageSmokeDetails .TileImageMask { position: absolute; top: 0; left: 0; width: 86%; height: 86%; margin: 7%; background-color: #B2BB1C; opacity: 0.75; } .FullImageSmokeDetails .Hover .TileImageMask { background-color: #CCD397; } .BottomOverlay .TileText { text-align: center; position: absolute; top: 56%; width: 100%; height: 40%; overflow: hidden; padding: 0.5em 1em; box-sizing: border-box; } .BottomOverlay .Hover .TileText { text-align: center; position: absolute; top: 4%; left: 0; width: 100%; height: 88%; overflow: hidden; } .BottomOverlay .TileImageMask { position: absolute; bottom: 0; left: 0; width: 100%; height: 42%; background-color: #B2BB1C; opacity: 0.75; } .BottomOverlay .Hover .TileImageMask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #CCD397; opacity: 0.75; } .Tile .TileFooter { position: absolute; bottom: 0; text-align: center; width: 100%; font-size: 0.9em; padding: 0.5em; padding-top: 0.1em; box-sizing: border-box; } .Tile.IconTopLeft .TileFooter { background-color: #B2BB1C; } .Tile.IconTopLeft .Hover .TileFooter { background-color: #CCD397; } .RotatingImage { position: absolute; top: 0; left: 0; max-height: 100%; max-width: 100%; opacity: 0; transition: opacity 1.5s; z-index: 1; } .RotatingImage.Active { opacity: 1; transition: opacity 0s; z-index: 0; } #LoadingTileBox { position: relative; width: 100%; height: 470px; } @media (max-width: 600px) { #LoadingTileBox { height: 305px; } } /****************************************************************************** List Tile Class for third level navigation ******************************************************************************/ .ListTile .MainImage, .ListTile .HoverImage { width: 5rem; float: left; margin-right: 1rem; } .ListTile:hover .MainImage { display: none; } .ListTile:hover .HoverImage { display: inherit; } .ListTile .HoverImage { display: none; } .ListTile .TileImage { width: 100%; } .ListTile { width: 100%; height: auto; padding: 10px; margin-bottom: 20px; -ms-border-radius: 5px; border-radius: 5px; background-color: #B2BB1C; color: #363636; box-sizing: border-box; } .ListTile:hover { background-color: #CCD397; color: #363636; text-decoration: none; } /****************************************************************************** Status Check Box ******************************************************************************/ .Status.TileCheck h3:first-of-type { display: inherit; color: #B2BB1C; } .Status.TileCheck h3:last-of-type { display: none; } /****************************************************************************** Clarity Styles ******************************************************************************/ .ParentWireframes { position: absolute; top: 1em; left: 7em; width: 6.5em; height: 1.8em; border-radius: 0.4em; background-color: #EFEEE6; display: none; } @media (max-width: 600px) { .ParentWireframes { left: 5.5em; } } .ParentWireframes .Transparent { display: inline !important; } .ParentWireframes .PWError, .ParentWireframes .PWNotice, .ParentWireframes .PWContent { display: none; } .ParentWireframes .Red .PWError, .ParentWireframes .Yellow .PWNotice, .ParentWireframes .Transparent .PWContent { display: inline !important; } .ClarityContent { margin: 0 6px 6px 0; display: flex; gap: 0.7em; } @media (max-width: 600px) { .ClarityContent { display: inline; } } @media (max-width: 600px) { .ViewCourseLMSButton, .ViewCourseDashboardButton { margin-top: 1em; margin-bottom: -0.5em; } } .ClarityTitle { font-weight: bold; font-size: 1.3em; } @media (max-width: 600px) { .ClarityTitle { display: none; } } @media (max-width: 600px) { .ClaritySubHeader { margin-top: 1em; margin-left: 1em; } } .CourseTile .ParentWireframes { display: flex !important; } .TallContentBox { height: 17.5em !important; } #FolderListMoreLink { float: right; font-size: 2em; } #ResourceListMoreLink { float: right; font-size: 2em; } .ResourceDefaultImage[alt]:after { position: absolute; top: 10px; left: 10px; width: 110px; height: 110px; content: ""; background: url('../../Content/@ViewBag.PDImagePath/DefaultImage_300.jpg'); background-size: 100%; } .PWImages { margin: 0.1rem; padding: 0.4rem; width: 1rem; height: 1rem; } .PWPopUpIcons { position: absolute; top: 11px; right: 11px; width: 1rem; height: 1rem; } .PWContent { opacity: 0.2; } .PWBarChart.Hide, .PWClipboard.Hide, .PWClock.Hide, .PWBarChart.Notice .PWNotice, .PWBarChart.Error .PWError, .PWBarChart.Hide .PWContent, .PWClipboard.Notice .PWNotice, .PWClipboard.Error .PWError, .PWClipboard.Hide .PWContent, .PWClock.Notice .PWNotice, .PWClock.Error .PWError, .PWClock.Hide .PWContent { display: inline !important; } .PWBarChart.Notice .PWContent, .PWBarChart.Error .PWContent, .PWClipboard.Notice .PWContent, .PWClipboard.Error .PWContent, .PWClock.Notice .PWContent, .PWClock.Error .PWContent { display: none !important; }