/*                         Trikoder.net CSS Document
                              Copyright (c) 2010.

                         ......                  ....
                       . .OOOO,..  ........    .IOOOO..
                       .OOOOOOOO.  ..OOOO$.    OOOOOOOO
                       ?OOO..OOO...OOOOOOOOO...OOO..OOO..
                       +OOO....  .OOOOOOOOOOO....  .OOO.
                 ... ...OOOO...  +OOOOOOOOOOO.....~OOOO......
               ...OOOOO  OOOOOO..?OO.ZOOO=~OO...OOOOO?..OOOOO..
               ..OOOOOO  ..=OOOOOOOOOOOOOOOOOOOOOOO.....OOOOOO.
               .+OO7...    ...:OOOOOOOOOOOOOOOOO... .  ....7OO.
               ..OOO...     .....ZOOOOOOOOOOO7.....    ....OOO.
               ..~OOOOOO77$OOOOOOOOOOOOOOOOOOOOOOOOO7?7OOOOOO..
                   :OOOOOOOOOOOOO...OOOIOO?..,OOOOOOOOOOOOO=.
                   .................OOO.OOO..................
                         .O..    ..OOO=.OOOO.     .=7..
                       .,OOO.    .OOOO...OOOZ..  ..OOO.
                       .OOO... ..OOOO    .OOOO...  +OOO
                       .OOO$.  ZOOOO.    ..OOOO?   OOO$
                       ..OOOOOOOOO...      ..OOOOOOOOO
                         ..OOOO?...          . $OOO$...

*/


* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	outline: none;
}

@font-face {
	font-family: 'FuturaCEBold';
	src: url('../fonts/FuturaCE-Bold.eot');
	src: local('Futura CE Bold'), local('FuturaCE-Bold'), url('../fonts/FuturaCE-Bold.woff') format('woff'), url('../fonts/FuturaCE-Bold.otf') format('opentype'), url('../fonts/FuturaCE-Bold.svg#FuturaCE-Bold') format('svg');
}


html,
body {
	    width: 100%;
}

body {
	background: url(../images/bg1.jpg) top left fixed no-repeat #000000;
}

a, a:visited, a:hover {
	text-decoration: none;
}

img {
	border: 0 none;
}

textarea,
select,
input {
	resize: none;
	outline: none; 
}

.silver {
	color: #636363;
}

.clear_both {
	clear: both !important;
	display: block !important;
}

.small {
	font-size: 10px !important;
}

.nobmarg {
	margin-bottom: 0;
}

.overflow {
	overflow: hidden;
}

#tooltip {
	position: absolute;
	background: #000000;
	padding: 5px;
	color: #FFFFFF;
	display: none;
	text-transform: uppercase;
	z-index: 50;
}

#tooltip h3 {
	font-size: 10px;
	font-weight: bold;
}

#top_info {
	width: 100%;
	height: 30px;
	background-color: #000000;
	color: #FFFFFF;
	overflow: hidden;
	list-style: none outside;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}

#top_info li {
	float: left;
	font-size: 10px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
}

#top_info li .silver {
	text-transform: uppercase;
	padding-right: 5px;
}

#top_info a,
#top_info a:visited {
	color: #F36E00;
}

#top_info a:hover {
	color: #636363;
}

#container {
	min-width: 1000px;
	height: 920px;
	overflow: hidden;
	color: #FFFFFF;
	position: relative;
	top: 30px;
	left: 0;
	z-index: 10;
}

#bg_boxes {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}

#bg_boxes .bg_row {
	width: 2560px;
	height: 115px;
	overflow: hidden;
}

#bg_boxes .trans {
	background-color: #000000;
	width: 166px;
	height: 115px;
	float: left;
	display: inline;
}

