/* 
IANA 2010 
Matteo Poile
08/10/2010
*/

/* RESET - RESET - RESET - RESET - RESET - RESET - RESET */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,select,option { 
	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;
}

embed, object{
   display:block;
}

/* RESET - RESET - RESET - RESET - RESET - RESET - RESET */

.cleared:after {
    display		: block; 
    visibility  	: hidden;
    content		: "."; 
    height		: 0; 
    clear           : both;
}
            
.cleared {
    clear           : both; /* per Gecko */
    height		: 1%; /* per IE */
}


/* GENERALE - GENERALE - GENERALE - GENERALE - GENERALE - GENERALE */

html{
    width:                      100%;
    height:                     100%;
}

body{
    width:                      100%;
    height:                     100%;
    font:                       12px/16px "Trebuchet MS", Tahoma, Arial, Verdana, Helvetica, sans-serif; 
    color:                      #FFF;
    background:                 #222;
    overflow:                   auto;
}

embed, object, iframe{
    outline:                    0; 
}

a:link,
a:visited{
    color:                      #FFF;
    text-decoration:            none;
    outline:                    0;
}

a:hover,
a:focus,
a:active{
    color:                      #FFF;
    text-decoration:            none;
}

.input, .select, .textarea{
    font-size:                  11px;
}

#bg{
    position:               fixed;
    top:                    0;
    left:                   0;
    width:                  100%;
    height:                 100%;
    overflow:               hidden;
    z-index:                1;
}

#bg img{
    width:                  100%;
}

#logo{
    position:               absolute;
    top:                    70px;
    left:                   94px;
    z-index:                1101;
}

#logo-interne{
    position:               absolute;
    top:                    49px;
    left:                   94px;
    z-index:                1101;
}

h1{
    margin:                 0 0 20px 100px;
    font-size:              22px;
    font-weight:            bold;
    line-height:            26px;
}

h2{
    font-size:              20px;
    font-weight:            bold;
    line-height:            26px;
}
/* GENERALE - GENERALE - GENERALE - GENERALE - GENERALE - GENERALE */



/* HEADER - HEADER - HEADER - HEADER - HEADER - HEADER - HEADER - HEADER */

#header{
    position:                   absolute;
    top:                        0;
    left:                       0;
    width:                      100%;
    height:                     24px;
    background:                 url(../img/bg_black_alpha.png);
    overflow:                   hidden;
    z-index:                    10;
}

#menu{
    position:                   absolute;
    top:                        0px;
    left:                       88px;
    float:                      left;
    z-index:                    1102;
}

#menu li{
    position:                   relative;
    float:                      left;
    margin-right:               5px;
    display:                    inline;
}

#menu a:link,
#menu a:visited{
    position:                   relative;
    float:                      left;
    padding:                    5px 12px 14px 12px;
	text-transform:             uppercase;
    z-index:                    5;
}

#menu a:hover,
#menu a:focus,
#menu .sel a:link,
#menu .sel a:visited{
    color:                      #666;
    background:                 #FFF;
    text-decoration:            none;
    z-index:                    5;
    -moz-border-radius:         0 0 8px 8px;
    -webkit-border-radius:      0 0 8px 8px;
    border-radius:              0 0 8px 8px;
}

#menu a.off:link,
#menu a.off:visited{
    color:                      #666;
}

#menu a.off:hover,
#menu a.off:focus,
#menu a.off:active{
    color:                      #666;
    background:                 #FFF !important;
}

#menu ul{
    position:                   absolute;
    top:                        -200px;
    left:                       0;
    padding-top:                32px;
    padding-bottom:             24px;
    color:                      #666;
    background:                 #FFF;
    -moz-border-radius:         0 0 8px 8px;
    -webkit-border-radius:      0 0 8px 8px;
    border-radius:              0 0 8px 8px;
    /*display:                    none;*/
    z-index:                    4;
   
}

#menu ul li{
    float:                      none;
    display:                    list-item;
    min-width:                  200px;
}

