<html>
<!--
   Exemplo de menu
   Marcio Welb de Aguiar Silveira
   2012-05-09
--><head>
<!-- ************************************************************************************ -->  
<!-- ************************************************************************************ -->  
<!-- ************************************************************************************ -->  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Painel de Negociação do Fornecedor</title>
  <script type="text/javascript" src="jquery.tools.min.js"></script>
  <style type="text/css">

/* get rid of those system borders being generated for A tags */
/*
a:active {
	outline:none;
}

:focus {
    -moz-outline-style:none;
}#tudo {
	float: left;
	width: 978px;
}
 */

img {
	border:0;
	margin-left: 25px;
}

#scroll {
	position:absolute;
	overflow:hidden;
	/*width:900px;*/
	/*height:650px;*/
	left: 349px;
	float: left;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	top: 11px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #999;
	height:100%;
      }

#tools {
	width:9999em;
	position:relative;
	/*height:600px;*/
    left: 0px;
	/* [disabled]top: 7px; */    

      }

/************************************************************************
*	Tela de trabalho Dados...
*
*************************************************************************/
.tool {
	float:left;
	width:950px;
	height:700px;
	text-align:left;
	clear: right;
	position: relative;
	margin-top: 30px;
	/* [disabled]border: 2px solid #F00; */
	top: -27px;
	/* [disabled]left: 13px; */
      }
/*
.details {
	font-size:18px;
	color:#555;
	margin-top:-20px;
	background-color:transparent;
	padding:5px 148px;
}
*/

/*	menu*/
#thumbs {
	position:absolute;
	/* [disabled]left:0px; */
	/* [disabled]float: left; */
	/*	height: 600px;*/
	width: 350px;
	/* [disabled]top: 20px; */
	/* [disabled]right: 849px; */
	/*    background-color:Blue;*/
 /*   background-image:url('back-thumbs.png');*/
    /* [disabled]background-repeat:no-repeat; */
	/* [disabled]background-position: 40px; */
	/* [disabled]-moz-border-radius:0 20px; */
	/*-webkit-border-radius:0 20px;
	border-radius:0 20px;*/
	margin: 0px;
	padding: 0px;
      }
/* **************************************************** */      
.Console_Titulo1 
{
	font-family: "Segoe UI Light";
	font-size: 50px;
	padding-left: 30px;
}
.Console_Titulo2 
{
	font-family: "Segoe UI Light";
	font-size: 20px;
	padding-left: 30px;
}
.Console_Texto1
{
	font-family: "Segoe UI Light";
	font-size: 14px;
	padding-left: 30px;
}
/* **************************************************** */

.t {
	padding:0 !important;
	border:0 !important;
}

.t a {
	margin-left:11px;
	display:block;
	cursor:pointer;
	background-attachment: scroll;
	background-color: transparent;
	background-repeat: no-repeat;
}

.t a.active {
	cursor:default !important;
	color: #F00;
}
.active {
	cursor:default !important;
	color: #F00;
}

.navi {
	/* [disabled]margin-left:10px; */
	margin-top:6px;
	width: 340px;
	position:absolute;
	top: -3px;
	left: 0px;
	background-image: url(images/back_forn_.png);
	background-repeat: no-repeat;
	background-position:center;
	/* [disabled]padding-left: 5px; */
	padding-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	/* [disabled]border: 1px solid #999; */
	height: 600px;
	/* [disabled]opacity:0.25; */
	/* [disabled]-moz-opacity: 0.25; */	/*filter: alpha(opacity=25); */
}

/******************************************************************
/*  Opção Prinicipal 
*******************************************************************/
      #t1 a, #t1 a:link 	
{
	width: 100%;
	/*    height: 20px;*/
          font-family: Verdana, Geneva, sans-serif;
	color: #333;
	cursor: pointer;
	text-decoration: none;
	display: block;
	font-size: 14px;/*          
    border: 1px solid #CCCCCE;
    border-radius: 3px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
                      0 2px 7px rgba(0, 0, 0, 0.2);
          
*/
	/* [disabled]font-weight: bold;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
*/
	background-image: url(images/circ_set.png);
	background-repeat: no-repeat;
	background-position: left center;
	overflow: hidden;
	padding-top: 5px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 25px;
	margin: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
      }
