body * {
	box-sizing:border-box;
}
html, body {
	height: 100%;
}
body {
	font-family:sans-serif;
	color:#00477c;
	position:fixed;
	padding:0;
	margin:0;
	position: relative;
	background-color:#00477c;
}

html.industrial body {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAHBAMAAADKaWEqAAAAD1BMVEXExMTExMTExMTExMQAAAA45pm1AAAABXRSTlOAIGBEAA99WDwAAAAjSURBVAjXYxBUYGBgYBIEIgUwBhJKYDEGZhcDIAnlw+Rh6gFIFwKYcEeMawAAAABJRU5ErkJggg==),
		linear-gradient(26.6deg, rgba(0,0,0,0.5), rgba(00,40,80,0.65), rgba(0,0,0,0.5), rgba(00,50,90,0.65), rgba(0,0,0,0.25), rgba(00,40,80,0.65));
}


#Placeholder { /* outer containing div */
	display:block;
	position:relative;
	height: 100%;
    height:100%;
	width:1320px;
	margin:0 auto;
	font-weight:700;
}

.textBox { /* the clickable nodes for courses etc*/
    pointer-events:all;
    position:relative;
	font-family:sans-serif;
	font-weight:700;
	font-size:85%;
	display:inline-block;
	padding:5px 17px 5px 25px;
	overflow:hidden;
	border-radius:1.25em;
    background-color: silver;
	background:linear-gradient(#eee,#ccc);
	box-shadow:0px 5px 15px -2.5px black;
	border:1px solid gray;
	cursor:pointer;
	color:#00477c;
	min-width:96px;
	text-align:center;
	margin:0.85em 0;
	white-space: nowrap;
	z-index:5;
}
.textBox.active {
    background:none;
	background-color: orange;
    transition:none;
}
    .textBox.active::before {
        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAADFBMVEUAAAAAAAAAAAAAAAA16TeWAAAAA3RSTlMAgEC3KR0FAAAAIElEQVQI12P4//8/wwEGZoaTockMx/9fxoZBciA1ILUAdIwaGQJQjH8AAAAASUVORK5CYII=);
        position:absolute;
        top:6px;
        left:8px;
    }
    .textBox::before {
        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlMAQObYZgAAABJJREFUCNdj+P+BoUEADwIqAACtPwl/XNTSigAAAABJRU5ErkJggg==);
        position:absolute;
        top:6px;
        left:8px;
    }
    .textBox.skillGroup::after {
        content:"*";
        position:absolute;
        font-size:150%;
        color:white;
        right:3px;
        top:6px;
    }

div#printPanel {
    padding-top:6em;
    display:none;
}

    div#printPanel td {
        padding:3em;
        position:relative;
        border-right:1px dashed black;
    }
    div#printPanel td:last-child {
        border-right:none;
    }
    div#printPanel td::before {
        content:attr(title);
        padding:6px;
        border:1px solid gray;
        position:absolute;
        top:0;
        right:0;
    }
    div#printPanel td div.textBox {
        display:block;
        max-width:250px;
        box-shadow:none;
        white-space:normal;
    }
    div#printPanel td div.textBox h5 {
        margin:0;
        font-size:80%;
        font-weight:normal;
        border-top:1px solid gray;
    }
    div#printPanel td div.textBox.active::before {
        content:"";
    }
div#printTags {
    display: inline-block;
    font-size: 160%;
    width: 900px;
}
div#printTags a {
    color:black;
    text-decoration:none;
    display:inline-block;
    padding:12px;
}

@media print {
    div#Placeholder {
        display:none !important;
    }
    div#infoButton {
        display:none !important;
    }
    div#blurb_panel {
        display:none !important;
    }
    div#icons {
        display:none !important;
    }
    div.tags {
        display:none !important;
    }
    div#printPanel {
        display: block;
    }
}

