/*******************************************

        CSS Document for Sage
        
        CONTENTS
        1. Content Positioning
        2. Main Navigation
        3. Typography
        4. Video PopUp
        5. Footer

********************************************/
*{
	margin: 0px;
    padding: 0px;
}
body {
        font-family:Helvetica, Arial, sans-serif;
        font-size:small;
        color:#666666;
        
}

a {
        font-weight:bold;
        color:#666666;
        text-decoration:none;
        outline: none;
}

a:hover {
        color:#004632;
}

img {
        border:none;
}

.divider {
        clear:both;
        margin:auto;
        padding-top:80px;
        margin-bottom:0px;
        background-image:url(../images/divider.gif);
        background-repeat:no-repeat;
        background-position:center;
        width:852px;
        height:1px;
}

input{
        background-image:url(../images/input.gif);
        background-repeat:no-repeat;
        width:377px;
        height:27px;
        border:none;
        text-indent:10px;
        padding-top:0px;
        margin-top:2px;
        margin-bottom:15px;
}
.select-list {
        background-image:url(../images/input.gif);
        background-repeat:no-repeat;
        width:377px;
        height:27px;
        border:none;
        padding-top:2px;
        margin-top:2px;
        margin-bottom:15px;
}
select{
	width:360px;
    height:22px;
    border:none;
    color: #666666;
    margin-left: 10px;
}

#button {
        float:right;
         width:80px;
         height:30px;
        background-image:none;
        margin-right:55px;
}

#overlay { 
        background: url('../images/trans.png') repeat-y;
}
form #formErroMsg {
	display: none;
	color: #ff0000;
	float: left;
	width: 200px;
}
form strong.invalid{
	border: none;
}
form .invalid{
	border: none;
	color: #ff0000;
}

/******************************************** 1. Content Positioning ********************************************/

#wrapper {
        margin: 0px auto;
        width:960px;
}

#header {
        width:100%;
        height:135px;
}

#logo {
        position:absolute;
        margin-top:35px;
        margin-left:10px;
        width:360px;
        height:40px;
}

#mainBoxHome {
        margin:auto;
        width:960px;
        height:586px;
        background-image:url(../images/boxBgHome.jpg);
        background-repeat:no-repeat;
        margin-bottom:15px;
}

#mainBox {
        margin:auto;
        width:960px;
        background:url('../images/boxBgBottom.jpg') no-repeat bottom left;
		overflow: hidden;
		padding-bottom: 20px;
}
#mobile{
		display: none;
}
#mainBox #topWrapper {
	background-image:url('../images/boxBgTop.jpg');
		background-repeat:no-repeat;
        margin-bottom:0px;
		min-height:580px;}

/*#mainBox #caseStudiesContent {display:none;}*/

#mainBox2 {
        margin:auto;
        width:960px;
        height:1130px;
        background-image:url(../images/boxBg2.jpg);
        background-repeat:no-repeat;
        margin-bottom:25px;
}

#hdrMain {
        margin: auto;
        padding-top:35px;
        width:850px;
        height:93px;
        background: url(../images/hdrMain.gif) no-repeat center center; 
        text-align: center;
}
#hdrMain h1{
	color: #fff;
	height: 15px;
	margin-top: 30px;
}
#hdrText {
        margin:auto;
        text-align:center;
        padding-top:0px;
        width:689px;
        height:40px;
        color:#FFFFFF;
		line-height:15.6px;
}

/* Table Departments + Social */

#tableStyled, #tableSocial {
        height:auto;
        margin-bottom:20px;
        width:100%;
        border:0;
        font-size:90%;
		margin-left: auto;
		margin-right: auto;
	    list-style: none;
}
#tableSocial{
	overflow: hidden;
	margin-bottom: 20px;
}
#tableStyled li, #tableSocial li{
	float: left;	
}
#tableSocial li{
	width: 25%;
}
#tableSocial li a{
	margin-left: 40px;
	display: block;
}	
#tableStyled{
	width: 900px;
}
#tableStyled li{
	width: 210px;
	margin-right: 15px;
}
#tableStyled td, #tableSocial td {
        vertical-align:top;
        padding:15px;
        width:25%;
		position:relative;
		padding-bottom:0px;
}
#tableStyled .linkRow td {padding:0px 15px;}

