/** Add css rules here for your application. */

/** Example rules used by the template application (remove for your app) */

/* BEGIN OF Lyrics and Dysplay tabs */
.lyrics {
	font-family: "Courier new", Courier;
	margin: 2;
	font-size: 13px;
}

.displayChordPre{
	font-family: 'Courier new', courier;
	white-space : pre;
	padding: 0px;
	margin: 1px;
	font-size: 13px;	
}

.displayLyricPre{
	font-family: 'Courier new', courier;
	white-space : pre;
	padding: 0px;
	margin: 1px;
	font-size: 13px;	
}

.chordsLink {
	color: rgb(0, 0, 255) !important;	
	font-family:Courier;	
	font-weight: bold !important;
	text-decoration:none !important;
}

.unknownChordsLink {
	color: black !important;	
	font-family:Courier;	
	font-weight: bold !important;
	text-decoration:none !important;
}

/* END OF Lyrics and Dysplay tabs */

.mosaic-Caption-text {
   text-align: left;
   font-size: 15px;
   font-weight: bold;
   color: #000;	
}

.mosaic-Caption-text a:link, .mosaic-Caption-text a:active, .mosaic-Caption-text a:hover, .mosaic-Caption-text a:visited {
	font-size: 12px;
	color: #000;
	font-weight: normal;
	text-decoration: none;	
}

.previewDiv{
	padding:	0px !important;
	margin: 	0px !important;
}
.captionFont {
	font-family: Courrier,Helvetica,sans-serif !important;
	font-size: 12px !important;	
}

pre {
	font-size: 12px;	
}

.captionFontBold {
	font-family: Courrier,Helvetica,sans-serif !important;
	font-size: 12px !important;		
	font-weight: bold !important;
}

.chordsPanelStyle {
	background-color: rgb(255, 255, 255);	
	font-family: Courrier,Helvetica,sans-serif !important;
	font-size: 12px !important;
}

.greyLine{
	margin: 0pt; 
	background-color: rgb(220, 220, 220);
	font-family: Courrier,Helvetica,sans-serif !important;
	font-size: 12px !important;
}

.pureLyrics{
	margin: 0pt; 
	background-color: rgb(255, 255, 255);
	font-family: Courrier,Helvetica,sans-serif !important;
	font-size: 12px !important;
}

#menu {
	margin: 0px 0 0 224px;
	position: absolute;
}

div#menu {
	font-family: Arial;
	text-align: left;
	font-size: 13px;
	font-weight: normal;
	color: #5AC101;
}

div#menu a {
	font-family: Arial;
	text-align: left;
	font-size: 13px;
	color: #fff;
	text-decoration:none;
} 

.footerBlankeSpace1{
	height: 20px !important;
}

.playerStyle{
	height: 20px !important;
}

.footerBlankeSpace2{
	height: 5px !important;
}


.gwt-TextBox-readonly {
	color: black !important;
}

.gwt-TextArea-readonly {
	color: black !important;
}

.gwt-PopupPanel1 {
	z-index: 12000 !important;
	width: 	 525px !important; 	
	height:  285px !important;
	border-style:	solid !important;
	color:			#754C24 !important;
	font-family:	Helvetica,Arial !important;
	font-size:		12px !important;
	-moz-background-clip:	border !important;
	-moz-background-inline-policy:	continuous !important;
	-moz-background-origin:	padding !important;
	background:	#FFFFCC none repeat scroll 0 0 !important;
	border-color:	#754C24 !important;
	border-style:	solid !important;
	border-width:	1px 3px 3px 1px !important;
	margin:	8px !important;
	padding:	8px !important;
}

.chourdPopup {
	z-index: 12000 !important;
	width: 	 68px !important; 	
	height:  93px !important;
	border-style:	solid !important;
	border-color:	white !important;
	border-style:	solid !important;
	border-width:	1px 3px 3px 1px !important;
	margin:	0px !important;
	padding:	0px !important;	
	color:			white !important;
	background:	white none repeat scroll 0 0 !important;		
}

