@charset "UTF-8";

@font-face {
    font-family: 'TeXGyreHerosRegular';
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-regular-webfont.eot');
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-regular-webfont.woff') format('woff'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-regular-webfont.ttf') format('truetype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-regular-webfont.svg#TeXGyreHerosRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeXGyreHerosItalic';
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-italic-webfont.eot');
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-italic-webfont.woff') format('woff'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-italic-webfont.ttf') format('truetype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-italic-webfont.svg#TeXGyreHerosItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeXGyreHerosBold';
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-bold-webfont.eot');
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-bold-webfont.woff') format('woff'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-bold-webfont.ttf') format('truetype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheros-bold-webfont.svg#TeXGyreHerosBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'TeXGyreHerosBoldItalic';
    src: url('/assets/fonts/texgyreheros-bolditalic-webfont.eot');
    src: url('/assets/fonts/texgyreheros-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/texgyreheros-bolditalic-webfont.woff') format('woff'),
         url('/assets/fonts/texgyreheros-bolditalic-webfont.ttf') format('truetype'),
         url('/assets/fonts/texgyreheros-bolditalic-webfont.svg#TeXGyreHerosBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: 'TeXGyreHerosCnRegular';
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-regular-webfont.eot');
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-regular-webfont.woff') format('woff'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-regular-webfont.ttf') format('truetype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-regular-webfont.svg#TeXGyreHerosCnRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
@font-face {
    font-family: 'TeXGyreHerosCnItalic';
    src: url('/assets/fonts/texgyreheroscn-italic-webfont.eot');
    src: url('/assets/fonts/texgyreheroscn-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/texgyreheroscn-italic-webfont.woff') format('woff'),
         url('/assets/fonts/texgyreheroscn-italic-webfont.ttf') format('truetype'),
         url('/assets/fonts/texgyreheroscn-italic-webfont.svg#TeXGyreHerosCnItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: 'TeXGyreHerosCnBold';
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bold-webfont.eot');
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bold-webfont.woff') format('woff'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bold-webfont.ttf') format('truetype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bold-webfont.svg#TeXGyreHerosCnBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeXGyreHerosCnBoldItalic';
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bolditalic-webfont.eot');
    src: url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bolditalic-webfont.woff') format('woff'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bolditalic-webfont.ttf') format('truetype'),
         url('https://www.smartfoxserver.com/assets/fonts/texgyreheroscn-bolditalic-webfont.svg#TeXGyreHerosCnBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* MAIN LAYOUT */

body {
	font-family: TeXGyreHerosRegular, Arial, Helvetica, sans-serif;
	font-size: medium;
	text-shadow: 1px 1px 0 #FFFFFF;
	color: #444444; /* #919191; */
	background-color: #D2D2D2;
}

#wrapper1 {
	background-color: #FFFFFF;
	min-width: 990px;
	background-image: url('../images/background_logo.png'), url('../images/background_gradient.png');
	background-repeat: no-repeat, repeat-x;
	background-position: center -382px, top left;
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: #FFFFFF url('../images/background_gradient.png') repeat-x top left\9;
}

#wrapper2 {
	width: 990px; /* Page content is 950px large, but we have to use 990px to allow main content lateral shadows */
	margin: 0px auto;
	padding-bottom: 10px;
	min-height: 600px;
}

#header {
	padding-top: 40px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
}

#main {
	clear: both;
	min-height: 780px;
	background: url('../images/main_background.png') top center no-repeat;
	padding-top: 26px;
	padding-left: 22px;
	padding-right: 22px;
	padding-bottom: 10px;
}

#leftSidebar {
	width: 200px;
	min-height: 770px;
	float: left;
	margin: 25px 25px 0 25px;
}

#content {
	min-height: 750px;
	padding: 0 25px 0 25px;
	margin-left: 0px;
	margin-top: 25px;
	border-left: 1px #D2D2D2 solid;
	float: right;
	width: 645px;
}

#content.noSidebar {
	border-left: none;
	float: none;
	width: auto;
}

#footer {
	font-family: TeXGyreHerosRegular, Arial, Helvetica, sans-serif;
	font-size: 86%;
	text-shadow: none;
	padding-top: 10px;
	color: #666666;
}

/* Floats self-clearing */

.group:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* for IE6 */
* html .group {
	height: 1%;
}

/* for IE7 */
*:first-child+html .group {
	min-height: 1px;
}


/* BASIC STYLES */

strong {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
	text-shadow: none;
	font-weight: normal;
}

a:link, a:visited {
	color: #CC0000;
	font-weight: normal;
	text-decoration: none;
}

