@charset "utf-8";


/*//////////////////////////////////////////////////

Title   : base.css
For     : Setting base styles

Author  : Kooy Siew Na
Created : 2009-02-19
Modified: yyyy-mm-dd

----------------------------------------

Content : 1. Main frame
               1. Container
               2. Header
               3. Content
               4. Footer

          2. Header
		  	   1. Logo
               2. Global nav

          3. Footer
               1. Copyright
               2. Example2
			   
          4. Sub content
		       1. Insturtor
			   
		  5. Main content (Specific categories)
               1. Home - Promo
               2. Home - About
               3. Boxes (instructor)
               4. Example4
               5. Example5
			   
          6. Classes
               1. Hidden nav
               2. Others

----------------------------------------

Colours :

#333 (grey)    : main text color
#185792 (blue) : main link color

----------------------------------------

Colours :

#333 (grey)    : main text color
#185792 (blue) : main link color

----------------------------------------

Font size : 12px 

//////////////////////////////////////////////////*/

/* ----------------------------------------(=0)
    0. Body
   ---------------------------------------- */

body {
	min-width: 800px;
	background: url(../images/bg.jpg) left top repeat-x;
	text-align: center;
}


/* ----------------------------------------(=1)
    1. Main frame
   ---------------------------------------- */

/*  1-1. Container
   ------------------------------- */
div#container {
	width: 782px;
	margin: 0 auto;
	text-align: left;
}

/*  1-2. Header
   ------------------------------- */
div#header {
	height: 55px;
	padding: 5px 0 0;
}

/*  1-3. Content
   ------------------------------- */
div#content { margin: 10px 0 0; }

/* ----- div#main ----- */
body#home div#main {
	float: left;
	width: 570px;
	margin: 20px 0 0;
	border: none;
}
div#main { display: inline;
	float: left;
	width: 580px;
	margin: 20px 0 0;
	padding: 0 20px 0 0;
	border-right: 1px solid #ccc;
}

/* ----- div#sub ----- */
body#home div#sub {
	float: right;
	width: 190px;
	margin: 20px 0 0;
	padding: 0;
}
div#sub {
	float: right;
	width: 160px;
	margin: 20px 0 0;
	padding: 0 0 0 2px;
}

/*  1-4. Footer
   ------------------------------- */
div#footer_outer {
	margin: 20px 0 0;
	background: #ececec;
}
body#home div#footer {
	background: url(../images/footer_bg.gif) top center repeat-y;
}
div#footer {
	width: 782px;
	margin: 0 auto;
	padding: 10px 0 0;
	border-top: 20px solid #ececec;
	border-bottom: 20px solid #ececec;
	background: url(../images/footer_bg2.gif) top center repeat-y;
	color: #185792;
	font-size: 11px;
	text-align: left;
}

div#footer_copy_outer {
	padding: 10px 0;
	background: #666;
}
div#footer_copy {
	width: 782px;
	margin: 0 auto;
	padding: 5px 0;
	font-size: 11px;
	color: #fff;
	text-align: left;
}
div#footer_copy p { margin: 0; }


/* ----------------------------------------(=2)
    2. Header
   ---------------------------------------- */
div#header { height: 77px; }
div#header h1#logo {
	float: left;
	width: 230px;
	margin: 0;
	padding: 0 10px 0 0;
	background: url(../images/icon_header_separator.png) right top no-repeat;
	behavior: url("js/iepngfix.htc");
}

/* ----- gnavi ----- */
div#header #gnavi {
	float: right;
	width: 542px;
	padding: 25px 0 0;
}
div#header #gnavi ul li {
	display: inline;
	float: left;
	height: 30px;
	line-height: 30px;
	margin: 0 10px;
	padding: 0 0 0 5px;
}
div#header #gnavi ul li a {
	float: left;
	height: 30px;
	color: #000;
}
div#header #gnavi ul li.current { background: url(../images/tab_navi_l.gif) no-repeat; }
div#header #gnavi ul li a.current {
	padding-right: 10px;
	padding-left: 5px;
	background: url(../images/tab_navi_r.gif) right top no-repeat;
	color: #185792;
}

/* ----- sub navi ----- */
div#header ul.sub { clear: both; }
div#header ul.sub li {
	/*float: left;*/
	display: inline;
	text-align: left;
	height: 22px;
	line-height: 22px;
	margin: 0 10px 0 0;
	padding: 0 10px 0 0;
	background: url(../images/icon_line.gif) right center no-repeat;
}
div#header ul.sub li a {
	color: #185792;
}
div#header ul.sub li.lastChild {
	margin-right: 0;
	padding-right: 0;
	background: none;
}

