/* CSS Document for TWellness*/
/* Created on 7/14/2009 */
/* Author: George Mathew */
/* Last updated: 7/15/2009 */


/* ----------------------------General-----------------------*/
body{
	padding:0 0 0 0;
	margin:0;
	background-color:#f6f6f6;
	color:#000;
	 
	}

div, h1, h2, p, form, label, input, textarea, img, span{
	margin:0; padding:0;
}

ul{
	margin:0; 
	padding:0; 
	
	font-size:0;
}
hr {/*width: 50%;*/
float: left;
color: #101000;
text-align: left;/*this will align it for IE*/
margin: -17px auto 0 -1px; /*this will align it left for Mozilla*/
padding: 10px 0 0 10px;
} 
.spacer{
	clear:both; 
	font-size:0; 
	line-height:0;
}

/*--------------------------------------header-----------------------------*/
#container 
{
    background-color:#ffffff;
    width: 801px;
    margin:0 auto;
  
    
    

}
#branding{
    background: #ffffff;   
	width:801px;
	
	position:relative;
	
	
}
#content{
    background: #ffffff;   
	width:801px;
	
	position:relative;
	
	
}
#topsentence
{
    background: url("../images/tw_02.jpg");
    width: 801px;
    height: 36px;
    font-size: 19px;
    font-family: "Helvetica Narrow" , arial, sans-serif;
    font-weight: 100;
    font-style: normal;
    color: #FFFFFF;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
}
#logobackground 
{
     background: url("../images/header.jpg");
     width: 801px;
     height: 98px;
      font-size: 24px;
      font-family: "Book Antiqua", "Helvetica Narrow" , arial, sans-serif;
      color: #90c741;
      

}

  


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

/*-------------------------------------columns settings---------------------*/
.column {
  float: left;
  background-color: #ffffff;
}

#defaultText
{
    font-size: 12px;
    color: #000000;
    font-family: Helvetica;
    text-align: left;
    padding: 10 5 10 5;
    vertical-align: top;
}
#purpleborder {border: solid 2px #660066;}
 a { color:#000000; color:#000000; color:#000000; font-weight:bold; text-decoration:none; font-size:14px;}
 ul { 
	margin-left: 0;
	padding-left: 1em;
	font-size:15px;
     	 font-family: Helvetica, arial, sans-serif;
      	color: #000000;
 
	
}
#contentbody { background-color:#ccccff; 
               border-left:17px solid #e0d760;
               float:left;  
               background-color:#ccccff;
               width:870px;
                            
               text-align:center;font-size:10px; font-weight:normal; color:#666666;  font-family:Helvetica; }
    #style1
    {
        text-decoration: underline;font-family:Helvetica;font-size:12px;
    }


/* Use these classes to set the width of a column. */
#span-1   { width: 15px; float: left; }
#span-2   { width: 10px; float: left;background-color: #71417D;}
#span-3   { width: 435px; float:left; background-color: #71417D; padding: 10px 0 10px 10px;}
#span-4   { width: 15px; float: left; }
#span-5   { width: 282px; background-color: #F1EFE8; padding: 10px 0 10px 10px; font-size: 20px;
      font-family: Helvetica, arial, sans-serif;
      color: #000000;float:left;}
#span-6   { width: 221px; float: left;  background:url("../images/blue_bk_side_menu.jpg") 0 0 repeat-y;font-size: 20px;
      font-family: Helvetica, arial, sans-serif;
      color: #000000;}

#span-5 p {font-size: 16px;
      font-family: Helvetica, arial, sans-serif;
      color: #000000;}

#span-5 b {font-size: 12px;
      font-family: Helvetica, arial, sans-serif;
      color: #000000;}
#span-7   { width: 20px; }
.span-8   { width: 290px; }
.span-9   { width: 350px; }
.span-10  { width: 400px; }
.span-11  { width: 430px; }
.span-12  { width: 490px; }
.span-13  { width: 510px; }
.span-14  { width: 550px; }
.span-15  { width: 600px; }
.span-16  { width: 630px; }
.span-17  { width: 670px; }
.span-18  { width: 710px; }
.span-19  { width: 760px; }
.span-20  { width: 770px; }
.span-21  { width: 801px; position:relative;}
.span-22  { width: 870px; }
.span-23  { width: 910px; }
#span-24  { width: 976px; margin: 0; height: 103px; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 10px; }  
.append-2   { padding-right: 43px; } 
.append-3   { padding-right: 120px; } 
.append-4   { padding-right: 160px; } 
.append-5   { padding-right: 200px; } 
.append-6   { padding-right: 240px; } 
.append-7   { padding-right: 280px; } 
.append-8   { padding-right: 320px; } 
.append-9   { padding-right: 360px; } 
.append-10  { padding-right: 400px; } 
.append-11  { padding-right: 440px; } 
.append-12  { padding-right: 480px; } 
.append-13  { padding-right: 520px; } 
.append-14  { padding-right: 560px; } 
.append-15  { padding-right: 600px; } 
.append-16  { padding-right: 640px; } 
.append-17  { padding-right: 680px; } 
.append-18  { padding-right: 720px; } 
.append-19  { padding-right: 760px; } 
.append-20  { padding-right: 800px; } 
.append-21  { padding-right: 840px; } 
.append-22  { padding-right: 880px; } 
.append-23  { padding-right: 920px; } 

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 0px; }  
.prepend-2   { padding-left: 43px; } 
.prepend-2a   { padding-left: 80px; }
.prepend-3   { padding-left: 120px; } 
.prepend-4   { padding-left: 160px; } 
.prepend-5   { padding-left: 200px; } 
.prepend-6   { padding-left: 240px; } 
.prepend-7   { padding-left: 280px; } 
.prepend-8   { padding-left: 320px; } 
.prepend-9   { padding-left: 360px; } 
.prepend-10  { padding-left: 400px; } 
.prepend-11  { padding-left: 440px; } 
.prepend-12  { padding-left: 480px; } 
.prepend-13  { padding-left: 520px; } 
.prepend-14  { padding-left: 560px; } 
.prepend-15  { padding-left: 600px; } 
.prepend-16  { padding-left: 640px; } 
.prepend-17  { padding-left: 680px; } 
.prepend-18  { padding-left: 720px; } 
.prepend-19  { padding-left: 760px; } 
.prepend-20  { padding-left: 800px; } 
.prepend-21  { padding-left: 840px; } 
.prepend-22  { padding-left: 880px; } 
.prepend-23  { padding-left: 920px; } 


