@font-face {
    font-family: endorFont;
    src: url("../fonts/ENDOR___.ttf");
}

@font-face {
    font-family: endorFontAlt;
    src: url("../fonts/ENDORALT.ttf");
}

@font-face {
    font-family: calligraphyFLF;
    src: url("../fonts/CalligraphyFLF.ttf");
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
	background-image: url("../images/GreyWallpaper.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#imgLoading {
    background: #fff;
    position: absolute;
    width: 1366px;
	height: 768px;
    overflow: hidden;
    z-index: 10;
}

#loadingScreen h1 {
    font-family: endorFont,Times,serif;
	font-size: 32px;
    letter-spacing: 1px;
}

#loadingScreen {
    background: #000;
    position: absolute;
    width: 1366px;
	height: 768px;
    text-align: center;
    color: #fff;
    padding-top: 344px;
    z-index: 11;
}

#loadingScreen img {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

#mainContainer {
	width: 1366px;
	height: 768px;
	overflow: hidden;
	background-color: black;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	position: relative;
	z-index: 1;
}

#mainText {
	position: absolute;
	width: 1366px;
	height: 72px;
	padding: 348px 0px;
	font-family: endorFont,Times,serif;
	font-size: 36px;
	color: white;
	text-align: center;
	cursor: default;
}

#conversationBox{
	position: absolute;
	width: 1140px;
	height: 100px;
	left: 83px;
	bottom: 30px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-color: rgba(0,0,0,0.5);
	font-family: calligraphyFLF,Times,serif;
	color: white;
	padding: 20px;
	font-size: 36px;
	text-align: left;
	cursor: default;
	z-index: 5;
}

#conversationBoxTop{
	position: absolute;
	width: 1140px;
	height: 100px;
	left: 83px;
	top: 30px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-color: rgba(0,0,0,0.5);
	font-family: calligraphyFLF,Times,serif;
	color: white;
	padding: 20px;
	font-size: 36px;
	text-align: left;
	cursor: default;
	z-index: 5;
}

#conversationTextBox {
	position: absolute;
	width: 1140px;
	height: 100px;
	left: 10px;
	bottom: 10px;
	color: white;
	padding: 20px;
	background-color: rgba(0,0,0,0.5);
	font-family: calligraphyFLF,Times,serif;
	font-size: 36px;
	text-align: left;
	cursor: default;
}

#conversationTextBoxFrame {
	position: absolute;
	width: 1200px;
	height: 160px;
	left: 83px;
	bottom: 30px;
	background-color: rgba(255,255,255,0.5);
	cursor: default;
}

#backgroundImage {
	width: 1366px;
	height: 768px;
	background-image: url("../images/HarrenhalBackground.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#portraitLeft {
	width: 300px;
	height: 465px;
	position: absolute;
	left: 10px;
	top: 10px;
	background-image: url("../images/RhaegarPortrait.jpg");
	background-size: 100% 100%;
}

#portraitRight {
	width: 300px;
	height: 465px;
	position: absolute;
	right: 10px;
	top: 10px;
	background-image: url("../images/LyannaPortrait.jpg");
	background-size: 100% 100%;
}

#topLeftPortrait {
	position: absolute;
	left: 50px;
	top: 50px;
	width: 250px;
	height: 250px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-image: url("../images/BrandonStarkPortrait200200.png");
	background-size: 100% 100%;
}

#topLeftPortrait {
	left: 83px;
	top: 20px;
	background-image: url("../images/BrandonStarkPortrait200200.png");
}

#topRightPortrait {
	right: 83px;
	top: 20px;
	background-image: url("../images/BrandonStarkPortrait200200.png");
}

#bottomLeftPortrait {
	left: 83px;
	top: 300px;
	background-image: url("../images/BrandonStarkPortrait200200.png");
}

#bottomRightPortrait {
	right: 83px;
	top: 300px;
	background-image: url("../images/BrandonStarkPortrait200200.png");
}

#centrePortrait {
	right: 483px;
	top: 120px;
	background-image: url("../images/BrandonStarkPortrait200200.png");
}

.largePortrait {
	position: absolute;
	width: 400px;
	height: 400px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-size: 100% 100%;
}

.smallPortrait {
	position: absolute;
	width: 250px;
	height: 250px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-size: 100% 100%;
}

.normalPortrait {
	position: absolute;
	width: 320px;
	height: 485px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-size: 100% 100%;
}

.normalCharacterSelect {
	position: absolute;
	width: 300px;
	height: 300px;
	border-style: solid;
	border-width: 10px;
	border-color: white;
	background-size: 100% 100%;
	z-index: 6;
}

#characterSelectBackground{
	position: absolute;
	width: 1143px;
	height: 620px;
	left: 100px;
	top: 20px;
	background-color: rgba(0,0,0,0.8);
	border-color: white;
	border-style: solid;
	border-width: 10px;
	z-index: 5;
}

#leftCharacterSelect{
	left: 200px;
	top: 200px;
	background-image: url("../images/RhaegarTargaryenCharacterSelect.png");
}

#rightCharacterSelect{
	right: 200px;
	top: 200px;
	background-image: url("../images/BarristanSelmyCharacterSelect.png");
}

#startRaceFlag{
	position: absolute;
	width: 100px;
	height: 200px;
	left: 450px;
	top: 135px;
	z-index: 4;
}

#rhaegarHorse{
	position: absolute;
	left: 50px;
	top: 350px;
	z-index: 7;
}

#barristanHorse{
	position: absolute;
	right: 50px;
	top: 300px;
	z-index: 6;
}

#characterSelectText{
	position: absolute;
	width: 1366px;
	margin-left: auto;
	margin-right: auto;
	height: 72px;
	font-family: endorFont,Times,serif;
	font-size: 36px;
	color: white;
	text-align: center;
	top: 50px;
	cursor: default;
	z-index: 6;
}

#character1Text{
	position: absolute;
	width: 500px;
	height: 72px;
	left: 110px;
	top: 550px;
	font-family: endorFont,Times,serif;
	font-size: 30px;
	color: white;
	text-align: center;
	cursor: default;
	z-index: 6;
}

#character2Text{
	position: absolute;
	width: 500px;
	height: 72px;
	right: 110px;
	top: 550px;
	font-family: endorFont,Times,serif;
	font-size: 30px;
	color: white;
	text-align: center;
	cursor: default;
	z-index: 6;
}

#leftPortrait{
	left: 83px;
	top: 70px;
	background-image: url("../images/WalterWhent.png");
}

#rightPortrait{
	right: 83px;
	top: 70px;
	background-image: url("../images/WalterWhent.png");
}

.portraitFrame {
	width: 320px;
	height: 485px;
	position: absolute;
	top: 70px;
	background-color: rgba(255,255,255,0.5);
}

#leftFrame {
	left: 50px;
}

#rightFrame {
	right: 50px;
}