div#header ul.sub ul#s1_m { margin-left: 260px;}
div#header ul.sub ul#s2_m { margin-left: 330px;}
div#header ul.sub ul#s3_m { margin-left: 405px;}
div#header ul.sub ul#s4_m { margin-left: 525px;}
div#header ul.sub ul#s5_m { margin-right: 110px; text-align: right;}
div#header ul.sub ul#s6_m { margin-right: 25px; text-align: right;}

/* ----- flash banner ----- */
div#hero_con {
	margin: 19px 0 0;
	border: 1px solid #ccc;
}
div#hero_con #hero { vertical-align: bottom; }


/* ----------------------------------------(=3)
    3. Footer
   ---------------------------------------- */
div#footer #article {
	float: left;
	width: 340px;
	padding: 0 20px 0 0;
}
div#footer #article a.more { text-decoration: underline; }

body#home div#footer #feature {
	float: left;
	width: 170px;
	padding: 0 20px;
}
div#footer #feature {
	float: left;
	width: 200px;
	padding: 0 20px;
}
div#footer #feature dl { margin: 0 0 5px; }
div#footer #feature dl dt,
div#footer #feature dl dd { margin: 0; }


body#home div#footer #store {
	float: left;
	width: 192px;
	padding: 0 0 0 20px;
}
div#footer #store {
	float: left;
	width: 162px;
	padding: 0 0 0 20px;
}
div#footer #store ul li { margin: 0 0 5px; }
div#footer #store a.more { text-decoration: underline; }

div#footer #store h3,
div#footer #feature h3,
div#footer #article h3 { margin: 0; }

div#footer_copy ul {
	float: right;
}
div#footer_copy ul li {
	display: inline;
	line-height: 14px;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	border-right: 1px solid #fff;
}
div#footer_copy ul li.lastChild { border: none; margin: 0; padding: 0; }
div#footer_copy a { color: #fff; }


/* ----------------------------------------(=4)
    4. Sub content
   ---------------------------------------- */
div#sub li a { text-decoration: underline; }

/* ----- rate ----- */
div#sub .rate {
	line-height: 16px;
	font-size: 11px;
}
div#sub .rate dl { margin: 0 0 20px; }
div#sub .rate dl dt { margin: 0; }
div#sub .rate dl dd { margin: 0; }
div#sub .rate dl dd li { margin: 0; }

/* ----- subscribe ----- */
div#sub .subscribe { margin: 0 0 25px; }
div#sub .subscribe input {
	width: 150px;
	padding: 2px 5px;
	background: #e1e1e1;
	border: 1px solid #ccc;
	color: #999;
	font-size: 11px;
}
body#home div#sub .subscribe input { width: 180px; }
   
/*  4-1. Insturtor
   ------------------------------- */
div#sub h2 { margin: 0 0 5px; }
.equo_inner {
	padding: 0 0 20px 0;
	background: #e8e8e8 url(../images/icon_quo_c.gif) right bottom no-repeat;
}
.equo {
	padding: 20px 15px 0 15px;
	background: #e8e8e8 url(../images/icon_quo_o.gif) left top no-repeat;
	font-size: 13px;
}
.equo em { font-style: italic; }

   
/* ----------------------------------------(=5)
    5. Main content (Specific categories)
   ---------------------------------------- */
   
/*  5-1. Home - Promo
   ------------------------------- */
/* ----- sub_hero_trainer ----- */
.sub_hero_trainer {
	float: left;
	width: 288px;
	height: 147px;
	line-height: 16px;
	margin: 0 10px 0 0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: url(../images/sub_gym.jpg) bottom no-repeat;
}
.sub_hero_trainer h2 {
	height: 21px;
	line-height: 21px;
	padding: 0 0 0 10px;
	background: #185792;
	border-bottom: 1px solid #ccc;
	color: #fff;
}
.sub_hero_trainer .desc { float: right; width: 138px; margin-right: 10px; }
.sub_hero_trainer .desc p { font-size: 11px; }
.sub_hero_trainer .desc p.btn { text-align: right; margin: 10px 0 0; }
.sub_hero_trainer .desc p span {
	display: block;
	font-weight: bold;
	font-size: 14px;
}

