@charset "utf-8";

/***** General Layout *****/

html, body {margin:0px; padding:0px; font-family: Trebuchet MS,Arial,Helvetica,sans-serif; position:relative; color:#646464; text-align:left; height: 100%;line-height: 1.3em; background:#f8f8f8;}
#wrappage {width: 100%; height:100%; margin:0 auto; background:url(../images/bg-page.jpg) repeat-x top; }
#pagecont {width: 980px;height:100%; margin:0 auto; position:relative;}

#page-top {width:980px; height:100px; margin:0 auto; padding:0; background:url(../images/page-top.png) bottom center no-repeat;}
#page-bot {width:980px; height:20px; margin:0 auto; padding:0; background:url(../images/page-bot.png) top center no-repeat;}
#wrapper {width: 980px; margin:0 auto; background:url(../images/bg-page.png) center repeat-y;}
.clear {clear:both; height:0; width:0; line-height:0;}
.left { float:left;}
.right {float:right;}
a, img , button { outline: none; }

/***** Typography *****/

h1 {font-size:36px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
h5 {font-size:16px;}
h6 {font-size:14px;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
p {font-size:13px; height:auto;}

/***** Header *****/

#topbar {width:960px; height:80px; margin:0 auto; padding:0;}
#topbar a {width:130px; height:80px; display:block; margin:0; padding:0;}
#topbar h4 { margin: 35px 0 0 0; font-size:21px;}
#wraphead {width:920px; height:300px; margin:0 auto 30px auto; padding:10px 0 0 0; position:relative;}
#head-content{width:920px; height:300px; margin:0 auto; position:relative;}

/***** Header Form *****/

#head-form{width:300px; height:300px; position:absolute; top:10px; right:10px; background: url(../images/bg-form.png) top center no-repeat; z-index:90;}
.open-close{width:30px; height:30px; position:absolute; top:20px; right:20px; display:block; z-index:100;}
.close{width:30px; height:30px; background:url(../images/close.png); display:block; z-index:100; cursor:pointer;}
.open{width:30px; height:30px; background:url(../images/open.png); display:block; z-index:100; cursor:pointer;}
.contactformbox {width:270px; height:285px; margin:0 auto; padding:20px 0 0 0; overflow:hidden; position:relative; min-height:200px;}
.contactformbox h3 {width:260px; display:block; margin:0 auto 9px auto;}
.contactform {width:250px; margin:0 auto; padding:0; overflow:hidden;}
.contactform span.input-text {margin:0 auto;}
.contactform input, .contactform textarea {width:238px; border:#e6e9ec 1px solid; padding:5px; margin:6px auto; background:transparent url(../images/bg-input.png) repeat-x top; font-size:14px; color:#444444;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.contactform select {width:249px; border:#e6e9ec 1px solid; padding:5px; margin:6px auto 10px auto; background:transparent url(../images/bg-input.png) repeat-x top; font-size:14px; color:#444444;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.contactform option {background:transparent url(../images/bg-form-w.png);}
.contactform .error-input, .contactform .error-both .input, .contactform .error-same .input { color: #ffffff; background:url(../images/bg-form-b.png); }
.contactform span.button {float: right; width:110px; margin:5px 0 0 0;}
.contactform button {width:110px; height:40px; display:block; background:url(../images/button-form.png) 0 0 no-repeat; font-size:14px; text-align:center; padding:0; margin:0;border:none; float:right; cursor:pointer;color:#646464;}
.contactform button:hover { background: url(../images/button-form.png) no-repeat 0 -40px;}
#send{ position:absolute; left: 50%; top:35%; margin-left:-27px; display:none;}
#mess{ position:absolute; left:25%; top:35%; text-align:center; font-size:15px; display:none;}

/***** Header Static*****/

#static {width: 920px; height:350px; margin:0 auto;}
#static-show {width: 920px; height: 350px; position: relative; margin:0 auto;}
.static {position: relative; width: 920px; height: 350px; background:transparent!important; color:#FFFFFF;}
.static-image {position: absolute; left:0;top:0; width:920px; height:350px; text-align: center; z-index: 1;}
.static-text {position: absolute; width: 530px; left: 40px;top: 35px;z-index: 2;}
.static-text h1{margin:20px 0 20px 0;}
.static-text p{margin:0; padding:20px 0 0 0; border-top:#e6e9ec 1px dotted;}
.static-buy {position: absolute; left:40px; bottom:60px; width:230px; height:60px; z-index: 3;} 
.static-buy a.sq {width:230px; height:45px; display:block; background:url(../images/button-s.png) 0 0 no-repeat;color:#646464; padding:15px 0 0 0; text-align: left;}
.static-buy a.sq:hover {background:url(../images/button-s.png) 0 -60px no-repeat;}
.static-buy a.sq span.big {width:170px; font-size:20px; margin:0 0 0 25px; display:block; word-spacing:10px}
.static-buy a.sq span.min {width:170px; font-size:12px; margin:0 0 0 25px; display:block;}

/***** Get It Now*****/

#wrapget {width:920px; height:70px; margin:0 auto 30px auto; padding:0; background: url(../images/bg-sl-l.png) top left no-repeat; position:relative;}
#wrapget a {width:220px; height:45px; margin:0; padding:25px 0 0 0; display:block; background:url(../images/but-get.png) 0 0 no-repeat; float:right; font-size:24px; text-align:center;}
#wrapget a:hover {background:url(../images/but-get.png) 0 -70px no-repeat;}
#wrapget h3 {width:650px; display:block; float:left; text-align:center; margin:25px 0 0 0;}
#wrapget h3.off {width:650px; display: block; float:left; text-align:center; margin:25px 0 0 0; position:absolute; z-index:10;}

/***** Content *****/

#wrapcontent { width:920px; margin:0 auto 30px auto; padding:0px;}
ul.content {width:920px; margin:0 auto; padding:0; overflow:hidden;}
ul.content li {width:290px; display:block; padding:0; margin:0 25px 0 0; float:left;}
ul.content li.last {margin:0;}
ul.content li img  {margin:3px 12px 0 0;}
ul.content li h3 { margin-bottom: 10px; font-size:21px;}
ul.content li p { margin:0 ;}
#wrapcompany { width:920px; margin:0 auto 0 auto; padding:20px;background:#f7f7f7 url(../images/bg-wrcomp.jpg) repeat-x top;}

/***** Tabs menu *****/

ul.pagenav {width:460px; margin:15px auto 10px auto; padding:0; list-style: none; background:transparent!important; overflow: hidden;}
ul.pagenav li {width:100px; height:30px; margin:0 5px 0 0; padding:0; float:left;}
ul.pagenav li a{width:80px; height:10px; display:block; margin:0; padding:10px; background: none;font-size:13px; text-align:center;color:#646464;}
ul.pagenav li a.selected { background: url(../images/bg-menu.png) 0 0 no-repeat;}
ul.pagenav li a:hover { background: url(../images/bg-menu.png) 0 -30px no-repeat;}

/***** About Us *****/

#aboutus {width:450px; margin:0; padding:0;}
#aboutus .page{width:450px; margin:0; padding:0; min-height:150px; position:relative;}
#aboutus .page img  {margin:0 10px 0 0; float:left; padding:5px; background:#f7f7f7;}
#aboutus h4 { margin:0 0 10px 0; padding:0 0 15px 0; text-align:left; border-bottom:#e0e2e4 1px dotted; display:block;}
#aboutus p {margin:0 20px 0 0;}
#aboutus .page ul.feat {width:440px; margin:0; padding:0; overflow:hidden;}
#aboutus .page ul.feat li { margin:0 0 0 10px; padding:5px 0 0 20px; background:url(../images/bul-dot.png) 0 9px no-repeat; font-size:13px;} 
#aboutus .page ul.testimonial {width:400px; height:190px; margin:10px auto 0 auto; padding:0px; position:relative; overflow:hidden;}
#aboutus .page ul.testimonial li {width:390px; height:115px; margin:10px auto 0 auto; padding:15px 0 0 15px; font-style:italic; text-indent: 20px; background: url(../images/quote-top.png) 0 0 no-repeat; position:relative;}
#aboutus .page ul.testimonial li p {padding:0; margin:0;}
#aboutus .page ul.testimonial li span {position:absolute; bottom:15px; right:15px; font-weight:bold;}
.prev { position:absolute; bottom:0px; right:25px; z-index:100; cursor: pointer;background: transparent url(../images/left.png) no-repeat;width: 20px; height: 27px;display: block;}
.next {position:absolute; bottom:0px; right:0px; z-index:100; cursor: pointer;background: transparent url(../images/right.png) no-repeat;width: 20px; height: 27px;display: block;}
#aboutussk {width:450px; margin:0; padding:0;}
#aboutussk h4 { width:450px; margin:0 0 15px 0; padding:0 0 15px 0; text-align:left; border-bottom:#e0e2e4 1px dotted; display:block;}
#companyskills{ width:428px; margin:0; padding:10px; background:#f0f0f0 url(../images/bg-bar.png) repeat-x top;border:#e6e9ec 1px solid;}

.graphBarcompanyskills{background:url(../images/bg-graf.png) top repeat-x;} /*hack css stile jqbargraph*/

/***** Pricing  *****/

.wrapbest {width:920px; height:35px; margin:0 auto 12px auto; padding:10px 0 0 0; text-align:center; display:block; background:url(../images/bg-best.png) top center no-repeat; }
#wrapprice { width:920px; margin:0 auto 15px auto; padding:0px; position:relative;}
.price-h {width:182px; height:100px; background:url(../images/price-h.png) top center no-repeat; top:5px; left:368px; position:absolute; z-index:100;}
ul#price {width:920px; margin:0 auto; padding:5px 0 5px 0; overflow:hidden; }
ul#price li {width:184px; float:left;}
ul.price{width:182px;margin:0 auto 0 auto; padding:4px 0 0 0; overflow:hidden; z-index:10; position:relative;}
ul.price.best{width:182px; margin:0 -2px 0 auto; padding:0; -webkit-box-shadow: 0px 0px 10px #646464; -moz-box-shadow: 0px 0px 10px #646464; box-shadow: 0px 0px 10px #646464; z-index:20; position:relative;}
ul.price.last{ margin:0; width:184px;}
ul.price li {width:180px; height:26px; margin:0 ; padding:15px 0 0 0; border-bottom:1px #FFFFFF dotted; background:#f0f0f0 url(../images/bg-li-price.png) repeat-x;text-align:center;}
ul.price.best li {width:180px; height:27px; margin:0 ; padding:15px 0 0 0; border-bottom:1px #FFFFFF dotted; background:#f0f0f0 url(../images/bg-li-price.png) repeat-x;text-align:center;}
ul.price li p{font-size:12px;}
ul.price li p strong { font-size:14px; font-weight:bold;}
ul.price li:hover{background:#dedede url(../images/bg-li.png) 5px 16px no-repeat;}
ul.price li.cost { width:180px; height:67px;font-size:24px; padding:13px 0 0 0; border:none; position:relative;}
ul.price li.cost .bestsale {width:47px; height:27px; bottom:2px; right:2px; position:absolute; z-index:30; display:block; background:url(../images/best.png) bottom center no-repeat;}
ul.price li.cost p {font-size:18px; margin:5px 0 0 0;}
ul.price li.cost span {font-size:14px;}
ul.price li.buy { width:180px; height:60px;font-size:24px; background: url(../images/bg-buy.png) repeat-x; padding:0; border:none;}
ul.price li.buy button {width:110px; height:35px; display:block; font-size:15px; text-align:center; padding:0; margin:13px auto 0 auto; border:none; color:#ebebeb; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor:pointer;}

/***** Gallery *****/

#wrapgallery { width:920px; margin:0 auto; padding:0 20px 10px 20px; position:relative; }
#blockarrow {width:80px; height:35px; position:absolute; bottom:0px; left:50%; margin:0 0 0 -40px; background:url(../images/bg-arrow.png) top center no-repeat; z-index:20;} 
#galup { position:absolute; top:5px; left:15px; z-index:25; cursor: pointer;background: transparent url(../images/left.png) no-repeat;width: 20px; height: 27px;display: block;}
#galdown {position:absolute; top:5px; right:15px; z-index:25; cursor: pointer;background: transparent url(../images/right.png) no-repeat;width: 20px; height: 27px;display: block;}
#wrapgallery .box { width:920px; height:140px; margin:0; padding:0; position:relative;}
.gallerys {width:920px; height:140px; margin:0; padding:0; position: relative; display:block; overflow:hidden;}
ul.gallery {width:920px; height:140px; margin:0 auto; padding:0px; position:relative; top:0; left:0; overflow:hidden;}
ul.gallery li {width:195px; height:120px; margin:0 20px 0 0; padding:10px; background: url(../images/bg-gal.jpg) center top no-repeat; float:left; position:relative;}
ul.gallery li.last { margin-right:0;}
ul.gallery li a {display:block; width:200px; height:120px; background: url(../images/gallery-zoom.png) no-repeat center center; margin:0;}
.zoom {width:30px; height:30px; display: none; bottom:10px; right:20px; background:url(../images/zoom-icon.png) no-repeat top center; position:absolute; z-index:100;}

/***** Footer *****/

#wrapfooter {width:980px; height:220px; margin:0 auto 10px auto; padding:0; background: url(../images/bg-footer.png) center top no-repeat;}
.footer {width:920px; height:180px; margin:0 auto; padding:20px 0 0 0; color:#FFFFFF;}
.footer .fbox { width:290px; height:180px; margin:0 25px 0 0;padding:0; position:relative;float:left;}
.footer .fbox.first { background:url(../images/footer-v.png) repeat-y right;}
.footer .fbox.last { margin-right:0;background:url(../images/footer-v.png) repeat-y left;}
.footer .fbox h5{ margin:10px auto ; padding:0;}
.footer .fbox p,a{ margin:0 auto 5px 0; padding:0 20px 0 0; font-size:12px;color:#b2b2b2;}
.footer .fbox.first h5,.footer .fbox.first p{ margin-left:5px;}

/***** Footer Form*****/

.footerformbox {width:260px; margin:0 5px 0 0; padding:0; overflow:hidden; position:relative;min-height:180px;}
.footerform {width:260px; margin:0 auto; padding:0; overflow:hidden;}
.footerform span.input-text {margin:10px auto;}
.footerform span.button {width:70px; margin:3px 0 0 0; float:right;}
.footerform input, .footerform textarea {width:252px; border:#313132 1px solid; padding:3px; margin:0 auto 7px auto; background:transparent url(../images/bg-inputf.png) repeat-x top;font-size:10px; color:#b2b2b2; overflow:hidden;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;font-family: Trebuchet MS,Arial,Helvetica,sans-serif;}
.footerform .error-input, .footerform .error-both .input, .footerform .error-same .input { border-color:#606062; color: #CC0000;font-size:10px; }
.footerform button { width:70px; height:25px; display:block; background:url(../images/button-formf.png) 0 0 no-repeat; font-size:10px; text-align:center; padding:0; margin:0; border:none; float:right; cursor:pointer; color:#b2b2b2;}
.footerform button:hover { background: url(../images/button-formf.png) no-repeat 0 -25px;}
#footersend{ position:absolute; left: 50%; top:35%; margin-left:-27px; display:none;}
#footermess{ position:absolute; left:50%; top:35%; text-align:center; font-size:15px;color:#89898a; display:none; margin:0 auto 0 -135px;}

/***** Footer Sing Up Newssend*****/

#newssend { width:280px; height:25px; margin:0 auto 0 5px; padding:20px 0 0 0; position:relative;}
input.newssend {width: 160px;padding: 4px;float: left;border:#313132 1px solid; background:transparent url(../images/bg-inputf.png) repeat-x top; font-size: 10px;color:#b2b2b2; overflow:hidden;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#newssend button { width:70px; height:25px; display:block; background:url(../images/button-formf.png) 0 0 no-repeat; font-size:10px; text-align:center; padding:0; margin:0 20px 0 0; border:none; float:right; cursor:pointer; color:#b2b2b2;}
#newssend button:hover { background: url(../images/button-formf.png) no-repeat 0 -25px;}
#errormess {font-size: 11px; color:#fcfcfc; font-style:italic; position:absolute; top:0; left:10px;}
#newssendsend {position:absolute;  left: 50%; top:0; margin-left:-27px; display:none;}
#newssendmess {font-size: 11px; color:#fcfcfc; font-style:italic; position:absolute; top:0; left:10px;}

/***** Footer Follow*****/

ul#socicon { width:220px;margin:10px auto 0 auto;}
ul#socicon li { width:36px; height:36px; float:left; display:block; padding:0; margin:0 10px 10px 0; text-align:center;}
ul#socicon li.last {margin:0;}

/***** Color Setting *****/

#wrapget a, #wrapget h3.off, .wrapbest, ul.price li.cost, ul.price li strong,.contactformbox h3, #companyskills{color:#5a5a60;}
ul.price li.cost { background:#5a5a60 url(../images/bg-cost.png) top repeat-x ;}
ul.price li.buy button {background:#5a5a60 url(../images/bg-btn.png) repeat-x top;}
ul.price li.buy button:hover { background:#7f7f86;}