body { background-color: #FFF; background-image: url(../images/cmainBG.jpg); background-repeat: repeat-x; background-position: top; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; line-height: 1.45; }

/*---------FOR IE PNG SUPPORT----------*/
img, div, a, input { behavior: url(css/iepngfix.htc); }
/*--------------------------------------*/

/*--------------TEXT STYLES-------------*/
h1 { font-size: 120%; color: #990000; margin-bottom: 10px; line-height: 1; }
h2 { color: #333; font-size: 95%; font-weight: bold; margin-bottom: 5px; line-height: 1.2; }
h3 { font-size: 170%; color: #990000; line-height: 1; margin-bottom: 25px; margin-left: 12px; }
h4 { font-weight: bold; font-size: 125%; line-height: 1; margin-bottom: 10px; color: #FFF; text-shadow:#333 0 1px 2px; }
h5 { font-size: 200%; font-weight: normal; color: #FFF; text-align: center; display: block; text-shadow: #000 2px 2px 4px; }
.mainText { font-size: 75%; color: #474747; margin-bottom: 10px; margin-right: 25px; list-style-image: url(../images/bulletRed.png); }
.mainText a:link, .mainText a:visited{ color: #016F9E; text-decoration:none
}
.mainText a:hover{ text-decoration:underline; }
.productSubhead { font-size: 80%; color: #FFF; text-align: center; display: block; line-height: 1.25; width: 700px; margin-right: auto; margin-left: auto; }
.mainText li { margin-bottom: 10px; }
/*--------------------------------------*/


/*-----------LAYOUT ELEMENTS------------*/
#container { width: 925px; margin-right: auto; margin-left: auto; top: 0px; }
/*----------GLOBAL HEADER-----------*/
#header { height: 100px; width: 925px; position: relative; }
#topLogo { background-image: url(../images/homeLogo.jpg); background-repeat: no-repeat; height: 67px; width: 184px; position: absolute; left: 0px; top: 20px; cursor:pointer; cursor:hand; }
#topLinks { height: 19px; top: 15px; right: 0px; position: absolute; }
#topLinks img { margin-left: 7px; }
#topLinks p { display: inline; font-size: 65%; color: #999; position: relative; top: -5px; }
#topLinks p a{ color: #999; }
#topLinks p a:hover{ color: #FFF; }
#languageEN, #languageES, #languageFR, #languageCH { font-size: 8px; color: #999; position: absolute; height: 12px; top: 4px; visibility: hidden; }
#languageEN {
	left: 873px;
}
#languageES { left: 847px; }
#languageFR { left: 872px; }
#languageCH {
	left: 898px;
}
/*---------NAV TABS---------*/

#topNav { position: absolute; height: 35px; top: 45px; right: -42px; z-index: 700; }
#topNav ul { list-style-type: none; display: inline; }
#topNav ul li { float: left; }

#topNav a.tab { background: transparent url(../images/navTabR.jpg) no-repeat scroll top right; color: #FFF; display: block; font-size: 90%; height: 35px; padding-right: 8px; /* sliding doors padding */
	text-decoration: none; text-shadow:#000 0 1px 2px; float: left; }

#topNav a.tab span { background: transparent url(../images/navTabBG.jpg) no-repeat top left; display: block; line-height: 25px; padding: 5px 4px 5px 12px; }
#topNav a.tab:hover { background-position: bottom right; outline: none; /* hide dotted outline in Firefox */
}
#topNav a.tab:hover span { background-position: bottom left;  }


/*---------SUBNAV---------*/
a:hover { cursor: pointer; }
#topNav ul li ul.subNav { position: absolute; list-style-type: none; display: block; height: 35px; margin-top: 35px; padding: 0; z-index: 200; }
#topNav ul li ul.subNav li { background: none; float: left; margin: 0; margin: 0; padding-right: 1px; display: block; }

#topNav ul li ul.subNav a.tab { background: transparent url(../images/navTabR1.png) no-repeat scroll right top; color: #FFF; display: block; font-size: 90%; height: 35px; padding-right: 7px; /* sliding doors padding */ text-decoration: none; text-shadow:#000 0 1px 2px; }

#topNav ul li ul.subNav a.tab span { background: transparent url(../images/navTabBG1.png) no-repeat left top; display: block; line-height: 25px; margin: 0; padding: 5px 8px 5px 15px; height: 25px; }
#topNav ul li ul.subNav a.tab:hover { background-position: right -35px; outline: none; /* hide dotted outline in Firefox */
}
#topNav ul li ul.subNav a.tab:hover span { background-position: left -35px;  }

/*-----------------------*/
/*------------------------------*/
/*----------------------------------*/


/*----------GLOBAL FOOTER-----------*/
#bottom { height: 75px; width: 925px; position: relative; float: left; border-top: solid #666 1px; margin-top: 5px; text-align: right; }
#bottom img { margin-top: 15px; float: left; }
#bottom p { font-size: 70%; color: #666; margin-top: 15px; }
#bottom p a:link, #bottom p a:visited, #bottom p a:active{ color: #016F9E; text-decoration:none
}
#bottom p a:hover{ text-decoration:underline; }
/*----------------------------------*/

/*---------HOMEPAGE LAYOUT----------*/
#homeMainContent { position: relative; width: 925px; float: left; }
#homeFlash { height: 301px; width: 614px; position: relative; float: left; }
#homeBanner { height: 301px; width: 287px; position: relative; right: 0px; float: right; }
#homeBanner img:first-child { margin: 0; padding: 0; margin-bottom: 7px; }
#homeCol1, #homeCol2 { float: left; width: 294px; margin-top: 25px; position: relative; }
#homeCol2 { margin-left: 25px; }
#homeCol3 { float: right; width: 288px; margin-top: 25px; position: relative; }
/*----------------------------------*/


/*-------CONTENT PAGE LAYOUT--------*/
#contentMainContent, #contentProduct, #contentProductRevo { position: relative; width: 925px; float: left; background-color: #FFF; background-repeat: no-repeat; background-position: center top; }
#contentMainContent { background-image: url(../images/contentTop.jpg); }
#contentProduct { background-image: url(../images/contentProduct.jpg); }
#contentProductRevo {
	background-image: url(../images/contentProductRev.jpg);
}
#revTop {
	background-image: url(../images/revLogo.png);
	background-repeat: no-repeat;
	background-position: left 30px;
	float: left;
	width: 420px;
	padding-top: 155px;
	position: absolute;
	left: 444px;
	color: #FFF;
}
#revTop p {
	font-size: 14px;
	line-height: 24px;
}
#revTop h1 {
	font-size: 30px;
	padding-top: 40px;
	color: #FFF;
}

