@font-face {
  font-family: 'Dosis-Regular';
  src: url('/products/fonts/Dosis/Dosis-Regular.eot');
  src: url('/products/fonts/Dosis/Dosis-Regular.eot?#iefix') format('embedded-opentype'),
       url('/products/fonts/Dosis/Dosis-Regular.woff') format('woff'),
       url('/products/fonts/Dosis/Dosis-Regular.ttf') format('truetype'),
       url('/products/fonts/Dosis/Dosis-Regular.svg#Dosis-Regular') format('svg');
}
.fontpro,.fontpro-35367 {
  font-family: 'Dosis-Regular',sans-serif;
}
a, p, h1, label, input
{
	font-family: 'Segoe UI', Arial, Sans-Serif;
}
.super
{
	font-family: 'Segoe UI', Arial, Verdana, Sans-Serif;
	font-size: 0.5em;
	vertical-align: top;
}
.super2
{
	font-family: 'Segoe UI', Arial, Verdana, Sans-Serif;
	font-size: 0.6em;
	vertical-align: top;
}
body
{
	background-color: #f6f6f6;
}
img.tab
{
	bottom: 0;
	display: block;
	left: 50%;
	margin: 0 -58px;
	position: absolute;
}

/* #region Marquee */
div.marquee
{
	height: 1em;
	margin: 0 auto;
	margin-bottom: 5em;
	min-width: 45em;
	position: relative;
	text-align: center;
	top: 194px;
	z-index: 100;
}
div.marquee > div.divider
{
	background: url('../images/cycler/greydiv_long.png') repeat-x center center;
	border: 0;
	height: 2px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 100%;
}
div.marquee > div.divider > div.opaque
{
	background-color: #f6f6f6;
	height: 100%;
	margin: 0 auto;
	position: relative;
	width: 45em;
}
div.marquee > div.divider > div.opaque.gradient
{
	background: url('../images/gradientbg_tiled.jpg')  no-repeat center center;
}
div.marquee > h1
{
	color: #2d2d2d;
	display: inline-block;
	font: normal 3.846em 'Dosis-Regular', sans-serif;
	margin: 0 auto;
	padding: 0 0.25em;
	position: relative;
	top: -0.75em;
}
/* #endregion */

/* #region Top Section */
section.top
{
	display: block;
    margin: 0 auto;
    height: 650px;
    overflow: hidden;
    position: relative;
    text-align: center;
    top: 118px;
}
	section.top img.bkgd
	{
		display: block;
		position: relative;
		height: 479px;
		margin: 0 auto;
		top: -500px;
		max-width: 1453px;
		z-index: 10;
	}
	/* #region Cycler */
	section.top figure.cycler
	{
		display: block;
		height: 450px;
		position: relative;
		margin: 0 auto;
		margin-top: 50px;
		overflow: hidden;
		text-align: center;
		z-index: 100;
	}
	section.top figure.cycler > a.slide
	{
		display: inline-block;
		height: 391px;
		position: relative;
		width: 864px;
	}
	section.top figure.cycler > a.slide > img
	{
		border: 0;
		left: 0;
		text-align: center;
		top: 0;
	}
	section.top figure.cycler:hover > a.arrow
	{
		display: inline-block;
	}
	section.top figure.cycler > a.arrow
	{
		display: none;
		height: 100%;
		position: absolute;
		top: 0;
		width: 10%;
	}
	section.top figure.cycler > a.arrow.left
	{
		background: url('../images/cycler/arrow_left2.png') no-repeat center center;
		left: 0;
	}
	section.top figure.cycler > a.arrow.right
	{
		background: url('../images/cycler/arrow_right2.png') no-repeat center center;
		right: 0;
	}
	/*section.top figure.cycler > div.buttons
	{
		display: block;
		margin-top: 2.5em;
		width: 100%;
	}
	section.top figure.cycler > div.buttons > a
	{
		background: url('../images/cycler/buttons.png') no-repeat center top;
		display: inline-block;
		height: 16px;
		margin: 0 0.2em;
		width: 16px;
	}
	section.top figure.cycler > div.buttons > a:hover,
	section.top figure.cycler > div.buttons > a.current
	{
		background-position: center bottom;
	}*/
	/* #endregion */
	
	/* #region controller */

	section.top figure.cycler > div.buttons
	{
		background: url('../images/cycler/greydiv_long.png') no-repeat center center;
		bottom: -19px;
		height: 16px;
		margin: .5em auto;
		position: relative;
		width: 100%;
		z-index: 100;
	}
	section.top figure.cycler > div.buttons > .trans
	{
		background: url('../images/cycler/line_overlay.png') repeat-x center center;
		height: 16px;
		margin: 0 auto;
		position: relative;
		width: 130px;
	}
	section.top figure.cycler > div.buttons > .trans > a
	{
		background: url('../images/cycler/buttons.png') no-repeat;
		display: inline-block;
		height: 16px;
		margin: 0 0.2em;
		width: 16px;
	}
	section.top figure.cycler > div.buttons > .trans > a.current
	{
		background-position: center bottom;
	}

	/* #endregion */