.chourdPopupPiano {
	z-index: 12000 !important;
	width: 	 253px !important; 	
	height:  37px !important;
	border-style:	solid !important;
	border-color:	white !important;
	border-style:	solid !important;
	border-width:	1px 3px 3px 1px !important;
	margin:	0px !important;
	padding:	0px !important;	
	color:			white !important;
	background:	white none repeat scroll 0 0 !important;		
}

.imageChord {
	width: 	 68px !important; 	
	height:  88px !important;
}

.imagePiano {
	width: 	 252px !important; 	
	height:  36px !important;
}

.brownBack {
	background-color: #ffffcc !important;	
}

.htmlPopupStyle1 {
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:12px !important;
	color:#754C24 !important;		
}

.htmlPreStyle1 {
	color: rgb(0, 0, 255) !important;
	background-color: rgb(255, 255, 255) !important; 
	font-weight: bold !important;	
	font-family:Arial,Helvetica !important;
	font-size:12px !important;
}


.mosaic-InfoPanel-description {
	font-family: Arial,Helvetica,sans-serif !important; 
	font-size: 12px !important !important;
	background-color: #ffffcc !important;
}
#lom_help {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:#FFFFCC none repeat scroll 0 0;
	border-color:#754C24;
	border-style:solid;
	border-width:1px 3px 3px 1px;
	color:#754C24;
	font-family:Helvetica,Arial;
	font-size:12px;
	margin:8px;
	padding:8px;
	width:auto;
}

body, table td, select
{
	font-family: Arial,sans-serif;
	font-size: 12px;
}

div, .gwt-MenuItem, div select, input
{
	font-family: Arial,sans-serif;
	font-size: 12px;
}

.whitePanel {
	background-color: #ffffff;	
}
.chordsLine{
	margin: 0pt;
	background-color: rgb(255, 255, 221);
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:12px !important;
	font-weight: bold !important;
}


.undefined_checkbox, .undefined_checkbox-up-hovering
{
	background-image : url(images/undefined.JPG);
	background-repeat: no-repeat;
	padding: 0px 0px 0px 0px !important;
	border: 0px !important;
    width: 12px;
    height: 12px;    
}

.undefined_checkbox-down, .undefined_checkbox-down-hovering
{
	background-image : url(images/checked.JPG);
	background-repeat: no-repeat;
	padding: 0px 0px 0px 0px !important;
	border: 0px !important;
    width: 12px;
    height: 12px;    
}

.usual_checkbox, usual_checkbox-up-hovering
{
	background-image : url(images/unchecked.JPG);
	background-repeat: no-repeat;
	padding: 0px 0px 0px 0px !important;
	border: 0px !important;
    width: 12px;
    height: 12px;    	
}

.usual_checkbox-down, .usual_checkbox-down-hovering
{
	background-image : url(images/checked.JPG);
	background-repeat: no-repeat;
	padding: 0px 0px 0px 0px !important;
	border: 0px !important;
    width: 12px;
    height: 12px;
}

div.disclosureText{
	color:#000000;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;	
}

div.captionFont{
	color:#000000;
	font-family:Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:bold;
	height: 20px !important;	
}
.footer_blanc {
	background-image:url(images/footer_blanc.gif);
}
.darckBack {
	background-color: #363D4D; 
}

.whiteBackLeft {
	background-color: white !important;
	padding-left: 10px !important;
	padding-right: 5px !important; 
	
}
.dataWrapper {
	overflow-x: hidden !important;
}
.whiteBackRight {
	background-color: white !important;
	padding-right: 10px !important; 
}

.topheader {
	background-image: url(images/mysyncsing_header.jpg) !important;
	background-repeat: no-repeat;
}

.fond_1 {
	background-color: #BDC1C8 !important;
	background-image: url(images/fond_1.jpg) !important;
	background-repeat : repeat-x !important;
	margin-left: 49px !important;
	padding-left: 25px !important;
	padding-right: 25px !important;
	padding-bottom: 25px !important;
	padding-top: 0px !important;	
}

