body{
	font-family		:	"Source Sans Pro" "Helvetica Neue" "Century Gothic" "Tahoma";
	background		:	#000;
	color			:	#fff;
	padding 		:	0px;
	margin			:	0px;
	text-align		:	center;
}

a, a.visited{
	color			:	#fff;
	text-decoration	:	none;
}

.allBlackTable{
	z-index			:	1;
	display			:	none;
	position		:	fixed;
	height			:	100%;
	width			:	100%;
}

.allBlackCell{
	display			:	table-cell;
	background		:	rgba(0,0,0,0.8);
	vertical-align	:	middle;
	height			:	100%;
	width			:	100%;
}

.allBlackContent{
	background		:	#fff;
	color			:	#000;
	padding			:	2%;
}

.element{
	display: inline-block;
	vertical-align:middle;
}

.mainInitImage{
	width			:	40%;
}

.orangeText{
	color			:	#f90;
}
.blueText{
	color			:	#06c;
}
.redText{
	color			:	#f00;
}
.greenText{
	color			:	#0f0;
}

.aboveNav{
	background		: 	#666;
	margin			: 	1% 1% 2% 1%;
	padding			: 	1% 1% 1% 1%;
	width			: 	96%;
	text-align		:	center;
}

.aboveNavTable{
	width:100%;
	text-align:right;
}

.aboveNavTitleCell{
	width:70%;
	text-align:center;
}

.smallCell{
	width:10%;
}

.navUserImage{
	width			:	100%;
}

.matchTypesContainer{
	background		: 	#333;
	margin			: 	0% 1% 0% 1%;
	padding			: 	1% 1% 1% 1%;
	text-align		:	center;		
}

.modeSelected{
	color			:	#fff;
}

.modeNoSelected{
	color			:	#aaa;
}

.newMatchContainer{
	margin			: 	1%;
	padding			: 	0% 1% 1% 1%;
	max-width		: 	41%;
	background		:	#222;	
}

.stagesContainer{
	margin			: 	1%;
	padding			: 	1%;
	width			: 	46%;
	text-align		:	center;		
}

.stageImage{
	width			:	48%;
}

.secondContainer{
	margin			: 	1%;
	padding			: 	1%;
	width			: 	16%;
	display			:	none;
}

.resultContainer{
	text-align		:	center;	
	width			: 	100%;	
	display			:	none;
}

.resultImage{
	width			:	76%;
	margin			:	5% 0% 5% 0%;
}

.positionContainer{
	width			:	100%;
	text-align		:	center;	
	display			:	none;
}

.operationResult{
	background		:	#6f6;
	padding			:1%;
	display			:none;
}

.userDataContainer{
	background		:	#222;
	margin			: 	1%;
	padding			: 	0% 0% 1% 0%;
	width			:	36%;
}

.userDataContainer hr{
	width			:	90%;
}	

.userSectionsContainer{
	/*background		:	#222;*/
	width			:	100%;
}

.dataContainerInside{
	padding			:	1%;
}

.alignRightCell{
	text-align		: 	right;
	padding-right	:	2%;
}

.tagTable{
	width			:	100%;
	border-spacing	:	0px;
	margin			:	0% 0% 5% 0%;
}

.tagCell, .tagCellSelected{
	width			:	20%;
	background		:	#666;
	margin			:	-1%;
}

.tagCellSelected{
	background		:	#aaa;
}

.splatfestContainer{
	background		:	#f90;
	margin			:	3%;
	padding			:	2%;
	width			:	90%;
}

.dataIconImage{
	width			:	40%;
} 

.matchListContainer{
	width			:	80%;
	margin			: 	1%;
	padding			: 	1%;
	background		:	#ccc;
}

.matchListContainer table{
	width			:	100%;
}

.matchListContainer td{
	text-align		:	center;
	vertical-align	:	middle;
}

.matchSageImage{
	width			:	10%;
}

.redLink{
	color			: 	#f00;
}


.friendSectionTable{
	width			:	100%;
}

.friendSectionTable td{
	width			:	50%;
}

.paddingTopBottom{
	padding			:	2% 0% 2% 0%;
}

.padding2{
	padding			:	2%;
}

.alignLeft{
	text-align		:	left;
}

.alignCenter{
	text-align		:	center;
}

.alignRight{
	text-align		:	right;
}

.notificationListContainer{
	width			:	65%;
	margin			: 	1%;
	padding			: 	1%;
	text-align		:	center;
}

.notificationListContainer table{
	width			:	100%;
	background		:	#888;
}

@media only screen and (min-width: 420px){
	body,td,th { font-size:10px;}
}
@media only screen and (min-width: 720px){
	body,td,th { font-size:18px;}
}

@media only screen and (min-width: 420px){
	.tinyText { font-size:5px;}
}
@media only screen and (min-width: 720px){
	.tinyText { font-size:8px;}
}

@media only screen and (min-width: 420px){
	.bigText { font-size:20px;}
}
@media only screen and (min-width: 720px){
	.bigText { font-size:30px;}
}

@media only screen and (min-width: 420px){
	.halfText { font-size:8px;}
}
@media only screen and (min-width: 720px){
	.halfText { font-size:14px;}
}