* {margin:0;padding:0; border: 0px none;}
ul, ol, li {list-style-type:none;}
a { text-decoration: none; color: #ff6000; }
a:hover {text-decoration: underline;}



body {
font: 62.5% "Arial", Helvetica, sans-serif;  
background: #030508 url(../img/bg.jpg) center 0 no-repeat;
color: #4f5359;
}
#wrapper {
width: 960px;
margin: 0 auto;
}

/* logo and photo image --------------------------------*/
#header {
width: 750px;
height: 155px;
}
#header h1 { 
float: left;
width: 300px;
text-align: left;
font: bold 4em/1.1em "Georgia", Times, serif;
}
#header h1 img { margin: 20px 0 0 ;}
#header h1 a { color: #c08f49;}
#header span {
float: right;
margin: 40px 0 0;
}
#header p {
float: left;
margin: 95px 0 0;
}



/* navigation */
ul#nav {
width: 960px;
height: 52px;
float: left;
font: bold 1.5em/1.2em "Arial", Helvetica, sans-serif;
margin: 0 0 2px;
}
ul#nav li {
float: left;
padding: 0;
background: none;
margin: 0; 
}
ul#nav li a {
display:block;
height: 52px; 
}
ul#nav li.home a {background:url(../img/nav.png) 0 0;width: 149px;}
ul#nav li.home a:hover { background:url(../img/nav.png) 0 -52px; }
ul#nav li.home a.active { background:url(../img/nav.png) 0 -104px; }
ul#nav li.about a {background:url(../img/nav.png) -149px 0;width: 179px;}
ul#nav li.about a:hover { background:url(../img/nav.png) -149px -52px; }
ul#nav li.about a.active { background:url(../img/nav.png) -149px -104px; }
ul#nav li.products a {background:url(../img/nav.png) -328px 0;width: 182px;}
ul#nav li.products a:hover { background:url(../img/nav.png) -328px -52px; }
ul#nav li.products a.active { background:url(../img/nav.png) -328px -104px; }
ul#nav li.demos a {background:url(../img/nav.png) -510px 0;width: 259px;}
ul#nav li.demos a:hover { background:url(../img/nav.png) -510px -52px; }
ul#nav li.demos a.active { background:url(../img/nav.png) -510px -104px; }
ul#nav li.contact a {background:url(../img/nav.png) -769px 0;width: 189px;}
ul#nav li.contact a:hover { background:url(../img/nav.png) -769px -52px; }
ul#nav li.contact a.active { background:url(../img/nav.png) -769px -104px; }
ul#nav li a span { display:none; }




