/**
 * Hoja de estilos principal para SINTER 2011
 * Define la identidad visual y comportamiento de la interfaz del sistema
 * Incluye navegación, formularios, efectos de transición y tipografía
 * 
 * @package    SINTER_2011  
 * @subpackage Vista/Estilos
 * @author     Gobierno de Zacatecas
 * @version    1.0
 * @since      2011
 * 
 * @dependencies
 * - Google Fonts: Raleway para tipografía moderna
 * - CSS3 Transitions para efectos suaves
 * - Normalize/Reset para consistencia entre navegadores
 * 
 * @browser_support 
 * - Chrome 10+, Firefox 4+, Safari 5+, IE 9+
 * - Degradación elegante en navegadores antiguos
 */

/* ---- reset ------*/
@import url(http://fonts.googleapis.com/css?family=Raleway);

/**
 * Definición de fuente Raleway para interfaz moderna y legible
 * Importada desde Google Fonts con fallbacks locales
 * Usada en navegación principal y elementos de texto importantes
 */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/Raleway/v1/AilHuqCBdowNtWlpkIeGEg.eot);
  src: local('Raleway-Regular'), url(http://themes.googleusercontent.com/static/fonts/Raleway/v1/AilHuqCBdowNtWlpkIeGEg.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/Raleway/v1/QBUn5F7b-9Ulki7K75J1Bw.woff) format('woff');
}


 a {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; 
  	font-size:12px;
	font-weight:bold;

  }

html {
  line-height: 2; }




/* --- for all three examples ----*/
.nav { font-family: "Raleway"; font-weight: 400; font-size: 1.0em; text-shadow: 0 1px 0 white; margin-left: auto ; margin-right: auto ; text-align: center; overflow: hidden; margin: 2em auto 2em auto; width: 70%; position: relative; z-index:2; } .nav a { display: block; position: relative; float:left; width: 12.5%; padding:5px 0 5px; text-decoration: none; color: #393939; -webkit-transition: .4s; -moz-transition: .4s; -o-transition: .4s; -ms-transition: .4s; transition: .4s; } .nav a:hover { color: #c6342e; }
  .nav a {
    display: block;
    position: relative;
		float: left;
		padding: 0.1em 0 .5em;
   width: 20%;
		text-decoration: none;
	  color: #393939;
	  -webkit-transition: .7s;
	  -moz-transition: .7s;
	  -o-transition: .7s;
	  -ms-transition: .7s;
	  transition: .7s; }
	  .nav a:hover {
	    color: #c6342e; }

.effect {
	position: absolute;
  left: -12.5%;
  -webkit-transition: 0.7s ease-in-out;
  -moz-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  -ms-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out; }

		.nav a:nth-child(1):hover ~ .effect {
	  left: 10.5%; }
	.nav a:nth-child(2):hover ~ .effect {
	  left: 29.5%; }
	.nav a:nth-child(3):hover ~ .effect {
	  left: 49.5%; }
	.nav a:nth-child(4):hover ~ .effect {
	  left: 70.5%; }
	  .nav a:nth-child(5):hover ~ .effect {
	  left: 89.5%; }
	

/* ----- line example -----*/

.ph-line-nav .effect {
  width: 110px;
  height: 2px;
  bottom: 5px;
  background: #919191;
  box-shadow: 0 1px 0 white; 
  margin-left:-45px;
}
.fondonav
{
	width: 100%;
height: 8em;
  background:url(../imagen/grey.png);
background-repeat:repeat;
position:absolute;
top:0px;
z-index:99;
box-shadow:5px 5px 5px #919191;

}