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

body   
{
    background: #b6b7bc; 
    font-size: .80em ;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
    margin: 0px;
    padding: 0px;
    color: #696969;
}


a:link {color:#C70025 !important;}      
a:visited {color:#C70025 !important;}  
a:hover {color:#C3272B !important;}  
a:active {color:#C70025 !important;} 


bold
{
	font-weight:900 !important;
}

strong 
{ 
	font-weight: bold !important; 
}

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

#winter h1 {
  color: #666666;
}

#spring h1
{
	color: #60281E !important;
}

#mobile p
{
	font-size:1.2em !important ;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}


.gwt-ListBox-level
 {
  width: 160px;
  padding: 0px;
  /*hight:20px ;*/
}


.gwt-Button-options {
  width: 60px;
  /*hight:20px ;*/
  	padding:0px  !important;
	margin:0px !important;
	outline: none !important;
	margin-left: 3px !important;
}

.game
{
	padding-top:20px;
	padding-left:50px;
}

.MainContent
{
	padding:0px;
    /*min-height:800px;height:auto !important;height:800px;*/
    max-width:650px;width:auto !important;
    width:650px;
	margin-left:auto;
	margin-right:auto;	
}


.busyLogo
{
	margin-top:0px; 
	text-align:left; 
	position:absolute;
	top:10px ;
	left: 50%;
	margin-left: -250px;
	padding:0px;
	margin-top:0px;
	margin-bottom:0px;
}

.busyLogoMobile
{
	margin-top:0px; 
	text-align:left; 
	position:absolute;
	top:10px ;
	left: 10%;
	padding:0px;
	margin-top:0px;
	margin-bottom:0px;
}

.socialNetwork
{
	margin-top:0px; 
	text-align:center !important; 
	padding:0px;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:30px  !important; 
}

.longText
{
	padding-left:30px;
	padding-right:20px;
}

.textInput
{
	font-size: 2em !important;
	color: #666666;
	width:220px;
	padding:0px  !important;
	margin:0px !important;
	outline: none !important;
	border-style:solid !important;
	border-color:#aaaaaa !important;
	border-width:2px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}


.textInputSpring
{
	font-size: 2em !important;
	color: #60281E;
	width:220px;
	padding:0px  !important;
	margin:0px !important;
	outline: none !important;
	border-style:solid !important;
	border-color:#aaaaaa !important;
	border-width:2px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}


.textInputMobile
{
	font-size: 2em !important;
	color: #666666;
	width:220px;
	padding:0px  !important;
	margin:0px !important;
	outline: none !important;
	border-style:solid !important;
	border-color:#aaaaaa !important;
	border-width:2px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.textInputMobileSpring
{
	font-size: 2em !important;
	color: #60281E;
	width:220px;
	padding:0px  !important;
	margin:0px !important;
	outline: none !important;
	border-style:solid !important;
	border-color:#aaaaaa !important;
	border-width:2px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}


.dataPickerBox
{
	color: #666666;
	width:80px;
	padding:0px  !important;
	margin:0px !important;
	margin-left:5px !important;
	margin-right:10px !important;
	outline: none !important;
	border-style:solid !important;
	border-color:#aaaaaa !important;
	border-width:2px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.dataPickerBoxSpring
{
	color: #60281E;
	width:80px;
	padding:0px  !important;
	margin:0px !important;
	margin-left:5px !important;
	margin-right:10px !important;
	outline: none !important;
	border-style:solid !important;
	border-color:#aaaaaa !important;
	border-width:2px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.textTimer
{
	font-size: 0.8em;
	vertical-align: -50px !important;
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.textTimerSpring
{
	font-size: 0.8em;
	vertical-align: -50px !important;
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.barTimer
{
	font-size: 2.0em;
	color: #666666;
	vertical-align: 50px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.barTimerSpring
{
	font-size: 2.0em;
	color: #60281E;
	vertical-align: 50px !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}


.word
{
	font-size: 2em;
	font-weight:normal !important;
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.wordSpring
{
	font-size: 2em;
	font-weight:normal !important;
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.wordMobile
{
	font-size: 2em;
	font-weight:normal !important;
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.wordMobileSpring
{
	font-size: 2em;
	font-weight:normal !important;
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.definitionArea
{
	border-left:1px dashed #666666;
	padding-left:10px !important;
	padding-right:10px !important;
	color: #666666;
	margin-left:0px !important;
	padding-top:0px !important;
	margin-top:10px !important;
	margin-bottom:10px !important;
	min-height: 50px;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.definitionAreaSpring
{
	border-left:1px dashed #60281E;
	padding-left:10px !important;
	padding-right:10px !important;
	color: #60281E;
	margin-left:0px !important;
	padding-top:0px !important;
	margin-top:10px !important;
	margin-bottom:10px !important;
	min-height: 50px;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.gwt-DisclosurePanel-Home .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 6px;
  color: #666666;
  max-width:480px;width:auto !important;
  width:480px;
}

.gwt-DisclosurePanel-Home .header,
.gwt-DisclosurePanel-Home .header a,
.gwt-DisclosurePanel-Home .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #666666 !important;
  margin-top: 50px !important;
}


.gwt-DisclosurePanel-HomeSpring .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 6px;
  color: #60281E;
  max-width:480px;width:auto !important;
  width:480px;
}

.gwt-DisclosurePanel-HomeSpring .header,
.gwt-DisclosurePanel-HomeSpring .header a,
.gwt-DisclosurePanel-HomeSpring .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #60281E !important;
  margin-top: 50px !important;
}

.gwt-DisclosurePanel-About .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 6px;
  color: #666666;
  width:550px;
}

.gwt-DisclosurePanel-About .header,
.gwt-DisclosurePanel-About .header a,
.gwt-DisclosurePanel-About .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #666666 !important;
  margin-top: 20px !important;
  font-weight:bold !important;
}

.gwt-DisclosurePanel-AboutMobile .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left:6px;
  color: #666666;
  max-width:280px !important;
  /*  max-width:550px;width:auto !important;
  width:550px;*/
}

.gwt-DisclosurePanel-AboutMobile .header,
.gwt-DisclosurePanel-AboutMobile .header a,
.gwt-DisclosurePanel-AboutMobile .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #666666 !important;
  margin-top: 20px !important;
  font-weight:bold !important;
    font-size:1.2em !important;
    max-width:290px !important;
}

.gwt-DisclosurePanel-AboutMobileSpring .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 6px;
  color: #60281E;
  max-width:280px !important;
}

.gwt-DisclosurePanel-AboutMobileSpring .header,
.gwt-DisclosurePanel-AboutMobileSpring .header a,
.gwt-DisclosurePanel-AboutMobileSpring .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #60281E !important;
  margin-top: 20px !important;
  font-weight:bold !important;
      font-size:1.2em !important;
    max-width:280px !important;
}


.gwt-DisclosurePanel-MyPage .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 40px !important;
  color: #666666;
}

.gwt-DisclosurePanel-MyPage .header,
.gwt-DisclosurePanel-MyPage .header a,
.gwt-DisclosurePanel-MyPage .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #666666 !important;
  margin-top: 0px !important;
  margin-left: 30px !important;
  font-weight:normal !important;
}


.gwt-DisclosurePanel-MyPageMobile .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 10px !important;
  color: #666666;
}

.gwt-DisclosurePanel-MyPageMobile .header,
.gwt-DisclosurePanel-MyPageMobile .header a,
.gwt-DisclosurePanel-MyPageMobile .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #666666 !important;
  margin-top: 0px !important;
  margin-left: 5px !important;
  font-weight:normal !important;
}

.gwt-DisclosurePanel-MyPageMobileSpring .content {
  border-left: 3px solid #e7e7e7;
  padding: 4px 0px 4px 8px;
  margin-left: 10px !important;
  color: #60281E;
}

.gwt-DisclosurePanel-MyPageMobileSpring .header,
.gwt-DisclosurePanel-MyPageMobileSpring .header a,
.gwt-DisclosurePanel-MyPageMobileSpring .header td {
  text-decoration: none;  /* Remove underline from header */
  color: black; 
  cursor: pointer;
  cursor: hand;
  color: #60281E !important;
  margin-top: 0px !important;
  margin-left: 5px !important;
  font-weight:normal !important;
}




.numberInTable
{
	text-align: center;	
}


.oddRowInTable
{
	background-color: #eeeeee !important;
	margin-right:10px  !important;
}

.selectedRowInTable
{
}

.noHoveringRowInTable
{
}

.hoveredRowInTable
{
	background-color: #ccccff !important;
  cursor: pointer;
  cursor: hand;
}

.rowTable
{
	border: 0px solid !important;
	/*margin-right:10px  !important;*/
	padding-left:3px !important;
	padding-right:3px !important;
}

.evenRowInTable
{
	background-color: white !important;
	
}

.myPageInfo
{
	color: #666666;
	margin-bottom:20px ;
}

.extraInfo
{
	color: #666666;
}

.myPageInfoSpring
{
	color: #60281E;
	margin-bottom:20px ;
}

.myPageInfoMobile
{
	color: #666666;
	margin-bottom:20px ;
}

.myPageInfoMobileSpring
{
	color: #60281E;
	margin-bottom:20px ;
}

.labelLink{
	/*COLOR: #ff9900;*/
	/*cursor: pointer;*/
	/*TEXT-DECORATION: underline;*/
	margin-left: 20px !important;
}

.labelLinkExtra{
	/*COLOR: #ff9900;*/
	/*cursor: pointer;*/
	/*TEXT-DECORATION: underline;*/
	/*margin-left: 20px !important;*/
	margin: 0px !important;
	padding: 0px !important;
	font-size: 0.9em !important;
}

.levelNote
{
	color: #666666;
}

.levelNoteSpring
{
	color: #60281E;
}

.panelGame
{
	padding-top:20px;
}

.panelPreGame
{
	padding-top:0px;
}

.textScore
{
	color: #666666;
}

.textScoreSpring
{
	color: #60281E;
}

.textMessage
{
	color: #ff2222;
	font-weight:bold;
}

.textInfo
{
	color: #2222ff;
}

.textFurtherInfo
{
	color: #2222ff;
	width:160px;
}

.suitableWordsList
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.suitableWordsListSpring
{
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}


.AreaChart
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.AreaChartMobile
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
	margin-left:auto;
	margin-right:auto;
}