div.titre_1 {
	color:#000000;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	line-height:1.5em;
	padding-left:2px;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
}

div.titre_1NotCenetered {
	color:#000000;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	line-height:1.5em;
	padding-left:2px;
	text-align:left;
	vertical-align:middle;
	white-space:nowrap;
}

div.intitule_2 {
	color:#000000;
	font-family:Arial;
	font-size:13px;
	font-weight:normal;
	line-height:1.8em;
	padding-left:8px;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
}

div.intitule_3 {
	color:#000000;
	font-family:Arial;
	font-size:13px;
	font-weight:normal;
	line-height:1.8em;
	padding-left:20px;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
}

a.header {
	color:#000000 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:12px !important;
	font-weight:normal !important;
	text-decoration:none !important;
}

div.blackRef a, div.blackRef a:hover, div.blackRef a:visited, div.blackRef a:link, div.blackRef a:active {
	color:#000000;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight:bold;
	height:20px;
	padding:0 2px 2px;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
}

div.greenRef a, div.greenRef a:hover, div.greenRef a:visited, div.greenRef a:link, div.greenRef a:active {
	color:#5AC101;
	font-family:Arial;
	font-size:12px;
	text-align:left;
	text-decoration:underline;
	font-weight:bold;	
}

div.langage {
	color:#FFFFFF;
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	text-align:left;
}

div.langage a {
	color:#FFFFFF;
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	text-align:left;
	text-decoration:underline;	
}

div.langage a:hover {
	color:#FFFFFF;
	font-family:Arial;
	font-size:12px;
	font-weight:normal;
	text-align:left;
	text-decoration:underline;	
}


h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 10px 0px 10px;
  text-align: center;
}
/*
a {
	color:#000000 !important; 
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:11px !important;
	font-weight:bold !important;
	height:20px !important;
	text-align:left !important;
	text-decoration:none !important;
	vertical-align:middle !important;
}
a:link {
	color:#000000 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:11px !important;
	font-weight:bold !important;
	height:20px !important;
	padding:0 2px 2px !important;
	text-align:left !important;
	text-decoration:none !important;
	vertical-align:middle;
}
a:visited {
	color:#000000 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:11px !important;
	font-weight:bold !important;
	height:20px !important;
	padding:0 2px 2px !important;
	text-align:left !important;
	text-decoration:none !important;
	vertical-align:middle !important;
}
a:active {
	color:#000000 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:11px !important;
	font-weight:bold !important;
	height:20px !important;
	padding:0 2px 2px !important;
	text-align:left !important;
	text-decoration:none !important;
	vertical-align:middle !important;
}
a:hover {
	color:#000000 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:11px !important;
	font-weight:bold !important;
	height:20px !important;
	padding:0 2px 2px !important;
	text-align:left !important;
	text-decoration:none !important;
	vertical-align:middle !important;
}*/
/* list flex table */
.selectionList {
	border: 0px;
	padding: 5px;
	cursor: hand;
}
.selectionList:hover {
	background-color: #7777ff;
}

.greyLeft {
	background-color: #f0f0f0 !important;
	border-width: 0px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	padding: 0px !important;
	margin: 0px !important;	
	border: 0px !important;
}

.whiteRow {
	background-color: #ffffff !important;
	border-width: 0px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	padding: 2px !important;
	margin: 0px !important;	
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
}

.greyRow {
	background-color: #f0f0ff !important;
	border-width: 0px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	padding: 2px !important;
	margin: 0px !important;	
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
}

.whiteRowLeftPanel {
	background-color: #ffffff !important;
	/*border-color: #ffffff !important;*/
	border-style: hidden !important;
	border-width: 0px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	padding: 0px !important;
	border: 0px !important;
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
	height : 20px !important;
}

.greyRowLeftPanel {
	background-color: #F0F0FF !important;
	/*border-color: #f0f0ff !important;*/
	border-style: hidden !important;
	border-width: 0px !important;
	white-space: nowrap !important;
	padding: 0px !important;
	margin: 0px !important;	
	border: 0px !important;
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
	height : 20px !important;	
}


