html {
	height: 100%;
	max-height: auto;
}

body {
	background-image: linear-gradient(to bottom, #def3fa, #bce7f6, #9fddf1, #73cae7, #59bbdb, #44aacc, #3da1c3, #3596b7, #2e8aa9, #287f9c, #22708a, #1d6279, #175063, #124151, #0e303c, #000000);
	background-repeat: no-repeat;
	backfround-attachment: scroll;
	background-position: right top;
	background-size: contain;
	background-color: #000000;
	font-family: Helvetica;
	height: 100%;
	margin: 0%;
	padding: 0%;
	-webkit-font-smoothing: antialiased;
}

@font-face {
        font-family: "LifeCraft";
        src: url("media/fonts/LifeCraft_Font.ttf");
}

@font-face {
        font-family: "PatuaOne";
        src: url("media/fonts/PatuaOne-Regular.ttf");
}

a, a:active, a:focus, a:hover {
        color: #ffffff;
        text-decoration: none;
}

h1, h3 {
        background-image: linear-gradient(to left, #022430, #022430, #003445, #022430, #022430);
        font-family: Helvetica;
        font-size: 1.5vw;
        font-weight: normal;
        color: #ffffff;
        display: block;
        padding: 0.5%;
        margin-top: -1%;
        text-align: center;
}

h2 {
        background-color: #022430;
        font-size: 0.8vw;
        font-weight: normal;
        text-align: center;
}

h3 {
        background-image: linear-gradient(to left, #022430, #022430, #022430, #003445, #022430, #022430, #022430);
	font-size: 1vw;
}

#content-outer {
	background-color: rgba(13, 47, 59, 0.3);
	box-shadow: 0px 1px 3px 2px #052539;
	color: #FFFFFF;
	font-size: 0.9vw;
	min-height: 75%;
	max-height: auto;
	margin-left: 20.5%;
	margin-top: 1%;
	padding: 2%;
	padding-top: 0%;
	position: absolute;
	text-align: left;
	width: 55%;
        word-wrap: break-word;
        text-overflow: ellipsis;
	border-top: #FFFFFF;
	border-width: 1px;
  	border-style: solid;
}

#content-outer a, #content a:active, #content a:focus, #content a:hover {
	color: #3596b7;
	text-weight: bold;
}

#content {
	background-color: #022430;
	border: 1px solid #1d6279;
        box-shadow: 0px 1px 3px 2px #052539;
	margin: 2%;
	margin-top: 3%;
	padding: 2%;
}

#header {
	background-image: linear-gradient(to bottom, #124151, #175063, #1d6279, #22708a, #287f9c, #2e8aa9, #3596b7, #3da1c3, #44aacc, #59bbdb, #73cae7, #9fddf1);
	border-bottom: 1px solid #9fddf1;
        color: #ffffff;
	height: %;
        font-family: LifeCraft;
        font-size: 4vw;
	padding: 0.2%;
        padding-left: 2%;
        text-shadow: 1px 1px 5px #000000, 0 0 5px #ffffff;
        width: 97.8%;
}


#navigation {
	color: #ffffff;
        font-family: LifeCraft;
        font-size: 2vw;
        text-shadow: 1px 1px 5px #000000, 0 0 5px #ffffff;
	width: 97.7%;
}

/* Sidebar */

#sidebar {
        background-color: #022430;
        border: 1px solid #1d6279;
        border-right: 0px;
        box-shadow: 0px 1px 3px 2px #052539;
        float: left;
        height: auto;
        margin: 2.8%;
        margin-left: 1.8%;
        position: absolute;
        width: 12%;
        z-index: 0;
}

	#sidebar a {
	        color: #ffffff;
	}

.sidebar-menu-sup {
        background-color: #003445;
        font-size: 1vw;
        padding: 5%;
        text-align: center;
}

.sidebar-menu-sub {
        background-color: #003f54;
        cursor: pointer;
        font-size: 0.8vw;
        padding: 5%;
        text-align: center;
}

	.sidebar-menu-sub:hover {
       		background-color: #004b63;
	}


/* Creator Tools */

.balloon {
	font-size: 0.5vw;
	text-align: left;
}

#content-ct {
        background-color: #022430;
        border: 1px solid #1d6279;
        box-shadow: 0px 1px 3px 2px #052539;
	color: #ffffff;
        margin: 2%;
        margin-left: 15%;
        margin-top: 3%;
        padding: 2%;
	z-index: 1;
	--balloon-color: rgba(0, 0, 0, 0.95);
  	--balloon-text-color: #3fc2d4;
}