/*-------contentCol01 (main content area)--------*/
#contentCol1 { float: left; width: 613px; margin-top: 25px; position: relative; margin-left: 12px; margin-bottom: 25px; margin-right: 12px; }
/* IE6 only */
* html #contentCol1{ margin-left: 10px; }
/* END */


#contentCol1 div { width: 281px; padding: 0 12px 0 12px; margin: 0; float: left; }
#contentCol1 div.consulting { width: 562px; padding: 0 12px 0 12px; margin: 0; margin-bottom: 1em; }
#contentCol1 br { clear: left; }
#contentCol1 div p { font-size: 75%; color: #333; margin-bottom: 10px; }

#contentCol1 div p a:link, #contentCol1 div p a:visited, #contentCol1 div ul li a:link, #contentCol1 div ul li a:visited{ color: #016F9E; text-decoration:none
}
#contentCol1 div p a:hover, #contentCol1 div ul li a:hover{ text-decoration:underline; }

#contentCol1 div ul { margin-bottom: 25px; list-style-image: url(../images/bulletRed.png); }
#contentCol1 div ul li { font-size: 75%; color: #333; margin-bottom: 5px; }
#contentCol1 div img { margin-bottom: 15px; }

#contentCol1 div#ice { float: none; display: block; width: auto; }
/*-------contentCol02 (side panels)--------*/
#contentCol2 { float: right; width: 262px; margin-top: 70px; position: relative; margin-right: 25px; }
/* IE6 only */
* html #contentCol2{ margin-right: 10px; }
/* END */

