﻿/*
##########################
reset
##########################
*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, sub, sup, ol, ul, li, form, label, table, tr, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
p , ul, ol { display: block; }
/*
##########################
Computer Forge
##########################
*/
/*
engine
*/
a {
	text-decoration: none;
	outline: none;
}
a img { border: none; }
li { padding: 3px 0; }
ul { padding: 12px 40px; }
.bold { font-weight: bold; }
.clear { clear: both; }
.clearLeft { clear: left; }
.clearRight { clear: right; }
.cursorPointer { cursor: pointer; }
.displayBlock { display: block; }
.displayInline { display: inline; }
.displayNone { display: none; }
.floatLeft { float: left; }
.floatRight { float: right; }
.justify { text-align: justify; }
.paddingBottom6 { padding-bottom: 6px; }
.paddingBottom12 { padding-bottom: 12px; }
.marginBottom24 { margin-bottom: 24px; }
.textLeft { text-align: left; }
.textRight { text-align: right; }
.textCenter { text-align: center; }
.textIndent { text-indent: 25px; }
.border_radius_10{
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.whiteSpacePreWrap { white-space: pre-wrap; }
/*
colors
*/
.black { color: #000; }
.blue { color: #00b8f9; }
.orange { color: #f97b00; }
.grey333 { color: #333; }
.grey555 { color: #555; }
.grey888 { color: #888; }
.listOrange { list-style-image: url('../img/bullet_orange.png'); }
.listRed { list-style-image: url('../img/bullet_red.png'); }
.listGreen { list-style-image: url('../img/bullet_green.png'); }
.listBlue { list-style-image: url('../img/bullet_blue.png'); }
.listNumber { list-style-type: decimal; }
/*
main
*/
body {
	width: 100%;
	background: #fff url('../img/computerForgeSprite.png') 0 -2200px repeat-x;
	font-family: Verdana, Tahoma, Arial, sans-serif;
}
input, textarea {
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 100%;
}
/*top*/
.top {
	margin-top: 35px;
	height: 306px;
	background: url('../img/computerForgeSprite.png') 50% -407px no-repeat;
}
.top .inner {
	height: 306px;
	background: url('../img/computerForgeSprite.png') 50% -83px repeat-x;
}
.top .inner .extra {
	height: 20px;
	padding-top: 7px;
	width: 946px;
	margin: 0 auto;
}
.top .inner .extra .sitemap,
.top .inner .extra .favorite,
.top .inner .extra .mail {
	width: 18px;
	height: 18px;
	margin-right: 10px;
}
.top .inner .extra .sitemap { background: url('../img/computerForgeSprite.png') -299px -738px no-repeat; }
.top .inner .extra .favorite { background: url('../img/computerForgeSprite.png') -259px -739px no-repeat; }
.top .inner .extra .mail { background: url('../img/computerForgeSprite.png') -219px -736px no-repeat; }
.top .inner .extra .sitemap:hover { background-position: -299px -778px; }
.top .inner .extra .favorite:hover { background-position: -259px -779px; }
.top .inner .extra .mail:hover { background-position: -219px -776px; }
.top .inner .menuBar {
	width: 946px;
	height: 50px;
	margin: 0 auto;
	padding: 13px 0;
}
.top .inner .menuBar .logo {
	width: 316px;
	height: 50px;
	padding-left: 30px;
	background: url('../img/computerForgeSprite.png') 15px -3px no-repeat;
}
.top .inner .menuBar .menu {
	width: 600px;
	height: 32px;
	padding: 9px 0;
}
.top .inner .menuBar .menu .start,
.top .inner .menuBar .menu .about,
.top .inner .menuBar .menu .services,
.top .inner .menuBar .menu .startSelected,
.top .inner .menuBar .menu .aboutSelected,
.top .inner .menuBar .menu .servicesSelected { margin-right: 20px; }
.top .inner .menuBar .menu .start,
.top .inner .menuBar .menu .startSelected {
	width: 105px;
	height: 32px;
	background: url('../img/computerForgeSprite.png') -399px -866px no-repeat;
}
.top .inner .menuBar .menu .about,
.top .inner .menuBar .menu .aboutSelected {
	width: 145px;
	height: 32px;
	background: url('../img/computerForgeSprite.png') -399px -926px no-repeat;
}
.top .inner .menuBar .menu .services,
.top .inner .menuBar .menu .servicesSelected {
	width: 135px;
	height: 32px;
	background: url('../img/computerForgeSprite.png') -399px -986px no-repeat;
}
.top .inner .menuBar .menu .contact,
.top .inner .menuBar .menu .contactSelected {
	width: 125px;
	height: 32px;
	background: url('../img/computerForgeSprite.png') -399px -1046px no-repeat;
}
.top .inner .menuBar .menu .start:hover,
.top .inner .menuBar .menu .startSelected { background-position: -569px -866px; }
.top .inner .menuBar .menu .about:hover,
.top .inner .menuBar .menu .aboutSelected { background-position: -569px -926px; }
.top .inner .menuBar .menu .services:hover,
.top .inner .menuBar .menu .servicesSelected { background-position: -569px -986px; }
.top .inner .menuBar .menu .contact:hover,
.top .inner .menuBar .menu .contactSelected { background-position: -569px -1046px; }
.top .inner .slides {
	width: 900px;
	height: 200px;
	margin: 0 auto;
}
.top .inner .slides .left {
	width: 42px;
	height: 110px;
	margin: 42px auto 0;
	background: url('../img/computerForgeSprite.png') -4px -729px no-repeat;
}
.top .inner .slides .right {
	width: 42px;
	height: 110px;
	margin-top: 42px;
	background: url('../img/computerForgeSprite.png') -109px -729px no-repeat;
}
.top .inner .slides .left:hover { background-position: -9px -729px; }
.top .inner .slides .right:hover { background-position: -104px -729px; }
.top .inner .slides .main {
	width: 816px;
	height: 200px;
	/*padding: 0 40px;*/
}
.top .inner .slides .main .mask {
	width: 816px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.top .inner .slides .main .mask .leftMask {
	width: 40px;
	height: 200px;
	position: absolute;
	background: url('../img/computerForgeSprite.png') 0 -900px no-repeat;
	top: 0;
	left: -1px;
}
.top .inner .slides .main .mask .rightMask {
	width: 40px;
	height: 200px;
	position: absolute;
	background: url('../img/computerForgeSprite.png') -40px -900px no-repeat;
	top: 0;
	right: -1px;
}
.top .inner .slides .main .mask #slideBox { position:absolute; }
.top .inner .slides .main .mask #slideBox span {
	width: 736px;
	height: 170px;
	background-image: url('../img/slides.png');
	background-repeat: no-repeat;
	margin: 13px 40px 0;
}
.top .inner .slides .main .mask #slideBox .slide1 { background-position: 0 0; }
.top .inner .slides .main .mask #slideBox .slide2 { background-position: 0 -170px; }
.top .inner .slides .main .mask #slideBox .slide3 { background-position: 0 -340px; }
.top .inner .slides .main .mask #slideBox .slide4 { background-position: 0 -510px; }
.top .inner .slides .main .mask #slideBox .slide5 { background-position: 0 -680px; }
.top .inner .slides .main .mask #slideBox .slide6 { background-position: 0 -850px; }
.top .inner .slides .main .mask #slideBox .slide7 { background-position: 0 -1020px; }
.top .inner .slides .main .mask #slideBox .slide8 { background-position: 0 -1190px; }
.top .inner .slides .main .mask #slideBox .slide9 { background-position: 0 -1360px; }
.top .inner .slides .main .mask #slideBox .slide10 { background-position: 0 -1530px; }
.top .inner .slides .main .mask #slideBox .slide11 { background-position: 0 -1700px; }
.top .inner .slides .main .mask #slideBox .slide12 { background-position: 0 -1870px; }
.top .inner .slides .main .mask #slideBox .slide13 { background-position: 0 -2040px; }
.top .inner .slides .main .mask #slideBox .slide14 { background-position: 0 -2210px; }
.top .inner .slides .main .mask #slideBox .slide15 { background-position: 0 -2380px; }
.top .inner .slides .main .mask #slideBox .slide16 { background-position: 0 -2550px; }
.top .inner .slides .main .mask #slideBox .slide17 { background-position: 0 -2720px; }
.top .inner .slides .main .mask #slideBox .slide18 { background-position: 0 -2890px; }
.top .inner .slides .main .mask #slideBox .slide19 { background-position: 0 -3060px; }
.top .inner .slides .main .mask #slideBox .slide20 { background-position: 0 -3230px; }
/*content*/
.content {
	width: 864px;
	margin: 0 auto;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	font-size: 12px;
	line-height: 16px;
	padding: 40px 40px 30px;
}
.content .homeLeft {
	width: 470px;
	padding-right: 40px;
}
.content .homeLeft .header {
	height: 18px;
}
.content .homeRight {
	width: 350px;
}
.content .homeRight .service1,
.content .homeRight .service2,
.content .homeRight .service3,
.content .homeRight .service4,
.content .homeRight .service5,
.content .homeRight .service6,
.content .homeRight .service7,
.content .homeRight .service8,
.content .homeRight .service9 { height: 52px; }
.content .homeRight .service1 { background: url('../img/computerForgeSprite.png') -10px -1354px no-repeat; }
.content .homeRight .service2 { background: url('../img/computerForgeSprite.png') -10px -1406px no-repeat; }
.content .homeRight .service3 { background: url('../img/computerForgeSprite.png') -10px -1458px no-repeat; }
.content .homeRight .service4 { background: url('../img/computerForgeSprite.png') -10px -1510px no-repeat; }
.content .homeRight .service5 { background: url('../img/computerForgeSprite.png') -10px -1562px no-repeat; }
.content .homeRight .service6 { background: url('../img/computerForgeSprite.png') -10px -1614px no-repeat; }
.content .homeRight .service7 { background: url('../img/computerForgeSprite.png') -10px -1666px no-repeat; }
.content .homeRight .service8 { background: url('../img/computerForgeSprite.png') -10px -1718px no-repeat; }
.content .homeRight .service9 { background: url('../img/computerForgeSprite.png') -10px -1770px no-repeat; }
.content .homeRight .service1:hover { background-position: -450px -1354px; }
.content .homeRight .service2:hover { background-position: -450px -1406px; }
.content .homeRight .service3:hover { background-position: -450px -1458px; }
.content .homeRight .service4:hover { background-position: -450px -1510px; }
.content .homeRight .service5:hover { background-position: -450px -1562px; }
.content .homeRight .service6:hover { background-position: -450px -1614px; }
.content .homeRight .service7:hover { background-position: -450px -1666px; }
.content .homeRight .service8:hover { background-position: -450px -1718px; }
.content .homeRight .service9:hover { background-position: -450px -1770px; }
.content .servicesMain { }
.content .servicesMain .service1,
.content .servicesMain .service2,
.content .servicesMain .service3,
.content .servicesMain .service4,
.content .servicesMain .service5,
.content .servicesMain .service6,
.content .servicesMain .service7,
.content .servicesMain .service8,
.content .servicesMain .service9 {
	width: 335px;
	height: 34px;
}
.content .servicesMain .service1 { background: url('../img/computerForgeSprite.png') -460px -1364px no-repeat; }
.content .servicesMain .service2 { background: url('../img/computerForgeSprite.png') -460px -1416px no-repeat; }
.content .servicesMain .service3 { background: url('../img/computerForgeSprite.png') -460px -1468px no-repeat; }
.content .servicesMain .service4 { background: url('../img/computerForgeSprite.png') -460px -1520px no-repeat; }
.content .servicesMain .service5 { background: url('../img/computerForgeSprite.png') -460px -1572px no-repeat; }
.content .servicesMain .service6 { background: url('../img/computerForgeSprite.png') -460px -1624px no-repeat; }
.content .servicesMain .service7 { background: url('../img/computerForgeSprite.png') -460px -1676px no-repeat; }
.content .servicesMain .service8 { background: url('../img/computerForgeSprite.png') -460px -1728px no-repeat; }
.content .servicesMain .service9 { background: url('../img/computerForgeSprite.png') -460px -1780px no-repeat; }
.content .servicesLeft {
	width: 580px;
	padding-right: 40px;
}
.content .servicesRight { width: 240px; }
.content .servicesRight .service1,
.content .servicesRight .service2,
.content .servicesRight .service3,
.content .servicesRight .service4,
.content .servicesRight .service5,
.content .servicesRight .service6,
.content .servicesRight .service7,
.content .servicesRight .service8,
.content .servicesRight .service9,
.content .servicesRight .service1selected,
.content .servicesRight .service2selected,
.content .servicesRight .service3selected,
.content .servicesRight .service4selected,
.content .servicesRight .service5selected,
.content .servicesRight .service6selected,
.content .servicesRight .service7selected,
.content .servicesRight .service8selected,
.content .servicesRight .service9selected {
	height: 38px;
	background-image: url('../img/computerForgeSprite.png');
	background-repeat: no-repeat;
}
.content .servicesRight .service1 { background-position: -10px -1830px; }
.content .servicesRight .service2 { background-position: -10px -1868px; }
.content .servicesRight .service3 { background-position: -10px -1906px; }
.content .servicesRight .service4 { background-position: -10px -1944px; }
.content .servicesRight .service5 { background-position: -10px -1982px; }
.content .servicesRight .service6 { background-position: -10px -2020px; }
.content .servicesRight .service7 { background-position: -10px -2058px; }
.content .servicesRight .service8 { background-position: -10px -2096px; }
.content .servicesRight .service9 { background-position: -10px -2134px; }
.content .servicesRight .service1:hover, .content .servicesRight .service1selected { background-position: -350px -1830px; }
.content .servicesRight .service2:hover, .content .servicesRight .service2selected { background-position: -350px -1868px; }
.content .servicesRight .service3:hover, .content .servicesRight .service3selected { background-position: -350px -1906px; }
.content .servicesRight .service4:hover, .content .servicesRight .service4selected { background-position: -350px -1944px; }
.content .servicesRight .service5:hover, .content .servicesRight .service5selected { background-position: -350px -1982px; }
.content .servicesRight .service6:hover, .content .servicesRight .service6selected { background-position: -350px -2020px; }
.content .servicesRight .service7:hover, .content .servicesRight .service7selected { background-position: -350px -2058px; }
.content .servicesRight .service8:hover, .content .servicesRight .service8selected { background-position: -350px -2096px; }
.content .servicesRight .service9:hover, .content .servicesRight .service9selected { background-position: -350px -2134px; }


.content .contactLeft { 
	width: 300px;
	padding-right: 40px;
}
.content .contactLeft .address { 
	font-size: 13px;
	line-height: 20px;
}
.content .contactLeft .address .main {
	font-size: 18px;
	line-height: 30px;
}
.content .contactLeft .quickInner {
	padding-top: 20px;
	width: 300px;
}
.content .contactLeft .quickInner .header {
	margin-bottom: 5px;
	font-size: 14px;
}
.content .contactLeft .quickInner .inputText {
	width: 294px;
	margin-bottom: 5px;
}
.content .contactLeft .quickInner .textArea {
	width: 294px;
	height: 100px;
	margin-bottom: 5px;
}
.content .contactLeft .quickInner .approval { margin-bottom: 5px; }
.content .contactLeft .quickInner .approval input { vertical-align: middle; }
.content .contactLeft .quickInner .approval label { vertical-align: middle; }
.content .contactRight { width: 520px; }
.content .contactRight .map {
	padding: 9px;
	border: 1px solid #ccc;
}
.content .contactRight .map #gMap {	
	width: 500px;
	height: 500px;
	overflow: hidden;
}
.content .contactRight .map .mapLink {
	padding-top: 5px;
}
/*footer*/
.footer .top {
	width: 946px;
	height: 10px;
	margin: 0 auto;
	background: url('../img/computerForgeSprite.png') -7px -1310px no-repeat;
}
.footer .bottom {
	width: 920px;
	height: 12px;
	margin: 0 auto;
	padding: 10px 0;
	font-size: 10px;
}
.footer .bottom .left { width: 300px; }
.footer .bottom .middle { width: 320px; }
.footer .bottom .right { width: 300px; }
/*error*/
.error1 {
	font-size: 24px;
	color: #f00;
	margin-bottom: 20px;
}
.error2 {
	font-size: 14px;
	margin-bottom: 10px;
}
/*temp*/
.buttonTemp {
	text-align: center;
	font-weight: bold;
	background-color: #333;
	border: 1px solid #000;
	display: block;
	color: #f97b00;
	margin-bottom: 20px;
	padding: 8px 0;
	cursor: pointer;
	font-size: 15px;
}
.buttonTemp:hover {
	text-align: center;
	font-weight: bold;
	background-color: #000;
	border: 1px solid #000;
	display: block;
	color: #f97b00;
	margin-bottom: 20px;
	padding: 8px 0;
	cursor: pointer;
	font-size: 15px;
}
