@charset "UTF-8";
/*
===================================
HTML elements (sorted cascadingly)
===================================
*/
* {
	margin:0;
	padding:0;
	vertical-align:middle;
}
body {
/* 
standard 100% = 16px; 62.5% makes 1em = 10px, 75% makes 12px 
*/
	background-color:black;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	height:100%;
	width:100%;
	overflow:hidden;
}
button {
	background-color:#08088A;
	color:white;
	border-color:white gray black white;
	border-radius:4px;
	border-style:solid;
	border-width:1px;
	margin:3px;
	padding:3px 5px;
	text-align:center;
}
button:hover {
	border-color:black white white gray;
	background-color:green;
}
button.ancestor {
	border:1px gray solid;
	border-radius:5px;
	background-color:white;
	color:black;
	padding:5px;
}
button.attention {
	background-color:red;
	color:white;
}
button.inactive {
	background-color:gray;
	cursor:not-allowed;
}
button.miniButton {
	border-radius:0;
	padding:2px 3px;
	margin:0 5px;
	font-size:12px;
}
button.switch,
button.switchOff,
button.switchOn {
	margin-left:10px;
	margin-right:10px;
}
button.switchOff {
	background-color:#DEDEDE;
	color:gray;
}
button.switchOn {
	background-color:green;
	color:white;
}
button.userCentral {
	border-radius:50px;
	font-size:20px;
	background-color:#DAA520;
	color:black;
	padding:5px;
}
button.whiteButton {
	background-color:white;
	color:black;
}
button.whiteButton:hover {
	background-color:green;
	color:white;
}
fieldset {
	border:1px hidden;
	margin:1px;
	padding:5px;
}
fieldset.actions {
	border:1px red solid;
	height:54px;
}
img.avatar {
	max-height:90px;
	max-width:90px;
}
img.geoMap {
	width:256px;
	height:256px;
	margin:5px;
	border:1px solid;
	border-color:white gray black white;
}
img.icon {
	height:40px;
	width:auto;
}
img.iconBig {
	height:64px;
	width:auto;
}
img.iconSmall {
	height:32px;
	width:auto;
}
img.iconTiny {
	height:24px;
	width:auto;
}
img.loginVisual,
img.loginVisualActive {
	height:64px;
	width:64px;
	border:6px solid white;
	margin:1px;
}
img.loginVisualActive {
	border:6px solid red;
}
img.logo {
	width:256px;
	height:auto;
}
img.logo:hover {
	border:1px red solid;
}
img.photoThumb {
	max-height:64px;
	max-width:64px;
}
img.photoFull {
	max-height:400px;
	max-width:640px;
}
img.picLogo {
	height:80px;
	width:auto;
	margin-left:5px;
	margin-right:5px;
}
img.picNav {
	height:80px;
	width:80px;
	cursor:pointer;
}
input.privbox {
	width:30px;
	cursor:not-allowed;
}

input.audioTime,
input.videoTime {
	background-color:white;
	color:black;
	width:40px;
	margin:3px;
	text-align:center;
}
label {
	color:yellow;
	margin: 0 5px 0 5px;
}
legend {
	color:blue;
}
legend.actions {
	color:red;
}
li:hover {
	color:red;
}
ol {
	list-style-position:inside;
	list-style-type:decimal-leading-zero;
}
ul.noBullet {
	list-style-type:none;
}
p {
	word-wrap:break-word;
}
span {
	word-wrap:break-word;
}
table.nav {
	width:100%;
	table-layout:auto;
	text-align:center;
	vertical-align:middle;
	font-size:15px;
}
td.nav {
	width:120px;
	color:white;
	text-align:center;
}
td.slideArrow {
	width:40px;
}
textarea.email2all {
	width:95%;
	height:65%;
	margin:0 5px;
	padding:3px;
}
textarea.happening {
	width:95%;
	height:80px;
	margin:0 5px;
	padding:3px;
}
textarea.note {
	width:95%;
	height:160px;
	margin:0 5px;
	padding:3px;
}
ul {
	list-style-position:inside;
}
ul.circle {
	list-style-type:circle;
}
ul.disc {
	list-style-type:disc;
}
ul.square {
	list-style-type:square;
}
/*===========*/
/* Alignment */
/*===========*/
.alignBottom	{vertical-align:bottom;}
.alignLeft		{text-align:left;}
.alignMiddle	{vertical-align:middle;}
.alignRight		{text-align:right;}
.alignTop		{vertical-align:top;}
.centered		{text-align:center;}
.centeredH		{margin-left:auto; margin-right:auto;}
.centeredV		{margin-top:auto; margin-bottom:auto;}
.centered4		{margin:auto;}
.floatLeft		{float:left;}
.floatRight		{float:right;}