#contentCol2 img { margin-bottom: 1em; }

#contentCol2 span #button { margin-top: 5px; }

/*-------contentCol03 (alternate main content area - products page)--------*/
#contentCol3 { float: left; width: 900px; margin-top: 25px; position: relative; margin-left: 25px; margin-bottom: 25px; }

/* IE6 only */
* html #contentCol3{ margin-left: 10px; }
/* END */

#contentCol3 .mainText { padding-right: 25px; }

#contentCol3 div.lowerContent { width: 410px; margin-right: 35px; margin-top: 400px; float: left; }
#contentCol3 div.lowerContent2 {
	width: 410px;
	margin-right: 35px;
	margin-top: 475px;
	float: left;
}

#contentCol3 br { clear: left; }
#contentCol3 div.lowerContent  p, #contentCol3 div.lowerContent2 p { font-size: 75%; color: #333; margin-bottom: 10px; }

#contentCol3 div.lowerContent  p a:link, #contentCol3 div p a:visited{ color: #016F9E; text-decoration:none; }
#contentCol3 div.lowerContent  p a:hover{ text-decoration:underline; }

#contentCol3 div.lowerContent  ul { margin-bottom: 15px; list-style-image: url(../images/bulletRed.png); }

#contentCol3 div.lowerContent  ul li { font-size: 75%; color: #333; margin-bottom: 10px; }
#contentCol3 div.lowerContent  img { margin-bottom: 15px; }

.iconColumn01 {
	float: left;
	width: 610px;
	position: relative;
	margin: 40px 0 0 0;
}
.iconColumn01 p {
	font-size: 1.3em;
	line-height: 1.5em;
	text-align: justify;
}
.iconColumn01 h2 {
	font-size: 2em;
	font-weight: bold;
}
.iconColumn01, .iconColumn02 {
	width: 410px;
	float: left;
}
.iconColumn01 {
}
.iconColumn02 {
	margin: 20px 0 0 0
}
.iconColumn01 ul {
	list-style-type: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.iconColumn01 ul li {
	font-size: 75%;
	padding-bottom: 15px;
	height: 55px;
	display: block;
}
.iconColumn01 ul li img {
	float: left;
	margin-top: -10px;
}
.iconColumn01 ul li h3 {
	font-size: 120%;
	margin-bottom: 0px;
}
#panel {
	margin: 0;
	padding: 0;
	z-index: 1;
	float:left;
	position: absolute;
}
#device01, #device02, #device03 {
	background-image: url(../images/deviceiPhone.png);
	background-repeat: no-repeat;
	float: left;
	height: 400px;
	width: 339px;
	text-indent: -9999px;
	display:block;
}
#device01 {
	background-image: url(../images/deviceWeb.jpg);
}
#device02 {
	background-image: url(../images/deviceMobile.jpg);
}
#device03 {
	background-image: url(../images/deviceApps.jpg);
}
/*----------------------------------*/


/*-----------SIDE PANELS------------*/
#panelFree, #panelDemo, #panelDemo2, #panelUptime { display: block; height: 177px; width: 262px; text-decoration: none; margin-bottom: 15px; cursor:pointer; cursor:hand; }
#panelFree { background: transparent url(../images/panelFreedom.jpg) no-repeat scroll top left; }
#panelFree:hover { background-position: top right; outline: none; /* hide dotted outline in Firefox */
}
#panelDemo { background: transparent url(../images/panelDemo.jpg) no-repeat scroll top left; }
#panelDemo:hover { background-position: top right; outline: none; /* hide dotted outline in Firefox */
}
#panelDemo2 { background: transparent url(../images/panelDemo2.jpg) no-repeat scroll top left; }
#panelDemo2:hover { background-position: top right; outline: none; /* hide dotted outline in Firefox */
}
#panelUptime { background: transparent url(../images/panelUptime.jpg) no-repeat scroll top left; }
#panelUptime:hover { background-position: top right; outline: none; /* hide dotted outline in Firefox */
}
#panelCareers { background: transparent url(../images/buttonCareers.jpg) no-repeat scroll top left; display: block; height: 48px; width: 262px; text-decoration: none; margin-bottom: 15px; cursor:pointer; cursor:hand; }
#panelCareers:hover { background-position: bottom left; outline: none; /* hide dotted outline in Firefox */
}

