@charset "UTF-8";
/* CSS Document */

html, body, h1, h2, h4, h5, div, a, ul, li, p {padding: 0; margin: 0; display: block; font-family:Arial, Helvetica, sans-serif; list-style-type: none; text-decoration: none;}
body {border-left: 10px solid #666666; border-right: 10px solid #666666;margin-left: 0px; margin-right: 0px;}
.ts, .imagine, .managers {width: 100%; position: relative;}
.content {margin: auto; max-width: 1600px; min-width: 800px; width: 70%; padding: 10px; position: relative;}


/*////////////// zone 0 header ///////////////*/
.hometopnav {height: 82px;display: block; margin-top: 0px;border-top: 10px solid #666666;}
        .hometopnav .nav {position: absolute; right: 20px; top: 30px; z-index: 300;}
		.hometopnav .nav ul { list-style-type: none; padding: 0px; margin: 0px;}
		.hometopnav .nav ul li {float: left; list-style-type: none; padding: 0px; margin: 10px 0px 0px 0px; width: auto; display:block;}
		.hometopnav .nav ul li a {color: #000; font-family:Arial, Helvetica, sans-serif; font-size: 14px; padding: 5px 15px 5px 15px; margin: 0px; text-decoration: none;}
        .hometopnav .nav ul li:first-child a { border-right: 1px #dadbda dotted;}
        
.container {margin: auto; max-width: 2000px; width: 85%; padding: 10px; position: relative;}       
#logo {
    height: 46px;
    width: 250px;
    background-image: url("../images/timesensible_logo_hor_large.png");
    background-repeat: no-repeat;
    position: absolute;
    z-index: 500;
    margin: auto;
    top: 35px;
    left: 0px;
}

/*////////////// zone 1 TS ///////////////*/
.ts {height: 530px; z-index: 200;}
.tsbg { background-image:url("../homeimg/multiman.png");background-repeat: no-repeat; background-size: contain;height: 670px;width: 620px; margin: -70px 0px 30px 15%;}
.statments { width: 250px; position: absolute; right: 2%; bottom: 170px;}
.statments li {font-family: "arial black", Arial, helvetica; font-weight: bold; font-size: 28px; color:#666;line-height: 1.2;}
.statments .tag {font-family:  Arial, helvetica; font-weight: normal; color:#FF6600; font-size: 18px; margin-top: 10px;}
.someone { width: 280px; position: absolute; left: 0; bottom: 455px; font-size: 44px; color: #ccc;}




/*////////////// zone 2 imagine ///////////////*/
.imagine {height: 586px;background-image:url("../homeimg/greenbg.jpg") ;background-repeat: no-repeat; background-size: 100% auto; background-position: top; margin-top: -50px; z-index: 100; background-color:#82bd72; overflow: hidden;}
.imagine .content {height: 566px; position: relative;}
.imaginetxt {position: absolute; background-image:url("../homeimg/imagine.png");background-repeat: no-repeat; background-size: contain; height: 199px; width: 396px; left: -200px; bottom: -200px; transition: all 1.5s ease;}
.phoneimg { background-image:url("../homeimg/iphone-email.png");background-repeat: no-repeat; background-size: contain; height: 484px; width: 441px; position: absolute; bottom: -484px; right: -441px; transition: all 1.5s ease;}

.on .imaginetxt { height: 199px; width: 396px; left: 0px; bottom: 200px;}
.on .phoneimg { height: 484px; width: 441px; bottom: 0px; right: 0px;}




/*////////////// zone 3 value add ///////////////*/
.managers {}
.managers h1 {color: #FF4D00; font-weight: normal; text-align: center; font-size: 28px; margin: 40px auto;}

.managers .content ul {height: 334px;border-bottom: 3px solid #ff4D00;}
.managers .content ul li {width: 33%; height: 334px; float: left;}
.managers .content ul li a {font-size: 22px; padding: 247px 33px 50px 33px; background-repeat: no-repeat; background-size: 70%; background-position: top center; transition: all 1s ease;}
.managers .content ul li a:hover { background-size: 75%;}
.managers .content ul li a span {font-family: "arial black", arial; font-size: 36px; display: block; margin-top: -15px;}
.tab1 .latency {border-top: 3px solid #ff4D00;border-left: 3px solid #ff4D00;border-right: 3px solid #ff4D00;}
.tab1 .latency a {background-color: #fff;}

.tab2 .strategy {border-top: 3px solid #9933cc;border-left: 3px solid #9933cc;border-right: 3px solid #9933cc;}
.tab2 .strategy a {background-color: #fff;}
.managers .content .tab2 ul {border-bottom: 3px solid #9933cc;}

.tab3 .response {border-top: 3px solid #006600;border-left: 3px solid #006600;border-right: 3px solid #006600;}
.tab3 .response a {background-color: #fff;}
.managers .content .tab3 ul {border-bottom: 3px solid #006600;}

.latency a {color: #ff4D00;background-image:url(../homeimg/latency2.png);}
.strategy a {color: #9933cc;background-image:url(../homeimg/strategy2.png);}
.response a {color: #006600;background-image:url(../homeimg/response2.png);}

.latency {background-color: #fdd2ad;}
.strategy {background-color: #E2C4F0;}
.response {background-color: #D0ECD0;}

/*//////////////// charts for workflow ///////////////////*/
.managers h2 {margin: 50px 0 10px 0;}
.wf-wrapper {display:inline-block; width: 65%;}
.s-wrapper {display:inline-block; width: 45%;}
p.explan {display:inline-block; width: 26%; height: 200px; margin-left: 8%; float: right; font-size: 14px;}
.tab2 .explan { width: 45%; float: right;}
.workflow img {width: 100%;}
.s-wrapper img {width: 100%;}
.commenttop, .commentbottom {border: 1px solid #666;padding: 10px;margin-left: 13%;}
.commenttop {margin-bottom: 10px;}
.commentbottom {margin-top: 10px;}

.wf1 .commenttop, .wf1 .commentbottom {background-color:#FFBEAF; border-color: #F04A0B;}
.wf2 .commenttop, .wf2 .commentbottom {background-color:#B5F1AD; border-color: #009933;}

.tab1content, .tab2content, .tab3content {display: none;}

.tab1 .tab1content, .tab2 .tab2content, .tab3 .tab3content {display: inline;}

.tab2 h4 {color: #9933cc;margin-bottom: 10px;}
.tab2 p {margin-bottom: 15px; font-size: 14px;}
.tab2 .privacy { font-size: 10px; color:#999999;}

.tab3 .explan {
    float: left;
    width: 45%;
    margin: 0 8% 0 0;
}

/*//////////////// homefooter ///////////////////*/
.homefooter {background-color: #666666; border-top: 10px solid #ccc; margin-top: 100px; padding-bottom: 30px}
.homefooter .content {margin: auto; margin-top: 40px; margin-bottom: 40px; max-width: 2000px; width: 85%; padding: 10px; position: relative;}
span[class^="zone"] {display: inline-block; vertical-align: top;}
span[class^="zone"] H4 {font-weight: normal; font-size: 24px; color: #999; Border-bottom: 1px solid #999; margin-right: 40px;}
span[class^="zone"] ul li a {font-weight: normal; font-size: 14px; color: #C9C9C9;}
.zone1 {width: 35%;}
.zone1 a {float: left; margin: 10px 10px 50px 0px; padding: 10px; background-color: #FE9001; color: #fff;}
.zone2 {width: 15%;}
.zone3 {width: 45%; padding-left: 15px; text-align: right; }
.homefooter .zone1 h4, .zone1 span {color: #FE9001;}
.zone1 span { font-size: 18px; display: block; margin: 10px 0 -2px 0;}
.zone1 li { color: #C9C9C9;}
.zone2 ul {margin: 10px 0 20px 0}
.zone2 .share li a {width: 30px; height: 30px; background-color: #999; padding: 3px;}
.zone2 .share li {float: left;margin: 0px 3px 10px 0;}


.zone3 i {
    display: block;
    opacity: 0;
    width: 75%;
    float: right;
    margin-bottom: 70px;
    margin-top: 25px;
    color: #999;
}
/*//////////////// next and previous btns ///////////////////*/
#tabcontrol {postion: relative;}
.nextbtn {width: 150px; height: 150px; background-color: #000000; border-radius: 75px; position: absolute; bottom: 0px; right: -250px; opacity: .1; transition: all .5s ease;}
.nextbtn:hover { opacity: .3;}
.nextbtn img {width:100px; position: 20px 20px; position: relative; top: 20px; left: 23px;}

.tab1 .nextbtn {bottom: -70px;right: 150px;}
.tab2 .nextbtn {bottom: -70px;right: 150px;}
.tab3 .nextbtn {bottom: -70px;right: 150px;}

/*//////////////// homepage footer ///////////////////*/
.footer {display:block; position: relative; left: 0px; bottom: 0px; height: 12px; font-family:Arial, Helvetica, sans-serif; font-size:9px; background-color:#666666; color:#999999; width: 100%;}
.footer a { color:#999999; display: inline;}