Solutions

• What
• Biz Dashboard
• Architecture
• Samples
• Analytics
• Features

Introduction

#grad1 {
height: 50px;
background: -webkit-linear-gradient(#DFBF6D, #F1DCA5); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#DFBF6D, #F1DCA5); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#DFBF6D, #F1DCA5); /* For Firefox 3.6 to 15 */
background: linear-gradient(#DFBF6D, #F1DCA5); /* Standard syntax (must be last) */
}

* {font-family:arial; margin:0; padding:0;}
.logo1 {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
#header-page #nav {
//position: fixed;
z-index: 10000;
// left: 0;
//top: 0;
width: 100%;
//background: #fff;
// background: rgba(255, 255, 255, 0.95);
// height: 100px;
// line-height: 9em;
box-shadow: 0 0 0.15em 0 rgba(0, 0, 0, 0.1);
text-align:center;
text-transformation:upper;
background-color: #dfbf6d ;
}

#nav {
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em; font-family: Corbel, Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
}

.menu-sub {//background:#00a;
color:#fff; height:100px;
line-height:40px;letter-spacing:1px;
width:100%;}
.menu-sub #nav ul li {

}

.content-sub {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content {padding:10px;}
.content p {margin-bottom:20px;}
#nav ul li a{color: #625129 !important;}
#nav ul li a:hover{color: #625129 !important;}
/*
section#one .content {float: right;
width: 60%}
#one .content header { float: right; }
#one .content p { float: right;} */

.menu-sub nav a:hover,
.menu-sub nav a.active {
color: green
}

// css for the light-box
.cplightbox {
position:fixed;
top:50%;
left:50%;
display:inline-block;
}
.cplightbox1 {
background-color:#FFF;
padding: 5px;
height: 475px;
width: 919px;
margin-left: -145px;
}
.cplightbox1 img {
cursor:pointer;
// max-width:440px;
// max-height:380px;
max-width:100% !important;
max-height:100% !important;
}
.cpoutter {
position:fixed;
top:0px;
left:0px;
filter:alpha(opacity=0);
/* for IE */
opacity: .0;
width:100%;
height:100%;
background:rgba(204, 204, 204, 0.5);
z-index:70;
display:none;
text-align:center;
}

//Style of the grids---------
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 40.2%;
}

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}

@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
//End of the Grids----------

//jquery code for the light boxs.
jQuery(".content-sub img").click(function () {
var img_path;
if ($(this).parent('a').length) {

img_path = $(this).parent('a').prop('href');
} else {
img_path = $(this).attr('src');
}

jQuery(".cplightbox1").html(jQuery("").attr("src", img_path));
jQuery(".cpoutter").css('display', 'block');
jQuery('.cpoutter').animate({
'opacity': '1'
});

var cplightbox = document.getElementsByClassName('cplightbox')[0];
var cplightbox1 = document.getElementsByClassName('cplightbox1')[0];
var cpoutter = document.getElementsByClassName('cpoutter')[0];

// Sometimes cplightbox1 width/height returns 0, if so, fallback and use the containing div
if ($(cplightbox1).width() > 0 && $(cplightbox1).height() > 0) {
cplightbox.style.marginLeft = + $(cplightbox1).width() / 4 + "px";
cplightbox.style.marginTop = + $(cplightbox1).height() / 4 + "px";
console.log(1);
console.log($(cplightbox1).width());
console.log($(cplightbox1).height());
} else // Something was 0 (width or height), so try and grab them from the containing div
{
setTimeout(function () {
cplightbox.style.marginLeft = + $(cplightbox1).width() / 4 + "px";
cplightbox.style.marginTop = + $(cplightbox1).height() / 4 + "px";
console.log(2);
console.log($(cplightbox1).width());
console.log($(cplightbox1).height());
}, 100)
}

return false;
});
jQuery(".cpoutter").click(function () {
jQuery(".cpoutter").stop().fadeOut('medium');
});

//jQuery code to execute
// Create a clone of the menu, right next to original.
$('.menu-sub').addClass('original').clone().insertAfter('.menu-sub').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);

function stickIt() {

var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;

if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.

// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}

// Used for the scrolling of the pages

$('nav a').on('click', function() {

var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 88;

$('body,html').animate({
scrollTop: scrollPoint
}, 500);

return false;

})

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.wrapper section').each(function(i) {
if ($(this).position().top <= windscroll -80) {
$('nav a.active').removeClass('active');
$('nav a').eq(i).addClass('active');
}
});

} else {

$('nav').removeClass('fixed');
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}

}).scroll();

//display the section when scroll is there
var state = {
'#intro': false,
'#one': false,
'#two': false,
};

var parh = $('.content-sub').height();
$('.content-sub').scroll(function(e) {
$.each(['#intro', '#one', '#two'], function(i, v) {
var el = $(v);
var ot = Math.round(el.offset().top);
var ob = ot + el.height();
var threshold = 100;
var tb = parh - threshold;
if(state[v]) {
if(ot < threshold || ob > tb) {
el.animate({opacity: 0, duration: 1000});
state[v] = false;
}
} else {
if(ot > threshold && ob < tb) {
el.animate({opacity: 1, duration: 1000});
state[v] = true;
}
}
});
});

$('#intro','#one','#two').animate({opacity: 0});