#t1 a:hover
{
	/* [disabled]background-position:0px; */
	background-image: url(images/circ_hover.png);
	background-repeat: no-repeat;
	/*height: 20px;*/
	width: 100%;
	color: #09F;
	/* [disabled]border-right-width: 2px; */
	/* [disabled]border-left-width: 2px; */
	/* [disabled]border-right-style: solid; */
	/* [disabled]border-left-style: solid; */
	/* [disabled]border-right-color: #09F; */
	/* [disabled]border-left-color: #09F; */
}

#t1 a:active	{
	color: #09F;/*
	color: #000;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #C00;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #C00;
*/
	/* [disabled]border-right-width: 2px; */
	/* [disabled]border-left-width: 2px; */
	/* [disabled]border-right-color: #09F; */
	/* [disabled]border-left-color: #09F; */
	/* [disabled]width: 300px; */
	}
	/*
#t1.active	{
	color: #000;
	background-color: #000000;
}
/******************************************************************************/
/******************************************************************
/*  Opção Secundaria
*******************************************************************/
#t2 a, #t2 a:link 	
{
	/*    border: 1px solid #ccc;*/
          /* [disabled]float: left; */
	width: 100%;
	/*    height: 20px;*/
          font-family: Verdana, Geneva, sans-serif;
	color: #616161;
	cursor: pointer;
	text-decoration: none;
	display: block;
	/*border: 1px solid #CCCCCE;
    border-radius: 3px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
    0 2px 7px rgba(0, 0, 0, 0.2);
          */
	background-image: url(images/setas.png);
	background-repeat: no-repeat;
	background-position: 25px center;
	font-size: 14px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 40px;
      }

#t2 a:hover
{
	/* [disabled]background-position:0px; */
	/* [disabled]background-image: url(image/Link-Fornecedor-active.jpg); */
	/* [disabled]background-repeat: no-repeat; */
	/*height: 20px;*/
	width: 100%;
	color: #09F;
}
#t2 a:active	{
	color: #09F;
	/* [disabled]width: 300px; */
	/* [disabled]float: left; */
	/* [disabled]border: 1px solid #FFF; */
}
#t2.active	{color: #000;

	}
/******************************************************************************/

/******************************************************************
/*  Opção Secundaria
*******************************************************************/
#t3 a, #t3 a:link 	
{
	/*      border: 1px solid #ccc;*/
    /* [disabled]float: left; */
	width: 100%;
	/*    height: 20px;*/
          font-family: Verdana, Geneva, sans-serif;
	color: #616161;
	cursor: pointer;
	text-decoration: none;
	display: block;/*          border: 1px solid #CCCCCE;
          border-radius: 3px;
*/          /*
          box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
                      0 2px 7px rgba(0, 0, 0, 0.2);
          */
	font-size: 14px;
	background-image: url(images/setas_a.png);
	background-repeat: no-repeat;
	background-position: 40px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 52px;
      }

#t3 a:hover
{
	/* [disabled]background-position:0px; */
	/* [disabled]background-image: url(Painel%20de%20Negocia%C3%A7%C3%A3o%20do%20Fornecedor_files/setas.png); */
	/* [disabled]background-repeat: no-repeat; */
	/*height: 20px;*/
	width: 100%;
	color: #09F;
	/* [disabled]border-left-width: 2px; */
	/* [disabled]border-left-style: solid; */
	/* [disabled]border-left-color: #09F; */
	/*border-radius: 3px;	/*
	box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
                inset 0 3px 2px -1px rgba(255, 255, 255, 1);
	*/
	/* [disabled]border-right-width: 2px; */
	/* [disabled]border-right-style: solid; */
	/* [disabled]border-right-color: #09F; */
}
#t3 a:active	{
	color: #09F;/*
	color: #000;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #C00;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #C00;
*/
	/* [disabled]border-right-width: 2px; */
	/* [disabled]border-left-width: 2px; */
	/* [disabled]border-right-style: solid; */
	/* [disabled]border-left-style: solid; */
	/* [disabled]border-right-color: #09F; */
	/* [disabled]border-left-color: #09F; */
	}
#t3.active	{color: #000;
	}
/******************************************************************************/

/******************************************************************************/

</style>
<!-- ************************************************************************************ -->  
<!-- ************************************************************************************ -->  
<!-- ************************************************************************************ -->  
</head>


<body id="pagina-um">