.opacity_85 { filter: alpha(opacity=85); -moz-opacity: .85; opacity: .85; }
.opacity_80 { filter: alpha(opacity=80); -moz-opacity: .80; opacity: .80; }
.opacity_75 { filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; }
.opacity_70 { filter: alpha(opacity=70); -moz-opacity: .70; opacity: .70; }
.opacity_65 { filter: alpha(opacity=65); -moz-opacity: .65; opacity: .65; }
.opacity_60 { filter: alpha(opacity=60); -moz-opacity: .60; opacity: .60; }
.opacity_55 { filter: alpha(opacity=55); -moz-opacity: .55; opacity: .55; }
.opacity_50 { filter: alpha(opacity=50); -moz-opacity: .50; opacity: .50; }
.opacity_45 { filter: alpha(opacity=45); -moz-opacity: .45; opacity: .45; }
.opacity_40 { filter: alpha(opacity=40); -moz-opacity: .40; opacity: .40; }
.opacity_35 { filter: alpha(opacity=35); -moz-opacity: .35; opacity: .35; }
.opacity_30 { filter: alpha(opacity=30); -moz-opacity: .30; opacity: .30; }
.opacity_25 { filter: alpha(opacity=25); -moz-opacity: .25; opacity: .25; }
.opacity_20 { filter: alpha(opacity=20); -moz-opacity: .20; opacity: .20; }
.opacity_15 { filter: alpha(opacity=15); -moz-opacity: .15; opacity: .15; }
.opacity_10 { filter: alpha(opacity=10); -moz-opacity: .10; opacity: .10; }
.opacity_5 { filter: alpha(opacity=5); -moz-opacity: .05; opacity: .05; }
.opacity_0 { filter: alpha(opacity=5); -moz-opacity: .05; opacity: .05; }

#logo {
	position: absolute;
	z-index: 10;
	width: 166px;
	height: 115px;
	text-align: center;
	top: 115px;
	left: 0;
}

.opacity_box {
	background-color: #000000;
	filter: alpha(opacity=65);
	-moz-opacity: .65;
	opacity: .65;
	width: 100%;
	height: 100%;
	position: absolute !important;
	overflow: hidden;
	z-index: 5 !important;
	margin: 0 !important;
	padding: 0 !important;
	left: 0;
	top: 0;
}

.opacity_box_full {
/*
	filter: alpha(opacity=85); -moz-opacity: .85; opacity: .85;
*/	
}

#logo h1,
#nav li a,
#selected_works *,
h4.box_title,
a.to_works,
.inner,
#follow_us h4,
#follow_us a,
#content *,
#error_404 *,
#work *,
#clients *,
#office_hours *,
#company_facts *,
#thumbnails * {
	position: relative;
	z-index: 20;
}

#nav {
	color: #FFFFFF;
	position: absolute;
	top: 230px;
	left: 166px;
	width: 166px;
	height: 115px;
	z-index: 10;
	list-style: none outside;
}

#nav li {
	font-size: 11px;
	text-transform: uppercase;
	display: inline;
}

#nav li a {
	color: #FFFFFF;
	display: block;
	background-image: url(../images/navigation_sprite.png);
	height: 21px;
}

#nav li a#technology_item		{ background-position: 3px 0; margin-top: 5px; }
#nav li a#suited4u_item 		{ background-position: 3px -23px; }
#nav li a#work_item 			{ background-position: 3px -46px; }
#nav li a#about_item 			{ background-position: 3px -69px; }
#nav li a#contact_item 			{ background-position: 3px -91px; }

#nav li a#technology_item:hover, #nav li a#technology_item.selected	{ background-position: 3px -115px; }
#nav li a#suited4u_item:hover, #nav li a#suited4u_item.selected		{ background-position: 3px -138px; }
#nav li a#work_item:hover, #nav li a#work_item.selected				{ background-position: 3px -161px; }
#nav li a#about_item:hover, #nav li a#about_item.selected			{ background-position: 3px -184px; }
#nav li a#contact_item:hover, #nav li a#contact_item.selected		{ background-position: 3px -206px; }

#nav li a span {
	display: none;
}

h4.box_title span,
a.to_works,
#follow_us h4,
#clients h4 span {
	background-image: url(../images/text_sprite.png);
	background-repeat: no-repeat;
}

