@charset "utf-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
	color: #000;
	/*color:#696969;*/

	font-family: Century Gothic, Tahoma, Geneva, sans-serif;
	/*font-family: Georgia, Times New Roman, Times, serif;*/
	/*font-family: Helvetica, Century Gothic, Tahoma, Geneva, sans-serif;*/
	/*font-family:Arial, Helvetica, sans-serif;*/
	font-size: 85%;
	line-height: 1.5;
	/*background-color: #331315;*/
	background-color: #f4ecd5;
	/*background-color: #691F1F*/;
	
	/*background-image: url(../images/header_bg.jpg);*/
	background-attachment: fixed;	/*NOTE: I added a background image to thr body*/
	background-repeat: no-repeat;
	background-position: center top;
}

html, body {
height: 100%;
}

/* ~~ Element/tag selectors ~~ */

ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */

	padding: 0;

	margin: 0;
/**disappearing list background bug problem. When list items have background colors or images, and the list is placed within a floated, relatively-positioned container, the backgrounds may not render as specified. The fix for this bug is simple: just relatively position the affected lists. You can relatively position all lists with the following CSS declaration:*/
    /*position: relative;*/
}



h1, h2, h3, h4,h6, p {

	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-top:5px;
	/*padding-right: 10px;

	padding-left: 10px;*/ /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */

}

h1, h2, h3, h4, h5, h6 {
	/*color:#C70706;*/
	/*color:#F23B7F;*/
	/*color:#B40B43;*/
	color:#D52E1C;
	
	/*font-family: Helvetica, Century Gothic, Tahoma, Geneva, sans-serif;*/
	text-transform:uppercase;
	font-weight:normal;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */

	border: none;

}



/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {

	
	/*color:#F23B7F;*/
	/*color:#B40B43;*/
	color:#D52E1C;
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */

}

a:visited {

	/*color:#C70706;*/
	color:#B40B43;

	text-decoration: underline;

}

a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */

	text-decoration: none;

}


.main {
	/*background-color:#250220;*/
	/*opacity:0.5;*/
	/*height:150px;*/
	/*padding-top:10px;*/
	/*padding-bottom:10px;*/
	}
	
	/*NOTE: I made the container inside main have no background colour*/
	.main .container {
		/*background-color:#FFF;*/
		}
	
	.wapper{ padding:5px; width: 1000px;margin: 0 auto; height: auto !important;}
	.footer .wapper{ clear:both; padding:5px; background-color:#000; width: 1000px;margin: 0 auto; height: auto !important;}
.container {
	width: 1000px;
	/*padding:5px;*/
	/**I removed -4em from 5h3 margin of the wapper and container*/
	margin: 0 auto;
	/*min-height: 400px;*/
    height: auto !important;
    height: 100%;

	/*NOTE: I added background colour and box shadow to container*/
	/*background:#FFF;*/
	/*box-shadow: 0px 1.5px 4px #ff329a;*/

/*distance x, distance y, strength*/
/*-webkit-box-shadow: 0px 1.5px 4px #ff329a;*/ /* Safari */
	
	/*position:relative;*/
	/*box-shadow: -1px -3px 10px #888888;*/
/*-webkit-box-shadow: -1px -3px 10px #888888;*/ /* Safari */
	}
	
.header {
	/*color:#8d144e;*/
	/*width:500px;*/
	/*height:300px;*/
	padding-top:35px;
	overflow:hidden;
	}

.logo {
	/*min-height:100px;
	min-height:100px;*/
	float:left;
	height:100px;
	width:475px;
	/*background-color:#FFF;*/
	}

.topmenu {
	/*margin-top:30px;*/
	min-width: 200px;
	float:right;
	
	/*position:relative;*/
	}
	/*NOTE: I removed tables and used css instead for the shopping bag and the search.*/
	.bag {
		/*float:right;*/
		min-width:300px;
		/*background-color:#FFF;*/
		}
	
	.search{
		/*float:right;*/
		min-width:200px;
		/*margin-top:50px;*/
		/*background-color:#FFF;*/
		}
	/**I created this for the social media icons*/
	.social {
		float: right;
		margin-top: 10px;
		min-width:130px;
		}
	.social ul {
		margin:0;
		padding: 0;
		}
	.social ul li {
		float: left;
		/*margin-left: 5px;*/
		list-style-type: none;
		/*width: 32px;*/
		}
	/*.clear {
		clear:both;
		
		}*/
	.player {
		float: right;
		width:350px;
		margin-top: 10px;
		}
.topmenu table {
	width:720px;
	/*float:right;*/
	}	

.topmenu #search {
	width:500px;
	margin-top:20px;
	}
	