#tableStyled p {line-height:15px;}


/* Page 02 Table (Case Studies) */

#caseStudies {
        height:auto;
        width:95%;
        border:0;
        font-size:90%;
        list-style: none;
}
#caseStudies li{
	display: block;
	float: left;
	width: 440px;
}
#caseStudies li .cell-left{
	float: left;
	width: 150px;
}
#caseStudies li .cell-right{
	float: left;
	width: 290px;
}
#whatLeft {
        float:left;
        padding-left:15px;
        width:47%;
        height:auto;
        min-height:492px;
        padding-top: 10px;
}

#whatRight {
        float:right;
        width:45%;
        height:auto;
        font-weight:bold;
		line-height:25px;
}

#contactHome {
        float:left;
        width:100%;
        height:120px;
        padding-top:200px;
        font-size:90%;
}

#social {
        width:100%;
        height:40px;
        padding-left:15px;
}

#pagesBoxContent {
        width:410px;
        padding-left:35px;
        color:#FFFFFF;
		line-height:15.6px;
		height: 500px;
}
#pagesBoxContent p{
	margin-top: 6px;
	margin-bottom: 6px;
	font-weight:normal;
}
#pagesBoxContent p a{
	color: #004632;
	font-weight: bold;

}
#pagesBoxContent p a:hover{
	color: #fff;
	font-weight: bold;
}
#vidBg {
        position:absolute;
        margin-left:464px;
        margin-top:97px;
        width:473px;
        height:499px;
}

#featuredTxt {
        float:left;
        width:440px;
        height:auto;
        margin-left:15px;
        margin-top:332px;
        color:#666666;
		line-height:15.6px;
}

#video {
        position:inherit;
        margin-left:7px;
        margin-top:12px;
        width:450px;
        height:300px;
}

#caseStudiesContent {
        margin:auto;
        padding-top:0px;
        height:auto;
        width:100%;
		padding-left:20px;
		padding-bottom:10px;
}

#contactS {
		line-height:25px;
		
}

/******************** Carousel ********************/

#carousel {
        width:955px;
        height:380px;
        margin-top:20px;
}

#carousel span:hover {
        position:absolute;
        z-index:5;
}

.play {
        position:absolute;
        margin-left:175px;
        width: 70px;
        height: 70px;
        margin-top:100px;
        z-index:1;
}

.vidTitle {
	margin-top:-70px;
	padding-left:20px;
    font-family:FocoLightRegular, Helvetica, Arial, sans-serif;
    font-size:160%;
    font-weight:lighter;
	color:#FFFFFF;
    z-index:1;
}

#videoNav {
	position:absolute;
	margin-top:-45px;
	margin-left:430px;
	list-style:none;
	z-index:2;
}

#videoNav li {
	float:left;
	padding:4px;
}

#videoNav li a {
	display:block;
	height:10px;
	width:11px;
	overflow:hidden;
	cursor: pointer;
}

#videoNav li a:hover {
	text-indent:-17px;
}

/******************************************** 2. Main Navigation ********************************************/

#nav {
        list-style:none;
        position:absolute;
        margin-left:128px;
        margin-top:93px;
        width:815px;
        height:40px;
}

#nav li {
        float:left;
}

#nav li a {
        display:block;
        padding:14px;
        text-shadow:#FFFFFF 1px 1px 1px;
		cursor:pointer;
}

#nav li a:hover {
        color:#FFFFFF;
        text-shadow:none;
}

#navHome a {
        text-indent:25px;
        width:88px;
        background-image:url(../images/navHome.jpg);
}

#navHome a:hover, #home #navHome a {
        color:#FFFFFF;
        text-shadow:none;
        background-image:url(../images/navHome-f2.gif);
}

#navConstruct a {
        text-indent:30px;
        width:142px;
        background-image:url(../images/navConstruct.jpg);
}

#navConstruct a:hover, #construction #navConstruct a {
        color:#FFFFFF;
        text-shadow:none;
        background-image:url(../images/navConstruct-f2.gif);
}

