/* 
    Document   : presentation
    Created on : 16.08.2012, 16:21:05
    Author     : darius.daniali
    Description:
        Purpose of the stylesheet follows.
*/


/* Smart City */

#SmartCityContainer {
    background: url('../img/smart_city_bg.jpg') center center no-repeat;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 200;
}
#SmartCityWheel {
    height: 100%;
    margin: -374px auto 0;
    top: 56%;
    width: 70%;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#SmartCityHeadline {
    background: url('../img/smart_city_headline_bg.png') no-repeat;
    font: 36px/84px Arial, Helvetica, sans-serif;
    height: 84px;
    text-align: center;
    text-transform: uppercase;
    top: 160px;
    left: 335px;
    position: absolute;
    width: 264px;
    z-index: 90;
}
#SmartCityWheel .carouselItem {
    position: absolute;
    width: 240px;
    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.smartCityItemBox {
    background: url('../img/smart_city_item_bg.png') no-repeat;
    height: 110px;
    margin: 0 auto;
    padding: 2px 2px 4px;
    width: 110px;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
.smartCityIcon_BMS, .smartCityIcon_LSS, .smartCityIcon_Tel,
.smartCityIcon_Misc, .smartCityIcon_SS, .smartCityIcon_FM {
    background: url('../img/smart_city_icons.png') repeat;
    background-position: 500px 0;
    height: 100px;
    margin: 5px;
    width: 100px;
}
.smartCityIcon_LSS {
    background-position: 0 0;
}
.smartCityIcon_Tel {
    background-position: 400px 0;
}
.smartCityIcon_Misc {
    background-position: 300px 0;
}
.smartCityIcon_SS {
    background-position: 200px 0;
}
.smartCityIcon_FM {
    background-position: 100px 0;
}
.smartCityItemHeadline {
    color: #fff;
    font: 18px/22px Arial, Helvetica, sans-serif;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    width: 240px;
}
.smartCityItemContent {
/*    height: 0;*/
    display: none;
    overflow: hidden;
}
.smartCityItemContent ul {
    color: #fff;
    font: 14px/18px Arial, Helvetica, sans-serif;
    list-style: none;
    list-style-position: outside;
    list-style-image: url('../img/smart_city_list_item.png');
    margin: 10px 0 0;
    padding-left: 12px;
}
.smartCityItemContent ul.langeng {
    padding-left: 0;
    padding-right: 12px;
}


/* 3D Building Permits */

#BuildingPermitsContainer {
    background: #fff;
    display: none;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 200;
}
#PermitOverview {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
#PermitOverviewText1,
#PermitOverviewText2,
#PermitBenefitsText {
    font: 20px/26px Arial, Helvetica, sans-serif;
    position: absolute;
    z-index: 20;
}
#PermitOverviewText1 {
    left: 60%;
    margin-left: -200px;
    text-align: left;
    top: 25%;
    width: 580px;
}
#PermitOverviewText2 {
    left: 25%;
    margin-left: -200px;
    text-align: left;
    top: 75%;
    width: 400px;
}
#ButtonBenefits {
    font: 12px/48px Arial, Helvetica, sans-serif;
    height: 48px;
    right: 150px;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 90px;
    z-index: 30;
}


#PermitBenefits {
    display: none;  
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.benefitsImage {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#PermitBenefitsText {
    left: 85%;
    margin-left: -200px;
    text-align: left;
    top: 15%;
    width: 350px;
}
#PermitBenefitsText > p {
    background: #fff;
    height: 60px;
    position: absolute;
    width: 100%;
}
#ButtonOverview {
    font: 12px/48px Arial, Helvetica, sans-serif;
    height: 48px;
    right: 150px;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 90px;
    z-index: 300;
}


.backgroundGallery {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.backgroundGallery > .galleryItem {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 8;
}
.galleryItem.last-active {
    opacity: 1;
    z-index: 9;
}
.galleryItem.active {
    opacity: 1;
    z-index: 10;
}