/*------------------------------------------------------------------------------*/
/*	 WEBSITE BODY					*/
/*------------------------------------------------------------------------------*/

/*main color  #58595B*/

@font-face {
    font-family: 'CodeBold';
    src: url('../fonts/code_bold-webfont.eot');
    src: url('../fonts/code_bold-webfont.eot?#iefix') format('eot'),
         url('../fonts/code_bold-webfont.woff') format('woff'),
         url('../fonts/code_bold-webfont.ttf') format('truetype'),
         url('../fonts/code_bold-webfont.svg#webfontTbP5AEmN') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'CodeLight';
    src: url('../fonts/code_light-webfont.eot');
    src: url('../fonts/code_light-webfont.eot?#iefix') format('eot'),
         url('../fonts/code_light-webfont.woff') format('woff'),
         url('../fonts/code_light-webfont.ttf') format('truetype'),
         url('../fonts/code_light-webfont.svg#webfontO0XsUNmm') format('svg');
    font-weight: normal;
    font-style: normal;}

body	{ margin-top: 0px; text-align:center; background: url(../imgs/bg.jpg) center top no-repeat #1E1E1E fixed; font-family: Arial, Century Gothic, Verdana, sans-serif; font-size: 12px;}
.main	{ width: 965px; margin: 0 auto; text-align: left; color:#808184;}
#plate		{ margin:0px ; padding:10px 20px 20px 20px; height:600px; overflow:auto; width: 630px; text-align: left;}
#plate p	{ padding-bottom: 40px;}

.clear	{ clear: both;}
.cl30	{ clear: both; height: 30px;}
.cl50	{ clear: both; height: 50px;}

h1	{ color: #F8971D; font-size: 2.2em; padding-bottom: 15px;}
h2	{ color: #CCC; font-size: 1.2em; margin-bottom: 10px; }
h4	{ color: #ddd; font-size: 1.5em; padding-bottom: 10x;}

p		{ margin-bottom: 10px;}
.b30	{ padding-bottom: 30px;}

a:link, a:active, a:visited { color: #fff; text-decoration: none;}
a:hover						{ color: #F8971D; text-decoration: none;}

a.on:link, a.on:active, a.on:visited	{ color: #F8971D; text-decoration: none;}
a.on:hover								{ color: #F8971D; text-decoration: none;}

a.orange:link, a.orange:active, a.orange:visited	{ color: #58595B; text-decoration: none;}
a.orange:hover										{ color: #F8971D; text-decoration: none;}

a.orange2:link, a.orange2:active, a.orange2:visited { color: #58595B; text-decoration: none;}
a.orange2:hover										{ color: #F8971D; text-decoration: none;}

a.orange3:link, a.orange3:active, a.orange3:visited { color: #ffffff; text-decoration: none;}
a.orange3:hover										{ color: #F8971D; text-decoration: none;}

a.grey:link, a.grey:active, a.grey:visited 			{ color: #808184; text-decoration: none;}
a.grey:hover										{ color: #F8971D; text-decoration: none;}

.orange			{ color: #F8971D; text-decoration: none;}

.title_float	{ float: left; padding-right: 10px;}

.arrow	{ background:url(../imgs/arrow_orange_L.png); margin-right: 10px; height: 14px; width: 110px; color: #000; text-align: left; font-size: 0.8em; margin-bottom: 10px; padding-left: 10px;}




/*Side Bar*/

.leftmenu								{ width: 270px; float: left; text-align:right;}
.leftmenu .menu 						{ width: 240px; margin: 0; position: fixed;}
.leftmenu .menu .logo					{ margin-top: 30px;}
.leftmenu .menu .navbar					{ margin-top: 0px; padding-bottom: 200px;}
.leftmenu .menu .navbar div				{ width: 240px; display:inline; display: block;}
.leftmenu .menu .navbar div.title		{ font-size: 25px; padding: 0px 0; cursor:pointer;}
.leftmenu .menu .navbar div.content		{ font-size: 1em;  padding: 10px 0; display:none;}


.leftmenu .contact						{ text-align: right; color: #58595B; position: fixed; bottom: 25px; border-top: 1px dotted #555; width: 240px; margin-bottom: 20px;}
.leftmenu .contact .email				{ font-size: 1.2em; padding-top: 10px;}
.leftmenu .contact .phone				{ font-size: 1.8em; margin-bottom: 20px;}
.leftmenu .contact .legal				{ font-size: 0.9em; margin-bottom: 10px;}
.leftmenu .contact .link				{ font-size: 1.0em;}

li.nav_item		{ list-style:none; text-align:right;}
.dropdown		{ display:none;	padding-top: 20px; width: 245px; border-top: dotted 1px #555; border-bottom: dotted 1px #555;}
.dropdown li	{ margin: 0px; padding:0px 5px 5px 0px;}

ul ol {    margin-left: 0px;}
ul ul {    margin-bottom: 20px;}



/*Main*/

.content						{ width: 690px; margin: 0 0 0 0px; float: right;}
.content .banner				{ height: 58px; padding-top: 32px; text-align: right; padding-right: 230px; font-size: 0.95em;}
.content .ban_general			{ height: 58px; padding-top: 32px; text-align: right; padding-right: 230px; font-size: 0.95em; background:url(../imgs/title-general.png);}
.content .ban_company			{ height: 58px; padding-top: 32px; text-align: right; padding-right: 230px; font-size: 0.95em; background:url(../imgs/title-comp.png);}
.content .slogan				{ color: #F8971D; font-size: 2.7em; font-family: CodeLight; margin-top: 50px; margin-bottom: 15px;}
.content .about		{ width: 370px; margin: 0 40px 0 0; float: left;}
.content .about h1	{ color: #F8971D; font-size: 2.2em; padding-bottom: 15px; height: 55px;}

.content .news_bar		{ width: 280px; margin: 0 0 0 0; float: left;}
.content .news_bar h1	{ color: #F8971D; font-size: 2.2em; padding-bottom: 15px; height: 55px;}
.content .news_bar .news_item { margin-bottom: 25px;}
.content .news_bar .news_item .title { color:#58595B; font-size: 1.3em; margin-bottom: 10px;}
.content .news_bar .news_item .tag	{ float:left; padding-right: 10px;}
.content .news_bar .news_item .date	{ color:#58595B; font-size: 0.8em; margin-bottom: 2px;}
.content .news_con	{ color: #6D6E70; margin-bottom:5px;}


/*.content .client	{ margin-top: 20px; background: url(../imgs/logo_bg.png) #000 center no-repeat; height: 120px;}*/

.content .project			{ margin-top: 40px;}
.content .project .pre_btn	{ width: 108px; height: 17px; background: url(../imgs/back_tag.png); color:#FFF; font-size: 0.8em; padding-top: 3px; float:left; text-align: center; margin-bottom: 15px;}
.content .project .next_btn	{ width: 108px; height: 17px; background: url(../imgs/next_tag.png) right; color:#FFF; font-size: 0.8em; padding-top: 3px; float:right; text-align: center; margin-bottom: 15px;} 
.content .project .info		{ float:left; width: 210px; margin-left: 10px;}
.content .project .info	h2	{ color: #CCC; font-size: 1.2em; margin-bottom: 2px;}
.content .project .info p	{ margin-bottom: 15px; color: #808184; font-size:0.9em;}
.content .project .info	div	{ float:left; margin-right: 5px;}
.content .project .main		{ float:left; width: 450px; padding-left: 10px; font-size: 1.1em; border-left: dotted 1px #555;}
.content .project .main img { padding-bottom: 10px;}

/*.content .contact			{ margin-top: 50px;}
.content .disclaimer		{ width: 375px; border-bottom:1px solid #F60; padding-bottom: 5px; font-size: 0.9em;}*/


.content .work								{ margin-top: 40px;}
.content .work .preview_new					{ width: 690px; height: 290px; background:url(../imgs/project_bg_new2.png) top no-repeat;}
.content .work .preview_new .p_left			{ width: 100%; position: relative;}
.content .work .preview_new .p_photo		{ padding-top: 20px; padding-left: 120px; position: absolute; width: 570px;}
.content .work .preview_new .p_photo a img			{ filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3;}
.content .work .preview_new .p_photo a img:hover	{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}
.content .work .preview_new .p_logo			{ width: 200px; padding-left: 5px; height: 73px; padding-top: 12px; margin-top: 145px; margin-left: 5px; position: absolute; background: url(../imgs/porject_logo_bg.png) no-repeat;}
.content .work .preview_new .p_name			{ padding-top: 240px; font-size: 1.3em; float: left; width: 590px; padding-left: 10px;}
.content .work .preview_new .p_link			{ padding-top: 240px; font-size: 1.5em; float: left; width: 80px; text-align:right; padding-right: 10px;}

.content .work .preview						{ width: 690px; height: 290px; background:url(../imgs/project_bg2.png) top no-repeat;}
.content .work .preview .p_left				{ width: 100%; position: relative;}
.content .work .preview .p_photo			{ padding-top: 20px; padding-left: 120px; position: absolute; width: 570px;}
.content .work .preview .p_photo a img			{ filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3; opacity: 0.3;}
.content .work .preview .p_photo a img:hover	{ filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity: 1; opacity: 1;}
.content .work .preview .p_logo				{ width: 200px; padding-left: 5px; height: 73px; padding-top: 12px; margin-top: 145px; margin-left: 5px; position: absolute; background: url(../imgs/porject_logo_bg.png) no-repeat;}
.content .work .preview .p_name				{ padding-top: 240px; font-size: 1.3em; float: left; width: 590px; padding-left: 10px;}
.content .work .preview .p_link				{ padding-top: 240px; font-size: 1.5em; float: left; width: 80px; text-align:right; padding-right: 10px;}

.searchBlock {
	margin-top: 9px; display: block; background: url(../imgs/searchblock.gif) no-repeat 50% top; left: 0px; float: left; margin-left: 9px; width: 103px; position: relative; top: 0px; height: 17px
}
.searchBlock INPUT.seachPhrase {
	border-top-width: 0px! important; display: block; padding-left: 4px; border-left-width: 0px! important; font-size: 10px; left: 1px; border-bottom-width: 0px! important; padding-bottom: 0px; margin: 0px; width: 83px; color: #c8c8c8; padding-top: 0px; font-family: arial; position: absolute; top: 1px; height: 15px; background-color: transparent! important; border-right-width: 0px! important
}
.searchBlock INPUT.submit {
	border-top-width: 0px! important; padding-right: 0px; display: block; padding-left: 0px; border-left-width: 0px! important; font-size: 10px; left: 88px; border-bottom-width: 0px! important; padding-bottom: 0px; margin: 0px; width: 15px; color: #c8c8c8; padding-top: 0px; font-family: arial; position: absolute; top: 0px; height: 17px; background-color: transparent! important; border-right-width: 0px! important
}


/*Company*/

.content .why		{ margin-top: 40px; width: 100%;}
.content .aboutus	{ margin-top: 40px; width: 100%;}

.content .news						{ margin-bottom: 30px; margin-top: 40px; background:url(../imgs/news-bg.jpg) top right no-repeat;}
.content .news #demos				{ margin-top: 10px;}
.content .news .tags_btn			{ background:url(../imgs/arrow_orange.png); margin-right: 20px; height: 14px; width: 70px; color: #000; text-align:center; font-size: 0.8em; float: left;}
.content .news .news_item			{ padding: 40px 0px;border-bottom: dotted 1px #555; width: 450px;}
.content .news .news_item .title	{ color:#cdcdcd; font-size: 1.5em; margin-bottom: 10px;}
.content .news .news_item .tag		{ background:url(../imgs/arrow_orange.png); margin-right: 10px; height: 14px; width: 70px; color: #000; text-align:center; font-size: 0.8em; float: left;}
.content .news .news_item .date		{ color:#ababab; font-size: 0.8em; margin-bottom: 10px;}
.content .news .news_item .news_con	{ color: #fff; font-size: 0.9em;}

.content .clients						{ width: 100%; margin-top: 40px;}
.content .clients div					{ margin-bottom: 20px;}
.content .clients div .logo_box			{ width: 223px; border:1px solid #333; height:150px; float:left; background:#222; margin-right: 5px;}
.content .clients div .logo_box .logo	{ width: 203px; margin: 10px; background-color:#FFF; text-align:center; height: 75px; display: block; padding-top: 20px;}
.content .clients div .logo_box .name	{ text-align:center; color:#CCC; font-size: 0.9em;}

.content .service						{ margin-top: 40px; height: 600px; background:url(../imgs/career-bg.jpg) right bottom no-repeat;}
.content .service p						{ padding-bottom: 30px; padding-top: 50px; padding-right: 45%;}
.content .service .logo_box				{ width: 223px; border:1px solid #333; float:left; background:#222; margin-right: 5px;}
.content .service .logo_box .logo		{ width: 203px; background-color:#FFF; text-align:center; margin: 10px;}
.content .service .logo_box .content	{ width: 203px; height: 120px; padding: 10px; color:#CCC; font-size: 1em;}

.content .contactus					{ margin-top: 40px; width: 100%; background:url(../imgs/contact-bg.jpg) center right no-repeat;}
.content .contactus .contact_title	{ margin-left: 20px; float: left; width: 60px; line-height: 17px; color: #CCC;}
.content .contactus .contact_detail	{ margin-left: 80px; width: 300px; line-height: 17px; color:#f90;}
form#contactUsForm .fieldtitle01	{ padding-bottom: 5px; padding-right: 15px; line-height: 20px;float:left; padding-right: 20px;}
form#contactUsForm .fieldtitle		{ padding-bottom: 5px; padding-right: 15px; line-height: 20px;}
form#contactUsForm .textfield		{ color:#666; font-family:Arial, Helvetica, sans-serif; width: 164px;}
form#contactUsForm .longtextfield	{ color:#666; font-family:Arial, Helvetica, sans-serif; width: 355px;}
form#contactUsForm .selectbox		{ color:#666; font-family:Arial, Helvetica, sans-serif; width: 360px;}
form#contactUsForm .contentBox		{ color:#666; font-family:Arial, Helvetica, sans-serif; width: 355px; height: 100px;}
form#contactUsForm .btn				{ margin-top: 10px; margin-bottom: 15px; cursor:pointer;}
.red								{ DISPLAY: none; RIGHT: 0px; COLOR: #ff0000; POSITION: absolute;}

.loginErr	{color:#FF0000;}


/*General Info*/

.content .career	{ margin-top: 40px; background:url(../imgs/career-bg.jpg) center right no-repeat; width: 55%; padding-right: 45%;}
.content .admin		{ margin-top: 40px; width: 100%; background:url(../imgs/admin-bg.jpg) center right no-repeat; height: 450px;}
.content .terms		{ margin-top: 40px; width: 100%;}
.content .privacy	{ margin-top: 40px; width: 100%;}

.content .sitemap			{ margin-top: 40px; background:url(../imgs/sitemap-bg.jpg) center right no-repeat;}
.content .sitemap .title	{ padding-bottom: 10px; padding-left:2%;}
.content .sitemap .stitle	{ padding-left:2%; float: left; width: 37%;}