a:hover {
	color: #FF0000;
}

a img {
	border: none;
}

a.extLink:after {
	padding-left: 3px;
	content: url('../images/ext_link.png');
}

#content h1 {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 200%;
	color: #FF6600;
	padding-bottom: 20px;
	line-height: 0.8em;
	border-bottom: 1px #D2D2D2 solid;
}

#content h1 span.sub {
	font-size: 60%;
	display: block;
	padding-top: 5px;
}

#content h2 {
	font-family: TeXGyreHerosCnBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 150%;
	color: #FF6600;
	margin: 20px 0 10px 0;
}

#content h3 {
	font-family: TeXGyreHerosCnBoldItalic, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 120%;
	color: #FF6600;
	margin: 20px 0 10px 0;
	font-style: normal;
}

#content hr {
	width: 100%;
	height: 1px;
	background-color: #D2D2D2;
	margin-bottom: 0px;
	border: 0;
}

#content hr.spaced {
	margin-top: 30px;
	margin-bottom: 30px;
}

#content p {
	margin: 7px 0;
}

.imgBorder {
	padding: 5px;
	border: 1px solid #D9E0E6;
	border-bottom-color: #C8CDD2;
	border-right-color: #C8CDD2;
	background: #FFFFFF;
}

#main a.learnMore, #main a.learnMore:visited {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: -0.1em;
	color: #666666;
	font-size: 120%;
	float: right;
	display: block;
	margin-right: 0px;
	padding: 2px 38px 0 20px;
	height: 32px;
	background: url('../images/learnMore_button.png') center right no-repeat;
	border-radius: none;
}

#main a.learnMore:hover , #main a.learnMore:focus {
	color: #CC0000;
	background: url('../images/learnMore_button_hover.png') center right no-repeat;
	background-color: transparent;
	border-radius: none;
	text-decoration: none;
	-webkit-transition: none;
}

#main a.top, #main a.top:visited {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: -0.1em;
	color: #666666;
	font-size: 90%;
	display: inline-block;
	margin: 10px 0;
	padding-left: 24px;
	height: 20px;
	background: url('../images/top_button.png') center left no-repeat;
	border-radius: none;
}

#main a.top:hover, #main a.top:focus  {
	color: #CC0000;
	background: url('../images/top_button_hover.png') center left no-repeat;
	background-color: transparent;
	border-radius: none;
	text-decoration: none;
	-webkit-transition: none;
}

#main a.back, #main a.back:visited {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: -0.1em;
	color: #666666;
	font-size: 90%;
	display: inline-block;
	margin: 10px 0;
	padding-left: 24px;
	height: 20px;
	background: url('../images/back_button.png') center left no-repeat;
	border-radius: none;
}

#main a.back:hover, #main a.back:focus {
	color: #CC0000;
	background: url('../images/back_button_hover.png') center left no-repeat;
	background-color: transparent;
	border-radius: none;
	text-decoration: none;
	-webkit-transition: none;
}

#main a.download,
#main a.download:visited,
#main a.get,
#main a.get:visited,
#main .contactUs a,
#main .contactUs a:visited {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: 0em;
	color: #FFFFFF;
	font-size: 100%;
	display: inline-block;
	padding: 5px 10px 5px 35px;
	background: url('../images/download_button.png') center left no-repeat, url('../images/download_button_bg.png') top left repeat-x;
	border-radius: 6px;
	text-shadow: none;
	box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: #FF8200 url('../images/download_button.png') center left no-repeat\9;
}

#main a.download:hover,
#main a.download:focus,
#main a.get:hover,
#main a.get:focus,
#main .contactUs a:hover,
#main .contactUs a:focus {
	background: #FF3300 url('../images/download_button.png') center left no-repeat;
}

#main a.get,
#main a.get:visited {
	padding: 5px 35px 5px 10px;
	background: url('../images/get_button.png') center right no-repeat, url('../images/download_button_bg.png') top left repeat-x;
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: #FF8200 url('../images/get_button.png') center right no-repeat\9;
}

#main a.get:hover,
#main a.get:focus {
	background: #FF3300 url('../images/get_button.png') center right no-repeat;
}

#main .contactUs a,
#main .contactUs a:visited {
	background: url('../images/contactUs_button.png') center left no-repeat, url('../images/download_button_bg.png') top left repeat-x;
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: #FF8200 url('../images/contactUs_button.png') center left no-repeat\9;
}

#main .contactUs a:hover,
#main .contactUs a:focus {
	background: #FF3300 url('../images/contactUs_button.png') center left no-repeat;
}

