/* CSS Document */

/* @override http://feelgood.com.ph/css/site.css */

/******************************************/
/******-> site.css <-******/
/* rules that apply to every page on the site */
.print {
  display:none;
  visibility:hidden;
}
iframe {
  margin:0;
  padding:0;
  border:1px dotted #333;
}
/******-> Body/global settings <-******/
body{
	text-align:center;
  	background: #FFF url(../images/background_logo2.gif) no-repeat fixed center top;
	font-size: 10px; 
	margin:0;
	padding:0;
}

table, td, tr {
  font-size: 10px; 
}

/******-> global text settings <-******/
body, div, p, h1, h2, h3, h4, h5, h6, address, label, legend, input, select {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: normal;
 
}

h1, h2 {
  margin:0;
  padding:0;
}

table, tr, td {
	color:#000000;
}

/******-> global link settings <-******/
a {
  text-decoration: none;
  color: #FF33CC;
}
a:hover {
	color:#FF0000;
}

/******-> global UL settings <-******/
ul li {
  list-style:none;
}


/******-> page <-******/
#page {
  text-align:left;
  width:708px;
  margin:0 auto;
  padding:10px 0;
  color:#000;
}
/******************************************/

/******************************************/
/******-> Header <-******/
/* rules that structure and style the header block */
#feelgoodlogo {
	text-align:left;
	position:fixed;
	/*top:10px;*/
	top:76px;
	margin:0 auto;
	/*padding:0 0 0 59px;*/
	padding:0 0 0 39px;
	width:177px;
	voice-family: "\"}\"";
	voice-family:inherit;
	width:118px;
}
html>body #feelgoodlogo {
  width:118px;
}

#leftnav {
  text-align:left;
  position:fixed;
  top:157px;
  margin:0 auto;
  padding:0 0 0 59px;
  width:110px;
}

#leftnav p {
  margin-top:5px;
  margin-bottom:5px;
}

#leftnav a,
#leftnav a:visited {
  color:#333333;
  text-decoration:none;
  font-size:14px;
}

#leftnav a:hover,
#leftnav a:visited:hover {
	text-decoration:none;
	color: #FF33CC;
}

/*#leftnav a span.header{
 color:#000000;
  text-decoration:none;
  font-size:14px;
  /*font-weight:bold;
}*/

#leftnav a span.subcategory{
	font-size:12px;
	color:#666;
	margin-left:5px;
}

#leftnav a span.subcategory:hover {
	color:#FF33CC;
	text-decoration:underline;
}

#leftnav a span.subsubcategory{
	font-size:10px;
	color:#666;
	text-align: right;
}

#leftnav a span.subsubcategory:hover {
	color:#FF33CC;
	text-decoration:underline;
}

#header {
  position:relative;
  margin: 0 0 0 177px;
  padding:0;
}
#header #cart {
  height:60px;
  text-align:right;
}
#header #cart a {
	color:#FF33CC;
	text-decoration:none;
}
#header #cart a:hover {
  color:#FF0000;
}
#home_header {
  position:relative;
  margin: 0 0 0 177px;
  padding:0;
}
#home_header #cart {
  height:50px;
  text-align:right;
}
#home_header #cart a {
}
#home_header #cart a:hover {
  text-decoration: underline;
}

/******-> Header/Footer -- Navigation <-******/
div.navigation {
  
}
/* new nav */
.navigation {
	display:table;         /* ignored by IE */
	padding:0;
	margin:0;
	width:100%;
	list-style-type:none;
	white-space:nowrap;    /* keep text on one line */
	border:1px solid #999999; /* add a border to show size of navigation */
	background-color: #FFFFFF;
  }
* html .navigation {
  display:inline-block;  /* for IE only */
  width:1px;             /* IE will expand to fit navigation width */
  padding:0 2px;         /* fix bug in IE for border spacing */
  }  
  
div.navigation ul {
  list-style:none;
  list-style-type:none;
  margin:0;
  padding:10;  
}
.navigation li {
  display:table-cell;    /* ignored by IE */
  width:118px;
  margin:0;
  padding:0;
  }
* html .navigation li {
  display:inline;        /* for IE only */
  }
 
div.navigation ul li a {
  margin:0;
  padding:0;
}

.navigation a, .navigation a:visited {
  display:block;         /* for all browsers except IE */
  padding:4px 16px;
  color:#000; 
  background:#ffffff; 
  border:none; /* add a 1px white border around items */ 
  text-decoration:none;
  }
* html .navigation a, * html .navigation a:visited {
  display:inline-block;  /* for IE only */ 
  margin:0 -2px;         /* to correct an IE border width bug */  
  }
  
