/* PulpRack Editor's Desk page styles */

/* General Reset and Basic Styles */
body, html {
    background-image: url("grcsWeb/WhitePaper.jpg");
    margin: 0px auto;
    box-sizing: border-box;
    width: 1080px;
    border: solid 0px;
}
	
       * {
            box-sizing: inherit;
         font-family: "Times New Roman", Cambria, "Hoefler Text", "Liberation Serif", "serif";
            line-height: 1.25;
            color: #333;
        }

        /* Header Typography */
        h1 {
            text-align: center;
            margin: 0px;
        }

        
       
        /* Container to hold the grid */
        .container {
            width: 100%; /* Keeps the content fluid within 90% of the screen */
            margin: 0 auto; /* Centers the container */
            display: flex; /* Enables flexbox for flexibility */
            flex-wrap: wrap; /* Allows grid items to wrap to the next line */
            gap: 10px; /* Adds space between grid items */
        }


	
	.dept-wrapper img {
	filter: grayscale(100%);
	transition: filter .3s ease-in;
	display: block;
}

	.dept-wrapper.colorized img,
	.dept-wrapper:hover img {
	  filter: grayscale(0%);
}
	.desk-wrapper{
		border: solid 0px;
		height: 2px;
		width:2px;
	}
	
	

.dDesktop{
		background-image: url("grcsWeb/EditorsDesktop-bw.png");
		height: 700px;
		width:1080px;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: center;
		background-size:contain;
}
	
.phone{
		scale: 70%;
		position:relative;
		transform: translate(-50px, 360px);
}
.pad{
		scale: 70%;
		position:relative;
		transform: translate(842px, 590px);
}
	
.calendar{
		scale: 70%;
		position:relative;
		transform: translate(956px, 402px);
}
		
.typewriter{
		scale: 70%;
		position:relative;
		transform: translate(373px, 278px);
}
/* Calendar tray sits 20px lower; Notepad uses the normal tray position. */
.month-container {
		width: 95px;
		height: 30px;
		transform: translate(745px, 338px) rotate(2deg);
		border: dashed 0px red;
	}
	
	.month-container span {
		color: white;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 18pt;
		font-weight: bold;
		align-self: center;
		display: inline-block; /* Required for inline elements */
  		transform: skewX(3deg);
	}
	
	.day-container {
		width: 65px;
		height: 40px;
		transform: translate(756px, 335px) rotate(2deg);
		border: dashed 0px red;
		pointer-events: none
	}
	
	.day-container span {
		color: black;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		font-size: 48pt;
		font-weight: bold;
		align-self: center;
		display: inline-block; /* Required for inline elements */
  		transform: skewX(4deg);
	}

/*
 * beta2.42 — Editor tray
 *
 * EASY SIZE CONTROLS:
 * Change ONLY --editor-tray-width and --editor-tray-height below.
 * Positioning and the dissolve animation will remain unaffected.
 */
body {
    position: relative;
}

/* beta2.42 — Editor tray: Departments-style collapsible tray */

/*
 * EDIT HERE to change the tray's size.
 * Positioning is independent of these two values.
 */
#deskTray {
    --editor-tray-width: 1060px;
    --editor-tray-height: 1920px;

    position: absolute !important;
    left: 50% !important;
    /* top is set by positionDeskTray() */

    width: 1080px !important;
    height: 0 !important;
    max-width: 1080px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-51%) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;

    z-index: 2147483647 !important;

    transition: height 1000ms ease-in-out !important;

    visibility: hidden !important;
    pointer-events: none !important;
}

#deskTray.open,
#deskTray.closing {
    visibility: visible !important;
}

#deskTray.open {
    height: var(--editor-tray-height) !important;
    pointer-events: auto !important;
}

#deskTray.closing {
    pointer-events: none !important;
}

#deskTray.collapsed {
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#deskTray iframe {
    display: block !important;

    width: 1080px !important;
    height: var(--editor-tray-height) !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    position: absolute !important;
    left: 0 !important;
    top: 0 !important;

    transform: none !important;
}
		
.topText {
	width: 1000px;
    margin: 0 auto;	
	transform: translateY(-50px);
}
	
.topText p {
	width: 900px;
    margin: 0 auto;
	color: #555;
    text-align: justify;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 36pt;
	transform: translateY(100px);
}

/* Editor's Desk page-local navigation hint test v1.3 */
.desk-wrapper img.pr-blink-color {
    transition: none !important;
    filter: grayscale(0%) !important;
}
.desk-wrapper img.pr-blink-gray {
    transition: none !important;
    filter: grayscale(100%) !important;
}
.image-wrapper img {
    filter: grayscale(100%);
    transition: filter .7s ease-in;
    width: 100%;
    display: block;
}.image-wrapper.colorized img,
.image-wrapper:hover img {
    filter: grayscale(0%);
}