body {
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	}

	h1 {
	font-size:18px;
	font-weight:normal;
	}
	
	h3 {
margin: 0 0 10px 0;
	}

#lefthead {
	float:left;
	width: 200px;
	padding: 10px 15px 10px 0;
	margin:0;
}

#lefthead img {
	border: 2px solid #8e8585;
	}

#lefthead img:hover {
	background-color: #e8e3e3;
}

#lefthead2 {
	float:left;
	width: 200px;
	padding: 0px 15px 10px 0;
	margin:0;
	text-align:center;
}

div.paypal {
	float: left;
	width: 200px;
	margin: 0;
	padding: 10px 15px 10px 0;
}

table.paypal {
	border-collapse:collapse;
}

table.paypal td {
border:2px solid #8e8585;
	padding:6px 20px 6px 20px;
	margin:0;
background-color:white;
}

#banner {
	float:left;
	width:530px;
}
	
#content {
	margin: 5px auto;
	width: 960px;
	padding: 0;
	color:#8e8585;
	font-size:15px;
	}
	
#content a {
	color:#8e8585;
	}
#pagecontent {	padding:20px 180px 20px 180px;}
.dictionary {
	text-align:center;
	color:#8e8585;
	font-family: 'Times New Roman';
	font-size:20px;
	width:530px;		height:3em;
	}

/* START=========HEADER MENU (Home / About / Contact / Prices) */

div.menu {
	float: right;
	margin-left: 595px;
	width: 200px;
	margin: 0;
	padding: 10px 15px 10px 0;
}

table.menu {
	border-collapse:collapse;
}

table.menu a {
/*width:125px;*/
display: block;
}

table.menu img {
border:none;
}

table.menu td {
border:2px solid #8e8585;
	padding:0;
	margin:0;
background-color:white;
}

div.menu a {
text-decoration:none;
padding: 0;
}

div.menu a:hover {
	background-color: #e8e3e3;
}

/* END===========HEADER MENU (Home / About / Contact / Prices) */
	
/* Navigation Menu */

#oldnavmenu {
	margin-bottom:20px;  /* Keep the gallery away from the bottom */
	clear:both;
	}

#oldnavmenu ul {
	list-style-type: none;
	list-style-image:none;
	margin: 0;
	padding: 0;
}						

#oldnavmenu li {
	display: inline; 
}		 

/* There used to be height definitions here.  But I changed to padding to create the equal heights due to some offensive renderings by you know what. */

#oldnavmenu li a {
	margin-right: 2px;
	padding: 3px 0 3px 0;
	color: #8e8585;
	border: 2px solid #8e8585;
	text-decoration:none; /*Don't want links underlined or nothing*/
	font-weight:bold;
	font-size: 15px;
	float: left;  /*Now let's make them all equal width and height.  Floating enables this*/
	width: 89px;
	text-align: center;
       /*background-image:url('http://www.peculiarpresents.co.uk/assets/buttons/arrows_padded_border_2.gif');*/
	}

#oldnavmenu li a:hover {
	background-color: #e8e3e3;
	}
	
#current {
	background-color: #8e8585;
	color:white;
}

	/*The following div adds some padding to vertically center a single line.  The height definition needs to be modified to accomodate this.  Might be worth changing to em's later on but this site depends on Flash so what effect would that have?  Maybe some accesability modifications later on, not now!*/

li a#singleline {
	padding-top:12px;
	padding-bottom:12px;
	}
	
/* The highlighting of the active button does use inline CSS styles placed into the a tag using a PHP function that sees whether this link refers to the current page or not.  Messy, I know.  One should generally avoid inline CSS BUT it I was finding it tricky to get it to work within the CSS what with the id singleline already doing stuff and just took the easy option.  Why not?  Inline overides everthing else so it's good for that! */

/* END Navigation Menu */
	

	
#footer {
	clear:both;	
	text-align:center;
	}

#footer a {
	text-decoration:none;
	font-weight:bold;
}

/*HOMEPAGE COLUMN LAYOUT */

#homegallery {
	float: left;
	margin: 0;
	padding: 20px 0 35px 7px;
	width: 520px;
	}

.vmenu {
	float: right;
	margin-left: 595px;
	width: 200px;
	margin: 0;
	padding: 20px 15px 35px 0;
	}

#homegalleryright {
	float: right;
	margin: 0;
	padding: 20px 40px 35px 10px;
	width: 530px;
	}

#leftmenu {
	float: left;
	width: 200px;
	margin: 0;
	padding: 20px 15px 35px 0;
	clear:both;
	}
	
	#rightmenu {
	float: right;
	width: 350px;
	padding: 20px;
	}
	
