/* declare Myriad Pro font */

@font-face {
	font-family: myrPro;
	src: url('/font/MYRIADPRO-REGULAR.WOFF');
}

@font-face {
	font-family: myrPro;
	src: url('/font/MYRIADPRO-IT.WOFF');
	font-style: italic;
}

@font-face {
	font-family: myrPro;
	src: url('/font/MYRIADPRO-SEMIBOLD.WOFF');
	font-weight: 600;
}

@font-face {
	font-family: myrPro;
	src: url('/font/MYRIADPRO-SEMIBOLDIT.WOFF');
	font-style: italic;
	font-weight: 600;
}

/* premise design */

body {
    background-color: black;
    color: white;
    font-family: 'Myriad Pro', myrPro, sans-serif;
}

/* place M logo and nav stuff */

.mnav a {
	color: inherit;
}

.mnav * {
	transition: all 500ms;
	-webkit-transition: all 500ms; /* safari */
}

.mnav {
	position: fixed;
	top: 20px;
	left: 50%;
	margin-right: -50%;
	transform: translate(-507px, 0);
}

@media only screen and (max-width: 1055px) {
	.mnav {
		position: fixed;
		top: 20px;
		left: 20px;
		margin-right: auto;
		transform: none;
		width: 50px;
		height: 50px;
	}
}


#micon {
	width: 50px;
	height: 50px;
	filter: saturate(0);
}

.mnav:hover #micon {
	filter: saturate(1);
}

#mlink {
	position: absolute;
	height: 50px;
	z-index: 9;
}

.text {
	position: absolute;
	font-size: 20px;
	padding-top: 3px;
	text-indent: 10px;
}

.text b {
	position: relative;
	z-index: 3;
}

.slant {
	transform: skew(-12deg);
}

.vslant {
	transform: skew(-12deg);
}

.hnav {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	width: 50px;
	height: 28px;
	top: 13px;
	z-index: 7;
}

.mnav:hover .hnav, .hnav:hover {
	opacity: 1;
	visibility: visible;
	width: 850px;
}

#companion {
	left: 40px;
	width: 200px;
	background-color: #FF66FF;
}

#handbook {
	left: 219px;
	width: 200px;
	background-color: #CC44CC;
}

#profiler {
	left: 398px;
	width: 200px;
	background-color: #992299;
}

#ripnet {
	left: 577px;
	width: 200px;
	background-color: #006600;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.vnavcomp {
	position: absolute;
	width: 200px;
	height: 28px;
	left: 50px;
	top: 13px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
}

.vnavhand {
	position: absolute;
	width: 200px;
	height: 28px;
	left: 249px;
	top: 13px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
}

.vnavchr {
	position: absolute;
	width: 200px;
	height: 28px;
	left: 448px;
	top: 13px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
}

.vnavrip {
	position: absolute;
	width: 200px;
	height: 28px;
	left: 647px;
	top: 13px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
}

.vnavtoc {
	position: absolute;
	width: 28px;
	height: 50px;
	left: 20px;
	top: 12px;
	z-index: 5;
	opacity: 1;
	visibility: visible;
}

.chrbox {
	left: 10px;
	width: 300px;
}

#about {
	left: 10px;
	top: 16px;
	width: 275px;
	background-color: #CC44CC;
}

#fams {
	left: 10px;
	top: 32px;
	width: 275px;
	background-color: #BB33BB;
}

#sscds {
	left: 10px;
	top: 48px;
	width: 275px;
	background-color: #AA22AA;
}

#hb1 {
	left: 10px;
	top: 16px;
	width: 250px;
	background-color: #BB33BB;
}

#hb2 {
	left: 10px;
	top: 32px;
	width: 250px;
	background-color: #AA22AA;
}

#hb3 {
	left: 10px;
	top: 48px;
	width: 250px;
	background-color: #991199;
}

#hb4 {
	left: 10px;
	top: 64px;
	width: 250px;
	background-color: #880088;
}

#hb5 {
	left: 10px;
	top: 80px;
	width: 250px;
	background-color: #770077;
}

#hb6 {
	left: 10px;
	top: 96px;
	width: 250px;
	background-color: #660066;
}

#hb7 {
	left: 10px;
	top: 112px;
	width: 250px;
	background-color: #550055;
}

#ch1 {
	top: 16px;
	background-color: #009757;
}

#ch2 {
	top: 32px;
	background-color: #7d35aa;
}

#ch3 {
	top: 48px;
	background-color: #006198;
}

#ch4 {
	top: 64px;
	background-color: #be2880;
}

#ch5 {
	top: 80px;
	background-color: #aa371c;
}

#ch6 {
	top: 96px;
	background-color: #705e72;
}

#ch7 {
	top: 112px;
	background-color: #ad5b00;
}

#ch63 {
	top: 128px;
	background-color: #117d68;
}

#ch8 {
	top: 144px;
	background-color: #151515;
	text-indent: 2px;
}

#ch9 {
	top: 160px;
	background-color: #636364;
}

#doqk {
	left: 10px;
	top: 16px;
	width: 275px;
	background-color: #005500;
}

#lmao {
	left: 10px;
	top: 32px;
	width: 275px;
	background-color: #004400;
}

#eset {
	left: 10px;
	top: 48px;
	width: 275px;
	background-color: #003300;
}

#meow {
	left: 10px;
	top: 60px;
	width: 275px;
	background-color: #002200;
}

.charimg {
	position: absolute;
	left: -8px;
	top: 0;
	transform: skew(20deg);
}

.identext {
	font-size: 16px;
}

.mnav:hover #companion, .hnav:hover #companion {
	left: 60px;
}

.mnav:hover #handbook, .hnav:hover #handbook {
	left: 259px;
}

.mnav:hover #profiler, .hnav:hover #profiler {
	left: 458px;
}

.mnav:hover #ripnet, .hnav:hover #ripnet {
	left: 657px;
}