#left ul{
	padding:0;
	margin:10px 0 10px 0;
	display:block;
	float: left;
}
#left ul li{
background:url(../images/r_panel_div.jpg) 0 bottom repeat-x;
	display:block;
	float: left;
	height:20px;
	width:150px;
	line-height:25px;
	margin: 0 0 0 12px;
	padding: 5px 0 5px 0;
	}
#left ul li a{
	display:block;
	left: 5px;
	padding:0 0 0 0;
	font:normal 15px/20px  Helvetica, Arial, sans-serif;
	color:#14495A;
	background-color:inherit;
	text-decoration:none;
	float:left;
}
#left ul li a:hover{
	color:#009242;
	
	text-decoration:none;
	
	}



/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-1  { margin-left: -40px; }
.pull-2  { margin-left: -80px; }
.pull-3  { margin-left: -120px; }
.pull-4  { margin-left: -160px; }

.push-0  { margin: 0 0 0 18px; }
.push-1  { margin: 0 -40px 0 18px; }
.push-2  { margin: 0 -80px 0 18px; }
.push-3  { margin: 0 -120px 0 18px; }
.push-4  { margin: 0 -160px 0 18px; }
.push-0, .push-1, .push-2, .push-3, .push-4 { float: right; }


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */ 
.box { 
  padding: 1.5em; 
  margin-bottom: 1.5em; 
  background: #eee; 
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/*-----------------------------------Vendor Search Tool Grid----------------*/
.vsgridimage
{
    border: thin hidden #008000;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    
}

/*-----------------------------------Vendor Search Panel--------------------*/


.vs
{   
    width: 178px;
    height: 202px;
    padding: 10px 10px 10px 10px;
    background-image: url('../images/vs_03.jpg');
    font: arial normal 12px;
}
.vs h1
{
    font: arial normal 14px;
    color: #a6a18d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 100;
    font-style: normal;
}
.vs b
{
    font: arial normal 14px;
    color: #898989;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 100;
    font-style: normal;
}
.tbox
{
    border: 1px solid #b7b3a3;
    width: 130px;
}
.vsbutton
{
    background: url('../images/vs_button.jpg');
    
    
    width: 32px;
    height: 20px;
}
.ddown
{
    border: 1px solid #b7b3a3;
    width: 165px;
    color: #898989;
}

.whitetiny {
	font-family: Arial;
	font-size: 11px;
	color: #ffffff;
	padding-left: 0px;
	padding-right: 0px;
}

/*--------------   Data grid for vendor listing  ------------*/
#grid
{
    background-color: #ffffff;
    font-family: Helvetica;
    font-size: 11px;
    padding: 5px 10px 4px 10px;
    color: #a6a18d;
    border-bottom: 1px solid #a6a18d;
   
}
.grid a
{
    font-family: Helvetica, sans-serif;
    font-size: 14px;
    color: #918c78;
    text-decoration:none;
}
.grid p
{
    font-size: 11px;
    font-family: Helvetica;
    color: #a6a18d;
    
}
.grid a:hover 
{
    color:#c6d591;
}
.grid a.hover 
{
    color:#c6d591;
}
.h3
{
    font-size: 16px;
    font-family: Helvetica;
    color: #1857a1;
    
}