/* CSS Document */


/* ------------------------------------------------------------------------------------- */
/* common */

body {            
    font: 12px/14px Arial,Verdana, Geneva, Helvetica, sans-serif;            
    background-color: #ffffff;
    color: #000000;
    margin: 0 auto;
    text-align: center; 
    padding: 0;	  
    background: #ffffff url(http://www.karmaproject.org/images/interface/top-bg.jpg) repeat-x; 
    }
	
a:link, a:visited {	font-weight: bold;text-decoration: none;    }
a:hover, a:active {color: #6d8128; text-decoration: underline;}
#content a:link, #content a:visited {font-weight: bold; text-decoration: underline; color: #000000;}
#content a:hover, a:active {color: #6d8128; text-decoration: none;}

#footer a:hover, {text-decoration: underline;}
acronym {
	font-style: italic; 
	cursor: help;
    border-bottom: 0;	
	}
.p_list li {padding: 5px;}

/* ------------------------------------------------------------------------------------- */
/* content-area */

#container  {              
	position: relative;
	text-align: center;
	margin: 0 auto;
	width: 998px; 
	padding: 0;
    }
#logo {position: absolute; float: left;}

#header { 
    position: relative; 
  top: 126px;
    width: 998px;
    height: 340px;
    
    padding: 0;
   }
  #hflash {float: left; width: 626px;}
  #hvideo {float: right; width: 372px; height: 340px; background: #fcf2d7 url(http://www.karmaproject.org/images/interface/header-video.jpg) no-repeat;  }
   .vidb {position: absolute; top: 0px; left: 570px; width: 300px; margin: 25px 50px 0 0; border: solid 4px #4f3a25; }
   .charity {position: absolute;  top: 15px; color: white; right: 10px; font: 1.4em Tahoma, Arial,Verdana, Geneva, Helvetica, sans-serif;  }

#bbox {
  position: relative;   margin-top: 125px;
  width: 998px;
  height: 223px;
  background: #ffffff url(http://www.karmaproject.org/images/interface/3box.gif) no-repeat; 
padding:0; 
  }
.box1 {position: relative; float: left; margin: 40px 0px 0 45px; width: 300px; height: 185px; }
.box2 {position: relative; float: left; margin: 50px 0px 0 20px; width: 270px; height: 175px; padding: 15px 0px 0 10px; color: white; text-align: left; }
.box3 {position: relative; float: right; margin: 50px 40px 0 0px; width:270px; height: 175px; clear: left; padding: 15px 20px 0 15px; color: white; text-align: left; clear: right;}

#twitter_div ul, .box2 ul  {padding: 0; margin: 0;}
#twitter_div a {color: white; text-decoration: underline;}

/*----Navigation----*/
#navi {
	position: absolute;
	margin-top: 64px;
	right: 0;
}

#navi li {
	float: left;
	padding: 0 0 0 2px; list-style-type: none;
}

#navi li a {
	background:  url(http://www.karmaproject.org/images/interface/menu-bg.gif) no-repeat 0% 0%;
	display: block;
	width: 100px;
	height: 43px;
	float: left;
	text-align: center;
	line-height: 43px;
	text-decoration: none;
	color: #cebf98;
}

#navi li a:hover {
	background:  url(http://www.karmaproject.org/images/interface/menu-act.gif) no-repeat 0% 0%;
	color: #1f1710;
}

#navi li#menu-act a {
	background:  url(http://www.karmaproject.org/images/interface/menu-act.gif) no-repeat 0% 0%;
	color: #1f1710;
}
/*-----*/
#content {position: relative; width: 998px; text-align: left;clear: both;}
  #col-1 {width: 600px; padding: 0px 10px 0 30px; float: left; }
  #col-2 {width: 350px; float: right; clear:right; }
#content h2 {text-align: left; padding-top: 10px;}


/*-----Cart-----*/

.cart {
  position: absolute;
   top: 20px;
  width: 230px;
  height: 40px;
  left: 520px; color: white;
}
.cart a, .search  {color: white;}
.cart a:hover {color: white; text-decoration: underline;}

/*----Search----*/

.search {
 position: absolute;
 top: 17px;
 width: 300px;
 height: 40px;
 left: 720px;
}

.searchbox, .con1 {
	width: 120px;
	color: #3d3d3d;
	margin: 0px;
	background: #efefef;
	font-size: 12px;
        border: 1px solid #666666; 
	}

	
/*----FOOTER----*/
#footer {
	height: 66px;
	bottom: 0; clear: both; color: #666666;
}

#footer p {
	padding: 20px 0 0 2px;
	font-size: 1.083em;
	text-align: center;
	color: #666666;
}

#footer p span {margin: 0 8px 0 0; }

#footer p a {
	margin: 0 5px 0 5px;
	color: #666666;
}

span.signup {width: 600px; padding: 0; margin: 0; color: #666666; font-weight: bold;}

/*------Secondary Pages -----*/

#header2 { 
    position: relative; 
    margin-top: 126px; top: 126px;
    width: 998px;
    height: 237px;
    margin: 0;
    padding: 0; 
   }
#header2l {float: left; width: 596px; height 237px;}
#header2r {float: right; width:402px; height:237px; background: #ffffff url(http://www.karmaproject.org/images/interface/header2r.jpg) no-repeat;  }

