@charset "utf-8";
/* CSS Document */

#sz_grafica { position: relative; }
#sz_grafica.sfondo0 { background: url(../images/bg/bg_body0.gif) top center no-repeat fixed; }
#sz_grafica.sfondo1 { background: url(../images/bg/bg_body1.gif) top center no-repeat fixed; }
#sz_grafica.sfondo2 { background: url(../images/bg/bg_body2.gif) top center no-repeat fixed; }
#sz_grafica.sfondo3 { background: url(../images/bg/bg_body3.gif) top center no-repeat fixed; }
#sz_grafica.sfondo4 { background: url(../images/bg/bg_body4.gif) top center no-repeat fixed; }


#container { width: 720px; margin: auto; position: relative; z-index: 1; }
#container2 { width: 720px; margin: auto; position: relative; top: 1800px; z-index: 999; padding: 0 0 0 0; }
.nascondi { text-indent: -9999em; }

.ListaBase ul { list-style: none; padding: 0; margin: 0; }
.ListaBase li { list-style: none; margin: 0; }

/* ########## HEADER ########## */
#header { position: fixed; top: 70px; left: 0; z-index: 999999999; }
#header h1 { margin: 0; padding: 0; }

#SZwebsite { display: block; background: url(../images/header_SZ.png) 0 -36px no-repeat; height: 36px; padding-left: 106px; width: 0px; overflow: hidden; }
#SZwebsite:hover {background: url(../images/header_SZ.png) -106px -36px no-repeat; }

#SZgraficaHome { display: block; background: url(../images/header_SZ.png) 0 0 no-repeat; height: 36px; padding-left: 106px; width: 0px; overflow: hidden; }
#SZgraficaHome:hover { background: url(../images/header_SZ.png) -106px 0 no-repeat; }

#SZlavoriStile { display: block; background: url(../images/header_SZ.png) 0 -72px no-repeat; height: 36px; padding-left: 106px; width: 0px; overflow: hidden; }
#SZlavoriStile:hover { background: url(../images/header_SZ.png) -106px -72px no-repeat; }


