/* Oinfinity.com */
/*
oinfinity-orange #FDB813;
light-blue #99e5ff
bluish-dark-grey #2B3946;
*/
/* ----------------------------------------------------
=Reset
-------------------------------------------------------*/
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
caption,th{text-align:left;}
fieldset,img,abbr,acronym{border:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ol,ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
q:before,q:after{content:'';}
*{outline:none;}
/* ----------------------------------------------------
=Layout
-------------------------------------------------------*/
body{
background-color:#000;
text-align:center;
min-width:980px;
}

#wrapper-outer{
width:980px;
margin:0px auto;
text-align:left;
}
#header{
height:98px;
position:relative;
}
#branding{
width:188px;
height:50px;
}
a#logo{
width:188px;
height:50px;
display:block;
position:absolute;
top:37px;
text-indent:-9999px;
background:#000 url(img/oinfinity_logo.gif) no-repeat;
}
#navigation{
	width:590px;
	height:30px;
	position:absolute;
	right:0;
	top:63px;
}
ul#navbar{
	width:590px;height:30px;
	overflow: hidden;
}

/* ----------------------------------------------------
=Navigation Bar Navbar
-------------------------------------------------------*/
body#products ul#navbar  { background: transparent url(img/navbar.gif) no-repeat 0 0; }
body#services ul#navbar  { background: transparent url(img/navbar.gif) no-repeat 0 -30px; }
body#casestudies ul#navbar  { background: transparent url(img/navbar.gif) no-repeat 0 -60px; }
body#about ul#navbar  { background: transparent url(img/navbar.gif) no-repeat 0 -90px; }
body#contact ul#navbar  { background: transparent url(img/navbar.gif) no-repeat 0 -120px; }
body#home ul#navbar  { background: transparent url(img/navbar.gif) no-repeat 0 -150px; }

ul#navbar li a{
	position:absolute;
	top:0;
	text-indent:-9999px;
	text-decoration:none;
	padding: 30px 0 0 0;
	overflow:hidden;
	height: 0px !important; 
	height /**/:30px; /* IE5/Win */
	background: transparent url(img/navbar.gif) no-repeat;
}

body#home li#navbar-links-home a				{background-position:0 0; width:70px; left:0;}
body#home li#navbar-links-home a:hover			{background-position:0 0;}
body#home li#navbar-links-products a			{background-position:-70px -150px; width:170px; left:70px;}
body#home li#navbar-links-products a:hover		{background-position:-70px 0;}
body#home li#navbar-links-services a			{background-position:-240px -150px; width:160px; left:240px;}
body#home li#navbar-links-services a:hover		{background-position:-240px 0;}
body#home li#navbar-links-about a				{background-position:-400px -150px; width:80px; left:400px;}
body#home li#navbar-links-about a:hover			{background-position:-400px 0;}
body#home li#navbar-links-contact a				{background-position:-480px -150px; width:110px; left:480px;}
body#home li#navbar-links-contact a:hover		{background-position:-480px 0;}

body#products li#navbar-links-home a				{background-position:0 -150px; width:70px; left:0;}
body#products li#navbar-links-home a:hover			{background-position:0 -30px;}
body#products li#navbar-links-products a			{background-position:-70px -30px; width:170px; left:70px;}
body#products li#navbar-links-products a:hover		{background-position:-70px -30px;}
body#products li#navbar-links-services a			{background-position:-240px -150px; width:160px; left:240px;}
body#products li#navbar-links-services a:hover		{background-position:-240px -30px;}
body#products li#navbar-links-about a				{background-position:-400px -150px; width:80px; left:400px;}
body#products li#navbar-links-about a:hover			{background-position:-400px -30px;}
body#products li#navbar-links-contact a				{background-position:-480px -150px; width:110px; left:480px;}
body#products li#navbar-links-contact a:hover		{background-position:-480px -30px;}

body#services li#navbar-links-home a				{background-position:0 -150px; width:70px; left:0;}
body#services li#navbar-links-home a:hover			{background-position:0 -60px;}
body#services li#navbar-links-products a			{background-position:-70px -150px; width:170px; left:70px;}
body#services li#navbar-links-products a:hover		{background-position:-70px -60px;}
body#services li#navbar-links-services a			{background-position:-240px -60px; width:160px; left:240px;}
body#services li#navbar-links-services a:hover		{background-position:-240px -60px;}
body#services li#navbar-links-about a				{background-position:-400px -150px; width:80px; left:400px;}
body#services li#navbar-links-about a:hover			{background-position:-400px -60px;}
body#services li#navbar-links-contact a				{background-position:-480px -150px; width:110px; left:480px;}
body#services li#navbar-links-contact a:hover		{background-position:-480px -60px;}

