@import "finalize.css";

/*Segment Control*/
div.segmentControl { display: table; margin: 0 auto; position: relative; border-collapse: separate; }
div.segmentControl > div { display: table-row; }
div.segmentControl > div > div { display: table-cell; position: relative; cursor: pointer; text-align: center; }
div.segmentControl > div > div input { position: absolute; top: 5px; left: 5px; }
div.segmentControl > div > div a { display: block; vertical-align: middle; font-weight: bold; color: #000; }
div.segmentControl > div > div img { width: 150px; vertical-align: middle; }
div.segmentControl > div > div span {  }
div.segmentControl > div > div .colorFilter { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background:#FFF; opacity:0.6; }
div.segmentControl > div > div.selected {  }
div.segmentControl > div > div.selected .colorFilter { display: none; }
div.segmentControl.styled { display: table; width: 100%; position: relative; border-collapse: separate; }
div.segmentControl.styled > div { display: table-row; }
div.segmentControl.styled > div > div { display: table-cell; padding: 5px; cursor: pointer; border: 3px solid #555; border-width: 3px 0 3px 3px; }
div.segmentControl.styled > div > div:last-child { border-width: 3px; }
div.segmentControl.styled > div > div input { display: none; }
div.segmentControl.styled > div > div a { display: block; vertical-align: middle; font-weight: bold; color: #000; }
div.segmentControl.styled > div > div img { width: 30px; height: 30px; margin-right: 5px; vertical-align: middle; }
div.segmentControl.styled > div > div span {  }
div.segmentControl.styled > div > div.selected { background: #C89E74; }

/*Spark Bar*/
div.sparkBar { width: 100%; height: 5px; display: table; background: #CCC; border-collapse: collapse; border: none; }
div.sparkBar > div { display: table-row; }
div.sparkBar > div > div { width: 50%; height: 5px; padding: 0; display: table-cell;  border: none; }
div.sparkBar div.none { display: none; }
div.sparkBar div.sparkBar_positive { background: #BBDD4A; }
div.sparkBar div.sparkBar_negative { background: #EE531C; }

/**************************************************************************************/
div.itemInfoPanel.panel { padding: 10px; margin-bottom: 10px; position: relative; border: 3px solid #555; border-radius: 0; }
div.itemInfoPanel.panel div.panel_body { padding: 0px; }
div.itemInfoPanel div.logo { float: left; width: 20%; margin-right: 10px; text-align: center;}
div.itemInfoPanel div.logo img { width: 90px; }
div.itemInfoPanel div.info { float: left; width: 78%; text-align: left; }
div.itemInfoPanel div.info .btn { display: block; position: absolute; top: 0px; right: 0px; }
div.itemInfoPanel div.info .btn img { width: 30px; height: 30px; }
div.itemInfoPanel div.info > div { margin-bottom: 5px; position: relative; }
div.itemInfoPanel div.info > div > p { padding-right: 30px; }
div.itemInfoPanel div.info div.title p { color: #8C6239; font-size: 30px; font-weight: bold; }
div.itemInfoPanel div.info div.categories { }
div.itemInfoPanel div.info div.locale { }
div.itemInfoPanel div.info div.tags { }
div.itemInfoPanel div.info div.tags p a { margin-right: 5px; white-space: nowrap; }

div.contentFlow { /*width: 600px;*/ }
/*div.contentFlow .masonry-brick { -webkit-box-shadow: 0 1px 3px 3px rgba(0,0,0,0.33); -moz-box-shadow: 0 1px 3px 3px rgba(0,0,0,0.33); box-shadow: 0 1px 3px 3px rgba(0,0,0,0.33); }*/
div.contentFlow div.panel { margin: 5px; overflow-wrap: break-word; background: #FFF; border: 0; border-top: 3px solid #A67C52; border-radius: 0; }
div.contentFlow div.panel:hover { background: #FBFFDF; }
div.contentFlow div.panel.col1 { width: 190px; }
div.contentFlow div.panel.col2 { width: 390px; }
div.contentFlow div.panel.col3 { width: 590px; }
div.contentFlow div.panel a.aResize { display: block; position: absolute; top: 5px; right: 0px; }
div.contentFlow div.panel a.aResize span.fontIcon i { font-size: 1.1em; }
div.contentFlow div.panel a.aResize:hover span.fontIcon i { font-size: 1.3em; }
div.contentFlow div.panel_header { background: none; border: none; text-align: left; }
div.contentFlow div.panel_header div.picture { float: left; margin-right: 5px; }
div.contentFlow div.panel_header div.picture img { width: 50px; height: 50px; }
div.contentFlow div.panel_header div.text { float: left; }
div.contentFlow div.panel_header div.text p.username { font-weight: bold; }
div.contentFlow div.panel_header div.text p.dateTime { color: #89919c; font-size: 11px; font-weight: normal; }
div.contentFlow div.panel_body { position: relative; text-align: left; }
div.contentFlow div.panel_body div.picture { position: relative; overflow: hidden; }
div.contentFlow div.panel_body div.picture a img {  }
div.contentFlow div.panel_body p.stress { margin: 5px 0; padding-left: 5px; clear: both; border-left: 3px solid #A67C52;}
div.contentFlow div.panel_footer { position: relative; }
/*div.contentFlow div.panel:hover div.panel_footer div.segmentControl { visibility: visible; }
div.contentFlow div.panel_footer div.segmentControl { visibility: hidden; }*/
div.contentFlow div.panel_footer div.segmentControl img { width: 17px; height: 17px; }
div.contentFlow div.panel_footer div.segmentControl > div > div { width: 50%; }
div.contentFlow div.panel_footer div.segmentControl > div > div:first-child.selected { background: #BBDD4A; }
div.contentFlow div.panel_footer div.segmentControl > div > div:last-child.selected { background: #EE531C; }
div.contentFlow .attitude span.fontIcon i { padding: 1.5px 5px; margin: 0; border-left: 3px solid #A67C52;  }

.navlist { margin: 0; padding: 0; list-style: none; }
.navlist li { display: inline-block; }
.navlist a { padding: 5px 2.5px; display: inline-block; color: #666; }
.navlist a.highlighted { font-weight: bolder; color: #333; }
.navlist a.highlighted:before { content: '* '; color: #841437; }
.navlist a.active { color: #000; border-bottom: 2px solid #841437; }
.navlist a:hover:not(.active) { text-decoration: underline; }

/*************************************SpecificPage*************************************/

/* .bg-nav-active */
.bg-nav-active { /*display: none;*/ position: absolute; top: 0; left: -30px; right: 0; bottom: 0; width: 100%; height: 100%; padding: 0 30px; opacity: 0.7; opacity: 0; } .bg-nav-active { background: #4DC3C9 !important; /* Old browsers */
                 background: -moz-linear-gradient(left,  #4679BE 0%, #4DC3C9 100%) !important; /* FF3.6+ */
                 background: -webkit-gradient(linear, left, right, color-stop(0%,#4679BE), color-stop(100%,#4DC3C9)) !important; /* Chrome,Safari4+ */
                 background: -webkit-linear-gradient(left,  #4679BE 0%,#4DC3C9 100%) !important; /* Chrome10+,Safari5.1+ */
                 background: -o-linear-gradient(left,  #4679BE 0%,#4DC3C9 100%) !important; /* Opera 11.10+ */
                 background: -ms-linear-gradient(left,  #4679BE 0%,#4DC3C9 100%) !important; /* IE10+ */
                 background: linear-gradient(to right,  #4679BE 0%,#4DC3C9 100%) !important; /* W3C */
                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4679BE', endColorstr='#4DC3C9',GradientType=0 ) !important; /* IE6-9 */ }
.bg-nav-active { background: #FFF url('../Image/bg-pattern-grid.png') repeat !important; border-radius: 3px; }
.bg-nav-active { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }
.bg-nav-active-arrow { display: none; position: absolute; left: 100%; top: 15px; height: 40px; width: 40px; overflow: hidden; z-index: 1; }
.bg-nav-active-arrow:after {width: 30px; height: 30px; content: ""; margin-top: 5px; margin-left: -16px; position: absolute; background: #4DC3C9; box-shadow: 6px 5px 9px -9px black; 
                         -webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg); transform: rotate(45deg); }

/* .ui-nav-vertical */
.ui-nav.ui-nav-vertical { background: #1571BC !important; /* Old browsers */
                 background: -moz-linear-gradient(top,  #58D0F3 0%, #1571BC 100%) !important; /* FF3.6+ */
                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58D0F3), color-stop(100%,#1571BC)) !important; /* Chrome,Safari4+ */
                 background: -webkit-linear-gradient(top,  #58D0F3 0%,#1571BC 100%) !important; /* Chrome10+,Safari5.1+ */
                 background: -o-linear-gradient(top,  #58D0F3 0%,#1571BC 100%) !important; /* Opera 11.10+ */
                 background: -ms-linear-gradient(top,  #58D0F3 0%,#1571BC 100%) !important; /* IE10+ */
                 background: linear-gradient(to bottom,  #58D0F3 0%,#1571BC 100%) !important; /* W3C */
                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58D0F3', endColorstr='#1571BC',GradientType=0 ) !important; /* IE6-9 */}
.ui-nav.ui-nav-vertical { padding: 20px 10px;  background: #E8E8E8 !important; border-radius: 15px; }
.ui-nav.ui-nav-vertical { padding-bottom: 40px; background-image: url('../Image/deco-house-white.png') !important; background-repeat: no-repeat !important; background-position: bottom right !important; background-position-x: 80% !important; }
.ui-nav.ui-nav-vertical a { color: #5D5D5D; text-shadow: 0 0 3px #ddd; }
/* super list */
.ui-nav.ui-nav-vertical > ul > li { padding: 5px 0; }
.ui-nav.ui-nav-vertical > ul > li > a { color: #9A3B80; border-bottom: 1px solid #D2D3D4; letter-spacing: 5px; }
.ui-nav.ui-nav-vertical > ul > li.active .bg-nav-active { /*display: block;*/ opacity: 0.7; }
/* sub list */
.ui-nav.ui-nav-vertical > ul ul { margin-top: 5px; }
.ui-nav.ui-nav-vertical > ul ul li { line-height: normal; }
.ui-nav.ui-nav-vertical > ul ul li a { font-size: 0.9em; padding-top: 5px; padding-bottom: 5px; }
.ui-nav.ui-nav-vertical > ul ul li a.active { color: #211986; }
.ui-nav.ui-nav-vertical > ul ul li:hover a { color: #F5C425 !important; background: none; }

/* .ui-panel-main */
.ui-panel-main { margin-left: 40px; background: #FFF; border-radius: 15px; box-shadow: 0px 0px 25px -5px #555; }
.ui-panel-main.ui-panel-main-solo { margin-left: 0; padding-bottom: 100px; background: #fff url('../Image/deco-house-purple.png') no-repeat; background-position: bottom right; background-position-x: 90%; }
.ui-panel-main > .padding { padding: 20px 25px; }
.ui-panel-main .ui-document h2 { color: #1788C1; }
.ui-panel-main .ui-document p { text-align: justify; }
.ui-panel-main .ui-panel-container > .ui-panel > .padding { padding: 0 10px; }
.ui-panel-main .ui-panel-container-d2 > .ui-panel > .padding { padding: 0 12.5px; }
.ui-panel-main .ui-panel-container > .ui-panel:first-child > .padding { padding-left: 0; }
.ui-panel-main .ui-panel-container > .ui-panel:last-child > .padding { padding-right: 0; }
.ui-panel-main .ui-panel-container-d3 > .ui-panel > .padding { padding: 0; padding: 0 7px; }
.ui-panel-main .ui-panel-container-d3 > .ui-panel:first-child > .padding { padding: 0; padding-right: 14px; }
.ui-panel-main .ui-panel-container-d3 > .ui-panel:last-child > .padding { padding: 0; padding-left: 14px; }

.ui-logolist { padding: 0 !important; margin: 0; list-style: none; text-align: left; }
.ui-logolist li { margin: 10px !important; display: inline-block; }
.ui-logolist li img { max-height: 65px; }

#page-waterIonizationService #tab3 .ui-fancybox-video img,
#page-pipeCleaningService #tab3  .ui-fancybox-video img { border-radius: 3px; }

.deco-title-yellow { background: url('../Image/deco-title-yellow-left.png') left,  url('../Image/deco-title-yellow-right.png') right; }
.deco-title-yellow > * { font-size: 1.25em; padding: 15px 30px 15px 15px !important; background: url('../Image/deco-title-yellow-middle.png') repeat-x; background-size:auto 100%; }
.deco-title-purple { background: url('../Image/deco-title-purple-left.png') left,  url('../Image/deco-title-purple-right.png') right; }
.deco-title-purple > * { background: #C13F9D; }
.deco-title-green { background: url('../Image/deco-title-green-left.png') left,  url('../Image/deco-title-green-right.png') right; }
.deco-title-green > * { background: #00C823; }
.deco-title-turq { background: url('../Image/deco-title-turq-left.png') left,  url('../Image/deco-title-turq-right.png') right; }
.deco-title-turq > * { background: #00A9B9; }
.deco-title-blue { background: url('../Image/deco-title-blue-left.png') left,  url('../Image/deco-title-blue-right.png') right; }
.deco-title-blue > * { background: #2745FF; }
[class*="deco-title-"] { padding: 0 30px; display: inline-block; background-size:auto 100%; background-repeat: no-repeat; }
[class*="deco-title-"] > * { padding: 5px; color: #FFF; }

.deco-leaf { margin-top: 10px !important; padding-left: 30px; position: relative; }
.deco-leaf > * { position: relative; z-index: 1; }
.deco-leaf > img { width: 60px; position: absolute; top: -10px; left: -10px; z-index: 0; }
.deco-leaf > h1 { background: none !important; color: #FFF; text-shadow: 0 0 10px #555; }