/* -----------------------------------------------------------------------

	Screen CSS
	Design and Dev by New Way Design LLC
	http://www.newwaydesign.com; hooray@newwaydesign.com
	http://newwaydesign.com/
------------------------------------------------------------------------- */

/* ----- Generic styles --------------------------------------------------*/
html { margin:0px; padding:0px; background-color: #FFFEF6;}
body { background: #fffef6 url("../images/layout/big-bg2.jpg") no-repeat 50% 0; min-height: 600px; text-align: center; text-shadow: 1px 1px 1px #fff; font: normal 72.5%/1 Helvetica, Arial, sans-serif; color: #663458; line-height: 1.5em; }

/* 	body { background: url("../images/_grid.gif") repeat-y 50% 0; }*/

/* ----- Generic classes -------------------------------------------------*/
.alt { position: absolute; left: -9999px; }
.clear {clear: both;margin: 0;padding: 0;}

.clear:after { display: block; visibility: hidden; clear: both; height: 0; content: "."; }
hr { display:none; }
.padding {padding-bottom: 5px;}

/* ----- Typography -----------------------------------------------------*/
h1 {font: 2.2em , Georgia, Times New Roman, serif; color: #a11488; line-height: 1.5em; }

h2 {font: 28px museo300, Georgia, Times New Roman, serif; color:#e83563; line-height: 1.4em; padding-bottom: 5px; margin-bottom:15px; text-shadow: 1px 1px 1px #fff; border-bottom: 1px dotted #f0cdb3; text-shadow: 1px 1px 1px #fff;}

h3 {font: 22px museo500, Georgia, Times New Roman, serif; color: #e83563; text-shadow: 1px 1px 1px #fff; padding-bottom: 5px; margin-top: 5px; width: 500px;}

h4 {font: 20px museo500, Georgia, Times New Roman, serif; color: #80096b; text-shadow: 1px 1px 1px #fff; padding: 5px 0 5px 0; }

h5 {font: 16px museo500, Georgia, Times New Roman, serif; color: #80096b; text-shadow: 1px 1px 1px #fff; padding: 20px 0 0 0; }

p {font: normal 13px Helvetica, Arial, sans-serif; color: #663458; line-height: 1.5em; margin-bottom:10px;}

a { color: #619a8a; text-decoration: none; border-bottom: 1px dotted #619a8a; }
a:hover { color: #ee7678; border-bottom: 1px dotted #ee7678; }

.purple {color: #a11488;}
.blue {color: #0074a4;}
.red {color: #ed2225;}
.floatRight {width: 270px; float:right; margin-top: 5px; height:560px; background: url("../images/bg-about-us-services.jpg"); margin-bottom: 15px;}
.floatLeft {float:left; width:340px; }
.right {float:right;}

/* ----- Base layout -----------------------------------------------------*/
.container { background: #fffef6 url("../images/layout/big-bg2.jpg") no-repeat 50% 0; width: 968px; margin: 0 auto; min-height:800px; position:relative; overflow: hidden; text-align: left; }

/* ----- Left Column -----------------------------------------------------*/
div#left-column { width: 270px; height: 100%; margin:0 auto; float: left; padding: 245px 0 0 0;}
	.wrap { margin:0 auto; position:relative; padding-right: 15px;	}

		h1#logo a { width: 270px; height: 100px; position: absolute; left: 0; text-indent:-9999em; border: none; }
 		p#logo a:hover, a:visited; a:link {text-decoration: none;}
		div#introduction { padding-top: 130px; width:280px; padding-bottom: 15px;}
		h1#intro-text {background: transparent url(../images/intro-text.gif) no-repeat 0 0; height:82px; margin:0 ; text-indent:-9999px; width:258px;}		
				
		div#push p { width: 260px; font-size: 1.2em; color: #663458; line-height: 1.5em;}
				div#push a { color: #619a8a; text-decoration: none; border-bottom: 1px dotted #619a8a; }
				div#push a:hover { color: #ee7678; border-bottom: 1px dotted #ee7678;}
	
/* ----- Right Column -----------------------------------------------------*/
div#right-column { width: 670px; margin: 0 auto; float: left; padding-left: 10px;}



	/* ----- Prim Nav -----------------------------------------------------*/
	ul#nav-primary { margin:0; }
	ul#nav-primary li { float: left; }
	ul#nav-primary li a { display: block; height: 57px; background-repeat: no-repeat; background-position: 0 0; border: none; }
	ul#nav-primary li a:hover, ul#nav-primary li a.current { background-position: 0 -57px; }

		/* ----- HOME -----------------------------------------------------*/
		li#nav-home a { width: 100px; background-image: url("../images/nav/nav-home.jpg"); border: none; }
 
 		/* ----- ABOUT -----------------------------------------------------*/
 		li#nav-about a  { width: 97px; background-image: url("../images/nav/nav-about.jpg"); border: none;}
		li#nav-about-active  { width: 97px; background-image: url("../images/nav/nav-about-active.jpg"); border: none;}
						
		/* ----- PORTFOLIO -----------------------------------------------------*/
		li#nav-portfolio a { width: 134px; background-image: url("../images/nav/nav-portfolio.jpg"); border: none;}
		li#nav-portfolio-active { width: 134px; background-image: url("../images/nav/nav-portfolio-active.jpg"); border: none;}
		
		/* ----- PROCESS -----------------------------------------------------*/
		li#nav-process a { width: 117px; background-image: url("../images/nav/nav-process.jpg"); border: none;}
		li#nav-process-active { width: 117px; background-image: url("../images/nav/nav-process-active.jpg"); border: none;}
		
		/* ----- BLOG -----------------------------------------------------*/
		li#nav-blog a { width: 92px; background-image: url("../images/nav/nav-blog.jpg"); border: none;}
		li#nav-blog-active { width: 92px; background-image: url("../images/nav/nav-blog-active.jpg"); border: none;}
		
		/* ----- CONTACT -----------------------------------------------------*/
		li#nav-contact a { width: 127px; background-image: url("../images/nav/nav-contact.jpg"); border: none;}
		li#nav-contact-active { width: 127px; background-image: url("../images/nav/nav-contact-active.jpg"); border: none;}
				
	
	/* ----- Body Area -----------------------------------------------------*/
		div#body-area { padding: 35px; margin: 0; background: #ffffff url("../images/body-header.jpg") no-repeat 0 0; border: none; overflow:hidden; clear:both; min-height:600px;}
		div#body-area-about { padding: 35px 0 0 35px; margin: 0; background: #ffffff url("../images/body-header.jpg") no-repeat 0 0; border: none; overflow: hidden; clear:both;}
			div#body-area-about .indent-padding {padding: 20px;}
			div#body-area li {list-style-image: url('../images/bullet.jpg');}
			div#body-area-portfolio { padding: 35px; margin: 0; background: #ffffff url("../images/body-header.jpg") no-repeat 0 0; border: none; overflow:hidden; clear:both; min-height:600px;}
			div#body-area-portoflio li {list-style: none;}
				
			/********HOME********/
			
			/* ----- Testimonials -----------------------------------------------------*/
		  			div#home-testimonials { margin-top: 25px; }
		  				div#quotes {background: url("../images/quotes.gif") no-repeat 0 0; height: 35px; margin: 0;}
		  				 	div#quotes .padding {padding-left: 20px;}
		  				div#home-testimonials p { font-style: italic; }
		  				cite {font-size: 12px; display: block; float:right; padding-top: 10px; color: #a11488; text-align: right;}
		  				cite small { font-size: 11px;  color: #a11488;}

		 
		  	/* ----- Home Portfolio -----------------------------------------------------*/
		  			div#carousel { padding-bottom:8px; height: 515px; border-bottom: 1px solid #f0e1d6;}
		  			.infiniteCarousel { width:601px; position:relative; }
					.infiniteCarousel .wrapper { width: 601px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ 
										overflow: auto; min-height: 515px; position: absolute; }

					.infiniteCarousel ul a img {-moz-border-radius: 5px;-webkit-border-radius: 5px;}

					.infiniteCarousel .wrapper ul {width: 12020px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;position: absolute;top: 0;}

					.infiniteCarousel ul li {display:block;float:left;height: 515px;width: 601px;}

					.infiniteCarousel ul li a img {display:block;}

					.infiniteCarousel .arrow-left {display: block;background: transparent url("../images/arrow-left.png") no-repeat 0 0;width: 34px;height: 74px;position: absolute;top: 200px;z-index: 70;cursor: pointer;text-indent: -999px;left:0; border: none;}

					.infiniteCarousel .arrow-left:hover {background-position: 0 -74px;}

					.infiniteCarousel .arrow-right {display: block;background: transparent url("../images/arrow-right.png") no-repeat 0 0;width: 37px;height: 74px;position: absolute;top: 200px;z-index: 70;cursor: pointer; text-indent: -999px; right: 0; border: none;}

					.infiniteCarousel .arrow-right:hover {background-position: 0 -74px;}

					.infiniteCarousel .forward {right: 0;}

					.infiniteCarousel .back {left: 565px;}
					
			
			/********ABOUT US********/	
				ul#services li { margin:0; font: normal 1.1em Helvetica, Arial, sans-serif; color: #663458; line-height: 1.7em; list-style-image: url('../images/bullet.jpg'); list-style-position:inside;}
				.intro-text-about {background-image: url("../images/about-us-intro.gif"); width: 570px; height: 66px; margin-bottom: 30px;}
				.img {padding-right: 15px; padding-bottom: 10px;}	
				.img-border a {border: 0}	
				div#crystal {float:left; padding-right: 15px; width: 105px; }
				div#crystal a {border:0;}		
				div#nguyet {float: left;width: 105px;}
				div#nguyet a {border:0;}
														
			/********PORTFOLIO********/
				div#projects { padding-bottom:8px; width: 601px; min-height: 1200px; overflow: visible;}
				.left {float:left; width: 290px; height: 153; padding-right: 20px; margin-bottom: 10px; }
				.right {float:right; width: 290px; height: 153; margin-bottom: 10px; }
				
				div#portfolio-left {float: left; width: 225px; height:auto; padding-right: 10px;margin-top: 10px;}
				div#portfolio-right {float:right; margin-top: 25px; }
				div#portfolio-wrap {width: 900px; background-color: white;}
				img {border: 0;}
				
				ul li a {text-decoration: none; border: none; list-style-type: none;}
				ul li a:hover {text-decoration: none; border: none; list-style-type: none;}
								
				div#logoCarousel {width:601px; height: 205px; margin-bottom: 20px;}
				
				.logoCarousel { width:601px; float: left; padding-right: 0; margin-bottom: 20px; }
					.logoCarousel .wrapper { width: 601px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ 
										overflow: auto; min-height: 205px; position: absolute; }

					.logoCarousel ul a img {-moz-border-radius: 0;-webkit-border-radius: 0;}

					.logoCarousel .wrapper ul {width: 9999px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;position: absolute;top: 0;}

					.logoCarousel ul li {display:block;float:left;height: 205px;width: 601px;}

					.logoCarousel ul li a img {display:block;}

					.logoCarousel .arrow-left {display: block;background: transparent url("../images/arrow-left.png") no-repeat 0 0;width: 34px;height: 74px;position: absolute;top: 1615px;z-index: 70;cursor: pointer;text-indent: -999px;left:315px; border: none;}

					.logoCarousel .arrow-left:hover {background-position: 0 -74px;}

					.logoCarousel .arrow-right {display: block;background: transparent url("../images/arrow-right.png") no-repeat 0 0;width: 37px;height: 74px;position: absolute;top: 1615px;z-index: 70;cursor: pointer; text-indent: -999px; border: none;}

					.logoCarousel .arrow-right:hover {background-position: 0 -74px;}

					.logoCarousel .forward {right: 0;}

					.logoCarousel .back {left: 880px;}
					
			/********PROCESS********/
			.box {margin:15px 0 15px 0;background: url("../images/layout/bg-process.gif") no-repeat 0 0; height:196px; width: 603px;}
			.box-wrapper {padding:10px 25px 10px 25px; }
			.box-left {float:left; width:249px; padding-right: 20px; margin-bottom: 20px;}
			
							
			/********CONTACT US********/	
			div#contact-header {clear:both; }
				div#contact-left-column { float:left; margin-right:25px; width: 350px; } 
				div#contact-left-column {border-bottom: 1px solid #f0e1d6;}
				div#contact-right-column { float:right; margin:0; width: 230px;} 
				div#contact-right-column p {border-bottom: 1px solid #f0e1d6;}
					.quote {padding-left: 100px;}
										
		  	
		  					  				
/* ----- Footer -----------------------------------------------------*/
div#footer { margin:0; background: url("../images/layout/footer.png") no-repeat scroll 50% 0; color: #da666b; clear: both; height: 140px; font-size: 1.1em; } 
		div#footer .container-footer {width: 968px; margin: 0 auto; height:auto !important; position:relative; overflow: hidden; text-align: left;}
		div#footer-left { width: 640px; float: left; padding-top: 100px; }
		div#footer-right {padding-left: 0;}
			ul#nav-footer li { float: left; display: inline; padding-right: 15px; padding-top: 100px;}
			ul#nav-footer li a { color: #619a8a; text-decoration: none; border-bottom: 1px dotted #619a8a;}
			ul#nav-footer li a:hover { color: #ee7678; border-bottom: 1px dotted #ee7678;}