.topmenu img {
	float:777
	0eft;
	}	
	
.topmenu ul {
	list-style-type:none;
	}

.topmenu ul li {
	display:inline;
	float:left;
	}
	
.topmenu ul li a:link,a:visited {
display:block;
/*width:70px;*/
padding-left:5px;
padding-right:5px;
/*font-size:75%;*/
/*color:#8d144e;*/

/*background-color:#EE4725;*/
text-align:center;
/*padding-left:5px;
padding-right:5px;*/
}

.topmenu ul li a:hover,a:focus {
	/*color:#FFF;*/
/*background-color:#FFF;*/
	}
	

#nav {
	/*margin-bottom:5px;*/
	/*background-color:#93231E;*/
	/*background-color:#069;*/
	/*background-color:#EBEBEB;*/
	/*overflow:auto;*/
	/*color:#000000;*/
	/*box-shadow: 1px -1px 5px #000;
-webkit-box-shadow: 1px -1px 5px #036;*/ /* Safari */
	}

.container_nav {
	width: 1000px;
	/*padding:5px;*/
	margin: 0 auto;
	/*NOTE: I added background-colour and box shadow*/
	/*background:#8d144e;*/
	/*box-shadow: 0px 1.5px 4px #ff329a;*/

/*distance x, distance y, strength*/
/*-webkit-box-shadow: 0px 1.5px 4px #ff329a;*/ /* Safari */
	/*position:relative;*/
	/*box-shadow: -1px -3px 10px #888888;*/
/*-webkit-box-shadow: -1px -3px 10px #888888;*/ /* Safari */
	}


/*the menu here*/
	

/*the menu ends here*/




	
.content{
	/*NOTE: I removed the paddings*/
	/*padding-top:5px;*/
	/*padding-bottom:5px;*/
	/*overflow:auto;*/
	}
	.content .container {
		/*background-color:#000;*/
		}

/*IMPORTANT!!!*/
/*I decided it was best to separate the content into two sections*/
/*bannercontent for the banner at the top*/
/*pagecontent will be for the main page content. the main page content will be wrapped in a container. I only made a slight change to it*/

.bannercontent{
	
}


.pageContent {
	/*padding:5px;*/
	overflow:hidden;
	/*background-color:#fff;*/
	}


.banner {

	margin-top:10px;
	min-height:340px;
	background-color:#FFF;
	/*background-color:#250220;*/
	color:#B40B43;

	font-size:300%;
	text-align:center;

	/*margin-bottom:5px;*/

	/*box-shadow: 0px 0px 7px #ff329a;*/

/*distance x, distance y, strength*/
/*-webkit-box-shadow: 0px 0px 7px #ff329a;*/ /* Safari */
	
	/*border-bottom: 1px solid #C70706; 

	border-left: 1px solid #C70706; 

	border-right: 1px solid #C70706;

	border-top: 1px solid #C70706;
*/
}

/*set a standard width for img in the banner*/
.banner img {
	width:1000px;
	height:340px;
	}
/*NOTE: I added .pagecontent to contain the main comtent for all pages*/



/*This section is for the products displayed*/

.block1 ul