.navigation a:hover {
	text-decoration: none;
  color: #FF33CC;
  }
  
.lefted {margin:0 auto 0 0;}
.centered {margin:0 auto;}
.righted {margin:0 0 0 auto;
}

/******-> Font color classes <-******/
.white {color:#FFFFFF;}
.black {color:#000;}
h3.grey {color:#FF33CC;}
.bordered {border: 1px solid #333333;}
.red {color:#FF0000;}

/******-> Header -- Breadcrumb <-******/
#header #breadcrumb {
  margin: 30px 0 0 0;
  padding:8px 0 0 0;
  height:30px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  height:22px;
}
html>body #header #breadcrumb {
  height:22px;
}
#header #breadcrumb p, #header #breadcrumb h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  color: #000;
  font-size: 1.2em;
  margin:0;
  padding:0;
}
#header #breadcrumb a {
  color: #666666;
  text-decoration: none;
}
#header #breadcrumb a:hover {
  color: #FF33CC;
  text-decoration: none;
}
#header #breadcrumb a.here {
  color: #FF33CC;
  text-decoration: none;
}
#header #breadcrumb a.here:hover {
  color: #FF0000;
  text-decoration: none;
}

/******-> Header -- Back Link <-******/
#header #backlink {
  margin: 0 0 0 0;
  padding:8px 0 0 0;
  height:30px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  height:22px;
}
html>body #header #backlink {
  height:22px;
}
#header #backlink p {
  font-size:1.1em;
  margin: 0;
  padding:0;
}
#header #backlink a {
  margin: 0;
  padding:0;
}
/******************************************/

/******************************************/
/******-> Messagestack <-******/
#messagestack {
  margin: 0 69px 0 177px;
}
#messagestack table{
  margin-bottom: 10px;
}
/******************************************/

/******************************************/
/******-> Content <-******/
/* rules that structure and style the content block */
#content {
  position:relative;
  margin: 0 59px 0 177px;
  padding: 0;
}

/******-> Content -- Column <-******/
#content div.column-thumbnail {
  float:left;
  display:inline;
  clear:none;
  margin:0;
  padding:0 10px 15px 0;
}
#content div.column-thumbnail div {
  margin:0 21px 96px 0;
  padding:0;
}
#content div.column-thumbnail div img {
  display:block;
  margin: 0 0 10px 0;
}
#content div.column {
  float:left;
  display:inline;
  width:236px;
  clear:none;
  margin-top:10px;
  padding:0;
}
#content div.thumbnails {
  float:left;
  display:inline;
  vertical-align:top;
  width:145px;
  clear:none;
  margin:0 10px 10px 0;
  padding:0;
}
#content div.right {
  float:right;
}
#content div.wide {
  width:472px;
}
#content div.wide div.right {
  width: 214px;
}
#content div.links {
  height:118px;
  margin:0;
  padding:0;
}
#content div.links_padded {
  margin:0;
  padding:0 0 20px 0;
}
#content div.narrow {
  height:118px;
  width:118px;
  margin:0;
  padding:0;
}

#content div.column div {
  margin:0 21px 10px 0;
  padding:0;
}
#content div.narrow div, #content div.links div  {
  margin:0 21px 0 0;
}
#content div.narrow div, #content div.links_padded div  {
  margin:0 21px 0 0;
}

#content div.philosophy {
	border: 1px dotted #CCCCCC;
}

#content table.bgblack {
	background-color:#000000;
}


#content table.bggrey {
	background-color: #CCC;
}
/******-> Content - Big banner for top of page <-******/
#banner {
	width:100%;
	margin-bottom:10px;
	clear:both;
	border: 1px solid #333333;
}

/******-> Content - Containers for SWF <-******/
#mainPushContainer{
	background-color:#000000;
	color:#FFFFFF;
}

#vibeContainer{
	background-color:#000000;
	color:#FFFFFF;
}


/******-> Content - Header Flash for SWF <-******/
#content #swfheader{
	background-color: #000000;
	clear: both;
	width: 100%;
}

/******-> Content -  Text blocks for Index Page <-******/
#content div.blocktext {
    width:100%;
    margin-bottom:20px;
	clear:both;
}

#content div.resultstext{
   width:100%;
    margin:20px 10px 20px 10px;
	clear:both;
}



/******-> Content -- Module <-******/
#content div.module {
  float:right;
  display:inline;
  width:226px;
  height:305px;
  margin: 0 10px 10px 0;
  padding: 0;
}

#content div.smallmodule {
  display:inline;
  width:226px;
  height:226px;
  margin: 0 10px 10px 0;
  padding: 0;
}

#content div.moduletext {
	display:inline;
	width:226px;
	height:108px;
	margin: 0 10px 10px 0;
	padding: 0;
}