.columnHeader { /* the horizontal accordian panels */
    pointer-events:none; /* only allow pointer events on nodes and title(::before) */
	position:relative;
	perspective:1000;
	display:inline-block;
	vertical-align:top;
	padding:.125em .5em .125em 2em;
	width:180px;
    height:100%;
	color:#ccc;
	/*background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 130px, rgba(0,0,0,0.123));*/
    border-right:1px solid #00376c;
	text-align:center;
	z-index:0;
	transition: width 0.5s;
}
div.columnHeader div.textBox:first-child {
	margin-top:7.5em;
}
div.columnHeader:last-child div.textBox:first-child {
	margin-top:5.5em;
}
div.columnHeader:last-child {
	border-right-width:0;
}
.columnHeader::before {
    pointer-events:all;
	content:attr(data_title);
	background-color:rgba(0,0,0,0.25);
	cursor:pointer;
	display:inline-block;
	position:absolute;
	width:96px;
	left:-96px;
	transform-origin: 96px 0 0;
	transform: rotate(270deg);
	border-bottom:1px solid #00174c;
}
.columnHeader.collapsed {
	overflow:hidden;
	width:21px;
	padding:0;
	transition: all 0.75s ease-in-out;
}
.columnHeader.collapsed::before {
	background-color:rgba(255,255,255,0.25);
}
.columnHeader div.textBox {
	opacity:1;
	transform: rotateY(0deg);
	transition: 0.25s all 0.15s linear;
}
.columnHeader div.textBox.last_selected {
    box-shadow: 0 0 15px white;
}
.columnHeader div.textBox.active {
	transition: all 0s linear;
}
.columnHeader.collapsed div.textBox {
	opacity:0;
	transform: rotateY(90deg);
	transition: all 0.15s linear;
	pointer-events:none;
}
svg {
    overflow: visible;
    /*width:300%;
    height:100%;*/
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
	position:absolute;
	top:0;
	left:0;
	pointer-events: none;
}
svg.clipper {
	overflow: hidden;
}
path[class^=svgcable]
{
	stroke-width: 3;
	stroke-linecap: round;
	fill: none;
	opacity:0;
	transition: opacity 0.5s ease-out;
}
path.opaque {
	opacity:1.0;
	transition: opacity 0.05s ease-in;
}
path.subord {
	opacity:0.5;
    stroke-width:3;
	transition: opacity 0.05s ease-in;
	stroke-dasharray:3,7;
}
#svgbox {
	position:absolute;
	top:0;
	pointer-events:none;
}
#logo {
	position:absolute;
	top:0;
	right:0;
	width:500px;
    background-color: silver;
	background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.25));
	padding:8px;
	color: #00477c;
}
#logo div {
	font-family: Verdana;
	display:inline-block;
	font-weight:700;
	font-size:120%;
	text-shadow:1px 1px 2px #888;
	vertical-align:bottom;
	height:56px;
}
@media only screen and (max-width: 1400px)  {
	#logo {
		display:none;
	}
}
#infoButton {
    padding:0 9px 0 7px;
    position:absolute;
    font-size:120%;
    font-family:serif;
    top:0;
    background-color: yellow;
    border:2px solid black;
    border-radius:50%;
    font-weight:900;
    font-style:italic;
    visibility:hidden;
    cursor: pointer;
}
#infoButton.show {
    visibility:visible;
}

#blurb_panel {
    pointer-events: none;
}


#iC07G {
	height: 100%;
	width:24px;
}
#iC07G .textBox {
	/*max-width:220px;*/
	position:absolute;
	margin:0;
}

div.insertHereDiv.hide {
    display: none;
}

div.insertHereDiv {
    position:absolute;
    width:calc( 100% - 48px);
    left:32px;
    border-top:1px dashed orange;
    border-bottom:1px dashed orange;
}
    div.insertHereDiv::before {
        content:"insert new node here?";
        color:white;
        font-size:70%;
        font-weight:500;
        cursor:pointer;
    }
.timetable {
    display:none;
}