{
margin:0;

padding:0;

overflow:hidden;

	}
	/*NOTE: I replace the tables with css divs. I removed the tables used before*/
	/*.block1 ul li a:hover .image {
		text-decoration:underline;
		}*/

	/*.block1 ul li a .image {
		width:235px;
		height:240px;
		}*/

	/*.block1 ul li a,a:hover 		.description {
		color:#ff329a;
	   }
*/
	/*.block1 ul li a .price {
		color:#ff329a;
		}*/



.block1 ul li

{
	/*NOTE: I added width size*/
	list-style-type:none;
	float:left;
	
	width:320px;
	height: 300px;
	padding: 5px;
	background-color: #000;
	/*opacity: 0.4;*/
	border-bottom: 1px solid #353630; 
	border-left: 1px solid #353630; 

	border-right: 1px solid #353630;

	border-top: 1px solid #353630;

}


/*added .conten .container because it was affecting menu li a*/

/*.block1 ul li a:link,a:visited

{

display:block;

width:243px;

min-height:240px;

text-align:center;

text-decoration:underline;

text-transform:uppercase;

}*/


/*title of section*/
.blockHeader {

	color: #8d144e;
	

	font-weight: bold;
	padding:5px;

	font-size: 120%;

}


.block_left {
	float:left;
	width:330px;
	padding:10px;
	}

.block_right {
	float:right;
	width:600px;
	padding:10px;
	}

.block2 {
	margin-top:10px;
	}

.block2 ul {
margin:0;
padding:0;
overflow:hidden;
}



.block2 ul li {
	/*display:inline;*/
	display:block;
	float:left;
	/*font-size:75%;*/
	width: 231px;
	height:150px;
	text-decoration:none;
	border-left: 1px solid #ff99cc; 
	border-top: 1px solid #ff99cc; 
	padding:2px;
	border-bottom: 1px solid #ff99cc;
	border-right: 1px solid #ff99cc;
	/*background-color:#EBEBEB;*/
	background-color:#ffcccc;
	padding:5px;	
	
}

/*.block2 .textsize {
	font-size:75%;*/
	/*line-height:1;}*/
	

#product {
	overflow:hidden;
	}
	
.leftSidebar {

	float: left;
	/*width: 495px;*/
	width: 660px;
	background-color:#fff;
	margin-top:10px;
	
	/*opacity: 0.5;*/
	/*border-bottom: 1px solid #353630; 
	border-left: 1px solid #353630;*/ 
	/*opacity: 0.4;*/
	/*border-right: 1px solid #353630;

	border-top: 1px solid #353630;*/
	padding:10px;
	/*border-top: 1px solid #ff329a;
	border-bottom: 1px solid #ff329a; 
	border-left: 1px solid #ff329a; 
	border-right: 1px solid #ff329a;*/

	}
	/*NEW created to add padding to images and float left of text*/
	.leftSidebar img, .leftSidebar p img {
		float: left;
		padding-right:10px;	
		}
	


/*.leftSidebar ul {

	list-style-type:none;
	border-left: 1px solid #ff99cc; 
	border-top: 1px solid #ff99cc; 
	padding:2px;
	border-bottom: 1px solid #ff99cc;
	border-right: 1px solid #ff99cc;
	
	background-color:#ffcccc;
	
}*/

/* this creates the button separation */
/*.leftSidebar ul li {

	 
	border-bottom: 1px solid #ff99cc;
	

}*/

/*.leftSidebar ul li a, .leftSidebar ul li a:visited {

	padding:5px;
	display:block;	
	
}*/

/*.leftSidebar ul li a:hover, .leftSidebar ul li a:active{
	text-decoration:underline;
}*/



.delivery {
	/*padding:5px;*/
	/*margin-top:10px;*/
	margin-bottom:10px;
}