#content-ct h2 {
	background-color: #003445;
	border: 1px solid #4b9ca6;
	border-radius: 8px 8px 0px 0px;
	color: #46b8c7; 
	display: inline-block;
	font-size: 0.9vw;
	margin-bottom: -0.1%;
	margin-left: 45%;
	padding: 0.5%;
	text-align: center;
	text-decoration: none;
}

	#content-ct h2:hover {
		background-color: #003f54;
		cursor: pointer;
	}

#content-ct input {
	background-color: #000000;
	border: 1px solid #4b9ca6;
	color: #3fc2d4;
	font-size: 0.7vw;
	width: 3.7vw;
	-moz-appearance: textfield;
}

	input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

#content-ct p {
        font-size: 0.7vw;
        --balloon-font-size: 0.8vw;
        display: inline;
}

#content-ct table {
	font-size: 0.7vw;
	display: inline-block;
	width: 40vw;
}

	#content-ct th {
		font-weight: normal;
		text-align: right;
		width: 18.8vw;
	}

	#content-ct td {
		text-align: left;
		width: 3.8vw;
	}

.section-line {
        background:linear-gradient(to left, #022430, #4b9ca6, #022430);
        font-size: 0.05vw;
        margin-bottom: 3%;
        width: auto;
}

/* NPC Creator */

.section {
        color: #46b8c7;
        text-align: center;
}

.wowhead {
        background-color: #003445;
        border: 1px solid #4b9ca6;
	color: #d9d9da;
	font-size: 0.8vw;
	font-weight: bold;
	margin-left: 41%;
	margin-bottom: 4%;
	padding: 0.5%;
	text-align: center;
	text-shadow: 0 1px 0 #000000;
        width: 15%;
}

	.wowhead:hover {
	        background-color: #003f54;
	        cursor: pointer;
	}

	.wowhead img {
		width: 50%;
	}

.tooltip {
	background-color: #000000;
	border: 1px solid #4b9ca6;
	display: none;
	float: left;
	margin-left: -18.8%;
	margin-top: -26.1%;
	padding: 1%;
	position: absolute;
	width:40%;
	z-index: 10;
}

.dd, .dd-s  {
        background-color: #000000;
        border: 1px solid #4b9ca6;
	font-size: 0.7vw;
	height: 0.95vw;
	text-align: center;
	position: relative;
}

	.dd {
		width: 3.8vw;
	}

	.dd-s {
		border: 0;
		min-width: 3.8vw;
		max-width: 10vw;
		text-align: left;
	}

	.dd:hover, .dd-s:hover {
		background-color: #003445;
		cursor: pointer;
	}

	.dd-menu {
		border: 1px solid #4b9ca6;
        	box-shadow: 2px 2px 8px 2px #000000;
		position: absolute;
		width: auto;
		z-index: 10;
	}

.input-resize {
	font-size: 0.7vw;
}

	.input-resize:hover {
		cursor: pointer;
	}

	input[type="checkbox"] {
	        display: none;
	}

#content-ct label {
        cursor: pointer;
        border: 1px solid #4b9ca6;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        display: block;
	font-size: 0.7vw;
        padding: 1%;
}

	#content-ct label:hover {
       	 background-color: #003f54;
	}

#create, #copy, #download {
	background-color: #000000;
	border: 1px solid #4b9ca6;
	color: #3fc2d4;
	font-size: 2vw;
	font-weight: bold;
	padding: 1%;
	width: 20%;
}

	#copy, #download {
		font-size: 1vw;
	}

	#create:hover, #copy:hover, #download:hover {
		background-color:#003f54;
		cursor: pointer;
	}

.checkbox-box {
	background-color: #000000;
        border: 1px solid #4b9ca6;
	border-top: 0;
        box-shadow: 2px 2px 8px 2px #000000;
	display: absolute;
        color: #3fc2d4;
	font-size: 0.7vw;
	margin-left: 39.5%;
	margin-top: -2.4%;
	position: absolute;
	text-align: left;
	width: 20%;
	z-index: 10;

}

	.checkbox-button {
       		background-color: #000000;
       		border: 1px solid #4b9ca6;
       		color: #3fc2d4;
       		font-size: 0.7vw;
		height: 0.9vw;
		text-align: center;
        	width: 3.8vw;
	}

	.checkbox-button:hover {
	       	background-color: #003f54;
		cursor: pointer;
	}
	
#sql {
	background-color: #000000;
        border: 1px solid #4b9ca6;
	color: #53e1f5;
	font-family: monospace;
	font-size: 0.6vw;
	margin-top: -0.8%;
	padding: 1%;
}