.panelGray { background: transparent url(../images/panelGrayBottom.jpg) no-repeat scroll bottom left; color: #999; display: block; font-size: 65%; line-height: 1.2; color: #333; width: 262px; padding-bottom: 15px; /* sliding doors padding */
	text-decoration: none; margin-bottom: 15px; }
.panelGray div { background: transparent url(../images/panelGrayTop.jpg) no-repeat top left; display: block; padding: 5px 15px 0px 15px; }
.panelGray div a:link, .panelGray div a:visited{ color: #016F9E; text-decoration:none; }
.panelGray div a:hover{ text-decoration:underline; }

/*----------------------------------*/

/*-------contentCol04 (form pages)--------*/
#contentCol4 { float: left; width: 600px; margin-top: 25px; position: relative; padding-left: 25px; margin-bottom: 25px; }
#contentCol4 p { margin-bottom: 1em; }
#contentCol4 p.recommendation { margin-bottom: 2em; }
/* IE6 only */
* html #contentCol4{ margin-left: 10px; }
/* END */

/*-----------------------------------------*/



.2column { margin-bottom: 25px; }

#bannerDemo { background: transparent url(../images/buttonDemo.jpg) no-repeat scroll top left; display: block; height: 48px; width: 376px; margin-top: 0px; position: relative; float: left; cursor:pointer; cursor:hand; }
#bannerDemo:hover {background-position: bottom left; }

#bannerRevo { background: transparent url(../images/buttonRevo.jpg) no-repeat scroll top left; display: block; height: 48px; width: 376px; margin-top: 0px; position: relative; float: left; cursor:pointer; cursor:hand; }
#bannerRevo:hover {background-position: bottom left; }

#spanStateText, { float: right; }


/*-------PORTFOLIO PAGE LAYOUT--------*/

#portfolio {
	margin: auto;
	text-align: center;
}
#portfolio h1 {
	text-align: left;
	font-size: 170%;
	margin: 25px 0 10px 24px;
}

#portfolioContent {
	clear: both;
	margin: auto 0;
	text-align: left;
	margin-left: 25px;
}
#portfolioContent h2 {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 110%;
	color: #990000;
	margin-bottom: 10px;
}
#portfolioContent p {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	line-height: 1.45;
	font-size: 12px;
	margin-bottom: 1em;
}
#portfolioContent div {
	margin-left: 40px;
	display: block;
	width: 375px;
	float: left;
}
#portfolioContentFoot { clear: both; display: block; width: 1px; height: 1px; }