/* commmon font styles */
h2 {
font: normal 2em/1.1em "Georgia", Times, serif;
margin: 0 0 15px;
padding: 14px 0 0 20px;
height: 36px;
color: #2e3a46;
background: #eceeef url(../img/h2-bg.gif) 0 0 no-repeat;
}
#container-home #container-btm h2 { 
background: none;
border-bottom: 1px solid #cecfd1;
padding: 0 0 20px; 
margin: 0 0 15px;
font: normal 2.1em/1.1em "Georgia", Times, serif;
}
h2 span { color: #ff7600;}
h3 {
font: bold 1.5em/1.1em "Arial", Helvetica, sans-serif;
margin: 0 0 8px; 
color: #2e3a46;
}
#right h4 {
background: #eceeef url(../img/h2-right-bg.gif) 0 0 no-repeat;
font: normal 1.6em/1.1em "Georgia", Times, serif;
margin: 0 0 15px;
padding: 17px 0 0 20px;
height: 33px;
color: #2e3a46;
}
h5 {
font: bold 1.3em/1.1em "Arial", Helvetica, sans-serif;
margin: 0 0 4px; 
color: #2e3a46;
}
h6 {
font: italic 1.6em/1.1em "Georgia", Times, serif;
border-top: 1px solid #cecfd1;
padding: 15px 0 0; 
margin: 25px 0 0; 
color: #ff7600;
clear: both;
}
h6 span { color: #2e3a46;}
p {
font: normal 1.25em/1.35em "Arial", Helvetica, sans-serif;
margin: 0 0 15px;
}
p a.arrow {
padding: 0 0 0 8px;
background: url(../img/arrow-orange.gif) 0 4px no-repeat;
}
p small {
padding: 0 5px;
color: #8c8f91;
}
p.fb {
font: italic 1.3em/1.5em "Georgia", Times, serif;  
color: #8b96a1;
}
p.fb span {
color: #ff7600;
font-weight: bold;
}



/* main content area */
#content { 
width: 950px;
padding: 0 5px;
margin: 0 0 10px;
float: left;
}
#container-home { 
width: 466px;
float: left;
background: #fff url(../img/container-home-top.gif) 0 0 no-repeat;
}
#container-home #container-btm { 
width: 426px;
height: 315px;
float: left;
padding: 20px 20px 0;
background: transparent url(../img/container-home-btm.gif) 0 bottom no-repeat;
}
#container { 
width: 950px;
float: left;
background: #fff url(../img/container-top.gif) 0 0 no-repeat;
}
#container #container-btm { 
width: 910px;
float: left;
padding: 20px;
background: transparent url(../img/container-btm.gif) 0 bottom no-repeat;
}
#partners { 
width: 473px;
float: right;
background: #fff url(../img/partners-top.gif) 0 0 no-repeat;
margin-left: 10px;
}
#partners-btm { 
width: 463px;
height: 325px;
float: right;
padding: 5px;
background: transparent url(../img/partners-btm.gif) 0 bottom no-repeat;
}
#partners h4 {
color: #fff;
background: #1e293a url(../img/partners-h4.gif) 0 bottom no-repeat;
border-bottom: 3px solid #d8dadb;
width: 453px;
height: 32px;
padding: 0 0 0 10px;
font: normal 1.6em/1.9em "Georgia", Times, serif;
text-transform: uppercase;
}
#partners h4 span { color: #f8cd5d;}

#partners table {
font: normal 1.1em/1.2em "Arial", Helvetica, sans-serif; 
width: 100%;
}
#partners table tr td {
border-top: 1px solid #cecfd1;
height: 95px;
text-align: center;
}



/* columns */
#left {
float: left; 
width: 600px; 
}
#right {
float: right; 
width: 275px; 
}
#left p, #right p { margin: 0 20px 15px;}
#left h3, #right h3 { margin: 0 20px 5px;}
#left h5, #right h5 { margin: 0 20px 3px;}
#right p b { width: 85px; float: left; font-weight: normal;}




/* form elements */
form#contact {
font: normal 1.2em/2em "Arial", Helvetica, sans-serif;
margin: 20px 0;
width: 550px; 
color: #4f5359;
}
form#contact label {
float: left;
clear: left;
width: 200px;
text-align: right;
margin-right: 15px; 
}
form#contact input, form#contact textarea {
background: #fff url(../img/box_bg.gif) top left repeat-x;
border: 2px solid #cecfd1;
width: 275px;
color: #2e3a46;
font: normal 1em/1em "Arial", Helvetica, sans-serif;
padding: 2px;
margin: 0 0 5px 0; 
}
form#contact textarea:focus, form#contact input:focus, form#contact select:focus { border: 2px solid #ff7600; }
form#contact span {
font-size: 0.85em;
color: #d21515;
padding-left: 25px; 
}
form#contact input.btn {
background: none;
background: #fb7422;
border: 0;
width: auto;
color: #fff;
padding: 0;
margin: 0 0 5px 215px; 
}




/* clear everything ensures white background in all browsers */
#clearall { 
width: 100%;
clear: both;
}


#footer {
clear: both;
margin: 10px auto 50px;
width: 950px;
height: 40px;
background: url(../img/footer-bg.gif) 0 0 no-repeat;
}
#footer p {
text-align: center;
padding: 11px 0 0;
font-size: 1.1em;
color: #454950;
}
#footer a { color: #ff6000; padding: 0 1px;}
#footer a.gap {margin-left: 200px;}





