body{
	font-family: tf2build,Verdana,sans-serif;
	font-size:0.8em;
	margin:0px;
	overflow: hidden;
	color: #EEEEEE;
	background: #111111;
}
#header{
	height:100px;
	border-bottom: 5px solid #0055AA;
}

#main {
	margin: 0px auto;
	/*width:1200px;*/

	height:100%;
	width:100%;
	/*background-color: #000000;*/
	background: rgb(27, 40, 56) none repeat scroll 0% 0%;
	position:relative;
	color: rgba(255, 255, 255, 1.0);
}

/*#mainContent {
	margin: 0px auto;
	height:100%;
	width:100%;
	position:relative;
	display: inline-block;
	vertical-align: top;
}*/
#mainContent {
	margin: 0px auto;
	height:100%;
	width:100%;
	/*background-color: #000000;*/
	position:relative;
	display: inline-block;
	vertical-align: top;
	display: flex;
	align-items: center;
	justify-content: center;
}

#mainAd {
	margin: 0px auto;
	height:100%;
	position:relative;
	display: inline-block;
	vertical-align: top;
	width: 100px;
	background-color: #000000;
}


#footer{
	font-family: Neris Light,Helvetica Neue,Helvetica,Arial,sans-serif;
	text-align: center;
	padding-top:10px;
	background-color: #111111;
	border-top: 5px solid #0055AA;
}


#footer a{
	color:#0055AA;
}
a{
	color: #FFF;
	text-decoration: none;
}
a:active, a:hover {
	outline: 0;
	color: #0055AA;
}
a:hover {
	color: #FFFFFF;
}

#itemBrowser {
	vertical-align:top;
	display:inline-block;
	width:calc(100% - 500px);
	height:100%;
}

#itemPreview {
	position:relative;
	display:inline-block;
	width:500px;
	height:800px;
}

.characterView2 {
	visibility:hidden;
}
/*
.characterViewClassName{
	display:none;
}
.characterViewButton{
	display:none;
} */

#buttonsContainer{
	display:none;
}

.characterView{
	width:48px;
	height:48px;
	display:inline-block;
	vertical-align: top;
	background-size: 100% auto;
	/*position:absolute;*/
	cursor: pointer;
	border-radius:24px;
}

#characterContainer{
	height:48px;
	background-color: rgba(255, 0, 0, 1);

}
#itemsContainer{
	height:calc(100% - 48px);
	background-color: rgba(0, 255, 0, 1);
}
.characterViewSelected{
	background-color: rgba(255, 255, 255, 1);
}
.workshopListViewHeader{
	height:100px;
	background-color: rgba(0, 255, 255, 1);
}
.workshopListViewMain{
	height:calc(100% - 100px);
	background-color: rgba(255, 0, 255, 1);
	overflow:hidden;
}
.workshopListViewInner{
	/*column-count: 3;
	-moz-column-count: 3;
	-webkit-column-count: 3;   */
	height:100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.workshopListViewScroll{
	width:50px;
	height:20px;
	display:inline-block;
	background-color: rgba(100, 100, 0, 1);
	cursor:pointer;

}


.workshopItem{
	width:200px;
	height:200px;
	margin:5px;
	/*background-color: rgba(255, 255, 0, 1);*/
	display:inline-block;
	/*border: 3px solid #1B2838;*/
	background-size: 100% auto;
	position: relative;
	cursor:pointer;
}
.workshopItemSelected{
	border: 3px solid rgba(0, 255, 0, 1);
}

.workshopItemPreviewImage{
    width: 200px;
    max-height: 200px;
    vertical-align: middle;
}
.workshopItemInfo{
    width: 200px;
	bottom:0px;
    position: absolute;
    font-size:20px;
    background-color: rgba(27, 40, 56, 0.5);
	position:absolute;
    text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workshopItemTitle{
    font-size:20px;
    text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.workshopItemCreator{
    font-size:16px;
    display: flex;
	align-items: center;
	/*padding:3px;*/
    text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.workshopItemAvatar {
	height:16px;
}



#fileDropZone {
	width:50px;
	height:50px;
	background-color: rgba(240, 240, 240, 1);
}

#FPS{
	position: absolute;
	top:0px;
}

#canvasContainer{
	position:relative;
	display:inline-block;
	background-color: rgba(255, 255, 255, 0);
    /*cursor:url(./img/rotate270anticlockwise3green.png),all-scroll;*/
}

.uploadView {
	display:inline-block;
	width:600px;
	height:800px;
	border: 1px solid #BBBBBB;
	position: absolute;
	top:0px;
	vertical-align:top;
}

/*.uploadViewMain {
	display:inline-block;
	width:400px;
	/*height:00px;*/
	vertical-align:top;
}*/

.uploadViewSide {
	display:inline-block;
	width:200px;
	height:300px;
}

#uploadFileName{
	width:90%;
	top:10px;
	left:5%;
	display:inline-block;
	font-size:1.5em;
	text-align: center;

}