#content div.left {
  float:left;
}
#content div.container {
  float:right;
  display:inline;
  width:236px;
  margin: 0;
  padding: 0;
  clear:none;
}
#content div.container-left {
  float:left;
  display:inline;
  width:236px;
  margin:0;
  padding:0;
  clear:none;
}
#content div.big {
	width:462px;
	height:auto;
	margin: 0 10px 10px 0;
	border: 1px solid #333333;
}
#content div.small {
  width:108px;
  height:auto;
  margin: 0 10px 10px 0;
}

/******-> Content -- Catmodule <-******/
#content div.catmodule{
	display:inline;
	float:left;
	height: 282px;
	width: 150px;
	margin:0 0 0 5px;
	border: 1px solid #CCC;
	background-color:#FFFFFF;
}

#content div.catmodule div.image {
  height:250px;
  width:150px;
  margin:0 0 5px 0;
}

#content div.catmodule div.image img {
  display:block;
  margin:0 0 0 0;
  padding:0;
}

#content div.catmodule div.description {
  height:20px;
  width:150px;
  margin:0;
}

#content div.catmodule div.description p {
  margin:0 auto;
}

/******-> Content -- Module -- Product <-******/

#content div.product {
  border:1px solid #333333;
  width:226px;
  height:305px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:224px;
  height:305px;
}

/*#content div.productBlock {
  border:1px solid #333333;
  width:226px;
  height:265px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:224px;
  height:265px;
}*/

#content div.productBlock {
  border:1px solid #333333;
  width:140px;
  height:170px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:138px;
  height:170px;
}

#content div.emphasis {
	background-color:#FF99FF;
	color:000000;
 }
 
html>body #content div.product {
  width:224px;
  height:305px;
}

html>body #content div.productBlock {
	width:140px;
  	height:170px;
}

#content div.product div.image {
  height:204px;
  width:204px;
  margin:10px 10px 14px 10px;
}

#content div.productBlock div.image {
  height:100px;
  width:100px;
  margin:10px 20px 14px 20px ;
}
#content div.product div.image img,
#content div.productBlock div.image img {
  display:block;
  margin:0;
  padding:0;
}

#content div.product div.description,
#content div.moduletext div.description {
  height:70px;
  width:204px;
  margin:0 10px;
}

#content div.productBlock div.description {
  height:70px;
  width:100px;
  margin:0 20px;
}

#content div.description {
	/*color:#FFFFFF;*/
}

#content div.product div.description p,
#content div.productBlock div.description p {
  margin:0;
}

#content div.blacktext {
	color:#000000;
}

#content TR.black {
	background-color: #000000;
}

#content span.noncaps {
	text-transform:lowercase;
}

#content div.column span.description {
	margin:0px 0px 0px 0px;
	font-size:10px;
}

/******-> Content - BlurbBox <-******/
/******-> Content -- Module <-******/
/*#content div.blurbBox {
  height:120px;
  width:100%;
  margin: 15px auto 0 auto;
  padding: 0;
  background:#000000;
  border:#333333 thin solid;
}*/

#content div.blurbBox {
  width:100%;
  padding: 0;
  border:#CCC thin solid;
}

#content div.snapshot {
  height:120px;
  margin: 15px auto 15px auto;
  background:#FFF;
}

#content div.review {
	margin: 0px auto 5px auto;
	background:#FFF;
}

#content div.abbrev{
	height:120px;
}

#content div.full{
	height:auto;
}

#content div.blurbBox div.centerbox {
  margin:10px auto;
}

#content div.blurbBox div.image {
  position:relative;
  float:left;
  height:100px;
  width:100px;
  margin:auto 10px 15px 10px;
}

#content div.blurbBox div.image img {
  display:block;
  margin:0;
  padding:0;
}

#content div.snapshot div.description {
  position:relative;
  float:left;
  width:325px;
  height:105px;
  margin:auto 0px auto 20px;
  color:#000;
}

#content div.review div.info {
  position:relative;
  width:400px;
  margin:20px 20px 5px auto;
}

#content div.review div.description {
  position:relative;
  font-size:12px;
  width:400px;
  height:105px;
  margin:20px 20px auto auto;
  color:#000000;
}

#content div.review div.description p {
	margin: 0;
}

#content div.blurbBox div.description p {
  margin:0;
}

/******-> Content -- H2 <-******/
#content h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4em;
  line-height: 1.273em;
  margin:0 0 .7em 0;
}

