/* Cascading Style Sheet (CSS) for sound gallery */
/* Author:    Robert Morris */
/* Copyright: Robert Morris 2010 */
/* Version:   0.1 */

/* Global HTML elements */

body           		{ font-family: tahoma, arial, sans-serif;color: #000000;background-image:url('../images/background.bmp');}
p 					{ margin-top: 0px; font-family: sans-serif; font-size: 13px;color:  }
h1 					{ margin: 0px; font-family: sans-serif; font-size: 12px; color: #000000; }
h2 					{ margin: 0px; font-family: sans-serif; font-size: 12px; color: #000000; }
h3 					{ margin: 0px; font-family: sans-serif; font-weight: bolder; font-size: 18px; color: #000000; }
h4 					{ margin: 0px; font-family: sans-serif; font-size: 10px; color: #333333; }
img 					{ border: 0; }
ul 					{ margin-top: 0px; font-family: sans-serif, font-size: 14px; }
a					{ margin-top: 0px; font-family: sans-serif; font-size: 13px; text-decoration: none; }
a:hover 				{ text-decoration:underline;}

/* General page layout */
/* Setup of containers: div,nav bar and holder for the page content */

#container 			{ position: absolute; top: 5px;	height: 500px; width: 800px; left: 50%; margin-left: -400px; background-image:url('../images/container.bmp'); }
#containerlarge 		{ position: absolute; top: 5px;	height: 900px; width: 800px; left: 50%; margin-left: -400px; background-image:url('../images/container.bmp'); }
#banner 			{ position: relative; top: 0px; left: 0px; height: 55px; width: 800px; }
#nav 				{ position: relative; top: 0px;left: 0px; height: 18px; width: 400px; background-color: #ffffff; font-weight: bolder;}

#leftContainer		{ position: absolute; top: 350px; left: 0px; height: 360px; width: 370px; }	
#centreContainer	{ position: absolute; top: 200px; left: 30px; height: 500px; width: 800px; text-align: center; }
#rightContainer		{ position: absolute; top: 350px; right: -10px; height: 360px; width: 380px; }
#rightContainerHome	{ position: absolute; top: 178px; right: 0px; height: 360px; width: 380px; }
#logosContainer		{ position: relative; left: 0px; height: 75px; width: 800px; }
#rightAlign			{ text-align: right; }
#leftContainerproducts		{ position: absolute; top: 350px; left: 0px; height: 260px; width: 350px; text-align: left; }	
#centreContainerproducts	{ position: absolute; top: 350px; left: 300px; height: 260px; width: 200px; text-align: left; }
#rightContainerproducts		{ position: absolute; top: 350px; right: -40px; height: 260px; width: 350px; text-align: left; }
#centreContainergallery1	{ position: absolute; top: 450px; left: 0px; height: 100px; width: 800px; text-align: center; }
#centreContainergallery2	{ position: absolute; top: 550px; left: 0px; height: 100px; width: 800px; text-align: center; }
#centreContainergallery3	{ position: absolute; top: 650px; left: 0px; height: 100px; width: 800px; text-align: center; }
#centreContainergallery4	{ position: absolute; top: 750px; left: 0px; height: 100px; width: 800px; text-align: center; }
#centreContainergallery5	{ position: absolute; top: 850px; left: 0px; height: 100px; width: 800px; text-align: center; }
#centreContainergallery6	{ position: absolute; top: 950px; left: 0px; height: 100px; width: 800px; text-align: center; }
#topContainergallery		{ position: absolute; top: 300px; left: 0px; height: 260px; width: 800px; text-align: left; }
#gallery1			{ position: absolute; top: 350px; left: 100px; height: 100px; width: 800px; text-align: center; }
#gallery2			{ position: absolute; top: 700px; left: 100px; height: 100px; width: 800px; text-align: center; }
#gallery3			{ position: absolute; top: 500px; left: 0px; height: 100px; width: 800px; text-align: center; }
#gallery4			{ position: absolute; top: 600px; left: 0px; height: 100px; width: 800px; text-align: center; }
#leftContainergallerytext1	{ position: absolute; top: 350px; left: 0px; height: 150px; width: 200px; }
#leftContainergallerytext2	{ position: absolute; top: 700px; left: 0px; height: 150px; width: 200px; }
#pagebanner 			{ position: relative; top: 20px; left: 0px; height: 120px; width: 800px; }
#centretextcontainer		{ position: absolute; top: 350px; left: 0px; height: 360px; width: 800px; }
#bottomtextcontainer		{ position: absolute; top: 650px; left: 0px; height: 80px; width: 800px;text-align: left; }	
#centreContainercontactus	{ position: absolute; top: 300px; left: 30px; height: 500px; width: 800px; text-align:left; }
#centreContainercontactuspicture{ position: absolute; top: 400px; left: 30px; height: 500px; width: 800px; text-align:center; }
#centreContainerICE		{ position: absolute; top: 350px; left: 0px; height: 100px; width: 500px; text-align: left; }
#rightContainerICE		{ position: absolute; top: 350px; right: -50px; height: 800px; width: 300px; }
#rollover			{ position: absolute; top: 450px; right: 5px; height: 360px; width: 380px; }
#centreContainerICE		{ position: absolute; top: 550px; left: 0px; height: 500px; width: 500px; text-align: left;}
#leftContainerlist		{ position: absolute; top: 500px; left: 0px; height: 360px; width: 120px; }
#leftContainerlist2		{ position: absolute; top: 500px; left: 260px; height: 360px; width: 70px; text-align: left;}
#leftContainerlist3		{ position: absolute; top: 496px; left: 80px; height: 360px; width: 120px; }

/* Nav */



#nav-menu ul		{ list-style: none; padding: 10; margin: 0; }
#nav-menu li		{ float: right; margin: 0 5px; }
#nav-menu li a		{ background: #ffffff bottom left repeat-x; line-height: 20px; float: left; width: 6em; display: inline; color: #999999; text-align: center; font-family:sans-serif; font-size: 11px;}

#nav-menu li a:hover	{color: #ff3300; text-decoration:none;}

/* Hide from IE5-Mac \*/
#nav-menu li a 		{ float: none; }

/* End hide */

#nav-menu			{ width: 800px; } 

.gallerycontainer{ position: absolute; top: 450px; left: 0px; height: 100px; width: 800px; text-align: left;}

.thumbnail img{border: 1px solid white; margin: 0 5px 5px 0;}

.thumbnail:hover{background-color: transparent;}

.thumbnail:hover img{border: 1px solid black;}

.thumbnail span{ /*CSS for enlarged image*/position: absolute;background-color: white;padding: 5px; left: -1000px;

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*/
visibility: visible;
top: 0;
left: 400px; /*position where enlarged image should offset horizontally */
z-index: 50;
}