/*NOTE: I added some new styles inside the right sidebar that created the two columns (ul and li). I used left and right.*/
.rightSidebar {

	float: right;
	/*width: 495px;*/
	width: 290px;
	background-color:#fff;
	margin-top:10px;
	/*background-color: #000;*/
	/*border-bottom: 1px solid #353630; 
	border-left: 1px solid #353630;*/ 
	/*opacity: 0.4;*/
	/*border-right: 1px solid #353630;

	border-top: 1px solid #353630;*/
	padding:5px;
	}
	.rightSidebar table {
	font-size:70%;
		height: 350px;
		background-color:#ccc;
		color:#000;
		text-align:left;
		/*vertical-align:top;*/
		border-bottom: 1px solid #353630; 
	border-left: 1px solid #353630; 

	border-right: 1px solid #353630;

	border-top: 1px solid #353630;	
		}
	.rightSidebar table th {
		background-color:#333;
		color:#ccc;
		width:80px;
		/*border-bottom-color:#353630;*/
		}
		.rightSidebar table tr {
		/*background-color:#333;*/
		/*color:#ccc;*/
		width:80px;
		border-bottom:1px solid #333;
		}
	.setBorderColor {
		/*color: #FFF;*/
		border-color:#353630;
		/*background-color:#999;*/
		/*border-bottom: 1px solid #353630; 
	border-left: 1px solid #353630; 

	border-right: 1px solid #353630;

	border-top: 1px solid #353630;*/
		}
	/*.rightSidebar ul  {
		margin:0;
		padding:0;
		overflow:hidden;
		}*/
	./*rightSidebar ul li {
		
		display:block;
		float:left;
		width: 360px;
		
		text-decoration:none;
	
			
		padding:10px;
		}
*/
	/*.rightSidebar .left {
		
		width:420px;
		}*/
	/*.rightSidebar .left2 {
		width:740px;
		padding:10px;
		}*/

	/*.rightSidebar .right {
		width:300px;font-size:75%;
		}*/
	/*.rightSidebar .right2 {
		width:300px;
		}*/
	.thumbnail {
		/*for the thumbnails in the media. I resized them in dreamweaver*/
		width:96px;
		height:64px;
		float:left;
		/*top right bottom left*/
		padding: 3px 3px 10px 3px;
		}
	.mediaGallery {
		overflow:hidden;
		padding-bottom:10px;
		}
	/*NOTE: instead of using block1 ul li on the collections, i used this instead to prevent clash of ul's and li's*/
	.block_collections{
		float:left;
		/*border-bottom: 1px solid 	
		#ff329a; */
		width:235px;
		padding:5px;
		
		}
	.block_collections a:hover .image {
		text-decoration:underline;
		}

	.block_collections a .image {
		width:235px;
		height:240px;
		}

	.block_collections a,a:hover 		.description {
		/*color:#ff329a;*/
	   }

	.block_collections a .price {
		/*color:#ff329a;*/
		}
	
	.block_collections a:link,a:visited {
		text-align:center;
		}
	
	
	/*NOTE: I am creating new styles for the links on image, description and price to control the width on the shop page*/
	/*they were not used so i created new styles to match*/

	.block1 li .image {
		width:235px;
		height:240px;
		}

	.block1 li .description {
		/*color:#ff329a;*/
		width:235px;
	   }

	.block1 li .price {
		/*color:#ff329a;*/
		width:235px;
		}
	.block1 li .description a {
		/*color:#ff329a;*/
		width:235px;
		text-align:center;
	   }

	.block1 li .price a{
		/*color:#ff329a;*/
		width:235px;
		text-align:center;
		}
	
	/*here are the copied and renamed styles*/
.content .container .content .image {
		width:235px;
		height:240px;
		}
		
	.content .container .content .description {
		/*color:#ff329a;*/
		/*added text align*/
		width:235px;
		text-align:center;
	   }
	   .content .container .content .price{
		/*color:#ff329a;*/
		/*added text align*/
		width:235px;
		text-align:center;
	   }

/*end of copied and replaced*/

	/*.block3 {
	margin-top:10px;
	}*/

#product_description ul  {
margin:0;
padding:0;
overflow:hidden;
}