body#about li#navbar-links-home a				{background-position:0 -150px; width:70px; left:0;}
body#about li#navbar-links-home a:hover			{background-position:0 -90px;}
body#about li#navbar-links-products a			{background-position:-70px -150px; width:170px; left:70px;}
body#about li#navbar-links-products a:hover		{background-position:-70px -90px;}
body#about li#navbar-links-services a			{background-position:-240px -150px; width:160px; left:240px;}
body#about li#navbar-links-services a:hover		{background-position:-240px -90px;}
body#about li#navbar-links-about a				{background-position:-400px -90px; width:80px; left:400px;}
body#about li#navbar-links-about a:hover		{background-position:-400px -90px;}
body#about li#navbar-links-contact a			{background-position:-480px -150px; width:110px; left:480px;}
body#about li#navbar-links-contact a:hover		{background-position:-480px -90px;}

body#contact li#navbar-links-home a				{background-position:0 -150px; width:70px; left:0;}
body#contact li#navbar-links-home a:hover		{background-position:0 -120px;}
body#contact li#navbar-links-products a			{background-position:-70px -150px; width:170px; left:70px;}
body#contact li#navbar-links-products a:hover	{background-position:-70px -120px;}
body#contact li#navbar-links-services a			{background-position:-240px -150px; width:160px; left:240px;}
body#contact li#navbar-links-services a:hover	{background-position:-240px -120px;}
body#contact li#navbar-links-about a			{background-position:-400px -150px; width:80px; left:400px;}
body#contact li#navbar-links-about a:hover		{background-position:-400px -120px;}
body#contact li#navbar-links-contact a			{background-position:-480px -120px; width:110px; left:480px;}
body#contact li#navbar-links-contact a:hover	{background-position:-480px -120px;}

/* ----------------------------------------------------
=Footer Sticky
-------------------------------------------------------*/
html, body, form, #wrapper-outer {height: 100%;}

body > #wrapper-outer {height: auto; min-height: 100%;}

#content {padding-bottom: 80px;}  /* must be same height as the footer */

#footer{
	position: relative;
	background:#1F1F1F url(img/footer_bg.gif) repeat-x;
	margin-top: -80px; /* negative value of footer height */ 
	height:80px;
	clear:both;
}
#footer p{
padding-top:10px;
}

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ----------------------------------------------------
=Home page
-------------------------------------------------------*/
body#home #banner{
width:980px;
height: 336px;	
background-color:#2B3946;
}
body#home #banner-top{
height:276px;
background-color:#2B3946;
}
body#home #banner-bottom{
height:60px;
}
body#home #content{
height: 214px;
position:relative;
}
#content-home{
	height: 188px;
	position: relative;
	top:16px;
}
#box-home-welcome{
width:320px;
position:absolute;
top:0;left:0;
}
#box-home-news{
width:320px;
position:absolute;
top:0;right:0px;
}
#box-home-products{
width:340px;
height: 188px;
position:absolute;
top:0;left:320px;
background:#000 url(img/box_borders.gif) repeat-y;
}
#box-home-welcome h2{
width:133px;
height:18px;
text-indent:-9999px;
background:#000 url(img/titles_home_box_welcome.gif) no-repeat;
}
#box-home-news h2{
width:133px;
height:18px;
text-indent:-9999px;
position:relative;
left:20px;
background:#000 url(img/titles_home_box_news.gif) no-repeat;
}
#box-home-products h2{
width:133px;
height:18px;
text-indent:-9999px;
position:relative;
left:20px;
background:#000 url(img/titles_home_box_products.gif) no-repeat;
}
body#home .box-content{
margin-top:20px;
width:290px;
height:140px;
overflow:hidden;
position:relative;
}

.box-middle-content{
margin-top:20px;
margin-left:20px;
width:300px;
height:140px;
overflow:hidden;
position:relative;
}
#box-home-news .box-content, #box-home-products .box-content{
margin-left:20px;
}
.box-description{
width:180px;
overflow:hidden;
position:absolute;
top:0;left:110px;
}

