/* stops shorter pages from jumping when there is no scrollbar */
html { min-height:100%; margin-bottom:1px; }

body {
	background-color: #FFF; /*sets the body background colour  */
	background-image: url(../images/background.gif); /*body background image */
	background-position: center; /*centres the background image */
	color: #27155b; /*default font colour on page*/
	font-family: Arial, Helvetica, sans-serif; /*default font on page*/
	font-size: 12px; /*default font size  set to 12px */
	margin: 0 auto;
	min-width: 770px;/*minimum width anything under you get scroll bars this prevents our page becoming smaller than the wrapper */
	padding: 0; /*padding set to zero */
	text-align: center; /* IE to make sure the layout is centred*/
	}
	
#wrapper {
background-color: #FFF; /*sets the background colour of our wrapper div to white */
background-image: url(../images/wrapper-background.gif); 
background-repeat: repeat-y;   /*sets the background image for the wrapper div, this creates the illusion of a column */
margin: 0 auto;/* sets the wrapper margins to zero */
padding: 0;/* sets the wrapper padding to zero */
text-align: left; /* aligns the text to the left, see also the IE hack in the body where we align the text centre */
width: 740px;/* sets the wrapper width */
border-left: 1px solid #a28fdb;
border-right: 1px solid #a28fdb;
border-top:1px solid #a28fdb;

}

/* header */
#header {
background-image: url(../images/header.jpg);     /*the background image for the leftlogo div*/
float: left;                                  /*positions the div to the left*/
height:  234px;        /* the height of our background image*/
width: 740px;  /* the width which is also the same as our background image*/
margin-top: 0px;  
background-repeat: no-repeat;   /*no repeat for our background image*/
border-bottom:1px solid #a28fdb;
}

#content {
width: 740px;/* the content div is the same as our wrapper div and inside the content div we have placed the nav div and the contentright div*/
clear: both; /* this is a clearer ; ensures the content is  placed below the logoleft and logoright divs*/
}

#content .contentright {
	float: right;
	text-align: left;
	width: 510px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:16px;
	background-color: White;
	padding-bottom: 5px;
}

.home {
	line-height:22px;
	font-size:14px;
}

.blacktext {
color: #3e2b7a;
font-weight:900;
}

 #content .contentright p {
	font-size:12px;
	line-height:16px;
}

 #content .contentright H1 {
	color: #3e2b7a;
	font-size: 16px;
	margin-top:12px; /*places a solid border under the H1*/
	border-bottom: 1px dotted #ae9fdb;
 }
 
#content .contentright H2 {
color: #3e2b7a;
font-size: 14px;
margin-top:20px;
border-bottom: 1px dotted #ae9fdb;   /*places a solid border under the H2*/
 }

#content .contentright H3 {
color: #3e2b7a;
font-size: 14px;
margin-top:20px;
margin-bottom: 3px;
 }
 
#nav {
float: left;
padding-top: 18px;/*IE hack to ensure our nav lines into position*/
padd\ing-top: 12px;  /*this and the following position the Nav in accordance with the wrapper background and also creates the appearence of a column*/
padding-left:10px;  /*sets the right to 10 pixels as to position the nav in accordance with the wrapper background*/
margin-right: 3px;
width: 192px;
}

/*styling the right navigation*/
#nav ul {
border-top: 1px solid White;  /*places a border on the top of the menu box*/
font-size: 12px;   /*sets the font size for the right nav*/
margin: 0;
padding: 0;
list-style-type: none;/*removes the list style*/
}

#nav ul li{
border: 1px solid White; /*sets a border*/	
border-width: 0 1px 1px 1px;/*sets the border width - none at top as we have already declared it on the ul element*/
margin: 0;/*set the margin to zero*/		
}

#nav a, 
#nav a:visited {
color: #3e2b7a; /*font colour */
display: block;   /*display set to block */
padding: 6px;    /*gives a bit of breathing space to our text from the block */
text-decoration: none;    /*removes the default underline*/
background-color: #ae9fdb;   /*background colour */
height: 1%;   /* bug fix for IE to create the block hover effect */
}

#nav a:hover {
color: #FFF;   /*hover font colour */
background-color: #3e2b7a;    /*hover background colour */
}

#nav #current {
color: #FFF;   /*hover font colour */
background-color: #3e2b7a;    /*hover background colour */
}

.reg {
	font-size:14px;
	line-height:18px;
}

#left {
	margin-top: 28px;
	border-top:#3e2b7a solid 1px;
	border-bottom:#3e2b7a solid 1px;
	color:#3e2b7a;
	font-size:12px;
	line-height:16px;
	text-align:center;
}

#left a,
#left a:visited {
background-color: transparent;
display:inline;
color:#000000;
text-decoration:none;
}

#left a:hover {
color: #77e81e;
background-color: transparent;
}

.bullets{
	line-height:16px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin-bottom:5px;
}
	

#donations {
	width:500px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:900;
	font-size:14px;
}

.amount20 {
	width:140px;
	margin:10px 10px 0 10px;
	float:left;
}

.amount50 {
	width:140px;
	margin:10px 10px 0 10px;
	float:left;
}

.amount100 {
	width:140px;
	margin:10px 10px 0 10px;
	float:left;
}

.amount200 {
	width:140px;
	margin:10px 10px 0 10px;
	float:left;
}

.amount300 {
	width:140px;
	margin:10px 10px 0 10px;
	float:left;
}

.amount500 {
	width:140px;
	margin:10px 10px 0 10px;
	float:left;
}

.cart {
	width:490px;
	margin:10px 0 20px 0;
	float:left;
}


#bracelets {
	width:500px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:900;
	font-size:14px;
}

.size7 {
	width:140px;
	margin:10px 10px 10px 10px;
	float:left;
}

.size75 {
	width:140px;
	margin:10px 10px 10px 10px;
	float:left;
}

.size8 {
	width:140px;
	margin:10px 10px 10px 10px;
	float:left;
}

.size5 {
	width:140px;
	margin:10px 10px 10px 10px;
	float:left;
}

.size6 {
	width:140px;
	margin:10px 10px 10px 10px;
	float:left;
}

.size7kids {
	width:140px;
	margin:10px 10px 10px 10px;
	float:left;
}

.cart2 {
	width:490px;
	margin:10px 0 20px 0;
	float:left;
}


#footer {
color: #3e2b7a;           /*font colour for the footer div*/
font-size: 10px;         /* font size*/
text-align: center;      /*aligns the text centre*/
width: 505px;           /*width of the footer div*/
padding: 10px;          
border-top: 1px dotted black;
margin-left: 214px;
font-family:Verdana, Arial, Helvetica, sans-serif;
clear:both;
}

/* HEADING STYLES */
h1 {
font-size: 16px;
}

h2 {
font-size: 14px;
}

h3 {
font-size: 12px;
}
/* DEFAULT LINK STYLES */
a:link{
color: #3e2b7a;
text-decoration: underline;/*removes the underline*/
}
a:visited{
color: #ae9fdb;
}
a:hover{
color: #8dd2ba;
}
a:active{
color: #3e2b7a;
}