#intro {
	position: absolute;
	width: 584px;
	height:  150px;
	padding: 40px;
	top: 115px;
	left: 332px;
	z-index: 20;
}

#intro h2,
#intro h2 a {
	font-family: "FuturaCEBold", Arial, Helvetica, sans-serif;
	font-size: 29px;
	text-transform: uppercase;
}

#intro h2 a,
#intro h2 a:visited {
	color: #F36E00;
}

#intro h2 a:hover {
	color: #636363;
}

#selected_works {
	position: absolute;
	z-index: 20;
	width: 332px;
	height: 115px;
	top: 460px;
	left: 664px;
}

#works_spinner {
	position: relative;
	z-index: 20;
	width: 40px;
	text-align: center;
	float: left;
	margin-top: 10px;
}

#selected_works .navi,
#testimonials .navi {
	float: left;
	overflow: hidden;
	margin-top: 10px;
	padding-left: 5px;
}

#testimonials .navi {
	position: relative;
	z-index: 20;
}

#selected_works .opacity_box {
	height: 115px;
}

#selected_works .previous,
#selected_works .next,
#testimonials .previous,
#testimonials .next {
	background: url(../images/arrows.png) no-repeat top left;
	width: 10px;
	height: 19px;
	display: block;
	margin: 0 5px;
	float: left;
}

#selected_works .next,
#testimonials .next {
	background-position: right;
}

#selected_works .previous span,
#selected_works .next span,
#testimonials .previous span,
#testimonials .next span {
	display: none;
}

#selected_works a,
#selected_works a:visited {
	color: #F36E00;
}

#selected_works a:hover {
	color: #636363;
}

#selected_works h5 {
	margin: 3px 0;
	font-size: 13px;
}

h4.box_title {
	float: left;
	background: url(../images/title_bg.gif) repeat;
	margin-left: -5px;
	margin-top: 5px;
	font-size: 12px;
}

h4#selected_title span {
	background-position: 8px -30px;
	display: block;
	width: 120px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

h4#technology_overview span {
	background-position: 10px -175px;
	display: block;
	width: 160px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

h4#available_technologies {
	clear: both;
}

h4#available_technologies span {
	background-position: 12px -145px;
	display: block;
	width: 170px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

a.to_works {
	width: 80px;
	height: 15px;
	float: right;
	margin-right: 15px;
	margin-top: 13px;
	display: block;
	text-indent: -9999em;
	overflow: hidden;
	background-position: -5px -97px;
}

a.to_works:hover {
	background-position: -5px -127px;
}

.inner {
	padding: 10px 20px 15px 20px;
	clear: both;
}

#selected_works .inner {
	height: 55px;
	padding: 10px 12px 15px 12px;
}

#selected_works h3 {
	font-size: 25px;
	margin-bottom: 2px;
}

#selected_works p {
	color: #75756F;
	font-size: 11px;
}

#testimonials {
	position: absolute;
	z-index: 20;
	width: 332px;
	height: 230px;
	top: 575px;
	left: 332px;
}

#testimonials a,
#testimonials a:visited {
	color: #F36E00;
}

#testimonials a:hover {
	color: #636363;
}

#testimonials h3 {
	font-size: 13px;
	line-height: 16px;
	height: 16px;
	overflow: hidden;
	position: relative;
	z-index: 20;
	clear: left;
	padding: 10px 20px 3px 20px;
}

#testimonials .person_position {
	position: relative;
	z-index: 20;
	font-size: 11px;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0 20px;
}

#testimonials h4.box_title span {
	background-position: 8px -60px;
	display: block;
	width: 108px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

#testimonials #testimonial_text_wrap {
	position: relative;
	z-index: 20;
	padding: 10px 20px 20px 20px;
}

#testimonials #testimonial_text {
	height: 122px;
	overflow: auto;
	padding-right: 10px;
}

#testimonials p {
	color: #75756F;
	font-size: 11px;
	font-weight: bold;
	line-height: 15px;
}

