﻿
/****  FONTS  ****/
@font-face {
    font-family: 'Aller';
    src: url('Fonts/Aller/aller_rg-webfont.eot');
    src: url('Fonts/Aller/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/Aller/aller_rg-webfont.woff') format('woff'),
         url('Fonts/Aller/aller_rg-webfont.ttf') format('truetype'),
         url('Fonts/Aller/aller_rg-webfont.svg#allerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/****  GENERAL  ****/
body { background-color:#111; font-family:'Aller', Arial; margin:0; }
img { border:none;}
a { cursor:pointer; color:#336d0f; text-decoration:none;}
p { text-align:justify; font-size:12px; color:#bbb;}
.clear { clear:both;}


/****  COLORS  ****/
.lightcolor { color:#92cd0d; }
.color { color:#94b942;}
.darkcolor { color:#5d8308;}
.darkdarkcolor { color:#354b04;}
.gray { color:#8c8c8c;}
.darkgray { color:#666666;}


/****  HEADERS  ****/
h1 { color:#fff; font-size:24px; margin:20px 15px 20px 0; font-weight:normal; text-align:left; }
h1.home{ text-align:center;}
h2 { color:#fff; margin-top:0; margin-bottom:20px; font-size:16px; padding-top:20px; width:850px;}
h3 { color:#bbb; font-size:16px; font-weight:bold; text-align:left; }
h4 { color:#ffffff; font-size:24px; font-weight:bold; margin-bottom:0; margin-top:10px; font-family:'Aller'; }
h5 { color:#ffffff; font-size:14px; font-weight:bold; margin-top:0; margin-bottom:15px; font-family:'Aller'; }


/****  LAYOUT  ****/
#main { width:100%; }
header { width:850px; margin:0 auto; }
#logo { float:left; margin:0; width:255px;  }
#logo-footer { float:left; margin:0; width:128px;}
menu { width:550px; float:right; font-size:14px; padding-top:20px; }
menu ul { list-style-type:none; vertical-align:middle; margin-top:15px;}
menu ul li { width:7em; text-transform:uppercase; padding:5px 10px; display:inline; border-right:1px solid #333; }
    menu ul .last { border-right:none; }
    menu ul .selected { font-weight:bold; color:#fff; }
    menu ul li a { color:#999; }

#topslide { clear:both; width:100%; background:#111 url(../images/sfondoslider.jpg) center repeat-x; }
#topslide2 { clear:both; width:100%; border-bottom:10px solid #222; }

#slidecenter { background: url(../images/slide/sfumatura2.png) top; background-repeat:no-repeat; width:1000px; height:350px; margin:0 auto; padding-top:-50px;}

#footer { width:100%; color:#ffffff; clear:both;}
    #footer #contentfooter { width:850px; margin:0 auto; min-height:150px; border-top:1px solid #222; padding-top:20px; }
        #footer #contentfooter #div01 { float:left; width:500px; text-align:left; margin-top:10px;}
            #footer #contentfooter #div01 p { margin-top:-5px; }
                #footer #contentfooter #div01 p a { color:#92cd0d;}
        #footer #contentfooter #div02 { font-size:12px; text-align:right; margin-top:0; padding-bottom:5px; width:200px; float:right; padding:0 10px 20px 20px; height:50px; }
            #footer #contentfooter #div02 a { color:#bbbbbb; }

            #footer #contentfooter #div02 #social { float:right; width:100px; position:relative; top:35px;}

        #footer #contentfooter #div02 #credits { font-size:12px; float:right; width:160px; position:relative; top:39px; text-align:right;}
        #footer #contentfooter #div02 #credits a { color:#92cd0d; }

#content { width:850px; margin:0 auto; color:#999; }
#homeleft { width:400px; float:left; margin-top:15px; margin-bottom:20px; }
    #homeleft .box { width:380px; clear:both; }
        #homeleft .box img { float:left; border:1px solid #cccccc; margin-right:10px; margin-bottom:30px; }
        #homeleft .box .titolo { font-weight:bold; font-size:12px; color:#fff;  }
        #homeleft .box p { margin-bottom:3px; }
        #homeleft .box .readmore { font-size:12px; height:21px; width:95px; vertical-align:middle; text-align:right; float:right; background-repeat:no-repeat;}
            #homeleft .box .readmore a {color:#5d8308; }
#homeright { width:450px; float:right; margin-top:15px; }
    #homeright img { float:right;}
    #homeright p { margin:15px 10px 15px 30px; float:right; }

#contentpage { width:850px; margin:0 auto; color:#fff; clear:both; background-color:#111; }
    #contentpage .boxgallery { width:264px; min-height:350px; margin:9px; float:left; }
        #contentpage .boxgallery .boxborder { width:268px; height:200px; border:1px solid #cccccc; margin-bottom:10px; border:3px;}
        #contentpage .boxgallery .boxborder:hover { width:268px; height:200px; border:1px solid #aaaaaa; margin-bottom:10px; border:3px;}
        #contentpage .boxgallery img { border:2px solid #ffffff;}
        #contentpage .boxgallery img:hover { border:2px solid #999;}
        #contentpage .boxgallery .titolo { font-weight:normal; font-size:16px; text-align:left;}
        #contentpage .boxgallery p { margin-bottom:5px; }
        #contentpage .boxgallery .readmore { font-size:12px; height:21px; width:95px; vertical-align:middle; text-align:right; float:right; background-repeat:no-repeat; }

    #contentpage #menuservizi { margin-top:30px; border-top:1px solid #222; padding-top:15px; clear:both;}
    #contentpage #menuservizi .boxgallerysmall { width:130px; min-height:130px; float:left; margin:10px 12px 0 0; padding-right:20px;}
    #contentpage #menuservizi .boxgallerysmall .boxborder { width:130px; height:99px; border:1px solid #cccccc; margin-bottom:10px;}
    #contentpage #menuservizi .boxgallerysmall .boxborder:hover { width:130px; height:99px; border:1px solid #aaaaaa; margin-bottom:10px;}
    #contentpage #menuservizi .boxgallerysmall img { border:1px solid #ffffff;}
    #contentpage #menuservizi .boxgallerysmall img:hover { border:1px solid #aaa;}
    #contentpage #menuservizi .boxgallerysmall h3 { font-weight:normal; font-size:12px; text-align:center; margin-bottom:20px;}

    #contentpage #pageleft { float:left; width:310px; }
        #contentpage #pageleft h3 { font-weight:normal; }
    #contentpage #pageright { float:left; width:510px; }

.ico img { vertical-align:middle; margin:0 10px 10px 0; }

.imgright { float:right; border:7px solid #eeeeee; margin-left:30px; margin-bottom:20px;}
.imgleft { float:left; border:7px solid #eeeeee; margin-right:30px; margin-bottom:20px;}
.imgtop { border:7px solid #eeeeee; }


/** MODULES **/
.sottotitolo-contatti{ margin-top:-20px; margin-bottom:40px;}
#modulo { width:100%;}
    #modulo p { margin-bottom:5px; }
    #modulo p label { width:120px; float:left; vertical-align:top;}
    #modulo input { width: 280px; font-family:Tahoma, sans-serif;background-color:#333; border:1px solid #666;}
    #modulo .btninvia { width:107px; margin-bottom:30px; margin-left:395px; background-color:#fff; margin-top:14px;}
    #modulo textarea {font-family:Tahoma, sans-serif; font-size:12px;background-color:#333; border:1px solid #666; color:#aaa;}


/*****  PHOTOGALLERY  *****/
#photo {width:850px; margin-bottom:30px; background-color:#cc0000;}
    #photo .view {width:150px; height:92px; padding:0; border: 5px solid #fff; margin:10px 5px 30px 5px; float:left; text-align:center; overflow: hidden; position:relative; box-shadow: 0px 0px 5px #aaa;}
        #photo .view img { width:100%;}
        #photo .view .mask { width:150px; height:94px; position: absolute; overflow:hidden; top:0; left:0; z-index:3;}
            #photo .view .mask img { position:absolute; width:20px; top:40%; left:45%; border:0;}
        #photo .effect .mask { opacity: 0; overflow:visible; background-color:#000000; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; 
                               -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out;
                               transition: all 0.4s ease-in-out;}
        #photo .effect:hover .mask { opacity:0.6; background-color:#000000;}