/*.uploadFileView {
	/*width:100%;*/
	margin:2px;
	padding:2px;
	background-color:rgba(200, 200, 200, 1);
	/*height:50px;*/
}*/

.uploadFileViewErroneous{
	background-color:rgba(200, 100, 100, 1);
}

.uploadFileViewLine1 {
	float: left;
}
.uploadFileViewLine2 {
	text-align: right;
}

.uploadFileViewLine3 {
	/*float: left;*/
}
.uploadFileViewLine4 {
	text-align: right;
	cursor:pointer;
}
.uploadFileViewLine6 {
	display:inline-block;
	height:3px;
	background-color:rgba(0, 200, 0, 1);

}
.uploadFileError {
}
.uploadFileButtonTest{
	display: inline-block;
	width:50%;
	text-align: center;
	cursor:pointer;
}
.uploadFileButtonUpload{
	display: inline-block;
	width:50%;
	text-align: center;
	cursor:pointer;
}


.uploadFileWorkshopUrl{
	width:10px;
	display:none;
}

.uploadClassTestButton{
	display:inline-block;
	cursor:pointer;
}

.uploadClassTestButtonActivated{
	display:inline-block;
	cursor:pointer;
}


#sits {
	background-image:url(img/sits_large_border.png);
	text-align: center;
	position:fixed;
	right:30px;
	top:30px;
	width:118px;
	height:51px;
}

#signedas {
	background-image:url(../php/openid/getavatar.php);
	text-align: center;
	position:fixed;
	right:30px;
	top:30px;
	width:32px;
	height:32px;

	border: 2px solid #FFFFFF;
	border-radius: 3px;
}

.uploadFileWorkshopCheckOk {
	color:rgba(0, 255, 0, 1);
	display:inline-block;
}

.uploadFileWorkshopCheckButton {
	display:inline-block;
	cursor:pointer;
}

.workshopItemName {
	/*top:60%;*/
	/*height:20%;
	font-size: 20%;*/
	font-weight:bold;
	color:rgba(255, 255, 255, 1);
	background-color: rgba(60, 106, 139, 0.5);
	font-size:1em;
	white-space: nowrap;
	overflow: hidden;
}

/*.workshopItemCreator {
	background-color: rgba(60, 106, 139, 0.5);
	font-size:0.8em;
	font-weight:bold;
	color:rgba(255, 255, 255, 1);
}*/

.workshopItemBlock1 {
	position:absolute;
	bottom:0px;
	width: 100%;
}

.workshopItemBlock2 {
}

.workshopListFilter {
	display:inline-block;
	height:100%;
	background-color: rgba(250, 106, 139, 1.0);
	vertical-align:top;
	width:50%;
}
.workshopListSelectedItem{
	display:inline-block;
	height:100%;
	background-color: rgba(60, 255, 139, 1.0);
	vertical-align:top;
	width:50%;

}

.workshopListSelectedItemPic{
	height:100%;
	background-size: 100% auto;
	display:inline-block;
}

.workshopListSelectedItemMisc{
	display:inline-block;
	vertical-align:top;
}
.workshopListSelectedItemName {
	/*display:inline-block;*/
	font-weight:bold;
	color:rgba(255, 255, 255, 1);
	/*background-color: rgba(60, 106, 139, 0.5);*/
	vertical-align:top;
	font-size:2em;
}
.workshopListSelectedItemCreator {
	/*display:inline-block;*/
	font-weight:bold;
	color:rgba(255, 255, 255, 1);
	/*background-color: rgba(60, 106, 139, 0.5);*/
	/*vertical-align:top;*/
	font-size:1.5em;
}

.workshopListSelectedItemLinkDiv {
	/*background-image:url(http://steamcommunity-a.akamaihd.net/public/shared/images/apphubs/bg_workshop_header.png);
	background-size: 100% auto;*/
}

.workshopListSelectedItemLink {
	color:rgba(255, 255, 255, 1.0);
	font-size:1.5em;
}


/* canvas flipper stuff */
/* entire container, keeps perspective */
.canvasFlipContainer{
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;

	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
}

/* flip the pane when hovered */
.canvasFlipContainer:hover .flipper, .canvasFlipContainer:hover .flipper {
	transform: rotateY(180deg);
}

.canvasFlipContainer:hover .front, .canvasFlipContainer.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.canvasFlipContainer, .front, .back {
	width: 500px;
	height: 800px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	/*position: relative;*/
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

/*
#previewList{
	position:absolute;
	width:75px;
	height:75px;
	top:0px;
	right:0px;
	background-color: rgba(255, 0, 0, 1.0);
	z-index: 10;
}

#previewCanvas{
	position:absolute;
	width:75px;
	height:75px;
	top:0px;
	right:0px;
	background-color: rgba(0, 255, 0, 1.0);
	z-index: 10;
}   */

#previewList, #previewCanvas{
	cursor:pointer;
	position:absolute;
	width:100%;
	/*height:px;*/
	top:0px;
	right:0px;
	background-color: rgba(0, 0, 0, 1.0);
	color: rgba(255, 255, 255, 1.0);
	z-index: 10;
	font-weight:bold;
	font: 2em;
	text-align: center;
}

