/* =Containers
--------------------------------------------------------------------------------*/
.container_12
{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	background-color:#FFFFFF;
}

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	display: inline;
	float: left;
	position:relative;
	margin-left: 10px;
	margin-right: 10px;
}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1 {width: 60px;}
.container_12 .grid_2 {width: 140px;}
.container_12 .grid_3 {width: 220px;}
.container_12 .grid_4 {width: 300px;}
.container_12 .grid_5 {width: 380px;}
.container_12 .grid_6 {width: 460px;}
.container_12 .grid_7 {width: 540px;}
.container_12 .grid_8 {width: 620px;}
.container_12 .grid_9 {width: 700px;}
.container_12 .grid_10 {width: 780px;}
.container_12 .grid_11 {width: 860px;}
.container_12 .grid_12 {width: 940px;}

/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1 {padding-left: 80px;}
.container_12 .prefix_2 {padding-left: 160px;}
.container_12 .prefix_3 {padding-left: 240px;}
.container_12 .prefix_4 {padding-left: 320px;}
.container_12 .prefix_5 {padding-left: 400px;}
.container_12 .prefix_6 {padding-left: 480px;}
.container_12 .prefix_7 {padding-left: 560px;}
.container_12 .prefix_8 {padding-left: 640px;}
.container_12 .prefix_9 {padding-left: 720px;}
.container_12 .prefix_10 {padding-left: 800px;}
.container_12 .prefix_11 {padding-left: 880px;}

/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1 {padding-right: 80px;}
.container_12 .suffix_2 {padding-right: 160px;}
.container_12 .suffix_3 {padding-right: 240px;}
.container_12 .suffix_4 {padding-right: 320px;}
.container_12 .suffix_5 {padding-right: 400px;}
.container_12 .suffix_6 {padding-right: 480px;}
.container_12 .suffix_7 {padding-right: 560px;}
.container_12 .suffix_8 {padding-right: 640px;}
.container_12 .suffix_9 {padding-right: 720px;}
.container_12 .suffix_10 {padding-right: 800px;}
.container_12 .suffix_11 {padding-right: 880px;}

/* `Push Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .push_1 {left: 80px;}
.container_12 .push_2 {left: 160px;}
.container_12 .push_3 {left: 240px;}
.container_12 .push_4 {left: 320px;}
.container_12 .push_5 {left: 400px;}
.container_12 .push_6 {left: 480px;}
.container_12 .push_7 {left: 560px;}
.container_12 .push_8 {left: 640px;}
.container_12 .push_9 {left: 720px;}
.container_12 .push_10 {left: 800px;}
.container_12 .push_11 {left: 880px;}

/* `Pull Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .pull_1 {left: -80px;}
.container_12 .pull_2 {left: -160px;}
.container_12 .pull_3 {left: -240px;}
.container_12 .pull_4 {left: -320px;}
.container_12 .pull_5 {left: -400px;}
.container_12 .pull_6 {left: -480px;}
.container_12 .pull_7 {left: -560px;}
.container_12 .pull_8 {left: -640px;}
.container_12 .pull_9 {left: -720px;}
.container_12 .pull_10 {left: -800px;}
.container_12 .pull_11 {left: -880px;}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
	clear: both;
	content:' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/**
 * Drop shadow background
 */
.outer
{
	margin-left: auto;
	margin-right: auto;
	width: 992px;
	background-image: url(../images/bg_main.png);
	background-repeat: repeat-y;	
}

/**
 * Custom CSS setting:
 * ****/

body {
	background: #f9f9f7;
	color: #333;
	font-size: 0.8em;
	font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}
a {
	color: #333;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

.container_12 p {
	/*
	border: 1px solid #666;
*/
	overflow: hidden;
	padding: 10px 0;
	text-align: left;
}

/*
SEO COPY
*/
.seo{
	font-size: 70%;
	color: #888;
	text-decoration: none;		
}

.seo ul{
	list-style:none;
	margin-left: -25px;
}
.seo a {
	color: #999;
	text-decoration: none;
}
.seo a:hover {
	text-decoration: none;
	color: #666;	
}

.logo
{
	background-image: url(../images/logo_supremechiliving.png);
	background-repeat: no-repeat;
	width: 540px;
	height: 90px;
}

#tagline
{
	position:relative; 
	display:block; 
	font-size: 98%; 
	font-style:italic; 
	left:20px; 
	top:65px; 
}


#player{
	z-index:0;
}



#link_green a, #link_green a:active{
	color: #277D02;
	text-decoration: none;
}

#link_green a:hover{
	text-decoration: underline;
}

.hr_green {
	color: #fff; 
	background-color: #fff; 
	border: 1px dotted #305000; 
	border-style: none none dotted; 
}


label
{
width: 5em;
float: left;
text-align: right;
margin-right: 0.1em;
display: block
}

.submit input
{
/*
margin-left: 4.5em;
*/

} 
input
{
color: #781351;
background: #fee3ad;
border: 1px solid #781351
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
} 

.content {
	margin-top: 15px;
	font-size:90%;
}

.content ul { list-style-type:square;}

.content p{
	text-align:justify;
	font-family: Arial, Helvetica, sans-serif;
}

.side {
	margin-top: 15px;
}

.list_taichi{
	list-style-image:url('../images/icon_taichi.jpg');
	line-height: 150%;
	font-size: 120%;
}

.list_taichi a{
	text-decoration: none;
}

.list_taichi a:hover{
	text-decoration: underline;
}

.breadcrumb{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight:bold;
	color:#777;
}

.breadcrumb a{
	text-decoration: none;
	color:#777;
}

.breadcrumb a:hover{
	text-decoration: none;
	color:#333;
}