/*=========*/
/* Borders */
/*=========*/
.borderblue		{border:1px blue solid;}
.bordergray		{border:1px gray solid;}
.bordergreen	{border:1px green solid;}
.borderred		{border:1px red solid;}
.borderwhite	{border:1px white solid;}
.borderyellow	{border:1px yellow solid;}
.bordernone		{border:0;}

/*==========*/
/* Pointers */
/*==========*/
.clickauto		{pointer-events: auto;}
.clickthrough	{pointer-events: none;}

/*=============*/
/* color codes */
/*=============*/
.backazure			{background-color:#00BFFF;}
.backblack			{background-color:black;}
.backblue			{background-color:blue;}
.backbluedark		{background-color:#08088A;}
.backbluelight		{background-color:#ADD8E6;}
.backbluelightgray	{background-color:#B0C4DE;}
.backbrown			{background-color:#7A0000;}
.backbrowndark		{background-color:#5C3317;}
.backcopper			{background-color:#B87333;}
.backgold			{background-color:#DAA520;}
.backgray			{background-color:gray;}
.backgraylight		{background-color:#E6E6E6;}
.backgreen			{background-color:green;}
.backgreendark		{background-color:#001E0E;}
.backgreenlight		{background-color:#76EE00;}
.backpurple			{background-color:purple;}
.backred			{background-color:red;}
.backsilver			{background-color:#D3D3D3;}
.backtransparent	{background-color:transparent;}
.backwhite			{background-color:white;}
.backyellow			{background-color:yellow;}
.backyellowlight	{background-color:#F8ED8D;}

.colorazure			{color:#00BFFF;}
.colorblack			{color:black;}
.colorblue			{color:blue;}
.colorbluedark		{color:#08088A;}
.colorbluelight		{color:#ADD8E6;}
.colorbluelightgray	{color:#B0C4DE;}
.colorbrown			{color:#7A0000;}
.colorbrowndark		{color:#5C3317;}
.colorcopper		{color:#B87333;}
.colorgold			{color:#DAA520;}
.colorgray			{color:#DEDEDE;}
.colorgraylight		{color:#E6E6E6;}
.colorgreen			{color:green;}
.colorgreendark		{color:#001E0E;}
.colorgreenlight	{color:#76EE00;}
.colororange		{color:#FFA500;}
.colorpink			{color:#FFC0CB;}
.colorpurple		{color:purple;}
.colorred			{color:red;}
.colorsilver		{color:#D3D3D3;}
.colorwhite			{color:white;}
.coloryellow		{color:yellow;}
.coloryellowlight	{color:#F8ED8D;}

/*=========*/
/* Margins */
/*=========*/
.margin0	{margin:0;}
.margin2	{margin:2px;}
.margin3	{margin:3px;}
.margin5	{margin:5px;}
.margin10	{margin:10px;}
.margin15	{margin:15px;}
.margin20	{margin:20px;}
.marginB5	{margin-bottom:5px;}
.marginLR2	{margin-left:2px; margin-right:2px;}
.marginLR3	{margin-left:3px; margin-right:3px;}
.marginLR5	{margin-left:5px; margin-right:5px;}
.marginLR10	{margin-left:10px; margin-right:10px;}
.marginTB3	{margin-top:3px; margin-bottom:3px;}
.marginTB5	{margin-top:5px; margin-bottom:5px;}
.marginTB10	{margin-top:10px; margin-bottom:10px;}
.marginTB20	{margin-top:20px; margin-bottom:20px;}

/*=========*/
/* Opacity */
/*=========*/
.opacity50	{opacity:0.5;}
.opacity100	{opacity:1.0;}

/*==========*/
/* Overflow */
/*==========*/
.overflowauto	{overflow:auto;}
.overflowhidden	{overflow:hidden;}
.overflowY		{overflow-y:scroll;}
.overflowYauto	{overflow-y:auto;}

/*=========*/
/* Padding */
/*=========*/
.padding0	{padding:0;}
.padding2	{padding:2px;}
.padding3	{padding:3px;}
.padding4	{padding:4px;}
.padding5	{padding:5px;}
.padding10	{padding:10px;}
.padding15	{padding:15px;}
.padding20	{padding:20px;}

/*============*/
/* Font Sizes */
/*============*/
.size_S		{font-size:10px;}
.size_M		{font-size:12px;}
.size_L		{font-size:15px;}
.size_XL	{font-size:20px;}
.size_XXL	{font-size:24px;}
.size_XXXL	{font-size:32px;}
.size_XXXXL	{font-size:64px;}

/*====================*/
/* Font manipulations */
/*====================*/
.bold		{font-weight:bold;}
.italic		{font-style:italic;}
.underline	{text-decoration:underline;}
.linewrap	{word-break:break-all;}
.wordwrap	{word-wrap:break-word;}
.nowrap		{white-space:nowrap;}

/*============*/
/* Visibility */
/*============*/
.inline			{display:inline-block;}
.invisible		{display:none;}
.visibilityOf	{visibility:hidden;}
.visibilityOn	{visibility:visible;}
.visible		{display:block;}
.z99			{z-index:99;}

/*=======*/
/* Width */
/*=======*/
.width10p	{width:10%;}
.width15p	{width:15%;}
.width20	{width:20px;}
.width20p	{width:20%;}
.width30	{width:30px;}
.width30p	{width:30%;}
.width40	{width:40px;}
.width40p	{width:40%;}
.width50	{width:50px;}
.width50p	{width:50%;}
.width60	{width:60px;}
.width60p	{width:60%;}
.width70	{width:70px;}
.width70p	{width:70%;}
.width80	{width:80px;}
.width80p	{width:80%;}
.width90	{width:90px;}
.width90p	{width:85%;}
.width95	{width:95px;}
.width95p	{width:95%;}
.width100	{width:100px;}
.width100p	{width:100%;}
.width150	{width:150px;}
.width200	{width:200px;}
.width300	{width:300px;}
.width400	{width:400px;}
.width500	{width:500px;}
.width600	{width:600px;}

/*========*/
/* Zebras */
/*========*/
.zebra:nth-child(odd)		{background-color:#B0C4DE;}
.zebra:nth-child(even)		{background-color:#ADD8E6;}
.zebraLight:nth-child(odd)	{background-color:#E6E6E6;}
.zebraLight:nth-child(even)	{background-color:#D3D3D3;}

/*=========================*/
/* Other dedicated classes */
/*=========================*/
.feedbackText {
	width:95%;
	height:200px;
	padding:5px;
	overflow-y:scroll;
}
.grayBlock,
.paperBlock {
	background-color:#DEDEDE;
	border-color:white gray black white;
	border-radius:4px;
	border-style:solid;
	border-width:1px;
	padding:5px;
}
.paperBlock {
	background-color:#FFFFCC;
}
.infoBlock {
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	overflow-y:auto;
}
.markItem:hover {
	border:1px red solid;
	background-color:white;
}
.showHover:hover {
	background-color:green;
	color:yellow;
}
.tableHeader {
	border:1px gray solid;
	border-radius:4px;
	color:blue;
	padding:5px;
	font-size:14px;
}
.bigOval {
	border-radius: 400px;
}

/*
=========================================================
Special ID's, added because of their specific positioning
=========================================================
*/
#Main_header {
	position: absolute; top:0;
	height:110px;
	width:100%;
}
#Main_topic {
	position: absolute; top:110px;
	height:100%;
	width:100%;
}
#alertBox {
	position: fixed; left:50%; top:40%;
	width:300px;
	height:200px;
	margin-left:-150px;
	margin-top:-100px;
	overflow-y:auto;
	text-align:center;
	z-index:999
}
#cityNames {
	position: absolute; bottom:30px; right:30px;
	padding:5px;
	border:1px black solid;
	border-radius:4px;
	width:auto;
	height:auto;
	z-index:999;
	background-color:green;
	color:white;
	display:none;
}
#alertMessage {
	position: absolute; bottom:10px; right:60px;
	padding:5px;
	border:1px black solid;
	border-radius:4px;
	width:auto;
	height:auto;
	z-index:999;
	font-size:15px;
	display:none;
}
#langSwitch {
	position: absolute; bottom:10px; left:10px;
}
#chatBusy,
#serverBusy {
	position: absolute; bottom:10px; right:5px;
	width:48px;
	height:48px;
	display:none;
	z-index:999;
}
#serverErrorAlert {
	position: absolute; left:50%; top:30%;
	width:320px;
	margin-left:-160px;
	font-size:15px;
	text-align:center;
}
#happeningToday,
#userOnline {
	max-height:250px;
	margin:5px;
	display:inline-block;
	text-align:left;
	vertical-align:top;
	overflow-y:auto;
}
#webInfo {
	position: relative; top:50px;
	width:50%;
	font-size:12px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	display:none;
}
/*
====================
CSS3 transformations
====================
*/
.flipX {
	transform:scaleX(-1);
}
.rotateL90 {
	transform-origin:top left;
	transform: rotate(-90deg);
}
@keyframes turn360 {
	from
		{transform: rotateX(0deg);}
	to
		{transform: rotateX(360deg);}
}
@keyframes squeezeH {
	0%		{transform: scale(1,1);}
	25%		{transform: scale(0.5,1);}
	50%		{transform: scale(1,1);}
	75%		{transform: scale(1,0.5);}
	100%	{transform: scale(1,1);}
}
.turnMe360 {
	animation-name: turn360;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-delay: 0s;
}
.turnMe360X {
	animation-name: turn360;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-delay: 0s;
}
.squeezeHX {
	animation-name: squeezeH;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-delay: 0s;
}