.whiteRow1 {
	background-color: #ffffff !important;
	/*border-color: #ffffff !important;*/
	border-width: 0px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	padding: 2px !important;
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
}

.greyRow1 {
	background-color: #F0F0FF !important;
	/*border-color: #f0f0ff !important;*/
	border-width: 0px !important;
	white-space: nowrap !important;
	padding: 2px !important;
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
}


.selectedRow {
	background-color: #53BC00 !important;
	/*border-color: green green green green !important;*/
	border-style: hidden !important;
	border-width: 0px !important;
	white-space: nowrap !important;
	padding: 0px !important;
	margin: 0px !important;	
	border: 0px !important;
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
	height : 20px !important;	
}

.gwt-ScrollTable .dataTable td, 
.gwt-ScrollTable .headerTable td, 
.gwt-ScrollTable .footerTable td, 
.mosaic-ColumnWidget .dataTable td, 
.mosaic-ColumnWidget .headerTable td, 
.mosaic-ColumnWidget .footerTable td, 
.mosaic-ScrollTreeTable .dataTable td, 
.mosaic-ScrollTreeTable .headerTable td, 
.mosaic-ScrollTreeTable .footerTable td {
	border-color: #f0f0f0 !important;
	border-style:solid;
	border-width:0 1px 1px 0;
	overflow:hidden;
	white-space:nowrap;
	font-family:Arial,Helvetica,sans-serif !important;
	font : bold !important; 
	font-size:12px !important;
	color: black !important;
} 

.gwt-ScrollTable,
.headerWrapper,
.dataTable{
	border-color: #f0f0f0 !important;
	padding: 0px 0px 0px 0px !important;
	margin: 0px 0px 0px 0px !important;	
	background-color: #f0f0f0 !important;	
	border-width: 0px 0px 0px 0px !important;
	background: #f0f0f0 !important;
	border-style: hidden !important;
}

.headerTable td{
	cursor: hand;
}

.uncsrovable {
	overflow: hidden !important;
}

.ListB table:td {
	border-color: #f0f0f0;
	border-style: hidden;
	border-width: 0px 0px 0px 0px;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px 0px;
}

#titre_bibliotheque {
	position: relative;
	width:129px;
	margin-left:0;
	height: 24px;
	background-image: url(images/bibliotheque.gif);
	background-repeat:no-repeat;
	background-position:center;
	margin:0px;
	float: left;
}

#fond_titre {
	position: relative;
	width:100%;
	margin-left:0;
	height: auto;
	background-image: url(images/fond_bibliotheque.jpg);
	background-repeat: repeat-x;
	margin:0px;
	float: left;
}

.fond_titre1 {
	position: relative;
	width:100%;
	margin-left:0;
	height: auto;
	background-image: url(images/fond_bibliotheque.jpg);
	background-repeat: repeat-x;
	margin:0px;
	float: left;
}

.fond_menu_1 {
	background-image:url(images/fond_menu.jpg);
	background-repeat:repeat-x;
	float:left;
	height:20px;
	margin:0;
	position:relative;
	width:100%;
	
}
.menu_bibliotheque_inactif {
	border-right:1px solid gray;
	color:#000000 !important;
	font-family:Arial,Helvetica,sans-serif !important;
	font-size:11px !important;
	font-weight:bold !important;
	height:20px;
	padding:2px 10px 5px 2px;
	text-align:left !important;
	text-decoration:none !important;
	vertical-align:middle;
}

div.menu_bibliotheque_inactif a {
	color:#000000;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
}

div.menu_bibliotheque_inactif a:hover {
	color:#000000;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:left;
	text-decoration:none;
	vertical-align:middle;
}

.mosaic-CaptionLayoutPanel, .dialogPanelColor
{
	background-color: #f0f0f0 !important;
}

.dialogContent
{
	background-color: #f0f0f0 !important;
	padding-left: 20px !important;
	padding-right: 20px !important;	
}

