/** Add css rules here for your application. */
/*.rootPanel {
	border:1px solid orange;
}*/
.appPanel {
	border:0px solid violet;
/*	position:absolute; */
/*	left:0px; top:0px; */
}

.waitPanel {
	border:0px solid DarkBlue;
	position:fixed;
	left:10px; top:10px;
	width: 32px;
	height: 32px;
}
.errorPanel {
	border:0px solid DarkRed;
	position:fixed;
	left:25%; right:25%;
	top:52px; height:25px;
	z-index:-1;
}
.infoPanel {
	border:0px solid DarkGreen;
	position:fixed;
	left:25%; right:25%;
	top:52px; height:25px;
	z-index:-1;
}

.errorMessage {
    font-size: 1.1em;
	font-weight:bold;
	color:red;
	text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.infoMessage {
    font-size: 1.1em;
	font-weight:bold;
	color:green;
	vertical-align: center;
	text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*
.progressBarPanel {
	border: 0px solid violet;
}

.gwt-ProgressBar-shell {
  border: 2px solid #faf9f7;
  border-right: 2px solid #848280;
  border-bottom: 2px solid #848280;
  background-color: #AAAAAA;
  height: 14pt;
}
.gwt-ProgressBar-shell .gwt-ProgressBar-bar {
  background-color: #67A7E3;
}
.gwt-ProgressBar-shell .gwt-ProgressBar-text {
  padding: 0px;
  margin: 0px;
  color: white;
}
*/

.cancelButton {
	margin-left: 5px;
}
.shareButton {
	margin-right: 5px;
}

/********************************************************************************/

.wHeaderP {
	border:1px solid Yellow;
	position:fixed;
	width: 100%;
}

.wFooterP {
	border:1px solid Orange;
	position:fixed;
	background-color: Orange;
}

.wNavigationP {
	border:0px solid Red;
	position:fixed;
	background-color: #352e36;
	-moz-opacity:0.8;
	filter:alpha(opacity: 0.8);
	opacity: 0.8;
}
.wControlsP {
	border:0px solid Blue;
	position:fixed;
	right:0px; width:0%;
	top:52px; height:180px;
	overflow:hidden;
	
	background-color: #352e36;
	-moz-opacity:0.8;
	filter:alpha(opacity: 0.8);
	opacity: 0.8;
	
	color: #b7d9be;

	font-size: 1.2em;
	font-family: sans-serif;
/*	font-weight: bold; */
	white-space:nowrap;
}
.controlTitle {
	text-align:center;
}
.controlInfo {
	font-size: 0.7em;
}

/********************************************************************************/

.wBackground {
/*	background-color: #352e36; */
/*	background-color: #383838; */
}

.wPicture {
	border: 0px solid deeppink;
	height: 52px;
	padding-left: 3px;
	margin-bottom: -4px;
}

.wHeaderP {
	border:0px solid deeppink;
	background-color: #383838;
}
.wHeaderHP {
	border:0px solid violet;
	
	padding-left: 15%;
	padding-right: 15%;
/*	background-color: #383838; */
}
.wHeader {
	color: #b7d9be;
	height: 52px;
	line-height: 52px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 1px;
	font-size: 1.3em;
	font-family: sans-serif;
/* 	font-weight: bold; */
	white-space:nowrap;
}

.wHeaderCtrl {
	border:0px solid violet;
	padding-top: 2px;
	margin-left: 1px;
}
.headerCtrl {
	margin-right: 20px;
}

.notificationFlag {
	border:0px solid deeppink;
	
	background-image: url('img/circle_red.png');
	background-repeat: no-repeat;
	background-position: center;
	
	font-weight:bold;
	text-align:center;
	
	width:50px;
	margin:auto;
	padding:auto;
}
.notificationFlagAllRead {
	-moz-opacity: 0.1;
	filter:alpha(opacity: 0.1);
	opacity: 0.1;
}
.notificationFlagAllRead:hover {
	-moz-opacity: 0.2;
	filter:alpha(opacity: 0.2);
	opacity: 0.2;
}
.notificationNoneRead {
	background-color:lightgray;
}

.headerUserContainer {
	border:0px solid deeppink;
	color: #b7d9be;
	height: 52px;
	line-height: 52px;
	margin-left: 1px;
	font-size: 1.3em;
	font-family: sans-serif;
	white-space:nowrap;
}
.headerUserActions {
	position:relative;
	top:-10px;

	display:none;

/*	z-index:10; */
}
.headerUserContent {
	border:1px solid lightgray;
	
	background-color:white;
	color:#383838;
	position:absolute;
	
	padding-top:5px;
	padding-bottom:5px;
}
.headerUserAction {
	border:0px solid violet;

	padding-left:10px;
	padding-right:10px;
		
	line-height: 20px;
	height:20px;
	
	font-size: 0.7em;
	font-family: sans-serif;
}
.headerUserAction:hover {
	background-color:#383838;
	color:white;
}

.headerCtrlMarker {
	padding-top: 3px;
	height:40px;
	-moz-opacity: 0.8;
	filter:alpha(opacity: 0.8);
	opacity: 0.8;
}
.headerCtrlMarker:hover {
	-moz-opacity: 1;
	filter:alpha(opacity: 1);
	opacity: 1;
}

.headerSub /*, .headerSubAdmin */ {
	padding-left: 15%;
	width: 100%;
}
.headerSub {
	background-color: #23ff84;
	background-color: #21fcfe;
}
.headerSubAdmin {
	background-color: orange;
}

.wHeaderSub {
	border:0px solid violet;
	color: #352e36;
	padding-left: 10px;
	padding-left: 7px;
	font-size: 1.5em;
	font-family: sans-serif;
/*	font-weight: bold; */
	white-space:nowrap;
}

.sepHR { 
	border-top:1px solid #9A9A9A;
	height:0px;
	width:100%;
}

.sepVR { 
	border-left:1px solid #9A9A9A;
	width:0px;
	height:100%;
}
                
/********************************************************************************/           
    
.gameScrollPanel {
	border:0px solid lightgreen;
	background-color:#e8e8e8;
	
    top:77px;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
    
	width:100%;
}
.gameContainerPanel {
	border:0px solid green;

	margin-left:auto;
	margin-right:auto;
	width:70%;
	
	background-color: white;
}
.gameContentPanel {
	border:0px solid orange;
	
	margin-left:10px;
	margin-right:10px;
}

.gamePanel {
	border:0px solid pink;
/*	width:100%; */
}

.fakeGamePicture {
	border:0px solid yellow;
	margin-bottom:-4px;
}

.gameCarousel{
	position: relative;
	top: 0px; 
	left: 0px; 
	width: 600px;
	height: 300px;
}
/********************************************************************************/               

.fillerH1 {
	border:0px solid blue;
	height: 10px;
}
.fillerH2 {
	height: 5px;
}
.fillerV1 {
	width: 5px;
}
.wHeaderTry, .wHeaderPlay {
	
	text-align: center;
/*    width: 5em; */
	width: 120px;

	font-family: sans-serif;
	font-weight: bold;
	white-space:nowrap;

	/* not selectable */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.wHeaderTry {
	background-color: #352e36;
	color: #9f9f9f;
	line-height: 30px;
	font-size: 2em;
}
.wHeaderPlay {
/*	background-color: #23ff84; */
	background-color: #21fcfe;
	color: #352e36;
	line-height: 100px;
	font-size: 3em;
}

.wHeaderTry:hover {
	-moz-opacity:0.8;
	filter:alpha(opacity: 0.8);
	opacity: 0.8;
}
.wHeaderPlay:hover {
	-moz-opacity:0.55;
	filter:alpha(opacity: 0.55);
	opacity: 0.55;
}

.wHeaderTry:active {
/*	color: #23ff84; */
/*	color: #b7d9be; */
	color: #e7dcca;
	-moz-opacity:0.85;
	filter:alpha(opacity: 0.85);
	opacity: 0.85;
}
.wHeaderPlay:active {
/*	color: #352e36; */
	color: #e7dcca;
	-moz-opacity:0.75;
	filter:alpha(opacity: 0.75);
	opacity: 0.75;
}

.wHeaderBasic, .wHeaderBasicSelected, .wHeaderBasicV, .wHeaderBasicVAdmin {
	padding-left: 10px;
	padding-right: 10px;

	font-family: sans-serif;
/*	font-weight: bold; */
	white-space:nowrap;
}

.wHeaderBasic, .wHeaderBasicSelected {
	line-height: 30px;
	
	color: #352e36;

/*	font-weight: bold; */
	font-size: 1.8em;
}
.wHeaderBasic {
	background-color: #e7dcca;
}
.wHeaderBasicSelected {
	background-color: #21fcfe;
}
.wHeaderBasicV, .wHeaderBasicVAdmin {
	padding-left: 15px;
	padding-right: 15px;
	
	line-height: 28px;
	color: #352e36;
/*	background-color: #b7d9be; */
	font-size: 1.6em;
	
	background-image:url(img/basic-value-pin.png);
	background-repeat:no-repeat;
	background-position:left center;
}
.wHeaderBasicV {
	border:1px solid transparent;
}
.wHeaderBasicVAdmin {
	border:1px dotted black;
	margin:0;
	padding-top:0;
	padding-bottom:0;
}
.wHeaderBasicVEdit {
	margin:0;padding:0;
	width:26px;
	height:26px;
}
/********************************************************************************/

.clickable {
	cursor: pointer;
	cursor: hand;
	_cursor: hand;
}

.selectable:hover, .fCtrl:hover, .mediaFooterCtrl:hover, .folderHeaderPanel:hover {
	-moz-opacity:0.8;
	filter:alpha(opacity: 0.8);
	opacity: 0.8;
}

/********************************************************************************/

.folderPanelContent {
	border:0px solid deeppink;
	width:100%;
	margin-bottom:10px;
}
.sortFolderPanel {
	border:0px solid violet;
	background-color: #2184b3;
	margin-bottom:5px;
}
.sortFolderPanelContent {
	border:0px solid deeppink;
	width:100%;
}
.sortFlagSelected {
	background-color: #d1d1d1;
}
.sortTitle {
	border:0px solid violet;
	padding-left:5px;
	color: #d1d1d1;
	font-weight:bold;
	font-size:12px;
}

.folderPanelContainer {
	/* Border compensation */
	margin-right: 6px;
}

.folderPanel {
	border:3px solid #e7dcca;
	
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	
	/* Space between folder */
	margin-bottom: 7px;
	
	width:100%;
}
.folderPanelOpen {
	border-color: #5c5c5c;
}
.folderPanelEnded {
	-moz-opacity:0.7;
	filter:alpha(opacity: 0.7);
	opacity: 0.7;
}

.folderHeaderPanel {
	border:0px solid pink;
	background-color: gray;
	width:100%;
}
.folderFooterPanel {
	border:0px solid violet;
	background-color: #5c5c5c;
	color: #dddddd;
	font-size: 0.8em;
}

.fHeader {
	color: #5c5c5c;
	background-color: #e7dcca;
}
.fHeaderOpen {
	color: #e7dcca;
	background-color: #5c5c5c;
}

.fFirstHeader, .fHeaderText, .fHeaderCtrl {
	height: 30px;
}

.fFirstHeader, .fHeaderText {
	line-height: 30px;
	padding-left: 5px;
	padding-right: 5px;
		
	font-size: 1em;
	font-family: sans-serif;
/* 	font-weight: bold; */
	white-space:nowrap;
}

.fFirstHeader {
	font-size: 1.3em;
	padding-left: 20px;
	
/*	background-image:url(img/folder-close.png); */
	background-repeat:no-repeat;
	background-position:left center;
}
.fHeaderText {
	margin-left: 1px;
}
	
/*
DarkGray1: #352e36
DarkGray2: #383838
LightGray1: #dbd3af
LightGray2: #e6decb
LightGreen: #b7d9be
*/
/*
.fHeaderOngoing {
	color: #e6decb;
	color: #e7dcca;
	background-color: #383838;
	background-color: #5c5c5c;
}
.fHeaderEnded {
	color: #383838;
	color: #5c5c5c;
	background-color: #e6decb;
	background-color: #e7dcca;
}
*/

.fAudit {
/*	text-align: right; */
}
.fAuditFieldsL {
	float:left;
	vertical-align:middle;
	font-size: 0.75em;
	line-height: 25px;
	
	-moz-opacity:0.5;
	filter:alpha(opacity: 0.5);
	opacity: 0.5;
}
.fAuditFieldsR {
	float:right;
	vertical-align:middle;
}
/*
.counterOngoing, .counterEnd {
	white-space:nowrap;
}
*/
.fTimerOngoing {
/*	color: #b7d9be; */
	font-weight: bold;
/*	text-shadow: 1px 1px #857f84; */
}
.fTimerEnd {
	
}

.fCtrl, .fCtrlDisabled {
	border: 0px solid Orange;
	width: 30px;
	height: 30px;
	margin-left: 0px;
	margin-bottom: -4px;
}

.fCtrlDisabled {
	-moz-opacity:0.2;
	filter:alpha(opacity: 0.2);
	opacity: 0.2;
}

.uploadForm {
	border:1px solid blue;
	display:none;
/*
	max-width: 50px;
	max-height: 50px;
	
	font-size: 0.1em;
*/
}

.loadMoreFolders {
	border:0px solid Violet;
	background-color: #352e36;

/*	margin-bottom:5px; */
	
	width: 100%;
	line-height: 35px;
	height: 35px;

	color: white;
	font-size: 2em;
	text-align: center;
	white-space:nowrap;
	
	-moz-opacity:0.2;
	filter:alpha(opacity: 0.2);
	opacity: 0.2;
}
.loadMoreFolders:hover {
	-moz-opacity: 0.5;
	filter:alpha(opacity: 0.5);
	opacity: 0.5;
}

/* .gwt-StackLayoutPanel,  */
/* .gwt-StackLayoutPanelHeader,  */
/* .gwt-StackLayoutPanelContent,  */
/* .gwt-StackLayoutPanelItem  */
/* { */
/*   background-color: red; */
/* } */

/*****************************************************************/

/*
.mediaContainer {
	border:0px solid Deeppink;
	width: 100%;
}
.mediaContainerPanel {
	border:0px solid LightGray;
	width: 100%;
}
*/
.mediaFlowPanel {
	border:0px solid Deeppink;
	background-color: #5c5c5c;
	position: relative;
	padding-top: 0px;
	padding-bottom: 2px;
	width: 100%;
	
/*	height: 150px; */
}
.mediaFlowPanelNoPicture {
	border:0px solid Violet;
	color: #EEEEEE;
	color: #a4a4a4;
	text-align: center;
	font-size: 8em;
	font-family: sans-serif;
	padding-top: 4px;
	width: 100%;
}
.mediaFlowPanelMorePicture {
	border:0px solid Deeppink;
	position: relative;
/*	margin-right: 4px; */
	margin-bottom: 4px;
	display:inline;
}
.mediaFlowPanelMorePictureContent {
	border:0px solid Violet;
	position: absolute;
	color: white;
	background-color: #352e36;
	left: 0px;
	bottom: 4px;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	white-space:nowrap;
	-moz-opacity:0.5;
	filter:alpha(opacity: 0.5);
	opacity: 0.5;
}
/*
	color: #EEEEEE;
	color: #a4a4a4;
*/
.mediaFlowPanelMorePictureContent:hover {
	-moz-opacity: 0.8;
	filter:alpha(opacity: 0.8);
	opacity: 0.8;
}
.mediaCountRemains {
	font-size: 2em;
}

.fakeMediaPanel {
/*	border:0px solid green; */
	position: relative;
	height:250px;
	margin-right: 1px;
	margin-bottom: 4px;
	display:inline;
}

.mediaPanel {
/*	border:0px solid green; */
	position: relative;
	margin-right: 4px;
	margin-bottom: 4px;

/*	margin-bottom: 0px;
	padding-bottom: 0px; */
	display:inline;
}
.mediaHeaderPanel {
/*	border:0px solid blue; */
	position: absolute;
	right: 0px;
	bottom: 4px;
	
/*	z-index: 1; */
}

.mediaFooterPanel {
/*	border:0px solid blue; */
/*	border-bottom:1px solid LightGray; */
	position: absolute;
	right: 0px;
	bottom: 4px;
	width: 100%;
	height: 30px;
		
/*	z-index: 1; */
}
.mediaFooterPanelHover {
	background-color: #352e36;
	
	-moz-opacity:0.7;
	filter:alpha(opacity: 0.7);
	opacity: 0.7;
}
.mediaFooter {
	color: White;
	margin-top: 5px;
	padding-left: 5px;
	float: left;
}
.mediaFooterCtrl {
/*	position: relative;
	top: 3px; */
	padding-top:3px;
	float: right;
}

.mediaPicture {
/*	border:1px solid LightGray; */
	background:White;
	margin: 0 0px;
}

/*****************************************************************/

.waitProgressForRefresh {
	position: absolute;
	left: 50%;
	top: 50%;
}

/*****************************************************************/

.dossierPanel {
	background:#ddd;
}

.dossierContentPanel {
	border:0px solid Blue;
	width:100%;
}

.dossierInfoPanel {
	border:0px solid Orange;
	width:100%;
	height:100%;
}
.dossierInfoHeaderPanel {
	border:0px solid Violet;
	width:100%;
}

.dossierInfoHeaderPanelMediaType {
	background:#ded4db;
	color:darkgray;
}
.dossierInfoHeaderPanelMediaDescr {
	background:#deceda;
}
.dossierInfoHeaderPanelMediaTitle {
	background:#ddc6d7;
	font-weight:bold;
}
.dossierInfoHeaderPanelDossier {
	background:#ddbcd5;
	color:#424242;
	font-weight:bold;
}
.dossierInfoHeaderPanelFolder {
	background:#ddb0d2;
	font-weight:bold;
}

.mediaMetaEditTitle {
	font-weight:bold;
}
.mediaMetaEditTitle, .mediaMetaEditDescr {
/*	border:1px dotted black; */
	background:#ffeefa;
	
	width:80%;
	margin-left:0;
	padding:0;
}
.dossierInfoHeaderPanelMediaEdit {
	border:0px solid yellow;
	
	float:right;
/*	cursor:pointer; */
	
	height:100%;
	vertical-align:middle;
}

.dossierCommentPanelContainer {
	border:1px solid LightGray;
/*	width:100%; */
	
/*	overflow: scroll; */
/*	overflow-y: auto; */
	overflow-x: hidden;
}
.dossierCommentPanel {
	word-wrap: break-word;
}
.dossierCommentAudit {
	color: blue;
	font-style: italic;
	font-size: 0.8em;
}
.dossierCommentTA {
	width:100%;
/*	margin:0; */
	padding:0;
}
.dossierPublishPanel {
	border:0px solid Deeppink;
	width:100%;
}
.publishWaitProgress {
	margin:3px;
	margin-bottom:-4px;
}

.dossierMediaPanel {
	border:0px solid Violet;
	background:#ccc;
	height:100%;
}
.dossierMediaPanelContent {
	border:0px solid Deeppink;
	position: relative;
	padding:5px;
}
.dossierMediaPanelContentHeader {
	width:100%;
/*	margin-left:-6px;
	margin-right:-5px; */
}
.dossierMediaPicture {
	border:0px solid Pink;
}

/*****************************************************************/
.dialogVPanel, .dialogHPanel {
	border:0px solid yellow;
}
.contactsPanel {
	border:0px solid blue;
	border-right:1px solid #9A9A9A;
	padding-right:5px
}
.searchPanel {
	border:0px solid green;
	paggind-left:5px
}

.contactName {
	font-weight:bold;
}
.contactAccepted {
	background:url('img/star_blue.png') right center no-repeat;
}
.contactLogin {
	color:lightGray;
}
.contactEmail {
	
}

.contactScrollPanel {
/*	overflow: visible; */
	overflow-y: scroll;
}
.contactFlexTable {
/*	border:thin solid orange; */
	border-collapse: collapse;
	white-space: nowrap;
	padding-right:15px;
/*	margin-right:10px; */
}
.contactFlexTableRow {
/*	display: block; */
	border-bottom:thin solid #EEEEEE;
}
.contactPanel {
	border:0px solid green;
}
.contactPicturePanel {
	border:0px solid blue;
	margin-top:3px;
	margin-left:3px;
	margin-right:3px;
}
.contactInfoPanel {
	border:0px solid orange;
	width:100%;
}
.contactActionPanel {
	border:0px solid red;
}

.pendingButton {
	
}
.acceptButton {
	
}
.declineButton {
	margin-top:3px;
}
.buttonsPanel {
/*	border:thin solid green; */
	width:100%;
	margin-top:3px;
}
/*****************************************************************/

.formLabel {
	font-weight:bold;
}

.createAccountLink, .changePasswordLink, .applicationLink {
	text-align:right;
}

.hyperlink {
	color:blue;
	cursor:pointer;cursor:hand;
	text-decoration:underline;
}

/***********************************************************/

.debugPanel {
	border:1px solid Lightgray;
	position:fixed;
	bottom:0px;
	z-index:1;
}
.startDebugLabel {
	font-weight:bold;
}

.debugVPanel {
	border:1px solid Orange;
}
.debugHPanel {
	border:1px solid Green;
}

/***********************************************************/

/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: center;
}

body {
	padding:0;
	margin:0;
	
	background-color:#f5f5f5;
	background-color:#e8e8e8;
/*	background-color:#eee; */
/*	transform: scale(0.8); */
/*	zoom: 80%; */

}

.bodyZoom {
	-webkit-transform: scale(0.8, 0.8);
/*	-webkit-transform-origin: 0 0; */
/*	-moz-transform: scale(0.8);
	-moz-transform-origin: 0 0;
	-o-transform: scale(0.8);
	-o-transform-origin: 0 0;
	-ms-transform: scale(0.8);
	-ms-transform-origin: 0 0; */
}

/***********************************************************/

/* jssor slider arrow navigator skin 01 css */
/*
.jssora01l              (normal)
.jssora01r              (normal)
.jssora01l:hover        (normal mouseover)
.jssora01r:hover        (normal mouseover)
.jssora01ldn            (mousedown)
.jssora01rdn            (mousedown)
*/
.jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
{
	position: absolute;
	cursor: pointer;
	display: block;
    background: url(/img/a11.png) no-repeat;
    overflow:hidden;
}
/**/
.jssora01l { background-position: -8px -38px; }
.jssora01r { background-position: -68px -38px; }
.jssora01l:hover { background-position: -128px -38px; }
.jssora01r:hover { background-position: -188px -38px; }
.jssora01ldn { background-position: -8px -38px; }
.jssora01rdn { background-position: -68px -38px; }
/**//*
.jssora01l { background-position: -20px -41px; }
.jssora01r { background-position: -80px -41px; }
.jssora01l:hover { background-position: -140px -41px; }
.jssora01r:hover { background-position: -200px -41px; }
.jssora01ldn { background-position: -260px -41px; }
.jssora01rdn { background-position: -320px -41px; }
*//*
.jssora01l { background-position: -19px -42px; }
.jssora01r { background-position: -79px -42px; }
.jssora01l:hover { background-position: -139px -42px; }
.jssora01r:hover { background-position: -199px -42px; }
.jssora01ldn { background-position: -259px -42px; }
.jssora01rdn { background-position: -319px -42px; }
*/

.captionOrange {
	color: #fff;
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	border-radius: 4px;
	
	padding-left:5px;
	padding-right:5px;

	background-color: rgba(235, 81, 0, 0.6);
}