/** Copyright 2010 by Kim McCall.  All rights reserved. */
/** Add css rules here for your application. */

/*Until the END_BORROWED I've included a bunch of stuff from
   http://www.dave-woods.co.uk/?p=144
   that is intended to force the main column to fill the page vertically */
 
* {
  padding: 0;
  margin: 0;
}

/*  Commenting out the borrowed stuff we no longer want, since we're opting for a "panel" look

html, body {
  height: 100%;
}

body {
  font-family: "lucida sans", verdana, arial, helvetica, sans-serif;
  font-size: 85%;
  alignment: center;
}

#main_col {
  min-height: 100%;
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  margin: 0 auto;
}

* html #main_col {
  height: 100%;
}
*/
/* END_BORROWED */

/*
also commented out, to achieve "panel" look
#main_col {
  text-align: center;
  padding: 10;
  width:720;
  background-color: #DDD;
}
*/

.borderedLayoutTable {
	background-color: #FFFFE7;
}

.centerColumn {
  margin: 0 auto;
}

.mainPanel {
  margin: 10 auto;
}

.topLeft {
	background: url("images/borders_topLeftCorner.png") no-repeat 0 0;
	width: 10px;
	height: 10px;
}

.topMiddle {
	background: url("images/borders_topEdge.png") repeat-x 0 0;
	height: 10px;
}

.topRight {
	background: url("images/borders_topRightCorner.png") no-repeat 0 0;
	width: 10px;
	height: 10px;
}

.middleLeft {
	background: url("images/borders_leftEdge.png") repeat-y left bottom;
	height: 510px;
}

.middleMiddle {
	width: 720px;
	/*height: 480px;
	text-align: center;*/
}

.middleRight {
	background: url("images/borders_rightEdge.png") 0 0;
	height: 510px;
}

.bottomLeft {
	background: url("images/borders_bottomLeftCorner.png") no-repeat 0 0;
	width: 10px;
	height: 10px;
}

.bottomMiddle {
	background: url("images/borders_bottomEdge.png") repeat-x 0 0;
	height: 10px;
}

.bottomRight {
	background: url("images/borders_bottomRightCorner.png") no-repeat 0 0;
	width: 10px;
	height: 10px;
}

.centerPanel {
    margin: 0 auto;
    text-align: center;
	/*background-color: #FFFFE7;*/
	width: 760px;
}

.borderedCenterPanel {
    margin: 0 auto;
    padding: 20px;
    text-align: center;
	background-color: #FFFFF7;
	border: 3 solid #66B;
}

#title{
  font-size: 2.0em;
  color: #55A;
  margin-top: 6px;
  margin-bottom: 12px;
  text-align: center;
}

.linksAndSpecPanel {
  margin: 0 auto;
}

.linksLine {
  float:right;
  margin-bottom: 8px;
}

.paddedLeft20 {
  margin-left:20px;
}

.fullSpecPanel {
  padding: 4px;
  border: solid #669;
  border-width: 2;
  width: 686px;
}

.fullSpecPanelLabel {
  color: #D00;
  font-weight: 700;
  font-size: 125%;
}

.shortcutPanel {
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 6px;
  border-top: solid #669;
  border-left: solid #669;
  border-width: 1;
  height: 120px;
}

.shortcutPanelLabel {
  color:#D00;
  font-style: italic;
  font-weight: 700;
  font-size: 110%
}

.shortcutOptionsPanel {
  margin-left: 16px;
}

.selectionPanel {
  padding-left: 10px;
  padding-right: 20px;
  border-top: solid #669;
  border-width: 1;
  width:340px;
}

.customizeAndButtonPanel {
  margin: 20 auto;
}

.customizationPanel {
  padding: 4px;
  border: solid #669;
  border-width: 2;
}

.customizationPanelLabel {
  color: #D00;
  font-weight: 700;
  font-size: 125%;
}

.vocalSpecPanel {
  margin-left: 10px;
  padding-right: 20px;
  border-right: solid #669;
  border-top: solid #669;
  border-width: 1;
  padding-right: 81px;
  width: 340px;
}

.tempoSpecPanel {
  margin-right: 26px;
  padding-left: 20px;
  border-top: solid #669;
  border-width: 1;
  width: 298px;
}

.visibleWidget {
  display:inline;
}

.visibleMusicSpecLabel {
  display:inline;
}

.visibleMusicSpecList {
  display:inline;
}

.hiddenWidget {
  display:none;
}

.filterPanel {
  margin-top: 10px;
}

.selectionListsPanel {
  margin-top: 10px;
}

.listenButtonLine {
  margin-top: 20px;
}

.listenButton {
/*
  display: block;
  */
  font-weight: 700;
  font-size: 125%;
  font-size: 125%;
  padding: 6px;
  color:#D00;
  background-color: #FFFFE7;
  border: 2px solid #669;
}

.listenButton:hover {
  cursor: hand;
  background-color: #FF9;
}

.adminButton {
  color: #AAA;
  font-size: 8pt;
}

#adminHtml {
  /*very cool ideas stolen from http://www.elated.com/articles/css-rollover-buttons/ */
  display: block;
  float: right;
  width: 100px;
  height: 32px;
  background: url("images/adminButton2.png") no-repeat 0 0;
}

#adminHtml:hover {
  background-position: 0 -32px;
}

#adminHtml span
{
  display: none;
}

.adminForm {
  margin: 6px;
  padding: 6px;
  border: 2px solid #666;
}

.composerEditor {
  margin-top: 8px;
  border-top: 2px solid #666;
  padding: 2px;
}

.pieceEditor {
  margin-left: 8px;
  border-bottom: 2px solid #666;
  margin-bottom: 8px;
}

.movementEditor {
  margin-left: 8px;
  margin-bottom: 8px;
  padding: 0 2 2 2;
  border-left: 2px solid #666;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
}

/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2em;
  font-weight: bold;
  color: #333333;
  margin: 10px 0px 20px;
  text-align: center;
}

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

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

.gwt-SuggestBox {
  margin-left: 16px;
}

.feedbackVPanel {
  margin: 5px;
}

.listenVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

.mp3FeedbackStatusLine {
  font-weight: bold;
}

.mp3StatusFeedback {
  margin: 10px;
}

.secsRemainingLabel {
  font-weight: bold;
}

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

#midiPlayer {
/*  margin: 10px auto;*/
/*  padding: 10px;*/
}

#downloadP {
  margin: 10px 0px;
}

#listenCloseButton {
  margin: 15px 6px 6px;
}

#filterList {
  margin-left: 16px;
}