#menu ul li a:link,
#menu ul li a:visited{
    min-width:                  125px;
  
    padding:                    0 0 0 12px !important;
    color:                      #666;
    text-transform:             capitalize;
}

#menu ul li a:hover,
#menu ul li a:focus,
#menu ul li a:active{
    padding-bottom:             2px;
}


#header #lang{
    float:                      right;
    margin:                     3px 40px 0 0;
}

#header #lang li{
    float:                      left;
    margin-left:                10px;
    display:                    inline;
}

#header #lang a:link,
#header #lang a:visited{
    width:                      16px;
    height:                     16px;
    font-size:                  10px;
    border:                     1px solid #686464;
    text-align:                 center;
	text-transform:             uppercase;
    display:                    block;
}

#header #lang a:hover,
#header #lang a:focus,
#header #lang a:active,
#header #lang a.sel:link,
#header #lang a.sel:visited{
    border:                     1px solid #FFF;
    text-decoration:            none;
}
/* HEADER - HEADER - HEADER - HEADER - HEADER - HEADER - HEADER - HEADER */



/* HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME */

#banners{
    position:           absolute;
    top:                35px;
    right:              10px;
    width:              347px;
    z-index:            10;
}

#banners img{
    margin-top:         33px;
    display:            block;
	float:              right;
}

a.btn-prod:link,
a.btn-prod:visited{
    position:           absolute;
    bottom:             60px;
    z-index:            3;
}

a.btn-prod:hover,
a.btn-prod:focus{
}

#home-1{
    left:              100px;
}

#home-2{
    left:              235px;
}

#home-3{
    left:              370px;
}

#home-4{
    left:              505px;
}

#home-5{
    left:              640px;
}

.btn{
    position:           absolute;
    right:              40px;
    width:              220px;
    height:             84px;
    padding:            10px 15px;
    background:         url(../img/btn_brown.png) no-repeat;
    z-index:            2;
             
}

.btn em{
    font-size:          20px;
    font-weight:        bold;
    line-height:        20px;
}

.btn p{
    margin-top:         10px;
    font-weight:        bold;
}

.btn a{
    color:              #FFF;
    line-height:        28px;
}


#btn1{
    top:                40px;
    background:         url(../img/btn_brown.png) no-repeat;
}

#btn2{
    top:                160px;
    background:         url(../img/btn_green.png) no-repeat;
}

#btn3{
    top:                280px;
    background:         url(../img/btn_yellow.png) no-repeat;
}

#btn4{
    top:                400px;
    background:         url(../img/btn_purple.png) no-repeat;
}

#spot{
    position:           absolute;
    bottom:             147px;
    right:              40px;  
    z-index:            2;              
}

#radiospot,
#radiospot embed{
    position:           relative;
    z-index:            0;
    left:               -500px;
}

/* HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME - HOME */



/* MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN */

.main{
    position:                   relative;
    float:                      left;
    margin:                     180px 0 50px 0;
    float:                      left;
    width:                      100%;
    padding:                    30px 0 50px 0;
    background:                 url(../img/bg_black_alpha.png);
    z-index:                    5;
}

/* MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN - MAIN */



/* COMPANY - COMPANY - COMPANY - COMPANY - COMPANY - COMPANY - COMPANY - COMPANY */

#company h2{
    margin:                     20px 0 10px 110px;
}

#company p{
    width:                      600px;
    margin:                     0 0 10px 100px;
}

/* COMPANY - COMPANY - COMPANY - COMPANY - COMPANY - COMPANY - COMPANY - COMPANY */






/* PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS */

#products{
    position:                   fixed;
    bottom:                     50px;
    left:                       0;
    width:                      100%;
    height:                     290px;
    background:                 url(../img/bg_black_alpha.png);
    z-index:                    5;
}

#catalogue{
    position:                   absolute;
    top:                        50px;
    right:                      40px;
    border:                     1px solid #FFF;
    padding:                    1px 2px 0 2px;
    /*display:                    none;*/
    z-index:                    1101;
}