#product_description ul li {
	/*display:inline;*/
	display:block;
	float:left;
	/*width: 365px;*/
	/*min-height:80px;*/
	text-decoration:none;
	
	/*background-color:#EBEBEB;*/	
	padding:2px;
}

.product_gallery {
	margin-right:10px;
	width:400px;
	height:575px;
	border-left: 1px solid #ccc; 
	border-top: 1px solid #ccc; 
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	}

.product_details {
	width:330px;
	}
.rht_margin {
	margin-right:10px;
	}

.footer{
	clear:both;
	/*font-size:75%;*/
	 
	/*background-color:#036;*/
	/*padding-top:10px;*/
	/*color:#fff;*/
	}
	/*NOTE: I added border-top colour colour to the container inside the footer*/
	.footer .container {
		/*border-top: 1px solid #ff329a;*/ 
	/*background-color:#fff;*/
	/*color:#fff;*/
	margin-top:10px;
	text-align:center;
	/*background-color:#ffcccc;*/
		}
	
.footer ul

{
	margin:0;

	padding:0;

	overflow:hidden;

	}
	.footer ul img {
		float: left;
		padding-right:5px;	
		}
	/*to align text to the right*/
	.rightTxt {
		padding-top:5px;
		text-align:centre;
		
		}




.footer ul li

{

	list-style-type:none;
	float:left;
	display:block;
	/*width:243px;*/
	/*NOTE: Increased the with*/
	/*width:500px;*/

/*height:240px;*/

/*text-align:center;*/

/*text-decoration:none;*/

/*text-transform:uppercase;*/
}


.footer ul li a:link,a:visited {
	/*color:#fff;*/
	}


/*.block1 ul li a:link,a:visited

{

display:block;

width:243px;

height:240px;

text-align:center;

text-decoration:none;

text-transform:uppercase;

}*/
	
.lft_padding{
	margin-left:2px;
	}
	
.rht_padding{
	margin-right:2px;
	 list-style: none outside none;
	}.smallText {
	font-size: 10px;
}

/*NOTE: This is the original! The one below was creeated for a specific project*/
/*.RigthCol {
    width: 25%;
}*/

/*NOTE: This was created specifically for hiteresearchfoundation.org*/
.RigthCol {
	width: 290px;
	background-color:#fff;
	margin-top:10px;
	padding:5px;
	}

.rightSidebar {

	float: right;
	/*width: 495px;*/
	width: 290px;
	background-color:#fff;
	margin-top:10px;
	/*background-color: #000;*/
	/*border-bottom: 1px solid #353630; 
	border-left: 1px solid #353630;*/ 
	/*opacity: 0.4;*/
	/*border-right: 1px solid #353630;

	border-top: 1px solid #353630;*/
	padding:5px;
	}


.floatL {
    float: left;
}
.floatR {
    float: right;
}

/*NOTE: This is the original MainCol. The one below is was created for a specific project*/
/*.MainCol {
   background-color: white;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 20px;
    padding: 10px;
    width: 65%;
    margin-bottom:20px;
}*/

/*NOTE: Created this specifically for hiteresearchfoundation.org*/
.MainCol {

	/*float: left;*/
	/*width: 495px;*/
	width: 660px;
	background-color:#fff;
	margin-top:10px;
	padding:10px;
	}
	/*NOTE: Created this specifically for hiteresearchfoundation.org*/
	.MainCol img, .MainCol p img {
		float: left;
		padding-right:10px;	
		}

/*for checkout page*/
.MainCol2 {
    margin-left: 5px;
    /*margin-right: 20px;*/
    width: 65%;
}