<!--
***********************
* 	Barra de navegação
*	M Welb.
***********************-->
<div id="thumbs">
	<!--
	***********************
	* 	itens do Menu
	***********************	-->
    <div class="navi">
     <div style="display:none" class="gradient"><a href="#"></a></div>
      <div id="t1" class=""><a href="#">Painel de Negociação do Fornecedor</a></div>
      <div id="t1" class=""><a href="#">Apresentação</a></div>
      <div id="t1" class=""><a href="#">Conhecendo o menu da lateral esquerda</a></div>      
      <div id="t2" class=""><a href="#">Opções de Consulta</a></div>               
      <div id="t3" class=""><a href="#">Exemplo opção Consulta</a></div>          
      <div id="t3" class=""><a href="#">Exemplo opção Selecionadas</a></div>           
      <div id="t3" class=""><a href="#">Exemplo opção Participando</a></div>                 
      <div id="t3" class=""><a href="#">Vídeo explicativo</a></div>        
      <!-- -->
      <div id="t1" class=""><a href="#">Barra de Configuração</a></div>
      <div id="t2" class=""><a href="#">Configuração Parametros de Consulta</a></div>      
      <div id="t2" class=""><a href="#">Geolocalização das Ofertas de Compra</a></div>
      <div id="t3" class=""><a href="#">Tela de Consulta</a></div>      
      <div id="t3" class=""><a href="#">Identificando uma Oferta de Compra</a></div>            
      <div id="t3" class=""><a href="#">Vídeo com uso da Geo Localização</a></div>            
      <!-- -->
      <div id="t1" class=""><a href="#">Gráfico com Histórico de Negociação</a></div>
      <div id="t2" class=""><a href="#">Dispensa</a></div>      
      <div id="t2" class=""><a href="#">Convite Eletrônico</a></div>      
      <div id="t2" class=""><a href="#">Pregão Eletrônico</a></div>   
      <!-- -->                     
      <div id="t1" class=""><a href="#">Ficha cadastral de Fornecedor</a></div>
      <!-- -->        
      <div id="t1" class=""><a href="#">Painel de Negociação pelo Menu</a></div>                
      <div id="t2" class=""><a href="#">Consultando as Ofertas de Compra da <br>forma tradicional</a></div>                      
      <div id="t2" class=""><a href="#">Quando o Painel estará liberado?</a></div>                      
    </div>
</div>



<!--
***********************
* 	Ininio SCROLL
*	M Welb.
***********************
-->