#currentItemList{
	background-color: rgba(255, 0, 0, 1.0);
	width:500px;
	height: calc(100% - 48px);
	padding-top:48px;
}

.currentItem{
	background-color: rgba(0, 255, 0, 1.0);
	width:100%;
	height: 100px;

}

.workshopButtonDarkBlue{
    background: transparent linear-gradient(to bottom, #2F89BC 5%, #17435C 95%) repeat scroll 0% 0%;
    font-size: 30px;
	font-weight: bold;
    border-radius: 2px;
    border: medium none;
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
    text-decoration: none !important;
    color: #A4D7F5 !important;
}
#signedas {
    background-image: url("../php/openid/getavatar.php");
    text-align: center;
    position: fixed;
    right: 3em;
    top: 3em;
    width: 32px;
    height: 32px;
    border: 2px solid #FFF;
    border-radius: 3px;
	cursor:pointer;
}

.workshopItemInfo a{
	text-decoration: none;
	/*colo	r: #05A;*/
}

.classIconDemoman{
	background-image: url("./class_icon/filter_demo_motd.png");
}
.classIconEngineer{
	background-image: url("./class_icon/filter_engineer_motd.png");
}
.classIconHeavy{
	background-image: url("./class_icon/filter_heavy_motd.png");
}
.classIconMedic{
	background-image: url("./class_icon/filter_medic_motd.png");
}
.classIconPyro{
	background-image: url("./class_icon/filter_pyro_motd.png");
}
.classIconScout{
	background-image: url("./class_icon/filter_scout_motd.png");
}
.classIconSniper{
	background-image: url("./class_icon/filter_sniper_motd.png");
}
.classIconSoldier{
	background-image: url("./class_icon/filter_soldier_motd.png");
}
.classIconSpy{
	background-image: url("./class_icon/filter_spy_motd.png");
}
.classIconAll{
	background-image: url("./class_icon/filter_all_motd.png");
}
.workshopItemClass{
	height:24px;
	width:24px;
    background-size: 100% auto;
	cursor:pointer;
    /*filter: invert(100%) hue-rotate(180deg);*/
}

.workshopItemClassList{
	position:absolute;
	top:5px;
	right:5px;
	z-index:1;
}



#miniCharacterPanel{
	position:absolute;
	bottom:0px;
	right:0px;
	z-index:10;
	height:42px;
}

.characterIconDiv {
	height: 100%;
	width: 42px;
	display: inline-block;
	background-size: 100% auto;
	background-repeat: no-repeat;
	cursor: pointer;
}

.workshopBrowsePageNumber{
	cursor:pointer;
	padding-left:2px;
	padding-right:2px;
}

.pageButton{
	display: inline-block;
	line-height: 24px;
	background-color: rgba(103, 193, 245, 0.2);
	border: 1px none transparent;
	border-radius: 3px;
	cursor: pointer;
	padding: 0px 16px;
	color: #66C0F4;
}

.pageButton.disabled, .pageButton.disabled:hover{
    border: 1px solid #253E4C;
    background-color: transparent;
    color: #253E4C;
    cursor: default;
}

.workshopItemNothing{
	display: flex;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	color: rgb(67, 80, 96);
}

.workshopItemNotAllowed{
	cursor:not-allowed;
}

.workshopTooltip{
	position:absolute;
	background-color: rgba(236, 162, 13, 0.7);
    background-color: rgb(198, 156, 95);
	font-size:15px;
	padding:3px;
	z-index:0;
	width:160px;
	//top:50%;


}

#workshopUploadBanner{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 50px;
    font-weight: bold;
}
.itemSelectorElementImgPaint{
	position:absolute;
	width:15%;
	height:15%;
	width:40px;
	height:40px;
	background-size: 100% auto;
	overflow:hidden;
	top:0%;
	left:0%;
	background-image: url('./img/paintcan.png');
}

/* Paints */
.paintsDivOuter{
	position:fixed;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
}
.paintsDivInner{
	position:absolute;
	height:400px;
	width:400px;
	top:calc(50% - 100px);
	left:calc(50% - 200px);
    background-color: rgba(255, 255, 255, 1.0);
	padding:10px;
	z-index:10;
}
.paintsDivHeader{
	height:50px;
	width:100%;
	vertical-align:baseline;
}
.paintName{
	font-size:2em;
	overflow:hidden;
	color: #000;
	display:inline-block;
    text-overflow: ellipsis;
	white-space: nowrap;
    width: 350px;
    position: absolute;
}
.paintSelectedItem{
	width:50px;
	height:50px;
	display:inline-block;
	background-size: 100% auto;
	overflow: hidden;
}

.effectOption{
	width:50px;
	height:50px;
	display:inline-block;
}

#animSelectorContainer{
	position:absolute;
	top:10px;
	right:10px;
}