input {
	border: none;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	background: #F6F6F6 url('../images/input_bg.png') repeat-x top left;
	padding: 4px;
	border-radius: 4px;
	color: #666666;
}

input.button {
	border: 1px solid #999999;
	background: #CCCCCC url('../images/submit_bg.png') repeat-x top left;
	text-align: center;
	text-shadow: none;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	padding: 5px 10px;
}

input.button:hover {
	color: #999999;
}

ul.list li {
	margin: 10px 0 10px 20px;
	list-style-position: outside;
	list-style-image: url('../images/list_bullet.png');
}

ul.list1 li {
	margin: 0 0 0 20px;
	list-style-position: outside;
	list-style-image: url('../images/list_bullet_1.png');
}

ul.list2 li {
	margin: 0 0 0 25px;
	list-style: disc;
}

ul.list3 li {
	margin: 0 0 0 25px;
	list-style: circle;
}

ol {
	list-style-type: decimal;
	margin: 0 0 0 25px;
}

ol.parent > li {
	margin-top: 15px;
	margin-bottom: 15px;
}

ol.child {
	list-style-type: lower-alpha;
}

#main .importantNote {
	margin: 20px;
	padding: 10px;
	background-color: #ffffee;
	border: 2px dashed #ff9900;
	color: #666666;
	font-size: 90%;
	text-shadow: none;
}

#main .smallNote {
	color: #999;
	font-size: 90%;
	text-shadow: none;
}

.embedVideo {
	margin: 30px auto;
	width: 100%;
}

#header div.social {
	float: right;
	height: 20px;
	margin-top: 46px;
	
	text-shadow: none;
	color:#666;
	font-size:90%;
}

.callout {
	font-family: TeXGyreHerosItalic, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 100%;
	color: #FF6600;
	margin-top: 10px;
}

/* MAIN NAVIGATION */

#header #navigation {
	min-height: 45px;
	margin: 15px 0 0 0;
}

#header #nav_links {
	width: 900px;
	background: url('../images/nav_background.png') top left repeat-x;
	float: left;
	min-height: 45px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	box-shadow: 2px 2px 0px #932828;
}

#header #nav_links li {
	display: block;
	float: left;
}

#header #nav_links li a {
	display: block;
	padding: 11px 20px 11px 20px;
	height: 100%;
	text-decoration: none;
	color: #FFFFFF;
	font-family: TeXGyreHerosCnBold, Arial, Helvetica, sans-serif;
	text-shadow: 2px 2px 2px rgba(104, 0, 0, 0.85);
	font-weight: normal;
}

#header #nav_links li:hover {
	background: rgba(255, 204, 0, 0.5) url('../images/nav_hover_arrow.png') center bottom no-repeat;
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: #FF9900  url('../images/nav_hover_arrow.png') center bottom no-repeat\9;
}

#header #nav_links .firstButton,
#header #nav_links .firstButton:hover {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

/* SELECTED state */
body#home #header #nav_home,
body#overview #header #nav_overview,
body#products #header #nav_products,
body#cloud #header #nav_cloud,
body#download #header #nav_download,
body#showcase #header #nav_showcase,
body#buy #header #nav_buy,
body#support #header #nav_support,
body#company #header #nav_company {
	/*background: rgba(204, 0, 0, 0.7) url('/assets/images/nav_hover_arrow.png') center bottom no-repeat;
	border-bottom-left-radius: 8px;*/
	background: url('../images/nav_hover_arrow.png') center bottom no-repeat, url('../images/nav_selected_bg.png') top left repeat-x;
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: #CC0000  url('../images/nav_hover_arrow.png') center bottom no-repeat\9;
}

#header #navigation #nav_gap_logo {
	float: right;
	position: relative;
	top: 0;
	right: 0;
	width: 50px;
	height: 47px;
	background: url('../images/nav_gap_logo.png') top right no-repeat;
	
	/* Hack for IE8 and previous versions (see \9 at the end of the property value) */
	background: url('../images/nav_gap_logo_IE8.png') top right no-repeat\9;
}

#header #nav_links li ul {
	display: none;
	box-shadow: 2px 2px 0px rgba(51, 51, 51, 0.5);
	z-index: 100;
}

#header #nav_links li ul li a {
	display: block;
	min-width: 170px;
	padding: 5px 10px 5px 10px;
	height: 100%;
	text-decoration: none;
	color: #333333;
	border-top: 1px solid #FFFFFF;
	background-color: #D2D2D2;
	font-family: TeXGyreHerosRegular, Arial, Helvetica, sans-serif;
	font-size: 90%;
	font-weight: normal;
	text-shadow: none;
	white-space: nowrap;
}

