@import url(http://fonts.googleapis.com/css?family=Oswald:300,400);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);

/* RESET
---------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

/* HOME
---------------------------------------------------------------------------------------------*/
BODY {background-color:#002637; padding:0; margin:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff;}
A {text-decoration:none;}
.clear {clear:both; display:block;}

/* font */
.canone,
.centroL UL.type LI,
.centroR H2, .centroIntro H2,
#descrizioni li, .centroIntro H4, FORM A.t_verifica {font-family:'Oswald', sans-serif;}
.centroL H2, .box, .arrow {font-family:'Raleway', sans-serif;}

#percentuale { width:100%; background:url(/images/bg_percentuale.gif) repeat-y center top; text-align:center;}

#container,
BODY#ultraAdslIntro #container {width:100%; background:url(/images/background.gif) no-repeat center top; text-align:center;}
    BODY#ultraAdslIntro #container {background-image: url(/images/bg_intro.gif);}

    .centroIntro {padding-bottom:60px; position:relative;}
    .centroIntro H2 {font-size:35px; padding:50px 0 5px 0;}
    .centroIntro H2 span {font-size:35px; font-weight:lighter; color:#7fd7ff; }
    .centroIntro H4 {font-size:20px; padding:0px 0 20px 0; color:#fc7c38;}
    .centroIntro H4 span {font-size:20px; font-weight:lighter; padding:0px 0 0px 0; color:#fff;}
    .centroIntroL, .centroIntroR {width:412px; height:402px; display:block;}
        .centroIntroL {float:left; margin-left:-30px; background:url(/images/bg_introBox1.png) no-repeat 0 0;}
        .centroIntroR {float:right; margin-right:-30px; background:url(/images/bg_introBox2.png) no-repeat 0 0;}
        .centroIntroL .box,
        .centroIntroR .box {width:280px; padding:70px 0 0 65px; font-size:20px; color:#444; line-height:130%;}
        .centroIntroL .box H3,
        .centroIntroR .box H3 {font-size:25px; color:#005e89; font-weight:700; padding:10px 0 20px 0;}
        .centroIntroL .box H3 span,
        .centroIntroR .box H3 span {font-weight:lighter; color:#29bcff; margin-left:-6px;}
            .centroIntroR .box H3 span {color:#ff4c56;}
        A.t_dettagli1, A.t_dettagli2 {width:216px; height:71px; display:block; margin-top:20px; margin-left:30px; background:url(/images/t_dettagli1.png) no-repeat 0 0; text-indent:-9000px;}
            A.t_dettagli2 {background-image:url(/images/t_dettagli2.png);}
        A.t_dettagli1:HOVER,
        A.t_dettagli2:HOVER {background-position:0 -71px;}
        .arrow {width:318px; height:227px; padding-top:250px; display:block; font-size:18px; position:absolute; top:190px; left:316px; background: url(/images/intro_arrow.png) no-repeat 0 25px; }

    #contenitore {width:950px; padding:0 5px; margin:0 auto;}
    #header,
    #centro,
    #footer {width:950px; display:block; text-align:left; position:relative;}
        #header {height:92px;}

        H1 {width:275px; height:92px; display:block; background:url(/images/logo_ampersand.gif) no-repeat; text-indent:-9000px;}
        BODY#ultraAdsl H1, BODY#ultraAdslFonia H1 {width:350px; height:92px; display: block; text-indent:-9000px;}
        BODY#ultraAdsl H1 A, BODY#ultraAdslFonia H1 A {width: 100%; height:100%; display:block; background:url(/images/logo_ampersand_int.png) no-repeat 0 0;}
        BODY#ultraAdsl H1 A:HOVER, BODY#ultraAdslFonia H1 A:HOVER {background-position:0 -92px; }

        A.www {font-size:16px; color:#005e89; position:absolute; top:52px; right:57px;}
        A.mail {width:38px; height:24px; display:block; background:url(/images/t_mail.gif) no-repeat; text-indent:-9000px; position:absolute; right:0px; top:48px;}
        A.mail:HOVER {background-position:0 -24px;}

        .canone,
        BODY#ultraAdslFonia .canone {font-size:28px; width:167px; height:172px; display:block; position:absolute; top:28px; left:50%; margin-left:60px; background:url(/images/bg_canone.png) no-repeat center center;}
            BODY#ultraAdslFonia .canone {background-image:url(/images/bg_canoneFonia.png)}
            .canone div {padding-top:63px;}
        .centroL {width:741px; float:left;}
        .centroL H2 {font-size:35px; color:#005e89; font-weight:700; padding:10px 0 20px 0;}
        .centroL H2 span {font-weight:lighter; color:#29bcff; margin-left:-8px;}
            BODY#ultraAdslFonia .centroL H2 span {color: #ff4c56}
        .centroL UL.type {width:527px; height:428px; display:block; float:right; padding:4px 0 0 30px; background:url(/images/bg_caratteristiche.png) no-repeat 0 0;}
            BODY#ultraAdslFonia .centroL UL.type {background-image:url(/images/bg_caratteristicheFonia.png);}

        .centroL UL.type LI { font-size: 20px; text-transform: uppercase; line-height: 50px; }
        .txt { width: 165px; font-size: 14px; color: #005e89; line-height: 130%; }
            .txt span { display: block; padding-top: 25px;}
        .note {width:590px; position:absolute; top:370px; text-align:justify;}
        .note SPAN {display:block; padding-bottom:5px;}

        /*accordion*/
        #descrizioni { list-style:none; width:710px; margin-bottom: 50px; clear: both; }
        #descrizioni li,
        BODY#ultraAdslFonia #descrizioni li { background: #bae2f5 url(/images/bg_descrizione.gif) no-repeat 0 0; font-size:20px; cursor:pointer; padding:1px 30px 2px 30px; color:#fff; margin-bottom: 1px;}
        #descrizioni ul h4 { font-size: 16px; padding-top: 20px; font-weight: bold; }
        #descrizioni ul { list-style:none; display:none; margin:0; padding:5px 0; }
        #descrizioni ul li,
        BODY#ultraAdslFonia #descrizioni ul li { cursor: default; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color:#005e89; border:0; padding:0; background-image: none;}
        #descrizioni ul li UL { margin-bottom: 10px;}
        #descrizioni ul li UL LI,
        BODY#ultraAdslFonia #descrizioni ul li UL LI { padding: 5px 0px 0 25px; background: url(/images/punto_elenco.gif) no-repeat 10px 9px;}
        #descrizioni ul li .descNote,
        BODY#ultraAdslFonia #descrizioni ul li .descNote { font-size: 10px; margin-left: -25px; background-image: none; }
        #descrizioni ul li a { text-decoration:none; }
        #descrizioni ul li a:hover { color:#f00; }
        BODY#ultraAdslFonia #descrizioni li { background: #fedac7 url(/images/bg_descrizioneFonia.gif) no-repeat 0 0;}

        .centroR {width:190px; float: left; padding:78px 0 0 18px;}
        .centroR A {color:#fff; text-decoration:underline;}
        .centroR A:HOVER {text-decoration:none;}

        FORM {width:190px;}
        .centroR H2 { font-size: 20px; text-transform: uppercase; line-height: 25px; margin-bottom: 15px; }
        INPUT { width: 170px; font-size: 14px; color: #8f8f8f; padding: 7px 10px; margin-left: 2px; margin-bottom:10px; border: none; border:solid 1px #005e89; border-radius: 5px; }
        INPUT.blu {color: #005e89;}
        FORM A.t_verifica {width:196px; height:71px; display:block; background:url(/images/t_verifica.png) no-repeat 0 0; text-indent: -9000px;}
        FORM A.t_verifica:HOVER { background-position: 0 -71px; }

    #footer { padding: 0; margin: 0 auto; margin-top: 20px;}
    #footer UL LI { float: left; padding-right: 30px; margin-bottom: 20px;}
    #footer UL LI A {color: #fff; }
        #footer UL LI A:HOVER, #footer UL LI.credits A:HOVER, A.www:HOVER {color:#56acd4}
    #footer UL LI.informativa { width: 600px; text-align: justify; padding-right: 0; float: right; color: #a3aaae;}

/* codice per google chrome per problema 1px */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #container {background-position: 49.999% 0;}
}

/* TABELLA */
table {width:100%; border-collapse:collapse;}
tr:nth-of-type(odd) {background:#eee;}
th {background:#fdb188; color:white; font-weight:bold;}
td, th {padding:6px; border:1px solid #ccc; text-align:left;}
tr td SPAN {display:none;}

/* MOBILE
---------------------------------------------------------------------------------------------*/
@media only screen and (max-width:959px) {
    body { overflow-x: hidden; }
    #container, BODY#ultraAdslIntro #container {background:#d3d3d3 url(/images/backgroundMobile.gif) no-repeat center top; }
    #contenitore { width: 90%; margin-left: 5%; padding: 0;}
    #header,
    #centro,
    #footer { width: 100%;}

    A.www { display: none;}
    A.mail, A.mail:HOVER { width: 30px; background-position: right top; top: 25px; }
    .canone, BODY#ultraAdslFonia .canone {top: 80px; left: 320px; background-position: left top; }

    .centroL { width:100%; float:none;}
    .centroL H2 { width:150px;}
    .centroL H2 span {margin-left:0px; }

    .centroIntro { width:100%; }
    .centroIntro H2 {color:#29bcf8; font-size:25px; padding:20px 0 5px 0;}
    .centroIntro H2 span, .centroIntro H4 span {color:#013e5b;font-size:25px; }
    .centroIntroL, .centroIntroR { width:100%; height:auto; text-align:center; float:none; margin:0; background-image:none;}
    .centroIntroL .box,
        .centroIntroR .box {width:90%; margin-left:0; padding:5%; border:solid 2px #fff; margin-bottom:5%; background-color:#D3D3D3; }
    A.t_dettagli1, A.t_dettagli2 {width:100%; margin-left:0; background-position:center 0;}
    A.t_dettagli1:HOVER, A.t_dettagli2:HOVER {background-position:center -71px;}

    .arrow { width:90%; margin-left:0; background-color:#56ACD4; height:50px; color:#013e5b; text-align:center; background-image:none; position:static; padding:2% 5%;}

    #descrizioni {width:100%; margin-top:5%; margin-bottom:5%;}
    #descrizioni li,
    BODY#ultraAdslFonia #descrizioni li {padding:0 3%; font-size:18px; background-image:none; background-color:#5ebce7;}
    BODY#ultraAdslFonia #descrizioni li {background-color:#fc7d38;}

    .centroL UL.type {display:block; width:100%; height:410px; overflow:hidden; float:none; padding:0; background:url(/images/bg_caratteristicheMobile.png) no-repeat 0 0; background-size:auto;}
    BODY#ultraAdslFonia .centroL UL.type {padding:0; background: url(/images/bg_caratteristiche2Mobile.png) no-repeat 0 0;}
    .centroL UL.type LI {font-size:1.5em; padding-left:30px;}
    .txt {width: 50%; position:static; margin-top:-180px;}
    .note {width: 96%; position:static; margin-top:65px; background-color:#8f8f8f; padding:2%;}
    .centroR {width:100%; float:none; padding:20px 0 0 0;}
    .centroR H2 {color:#005e89;}
    FORM {width:100%; min-height:300px;}
    INPUT {width:96%; padding:7px 2%; margin-left:0;}
    FORM A.t_verifica {background-image: none; background-color: #d9d20c; height: auto; padding: 5% 0; color: #005880; text-decoration: none; font-size: 22px; text-indent: 0px; width: 100%; text-align: center; margin-bottom: 5%; border:solid 1px #005e89; border-radius: 5px;}

    tr td SPAN {display:block; height:30px;}

    #footer { width: 90%; margin-left: 5%; margin-bottom: 20px;}
    #footer UL LI { width:42%; padding-right: 20px;}
    #footer UL LI.informativa { width: 100%; margin-top: 20px;}

}

@media only screen and (max-width:550px) {
   H1 {width:220px; background-size:220px auto; background-position:0 10px;}
   BODY#ultraAdsl H1, BODY#ultraAdslFonia H1 {width:220px; height:92px; background-size:220px auto; display:block; text-indent:-9000px;}
   BODY#ultraAdsl H1 A, BODY#ultraAdslFonia H1 A {background:none;}
   .canone, BODY#ultraAdslFonia .canone {top:85px; left:160px; background-position:left top; }
   .canone, BODY#ultraAdslFonia .canone {font-size:16px; width:100px; height:100px; background-size:cover;}
   .canone div {padding-top:38px;}
   .centroL UL.type, BODY#ultraAdslFonia .centroL UL.type {padding-top:10px;}
   .centroL UL.type LI, BODY#ultraAdslFonia .centroL UL.type LI { font-size: 1.2em; line-height:200%; padding-bottom:23px;}
   .txt {width:90%;}
   .centroR H2 {font-size:16px;}
   tr td SPAN {display:block; height:35px;}

  /* Table */
  table, thead, tbody, th, td, tr {display:block;}
  table {background-color:#58afd8;}
  BODY#ultraAdslFonia table {background-color:#e37133;}
  thead tr {position:absolute; top:-9999px; left:-9999px;}
  td {border:none; position:relative; padding-left:50%; border-bottom:solid 1px #4ba3cb;}
  BODY#ultraAdslFonia TD {border-bottom:solid 1px #fc7d38;}
  td:before {position:absolute; top:6px; left:6px; width:45%; padding-right:10px;}
  td:nth-of-type(1):before { content: "Voci di costo"; }
  td:nth-of-type(2):before { content: "Costi di listino"; }
  td:nth-of-type(3):before { content: "Promozioni valide fino al 31/12/2015"; }
  td:nth-of-type(4):before { content: "Note"; }

  #footer UL LI { width:100%; padding-right:0px; text-align:center;}
}