.sub_hero_promo {
	float: left;
	width: 288px;
	height: 147px;
	line-height: 16px;
	margin: 0 10px 0 0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: url(../images/sub_02.jpg) bottom no-repeat;
}
.sub_hero_promo h2 {
	height: 21px;
	line-height: 21px;
	padding: 0 0 0 10px;
	background: #185792;
	border-bottom: 1px solid #ccc;
	color: #fff;
}
.sub_hero_promo .desc { float: right; width: 138px; margin-right: 10px; }
.sub_hero_promo .desc p { font-size: 11px; }
.sub_hero_promo .desc p.btn { text-align: right; margin: 10px 0 0; }
.sub_hero_promo .desc p span {
	display: block;
	font-weight: bold;
	font-size: 14px;
}

/* ----- sub_hero_promo 
.sub_hero_promo {
	float: left;
	width: 290px;
	height: 147px;
	line-height: 16px;
	margin: 0 10px 0 0;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: url(../images/sub_02.jpg) bottom no-repeat;
}
.sub_hero_promo h2 {
	height: 21px;
	line-height: 21px;
	padding: 0 0 0 10px;
	background: #185792;
	border-bottom: 1px solid #ccc;
	color: #fff;
}
.sub_hero_promo .desc { float: right; width: 188px; margin: 20px 10px 0 0; }
.sub_hero_promo .desc p { font-size: 11px; }
.sub_hero_promo .desc p.btn { text-align: right; margin: 10px 0 0; }
.sub_hero_promo .desc p span {
	display: block;
	font-weight: bold;
	font-size: 14px;
}
----- */
/* ----- sub_hero_ad ----- */
.sub_hero_ad {
	float: right;
	width: 179px;
}
.sub_hero_ad img { margin: 0 0 5px; border: 1px solid #ccc; }

.sub_promo_ad {
	float: right;
	width: 179px;
	padding: 19px 0 0;
}
.sub_promo_ad img { margin: 0 0 8px; border: 1px solid #ccc; }

/*  5-2. Home - About
   ------------------------------- */
/* ----- about ----- */
body#home div#main #about {
	clear: both;
	height: auto;
	line-height: 16px;
	padding: 0 20px 0 0;
	font-size: 11px;
	border-right: 1px solid #ccc;
}
body#home div#main #about ul li { margin: 0; }

/*  5-3. Boxes
   ------------------------------- */
/* ----- boxA ----- */
.boxA ul { margin: 15px 0; }
.boxA ul li { margin: 0; }

.boxA table.trainer_list {
	margin: 0 0 15px;
	width: 560px;
}
.boxA table.trainer_list td {
	padding: 0 20px 0 0;
	text-align: center;
}
.boxA table.trainer_list td img {
	margin: 15px 0 5px;
	border: 1px solid #ccc;
}

.boxA .lightBlue_bg p { margin: 0; }
.boxA .lightBlue_bg blockquote { margin: 0 0 15px; }
.boxA .lightBlue_bg { padding: 20px; }

/* ----- boxA ----- */
.boxB dl dt { margin: 0; font-weight: bold; }
.boxB dl dd { margin: 0 0 10px; }

.boxB { margin: 0 0 20px; }
.boxB h3 {
	margin: 0;
	color: #185792;
}

.boxB .left {
	float: left;
	width: 340px;
}
.boxB .right {
	float: right;
	width: 200px;
}
.boxB .right img { margin: 0 0 10px; border: 1px solid #ccc; }

table.time_table {
	margin: 5px 0 20px;
}
table.time_table td {
	padding: 3px 20px;
	border: 1px solid #ccc;
}

 
/* ----------------------------------------(=6)
    6. Classes
   ---------------------------------------- */

/*  6-1. Hidden nav
   ------------------------------- */
.hiddenNav {
	position: absolute;
    left: -9999px;
    font-size: 1%;
}

/*  6-2. Others
   ------------------------------- */
   
/* ----- float ----- */
.floatLeft  { float:left; }
.floatRight { float:right; }

/* ----- float clear ----- */
.clearLeft  { clear:left; }
.clearRight { clear:right; }
.clearBoth  { clear:both;}

/* ----- colors bg ----- */
.lightBlue_bg { background: #e7eefa; }

/* ----- bullets ----- */
ul.arrow li {
	padding-left: 11px;
	background: url(../images/icon_arrow.gif) left 5px no-repeat;
}
ul.square li {
	padding-left: 11px;
	background: url(../images/icon_square.gif) left 6px no-repeat;
}

/* ----- line ----- */
.line_grey {
	margin: 20px 0;
	padding: 1px 0 0;
	background: #e1e1e1;
}

.hidlink {
	COLOR: #333;
}