#follow_us {
	position: absolute;
	z-index: 20;
	width: 166px;
	height: 115px;
	top: 690px;
	left: 830px;
}

#follow_us h4 {
	padding: 3px;
	background-position: -2px -2px;
	text-indent: -9999em;
	overflow: hidden;
	position: relative;
	width: 69px;
}

#follow_us a {
	color: #F36E00;
	float: left;
	width: 58px;
	padding-top: 47px;
	display: block;
	font-size: 11px;
	text-align: center;
	margin: 10px 0 0 17px;
}

#follow_us a.twitter {
	background: url(../images/twitter.png) no-repeat top left;
}

#follow_us a.facebook {
	background: url(../images/facebook.png) no-repeat top left;
}

#follow_us a:hover {
	color: #636363;
}

#content {
	width: 664px;
	position: absolute;
	z-index: 20;
	left: 332px;
	top: 115px;
}

#content .text_wrap {
	padding: 30px;
	clear: both;
}

#content .with_nav {
}

#content p strong {
/*	color: #F36E00;
	font-weight: normal;*/
}

#content ul.left_navigation_content {
	float: left;
	list-style: none outside;
	width: 140px;
	margin-top: 3px;
}

#content ul.left_navigation_content li {
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 11px;
	line-height: 1.25em;
}

#content ul.left_navigation_content li a {
	display: block;
}

#content a,
#content a:visited {
	color: #FFFFFF;
}

#content a.selected,
#content a:hover {
	color: #F36E00;
}

#content a.in_content {
	font-weight: bold;
	font-size: 11px;
}

#content ul.navigation_above_content {
	list-style: none outside;
	float: left;
	margin-top: 5px;
}

#content ul.navigation_above_content li {
	float: left;
	font-size: 11px;
	font-weight: bold;
	line-height: 29px;
	padding-left: 22px;
}

.available_tech div,
#content .with_nav div {
	float: right;
}

.scroll_text {
	overflow: auto;
	float: right;
	padding-right: 25px;
	width: 405px;
}

.scroll_wide_text {
	overflow: auto;
	float: left;
	width: 574px;
	padding-right: 25px;
}

#content p {
	color: #C3C3C3;
	font-size: 15px;
	line-height: 22px;
	margin-bottom: 21px;
}

#work {
	width: 498px;
	height: 345px;
	position: absolute;
	left: 332px;
	top: 115px;
	z-index: 30;
}

#work .work_img {
	z-index: 15;
	padding: 12px;
}

#thumbnails {
	width: 498px;
	height: 115px;
	overflow: hidden;
	position: absolute;
	top: 575px;
	left: 332px;
	z-index: 20;
}

#thumbnails ul {
	list-style: none outside;
	height: 115px;
	overflow: hidden;
}

#thumbnails ul li {
	height: 115px;
}

#thumbnails ul li a {
	margin: 12px 12px 12px 0;
	float: left;
	filter: alpha(opacity=20);
	-moz-opacity: .20;
	opacity: .20;
}

#thumbnails ul li a img {
	width: 150px;
	height: 91px;
}

#thumbnails ul li a.selected {
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}

#clients {
	width: 664px;
	height: 230px;
	position: absolute;
	top: 805px;
	left: 166px;
	z-index: 30;
}

#clients .opacity_box {
	height: 230px;
}

#clients h4 {
	background: url(../images/title_bg.gif) repeat;
	float: right;
	margin-right: -5px;
	margin-top: 5px;
	font-size: 12px;
}

#clients h4 span {
	background-position: 8px -205px;
	display: block;
	width: 72px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

#clients .clients_wrap {
	padding: 5px 18px 15px 18px;
	height: 176px;
	clear: right;
	overflow: hidden;
}

#clients ul {
	list-style: none outside;
	float: left;
	width: 176px;
	padding-right: 15px;
}

#clients li {
	font-size: 10px;
	font-weight: bold;
	color: #75756F;
	margin-bottom: 4px;
	line-height: 12px;
}

#clients li a,
#clients li a:visited {
	color: #FFFFFF;
}