/* #endregion */

/* #region Apps Section */
section.apps
{	
	/*background:  url('../images/glow.png') no-repeat center 4em, #c9ccce url('../images/gradientbg_tiled.jpg') repeat-y center center;*/
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
	margin-top: 118px;
}
section.apps > p
{
	font-size: 1.154em;
	line-height: 1.33em;
	margin: 0 auto;
	width: 40em;
}
/* #region Marquee */
figure.marquee
{
	margin: 0;
	margin-top: 0em;
	position: relative;
	text-align: center;
}
figure.marquee hr
{
	background: url('../images/cycler/greydiv_long.png') repeat-x left center;
	border: 0;
	height: 2px;
	margin: 0;
	padding: 0;
	width: 100%;
}
figure.marquee img
{
	position: relative;
	top: -2em;
}
figure.marquee h1
{
	background-color: #f7f7f7;
	color: #2d2d2d;
	display: inline-block;
	font: normal 2.75em 'Dosis-Regular', sans-serif;
	margin: 0;
	padding: 0 0.33em;
	position: relative;
	top: -0.75em;
}
/* #endregion */

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
    background-position: 0 0;
    color:#fff;
}

/* initially all panes are hidden */
.panes .pane {
    display:none;
}

/* #endregion */
section.apps > div.panes {
    background-color: #f6f6f7;
    display: inline-block;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 2em;
    vertical-align: top;
    width: 645px;
}
	section.apps > div.panes > h1
	{
		color: #0d4d8b;
		font: normal 2.75em 'Dosis-Regular', sans-serif;
		text-align: left;
		margin: 0.25em 0.75em;
		margin-left: 1.1em;
	}
	section.apps > div.panes > div.smapp > a.info,
	section.apps > div.panes > div.expanded > div.smapp > a.info
	{
		border-style: none !important;
		display: inline-block;
		height: 86px;
		margin: 1em 0 0 1em;
		position: relative;
		text-align: left;
		text-decoration:  none !important;
		vertical-align: middle;
		width: 400px;
	}
	section.apps > div.panes > div.smapp > a.info:hover,
	section.apps > div.panes > div.expanded > div.smapp > a.info:hover
	{
		background: url(../images/addsoftware_hover2.jpg) top left no-repeat;
		border-style: none !important;
		text-decoration:  none !important;
	}
	section.apps > div.panes > div.smapp > a.download,
	section.apps > div.panes > div.expanded > div.smapp > a.download
	{
		display: inline-block;
		margin: 1em 1em 0;
		position: relative;
	}
	section.apps > div.panes > div.smapp > a.info > img.icon,
	section.apps > div.panes > div.expanded > div.smapp > a.info > img.icon
	{
		border-style: none !important;
		display: inline-block;
		margin: 0.75em 0.5em 0 1em;
		position: relative;
		vertical-align: top;
	}
	section.apps > div.panes > div.smapp > a.info > img.icon,
	section.apps > div.panes > div.expanded > div.smapp > a.info > img.icon
	{
		border-style: none !important;
	}
	section.apps > div.panes > div.smapp > a.info > div,
	section.apps > div.panes > div.expanded > div.smapp > a.info > div
	{
		display: inline-block;
		margin: 0;
		position: relative;
		vertical-align: top;
		width: 85%;
	}
	section.apps > div.panes > div.smapp > a.info > div > h1,
	section.apps > div.panes > div.expanded > div.smapp > a.info > div > h1
	{
		color: #0193d4;
		font: normal 2.462em 'Dosis-Regular', sans-serif;
		margin: 0;
		text-align: left;
	}
	section.apps > div.panes > div.smapp > a.info > div > p,
	section.apps > div.panes > div.expanded > div.smapp > a.info > div > p
	{
		font-size: 1em;
		margin: 0;
		text-align: left;
		width: 90%;
	}
	
	#moreproducts
	{
		background: url('../images/more_divider_withhover.png') no-repeat center top;
		background-position: left top;
		display: inline-block;
		height: 19px;
		margin: 2em auto;
		width: 641px;
	}
	#moreproducts:hover
	{
		background-position: 0px -19px;
	}
	#lessproducts
	{
		background: url('../images/less_divider_withhover.png') no-repeat center top;
		background-position: left top;
		display: inline-block;
		height: 19px;
		margin: 2em auto;
		width: 641px;
	}
	#lessproducts:hover
	{
		background-position: 0px -19px;
	}