#navCRM a {
        text-indent:24px;
        width:82px;
        background-image:url(../images/navCRM.jpg);
}

#navCRM a:hover, #CRM #navCRM a {
        color:#FFFFFF;
        text-shadow:none;
        background-image:url(../images/navCRM-f2.gif);
}

#navERP a {
        text-indent:26px;
        width:82px;
        background-image:url(../images/navERP.jpg);
}

#navERP a:hover, #ERP #navERP a {
        color:#FFFFFF;
        text-shadow:none;
        background-image:url(../images/navERP-f2.gif);
}

#navHR a {
        text-indent:24px;
        width:126px;
        background-image:url(../images/navHR.jpg);
}

#navHR a:hover, #HR #navHR a {
        color:#FFFFFF;
        text-shadow:none;
        background-image:url(../images/navHR-f2.gif);
}        

#navContact a {
        text-indent:24px;
        width:126px;
        background-image:url(../images/navHR.jpg);
}

#navContact a:hover, #contactus #navContact a {
        color:#FFFFFF;
        text-shadow:none;
        background-image:url(../images/navHR-f2.gif);
}   

/******************************************** 3. Typography ********************************************/

@font-face {
        font-family: 'FocoBold';
        src: url('../fonts/foco-bold-webfont.eot');
        src: local('?'), url('../fonts/foco-bold-webfont.woff') format('woff'),
url('../fonts/foco-bold-webfont.ttf') format('truetype'),
url('../fonts/foco-bold-webfont.svg#webfont') format('svg');
        font-weight: normal;
        font-style: normal;
}

@font-face {
        font-family: 'FocoBlackRegular';
        src: url('../fonts/focoblack-regular-webfont.eot');
        src: local('?'), url('../fonts/focoblack-regular-webfont.woff') format('woff'),
url('../fonts/focoblack-regular-webfont.ttf') format('truetype'),
url('../fonts/focoblack-regular-webfont.svg#webfont') format('svg');
        font-weight: normal;
        font-style: normal;
}

@font-face {
        font-family: 'FocoLightRegular';
        src: url('../fonts/focolight-regular-webfont.eot');
        src: local('?'), url('../fonts/focolight-regular-webfont.woff') format('woff'),
url('../fonts/focolight-regular-webfont.ttf') format('truetype'),
url('../fonts/focolight-regular-webfont.svg#webfont') format('svg');
        font-weight: normal;
        font-style: normal;
}

@font-face {
        font-family: 'FocoRegular';
        src: url('../fonts/foco-regular-webfont.eot');
        src: local('?'), url('../fonts/foco-regular-webfont.woff') format('woff'),
url('../fonts/foco-regular-webfont.ttf') format('truetype'),
url('../fonts/foco-regular-webfont.svg#webfont') format('svg');
        font-weight: normal;
        font-style: normal;
}

h1 {
        font-family:FocoLightRegular, Helvetica, Arial, sans-serif;
        font-size:235%;
        font-weight:lighter;
        color:#004632;
        margin-bottom:12px;
}
h1 a {font-weight:normal;
color:#004632;}

h2 {
        margin:auto;
        font-family:FocoLightRegular, Helvetica, Arial, sans-serif;
        font-size:330%;
        font-weight:lighter;
        color:#004632;
        width:100%;
        height:40px;
        padding: 0px 15px 15px 15px;
        margin-bottom:14px;
		clear:both;
}

h3 {
        font-family:FocoBold, Helvetica, Arial, sans-serif;
        font-size:180%;
        font-weight:lighter;
        color:#004632;
        margin-bottom:10px;
}

h4 {
        margin:auto;
        font-family:FocoLightRegular, Helvetica, Arial, sans-serif;
        font-size:350%;
        font-weight:lighter;
        color:#FFFFFF;
        width:100%;
        height:40px;
        padding-top:50px;
        margin-bottom:17px;
}

.red {
        color:#FE0000;
}

.subHdr {
        font-family:FocoBold, Helvetica, Arial, sans-serif;
        font-size:160%;
        color:#004632;
        margin-top:6px;
        margin-bottom:6px;
		line-height:120%;
}

.subHdrMore {
        font-family:FocoBold, Helvetica, Arial, sans-serif;
        font-size:160%;
        color:#004632;
        margin-top:15px;
        margin-bottom:15px;
		line-height:120%;
}

.darkGrn {
        font-weight:bold;
        color:#004632;
        margin-bottom:2px;
        margin-top:2px;
}

.mediumGreen {
        font-family:FocoBold, Helvetica, Arial, sans-serif;
        font-size:160%;
        font-weight:lighter;
        color:#004632;
        margin-top:10px;
        margin-left:15px;
}

.greenArrow {
		line-height:19px;
		margin: 3px 0px 10px 5px;
}

.greenArrow a:hover {
        color:#79BD00;
}

.greenWhite a {
        color:#FFFFFF;
}

.greenWhite a:hover {
        text-decoration:underline;
}

.greyLight a {
        color:#666666;
        font-size:90%;
}

.greyLight a:hover {
        text-decoration:underline;
}
.table-body{
	height: 90px;
}
/******************************************** 4. Video PopUp ********************************************/

#videoPopUp {
        width:680px;
        height:600px;
		
}