/* TABS */
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
.ui-tabs-hide {
display: none;
}
}
/* Hide useless elements in print layouts... */
@media print {
.ui-tabs-nav {
display: none;
}
}
#rotate {
width: 950px;
height: 275px;
background: transparent url(../img/banner/products-tabs-bg.gif) 0 0 no-repeat;
clear: both;
margin: 0 auto;
}
body.products #rotate {
height: auto;
background: transparent url(../img/banner/products-tabs-bg-b.jpg) 0 0 no-repeat;
padding: 0;
margin: 0 0 0 4px;
}
body.products #rotate #btm {
height: 25px;
width: 950px;
float: left;
background: transparent url(../img/banner/products-tabs-btm.jpg) 0 0 no-repeat;
}
/* Skin */
.ui-tabs-panel {
height: 210px;
padding: 0 119px 0 40px;
}
body.products .ui-tabs-panel {
height: auto;
padding: 0 40px 0 40px;
clear: both;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
float: left;
height: 56px;
padding: 0 0 0 30px;
}
body.products .ui-tabs-nav {margin: 10px 0;}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
display: block;
height: 56px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
float: left;
height: 56px;
}
.ui-tabs-nav a {
    padding-left: 0;
	height: 56px;
	float: left;
    color: #1d2631;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
    outline: 0; /* prevent dotted border in Firefox */
}
.ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    z-index: 2;
	height: 56px;
	float: left;
    margin-top: 0;
    color: #fff;
	background: #ff7700 url(../img/banner/tab.gif) 0 0 no-repeat;
}
body.products .ui-tabs-nav .ui-tabs-selected a {	background: #ff7700 url(../img/banner/tab-b.gif) 0 0 no-repeat;}
.ui-tabs-nav a span {
	height: 56px;
	float: left;
	display: block;
    padding: 0 29px;
	font: bold 1.3em/4.3em "Arial", Helvetica, sans-serif;
}
body.products .ui-tabs-nav a span {line-height: 3.8em;}
*>.ui-tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
	background: transparent url(../img/banner/tab.gif) right -56px no-repeat;
	height: 56px;
	float: left;
}
body.products .ui-tabs-nav .ui-tabs-selected a span {	background: transparent url(../img/banner/tab-b.gif) right -56px no-repeat;float: left;}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-deselectable a:hover, .ui-tabs-nav .ui-tabs-deselectable a:focus, .ui-tabs-nav .ui-tabs-deselectable a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
}
.ui-tabs-loading em {
    padding: 0 0 0 20px;
    background: url(loading.gif) no-repeat 0 50%;
}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */    display: inline-block;}
*:first-child+html .ui-tabs-nav  { /* @ IE 7 Standards Mode - do not group selectors, otherwise IE 6 will ignore complete rule (because of the unknown + combinator)... */    display: inline-block;}


#rotate h3 {
margin: 0;
padding: 35px 0 0;
font: normal 3em/1.2em "Arial", Helvetica, sans-serif;
color: #000;
}
#rotate p {
margin: 10px 0 0;
font: normal 1.2em/1.4em "Arial", Helvetica, sans-serif;
width: 550px;
color: #000;
}
#rotate img.box {
float: right;
margin: 16px 0 0;
}




body.products #rotate h3 {
margin: 0 0 20px;
padding: 25px 0 0;
font: normal 3em/1.2em "Arial", Helvetica, sans-serif;
color: #000;
}
body.products h4 {
margin: 0 0 3px;
font: bold 1.5em/1.2em "Arial", Helvetica, sans-serif;
color: #000;
}
body.products #rotate p {
margin: 0 0 15px;
font: normal 1.2em/1.4em "Arial", Helvetica, sans-serif;
width: auto;
color: #000;
}
body.products #rotate ol {
margin: 0 0 15px 15px;
font: normal 1.2em/1.2em "Arial", Helvetica, sans-serif;
color: #000;
}
body.products #rotate ol li {
background: url(../img/arrow-white.gif) no-repeat 0 4px;
padding: 0 0 0 12px;
margin: 0 0 5px;
}
body.products #rotate span#right {
float: right;
clear: right;
width:300px;
padding: 20px;
background: #222;
}
body.products #rotate span#right h5 {
width: auto; 
color: #fff; 
padding: 0; 
font: bold 1.7em/1.2em "Arial", Helvetica, sans-serif;
margin: 0; 
}
body.products #rotate span#right p, body.products #rotate span#right ol {width: auto; color: #fff;}
body.products #rotate img.box {
float: right;
margin: 10px 85px 35px 50px;
}
body.products #rotate span#right p b {color: #ff7500; float: none; font-weight: bold; width: auto;}