div.scrollable {
/* required settings */ 
	float: left;
	margin: auto;
	margin-bottom: 25px;
	text-align: center;
    position: relative; 
    overflow: hidden;
    width: 815px; 
    height: 330px;
}
	/*-----GRADIENT MAKING SCROLL APPEAR TO BE SLIDING THROUGH THE PAGE-----*/
	#scrollFadeL {
		top: 0;
		left: 0;
		margin-top: 15px;
		background:url(../images/scrollFadeL.png) no-repeat;
		display: block;
		width: 20px;
		height: 315px;
		position: absolute;
		z-index: 20;
	}
	#scrollFadeR {
		top: 0;
		right: 0;
		margin-top: 15px;
		background:url(../images/scrollFadeR.png) no-repeat;
		display: block;
		width: 20px;
		height: 315px;
		position: absolute;
		z-index: 20;
	}
	/*------------------------------*/
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width: 9999px;
	height: auto;
	position: relative;
	padding-top: 15px;
	margin-left: 2px;
} 
/* 
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
	display: block;
	width: 375px;
	height: 256px;
    float:left; 
	margin: 30px 15px;
}
div.scrollable div.items div a {
	display: block;
	width: 375px;
	height: 256px;
	margin: 0;
	padding: 0;
}
div.scrollable div.items div a span { position: absolute; top: 0; left: 0; margin-top: -100px; }
	/*-------PORTFOLIO ITEMS--------*/
	#bd { background: url(../images/byDesign.jpg) no-repeat; }
	#cw { background: url(../images/cyberWize.jpg) no-repeat; }
	#eh { background: url(../images/eternalHealth.jpg) no-repeat; }
	#gi { background: url(../images/greenIrene.jpg) no-repeat; }
	#hc { background: url(../images/healthEChoice.jpg) no-repeat; }
	#tm { background: url(../images/tunguskaMist.jpg) no-repeat; }
	#ws { background: url(../images/WickScents.jpg) no-repeat; }
	#nice { background: url(../images/NICE.jpg) no-repeat; }
	#aa { background: url(../images/avaAnderson.jpg) no-repeat; }
	#asea { background: url(../images/asea.jpg) no-repeat; }
	#ve { background: url(../images/vivaElite.jpg) no-repeat; }
	#vs { background: url(../images/VerdantSpring.jpg) no-repeat; }
	#mz { background: url(../images/mannazo.jpg) no-repeat; }
	#eg { background: url(../images/endlessGlow.jpg) no-repeat; }
		/*-------PERSONALIZE TOOLTIP (courtesy of http://www.kriesi.at/archives/create-simple-tooltips-with-css-and-jquery)--------*/
		.tooltip{
			position:absolute;
			z-index:999;
			left:-9999px;
		}
		.tooltip p{
			font-size: 11px;
			margin:0;
			padding:0;
			color:#000;
			background-color:#fff;
			padding:5px;
			-moz-border-radius: 3px; 
			-webkit-border-radius: 3px;
			box-shadow: 0px 0px 5px #000;
			-moz-box-shadow: 0px 0px 5px #000;
			-webkit-box-shadow: 0px 0px 5px #000;
		}
		/*-----------------------------------------*/
	/*-----------------------------------------*/
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display: block;
	width: 18px;
	height: 18px;
	background: url(../images/PortLeft.png) no-repeat;
	float: left;
	margin: 0;
	margin-top: 150px;
	cursor: pointer;
}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position: 0px -18px;		
}
/* disabled navigational button */
a.disabled {
	visibility: hidden !important;		
}
/* next button uses another background image */
a.next, a.nextPage {
	background-image: url(../images/PortRight.png);
	clear: right;	
}
a.prev { float: left; margin-left: 15px; margin-right: 20px; }
a.next { float: right; margin-right: 15px; }
/*-----------------------------------------*/

/* the overlayed element */ 
div.overlay { 
     
    /* growing background image */ 
    background-image:url(../img/overlay/white.png); 
     
    /* dimensions after the growing animation finishes  */ 
    width:600px; 
    height:470px;         
     
    /* initially overlay is hidden */ 
    display:none; 
     
    /* some padding to layout nested elements nicely  */ 
    padding:55px; 
} 
 
/* default close button positioned on upper right corner */ 
div.overlay div.close { 
    background-image:url(../img/overlay/close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
} 
 
 
/* black */ 
div.overlay.black { 
    background:url(../img/overlay/transparent.png) no-repeat !important; 
    color:#fff; 
} 
 
/* petrol */ 
div.overlay.petrol { 
    background:url(../img/overlay/petrol.png) no-repeat !important; 
    color:#fff; 
} 
 
div.black h2, div.petrol h2 { 
    color:#ddd;         
}