.showMore{ cursor:pointer}
.validation{ background-color:Maroon; color:#FFF; font-weight:bold}
.event table th {
    background-color: #333333;
    color: #CCCCCC;
}

/*.event table {
    border-style: solid;
    color: #000000;
    text-align: left;
}*/
.event table {
    background-color: #CCCCCC;
    border-color: #353630;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    /*overflow:hidden;*/
    text-align: left;
}

.mainTableFrame
{
    border-right: #00bfff thin solid;
    border-top: #00bfff thin solid;
    border-left: #00bfff thin solid;
    border-bottom: #00bfff thin solid;
    width: 800px;
}

.subHeader
{
    text-transform: capitalize;
    color: #6fa1d9;
    font-family: Arial, Verdana;
    font-weight: normal;
    font-size: 1.3em;
    background-color: #f5f5f5;
    vertical-align: top;
    text-align: left;
    page-break-after: auto;
}

.calendarFrame
{
    border-right: #add8e6 thin solid;
    border-top: #add8e6 thin solid;
    border-left: #add8e6 thin solid;
    border-bottom: #add8e6 thin solid;
}

.calendarMonthYear
{
    font-size: 0.9em;
    color: #ffffff;
    font-family: Arial;
    font-weight: bold;
    background-color: #335ea8;
    letter-spacing: 1px;
}

.calendarDay
{
    font-size: 0.7em;
    color: #ffffff;
    font-family: Arial;
    font-weight: bold;
    background-color: #6fa1d9;
}

.hasEvent
{
    font-size: 0.7em;
    color: #ffffff;
    font-family: Verdana, Arial;
    background-position: center center;
    background-image: url(Images/event.gif);
    background-repeat: no-repeat;
    text-align: center;
    width: 25px;
    height: 25px;
    cursor: pointer;
    vertical-align: middle
}

.hasNoEvent
{
    font-size: 0.7em;
    font-family: Verdana, Arial;
    text-align: center;
    width: 25px;
    height: 25px;
}

#sideevent table {
    border-collapse: separate;
    
    border-width: 0px 0px 1px 1px;
    margin: 10px auto;
    font-size: 12px;
    
  }
   
  #sideevent td,#sideevent th {
    width: 35px;
    height: 35px;
    text-align: center;
    vertical-align: middle;
    background: url(images/cells.png);
    color: #444;
    position: relative;
  }
 #sideevent th {
    height: 30px;
    font-weight: bold;
    font-size: 14px;
  }
 #sideevent td:hover, th:hover {
    background-position: 0px -81px;
    color: #222;
  }
 #sideevent td.date_has_event {
    background-position: 162px 0px;
    color: white;
  }
#sideevent  td.date_has_event:hover {
    background-position: 162px -81px;
  }
#sideevent  td.padding {
    background: url(images/calpad.jpg);
  }
#sideevent  td.today {
    background-position: 81px 0px;
    color: white;
  }
#sideevent  td.today:hover {
    background-position: 81px -81px;
  }
 #sideevent .events {
    position: relative;
  }
 #sideevent .events ul {
    text-align: left;
    position: absolute;
    display: none;
    z-index: 100000;
    padding: 15px;
    background: #E7ECF2 url(images/popup.png) no-repeat;
    color: white;
    border: 1px solid white;
    font-size: 15px;
    width: 200px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -border-radius: 3px;
    list-style: none;
    color: #444444;
    -webkit-box-shadow: 0px 8px 8px #333;
    behaviour(/PIE.htc);
  }
 #sideevent .events li {
    padding-bottom: 5px;
  }
 #sideevent .events li span {
    display: block;
    font-size: 12px;
    text-align: justify;
    color: #555;
  }
#sideevent  .events li span.title {
    font-weight: bold;
    color: #222;
  }
  .nobg{ background: none !important; color: white !important; font-size:18px !important}
  .black_overlay {
    background-color: black;
    display: none;
    height: 250%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1001;
}
.white_content {
    background-color: white;
    border: 3px solid #C9C9C9;
    display: none;
    height: auto;
    left: 25%;
    overflow: auto;
    padding: 16px;
    position: absolute;
    top: 25%;
    width:798px;
    z-index: 1002;
}

.footer .push {
/*height: 8em;*/
height: auto;
}
.footer .push{ clear:both}