.Footer{
	color: #000000 !important;
	font-family: Arial !important;
	font-size: 12px !important;
	font-weight: normal !important;
	margin-bottom: 20px !important;
	padding-top: 25px !important;
	margin-left: 20 !important;
}

.Footer1{
	color: #000000 !important;
	font-family: Arial !important;
	font-size: 12px !important;
	font-weight: normal !important;
	margin-bottom: 20px !important;
	padding-top: 5px !important;
}
	
.gwt-Button {
 	border:2px outset #CCC !important;
 	font-family:Arial, Helvetica, sans-serif !important;
 	font-size:12px !important;
 	font-weight:bold !important;
 	cursor:pointer !important;
	vertical-align : middle !important;
	height: 30px !important;
}

.gwt-TextBox {
	font-family:	Arial,Helvetica,sans-serif !important;
	font-size:	12px !important !important;
	font-weight:	bold !important !important;
	background-color:	#FFFFFF !important;
	background-image:	url(images/bg_input.jpg) !important;
	background-repeat:	no-repeat !important;
	border:	1px solid #CCCCCC !important;
	vertical-align : middle !important;
	height: 20px !important;
}

.mosaic-Caption {
	background:#CCCCCC url(images/bg_titre.gif) repeat scroll 0 0!important;
}
.gwt-DecoratedPopupPanel .popupMiddleRight, 
.gwt-DecoratedPopupPanel .popupMiddleLeft,
.gwt-DecoratedPopupPanel .popupTopCenter,
.gwt-DecoratedPopupPanel .popupBottomCenter,
.gwt-DecoratedPopupPanel .popupBottomRight,
.gwt-DecoratedPopupPanel .popupBottomLeft,
.gwt-DecoratedPopupPanel .popupTopLeft,
.gwt-DecoratedPopupPanel .popupTopRight  {
	background: none !important;
}


.menu_bibliotheque {
	background-image:	url(images/fond_menu.jpg);
	background-repeat:	repeat-x;
	float:				left;
	height:				20px;
	margin:				0;
	position:			relative;
	width:				100%;
	margin-left:		0;
	margin-top:			0;
}

.titre_tableau {
	
	background-position: left center;
	background-repeat: no-repeat;
	color: #000000;
	font-family: Arial,Helvetica,sans-serif !important;
	font-size: 12px !important;
	font-weight: bold !important;
	height: 20px !important;
	margin-left: 5px !important;
	padding: 0 0 0 20px !important;
	text-align: left !important;
	text-decoration: none !important;
	vertical-align: middle !important;
	border-color: #f0f0f0 !important;
	border-style: hidden !important;
	border-width: 0px 0px 0px 0px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	margin: 0px 0px 0px 0px !important;	
	border: 0px !important;
	
}


.mosaic-TabLayoutPanelBottom {
/*
	border-color: transparent url(images/right.gif) no-repeat scroll right top !important;
	border-style: solid;
	border-width: 3px 2px 2px 2px;
*/
}
.gwt-TabPanelBottom {
	border-color: #f0f0f0 !important;
}

.gwt-TabBarRest,
.gwt-TabBarFirst,
.gwt-TabBarItem,
.gwt-DecoratedTabBar,
.tabBarWrapper
 {
	background:#CCCCCC url(images/bg_boutons.jpg) repeat scroll 0 0  !important;
}

.tabTopRight,
.tabTopLeft,
.tabTopCenter,
.tabMiddleRight {
	background: none !important;
}



.gwt-DecoratedTabBar .tabMiddleLeft {
	background:transparent url(images/left.gif) no-repeat scroll left top !important;
}


.gwt-DecoratedTabBar .tabMiddleCenter { 
	background:transparent url(images/right.gif) no-repeat scroll right top !important;
}

.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft{
	cursor: default;	
	background:transparent url(images/left_on.gif) no-repeat scroll left top !important;	
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter {
	cursor: default;
	background:transparent url(images/right_on.gif) no-repeat scroll right top !important;
}

.captionFont {
	font-family:Arial,Helvetica,sans-serif !important; 
	font-size:12px !important;
}