#products .container{
    position:                   relative;
    width:                      980px;
    height:                     240px;
    margin:                     25px auto;
}

#products .scroller{
    position:                   relative;
    width:                      890px;
    height:                     240px;
    margin:                     0 0 0 45px;
    overflow:                   hidden;
}

#products .prev{
    position:                   absolute;
    top:                        95px;
    left:                       0px;
}

#products .next{
    position:                   absolute;
    top:                        95px;
    left:                       950px;
}

#products ul{
    position:                   absolute;
    top:                        0;
    left:                       0;
    width:                      910px;
    float:                      left;
}

#products li{
    float:                      left;
    margin:                     0 20px 20px 0;
}

#products li img{
    display:                    block;
}

/* PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS - PRODUCTS */





/* CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT */

#contact fieldset h2{
    margin-bottom:              20px;
}

fieldset{
    float:                      left;
    width:                      360px;
    margin:                     0 0 0 110px;
    /*background:                 #333;*/
}

.fieldbox{
    float:                      left;
    margin:                     10px 0 0 0;
    /*background:                 #666;*/
}

.fieldbox.right{
    float:                      right;
    vertical-align:
}

.fieldbox label{
    font-weight:                bold;
}

.fieldbox input,
.fieldbox select,
.fieldbox textarea{
    width:                      170px;
    font-family:                "Trebuchet MS", Tahoma, Verdan, Serif;
    font-size:                  11px;
    display:                    block;
}

.fieldbox textarea{
    float:                      left;
    width:                      358px;
    height:                     100px;
}

.fieldbox .radio{
    width:                      auto;
    vertical-align:             sub;
    display:                    inline;
}

.submit{
    float:                      left;
    width:                      90px !important;
    height:                     20px;
    padding-bottom:             3px;
    color:                      #000;
    line-height:                23px;
    text-align:                 center;
    background:                 transparent url(../img/bg_contact_submit.png) no-repeat;
    border:                     0;
    clear:                      both;
    display:                    block;
    cursor:                     pointer;
}

form .error{
    border:                     0;
}

form .error input,
form .error select,
form .error textarea{
    border:                     1px solid #ac0000;
}

form .error label{
    color:                      #ac0000;
}

#contact address{
    float:                      left;
    margin:                     240px 0 0 20px;
}

#contact address em{
    margin:                     0;
    display:                    block;
}

/* CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT - CONTACT */



/* TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS */

#terms-privacy {
    margin-top:                 20px;
    padding:                    0 80px 0 0;
    /*background:                 url(../img/bg_news.jpg) left top no-repeat;*/
}

#terms-privacy p{
    float:                      none;
    width:                      auto;
    margin-bottom:              10px;
}

/* TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS - TERMS */



/* FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER */

#footer{
    position:                   fixed;
    bottom:                     0;
    left:                       0;
    width:                      100%;
    height:                     50px;
    background:                 #666;
    z-index:                    10;
}

#footer p{
    width:                      800px;
    margin:                     15px 0 0 100px;
    font-size:                  11px;
    line-height:                14px;
}

#footer #fb{
    position:                   absolute;
    top:                        10px;
    right:                      40px;
    display:                    none;
}

#footer .credits{
    position:                   absolute;
    top:                        15px;
    right:                      40px;
    font-size:                  11px;
    line-height:                14px;
}

/* FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER - FOOTER */



/* DEBUG - DEBUG - DEBUG - DEBUG - DEBUG - DEBUG - DEBUG - DEBUG - DEBUG - DEBUG */

#debug{
    padding:                    10px 50px;
    font-size:                  100%;
    line-height:                1.2em;
    border-top:                 1px solid #000;
    background:                 #EAF5FF;
    clear:                      both;
}

#debug pre{
    margin:                      10px;
}

#debug b{
    margin-top:                  15px;
    display:                     block;
}