/* #region App Boxes */
	section.apps > div.featuredapps > div.app
	{
		display: inline-block;
		margin: auto 0.5em;
		padding: 1em 0 2em;
		position: relative;
		text-align: center;
	}
	
	a.app
	{
		background: url('../images/app_bkgd.png') no-repeat;
		color: #2d2d2d;
		display: block;
		position: relative;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		width: 318px;
	}
	a.app:hover
	{
		background: url('../images/app_bkgd_hover.png') no-repeat;
		width: 318px;
	}
	a.app:hover  > p.link
	{
		color: #5292d1;
		text-decoration: underline;
	}
	a.app > img
	{
		height: 111px;
		margin-top: 0.4em;
		width: 306px;
	}
	a.app > h1
	{
		color: #0193d4;
		font: normal 2.462em 'Dosis-Regular', sans-serif;
		margin: 0.2em 0 0.2em 0;
	}
	a.app  > p
	{
		font-size: 1.154em;
		line-height: 1.3em;
		margin: 0.5em auto;
		width: 90%;
	}
	a.app  > p.link
	{
		color: #7e7e7e;
		font-size: 0.846em;
		left: 50%;
		margin-left: -37px;
		position: absolute;
		text-transform: uppercase;
		width: auto;
	}
	/* #endregion */

section.apps > div.news
{
	background-color: #ededed;
	display: inline-block;
	margin: auto 1.5em 1.5em;
	overflow: hidden;
	padding-bottom: 2em;
	vertical-align: top;
	width: 381px;
}
	section.apps > div.news  > h1
	{
		color: #0d4d8b;
		font: normal 2.75em 'Dosis-Regular', sans-serif;
		text-align: left;
		margin: 0.25em 0.75em;
	}
	section.apps > div.news  > div 
	{
	    margin-left: 2em;
		text-align:left;
		width: 86%;
	}
	section.apps > div.news  > div.article
	{
		margin-bottom: 1.25em;
	}
	section.apps > div.news  > div.article > a.title
	{
		color: #0193d4;
		font-size: 1.125em;
		text-align: left;
		text-decoration: underline;
	}
	section.apps > div.news  > div.article > a.read
	{
		text-align: left;
		text-decoration: underline;
	}
	section.apps > div.news  > div.article > p
	{
		margin: 0.125em auto;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	section.apps > div.news  > div > a.morenews
	{
		text-align: right;
		text-decoration: underline;
	}
	
/* #region Footer */
.footer
{
	background-color: #e3e4e5;
	width: 100%;
}
.footer > .footer_container
{	
	margin: 0 auto;
	width: 941px;
}
/* #endregion */