<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style type="org.rstudio.studio.client.rmarkdown.ui.RmdTemplateOptionsWidget.OptionsStyle">
   @external gwt-TabLayoutPanelTab, gwt-TabLayoutPanelTab-selected;
   @external gwt-TabLayoutPanelContentContainer, gwt-TabLayoutPanelTabs;
   @external gwt-TabLayoutPanelContent;

	.formatPanel
	{
	  padding: 6px;
	  background-color: #e0e0e0;
	}
	
	.notesLabel
	{
	   color: #505050;
	}

	.topLabel
	{
	  font-weight: bold;
	  margin-right: 5px;
	}
	
	.root
	{
     width: 100%;
     height: 100%;
	}
	
	.root .gwt-TabLayoutPanelTab
	{
     background: #f5f5f5 -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 17%, rgba(255,255,255,0) 50%); 
     background: #f5f5f5 -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.9)), color-stop(17%,rgba(255,255,255,0.9)), color-stop(50%,rgba(255,255,255,0)));
     background: #f5f5f5 -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 17%,rgba(255,255,255,0) 50%);
     background: #f5f5f5 linear-gradient(to bottom, rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 17%,rgba(255,255,255,0) 50%); 
     padding-top: 4px;
     padding-bottom: 4px;
     padding-left: 12px;
     padding-right: 12px;
     border: 1px solid #c0c0c0;
     border-left: none;
     float: none;
	}
	
	.root .gwt-TabLayoutPanelTabs
	{
	  text-align: center;
	  z-index: 10; 
	  margin-bottom: -12px;
	}

	.root .gwt-TabLayoutPanelTab-selected
	{
	  background: #9c9c9c -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0) 20%, rgba(0,0,0,0.01) 85%, rgba(0,0,0,0.1) 100%); 
     background: #9c9c9c -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(20%,rgba(255,255,255,0)), color-stop(85%,rgba(0,0,0,0.01)), color-stop(100%,rgba(0,0,0,0.1))); 
     background: #9c9c9c -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0) 20%,rgba(0,0,0,0.01) 85%,rgba(0,0,0,0.1) 100%); 
     background: #9c9c9c linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0) 20%,rgba(0,0,0,0.01) 85%,rgba(0,0,0,0.1) 100%); 
     color: #ffffff; 
   }
	
	.root .gwt-TabLayoutPanelContentContainer
	{
     border: 1px solid #c0c0c0;
	}

	.root .gwt-TabLayoutPanelContent
	{
     padding-top: 20px;
     padding-right: 10px;
     padding-left: 10px;
     padding-bottom : 5px;
	}
	
	.root .gwt-TabLayoutPanelTab:first-child
	{
	  -webkit-border-top-left-radius: 4px;
     -webkit-border-bottom-left-radius: 4px;
     -moz-border-radius-topleft: 4px;
     -moz-border-radius-bottomleft: 4px;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
     border-left: 1px solid #c0c0c0;
	}
	
	.root .gwt-TabLayoutPanelTab:last-child
   {
     -webkit-border-top-right-radius: 4px;
     -webkit-border-bottom-right-radius: 4px;
     -moz-border-radius-topright: 4px;
     -moz-border-radius-bottomright: 4px;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
	}
	
	.optionWidget
	{
	  margin-top: 5px;
	  margin-bottom: 7px;
	}
	</ui:style>
   <g:HeaderPanel styleName="{style.root}">
      <g:FlowPanel styleName="{style.formatPanel}">
         <g:InlineLabel styleName="{style.topLabel}" text="Output Format:"></g:InlineLabel>
         <g:ListBox ui:field="listFormats_"></g:ListBox>
         <g:Label styleName="{style.notesLabel}" ui:field="labelFormatNotes_"></g:Label>
         <g:InlineLabel ui:field="labelFormatName_" visible="false"></g:InlineLabel>
      </g:FlowPanel>
      <g:TabLayoutPanel height="100%" barHeight="30" ui:field="optionsTabs_"></g:TabLayoutPanel>
   </g:HeaderPanel>
</ui:UiBinder> 