/* ########## SLIDER ########## */
#slider { position: fixed; width: 720px; top: 0px; z-index: 9999999; right: 50%; margin-right: -360px; }
.slide { position:relative; overflow: hidden; height: 0px; background: #FFF; }
#slide-logo { bottom: -25px; background: url(../images/bg/bg_slide.png) bottom no-repeat; width: 100%; height: 70px; overflow: hidden; }
#slide-logo h3 a { margin: 0px auto 0px auto; padding: 0; width: 150px; height: 50px; text-indent: -999em; background: #FFFFFF url(../images/logo_sz.gif) 2px 0px no-repeat; display: block;  }

.buttons_top { display: inline-block; background: url(../images/button_top.gif) 0 0 no-repeat; height: 30px; padding-left: 87px; width: 0px; overflow: hidden; }
.buttons_top:hover, .buttons_top:focus { background: url(../images/button_top.gif) -87px 0 no-repeat; }

.buttons_scopri { display: inline-block; background: url(../images/button_scopri.gif) 0 0 no-repeat; height: 30px; padding-left: 87px; width: 0px; overflow: hidden; }
.buttons_scopri:hover, .buttons_scopri:focus { background: url(../images/button_scopri.gif) -87px 0 no-repeat; }

.buttons_grafica { display: inline-block; background: url(../images/button_grafica.gif) 0 0 no-repeat; height: 30px; padding-left: 87px; width: 0px; overflow: hidden; }
.buttons_grafica:hover, .buttons_grafica:focus { background: url(../images/button_grafica.gif) -87px 0 no-repeat; }

.buttons_web { display: inline-block; background: url(../images/button_web.gif) 0 0 no-repeat; height: 30px; padding-left: 87px; width: 0px; overflow: hidden; }
.buttons_web:hover, .buttons_web:focus { background: url(../images/button_web.gif) -87px 0 no-repeat; }


/* ########## STEP 1 - MAIN */
#col1 { width: 200px; float: left; margin: 40px 20px 0 20px; }
#col1 strong { color: #3399cc; }
#col2 { width: 200px; float: left; margin: 40px 20px 0 20px; }
#col3 { width: 200px; float: left; margin: 40px 20px 0 20px;  text-align: right; }
#col3 strong { color: #ff3333; }
.col { font-size: 11px; }

#step1 { position: fixed; height: 1100px; z-index: 1; }

/* Sostituzione immagini titoli e sottotitoli */

/* Colonna 1 web */
#col1 h1 { height: 187px; width: 200px; text-indent: 999em; background: url(../images/bg/indexPicCol.png) 0 0 no-repeat; margin-bottom: 0px; overflow: hidden; }
#col1 h2 a { display: block; background: url(../images/h2Intro.gif) 0 0 no-repeat; height: 130px; padding-left: 200px; width: 0px; overflow: hidden; }
#col1 h3 a { display: block; background: url(../images/bg/scopriWeb.gif) 0 0 no-repeat; height: 37px; padding-left: 183px; width: 0px; overflow: hidden; }
#col1 h3 a:hover, #col1 h3 a:focus, #col1 h3 a:active { background: url(../images/bg/scopriWeb.gif) -183px 0 no-repeat; }
#col1 p { margin-top: -15px; }

/* Colonna 2 offerte */
#col2 h1 { height: 187px; width: 200px; text-indent: 999em; background: url(../images/bg/indexPicCol.png) -200px 0 no-repeat; margin-left: -20px; margin-bottom: 0px; overflow: hidden; }
#col2 h2 { display: block; background: url(../images/h2Intro.gif) -200px 0 no-repeat; height: 130px; padding-left: 200px; width: 0px; overflow: hidden; }
#col2 p { margin-top: -5px; }

#OffertaWeb { width: 90px; float: left; text-align: center; padding: 0 10px 0 0; position: relative; }
#OffertaWeb h5 a { display: block; background: url(../images/h5_OffertaWeb.gif) 0 0 no-repeat; height: 70px; padding-left: 90px; width: 0px; overflow: hidden; margin: 15px 0 0 3px; text-align: right;}
#prezzoOffertaWeb a { font-size: 20px; text-decoration: none; color: #0066FF; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; top: -55px; left: -79px; background: url(../images/bg/bg_offertaWeb.png) top no-repeat; height: 70px; width: 160px; text-align: right; padding: 30px 25px 0 0; }

#OffertaGrafica { width: 90px; float: left; text-align: center; padding: 0 0 0 10px; position: relative; }
#OffertaGrafica h5 a { display: block; background: url(../images/h5_OffertaGrafica.gif) 0 0 no-repeat; height: 70px; padding-left: 90px; width: 0px; overflow: hidden; margin: 15px 0 0 3px; text-align: right;}
#prezzoOffertaGrafica a { font-size: 20px; text-decoration: none; color: #990000; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; position: absolute; top: -55px; right: -64px; background: url(../images/bg/bg_offertaGrafica.png) top no-repeat; height: 70px; width: 139px; text-align: left; padding: 30px 0 0 25px; }

/* Colonna 3 grafica */
#col3 h1 { height: 187px; width: 200px; text-indent: 999em; background: url(../images/bg/indexPicCol.png) -400px 0 no-repeat; margin-bottom: 0px; }
#col3 h2 a { display: block; background: url(../images/h2Intro.gif) -400px 0 no-repeat; height: 130px; padding-left: 200px; width: 0px; overflow: hidden; }
#col3 h3 a { display: block; background: url(../images/bg/scopriGrafica.gif) 0 0 no-repeat; height: 37px; padding-left: 183px; width: 0px; overflow: hidden; }
#col3 h3 a:hover, #col3 h3 a:focus { background: url(../images/bg/scopriGrafica.gif) -183px 0 no-repeat; }
#col3 p { margin-top: -15px; }

#wheel #up { position: absolute; left: -0px; top: 30px; }
#wheel #down { position: absolute; left: -0px; top: 30px; }

/* ########## STEP 2 - WEB */
#step2 { background: #FFF url(../images/bg/bgContentsRunning.jpg) -2px 0 no-repeat; width: 460px; margin: 0 0 0 240px; padding: 900px 0 200px 0; }
#step2 strong { color: #0a8de4; }

.WebMain_ul li { clear: both; }

#colWeb { padding: 90px 20px 160px 20px; }
#colWeb li { padding: 0 0 30px 0; }

#colWeb img { background: url(../images/bg/colWeb_imm_bg.gif) bottom right no-repeat; padding: 0 20px 25px 20px; margin: 0 0 0 -20px; }
#colWeb h3 { font-size: 13px; margin-left: 3px; margin-top: -5px; color: #333333; }

/* Titoli H2 Web */
#WebBase h2 { display: block; background: url(../images/h2WebBase.gif) 0 70px no-repeat; height: 35px; padding-left: 338px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; clear: both; }
#WebPro h2 { display: block; background: url(../images/h2WebPro.gif) 0 70px no-repeat; height: 32px; padding-left: 338px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; }

#GraficaMore { float: right; width: 190px; background: #FFFFFF; }
#GraficaMore p { display: block; background: url(../images/grafica_more.gif) 0 0 no-repeat; height: 107px; padding-left: 108px; width: 0px; overflow: hidden; margin-bottom: 0.2em; margin: auto;}
#GraficaMore a { display: block; background: url(../images/bg/scopriGrafica.gif) 0 0 no-repeat; height: 37px; padding-left: 183px; width: 0px; overflow: hidden; }
#GraficaMore a:hover, #GraficaMore a:focus {background: url(../images/bg/scopriGrafica.gif) -183px 0 no-repeat; }

.WebMenu { float: right; padding: 0; margin: 0; } 
.WebMenu li { list-style: none; text-align: center; margin: 0; padding: 0; float: left; height: 37px;}
.WebMenu li a { text-transform: uppercase; font-size: 9px; color: #0066FF; text-decoration: none; margin: 0 2px 0 2px; padding: 5px 0 0 0; background:url(../images/bg/menu_GraficaWeb.gif)  0 0 no-repeat; display: block; width: 75px; height: 37px; font-weight: bold; }
.WebMenu li a:hover { color: #FFF; background:url(../images/bg/menu_Web-hover.gif) 0 0 no-repeat; }



/* ########## STEP 3 - GRAFICA */
#step3 { background: #FFF url(../images/bg/bgContentsRunning.jpg) -482px 0 no-repeat; width: 477px; padding: 900px 0 109px 0; }
#step3 strong { color: #ff0000; }

#colGrafica { padding: 90px 20px 100px 20px; }
#colGrafica li { padding: 0 0 30px 0; }

#colGrafica img { background: url(../images/bg/colGrafica_imm_bg.gif) bottom left no-repeat; padding: 0 18px 25px 20px; margin: 0; }
#colGrafica h3 { font-size: 13px; margin-left: 3px; margin-top: -5px; color: #333333; }

#colGrafica .specifiche { background:  #FFF; margin: 15px -20px 10px 0; padding: 10px; } 
#colGrafica .specifiche ul li { list-style: url(../images/bg/li-style.png); padding: 5px 0 0 0px; margin: 0 0 0 20px; }

/* Titoli H2 Grafica */
#TrattImm h2 { display: block; background: url(../images/h2TrattImm.gif) 0 70px no-repeat; height: 35px; padding-left: 340px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; clear: both;}
#ImmCoord h2 { display: block; background: url(../images/h2ImmCoord.gif) 0 70px no-repeat; height: 35px; padding-left: 340px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; }
#Logo h2 { display: block; background: url(../images/h2Logo.gif) 0 70px no-repeat; height: 35px; padding-left: 340px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; }
#Brochures h2 { display: block; background: url(../images/h2Brochures.gif) 0 70px no-repeat; height: 35px; padding-left: 340px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; }
#Packaging h2 { display: block; background: url(../images/h2Packaging.gif) 0 70px no-repeat; height: 35px; padding-left: 340px; width: 0px; overflow: hidden; margin-bottom: 0.2em; padding-top: 70px; }

#WebMore { float: right; width: 190px; background: #FFFFFF; }
#WebMore p { display: block; background: url(../images/web_more.gif) 0 0 no-repeat; height: 107px; padding-left: 108px; width: 0px; overflow: hidden; margin-bottom: 0.2em; margin: auto; }
#WebMore a { display: block; background: url(../images/bg/scopriWeb.gif) 0 0 no-repeat; height: 37px; padding-left: 183px; width: 0px; overflow: hidden; }
#WebMore a:hover, #WebMore a:focus { background: url(../images/bg/scopriWeb.gif) -183px 0 no-repeat; }

.GraficaMenu { float: right; padding: 0; margin: 0; } 
.GraficaMenu li { list-style: none; text-align: center; margin: 0; padding: 0; float: left; height: 37px;}
.GraficaMenu li a { text-transform: uppercase; font-size: 9px; color: #CC0000; text-decoration: none; margin: 0 2px 0 2px; padding: 5px 0 0 0; background:url(../images/bg/menu_GraficaWeb.gif)  0 0 no-repeat; display: block; width: 75px; height: 37px; font-weight: bold; }
.GraficaMenu li a:hover { color: #FFF; background:url(../images/bg/menu_Grafica-hover.gif) 0 0 no-repeat; }


/* ########## FOOTER ########## */
#footer { background: url(../images/bg/bg_footer.gif) top right no-repeat; width: 140px; height: 250px; position: fixed; left: 0; bottom: 0; }
#logo_sz { float: left; margin: 15px 8px 0px 15px; }
#footer h3  { display: block; background: url(../images/footer_SZlogotipo.gif) 0 0 no-repeat; height: 31px; padding-left: 65px; width: 0px; overflow: hidden; margin: 17px 0 0  0; }
#footer p { font-size: 9px; line-height: 12px; color: #666666; margin: 0; padding: 0 0 10px 15px; }
#footer span { float: left; margin: 10px 0 0 0; }

/* W3C */
#zw3c { position: absolute; bottom: 20px; width: 100px; left: 15px; border: 1px solid #000000; }
#w3c { margin: 0; padding: 0; float: left; }

#w3cXhtml { display: block; background: url(../images/bg/w3c_xhtml.gif) 0 0 no-repeat; height: 24px; padding-left: 77px; width: 0px; overflow: hidden; margin-right: 10px; }
#w3cXhtml:hover { background: url(../images/bg/w3c_xhtml.gif) -77px 0 no-repeat; }
#w3cCss { display: block; background: url(../images/bg/w3c_css.gif) 0 0 no-repeat; height: 24px; padding-left: 77px; width: 0px; overflow: hidden; }
#w3cCss:hover { background: url(../images/bg/w3c_css.gif) -77px 0 no-repeat; }