<div id="scroll">
  	<!--
    *****************************************************************************************************  
    * 		Aqui define qual vai ser a pagina que vai ser a inicial
    *****************************************************************************************************      
	-->
   <div id="tools"  > <!-- style="left:-1000px;">  -->
	    <div class="tool">
  			<img src="images/Console_01.png"><br/>	 
    	</div>
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
	        <div class="Console_Titulo1">Painel de negociação do fornecedor</div>
			<img src="images/Console_01.png"><br/>	 				
	    </div>
    	
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
	        <div class="Console_Titulo1">Painel de negociação do fornecedor</div>
			<img src="images/Console_01_03.png"><br/><br/><br/>
			
	    </div>
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Conhecendo o menu da lateral esquerda</div>
			<img src="images/Console_02.png">
	    </div>
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Opções de consulta</div>
			<img src="images/Console_02_01.png">	<br/>	
			 <!-- <img src="images/Console_02_02.png"><br/><br/>-->	
	    </div>
	    
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Conhecendo o menu da lateral esquerda</div>	    
			<img src="images/Console_02_02.png">
		
	    </div>
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Conhecendo o menu da lateral esquerda</div>	    
			<img src="images/Console_02_03.png">
	    </div>			
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Conhecendo o menu da lateral esquerda</div>	    
			<img src="images/Console_02_04.png">
	    </div>
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Vídeo de utilização Menu </div>	 
			<div class="Console_Titulo2">
            Neste vídeo temos um exemplo de  navegação pelo sistema, utilizando o menu lateral.<br/>
			<br/>   
			 </div>          
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<iframe width="640" height="480" src="//www.youtube-nocookie.com/embed/x9C132yyomg" frameborder="0" allowfullscreen></iframe>						            
			<br/><br/>  
			<div class="Console_Texto1">			
            •	Consultado todas as Ofertas de Compras ativas;<br/>
            •	Consultado as Ofertas de Compras Novas;<br/>
            •	Vendo as Ofertas de Compras já Consultadas;<br/>
            •	Selecionando uma Oferta de Compra;<br/>
            •	Identificando as Ofertas de Compras no qual o Fornecedor esta participando;<br/>
            </div>	    			
	    </div>	    
	     <!-- ----------------------------------------------------------- -->    
	     <!-- ----------------------------------------------------------- -->    	     
	    <div class="tool">
			<div class="Console_Titulo1">Barra de configuração</div>		    
			<img src="images/Console_03.png"><br><br>
	    </div>
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Barra de Configuração</div>		    
			<img src="images/Console_03_01.png"><br><br>
			<img src="images/Console_03_02.png">			
			<br> <!--<img src="Console_03_01_02.png"> -->	
 	    </div>
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Barra de Configuração - Geo Localização</div>		    
			<img src="images/Console_03_02_a.png">
	    </div>
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Barra de Configuração - Geo Localização</div>		    
			<img src="images/Console_03_02_01.png"><br><br>	
			<img src="images/Console_03_02_01b.png"><br><br>				
						
	    </div>
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Barra de Configuração - Geo Localização</div>		    
			<img src="images/Console_03_02_02.png"><br><br><br>		
				
	    </div>
	     <!-- ----------------------------------------------------------- -->	    
	    <div class="tool">
			<div class="Console_Titulo1">Vídeo com exemplo de uso da Geo Localização</div>	 
			<div class="Console_Titulo2">
            Aqui temos um exemplo pratico da utilização da Geo Localização no <br>
            painel de Negociação do Fornecedor<br/>
			<br/>   
			 </div>          
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <iframe width="640" height="480" src="//www.youtube-nocookie.com/embed/rK0LkLlNSxA" frameborder="0" allowfullscreen></iframe>
			<br/><br/>  
			<div class="Console_Texto1">			
            •	Identificando as Ofertas de Compras no mapa<br/>  
            •	Visualização dos dados da OC clicando no Marcador<br/>  
            •	Identificando as diferenças nos Marcadores:  Dispensa(Verde), Convite (Azul) e Pregão(Vermelho)<br/>  
            •	Identificando o local da Unidade Compradora<br/>  
            </div>	    			
	    </div>	    
	     <!-- ----------------------------------------------------------- -->    
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Gráfico com Histórico de Negociação</div>		    
			<img src="images/Console_04_01.png">
	    </div>
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Gráfico com Histórico de Negociação - Dispensa</div>		    
			<img src="images/Console_04_03.png">
	    </div>
	    
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Gráfico com Histórico de Negociação - Convite</div>		    
			<img src="images/Console_04_04.png">
	    </div>
	     <!-- ----------------------------------------------------------- -->    	    
	    <div class="tool">
			<div class="Console_Titulo1">Gráfico com Histórico de Negociação - Pregão</div>		    
			<img src="images/Console_04_05.png">
	    </div>
	    
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Ficha Cadastral</div>		    
			<img src="images/Console_05.png"><br>
			<img src="images/Console_05_01.png">	
	    </div>
	     <!-- ----------------------------------------------------------- -->    
	    <div class="tool">
			<div class="Console_Titulo1">Como acessar o Painel de Negociação do Fornecedor pelo Menu</div>		    
			<img src="images/Console_06.png"><br>
	    </div>	    
	    <div class="tool">
			<div class="Console_Titulo1">Consultando as Ofertas de Compra da forma tradicional</div>		    
			<img src="images/Console_06_02.png"><br>
	    </div>	   	    
	    <div class="tool">
			<div class="Console_Titulo1">Quando o Painel estará liberado para ser acessado?</div>		    
			<img src="images/Console_06_01.png"><br>
	    </div>	    
	    
	</div>
<!--
***********************
-->


</div>






  <br clear="all">

<script>

  // initialize scrollable and return the programming API
  var api = $("#scroll").scrollable
  (
  	{
	  items: '#tools'
	  // use the navigator plugin    
  	}
  ).navigator().data("scrollable");
  
  // this callback does the special handling of our "intro page"
  api.onBeforeSeek(function(e, i) {
  // when on the first item: hide the intro
  if (i) {
  $("#intro").fadeOut("slow");
  // dirty hack for IE7-. cannot explain
  if ($.browser.msie && $.browser.version < 8) {
			                    $("#intro").hide();
		                            }
	                                    // otherwise show the intro
	                                    } else {
		                            $("#intro").fadeIn(1);
	                                    }
	                                    // toggle activity for the intro thumbnail
	                                    $("#t0").toggleClass("active", i == 0);
                                            });
                                            // a dedicated click event for the intro thumbnail
                                            $("#t0").click(function() {

	                                    // seek to the beginning (the hidden first item)
	                                    $("#scroll").scrollable().begin();

                                            });


</script>
<!--
    Marcio Welb de Aguiar Silveira
    14/10/2013
-->
</body>

</html>