#videoDisplay {
        margin:auto;
        width:640px;
        height:380px;
}

.videoTitle {
        font-family:FocoBold, Helvetica, Arial, sans-serif;
        font-size:165%;
        font-weight:lighter;
        color:#004632;
        margin-top:25px;
        margin-left:20px;
}

.videoSubT {
        font-family:FocoLightRegular, Helvetica, Arial, sans-serif;
        font-size:165%;
        font-weight:lighter;
        color:#676767;
        margin-top:10px;
        margin-left:20px;
}

#videoText {
        font-size:105%;
        width:40%;
        margin-left:20px;
        margin-top:10px;
        color:#666666;
}

.vidTxt {
        font-family:FocoBold, Helvetica, Arial, sans-serif;
        font-size:122%;
        color:#79BD00;
        margin: 3px 0px 0px 0px;
        
}
#featuredTxt .vidTxt {
       margin: 3px 0px 15px 0px;       
}
.vidCpy {
        margin: 3px 0px 0px 0px;
        
}

#pdfBox {
        position:absolute;
        margin-left:350px;
        margin-top:435px;
        width:310px;
        height:105px;
        background-color:#F3F3F3;
}

#pdfIcon {
        position:absolute;
        margin-left:20px;
        margin-top:15px;
        background-image:url(../images/pdf.gif);
        height:45px;
        width:38px;
}

#pdfText {
        position:absolute;
        margin-top:20px;
        margin-left:70px;
        color:#666666;
		line-height:20px;
}

/******************************************** 5. Footer ********************************************/

.contactList {
	list-style-type:none;
	margin:0px 0px 0px 0px;
	padding:0px;

}

.contactList li {
	line-height:18px;
	}

#contact-form p {
	margin:0px;
	}

#footer {
	    clear: both;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        width:960px;
        height:27px;
        background-image:url(../images/footerBg.gif);
        font-size:80%;
        text-align:center;
        padding-top:15px;
        color:#999999;
}
#footer ul{
	list-style: none;
	margin-left: auto;
	margin-right: auto;
	width: 550px;
	overflow: hidden;
}
#footer ul li{
	float: left;;
}
#footer a {
        margin-left:20px;
        margin-right:20px;
        color:#999999;
        font-weight:normal;
        font-size: 11px;
}

#footer a:hover {
        color:#666666;
}

#wrapper .ftn{
	float:none;
}
#wrapper .ftl{
	float:left;
}
#wrapper .ftr{
	float:right;
}

#vidBg #whatRight {
width:433px;
padding-top: 15px;
}

body#contactus #mainBox #topWrapper {background-image: url(../images/boxBgTopContact.jpg);}
body#contactus #pagesBoxContent{color:#666666;height:710px;}
body#contactus #pagesBoxContent p a{color:#666666;}
body#contactus #pagesBoxContent p a:hover{color:#004632;}
body#contactus h4{margin:auto auto 28px;}
#pagesBoxContent div.contactlist li{list-style:none;font-size:10px;}
#pagesBoxContent div.contactlist li.box{width:auto;padding-right:20px;padding-top:10px;float:left;}