#content2 {position: relative; width: 998px; text-align: left; margin-top:120px;}
#content2 a {color: black;}
#col-1b {width: 630px; padding: 10px 10px 0 40px; float: left; }
  #col-2b {width: 330px; float: right; clear:right; padding: 20px 20px 0 0;}
/*-----------------------------*/
	
#content img {padding: 5px;}	
h1 {font: bold 1.5em/1.2em Arial, Verdana, Geneva, Helvetica, sans-serif; padding-left: 15px; padding-top: 10px; color: #4a3623;}
h2{font: bold 1.4em/1.2em Arial, Verdana, Geneva, Helvetica, sans-serif; color: #4a3623;}
h3{font: bold 1.2em/1.2em Arial, Verdana, Geneva, Helvetica, sans-serif; padding-left: 15px; color: #4a3623; }
#content p, #contentright p {padding:0 15px 5px 15px; margin-right: 10px;}


.link li {margin-right: 15px;}

	
.link4 ul { margin-left: 30px; padding-left: 0; }
.link4 li {padding: 0 20px 5px 10px;   }

.list {
	width: 380px;
	padding: 20px 0 0 0;
    font: bold 18px/14px Arial, Verdana, Geneva, Helvetica, sans-serif;    
	color: #003366;
	line-height: 1.2em;
	
	}
.list ol li {list-style-type: none;}
.small-links {
	position: absolute;
	width: 350px;
	top: 40px;
	padding: 0 30px 0 0px;
	left: 350px;
	margin: 0 30px 0 40px;
	text-align: left;
	}

.link2  {
	
	padding: 0 40px 0 10px; 
	font: 12px/14px Tahoma, Arial, Verdana, Geneva, Helvetica, sans-serif;    }



/*-----Content Full Pages---------*/



/* ------------------------------------------------------------------------------------- */
/* contact */	
#templatelist  {width: 730px; padding: 10px;}

table.tablelist {margin-left: 60px;	font: 11px/1.2em Arial, Verdana, Geneva, Helvetica, sans-serif;}	

#signup table { 
 background-color: transparent; 
 color: #001cfe; 
 width: 300px; 
 border-collapse: collapse; 
 margin-left: 10px;
} 

#signup td { 
 /*border: 1px solid #f1eeee; */
 padding-left: 4px; 
}
.labelcell { 
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
 color: #000000; 
 background-color: transparent; 
 width: 190px; 
 text-align: left; 
} 

.labelcell2 { 
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
 color: #000000; 
 background-color: transparent; 
 text-align: left;
  width: 300px; 
} 

.fieldcell { 
 background-color: transparent; 
 color: #000000; 
 text-align: left; 
 margin-right: 0px; 
 padding-right: 0px;
 padding-top: 2px; 
} 

.smalllabelcell { 
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
 background-color: transparent; 
 color: #cc9999; 
 width: 100px; 
} 

.smallfieldcell { 
 background-color: #dddddd; 
 color: #000000; 
 text-align: left; 
 padding-top: 2px;
 width: 70px; 
  font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif; 
}
.fieldcell input { 
 width: 150px; 
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif; 
 background-color: #EFE7E7; 
 color: #102132; 
 border: 1px solid #284279; 
 margin-right: 0px; 
} 

.button { 
 font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif; 
 color: #102132; 
 text-align: center;
 margin-top: 4px;

}


/*------Product Display-----------*/
span.addcart select {color: #3d3d3d;
	margin: 10px 0 0 0; padding: 0;
	background: #d3d3d3;
	font-size: 12px; valign: middle;
        border: 1px solid #666666;  }
span.addcart input {margin-top:15px; border: 1px solid #666666; font-size: 12px; color: #3d3d3d;}
span.addcart2 input {position: absolute; top: 150px; left: 60px; border: 1px solid #666666; font-size: 12px; color: #3d3d3d;}

.prod_place {width: 650px; padding-bottom: 10px; clear: both;  }
.prod_place1 {width: 300px; padding: 5px; clear: both;  text-align: left;}
.p-title {width: 250px;}
.p-image { float: left; width: 100px; padding: 10px;}
.p-des {float: right; width: 150px; padding: 10px 10px 0 0; }
.p-des h2 {font-size: 1.2em; color:  #000000; padding: 0 0 0px 0; margin: 0;}
.p-des h3 {font-size: 1.4em; color: #000000; padding: 5px 0 0 0; margin: 0;}

.p-image2 { float: left; width: 150px; padding: 0; margin: 0; }

.p-des2 {float: right; width: 450px; padding: 0px; clear: right; margin: 0; padding: 10px 10px 0 15px;}
.p-des2 h2 {font-size: 1.2em; color:  #4a3623; padding: 0 0 5px 0; margin: 0;}
.p-des2 h3 {font-size: 1.4em; color: #4a3623; padding: 5px 0 0 0; margin: 0;}

.p-des2 hr {color: #694b4b; height: 1px; margin-right: 15px; margin-top: 15px; padding: 0;}

/*------Pop Up Image Viewer-----------*/
.thumbnail{
position: relative; 
z-index: 250;
}

.thumbnail:hover{
background-color: black;
z-index: 250;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: black;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -400px;
left: 60px; /*position where enlarged image should offset horizontally */

}