/*
Theme Name: Fang Studio
Author: Frank Lam
*/


/* RESET
*/

*			{margin: 0; padding: 0;}


html		{overflow-y: scroll; overflow-x: hidden}


html, body	{height:100%;}

body		{font-size: 13px; font-family: Arial, sans-serif; background:#fff}

a			{outline: none; text-decoration: none;}

a img		{border: none;}

p			{line-height:24px;  }

img			{border: none;}

li		{list-style: none;}

img			{vertical-align:middle;}

table		{border-collapse: collapse;}

hr			{color: #000;
background-color: #000;
height: 1px;
border:0;
width:790px;
margin:0 0 0px 0;
padding:0;}

input {font:Arial, Helvetica, sans-serif; font-size:11px; border:solid 1px #ddd }
textarea {font:Arial, Helvetica, sans-serif; font-size:11px; border:solid 1px #ddd }
select {font:Arial, Helvetica, sans-serif; font-size:11px; border:solid 1px #ddd }



/*
UTILITY
*/

.floatLeft		{ float: left;}
.floatRight		{ float: right;}
.clear			{clear: both;}

.button			{border: 0px solid #666666; background: #666666;

				padding: 3px 8px; -moz-border-radius: 5px; -webkit-border-radius:5px;

				color: #ffffff; }


.buttun:hover	{background: #cccccc; color: white;}

.center         {text-align:center; }

.hidden {
display:none
}

.mid-width      {width:580px }

.contact-bg     {background: url('images/contact_bg.png') center top no-repeat; }

.index-bg     {
		background-position: center top; 
		background-repeat: no-repeat;
}

.trans-div      {/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(255, 255, 255);
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.5);
    padding:10px;

	 }
        

.p-btn           {background:#fff;padding:10px; width:260px }

.w-1             {width:260px; }

.w-2             {width:210px;background:#fff; padding:10px; margin-right:120px; }

.p-1			{padding:0; margin-left:20px}

.p-2			{padding-top:15px; padding-left:10px}

.p-3			{padding-top:15px;}

.p-4			{padding-left:10px; padding-right:10px}

.b-right        {border-right:1px solid #ccc }

.b-bottom       {border-bottom:1px solid #ccc; height:10px; width:820px; padding:5px 0 0 0; margin-bottom:25px; margin-left:20px }

.grey           {color:#666; }

/*
STRUCTURE
*/


#page-wrap		{width:960px; margin:0 auto 0;
                 height:auto !important; position:relative;
                 margin-top:20px;
}

#page-wrap:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}



#push			{height: 0; clear:both;}

#main-col		{width:860px; height:auto; position:relative; padding-top:10px; padding-bottom:50px; float:right }



#left-col-wrap  {width:63px; left:0px; position:absolute; top:0px }

#left-col		{width:63px; height:auto; top:0; position:absolute;padding-top:64px;margin: 10px 0 0 10px;}

#left-col.fixed {position:fixed; top:0;}

#right-col		{width:800px; padding:10px; height:auto ;float:right}

#home-btn		{position:absolute; left:963px; bottom:-30px;}

#middle-wrap	{width:650px; margin:0px auto; height:auto; padding-top:140px; padding-bottom:160px}

.col-text       {width:390px; padding:10px 19px 20px 20px; float:left }

#lang			{position:absolute; right:20px; top:0px; z-index:9999;}

/*
TYPOGRAPHY
*/

p, li			{margin: 0px 0 0px 0; color: #666; font-family: Arial, sans-serif; font-size:12px}

a				{color: #888;}

a:hover			{color: #666;}


td				{color: #666; font-family: Arial, sans-serif; font-size:11px; padding:2px 8px 2px 0}

.bold           {font-weight:bold; }

.it				{font-style:italic;}

.ann			{font-size:10px; text-align:left; display:inline-block;}

.title          {font-weight:bold; font-size:18px; margin-bottom:-5px}

.m-title        {font-weight:bold; font-size:14px;}    

.m-title-2        {font-weight:normal; font-size:14px; line-height:20px;}     

.l-1            {line-height:14px; padding-left:10px; }

.black			{color:#000; }
 
/*
HEADER
*/

#top { height:40px; width:880px; position:absolute; top:100px; left:70px}

#top li {list-style:none; margin:0px; padding:0px;display:inline}

#top-bar {height:64px; width:100%; position:relative}

.top-h1 {font-size:18px; color:#666; font-weight:bold; padding-bottom:10px; border-bottom:1px solid #ccc; width:820px }           

.top-h1-2 {font-size:18px; color:#666; font-weight:bold; padding-bottom:0;  width:820px }           


/*
MENU
*/

/*
#left-col img {  
.margin-bottom:-4px; 
border:0px;  
height:62px;
width:62px;
}  

#left-col a { 
height:62px;
width:62px;
float:left;
display:inline-block;
padding:10px;
}
*/


.normal {
padding:5px 0 5px 10px;
background:#fff;
margin-bottom:10px;
 }
 
.normal a {
color:#666;
 }
 
.active {
padding:5px 0 5px 10px;
background:#b2b2b2;
margin-bottom:10px;
 }
 
.active a {
color:#fff;
 }
 

.logo-1     {padding-bottom:10px }


/*
INDEX
*/

#index-col-wrap		{float:left; /* important for inline positioning */  
width:auto;
height:auto;
padding:5px 10px 10px 10px ;
overflow: hidden;  /* important (hide the items outside the div) */  
/* non-important styling bellow */  
background: #fff; 

}

#home		{
width:100%;
height:550px;	
}

 
 
 
/* 
#index-col-wrap img {  
.margin-bottom:-4px; */ /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that */  
/* styling */  
/* cursor:pointer;  
cursor: hand; */
 /*
height:160px;
width:240px;
}  

#index-col-wrap a { 
height:160px;
width:240px;
display:inline-block;
}*/

.p-img { 
padding:3px 10px 3px 10px;
height:50px;
width:50px;
display:inline-block;
}

.cat-name {

padding:30px 0 0 0;


}

.p-row {
width:280px;
height:auto;
float:left;

}

.p-row-2 {
width:810px;
height:auto;
float:left;
padding:0px 10px 5px 0;
margin: 0 0 5px 10px;
border-bottom:solid 1px #ccc;


}

.p-row-2-l {
width:140px;
float:left;
}

.p-row-2-l p {
color:#666;
font-size:12px;
font-weight:normal;
 }

.p-row-2-r {
width:650px;
float:right;
position:relative;

}

.close-div
{position:absolute; 
right:0px;
top:0px;}

.top-pad {
padding-top: 125px;
}


.prod-icon {
float:left;
height:240px;
width:150px;
padding:20px 25px 0 15px;
border:0px solid #eee; 

}

.prod-icon img {
width:150px;
} 

.prod-icon p {
font-size:12px;
font-style:italic;
color:#666;
padding-top:10px;
line-height:14px;
 }

.prod-inner {
position:relative;
height:150px;
width:240px;
}

.prod-name {
position:absolute;
left:0;
bottom:0;
background:#000;
width:230px;
height:24px;
padding:5px;
filter:alpha(opacity=20);
        -moz-opacity:0.2;
        -khtml-opacity: 0.2;
        opacity: 0.2;
}

.prod-name p {
color:#fff;
}


#nav-arrow {
position:absolute;
top:25px; 
right:10px;
 }




/*
Contact
*/

#contact-info {padding:20px}


/*
About Danny
*/

#left-photo {width:650px; height:436px;padding-top:30px; text-align:center; margin:0px auto;}

#right-text-wrap {width:650px; height:auto; margin:0px auto; }

.studio-more-btn  {display:inline-block; padding:10px; color:#fff; background:#ccc; margin:10px 0 10px 0;}

/*
Product
*/

#slideshow	{width:650px; height:430px; overflow:hidden ;}

#links		{position:absolute; right:30px; bottom:30px; z-index:9999}

#control-wrap	{width:650px; height:20px;}

#right-p-text-wrap {width:650px; height:auto; margin:0px auto; padding-bottom:50px;  padding-top:20px;}

#product-img-col {float:left; width:520px; padding:10px;  }

#product-txt-col {float:right; width:300px; padding:10px 20px 50px 10px; }

.share-button {width:300px; height:20px; background:#eee; margin-top:-40px; padding:5px; color:white; margin-right:10px}

#prod-head {width:840px; padding:10px}
#prod-head img {width:100%; }

.prod-img {width:auto;height:auto;padding:10px 10px 10px 20px ;float:left;  }
.prod-img-2 {width:auto;height:auto;padding:20px 20px 10px 20px;float:left;  }



/*
NEWS
*/
#news	{height:auto; width:650px; position:relative}

.pub-block {position:relative; width:100%; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #ccc;}

.center-p  {width:300px; position:absolute; left:0px; bottom:5px; height:auto;}



/*
FOOTER
*/


#footer	{padding-top:0px; clear:both; width:960px; margin:0 auto 0; height:4em; text-align:left; }
#footer p {font-size:10px; }