/******-> Content -- P, UL, OL <-******/
#content p, #content ul, #content ol {
  clear:both;
  padding:0;
}
#content p, #content li, #content a.block, #content dl dt, #content dl dd {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  line-height: 1.273em;
}
#content p {
  margin:0 0 1em 0;
}
#content li {
  margin:0;
  padding:0;
}
#content ul {
  list-style:none;
  margin:0 0 1em 0;
}
#content ul li {
  list-style:none;
  list-style-type:none;
  background-repeat: no-repeat;
  background-position: 0px 6px;
  padding-left:10px;
}
#content ol {
  list-style-position:outside;
  margin:0 0 0 22px;
}
#content ol li {
}
#content ul ul, #content ul ol, #content ol ol, #content ol ul {
  margin-top:4px;
  padding:0;
}

#content span.smalltext {
	font-size:9px;
	font-style:italic;
}



/******-> Content -- IMG <-******/
#content div.column div img {
  display:block;
  margin: 0 0 10px 0;
}
#content div.thumbnails img {
  display:block;
  margin: 0;
  padding: 0;
}

/******-> Content -- OsCommerce <-******/
#content span.inputRequirement {
  color: #FF33CC;
}

/******-> Content -- Special <-******/
#content span.feelgood {
  color:#FF33CC;
  /*font-size:.91em;*/
  text-transform: uppercase;
  /*text-transform: lowercase;
  font-variant: small-caps;*/
}

#content span.grey {
  color:#666666;
}

#content strong span.feelgood, #content b span.feelgood {
  color:#333333;
  /*font-variant: normal;
  text-transform: uppercase;*/
}
#content span.feelgood a {
  color:#FF33CC;
}

#content span.feelgood a:hover  {
	color:#FF0000;
}

#content a.here span.feelgood {
  color:#666;
}

#content a.here {
  color:#666;
  /*background-color:#F7AACF;
  padding:0 3px;
  margin:0 0 0 -3px;*/
}
#content a.here:hover {
  color:#666;
  /*background-color:#F7AACF;
  text-decoration:none;*/
}

#content div.links a{
  color:#666;
}
#content div.links a:hover{
  color:#FF33CC;
}
#content div.links a.here{
  color:#FF33CC;
}
#content div.links a span.feelgood {
  color:#666;
}
#content div.links a:hover span.feelgood{
  color:#FF33CC;
}
#content div.links a.here span.feelgood {
  color:#FF33CC;
}

#content div.links_padded a{
  color:#666;
}
#content div.links_padded a:hover{
  color:#FF33CC;
}
#content div.links_padded a.here{
  color:#FF33CC;
}
#content div.links_padded a span.feelgood {
  color:#666;
}
#content div.links_padded a:hover span.feelgood{
  color:#FF33CC;
}
#content div.links_padded a.here span.feelgood {
  color:#FF33CC;
}

#content .pagination {
  text-align:center;
}

#content div h2.price{
  margin-bottom:10px;
}


/******************************************/
/******-> Footer <-******/
/* rules that structure and style the footer block */
#footer {
  margin: 0 0 0 177px;
  padding: 0;
  clear:both;
}
#footer #copyright {
  margin: 10px 0 0 0;
  font-size:10px;
  color:#666666;
}

#footer #copyright a {
	color:#666666;
}

#footer #copyright a:hover {
	color:#FF33CC;
}

#footer p {

  text-align:right;
  margin:0;
  padding:0;
}
#backtotop{
  margin:0;
  padding:9px 0 0 0;
  height:10px;
  voice-family: "\"}\""; 
  voice-family:inherit;
  height:11px;
  clear:right;
}
html>body #backtotop{
  height:11px;
}
#backtotop p{
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-align:right;
  margin:0;
  padding:0;
}

TD.copyright{
  margin: 30px 0 0 0;
  font-size:8px;
}

/******-> INLINE GALLERY FOR PRODUCT_INFO.PHP <-******/
#content div.gallerymodule {
	width:462px;
	height:auto;
	margin: 0 10px 10px 0;
  	display:inline;
	padding: 0;
}

#content #blenddiv{
	width:462px;
	height:250;
	background-repeat:no-repeat;
	margin: 0;
	padding: 0;
}

#content #blenddiv img{
	border: 0 none;
	filter: alpha(opacity=0); 
	-moz-opacity: 0; 
	opacity: 0;
}

#content .inlinegallery {
	width:100%;
	margin-bottom:5px;
	padding:0;
	text-align:right;
}
	
#content .inlinegallery ul {
	margin:0;
	padding:0;
}

#content .inlinegallery li {
	display:inline;
	margin:0px;
	list-style-type: none;
}

#content .inlinegallery ul li a img{
	display:inline;
	margin:0;
	padding:0;
}
/******-> END INLINE GALLERY <-******/

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

/******************************************/
/******-> Clear Hack <-******/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/******************************************/

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