/* This is the main css file for the chess board composer */

@import "styles/gwt.css";
@import "styles/chess.css";
@import "styles/setup/position.css";
@import "styles/setup/markings.css";
@import "styles/setup/text.css";
@import "styles/setup/misc.css";
@import "styles/setup/preferences.css";
@import "styles/setup/looks.css";
@import "styles/setup/size.css";
@import "styles/setup/coordinates.css";


/* The content panel of the entire UI. */
#contentPanel{
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	
	text-align: center; /* This is for IE, which doesn't do auto margins. */
}

/* The various UI-parts titles, such as "Board Set-Up" and "Board Drawing". */
.uiPartTitle{
	font-weight: bold;
	font-size: 150%;
	margin-bottom: 0.5em;
}


/* The label preceding the diagram hyperlink. */
#diagramLinkLabel{
	text-align: center;
	padding: 0.1em;
	font-weight: bold;
	background-color: #D0D0D0;
}


/* The diagram link. */
#diagramLink{
	margin: 8px 10px;
	overflow: auto; /* For Opera, which doesn't seem to understand overflow-x,   */
	                /* but it doesn't display a vertical scrollbar either, so we */
	                /* don't mind setting this.                                  */
	overflow-x: scroll;
	overflow-y: visible;
	max-width: 779px;
	white-space: nowrap;
	
	/* For early IE versions, which don't support max-width. */
	width:expression(document.getElementById("diagramLinkPanel").clientWidth > 779 ? "779px": "auto");
}


/* The diagram link panel. */
#diagramLinkPanel{
	border: 1px solid black;
	margin: 0px auto 1.5em auto;
	max-width: 800px; /* Opera needs this, for some reason. */
}


/* The diagram setup panel (including the title). */
#diagramSetupAndTitlePanel{
	margin-right: 3em;
}


/* The diagram panel (including the title). */
#diagramAndTitlePanel{

}


/* The panel holding the setup and the diagram panels. */
#setupAndDiagramPanel{
	margin: 0px auto 2em auto;
}


/* The use instructions panel (including the title). */
#useInstructionsAndTitlePanel{
	max-width: 800px;
	margin: 0px auto;
}


/* The use instructions. */
#useInstructions{
	
}

#useInstructions > p{
	margin-top: 0px;
}


/* The copyright notice. */
#copyrightNotice{
	margin-top: 2em;
	text-align: center;
}


/* The diagram setup tab panel. */
#setupTabPanel{
	
}

#setupTabPanelDeck{
	margin: 0px auto;
	width: auto;
}

/* The diagram panel. */
.DiagramPanel{
	
}


/* The diagram image itself. */
.DiagramPanelDiagram{
	
}


/* The button panel in the diagram panel. */
.DiagramPanelButtonPanel{
	margin-top: 0.5em;
} 


/* The diagram update button. */
.DiagramPanelUpdateButton{
	margin-right: 1em;
}


/* The diagram download button. */
.DiagramPanelDownloadButton{

}