a#home-box-products-left{
width:150px;height:70px;
display:block;
position:absolute;
left:0;top:0;
text-indent:-9999px;
background:#000 url(img/icon_box_cards.png) no-repeat 0 0;
}
a#home-box-products-left:hover{
background:#000 url(img/icon_box_cards.png) no-repeat 0 -70px;
}
a#home-box-products-right{
width:150px;height:70px;
display:block;
position:absolute;
left:150px;top:0;
text-indent:-9999px;
background:#000 url(img/icon_box_barcode.png) no-repeat 0 0;
}
a#home-box-products-right:hover{
background:#000 url(img/icon_box_barcode.png) no-repeat 0 -70px;
}

.box-readmore{
position:absolute;
right:0;bottom:20px;
color: #56d5fe;
}

.box-readmore a:link,.box-readmore a:visited{
width: 12px; height: 9px;
color: #56d5fe;
background: #000 url(img/arrow-next.gif) no-repeat 100% 50%;
padding-right: 18px;
text-decoration: none;
}
.box-readmore a:hover, .box-readmore a:active{
color: #FDB813;
background: #000 url(img/arrow-next-hover.gif) no-repeat 100% 50%;
}
/* ----------------------------------------------------
=Home page scrollable news what's new
-------------------------------------------------------*/
/* root element for scrollable */
body#home .vertical {  
	/* required settings */
	position:relative;
	overflow:hidden;	
	/* vertical scrollers have typically larger height than width */	
	height: 118px;	 
	width: 290px;	
}

/* root element for scrollable items */
body#home .items {	
	position:absolute;
	top:0;
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
}

/* single scrollable item */
body#home .items div {
	height:140px;
}

/* elements inside single item */
body#home .items img {
	width: 92px;
	height:70px;
	position:absolute;
	left:0;top:0;
}

body#home .items .box-news-description{
width:168px;
position:absolute;
left:110px;top:0;
/*margin-left:20px;
float:right;*/
}

body#home .items-news{
width: 280px;
height:140px;
position:relative;
}

/* readmore link for scrollable */
#box-home-news .box-readmore{
color: #56d5fe;
position:absolute;
right:0; bottom:20px;
text-align:right;
}

/* position and dimensions of the navigator */ 
body#home .navi {  
    height:20px; 
	position:absolute;
	left:0px;bottom:0px;
} 
 
 
/* items inside navigator */ 
body#home .navi a { 
    width:8px; 
    height:8px; 
    float:left; 
    margin:3px; 
    background: url(img/navigator.png) 0 0 no-repeat; 
    display:block; 
    font-size:1px; 
} 
 
/* mouseover state */ 
body#home .navi a:hover { 
    background-position:0 -8px;       
} 
 
/* active state (current page state) */ 
body#home .navi a.active { 
    background-position:0 -16px;      
}



/* ----------------------------------------------------
=Products & Solutions
-------------------------------------------------------*/
body#products #banner{
width:980px;
height: 245px;
}
body#products #content{
background:#000;
margin-top:10px;
position:relative;
}
h2#title-products{
width:980px;height:30px;
background: transparent url(img/titles_products.png) no-repeat 0 0;
text-indent:-9999px;
}
#content-products-left {
	width:650px;
	margin:30px 0 20px 20px;
}
#content-products p {
	margin:12px 0;
}
/* ----------------------------------------------------
=Services & Support
-------------------------------------------------------*/
body#services #banner{
width:980px;
height: 245px;
}
body#services #content{
background:#000;
margin-top:10px;
position:relative;
}
h2#title-services{
width:980px;height:30px;
background: transparent url(img/titles_services.png) no-repeat 0 0;
text-indent:-9999px;
}
#content-services-left {
	width:650px;
	margin:30px 0 20px 20px;
}
.box-services{
margin-bottom:30px;	
}

p.services-p{
margin-bottom:15px;	
}
/* ----------------------------------------------------
=About Us
-------------------------------------------------------*/
body#about #banner{
width:980px;
height: 245px;
}
body#about #content{
margin-top:10px;
position:relative;
}
h2#title-about{
width:980px;height:30px;
background: transparent url(img/titles_about-us.png) no-repeat 0 0;
text-indent:-9999px;
}

#content-about p {
	margin:12px 0;
}
#content-about-left {
	width:650px;
	margin:30px 0 20px 20px;
}
#content-about-right {
	width:280px;
	position:absolute;
	right:0;top:40px;
}

