@charset "utf-8";
/* CSS Document */
html, body {height:100%; width:100%;}
body {margin:0; padding:0; width:100%;}

body {background-image:url(images/bg-main.jpg); background-position:top center; background-repeat:no-repeat; font-family: Arial, Helvetica, sans-serif;}
#wrap {min-height: 100%;}

/* General */
h1 {color:#e23f05; font-size:19px; font-weight:100; margin:0px 0 0px 0px; padding:0 0 0px 0px;}
h2 {color:#000000; font-size:17px; margin:0; padding-top:20px;}
h3 {color:#c7c7c7; font-weight:100; margin:0; padding:0; padding-left:0px; font-size:14px; font-weight:bold;}
h4 {color:#b31e82; font-weight:100; margin:0; padding:0; padding-left:8px; font-size:20px;}
h5 {color:#fff; font-size:30px; margin:0; padding:0;}
p {color:#101010; font-size:13px; padding-left:0px; margin:12px 0 0 0;}
a {color:#575757; font-size:13px; font-weight:600;}
a:hover {text-decoration:none;}
a img {border:0px;}
.white {color:#fff;}
.white_large {color:#ffffff; font-size:36px; letter-spacing:-2px;}
.white_medium {color:#ffffff; font-size:24px;}
.white_small {color:#ffffff; font-size:18px; letter-spacing:-1px;}
.text-small {font-size:12px;}
.nosee {display:none;}
.right {float:right}
.left {float:left;}
.small {font-size:11px;}
.orange {color:#f0700f;}
.green {color:#1bb71b;}
.clear {clear:both;}
.gray {color:#787878; font-size:18px;}
.lite-gray {color:#575757; font-size:15px;}
.italic {font-style:italic}
ul li {list-style:none;}

div.wrapper {width:997px; margin:0 auto -4em; height:100%; height: auto !important; min-height:100%;}
div#main { padding-bottom:-90px; height:100%; width:997px;} /* Same Height as Fotoer */
div#logo	{float:left; display:block; height:99px; width:401px; background-image:url(images/logo.jpg); background-repeat:no-repeat; padding:0px; margin:0px 0px 0px 0px; background-position:0px 25px;}
div#phone 	{float:right; width:298px; padding:20px 0px 0px 0px; margin:0px 0 0 0; height:31px; display:block; background-image:url(images/phone.jpg); background-repeat:no-repeat; background-position:25px 15px;}
.phone {color:#0e0e0f; font-size:18px; font-weight:bold; padding-left:55px;}


/* Top Navigation */
div#top-nav {display:block; margin-left:0px; width:293px; height:51px; float:left}
div#top-nav ul {padding-top:10px; font-size:13px; font-weight:100; color:#041b6b}
div#top-nav ul li {display:inline;}
div#top-nav ul li a {font-size:13px; font-weight:100; color:#041b6b}
div#top-nav ul li a:hover {text-decoration:none;}
.spacer {margin-left:5px; margin-right:5px;}

/* Navigation */
div#nav 	{float:left; width:570px; margin-left:-15px;}
#main-nav 	{width:570px; height:43px; margin:0; background-repeat:no-repeat; margin-top:4px;}
#main-nav li, #main-nav a {height:33px;display:block; color:#04185c; text-align:center; font-size:13px; text-decoration:none; text-transform:uppercase; margin-top:3px; font-weight:100;}
#main-nav a {padding-top:6px;}
#main-nav a:hover {color:#fff;}
#main-nav li:hover {background-image:url(images/bg-nav.jpg); background-repeat:repeat-x;}
#main-nav li {float:left; list-style:none; display:inline;}
.nav-background {background-image:url(images/nav-spacer.jpg); background-repeat:no-repeat; background-position:right;}
.noback {background-image:none;}
#nav-get-in-touch	 {width:118px}
#nav-portfolio	 {width:102px;}
#nav-products 	{width:99px;}
#nav-services	 {width:90px;}
#nav-team {width:82px;}
#nav-home   {width:76px;}

.active {background-image:url(images/bg-nav.jpg); background-repeat:repeat-x; color:#fff;}

/* Navigation Hover */
/*#nav-get-in-touch a:hover, .get-in-touch-active {background-image:url(images/navon.jpg); background-position:-478px 0px;}
#nav-portfolio a:hover, .portfolio-active {background-image:url(images/navon.jpg); background-position:-376px 0px;}
#nav-products a:hover, .products-active {background-image:url(images/navon.jpg); background-position:-277px 0px;}
#nav-services a:hover, .services-active {background-image:url(images/navon.jpg); background-position:-187px 0px;}
#nav-team a:hover, .team-active {background-image:url(images/navon.jpg); background-position:-105px 0px;}
#nav-home a:hover, .home-active {background-image:url(images/navon.jpg); background-position:-29px 0px;}
*/

/* Index Flash */
div#flash 	{display:block; width:997px; height:370px; float:left;}


/* Index Left */
div#index-left {display:block; float:left; height:100%; width:314px; background-image:url(images/bg-index-left.jpg); background-repeat:repeat-y; padding-left:20px; padding-right:30px; padding-bottom:40px;}
.text-area {width:295px; height:74px; background-color:fff; border: thin solid #d5d7d8; font-size:12px; color:#a7a7a7; margin-top:10px; margin-bottom:7px;}
.input {width:141px; height:28px; background-color:#fff; border: thin solid #d5d7d8; margin-right:9px; margin-top:12px; color:#a7a7a7; font-size:12px;}
.input-large {width:228px; height:26px; background-color:#fff; border: thin solid #d5d7d8; margin-right:9px; margin-top:12px; color:#a7a7a7; font-size:12px;}
.submit {padding:0; margin:0; background:url(images/but-submit.jpg); display:block; width:86px; height:23px; border:none;}
.go {padding:0; margin:0; background:url(images/but-go.jpg); display:block; width:26px; height:25px; border:none; margin-top:12px;}
.icon { margin-top: -5px; padding-right: 5px; overflow:hidden; height:35px; display:block; float:left;}

/*Index Header */
div#index-header-what-we-do {display:block; float:right; height:125px; width:633px; background-image:url(images/header-what-we-do.jpg); background-repeat:no-repeat;}

/*Index Design Studio */
div#index-web-promotion{width: 278px; height:334px; float:right;padding-right:32px;}
div#index-design-studio p, div#index-web-promotion p {padding-top:3px; margin:0px;}
/*Index Web Promotion  */
div#index-design-studio  {width: 284px; height:334px; float:right;padding-left:14px; padding-right:24px; display:block;}
/*Index Testimonials  */
div#index-testimonials {width: 600px; height:336px; float:right; display:block; overflow:hidden; padding-left:14px; padding-right:19px; background-image:url(images/bg-quote.jpg); background-repeat:no-repeat; background-position: 215px 45px }
div.index-testimonials {width: 646px; height:160px; float:left; display:block; overflow:hidden; padding-left:0px padding-right:0px; background-image:url(images/bg-quote.jpg); background-repeat:no-repeat; background-position: 236px 0px; margin-top:15px;}
.testimonial{font-size:14px; color:#000000; font-style:italic;}
.customer {padding-top:40px; font-size:13px;}
.customer-folio {margin-top:80px;}
#partner {margin-top:8px; padding-left:15px; width:596px; float:left;}
/* Footer and Bottom */
div#bottom {width:937px; height: 303px; display:block; background-image:url(images/bg-bottom.jpg); background-repeat:no-repeat; padding-top:33px; padding-left:30px; padding-right:30px;}
#bottom a {color:#ffffff; font-size:10px; text-decoration:none;}
#bottom a:hover {text-decoration:underline;}
#bottom-about {width:325px; float:left;}
#bottom-service {width:339px; float:left;}
#bottom-follow {float:left;}
div.wrapper-footer {width:980px; margin:auto; position:relative; }
#bottom ul  {padding:10px 0 0 0; margin:0;}
#bottom ul li {padding:0px 13px 0 13px; margin:0;}
.arrow {background-image:url(images/arrow.gif); background-repeat:no-repeat; background-position:0 6px;}
#bottom-follow ul {padding:10px 0 0 0; margin:0;}
#bottom-follow ul li {padding:0px 15px 7px 25px; margin:0;}

.facebook {background-image:url(images/but-facebook.jpg); background-repeat:no-repeat; background-position:0 4px; }
.linked {background-image:url(images/but-link-in.jpg); background-repeat:no-repeat; background-position:0 4px;}
.blogger{background-image:url(images/but-blogger.jpg); background-repeat:no-repeat;  background-position:0 4px;}
.twitter {background-image:url(images/but-twitter.jpg); background-repeat:no-repeat;  background-position:0 4px;}
.word {background-image:url(images/but-word-press.jpg); background-repeat:no-repeat;  background-position:0 4px;}
.digg {background-image:url(images/but-digg.jpg); background-repeat:no-repeat; background-position:0 4px;}



div#footer	{position:relative; /* negative of footer height */ height:219px; margin-top:-162px; clear:both; width:100%; background:url(images/bg-footer.jpg); background-repeat:no-repeat; background-position:center -1px; background-color:#3f3f3f; color:#FFF; font-size:12px;}
#footer .wrapper-footer a {color:#FFF; font-weight:100; text-decoration:none; font-size:12px;}
#footer .wrapper-footer a:hover {color:#FFF; font-weight:100; text-decoration:underline; font-size:12px;}
div#footer p {color:#FFF; font-size:12px;}
div#footer-left {float:left; width:75%; padding:20px 0 0 0;}
div#footer-right {float:left; width:25%; padding:20px 0 0 0;}

/* Footer Opera Fix */
body:before {content:""; height:100%; float:left; width:0; margin-top:-32767px;}

div.footer	{position:relative; marign-top:-90px; /* negative of footer height */ height:215px; clear:both; width:100%; background-color:#575757; color:#FFF; font-size:12px;}
#pagecontent_right {float:right; padding-left:20px; width:60%; padding-bottom:40px; background-image:url(images/bg-content-right.jpg); background-repeat:no-repeat; background-position:top right;}
.numbers li {list-style:decimal; margin-bottom:5px;}
#testimonials_content {border-top: 1px solid #ccc; margin-top:10px;}
 .prod_desc {border-top: 1px solid #ccc; margin-top:10px; padding-bottom:15px;}

#pagecontent {width:100%; background-image:url(images/bg-page-content.jpg); background-repeat:no-repeat; padding: 20px 0px 40px 0px}
.readmore{float:right; text-align:right; padding:6px 0 8px 0; width:100%;}
.readmore ul{float:right; margin:0; padding:0;}
.readmore li{margin:0; padding:0; display:inline; width:63px; height:11px; }
.readmore span{display:none;}
a.more{display:block; margin:0 0 0 0; width:63px; height:11px; background:url(images/readmore.gif); background-position:right; background-repeat:no-repeat;}
#pagecontent_right .readmore ul li {background:none;}
#pagecontent_right .readmore ul li {background:none; float:right;}

#pagecontent_right ul {margin:0; padding:0;}
#pagecontent_right ul li {margin:0px; padding:0px 25px; background-image:url(images/arrow.png); background-repeat:no-repeat;}
#pagecontent_right ul li ul li {margin:0px px; padding:0px 25px; background-image:url(images/arrow-turn.png); background-repeat:no-repeat;}



/************************Gallery Step****************/
.stepcarousel{
position: relative; 
overflow: scroll; 
width: 997px; 
height: 327px;
}

.stepcarousel .belt{
position: absolute; 
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
width: 997px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

#gallerya-paginate{ margin-top:3px; float:left;}

#gallerya-paginate img{ float:none;}


.PosRelative { position:relative; float:left; }
.bbb { position:absolute; left:900px; top:0px; width:78px; z-index:999; height:80px; float:left; }
.five-year { position:absolute; left:820px; top:0px; width:78px; z-index:999; height:80px; float:left; }
.folio  { position:absolute; left:28px;; top:267px; width:78px; z-index:99; height:80px; float:left; }

#folio-left { padding-left:20px; padding-bottom:40px; background-image:url(images/left-folio.jpg); background-repeat:no-repeat; background-position:top right; width:55%; float:left;}
#folio-right {width:37%; float:right}
.city {float:left; width:24%;}
.city ul {padding:0; margin:10px 0px 0px 0px;}

/* Site Sample */
.sample-left {width:67%; float:left;padding:0;}
.sample-right {width:31%; float:right; overflow:hidden;}
.before-after, .folio-thumb {width: 49%;}
.folio-thumb a {color:#575757; font-size:15px; font-weight:100; text-decoration:none;}