#header #nav_links li ul li a:hover {
	background-color: #B3B3B3;
	color: #000000;
}

#header #nav_links li:hover ul {
	display: block;
	position: absolute;
}

#header #nav_links li:hover li {
	float: none;
	background: #FFFFFF;
}

#header #nav_links .subTitle,
#header #nav_links .subNote {
	display: none;
	visibility: hidden;
}


/* FOOTER NAVIGATION */

#footer #copyright {
	clear: both;
	padding-top: 15px;
	padding-bottom: 15px;
	text-align: center;
	font-size: 90%;
	color: #AAAAAA;
}

#footer #copyright a {
	color: #AAAAAA;
}

#footer #copyright a:hover {
	color: #888888;
	text-decoration: underline;
}

#footer #navigation {
	margin: 0px auto;
	width: 960px;
}

#footer #nav_links {
	float: left;
	font-size: 80%;
	letter-spacing: -.0px
}

#footer #nav_links li {
	float: left;
	margin: 0 10px;
}

#footer #nav_links li ul li {
	float: none;
	margin: 0;
}

#footer #nav_links li a {
	text-decoration: none;
	font-family: TeXGyreHerosCnBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #666666;
	border-radius: 4px;
	padding: 1px 4px 1px 4px;
}

#footer #nav_links li a:hover {
	color: #333333;
	background-color: #DFDFDF;
}

#footer #nav_links li ul li a {
	white-space: nowrap;
	font-family: TeXGyreHerosCnRegular, Arial, Helvetica, sans-serif;
	font-weight: normal;
}

#footer #nav_links .firstButton {
	padding-left: 20px;
}

#footer #nav_links .subTitle,
#footer #nav_links .subNote {
	display: none;
	visibility: hidden;
}


/* LEFT SIDEBAR NAVIGATION */

#leftSidebar {
	font-family: TeXGyreHerosCnBold, Arial, Helvetica, sans-serif;
	font-weight: normal;
	text-shadow: 1px 1px 0 #FFFFFF;
}

#leftSidebar .subNav {
	list-style: none;
}

#leftSidebar .subNav a:link, #leftSidebar .subNav a:visited {
	display: block;
	text-decoration: none;
	color: #666666;
	padding-top: 15px;
	line-height: 1em;
}

#leftSidebar .subNav a:hover {
	text-decoration: none;
	color: #CC0000;
	background: none;
}

#leftSidebar .subNote {
	text-decoration: none;
	text-shadow: none;
	margin-top: 50px;
	font-family: TeXGyreHerosCnRegular, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 80%;
	color: #999;
}


/* ANCHORS BELOW PAGE TITLE */

#anchors {
	margin-bottom: 15px;
	font-size: 90%;
	text-align: right;
}

#anchors li {
	display: inline;
}

#anchors li a {
	display: inline-block;
	padding: 5px 10px;
	margin-left: -5px;
	padding-top: 2px;
	border: 1px #D2D2D2 solid;
	border-top: none;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

#anchors li a:link,
#anchors li a:visited {
	color: #666666;
}

#anchors li a:hover {
	color: #CC0000;
}

/* Styles for anchors acting as tabs */

#anchors li a.active {
	pointer-events: none;
	cursor: default;
	color: #333;
	background-color: #CCCCCC;
	text-shadow: none;
}
		
#content div.inactive {
	display: none;
}

/* Styles for API names inside text */

.api {
	font-family: TeXGyreHerosBold, Arial, Helvetica, sans-serif;
}

.html5:before {
	content: url('../images/platforms/small/html5.png');
	padding-right: 2px;
}

.flash:before {
	content: url('../images/platforms/small/flash.png');
	padding-right: 2px;
}

.android:before {
	content: url('../images/platforms/small/android.png');
	padding-right: 2px;
}

.ios:before {
	content: url('../images/platforms/small/iOS.png');
	padding-right: 2px;
}

.unity:before {
	content: url('../images/platforms/small/unity.png');
	padding-right: 2px;
}

.java:before {
	content: url('../images/platforms/small/java.png');
	padding-right: 2px;
}

.win8:before {
	content: url('../images/platforms/small/windows8.png');
	padding-right: 2px;
}

.wp8:before {
	content: url('../images/platforms/small/winPhone8.png');
	padding-right: 2px;
}

.cpp:before {
	content: url('../images/platforms/small/cpp.png');
	padding-right: 2px;
}