#rightmenua {
	width:200px;
	float:right;
	}
	
/* TILES COLUMN LAYOUT */

#tilesgallery {
	float: left;
	margin:0;
	padding: 20px 0 35px 10px;
	width: 240px;
	clear:both;
	}
	
#tilesgallery img {
	border: 2px solid #8e8585;
	margin-bottom: 20px;
	padding: 0;
}

#tilesspiel {
	float: right;
	margin-left: 260px;
	width: 520px;
	margin: 0;
	padding: 20px 15px 20px 0;
	}
	
#tilesspiel p {
	margin: 0 0 15px 0;
}

#stationerygallery {
	float: left;
	margin:0;
	padding: 20px 0 20px 10px;
	width: 240px;
	clear:both;
	}
	
#stationerygallery img {
	border: 2px solid #8e8585;
	padding: 0;
}

/* Homepage side menu, Technique replicated from the Berlitz Website development */

.vmenu ul {
	padding-left: 0px;
	margin: 0px;
}

.vmenu li {
	list-style: none;
}

/* Stops IE7 and FF3 putting borders around the img hyperlinks in the menu.  Also prevents FF3 placing a few pixels of space below the buttons and hence cocking up the look. */

.vmenu img {
	border:2px solid #8e8585;
	vertical-align:bottom;
	margin-bottom: 7px;
}

.vmenu img:hover {
	border:2px solid #e8e3e3;
}

/* This is also required to make sure the hyperlink aligns with the image correctly */

.vmenu a {
	border:none;
	vertical-align:bottom;
}

/*==BEGIN========3 col layout for Presents Page (13/07/09)=============*/
/*--Keeping it as simple as possible--*/

/*=======KEEPING EQUAL HEIGHT TEXT BOXES A SEPERATE FROM SOME CRAZY JAZZ TECHNIQUES LATER ON FOR THE IMAGES=====*/

#container{
	background-color:#fff;
	float:left;
	margin-left:10px;
	width:260px;
	border-left:260px solid #fff; /* The width and color of the left rail */
	border-right:260px solid #fff; /* The width and color of the right rail */
}
.leftRail{
	float:left;
	width:260px;
	margin-left:-260px;
	position:relative;
}
.center{
	float:left;
	width:260px;
	margin-right:-260px;
}
.rightRail{
	float:right;
	width:260px;
	margin-right:-260px;
	position:relative;
}

/* We'll let the left column be the one that drops in with the big images */

.leftRailBig{
	float:left;
	width:520px;
	margin-left:-260px;
	position:relative;
	text-align:center;
}
.rightRailBig{
	float:right;
	width:520px;
	margin-right:-260px;
	position:relative;
	text-align:center;
}


#container img {
margin-bottom:20px;
}

#container h3 {
margin-top:10px;
}

#container p {
padding:0px 20px 15px 0px;
margin:0;
font-size:13px;
}



/* AGAIIIIN !!! Homepage side menu, Technique replicated from the Berlitz Website development */

.vmenua {
	float: right;
	margin-left: 595px;
	width: 125px;
	margin: 0;
	padding: 10px 15px 10px 0;
	}

.vmenua ul {
	padding-left: 0px;
	margin: 0px;
}

.vmenua li {
	list-style: none;
}

.vmenua ul.box li a {

	display:block;
	text-decoration:none;
}

.vmenua ul.box li a {

}

/* Stops IE7 and FF3 putting borders around the img hyperlinks in the menu.  Also prevents FF3 placing a few pixels of space below the buttons and hence cocking up the look. */

.vmenua img {
	border-top:2px solid #8e8585;
	border-left:2px solid #8e8585;
	border-right:2px solid #8e8585;
	border-bottom:none;
	vertical-align:bottom;
}

.vmenua img:hover {
	background-color: #e8e3e3;
}

/* CSS TO MAKE IMAGE OVERLAY WORK */

.image-overlay { list-style: none; text-align: center;padding:0;margin:0; }
.image-overlay li {

}
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }

.image-overlay ul
{

}

.image-overlay a
{
margin-bottom:20px;
    float: left;
    background: #fff;
    overflow: hidden;
    position: relative;
}
.image-overlay img
{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.image-overlay .caption
{
    float: left;
    position: absolute;
    background-color: #000;
    width: 100%;
	cursor: pointer;
	/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
	margin: 10px 0 10px 2px;
    font-size: 20px;
    font-weight: bold;
	padding: 0 5px 0 5px;
}
.image-overlay p
{
	text-indent: 0;
	margin: 10px;
	font-size: 1em;
}

#shop {
	padding-top:30px;
}

#step1 img {
text-align:center;
}

.contentimg {
	margin-left:80px;
	}