#clients li a.selected,
#clients li a:hover {
	color: #F36E00;
}

h4#suited4u span {
	background-position: 8px -235px;
	display: block;
	width: 86px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

h4#profile span {
	background-position: 8px -295px;
	display: block;
	width: 68px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

#office_hours {
	width: 166px;
	height: 115px;
	position: absolute;
	top: 460px;
	left: 166px;
	z-index: 30;
}

h4#office_hours_title span {
	background-position: 8px -265px;
	display: block;
	width: 102px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

#office_hours p {
	font-size: 13px;
	font-weight: bold;
}

#office_hours .inner {
	padding: 25px;
}

#company_facts {
	width: 166px;
	height: 690px;
	position: absolute;
	top: 230px;
	left: 830px;
	text-align: right;
	z-index: 30;
}

#company_facts h4 {
	background: url(../images/title_bg.gif) repeat;
	float: right;
	margin-right: -5px;
	margin-top: 5px;
	font-size: 12px;
}

#company_facts h4 span {
	background-position: 0px -325px;
	display: block;
	width: 117px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
	text-align: left;
}

#company_facts h2 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
}

#company_facts ul {
	list-style: none outside;
	color: #75756F;
	font-size: 11px;
	margin-bottom: 25px;
}

#company_facts li {
	line-height: 15px;
}

#company_facts p {
	color: #75756F;
	font-size: 11px;
	margin-bottom: 25px;
	line-height: 16px;
}

#company_facts p.small {
	line-height: 14px;
}

h4#form_title span {
	background-position: 10px -355px;
	display: block;
	width: 66px;
	height: 30px;
	overflow: hidden;
	text-indent: -9999em;
}

.contact_form input {
	border: 0 none;
	background: url(../images/form_bg.png) repeat-x;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	width: 272px;
	line-height: 31px;
	height: 31px;
	margin-top: 25px;
}

.contact_form textarea {
	border: 0 none;
	background: url(../images/form_bg.png) top left repeat scroll;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	width: 272px;
	height: 217px;
	margin-top: 25px;
	line-height: 31px;
	overflow-y: auto;
}

.contact_form input.warning,
.contact_form textarea.warning {
	color: #F36E00;
}

.contact_form input.submit_button {
	font-size: 15px;
	color: #F36E00;
	font-weight: bold;
	background: none;
	float: right;
	width: auto;
}

.contact_form input.submit_button:hover {
	color: #636363;
	cursor: pointer;
}

#error_404 {
	width: 332px;
	height: 115px;
	position: absolute;
	top: 230px;
	left: 332px;
	z-index: 30;
}

#error_404 h3 {
	font-weight: normal;
	font-size: 28px;
	margin: 15px 0;
}

#error_404 a.mid {
	font-size: 12px;
	font-weight: bold;
}

#error_404 a,
#error_404 a:visited {
	color: #F36E00;
}

#error_404 a:hover {
	color: #636363;
}

#work_navigation {
	position: absolute;
	z-index: 6;
}

#work_navigation span {
	display: none;
}

#work_navigation #nav_left {
	position: absolute;
	left: 302px;
	top: 623px;
	z-index: 10;
	background: url(../images/arrows.png) no-repeat left top;
	display: block;
	height: 19px;
	width: 10px;
	cursor: pointer;
}

#work_navigation #nav_right {
	position: absolute;
	left: 850px;
	top: 623px;
	z-index: 10;
	background: url(../images/arrows.png) no-repeat right bottom;
	display: block;
	height: 19px;
	width: 10px;
	cursor: pointer;
}



.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 20;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #666666;
	filter: alpha(opacity=30);
	-moz-opacity: .30;
	opacity: .30;
}
.jScrollPaneDrag {
	position: absolute;
	background: #ffb400;
	cursor: pointer;
	overflow: hidden;
	filter: alpha(opacity=90);
	-moz-opacity: .90;
	opacity: .90;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}

a.jScrollArrowUp:hover {
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	height: 9px;
}

a.jScrollArrowDown:hover {
}

a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
}