.ColumnChart
{
	color: #666666 !important;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.ColumnChartMobile
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
	margin-left:auto;
	margin-right:auto;
}


.knownWordsList
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.knownWordsListSpring
{
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.knownWordsListMobile
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
	margin-left:auto;
	margin-right:auto;
}

.knownWordsListMobileSpring
{
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
	margin-left:auto;
	margin-right:auto;
}

.myPageMain
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.myPageMainSpring
{
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.myPageMainMobile
{
	color: #666666;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
	margin-left:auto;
	margin-right:auto;
}

.myPageMainMobileSpring
{
	color: #60281E;
	font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
	margin-left:auto;
	margin-right:auto;
}

.modalBackground 
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7; 
} 

.modalPopupTitle
{
    background-color:#b6b7bc;
    color: #ffffff;
    font-weight:bold;
    padding:5px;
}

.modalPopup 
{
    background-color:#ffffff; 
    border-width:1px; 
    border-style:solid; 
    border-color:Gray; 
    padding:0px; 
    width:350px;
}

.mainArea
{
	background-color:#ffffff;
	border: 1px solid #888888;
	min-height: 200px;
	padding: 0px 12px 0px 12px;
    margin: 1px 8px 1px 8px;
}


#worddef 
{
   float:left;
   width:250px;
   margin-right:50px;
}
#userinput 
{
   float:right;
   margin-left:50px;
   padding-right:50px;
}


/** 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;
}

.sendButton {
  display: block;
  font-size: 16pt;
}

/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
  width: 400px;
}

.dialogVPanel {
  margin: 5px;
}

.dialogVPanelDef {
  margin: 5px;
}

.dialogVPanelSelectionRadio {
  margin-bottom: 8px !important;
  font-size: 1.6em !important;
  color: #666666 !important;
  font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.dialogVPanelSelectionMsg {
  color: #666666 !important;
  font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif !important;
}

.serverResponseLabelError {
  color: red;
}

.invalidWord {
  color: red;
}

.definitionWord {
  color: blue;
}



/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
  margin: 15px 6px 6px;
}