/* ----------------------------------------------------
=Contact
-------------------------------------------------------*/
body#contact #banner{
width:980px;
height: 245px;
}
body#contact #content{
background:#000;
margin-top:10px;
position:relative;
}
h2#title-contact{
width:980px;height:30px;
background: transparent url(img/titles_contact.png) no-repeat 0 0;
text-indent:-9999px;
}
#content-contact-left {
	width:240px;
	margin:30px 0 20px 20px;
	border-right:1px solid #7e8f95;
}
#content-contact-left p{
	margin:10px 0px;
}
#content-contact-right {
/*	width:700px;
	position:absolute;
	left:320px;top:60px;*/
	width:680px;
	position:absolute;
	left:300px;top:60px;
}
a#link-email:link, a#link-email:visited{
color:#99e5ff;
text-decoration:none;
border-bottom:1px dotted #99e5ff;
}
a#link-email:hover, a#link-email:active{
color:#FDB813;
border:0;
}
.icon-contact{
padding-right:5px;
vertical-align:bottom;
}
#response{
	padding-left:22px;
	background:transparent url(img/icon_bubble.png) no-repeat 0 50%;
}

/*=map*/
#map-wrapper{
	width:980px;height:160px;
	position:relative;
	background-color:#333;
	margin-bottom:30px;
}
#map-container{
	width:960px;height:140px;
	position:absolute;
	left:10px;top:10px;
}


/* ----------------------------------------------------
=Form
-------------------------------------------------------*/
/* form styles */

form {
	text-align: left;
}

fieldset {
	margin: 0;
	border: 0;
	padding: 0;
}

fieldset#form-left{
width:240px;
float:left;
}

fieldset#form-right{
width:422px;
float:left;
}

fieldset#form-right-right{
	float:right;
}

form label {
	display: block;
	width: 420px;
	font-size: 12px;
	line-height: 14px;
	padding: 0px 0px 12px 0px;
}

form input {
	display: block;
	margin-top: 3px;
	background-color:#262e34;
	color:#FFF;
	border:1px solid #666;
}

form input:hover, form input:focus, textarea:hover, textarea:focus {
	background-color:#000;
}

form input#submit, form input#reset{
	display:inline;
	margin-left:10px;
	border:1px solid #333;
	background-color:#666;
	width:6em;
	color:#fff;
	outline:none;
}
form input#submit:hover, form input#reset:hover{
	background-color:#fdb813;
	color:#000;
}

form select {
	float: left;
	display: block;
}

form label.field-name,
form label.field-phone,
form label.field-email {
	clear: left;
	float: left;
	margin: 0px 20px 0px 0px;
	width: 200px;
}

form label.field-name input,
form label.field-email input,
form label.field-phone input {
	float: left;
	width: 200px;
	padding: 0px;
}

textarea {
	display: block;
	margin-top: 3px;
	width:420px;
	height:114px;
	background-color:#262e34;
	color:#FFf;
	border:1px solid #666;
}

/*-----------------------------------------------------
=Footer Links
-------------------------------------------------------*/
#footer p {
color:#888;
}
#footer-links{
font-size:1.2em;
color:#ccc;
}

#footer-links a:link, #footer-links a:visited{
	text-decoration:none;
	color:#888;
	padding:0 8px;
}
#footer-links a:hover, #footer-links a:active{
	color:#FFF;
	background-color:#111;
}
/* ----------------------------------------------------
=Typography
-------------------------------------------------------*/
body{
	font-size:62.5%;
	font-family: Arial, Helvetica, sans-serif;
	color:#FFF;
}
#content{
	font-size:1.3em; /*10px x 1.2em = 12px */
	line-height:1.5;
}
#scroll{
	color:#000;
}
p{
margin:0;	
}
p#copyright{
margin:0;
padding-top:10px;
line-height:1.0;
font-size:0.9em;
color: #666;
}

.subtitle{
	color:#FFF;
	font-size:1.1em;
	font-weight:bold;
	line-height:1.6;
	border-bottom:1px solid #333;
	margin-bottom:20px;
}
.bold{
	font-weight:bold;
}

.italic-orange{
	font-style:italic;
	color:#FDB813;
}

.orange{
	color:#FDB813;
}
.italic{
	font-style:italic;
}