@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: Elemental;
    src: url('Elemental.ttf');
	color: #666;
}

div.SiteContainer {
	background-color: #FFF;
	position: relative;
	width: 100%;
	height: 80vh;
}

div.LoginContainer {
	width: 100%;
	height: 80vh;
}

div.CharacterContainer {
	display: none;
	width: 100%;
	min-width: 1100px;
}

div.Header {
	font-family: Elemental;
	font-size: 40px;
	color: #666;
	background-color:#FFF;
	border-bottom-style: solid;	
	border-bottom-color: #666;
	border-bottom-width: 2px;
	width: 100%;
	height: 80px;
        font-weight: bold;
	display: block;
}

div.Header-Left {
	float: left;
	display:inline;
	padding-left: 20px;
	line-height: 75px;
}

div.Header-Right {
	float: right;
	padding-right: 5px;
	display: inline;
}

div.CharacterList {
	display: none;
	width: 100%;
}

div.CharacterPreview {
	background-color:#FFF;
	width: 300px;
	padding: 2px;
	float: left;
}

div.CharacterContent {
	float: left;
	display: table;
	font-family: Elemental;
}

div.CreateNew {
	display: none;
	width: 100%;	
}

div.MenuItem {
	background-color:#FFF;
	width: 100%;
	font-family: Elemental;	
	color: #666;
	vertical-align: middle;
	font-size: 36px;
	display: block;
}

div.MenuContent {
	display: none;
	background-color:#FFE;
	width: 100%;	
}

div.levelUp {
	display: none;
	width: 100%;	
}

p.mediumText, div.mediumText {
	font-family: Elemental;
	font-size: 24px;
	color: #666;
	vertical-align: middle;
}

div.CharacterTile {
	color: #666;
	border: 3px;
	padding-left: 3px;
	display: table-row;
}

div.CharacterTileIcon {
	display: table-cell;
	padding-left: 2px;
}

div.CharacterTileDetails {
	display: table-cell;
	font-family: Elemental;
	font-weight: bold;
	padding-left: 8px;
	padding-right: 5px;
}

div.CharacterTileName {
	font-size: 36px;
	vertical-align: top;
	display: inline-block;
}

div.CharacterTileClass {
	font-size: 24px;
}

div.CharacterTileButton {
	display: table-cell;
    	height: 100%;
}

div.Spacer {
	width: 100%;
	height: 20px;
}

div.Footer {
	width: 100%;
	height 20px;	
}

input {
	text-align: center;
}

input.ConfirmButton {
	text-align: center;
	width: 230px;
	height: 35px;
	border-radius: 3px;
	background-color: #00ACD8;
	font-family: Elemental;
	font-weight: normal;
	color: #FFFFFF;
	font-size: 28px;
	border: none;	
}

div.Login {
	text-align: center;
	margin: auto;
	position: relative;
	padding: 150px 150px;
}

input.Field {
	text-align: left;
	width: 225px;
	height: 22px;
	border-radius: 3px;
	border: 1px;
	border-style: solid;
	border-color: #AAA; 
	padding-left: 4px;
}

input.Button {
	text-align: center;
	width: 230px;
	height: 35px;
	border-radius: 3px;
	background-color: #00ACD8;
	font-family: Elemental;
	font-weight: normal;
	color: #FFFFFF;
	font-size: 28px;
	border: none;
	
}

p.Login {
	font-family: Elemental;
	font-weight: bold;
	font-size: 32px;
	color: #666;
	
}


a:link, visited {
    text-decoration: none;
	color: #666;
}

a:visited {
    text-decoration: none;
	color: #666;
}

a:hover {
    text-decoration: none;
	color: #666;
}

a:active {
    text-decoration: none;
	color: #666;
}